<template>
  <div>
    <div class="content">
      <div class="content_item content_item_padding0">
        <div class="label">关键字</div>
        <div class="content_right">
          <el-input class="ename_input" placeholder="请输入关键字查询" v-model="importantProjectDto.keyword"></el-input>
          <el-checkbox-group v-model="importantProjectDto.keywordStr" class="keyword_checkbox">
            <el-checkbox v-for="item in keywordTypeList" :label="item.value" :key="item.label">{{item.label}}</el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <div class="content_item">
        <div class="label">基本信息</div>
        <div class="content_right">
          <div class="select-popper">
            <span :class="{color_text:importantProjectDto.province.length ||importantProjectDto.city.length ||importantProjectDto.area.length,}">
              行政区划{{importantProjectDto.province.length ||importantProjectDto.city.length ||importantProjectDto.area.length? importantProjectDto.province.length + importantProjectDto.city.length +importantProjectDto.area.length +"项": ""}}
              <i class="el-icon-caret-bottom"></i>
            </span>
            <el-cascader ref="address" class="cascader-region" v-model="addressType" :options="addressList" :props="props" @change="domicileChange"
              collapse-tags clearable></el-cascader>
          </div>
          <div class="select-popper">
            <span :class="{ color_text: importantProjectDto.year.length }">
              项目年度{{importantProjectDto.year.length? importantProjectDto.year.length + "项": ""}}
              <i class="el-icon-caret-bottom"></i>
            </span>
            <el-select @change="changeYear" v-model="importantProjectDto.year" class="select-multiple" multiple placeholder="请选择">
              <el-option v-for="(item, i) in years" :key="i" :label="item+'年'" :value="item">
              </el-option>
            </el-select>
          </div>
          <div class="select-popper">
            <span :class="{ color_text: importantProjectDto.fileTitle.length }">
              重点项目清单{{importantProjectDto.fileTitle.length? importantProjectDto.fileTitle.length + "项": ""}}
              <i class="el-icon-caret-bottom"></i>
            </span>
            <el-select v-model="importantProjectDto.fileTitle" class="select-multiple" multiple placeholder="请选择">
              <el-option v-for="(item, i) in fileTitleOptions" :key="i" :label="item" :value="item">
              </el-option>
            </el-select>
          </div>
          <el-dropdown @command="transactionPricehandleCommand" class="el-dropdown-land" placement="bottom-start" trigger="click"
            ref="transactionPriceShowPopper" :hide-on-click="false">
            <span class="el-dropdown-link" :class="importantProjectDto.startMoney ||importantProjectDto.endMoney ? 'color_text': ''">
              项目投资额{{importantProjectDto.startMoney ||importantProjectDto.endMoney? " 1项": ""}}<i class="el-icon-caret-bottom"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(item, i) in transactionPriceOptions" :class="importantProjectDto.startMoney == item.value[0] &&importantProjectDto.endMoney == item.value[1] &&
				                   !startMoney &&!endMoney? 'color_text': '' " :key="i" :command="item.value">{{ item.label }}</el-dropdown-item>
              <el-dropdown-item command="" style="padding: 0; text-indent: 20px">
                <div @mouseenter="transactionPriceShowPopper = true" @mouseleave="transactionPriceShowPopper = false">
                  <span :class="(startMoney || endMoney) &&importantProjectDto.startMoney ==startMoney &&
				                            importantProjectDto.endMoney == endMoney? 'color_text': '' ">
                    自定义<i class="el-icon-arrow-right"></i>
                  </span>
                  <div class="jabph_popper_box" style="position: absolute" v-if="transactionPriceShowPopper">
                    <div class="jabph_popper_wrap">
                      从
                      <el-input class="jabph_popper_input" v-limit-num clearable v-model="startMoney"></el-input>
                      万
                    </div>
                    <div class="jabph_popper_wrap">
                      到
                      <el-input class="jabph_popper_input" v-limit-num clearable v-model="endMoney"></el-input>
                      万
                    </div>
                    <div style="">
                      <el-button size="mini" @click="transactionPriceCancel">取消</el-button>
                      <el-button type="primary" size="mini" @click="transactionPricePopperConfirm">确定</el-button>
                    </div>
                  </div>
                </div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <div class="content_item">
        <div class="label">项目级别</div>
        <div class="content_right">
          <el-checkbox-group v-model="importantProjectDto.projectLevel" class="keyword_checkbox">
            <el-checkbox v-for="item in projectLevelOption" :label="item.value" :key="item.label">{{item.label}}</el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <div class="content_item content_item1">
        <div class="label" style="float:left;">项目类型</div>
        <div class="content_right">
          <el-checkbox-group v-model="importantProjectDto.buildingProjectType" class="checkbox_1122">
            <template v-for="(item,index) in projectTypeList">
              <el-checkbox v-if="index<showNum" :label="item" :key="index">{{item}}</el-checkbox>
            </template>
          </el-checkbox-group>
          <!--<span class="more" v-if="showNum==10" @click="showNum=99">更多<img src="@/assets/images/more.png" alt=""></span>-->
          <!--<span class="more more1" v-if="showNum==99" @click="showNum=10">收起<img src="@/assets/images/more.png" alt=""></span>-->
        </div>
      </div>
      <div class="content_item content_item_padding0">
        <div class="geduan">

        </div>
      </div>
      <div class="content_item content_item_padding0">

        <div class="search-new">
          <span @click="search()">查询</span>
          <span @click="reset">重置</span>
        </div>
      </div>

    </div>
    <div class="bottomlist">
      <div class="bottomlist-title">
        <div class="bottomlist-title-left">
          <p class="title-left">
            <span style="margin-right:4px;color:#005BBC;font-size: 22px;position: relative;top:3px;">·</span>共有<span style="color:#F56C6C;">{{total}}</span>条结果
            <span style="padding-left: 12px;">
              项目投资总额：<span style="color:#E6A23C;">{{sumMoney}}万元</span>
            </span>
          </p>
          <el-popover v-model="fieldshow" placement="bottom-start" trigger="click" popper-class="viewlist-el-popover">
            <ul class="pup_list pup_zhclist">
              <li v-for="(itme,i) in fieldOptions" :class="itme.status?'active':''" @click="handsequencingList(i)" :key="i">
                {{itme.value}}
              </li>
            </ul>
            <span slot="reference" class="toolbar-right-download">{{fieldText}}<i class="el-icon-arrow-down"
                :style="{transform:fieldshow?'rotate(180deg)':''}"></i>
            </span>
          </el-popover>
        </div>
        <div class="title-right">
          <p v-hasPermi="['radar:export:important']">
            <img src="@/assets/images/EXCEL.png" alt="">
            <span class="excel" @click="clickDialog">导出EXCEL</span>
          </p>
        </div>

      </div>
      <div class="chart" v-if="echartsDataState === false && !isSkeleton">
        <div class="chart-left">
          <div class="echarts-item">
            <div class="echarts-title">项目类型分布</div>
            <div id="echarts1" style="height: 240px"></div>
          </div>
          <div class="echarts-item">
            <div class="echarts-title">项目地区分布</div>
            <div id="echarts2" style="height: 240px"></div>
          </div>
        </div>
        <div class="chart-right" @click="handledialog">
          更<br/>多<br/>分<br/>析<br/>
          <i class="el-icon-more"></i>
        </div>
      </div>
      <div class="table-item-jf1" v-if="tableData.length==0&& !isSkeleton">
        <img class="item-jf-img" src="@/assets/images/kong.png" alt="">
        <div class="item-jf-titel">抱歉，没找到相关数据！</div>
        <div class="item-jf-text">建议调整关键词或筛选条件，重新搜索！</div>
      </div>
      <skeleton style="margin-left:16px;" v-if="isSkeleton"></skeleton>
      <ul class="bottomlist-content" v-if="tableData.length>0&& !isSkeleton">
        <li class="bottomlist-list" v-for="item in tableData">
          <p class="list-titel">
            <router-link :to="'/radar/MajorProject/details/'+ item.md5" tag="a" class="list-titel-a">
              <div class="project-name-of-level">
                <span v-if="item.projectLevel" class="project-of-level" :class="[getBackGround(item.projectLevel)]">{{item.projectLevel}}</span>
                <span class="project-of-name" v-html="item.projectName"></span>
              </div>
            </router-link>
          </p>
          <div class="content-label" v-if="item.province||item.city||item.area">
            <span class="list-label list-label-zb" v-if="item.province||item.city||item.area">
              {{item.province}}<template v-if="item.city">-{{item.city}}</template><template v-if="item.area">-{{item.area}}</template>
            </span>
            <!-- <span class="list-label list-label-zb" v-if="item.projectLevel">
              {{item.projectLevel}}
            </span> -->
          </div>

          <div class="list-content list-content1" v-if="item.year||item.planStartDate||item.planCompletionDate">
            <p class="list-content-text" v-if="item.year">
              <span>项目年度：</span>
              <span>{{item.year}}年</span>
            </p>
            <p class="list-content-text" v-if="item.planStartDate">
              <span>拟开工时间：</span>
              <span>{{item.planStartDate}}年</span>
            </p>
            <p class="list-content-text" v-if="item.planCompletionDate">
              <span>拟建成时间：</span>
              <span>{{item.planCompletionDate}}年</span>
            </p>
          </div>
          <div class="list-content list-content1"
            v-if="item.buildingProjectType||item.completedInvestment||item.completedPlanInvestment||item.projectTotalInvestment">
            <p class="list-content-text" v-if="item.buildingProjectType">
              <span>项目类型：</span>
              <span>{{item.buildingProjectType}}</span>
            </p>
            <p class="list-content-text" v-if="item.projectTotalInvestment>0">
              <span>项目投资金额：</span>
              <span>{{item.projectTotalInvestment}}万元</span>
            </p>
            <p class="list-content-text" v-if="item.completedInvestment>0">
              <span>已完成投资额：</span>
              <span>{{item.completedInvestment}}万元</span>
            </p>
            <p class="list-content-text" v-if="item.completedPlanInvestment>0">
              <span>年度投资金额：</span>
              <span>{{item.completedPlanInvestment}}万元</span>
            </p>
          </div>
          <div class="list-content list-content1" v-if="item.chargeDepartment||item.contactPersonAndTel||item.constructUnit">
            <p class="list-content-text" v-if="item.chargeDepartment">
              <span>主管部门：</span>
              <span v-html="item.chargeDepartment"></span>
            </p>
            <p class="list-content-text" v-if="item.constructUnit">
              <span>项目法人：</span>
              <span v-if="item.constructUnitId">
                <span class="blue" @click="getUipIdByCid(item.constructUnitId)" v-html="item.constructUnit"></span>
              </span>
              <span v-else v-html="item.constructUnit"></span>
            </p>
            <p class="list-content-text" v-if="item.contactPersonAndTel">
              <span>联系人及联系方式：</span>
              <span>{{item.contactPersonAndTel}}</span>
            </p>
          </div>
          <div class="list-content list-content1" v-if="item.projectScale">
            <p class="list-content-text" v-if="item.projectScale">
              <span>建设规模：</span>
              <span style="flex:1;" v-html="item.projectScale"></span>
            </p>
          </div>
        </li>
      </ul>
      <div class="pagination clearfix" v-if="total>0&&pageFlag">
        <el-pagination background :page-size="limit" :current-page="page" @current-change="handleCurrentChange" layout="prev, pager, next"
          :total="total>limit*500?501*limit:total">
        </el-pagination>
      </div>
    </div>
    <ExportDialog :data="exportData" v-if="exportData.dialogExportVisible" @clickEXCEL="clickEXCEL"></ExportDialog>

    <el-dialog title="重点项目清单宏观分析" :visible.sync="dialogEchartsVisible" width="1160px" append-to-body class="dialogEcharts" :close-on-click-modal="false">
      <div class="dialog-content">
        <div class="echarts-item">
          <div class="echarts-title">项目类型分布</div>
          <div id="echarts-xmlx" style="height: 240px"></div>
        </div>
        <div class="echarts-item">
          <div class="echarts-title">项目地区分布</div>
          <div id="echarts-xmdq" style="height: 240px"></div>
        </div>
        <div class="echarts-item">
          <div class="echarts-title">项目投资额分布</div>
          <div id="echarts-xmtz" style="height: 240px"></div>
        </div>
        <div class="echarts-item">
          <div class="echarts-title">项目级别分布</div>
          <div id="echarts-xmjb" style="height: 240px"></div>
        </div>
        <div class="echarts-item" style="width: 100%;">
          <div class="echarts-title">投资额前十业主</div>
          <div id="echarts-tze" style="height: 240px"></div>
        </div>
        <div class="echarts-item" style="width: 100%;">
          <div class="echarts-title">项目数前十业主</div>
          <div id="echarts-xms" style="height: 240px"></div>
        </div>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import jsk_data from '../../../../../public/jsk.json';
import { encodeStr } from "@/assets/js/common.js";
import skeleton from '@/views/project/projectList/component/skeleton';
import api from '@/api/radar/radar.js';
import ExportDialog from "../../../component/export-dialog"
import * as echarts from 'echarts';
export default {
  name: 'MajorProject',
  components: { skeleton,ExportDialog },
  data() {
    return {
      encodeStr,
      fieldshow: false,
      fieldText: '默认排序',
      field: 'year', //查询结果排序方式
      fieldOptions: [
        {
        key: "year",
        value: "默认排序",
        status: true,
      },
      {
        key: "planStartDate",
        value: "按拟开工时间倒序",
        status: false,
      },
      {
        key: "planCompletionDate",
        value: "按拟建成时间倒序",
        status: false,
      },
      {
        key: "projectTotalInvestment",
        value: "按项目总投资金额倒序",
        status: false,
      },
      ],
      isSkeleton: true,
      addressList: [],
      addressType: [],
      props: {
        multiple: true,
        expandTrigger: "hover",
        value: "id",
      },
      keywordTypeList: [
        {
          value: 'projectName',
          label: '项目名称'
        },
        {
          value: 'constructUnit',
          label: '项目法人'
        },
        {
          value: 'chargeDepartment',
          label: '主管单位'
        },
        {
          value: 'projectScale',
          label: '建设规模'
        }
      ],
      projectLevelOption: [
        {
          label: "省级",
          value: "省级",
        },
        {
          label: "市级",
          value: "市级",
        },
        {
          label: "区/县级",
          value: "区县级",
        }
      ],
      years: [],
      fileTitleOptions: [],
      importantProjectDto: {
        province: [],
        city: [],
        area: [],
        year: [],
        fileTitle: [],
        buildingProjectType: [],
        keywordStr: ['projectName'],
        keyword: '',
        projectLevel: [],
      },
      startMoney: "",
      endMoney: "",
      transactionPriceShowPopper: false,
      projectTypeList: [],
      transactionPriceOptions: [
        {
          value: [0, 20000],
          label: "2亿以下",
        },
        {
          value: [20000, ""],
          label: "2亿以上",
        },
        {
          value: [50000, ""],
          label: "5亿以上",
        },
        {
          value: [80000, ""],
          label: "8亿以上",
        },
        {
          value: [100000, ""],
          label: "10亿以上",
        },
      ],
      showNum: 10,
      provinceText: [],
      pageFlag: true,
      conditionsArr: [],
      tableData: [],
      domicile: [],
      total: 0,
      page: 1,
      limit: 20,
      dataEXCEL: {},
      dialogExportVisible: false,
      value: '',
      exportData:{
        title:'重点项目清单',
        dialogExportVisible:false,
        forData: [
          {label: '项目类型', prop: 'buildingProjectType',slot: true,minWidth: '100'},
          {label: '项目名称', prop: 'projectName', slot: true,minWidth: '200'},
          {label: '主管部门', prop: 'chargeDepartment',slot: true,minWidth: '200'},
          {label: '项目法人', prop: 'constructUnit', slot: true,minWidth: '150'},
          {label: '项目投资额', prop: 'projectTotalInvestment',slot: true,minWidth: '100'},
          {label: '项目地区', prop: 'domicile',minWidth: '100'},
          {label: '建设规模', prop: 'projectScale',minWidth: '400'},
          {label: '重点项目清单', prop: 'fileTitle',minWidth: '200'},
          {label: '附件链接', prop: 'fileUrl', slot: true,minWidth: '300'},
        ],
        exportTableData:[
          {
            "domicile": "广州",
            "chargeDepartment": "广州市商合局",
            "constructUnit": '鞍钢股份有限公司',
            "projectScale": "项目建设规划总面积约3000亩，其中商住用地面积2000亩，文化旅游综合用地约1000亩，打造集“市井民俗文化体验、休闲度假、亲子研学等”为一体的复合型文化旅游目的地，企业已完成项目规划方案。",
            "fileTitle": "广州2023年度重点项目清单.pdf",
            "fileUrl": "http://file.jiansheku.com/key_project/b9e22fbf2e409642aa97f8238e934272.pdf",
            "buildingProjectType": "房建工程",
            "projectTotalInvestment": "1355万元",
            "projectName": "广州市产业园区配套基础设施建设",
          },
          {
            "domicile": "重庆",
            "chargeDepartment": "国网重庆江津区供电公司",
            "constructUnit": '国网重庆江津区供电公司',
            "projectScale": "新建110kV变电站1座，主变容量2*50MVA，新建110kV线路20km",
            "fileTitle": "重庆市2023年度重点项目清单.xlsx",
            "fileUrl": "http://file.jiansheku.com/key_project/b9e22fbf2e409642aa97f8238e934272.pdf",
            "buildingProjectType": "电力工程",
            "projectTotalInvestment": "5056万元",
            "projectName": "重庆江津市110kV输变电工程...",
          },
        ],
        exportEXCEL:{}
      },
      dialogEchartsVisible:false,
      echartsData:{},
      echartsDataState:false,
      sumMoney:0,
    };
  },
  mounted() {
    this.addressListfn();
    this.search();
    this.getComdtion();
    this.getImportantSelect();
  },
  methods: {
    getBackGround(key) {
      switch (key) {
        case "市级":
          return "the-city";
        case "省级":
          return "the-province";
        case "区县级":
          return "the-area";
        default:
          break;
      }
    },
    getComdtion() {
      api.getImportantCondition().then(res => {
        if (res.code == 200) {
          this.years = res.data.year;
          this.projectTypeList = res.data.type;
        }
      });
    },
    changeYear() {
      this.fileTitleOptions = [];
      if (this.importantProjectDto.year.length) {
        this.getImportantSelect();
      }
    },
    getImportantSelect() {
      let data = {
        year: this.importantProjectDto.year.join(','),
        province: this.importantProjectDto.province.join(','),
        city: this.importantProjectDto.city.join(','),
        area: this.importantProjectDto.area.join(','),
      };
      api.getImportantSelect(data).then(res => {
        if (res.code == 200) {
          this.fileTitleOptions = res.data;
        }
      });
    },
    refresh(value) {
      if (value) {
        this.$router.go(0);
      }
    },
    search(page, limit, exportFlag) {
      this.isSkeleton = true;
      if (!page) {
        this.page = 1;
      }
      if (!limit) {
        this.limit = 20;
      }
      if (!page && !limit) {
        this.reloadPage();
      }
      var data = JSON.parse(JSON.stringify(this.importantProjectDto));
      data.province = data.province.join(",");
      data.city = data.city.join(",");
      data.area = data.area.join(",");
      data.keywordStr = data.keywordStr.join(",");
      data.projectLevel = data.projectLevel.join(",");
      data.year = data.year.join(",");
      data.fileTitle = data.fileTitle.join(",");
      data.buildingProjectType = data.buildingProjectType.join(",");
      for (var i in data) {
        if (!data[i]) {
          delete data[i];
        }
      }
      let params = {
        page: {
          page: this.page,
          limit: this.limit,
          field: this.field,
          "order": "desc"
        },
        importantProjectDto: data,
      };
      this.dataEXCEL = JSON.parse(JSON.stringify(params));;
      api.getImportantPage(params).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.total = res.data.total;
        } else {
          this.$message.error(res.msg);
        }
      }).catch(error => {

      });
      api.zdxmqdjctj(params).then(res => {
        this.isSkeleton = false;
        if(res.code === 200 && res.data){
          this.echartsDataState=false;
          this.echartsData=res.data;
          this.initChart(res.data)
          api.zdxmqdtopten(params).then(res => {
            this.echartsData.topTenCompany=res.data.topTenCompany;
            this.echartsData.topTenCompanyMoney=res.data.topTenCompanyMoney;
          }).catch(error => {

          });
        }else {
          this.echartsDataState=true;
        }

      }).catch(error => {

      });
      api.zdxmqdzjetj(params).then(res => {
        this.sumMoney=res.data.sumMoney
      }).catch(error => {

      });
    },
    getUipIdByCid(companyId) {
      var params = [companyId];
      api.getUipIdByCid(params).then(res => {
        if (res.code == 200) {
          if (res.data && res.data.length > 0 && res.data[0].uipId) {
            this.$router.push({ path: '/enterprise/' + this.encodeStr(companyId) });
          } else {
            this.$router.push({ path: '/company/' + this.encodeStr(companyId) });
          }
        }
      }).catch(error => {

      });
    },
    //关闭支付弹窗
    resolve(value) {
      if (value) {
        this.$router.go(0);
      }
    },
    changeMoney(text) {
      if (
        this.importantProjectDto.startMoney &&
        this.importantProjectDto.endMoney &&
        Number(this.importantProjectDto.startMoney) >
        Number(this.importantProjectDto.endMoney)
      ) {
        this.$message.warning("最低金额不能大于最高金额！");
        text == "start" ?
          (this.importantProjectDto.startMoney = "") :
          (this.importantProjectDto.endMoney = "");
      }
    },
    reloadPage() {
      this.pageFlag = false;
      this.$nextTick(() => {
        this.pageFlag = true;
      });
    },
    handleCurrentChange(page) {
      if (page > 500) {
        this.$message.warning(`对不起，最多只能访问500页`);
        this.reloadPage();
      } else {
        this.page = page;
        this.search(page, this.limit);
      }
    },
    handleSizeChange(limit) {
      this.limit = limit;
      this.search(this.page, limit);
    },
    deleteDomicile() {
      this.$refs.address.handleClear();
    },
    domicileChange() {
      let arr = this.$refs.address.getCheckedNodes();
      let province = [],
        city = [],
        area = [];
      this.domicile = [];
      for (var i in arr) {
        if (arr[i].parent) {
          if (!arr[i].parent.checked) {
            arr[i].hasChildren && city.push(arr[i].value);
            arr[i].hasChildren && this.domicile.push(arr[i].label);
            !arr[i].hasChildren && area.push(arr[i].value);
            !arr[i].hasChildren && this.domicile.push(arr[i].label);
          }
        } else {
          province.push(arr[i].value);
          this.domicile.push(arr[i].label);
        }
      }
      var obj = JSON.parse(JSON.stringify(this.importantProjectDto));
      obj.province = province;
      obj.city = city;
      obj.area = area;
      this.importantProjectDto = obj;
      this.fileTitleOptions = [];
      if (this.domicile.length) {
        this.getImportantSelect();
      }
    },
    transactionPricehandleCommand(command) {
      if (command) {
        this.$refs.transactionPriceShowPopper.hide();
        var obj = JSON.parse(JSON.stringify(this.importantProjectDto));
        this.startMoney = "";
        this.endMoney = "";
        if (command == "不限") {
          obj.startMoney = "";
          obj.endMoney = "";
        } else {
          obj.startMoney = command[0];
          obj.endMoney = command[1];
        }
        this.importantProjectDto = obj;
      }
    },
    transactionPriceCancel() {
      this.transactionPriceShowPopper = false;
      this.$refs.transactionPriceShowPopper.hide();
    },
    transactionPricePopperConfirm() {
      if (
        this.startMoney &&
        this.endMoney &&
        !(Number(this.endMoney) > Number(this.startMoney))
      ) {
        return this.$message.warning("最小值必须小于最大值,请重新输入！");
      }
      this.transactionPriceShowPopper = false;
      var obj = JSON.parse(JSON.stringify(this.importantProjectDto));
      obj.startMoney = this.startMoney;
      obj.endMoney = this.endMoney;
      this.importantProjectDto = obj;
      this.$refs.transactionPriceShowPopper.hide();
    },
    addressListfn() {
      var str = [];
      for (let x = 0; x < 3; x++) {
        for (let i = 0; i < jsk_data.length; i++) {
          if (jsk_data[i].regionLevel == x + 1 && x + 1 == 1) {
            str.push({
              id: jsk_data[i].id,
              label: jsk_data[i].regionName,
              short: jsk_data[i].short,
              value: jsk_data[i].parentId,
              children: jsk_data[i].id == 900000 ? undefined : [],
            });
          } else if (jsk_data[i].regionLevel == x + 1 && x + 1 == 2 && str) {
            for (let j = 0; j < str.length; j++) {
              if (str[j].id == jsk_data[i].parentId) {
                str[j].children.push({
                  id: jsk_data[i].id,
                  label: jsk_data[i].regionName,
                  short: jsk_data[i].short,
                  value: jsk_data[i].parentId,
                  children: [],
                });
              }
            }
          } else if (jsk_data[i].regionLevel == x + 1 && x + 1 == 3) {
            for (let j = 0; j < str.length; j++) {
              if (str[j].children) {
                for (let k = 0; k < str[j].children.length; k++) {
                  if (str[j].children[k].id == jsk_data[i].parentId) {
                    str[j].children[k].children.push({
                      id: jsk_data[i].id,
                      label: jsk_data[i].regionName,
                      short: jsk_data[i].short,
                      value: jsk_data[i].parentId,
                    });
                  }
                }
              }
            }
          }
        }
      }
      this.addressList = str;
    },
    reset() {
      Object.assign(this.$data, this.$options.data.call(this)); //重置data
      this.init();
      this.$emit("reset");
    },
    init() {
      this.search();
      this.addressListfn();
      this.getComdtion();
    },
    handsequencingList(index) {
      this.fieldshow = false;
      this.field = this.fieldOptions[index].key;
      for (let i = 0; i < this.fieldOptions.length; i++) {
        this.fieldOptions[i].status = false;
      }
      this.fieldText = this.fieldOptions[index].value;
      this.fieldOptions[index].status = true;
      this.search();
    },
    clickDialog(){
      this.exportData.dialogExportVisible=true;
    },
    clickEXCEL(value,title) {
      if(this.tableData.length === 0){
        this.$message.error('当前信息列表数据为空，请重新筛选数据');
        return
      }
      if(value > 2000){
        return
      }
      this.dataEXCEL.exportExeclName=title;
      if(value){
        this.dataEXCEL.exportCount=value
      }else {
        this.dataEXCEL.exportCount=2000;
      }
      api.radarExport(this.dataEXCEL).then(res => {
        if(res.code === 200){
          this.exportData.exportEXCEL=true;
        }else {
          this.$message.error(res.msg);
        }
      })
    },
    cancel(){
      this.exportData.dialogExportVisible=false;
      this.exportData.exportEXCEL={}
    },
    handledialog(){
      this.dialogEchartsVisible=true;
      this.initChart1(this.echartsData)
    },
    initChart(row) {
      var data=[];
      for(let key in row.projectTypeList){
        for(const i in row.projectTypeList[key]){
          var obj={};
          obj.name=i;
          obj.value=row.projectTypeList[key][i];
          data.push(obj)
        }
      }
      var data1=[];
      for(let key in row.provinceList){
        for(const i in row.provinceList[key]){
          var obj={};
          obj.name=i;
          obj.value=row.provinceList[key][i];
          data1.push(obj)
        }
      }

      this.$nextTick(() => {
        let myChart = echarts.init(document.getElementById("echarts1"))
        let option ={
          tooltip: {
            trigger: 'item',
          },
          // legend: {
          //   type: 'scroll',
          //   orient: 'horizontal',
          //   bottom: 0,
          //   data: data,
          //   itemHeight:8,
          //   itemWidth:12,
          //   pageButtonPosition: 'end',
          // },
          color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
          series: [
            {
              type: 'pie',
              radius: '85%',
              center: ['50%', '50%'],
              data: data,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        myChart.setOption(option);
        let myChart1 = echarts.init(document.getElementById("echarts2"))
        let option1 ={
          tooltip: {
            trigger: 'item',
          },
          // legend: {
          //   type: 'scroll',
          //   orient: 'horizontal',
          //   bottom: 0,
          //   data: data1,
          //   itemHeight:8,
          //   itemWidth:12,
          //   pageButtonPosition: 'end',
          // },
          color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
          series: [
            {
              type: 'pie',
              radius: '85%',
              center: ['50%', '50%'],
              data: data1,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        myChart1.setOption(option1);

        window.addEventListener("resize", function () {
          myChart.resize();//图表跟随页面大小变化宽度
          myChart1.resize();//图表跟随页面大小变化宽度
        });
      })

    },

    initChart1(row) {
      let data=[];
      for(let key in row.projectTypeList){
        for(const i in row.projectTypeList[key]){
          let obj={};
          obj.name=i;
          obj.value=row.projectTypeList[key][i];
          data.push(obj)
        }
      }
      let data1=[];
      for(let key in row.provinceList){
        for(const i in row.provinceList[key]){
          let obj={};
          obj.name=i;
          obj.value=row.provinceList[key][i];
          data1.push(obj)
        }
      }

      let data2=[]
      for(let i=0; i<row.moneyRange.length; i++){
        let obj={};
        obj.name=row.moneyRange[i].rangeName;
        obj.value=row.moneyRange[i].rate;
        data2.push(obj)
      }

      let data3=[];
      for(let key in row.levelList){
        for(const i in row.levelList[key]){
          let obj={};
          obj.name=i;
          obj.value=row.levelList[key][i];
          data3.push(obj)
        }
      }

      let data4=[];
      for(let key in row.topTenCompanyMoney){
        for(const i in row.topTenCompanyMoney[key]){
          let obj={};
          obj.name=i;
          obj.value=row.topTenCompanyMoney[key][i]/10000;
          data4.push(obj)
        }
      }
      let data5=[];
      for(let key in row.topTenCompany){
        for(const i in row.topTenCompany[key]){
          let obj={};
          obj.name=i;
          obj.value=row.topTenCompany[key][i];
          data5.push(obj)
        }
      }

      this.$nextTick(() => {
        let myChart = echarts.init(document.getElementById("echarts-xmlx"))
        let option ={
          tooltip: {
            trigger: 'item',
          },
          // legend: {
          //   type: 'scroll',
          //   orient: 'horizontal',
          //   bottom: 0,
          //   data: data,
          //   itemHeight:8,
          //   itemWidth:12,
          //   pageButtonPosition: 'end',
          // },
          color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
          series: [
            {
              type: 'pie',
              radius: '75%',
              center: ['50%', '50%'],
              data: data,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        myChart.setOption(option);

        let myChart1 = echarts.init(document.getElementById("echarts-xmdq"))
        let option1 ={
          tooltip: {
            trigger: 'item',
          },
          color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
          series: [
            {
              type: 'pie',
              radius: '75%',
              center: ['50%', '50%'],
              data: data1,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        myChart1.setOption(option1);

        let myChart2 = echarts.init(document.getElementById("echarts-xmtz"))
        let option2 ={
          tooltip: {
            trigger: 'item',
          },
          color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
          series: [
            {
              type: 'pie',
              radius: '75%',
              center: ['50%', '50%'],
              data: data2,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        myChart2.setOption(option2);

        let myChart3 = echarts.init(document.getElementById("echarts-xmjb"))
        let option3 ={
          tooltip: {
            trigger: 'item',
          },
          color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
          series: [
            {
              type: 'pie',
              radius: '75%',
              center: ['50%', '50%'],
              data: data3,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        myChart3.setOption(option3);

        let myChart4 = echarts.init(document.getElementById("echarts-tze"))
        let option4 ={
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          xAxis: {
            type: 'category',
            axisLabel: {
              formatter: function (params) {
                var str = "";                 // 最终拼接成的字符串
                var paramsLen = params.length;// 获取每项文字的个数
                var len = 6;                  // 每行能显示的字的个数（根据实际情况自己设置）
                var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
                if (paramsLen > len) {        //大于设定的len就换行，不大于就不变化
                  for (var i = 0; i < rowNumber; i++) {
                    var temp = "";            // 表示每一次截取的字符串
                    var start = i * len;      // 开始截取的位置
                    var end = start + len;    // 结束截取的位置
                    if (i == rowNumber - 1) { // 最后一次不换行
                      temp = params.substring(start, paramsLen);
                    } else {                  // 每一次拼接字符串并换行
                      temp = params.substring(start, end) + "\n";
                    }
                    str += temp;              // 最终拼成的字符串
                  }
                } else {                      // 给新的字符串赋值
                  str = params;
                }
                return str;                   //返回字符串
              }
            },
            axisTick: false, //坐标轴刻度
            axisPointer: {
              type: 'shadow'
            },
            data: data4.map(item => item.name),
          },
          yAxis: [
            {
              type: 'value',
              axisLabel: { //坐标轴刻度标签的相关设置
                color:"#666666"
              },
              name: '单位：亿元',
              nameLocation: 'end',
              nameTextStyle: {
                padding: [0, 10, 0, -30],    // 四个数字分别为上右下左与原位置距离
                color: '#666666',
              }
            },
          ],
          grid: {
            top:40,
            left:60,
            right:20,
            bottom:50,
          },
          series: [
            {
              name:'项目金额',
              type: 'bar',
              barWidth: 20,
              tooltip: {
                valueFormatter: function (value) {
                  return value;
                }
              },
              itemStyle: {
                normal:{
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: '#E49708'
                  }, {
                    offset: 1,
                    color: '#E49708'
                  }]),
                  // barBorderRadius:[20,20, 0, 0]
                }
              },
              data:data4.map(item => item.value),
            }
          ]
        }
        myChart4.setOption(option4);


        let myChart5 = echarts.init(document.getElementById("echarts-xms"))
        let option5 ={
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          xAxis: {
            type: 'category',
            axisLabel: {
              formatter: function (params) {
                var str = "";                 // 最终拼接成的字符串
                var paramsLen = params.length;// 获取每项文字的个数
                var len = 6;                  // 每行能显示的字的个数（根据实际情况自己设置）
                var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
                if (paramsLen > len) {        //大于设定的len就换行，不大于就不变化
                  for (var i = 0; i < rowNumber; i++) {
                    var temp = "";            // 表示每一次截取的字符串
                    var start = i * len;      // 开始截取的位置
                    var end = start + len;    // 结束截取的位置
                    if (i == rowNumber - 1) { // 最后一次不换行
                      temp = params.substring(start, paramsLen);
                    } else {                  // 每一次拼接字符串并换行
                      temp = params.substring(start, end) + "\n";
                    }
                    str += temp;              // 最终拼成的字符串
                  }
                } else {                      // 给新的字符串赋值
                  str = params;
                }
                return str;                   //返回字符串
              }
            },
            axisTick: false, //坐标轴刻度
            axisPointer: {
              type: 'shadow'
            },
            data: data5.map(item => item.name),
          },
          yAxis: [
            {
              type: 'value',
              axisLabel: { //坐标轴刻度标签的相关设置
                color:"#666666"
              },
              name: '单位：个',
              nameLocation: 'end',
              nameTextStyle: {
                padding: [0, 10, 0, -30],    // 四个数字分别为上右下左与原位置距离
                color: '#666666',
              }
            },
          ],
          grid: {
            top:40,
            left:60,
            right:20,
            bottom:50,
          },
          series: [
            {
              name:'项目数量',
              type: 'bar',
              barWidth: 20,
              tooltip: {
                valueFormatter: function (value) {
                  return value;
                }
              },
              itemStyle: {
                normal:{
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: '#E49708'
                  }, {
                    offset: 1,
                    color: '#E49708'
                  }]),
                  // barBorderRadius:[20,20, 0, 0]
                }
              },
              data:data5.map(item => item.value),
            }
          ]
        }
        myChart5.setOption(option5);


        window.addEventListener("resize", function () {
          myChart.resize();//图表跟随页面大小变化宽度
          myChart1.resize();//图表跟随页面大小变化宽度
          myChart2.resize();//图表跟随页面大小变化宽度
          myChart3.resize();//图表跟随页面大小变化宽度
          myChart4.resize();//图表跟随页面大小变化宽度
          myChart5.resize();//图表跟随页面大小变化宽度

        });
      })

    },

  },
};
</script>
<style lang="scss" scoped>
.content {
  padding: 0px 16px;
  padding-top: 16px;
  border-radius: 4px 4px 4px 4px;
  background: #ffffff;
  .content_item {
    padding-top: 18px;
    display: flex;
    align-items: baseline;
    .label {
      width: 84px;
      font-size: 14px;
      font-weight: 400;
      color: rgba(35, 35, 35, 0.8);
    }
    .content_right {
      .ename_input {
        width: 596px;
        margin-right: 20px;
        ::v-deep .el-input__inner::placeholder {
          color: rgba(35, 35, 35, 0.2) !important;
        }
      }
      .keyword_checkbox {
        margin-top: 6px;
      }
      .el-checkbox-group {
        display: inline-block;
      }
      .checkbox_1122 {
        /*width: 1122px;*/
        margin-right: 6px;
      }
      .el-checkbox {
        margin-right: 24px;
        /*margin-bottom: 16px;*/
        ::v-deep .el-checkbox__label {
          padding-left: 8px;
        }
      }
      .more {
        font-size: 12px;
        cursor: pointer;
        color: #0081ff;
        img {
          width: 6px;
          margin-bottom: 2px;
          height: 4px;
          margin-left: 4px;
        }
      }
      .more1 {
        img {
          transform: rotate(180deg);
        }
      }
    }

    .item_ckquery_list {
      display: flex;
    }

    .item_ckquery_list .el-input__icon {
      position: relative;
      top: 1px;
    }
    .ckquery_list_right {
      width: 640px;
    }
    .register_count_ipt {
      margin-left: 0px;
    }
    .register_count_ipt .el-input__inner {
      width: 174px;
    }
    ::v-deep .el-input-group__prepend {
      padding: 0 8px;
    }
    .content-projecttype {
      display: flex;
      align-items: center;
      justify-content: center;
      .projecttype {
        font-weight: 400;
        color: #232323;
        padding: 1px 5px;
        margin-right: 4px;
        cursor: pointer;
        border-radius: 3px 3px 3px 3px;
        font-size: 14px;
      }
      .projecttype:first-child {
        padding-left: 0px;
      }
      .projecttype:hover {
        background: #f3f4f5;
        padding: 1px 5px;
      }
      .activetype {
        background: #f3f4f5;
        padding: 1px 5px !important;
      }
    }
  }
  .content_item1 {
    display: block;
  }
  .content_item_padding0 {
    padding: 0;
  }
}
.bottomlist {
  width: 100%;
  background-color: #ffffff;

  border-radius: 4px 4px 4px 4px;
  .bottomlist-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding: 16px;
    border-bottom: 1px solid #efefef;

    .title-right {
      display: flex;
      align-items: center;

      p:last-child {
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: 400;
        color: rgba(35, 35, 35, 0.8);
      }
      img {
        width: 18px;
        height: 18px;
      }
      .excel {
        cursor: pointer;
      }
    }
    .bottomlist-title-left {
      display: inline-flex;
      align-items: center;
      .title-left {
        height: 16px;
        line-height: 16px;
        font-size: 12px;
        font-weight: 400;
        color: #3d3d3d;
      }
    }
  }
  .bottomlist-content {
    padding-bottom: 0px;
  }
  .bottomlist-list {
    padding: 16px;
    font-size: 14px;
    border-bottom: 1px solid #efefef;
    padding-bottom: 14px;
    .list-titel {
      font-size: 16px;
      font-weight: 700;
      color: #3d3d3d;
      line-height: 19px;
      .list-titel-a {
        text-decoration: none;
        color: #3d3d3d;
      }
      a:hover,
      a:visited,
      a:link,
      a:active {
        color: #3d3d3d;
      }
    }
    .content-label {
      margin-top: 8px;
      .list-label {
        background: #f3f3ff;
        color: #8491e8;
        border-radius: 1px 1px 1px 1px;
        padding: 3px 7px;
        font-size: 12px;
        margin-right: 8px;
      }
    }

    .list-content {
      margin-top: 8px;
      display: flex;
      justify-content: start;
      align-items: center;

      .list-content-text {
        display: flex;
        justify-content: start;
        align-items: baseline;
        margin-right: 32px;
        font-size: 14px;

        span:first-child {
          font-weight: 400;
          color: rgba(35, 35, 35, 0.4);
          line-height: 20px;
        }
        span:last-child {
          font-weight: 400;
          color: rgba(35, 35, 35, 0.8);
          line-height: 20px;
        }
        .blue {
          color: #0081ff !important;
          cursor: pointer;
        }
      }
    }
    .list-addree {
      width: auto;
      background: #f3f4f5;
      display: inline-flex;
      margin-top: 7px;
      .list-content-text {
        margin-top: 0px;
        span {
          line-height: 30px !important;
        }
      }
      img {
        width: 14px;
        margin: 0 8px;
      }
    }
    .list-content1 {
      margin-top: 12px;
    }

    .project-name-of-level {
      display: flex;
      align-items: center;

      .project-of-level {
        height: 22px;
        line-height: 22px;
        text-align: center;
        padding: 0px 4px;
        font-size: 12px;
				font-weight: 400;
        color: #fff;
        border-radius: 2px;
        box-sizing: border-box;
        margin-right: 8px;

        &.the-city {
          background: #ff8c00;
        }

        &.the-province {
          background: #0081ff;
        }

        &.the-area {
          background: #0cbc6d;
        }
      }
    }
  }
  .bottomlist-list:hover {
    background: #f6f9fc;
    cursor: pointer;
  }
  .pagination {
    padding: 14px;
    .el-pagination {
      float: right;
    }
  }

  .chart{
    height: 306px;
    display: flex;
    margin: 16px 20px;
    width: calc(100% - 40px);
    .chart-left{
      height: 306px;
      border: 1px solid #EFEFEF;
      border-radius: 4px;
      width: calc(100% - 74px);
      display: flex;
      .echarts-title{
        color: #303133;
        font-size: 14px;
        font-weight: 700;
        padding-bottom: 14px;
      }
      .echarts-item{
        width: calc(50% - 16px);
        padding: 16px 0 16px 16px;
      }
    }
    .chart-right{
      height: 306px;
      border-radius: 8px;
      border: 1px solid #1373D9;
      color: #1373D9;
      text-align: center;
      font-size: 14px;
      padding-top: 103px;
      cursor: pointer;
      margin-left: 16px;
      width: 56px;
    }
    .chart-right:hover{
      background: #E8F1FC;
    }
  }

}
.jabph_popper_box {
  left: 101px;
}

.dialogEcharts{
  ::v-deep .el-dialog {
    .el-dialog__body{
      padding: 16px 19px 0 16px;
      height: 664px;
      overflow: auto;
    }
    .echarts-item{
      border: 1px solid #DCDFE6;
      width: 550px;
      display: inline-block;
      border-radius: 4px;
      padding: 16px;
      margin-bottom: 16px;
    }
    .echarts-item:nth-child(2){
      margin-left: 16px;
    }
    .echarts-item:nth-child(4){
      margin-left: 16px;
    }
  }
}

.dialogExport {
  ::v-deep .el-dialog {
    .el-dialog__header {
      height: 48px;
      line-height: 48px;
      padding: 0 16px;
      border-bottom: 1px solid #e1e1e1;
      font-weight: bold;
      color: #1d2129;
      font-size: 16px;
      .tip-img {
        width: 18px;
        height: 18px;
        margin-right: 7px;
        margin-bottom: -3px;
      }
      .el-dialog__headerbtn {
        font-size: 20px;
        font-weight: bold;
        top: 15px;
        .el-dialog__close {
          color: #999999;
        }
      }
    }
    .el-dialog__body {
      padding: 16px;
      .input {
        margin-top: 16px;
        .el-input {
          width: 160px;
          border-radius: 2px;
          height: 32px;
          .el-input__inner {
            height: 32px;
            line-height: 32px;
          }
        }
        .el-input-group__append {
          padding: 0 14px;
        }
        p {
          color: #ff3c3c;
          font-size: 12px;
          margin-left: 12px;
          display: inline-block;
          i {
            font-size: 14px;
            margin-right: 4px;
          }
        }
      }
      .content {
        text-align: center;
        margin-top: 36px;
        .success {
          width: 64px;
          height: 64px;
          margin-bottom: 16px;
        }
        p {
          padding: 0;
          margin: 0;
        }
        .p1 {
          color: #232323;
          font-size: 16px;
          margin-bottom: 8px;
        }
        .p2 {
          color: rgba(35, 35, 35, 0.4);
          font-size: 14px;
          span {
            color: #0081ff;
            cursor: pointer;
          }
        }
      }
    }
    .el-dialog__footer {
      text-align: center;
      padding-bottom: 24px;
    }
  }
}
</style>

