1.后台管理在侧边栏是否展开中实现echarts自适应

2.首页地图更换图标，分为不同状态的风机和光伏板

cpp-ui/src/utils/mixins/resize.js

@@ -0,0 +1,64 @@
+import { debounce } from '@/utils'
+
+export default {
+  data() {
+    return {
+      $_sidebarElm: null,
+      $_resizeHandler: null
+    }
+  },
+  mounted() {
+    this.initListener()
+  },
+  activated() {
+    if (!this.$_resizeHandler) {
+      // avoid duplication init
+      this.initListener()
+    }
+
+    // when keep-alive chart activated, auto resize
+    this.resize()
+  },
+  beforeDestroy() {
+    this.destroyListener()
+  },
+  deactivated() {
+    this.destroyListener()
+  },
+  methods: {
+    // use $_ for mixins properties
+    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+    $_sidebarResizeHandler(e) {
+      if (e.propertyName === 'width') {
+        this.$_resizeHandler()
+      }
+    },
+    initListener() {
+      this.$_resizeHandler = debounce(() => {
+        this.resize()
+      }, 100)
+      window.addEventListener('resize', this.$_resizeHandler)
+
+      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
+      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    destroyListener() {
+      window.removeEventListener('resize', this.$_resizeHandler)
+      this.$_resizeHandler = null
+
+      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    resize() {
+      const { chart,zqlChart,pcChart ,wsChart,wdChart,
+        sdChart,fsChart} = this
+      chart && chart.resize()
+      zqlChart && zqlChart.resize()
+      pcChart && pcChart.resize()
+      wsChart && wsChart.resize()
+      wdChart && wdChart.resize()
+      sdChart && sdChart.resize()
+      fsChart && fsChart.resize()
+
+    }
+  }
+}

cpp-ui/src/views/largeScreen/components/center-top.vue

@@ -19,17 +19,29 @@
       </div>
     </div>
     <div class="position-a" v-for="item in stationInfo" :style="{top:item.top+'vh',left:item.left+'vw',cursor:'pointer'}" @mouseenter="mousemoveRows(item)" @mouseleave="removeTips(item)" @click="jumpCloudDataPage(item)">
-      <div v-if="Number(item.status) === 1" class="sign-style green"></div>
-      <div v-else-if="Number(item.status) === 2" class="sign-style yellow"></div>
-      <div v-else-if="Number(item.status) === 3" class="sign-style red"></div>
-      <div v-else class="sign-style grey"></div>
+      <div v-if="Number(item.status) === 1">
+        <img src="../../../assets/images/mapIcon/green-gf.png" class="img-style" v-if="item.stationType === 'E1'"/>
+        <img src="../../../assets/images/mapIcon/green-fj.png" class="img-style" v-else/>
+      </div>
+      <div v-else-if="Number(item.status) === 2">
+        <img src="../../../assets/images/mapIcon/yellow-gf.png" class="img-style" v-if="item.stationType === 'E1'"/>
+        <img src="../../../assets/images/mapIcon/yellow-fj.png" class="img-style" v-else/>
+      </div>
+      <div v-else-if="Number(item.status) === 3">
+        <img src="../../../assets/images/mapIcon/red-gf.png" class="img-style" v-if="item.stationType === 'E1'"/>
+        <img src="../../../assets/images/mapIcon/red-fj.png" class="img-style" v-else/>
+      </div>
+      <div v-else class="image-container">
+        <img src="../../../assets/images/mapIcon/grey-gf.png" class="img-style" v-if="item.stationType === 'E1'"/>
+        <img src="../../../assets/images/mapIcon/grey-fj.png" class="img-style" v-else />
+      </div>
     </div>
     <span class="runDay position-a">安全运行天数: {{ runningDays }}</span>
   </div>
 </template>
 
 <script>
-
+import '../../../assets/images/mapIcon/green-gf.png'
 export default {
   data() {
     return {
@@ -123,7 +135,7 @@ export default {
         max-height: 400px;
         position: absolute;
         top: ${Number(row.top) + 1}vh;
-        left: ${Number(row.left)+.5}vw;
+        left: ${Number(row.left)+1.5}vw;
         padding:.5vh .6vw;
         overflow: auto;
         font-size: .7vw;
@@ -222,4 +234,10 @@ export default {
 .grey:hover {
   box-shadow: 0 4px 12px 1px grey;
 }
+.img-style{
+  width: 1.5vw;
+}
+.img-style:hover {
+  transform: scale(1.3); /* 悬浮时放大图片 */
+}
 </style>

cpp-ui/src/views/largeScreen/components/left-bottom.vue

@@ -260,6 +260,7 @@ export default {
                     tempStr = tempStr + '<span class="ml-0" style="color: ' + param.color + '">' + param.value[1] + '</span>,'
                   }
                 }
+                tempStr = tempStr.slice(0,tempStr.length-1)
                 tempStr = tempStr + '</div></div>'
                 scatterStr = scatterStr+tempStr
               }
@@ -281,11 +282,14 @@ export default {
         xAxis: {
           type: 'category',
           axisTick: {show: true},
+          axisLabel: {
+            color: '#89BFE5'
+          },
           axisLine: {
             onZero: false,
-            // lineStyle: {
-            //   color: '#5fbbeb'
-            // }
+            lineStyle: {
+              color: '#5fbbeb'
+            }
           },
           data: xData
         },
@@ -296,14 +300,18 @@ export default {
             formatter: '{value}',
             textStyle: {
               fontSize: 14,
+              color: '#89BFE5'
             },
           },
-          axisTick: {
-            show: false,
+          axisLine: {
+            lineStyle: {
+              color: '#394458',
+            },
           },
           splitLine: {
             lineStyle: {
               type: 'dashed',
+              color: '#394458',
             },
           },
         },

cpp-ui/src/views/largeScreen/components/right-bottom.vue

@@ -86,8 +86,8 @@ export default {
       })
     },
     setOptions({xData, pData} = {}) {
-      console.log(xData)
-      console.log(pData)
+      // console.log(xData)
+      // console.log(pData)
       const _this = this
       let option = JSON.parse(JSON.stringify(forecast10LineOption))
       option.xAxis.data = xData

cpp-ui/src/views/regulation/dqRegulation/index.vue

@@ -276,8 +276,9 @@
 <script>
 import * as echarts from "echarts";
 import {fontSize} from "../../../utils";
-
+import resize from '../../../utils/mixins/resize'
 export default {
+  mixins: [resize],
   name: 'inverterinfo',
   data() {
     return {

cpp-ui/src/views/regulation/modelAccuracyStatistics/index.vue

@@ -96,8 +96,9 @@
 
 <script>
 import * as echarts from "echarts";
-
+import resize from '../../../utils/mixins/resize'
 export default {
+  mixins: [resize],
   name: 'inverterinfo',
   data() {
     return {

cpp-ui/src/views/stationDataQuery/historyforecastdata/index.vue

@@ -54,7 +54,7 @@
     </div>
     <div>
       <div style="display: flex">
-        <div style="float:left;width: 100%;height: 36vh" id="zhCharts"></div>
+        <div style="float:left;width: 100%;height: 36vh" id="charts"></div>
       </div>
       <div>
         <div>差值颜色说明：<span style="color: #FF0000">红色</span>代表短期调控与上报不相符，<span
@@ -99,7 +99,9 @@
 <script>
 import * as echarts from "echarts";
 
+import resize from '../../../utils/mixins/resize'
 export default {
+  mixins: [resize],
   name: 'inverterinfo',
   data() {
     return {
@@ -715,11 +717,11 @@ export default {
   mounted() {
   },
   beforeDestroy() {
-    if (!this.zhChart) {
+    if (!this.chart) {
       return
     }
-    this.zhChart.dispose()
-    this.zhChart = null
+    this.chart.dispose()
+    this.chart = null
   },
   computed: {},
   methods: {
@@ -824,7 +826,7 @@ export default {
       })
     },
     zhDraw(wsTime, zhMap, stationType) {
-      this.zhChart = echarts.init(document.getElementById('zhCharts'), 'dark')
+      this.chart = echarts.init(document.getElementById('charts'), 'dark')
       let option = {
         backgroundColor: 'transparent',
         title: {
@@ -975,10 +977,10 @@ export default {
         option.series.push(sValue)
         index++;
       }
-      this.zhChart.setOption(option, true)
+      this.chart.setOption(option, true)
       var _this = this
       window.addEventListener("resize", function () {
-        _this.zhChart.resize();
+        _this.chart.resize();
       });
     },
   },

cpp-ui/src/views/stationDataQuery/nwpdata/index.vue

@@ -88,7 +88,9 @@
 <script>
 import * as echarts from "echarts";
 
+import resize from '../../../utils/mixins/resize'
 export default {
+  mixins: [resize],
   name: 'inverterinfo',
   data() {
     return {

cpp-ui/src/views/stationDataQuery/weatherstationstatusdata/index.vue

@@ -82,7 +82,9 @@
 <script>
 import * as echarts from "echarts";
 
+import resize from '../../../utils/mixins/resize'
 export default {
+  mixins: [resize],
   name: 'inverterinfo',
   data() {
     return {

cpp-ui/src/views/stationDataQuery/windtowerstatusdata/index.vue

@@ -95,7 +95,9 @@
 <script>
 import * as echarts from "echarts";
 
+import resize from '../../../utils/mixins/resize'
 export default {
+  mixins: [resize],
   name: 'inverterinfo',
   data() {
     return {

cpp-ui/src/views/statistics/stationAccuracy/index.vue

@@ -110,7 +110,9 @@
 
 <script>
 import * as echarts from "echarts";
+import resize from '../../../utils/mixins/resize'
 export default {
+  mixins: [resize],
   name: 'accuracy',
   data() {
     return {