Browse Source

中间大屏接口对接

zhbyyy 2 years ago
parent
commit
5333102edd
2 changed files with 117 additions and 96 deletions
  1. 8 8
      investmentPort/investHomeGroup.html
  2. 109 88
      investmentPort/js/investHomeGroup.js

+ 8 - 8
investmentPort/investHomeGroup.html

@@ -256,12 +256,12 @@
                 产业转型
               </div> -->
               <div class="flex b">
-                <div class="pointer" @click.stop="showChartLTipSingle('投资总额','center')">
+                <div class="pointer" @click.stop="showChartLTipSingle('投资总额','center','keyIndicators','investamount')">
                   <p>投资总额</p>
                   <p style="color:#40A9FF"><span>{{numFormat(center1[0])}}</span><span style="font-size: 25px;">亿</span>
                   </p>
                 </div>
-                <div class="pointer" @click.stop="showChartLTipSingle('项目总数','center')">
+                <div class="pointer" @click.stop="showChartLTipSingle('项目总数','center','keyIndicators','projectcount')">
                   <p>项目总数</p>
                   <p style="color:#40A9FF"><span>{{center1[1]}}</span><span style="font-size: 25px;">个</span></p>
                 </div>
@@ -273,12 +273,12 @@
                 数字转型
               </div> -->
               <div class="flex b">
-                <div class="pointer" @click.stop="showChartLTipSingle('固定资产','center')">
+                <div class="pointer" @click.stop="showChartLTipSingle('固定资产','center','keyIndicators','gdzcamount')">
                   <p>固定资产</p>
                   <p style="color:#40A9FF"><span>{{numFormat(center1[2])}}</span><span style="font-size: 25px;">亿</span>
                   </p>
                 </div>
-                <div class="pointer" @click.stop="showChartLTipSingle('股权投资','center')">
+                <div class="pointer" @click.stop="showChartLTipSingle('股权投资','center','keyIndicators','gqtzamount')">
                   <p>股权投资</p>
                   <p style="color:#40A9FF"><span>{{center1[3]}}</span><span style="font-size: 25px;">个</span></p>
                 </div>
@@ -337,12 +337,12 @@
               产业转型
             </div> -->
             <div class="flex b">
-              <div class="pointer" @click.stop="showChartLTipSingle('投资总额','center')">
+              <div class="pointer" @click.stop="showChartLTipSingle('投资总额','center','keyIndicators','investamount')">
                 <p>投资总额</p>
                 <p style="color:#40A9FF"><span>{{numFormat(center1[0])}}</span><span style="font-size: 25px;">亿</span>
                 </p>
               </div>
-              <div class="pointer" @click.stop="showChartLTipSingle('项目总数','center')">
+              <div class="pointer" @click.stop="showChartLTipSingle('项目总数','center','keyIndicators','projectcount')">
                 <p>项目总数</p>
                 <p style="color:#40A9FF"><span>{{center1[1]}}</span><span style="font-size: 25px;">个</span></p>
               </div>
@@ -354,12 +354,12 @@
               数字转型
             </div> -->
             <div class="flex b">
-              <div class="pointer" @click.stop="showChartLTipSingle('固定资产','center')">
+              <div class="pointer" @click.stop="showChartLTipSingle('固定资产','center','keyIndicators','gdzcamount')">
                 <p>固定资产</p>
                 <p style="color:#40A9FF"><span>{{numFormat(center1[2])}}</span><span style="font-size: 25px;">亿</span>
                 </p>
               </div>
-              <div class="pointer" @click.stop="showChartLTipSingle('股权投资','center')">
+              <div class="pointer" @click.stop="showChartLTipSingle('股权投资','center','keyIndicators','gqtzamount')">
                 <p>股权投资</p>
                 <p style="color:#40A9FF"><span>{{center1[3]}}</span><span style="font-size: 25px;">个</span></p>
               </div>

+ 109 - 88
investmentPort/js/investHomeGroup.js

@@ -2,6 +2,8 @@ let app = new Vue({
   el: '#app',
   data () {
     return {
+      lineCommonCompany: [], //双柱状图弹窗上面的折线图x轴
+      changeLine: true,
       versions: true,
       app_token: '',
       centerShow: false, // 中间内容显示
@@ -740,63 +742,90 @@ let app = new Vue({
         })
       });
     },
-    // 中间穿透一级
-    centerPenetrateOne (type, param) {
+    // 中间穿透一级                 一个柱状图还是两个
+    centerPenetrateOne (type, param, typeNum) {
+      let that = this
       return new Promise((resolve, err) => {
         let value = {
           access_token: this.access_token,
           mock: false,
           presetYear: 2023,
           type,
-          param: ''
+          param
         }
-        common3 = []
         get('/ierp/kapi/v2/mdnb/mdnb_pmba_ext/presetdata/getPenetrationLevel1', value).then(res => {
-          console.log(res.data.keyIndicators,'????????')
-          res.data.keyIndicators.forEach((item, index) => {
-            if (type == 'cyplanamount') {
-              common3.push(item.cyplanamount)
-            }
-            if (type == 'cyplancount') {
-              common3.push(item.cyplanamount)
-            }
-            if (type == 'szplanamount') {
-              common3.push(item.cyplanamount)
-            }
-            if (type == 'szplancount') {
-              common3.push(item.szplancount)
-            }
-            if (type == 'investamount') {
-              common3.push(item.investamount)
-            }
-            if (type == 'projectcount') {
-              common3.push(item.projectcount)
-            }
-            if (type == 'gdzcamount') {
-              common3.push(item.projectcount)
-            }
-            if (type == 'gqtzamount') {
-              common3.push(item.projectcount)
-            }
-            if (type == 'ceiamount') {
-              common3.push(item.ceiamount)
-            }
-            if (type == 'cpneiamount') {
-              common3.push(item.cpneiamount)
-            }
-            if (type == 'ccheiamount') {
-              common3.push(item.ccheiamount)
-            }
-            if (type == 'cdiamount') {
-              common3.push(item.cdiamount)
-            }
-            if (type == 'cciamount') {
-              common3.push(item.cciamount)
+          if (typeNum == 1) {
+            res.data.keyIndicators.forEach((item, index) => {
+              common3 = []
+              if (param == 'cyplanamount') {
+                common3.push(item.cyplanamount)
+              }
+              if (param == 'cyplancount') {
+                common3.push(item.cyplanamount)
+              }
+              if (param == 'szplanamount') {
+                common3.push(item.cyplanamount)
+              }
+              if (param == 'szplancount') {
+                common3.push(item.szplancount)
+              }
+              if (param == 'investamount') {
+                common3.push(item.investamount)
+              }
+              if (param == 'projectcount') {
+                common3.push(item.projectcount)
+              }
+              if (param == 'gdzcamount') {
+                common3.push(item.projectcount)
+              }
+              if (param == 'gqtzamount') {
+                common3.push(item.projectcount)
+              }
+              if (param == 'ceiamount') {
+                common3.push(item.ceiamount)
+              }
+              if (param == 'cpneiamount') {
+                common3.push(item.cpneiamount)
+              }
+              if (param == 'ccheiamount') {
+                common3.push(item.ccheiamount)
+              }
+              if (param == 'cdiamount') {
+                common3.push(item.cdiamount)
+              }
+              if (param == 'cciamount') {
+                common3.push(item.cciamount)
+              }
+              setTimeout(() => {
+                this.initChartLTip()
+              })
+            })
+          } else if (typeNum == 2) {
+            common4 = []
+            common5 = []
+            if (type == 'distribution') {
+              that.changeLine = false
+              that.lineCommonCompany = res.data.topData.map(item=>item.type)
+              common4 = res.data.topData.map(item=>item.amount)
+              common5 = res.data.bottomData.map(item=>item.amount)
+            } else {
+              if (param == '新建') {
+                res.data.keyIndicators.forEach((item, index) => {
+                  common4.push(item.newamount)
+                  common5.push(item.newcount)
+                })
+              } else if (param == '续建') {
+                es.data.keyIndicators.forEach((item, index) => {
+                  common4.push(item.renewamount)
+                  common5.push(item.renewcount)
+                })
+              }
             }
-          })
-          setTimeout(() => {
-            this.initChartLTip()
-          })
+            setTimeout(() => {
+              this.initChartLTip2()
+              this.initChartLTip3()
+            })
+          }
           resolve(1);
         })
       });
@@ -846,7 +875,7 @@ let app = new Vue({
       return myArr
     },
     // 两个柱状图的弹窗
-    showChartLTipDouble (e, location, mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, mdnb_textfield5) {
+    showChartLTipDouble (e, location, mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, mdnb_textfield5, type, param) {
       this.titleName = e
       this.closeTap()
       this.echartDoubleTipShow = true
@@ -856,6 +885,9 @@ let app = new Vue({
       if (location == 'left') {
         this.leftPenetrateOne(mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, mdnb_textfield5)
       }
+      if (location == 'center') {
+        this.centerPenetrateOne(type, param, 2)
+      }
       setTimeout(() => {
         this.initChartLTip2()
         this.initChartLTip3()
@@ -867,7 +899,7 @@ let app = new Vue({
       this.titleName = e
       this.echartSingleTipShow = true
       if (location == 'center') {
-        this.centerPenetrateOne(type, param)
+        this.centerPenetrateOne(type, param, 1)
       }
       setTimeout(() => {
         this.initChartLTip()
@@ -1052,7 +1084,7 @@ let app = new Vue({
           },
         },
         xAxis: {
-          data: ["山西焦煤", "晋能控股", "华阳新材", "潞安化工", "华新燃气", "太重集团", "国际能源", "华远陆港", "水控集团", "文旅集团", "交控集团", '航产集团', '山西建投', '汾酒集团', '大地控股', '云时代', '华舰体育', '神农科技'],
+          data: this.changeLine?commonCompany:this.lineCommonCompany,
           axisTick: {
             show: false,
           },
@@ -1113,32 +1145,9 @@ let app = new Vue({
           },
         },
         series: [
-          // {
-          //   name: "2022年额度",
-          //   type: "bar",
-          //   data: [263.23, 402.18, 73.28, 144.80, 25.56, 8.23, 0, 12.97, 8.56, -1.72, 0, 0, 0, 76.90, 5.03, 9.14, 0, 0],
-          //   showBackground: false,
-          //   backgroundStyle: {
-          //     color: "#18416F",
-          //   },
-          //   barWidth: "10%",
-          //   itemStyle: {
-          //     barBorderRadius: [10, 10, 0, 0],
-          //     color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
-          //       {
-          //         offset: 0,
-          //         color: '#082550',
-          //       },
-          //       {
-          //         offset: 1,
-          //         color: '#69c0ff',
-          //       },
-          //     ]),
-          //   },
-          // },
           {
             name: "2023年额度",
-            type: "bar",
+            type: this.changeLine?"bar":'line',
             data: common4,
             showBackground: false,
             backgroundStyle: {
@@ -1208,7 +1217,7 @@ let app = new Vue({
           },
         },
         xAxis: {
-          data: ["山西焦煤", "晋能控股", "华阳新材", "潞安化工", "华新燃气", "太重集团", "国际能源", "华远陆港", "水控集团", "文旅集团", "交控集团", '航产集团', '山西建投', '汾酒集团', '大地控股', '云时代', '华舰体育', '神农科技'],
+          data: commonCompany,
           axisTick: {
             show: false,
           },
@@ -1340,6 +1349,7 @@ let app = new Vue({
       that.myChartTip3.setOption(option);
     },
     closeTap () {
+      this.changeLine = true
       this.echartEnterpriseShow = false
       this.mapTipShow = false
       this.echartSingleTipShow = false
@@ -3691,7 +3701,7 @@ let app = new Vue({
                     point: {
                       events: {
                         click: function (e) {
-                          that.showChartLTipDouble(e.point.name)
+                          that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', '', 'distribution', e.point.name)
                         }
                       }
                     },
@@ -3775,7 +3785,7 @@ let app = new Vue({
           point: {
             events: {
               click: function (e) { //点击事件
-                that.showChartLTipDouble(e.point.name)
+                that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', '', 'distribution', e.point.name)
               },
               mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
                 //console.log(e) 
@@ -3792,7 +3802,7 @@ let app = new Vue({
                     point: {
                       events: {
                         click: function (e) {
-                          that.showChartLTipDouble(e.point.name)
+                          that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', '', 'distribution', e.point.name)
                         }
                       }
                     },
@@ -3823,7 +3833,7 @@ let app = new Vue({
                       point: {
                         events: {
                           click: function (e) {
-                            that.showChartLTipDouble(e.point.name)
+                            that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', '', 'distribution', e.point.name)
                           }
                         }
                       },
@@ -4210,7 +4220,7 @@ let app = new Vue({
       let that = this
       this.mapChart.on('click', function (params) {
         if (params.name == '太原市') {
-          that.showChartLTipDouble('太原市')
+          // that.showChartLTipDouble(params.name, 'center', '', '', '', '', '', 'investmentMap', '山西省')
         }
       })
       tools.loopShowTooltip(this.mapChart, option, {
@@ -4390,6 +4400,7 @@ let app = new Vue({
       let that = this
       this.mapChart.on('click', function (params) {
         if (params.name == '山西') {
+          // that.showChartLTipDouble(params.name, 'center', '', '', '', '', '', 'investmentMap', '山西省')
           that.mapChart.dispose()
           that.centerShow = true
           setTimeout(() => {
@@ -4530,7 +4541,17 @@ let app = new Vue({
       }
       let that = this
       myChart.on('click', function (param) {
-        that.projectListTipShow = true
+        if (param.name == '煤炭和煤电') {
+          that.showChartLTipSingle(param.name, 'center', 'keyIndicators', 'ceiamount')
+        } else if (param.name == '煤电和新能源') {
+          that.showChartLTipSingle(param.name, 'center', 'keyIndicators', 'cpneiamount')
+        } else if (param.name == '煤炭和化工') {
+          that.showChartLTipSingle(param.name, 'center', 'keyIndicators', 'ccheiamount')
+        } else if (param.name == '煤炭和数字') {
+          that.showChartLTipSingle(param.name, 'center', 'keyIndicators', 'cdiamount')
+        } else if (param.name == '煤炭和降碳') {
+          that.showChartLTipSingle(param.name, 'center', 'keyIndicators', 'cciamount')
+        }
       })
       myChart.setOption(option)
       tools.loopShowTooltip(myChart, option, {
@@ -4593,7 +4614,7 @@ let app = new Vue({
                     point: {
                       events: {
                         click: function (e) {
-                          that.showChartLTipDouble(e.point.name)
+                          that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', '', 'keyIndicators', e.point.name)
                         }
                       }
                     },
@@ -4614,7 +4635,7 @@ let app = new Vue({
                       point: {
                         events: {
                           click: function (e) {
-                            that.showChartLTipDouble(e.point.name)
+                            that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', '', 'keyIndicators', e.point.name)
                           }
                         }
                       },
@@ -4692,7 +4713,7 @@ let app = new Vue({
           point: {
             events: {
               click: function (e) { //点击事件
-                that.showChartLTipDouble(e.point.name)
+                that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', '', 'keyIndicators', e.point.name)
               },
               mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
                 //console.log(e) 
@@ -4709,7 +4730,7 @@ let app = new Vue({
                     point: {
                       events: {
                         click: function (e) {
-                          that.showChartLTipDouble(e.point.name)
+                          that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', '', 'keyIndicators', e.point.name)
                         }
                       }
                     },
@@ -4740,7 +4761,7 @@ let app = new Vue({
                       point: {
                         events: {
                           click: function (e) {
-                            that.showChartLTipDouble(e.point.name)
+                            that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', '', 'keyIndicators', e.point.name)
                           }
                         }
                       },
@@ -4761,7 +4782,7 @@ let app = new Vue({
                         point: {
                           events: {
                             click: function (e) {
-                              that.showChartLTipDouble(e.point.name)
+                              that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', '', 'keyIndicators', e.point.name)
                             }
                           }
                         },