update

src/components/BasicInformationDetail.vue

@@ -4,7 +4,7 @@
       <el-col :span="12">
         <StandAloneImg :activeIndex="showIndex" @selectSvg="selectSvg" class="sai"></StandAloneImg>
       </el-col>
-      <el-col :span="12" class="right">
+      <el-col :span="12" class="rights">
         <div class="marks" v-if="healthInfo.bj">
           <div class="healthInfo">健康指数：</div>
           <div class="healthTable" v-if="healthInfo.other">
@@ -723,7 +723,7 @@
       max-height: 160px; 
     }
   } */
-  .right {
+  .rights {
     display: flex;
     flex-direction: column;
   }

src/components/control/areaCard.vue

@@ -19,7 +19,7 @@
                 </div>
             </el-scrollbar>
         </div>
-        <div v-if="current===1" class="send" @click="handleSend">发送</div>
+        <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"
@@ -38,6 +38,7 @@
             WindturbineDetailPages
         },
         created: function () {
+            console.log(this.current)
             this.initData();
             this.suggestion();
         },
@@ -56,7 +57,7 @@
         },
         data() {
             return {
-                current:1,
+                current: 1,
                 windturbinelist: {},
                 titleList: [],
                 startList: [],
@@ -136,7 +137,7 @@
         },
         methods: {
             control(current){
-                this.current = current
+                this.current = current?current:1
             },
             initData: function () {
                 var mb = MessageBridge.getInstance();
@@ -147,6 +148,13 @@
             },
             suggestion(msg, headers) {
                 this.titleList = msg?JSON.parse(msg):this.$store.state.suggestion
+                if(msg){
+                    // api.sendRecommend(this.titleList).then(res =>{
+                    //     if(res){
+
+                    //     }
+                    // })
+                }
                 if (this.current === 0) {
                     let dateList = []
                     this.titleList.forEach(item => {

src/components/modeControl/modeControl.vue

@@ -6,7 +6,7 @@
             <div :class="current===2?'manual_on':'manual'" @click="ChangeBar(2)">手动</div>
         </div>
         <div style="display: flex;flex-direction: row;z-index: 2;">
-            <div class="dataShow">
+            <!-- <div class="dataShow">
                 <div class="number">
                     <div class="dataName">健康指数</div>
                     <div class="numbers">{{showDate.healthIndex}}</div>
@@ -21,13 +21,29 @@
                 <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="showData">
+                <div class="dataBox">
+                    <div class="dataTitle">健康指数</div>
+                    <div class="datas">{{showDate.healthIndex}}</div>
+                </div>
+                <div class="dataBox">
+                    <div class="dataTitle">资源指数</div>
+                    <div class="datas">{{showDate.resourceIndex}}</div>
+                </div>
             </div>
             <div id="mainEcharts" class="echarts"></div>
-            <div class="dataShows">
+            <div class="showData">
+                <div class="dataBox-right">
+                    <div class="dataTitle">风能利用率</div>
+                    <div class="datas">{{showDate.windEnergyRate}}%</div>
+                </div>
+                <div class="dataBox-right">
+                    <div class="dataTitle">曲线跟随率</div>
+                    <div class="datas">{{showDate.curveFollowingRate}}%</div>
+                </div>
+            </div>
+            <!-- <div class="dataShows">
                 <div class="number">
                     <div class="numbers-right">{{showDate.windEnergyRate}}%</div>
                     <div class="dataName-right">风能利用率</div>
@@ -35,8 +51,6 @@
                 <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>
@@ -44,12 +58,7 @@
                 <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>
     </div>
 </template>
@@ -156,7 +165,8 @@
                 option = {
                     series: [{
                         type: 'gauge',
-                        max: 600,
+                        max: 664,
+                        splitNumber: 8,
                         anchor: {
                             show: true,
                             showAbove: true,
@@ -181,7 +191,7 @@
                         axisLine: {
                             lineStyle: {//仪表盘轴线相关配置。
                                 width: 2,
-                                color: [[1, '#8c929d']]
+                                color: [[1, 'rgba(83, 92, 93, 0.5)']]
                             }
                         },
                         axisLabel: {
@@ -205,13 +215,13 @@
                             },
                             title: {
                                 color: '#999999',
-                                offsetCenter: ['-60%', '80%']
+                                offsetCenter: ['-60%', '90%']
                             },
                             detail: {
                                 width: 45,
                                 height: 12,
                                 fontSize: 18,
-                                offsetCenter: ['-60%', '95%']
+                                offsetCenter: ['-60%', '110%']
                             }
                         },
                         {
@@ -222,13 +232,13 @@
                             },
                             title: {
                                 color: '#999999',
-                                offsetCenter: ['0%', '80%']
+                                offsetCenter: ['0%', '90%']
                             },
                             detail: {
                                 width: 45,
                                 height: 12,
                                 fontSize: 18,
-                                offsetCenter: ['0%', '95%']
+                                offsetCenter: ['0%', '110%']
                             }
                         },
                         {
@@ -239,13 +249,13 @@
                             },
                             title: {
                                 color: '#999999',
-                                offsetCenter: ['60%', '80%']
+                                offsetCenter: ['60%', '90%']
                             },
                             detail: {
                                 width: 45,
                                 height: 12,
                                 fontSize: 18,
-                                offsetCenter: ['60%', '95%']
+                                offsetCenter: ['60%', '110%']
                             }
                         }
                         ],
@@ -595,11 +605,11 @@
     }
 
     .echarts {
-        width: 400px;
-        height: 360px;
-        margin-top: -24px;
+        width: 300px;
+        height: 280px;
+        margin-top: 20px;
         /* background-color: #000000; */
-        margin-left: 105px;
+        margin-left: 10px;
     }
 
     .wind {
@@ -642,4 +652,48 @@
     .numbers-right{
         margin-left: 18px;
     }
+    .showData{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+    .dataBox{
+        display: flex;
+        flex-direction: column;
+        width: 120px;
+        height: 60px;
+        border: 1px solid rgba(83, 92, 93, 1);
+        margin-bottom: 15px;
+        margin-top: 15px;
+        margin-left: 30px;
+    }
+    .dataBox-right{
+        display: flex;
+        flex-direction: column;
+        width: 120px;
+        height: 60px;
+        border: 1px solid rgba(83, 92, 93, 1);
+        margin-bottom: 15px;
+        margin-top: 15px;
+        margin-right: 30px;
+    }
+    .dataTitle{
+        height: 50%;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        font-size: 12px;
+        color: rgba(153, 162, 163, 1);
+        margin-left: 5px;
+    }
+    .datas{
+        height: 50%;
+        display: flex;
+        flex-direction: row-reverse;
+        align-items: center;
+        font-size: 16px;
+        color: rgba(05, 187, 76, 1);
+        margin-right: 5px;
+    }
 </style>

src/views/TitleBar.vue

@@ -53,7 +53,7 @@
               <li>
                 <!-- <TitleBarCard title="实时功率" unit="MW" :value="totalPower"></TitleBarCard> -->
                 <span class="showTitle">故障损失</span>
-                <span class="showvalue">{{titleInfo.powerLossFault?titleInfo.powerLossFault.value:''}}</span>
+                <span :class="titleInfo.powerLossFault?(titleInfo.powerLossFault.trend === 'Counterpoise'?'showvalue':titleInfo.powerLossFault.trend === 'Rise'?'showvalue-up':'showvalue-down'):''">{{titleInfo.powerLossFault?titleInfo.powerLossFault.value:''}}</span>
                 <span class="showTitle">万kW/h</span>
               </li>
             </ul>
@@ -63,7 +63,7 @@
               <li>
                 <!-- <TitleBarCard title="日发电量" unit="kWh" :value="dailyPowerGeneration"></TitleBarCard> -->
                 <span class="showTitle">限电损失</span>
-                <span class="showvalue">{{titleInfo.powerLossRestrictions?titleInfo.powerLossRestrictions.value:''}}</span>
+                <span :class="titleInfo.powerLossRestrictions?(titleInfo.powerLossRestrictions.trend === 'Counterpoise'?'showvalue':titleInfo.powerLossRestrictions.trend === 'Rise'?'showvalue-up':'showvalue-down'):''">{{titleInfo.powerLossRestrictions?titleInfo.powerLossRestrictions.value:''}}</span>
                 <span class="showTitle">万kW/h</span>
               </li>
             </ul>
@@ -72,7 +72,7 @@
             <ul>
               <li>
                 <span class="showTitle">检修损失</span>
-                <span class="showvalue">{{titleInfo.powerLossInspection?titleInfo.powerLossInspection.value:''}}</span>
+                <span :class="titleInfo.powerLossInspection?(titleInfo.powerLossInspection.trend === 'Counterpoise'?'showvalue':titleInfo.powerLossInspection.trend === 'Rise'?'showvalue-up':'showvalue-down'):''">{{titleInfo.powerLossInspection?titleInfo.powerLossInspection.value:''}}</span>
                 <span class="showTitle">万kW/h</span>
               </li>
             </ul>
@@ -81,7 +81,7 @@
             <ul>
               <li>
                 <span class="showTitle">受累损失</span>
-                <span class="showvalue">{{titleInfo.powerLossBurden?titleInfo.powerLossBurden.value:''}}</span>
+                <span :class="titleInfo.powerLossBurden?(titleInfo.powerLossBurden.trend === 'Counterpoise'?'showvalue':titleInfo.powerLossBurden.trend === 'Rise'?'showvalue-up':'showvalue-down'):''">{{titleInfo.powerLossBurden?titleInfo.powerLossBurden.value:''}}</span>
                 <span class="showTitle">万kW/h</span>
               </li>
             </ul>
@@ -90,7 +90,7 @@
             <ul>
               <li>
                 <span class="showTitle">性能损失</span>
-                <span class="showvalue">{{titleInfo.powerLossPerformance?titleInfo.powerLossPerformance.value:''}}</span>
+                <span :class="titleInfo.powerLossPerformance?(titleInfo.powerLossPerformance.trend === 'Counterpoise'?'showvalue':titleInfo.powerLossPerformance.trend === 'Rise'?'showvalue-up':'showvalue-down'):''">{{titleInfo.powerLossPerformance?titleInfo.powerLossPerformance.value:''}}</span>
                 <span class="showTitle">万kW/h</span>
               </li>
             </ul>
@@ -382,9 +382,16 @@
     color: #FFFFFF;
     margin-right: 10px;
   }
-
   .showvalue {
+    color: #ffffff;
+    margin-right: 10px;
+  }
+  .showvalue-down {
     color: #50AE56;
     margin-right: 10px;
   }
+  .showvalue-up{
+    color: red;
+    margin-right: 10px;
+  }
 </style>