大屏更新

public/config.js

@@ -288,35 +288,13 @@ export const appconfig = {
           {
             "key": "chinavec2d",
             "name": "中国电子地图",
-            "url": "http://192.168.2.238:8090/iserver/services/map-citymap/rest/maps/%E5%9F%8E%E5%B8%82%E5%A4%A7%E5%B1%8F%E5%9C%B0%E5%9B%BE"
+            "url": "http://192.168.2.238:8090/iserver/services/map-citymap-2/rest/maps/citymap_yc"
           },
-          {
-            "key": "vec3d",
-            "name": "岳阳电子地图",
-            "url": "http://192.168.2.238:8090/iserver/services/map-ugcv5-citymap/rest/maps/citymap"
-          }
-        ]
-      },
-      "tdtimgano": {
-        "name": "天地图影像注记",
-        "type": "cia_c",
-        "config": [
-          {
-            "key": "tdtyxbz",
-            "name": "天地图影像注记",
-            "url": "1ed02fd051894454aafad779315f718c"
-          }
-        ]
-      },
-      "tdtimg": {
-        "name": "天地图影像",
-        "type": "img_c",
-        "config": [
-          {
-            "key": "tdtyx",
-            "name": "天地图影像",
-            "url": "1ed02fd051894454aafad779315f718c"
-          }
+          // {
+          //   "key": "vec3d",
+          //   "name": "岳阳电子地图",
+          //   "url": "http://192.168.2.238:8090/iserver/services/map-ugcv5-citymap/rest/maps/citymap"
+          // }
         ]
       },
       "scenes": {
@@ -326,7 +304,7 @@ export const appconfig = {
           {
             "key": "jzcj",
             "name": "建筑场景",
-            "url": "http://192.168.2.238:8090/iserver/services/3D-hbyc_base/rest/realspace"
+            "url": "http://192.168.2.238:8090/iserver/services/3D-TF_PAPN_BUILD/rest/realspace"
           },
         ]
       },
@@ -352,17 +330,6 @@ export const appconfig = {
           }
         ]
       },
-      "geometry": {
-        "name": "空间分析服务",
-        "type": "spatialanalyst",
-        "config": [
-          {
-            "key": "jhfw",
-            "name": "空间分析服务",
-            "url": "http://192.168.2.238:8090/iserver/services/spatialAnalysis-sxgc_pipe/restjsr/spatialanalyst"
-          }
-        ]
-      },
       "theme": {
         "name": "专题地图服务",
         "type": "theme",

src/api/bigScreenAPI/bigScreenRequest.ts

@@ -7,17 +7,17 @@ import request from '@/utils/request'
   */
 //获取接口list编码
 export function getBlockPage(params) {
-    return request({
-      url: '/tofly-psjc-panoramic/block/page',
-      method: 'get',
-      params
-    })
+  return request({
+    url: '/panoramic/block/page',
+    method: 'get',
+    params
+  })
 }
 //通用list查询
 export function getResultList(params) {
-    return request({
-      url: '/tofly-psjc-panoramic/common/list',
-      method: 'get',
-      params
-    })
+  return request({
+    url: '/panoramic/common/list',
+    method: 'get',
+    params
+  })
 }

src/views/groupPage/baseMap/components/EchartsMap.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="EchartsMap" v-if="show">
+    <!-- <StarryBackground /> -->
     <div class="chart" ref="middleMap"></div>
     <!-- <div class="back" v-show="backShow" @click="backClick">〈 返回</div> -->
   </div>
@@ -11,8 +12,12 @@ import 'echarts-gl'
 //引入map相关json配置
 import mapJson from './mapJson/config.json'
 import mainMap from './mapJson/china.json'
+import StarryBackground from './StarryBackground.vue'
 export default {
   name: 'EchartsMap',
+  components: {
+    StarryBackground
+  },
   props: {
     show: {}
   },
@@ -73,7 +78,12 @@ export default {
     }
   },
   mounted() {
-    // this.getData()
+    //图表大小自适应
+    window.addEventListener('resize', () => {
+      setTimeout(() => {
+        this.getData()
+      }, 1000)
+    })
   },
   methods: {
     getData() {
@@ -487,10 +497,10 @@ export default {
         this.mapData = []
       }
       //地图初始化
-      this.mapInit(this.mapname, this.mapShowBuildData, this.mapShowUnBuildData, this.groupName)
+      this.mapInit()
     },
     //地图初始化
-    mapInit(initname, mapShowBuildData, mapShowUnBuildData, orgName) {
+    mapInit() {
       var that = this
       //容器加载
       this.groupChart = echarts.init(this.$refs.middleMap)
@@ -560,12 +570,13 @@ export default {
         distance: that.mapDistance, //地图视角 控制初始大小
         center: [that.offset, 0, 0]
       }
+      var option
       let mapInit = () => {
-        echarts.registerMap('riverBasin', initname)
+        echarts.registerMap('riverBasin', this.mapname)
         this.groupChart.hideLoading()
         //地图背景图
         //配置项
-        var option = {
+        option = {
           backgroundColor: 'transparent',
           geo3D: {
             map: 'riverBasin',
@@ -587,7 +598,7 @@ export default {
           series: [
             {
               type: 'map3D',
-              name: orgName,
+              name: this.groupName,
               map: 'riverBasin',
               silent: that.isSilent,
               regionHeight: 2,
@@ -616,7 +627,7 @@ export default {
               light: {
                 main: {
                   color: '#fff', //光照颜色#E4F7FE
-                  intensity: 3.2, //光照强度
+                  intensity: 5.2, //光照强度
                   shadowQuality: 'high', //阴影亮度
                   shadow: true, //是否显示阴影
                   // alpha: 90,
@@ -626,6 +637,18 @@ export default {
                   intensity: 0.3
                 }
               },
+              // postEffect: {
+              //   enable: true,
+              //   bloom: {
+              //     enable: false
+              //   },
+              //   SSAO: {
+              //     enable: true,
+              //     quality: 'medium',
+              //     radius: 10,
+              //     intensity: 0.2
+              //   }
+              // },
               zlevel: 1,
               data: this.mapData
             },
@@ -644,7 +667,7 @@ export default {
               },
               symbol: scanImg,
               symbolSize: [35, 70], //宽度、高度
-              data: mapShowBuildData,
+              data: this.mapShowBuildData,
               blendMode: 'source-over',
               zlevel: 20
             },
@@ -663,7 +686,7 @@ export default {
               },
               symbol: scanImg,
               symbolSize: [18, 30],
-              data: mapShowUnBuildData,
+              data: this.mapShowUnBuildData,
               blendMode: 'source-over',
               zlevel: 10
             }
@@ -673,10 +696,6 @@ export default {
         this.groupChart.setOption(option, {
           notMerge: true
         })
-        //图表大小自适应
-        window.addEventListener('resize', () => {
-          this.groupChart.resize()
-        })
       }
       //地图点击事件
       if (this.clickSymbol == 0) {
@@ -761,7 +780,7 @@ export default {
   width: 100%;
   height: 100%;
   position: relative;
-  background: url('~@/views/groupPage/images/bj.png') no-repeat;
+  background: url('~@/views/groupPage/images/bj3.png') no-repeat;
   background-size: 100% 100%;
   .chart {
     width: 100%;

src/views/groupPage/baseMap/components/StarryBackground.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="StarryBackground" id="map">
+    <div id="mask-top">
+      <div class="star_bgdom_container">
+        <div id="star_bgdom">
+          <canvas id="star_bgdom_starrycanvas" class="esen3d_bg_star_canvas" style="width: 100%; height: 100%"></canvas>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'StarryBackground', //星空背景
+  data() {
+    return {
+      timer: null
+    }
+  },
+  mounted() {
+    this.addStarry()
+  },
+  methods: {
+    addStarry() {
+      var starBgDom = document.getElementById('star_bgdom')
+      this.initStarry(starBgDom)
+    },
+    initStarry(pdom) {
+      var that = this
+      var canvas = document.getElementById('star_bgdom_starrycanvas')
+      /**
+       * 不断的刷新页面，刷新3D组件的情况，可能刚创建canvas，还没获取到，就页面刷新了，找不到canvas，此时无需再往后处理
+       */
+      if (!canvas) {
+        return
+      }
+      var ctx = canvas.getContext('2d')
+      var w = (canvas.width = pdom.offsetWidth)
+      var h = (canvas.height = pdom.offsetHeight)
+      var maxStars = 150
+      var stars = []
+      var count = 0
+      var canvas2 = document.createElement('canvas'),
+        ctx2 = canvas2.getContext('2d')
+      canvas2.width = 60
+      canvas2.height = 60
+      var half = canvas2.width / 2,
+        gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half)
+      //星星颜色
+      gradient2.addColorStop(0.025, 'rgba(1, 213, 207,0.975)')
+      gradient2.addColorStop(0.1, 'rgba(1, 213, 207,0.9)')
+      gradient2.addColorStop(0.25, 'rgba(1, 213, 207,0.75)')
+      gradient2.addColorStop(1, 'transparent')
+
+      ctx2.fillStyle = gradient2
+      ctx2.beginPath()
+      ctx2.arc(half, half, half, 0, Math.PI * 2)
+      ctx2.fill()
+
+      function random(min, max) {
+        if (arguments.length < 2) {
+          max = min
+          min = 0
+        }
+        if (min > max) {
+          var hold = max
+          max = min
+          min = hold
+        }
+        return Math.floor(Math.random() * (max - min + 1)) + min
+      }
+
+      function maxOrbit(x, y) {
+        var max = Math.max(x, y), //返回最大值
+          diameter = Math.round(Math.sqrt(2 * max * max)) //平方根的四舍五入
+        return diameter / 2
+      }
+      var Star = function () {
+        this.orbitRadius = random(maxOrbit(w, h))
+        this.radius = random(60, this.orbitRadius) / 8
+        //星星大小
+        this.orbitX = w / 2
+        this.orbitY = h / 2
+        this.timePassed = random(50, maxStars)
+        this.alpha = random(2, 10) / 10
+        count++
+        stars[count] = this
+      }
+      Star.prototype.draw = function () {
+        var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
+          y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
+          twinkle = random(10)
+        if (twinkle === 1 && this.alpha > 0) {
+          this.alpha -= 0.05
+        } else if (twinkle === 2 && this.alpha < 1) {
+          this.alpha += 0.05
+        }
+        ctx.globalAlpha = this.alpha
+        ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius)
+      }
+      for (var i = 0; i < maxStars; i++) {
+        new Star()
+      }
+
+      function animation() {
+        ctx.clearRect(0, 0, w, h) //清理画布
+        for (var i = 1, l = stars.length; i < l; i++) {
+          stars[i].draw()
+        }
+        that.timer = requestAnimationFrame(animation)
+      }
+      animation()
+    }
+  },
+  destroyed() {
+    cancelAnimationFrame(that.timer)
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.StarryBackground {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: url('~@/views/groupPage/images/starry.jpg') center no-repeat;
+  background-size: 100% 100%;
+  .esen3d_bg_star_canvas {
+    width: 100%;
+    height: 100%;
+    animation: rotate 120s linear infinite;
+  }
+  @keyframes rotate {
+    from {
+      transform: rotate(359deg);
+    }
+    to {
+      transform: rotate(0deg);
+    }
+  }
+  .star_bgdom_container {
+    opacity: 1;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+  #star_bgdom {
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
+}
+</style>

src/views/groupPage/components/ComBarChart.vue

@@ -6,29 +6,35 @@
 import * as echarts from 'echarts'
 export default {
   name: 'ComBarChart', //项目统计柱状图
-  mounted() {
-    this.$nextTick(() => {
-      this.initialChart()
-    })
+  props: {
+    chartData: {}
+  },
+  watch: {
+    chartData: {
+      handler() {
+        this.$nextTick(() => {
+          this.initialChart()
+        })
+      },
+      deep: true
+      // immediate: true
+    }
   },
   methods: {
     initialChart() {
-      var charts = {
-        // 按顺序排列从大到小
-        cityList: ['项目名称', '38号点（2）', '15号点', '16号点', '24号点'],
-        cityData: [7500, 6200, 5700, 4200, 3500]
-      }
-      var top10CityList = charts.cityList
-      var top10CityData = charts.cityData
+      let province = this.chartData.province
+      let projectName = this.chartData.projectName
+      let investment = this.chartData.investment
       let lineY = []
-      for (var i = 0; i < charts.cityList.length; i++) {
+      for (var i = 0; i < this.chartData.projectName.length; i++) {
         var x = i
         if (x > 1) {
           x = 2
         }
         var data = {
-          name: charts.cityList[i],
-          value: top10CityData[i],
+          province: province[i],
+          name: projectName[i],
+          value: investment[i],
           itemStyle: {
             show: true,
             color: new echarts.graphic.LinearGradient(
@@ -55,11 +61,12 @@ export default {
             }
           }
         }
-        lineY.push(data)
+        lineY.unshift(data)
       }
       let option = {
         backgroundColor: 'transparent',
         tooltip: {
+          confine: true,
           trigger: 'item',
           textStyle: {
             color: '#fff'
@@ -94,7 +101,7 @@ export default {
               show: false,
               inside: false
             },
-            data: top10CityList
+            data: projectName
           },
           {
             type: 'category',
@@ -109,8 +116,8 @@ export default {
               inside: false,
               verticalAlign: 'middle',
               textStyle: {
-                color: '#b3ccf8',
-                fontSize: '14'
+                color: '#FFFFFF',
+                fontSize: this.$listeners.fontSize(14)
               },
               formatter: function (val) {
                 return `${val}`
@@ -122,7 +129,7 @@ export default {
             splitLine: {
               show: false
             },
-            data: top10CityData
+            data: investment
           }
         ],
         xAxis: {
@@ -151,9 +158,8 @@ export default {
               show: true,
               position: [0, '-24px'],
               formatter: function (a) {
-                let region = '湖南'
+                let region = a.data.province
                 let str = ''
-
                 if (a.dataIndex === 0) {
                   str = `{color0|${region}} {b|${a.name}}`
                 } else if (a.dataIndex === 1) {
@@ -168,7 +174,7 @@ export default {
               rich: {
                 b: {
                   color: 'rgba(130, 186, 226, 1)',
-                  fontSize: 14
+                  fontSize: this.$listeners.fontSize(14)
                 },
                 color0: {
                   width: 32,
@@ -176,7 +182,7 @@ export default {
                   color: '#fff',
                   align: 'center',
                   fontWeight: 400,
-                  fontSize: 12,
+                  fontSize: this.$listeners.fontSize(12),
                   backgroundColor: 'rgba(29, 130, 203, 1)'
                 },
                 color1: {
@@ -185,7 +191,7 @@ export default {
                   color: '#fff',
                   align: 'center',
                   fontWeight: 400,
-                  fontSize: 12,
+                  fontSize: this.$listeners.fontSize(12),
                   backgroundColor: 'rgba(4, 181, 206, 1)'
                 },
                 color2: {
@@ -194,7 +200,7 @@ export default {
                   color: '#fff',
                   align: 'center',
                   fontWeight: 400,
-                  fontSize: 12,
+                  fontSize: this.$listeners.fontSize(12),
                   backgroundColor: 'rgba(198, 164, 30, 1)'
                 },
                 color: {
@@ -203,7 +209,7 @@ export default {
                   color: '#fff',
                   align: 'center',
                   fontWeight: 400,
-                  fontSize: 12,
+                  fontSize: this.$listeners.fontSize(12),
                   backgroundColor: 'rgba(6, 174, 97, 1)'
                 }
               }
@@ -216,7 +222,7 @@ export default {
     creatChart(option, ref) {
       let myChart = echarts.init(ref) //this.$refs.chart
       myChart.setOption(option, { notMerge: true })
-      var autoHeight = option.yAxis[1].data.length * 50 + 30
+      var autoHeight = option.yAxis[1].data.length * 50 + 60
       myChart.getDom().style.height = autoHeight + 'px'
       myChart.getDom().childNodes[0].style.height = autoHeight + 'px'
       myChart.getDom().childNodes[0].childNodes[0].setAttribute('height', autoHeight)

src/views/groupPage/components/ComBatteryChart.vue

@@ -6,6 +6,16 @@
 import * as echarts from 'echarts'
 export default {
   name: 'batteryChart', //电池图
+  props: {
+    chartData: {}
+  },
+  watch: {
+    chartData(val) {
+      this.$nextTick(() => {
+        this.initialChart()
+      })
+    }
+  },
   mounted() {
     this.$nextTick(() => {
       this.initialChart()
@@ -13,24 +23,22 @@ export default {
   },
   methods: {
     initialChart() {
-      let profit = 1.09
-      let spending = 1.68
-      let income = 2.77
+      const { spending, income, profits } = this.chartData
       let IAS = [spending, income]
       let option = {
         backgroundColor: 'transparent',
         title: {
           show: true,
-          text: `累计利润：${profit}亿`,
+          text: `累计利润：${profits}亿`,
           textStyle: {
             fontSize: this.$listeners.fontSize(14),
             color: '#01D8E2'
           },
           right: '10%',
-          bottom: '20%'
+          bottom: '25%'
         },
         grid: {
-          top: '10%',
+          top: '15%',
           left: '5%',
           right: '10%'
         },
@@ -83,9 +91,7 @@ export default {
             // 分隔
             type: 'pictorialBar',
             itemStyle: {
-              normal: {
-                color: '#0F375F'
-              }
+              color: '#0F375F'
             },
             symbolRepeat: 'fixed',
             symbolMargin: 2,
@@ -106,15 +112,13 @@ export default {
             barWidth: 16,
             z: 0,
             label: {
-              normal: {
-                show: true,
-                position: [0, '-20'],
-                formatter: '{b}',
-                textStyle: {
-                  fontWeight: 400,
-                  fontSize: this.$listeners.fontSize(14),
-                  color: '#fff'
-                }
+              show: true,
+              position: [0, '-25'],
+              formatter: '{b}',
+              textStyle: {
+                fontWeight: 400,
+                fontSize: this.$listeners.fontSize(14),
+                color: '#fff'
               }
             },
             data: IAS

src/views/groupPage/components/ComLineChart.vue

@@ -6,20 +6,32 @@
 import * as echarts from 'echarts'
 export default {
   name: 'lineChart', //折线统计图
-  mounted() {
-    this.$nextTick(() => {
-      this.initialChart()
-    })
+  props: {
+    chartData: {}
+  },
+  watch: {
+    chartData: {
+      handler(n, o) {
+        this.$nextTick(() => {
+          this.initialChart()
+        })
+      },
+      deep: true,
+      immediate: true
+    }
   },
   methods: {
     initialChart() {
-      let profitsData = [0.3, 0.2, 0.1, 0.2, 1.5, -0.1]
+      const { profits, income, spending } = this.chartData
+      let profitsData = profits
+      let incomeData = income
+      let spendingData = spending
       let option = {
         backgroundColor: 'transparent',
         grid: {
           left: '5%',
           right: '5%',
-          top: '20%',
+          top: '25%',
           bottom: '0%',
           containLabel: true
         },
@@ -80,6 +92,7 @@ export default {
         legend: {
           show: true,
           x: 'center',
+          y: '5%',
           icon: 'inherit',
           itemWidth: 16,
           itemHeight: 10,
@@ -153,7 +166,7 @@ export default {
               color: '#0092f6',
               width: 2
             },
-            data: [1, 2, 1.5, 0.5, 2, 1]
+            data: incomeData
           },
           {
             name: '支出',
@@ -169,7 +182,7 @@ export default {
               color: '#CBB54C',
               width: 2
             },
-            data: [0.3, 0.5, 1, 1.5, 1, 2]
+            data: spendingData
           },
           {
             name: '利润',

src/views/groupPage/components/ComStatisticPieChart.vue

@@ -6,13 +6,23 @@
 import * as echarts from 'echarts'
 export default {
   name: 'statisticPieChart', //统计饼图
-  mounted() {
-    this.$nextTick(() => {
-      this.initialChart()
-    })
+  props: {
+    chartData: {}
+  },
+  watch: {
+    chartData: {
+      handler(n, o) {
+        this.$nextTick(() => {
+          this.initialChart()
+        })
+      },
+      deep: true,
+      immediate: true
+    }
   },
   methods: {
     initialChart() {
+      const data = this.chartData
       const color = [
         'rgba(17, 156, 255, 1)',
         'rgba(232, 190, 76, 1)',
@@ -29,20 +39,10 @@ export default {
         'rgba(212, 112, 13, 0.15)',
         'rgba(175, 45, 230, 0.15)'
       ]
-      const data = [
-        {
-          name: '三峡分公司',
-          value: 16
-        },
-        {
-          name: '重庆分公司',
-          value: 3
-        },
-        {
-          name: '上海分公司',
-          value: 3
-        }
-      ]
+      let total = 0
+      data.map((item) => {
+        total += item.value
+      })
       // 设置数据
       function setChartOption(data) {
         const formatData = []
@@ -65,12 +65,12 @@ export default {
               },
               itemStyle: {
                 color: color[index],
-                shadowBlur: 20,
+                shadowBlur: 5,
                 shadowColor: color[index]
               }
             },
             {
-              value: 0.5,
+              value: 0.2,
               name: '',
               itemStyle: {
                 color: 'rgba(0, 0, 0, 0)',
@@ -84,7 +84,7 @@ export default {
         return formatData
       }
       // 设置阴影数据
-      function setChartOption2(data) {
+      function setShadowOption(data) {
         const formatData = []
         data.forEach(function (item, index) {
           formatData.push(
@@ -104,7 +104,7 @@ export default {
               }
             },
             {
-              value: 0.5,
+              value: 0.2,
               name: '',
               itemStyle: {
                 color: 'rgba(0, 0, 0, 0)',
@@ -120,15 +120,15 @@ export default {
       let option = {
         backgroundColor: 'transparent',
         title: {
-          text: '{a|22}' + '{b|个}\n' + '{c|项目总数}',
+          text: `{a|${total}}` + '{b|个}\n' + '{c|项目总数}',
           top: 'center',
           left: '29%',
           textAlign: 'center',
           textStyle: {
             rich: {
-              a: { fontSize: 24, color: 'rgba(255, 255, 255, 1)' },
-              b: { fontSize: 20, color: 'rgba(255, 255, 255, 1)' },
-              c: { fontSize: 14, color: 'rgba(0,141,236,0.9)' }
+              a: { fontSize: this.$listeners.fontSize(24), color: 'rgba(255, 255, 255, 1)' },
+              b: { fontSize: this.$listeners.fontSize(20), color: 'rgba(255, 255, 255, 1)' },
+              c: { fontSize: this.$listeners.fontSize(14), color: 'rgba(0,141,236,0.9)' }
             }
           }
         },
@@ -145,18 +145,18 @@ export default {
           orient: 'vertical',
           itemWidth: 8,
           itemHeight: 8,
-          itemGap: 15,
+          itemGap: 30,
           icon: 'react',
           left: '60%',
           top: 'center',
           textStyle: {
             rich: {
               a: {
-                fontSize: 14,
+                fontSize: this.$listeners.fontSize(14),
                 color: '#fff'
               },
               b: {
-                fontSize: 16,
+                fontSize: this.$listeners.fontSize(16),
                 fontWeight: 'bold',
                 color: '#fff'
               }
@@ -190,7 +190,7 @@ export default {
             center: ['30%', '50%'],
             hoverAnimation: false,
             silent: true,
-            data: setChartOption2(data)
+            data: setShadowOption(data)
           }
         ]
       }

src/views/groupPage/components/ComThreeDimensionsChart.vue

@@ -7,17 +7,30 @@ import * as echarts from 'echarts'
 import 'echarts-gl'
 export default {
   name: 'threeDimensionsChart', //3D饼图
+  data() {
+    return {
+      myChart: null
+    }
+  },
   mounted() {
     this.$nextTick(() => {
       this.initialChart()
     })
+    //图表大小自适应
+    window.addEventListener('resize', () => {
+      this.initialChart()
+    })
   },
   methods: {
-    initialChart() {
-      let myChart = echarts.init(this.$refs.chart)
-      window.onresize = () => {
-        myChart.resize
+    destroyChart() {
+      if (this.myChart != null) {
+        this.myChart.dispose()
+        this.myChart = null
       }
+    },
+    initialChart() {
+      this.destroyChart()
+      this.myChart = echarts.init(this.$refs.chart)
       // 传入数据
       let data = [
         {
@@ -35,7 +48,7 @@ export default {
           }
         }
       ]
-      this.generateChart(myChart, data)
+      this.generateChart(this.myChart, data)
     },
     generateChart(myChart, data) {
       const that = this
@@ -378,10 +391,6 @@ export default {
       chart.setOption(option, {
         notMerge: true
       })
-      //图表大小自适应
-      window.addEventListener('resize', () => {
-        chart.resize
-      })
     }
   }
 }

src/views/groupPage/districtPageModules/LayerControl.vue

@@ -0,0 +1,249 @@
+<template>
+  <transition
+    appear
+    name="animate__animated animate__move"
+    enter-active-class="animate__flipInX"
+    leave-active-class="animate__flipOutX"
+  >
+    <div class="widget-LayerControl" ref="widget-LayerControl">
+      <div class="wrap">
+        <div class="icon" title="图层控制" @click="showContent = !showContent">
+          图层控制
+          <div class="iconImg" :class="showContent ? 'upImg' : 'downImg'"></div>
+        </div>
+        <div class="content" v-show="showContent">
+          <div class="statistic">
+            <div class="deviceTypeGroup">
+              <el-tree
+                class="filter-tree"
+                show-checkbox
+                :data="treeData"
+                :props="defaultProps"
+                default-expand-all
+                node-key="id"
+                :default-checked-keys="[0, 1]"
+                :filter-node-method="filterNode"
+                @check="getCheckList()"
+                @node-click="handleTreeNodeClick"
+                ref="tree"
+              >
+                <span slot-scope="{ node }">
+                  {{ node.label }}
+                  <img v-if="setNodeImg(node)" :src="`${setNodeImg(node)}`" style="width: 16px; height: 16px" />
+                </span>
+              </el-tree>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'LayerControl', //监测树
+  props: {},
+  data() {
+    return {
+      showContent: false,
+      deviceCheckList: [],
+      //
+      filterText: '',
+      treeData: [],
+      defaultProps: { children: 'children', label: 'name' }
+    }
+  },
+  mounted() {
+    // this.getPageData()
+    this.$refs['widget-LayerControl'].style.setProperty('--right', '2.34375rem')
+  },
+  computed: {},
+  watch: {
+    view: {
+      handler() {}
+    },
+    filterText(val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+  methods: {
+    filterNode(value, data) {
+      if (!value) return true
+      return data.name.indexOf(value) !== -1
+    },
+    setNodeImg(node) {
+      let iconSrc
+      return iconSrc
+    },
+    handleTreeNodeClick(data) {
+      if (!data.coordiateX || !data.coordiateY) return
+      let position = [data.coordiateX, data.coordiateY]
+      this.zoomCenter(position)
+      this.showSprendRound(position)
+    },
+    getCheckList() {
+      this.resetLayerSource()
+      this.deviceCheckList = this.$refs.tree.getCheckedNodes().filter((item) => !item.children)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.animate__flipInX,
+.animate__flipOutX {
+  animation-duration: 3s; //动画持续时间
+  animation-delay: 0s; //动画延迟时间
+}
+.widget-LayerControl {
+  $size10: 0.052083rem /* 10/192 */;
+  $size20: 0.104167rem /* 20/192 */;
+  z-index: 2;
+  //position
+  top: 0.505208rem /* 97/192 */;
+  margin-right: var(--right); //2.34375rem /* 450/192 */;
+  position: absolute;
+  right: 0;
+  //size
+  //background
+  background-color: rgba(20, 24, 47, 0.5);
+  color: #eee;
+  box-shadow: 0 0 20px rgba(1, 9, 20, 1);
+  //font
+  font-family: Source Han Sans CN;
+  .wrap {
+    display: flex;
+    flex-flow: column;
+    align-items: flex-end;
+    width: 0;
+    .icon {
+      width: 0.520833rem /* 100/192 */;
+      height: 0.177083rem /* 34/192 */;
+      background: rgba(3, 109, 190, 0.4);
+      border-radius: 2px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      font-size: 0.072917rem /* 14/192 */;
+      font-weight: 500;
+      color: #2ba7ff;
+      .iconImg {
+        width: 0.104167rem /* 20/192 */;
+        height: 0.083333rem /* 16/192 */;
+      }
+      .upImg {
+        background: url('~@/views/groupPage/images/三角上.png');
+      }
+      .downImg {
+        background: url('~@/views/groupPage/images/三角下.png');
+      }
+    }
+    .content {
+      margin-top: 0.026042rem /* 5/192 */;
+      // width: 1.979167rem /* 380/192 */;
+      width: 2.1875rem /* 420/192 */;
+      height: 1.979167rem /* 380/192 */;
+      background: linear-gradient(0deg, rgba(2, 20, 37, 0.56) 0%, #072643 100%);
+      .header {
+        height: 0.208333rem /* 40/192 */;
+        margin: 0.052083rem /* 10/192 */ 0.052083rem 0 0.052083rem;
+        padding: 0.026042rem /* 5/192 */;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .title {
+          font-size: 0.083333rem /* 16/192 */;
+          font-weight: 500;
+          color: #2ba7ff;
+          white-space: nowrap;
+        }
+        .close {
+          display: flex;
+          align-items: center;
+          height: 100%;
+          color: rgba(138, 211, 253, 1);
+          font-size: 0.09375rem /* 18/192 */;
+          cursor: pointer;
+        }
+        .el-input {
+          width: 1.041667rem /* 200/192 */;
+        }
+        /deep/ .el-input__inner {
+          background-color: rgb(9, 48, 84);
+          border: none;
+          color: #eee;
+          height: 0.145833rem /* 28/192 */;
+        }
+        /deep/ .el-input-group__append {
+          background-color: rgb(9, 48, 84);
+          border: none;
+        }
+        /deep/ .el-icon-search:before {
+          color: rgba(138, 211, 253, 0.3);
+          font-size: 0.09375rem /* 18/192 */;
+        }
+      }
+      .statistic {
+        display: flex;
+        flex-flow: column;
+        width: 100%;
+        height: calc(100% - 0.208333rem /* 40/192 */);
+        .deviceTypeGroup {
+          width: 100%;
+          height: calc(100% - 0.104167rem /* 20/192 */);
+          overflow: auto;
+          /deep/ .el-tree {
+            background: transparent;
+            color: #8eb2ce;
+            font-size: 0.083333rem /* 16/192 */;
+            .el-tree-node__content {
+              background-color: transparent;
+            }
+            .el-tree-node__content:hover {
+              background-color: rgb(62, 70, 112);
+            }
+            div[role='group'] > .el-tree-node {
+              width: 50%;
+              float: left;
+            }
+            .el-tree-node.is-current > .el-tree-node__content {
+              background: rgba(22, 119, 255, 0.1);
+              border-right: 3px solid #1677ff;
+              color: #4b95fe;
+              /deep/ .el-tree-node__expand-icon {
+                color: rgb(0, 112, 255);
+              }
+              /deep/ .is-leaf {
+                color: rgba(0, 0, 0, 0);
+              }
+            }
+          }
+          .el-checkbox {
+            color: #fff;
+            margin: 0.052083rem /* 10/192 */ 0;
+          }
+          /deep/ .el-checkbox__inner {
+            background: #0a1525;
+            border-color: rgba(3, 109, 190, 1);
+          }
+          /deep/ .el-checkbox__inner::after {
+            border: 2px solid rgba(17, 156, 255, 1);
+            border-left: 0;
+            border-top: 0;
+          }
+          /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
+            background: #0a1525;
+            border-color: rgba(3, 109, 190, 1);
+          }
+          /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/groupPage/districtPageModules/index.vue

@@ -1,11 +1,16 @@
 <template>
-  <div class="widget-districtPageModules" v-if="showDistrictPage"></div>
+  <div class="widget-districtPageModules" v-if="showDistrictPage">
+    <LayerControl />
+  </div>
 </template>
 
 <script>
+import LayerControl from '@/views/groupPage/districtPageModules/LayerControl.vue'
 export default {
   name: 'districtPageModules', //集团分公司页面模块
-  components: {},
+  components: {
+    LayerControl
+  },
   props: {
     show: {}
   },
@@ -22,4 +27,8 @@ export default {
 </script>
 
 <style lang='scss' scoped>
+.widget-districtPageModules {
+  width: 100%;
+  height: 100%;
+}
 </style>

src/views/groupPage/groupPageModules/ContractInfo.vue

@@ -17,7 +17,7 @@
           <div class="title">
             <div class="icon"></div>
             <span class="item-name">建管项目：</span>
-            <span class="item-info">项目数量22个，累计完成产值2.28亿</span>
+            <span class="item-info">项目数量{{ ProjectTotal }}个，累计完成产值{{ TotalValue }}亿</span>
           </div>
           <div class="content">
             <div class="chart-container">
@@ -44,10 +44,10 @@
           <div class="title">
             <div class="icon"></div>
             <span class="item-name">EPC项目：</span>
-            <span class="item-info">总投资27.75亿</span>
+            <span class="item-info">总投资{{ EPCInvestNum }}亿</span>
           </div>
           <div class="content epc">
-            <ComBatteryChart v-on="$listeners" />
+            <ComBatteryChart :chartData="EPCData" v-on="$listeners" />
           </div>
         </div>
         <div class="content-item">
@@ -57,7 +57,7 @@
             <span class="item-info"></span>
           </div>
           <div class="content">
-            <ComLineChart />
+            <ComLineChart :chartData="latestData" />
           </div>
         </div>
       </div>
@@ -82,9 +82,24 @@ export default {
   data() {
     return {
       staList: [
-        { name: '本年投资计划', value: '11.99', unit: '亿' },
-        { name: '本年累计完成产值', value: '1', unit: '亿' }
-      ]
+        { name: '本年投资计划', value: 0, unit: '亿' },
+        { name: '本年累计完成产值', value: 0, unit: '亿' }
+      ],
+      //建管项目
+      ProjectTotal: 0, //项目总数
+      TotalValue: 0, //累计完成产值
+      //EPC
+      EPCInvestNum: 0, //EPC项目投资数
+      EPCData: {
+        spending: 0,
+        income: 0,
+        profits: 0
+      }, //EPC收支信息
+      latestData: {
+        income: [],
+        spending: [],
+        profits: []
+      }
     }
   },
   watch: {
@@ -92,8 +107,70 @@ export default {
       handler(n, o) {}
     }
   },
-  mounted() {},
-  methods: {}
+  computed: {
+    setNoNull() {
+      return this.$listeners.setNullAndUndefinedEmpty
+    }
+  },
+  mounted() {
+    this.getPageData()
+  },
+  methods: {
+    roundFun(value, n) {
+      return Math.round(value * Math.pow(10, n)) / Math.pow(10, n)
+    },
+    getPageData() {
+      const { getRequestResult } = this.$listeners
+      let data = { blockCode: 'ycepclist' }
+      //获取全部数据
+      getRequestResult(data).then((res) => {
+        res = res.map((item) => {
+          return {
+            ...item,
+            indexValue:
+              item.unit === '万元'
+                ? this.roundFun(this.setNoNull(item.indexValue) / 10000, 2)
+                : this.setNoNull(item.indexValue)
+          }
+        })
+        //获取项目数据
+        this.ProjectTotal = res.filter((item) => item.indexCode === 'A1')[0].indexValue
+        this.TotalValue = res.filter((item) => item.indexCode === 'A5')[0].indexValue
+        this.staList[0].value = res.filter((item) => item.indexCode === 'A6')[0].indexValue
+        this.staList[1].value = res.filter((item) => item.indexCode === 'A7')[0].indexValue
+        //获取EPC数据
+        this.EPCInvestNum = res.filter((item) => item.indexCode === 'A4')[0].indexValue
+        this.EPCData = {
+          spending: res.filter((item) => item.indexCode === 'A10')[0].indexValue,
+          income: res.filter((item) => item.indexCode === 'A9')[0].indexValue,
+          profits:
+            res.filter((item) => item.indexCode === 'A9')[0].indexValue -
+            res.filter((item) => item.indexCode === 'A10')[0].indexValue
+        }
+        //获取近六个月数据
+        this.latestData.income.push(res.filter((item) => item.indexCode === 'A47')[0].indexValue)
+        this.latestData.income.push(res.filter((item) => item.indexCode === 'A50')[0].indexValue)
+        this.latestData.income.push(res.filter((item) => item.indexCode === 'A53')[0].indexValue)
+        this.latestData.income.push(res.filter((item) => item.indexCode === 'A56')[0].indexValue)
+        this.latestData.income.push(res.filter((item) => item.indexCode === 'A59')[0].indexValue)
+        this.latestData.income.push(res.filter((item) => item.indexCode === 'A62')[0].indexValue)
+        //
+        this.latestData.spending.push(res.filter((item) => item.indexCode === 'A48')[0].indexValue)
+        this.latestData.spending.push(res.filter((item) => item.indexCode === 'A51')[0].indexValue)
+        this.latestData.spending.push(res.filter((item) => item.indexCode === 'A54')[0].indexValue)
+        this.latestData.spending.push(res.filter((item) => item.indexCode === 'A57')[0].indexValue)
+        this.latestData.spending.push(res.filter((item) => item.indexCode === 'A60')[0].indexValue)
+        this.latestData.spending.push(res.filter((item) => item.indexCode === 'A63')[0].indexValue)
+        //
+        this.latestData.profits.push(res.filter((item) => item.indexCode === 'A49')[0].indexValue)
+        this.latestData.profits.push(res.filter((item) => item.indexCode === 'A52')[0].indexValue)
+        this.latestData.profits.push(res.filter((item) => item.indexCode === 'A55')[0].indexValue)
+        this.latestData.profits.push(res.filter((item) => item.indexCode === 'A58')[0].indexValue)
+        this.latestData.profits.push(res.filter((item) => item.indexCode === 'A61')[0].indexValue)
+        this.latestData.profits.push(res.filter((item) => item.indexCode === 'A64')[0].indexValue)
+      })
+    }
+  }
 }
 </script>
 
@@ -222,7 +299,7 @@ export default {
         width: 100%;
         display: flex;
         .chart-container {
-          flex: 0.5;
+          width: 50%;
           .chart-title {
             position: absolute;
             left: 0.234375rem /* 45/192 */;
@@ -249,7 +326,7 @@ export default {
           }
         }
         .dataInfo {
-          flex: 0.5;
+          width: 50%;
           display: flex;
           flex-flow: column;
           justify-content: space-around;
@@ -257,10 +334,14 @@ export default {
           .data-item {
             display: flex;
             align-items: center;
-            justify-content: space-around;
             padding: 0.052083rem /* 10/192 */;
             color: #ffffff;
             height: 0.338542rem /* 65/192 */;
+            .pointSymbol,
+            .data-title {
+              margin-right: 0.052083rem /* 10/192 */;
+              white-space: nowrap;
+            }
             .pointSymbol {
               border-radius: 50%;
               height: 0.052083rem /* 10/192 */;
@@ -276,6 +357,8 @@ export default {
               font-family: Source Han Sans CN-HEAVY;
               font-weight: bold;
               color: #ffffff;
+              position: absolute;
+              right: 2%;
             }
           }
         }

src/views/groupPage/groupPageModules/IndexStatistic.vue

@@ -7,9 +7,9 @@
   >
     <div class="widget-IndexStatistic" v-if="show">
       <div class="boxpanel">
-        <div class="statisticitem" :class="'statisticitem'+index" v-for="(item,index) in dataList" :key="item.name">
-          <div class="itemName">{{item.name}}</div>
-          <div class="itemCount" :class="'itemCount'+index">{{item.value+item.unit}}</div>
+        <div class="statisticitem" :class="'statisticitem' + index" v-for="(item, index) in dataList" :key="item.name">
+          <div class="itemName">{{ item.name }}</div>
+          <div class="itemCount" :class="'itemCount' + index">{{ item.value + item.unit }}</div>
         </div>
       </div>
     </div>
@@ -25,18 +25,45 @@ export default {
   data() {
     return {
       dataList: [
-        { name: '项目总数', value: 22, unit: '个' },
-        { name: '总投资', value: 38.99, unit: '亿' },
-        { name: 'EPC项目', value: 7, unit: '个' },
-        { name: 'EPC投资', value: 27.8, unit: '亿' }
+        { name: '项目总数', value: 0, unit: '个' },
+        { name: '总投资', value: 0, unit: '亿' },
+        { name: 'EPC项目', value: 0, unit: '个' },
+        { name: 'EPC投资', value: 0, unit: '亿' }
       ]
     }
   },
+  computed: {
+    setNoNull() {
+      return this.$listeners.setNullAndUndefinedEmpty
+    }
+  },
   mounted() {
-
+    this.getPageData()
   },
   methods: {
-
+    roundFun(value, n) {
+      return Math.round(value * Math.pow(10, n)) / Math.pow(10, n)
+    },
+    getPageData() {
+      const { getRequestResult } = this.$listeners
+      let data = { blockCode: 'ycepclist' }
+      //获取全部数据
+      getRequestResult(data).then((res) => {
+        res = res.map((item) => {
+          return {
+            ...item,
+            indexValue:
+              item.unit === '万元'
+                ? this.roundFun(this.setNoNull(item.indexValue) / 10000, 2)
+                : this.setNoNull(item.indexValue)
+          }
+        })
+        this.dataList[0].value = res.filter((item) => item.indexCode === 'A1')[0].indexValue
+        this.dataList[1].value = res.filter((item) => item.indexCode === 'A2')[0].indexValue
+        this.dataList[2].value = res.filter((item) => item.indexCode === 'A3')[0].indexValue
+        this.dataList[3].value = res.filter((item) => item.indexCode === 'A4')[0].indexValue
+      })
+    }
   }
 }
 </script>
@@ -51,7 +78,7 @@ export default {
   top: 0.505208rem /* 97/192 */;
   left: 50%;
   margin-left: -2.34375rem /* 450/192 */;
-  height: .3125rem /* 60/192 */;
+  height: 0.3125rem /* 60/192 */;
   width: 4.6875rem /* 900/192 */;
   overflow: hidden;
   position: absolute;
@@ -67,14 +94,15 @@ export default {
       display: flex;
       border-top: 2px solid;
       justify-content: space-around;
+      align-items: center;
       .itemName {
         display: flex;
         align-items: center;
         justify-content: center;
-        font-size: .083333rem /* 16/192 */;
+        font-size: 0.083333rem /* 16/192 */;
         font-weight: bold;
-        color: #FEFFFF;
-        background: linear-gradient(0deg, #9BD2FA 0%, #FFFFFF 100%);
+        color: #feffff;
+        background: linear-gradient(0deg, #9bd2fa 0%, #ffffff 100%);
         background-clip: text;
         -webkit-text-fill-color: transparent;
       }
@@ -82,30 +110,47 @@ export default {
         display: flex;
         align-items: center;
         justify-content: center;
-        font-size: .125rem /* 24/192 */;
+        height: 0.114583rem /* 22/192 */;
+        font-size: 0.125rem /* 24/192 */;
         font-weight: bold;
-        color: #2BA7FF;
+        color: #2ba7ff;
+      }
+      .itemCount0 {
+        background: linear-gradient(0deg, #028df0 0%, #00d8fa 100%);
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+      .itemCount1 {
+        background: linear-gradient(0deg, #028df0 0%, #eadf60 100%);
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+      .itemCount2 {
+        background: linear-gradient(0deg, #028df0 0%, #0de795 100%);
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+      .itemCount3 {
+        background: linear-gradient(0deg, #028df0 0%, #e19aff 100%);
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
       }
-      .itemCount0{background: linear-gradient(0deg, #028DF0 0%, #00D8FA 100%);background-clip: text;-webkit-text-fill-color: transparent;}
-      .itemCount1{background: linear-gradient(0deg, #028DF0 0%, #EADF60 100%);background-clip: text;-webkit-text-fill-color: transparent;}
-      .itemCount2{background: linear-gradient(0deg, #028DF0 0%, #0DE795 100%);background-clip: text;-webkit-text-fill-color: transparent;}
-      .itemCount3{background: linear-gradient(0deg, #028DF0 0%, #E19AFF 100%);background-clip: text;-webkit-text-fill-color: transparent;}
     }
-    .statisticitem0{
+    .statisticitem0 {
       background: linear-gradient(180deg, rgba(43, 167, 255, 0.26) 0%, rgba(43, 167, 255, 0) 100%);
-      border-image: linear-gradient(90deg, #028DF0, #00D8FA) 1;
+      border-image: linear-gradient(90deg, #0095ff, #00ddff) 1;
     }
-    .statisticitem1{
+    .statisticitem1 {
       background: linear-gradient(180deg, rgba(43, 167, 255, 0.26) 0%, rgba(43, 167, 255, 0) 100%);
-      border-image: linear-gradient(90deg, #028DF0, #E6D773) 1;
+      border-image: linear-gradient(90deg, #028df0, #e6d773) 1;
     }
-    .statisticitem2{
+    .statisticitem2 {
       background: linear-gradient(180deg, rgba(43, 167, 255, 0.26) 0%, rgba(43, 167, 255, 0) 100%);
-      border-image: linear-gradient(90deg, #028DF0, #0AD88B) 1;
+      border-image: linear-gradient(90deg, #028df0, #0ad88b) 1;
     }
-    .statisticitem3{
+    .statisticitem3 {
       background: linear-gradient(180deg, rgba(43, 167, 255, 0.26) 0%, rgba(43, 167, 255, 0) 100%);
-      border-image: linear-gradient(90deg, #028DF0, #E19AFF) 1;
+      border-image: linear-gradient(90deg, #028df0, #e19aff) 1;
     }
   }
 }

src/views/groupPage/groupPageModules/ProjectInfo.vue

@@ -44,7 +44,7 @@
             <span class="item-name">分公司项目统计</span>
           </div>
           <div class="content">
-            <ComStatisticPieChart />
+            <ComStatisticPieChart v-on="$listeners" :chartData="branchData" />
           </div>
         </div>
         <div class="content-item">
@@ -53,7 +53,7 @@
             <span class="item-name">项目投资排行榜</span>
           </div>
           <div class="content scrollContent" ref="scrollContent">
-            <ComBarChart />
+            <ComBarChart v-on="$listeners" :chartData="projectData" />
           </div>
         </div>
       </div>
@@ -83,15 +83,39 @@ export default {
         { title: '暂停项目', value: 1, unit: '个', img: require('@/views/groupPage/images/模块图标/暂停项目.png') },
         { title: '移交项目', value: 0, unit: '个', img: require('@/views/groupPage/images/模块图标/移交项目.png') }
       ],
-      currentActive: 'num'
+      currentActive: 'num',
+      branchData: [
+        {
+          name: '三峡分公司',
+          value: 0
+        },
+        {
+          name: '重庆分公司',
+          value: 0
+        },
+        {
+          name: '上海分公司',
+          value: 0
+        }
+      ],
+      projectData: {
+        province: [],
+        projectName: [],
+        investment: []
+      }
     }
   },
   watch: {
     show(n, o) {}
   },
-  computed: {},
+  computed: {
+    setNoNull() {
+      return this.$listeners.setNullAndUndefinedEmpty
+    }
+  },
   mounted() {
     this.tableScroll()
+    this.getPageData()
   },
   methods: {
     tableScroll() {
@@ -140,6 +164,48 @@ export default {
         that.timerId = requestAnimationFrame(animloop)
       }
       animloop()
+    },
+    roundFun(value, n) {
+      return Math.round(value * Math.pow(10, n)) / Math.pow(10, n)
+    },
+    getPageData() {
+      const { getRequestResult } = this.$listeners
+      let data = { blockCode: 'ycepclist' }
+      //获取全部数据
+      getRequestResult(data)
+        .then((res) => {
+          res = res.map((item) => {
+            return {
+              ...item,
+              indexValue:
+                item.unit === '万元'
+                  ? this.roundFun(this.setNoNull(item.indexValue) / 10000, 2)
+                  : this.setNoNull(item.indexValue)
+            }
+          })
+          this.statusList[0].value = res.filter((item) => item.indexCode === 'A33')[0].indexValue
+          this.statusList[1].value = res.filter((item) => item.indexCode === 'A34')[0].indexValue
+          this.statusList[2].value = res.filter((item) => item.indexCode === 'A35')[0].indexValue
+          this.statusList[3].value = res.filter((item) => item.indexCode === 'A36')[0].indexValue
+          //
+          this.branchData[0].value = res.filter((item) => item.indexCode === 'A37')[0].indexValue
+          this.branchData[1].value = res.filter((item) => item.indexCode === 'A38')[0].indexValue
+          this.branchData[2].value = res.filter((item) => item.indexCode === 'A39')[0].indexValue
+        })
+        .then(() => {
+          let data = { blockCode: 'prjInfo' }
+          //获取全部数据
+          getRequestResult(data).then((res) => {
+            res.sort((a, b) => {
+              return a.planInvestment - b.planInvestment
+            }) //升序
+            res.forEach((item) => {
+              this.projectData.province.push(item.province.substring(0, 2))
+              this.projectData.projectName.push(item.prjName)
+              this.projectData.investment.push(this.roundFun(this.setNoNull(item.planInvestment) / 10000, 2))
+            })
+          })
+        })
     }
   }
 }
@@ -164,9 +230,9 @@ export default {
   height: calc(100% - 0.557292rem /* 107/192 */);
   width: 2.083333rem /* 400/192 */;
   //background
-  background-color: rgba(20, 24, 47, 0.5);
+  // background-color: rgba(20, 24, 47, 0.5);
   color: #eee;
-  box-shadow: 0 0 20px rgba(1, 9, 20, 1);
+  // box-shadow: 0 0 20px rgba(1, 9, 20, 1);
   //font
   font-family: Source Han Sans CN-HEAVY;
   .head {
@@ -208,6 +274,9 @@ export default {
           height: 100%;
           display: flex;
           align-items: center;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
         }
         .tab-active {
           color: #119cff;

src/views/groupPage/groupPageModules/ProjectStatistic.vue

@@ -34,16 +34,44 @@ export default {
       ]
     }
   },
-  computed: {},
   mounted() {
     this.prjList.forEach((item, index) => {
       Vue.set(item, 'status', '')
     })
+    this.getPageData()
   },
   watch: {
     show(n, o) {}
   },
-  methods: {}
+  computed: {
+    setNoNull() {
+      return this.$listeners.setNullAndUndefinedEmpty
+    }
+  },
+  methods: {
+    roundFun(value, n) {
+      return Math.round(value * Math.pow(10, n)) / Math.pow(10, n)
+    },
+    getPageData() {
+      const { getRequestResult } = this.$listeners
+      let data = { blockCode: 'ycepclist' }
+      //获取全部数据
+      getRequestResult(data).then((res) => {
+        res = res.map((item) => {
+          return {
+            ...item,
+            indexValue:
+              item.unit === '万元'
+                ? this.roundFun(this.setNoNull(item.indexValue) / 10000, 2)
+                : this.setNoNull(item.indexValue)
+          }
+        })
+        this.prjList[0].value = res.filter((item) => item.indexCode === 'A1')[0].indexValue
+        this.prjList[1].value = res.filter((item) => item.indexCode === 'A3')[0].indexValue
+        this.prjList[2].value = res.filter((item) => item.indexCode === 'A35')[0].indexValue
+      })
+    }
+  }
 }
 </script>
 

src/views/groupPage/groupPageModules/index.vue

@@ -1,17 +1,18 @@
 <template>
   <div class="widget-groupPageModules" v-if="showGroupPage">
     <!--左侧模块-->
-    <ContractInfo :show="showGroupPage" v-on="{ fontSize }" />
+    <ContractInfo :show="showGroupPage" v-on="{ fontSize, getRequestResult, setNullAndUndefinedEmpty }" />
     <!--中部模块-->
-    <IndexStatistic :show="showGroupPage" v-on="{ fontSize }" />
+    <IndexStatistic :show="showGroupPage" v-on="{ fontSize, getRequestResult, setNullAndUndefinedEmpty }" />
     <!--右侧模块-->
-    <ProjectInfo :show="showGroupPage" v-on="{ fontSize }" />
+    <ProjectInfo :show="showGroupPage" v-on="{ fontSize, getRequestResult, setNullAndUndefinedEmpty }" />
     <!--底部模块-->
-    <ProjectStatistic :show="showGroupPage" v-on="{ fontSize }" />
+    <ProjectStatistic :show="showGroupPage" v-on="{ fontSize, getRequestResult, setNullAndUndefinedEmpty }" />
   </div>
 </template>
 
 <script>
+import { getBlockPage, getResultList } from '@/api/bigScreenAPI/bigScreenRequest'
 //信息模块
 import ContractInfo from '@/views/groupPage/groupPageModules/ContractInfo.vue'
 import ProjectStatistic from '@/views/groupPage/groupPageModules/ProjectStatistic.vue'
@@ -36,7 +37,38 @@ export default {
       return this.$listeners.fontSize
     }
   },
-  mounted() {}
+  mounted() {
+    getBlockPage({ size: 999 }).then((res) => {
+      // console.log('code列表', res)
+    })
+  },
+  methods: {
+    async getRequestResult(params) {
+      let returnData = await new Promise((resolve, reject) => {
+        getResultList(params)
+          .then((res) => {
+            if (res.code == 1) resolve(res.result)
+          })
+          .catch((err) => {})
+      })
+      return returnData
+    },
+    //数据检查公共方法(针对数字)
+    setNullAndUndefinedEmpty(input) {
+      if (
+        input === 'Null' ||
+        input === 'null' ||
+        input === 'NULL' ||
+        input === null ||
+        input === undefined ||
+        input === ''
+      ) {
+        return 0
+      } else {
+        return input
+      }
+    }
+  }
 }
 </script>