中铁二十局

dsk-operate-ui/.env.development

 # 页面标题
-VUE_APP_TITLE = 数字化经营履约全生命链路管理系统
+VUE_APP_TITLE = 中铁二十局市场经营信息服务系统
 
 # 开发环境配置
 ENV = 'development'
 
-# 数字化经营履约全生命链路管理系统/开发环境
+# 中铁二十局市场经营信息服务系统/开发环境
 VUE_APP_BASE_API = '/prod-api'
 
 # 路由懒加载
@@ -12,8 +12,8 @@ VUE_CLI_BABEL_TRANSPILE_MODULES = true
 
 
 # 子系统地址
-VUE_APP_SUB_SYSTEM_ADDRESS = "https://pre-plug.jiansheku.com"
-# VUE_APP_SUB_SYSTEM_ADDRESS = "http://192.168.60.9:3400"
+# VUE_APP_SUB_SYSTEM_ADDRESS = "https://pre-plug.jiansheku.com"
+VUE_APP_SUB_SYSTEM_ADDRESS = "http://192.168.60.9:3400"
 
 # Bi大屏系统地址
 VUE_APP_BI_SYSTEM_ADDRESS = "https://192.168.60.104:8001"

dsk-operate-ui/.env.production

 # 页面标题
-VUE_APP_TITLE = 数字化经营履约全生命链路管理系统
+VUE_APP_TITLE = 中铁二十局市场经营信息服务系统
 
 # 生产环境配置
 ENV = 'production'
 
-# 数字化经营履约全生命链路管理系统/生产环境
-VUE_APP_BASE_API = 'https://szhapi.jiansheku.com'
+# 中铁二十局市场经营信息服务系统/生产环境
+VUE_APP_BASE_API = '/prod-api'
 
 # 子系统地址
 VUE_APP_SUB_SYSTEM_ADDRESS = "https://plug.jiansheku.com"

dsk-operate-ui/.env.staging

 # 页面标题
-VUE_APP_TITLE = 数字化经营履约全生命链路管理系统
+VUE_APP_TITLE = 中铁二十局市场经营信息服务系统
 
 NODE_ENV = production
 
 # 测试环境配置
 ENV = 'staging'
 
-# 数字化经营履约全生命链路管理系统/测试环境
+# 中铁二十局市场经营信息服务系统/测试环境
 VUE_APP_BASE_API = '/stage-api'

dsk-operate-ui/.env.test

 # 页面标题
-VUE_APP_TITLE = 数字化经营履约全生命链路管理系统
+VUE_APP_TITLE = 中铁二十局市场经营信息服务系统
 
 NODE_ENV = "production"
 
@@ -8,7 +8,7 @@ ENV = 'test'
 
 
 
-# 数字化经营履约全生命链路管理系统/测试环境
+# 中铁二十局市场经营信息服务系统/测试环境
 VUE_APP_BASE_API = '/prod-api'
 
 # 子系统地址

dsk-operate-ui/package.json

 {
   "name": "ruoyi",
   "version": "3.8.5",
-  "description": "数字化经营履约全生命链路管理系统",
+  "description": "中铁二十局市场经营信息服务系统",
   "author": "若依",
   "license": "MIT",
   "scripts": {

dsk-operate-ui/src/api/radar/radar.js

 import request from '@/utils/request'
+
 // 导入客户列表
 let importData = function importData(param) {
 	return request({
@@ -237,6 +238,150 @@ let radarExport = function radarExport(param) {
 		data: param
 	})
 }
+//重点项目清单查询-基础统计
+let zdxmqdjctj = function zdxmqdjctj(param) {
+	return request({
+		url: '/index/zdxmqdjctj',
+		method: 'post',
+		data: param
+	})
+}
+//重点项目清单查询-前十企业
+let zdxmqdtopten = function zdxmqdtopten(param) {
+	return request({
+		url: '/index/zdxmqdtopten',
+		method: 'post',
+		data: param
+	})
+}
+//重点项目清单查询-总金额统计
+let zdxmqdzjetj = function zdxmqdzjetj(param) {
+	return request({
+		url: '/index/zdxmqdzjetj',
+		method: 'post',
+		data: param
+	})
+}
+//专项债项目-基础统计
+let zxzxmjctj = function zxzxmjctj(param) {
+	return request({
+		url: '/index/zxzxmjctj',
+		method: 'post',
+		data: param
+	})
+}
+//专项债项目-企业统计
+let zxzxmqytj = function zxzxmqytj(param) {
+	return request({
+		url: '/index/zxzxmqytj',
+		method: 'post',
+		data: param
+	})
+}
+//专项债项目-总金额统计
+let zxzxmzjetj = function zxzxmzjetj(param) {
+	return request({
+		url: '/index/zxzxmzjetj',
+		method: 'post',
+		data: param
+	})
+}
+//商机-土地查询-基础维度统计
+let jcwdtj = function jcwdtj(param) {
+	return request({
+		url: '/index/jcwdtj',
+		method: 'post',
+		data: param
+	})
+}
+//商机-土地查询-前十企业统计
+let topten = function topten(param) {
+	return request({
+		url: '/index/topten',
+		method: 'post',
+		data: param
+	})
+}
+//商机-土地查询-总金额、总面积统计
+let statisticsOfAmountAndArea = function statisticsOfAmountAndArea(param) {
+	return request({
+		url: '/index/statisticsOfAmountAndArea',
+		method: 'post',
+		data: param
+	})
+}
+//商机-拟建查询-基础维度统计
+let njjcwdtj = function njjcwdtj(param) {
+	return request({
+		url: '/index/njjcwdtj',
+		method: 'post',
+		data: param
+	})
+}
+//商机-拟建查询-前十企业统计
+let njtopten = function njtopten(param) {
+	return request({
+		url: '/index/njtopten',
+		method: 'post',
+		data: param
+	})
+}
+//商机-拟建查询-总金额统计
+let njzjetj = function njzjetj(param) {
+	return request({
+		url: '/index/njzjetj',
+		method: 'post',
+		data: param
+	})
+}
+//商机-招标计划查询-基础维度统计
+let zbjhcxjcwdtj = function zbjhcxjcwdtj(param) {
+	return request({
+		url: '/index/zbjhcxjcwdtj',
+		method: 'post',
+		data: param
+	})
+}
+//商机-招标计划查询-前十企业统计
+let zbjhcxtopten = function zbjhcxtopten(param) {
+	return request({
+		url: '/index/zbjhcxtopten',
+		method: 'post',
+		data: param
+	})
+}
+//商机-招标计划查询-总金额统计
+let zbjhcxzjetj = function zbjhcxzjetj(param) {
+	return request({
+		url: '/index/zbjhcxzjetj',
+		method: 'post',
+		data: param
+	})
+}
+//商机-招标公告-基础维度统计
+let zbggjcwdtj = function zbggjcwdtj(param) {
+	return request({
+		url: '/index/zbggjcwdtj',
+		method: 'post',
+		data: param
+	})
+}
+//商机-招标公告-前十企业统计
+let zbggtopten = function zbggtopten(param) {
+	return request({
+		url: '/index/zbggtopten',
+		method: 'post',
+		data: param
+	})
+}
+//商机-招标公告-总金额统计
+let zbggzjetj = function zbggzjetj(param) {
+	return request({
+		url: '/index/zbggzjetj',
+		method: 'post',
+		data: param
+	})
+}
 
 export default {
 	radarExport,
@@ -267,5 +412,23 @@ export default {
 	jskBidTenderPage,
 	tenderDetail,
 	tenderPage,
-	getUipIdByCid
+	getUipIdByCid,
+  zdxmqdjctj,
+  zdxmqdtopten,
+  zdxmqdzjetj,
+  zxzxmjctj,
+  zxzxmqytj,
+  zxzxmzjetj,
+  jcwdtj,
+  topten,
+  statisticsOfAmountAndArea,
+  njjcwdtj,
+  njtopten,
+  njzjetj,
+  zbjhcxjcwdtj,
+  zbjhcxtopten,
+  zbjhcxzjetj,
+  zbggjcwdtj,
+  zbggtopten,
+  zbggzjetj,
 }

dsk-operate-ui/src/assets/styles/public.scss

@@ -319,7 +319,7 @@ select {
 
 .el-dropdown-menu .color_text {
   color: #1890ff;
-  background-color: #FFFFFF;
+  //background-color: #FFFFFF;
 }
 
 .el-dropdown-land .el-icon-caret-bottom {
@@ -1180,7 +1180,7 @@ select {
 
 
 .table-item-jf1 {
-  padding: 0px 16px;
+  padding: 30px 16px;
 }
 
 .table-item-jf1 .item-jf-img {

dsk-operate-ui/src/layout/components/Sidebar/Logo.vue

@@ -6,17 +6,17 @@
       visible-arrow="true"
       trigger="hover">
       <div>
-        <img :src="logo" class="tips_logo" />
+        <img :src="logo2" class="tips_logo" />
         <div class="tips_title">{{title}}</div>
       </div>
       <transition name="sidebarLogoFade" slot="reference">
         <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
           <img v-if="logo" :src="logo" class="sidebar-logo" />
-          <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
+          <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }}1111 </h1>
         </router-link>
         <router-link v-else key="expand" class="sidebar-logo-link" to="/">
           <img v-if="logo" :src="logo" class="sidebar-logo" />
-          <h1 class="text-cl1 sidebar-title" :style="{ width: '98px', color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
+          <h1 class="text-cl1 sidebar-title" :style="{ width: '98px', color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }}222 </h1>
         </router-link>
       </transition>
     </el-popover>
@@ -24,7 +24,9 @@
 </template>
 
 <script>
-import logoImg from '@/assets/images/logo/logo.png'
+// import logoImg from '@/assets/images/logo/logo.png'
+import logoImg from '@/assets/images/logo/logo1.png'
+import logoImg2 from '@/assets/images/logo/logo2.png'
 import variables from '@/assets/styles/variables.scss'
 
 export default {
@@ -45,8 +47,9 @@ export default {
   },
   data() {
     return {
-      title: '数字化经营履约全生命链路管理系统',
-      logo: logoImg
+      title: '中铁二十局市场经营信息服务系统',
+      logo: logoImg,
+      logo2: logoImg2,
     }
   }
 }
@@ -77,8 +80,8 @@ export default {
     width: 100%;
 
     & .sidebar-logo {
-      width: 16px;
-      height: 23px;
+      width: 20px;
+      /*height: 23px;*/
       vertical-align: middle;
       margin-right: 3px;
     }

dsk-operate-ui/src/views/radar/components/Bidding/index.vue

@@ -206,7 +206,10 @@
 	  	<div class="bottomlist-title">
 			<div class="bottomlist-title-left" >
         <p class="title-left">
-						<span style="margin-right:4;color:rgba(35, 35, 35, 0.40);font-size: 18px;position: relative;top:2px;">·</span>共有{{total}}条
+          <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>
 				</div>
 	  		<div class="title-right">
@@ -217,6 +220,22 @@
 	  		</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>
@@ -295,8 +314,31 @@
 	  		    :total="total>limit*500?501*limit:total">
 	  		  </el-pagination>
 	  	</div>
-
 	  </div>
+    <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" style="width: 100%;">
+          <div class="echarts-title">合同预估金额分布</div>
+          <div id="echarts-xmtz" 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>
 
@@ -305,6 +347,7 @@ 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 * as echarts from 'echarts';
 export default {
   name: 'Bidding',
   components:{skeleton},
@@ -378,7 +421,6 @@ export default {
       PlanTenderDateValue: "",
       PlanTenderDate: "",
       PlanTenderDateShowPopper: false,
-
       addressList: [],
       addressType: [],
       props: {
@@ -390,7 +432,8 @@ export default {
       projectTypeList: [],//项目类型
       tenderWayList: [],//招标方式
       projectCapitalSourceList: [],//资金来源
-	  planTenderAmount: [{
+      planTenderAmount: [
+        {
           value: "不限",
           label: "不限",
         },
@@ -433,20 +476,21 @@ export default {
         endIssueTime:'',
         startPlanTenderDate:'',
         endPlanTenderDate:'',
-
       },
       planTenderAmountShowPopper:false,
       startPlanTenderAmount:'',
       endPlanTenderAmount:'',
-
       domicile: [],
       pageFlag: true,
       conditionsArr: [],
-
       tableData:[],
       total:0,
       page:1,
-	  limit:20
+      limit:20,
+      dialogEchartsVisible:false,
+      echartsData:{},
+      echartsDataState:false,
+      sumMoney:0,
     };
   },
   computed: {
@@ -553,7 +597,6 @@ export default {
     keywordClick(val) {
       this.projectName = val
     },
-
     search(page, limit,exportFlag) {
       if (!page) {
         this.page = 1;
@@ -592,7 +635,6 @@ export default {
       }
       this.isSkeleton = true;
       api.jskBidPlanPage(params).then(res=>{
-		this.isSkeleton = false;
           if (res.code==200) {
             this.tableData=res.data.list;
             this.total=res.data.total;
@@ -600,6 +642,28 @@ export default {
         }).catch(error=>{
 
       });
+      api.zbjhcxjcwdtj(params).then(res => {
+        this.isSkeleton = false;
+        if(res.code === 200 && res.data){
+          this.echartsData=res.data
+          this.initChart(res.data)
+          api.zbjhcxtopten(params).then(res => {
+            this.echartsData.topTenCompany=res.data.topTenCompany;
+            this.echartsData.topTenCompanyMoney=res.data.topTenCompanyMoney;
+          }).catch(error => {
+
+          });
+        }else {
+          this.echartsDataState=true;
+        }
+      }).catch(error => {
+
+      });
+      api.zbjhcxzjetj(params).then(res => {
+        this.sumMoney=res.data.sumMoney
+      }).catch(error => {
+
+      });
 
 
     },
@@ -928,7 +992,6 @@ export default {
     deleteDomicile() {
       this.$refs.address.handleClear();
     },
-
     domicileChange() {
       let arr = this.$refs.address.getCheckedNodes();
       let province = [],
@@ -1059,7 +1122,405 @@ export default {
 	    this.searchDic();
       this.getCapitalSourceSelect();
     },
+    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',
+          },
+          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.topTenCompanyMoney){
+        for(const i in row.topTenCompanyMoney[key]){
+          let obj={};
+          obj.name=i;
+          obj.value=row.topTenCompanyMoney[key][i]/10000;
+          data3.push(obj)
+        }
+      }
+
+      let data4=[];
+      for(let key in row.topTenCompany){
+        for(const i in row.topTenCompany[key]){
+          let obj={};
+          obj.name=i;
+          obj.value=row.topTenCompany[key][i];
+          data4.push(obj)
+        }
+      }
+
+
+      this.$nextTick(() => {
+        let myChart = echarts.init(document.getElementById("echarts-xmlx"))
+        let option ={
+          tooltip: {
+            trigger: 'item',
+          },
+          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-tze"))
+        let option3 ={
+          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: data3.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:70,
+          },
+          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:data3.map(item => item.value),
+            }
+          ]
+        }
+        myChart3.setOption(option3);
 
+        let myChart4 = echarts.init(document.getElementById("echarts-xms"))
+        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);
+
+
+        window.addEventListener("resize", function () {
+          myChart.resize();//图表跟随页面大小变化宽度
+          myChart1.resize();//图表跟随页面大小变化宽度
+          myChart2.resize();//图表跟随页面大小变化宽度
+          myChart3.resize();//图表跟随页面大小变化宽度
+          myChart4.resize();//图表跟随页面大小变化宽度
+
+
+        });
+      })
+
+    },
   },
 };
 </script>
@@ -1315,8 +1776,66 @@ export default {
 			   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;
+      }
+    }
+	}
+  .dialogEcharts{
+    ::v-deep .el-dialog {
+      .el-dialog__body{
+        padding: 16px 19px 0 16px;
+        max-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;
+      }
+    }
+  }
 
 </style>
 

dsk-operate-ui/src/views/radar/components/Establishment/index.vue

@@ -177,7 +177,10 @@
 			<div class="bottomlist-title">
 				<div class="bottomlist-title-left" >
           <p class="title-left">
-						<span style="margin-right:4;color:rgba(35, 35, 35, 0.40);font-size: 18px;position: relative;top:2px;">·</span>共有{{total}}条
+            <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>
 				</div>
 				<div class="title-right">
@@ -187,6 +190,22 @@
 					</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="">
@@ -269,6 +288,30 @@
 
 		</div>
 
+    <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" style="width: 100%;">
+          <div class="echarts-title">项目投资额分布</div>
+          <div id="echarts-xmtz" 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>
@@ -279,6 +322,7 @@
 	import {encodeStr} from "@/assets/js/common.js"
 	import skeleton from '@/views/project/projectList/component/skeleton'
 	import api from '@/api/radar/radar.js';
+  import * as echarts from 'echarts';
 	export default {
 		name: 'Establishment',
 		components:{skeleton},
@@ -328,7 +372,8 @@
 					},
 				],
 
-				moneyOptions: [{
+				moneyOptions: [
+				  {
 						value: "不限",
 						label: "不限",
 					},
@@ -353,7 +398,8 @@
 						label: "2亿元以上",
 					},
 				],
-				handleTimeOptions: [{
+				handleTimeOptions: [
+				  {
 						label: "不限",
 						value: "",
 					},
@@ -441,14 +487,16 @@
 				planEndTimeShowPopper: false,
 				pageFlag: true,
 				conditionsArr: [],
-
 				tableData:[],
 				total:0,
 				page:1,
-				limit:20
+				limit:20,
+        dialogEchartsVisible:false,
+        echartsData:{},
+        echartsDataState:false,
+        sumMoney:0,
 			};
 		},
-
 		computed: {
 			checkEstablishmentDto() {
 				let arr = [];
@@ -569,9 +617,6 @@
 		},
 		mounted() {
 			this.init();
-
-
-
 		},
 		methods: {
 			searchDic(){
@@ -642,13 +687,35 @@
 				};
 				this.isSkeleton = true;
 				api.establishmentPage(params).then(res=>{
-					this.isSkeleton = false;
 					if (res.code==200) {
 						this.tableData=res.data.list;
 						this.total=res.data.total;
 					}
 				}).catch(error=>{
 
+				});
+        api.njjcwdtj(params).then(res => {
+          this.isSkeleton = false;
+          if(res.code === 200 && res.data){
+            this.echartsData=res.data
+            this.initChart(res.data)
+            api.njtopten(params).then(res => {
+              this.echartsData.topTenCompany=res.data.topTenCompany;
+              this.echartsData.topTenCompanyMoney=res.data.topTenCompanyMoney;
+            }).catch(error => {
+
+            });
+          }else {
+            this.echartsDataState=true;
+          }
+
+        }).catch(error => {
+
+        });
+        api.njzjetj(params).then(res => {
+          this.sumMoney=res.data.sumMoney
+        }).catch(error => {
+
         });
 
 			},
@@ -1154,6 +1221,414 @@
 				            }
 				        }
 				        return this.hasValue;
+    },
+
+      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.topTenCompanyMoney){
+          for(const i in row.topTenCompanyMoney[key]){
+            let obj={};
+            obj.name=i;
+            obj.value=row.topTenCompanyMoney[key][i]/10000;
+            data3.push(obj)
+          }
+        }
+
+        let data4=[];
+        for(let key in row.topTenCompany){
+          for(const i in row.topTenCompany[key]){
+            let obj={};
+            obj.name=i;
+            obj.value=row.topTenCompany[key][i];
+            data4.push(obj)
+          }
+        }
+
+
+        this.$nextTick(() => {
+          let myChart = echarts.init(document.getElementById("echarts-xmlx"))
+          let option ={
+            tooltip: {
+              trigger: 'item',
+            },
+            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-tze"))
+          let option3 ={
+            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: data3.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:data3.map(item => item.value),
+              }
+            ]
+          }
+          myChart3.setOption(option3);
+
+          let myChart4 = echarts.init(document.getElementById("echarts-xms"))
+          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);
+
+
+          window.addEventListener("resize", function () {
+            myChart.resize();//图表跟随页面大小变化宽度
+            myChart1.resize();//图表跟随页面大小变化宽度
+            myChart2.resize();//图表跟随页面大小变化宽度
+            myChart3.resize();//图表跟随页面大小变化宽度
+            myChart4.resize();//图表跟随页面大小变化宽度
+
+          });
+        })
+
       },
 		},
 	};
@@ -1246,7 +1721,6 @@
 	.bottomlist{
 		width: 100%;
 		background-color: #FFFFFF;
-
     border-radius: 4px 4px 4px 4px;
 		.bottomlist-title{
 			display: flex;
@@ -1403,7 +1877,66 @@
 			   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-weight: 700;
+          font-size: 14px;
+          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;
+      }
     }
 
+	}
+  .dialogEcharts{
+    ::v-deep .el-dialog {
+      .el-dialog__body{
+        padding: 16px 19px 0 16px;
+        max-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;
+      }
+    }
+  }
 
 </style>

dsk-operate-ui/src/views/radar/components/Land/index.vue

 <template>
-	<div>
+	<div class="land-container">
 		<div class="content">
 			<div class="content_item content_item_padding0">
 			    <div class="label">项目名称</div>
@@ -199,12 +199,15 @@
 				</div>
 			</div>
 		</div>
-
     <div class="bottomlist">
       <div class="bottomlist-title">
         <div class="bottomlist-title-left" >
           <p class="title-left">
-							<span style="margin-right:4;color:rgba(35, 35, 35, 0.40);font-size: 18px;position: relative;top:2px;">·</span>共有{{total}}条
+            <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;padding-right: 6px;">{{sumMoney}}万元</span>
+              土地成交总面积：<span style="color:#E6A23C;">{{sumArea}}m²</span>
+            </span>
           </p>
           <el-popover v-model="fieldshow" placement="bottom-start" trigger="click"
             popper-class="viewlist-el-popover">
@@ -228,6 +231,22 @@
         </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>
@@ -300,9 +319,27 @@
             :total="total>limit*500?501*limit:total">
           </el-pagination>
       </div>
-
     </div>
-
+    <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-td" style="height: 240px"></div>
+        </div>
+        <div class="echarts-item">
+          <div class="echarts-title">交易地区分布</div>
+          <div id="echarts-jy" 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>
 
@@ -311,6 +348,7 @@
 	import skeleton from '@/views/project/projectList/component/skeleton'
 	import api from '@/api/radar/radar.js';
 	import jsk_data from '../../../../../public/jsk.json';
+  import * as echarts from 'echarts';
 	export default {
 		name: 'Land',
 		components:{skeleton},
@@ -334,7 +372,8 @@
 				fieldshow: false,
 				fieldText: '默认排序',
 				field: '', //查询结果排序方式
-				fieldOptions: [{
+				fieldOptions: [
+				  {
 						key: "contractSignTime",
 						value: "默认排序",
 						status: true,
@@ -412,7 +451,8 @@
 						label: "2亿元以上",
 					},
 				],
-				contractSignTimeOptions: [{
+				contractSignTimeOptions: [
+				  {
 						label: "不限",
 						value: "",
 					},
@@ -465,33 +505,15 @@
 				contractSignTime: "",
 				contractSignTimeShowPopper: false,
 				pageFlag: true,
-
 				showList:true,
-				fieldshow: false,
-				fieldText: '默认排序',
-				field: '', //查询结果排序方式
-				fieldOptions: [
-				  {
-				    key: "contractSignTime",
-				    value: "默认排序",
-				    status: true,
-				  },
-				  {
-				    key: "transactionPrice",
-				    value: "成交金额从大到小",
-				    status: false,
-				  },
-				  {
-				    key: "acreage",
-				    value: "出让面积从大到小",
-				    status: false,
-				  },
-				],
-
 				tableData:[],
 				total:0,
-				page:1,
-				pageSize:20
+				pageSize:20,
+        dialogEchartsVisible:false,
+        echartsData:{},
+        echartsDataState:false,
+        sumMoney:0,
+        sumArea:0,
 			};
 		},
 
@@ -615,7 +637,6 @@
 				};
 				this.isSkeleton = true;
 				api.landMarketPage(params).then(res=>{
-					this.isSkeleton = false;
 					if (res.code==200) {
 						this.tableData=res.data.list;
 						this.total=res.data.total;
@@ -624,7 +645,29 @@
 
 				});
 
+        api.jcwdtj(params).then(res => {
+          this.isSkeleton = false;
+          if(res.code === 200 && res.data){
+            this.echartsData=res.data
+            this.initChart(res.data)
+            api.topten(params).then(res => {
+              this.echartsData.topTenCompanyArea=res.data.topTenCompanyArea;
+              this.echartsData.topTenCompany=res.data.topTenCompany;
+            }).catch(error => {
 
+            });
+          }else {
+            this.echartsDataState=true;
+          }
+        }).catch(error => {
+
+        });
+        api.statisticsOfAmountAndArea(params).then(res => {
+          this.sumMoney=res.data.sumMoney
+          this.sumArea=res.data.sumArea
+        }).catch(error => {
+
+        });
 			},
 			//关闭支付弹窗
 
@@ -951,6 +994,387 @@
 				this.addressListfn();
 				this.searchDic();
 			},
+      handledialog(){
+        this.dialogEchartsVisible=true;
+        this.initChart1(this.echartsData)
+      },
+      initChart(row) {
+        var data=[];
+        for(let key in row.landUseList){
+          for(const i in row.landUseList[key]){
+            var obj={};
+            obj.name=i;
+            obj.value=row.landUseList[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.landUseList){
+          for(const i in row.landUseList[key]){
+            let obj={};
+            obj.name=i;
+            obj.value=row.landUseList[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 key in row.topTenCompanyArea){
+          for(const i in row.topTenCompanyArea[key]){
+            let obj={};
+            obj.name=i;
+            obj.value=row.topTenCompanyArea[key][i];
+            data2.push(obj)
+          }
+        }
+        let data3=[];
+        for(let key in row.topTenCompany){
+          for(const i in row.topTenCompany[key]){
+            let obj={};
+            obj.name=i;
+            obj.value=row.topTenCompany[key][i];
+            data3.push(obj)
+          }
+        }
+
+        this.$nextTick(() => {
+          let myChart = echarts.init(document.getElementById("echarts-td"))
+          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-jy"))
+          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-tze"))
+          let option2 ={
+            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: data2.map(item => item.name),
+            },
+            yAxis: [
+              {
+                type: 'value',
+                axisLabel: { //坐标轴刻度标签的相关设置
+                  color:"#666666"
+                },
+                name: '单位：m²',
+                nameLocation: 'end',
+                nameTextStyle: {
+                  padding: [0, 10, 0, -30],    // 四个数字分别为上右下左与原位置距离
+                  color: '#666666',
+                }
+              },
+            ],
+            grid: {
+              top:40,
+              left:80,
+              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:data2.map(item => item.value),
+              }
+            ]
+          }
+          myChart2.setOption(option2);
+
+          let myChart3 = echarts.init(document.getElementById("echarts-xms"))
+          let option3 ={
+            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: data3.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:60,
+            },
+            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:data3.map(item => item.value),
+              }
+            ]
+          }
+          myChart3.setOption(option3);
+
+
+          window.addEventListener("resize", function () {
+            myChart.resize();//图表跟随页面大小变化宽度
+            myChart1.resize();//图表跟随页面大小变化宽度
+            myChart2.resize();//图表跟随页面大小变化宽度
+            myChart3.resize();//图表跟随页面大小变化宽度
+
+          });
+        })
+
+      },
 		},
 	};
 </script>
@@ -1041,7 +1465,6 @@
 	.bottomlist{
 		width: 100%;
 		background-color: #FFFFFF;
-
     border-radius: 4px 4px 4px 4px;
 		.bottomlist-title{
 			display: flex;
@@ -1083,7 +1506,6 @@
 
 		}
 		.bottomlist-content{
-
 			padding-bottom: 0px;
 		}
 		.bottomlist-list{
@@ -1175,7 +1597,6 @@
 		}
 		.bottomlist-list:hover{
 			background: #F6F9FC;
-
 		}
 		.pagination{
 			padding: 14px ;
@@ -1183,7 +1604,64 @@
 			   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;
+      }
+    }
+	}
+  .dialogEcharts{
+    ::v-deep .el-dialog {
+      .el-dialog__body{
+        padding: 16px 19px 0 16px;
+        max-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;
+      }
+    }
   }
-
 
 </style>

dsk-operate-ui/src/views/radar/components/MajorProject/index.vue

@@ -115,7 +115,10 @@
       <div class="bottomlist-title">
         <div class="bottomlist-title-left">
           <p class="title-left">
-            <span style="margin-right:4;color:rgba(35, 35, 35, 0.40);font-size: 18px;position: relative;top:2px;">·</span>共有{{total}}条
+            <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">
@@ -136,6 +139,22 @@
         </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>
@@ -226,6 +245,36 @@
       </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>
 
@@ -235,6 +284,7 @@ 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 },
@@ -397,6 +447,10 @@ export default {
         ],
         exportEXCEL:{}
       },
+      dialogEchartsVisible:false,
+      echartsData:{},
+      echartsDataState:false,
+      sumMoney:0,
     };
   },
   mounted() {
@@ -451,6 +505,7 @@ export default {
       }
     },
     search(page, limit, exportFlag) {
+      this.isSkeleton = true;
       if (!page) {
         this.page = 1;
       }
@@ -485,7 +540,6 @@ export default {
       };
       this.dataEXCEL = JSON.parse(JSON.stringify(params));;
       api.getImportantPage(params).then(res => {
-        this.isSkeleton = false;
         if (res.code == 200) {
           this.tableData = res.data.list;
           this.total = res.data.total;
@@ -495,9 +549,30 @@ export default {
       }).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];
@@ -711,6 +786,458 @@ export default {
       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>
@@ -721,7 +1248,7 @@ export default {
   border-radius: 4px 4px 4px 4px;
   background: #ffffff;
   .content_item {
-    padding-top: 20px;
+    padding-top: 18px;
     display: flex;
     align-items: baseline;
     .label {
@@ -732,7 +1259,7 @@ export default {
     }
     .content_right {
       .ename_input {
-        width: 240px;
+        width: 596px;
         margin-right: 20px;
         ::v-deep .el-input__inner::placeholder {
           color: rgba(35, 35, 35, 0.2) !important;
@@ -750,7 +1277,7 @@ export default {
       }
       .el-checkbox {
         margin-right: 24px;
-        margin-bottom: 16px;
+        /*margin-bottom: 16px;*/
         ::v-deep .el-checkbox__label {
           padding-left: 8px;
         }
@@ -995,10 +1522,75 @@ export default {
       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 {

dsk-operate-ui/src/views/radar/components/MajorProject/index2.vue

+<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-dev">
+            <el-cascader ref="address" v-model="addressType" :options="addressList" :props="props" @change="domicileChange" placeholder="行政区域"
+              collapse-tags clearable></el-cascader>
+          </div>
+          <div class="select-dev">
+            <el-select @change="changeYear" v-model="importantProjectDto.year" multiple placeholder="项目年度">
+              <el-option v-for="(item, i) in years" :key="i" :label="item+'年'" :value="item">
+              </el-option>
+            </el-select>
+          </div>
+          <div class="select-dev">
+            <el-select v-model="importantProjectDto.fileTitle" 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" placement="bottom-start" trigger="click"
+            ref="transactionPriceShowPopper" :hide-on-click="false">
+            <el-input placeholder="中标金额" class="inputMoney" :value="money"></el-input>
+            <el-dropdown-menu slot="dropdown" class="dropdownMoney">
+              <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 class="btn">
+                      <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;">956535214万元</span>
+            </span>
+          </p>
+          <el-select v-model="fieldText" placeholder="请选择">
+            <el-option
+              v-for="item in fieldOptions"
+              :key="item.key"
+              :label="item.value"
+              :value="item.key">
+            </el-option>
+          </el-select>
+          <!--<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>-->
+          <el-button class="btn1" @click="clickDialog">导出数据</el-button>
+          <el-button class="btn2">新增订阅方案</el-button>
+        </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><span class="blue">{{item.year}}</span>年</span>
+            </p>
+            <p class="list-content-text" v-if="item.planStartDate">
+              <span>拟开工时间：</span>
+              <span><span class="blue">{{item.planStartDate}}</span>年</span>
+            </p>
+            <p class="list-content-text" v-if="item.planCompletionDate">
+              <span>拟建成时间：</span>
+              <span><span class="blue">{{item.planCompletionDate}}</span>年</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: '',
+      money: '',
+      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) {
+      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 => {
+        this.isSkeleton = false;
+        if (res.code == 200) {
+          this.tableData = res.data.list;
+          this.total = res.data.total;
+        } else {
+          this.$message.error(res.msg);
+        }
+      }).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];
+        }
+
+        // importantProjectDto.startMoney+'-'+importantProjectDto.endMoney+'万' : importantProjectDto.startMoney+'万'
+
+        if(obj.startMoney){
+          this.money=obj.startMoney+'万'
+        }
+        if(obj.endMoney){
+          this.money=obj.startMoney+'-'+obj.endMoney+'万'
+        }
+        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;
+
+      if(obj.startMoney){
+        this.money=obj.startMoney+'万'
+      }
+      if(obj.endMoney){
+        this.money=obj.startMoney+'-'+obj.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">
+  .dropdownMoney{
+    width: 148px;
+    border-radius: 4px;
+  }
+  .jabph_popper_box .jabph_popper_wrap .jabph_popper_input .el-input__inner {
+    width: 110px;
+    height: 24px;
+    line-height: 24px;
+    border-radius: 4px;
+  }
+  .jabph_popper_box .jabph_popper_wrap {
+    margin-top: 10px;
+    display: inline-block;
+  }
+</style>
+<style lang="scss" scoped>
+  ::v-deep .el-cascader-node.in-active-path{
+    color: #1373D9;
+  }
+  .content {
+  padding: 0px 16px;
+  padding-top: 16px;
+  border-radius: 4px 4px 4px 4px;
+  background: #ffffff;
+  .content_item {
+    padding-top: 16px;
+    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: 240px;
+        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;
+      }
+
+      ::v-deep .el-input.is-focus{
+        .el-input__inner {
+          border-color: #1373D9 !important;
+        }
+      }
+      ::v-deep .el-checkbox {
+        margin-right: 16px;
+        .el-checkbox__label {
+          padding-left: 8px;
+        }
+        .el-checkbox__label {
+          color: #606266;
+        }
+        &.is-checked {
+          .el-checkbox__label {
+            color: #1373D9;
+          }
+          .el-checkbox__inner {
+            background-color: #1373D9;
+            border-color: #1373D9;
+          }
+        }
+      }
+      ::v-deep .inputMoney{
+        width: 240px;
+        border-radius: 4px;
+      }
+
+      .more {
+        font-size: 12px;
+        cursor: pointer;
+        color: #0081ff;
+        img {
+          width: 6px;
+          margin-bottom: 2px;
+          height: 4px;
+          margin-left: 4px;
+        }
+      }
+      .more1 {
+        img {
+          transform: rotate(180deg);
+        }
+      }
+      .select-dev{
+        text-align: center;
+        display: inline-block;
+        position: relative;
+        color: #333333;
+        font-size: 14px;
+        cursor: pointer;
+        margin-right: 16px;
+        ::v-deep .el-cascader{
+          width: 240px;
+          .el-input__inner{
+            border-radius: 4px;
+          }
+          .el-tag:first-child{
+            max-width: 146px;
+            /*padding: 0 6px;*/
+          }
+        }
+        ::v-deep .el-select{
+          width: 240px;
+          .el-input__inner{
+            border-radius: 4px;
+          }
+        }
+      }
+
+
+
+    }
+
+    .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;
+  }
+}
+
+  .content_item .search-new span:last-child {
+    display: inline-block;
+    width: 60px;
+    text-align: center;
+    color: #606266;
+    line-height: 30px;
+    cursor: pointer;
+    border-radius: 4px;
+    border: 1px solid #CDD0D6;
+    opacity: 1;
+  }
+
+  .content_item .search-new span:first-child {
+    margin-right: 12px;
+    display: inline-block;
+    width: 60px;
+    text-align: center;
+    cursor: pointer;
+    background: #1373D9;
+    color: #fff;
+    line-height: 32px;
+    border-radius: 4px;
+    opacity: 1;
+  }
+
+  .content_item .search-new span:first-child:hover {
+    background: #2073CA;
+  }
+
+  .content_item .search-new span:last-child:hover {
+    background: #f5faff;
+    color: #1373D9;
+    border-color: #1373D9;
+  }
+
+  .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;
+        }
+
+        .btn1{
+          width: 88px;
+          height: 32px;
+          border-radius: 4px;
+          background: #1373D9;
+          margin-right: 10px;
+          padding: 0;
+          color:#ffffff;
+          border: 0;
+        }
+
+        .btn2{
+          width: 116px;
+          height: 32px;
+          border-radius: 4px;
+          border: 1px solid #DCDFE6;
+          color: #606266;
+          padding: 0;
+          margin-left:0;
+        }
+        .btn2:hover{
+          border: 1px solid #1373D9;
+          color:#1373D9;
+          background: #ffffff;
+        }
+
+      }
+      .bottomlist-title-left {
+        display: inline-flex;
+        align-items: center;
+        .title-left {
+          height: 16px;
+          line-height: 16px;
+          font-size: 12px;
+          font-weight: 400;
+          color: #3d3d3d;
+        }
+        ::v-deep .el-select{
+          width: 140px;
+          height: 32px;
+          margin-left: 12px;
+          .el-input__inner{
+            border-radius: 4px;
+            padding: 0 30px 0 8px;
+            font-size: 14px;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+            &:focus {
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              overflow: hidden;
+            }
+          }
+        }
+      }
+    }
+    .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;
+      }
+    }
+
+
+
+
+    .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: #1373D9 !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;
+      }
+    }
+  }
+
+  .jabph_popper_box {
+    left: 147px;
+    border: 1px solid #E4E7ED;
+    border-radius: 4px;
+    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.12);
+
+    .btn{
+      float: right;
+      ::v-deep .el-button{
+        border-radius: 4px;
+      }
+    }
+  }
+  .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>
+

dsk-operate-ui/src/views/radar/components/Tender/index.vue

@@ -179,7 +179,10 @@
 			<div class="bottomlist-title">
 				<div class="bottomlist-title-left" >
           <p class="title-left">
-						<span style="margin-right:4;color:rgba(35, 35, 35, 0.40);font-size: 18px;position: relative;top:2px;">·</span>共有{{total}}条
+            <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>
 				</div>
 				<div class="title-right">
@@ -189,6 +192,22 @@
 					</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>
@@ -279,10 +298,32 @@
 				    :total="total>limit*500?501*limit:total">
 				  </el-pagination>
 			</div>
-			
-			
 		</div>
 
+    <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" style="width: 100%;">
+          <div class="echarts-title">预算金额分布</div>
+          <div id="echarts-xmtz" 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>
@@ -293,7 +334,7 @@
 	import {encodeStr} from "@/assets/js/common.js"
 	import skeleton from '@/views/project/projectList/component/skeleton'
 	import api from '@/api/radar/radar.js';
-
+  import * as echarts from 'echarts';
 	export default {
 		name: 'Tender',
 		components: {
@@ -305,7 +346,8 @@
 				//有无联系方式
 				encodeStr,
 				isSkeleton:true,
-				phonePointType: [{
+				phonePointType: [
+				  {
 						value: '',
 						label: '不限'
 					},
@@ -327,7 +369,8 @@
 					}
 				],
 				phonePointList: [],
-				punishDateOptions: [{
+				punishDateOptions: [
+				  {
 						label: "不限",
 						value: "",
 					},
@@ -370,7 +413,8 @@
 				keyword: "",
 				keywordNot: "",
 				tenderType: "",
-				tenderTypeOptions: [{
+				tenderTypeOptions: [
+				  {
 						value: "不限",
 						key: "",
 						status: true,
@@ -391,7 +435,8 @@
 						status: false,
 					},
 				],
-				tenderStageOptions: [{
+				tenderStageOptions: [
+				  {
 						value: "招标公告",
 						label: "招标公告",
 					},
@@ -436,7 +481,8 @@
 						label: "答疑补遗公告",
 					}
 				],
-				tenderStageOptions2: [{
+				tenderStageOptions2: [
+				  {
 						value: "中标公示",
 						label: "中标公示",
 					},
@@ -465,7 +511,8 @@
 						label: "合同及验收",
 					},
 				],
-				tenderStageOptions3: [{
+				tenderStageOptions3: [
+				  {
 						value: "开标",
 						label: "开标",
 					},
@@ -474,7 +521,8 @@
 						label: "参投记录",
 					},
 				],
-				tenderingMannerOptions: [{
+				tenderingMannerOptions: [
+				  {
 						value: "询价",
 						label: "询价",
 					},
@@ -515,7 +563,8 @@
 						label: "其他",
 					},
 				],
-				scopeOptions: [{
+				scopeOptions: [
+				  {
 						value: "contentInfo",
 						label: "正文",
 					},
@@ -530,7 +579,8 @@
 				],
 				selectedHeight: 64,
 				projectTypeOptions: [],
-				contactOptions: [{
+				contactOptions: [
+				  {
 						value: "不限",
 						label: "不限",
 					},
@@ -547,9 +597,7 @@
 						label: "有招标代理机构联系人",
 					},
 				],
-				subjectMatterOptions: [
-
-				],
+				subjectMatterOptions: [],
 				jskBidQueryDto: {
 					province: [],
 					city: [],
@@ -569,7 +617,8 @@
 				startBidMoney: "",
 				endBidMoney: "",
 				bidMoneyShowPopper: false,
-				bidMoneyOptions: [{
+				bidMoneyOptions: [
+				  {
 						value: "不限",
 						label: "不限",
 					},
@@ -601,7 +650,8 @@
 				fieldshow: false,
 				fieldText: '默认排序',
 				field: '', //查询结果排序方式
-				fieldOptions: [{
+				fieldOptions: [
+				  {
 						key: "",
 						value: "默认排序",
 						status: true,
@@ -629,7 +679,11 @@
 				page: 1,
 				pageFlag: true,
 				tableData:[],
-				limit: 20
+				limit: 20,
+        dialogEchartsVisible:false,
+        echartsData:{},
+        echartsDataState:false,
+        sumMoney:0,
 			};
 		},
 		computed: {
@@ -735,10 +789,7 @@
 			this.search();
 		},
 		mounted() {
-
-
 			this.addressListfn();
-
 		},
 		methods: {
 			searchDic(){
@@ -797,13 +848,34 @@
 				params.keywordNot = this.keywordNot;
 				this.isSkeleton = true;
 				api.jskBidPage(params).then(res=>{
-					this.isSkeleton = false;
 					if (res.code==200) {
 						this.tableData=res.data.list;
 						this.total=res.data.total;
 					}
 				}).catch(error=>{
 
+				});
+        api.zbggjcwdtj(params).then(res => {
+          this.isSkeleton = false;
+          if(res.code === 200 && res.data){
+            this.echartsData=res.data
+            this.initChart(res.data)
+            api.zbggtopten(params).then(res => {
+              this.echartsData.topTenCompany=res.data.topTenCompany;
+              this.echartsData.topTenCompanyMoney=res.data.topTenCompanyMoney;
+            }).catch(error => {
+
+            });
+          }else {
+            this.echartsDataState=true;
+          }
+        }).catch(error => {
+
+        });
+        api.zbggzjetj(params).then(res => {
+          this.sumMoney=res.data.sumMoney
+        }).catch(error => {
+
         });
 			},
 
@@ -1138,6 +1210,405 @@
 
 				 });
 			},
+
+      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',
+            },
+            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.topTenCompanyMoney){
+          for(const i in row.topTenCompanyMoney[key]){
+            let obj={};
+            obj.name=i;
+            obj.value=row.topTenCompanyMoney[key][i]/10000;
+            data3.push(obj)
+          }
+        }
+
+        let data4=[];
+        for(let key in row.topTenCompany){
+          for(const i in row.topTenCompany[key]){
+            let obj={};
+            obj.name=i;
+            obj.value=row.topTenCompany[key][i];
+            data4.push(obj)
+          }
+        }
+
+        this.$nextTick(() => {
+          let myChart = echarts.init(document.getElementById("echarts-xmlx"))
+          let option ={
+            tooltip: {
+              trigger: 'item',
+            },
+            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-tze"))
+          let option3 ={
+            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: data3.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:60,
+            },
+            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:data3.map(item => item.value),
+              }
+            ]
+          }
+          myChart3.setOption(option3);
+
+          let myChart4 = echarts.init(document.getElementById("echarts-xms"))
+          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);
+
+
+          window.addEventListener("resize", function () {
+            myChart.resize();//图表跟随页面大小变化宽度
+            myChart1.resize();//图表跟随页面大小变化宽度
+            myChart2.resize();//图表跟随页面大小变化宽度
+            myChart3.resize();//图表跟随页面大小变化宽度
+            myChart4.resize();//图表跟随页面大小变化宽度
+
+
+          });
+        })
+
+      },
 		},
 	};
 </script>
@@ -1393,7 +1864,66 @@
 				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;
+      }
+    }
+	}
+  .dialogEcharts{
+    ::v-deep .el-dialog {
+      .el-dialog__body{
+        padding: 16px 19px 0 16px;
+        max-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;
+      }
+    }
+  }
+
 </style>
 <style lang="scss" scoped>
 	#tender_wrap {

dsk-operate-ui/src/views/radar/components/debtProject/index.vue

@@ -80,20 +80,20 @@
 			    </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:4;color:rgba(35, 35, 35, 0.40);font-size: 18px;position: relative;top:2px;">·</span>共有{{total}}条
+            <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>
 				</div>
 				<div class="title-right">
@@ -103,6 +103,22 @@
 					</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>
@@ -175,9 +191,32 @@
 					  </el-pagination>
 				</div>
 			</template>
+		</div>
 
-			
+    <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" style="width: 100%;">
+          <div class="echarts-title">项目投资额分布</div>
+          <div id="echarts-xmtz" 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>
 
@@ -188,6 +227,7 @@
 	import skeleton from '@/views/project/projectList/component/skeleton'
 	import api from '@/api/radar/radar.js';
 	import jsk_data from '../../../../../public/jsk.json';
+  import * as echarts from 'echarts';
 	export default {
 		name: 'debtProject',
 		components:{skeleton},
@@ -196,7 +236,8 @@
 				encodeStr,
 				isSkeleton:true,
 				projectName:'',
-				nameTypeList: [{
+				nameTypeList: [
+				  {
             key: 'like',
             status: true ,
             value: '模糊搜索',
@@ -209,7 +250,8 @@
 				],
 				nameType: 'like',
 				projectEntity:'',
-				countTypelist: [{
+				countTypelist: [
+				  {
 						key: '1',
 						value: '项目主体'
 					},
@@ -233,19 +275,19 @@
 					expandTrigger: "hover",
 					value: 'id'
 				},
-				specialBondProjectType: [
-				],
+				specialBondProjectType: [],
 				projectTypeText: ['不限'],
 				projectType:[],
 				arrList:[],
-				
 				pageFlag:true,
 				tableData:[],
 				total:0,
 				page:1,
-				pageSize:20
-				
-				
+				pageSize:20,
+        dialogEchartsVisible:false,
+        echartsData:{},
+        echartsDataState:false,
+        sumMoney:0,
 			}
 		},
 		created() {
@@ -506,7 +548,6 @@
 			  }
 			  this.isSkeleton = true;
 			  api.bondProjectPage(params).then(res=>{
-				this.isSkeleton = false;
             if (res.code==200) {
               this.tableData=res.data.list;
               this.total=res.data.total;
@@ -514,7 +555,29 @@
            }).catch(error=>{
 
 			   });
+        api.zxzxmjctj(params).then(res => {
+          this.isSkeleton = false;
+          if(res.code === 200 && res.data){
+            this.echartsData=res.data
+            this.initChart(res.data)
+            api.zxzxmqytj(params).then(res => {
+              this.echartsData.topTenCompanyMoney=res.data.topTenCompanyMoney;
+              this.echartsData.topTenCompany=res.data.topTenCompany;
+            }).catch(error => {
+
+            });
+          }else {
+            this.echartsDataState=true;
+          }
+
+        }).catch(error => {
 
+        });
+        api.zxzxmzjetj(params).then(res => {
+          this.sumMoney=res.data.sumMoney
+        }).catch(error => {
+
+        });
 			},
 			ckhasValue(param){
 				 var ckhasValue;
@@ -584,11 +647,413 @@
 			reset(){
 				Object.assign(this.$data, this.$options.data.call(this)); //重置data
 				this.init();
+			},
+      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)
           }
-</script>
+        }
+
+        this.$nextTick(() => {
+          let myChart = echarts.init(document.getElementById("echarts1"))
+          let option ={
+            tooltip: {
+              trigger: 'item',
+            },
+            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.topTenCompanyMoney){
+          for(const i in row.topTenCompanyMoney[key]){
+            let obj={};
+            obj.name=i;
+            obj.value=row.topTenCompanyMoney[key][i]/10000;
+            data3.push(obj)
+          }
+        }
+        let data4=[];
+        for(let key in row.topTenCompany){
+          for(const i in row.topTenCompany[key]){
+            let obj={};
+            obj.name=i;
+            obj.value=row.topTenCompany[key][i];
+            data4.push(obj)
+          }
+        }
+
+        this.$nextTick(() => {
+          let myChart = echarts.init(document.getElementById("echarts-xmlx"))
+          let option ={
+            tooltip: {
+              trigger: 'item',
+            },
+            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-tze"))
+          let option3 ={
+            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: data3.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:80,
+              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:data3.map(item => item.value),
+              }
+            ]
+          }
+          myChart3.setOption(option3);
+
+          let myChart4 = echarts.init(document.getElementById("echarts-xms"))
+          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:60,
+            },
+            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);
+
+
+          window.addEventListener("resize", function () {
+            myChart.resize();//图表跟随页面大小变化宽度
+            myChart1.resize();//图表跟随页面大小变化宽度
+            myChart2.resize();//图表跟随页面大小变化宽度
+            myChart3.resize();//图表跟随页面大小变化宽度
+            myChart4.resize();//图表跟随页面大小变化宽度
+
+          });
+        })
+
+      },
+		}
+	}
+</script>
+<style lang="scss">
+  .default_header_dropdown{
+    left: 266px !important;
+    top: 218px !important;
+    border-radius: 4px;
+  }
+</style>
 <style lang="scss" scoped>
 	.content{
 	  padding: 0px 16px;
@@ -683,7 +1148,6 @@
 	.bottomlist{
 		width: 100%;
 		background-color: #FFFFFF;
-		
     border-radius: 4px 4px 4px 4px;
 		.bottomlist-title{
 			display: flex;
@@ -724,7 +1188,6 @@
 			}
 		}
 		.bottomlist-content{
-			
 			padding-bottom: 0px;
 		}
 		.bottomlist-list{
@@ -807,5 +1270,67 @@
 			   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;
+      }
+    }
+
+	}
+
+  .dialogEcharts{
+    ::v-deep .el-dialog {
+      .el-dialog__body{
+        padding: 16px 19px 0 16px;
+        max-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;
+      }
     }
+  }
+
 </style>

dsk-operate-ui/src/views/radar/components/debtProject/index2.vue

+<template>
+	<div>
+		<div class="debtProject-content">
+			<div class="content_item content_item_padding0">
+			    <div class="label">项目名称</div>
+			    <div class="content_right">
+			        <el-input class="ename_input" placeholder="请输入项目名称关键字" v-model="projectName" ></el-input>
+			        <template v-if="projectName">
+			            <span v-for=" (item,k)  in nameTypeList" :key="k" style="margin-right: 24px;">
+			                <el-radio v-model="nameType" :label="item.key">{{item.value}}</el-radio>
+			            </span>
+			        </template>
+			    </div>
+			</div>
+			<div class="content_item ">
+			    <div class="label">项目当事人</div>
+			    <div class="content_right">
+			        <div class="item_ckquery_list" >
+			        	<div class="ckquery_list_right">
+			        		<el-input  ref="inp"
+			        			v-model="projectEntity" autocomplete="off" type="text"
+			        			class="register_count_ipt" placeholder="请输入企业名称">
+			        			<el-dropdown trigger="click" slot="prepend" placement="bottom-start"  style="cursor:pointer;"
+			        				@command="changeCommand">
+			        				<span class="el-dropdown-link">
+			        					{{chargeDepartment.value}}<i class="el-icon-arrow-down"></i>
+			        				</span>
+			        				<el-dropdown-menu class="default_header_dropdown" slot="dropdown">
+			        					<el-dropdown-item v-for="(item,k) in countTypelist" :key="k" :command="item">{{item.value}}</el-dropdown-item>
+			        				</el-dropdown-menu>
+			        			</el-dropdown>
+			        		</el-input>
+			        	</div>
+			        </div>
+			    </div>
+			</div>
+			<div class="content_item content_item16">
+			    <div class="label">项目地区</div>
+			    <div class="content_right">
+			       <div class="select-dev">
+			       	<el-cascader ref="address" @input="addressListbtn" v-model="addressType"
+			       		:options="addressList" :props="props" collapse-tags></el-cascader>
+			       </div>
+			    </div>
+			</div>
+			<div class="content_item content_item16">
+			    <div class="label">项目类型</div>
+			    <div class="content_right">
+					<div class="select-dev">
+					  <el-select v-model="projectType"  multiple placeholder="请选择" collapse-tags>
+					    <el-option v-for="(item, i) in specialBondProjectType" :key="i" :label="item" :value="item">
+					    </el-option>
+					  </el-select>
+					</div>
+
+			    </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;">956535214万元</span>
+            </span>
+					</p>
+				</div>
+				<div class="title-right">
+					<!--<p>-->
+						<!--<img src="@/assets/images/EXCEL.png" alt="">-->
+						<!--<span class="excel" @click="$message({message: '功能正在开发中',type: 'warning'})">导出EXCEL</span>-->
+					<!--</p>-->
+          <div class="title-right">
+            <el-button class="btn1" @click="$message({message: '功能正在开发中',type: 'warning'})">导出数据</el-button>
+            <el-button class="btn2">新增订阅方案</el-button>
+          </div>
+				</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="!isSkeleton&&tableData.length>0">
+				<li class="bottomlist-list" v-for="item in tableData">
+					<p class="list-titel">
+						<router-link  :to="'/radar/debtProject/details/'+ item.id" tag="a" class="list-titel-a" v-html="item.projectName" ></router-link>
+					</p>
+
+					<div class="content-label" v-if="item.domicile">
+						<span class="list-label">{{item.domicile}}</span>
+					</div>
+
+					<div  class="list-content">
+						<p class="list-content-text" v-if="item.projectType&&item.projectType!='空白'">
+							<span>项目类型：</span>
+							<span>{{item.projectType}}</span>
+						</p>
+						<p class="list-content-text"v-if="item.projectTotalInvestment">
+							<span>项目总投资(亿)：</span>
+							<span>{{item.projectTotalInvestment}}</span>
+						</p>
+						<p class="list-content-text" v-if="item.projectCapital">
+							<span>项目资本金(亿)：</span>
+							<span>{{item.projectCapital}}</span>
+						</p>
+						<p class="list-content-text" v-if="item.specialBondCapital">
+							<span>专项债金额(亿)：</span>
+							<span>{{item.specialBondCapital}}</span>
+						</p>
+					</div>
+					<div  class="list-content">
+						<p class="list-content-text" v-if="item.projectEntity">
+							<span>项目主体：</span>
+							<span v-if="item.projectEntityId">
+								 <span class="blue"   @click="getUipIdByCid(item.projectEntityId)" v-html="item.projectEntity"></span>
+							</span>
+							<span v-else  v-html="item.projectEntity">
+							</span>
+						</p>
+						<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.piu" >
+							<span>实施单位：</span>
+							<span v-if="item.piuId">
+								 <span class="blue"   @click="getUipIdByCid(item.piuId)" v-html="item.piu"></span>
+							</span>
+							<span v-else  v-html="item.piu">
+							</span>
+						</p>
+					</div>
+				</li>
+			</ul>
+			<template v-if="pageFlag">
+				<div class="pagination clearfix"  v-if="total>0&&pageFlag">
+					  <el-pagination
+					    background
+					    :page-size="pageSize"
+					    :current-page="page"
+					    @current-change="handleCurrentChange"
+					    layout="prev, pager, next"
+					    :total="total>limit*500?501*limit:total">
+					  </el-pagination>
+				</div>
+			</template>
+
+
+		</div>
+
+	</div>
+
+</template>
+
+<script>
+	import {encodeStr} from "@/assets/js/common.js"
+	import skeleton from '@/views/project/projectList/component/skeleton'
+	import api from '@/api/radar/radar.js';
+	import jsk_data from '../../../../../public/jsk.json';
+	export default {
+		name: 'debtProject',
+		components:{skeleton},
+		data() {
+			return {
+				encodeStr,
+				isSkeleton:true,
+				projectName:'',
+				nameTypeList: [{
+				        key: 'like',
+				        status: true ,
+				        value: '模糊搜索',
+				    },
+				    {
+				        key: 'match',
+				        status: false,
+				        value: '精准匹配',
+				    },
+				],
+				nameType: 'like',
+				projectEntity:'',
+				countTypelist: [{
+						key: '1',
+						value: '项目主体'
+					},
+					{
+						key: '2',
+						value: '主管部门'
+					},
+					{
+						key: '3',
+						value: '实施单位'
+					}
+				],
+				chargeDepartment: {
+					key: '3',
+					value: '项目主体'
+				},
+				addressList: [],
+				addressType: [],
+				props: {
+					multiple: true,
+					expandTrigger: "hover",
+					value: 'id'
+				},
+				specialBondProjectType: [
+				],
+				projectTypeText: ['不限'],
+				projectType:[],
+				arrList:[],
+
+				pageFlag:true,
+				tableData:[],
+				total:0,
+				page:1,
+				pageSize:20
+
+
+			}
+		},
+		created() {
+			this.init();
+		},
+		methods: {
+			init(){
+				this.addressListfn();
+				this.searchDic();
+				this.search();
+			},
+		     searchDic(){
+				api.searchDic().then(res=>{
+				this.specialBondProjectType=res.specialBondProjectType;
+				 }).catch(error=>{
+
+				 });
+
+			 },
+			changeCommand(str) {
+				this.chargeDepartment=str;
+			},
+			addressListfn() {
+				var searchid;
+				if(this.$route.name=='search-combinedYN'){
+					searchid='530000'
+				}else{
+					searchid=''
+				}
+
+				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) {
+							if(searchid){
+								if (jsk_data[i].id == searchid) {
+									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{
+									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;
+			},
+			// 项目属地
+			addressListbtn() {
+				for (let i = 0; i < this.arrList.length; i++) {
+					if (this.arrList[i].keyid == 'address') {
+						this.arrList.splice(i, 1);
+						i--;
+					}
+				}
+				let arr = (this.$refs.address.getCheckedNodes())
+				let provinceCode = [],
+					cityCode = [],
+					areaCode = [];
+				let province = [],
+					city = [],
+					area = [];
+
+				for (var i in arr) {
+					if (arr[i].parent) {
+						if (!arr[i].parent.checked) {
+							arr[i].hasChildren && cityCode.push(arr[i].value);
+							!arr[i].hasChildren && areaCode.push(arr[i].value);
+						}
+					} else {
+						provinceCode.push(arr[i].value)
+					}
+				}
+
+
+				for (let j = 0; j < jsk_data.length; j++) {
+					if (provinceCode.length > 0) {
+						for (let i = 0; i < provinceCode.length; i++) {
+							if (provinceCode[i] == jsk_data[j].id) {
+								province.push({
+									value: jsk_data[j].regionName,
+									key: provinceCode[i]
+								})
+							}
+
+						}
+
+					}
+					if (cityCode.length > 0) {
+						for (let i = 0; i < cityCode.length; i++) {
+							if (cityCode[i] == jsk_data[j].id) {
+								city.push({
+									value: jsk_data[j].regionName,
+									key: cityCode[i]
+								})
+							}
+
+						}
+					}
+					if (areaCode.length > 0) {
+						for (let i = 0; i < areaCode.length; i++) {
+							if (areaCode[i] == jsk_data[j].id) {
+								area.push({
+									value: jsk_data[j].regionName,
+									key: areaCode[i]
+								})
+							}
+
+						}
+					}
+
+				}
+				if (province.length > 0 || city.length > 0 || area.length > 0) {
+					let arrlist = [];
+					if (province.length > 0) {
+						for (let i in province) {
+							arrlist.push(province[i].value)
+						}
+					}
+					if (city.length > 0) {
+						for (let i in city) {
+							arrlist.push(city[i].value)
+						}
+					}
+					if (area.length > 0) {
+						for (let i in area) {
+							arrlist.push(area[i].value)
+						}
+					}
+					console.log(this.addressType);
+					this.arrList.push({
+						value: arrlist,
+						keyid: 'address',
+						provinceCode: provinceCode,
+						cityCode: cityCode,
+						areaCode: areaCode,
+						title: '项目属地：',
+						key: '',
+						addressType:this.addressType
+					})
+				}
+				// this.landMarketDto = obj
+			},
+			projecttypebtn(){
+					for(let i=0;i<this.projectType.length;i++){
+						if(this.projectType[i]=='不限'){
+							this.projectType=[];
+						}
+					}
+			},
+			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);
+				this.jump1();
+				}
+			},
+			search(page, limit,exportFlag) {
+			  if (!page) {
+				this.page = 1;
+			  }
+			  if (!limit) {
+				this.limit = 20;
+			  }
+			  if (!page && !limit) {
+				this.reloadPage();
+			  }
+			  let params = {
+				  page:{
+					 "page":this.page,
+					  "limit":this.limit,
+					  "field":"",
+					  "order":"desc"
+				  },
+				  specialBondProjectDto:{}
+			  };
+
+			  if(this.projectName){
+				  params.specialBondProjectDto['projectName']=this.projectName;
+				  params.specialBondProjectDto['nameType']=this.nameType;
+			  }
+			  if(this.projectEntity){
+
+				  if(this.chargeDepartment.value=='项目主体'){
+					  	params.specialBondProjectDto['projectEntity']=this.projectEntity;
+				  }
+				  if(this.chargeDepartment.value=='主管部门'){
+				  		params.specialBondProjectDto['chargeDepartment']=this.projectEntity;
+				  }
+				  if(this.chargeDepartment.value=='实施单位'){
+				  		params.specialBondProjectDto['piu']=this.projectEntity;
+				  }
+
+
+			  }
+			  if(this.arrList.length>0){
+				  for (let i = 0; i < this.arrList.length; i++) {
+				    if (this.arrList[i].keyid == "address") {
+				      params.specialBondProjectDto['province'] = this.arrList[i].provinceCode.join(',');
+				      params.specialBondProjectDto['city'] = this.arrList[i].cityCode.join(',');
+				      params.specialBondProjectDto['area'] = this.arrList[i].areaCode.join(',');
+				    }
+				}
+			  }
+			  if(this.projectType.length>0&&this.projectType[0]!='不限'){
+				  params.specialBondProjectDto['projectType'] = this.projectType.join(',');
+			  }
+			this.isSkeleton = true;
+			  api.bondProjectPage(params).then(res=>{
+				this.isSkeleton = false;
+				  if (res.code==200) {
+				  	this.tableData=res.data.list;
+				  	this.total=res.data.total;
+				  }
+			   }).catch(error=>{
+
+			   });
+
+			},
+			ckhasValue(param){
+				 var ckhasValue;
+				 if(param){
+					ckhasValue=this.hasValueThroughObj(0,param);
+				 }else{
+					ckhasValue=false;
+				 }
+				 return ckhasValue;
+			 },
+			 hasValueThroughObj(times,param,excludeKeys,excludeValues){
+
+				   if(times==0){
+				            this.hasValue=false;
+				        }
+				        var excludeKeys=['domicile','yitihuaSource'];
+				        var excludeValues=['and','or','{}','[]','','null','undefined'];
+				      　if(Array.isArray(param)){
+				            for(let i=0;i<param.length;i++){
+				                var objParam = param[i];
+				                Object.keys(objParam).map(key => {
+				                    if(Array.isArray(objParam[key])||objParam[key] instanceof Object){
+				                        this.hasValueThroughObj(1,objParam[key],excludeKeys,excludeValues);
+				                    }else{
+				                        if(objParam instanceof Object) {
+				                            if (!excludeKeys.includes(key)&&!excludeValues.includes(objParam[key])) {
+
+				                                this.hasValue =true;
+				                                // return hasValue;
+				                            }
+				                        }
+				                    }
+				              })
+				            }
+				      　}else{
+				      　    if(param instanceof Object) {
+				               Object.keys(param).map(key => {
+				                    if(Array.isArray(param[key])||param[key] instanceof Object){
+				                        this.hasValueThroughObj(1,param[key],excludeKeys,excludeValues);
+				                    }else{
+				                        if (!excludeKeys.includes(key)&&!excludeValues.includes(param[key])) {
+
+				                           this.hasValue =true;
+				                            // return hasValue;
+				                        }
+				                    }
+				                })
+				            }
+				        }
+				        return this.hasValue;
+			},
+			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=>{
+
+				 });
+			},
+			reset(){
+				Object.assign(this.$data, this.$options.data.call(this)); //重置data
+				this.init();
+			}
+		}
+	}
+</script>
+<style lang="scss">
+  .default_header_dropdown{
+    left: 266px !important;
+    top: 228px !important;
+    width: 192px;
+    height: 112px;
+    border-radius: 4px;
+    .el-dropdown-menu__item{
+      line-height: 32px;
+    }
+    .el-dropdown-menu__item:hover{
+      background: #F5F7FA;
+      color:#303133;
+    }
+  }
+</style>
+<style lang="scss" scoped>
+
+  ::v-deep .default_header_dropdown{
+    left: 266px;
+    width: 192px;
+    height: 112px;
+    border-radius: 4px;
+  }
+
+  .debtProject-content{
+	  padding: 0px 16px;
+	  padding-top: 16px;
+      border-radius: 4px 4px 4px 4px;
+	   background: #FFFFFF;
+	   .content_item{
+		   padding-top: 20px;
+		   display: flex;
+		   align-items: center;
+	       .label{
+	           width: 84px;
+			   font-size: 14px;
+			   font-weight: 400;
+			   color: rgba(35,35,35,0.8);
+	       }
+	       .content_right{
+           .ename_input{
+             width: 640px;
+             margin-right: 20px;
+           }
+           .select-dev{
+             text-align: center;
+             display: inline-block;
+             position: relative;
+             color: #333333;
+             font-size: 14px;
+             cursor: pointer;
+             margin-right: 16px;
+             ::v-deep .el-cascader{
+               width: 240px;
+               .el-input__inner{
+                 border-radius: 4px;
+               }
+               .el-tag:first-child{
+                 max-width: 146px;
+                 /*padding: 0 6px;*/
+               }
+             }
+             ::v-deep .el-select{
+               width: 240px;
+               .el-input__inner{
+                 border-radius: 4px;
+               }
+             }
+           }
+	       }
+
+		 .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 12px;
+			background-color:#F3F4F5;
+			border-radius:2px;
+			border-top-right-radius: 0;
+			border-bottom-right-radius: 0;
+		}
+		.content-projecttype{
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			.projecttype{
+				font-weight: 400;
+				color: #303133;
+				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_item_padding0{
+		   padding: 0;
+	   }
+	   .content_item18{
+	   	padding-top: 16px;
+	   }
+
+	}
+
+  .content_item .search-new span:last-child {
+    display: inline-block;
+    width: 60px;
+    text-align: center;
+    color: #606266;
+    line-height: 30px;
+    cursor: pointer;
+    border-radius: 4px;
+    border: 1px solid #CDD0D6;
+    opacity: 1;
+  }
+
+  .content_item .search-new span:first-child {
+    margin-right: 12px;
+    display: inline-block;
+    width: 60px;
+    text-align: center;
+    cursor: pointer;
+    background: #1373D9;
+    color: #fff;
+    line-height: 32px;
+    border-radius: 4px;
+    opacity: 1;
+  }
+
+  .content_item .search-new span:first-child:hover {
+    background: #2073CA;
+  }
+
+  .content_item .search-new span:last-child:hover {
+    background: #f5faff;
+    color: #1373D9;
+    border-color: #1373D9;
+  }
+
+	.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;
+			.bottomlist-title-left{
+				display: inline-flex;;
+				align-items: center;
+				.title-left{
+				  height:16px;
+				  line-height: 16px;
+				  font-size: 12px;
+				  font-weight: 400;
+				  color: #3D3D3D;
+			   }
+			}
+			.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;
+				}
+
+        .btn1{
+          width: 88px;
+          height: 32px;
+          border-radius: 4px;
+          background: #1373D9;
+          margin-right: 10px;
+          padding: 0;
+          color:#ffffff;
+          border: 0;
+        }
+
+        .btn2{
+          width: 116px;
+          height: 32px;
+          border-radius: 4px;
+          border: 1px solid #DCDFE6;
+          color: #606266;
+          padding: 0;
+          margin-left:0;
+        }
+        .btn2:hover{
+          border: 1px solid #1373D9;
+          color:#1373D9;
+          background: #ffffff;
+        }
+
+
+			}
+		}
+		.bottomlist-content{
+
+			padding-bottom: 0px;
+		}
+		.bottomlist-list{
+			padding: 14px;
+			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: 5px;
+				margin-bottom: 5px;
+				.list-label{
+					background: #F3F3FF;
+					color: #8491E8;
+					border-radius: 1px 1px 1px 1px;
+
+					padding: 3px 7px;
+					font-size: 12px;
+
+				}
+			}
+
+
+			.list-content{
+				margin-top: 3px;
+				display: flex;
+				justify-content: start;
+				align-items: center;
+
+				.list-content-text{
+					margin-top: 7px;
+					display: flex;
+					justify-content: start;
+					align-items: center;
+					margin-right: 32px;
+					font-size: 14px;
+
+					span:first-child{
+						font-weight: 400;
+						color: rgba(35,35,35,0.4);
+						line-height: 15px
+					}
+					span:last-child{
+						font-weight: 400;
+						color: rgba(35,35,35,0.8);
+						line-height: 15px
+					}
+					.blue{
+						color: #0081FF !important;
+						cursor: pointer;
+
+					}
+
+				}
+
+
+			}
+
+
+		}
+		.bottomlist-list:hover{
+			background: #F6F9FC;
+			cursor: pointer;
+		}
+		.pagination{
+			padding: 14px ;
+		   .el-pagination{
+			   float: right;
+		   }
+		}
+	}
+</style>

dsk-operate-ui/src/views/radar/index.vue

@@ -134,7 +134,7 @@
 
 	.app-container .combined-title {
 		display: flex;
-		padding-top: 16px;
+		padding-top: 10px;
 		align-items: center
 	}
 
@@ -142,7 +142,7 @@
 		display: inline-block;
 		width: 6px;
 		height: 26px;
-		background: #0081FF;
+		background: #1373D9;
 		border-radius: 0px 0px 0px 0px;
 		opacity: 1;
 		margin-right: 18px;
@@ -163,7 +163,7 @@
 	}
 
 	.app-container .combined-title .title-right .title-add {
-		color: #0081FF;
+		color: #1373D9;
 		cursor: pointer;
 		position: absolute;
 		right: 0;
@@ -246,19 +246,19 @@
 	}
 
 	 .tab .active {
-		color: #0081FF;
+		color: #1373D9;
 	}
 
 	 .tab .active .triangle {
-		border-top: 4px solid #0081FF;
+		border-top: 4px solid #1373D9;
 	}
 
 	 .tab .active .logo {
-		background: #0081FF;
+		background: #1373D9;
 	}
 
 	 .tab .active p {
-		border-bottom: 2px solid #0081FF;
+		border-bottom: 2px solid #1373D9;
 		font-weight: bold;
 	}
 </style>

dsk-operate-ui/src/views/radar/index2.vue

+<template>
+  <div v-loading="loading" class="radar-container">
+    <iframe id="companyIframe" class="radar-iframe" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" width="100%" :src="src" />
+  </div>
+</template>
+
+<script>
+import { steerScroll } from '@/assets/js/jskplug';
+import { dskAccessToken } from '@/api/common';
+import { encodeStr } from "@/assets/js/common";
+import MaxPageSizeTip from "@/views/components/MaxPageSizeTip.vue";
+import { getUipIdByCid } from '@/api/macro/macro';
+export default {
+  name: 'Enterprise',
+  components: {
+    MaxPageSizeTip
+  },
+  data() {
+    return {
+      encodeStr,
+      loading: false, // 是否加载完成-当前页控制
+      iframeTimer: '',  // 是否加载中定时器-当前页控制
+      footHeight: 0,  //底部高度，若为0（页面内部嵌套或者没有底部板块）
+      iframeHight: `${window.innerHeight}px`, // iframe高度-当前页控制
+      navigation: { isFixed: true, fixedHeight: 56, totalHeight: 68 },  // iframe之外页面顶部对象，ifFixed:是否浮动；fixedHeight：浮动对象高度；totalHeight：顶部整体高度
+      src: '',  //iframe嵌套页面地址
+      domain: 'https://plug.jiansheku.com', // 插件地址
+      // domain: 'https://pre-plug.jiansheku.com', // 插件地址测试
+      // domain: 'http://192.168.60.104:3400',
+      ak: 'aec7b3ff2y2q8x6t49a7e2c463ce21912', // 需要携带的sdkId
+      timelongs: 7200,//刷新token时间
+      tokentimer: null,
+      showMaxPageTip: false,
+      iframeIns: null,
+    };
+  },
+  created() {
+    this.domain = process.env.VUE_APP_SUB_SYSTEM_ADDRESS;
+    this.gettokens();
+    this.iframeObserver();
+    let that = this;
+    window.addEventListener("message", this.pagecapListener, { passive: true });
+    window.addEventListener('message', this.linkListener, false);
+  },
+  mounted() {
+    this.iframeLoading(); // 判断iframe页面是否加载完成-当前页控制
+    // steerScroll('companyIframe', this.navigation, this.footHeight, true); // iframeId: iframe的id；navigation:页面排除iframe后剩下的顶部高度；footHeight: 页面排除iframe后剩下的底部高度；state:监听or移除监听；parentId: 父级id[不带默认就是铺满整个页面]];_this:指向当前实例（可忽略）
+  },
+  beforeDestroy() {
+    clearInterval(this.iframeTimer); // -当前页控制
+    steerScroll('companyIframe', this.navigation, this.footHeight); // iframeId: iframe的id；navigation:页面排除iframe后剩下的顶部高度；footHeight: 页面排除iframe后剩下的底部高度；state:监听or移除监听；parentId: 父级id[不带默认就是铺满整个页面]];_this:指向当前实例（可忽略）
+    clearInterval(this.tokentimer);
+    window.removeEventListener("message", this.pagecapListener, { passive: true });
+    window.removeEventListener("message", this.linkListener);
+    // 移除layout样式
+    this.iframeIns?.contentWindow ? this.iframeIns.contentWindow.postMessage("removeHtmlLayoutStyle", { targetOrigin: this.domain, }) : null;
+  },
+  methods: {
+    linkListener(event) {
+      let { data, origin } = event;
+      if (origin != this.domain) return;
+      if (data.id) {
+        getUipIdByCid([data.id]).then(res => {
+          if (res.code == 200) {
+            if (res.data && res.data.length > 0 && res.data[0].uipId) {
+              this.$router.push({ path: '/enterprise/' + this.encodeStr(data.id) });
+            } else {
+              this.$tab.openPage(data.title, '/company/' + this.encodeStr(data.id));
+            }
+
+          }
+        }).catch(error => {
+
+        });
+      } else {
+        if (data.url) {
+          this.$tab.openPage(data.title, data.url);
+        }
+      }
+    },
+    async iframeObserver() {
+      try {
+        await this.$nextTick();
+        this.iframeIns = document.querySelector(".radar-iframe");
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    // 列表翻页上限
+    pagecapListener(e) {
+      const { origin, data } = e;
+      if (origin != this.domain) return;
+      if (data == "pageCurrentMaxSize") {
+        this.$maxTip("您可通过筛选工具来查询数据～若有更多需求请联系客服 0262798729！").then(({ done, uid }) => {
+          done();
+        });
+      }
+    },
+    gettokens() {
+      dskAccessToken().then(res => {
+        if (res.code == 200) {
+          this.timelongs = res.data.expire;
+          this.ak = res.data.accessToken;
+          this.src = `${this.domain}/radar?ak=${this.ak}&initTime=${new Date().getTime()}&uid=${this.ak}&origin=${window.location.origin}`;
+          this.refreshtoken();
+        } else {
+          clearTimeout(this.tokentimer);
+        }
+      });
+    },
+    refreshtoken() {
+      this.tokentimer = setTimeout(() => {
+        dskAccessToken().then(res => {
+          if (res.code == 200) {
+            this.timelongs = res.data.expire;
+            this.ak = res.data.accessToken;
+            let ifam = document.getElementById('companyIframe');	//iframe的id
+            let akObj = res.data.expire;	//accessToken接口的返回值
+            let initTime = new Date().getTime(); 	//accessToken接口返回后的当前时间戳
+            ifam.contentWindow.postMessage({ 'accessToken': akObj.accessToken, 'initTime': initTime }, '*');
+          } else {
+            clearTimeout(this.tokentimer);
+          }
+        });
+      }, this.timelongs * 1000);
+    },
+    //判断iframe页面是否加载完成-当前页控制
+    iframeLoading() {
+      let iframeHeight = document.getElementById("companyIframe").clientHeight, number = 0;
+      this.iframeTimer = setInterval(() => {
+        number++;
+        if (document.getElementById("companyIframe").clientHeight != iframeHeight || number == 5000) {
+          this.loading = false;
+          clearInterval(this.iframeTimer);
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.radar-container {
+  width: 100%;
+  height: 100%;
+  padding: 16px 24px;
+  /*padding-right: 15px;*/
+  box-sizing: border-box;
+  position: absolute;
+  left: 0;
+  top: 0;
+
+  .radar-iframe {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

dsk-operate-ui/src/views/register.vue

 <template>
   <div class="register">
     <el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form">
-      <h3 class="title">数字化经营履约全生命链路管理系统 </h3>
+      <h3 class="title">中铁二十局市场经营信息服务系统 </h3>
       <el-form-item prop="username">
         <el-input v-model="registerForm.username" type="text" auto-complete="off" placeholder="账号">
           <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />

dsk-operate-ui/vue.config.js

@@ -7,7 +7,7 @@ function resolve(dir) {
 
 const CompressionPlugin = require('compression-webpack-plugin');
 
-const name = process.env.VUE_APP_TITLE || '数字化经营履约全生命链路管理系统'; // 网页标题
+const name = process.env.VUE_APP_TITLE || '中铁二十局市场经营信息服务系统'; // 网页标题
 
 const port = process.env.port || process.env.npm_config_port || 80; // 端口
 // vue.config.js 配置说明
@@ -35,7 +35,9 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://120.46.64.239:9099/prod-api`,//测试
+        // target: `http://120.46.64.239:9099/prod-api`,//测试
+        target: `http://123.60.218.188:9099/prod-api`,//中铁二十局测试
+        // target: `http://123.60.218.188:9097/prod-api`,//中铁二十局线上
         // target: `https://szhapi.jiansheku.com`,//线上
         // target: `http://122.9.160.122:9011`,  //线上
         // target: `http://192.168.0.165:9098`,//施-无线