src/App.vue

@@ -2,14 +2,14 @@
   <div id="app">
     <div class="top">
       <div class="left">
-        <div style="font-size:28px;color:#ffffff">{{time}} &nbsp;&nbsp; | &nbsp;&nbsp;{{week}}</div>
+        <div style="font-size:28px;color:#ffffff">2022-12-14  14:30:50 &nbsp;&nbsp; | &nbsp;&nbsp;星期二</div>
       </div>
       <div class="middle">
-        <div class="leftBtn" @click="powerPdf" :class="{'handleAction':handleAction=='电力行业发展'}"><div class="leftBtnText">电力行业发展</div></div>
+        <div class="leftBtn" @click="powerPdf"><div class="leftBtnText">电力行业发展</div></div>
         <div class="middleText"><img src="./assets/images/homeText.png"/></div>
-        <div class="rightBtn" @click="energyPdf" :class="{'handleAction1':handleAction1=='能源发展综述'}"><div class="rightBtnText">能源发展综述</div></div>
+        <div class="rightBtn" @click="energyPdf"><div class="rightBtnText">能源发展综述</div></div>
       </div>
-      <div class="right"><img :src="weather" style="width:10%;height:50%"/>{{weatherText}} &nbsp;&nbsp;| &nbsp;&nbsp;<span style="color:rgb(23,231,232)">{{lowTemperature}}-{{highTemperature}}℃</span>&nbsp;&nbsp;|&nbsp;&nbsp; {{wind}}</div>
+      <div class="right"><img :src="weather" style="width:10%;height:50%"/>晴转多云 &nbsp;&nbsp;| &nbsp;&nbsp;-2-5℃&nbsp;&nbsp;|&nbsp;&nbsp; 东风3级</div>
     </div>
      <div class="content">
       <router-view />
@@ -60,23 +60,13 @@
 <script>
 import pdf from 'vue-pdf'
 import axios from "axios"
-import {getData} from './api/index.js'
   export default {
     data(){
       return{
-      time:'',
-      handleAction:'',
-      handleAction1:'',
       fileType:false, //pdf显示
       numPages: 1, //pdf页数
       filePdf:'', //pdf文件
-      weather:require('./assets/weather/Cloudy .png'),
+      weather:require('./assets/weather/Cloudy .png')
-      weekList:['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
-      week:'',
-      highTemperature:'',
-      lowTemperature:'',
-      wind:'',
-      weatherText:''
       }
     },
     mounted() {
@@ -88,99 +78,27 @@ import {getData} from './api/index.js'
     //   console.log(err);
     // })
     //   })
-      let week = new Date(this.$moment().format("YYYY-MM-DD")).getDay()
+      
-      this.week = this.weekList[week]
-      window.setInterval(()=>{
-        this.time = this.$moment().format("YYYY-MM-DD   hh:mm:ss")
-      },1000)
-      getData({
-        action:'one',
-        key:'天气情况'
-      }).then((res)=>{
-        let toDay = this.$moment().format("DD")
-        for (let i = 0; i < res.data.data.length; i++) {
-          if (toDay == res.data.data[i].第N天) {
-            this.highTemperature = res.data.data[i].最高温度;
-            this.lowTemperature = res.data.data[i].最低温度;
-            this.wind = res.data.data[i].风向;
-            this.weatherText = res.data.data[i].天气;
-            switch (this.weatherText) {
-                case "多云":
-                  return this.weather = require('./assets/weather/Cloudy .png');
-                case "阴":
-                  return this.weather = require('./assets/weather/Cloudy .png')
-                case "暴雨":
-                  return this.weather = require('./assets/weather/rainstorm.png')
-                case "冰雹":
-                  return this.weather = require('./assets/weather/hail.png')
-                case "大风":
-                  return this.weather = require('./assets/weather/gale.png')
-                case "大雪":
-                  return this.weather = require('./assets/weather/bigsnow.png')
-                case "大雨":
-                  return this.weather = require('./assets/weather/bigrain.png')
-                case "雷电":
-                  return this.weather = require('./assets/weather/thunder.png')
-                case "雷阵雨":
-                  return this.weather = require('./assets/weather/shower.png')
-                case "沙尘暴":
-                  return this.weather = require('./assets/weather/sand.png')
-                case "晴":
-                  return this.weather = require('./assets/weather/sun.png')
-                case "雾霾":
-                  return this.weather = require('./assets/weather/smog.png')
-                case "小雪":
-                  return this.weather = require('./assets/weather/snow.png')
-                case "小雨":
-                  return this.weather = require('./assets/weather/rain.png')
-                case "雪":
-                  return this.weather = require('./assets/weather/rainlitter.png')
-                case "多云":
-                  return this.weather = require('./assets/weather/night.png')
-                case "雨夹雪":
-                  return this.weather = require('./assets/weather/rainsnow.png')
-                case "月亮":
-                  return this.weather = require('./assets/weather/moon.png')
-                case "中雪":
-                  return this.weather = require('./assets/weather/mieddlesnow.png')
-                case "中雨":
-                  return this.weather = require('./assets/weather/middlerain.png')
-              }
-          }else{
-            this.highTemperature = '0';
-            this.lowTemperature = '0';
-            this.wind = '东风0级';
-            this.weatherText = '阴';
-            this.weather = require('./assets/weather/Cloudy .png');
-          }
-        }
-      })
     },
     methods:{
       //关闭PDF文件
      handleClosePdf(){
         this.fileType  =  false
        this.filePdf = ''
-       this.$nextTick(()=>{
-         this.handleAction = ''
-          this.handleAction1 = ''
-       })
       },
       powerPdf(){
-      this.filePdf = ''
       let fileUrl = "/pdf/power.pdf";
       this.numPages = 20
       this.filePdf = pdf.createLoadingTask(fileUrl)
       this.fileType  =  true
-      this.handleAction = '电力行业发展'
+      
       },
       energyPdf(){
-      this.filePdf = ''
       let fileUrl = "/pdf/energy.pdf";
-      this.filePdf = pdf.createLoadingTask(fileUrl)
       this.numPages = 27
+      this.filePdf = pdf.createLoadingTask(fileUrl)
       this.fileType  =  true
-      this.handleAction1 = '能源发展综述'
+      
       }
     },
     components: {
@@ -239,25 +157,15 @@ import {getData} from './api/index.js'
       height: 100%;
      display: flex;
     justify-content: flex-start;
-    color:#ffffff;
+    color:rgb(15,251,251);
     .leftBtnText{
       height: 61%;
       // width: 56.62%;
        width: 62%;
       background: url("./assets/images/btnLeftPdf.png") no-repeat;
       background-size: 100% 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
     }
     }
-    .handleAction{
-      width:20%;
-      height: 100%;
-      display: flex;
-      justify-content: flex-start;
-      color:rgb(15,251,251);
-    }
     .middleText{
       width:59%;
       height: 100%;
@@ -283,25 +191,15 @@ import {getData} from './api/index.js'
       height: 100%;
      display: flex;
     justify-content: flex-end;
-    color:#ffffff;
+    color:rgb(15,251,251);
     .rightBtnText{
       height: 61%;
       // width: 56.62%;
        width: 62%;
       background: url("./assets/images/btnRightPdf.png") no-repeat;
       background-size: 100% 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
     }
     }
-    .handleAction1{
-      width:24%;
-      height: 100%;
-     display: flex;
-    justify-content: flex-end;
-      color:rgb(15,251,251);
-    }
   }
   .right{
     width: 9%;

src/views/index.vue

@@ -27,7 +27,7 @@
                 <div class="powerCount">
                   <div class="powerImg"><img src="../assets/images/powerCount.png"/></div>
                   <div class="powerNumber">
-                    <span style="color:yellow;font-size:30px;font-weight: 700;font-family: auto;">{{capacity}}MW</span>
+                    <span style="color:yellow;font-size:30px;font-weight: 700;font-family: auto;">18132.6667MW</span>
                     <span style="color:#ffffff">盐城电力生产总装机量</span>
                   </div>
                 </div>
@@ -219,29 +219,27 @@
                       <el-table-column
                         prop="shiqu"
                         label="市区"
-                       >
+                        width="70">
                       </el-table-column>
                       <el-table-column
                         prop="yunweizhan"
                         label="运维站"
-                        >
+                        width="90">
                       </el-table-column>
                       <el-table-column
                         prop="biandianzhan"
                         label="变电站"
-                        >
+                        width="70">
                       </el-table-column>
                       <el-table-column
                         prop="yisun"
                         label="易损线路/开关"
-                        show-overflow-tooltip
+                        width="110">
-                        >
                       </el-table-column>
                       <el-table-column
                         prop="guzhang"
                         label="故障发生时间"
-                        show-overflow-tooltip
+                        width="110">
-                        >
                       </el-table-column>
                     </el-table>
               </div>
@@ -282,7 +280,6 @@ import {getData} from '../api/index.js'
 export default {
   data(){
     return{
-      capacity:0, //装机总量
       news:[
         {
           Journalism:''
@@ -422,10 +419,129 @@ export default {
           qiyeshuliang:'12'
         },
       ],
-      popTableData2:[],
+      popTableData2:[
-      popTableData3:[],
+        {
-      popTableData4:[],
+          diqu:'亭湖区',
+          dianzhanshu:'13',
+          jizhongshi:'1',
+          fenbushi:'12'
+        },
+        {
+          diqu:'亭湖区',
+          dianzhanshu:'13',
+          jizhongshi:'1',
+          fenbushi:'12'
+        },
+        {
+          diqu:'亭湖区',
+          dianzhanshu:'13',
+          jizhongshi:'1',
+          fenbushi:'12'
+        },
+        {
+          diqu:'亭湖区',
+          dianzhanshu:'13',
+          jizhongshi:'1',
+          fenbushi:'12'
+        },
+        {
+          diqu:'亭湖区',
+          dianzhanshu:'13',
+          jizhongshi:'1',
+          fenbushi:'12'
+        },
+      ],
+      popTableData3:[
+        {
+          feitongdiao:'集中式光伏',
+          zuoshu:'13',
+          taishu:'1',
+          bingwang:'694.4890'
+        },
+        {
+          feitongdiao:'集中式光伏',
+          zuoshu:'13',
+          taishu:'1',
+          bingwang:'694.4890'
+        },
+        {
+          feitongdiao:'集中式光伏',
+          zuoshu:'13',
+          taishu:'1',
+          bingwang:'694.4890'
+        },
+        {
+          feitongdiao:'集中式光伏',
+          zuoshu:'13',
+          taishu:'1',
+          bingwang:'694.4890'
+        },
+      ],
+      popTableData4:[
+        {
+          diqu:'开发区',
+          guangfuhezhun:'70.45000',
+          guangfushiji:'69.70000'
+        },
+        {
+          diqu:'开发区',
+          guangfuhezhun:'70.45000',
+          guangfushiji:'69.70000'
+        },
+        {
+          diqu:'开发区',
+          guangfuhezhun:'70.45000',
+          guangfushiji:'69.70000'
+        },
+        {
+          diqu:'开发区',
+          guangfuhezhun:'70.45000',
+          guangfushiji:'69.70000'
+        },
+        {
+          diqu:'开发区',
+          guangfuhezhun:'70.45000',
+          guangfushiji:'69.70000'
+        },
+        {
+          diqu:'开发区',
+          guangfuhezhun:'70.45000',
+          guangfushiji:'69.70000'
+        },
+      ],
       popTableData5:[
+        {
+          fadianchang:'毛竹沙风电',
+          zhuangji:'300',
+          fengdian:'风电',
+          zuigao:'500kv',
+          date:'2021-11-26 00:00:00',
+          status:'在运'
+        },
+        {
+          fadianchang:'毛竹沙风电',
+          zhuangji:'300',
+          fengdian:'风电',
+          zuigao:'500kv',
+          date:'2021-11-26 00:00:00',
+          status:'在建'
+        },
+        {
+          fadianchang:'毛竹沙风电',
+          zhuangji:'300',
+          fengdian:'风电',
+          zuigao:'500kv',
+          date:'2021-11-26 00:00:00',
+          status:'退运'
+        },
+        {
+          fadianchang:'毛竹沙风电',
+          zhuangji:'300',
+          fengdian:'风电',
+          zuigao:'500kv',
+          date:'2021-11-26 00:00:00',
+          status:'在运'
+        },
       ],
       popTableData6:[
         {
@@ -462,6 +578,38 @@ export default {
         },
       ],
       popTableData7:[
+        {
+          fadianchang:'毛竹沙风电',
+          zhuangji:'300',
+          fengdian:'光热一体',
+          zuigao:'500kv',
+          date:'2021-11-26 00:00:00',
+          status:'在运'
+        },
+        {
+          fadianchang:'毛竹沙风电',
+          zhuangji:'300',
+          fengdian:'光热一体',
+          zuigao:'500kv',
+          date:'2021-11-26 00:00:00',
+          status:'在建'
+        },
+        {
+          fadianchang:'毛竹沙风电',
+          zhuangji:'300',
+          fengdian:'光热一体',
+          zuigao:'500kv',
+          date:'2021-11-26 00:00:00',
+          status:'退运'
+        },
+        {
+          fadianchang:'毛竹沙风电',
+          zhuangji:'300',
+          fengdian:'光热一体',
+          zuigao:'500kv',
+          date:'2021-11-26 00:00:00',
+          status:'在运'
+        },
       ],
       popTableData8:[
         {
@@ -606,6 +754,10 @@ export default {
     }
   },
   mounted(){
+    this.echartsTwo();
+    this.echartsThree();
+    this.echartsFour();
+    this.echartsFive();
     this.echartsSix();
     this.echartsSeven();
     this.echartsMap();
@@ -642,94 +794,37 @@ export default {
       contaminatedData = res.data.data
       this.echartsOne(contaminatedData);
     })
-    //查询当日上网电量
-    getData(
-      {
-        action:'one',
-        key:'当日上网电量'
-      }
-    ).then((res)=>{
-      let powerData = []
-      powerData = res.data.data
-      this.echartsFive(powerData);
-      
-    })
-    //查询盐城装机容量
-    getData(
-      {
-        action:'one',
-        key:'盐城装机容量'
-      }
-    ).then((res)=>{
-      let sumCapacity = [];
-      let capacityData = res.data.data
-      this.echartsTwo(capacityData);
-      Object.keys(capacityData).map((item,index)=>{
-        for (const key in capacityData[index]) {
-          sumCapacity.push(Number(capacityData[index][key]))
-        }
-      })
-      this.capacity = sumCapacity.reduce((x,y)=>x+y)
-    })
-     //查询非统调光伏电站座数
-    getData(
-      {
-        action:'one',
-        key:'非统调光伏电站座数'
-      }
-    ).then((res)=>{
-      this.popTableData2 = res.data.data
-      let powerStation = res.data.data
-      this.echartsThree(powerStation);
-    })
-    //查询非统调电厂并网容量
-    getData(
-      {
-        action:'one',
-        key:'非统调电厂并网容量'
-      }
-    ).then((res)=>{
-      this.popTableData3 = res.data.data
-      this.echartsFour(this.popTableData3);
-    })
   },
   methods:{
     cityChange(val){
       this.popTableShow = 0
       this.cityActive = val
       if (val == 0) {
-        this.popName = '风电';
-      }else if (val == 1) {
-        this.popName = '光伏';
-      }else if (val == 2) {
-        this.popName = '光热一体';
-      }else if (val == 3) {
-        this.popName = '火电';
-      }else if (val == 4) {
-        this.popName = '水电';
-      }
-      getData(
-            {
-              action:'one',
-              key:'装机容量'+this.popName
-            }
-          ).then((res)=>{
         this.modelOthers = true
          this.componentShow = 'pop';
+         this.popName = '风电';
+         this.popTableShow = 5
+      }else if (val == 1) {
+        this.modelOthers = true
+        this.componentShow = 'pop';
+        this.popName = '光伏';
+        this.popTableShow = 5
+      }else if (val == 2) {
+        this.modelOthers = true
+        this.componentShow = 'pop';
+        this.popName = '光热一体';
+        this.popTableShow = 5
+      }else if (val == 3) {
+        this.modelOthers = true
+        this.componentShow = 'pop';
+        this.popName = '火电';
+        this.popTableShow = 5
+      }else if (val == 4) {
+        this.modelOthers = true
+        this.componentShow = 'pop';
+        this.popName = '水电';
         this.popTableShow = 5
-           if (this.popName == '风电') {
-             this.popTableData5 = res.data.data
-            }else if (this.popName == '光伏') {
-              this.popTableData6 = res.data.data
-            }else if (this.popName == '光热一体') {
-              this.popTableData7 = res.data.data
-            }else if (this.popName == '火电') {
-              this.popTableData8 = res.data.data
-            }else if (this.popName == '水电') {
-              this.popTableData9 = res.data.data
       }
-          })
-          
     },
     typeChange(val){
       this.popTableShow = 0
@@ -760,6 +855,7 @@ export default {
       this.mapCityAction = val
     },
      echartsOne(contaminatedData){
+       console.log(contaminatedData,'contaminatedData');
        let regionData = [
          {
            name:'',
@@ -767,9 +863,9 @@ export default {
         }
        ]
        //求企业数量和
-      //  let enterpriseNum = contaminatedData.reduce((sum,e)=> sum + Number(e.企业数量 || 0),0)
+       let enterpriseNum = contaminatedData.reduce((sum,e)=> sum + Number(e.企业数量 || 0),0)
        regionData = Object.keys(contaminatedData).map((item,index)=>{
-         return {name:contaminatedData[index].区县,value: contaminatedData[index].企业数量}
+         return {name:contaminatedData[index].区县,value: Number(contaminatedData[index].企业数量/enterpriseNum*100).toFixed(2)}
        })
      var myChart = this.$echarts.init(document.getElementById("echartsOne"));
      var option ={
@@ -806,7 +902,11 @@ export default {
                       borderWidth: 1,
                       padding:[5,10,10,5],
                       // borderRadius: [0,0,14,0],
-                      formatter: [ '{b}','{d}%'].join(':'),
+                      formatter: function (param) {
+                        // return param.name + ': ' + (param.value - number) + ' ' + (((param.value - number) / sum) * 100)
+                        // 	.toFixed(2) + '%'
+                        return param.name + ':' + param.value + '%'
+                      },
                      
                   },
                  
@@ -1007,18 +1107,7 @@ export default {
       };
       myChart.setOption(option);
     },
-    echartsTwo(capacityData){
+    echartsTwo(){
-      let capacitySum = null
-      let capacityList = []
-      // for (let i = 0; i < capacityData.length; i++) {
-      //   capacitySum = Number(capacityData[i].风电) + Number(capacityData[i].光伏) + Number(capacityData[i].光热一体) + 
-      //    Number(capacityData[i].火电) + Number(capacityData[i].水电)
-      // }
-       Object.keys(capacityData).map((item,index)=>{
-        for (const key in capacityData[index]) {
-           capacityList.push({name:key , value:capacityData[index][key]})
-        }
-      })
            var myChart = this.$echarts.init(document.getElementById("echartsTwo"));
            var option = {
             tooltip: {
@@ -1046,17 +1135,19 @@ export default {
                     radius: [0, '70%'],
                     color: ['#57d1fa','#b6b91d','#8bd2b2','#57d1fa','#ff9374'],
                     roseType: 'area',
-                    data: capacityList
+                    data: [
+                        {value: 25, name: 'A类型'},
+                        {value: 30, name: 'B类型'},
+                        {value: 30, name: 'C类型'},
+                        {value: 25, name: 'D类型'},
+                        {value: 25, name: 'E类型'},
+                    ]
                 }
             ]
         }
         myChart.setOption(option);
     },
-    echartsThree(powerStation){
+    echartsThree(){
-      let  powerStationList = [];
-      powerStationList = Object.keys(powerStation).map((item,index)=>{
-        return {name:powerStation[index].地区, value: powerStation[index].电站数}
-      })
      var myChart = this.$echarts.init(document.getElementById("echartsThree"));
      var option ={
         tooltip: {
@@ -1064,7 +1155,7 @@ export default {
         },
         series: [
           {
-            name: "非统调光伏电站座数分布",
+            name: "企业污染",
             type: "pie",
             radius: ["20%", "63%"],
             center: ["50%", "50%"],
@@ -1092,7 +1183,11 @@ export default {
                       borderWidth: 1,
                       padding:[5,10,10,5],
                       // borderRadius: [0,0,14,0],
-                      formatter: [ '{b}','{d}%'].join(':'),
+                      formatter: function (param) {
+                        // return param.name + ': ' + (param.value - number) + ' ' + (((param.value - number) / sum) * 100)
+                        // 	.toFixed(2) + '%'
+                        return param.name + ':' + param.value + '%'
+                      },
                      
                   },
                  
@@ -1103,7 +1198,14 @@ export default {
             //   shadowOffsetX: 5,
             //   shadowOffsetY: 5
             // },
-            data:powerStationList
+            data:[{name:'东台市',value:71.03},
+                  {name:'阜宁县',value:12.66},
+                  {name:'盐都区',value:6.04},
+                  {name:'响水县',value:8.04},
+                  {name:'建湖县',value:8.04},
+                  {name:'大丰区',value:18.04},
+                  {name:'射阳县',value:9.04},
+              ]
           },
         {
              name: "ring5",
@@ -1293,13 +1395,7 @@ export default {
       };
       myChart.setOption(option);
     },
-    echartsFour(powerPlant){
+    echartsFour(){
-      let powerPlantType = [];
-      let powerPlantCount = [];
-      for (let i = 0; i < powerPlant.length; i++) {
-        powerPlantType.push(powerPlant[i].非统调电源类型)
-        powerPlantCount.push(powerPlant[i].实际并网容量)
-      }
           var myChart = this.$echarts.init(document.getElementById("echartsFour"));
          var option = {
               tooltip: {
@@ -1318,11 +1414,11 @@ export default {
                 grid: {
                   // top:'20%',
                   // bottom: '10%',
-                  right: '8%',
+                  right: '10%',
                   left: '10%',
                 },
                 xAxis: {
-                  data: powerPlantType,
+                  data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00','06:00', '07:00', '08:00', '09:00', '10:00', '11:00'],
                   axisLine: {
                     lineStyle: {
                         color: '#08c386'
@@ -1343,15 +1439,15 @@ export default {
                   axisLabel: {
                     show: true,
                     interval:0,
-                    rotate:20,
+                    // rotate:20,
                     margin: 14,
-                    fontSize: 12,
+                    fontSize: 14,
                     color: 'rgb(78,227,207)',
                   },
                 },
                 yAxis: [
                   {
-                    name: '单位:MW',
+                    name: '',
                     nameTextStyle: {
                       fontSize: 11,
                       color: '#08c386',
@@ -1424,7 +1520,7 @@ export default {
                        backgroundColor: 'rgb(5,52,44)',
                         formatter: '{c}',
                     },
-                    data: powerPlantCount,
+                    data: [47, 46, 41, 46, 44, 90,47, 46, 41, 46, 44, 90],
                     z: 10,
                     zlevel: 0,
                   },
@@ -1443,7 +1539,7 @@ export default {
                     symbolSize: [22, 5],
                     symbolPosition: 'start',
                     symbolOffset: [1, 1],
-                    data: powerPlantCount,
+                    data: [47, 46, 41, 46, 44, 90,47, 46, 41, 46, 44, 90],
                     width: 2,
                     z: 0,
                     zlevel: 1,
@@ -1471,13 +1567,7 @@ export default {
         };
         myChart.setOption(option)
     },
-    echartsFive(powerData){
+    echartsFive(){
-      let powerX = []
-      let powerY = []
-      for (let i = 0; i < powerData.length; i++) {
-        powerX.push(powerData[i].类型)
-        powerY.push(powerData[i].电量)
-      }
           var myChart = this.$echarts.init(document.getElementById("echartsFive"));
          var option = {
               tooltip: {
@@ -1500,7 +1590,7 @@ export default {
                   left: '10%',
                 },
                 xAxis: {
-                  data: powerX,
+                  data: ['光伏发电','风力发电','余电上网光伏','电厂'],
                   axisLine: {
                     lineStyle: {
                         color: '#08c386'
@@ -1529,7 +1619,7 @@ export default {
                 },
                 yAxis: [
                   {
-                    name: '单位/万kWh',
+                    name: '',
                     nameTextStyle: {
                       fontSize: 11,
                       color: '#08c386',
@@ -1602,7 +1692,7 @@ export default {
                        backgroundColor: 'rgb(5,52,44)',
                         formatter: '{c}',
                     },
-                    data: powerY,
+                    data: [47, 46, 41, 46,],
                     z: 10,
                     zlevel: 0,
                   },
@@ -1621,7 +1711,7 @@ export default {
                     symbolSize: [22, 2],
                     symbolPosition: 'start',
                     symbolOffset: [1, 25],
-                    data: powerY,
+                    data: [47, 46, 41, 46,],
                     width: 1,
                     z: 0,
                     zlevel: 1,
@@ -1657,7 +1747,7 @@ export default {
         },
         series: [
           {
-            name: "非统调光伏电站装机容量分布",
+            name: "企业污染",
             type: "pie",
             radius: ["20%", "63%"],
             center: ["50%", "50%"],
@@ -1939,7 +2029,7 @@ export default {
                       return `{${circle}|}\n{${color}|${params.name}\n${params.value}}`;
                     },
                     rich: {
-                        purple: {
+                        yellow: {
                           color:'rgb(5,204,148)',
                           fontSize: 18,
                         },
@@ -1951,7 +2041,7 @@ export default {
                           color:'rgb(30,140,189)',
                           fontSize: 18,
                         },
-                        yellow: {
+                        purple: {
                           color: 'rgb(255,160,98)',
                           fontSize: 18,
                         },
@@ -2033,6 +2123,7 @@ export default {
                         if (params.componentSubType == 'scatter') {
                              return `<div class=chartLabel>
                             <div class=title>${params.name}</div>
+                            <button id="btn-tooltip" onclick="handle('${params.name}')">查看更多</button>
                             </div>`
                         }
                    
@@ -2069,22 +2160,35 @@ export default {
                                     colorStops: [
                                         {
                                         offset: 0,
-                                        color: "rgb(11,224,181)", // 0% 处的颜色
+                                        color: "#009DA1", // 0% 处的颜色
                                         },
                                         {
                                         offset: 1,
-                                        color: "rgb(11,224,181)", // 50% 处的颜色
+                                        color: "#005B9E", // 50% 处的颜色
                                         },
                                     ],
                                         global: true, // 缺省为 false
                                         },
                                         opacity: 0.5,
                                 },
-                                // emphasis: {
+                                emphasis: {
-                                //     areaColor: "#2a333d",
+                                    areaColor: "#2a333d",
-                                // },
+                                },
                                  
                                 },
+                                // regions: [
+                                // {
+                                //     name: "南海诸岛",
+                                //     itemStyle: {
+                                //     areaColor: "rgba(0, 10, 52, 1)",
+                                //     borderColor: "rgba(0, 10, 52, 1)",
+                                //     },
+                                //     emphasis: {
+                                //     areaColor: "rgba(0, 10, 52, 1)",
+                                //     borderColor: "rgba(0, 10, 52, 1)",
+                                //     },
+                                // },
+                                // ],
                                 z: 2,
                             },
 	                series: [
@@ -2103,106 +2207,7 @@ export default {
                             show: true, // 是否显示标签。
                             fontSize: '11',
                             color: 'rgba(0,0,0,0.7)',
-                                fontSize:15,
+                            
-                                // position: [10,20],
-                                color: '#fff',
-                              backgroundColor: 'rgb(5,52,44)',
-                                formatter: (params) => {
-                              let color = "blue";
-                              if (params.dataIndex === 0) {
-                                 var res =  "{binhai|}"
-                                 return res;
-                              } else if (params.dataIndex === 1) {
-                                var res =  "{dafeng|}"
-                                 return res;
-                              } else if (params.dataIndex === 2) {
-                                var res =  "{dongtai|}"
-                                 return res;
-                              } else if (params.dataIndex === 3) {
-                                var res =  "{funing|}"
-                                 return res;
-                              }else if (params.dataIndex === 4) {
-                                var res =  "{jianhu|}"
-                                 return res;
-                              }else if (params.dataIndex === 5) {
-                                var res =  "{sheyang|}"
-                                 return res;
-                              }else if (params.dataIndex === 6) {
-                                var res =  "{tinghu|}"
-                                 return res;
-                              }else if (params.dataIndex === 7) {
-                                var res =  "{xiangshui|}"
-                                 return res;
-                              }else if (params.dataIndex === 8) {
-                                var res =  "{yandu|}"
-                                 return res;
-                              }
-                            },
-                            rich: {
-                                binhai: {
-                                   height: 21,
-                                   width: 64,
-                                  backgroundColor: {
-                                  image: '/mapIcon/binhai.png'
-                                   },
-                                },
-                                dafeng: {
-                                  height: 21,
-                                   width: 52,
-                                  backgroundColor: {
-                                  image: '/mapIcon/dafeng.png'
-                                   },
-                                },
-                                dongtai: {
-                                  height: 21,
-                                   width: 49,
-                                  backgroundColor: {
-                                  image: '/mapIcon/dongtai.png'
-                                   },
-                                },
-                                funing: {
-                                  height: 21,
-                                   width: 52,
-                                  backgroundColor: {
-                                  image: '/mapIcon/funing.png'
-                                   },
-                                },
-                                jianhu: {
-                                  height: 21,
-                                   width: 52,
-                                  backgroundColor: {
-                                  image: '/mapIcon/jianhu.png'
-                                   },
-                                },
-                                sheyang: {
-                                  height: 21,
-                                   width: 52,
-                                  backgroundColor: {
-                                  image: '/mapIcon/sheyang.png'
-                                   },
-                                },
-                                tinghu: {
-                                  height: 21,
-                                   width: 52,
-                                  backgroundColor: {
-                                  image: '/mapIcon/tinghu.png'
-                                   },
-                                },
-                                xiangshui: {
-                                  height: 21,
-                                   width: 52,
-                                  backgroundColor: {
-                                  image: '/mapIcon/xiangshui.png'
-                                   },
-                                },
-                                yandu: {
-                                  height: 21,
-                                   width: 52,
-                                  backgroundColor: {
-                                  image: '/mapIcon/yandu.png'
-                                   },
-                                },
-                            },
                         },
                         
                         itemStyle: {
@@ -2278,7 +2283,7 @@ export default {
                             { name: '响水县', value: [120.339948,33.177641] },
                             { name: '盐都区', value: [120.439991,33.077621] },
                         ],
-                            symbol: "image:///mapIcon/location.png",
+                            symbol: "image:///mapIcon/地标.png",
                             symbolSize:[16, 20],
                             symbolKeepAspect:"true"
                             // itemStyle: {
@@ -4216,16 +4221,10 @@ export default {
          this.popName = '非统调电厂';
          this.popTableShow = val
        }else if (val == 4) {
-         getData({
-           action:'one',
-           key:'非统调光伏电站装机容量'
-         }).then((res)=>{
          this.modelOthers = true
          this.componentShow = 'pop';
          this.popName = '非统调光伏电站装机容量分布';
          this.popTableShow = val
-           this.popTableData4 = res.data.data
-         })
        }
      }
   },
@@ -4281,8 +4280,8 @@ export default {
         background: url("../assets/images/kuang.png") no-repeat;
        background-size: 100% 100%;
        color: #ffffff;
-       text-indent : 32px;
+       text-indent : 40px;
-       letter-spacing:1px;
+       letter-spacing:7px;
        text-align:left;
        line-height:25px;
        overflow: auto;
@@ -4405,10 +4404,9 @@ export default {
                           height: 100%;
                            display: flex;
                           flex-wrap: wrap;
-                          justify-content: center;
+                          justify-content: space-around;
                           align-items: center;
                           align-content: center;
-                          flex-direction: column;
                         }
                       
                 }
@@ -4676,7 +4674,6 @@ export default {
         display: flex;
         flex-wrap: wrap;
         align-items: center;
-        z-index: 100;
          .cityBtn{
            width: 100%;
            height: 9%;
@@ -5094,7 +5091,6 @@ export default {
               height: 10%;
               right: 4%;
               top: 4%;
-              z-index: 100;
               .el-select{
                 ::v-deep .el-input--suffix .el-input__inner{
                 background: url("../assets/images/selectKuang.png") no-repeat;
@@ -5141,7 +5137,7 @@ export default {
                       }
                       /deep/ .el-table__header {
                         height: 48px;
-                        background: url("../assets/images/table.png") no-repeat ;
+                        background: url("../assets/images/table.png") no-repeat !important;
                         background-size: 100% 100%;
                       }
                       /deep/ .el-table__header th {
@@ -5234,9 +5230,6 @@ export default {
     .el-select-dropdown__item{
       color: #ffffff !important;
     }
-    .el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
-      background-color: rgb(8,52,41) !important;
-    }
 }  
 </style>
 

src/views/pop.vue

@@ -51,22 +51,22 @@
                         </template>
                       </el-table-column>
                       <el-table-column
-                        prop="地区"
+                        prop="diqu"
                         label="地区"
                         >
                       </el-table-column>
                       <el-table-column
-                        prop="电站数"
+                        prop="dianzhanshu"
                         label="电站数"
                         >
                       </el-table-column>
                       <el-table-column
-                        prop="集中式"
+                        prop="jizhongshi"
                         label="电站数(集中式)"
                         >
                       </el-table-column>
                       <el-table-column
-                        prop="分布式"
+                        prop="fenbushi"
                         label="电站数(分布式)"
                        >
                       </el-table-column>
@@ -84,23 +84,23 @@
                         </template>
                       </el-table-column>
                       <el-table-column
-                        prop="非统调电源类型"
+                        prop="feitongdiao"
                         label="非统调电源类型"
                         width="150"
                         >
                       </el-table-column>
                       <el-table-column
-                        prop="座数"
+                        prop="zuoshu"
                         label="座数"
                         >
                       </el-table-column>
                       <el-table-column
-                        prop="台数"
+                        prop="taishu"
                         label="台数"
                         >
                       </el-table-column>
                       <el-table-column
-                        prop="实际并网容量"
+                        prop="bingwang"
                         label="实际并网容量(MW)"
                         width="150"
                        >
@@ -119,18 +119,21 @@
                         </template>
                       </el-table-column>
                       <el-table-column
-                        prop="地区"
+                        prop="diqu"
                         label="地区"
+                        width="100"
                         >
                       </el-table-column>
                       <el-table-column
-                        prop="光伏核准总装机容量"
+                        prop="guangfuhezhun"
                         label="光伏核准总装机容量(MW)"
+                        width="200"
                         >
                       </el-table-column>
                       <el-table-column
-                        prop="光伏实际总装机容量"
+                        prop="guangfushiji"
                         label="光伏实际总装机容量(MW)"
+                        width="200"
                         >
                       </el-table-column>
                   </el-table>
@@ -147,38 +150,37 @@
                         </template>
                       </el-table-column>
                       <el-table-column
-                        prop="发电厂名称"
+                        prop="fadianchang"
                         label="发电厂名称"
                         >
                       </el-table-column>
                       <el-table-column
-                        prop="装机容量"
+                        prop="zhuangji"
                         label="装机容量(MW)"
                         >
                       </el-table-column>
                       <el-table-column
-                        prop="发电厂类型"
+                        prop="fengdian"
                         label="发电厂类型"
                         >
                       </el-table-column>
                       <el-table-column
-                        prop="最高电压等级"
+                        prop="zuigao"
                         label="最高电压等级"
                         >
                       </el-table-column>
                       <el-table-column
-                        prop="投运日期"
+                        prop="date"
                         label="投运日期"
-                        show-overflow-tooltip
                         >
                       </el-table-column>
                       <el-table-column
                         label="运行状态"
                         >
                         <template slot-scope="scop">
-                          <span v-if="scop.row.运行状态 =='在运'">{{ scop.row.运行状态}}</span>
+                          <span v-if="scop.row.status =='在运'">{{ scop.row.status}}</span>
-                          <span v-else-if="scop.row.运行状态 =='退运'" style="color:red">{{ scop.row.运行状态}}</span>
+                          <span v-else-if="scop.row.status =='退运'" style="color:red">{{ scop.row.status}}</span>
-                          <span v-else-if="scop.row.运行状态 =='在建'" style="color:yellow">{{ scop.row.运行状态}}</span>
+                          <span v-else-if="scop.row.status =='在建'" style="color:yellow">{{ scop.row.status}}</span>
                         </template>
                       </el-table-column>
                   </el-table>
@@ -266,6 +268,7 @@ props: {
       }
     },
     mounted(){
+      console.log(this.popTableData2,'popTableData');
       this.tableShow = this.popTableShow;
       if (this.popTableShow == 1) {
         this.popData = this.popTableData1;
@@ -298,15 +301,7 @@ props: {
           this.popData = this.popTableData13;
         }
       }
-    },
+      
-    watch: {
-      //  //监听内容
-      //  popData(newVal,oldVal) {
-      //   console.log(newVal,oldVal,"value发生了变化");
-      //   if (newVal != oldVal && newVal != '') {
-      //     this.popData = newVal
-      //   }
-      // }
     },
     methods:{
       close(){
@@ -352,7 +347,7 @@ props: {
     }
     .secondContent{
       width: 100%;
-      height: calc(100% - 8%);
+      height: 100%;
       padding-top: 2%;
       box-sizing: border-box;
       /deep/ .el-table {
@@ -366,7 +361,7 @@ props: {
                       }
                       /deep/ .el-table__header {
                         height: 48px;
-                        background: url("../assets/images/table.png") no-repeat ;
+                        background: url("../assets/images/table.png") no-repeat !important;
                         background-size: 100% 100%;
                       }
                       /deep/ .el-table__header th {