update

src/App.vue

@@ -1,5 +1,5 @@
 <template class="app">
-  <TitleBar class="titleBar"/>
+  <TitleBar class="titleBar" />
   <StatusBar class="statusBar" />
   <router-view />
 </template>
@@ -8,45 +8,66 @@
   import StatusBar from 'views/StatusBar.vue'
   import MessageBridge from 'utils/MessageBridge'
   export default {
-    components:{
+    components: {
       TitleBar,
       StatusBar,
     },
     created: function () {
-    this.initData()
-  },
-  methods: {
-    initData: function () {
-      var mb = MessageBridge.getInstance();
-      var vs = [{ key: "/topic/windturbine", action: this.windturbineMessage }];
-      mb.register(vs);
+      this.initData()
     },
-    windturbineMessage(msg) {
-      var json = JSON.parse(msg);
-      this.$store.commit('windturbinelist', json)
+    methods: {
+      initData: function () {
+        var mb = MessageBridge.getInstance();
+        var windturbine = [{ key: "/topic/windturbine", action: this.windturbineMessage }];
+        var popup = [{ key: "/topic/fault-popup", action: this.faultMessage }];
+        var suggestion = [{ key: "/topic/suggestion", action: this.suggestion }];
+        var title = [{ key: "/topic/title-info", action: this.titleInfos }];
+        mb.register(title);
+        mb.register(windturbine);
+        mb.register(popup);
+        mb.register(suggestion);
+      },
+      windturbineMessage(msg) {
+        var json = JSON.parse(msg);
+        this.$store.commit('windturbinelist', json)
+      },
+      faultMessage(msg){
+        var json = JSON.parse(msg);
+        this.$store.commit('warning', json)
+      },
+      suggestion(msg){
+        var json = JSON.parse(msg);
+        this.$store.commit('suggestion', json)
+      },
+      titleInfos(msg){
+        var json = JSON.parse(msg);
+        this.$store.commit('titleInfo', json)
+      },
     },
-  },
   }
 </script>
 <style>
-@import "../src/assets/styles/main.css";
+  @import "../src/assets/styles/main.css";
+
   body {
-  /* 设置内容不可选中 */
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
+    /* 设置内容不可选中 */
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+
   /* .app{
     background-color: #000000;
   } */
-  .statusBar{
+  .statusBar {
     width: 100%;
     position: absolute;
     bottom: 0;
     left: 0;
   }
-  .titleBar{
+
+  .titleBar {
     width: 100%;
     position: relative;
     top: 0;

src/components/BasicInformationDetail.vue

@@ -158,16 +158,13 @@
     },
     mounted() {
       this.getDetial()
-
+      this.getHealthDate()
+      this.getWarning()
     },
     beforeUpdate() {
-      this.getHealthDate()
       
-      this.getWarning()
     },
-    // onShow(){
-    //   console.log(1111)
-    // },
+
     data() {
       return {
         // warnList: [],

src/components/areaCard.vue

@@ -51,20 +51,6 @@
     import BackgroundData from 'utils/BackgroundData'
     // import ProblemMatrixCard from "./problem/ProblemMatrixCard.vue";
     import MatrixBlock from "./matrixBlock.vue";
-    /**
-     * todo 拖动
-     * todo 控制区
-     *
-     * 动态值:
-     * 1. gy-card-area-label中的 height,margin-top
-     * 2. gy-card-circle-yellow中的颜色
-     * 3. gy-card-content-25 中的高度
-     *
-     * 使用事例:
-     * <gy-card title="校验区" area-style="check" circle-style="green" content-style="44">
-     * <div>动态内容</div>
-     * </gy-card>
-     */
     export default {
         name: 'gy-card',
         components: {
@@ -457,7 +443,7 @@
     }
 
     .matrix {
-        margin-left: 32px;
+        margin-left: 20px;
         margin-right: 10px;
         padding-bottom: 20px;
         border-bottom: 1px solid rgba(31, 31, 31, 1);
@@ -468,6 +454,7 @@
         color: #BFBFBF;
         margin-top: 20px;
         margin-bottom: 20px;
+        margin-left: 12px;
     }
 
     .gy-card-header {

src/components/check/areaCard.vue

@@ -18,7 +18,7 @@
     <div class="body">
         <img class="logo" src="../../assets/img/logo.png" alt="">
         <div class="title">{{ title }}</div>
-        <div style="margin-top: 50px; height: 80%;">
+        <div style="margin-top: 50px; margin-left: 20px; height: 80%;">
             <el-scrollbar>
                 <div class="scoll" style="margin-left: 5px;">
                     <MatrixBlock @on-click="handleClick" :dataList="showList"></MatrixBlock>
@@ -107,7 +107,7 @@
         width: 100%;
         margin-left: 15px;
         margin-top: 10px;
-        height: 35vh;
+        height: 25vh;
     }
 
     .body .scoll {

src/components/check/checkArea.vue

@@ -1,7 +1,6 @@
-/* 问题区 */
 <template>
   <div class="problem">
-    <AreaCard title="校验区" height="33.5"></AreaCard>
+    <AreaCard title="校验区" height="25"></AreaCard>
   </div>
 </template>
 

src/components/control/areaCard.vue

@@ -22,8 +22,8 @@
         <div v-if="current===1" class="send" @click="handleSend">发送</div>
         <div class="success" v-if="showFlag&&current===0">指令发送成功</div>
     </div>
-    <WindturbineDetailPages v-model="dialogVisible" :showSvg="showSvg" @close="handleClose" :svgWeb="svgWeb" :stationName="stationName"
-        :windturbine="currentWindturbine"></WindturbineDetailPages>
+    <WindturbineDetailPages v-model="dialogVisible" :showSvg="showSvg" @close="handleClose" :svgWeb="svgWeb"
+        :stationName="stationName" :windturbine="currentWindturbine"></WindturbineDetailPages>
 </template>
 
 <script>
@@ -38,8 +38,8 @@
             WindturbineDetailPages
         },
         created: function () {
-            console.log(this.current);
             this.initData();
+            this.suggestion();
         },
         emits: ["parentRun"],
         props: {
@@ -72,7 +72,7 @@
                 svgWeb: '',
                 stationName: '',
                 // 定时器
-				timer: "",
+                timer: "",
                 controlErorCodes: [
                     "控制成功",
                     "控制命令发送失败",
@@ -91,42 +91,42 @@
                     "风机操作与风机状态不符",
                     "需要登录",
                 ],
-                boosterStation:{
-                    'MHS_SYZ':{
-                        name:'麻黄山升压站'
+                boosterStation: {
+                    'MHS_SYZ': {
+                        name: '麻黄山升压站'
                     },
-                    'NSS_SYZ':{
-                        name:'牛首山升压站'
+                    'NSS_SYZ': {
+                        name: '牛首山升压站'
                     },
-                    'QS_SYZ':{
-                        name:'青山升压站'
+                    'QS_SYZ': {
+                        name: '青山升压站'
                     },
-                    'QS3_SYZ':{
-                        name:'青山三期升压站'
+                    'QS3_SYZ': {
+                        name: '青山三期升压站'
                     },
-                    'SBQ_SYZ':{
-                        name:'石板泉升压站'
+                    'SBQ_SYZ': {
+                        name: '石板泉升压站'
                     },
-                    'XS_SYZ':{
-                        name:'香山升压站'
+                    'XS_SYZ': {
+                        name: '香山升压站'
                     },
-                    'DWK_SYZ':{
-                        name:'大武口升压站'
+                    'DWK_SYZ': {
+                        name: '大武口升压站'
                     },
-                    'PL_SYZ':{
-                        name:'平罗升压站'
+                    'PL_SYZ': {
+                        name: '平罗升压站'
                     },
-                    'PL2_SYZ':{
-                        name:'平罗二期升压站'
+                    'PL2_SYZ': {
+                        name: '平罗二期升压站'
                     },
-                    'XH_SYZ':{
-                        name:'宣和升压站'
+                    'XH_SYZ': {
+                        name: '宣和升压站'
                     },
-                    'MCH_SYZ':{
-                        name:'马场湖升压站'
+                    'MCH_SYZ': {
+                        name: '马场湖升压站'
                     },
-                    'HZJ_SYZ':{
-                        name:'海子井升压站'
+                    'HZJ_SYZ': {
+                        name: '海子井升压站'
                     },
                 }
             }
@@ -145,7 +145,7 @@
                 mb.register(vss);
             },
             suggestion(msg, headers) {
-                this.titleList = JSON.parse(msg)
+                this.titleList = msg?JSON.parse(msg):this.$store.state.suggestion
                 if (this.current === 0) {
                     let dateList = []
                     this.titleList.forEach(item => {
@@ -368,25 +368,26 @@
                         sendList = this.chooseList
                     }
                     this.showFlag = true
-                    bd.checkout(sendList);
-                    if(automatic){
-                        bd.windturbineControl(
-                        sendList,
-                        false,
-                        'automatic',
-                        this.controlSuccess,
-                        this.controlError
-                    );
-                    }else{
-                        bd.windturbineControl(
-                        sendList,
-                        false,
-                        '',
-                        this.controlSuccess,
-                        this.controlError
-                    );
+                    if (sendList.length > 0) {
+                        bd.checkout(sendList);
+                        if (automatic) {
+                            bd.windturbineControl(
+                                sendList,
+                                false,
+                                'automatic',
+                                this.controlSuccess,
+                                this.controlError
+                            );
+                        } else {
+                            bd.windturbineControl(
+                                sendList,
+                                false,
+                                '',
+                                this.controlSuccess,
+                                this.controlError
+                            );
+                        }
                     }
-                    
                 } else if (msg.type == "marking") {
                     // 标注
                     var vvs = this.getSelectedItems();
@@ -407,7 +408,7 @@
             controlSuccess(msg) {
                 var bd = BackgroundData.getInstance();
                 console.log(msg);
-                if (msg.data|| msg.data !== {}) {
+                if (msg.data || msg.data !== {}) {
                     var mss = '';     // 信息
                     var iserror = false;// 是否有控制错误的风机
                     for (var v in msg.data) {
@@ -474,9 +475,9 @@
                         this.titleList.forEach(item => {
                             if (item.windturbineId === val.windturbineId) {
                                 val.operateStyle = item.operateStyle
-                                if(item.operateStyle === "Start" &&item.status === 2 ){
+                                if (item.operateStyle === "Start" && val.status === 2) {
                                     this.startList.push(val)
-                                }else if(item.operateStyle === "Stop" &&item.status === 4 ){
+                                } else if (item.operateStyle === "Stop" && val.status === 4) {
                                     this.stopList.push(val)
                                 }
                             }
@@ -504,6 +505,25 @@
                     })
                 },
             },
+            "current": {
+                handler: function (json) {
+                    // this.current = json
+                    if (json === 0) {
+                        let dateList = []
+                        this.titleList.forEach(item => {
+                            item.operateStyle === 'Start' ? this.windturbinelist[item.windturbineId].controlType = 1 : this.windturbinelist[item.windturbineId].controlType = 2
+                            dateList.push(this.windturbinelist[item.windturbineId])
+                        })
+                        let mss = {}
+                        mss.type = 'send'
+                        this.timer = setTimeout(() => {
+                            this.menuClicked(mss, dateList, 'automatic')
+                            this.showFlag = false
+                            clearInterval(this.timer);
+                        }, 3000);
+                    }
+                }
+            }
         },
     }
 </script>
@@ -554,7 +574,7 @@
     }
 
     .matrix {
-        margin-left: 32px;
+        margin-left: 20px;
         margin-right: 10px;
         padding-bottom: 20px;
         border-bottom: 1px solid rgba(31, 31, 31, 1);
@@ -565,6 +585,7 @@
         color: #BFBFBF;
         margin-top: 20px;
         margin-bottom: 20px;
+        margin-left: 12px;
     }
 
     .send {

src/components/control/controlAllArea.vue

@@ -9,7 +9,7 @@
                     </el-option>
                 </el-select>
             </div>
-            <div style="margin-top: 20px; margin-left: 20px; height:85%;">
+            <div style="margin-top: 20px; margin-left: 35px; height:85%;">
                 <el-scrollbar>
                     <div class="scoll">
                         <div class="matrix" v-if="showList.length>0">
@@ -37,7 +37,14 @@
             WindturbineDetailPages,
             MatrixBlock,
         },
-        props: {},
+        props: {
+            current: {
+                type: Number,
+            },
+            datas: {
+                type: String,
+            },
+        },
         data() {
             return {
                 dataList: [],
@@ -115,8 +122,76 @@
         computed: {},
         created: function () {
             this.initData();
+            this.controls()
+            console.log(this.datas);
+
         },
         methods: {
+            controls() {
+                let json = this.$store.state.windturbinelist
+                this.dataList = []
+                this.showList = []
+                let arr = Object.keys(json).sort()
+                for (var id of arr) {
+                    var val = json[id];
+                    this.chooseList.forEach(item => {
+                        if (item.windturbineId === val.windturbineId) {
+                            val.active = true
+                        }
+                    })
+                    this.dataList.push(val)
+                    switch (Number(this.selectValue)) {
+                        case 0:
+                            if (val.status === 5 || val.status === 6 || val.status === 7 || val.lockValue > 0) {
+                                this.showList.push(val)
+                            }
+                            break;
+                        case 1:
+                            val.status === 5 ? this.showList.push(val) : ''
+                            break;
+                        case 2:
+                            val.status === 6 ? this.showList.push(val) : ''
+                            break;
+                        case 3:
+                            val.status === 7 ? this.showList.push(val) : ''
+                            break;
+                        case 4:
+                            val.lockValue > 0 ? this.showList.push(val) : ''
+                            break;
+                        case 5:
+                            val.windturbineId.substring(0, 2) === 'MG' ? this.showList.push(val) : ''
+                            break;
+                        case 6:
+                            val.windturbineId.substring(0, 2) === 'NG' ? this.showList.push(val) : ''
+                            break;
+                        case 7:
+                            val.windturbineId.substring(0, 2) === 'QG' ? this.showList.push(val) : ''
+                            break;
+                        case 8:
+                            val.windturbineId.substring(0, 2) === 'SG' ? this.showList.push(val) : ''
+                            break;
+                        case 9:
+                            val.windturbineId.substring(0, 2) === 'XG' ? this.showList.push(val) : ''
+                            break;
+
+                    }
+                    // if (val.lockValue > 0) {
+                    //     this.listedList.push(val)
+                    // }
+                }
+                console.log(this.showList);
+                let checkoutList = BackgroundData.getInstance().checkouts;
+                checkoutList.forEach(item => {
+                    let showIndex = null
+                    this.showList.forEach((param, index) => {
+                        if (item.windturbineId === param.windturbineId) {
+                            showIndex = index
+                        }
+                    })
+                    this.showList.splice(showIndex, 1);
+                })
+                console.log(this.showList);
+            },
             /* 右键菜单 */
             initData: function () {
                 var mb = MessageBridge.getInstance();
@@ -148,13 +223,13 @@
                     let windturbine = this.windturbinelist[arr[1]]
                     switch (arr[0]) {
                         case 'CONTROL_START':
-                        mss.controlType = '1'
+                            mss.controlType = '1'
                             break
                         case 'CONTROL_STOP':
-                        mss.controlType = '2'
+                            mss.controlType = '2'
                             break
                         case 'CONTROL_MAINTAIN':
-                        mss.controlType = '6'
+                            mss.controlType = '6'
                             break
                     }
                     mss.type = 'send'
@@ -362,7 +437,7 @@
                     this.chooseList.forEach(item => {
                         item.lockType = msg.value;
                     })
-                    bd.windturbineControl(this.chooseList, true,'',);
+                    bd.windturbineControl(this.chooseList, true, '',);
                 } else if (msg.type == "send") {
                     // 发送
                     let sendList = []
@@ -504,7 +579,6 @@
                 deep: true,
                 handler: function (json) {
                     this.windturbinelist = json
-                    var vs = {};
                     this.dataList = []
                     this.showList = []
                     let arr = Object.keys(json).sort()
@@ -582,7 +656,7 @@
         width: 100%;
         margin-left: 15px;
         margin-top: 10px;
-        height: 50vh;
+        height: 61vh;
     }
 
     .body .scoll {

src/components/control/controlArea.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="problem">
-    <AreaCard title="控制区" height="50" :current="current"></AreaCard>
+    <AreaCard title="控制区" height="60" :current="current"></AreaCard>
   </div>
 </template>
 

src/components/focus/PhotoelectricDetailPages.vue

@@ -1,7 +1,7 @@
 <template>
 	<el-dialog width="55%" @closed="closed()" :show-close="false" class="my-info-dialog">
 		<template #title>
-			<div class="showTitle" @click="initData()">
+			<div class="showTitle">
 				<img class="titleImg" src="../../assets/img/controlcenter/daraTrue.png" alt="">
 				<div class="titles">{{stationName}}</div>
 				<!-- <div class="icon">(麻黄山)</div> -->
@@ -15,8 +15,8 @@
 					<div class="unit">MW</div>
 				</div>
 				<div class="data">
-					<div class="name">{{data.AgcUp.name}}：</div>
-					<div class="num">{{data.AgcUp.value?data.AgcUp.value:''}}</div>
+					<div class="name">{{data.TheoryPower.name}}：</div>
+					<div class="num">{{data.TheoryPower.value?data.TheoryPower.value:''}}</div>
 					<div class="unit">MW</div>
 				</div>
 				<div class="data">
@@ -30,8 +30,8 @@
 					<div class="unit">MW</div>
 				</div>
 				<div class="data">
-					<div class="name">{{data.TheoryPower.name}}：</div>
-					<div class="num">{{data.TheoryPower.value?data.TheoryPower.value:''}}</div>
+					<div class="name">{{data.AgcUp.name}}：</div>
+					<div class="num">{{data.AgcUp.value?data.AgcUp.value:''}}</div>
 					<div class="unit">MW</div>
 				</div>
 				<div class="data">
@@ -127,14 +127,14 @@
 				//勿删，传递关闭方法
 			},
 			initData(PowerSet, ActualPower) {
-				this.chartData.units = ["(MW)", "(m/s)"];
+				// this.chartData.units = ["(MW)", "(MW)"];
 				this.chartData.value[0] = {
-					title: "有功设定限值",
+					title: "有功设定限值(MW)",
 					yAxisIndex: 0,
 					value: []
 				};
 				this.chartData.value[1] = {
-					title: "实发有功",
+					title: "实发有功(MW)",
 					yAxisIndex: 0,
 					value: []
 				}

src/components/focus/focusCard.vue

@@ -22,6 +22,7 @@
 	import BackgroundData from "utils/BackgroundData"
 	import { Photoelectric } from "utils/PhotoelectricDetailPages";
 	import PhotoelectricDetailPages from "./PhotoelectricDetailPages.vue"
+	import MessageBridge from 'utils/MessageBridge'
 	import axios from 'axios';
 	import dayjs from 'dayjs'
 	export default {
@@ -55,9 +56,38 @@
 			PhotoelectricDetailPages,
 		},
 		created() {
+			this.datacontrol();
 			this.initData();
 		},
 		methods: {
+			datacontrol(){
+				var mb = MessageBridge.getInstance();
+                var vss = [{ key: "/topic/voice-control", action: this.windturbineMessage }];
+                mb.register(vss);
+			},
+			windturbineMessage(msg) {
+				var bd = BackgroundData.getInstance();
+                let arr = []
+                if (msg === 'CLOSE') {
+                    arr.push(msg)
+                } else {
+                    arr = msg.split('-')
+                }
+                this.dialogVisible = false
+                this.showSvg = false
+                this.svgWeb = ''
+                console.log(arr);
+                if (arr[0] === 'OPEN_AGC') {
+                    let data = bd.Recommends
+					for(let v in data){
+						if(arr[1] === data[v].stationID){
+							this.sendMsg(data[v])
+						}
+					}
+                } else if (arr[0] === 'CLOSE') {
+                    this.dialogVisible = false
+                } 
+            },
 			closed() {
 				clearInterval(this.interval);
 			},
@@ -78,7 +108,7 @@
 					.then(msg => {
 						console.log(msg)
 						for (let v in msg.data) {
-							if (msg.data[v].doubleValue ? (msg.data[v].doubleValue > 0) : (msg.data[v].booleanValue)) {
+							if (msg.data[v].doubleValue ? (msg.data[v].doubleValue === 0) : (!msg.data[v].booleanValue)) {
 								bd.Recommends[v].isActive = true
 							}
 						}
@@ -104,7 +134,7 @@
 				that.dialogData.stationName = vl.stationName;
 			},
 			ajaxDetail(data, index) {
-				var thisKey = Photoelectric[this.arrKey[index]];
+				var thisKey = Photoelectric[index?this.arrKey[index] : data.values];
 				thisKey.forEach(item => {
 					if (item.value) {
 						var calc = item.calc ? item.calc : 1;

src/components/matrixBlock.vue

@@ -1,6 +1,6 @@
 <template>
-    <div style="display: flex; flex-direction: row; flex-wrap: wrap;margin-left: 10px;">
-        <div :class="item.active?'box-' + item.status:'unbox-' + item.status" v-for="(item, index) in dataList"
+    <div style="display: flex; flex-direction: row; flex-wrap: wrap;">
+        <div :class="item.active?'box-' + item.status:'unbox-' + item.status" v-for="(item, index) in showList"
             :key="index" @click="onSelectHandler(item)" @dblclick="sendMsg(item)" style="margin-right: 15px;">
             <div :class="item.active?'left-' + item.status:'unleft-' + item.status">
                 <div>{{ item.windturbineId.slice(0, 2) }}</div>
@@ -9,7 +9,17 @@
             <div :class="item.active?'right-' + item.status:'unright-' + item.status">
                 <div class="rightrow">{{ item.windSpeed.toFixed(2) }} m/s</div>
                 <div class="rightrow">{{ item.power.toFixed(2) }} kw</div>
-                <div class="rightrow">{{ (item.modelId.indexOf("105") >= 0)?(item.rollSpeed * 9.55).toFixed(2):item.rollSpeed.toFixed(2) }} rpm</div>
+                <div class="rightrow">{{ (item.modelId.indexOf("105") >= 0)?(item.rollSpeed *
+                    9.55).toFixed(2):item.rollSpeed.toFixed(2) }} rpm</div>
+            </div>
+            <div v-if="item.lockValue > 0">
+                <el-popover placement="bottom-start" :width="130" trigger="hover" class="popoverBack"
+                    :show-arrow="false">
+                    <template #reference>
+                        <img class="lock" src="../assets/img/type/lock.png" alt="">
+                    </template>
+                    <div>挂牌原因：{{item.locked}}</div>
+                </el-popover>
             </div>
         </div>
     </div>
@@ -30,16 +40,44 @@
                 },
             },
             area: String,
-
         },
         mounted() {
-            this.dataList.forEach(item => {
-                if (item.modelId.indexOf("105") >= 0) {
-                    item.rollSpeed *= 9.55;
-                }
-            })
+            this.dataDeal(this.dataList)
         },
         methods: {
+            dataDeal(dataList) {
+                let list = []
+                dataList&&dataList.forEach(item => {
+                    if (item.modelId.indexOf("105") >= 0) {
+                        item.rollSpeed *= 9.55;
+                    }
+                    switch (item.lockValue) {
+                        case 2:
+                            item.locked = '场内受累检修'
+                            break;
+                        case 3:
+                            item.locked = '场内受累故障'
+                            break;
+                        case 4:
+                            item.locked = '场外受累电网'
+                            break;
+                        case 5:
+                            item.locked = '场外受累天气'
+                            break;
+                        case 7:
+                            item.locked = '故障检修'
+                            break;
+                        case 8:
+                            item.locked = '检修'
+                            break;
+                        case 9:
+                            item.locked = '未知'
+                            break;
+                    }
+                    list.push(item)
+                })
+                this.showList = list
+            },
             onSelectHandler(values) {
                 if (this.area === 'problem') {
                     this.$emit('problem-click', values);
@@ -63,13 +101,22 @@
                 dialogVisible: false,
                 showSvg: false,
                 currentWindturbine: {},
+                showList:[]
             };
         },
     }
 </script>
 <style scoped>
+    .lock {
+        width: 10px;
+        height: 10px;
+        position: relative;
+        right: 6px;
+        top: -15px;
+    }
+
     .box-0 {
-        width: 125px;
+        width: 135px;
         height: 50px;
         color: #ffffff;
         border: 1px solid rgba(255, 255, 255, 1);
@@ -78,11 +125,12 @@
         flex-direction: row;
         align-items: center;
         margin-right: 5px;
-        margin-top: 5px;
+        margin-top: 10px;
+        box-shadow: 0px 0px 6px #ffffff;
     }
 
     .unbox-0 {
-        width: 125px;
+        width: 135px;
         height: 50px;
         color: #ffffff;
         border: 1px solid rgba(255, 255, 255, 1);
@@ -91,7 +139,7 @@
         flex-direction: row;
         align-items: center;
         margin-right: 5px;
-        margin-top: 5px;
+        margin-top: 10px;
     }
 
     .left-0 {
@@ -143,7 +191,7 @@
     }
 
     .box-1 {
-        width: 125px;
+        width: 135px;
         height: 50px;
         color: #ffffff;
         border: 1px solid rgba(197, 48, 200, 1);
@@ -152,11 +200,12 @@
         flex-direction: row;
         align-items: center;
         margin-right: 5px;
-        margin-top: 5px;
+        margin-top: 10px;
+        box-shadow: 0px 0px 6px #ef3af2;
     }
 
     .unbox-1 {
-        width: 125px;
+        width: 135px;
         height: 50px;
         color: #ffffff;
         border: 1px solid rgba(197, 48, 200, 1);
@@ -165,7 +214,7 @@
         flex-direction: row;
         align-items: center;
         margin-right: 5px;
-        margin-top: 5px;
+        margin-top: 10px;
     }
 
     .left-1 {
@@ -217,7 +266,7 @@
     }
 
     .box-2 {
-        width: 125px;
+        width: 135px;
         height: 50px;
         color: #ffffff;
         border: 1px solid rgba(05, 187, 76, 1);
@@ -226,11 +275,12 @@
         flex-direction: row;
         align-items: center;
         margin-right: 5px;
-        margin-top: 5px;
+        margin-top: 10px;
+        box-shadow: 0px 0px 6px #09e45e;
     }
 
     .unbox-2 {
-        width: 125px;
+        width: 135px;
         height: 50px;
         color: #ffffff;
         border: 1px solid rgba(05, 187, 76, 1);
@@ -239,7 +289,7 @@
         flex-direction: row;
         align-items: center;
         margin-right: 5px;
-        margin-top: 5px;
+        margin-top: 10px;
     }
 
     .left-2 {
@@ -291,7 +341,7 @@
     }
 
     .box-3 {
-        width: 125px;
+        width: 135px;
         height: 50px;
         color: #ffffff;
         border: 1px solid rgba(05, 187, 76, 1);
@@ -300,11 +350,12 @@
         flex-direction: row;
         align-items: center;
         margin-right: 5px;
-        margin-top: 5px;
+        margin-top: 10px;
+        box-shadow: 0px 0px 6px #09e45e;
     }
 
     .unbox-3 {
-        width: 125px;
+        width: 135px;
         height: 50px;
         color: #ffffff;
         border: 1px solid rgba(05, 187, 76, 1);
@@ -313,7 +364,7 @@
         flex-direction: row;
         align-items: center;
         margin-right: 5px;
-        margin-top: 5px;
+        margin-top: 10px;
     }
 
     .left-3 {
@@ -365,7 +416,7 @@
     }
 
     .box-4 {
-        width: 125px;
+        width: 135px;
         height: 50px;
         color: #ffffff;
         border: 1px solid rgba(75, 85, 174, 1);
@@ -374,11 +425,12 @@
         flex-direction: row;
         align-items: center;
         margin-right: 5px;
-        margin-top: 5px;
+        margin-top: 10px;
+        box-shadow: 0px 0px 6px #6876f2;
     }
 
     .unbox-4 {
-        width: 125px;
+        width: 135px;
         height: 50px;
         color: #ffffff;
         border: 1px solid rgba(75, 85, 174, 1);
@@ -387,7 +439,7 @@
         flex-direction: row;
         align-items: center;
         margin-right: 5px;
-        margin-top: 5px;
+        margin-top: 10px;
     }
 
     .left-4 {
@@ -439,20 +491,21 @@
     }
 
     .box-5 {
-        width: 125px;
-        height: 50px;
+        width: 133px;
+        height: 48px;
         color: #ffffff;
-        border: 1px solid rgba(186, 50, 55, 1);
+        border: 2px solid rgba(186, 50, 55, 1);
         background-color: rgba(186, 50, 55, .05);
         display: flex;
         flex-direction: row;
         align-items: center;
         margin-right: 5px;
-        margin-top: 5px;
+        margin-top: 10px;
+        box-shadow: 0px 0px 6px #ff1313;
     }
 
     .unbox-5 {
-        width: 125px;
+        width: 135px;
         height: 50px;
         color: #ffffff;
         border: 1px solid rgba(186, 50, 55, 1);
@@ -461,7 +514,7 @@
         flex-direction: row;
         align-items: center;
         margin-right: 5px;
-        margin-top: 5px;
+        margin-top: 10px;
     }
 
     .left-5 {
@@ -513,7 +566,7 @@
     }
 
     .box-6 {
-        width: 125px;
+        width: 135px;
         height: 50px;
         color: #ffffff;
         border: 1px solid rgba(225, 125, 36, 1);
@@ -522,11 +575,12 @@
         flex-direction: row;
         align-items: center;
         margin-right: 5px;
-        margin-top: 5px;
+        margin-top: 10px;
+        box-shadow: 0px 0px 6px #f28627;
     }
 
     .unbox-6 {
-        width: 125px;
+        width: 135px;
         height: 50px;
         color: #ffffff;
         border: 1px solid rgba(225, 125, 36, 1);
@@ -535,7 +589,7 @@
         flex-direction: row;
         align-items: center;
         margin-right: 5px;
-        margin-top: 5px;
+        margin-top: 10px;
     }
 
     .left-6 {
@@ -587,7 +641,7 @@
     }
 
     .box-7 {
-        width: 125px;
+        width: 135px;
         height: 50px;
         color: #ffffff;
         border: 1px solid rgba(96, 103, 105, 1);
@@ -596,11 +650,12 @@
         flex-direction: row;
         align-items: center;
         margin-right: 5px;
-        margin-top: 5px;
+        margin-top: 10px;
+        box-shadow: 0px 0px 6px #ffffff;
     }
 
     .unbox-7 {
-        width: 125px;
+        width: 135px;
         height: 50px;
         color: #ffffff;
         border: 1px solid rgba(96, 103, 105, 1);
@@ -609,7 +664,7 @@
         flex-direction: row;
         align-items: center;
         margin-right: 5px;
-        margin-top: 5px;
+        margin-top: 10px;
     }
 
     .left-7 {

src/components/modeControl/modeControl.vue

@@ -5,42 +5,50 @@
             <div :class="current===1?'recommend_on':'recommend'" @click="ChangeBar(1)">推荐</div>
             <div :class="current===2?'manual_on':'manual'" @click="ChangeBar(2)">手动</div>
         </div>
-        <div class="dataArea">
-            <div class="dataBlock">
-                <div class="dataName">风能利用率</div>
-                <div class="numerical">
-                    <div class="data">
-                        <div class="values">{{datas.windEnergyRate}}</div>
-                        <div class="unit">%</div>
-                    </div>
-                    <img v-if="winFlag === 1" class="images" src="../../assets/img/type/up.png" alt="">
-                    <img v-if="winFlag === 2" class="images" src="../../assets/img/type/down.png" alt="">
-                    <div v-if="winFlag === 0" class="images_none"></div>
+        <div style="display: flex;flex-direction: row;z-index: 2;">
+            <div class="dataShow">
+                <div class="number">
+                    <div class="dataName">健康指数</div>
+                    <div class="numbers">{{showDate.healthIndex}}</div>
                 </div>
-            </div>
-            <div class="dataBlock">
-                <div class="dataName">曲线跟随率</div>
-                <div class="numerical">
-                    <div class="data">
-                        <div class="values">{{datas.curveFollowingRate}}</div>
-                        <div class="unit">%</div>
-                    </div>
-                    <img v-if="curveFlag === 1" class="images" src="../../assets/img/type/up.png" alt="">
-                    <img v-if="curveFlag === 2" class="images" src="../../assets/img/type/down.png" alt="">
-                    <div v-if="curveFlag === 0" class="images_none"></div>
+                <div class="progress">
+                    <div class="progressNum" :style="healthStyle"></div>
+                </div>
+                <div class="number">
+                    <div class="dataName">资源指数</div>
+                    <div class="numbers">{{showDate.resourceIndex}}</div>
+                </div>
+                <div class="progress">
+                    <div class="progressNum" :style="resourceStyle"></div>
                 </div>
+                <!-- <div class="wind">
+                    <div class="windNum">88%</div>
+                    <div class="windTitle">风能利用率</div>
+                </div> -->
             </div>
-            <div class="dataBlock">
-                <div class="dataName">场用电率</div>
-                <div class="numerical">
-                    <div class="data">
-                        <div class="values">{{datas.fieldElectricityRate}}</div>
-                        <div class="unit">%</div>
-                    </div>
-                    <img v-if="fieldFlag === 1" class="images" src="../../assets/img/type/up.png" alt="">
-                    <img v-if="fieldFlag === 2" class="images" src="../../assets/img/type/down.png" alt="">
-                    <div v-if="fieldFlag === 0" class="images_none"></div>
+            <div id="mainEcharts" class="echarts"></div>
+            <div class="dataShows">
+                <div class="number">
+                    <div class="numbers-right">88%</div>
+                    <div class="dataName-right">{{showDate.windEnergyRate}}%</div>
+                </div>
+                <div class="progress-right">
+                    <div class="progressNum-right" :style="windStyle"></div>
+                </div>
+                
+
+                <div class="number">
+                    <div class="numbers-right">{{showDate.curveFollowingRate}}%</div>
+                    <div class="dataName-right">曲线跟随率</div>
                 </div>
+                <div class="progress-right">
+                    <div class="progressNum-right" :style="curveStyle"></div>
+                </div>
+                
+                <!-- <div class="follow">
+                    <div class="followNum">88%</div>
+                    <div class="followTitle">曲线跟随率</div>
+                </div> -->
             </div>
         </div>
     </div>
@@ -48,6 +56,8 @@
 <script>
     import BackgroundData from 'utils/BackgroundData'
     import api from "api/index";
+    import MessageBridge from 'utils/MessageBridge'
+    import * as echarts from "echarts";
     export default {
         props: {
             current: {
@@ -58,39 +68,232 @@
             return {
                 current: 1,
                 datas: {},
+                list: {},
+                showDate:{},
                 winFlag: 0,
                 curveFlag: 0,
                 fieldFlag: 0,
+                healthWidth: 0,
+                resourceWidth: 0,
+                windWidth: 0,
+                curveWidth: 0,
             };
         },
         created() {
+            this.initData();
             this.getData(),
-            this.refreshTimer = setInterval(this.getData, 20000);
+                this.refreshTimer = setInterval(this.getData, 20000);
+        },
+        computed: {
+            healthStyle() {
+                return `width: ${this.healthWidth}%;`
+            },
+            resourceStyle() {
+                return `width: ${this.resourceWidth}%;`
+            },
+            windStyle() {
+                return `width: ${this.windWidth}%;`
+            },
+            curveStyle() {
+                return `width: ${this.curveWidth}%;`
+            },
         },
         mounted() {
             this.current = this.$props.current
-            console.log(this.current);
+            this.$nextTick(() => {
+                if (document.getElementById('mainEcharts')) {
+                    this.getEcharts()
+                }
+            });
         },
         methods: {
+            initData() {
+                var mb = MessageBridge.getInstance();
+                var vss = [{ key: "/topic/voice-control", action: this.windturbineMessage }];
+                var vs = [{ key: "/topic/title-info", action: this.getEcharts }];
+                mb.register(vs);
+                mb.register(vss);
+            },
+            windturbineMessage(msg) {
+                let arr = []
+                if (msg === 'CLOSE') {
+                    arr.push(msg)
+                } else {
+                    arr = msg.split('-')
+                }
+                this.dialogVisible = false
+                this.showSvg = false
+                this.svgWeb = ''
+                console.log(arr);
+                if (arr[0] === 'OPEN_PAGE_MANUAL') {
+                    this.ChangeBar(2)
+                } else if (arr[0] === 'OPEN_PAGE_AUTOMATIC') {
+                    this.ChangeBar(0)
+                } else if (arr[0] === 'OPEN_PAGE_RECOMMENDATION') {
+                    this.ChangeBar(1)
+                }
+            },
+            getEcharts(msg) {
+                let data = msg ? JSON.parse(msg) : this.$store.state.titleInfo
+                if (Object.keys(data).length>0) {
+                    data.healthIndex = Number(data.healthIndex).toFixed(2)
+                    data.resourceIndex = Number(data.resourceIndex).toFixed(2)
+                    data.realTimePower = data.realTimePower.toFixed(2)
+                    data.theoreticalPower = data.theoreticalPower.toFixed(2)
+                    data.agcPowerSet = data.agcPowerSet.toFixed(2)
+                    data.windEnergyRate = data.windEnergyRate.toFixed(2)
+                    data.curveFollowingRate = data.curveFollowingRate.toFixed(2)
+                }
+                var chartDom = document.getElementById('mainEcharts');
+                var myChart = echarts.init(chartDom, '#000000');
+                var option;
+                option = {
+                    series: [{
+                        type: 'gauge',
+                        max: 600,
+                        anchor: {
+                            show: true,
+                            showAbove: true,
+                            size: 9,
+                            width: 5,
+                            itemStyle: {
+                                color: '#FAC858'
+                            }
+                        },
+                        pointer: {
+                            icon: '',
+                            width: 3,
+                            length: '80%',
+                            offsetCenter: [0, '8%']
+                        },
+
+                        progress: {
+                            show: true,
+                            overlap: true,
+                            roundCap: true
+                        },
+                        axisLine: {
+                            lineStyle: {//仪表盘轴线相关配置。
+                                width: 2,
+                                color: [[1, '#8c929d']]
+                            }
+                        },
+                        axisLabel: {
+                            // textStyle: {//数字刻度样式
+                            //     color: '#000000',
+                            //     fontSize: 12,
+                            // }
+                        },
+                        splitLine: {//分隔线样式相关
+                            length: 0,//分割线的长度
+                            lineStyle: {
+                                width: 1,
+                                color: '#000000'
+                            }
+                        },
+                        data: [{
+                            value: 21,
+                            name: '实际功率',
+                            itemStyle: {
+                                color: 'rgba(75, 85, 174, 1)'
+                            },
+                            title: {
+                                color: '#999999',
+                                offsetCenter: ['-60%', '80%']
+                            },
+                            detail: {
+                                width: 45,
+                                height: 12,
+                                fontSize: 18,
+                                offsetCenter: ['-60%', '95%']
+                            }
+                        },
+                        {
+                            value: 24,
+                            name: '理论功率',
+                            itemStyle: {
+                                color: 'rgba(05, 187, 76, 1)'
+                            },
+                            title: {
+                                color: '#999999',
+                                offsetCenter: ['0%', '80%']
+                            },
+                            detail: {
+                                width: 45,
+                                height: 12,
+                                fontSize: 18,
+                                offsetCenter: ['0%', '95%']
+                            }
+                        },
+                        {
+                            value: 73,
+                            name: 'AGC有功设定',
+                            itemStyle: {
+                                color: 'rgba(186, 50, 55, 1)'
+                            },
+                            title: {
+                                color: '#999999',
+                                offsetCenter: ['60%', '80%']
+                            },
+                            detail: {
+                                width: 45,
+                                height: 12,
+                                fontSize: 18,
+                                offsetCenter: ['60%', '95%']
+                            }
+                        }
+                        ],
+                        title: {
+                            fontSize: 12
+                        },
+                        detail: {
+                            width: 20,
+                            height: 7,
+                            fontSize: 12,
+                            color: '#fff',
+                            backgroundColor: 'auto',
+                            borderRadius: 3,
+                            formatter: ''
+                        }
+                    }]
+                };
+                option.series[0].data[0].value = Number(data.realTimePower);
+                option.series[0].data[1].value = Number(data.theoreticalPower);
+                option.series[0].data[2].value = Number(data.agcPowerSet);
+                this.healthWidth= (data.healthIndex/4000)*100
+                this.resourceWidth= (data.resourceIndex/4000)*100
+                this.windWidth= data.windEnergyRate
+                this.curveWidth= data.curveFollowingRate
+                this.showDate = data
+                myChart.setOption(option, true);
+            },
             getData() {
                 api.getOverview().then(res => {
                     if (res) {
                         let data = res.data
-                        this.datas.curveFollowingRate ?
-                            (this.datas.curveFollowingRate > data.curveFollowingRate) ?
-                                (this.curveFlag = 2)
-                                : (this.datas.curveFollowingRate === data.curveFollowingRate) ? (this.curveFlag = 0) : (this.curveFlag = 1)
-                            : (this.curveFlag = 0)
-                        this.datas.fieldElectricityRate ?
-                            (this.datas.fieldElectricityRate > data.fieldElectricityRate) ?
-                                (this.fieldFlag = 2)
-                                : (this.datas.fieldElectricityRate === data.fieldElectricityRate) ? (this.fieldFlag = 0) : (this.fieldFlag = 1)
-                            : (this.fieldFlag = 0)
-                        this.datas.windEnergyRate ?
-                            (this.datas.windEnergyRate > data.windEnergyRate) ?
-                                (this.winFlag = 2)
-                                : (this.datas.windEnergyRate === data.windEnergyRate) ? (this.winFlag = 0) : (this.winFlag = 1)
-                            : (this.winFlag = 0)
+                        if (this.datas.curveFollowingRate > data.curveFollowingRate) {
+                            this.curveFlag = 2
+                        } else if (this.datas.curveFollowingRate < data.curveFollowingRate) {
+                            this.curveFlag = 1
+                        } else {
+                            this.curveFlag = 0
+                        }
+
+                        if (this.datas.fieldElectricityRate > data.fieldElectricityRate) {
+                            this.fieldFlag = 2
+                        } else if (this.datas.fieldElectricityRate < data.fieldElectricityRate) {
+                            this.fieldFlag = 1
+                        } else {
+                            this.fieldFlag = 0
+                        }
+
+                        if (this.datas.windEnergyRate > data.windEnergyRate) {
+                            this.winFlag = 2
+                        } else if (this.datas.windEnergyRate < data.windEnergyRate) {
+                            this.winFlag = 1
+                        } else {
+                            this.winFlag = 0
+                        }
                         data.curveFollowingRate = data.curveFollowingRate.toFixed(2)
                         data.fieldElectricityRate = data.fieldElectricityRate.toFixed(2)
                         data.windEnergyRate = data.windEnergyRate.toFixed(2)
@@ -116,10 +319,10 @@
                         this.current = values
                         this.$emit('clicks', values);
                     } else if (values === 2 && this.current !== 2) {
-                        this.$router.push('/ManualPage?current=' + values)
+                        this.$router.push(`/ManualPage?current=${values}`)
                         // this.current = values
                     } else {
-                        this.$router.push('/?current=' + values)
+                        this.$router.push(`/?current=${values}`)
                     }
                 }
             },
@@ -132,13 +335,17 @@
 <style scoped>
     .body {
         width: 100%;
-        height: 18.5vh;
+        height: 28.5vh;
         /* background-color: #ffffff; */
         margin-left: 15px;
         margin-top: 20px;
         border-left: 1px solid #373737;
         border-right: 1px solid #373737;
         border-bottom: 1px solid #373737;
+        /* background-image: url('../../assets/img/type/background.png'); */
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: cover;
     }
 
     .control {
@@ -147,7 +354,10 @@
         align-items: center;
         font-size: 14px;
         color: #ffffff;
-        margin-right: 5px;
+        /* margin-right: 5px; */
+        position: absolute;
+        right: 10px;
+        z-index: 99;
     }
 
     .manual {
@@ -244,10 +454,23 @@
     }
 
     .dataName {
-        font-size: 16px;
-        color: #FFFFFF;
+        display: flex;
+        flex-direction: row-reverse;
+        font-size: 12px;
+        color: #999999;
+        /* margin-bottom: 6px; */
         margin-left: 26px;
-        margin-bottom: 6px;
+        /* margin-bottom: 20px; */
+    }
+
+    .dataName-right {
+        display: flex;
+        flex-direction: row;
+        font-size: 14px;
+        color: #999999;
+        /* margin-bottom: 6px; */
+        margin-right: 50px;
+        /* margin-bottom: 20px; */
     }
 
     .numerical {
@@ -289,4 +512,120 @@
         border-radius: 1px;
         margin-top: -3px;
     }
+
+    .dataShow {
+        display: flex;
+        flex-direction: column;
+        width: 200px;
+        position: absolute;
+        left: 1px;
+        top: 62%;
+        line-height: 35px;
+    }
+
+    .dataShows {
+        display: flex;
+        flex-direction: column;
+        width: 200px;
+        position: absolute;
+        right: -35px;
+        top: 62%;
+        line-height: 35px;
+    }
+
+    .number {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        font-size: 16px;
+        color: #ffffff;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .progress {
+        display: flex;
+        align-items: center;
+        margin-left: 20px;
+        width: 130px;
+        height: 10px;
+        border: 1px solid rgba(83, 92, 93, 0.5);
+        background-color: #000000;
+        margin-bottom: 20px;
+    }
+
+    .progress-right {
+        display: flex;
+        flex-direction: row-reverse;
+        align-items: center;
+        margin-left: 20px;
+        width: 130px;
+        height: 10px;
+        border: 1px solid rgba(83, 92, 93, 0.5);
+        background-color: #000000;
+        margin-bottom: 20px;
+    }
+
+    .progressNum {
+        /* width: 60%; */
+        height: 40%;
+        background-color: rgba(75, 85, 174, 1);
+        border-radius: 2px;
+    }
+
+    .progressNum-right {
+        /* width: 60%; */
+        height: 40%;
+        background-color: rgba(75, 85, 174, 1);
+        border-radius: 2px;
+    }
+
+    .echarts {
+        width: 400px;
+        height: 360px;
+        margin-top: -24px;
+        /* background-color: #000000; */
+        margin-left: 105px;
+    }
+
+    .wind {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-top: 20px;
+    }
+
+    .windNum {
+        font-size: 14px;
+        color: #ffffff;
+    }
+
+    .windTitle {
+        font-size: 18px;
+        color: #ffffff;
+    }
+
+    .follow {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-top: 20px;
+        margin-right: 20px;
+    }
+
+    .followNum {
+        font-size: 14px;
+        color: #ffffff;
+    }
+
+    .followTitle {
+        font-size: 18px;
+        color: #ffffff;
+    }
+    .numbers{
+        margin-right: 48px;
+    }
+    .numbers-right{
+        margin-left: 18px;
+    }
 </style>

src/components/problem/ProblemArea.vue

@@ -29,115 +29,6 @@
 
     },
     methods: {
-      /* 右键菜单 */
-      contextmenu() {
-        const { remote } = require("electron");
-        var that = this;
-        const menuTemplate = [
-          {
-            label: "标注",
-            click() {
-              that.menuClicked({ type: "marking" });
-            },
-          },
-          {
-            label: "挂牌",
-            submenu: [
-              {
-                label: "检修",
-                click() {
-                  that.menuClicked({ type: "lock", value: "CheckLock" });
-                },
-              },
-              {
-                label: "故障维修",
-                click() {
-                  that.menuClicked({ type: "lock", value: "FaultLock" });
-                },
-              },
-              {
-                label: "场内受累检修",
-                click() {
-                  that.menuClicked({ type: "lock", value: "StationCheckLock" });
-                },
-              },
-              {
-                label: "场内受累故障",
-                click() {
-                  that.menuClicked({ type: "lock", value: "StationFaulLock" });
-                },
-              },
-              {
-                label: "场外受累电网",
-                click() {
-                  that.menuClicked({ type: "lock", value: "StationPowerLineLock" });
-                },
-              },
-              {
-                label: "场外受累天气",
-                click() {
-                  that.menuClicked({ type: "lock", value: "StationWeatherLock" });
-                },
-              },
-            ],
-          },
-          {
-            label: "取消挂牌",
-            click() {
-              that.menuClicked({ type: "lock", value: "UnLock" });
-            },
-          },
-        ];
-        const menu = remote.Menu.buildFromTemplate(menuTemplate);
-
-        menu.popup(remote.getCurrentWindow());
-      },
-
-      menuClicked(msg) {
-        var bd = BackgroundData.getInstance();
-        if (!bd.LoginUser) {
-          this.$notify({
-            title: "请登录",
-            message: "控制风机需要先登录！",
-            type: "warning",
-            position: "bottom-right",
-            offset: 60,
-            duration: 3000,
-          });
-          return;
-        }
-        if (msg.type == "lock") {
-          // 挂牌
-          var los = this.getSelectedItems();
-          for (var id in los) {
-            los[id].lockType = msg.value;
-          }
-          bd.windturbineControl(los, true,'',);
-        } else if (msg.type == "marking") {
-          // 标注
-          var vs = this.getSelectedItems();
-          bd.marking(vs);
-        }
-        this.clearSelected();
-      },
-
-      /* 获取选中的项目 */
-      getSelectedItems() {
-        var ls = new Array();
-        this.$refs.malfunction.outputSelectedItems(ls);
-        this.$refs.maintain.outputSelectedItems(ls);
-        this.$refs.offline.outputSelectedItems(ls);
-        this.$refs.lock.outputSelectedItems(ls);
-        return ls;
-      },
-
-      /* 清除所有选择 */
-      clearSelected() {
-        this.$refs.malfunction.clearSelected();
-        this.$refs.maintain.clearSelected();
-        this.$refs.offline.clearSelected();
-        this.$refs.lock.clearSelected();
-      },
     },
   };
 </script>

src/components/problem/areaCard.vue

@@ -53,20 +53,7 @@
     import BackgroundData from 'utils/BackgroundData'
     import WindturbineDetailPages from "../WindturbineDetailPages.vue";
     import MatrixBlock from "../matrixBlock.vue";
-    /**
-     * todo 拖动
-     * todo 控制区
-     *
-     * 动态值:
-     * 1. gy-card-area-label中的 height,margin-top
-     * 2. gy-card-circle-yellow中的颜色
-     * 3. gy-card-content-25 中的高度
-     *
-     * 使用事例:
-     * <gy-card title="校验区" area-style="check" circle-style="green" content-style="44">
-     * <div>动态内容</div>
-     * </gy-card>
-     */
+
     export default {
         name: 'gy-card',
         components: {
@@ -190,7 +177,40 @@
                 }
             }
         },
+        created() {
+            this.deal()
+        },
         methods: {
+            deal() {
+                let json = this.$store.state.windturbinelist
+                this.faultList = []
+                this.maintainList = []
+                this.offlineList = []
+                this.listedList = []
+                let arr = Object.keys(json).sort()
+                for (var id of arr) {
+                    var val = json[id];
+                    this.chooseList.forEach(item => {
+                        if (item.windturbineId === val.windturbineId) {
+                            val.active = true
+                        }
+                    })
+                    switch (val.status) {
+                        case 5:
+                            this.faultList.push(val)
+                            break;
+                        case 6:
+                            this.maintainList.push(val)
+                            break;
+                        case 7:
+                            this.offlineList.push(val)
+                            break;
+                    }
+                    if (val.lockValue > 0) {
+                        this.listedList.push(val)
+                    }
+                }
+            },
             handleClick(values) {
                 if (values.active) {
                     let showIndex = null
@@ -482,7 +502,7 @@
     }
 
     .matrix {
-        margin-left: 32px;
+        margin-left: 20px;
         margin-right: 10px;
         padding-bottom: 20px;
         border-bottom: 1px solid rgba(31, 31, 31, 1);
@@ -493,286 +513,8 @@
         color: #BFBFBF;
         margin-top: 20px;
         margin-bottom: 20px;
+        margin-left: 12px;
     }
 
-    .gy-card-header {
-        position: relative;
-        height: 40px;
-        background-color: #292929;
-        color: white;
-        box-sizing: border-box;
-    }
-
-    .gy-card-content-89 {
-        position: relative;
-        height: calc(89vh - 50px);
-        background-color: #000000;
-        color: white;
-        box-sizing: border-box;
-        border-radius: 7px;
-    }
-
-    .gy-card-content-44 {
-        position: relative;
-        height: calc(44vh - 50px);
-        background-color: #000000;
-        color: white;
-        box-sizing: border-box;
-        border-radius: 7px;
-    }
-
-    .gy-card-content-37 {
-        position: relative;
-        height: calc(37vh - 50px);
-        background-color: #000000;
-        color: white;
-        box-sizing: border-box;
-        border-radius: 7px;
-    }
-
-    .gy-card-content-25 {
-        position: relative;
-        height: calc(25vh - 50px);
-        background-color: #000000;
-        color: white;
-        box-sizing: border-box;
-        border-radius: 7px;
-    }
-
-    .gy-card-circle {
-        position: relative;
-        top: 7px;
-        display: inline-block;
-        width: 7px;
-        height: 7px;
-        -moz-border-radius: 50%;
-        -webkit-border-radius: 50%;
-        border-radius: 50%;
-    }
-
-    .gy-card-circle-green {
-        background-color: #008000;
-    }
-
-    .gy-card-circle-yellow {
-        background-color: #ffff00;
-    }
-
-    .gy-card-title {
-        position: relative;
-        top: 10px;
-        left: 10px;
-    }
-
-    .gy-card-decoration01 {
-        position: absolute;
-        right: 80px;
-    }
-
-    .gy-card-decoration02 {
-        position: absolute;
-        top: 20px;
-        right: 20px;
-    }
-
-    .gy-card-area-problem {
-        position: relative;
-        height: 89vh;
-        background-color: #292929;
-        border-radius: 7px;
-        margin: 0px;
-        padding-top: 0;
-        padding-left: 10px;
-        padding-right: 10px;
-        padding-bottom: 10px;
-        box-sizing: border-box;
-    }
-
-    .gy-card-area-alarm {
-        position: relative;
-        height: 25vh;
-        margin-top: 10px;
-        background-color: #292929;
-        border-radius: 7px;
-        padding-left: 10px;
-        padding-right: 10px;
-        padding-bottom: 10px;
-        box-sizing: border-box;
-    }
-
-    .gy-card-area-check {
-        position: relative;
-        height: 44vh;
-        background-color: #292929;
-        border-radius: 7px;
-        margin-top: 10px;
-        padding-top: 0;
-        padding-left: 10px;
-        padding-right: 10px;
-        padding-bottom: 10px;
-        box-sizing: border-box;
-    }
-
-    .gy-card-area-control {
-        position: relative;
-        width: 100%;
-        height: 44vh;
-        background-color: #292929;
-        border-radius: 7px;
-        margin: 0px;
-        padding-top: 0;
-        padding-left: 10px;
-        padding-right: 10px;
-        padding-bottom: 10px;
-        box-sizing: border-box;
-    }
-
-    .gy-card-area-label {
-        position: relative;
-        height: 25vh;
-        margin-top: 10px;
-        background-color: #292929;
-        border-radius: 7px;
-        padding-left: 10px;
-        padding-right: 10px;
-        padding-bottom: 10px;
-        box-sizing: border-box;
-    }
-
-    .gy-card-area-recommended {
-        position: relative;
-        height: 37vh;
-        background-color: #292929;
-        border-radius: 7px;
-        padding-left: 10px;
-        padding-right: 10px;
-        padding-bottom: 10px;
-        box-sizing: border-box;
-    }
-
-    .gy-card-header-hover {
-        position: relative;
-        height: 40px;
-        background-color: #292929;
-        color: white;
-        box-sizing: border-box;
-    }
-
-    .gy-card-area-problem:hover {
-        position: relative;
-        height: 89vh;
-        background-color: #292929;
-        border-radius: 7px;
-        margin: 0px;
-        padding-top: 0;
-        padding-left: 10px;
-        padding-right: 10px;
-        padding-bottom: 10px;
-        box-sizing: border-box;
-    }
-
-    .gy-card-area-alarm:hover {
-        position: relative;
-        height: 25vh;
-        margin-top: 10px;
-        background-color: #292929;
-        border-radius: 7px;
-        padding-left: 10px;
-        padding-right: 10px;
-        padding-bottom: 10px;
-        box-sizing: border-box;
-    }
-
-    .gy-card-area-label:hover {
-        position: relative;
-        height: 25vh;
-        margin-top: 10px;
-        background-color: #292929;
-        border-radius: 7px;
-        padding-left: 10px;
-        padding-right: 10px;
-        padding-bottom: 10px;
-        box-sizing: border-box;
-    }
-
-    .gy-card-area-recommended:hover {
-        position: relative;
-        height: 37vh;
-        background-color: #292929;
-        border-radius: 7px;
-        padding-left: 10px;
-        padding-right: 10px;
-        padding-bottom: 10px;
-        box-sizing: border-box;
-    }
-
-
-    .gy-card-area-big {
-        position: fixed;
-        top: 0px;
-        left: 0px;
-        width: 100vw;
-        height: 100vh;
-        background-color: #292929;
-        border-radius: 7px;
-        margin: 0px;
-        padding-top: 0;
-        padding-left: 10px;
-        padding-right: 10px;
-        padding-bottom: 10px;
-        box-sizing: border-box;
-        z-index: 900;
-    }
-
-    .gy-card-content-big {
-        position: relative;
-        height: calc(100vh - 50px);
-        background-color: #000000;
-        color: white;
-        box-sizing: border-box;
-        border-radius: 7px;
-    }
-
-    .el-scrollbar__wrap {
-        overflow: scroll;
-        width: 110%;
-        height: 120%;
-    }
-
-    ::-webkit-scrollbar {
-        width: 0;
-        height: 0;
-    }
-
-    .scroll {
-        color: #ffffff;
-        min-height: 300px;
-        height: 400px;
-    }
-
-
-    .content {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 80px;
-        color: #ffffff;
-        height: 25px;
-        border: 1px solid blue;
-        margin-right: 10px;
-        margin-bottom: 10px;
-    }
-
-    .content_on {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 80px;
-        color: #ffffff;
-        height: 25px;
-        border: 1px solid blue;
-        margin-right: 10px;
-        margin-bottom: 10px;
-        background-color: chartreuse;
-    }
+    
 </style>

src/components/warning/warningArea.vue

@@ -2,7 +2,7 @@
     <div class="body">
         <img class="logo" src="../../assets/img/logo.png" alt="">
         <div class="title">告警区</div>
-        <div style="margin-top: 50px; margin-left: 10px; height: 29vh;">
+        <div style="margin-top: 50px; margin-left: 10px; height: 19vh;">
             <el-scrollbar>
                 <div class="scoll" style="margin-left: 5px;">
                     <WarningCard></WarningCard>
@@ -25,7 +25,7 @@
         width: 100%;
         margin-left: 15px;
         margin-top: 10px;
-        height: 35vh
+        height: 25vh
     }
 
     .body .scoll {

src/components/warning/warningCard.vue

@@ -8,7 +8,7 @@
           fontSize: '14px',
           'border-bottom': 'solid 1px black',
         }" :cell-style="{
-          background: '#1e1e1e',
+          background: 'rgb(30,30,30)',
           color: 'rgb(220,220,220)',
           padding: '3px',
           fontSize: '12px',
@@ -27,8 +27,8 @@
 			</el-table-column>
 		</el-table>
 	</div>
-	<WindturbineDetailPages v-model="dialogVisible" :windturbine="currentWindturbine" :showSvg="showSvg" :stationName="stationName"
-		:svgWeb="svgWeb" @close="close"></WindturbineDetailPages>
+	<WindturbineDetailPages v-model="dialogVisible" :windturbine="currentWindturbine" :showSvg="showSvg"
+		:stationName="stationName" :svgWeb="svgWeb" @close="close"></WindturbineDetailPages>
 </template>
 
 <script>
@@ -45,7 +45,8 @@
 			// Sbdl,
 		},
 		created: function () {
-			this.initData();
+			this.initData()
+			this.faultMessage();
 		},
 		props: {},
 		data() {
@@ -67,24 +68,26 @@
 				}];
 				mb.register(vs);
 			},
-			faultMessage(msg) {
-				var val = JSON.parse(msg);
-				var sleected = {};
-				this.values.forEach((it) => {
-					if (it.isSelected) {
-						sleected[it.id] = 0;
-					}
-				});
-				this.values = new Array();
-				for (var v in val) {
-					var vl = val[v];
-					if (vl.stationId != "QS_FDC" && vl.category1 == "FJ") {
-						vl.alertText = vl.windturbineName + "-" + vl.alertText;
-					}
-					if (sleected[vl.id] == 0 && BackgroundData.getInstance().LoginUser) {
-						vl.isSelected = true;
+			faultMessage(json) {
+				let val = json?JSON.parse(json):this.$store.state.warning
+				if (Object.keys(val).length>0) {
+					var sleected = {};
+					this.values.forEach((it) => {
+						if (it.isSelected) {
+							sleected[it.id] = 0;
+						}
+					});
+					this.values = new Array();
+					for (var v in val) {
+						var vl = val[v];
+						if (vl.stationId != "QS_FDC" && vl.category1 == "FJ") {
+							vl.alertText = vl.windturbineName + "-" + vl.alertText;
+						}
+						if (sleected[vl.id] == 0 && BackgroundData.getInstance().LoginUser) {
+							vl.isSelected = true;
+						}
+						this.values.push(vl);
 					}
-					this.values.push(vl);
 				}
 			},
 			/* 行双击 */

src/store/index.js

@@ -5,7 +5,10 @@ const store = createStore({
      // 值的存储  获取: this.$store.state.xxxx
      state() {
           return {
-               windturbinelist: Object  // 服务器推送的风机详细信息
+               windturbinelist: Object,  // 服务器推送的风机详细信息
+               warning: Object,
+               suggestion: [],
+               titleInfo: Object,
           }
      },
 
@@ -13,13 +16,22 @@ const store = createStore({
      getters: {
           windturbinelist(state) {
                return state.windturbinelist;
-          }
+          },
      },
 
      // 数据更新 使用: this.$store.commit('函数名','val')
      mutations: {
           windturbinelist(state, data) {
                state.windturbinelist = data;
+          },
+          warning(state, data) {
+               state.warning = data;
+          },
+          suggestion(state, data) {
+               state.suggestion = data;
+          },
+          titleInfo(state, data) {
+               state.titleInfo = data;
           }
      }
 })

src/utils/BackgroundData.js

@@ -34,55 +34,65 @@ export default class BackgroundData {
             content: "通讯中断",
             createTime: this.formatDate(new Date("2021-04-15 8:17:59"), 'YY-MM-DD hh:mm'),
             isActive: true,
+            stationID: 'DWK_AGC',
+            values:'DWK'
         },
         "NSSFCJSFW.NX_GD_NSSF_XX_XX_XXX_XXX_CI0263": {
             stationName: "牛首山风电场",
             content: "限电",
             createTime: new Date(),
             isActive: false,
+            stationID: 'NSS_AGC',
+            values:'NSSFCJSFW.NX_GD_NSSF_XX_XX_XXX_XXX_CI0263'
         },
         "QSFCJSFW.NX_GD_QSF_XX_XX_XXX_XXX_CI0263": {
             stationName: "青山风电场",
             content: "限电",
             createTime: new Date(),
             isActive: false,
+            stationID: 'QS_AGC',
+            values:'QSFCJSFW.NX_GD_QSF_XX_XX_XXX_XXX_CI0263'
         },
 
         "SBQFCJSFW.NX_GD_SBQF_XX_XX_XXX_XXX_CI0263": {
-            stationName: "石板泉一期",
+            stationName: "星能第六风电场",
             content: "限电",
             createTime: new Date(),
             isActive: false,
+            stationID: 'XNL_AGC',
+            values:'SBQFCJSFW.NX_GD_SBQF_XX_XX_XXX_XXX_CI0263'
         },
         "MHSFCJSFW.NX_GD_MHSF_XX_XX_XXX_XXX_CI0263": {
             stationName: "麻黄山风电场",
             content: "限电",
             createTime: new Date(),
             isActive: false,
+            stationID: 'MHS_AGC',
+            values:'MHSFCJSFW.NX_GD_MHSF_XX_XX_XXX_XXX_CI0263'
         },
         "XSFCJSFW.NX_GD_XSF_XX_XX_XXX_XXX_CI0263": {
             stationName: "香山风电场",
             content: "限电",
             createTime: new Date(),
             isActive: false,
-        },
-        "SLAGC.NX_GD_QSF_DQ_P1_L1_001_DI0165": {
-            stationName: "青山三期",
-            content: "限电",
-            createTime: new Date(),
-            isActive: false,
+            stationID: 'XS_AGC',
+            values:'XSFCJSFW.NX_GD_XSF_XX_XX_XXX_XXX_CI0263'
         },
         "SBQFCJSFW.NX_GD_SBQF_XX_XX_XXX_XXX_CI026X": {
-            stationName: "石板泉二三四期",
+            stationName: "牛首山第五风电场",
             content: "限电",
             createTime: new Date(),
             isActive: false,
+            stationID: 'NW_AGC',
+            values:'SBQFCJSFW.NX_GD_SBQF_XX_XX_XXX_XXX_CI026X'
         },
         "SLAGC.NX_GD_QSF_DQ_P1_L1_001_DI0165": {
             stationName: "宋堡第六风电场",
             content: "限电",
             createTime: new Date(),
             isActive: false,
+            stationID: 'QS3_AGC',
+            values:'SLAGC.NX_GD_QSF_DQ_P1_L1_001_DI0165'
         },
     };
     /* 隐患数据 */

src/views/CenterPage.vue

@@ -5,10 +5,10 @@
 				<el-col :span="8" style="padding-left: 0px;">
 					<ProblemArea ref="problempg" :problems="problems" />
 				</el-col>
-				<el-col :span="8">
+				<el-col :span="8" style="padding-left: 5px;padding-right: 5px;">
 					<el-row>
 						<el-col :span="24">
-							<ControlArea :current="current"/>
+							<ControlArea  :current="current"/>
 						</el-col>
 					</el-row>
 					<el-row>
@@ -20,7 +20,7 @@
 				<el-col :span="8">
 					<el-row>
 						<el-col :span="23">
-							<ModeControl ref="control" :current="current" @clicks="handleClick"></ModeControl>
+							<ModeControl ref="modeControl" :current="current" @clicks="handleClick"></ModeControl>
 						</el-col>
 					</el-row>
 					<el-row>
@@ -34,6 +34,7 @@
 						</el-col>
 					</el-row>
 				</el-col>
+				
 			</el-row>
 			<!-- <WindturbineDetailPages v-model="dialogVisible"></WindturbineDetailPages> -->
 		</div>
@@ -71,7 +72,7 @@
 		mounted() {
 			const { current } = this.$route.query
 			this.current = current?Number(current):1
-			this.$refs.control.controls(this.current)
+			this.$refs.modeControl.controls(this.current)
 		},
 		methods: {
 			initData: function () {

src/views/ManualPage.vue

@@ -5,7 +5,7 @@
                 <el-col :span="16">
                     <el-row>
                         <el-col :span="24">
-                            <ControlAllArea />
+                            <ControlAllArea :datas="datas"/>
                         </el-col>
                     </el-row>
                     <el-row>
@@ -64,8 +64,8 @@
             };
         },
         mounted() {
-            const { current } = this.$route.query
-            this.current = Number(current)
+            const { current,datas } = this.$route.query
+            this.current = Number(current) 
         },
         methods: {
             initData: function () {

src/views/StatusBar.vue

@@ -6,7 +6,7 @@
         <span style="color: white; margin-left: 20px">系统时间：</span>
         <span style="color: white">{{ currentTime }}</span>
       </el-col>
-      <el-col :span="6" style="margin-top: 8px">
+      <!-- <el-col :span="6" style="margin-top: 8px">
         <el-popover placement="top-start" :width="580" trigger="hover" class="popoverBack" :show-arrow="false">
           <template #reference>
             <div class="status-list">
@@ -90,7 +90,7 @@
             </el-table>
           </el-scrollbar>
         </el-popover>
-      </el-col>
+      </el-col> -->
     </el-row>
   </div>
 </template>

src/views/TitleBar.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="title-bar" onselectstart="return false">
     <el-row>
-      <el-col :span="5">
+      <el-col :span="3">
         <img class="logo" src="../assets/img/main_window/logo.png" sytle="align-items" />
       </el-col>
       <el-col :span=".1">
@@ -36,15 +36,15 @@
           </el-dialog>
         </div>
       </el-col>
-      <el-col :span="16">
+      <el-col :span="19" style="margin-left: 20px;">
         <div class="titleinfoall">
           <div class="titleinfo">
             <ul>
               <li>
                 <!-- <TitleBarCard title="装机容量" unit="MW" :value="installedCapacity"></TitleBarCard> -->
-                <span class="showTitle">装机容量</span>
-                <span class="showvalue">{{titleInfo.installedCapacity}}</span>
-                <span class="showTitle">MW</span>
+                <span class="showTitle">日发电量</span>
+                <span class="showvalue">{{titleInfo.dailyPowerGeneration}}</span>
+                <span class="showTitle">万kW/h</span>
               </li>
             </ul>
           </div>
@@ -52,9 +52,9 @@
             <ul>
               <li>
                 <!-- <TitleBarCard title="实时功率" unit="MW" :value="totalPower"></TitleBarCard> -->
-                <span class="showTitle">平均风速</span>
-                <span class="showvalue">{{titleInfo.averageWindSpeed}}</span>
-                <span class="showTitle">m/s</span>
+                <span class="showTitle">故障损失</span>
+                <span class="showvalue">{{titleInfo.powerLossFault?titleInfo.powerLossFault.value:''}}</span>
+                <span class="showTitle">万kW/h</span>
               </li>
             </ul>
           </div>
@@ -62,29 +62,45 @@
             <ul>
               <li>
                 <!-- <TitleBarCard title="日发电量" unit="kWh" :value="dailyPowerGeneration"></TitleBarCard> -->
-                <span class="showTitle">实时功率</span>
-                <span class="showvalue">{{titleInfo.realTimePower}}</span>
-                <span class="showTitle">MW</span>
+                <span class="showTitle">限电损失</span>
+                <span class="showvalue">{{titleInfo.powerLossRestrictions?titleInfo.powerLossRestrictions.value:''}}</span>
+                <span class="showTitle">万kW/h</span>
               </li>
             </ul>
           </div>
           <div class="titleinfo">
             <ul>
               <li>
-                <!-- <TitleBarCard title="上网电量" unit="kWh" :value="gridPower"></TitleBarCard> -->
-                <span class="showTitle">理论功率</span>
-                <span class="showvalue">{{titleInfo.theoreticalPower}}</span>
-                <span class="showTitle">MW</span>
+                <span class="showTitle">检修损失</span>
+                <span class="showvalue">{{titleInfo.powerLossInspection?titleInfo.powerLossInspection.value:''}}</span>
+                <span class="showTitle">万kW/h</span>
               </li>
             </ul>
           </div>
           <div class="titleinfo">
             <ul>
               <li>
-                <!-- <TitleBarCard title="月发电量" unit="kWh" :value="monthlyPowerGeneration"></TitleBarCard> -->
-                <span class="showTitle">AGC有功设定</span>
-                <span class="showvalue">{{titleInfo.agcPowerSet}}</span>
-                <span class="showTitle">MW</span>
+                <span class="showTitle">受累损失</span>
+                <span class="showvalue">{{titleInfo.powerLossBurden?titleInfo.powerLossBurden.value:''}}</span>
+                <span class="showTitle">万kW/h</span>
+              </li>
+            </ul>
+          </div>
+          <div class="titleinfo">
+            <ul>
+              <li>
+                <span class="showTitle">性能损失</span>
+                <span class="showvalue">{{titleInfo.powerLossPerformance?titleInfo.powerLossPerformance.value:''}}</span>
+                <span class="showTitle">万kW/h</span>
+              </li>
+            </ul>
+          </div>
+          <div class="titleinfo">
+            <ul>
+              <li>
+                <span class="showTitle">场用电量</span>
+                <span class="showvalue">{{titleInfo.fieldElectricity}}</span>
+                <span class="showTitle">万kW/h</span>
               </li>
             </ul>
           </div>
@@ -130,13 +146,16 @@
             <el-button v-if="isLogin" class="loginoption" @click="logout">注&emsp;销</el-button>
           </div>
         </el-popover>
+        <div style="margin-top: 7px; position: absolute; right: 10px">
+          <button class="closeButton" v-on:click="mainClose">×</button>
+        </div>
       </el-col>
 
-      <el-col :span="1">
+      <!-- <el-col :span="1">
         <div style="margin-top: 7px; position: absolute; right: 10px">
           <button class="closeButton" v-on:click="mainClose">×</button>
         </div>
-      </el-col>
+      </el-col> -->
     </el-row>
   </div>
 </template>
@@ -224,14 +243,18 @@
         var vs = [{ key: "/topic/title-info", action: this.titleInfos }];
         mb.register(vs);
       },
-      titleInfos(msg, headers) {
-        let data = JSON.parse(msg)
-        data.installedCapacity = data.installedCapacity.toFixed(2)
-        data.averageWindSpeed = data.averageWindSpeed.toFixed(2)
-        data.realTimePower = data.realTimePower.toFixed(2)
-        data.theoreticalPower = data.theoreticalPower.toFixed(2)
-        data.agcPowerSet = data.agcPowerSet.toFixed(2)
-        this.titleInfo = data
+      titleInfos(msg) {
+        let data = msg?JSON.parse(msg):this.$store.state.titleInfo
+        if(Object.keys(data).length>0){
+          data.dailyPowerGeneration = data.dailyPowerGeneration.toFixed(2)
+          data.powerLossFault.value = data.powerLossFault.value.toFixed(2)
+          data.powerLossRestrictions.value = data.powerLossRestrictions.value.toFixed(2)
+          data.powerLossInspection.value = data.powerLossInspection.value.toFixed(2)
+          data.powerLossBurden.value = data.powerLossBurden.value.toFixed(2)
+          data.powerLossPerformance.value = data.powerLossPerformance.value.toFixed(2)
+          data.fieldElectricity = data.fieldElectricity.toFixed(2)
+          this.titleInfo = data
+        }
       },
       handleClose(done) {
         done();
@@ -334,7 +357,7 @@
     background-color: rgb(20, 20, 20);
     height: auto;
     width: auto;
-    padding: 13px;
+    padding: 13px 8px;
     border-radius: 6px;
     margin-top: 5px;
     margin-bottom: 5px;
@@ -357,7 +380,7 @@
 
   .showTitle {
     color: #FFFFFF;
-    margin-right: 20px;
+    margin-right: 10px;
   }
 
   .showvalue {