代码提交

src/App.vue

@@ -2,14 +2,15 @@
   <div id="app">
     <div class="top">
       <div class="left">
-        <div style="font-size:28px;color:#ffffff">2022-12-14  14:30:50 &nbsp;&nbsp; | &nbsp;&nbsp;星期二</div>
+        <div style="font-size:28px;color:#ffffff">{{time}} &nbsp;&nbsp; | &nbsp;&nbsp;{{week}}</div>
       </div>
       <div class="middle">
-        <div class="leftBtn" @click="powerPdf"><div class="leftBtnText">电力行业发展</div></div>
+        <div class="leftBtn" @click="powerPdf" :class="{'handleAction':handleAction=='电力行业发展'}"><div class="leftBtnText">电力行业发展</div></div>
         <div class="middleText"><img src="./assets/images/homeText.png"/></div>
-        <div class="rightBtn" @click="energyPdf"><div class="rightBtnText">能源发展综述</div></div>
+        <div class="rightBtn" @click="energyPdf" :class="{'handleAction1':handleAction1=='能源发展综述'}"><div class="rightBtnText">能源发展综述</div></div>
       </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 class="right"><img :src="weather" style="width:10%;height:50%"/>晴转多云 &nbsp;&nbsp;| &nbsp;&nbsp;<span style="color:rgb(23,231,232)">-2-5℃</span>&nbsp;&nbsp;|&nbsp;&nbsp; 东风<span style="color:rgb(23,231,232);    align-items: center;
+    display: flex;height:50%">3</span>级</div>
     </div>
      <div class="content">
       <router-view />
@@ -63,10 +64,15 @@ import axios from "axios"
   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:''
       }
     },
     mounted() {
@@ -78,6 +84,11 @@ import axios from "axios"
     //   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)
       
     },
     methods:{
@@ -85,20 +96,26 @@ import axios from "axios"
      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.numPages = 27
       this.filePdf = pdf.createLoadingTask(fileUrl)
+      this.numPages = 27
       this.fileType  =  true
-      
+      this.handleAction1 = '能源发展综述'
       }
     },
     components: {
@@ -157,7 +174,7 @@ import axios from "axios"
       height: 100%;
      display: flex;
     justify-content: flex-start;
-    color:rgb(15,251,251);
+    color:#ffffff;
     .leftBtnText{
       height: 61%;
       // width: 56.62%;
@@ -166,6 +183,13 @@ import axios from "axios"
       background-size: 100% 100%;
     }
     }
+    .handleAction{
+      width:20%;
+      height: 100%;
+      display: flex;
+      justify-content: flex-start;
+      color:rgb(15,251,251);
+    }
     .middleText{
       width:59%;
       height: 100%;
@@ -191,7 +215,7 @@ import axios from "axios"
       height: 100%;
      display: flex;
     justify-content: flex-end;
-    color:rgb(15,251,251);
+    color:#ffffff;
     .rightBtnText{
       height: 61%;
       // width: 56.62%;
@@ -200,6 +224,13 @@ import axios from "axios"
       background-size: 100% 100%;
     }
     }
+    .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;">18132.6667MW</span>
+                    <span style="color:yellow;font-size:30px;font-weight: 700;font-family: auto;">{{capacity}}MW</span>
                     <span style="color:#ffffff">盐城电力生产总装机量</span>
                   </div>
                 </div>
@@ -219,27 +219,29 @@
                       <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="易损线路/开关"
-                        width="110">
+                        show-overflow-tooltip
+                        >
                       </el-table-column>
                       <el-table-column
                         prop="guzhang"
                         label="故障发生时间"
-                        width="110">
+                        show-overflow-tooltip
+                        >
                       </el-table-column>
                     </el-table>
               </div>
@@ -280,6 +282,7 @@ import {getData} from '../api/index.js'
 export default {
   data(){
     return{
+      capacity:0, //装机总量
       news:[
         {
           Journalism:''
@@ -419,129 +422,10 @@ export default {
           qiyeshuliang:'12'
         },
       ],
-      popTableData2:[
+      popTableData2:[],
-        {
+      popTableData3:[],
-          diqu:'亭湖区',
+      popTableData4:[],
-          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:[
         {
@@ -578,38 +462,6 @@ 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:[
         {
@@ -754,10 +606,6 @@ export default {
     }
   },
   mounted(){
-    this.echartsTwo();
-    this.echartsThree();
-    this.echartsFour();
-    this.echartsFive();
     this.echartsSix();
     this.echartsSeven();
     this.echartsMap();
@@ -794,37 +642,94 @@ 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.modelOthers = true
+        this.popName = '风电';
-         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
       }
+      getData(
+            {
+              action:'one',
+              key:'装机容量'+this.popName
+            }
+          ).then((res)=>{
+            this.modelOthers = true
+            this.componentShow = 'pop';
+            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
@@ -855,7 +760,6 @@ export default {
       this.mapCityAction = val
     },
      echartsOne(contaminatedData){
-       console.log(contaminatedData,'contaminatedData');
        let regionData = [
          {
            name:'',
@@ -863,9 +767,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: Number(contaminatedData[index].企业数量/enterpriseNum*100).toFixed(2)}
+         return {name:contaminatedData[index].区县,value: contaminatedData[index].企业数量}
        })
      var myChart = this.$echarts.init(document.getElementById("echartsOne"));
      var option ={
@@ -902,11 +806,7 @@ export default {
                       borderWidth: 1,
                       padding:[5,10,10,5],
                       // borderRadius: [0,0,14,0],
-                      formatter: function (param) {
+                      formatter: [ '{b}','{d}%'].join(':'),
-                        // return param.name + ': ' + (param.value - number) + ' ' + (((param.value - number) / sum) * 100)
-                        // 	.toFixed(2) + '%'
-                        return param.name + ':' + param.value + '%'
-                      },
                      
                   },
                  
@@ -1107,7 +1007,19 @@ export default {
       };
       myChart.setOption(option);
     },
-    echartsTwo(){
+    echartsTwo(capacityData){
+      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: {
@@ -1135,19 +1047,17 @@ export default {
                     radius: [0, '70%'],
                     color: ['#57d1fa','#b6b91d','#8bd2b2','#57d1fa','#ff9374'],
                     roseType: 'area',
-                    data: [
+                    data: capacityList
-                        {value: 25, name: 'A类型'},
-                        {value: 30, name: 'B类型'},
-                        {value: 30, name: 'C类型'},
-                        {value: 25, name: 'D类型'},
-                        {value: 25, name: 'E类型'},
-                    ]
                 }
             ]
         }
         myChart.setOption(option);
     },
-    echartsThree(){
+    echartsThree(powerStation){
+      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: {
@@ -1155,7 +1065,7 @@ export default {
         },
         series: [
           {
-            name: "企业污染",
+            name: "非统调光伏电站座数分布",
             type: "pie",
             radius: ["20%", "63%"],
             center: ["50%", "50%"],
@@ -1183,11 +1093,7 @@ export default {
                       borderWidth: 1,
                       padding:[5,10,10,5],
                       // borderRadius: [0,0,14,0],
-                      formatter: function (param) {
+                      formatter: [ '{b}','{d}%'].join(':'),
-                        // return param.name + ': ' + (param.value - number) + ' ' + (((param.value - number) / sum) * 100)
-                        // 	.toFixed(2) + '%'
-                        return param.name + ':' + param.value + '%'
-                      },
                      
                   },
                  
@@ -1198,14 +1104,7 @@ export default {
             //   shadowOffsetX: 5,
             //   shadowOffsetY: 5
             // },
-            data:[{name:'东台市',value:71.03},
+            data:powerStationList
-                  {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",
@@ -1395,7 +1294,13 @@ export default {
       };
       myChart.setOption(option);
     },
-    echartsFour(){
+    echartsFour(powerPlant){
+      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: {
@@ -1414,11 +1319,11 @@ export default {
                 grid: {
                   // top:'20%',
                   // bottom: '10%',
-                  right: '10%',
+                  right: '8%',
                   left: '10%',
                 },
                 xAxis: {
-                  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'],
+                  data: powerPlantType,
                   axisLine: {
                     lineStyle: {
                         color: '#08c386'
@@ -1439,15 +1344,15 @@ export default {
                   axisLabel: {
                     show: true,
                     interval:0,
-                    // rotate:20,
+                    rotate:20,
                     margin: 14,
-                    fontSize: 14,
+                    fontSize: 12,
                     color: 'rgb(78,227,207)',
                   },
                 },
                 yAxis: [
                   {
-                    name: '',
+                    name: '单位:MW',
                     nameTextStyle: {
                       fontSize: 11,
                       color: '#08c386',
@@ -1520,7 +1425,7 @@ export default {
                        backgroundColor: 'rgb(5,52,44)',
                         formatter: '{c}',
                     },
-                    data: [47, 46, 41, 46, 44, 90,47, 46, 41, 46, 44, 90],
+                    data: powerPlantCount,
                     z: 10,
                     zlevel: 0,
                   },
@@ -1539,7 +1444,7 @@ export default {
                     symbolSize: [22, 5],
                     symbolPosition: 'start',
                     symbolOffset: [1, 1],
-                    data: [47, 46, 41, 46, 44, 90,47, 46, 41, 46, 44, 90],
+                    data: powerPlantCount,
                     width: 2,
                     z: 0,
                     zlevel: 1,
@@ -1567,7 +1472,13 @@ export default {
         };
         myChart.setOption(option)
     },
-    echartsFive(){
+    echartsFive(powerData){
+      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: {
@@ -1590,7 +1501,7 @@ export default {
                   left: '10%',
                 },
                 xAxis: {
-                  data: ['光伏发电','风力发电','余电上网光伏','电厂'],
+                  data: powerX,
                   axisLine: {
                     lineStyle: {
                         color: '#08c386'
@@ -1619,7 +1530,7 @@ export default {
                 },
                 yAxis: [
                   {
-                    name: '',
+                    name: '单位/万kWh',
                     nameTextStyle: {
                       fontSize: 11,
                       color: '#08c386',
@@ -1692,7 +1603,7 @@ export default {
                        backgroundColor: 'rgb(5,52,44)',
                         formatter: '{c}',
                     },
-                    data: [47, 46, 41, 46,],
+                    data: powerY,
                     z: 10,
                     zlevel: 0,
                   },
@@ -1711,7 +1622,7 @@ export default {
                     symbolSize: [22, 2],
                     symbolPosition: 'start',
                     symbolOffset: [1, 25],
-                    data: [47, 46, 41, 46,],
+                    data: powerY,
                     width: 1,
                     z: 0,
                     zlevel: 1,
@@ -1747,7 +1658,7 @@ export default {
         },
         series: [
           {
-            name: "企业污染",
+            name: "非统调光伏电站装机容量分布",
             type: "pie",
             radius: ["20%", "63%"],
             center: ["50%", "50%"],
@@ -2029,7 +1940,7 @@ export default {
                       return `{${circle}|}\n{${color}|${params.name}\n${params.value}}`;
                     },
                     rich: {
-                        yellow: {
+                        purple: {
                           color:'rgb(5,204,148)',
                           fontSize: 18,
                         },
@@ -2041,7 +1952,7 @@ export default {
                           color:'rgb(30,140,189)',
                           fontSize: 18,
                         },
-                        purple: {
+                        yellow: {
                           color: 'rgb(255,160,98)',
                           fontSize: 18,
                         },
@@ -2123,7 +2034,6 @@ 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>`
                         }
                    
@@ -2160,35 +2070,22 @@ export default {
                                     colorStops: [
                                         {
                                         offset: 0,
-                                        color: "#009DA1", // 0% 处的颜色
+                                        color: "rgb(11,224,181)", // 0% 处的颜色
                                         },
                                         {
                                         offset: 1,
-                                        color: "#005B9E", // 50% 处的颜色
+                                        color: "rgb(11,224,181)", // 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: [
@@ -2207,7 +2104,106 @@ 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: {
@@ -2283,7 +2279,7 @@ export default {
                             { name: '响水县', value: [120.339948,33.177641] },
                             { name: '盐都区', value: [120.439991,33.077621] },
                         ],
-                            symbol: "image:///mapIcon/地标.png",
+                            symbol: "image:///mapIcon/location.png",
                             symbolSize:[16, 20],
                             symbolKeepAspect:"true"
                             // itemStyle: {
@@ -4221,10 +4217,16 @@ export default {
          this.popName = '非统调电厂';
          this.popTableShow = val
        }else if (val == 4) {
-         this.modelOthers = true
+         getData({
-         this.componentShow = 'pop';
+           action:'one',
-         this.popName = '非统调光伏电站装机容量分布';
+           key:'非统调光伏电站装机容量'
-         this.popTableShow = val
+         }).then((res)=>{
+            this.modelOthers = true
+            this.componentShow = 'pop';
+            this.popName = '非统调光伏电站装机容量分布';
+            this.popTableShow = val
+           this.popTableData4 = res.data.data
+         })
        }
      }
   },
@@ -4280,8 +4282,8 @@ export default {
         background: url("../assets/images/kuang.png") no-repeat;
        background-size: 100% 100%;
        color: #ffffff;
-       text-indent : 40px;
+       text-indent : 32px;
-       letter-spacing:7px;
+       letter-spacing:1px;
        text-align:left;
        line-height:25px;
        overflow: auto;
@@ -4404,9 +4406,10 @@ export default {
                           height: 100%;
                            display: flex;
                           flex-wrap: wrap;
-                          justify-content: space-around;
+                          justify-content: center;
                           align-items: center;
                           align-content: center;
+                          flex-direction: column;
                         }
                       
                 }
@@ -5091,6 +5094,7 @@ 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;
@@ -5137,7 +5141,7 @@ export default {
                       }
                       /deep/ .el-table__header {
                         height: 48px;
-                        background: url("../assets/images/table.png") no-repeat !important;
+                        background: url("../assets/images/table.png") no-repeat ;
                         background-size: 100% 100%;
                       }
                       /deep/ .el-table__header th {
@@ -5230,6 +5234,9 @@ 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="diqu"
+                        prop="地区"
                         label="地区"
                         >
                       </el-table-column>
                       <el-table-column
-                        prop="dianzhanshu"
+                        prop="电站数"
                         label="电站数"
                         >
                       </el-table-column>
                       <el-table-column
-                        prop="jizhongshi"
+                        prop="集中式"
                         label="电站数(集中式)"
                         >
                       </el-table-column>
                       <el-table-column
-                        prop="fenbushi"
+                        prop="分布式"
                         label="电站数(分布式)"
                        >
                       </el-table-column>
@@ -84,23 +84,23 @@
                         </template>
                       </el-table-column>
                       <el-table-column
-                        prop="feitongdiao"
+                        prop="非统调电源类型"
                         label="非统调电源类型"
                         width="150"
                         >
                       </el-table-column>
                       <el-table-column
-                        prop="zuoshu"
+                        prop="座数"
                         label="座数"
                         >
                       </el-table-column>
                       <el-table-column
-                        prop="taishu"
+                        prop="台数"
                         label="台数"
                         >
                       </el-table-column>
                       <el-table-column
-                        prop="bingwang"
+                        prop="实际并网容量"
                         label="实际并网容量(MW)"
                         width="150"
                        >
@@ -119,21 +119,18 @@
                         </template>
                       </el-table-column>
                       <el-table-column
-                        prop="diqu"
+                        prop="地区"
                         label="地区"
-                        width="100"
                         >
                       </el-table-column>
                       <el-table-column
-                        prop="guangfuhezhun"
+                        prop="光伏核准总装机容量"
                         label="光伏核准总装机容量(MW)"
-                        width="200"
                         >
                       </el-table-column>
                       <el-table-column
-                        prop="guangfushiji"
+                        prop="光伏实际总装机容量"
                         label="光伏实际总装机容量(MW)"
-                        width="200"
                         >
                       </el-table-column>
                   </el-table>
@@ -150,37 +147,38 @@
                         </template>
                       </el-table-column>
                       <el-table-column
-                        prop="fadianchang"
+                        prop="发电厂名称"
                         label="发电厂名称"
                         >
                       </el-table-column>
                       <el-table-column
-                        prop="zhuangji"
+                        prop="装机容量"
                         label="装机容量(MW)"
                         >
                       </el-table-column>
                       <el-table-column
-                        prop="fengdian"
+                        prop="发电厂类型"
                         label="发电厂类型"
                         >
                       </el-table-column>
                       <el-table-column
-                        prop="zuigao"
+                        prop="最高电压等级"
                         label="最高电压等级"
                         >
                       </el-table-column>
                       <el-table-column
-                        prop="date"
+                        prop="投运日期"
                         label="投运日期"
+                        show-overflow-tooltip
                         >
                       </el-table-column>
                       <el-table-column
                         label="运行状态"
                         >
                         <template slot-scope="scop">
-                          <span v-if="scop.row.status =='在运'">{{ scop.row.status}}</span>
+                          <span v-if="scop.row.运行状态 =='在运'">{{ 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:red">{{ scop.row.运行状态}}</span>
-                          <span v-else-if="scop.row.status =='在建'" style="color:yellow">{{ scop.row.status}}</span>
+                          <span v-else-if="scop.row.运行状态 =='在建'" style="color:yellow">{{ scop.row.运行状态}}</span>
                         </template>
                       </el-table-column>
                   </el-table>
@@ -268,9 +266,8 @@ props: {
       }
     },
     mounted(){
-      console.log(this.popTableData2,'popTableData');
       this.tableShow = this.popTableShow;
-      if (this.popTableShow == 1) {
+         if (this.popTableShow == 1) {
         this.popData = this.popTableData1;
       }else if (this.popTableShow == 2) {
         this.popData = this.popTableData2;
@@ -301,7 +298,15 @@ props: {
           this.popData = this.popTableData13;
         }
       }
-      
+    },
+    watch: {
+      //  //监听内容
+      //  popData(newVal,oldVal) {
+      //   console.log(newVal,oldVal,"value发生了变化");
+      //   if (newVal != oldVal && newVal != '') {
+      //     this.popData = newVal
+      //   }
+      // }
     },
     methods:{
       close(){
@@ -347,7 +352,7 @@ props: {
     }
     .secondContent{
       width: 100%;
-      height: 100%;
+      height: calc(100% - 8%);
       padding-top: 2%;
       box-sizing: border-box;
       /deep/ .el-table {
@@ -361,7 +366,7 @@ props: {
                       }
                       /deep/ .el-table__header {
                         height: 48px;
-                        background: url("../assets/images/table.png") no-repeat !important;
+                        background: url("../assets/images/table.png") no-repeat ;
                         background-size: 100% 100%;
                       }
                       /deep/ .el-table__header th {