修改首页样式；升压站全部展示页面增加报警闪烁功能，并且修改样式；

src/components/allMatrices.vue

@@ -18,49 +18,11 @@
             <div class="infoTitle">
                 <span>欠发电量</span>
             </div>
-            <div class="infoMain" :class="
-              data.num1 === 5
-                ? 'item9'
-                : data.num1 === 4
-                  ? 'item8'
-                  : data.num1 === 3
-                    ? 'item7'
-                    : data.num1 === 2
-                      ? 'item6'
-                      : data.num1 === 1
-                        ? 'item5'
-                        : '' " v-for="(data, index) of panel2Data.datas" :key="index">
-                <div class="infoMain_top">
-                    <span class="whiteBox"></span>
-                    <span class="infoMainMsg">×{{ data.num1 }}</span>
-                </div>
-                <div class="infoMain_bot">
-                    <span>{{ data.num3 }}</span>
-                </div>
+            <div v-for="item in showpieColor" :key="item.name" class="infoMainCV">
+                <span class="colorLine" :style="{'background': item.value}"></span>
+                <span class="colorValue">{{item.name}}</span>
             </div>
         </div>
-        <!-- <div style="display: flex; flex-direction: row;margin-right: 90px;width: 800px;">
-          <div class="item2" v-for="(data, index) of panel2Data.datas" :key="index">
-            <div :class="
-              data.num1 === 5
-                ? 'item9'
-                : data.num1 === 4
-                  ? 'item8'
-                  : data.num1 === 3
-                    ? 'item7'
-                    : data.num1 === 2
-                      ? 'item6'
-                      : data.num1 === 1
-                        ? 'item5'
-                        : ''
-            ">
-              <div class="name">{{ data.test }}</div>
-              <div class="num2"></div>
-              <div class="num1">×{{ data.num1 }}</div>
-              <div class="num3">{{ data.num3 }}</div>
-            </div>
-          </div>
-        </div> -->
       </div>
       <div class="content">
         <box-select node=".box" @selectList="selectList">
@@ -207,11 +169,11 @@
                         item[0].stationId
                       ]?.realTimePower?.value.toFixed(2)
                   }}MW -->
-                  {{getseeting($store.state.titleInfo.stationOverviewInfos, 'power')}}MW
+                  {{getseeting($store.state.titleInfo.stationOverviewInfos, item[0], 'power')}}MW
                 </div>
               </div>
               <div class="stationInfo">
-                <div class="name">平均风速</div>
+                <div class="name">日照强度</div>
                 <div class="nums">
                   <!-- {{
                       $store.state.titleInfo.stationOverviewInfos[
@@ -269,40 +231,28 @@ export default {
       lockValues: [],
       parametersDisplay: false,
       intervals: null,
-      panel2Data: {
-        datas: [
-          {
-            test: "欠发电量",
-            num1: 5,
-            key: "r0qf",
-            num3: "0%~5%",
-          },
-          {
-            test: "欠发电量",
-            num1: 4,
-            key: "r1qf",
-            num3: "5%~10%",
-          },
-          {
-            test: "欠发电量",
-            num1: 3,
-            key: "r2qf",
-            num3: "10%~20%",
-          },
-          {
-            test: "欠发电量",
-            num1: 2,
-            key: "r3qf",
-            num3: "20%~40%",
-          },
-          {
-            test: "欠发电量",
-            num1: 1,
-            key: "r4qf",
-            num3: ">40%",
-          },
-        ],
-      },
+      showpieColor: [
+        {
+            name: '×5  0%~5%',
+            value: '#05bb4c'
+        },
+        {
+            name: '×4  5%~10%',
+            value: '#0ec7dc'
+        },
+        {
+            name: '×3  10%~20%',
+            value: '#4b55ae'
+        },
+        {
+            name: '×2  20%~40%',
+            value: '#e17d24'
+        },
+        {
+            name: '×1  >40%',
+            value: '#ba3237'
+        },
+      ]
     };
   },
   created() {
@@ -883,21 +833,38 @@ export default {
   padding-bottom: 10px;
   .infoMsg{
     display: flex;
-    background: #fff;
     border-radius: 10px;
     height: 34px;
     padding: 0 10px;
     margin-right: 20px;
+    position: relative;
+    top: 5px;
     .infoTitle{
         position: relative;
-        top: 7px;
-        color: #000;
+        top: 2px;
+        color: #fff;
         font-weight: 600;
         padding: 0 10px;
         span{
             margin-right: 10px;
         }
     }
+    .infoMainCV{
+        .colorLine{
+            width:25px;
+            height:14px;
+            border-radius:3px;
+            display:inline-block;
+            margin-top:2px;
+            position: relative;
+            top: 3px;
+        }
+        .colorValue{
+            font-size: 12px;
+            margin: 0 15px 0 5px;
+            color: #fff;
+        }
+    }
     .infoMain{
         padding: 0 20px;
         color: #fff;

src/components/control/areaCard.vue

@@ -37,10 +37,10 @@
         </div>
       </div>
       <div style="margin-top: 50px; height: 85%" @contextmenu="contextmenu">
-        <div class="scoll currentScroll">
+        <div class="scoll">
           <div class="currentScroll" style="height: 100%; overflow-y: scroll">
             <div class="matrix" v-if="startList.length > 0">
-              <div class="problemTitle">启动</div>
+              <div class="problemTitle titleSty">启动</div>
               <MatrixBlock
                 @on-click="handleDetial"
                 @choose-click="handleClick"
@@ -49,7 +49,7 @@
               </MatrixBlock>
             </div>
             <div class="matrix" v-if="stopList.length > 0">
-              <div class="problemTitle">停机</div>
+              <div class="problemTitle titleSty">停机</div>
               <MatrixBlock
                 @on-click="handleDetial"
                 @choose-click="handleClick"
@@ -58,7 +58,7 @@
               </MatrixBlock>
             </div>
             <div class="matrix" v-if="maintainList.length > 0">
-              <div class="problemTitle">维护</div>
+              <div class="problemTitle titleSty">维护</div>
               <MatrixBlock
                 @on-click="handleDetial"
                 @choose-click="handleClick"
@@ -67,7 +67,7 @@
               </MatrixBlock>
             </div>
             <div class="matrix" v-if="unMaintainList.length > 0">
-              <div class="problemTitle">取消维护</div>
+              <div class="problemTitle titleSty">取消维护</div>
               <MatrixBlock
                 @on-click="handleDetial"
                 @choose-click="handleClick"
@@ -873,7 +873,7 @@ export default {
 }
 
 .problemTitle {
-  font-size: 12px;
+  /* font-size: 12px; */
   color: #bfbfbf;
   margin-top: 20px;
   margin-bottom: 20px;
@@ -981,3 +981,14 @@ export default {
   background-color: rgba(37, 116, 219, 1);
 }
 </style>
+
+<style lang="less">
+.currentScroll{
+    .matrix{
+        .titleSty {
+            font-size: 14px;
+            font-weight: bold;
+        }
+    }
+}
+</style>

src/components/control/controlAllArea.vue

@@ -32,12 +32,22 @@
           <div class="scoll"> -->
         <div class="matrix" v-if="showList.length > 0">
           <box-select node=".box" @selectList="selectList">
+            
+                <!-- v-if="showWh(showList[0])" -->
             <MatrixBlock
+                v-if="showWh(showList[0])"
+                @choose-click="handleClick"
+                @on-click="handleDetails"
+                :dataList="showList"
+            >
+            </MatrixBlock>
+            <MatrixBlockPv
+                v-else
               @choose-click="handleClick"
               @on-click="handleDetails"
               :dataList="showList"
             >
-            </MatrixBlock>
+            </MatrixBlockPv>
           </box-select>
         </div>
         <!-- </div>
@@ -61,6 +71,7 @@
 <script>
 import WindturbineDetailPages from "../WindturbineDetailPages.vue";
 import MatrixBlock from "../matrixBlock.vue";
+import MatrixBlockPv from "../matrixBlockPv.vue";
 import EaxyMatrxBlock from "../eaxyMatrixBlock.vue";
 import BackgroundData from "utils/BackgroundData";
 import api from "api/index";
@@ -72,6 +83,7 @@ export default {
   components: {
     WindturbineDetailPages,
     MatrixBlock,
+    MatrixBlockPv,
     boxSelect,
     ParametersContrast,
     EaxyMatrxBlock,
@@ -144,104 +156,121 @@ export default {
   computed: {},
   created: function () {
     this.initData();
+    this.handleWindturbineChange();
     this.controls();
     this.getLocks();
-    this.handleWindturbineChange();
-    this.intervals = setInterval(this.handleWindturbineChange, 3000);
+    this.intervals = setInterval(() =>{
+        this.handleWindturbineChange
+    }, 3000);
   },
   methods: {
+    showWh(item) {
+        let show = false
+        if (item.stationId) {
+            show = true
+        }
+        return show
+    },
     selectList(val) {
       val.forEach((item) => {
         this.handleClick(this.windturbinelist[item.id]);
       });
     },
     controls() {
-      this.options = [
-        {
-          value: "0",
-          label: "问题设备",
-        },
-        {
-          value: "1",
-          label: "故障",
-        },
-        {
-          value: "2",
-          label: "维护",
-        },
-        {
-          value: "3",
-          label: "离线",
-        },
-        {
-          value: "4",
-          label: "挂牌",
-        },
-      ];
-      let stationList = this.$store.state.stationList;
-      stationList.forEach((item, index) => {
-        let obj = {};
-        obj.value = String(index + 6);
-        obj.label = item.name;
-        obj.stationId = item.code || item.id;
-        this.options.push(obj);
-      });
-      let json = this.$store.state.windturbinelist;
-      this.dataList = [];
-      this.showList = [];
-      let arr = Object.keys(json).sort();
-      for (let id of arr) {
-        let 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);
+        this.options = [
+            {
+            value: "0",
+            label: "问题设备",
+            },
+            {
+            value: "1",
+            label: "故障",
+            },
+            {
+            value: "2",
+            label: "维护",
+            },
+            {
+            value: "3",
+            label: "离线",
+            },
+            {
+            value: "4",
+            label: "挂牌",
+            },
+        ];
+        let stationList = this.$store.state.stationList;
+        stationList.forEach((item, index) => {
+            if (item.id.indexOf("FDC") != -1 || item.id.indexOf("GDC") != -1) {
+                let obj = {};
+                obj.value = String(index + 6);
+                obj.label = item.name;
+                obj.stationId = item.code || item.id;
+                this.options.push(obj);
             }
-            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;
-          default:
-            if (
-              val.stationId ===
-              this.options.filter((ops) => ops?.value === this.selectValue)[0]
-                .stationId
-            ) {
-              this.showList.push(val);
+        });
+        // let json = this.$store.state.windturbinelist;
+        let wswind = JSON.parse(window.sessionStorage.getItem('windSbq'))
+        let pv = JSON.parse(window.sessionStorage.getItem('pvSbq'))
+        let json = {}
+        if (wswind && pv) {
+            json = {...wswind, ...pv}
+            this.dataList = [];
+            this.showList = [];
+            let arr = Object.keys(json).sort();
+            for (let id of arr) {
+                let 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;
+                default:
+                    if (
+                    val.stationId ===
+                    this.options.filter((ops) => ops?.value === this.selectValue)[0]
+                        .stationId
+                    ) {
+                    this.showList.push(val);
+                    }
+                    break;
+                }
             }
-            break;
+            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);
+            });
         }
-      }
-      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);
-      });
     },
     getLocks() {
       api.getCustomerLock().then((res) => {
@@ -251,11 +280,11 @@ export default {
       });
     },
     initData: function () {
-      let mb = MessageBridge.getInstance();
-      let vss = [
-        { key: "/topic/voice-control", action: this.windturbineMessage },
-      ];
-      mb.register(vss);
+        let mb = MessageBridge.getInstance();
+        let vss = [
+            { key: "/topic/voice-control", action: this.windturbineMessage },
+        ];
+        mb.register(vss);
     },
     windturbineMessage(msg) {
       if (this.$store.state.current === 2) {
@@ -705,12 +734,22 @@ export default {
             val.lockValue > 0 ? this.showList.push(val) : "";
             break;
           default:
-            if (
-              val.stationId ===
-              this.options.filter((ops) => ops?.value === this.selectValue)[0]
-                .stationId
-            ) {
-              this.showList.push(val);
+            if (Number(this.selectValue) < 12) {
+                if (
+                  val.stationId ===
+                  this.options.filter((ops) => ops?.value === this.selectValue)[0]
+                    .stationId
+                ) {
+                  this.showList.push(val);
+                }
+            } else {
+                if (
+                  val.station ===
+                  this.options.filter((ops) => ops?.value === this.selectValue)[0]
+                    .stationId
+                ) {
+                  this.showList.push(val);
+                }
             }
             break;
         }
@@ -731,77 +770,123 @@ export default {
       }
     },
     handleWindturbineChange() {
-      api.getWindturbine().then((res) => {
-        if (res.data) {
-          this.windturbinelist = res.data;
-          this.$store.commit("windturbinelist", res.data);
-          this.dataList = [];
-          this.showList = [];
-          let arr = Object.keys(res.data).sort();
-          let newArr = [];
-          for (let id of arr) {
-            let val = res.data[id];
-            newArr.push(val);
-            this.chooseList.forEach((item) => {
-              if (item.windturbineId === val.windturbineId) {
-                val.active = true;
-              }
-            });
-            if (val.lockValue === 9) {
-              val.lockValues = this.lockValues.filter(
-                (item) => val.windturbineId === item.windturbineID
-              )[0]?.value;
-            }
-            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);
+        let ws = MessageBridge.getInstance();
+        let wind = [
+            { key: "/topic/windturbine", action: this.getWindMsg },
+        ];
+        let guangfu = [
+            { key: "/topic/pv", action: this.getPvMsg },
+        ];
+        ws.register(wind);
+        ws.register(guangfu);
+    },
+    getPvMsg(msg) {
+        window.sessionStorage.removeItem('pvSbq')
+        // let jsonMsg = JSON.parse(msg)
+        window.sessionStorage.setItem('pvSbq', msg)
+        this.changeData()
+    },
+    getWindMsg(msg) {
+        window.sessionStorage.removeItem('windSbq')
+        // let jsonMsg = JSON.parse(msg)
+        window.sessionStorage.setItem('windSbq', msg)
+        this.changeData()
+    },
+    changeData() {
+        let wswind = JSON.parse(window.sessionStorage.getItem('windSbq'))
+        let pv = JSON.parse(window.sessionStorage.getItem('pvSbq'))
+        let msg = {}
+        if (wswind && pv) {
+            msg = {...wswind, ...pv}
+            this.windturbinelist = msg;
+            this.$store.commit("windturbinelist", msg);
+            this.dataList = [];
+            this.showList = [];
+            let arr = Object.keys(msg).sort();
+            let newArr = [];
+            for (let id of arr) {
+                let val = msg[id];
+                newArr.push(val);
+                this.chooseList.forEach((item) => {
+                if (item.windturbineId === val.windturbineId) {
+                    val.active = true;
                 }
-                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;
+                });
+                if (val.lockValue === 9) {
+                val.lockValues = this.lockValues.filter(
+                    (item) => val.windturbineId === item.windturbineID
+                )[0]?.value;
+                }
+                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;
 
-              default:
-                if (
-                  val.stationId ===
-                  this.options.filter(
-                    (ops) => ops?.value === this.selectValue
-                  )[0].stationId
-                ) {
-                  this.showList.push(val);
+                default:
+                    // if (
+                    // val.stationId ===
+                    // this.options.filter(
+                    //     (ops) => ops?.value === this.selectValue
+                    // )[0].stationId
+                    // ) {
+                    // this.showList.push(val);
+                    // }
+                    if (Number(this.selectValue) < 12) {
+                        if (
+                        val.stationId ===
+                        this.options.filter((ops) => ops?.value === this.selectValue)[0]
+                            .stationId
+                        ) {
+                        this.showList.push(val);
+                        }
+                    } else {
+                        if (
+                        val.station ===
+                        this.options.filter((ops) => ops?.value === this.selectValue)[0]
+                            .stationId
+                        ) {
+                        this.showList.push(val);
+                        }
+                    }
+                    break;
                 }
-                break;
             }
-          }
-          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('showList', this.showList)
+            let checkoutList = BackgroundData.getInstance().checkouts;
+            if (checkoutList.length>0) {
+                checkoutList.forEach((item) => {
+                    let showIndex = null;
+                    this.showList.forEach((param, index) => {
+                    if (item.windturbineId === param.windturbineId) {
+                        showIndex = index;
+                    }
+                    });
+                    this.showList.splice(showIndex, 1);
+                });
+            }
+            
         }
-      });
-    },
+    }
   },
   unmounted() {
     clearInterval(this.intervals);

src/components/focus/syzDetails.vue

@@ -41,16 +41,16 @@
                 <span v-else>{{ item.name }}</span>
                 </span>
             </template>
-            <div class="buttonGroup">
+            <div class="buttonGroup" v-if="item.id === 'all'" >
                 <el-button-group>
                     <el-button type="plain" size="small" @click="changeHeight('D')" :class="allHeight === 'D' ? 'showSty' : ''">大图标</el-button>
                     <el-button type="plain" size="small" @click="changeHeight('Z')" :class="allHeight === 'Z' ? 'showSty' : ''">中图标</el-button>
                     <el-button type="plain" size="small" @click="changeHeight('X')" :class="allHeight === 'X' ? 'showSty' : ''">小图标</el-button>
                 </el-button-group>
             </div>
-            <div :style="allpageHeight" v-if="item.id === 'all'" style="width: 100%;display: inline-block">
+            <div v-if="item.id === 'all'" :style="allpageHeight" style="width: 100%;display: inline-block;overflow-y:auto">
                 <div v-for="(item, index) in allSvgMsgData" :key="index" :style="getStyle(allHeight)">
-                    <div class="showAllSvgMsg" @dblclick="dblgetSvgDataFn(item.id)">
+                    <div class="showAllSvgMsg" @dblclick="dblgetSvgDataFn(item.id)" :class="getWarnstyle(item)">
                         <div class="showAllSvgMsg_top" v-html="item.msg"></div>
                         <div class="showAllSvgMsg_bot">
                             <span>{{item.name}}</span>
@@ -150,7 +150,10 @@ export default {
             allConditions: {},
             onlytag: {},
             allSvgMsgData: [],
-            allHeight: 'D'
+            allHeight: 'D',
+            allWarnData: [],
+            starTimerWarn: null,
+            numm: 0
         };
     },
     computed: {
@@ -164,43 +167,57 @@ export default {
                 'height': document.documentElement.clientHeight-200 + 'px'
             }
         },
-        allpageHeight3() {
-            let num = parseInt(this.allSvgMsgData.length / 3)
-            let num1 = this.allSvgMsgData.length % 3
-            let num2 = num1 > 0 ? 3 : num+1
-            return {
-                'height': (document.documentElement.clientHeight-160) / num2 + 'px'
-            }
-        },
-        allpageHeight4() {
-            let num = parseInt(this.allSvgMsgData.length / 4)
-            return {
-                'height': (document.documentElement.clientHeight-160) / num + 'px'
-            }
-        },
-        allpageHeight5() {
-            let num = parseInt(this.allSvgMsgData.length / 5)
-            return {
-                'height': (document.documentElement.clientHeight-160) / num + 'px'
-            }
-        },
     },
     mounted() {
     },
     updated() {},
     methods: {
+        // 获取升压站报警数据
+        getSyzWarnData() {
+            api.alarmFault().then((res) => {
+                if (res && res.data) {
+                    let datas = res.data
+                    let arr = []
+                    datas.forEach(it =>{
+                        let str = ''
+                        if (it.stationName.indexOf('风电场') !== -1 ) {
+                            str = it.stationName.substring(0, it.stationName.indexOf('风电场'))
+                        } else if (it.stationName.indexOf('光伏电站') !== -1) {
+                            str = it.stationName.substring(0, it.stationName.indexOf('光伏电站'))
+                        }
+                        arr.push(str)
+                    })
+                    this.allWarnData = this.unique(arr)
+                }
+            })
+        },
+        unique(arr) {
+            let newArr = []
+            for(let i=0; i<arr.length; i++) {
+                if (newArr.indexOf(arr[i]) === -1) {
+                    newArr.push(arr[i])
+                }
+            }
+            return newArr
+        },
+        getWarnstyle(item) {
+            let showWarn = ''
+            this.allWarnData.forEach(it=> {
+                if (it === item.name) {
+                    showWarn = 'warningMaskNew'
+                }
+            })
+            return showWarn
+        },
         getStyle(type) {
             let num = null
             let num1 = null
             let num2 = null
             if (type === 'D') {
-                num = parseInt(this.allSvgMsgData.length / 3)
-                num1 = this.allSvgMsgData.length % 3
-                num2 = num1 > 0 ? num + 1 : num
                 return {
                     'width': '33.3%',
                     'float': 'left',
-                    'height': (document.documentElement.clientHeight-200) / num2 + 'px'
+                    'height': '400px'
                 }
             } else if (type === 'Z') {
                 num = parseInt(this.allSvgMsgData.length / 4)
@@ -259,7 +276,7 @@ export default {
             api.getSvgData(params).then((res) => {
                 let str = ''
                 str = res.data.substring(res.data.indexOf('<svg'))
-                str = str.replace('<svg', '<svg viewBox="0 0 1900 1260"')
+                str = str.replace('<svg', '<svg viewBox="0 -100 1900 1260"')
                 let obj = {
                     id: id,
                     name: name,
@@ -325,9 +342,10 @@ export default {
                         str = strarr.join(',')
                         this.allTagsMS = res.data.tags
                         this.allConditions = res.data.conditions
+                        // this.getrefreshData(str)
                         this.starTimer = setInterval(() =>{
                             this.getrefreshData(str)
-                        }, 2000)
+                        }, 1000)
                     }
                     console.log('SvgInfo333=>', res)
                 }
@@ -359,20 +377,28 @@ export default {
                 if (it.attributes.tagid) {
                     if (val === it.attributes.tagid.value) {
                         this.onlytag = it
-                        if (this.onlytag.attributes.csid) {
-                            let csid = this.onlytag.attributes.csid.value.split(';')
-                            csid.forEach(ic =>{
-                                if (ic) {
-                                    let num = this.allConditions[ic].value === 0 ? '0' : this.allConditions[ic].value
-                                    if (num) {
-                                        let num2 = tag.value === 0 ? '0' : tag.value
-                                        if (num === num2) {
+                        if (it.nodeName !== 'text') {
+                            if (this.onlytag.attributes.csid) {
+                                let csid = this.onlytag.attributes.csid.value.split(';')
+                                csid.forEach(ic =>{
+                                    if (ic) {
+                                        if (!this.allConditions[ic].isBinding) {
+                                            let num = this.allConditions[ic].value === 0 ? '0' : this.allConditions[ic].value
+                                            if (num) {
+                                                let num2 = tag.value === 0 ? '0' : tag.value
+                                                if (num === num2) {
+                                                    this.onlytag.setAttribute(this.allConditions[ic].property, this.allConditions[ic].propertyValue)
+                                                    return 
+                                                }
+                                            }
+                                        } else {
                                             this.onlytag.setAttribute(this.allConditions[ic].property, this.allConditions[ic].propertyValue)
-                                            return 
                                         }
                                     }
-                                }
-                            })
+                                })
+                            }
+                        } else {
+                            this.onlytag.textContent = tag.value.toFixed(2)
                         }
                     }
                 }
@@ -525,11 +551,15 @@ export default {
         },
 
         opened() {
-        this.initAlarm();
-        this.getAllStationtab()
-        this.timmer = setInterval(() => {
-            this.renderAlarm();
-        }, 3000);
+            this.initAlarm();
+            this.getAllStationtab()
+            this.timmer = setInterval(() => {
+                this.renderAlarm();
+            }, 3000);
+            
+            let starTimerWarn = setInterval(() =>{
+                this.getSyzWarnData()
+            }, 2000)
         },
 
         closed() {
@@ -539,8 +569,10 @@ export default {
             // this.$refs.svgRef[3].closed()
             // this.$refs.svgRef[4].closed()
             clearInterval(this.starTimer);
+            clearInterval(this.starTimerWarn);
             clearInterval(this.timmer);
             this.starTimer = null
+            this.starTimerWarn = null
             this.timmer = null;
             this.$store.commit("activeTab", "");
             this.$store.commit("syzDialogShow", false);
@@ -594,6 +626,39 @@ export default {
             }
         }
     }
+    .warningMaskNew {
+        background-color: rgba(186, 50, 55, 0.5);
+        animation: fade 2000ms infinite;
+        -webkit-animation: fade 2000ms infinite;
+    }
+
+    @keyframes fade {
+    from {
+        opacity: 0.7;
+    }
+
+    50% {
+        opacity: 0.3;
+    }
+
+    to {
+        opacity: 0.7;
+    }
+    }
+
+    @-webkit-keyframes fade {
+    from {
+        opacity: 0.7;
+    }
+
+    50% {
+        opacity: 0.3;
+    }
+
+    to {
+        opacity: 0.7;
+    }
+    }
     .showAllSvgMsg{
         width: calc(100% - 15px);
         height: calc(100% - 15px);

src/components/matrixBlock.vue

@@ -22,8 +22,8 @@
         <div
           :class="item.active ? 'left-' + item.status : 'unleft-' + item.status"
         >
-          <div>{{ item.id.slice(0, 2) }}</div>
-          <div>{{ item.id.slice(5) }}</div>
+          <div>{{ item.stationId.slice(0, 2) }}</div>
+          <div>{{ item.stationId.slice(5) }}</div>
           <!-- <div>{{ item.windturbineId.slice(0, 2) }}</div>
         <div>{{ item.code }}</div> -->
         </div>

src/components/matrixBlockPv.vue

@@ -0,0 +1,925 @@
+<template>
+  <div>
+    <div
+      class="box"
+      style="display: flex; flex-direction: row; flex-wrap: wrap"
+    >
+      <div
+        :class="
+          item.active
+            ? 'box-' + item.status
+            : item.flashing && item.status === 5
+            ? 'unbox-flashing-' + item.status
+            : 'unbox-' + item.status
+        "
+        :id="item.windturbineId"
+        v-for="(item, index) in dataList"
+        :key="index"
+        @click="onSelectHandler(item)"
+        @dblclick="sendMsg(item)"
+        style="margin-right: 8px"
+      >
+        <div
+          :class="item.active ? 'left-' + item.status : 'unleft-' + item.status"
+        >
+          <div>{{ getName(item, 'top') }}</div>
+          <div>{{ getName(item, 'bot') }}</div>
+          <!-- <div>{{ item.windturbineId.slice(0, 2) }}</div>
+        <div>{{ item.code }}</div> -->
+        </div>
+        <div
+          :class="
+            item.active ? 'right-' + item.status : 'unright-' + item.status
+          "
+        >
+            <div class="rightrow">{{ item.i.toFixed(2) }} A</div>
+
+            <div class="rightrow">{{ item.u.toFixed(2) }} V</div>
+
+            <div class="rightrow">{{ item.p.toFixed(2) }} kw</div>
+        </div>
+        <div class="duration">
+          <el-popover
+            placement="bottom-start"
+            :width="200"
+            trigger="hover"
+            class="durationPopover"
+            :show-arrow="false"
+            @show="handleDeal(item.ts)"
+          >
+            <template #reference>
+              <img
+                :class="item.lockValue > 0 ? 'durationImgs' : 'durationImg'"
+                src="../assets/img/type/duration.png"
+                alt=""
+              />
+            </template>
+            <input
+              class="lock_inputs"
+              type="text"
+              placeholder=""
+              :value="showVlaues"
+              disabled
+            />
+          </el-popover>
+        </div>
+        <div class="locks" v-if="item.lockValue > 0">
+          <el-popover
+            placement="bottom-start"
+            :width="150"
+            trigger="hover"
+            class="popoverBack"
+            :show-arrow="false"
+          >
+            <template #reference>
+              <img class="lock" src="../assets/img/type/lock.png" alt="" />
+            </template>
+            <input
+              class="lock_input"
+              type="text"
+              placeholder=""
+              :value="
+                item.lockValue === 9 ? item.lockValues : options[item.lockValue]
+              "
+              disabled
+            />
+          </el-popover>
+        </div>
+        <div class="locks" v-if="item.reasonType">
+          <img
+            class="lock"
+            src="../assets/img/type/electricityRestrictions.png"
+            alt=""
+          />
+        </div>
+      </div>
+    </div>
+    <WindturbineDetailPages
+      v-model="dialogVisible"
+      :showSvg="showSvg"
+      @close="handleClose"
+      :windturbine="currentWindturbine"
+    ></WindturbineDetailPages>
+  </div>
+</template>
+<script>
+import WindturbineDetailPages from "./WindturbineDetailPages.vue";
+import api from "api/index";
+import dayjs from "dayjs";
+export default {
+  components: {
+    WindturbineDetailPages,
+  },
+  props: {
+    dataList: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    area: String,
+  },
+  mounted() {
+    // this.getWindturbineFdc();
+  },
+  updated() {},
+  methods: {
+    getName(item, type) {
+        let name = ''
+        if (item.id) {
+            if (type === 'top') {
+                name = item.id.slice(0, item.id.indexOf('_'))
+            } else {
+                name = item.id.slice(item.id.indexOf('_'))
+            }
+        }
+        return name
+    },
+    handleDeal(val) {
+      let data = dayjs(val).format("YYYY-MM-DD HH:mm:ss");
+      this.showVlaues = this.timeFn(data);
+      // return `该状态共持续：`
+    },
+
+    timeFn(d1) {
+      //di作为一个变量传进来
+      //如果时间格式是正确的，那下面这一步转化时间格式就可以不用了
+      var dateBegin = new Date(d1.replace(/-/g, "/")); //将-转化为/，使用new Date
+      var dateEnd = new Date(); //获取当前时间
+      var dateDiff = dateEnd.getTime() - dateBegin.getTime(); //时间差的毫秒数
+      var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)); //计算出相差天数
+      var leave1 = dateDiff % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
+      var hours = Math.floor(leave1 / (3600 * 1000)); //计算出小时数
+      //计算相差分钟数
+      var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
+      var minutes = Math.floor(leave2 / (60 * 1000)); //计算相差分钟数
+      //计算相差秒数
+      var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
+      var seconds = Math.round(leave3 / 1000);
+      return `持续时长：${dayDiff !== 0 ? dayDiff + "天" : ""}${
+        hours !== 0 ? hours + "小时" : ""
+      }${minutes !== 0 ? minutes + "分钟" : ""}${
+        seconds !== 0 ? seconds + "秒" : ""
+      }`;
+    },
+    // getWindturbineFdc() {
+    //   api.getWindturbineFdc().then((res) => {
+    //     this.station = res.data;
+    //   });
+    // },
+    onSelectHandler(values) {
+      if (this.area === "problem") {
+        this.$emit("problem-click", values);
+      } else {
+        this.$emit("choose-click", values);
+      }
+    },
+    sendMsg: function (itm) {
+      // this.dialogVisible = true;
+      this.$emit("on-click", itm);
+      // this.currentWindturbine = itm;
+    },
+    handleClose() {
+      this.dialogVisible = false;
+      this.showSvg = false;
+    },
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      showSvg: false,
+      currentWindturbine: {},
+      showVlaues: "",
+      // station: [],
+      options: {
+        8: "检修",
+        7: "故障维修",
+        2: "场内受累检修",
+        3: "场内受累故障",
+        4: "场外受累电网",
+        5: "场外受累天气",
+      },
+    };
+  },
+};
+</script>
+<style scoped>
+.lock {
+  width: 10px;
+  height: 10px;
+  position: relative;
+  right: 2px;
+  top: -15px;
+}
+
+.durationImg {
+  width: 15px;
+  height: 15px;
+  position: relative;
+  right: 5px;
+  top: -15px;
+}
+.durationImgs {
+  width: 15px;
+  height: 15px;
+  position: relative;
+  right: 5px;
+  top: -15px;
+}
+.lock-on {
+  width: 0px;
+  height: 0px;
+  opacity: 0;
+}
+
+.locks:hover .lock-on {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  width: 80px;
+  height: 30px;
+  border: 1px solid #999999;
+  background-color: #999999;
+  opacity: 1;
+  color: #ffffff;
+  z-index: 999;
+}
+
+.duration {
+  width: 15px;
+  height: 15px;
+  position: relative;
+  visibility: hidden;
+}
+.unbox-1:hover .duration {
+  visibility: visible;
+}
+.unbox-2:hover .duration {
+  visibility: visible;
+}
+.unbox-3:hover .duration {
+  visibility: visible;
+}
+.unbox-4:hover .duration {
+  visibility: visible;
+}
+.unbox-5:hover .duration {
+  visibility: visible;
+}
+.unbox-6:hover .duration {
+  visibility: visible;
+}
+.unbox-7:hover .duration {
+  visibility: visible;
+}
+
+.lock_input {
+  width: 140px;
+  background-color: #292929;
+  height: 40px;
+  color: #ffffff;
+}
+.lock_inputs {
+  width: 200px;
+  background-color: #292929;
+  height: 40px;
+  color: #ffffff;
+}
+.box-0 {
+  width: 135px;
+  height: 50px;
+  color: #ffffff;
+  border: 1px solid rgba(05, 187, 76, 1);
+  background-color: rgba(255, 255, 255, 0.05);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-right: 5px;
+  margin-top: 10px;
+  box-shadow: 0px 0px 6px #09e45e;
+}
+
+.unbox-0 {
+  width: 135px;
+  height: 50px;
+  color: #ffffff;
+  border: 1px solid rgba(05, 187, 76, 1);
+  background-color: rgba(05, 187, 76, 0.2);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-right: 5px;
+  margin-top: 10px;
+}
+
+.left-0 {
+  width: 35%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(05, 187, 76, 1);
+  font-weight: 600;
+  line-height: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.unleft-0 {
+  width: 35%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(05, 187, 76, 1);
+  font-weight: 600;
+  line-height: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.right-0 {
+  width: 69%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(05, 187, 76, 1);
+  line-height: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.unright-0 {
+  width: 69%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(05, 187, 76, 1);
+  line-height: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.box-1 {
+  width: 135px;
+  height: 50px;
+  color: #ffffff;
+  border: 1px solid rgba(75, 85, 174, 1);
+  background-color: rgba(75, 85, 174, 0.05);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-right: 5px;
+  margin-top: 10px;
+  box-shadow: 0px 0px 6px #6876f2;
+}
+
+.unbox-1 {
+  width: 135px;
+  height: 50px;
+  color: #ffffff;
+  border: 1px solid rgba(75, 85, 174, 1);
+  background-color: rgba(75, 85, 174, 0.2);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-right: 5px;
+  margin-top: 10px;
+}
+
+.left-1 {
+  width: 35%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(75, 85, 174, 1);
+  font-weight: 600;
+  line-height: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.unleft-1 {
+  width: 35%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(75, 85, 174, 1);
+  font-weight: 600;
+  line-height: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.right-1 {
+  width: 69%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(75, 85, 174, 1);
+  line-height: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.unright-1 {
+  width: 69%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(75, 85, 174, 1);
+  line-height: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.box-2, .box-4, .box-5 {
+  width: 135px;
+  height: 50px;
+  color: #ffffff;
+  border: 1px solid rgba(186, 50, 55, 1);
+  background-color: rgba(186, 50, 55, 0.05);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-right: 5px;
+  margin-top: 10px;
+  box-shadow: 0px 0px 6px #ff1313;
+}
+
+.unbox-2, .unbox-4, .unbox-5 {
+  width: 135px;
+  height: 50px;
+  color: #ffffff;
+  border: 1px solid rgba(186, 50, 55, 1);
+  background-color: rgba(186, 50, 55, 0.2);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-right: 5px;
+  margin-top: 10px;
+}
+
+.left-2, .left-4, .left-5 {
+  width: 35%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(186, 50, 55, 1);
+  font-weight: 600;
+  line-height: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.unleft-2, .unleft-4, .unleft-5 {
+  width: 35%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(186, 50, 55, 1);
+  font-weight: 600;
+  line-height: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.right-2, .right-4, .right-5 {
+  width: 69%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(186, 50, 55, 1);
+  line-height: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.unright-2, .unright-4, .unright-5 {
+  width: 69%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(186, 50, 55, 1);
+  line-height: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.box-3 {
+  width: 135px;
+  height: 50px;
+  color: #ffffff;
+  border: 1px solid rgba(225, 125, 36, 1);
+  background-color: rgba(225, 125, 36, 0.05);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-right: 5px;
+  margin-top: 10px;
+  box-shadow: 0px 0px 6px #f28627;
+}
+
+.unbox-3 {
+  width: 135px;
+  height: 50px;
+  color: #ffffff;
+  border: 1px solid rgba(225, 125, 36, 1);
+  background-color: rgba(225, 125, 36, 0.2);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-right: 5px;
+  margin-top: 10px;
+}
+
+.left-3 {
+  width: 35%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(225, 125, 36, 1);
+  font-weight: 600;
+  line-height: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.unleft-3 {
+  width: 35%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(225, 125, 36, 1);
+  font-weight: 600;
+  line-height: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.right-3 {
+  width: 69%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(225, 125, 36, 1);
+  line-height: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.unright-3 {
+  width: 69%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(225, 125, 36, 1);
+  line-height: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.box-4 {
+  width: 135px;
+  height: 50px;
+  color: #ffffff;
+  border: 1px solid rgba(75, 85, 174, 1);
+  background-color: rgba(75, 85, 174, 0.05);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-right: 5px;
+  margin-top: 10px;
+  box-shadow: 0px 0px 6px #6876f2;
+}
+
+.unbox-4 {
+  width: 135px;
+  height: 50px;
+  color: #ffffff;
+  border: 1px solid rgba(75, 85, 174, 1);
+  background-color: rgba(75, 85, 174, 0.2);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-right: 5px;
+  margin-top: 10px;
+}
+
+.left-4 {
+  width: 35%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(75, 85, 174, 1);
+  font-weight: 600;
+  line-height: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.unleft-4 {
+  width: 35%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(75, 85, 174, 1);
+  font-weight: 600;
+  line-height: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.right-4 {
+  width: 69%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(75, 85, 174, 1);
+  line-height: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.unright-4 {
+  width: 69%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(75, 85, 174, 1);
+  line-height: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.box-5 {
+  width: 135px;
+  height: 50px;
+  color: #ffffff;
+  border: 1px solid rgba(186, 50, 55, 1);
+  background-color: rgba(186, 50, 55, 0.05);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-right: 5px;
+  margin-top: 10px;
+  box-shadow: 0px 0px 6px #ff1313;
+}
+
+@keyframes fade {
+  from {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.6;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes fade {
+  from {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.6;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.unbox-flashing-5 {
+  width: 135px;
+  height: 50px;
+  color: #ffffff;
+  border: 1px solid rgba(186, 50, 55, 1);
+  background-color: rgba(186, 50, 55, 0.2);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-right: 5px;
+  margin-top: 10px;
+  animation: fade 1600ms infinite;
+  -webkit-animation: fade 1600ms infinite;
+}
+
+.unbox-5 {
+  width: 135px;
+  height: 50px;
+  color: #ffffff;
+  border: 1px solid rgba(186, 50, 55, 1);
+  background-color: rgba(186, 50, 55, 0.2);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-right: 5px;
+  margin-top: 10px;
+}
+
+.left-5 {
+  width: 35%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(186, 50, 55, 1);
+  font-weight: 600;
+  line-height: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.unleft-5 {
+  width: 35%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(186, 50, 55, 1);
+  font-weight: 600;
+  line-height: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.right-5 {
+  width: 69%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(186, 50, 55, 1);
+  line-height: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.unright-5 {
+  width: 69%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(186, 50, 55, 1);
+  line-height: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.box-6 {
+  width: 135px;
+  height: 50px;
+  color: #ffffff;
+  border: 1px solid rgba(225, 125, 36, 1);
+  background-color: rgba(225, 125, 36, 0.05);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-right: 5px;
+  margin-top: 10px;
+  box-shadow: 0px 0px 6px #f28627;
+}
+
+.unbox-6 {
+  width: 135px;
+  height: 50px;
+  color: #ffffff;
+  border: 1px solid rgba(225, 125, 36, 1);
+  background-color: rgba(225, 125, 36, 0.2);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-right: 5px;
+  margin-top: 10px;
+}
+
+.left-6 {
+  width: 35%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(225, 125, 36, 1);
+  font-weight: 600;
+  line-height: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.unleft-6 {
+  width: 35%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(225, 125, 36, 1);
+  font-weight: 600;
+  line-height: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.right-6 {
+  width: 69%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(225, 125, 36, 1);
+  line-height: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.unright-6 {
+  width: 69%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(225, 125, 36, 1);
+  line-height: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.box-7 {
+  width: 135px;
+  height: 50px;
+  color: #ffffff;
+  border: 1px solid rgba(96, 103, 105, 1);
+  background-color: rgba(96, 103, 105, 0.05);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-right: 5px;
+  margin-top: 10px;
+  box-shadow: 0px 0px 6px #ffffff;
+}
+
+.unbox-7 {
+  width: 135px;
+  height: 50px;
+  color: #ffffff;
+  border: 1px solid rgba(96, 103, 105, 1);
+  background-color: rgba(96, 103, 105, 0.2);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-right: 5px;
+  margin-top: 10px;
+}
+
+.left-7 {
+  width: 35%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(96, 103, 105, 1);
+  font-weight: 600;
+  line-height: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.unleft-7 {
+  width: 35%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(96, 103, 105, 1);
+  font-weight: 600;
+  line-height: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.right-7 {
+  width: 69%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(96, 103, 105, 1);
+  line-height: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.unright-7 {
+  width: 69%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(96, 103, 105, 1);
+  line-height: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+</style>

src/components/modeControl/modeControl.vue

@@ -1,211 +1,175 @@
 <template>
-  <div class="body">
-    <div class="control">
-      <div :class="current === 0 ? 'smart_on' : 'smart'" @click="ChangeBar(0)">
-        智能
-      </div>
-      <div
-        :class="current === 1 ? 'recommend_on' : 'recommend'"
-        @click="ChangeBar(1)"
-      >
-        推荐
-      </div>
-      <div
-        :class="current === 2 ? 'manual_on' : 'manual'"
-        @click="ChangeBar(2)"
-      >
-        手动
-      </div>
-    </div>
-    <div style="display: flex; flex-direction: row; z-index: 2">
-      <div class="showData">
-        <div
-          class="dataBox"
-          @dblclick="
-            dbClicks(
-              $store.state.currentStation
-                ? showDate?.stationOverviewInfos[$store.state.currentStation]
-                    ?.healthIndex
-                : showDate.healthIndex,
-              '健康指数'
-            )
-          "
-        >
-          <div class="dataTitle">健康指数</div>
-          <div class="datas">
-            {{
-              $store.state.currentStation
-                ? healthIndex.toFixed(0)
-                : allHealthIndex.toFixed(0)
-            }}%
-          </div>
-        </div>
-        <div
-          class="dataBox"
-          @dblclick="
-            dbClicks(
-              $store.state.currentStation
-                ? showDate?.stationOverviewInfos[$store.state.currentStation]
-                    ?.resourceIndex
-                : showDate.resourceIndex,
-              '资源指数'
-            )
-          "
-        >
-          <div class="dataTitle">资源指数</div>
-          <div class="datas">
-            {{
-              $store.state.currentStation
-                ? resourceIndex.toFixed(0)
-                : allResourceIndex.toFixed(0)
-            }}%
-          </div>
+    <div class="body">
+        <img class="logo" src="../../assets/img/logo.png" alt="" />
+        <div class="control">
+            <div :class="current === 0 ? 'smart_on' : 'smart'" @click="ChangeBar(0)">智能</div>
+            <div :class="current === 1 ? 'recommend_on' : 'recommend'" @click="ChangeBar(1)" >推荐</div>
+            <div :class="current === 2 ? 'manual_on' : 'manual'" @click="ChangeBar(2)" >手动</div>
         </div>
-      </div>
-      <div>
-        <div id="mainEcharts" @dblclick="dbClick()" class="echarts"></div>
-        <div class="powerContent">
-          <div
-            class="power"
-            @dblclick="
-              dbClicks(
-                $store.state.currentStation
-                  ? showDate?.stationOverviewInfos[$store.state.currentStation]
-                      ?.realTimePower
-                  : showDate.realTimePower,
-                '实际功率'
-              )
-            "
-          >
-            <div class="powerTitle">实际功率</div>
-            <div
-              class="powerDatas"
-              style="background-color: rgba(75, 85, 174, 1)"
-            >
-              {{
-                $store.state.currentStation
-                  ? showDate?.stationOverviewInfos[
-                      $store.state.currentStation
-                    ]?.realTimePower?.value.toFixed(2)
-                  : showDate.realTimePower?.value.toFixed(2)
-              }}
-            </div>
-          </div>
-          <div
-            class="power1"
-            @dblclick="
-              dbClicks(
-                $store.state.currentStation
-                  ? showDate?.stationOverviewInfos[$store.state.currentStation]
-                      ?.theoreticalPower
-                  : showDate.theoreticalPower,
-                '理论功率'
-              )
-            "
-          >
-            <div class="powerTitle">理论功率</div>
-            <div
-              class="powerDatas"
-              style="background-color: rgba(05, 187, 76, 1)"
-            >
-              {{
-                $store.state.currentStation
-                  ? showDate?.stationOverviewInfos[
-                      $store.state.currentStation
-                    ]?.theoreticalPower?.value.toFixed(2)
-                  : showDate.theoreticalPower?.value.toFixed(2)
-              }}
+        <div style="display: flex; flex-direction: row; z-index: 2">
+            <div class="showData">
+                <div class="dataBox" @dblclick="dbClicks(
+                    $store.state.currentStation
+                        ? showDate?.stationOverviewInfos[$store.state.currentStation]
+                            ?.healthIndex
+                        : showDate.healthIndex,
+                    '健康指数'
+                    )">
+                <div class="dataTitle">健康指数</div>
+                    <div class="datas">
+                        {{$store.state.currentStation ? healthIndex.toFixed(0) : allHealthIndex.toFixed(0)}}%
+                    </div>
+                </div>
+                <div class="dataBox" @dblclick="dbClicks(
+                    $store.state.currentStation
+                        ? showDate?.stationOverviewInfos[$store.state.currentStation]
+                            ?.resourceIndex
+                        : showDate.resourceIndex,
+                    '资源指数'
+                    )">
+                    <div class="dataTitle">资源指数</div>
+                    <div class="datas">
+                        {{
+                        $store.state.currentStation
+                            ? resourceIndex.toFixed(0)
+                            : allResourceIndex.toFixed(0)
+                        }}%
+                    </div>
+                </div>
             </div>
-          </div>
-          <div
-            class="power2"
-            @dblclick="
-              dbClicks(
-                $store.state.currentStation
-                  ? showDate?.stationOverviewInfos[$store.state.currentStation]
-                      ?.agcPowerSet
-                  : showDate.agcPowerSet,
-                'AGC有功设定'
-              )
-            "
-          >
-            <div class="powerTitle">AGC有功设定</div>
-            <div
-              class="powerDatas"
-              style="background-color: rgba(186, 50, 55, 1)"
-            >
-              {{
-                $store.state.currentStation
-                  ? showDate?.stationOverviewInfos[
-                      $store.state.currentStation
-                    ]?.agcPowerSet?.value.toFixed(2)
-                  : showDate.agcPowerSet?.value.toFixed(2)
-              }}
+            <div>
+                <div id="mainEcharts" @dblclick="dbClick()" class="echarts"></div>
+                <div class="powerContent">
+                    <div class="power" @dblclick="dbClicks(
+                            $store.state.currentStation
+                            ? showDate?.stationOverviewInfos[$store.state.currentStation]
+                                ?.realTimePower
+                            : showDate.realTimePower,
+                            '实际功率'
+                        )">
+                        <div class="powerTitle">实际功率</div>
+                        <div class="powerDatas" style="background-color: rgba(75, 85, 174, 1)" >
+                        {{
+                            $store.state.currentStation
+                            ? showDate?.stationOverviewInfos[
+                                $store.state.currentStation
+                                ]?.realTimePower?.value.toFixed(2)
+                            : showDate.realTimePower?.value.toFixed(2)
+                        }}
+                        </div>
+                    </div>
+                    <div class="power1" @dblclick="
+                        dbClicks(
+                            $store.state.currentStation
+                            ? showDate?.stationOverviewInfos[$store.state.currentStation]
+                                ?.theoreticalPower
+                            : showDate.theoreticalPower,
+                            '理论功率'
+                        ) "
+                    >
+                        <div class="powerTitle">理论功率</div>
+                        <div
+                        class="powerDatas"
+                        style="background-color: rgba(05, 187, 76, 1)"
+                        >
+                        {{
+                            $store.state.currentStation
+                            ? showDate?.stationOverviewInfos[
+                                $store.state.currentStation
+                                ]?.theoreticalPower?.value.toFixed(2)
+                            : showDate.theoreticalPower?.value.toFixed(2)
+                        }}
+                        </div>
+                    </div>
+                    <div
+                        class="power2"
+                        @dblclick="
+                        dbClicks(
+                            $store.state.currentStation
+                            ? showDate?.stationOverviewInfos[$store.state.currentStation]
+                                ?.agcPowerSet
+                            : showDate.agcPowerSet,
+                            'AGC有功设定'
+                        )
+                        "
+                    >
+                        <div class="powerTitle">AGC有功设定</div>
+                        <div
+                        class="powerDatas"
+                        style="background-color: rgba(186, 50, 55, 1)"
+                        >
+                        {{
+                            $store.state.currentStation
+                            ? showDate?.stationOverviewInfos[
+                                $store.state.currentStation
+                                ]?.agcPowerSet?.value.toFixed(2)
+                            : showDate.agcPowerSet?.value.toFixed(2)
+                        }}
+                        </div>
+                    </div>
+                </div>
             </div>
-          </div>
-        </div>
-      </div>
-      <div class="showData">
-        <div
-          class="dataBox-right"
-          @dblclick="
-            dbClicks(
-              $store.state.currentStation
-                ? showDate?.stationOverviewInfos[$store.state.currentStation]
-                    ?.windEnergyRate
-                : showDate.windEnergyRate,
-              '风能利用率'
-            )
-          "
-        >
-          <div class="dataTitle">风能利用率</div>
-          <div class="datas" v-if="showDate.windEnergyRate?.value <= 100">
-            {{
-              $store.state.currentStation
-                ? showDate?.stationOverviewInfos[
+            <div class="showData">
+                <div
+                class="dataBox-right"
+                @dblclick="
+                    dbClicks(
                     $store.state.currentStation
-                  ]?.windEnergyRate?.value.toFixed(2)
-                : showDate.windEnergyRate?.value.toFixed(2)
-            }}%
-          </div>
-        </div>
-        <div
-          class="dataBox-right"
-          @dblclick="
-            dbClicks(
-              $store.state.currentStation
-                ? showDate?.stationOverviewInfos[$store.state.currentStation]
-                    ?.curveFollowingRate
-                : showDate.curveFollowingRate,
-              '曲线跟随率'
-            )
-          "
-        >
-          <div class="dataTitle">曲线跟随率</div>
-          <div class="datas" v-if="showDate.curveFollowingRate?.value <= 100">
-            {{
-              $store.state.currentStation
-                ? showDate?.stationOverviewInfos[
+                        ? showDate?.stationOverviewInfos[$store.state.currentStation]
+                            ?.windEnergyRate
+                        : showDate.windEnergyRate,
+                    '风能利用率'
+                    )
+                "
+                >
+                <div class="dataTitle">风能利用率</div>
+                <div class="datas" v-if="showDate.windEnergyRate?.value <= 100">
+                    {{
+                    $store.state.currentStation
+                        ? showDate?.stationOverviewInfos[
+                            $store.state.currentStation
+                        ]?.windEnergyRate?.value.toFixed(2)
+                        : showDate.windEnergyRate?.value.toFixed(2)
+                    }}%
+                </div>
+                </div>
+                <div
+                class="dataBox-right"
+                @dblclick="
+                    dbClicks(
+                    $store.state.currentStation
+                        ? showDate?.stationOverviewInfos[$store.state.currentStation]
+                            ?.curveFollowingRate
+                        : showDate.curveFollowingRate,
+                    '曲线跟随率'
+                    )
+                "
+                >
+                <div class="dataTitle">曲线跟随率</div>
+                <div class="datas" v-if="showDate.curveFollowingRate?.value <= 100">
+                    {{
                     $store.state.currentStation
-                  ]?.curveFollowingRate?.value.toFixed(2)
-                : showDate.curveFollowingRate?.value.toFixed(2)
-            }}%
-          </div>
+                        ? showDate?.stationOverviewInfos[
+                            $store.state.currentStation
+                        ]?.curveFollowingRate?.value.toFixed(2)
+                        : showDate.curveFollowingRate?.value.toFixed(2)
+                    }}%
+                </div>
+                </div>
+            </div>
         </div>
-      </div>
     </div>
-  </div>
-  <DetailPages ref="detials" @closed="closed()" v-model="dialogVisible">
-  </DetailPages>
-  <Details
-    @closed="closeds()"
-    v-model="display"
-    :partsName="partsName"
-    echartsId="modelEcharts"
-    :datas="modelDetails"
-    @search-data="search"
-    @original-data="originalData"
-  ></Details>
+    <DetailPages ref="detials" @closed="closed()" v-model="dialogVisible">
+    </DetailPages>
+    <Details
+        @closed="closeds()"
+        v-model="display"
+        :partsName="partsName"
+        echartsId="modelEcharts"
+        :datas="modelDetails"
+        @search-data="search"
+        @original-data="originalData"
+    ></Details>
 </template>
 <script>
 import BackgroundData from "utils/BackgroundData";
@@ -254,7 +218,7 @@ export default {
   computed: {},
   mounted() {
     this.$nextTick(() => {
-      if (document.getElementById("mainEcharts")) {
+      if (document.getElementById("mainEcharts"), 'dark') {
         this.getEcharts();
       }
     });
@@ -314,94 +278,96 @@ export default {
     },
     getEcharts() {
       let chartDom = document.getElementById("mainEcharts");
-      let myChart = echarts.init(chartDom, "#000000");
+      let myChart = echarts.init(chartDom);
       let option;
       option = {
         series: [
-          {
-            type: "gauge",
-            max: 600,
-            splitNumber: 8,
-            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, "rgba(83, 92, 93, 0.5)"]],
-              },
-            },
-            axisLabel: {
-              // textStyle: {//数字刻度样式
-              //     color: '#000000',
-              //     fontSize: 12,
-              // }
-            },
-            splitLine: {
-              //分隔线样式相关
-              length: 0, //分割线的长度
-              lineStyle: {
-                width: 1,
-                color: "#000000",
-              },
-            },
-            data: [
-              {
-                value: 125.85,
-                // name: '实际功率',
+            {
+                type: "gauge",
+                max: 600,
+                splitNumber: 8,
+                radius: '70%',
+                anchor: {
+                show: true,
+                showAbove: true,
+                size: 9,
+                width: 5,
                 itemStyle: {
-                  color: "rgba(75, 85, 174, 1)",
+                    color: "#FAC858",
                 },
-              },
-              {
-                value: 137.63,
-                // name: '理论功率',
-                itemStyle: {
-                  color: "rgba(05, 187, 76, 1)",
                 },
-              },
-              {
-                value: 132.04,
-                // name: 'AGC有功设定',
-                itemStyle: {
-                  color: "rgba(186, 50, 55, 1)",
+                pointer: {
+                    icon: "",
+                    width: 3,
+                    length: "80%",
+                    offsetCenter: [0, "5%"],
+                },
+
+                progress: {
+                show: true,
+                overlap: true,
+                roundCap: true,
+                },
+                axisLine: {
+                    lineStyle: {
+                        //仪表盘轴线相关配置。
+                        width: 2,
+                        color: [[1, "rgba(83, 92, 93, 0.5)"]],
+                        // color: [[1, "#fff"]],
+                    },
+                },
+                axisLabel: {
+                    textStyle: {//数字刻度样式
+                        color: '#fff',
+                        // fontSize: 12,
+                    }
+                },
+                splitLine: {
+                //分隔线样式相关
+                    length: 0, //分割线的长度
+                    lineStyle: {
+                        width: 1,
+                        color: "#fff",
+                    },
+                },
+                data: [
+                {
+                    value: 125.85,
+                    // name: '实际功率',
+                    itemStyle: {
+                    color: "rgba(75, 85, 174, 1)",
+                    },
+                },
+                {
+                    value: 137.63,
+                    // name: '理论功率',
+                    itemStyle: {
+                    color: "rgba(05, 187, 76, 1)",
+                    },
                 },
-              },
-            ],
-            title: false,
-            detail: false,
-            //     title: {
-            //         fontSize: 12
-            //     },
-            //     detail: {
-            //         width: 20,
-            //         height: 7,
-            //         fontSize: 12,
-            //         color: '#fff',
-            //         backgroundColor: 'auto',
-            //         borderRadius: 3,
-            //         formatter: ''
-            //     }
-          },
+                {
+                    value: 132.04,
+                    // name: 'AGC有功设定',
+                    itemStyle: {
+                    color: "rgba(186, 50, 55, 1)",
+                    },
+                },
+                ],
+                title: false,
+                detail: false,
+                //     title: {
+                //         fontSize: 12
+                //     },
+                //     detail: {
+                //         width: 20,
+                //         height: 7,
+                //         fontSize: 12,
+                //         color: '#fff',
+                //         backgroundColor: 'auto',
+                //         borderRadius: 3,
+                //         formatter: ''
+                //     }
+            },
         ],
       };
       option.series[0].data[0].value = this.$store.state.currentStation
@@ -560,15 +526,20 @@ export default {
   /* background-color: #ffffff; */
   margin-left: 15px;
   margin-top: 20px;
-  border-left: 1px solid #373737;
+  border: 1px solid #373737;
+  /* border-left: 1px solid #373737;
   border-right: 1px solid #373737;
-  border-bottom: 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;
 }
-
+.logo {
+  position: absolute;
+  top: 8px;
+  left: 12px;
+}
 .control {
   display: flex;
   flex-direction: row-reverse;
@@ -577,6 +548,7 @@ export default {
   color: #ffffff;
   /* margin-right: 5px; */
   position: absolute;
+  top: 30px;
   right: 10px;
   z-index: 99;
 }
@@ -718,7 +690,7 @@ export default {
   align-items: center;
   color: #ffffff;
   position: relative;
-  bottom: 18%;
+  bottom: 15%;
   left: 11%;
 }
 
@@ -737,7 +709,7 @@ export default {
   align-items: center;
   justify-content: center;
   font-size: 14px;
-  padding: 5px 3px 5px 10px;
+  padding: 5px 10px 5px 10px;
 }
 
 .power2 {
@@ -758,8 +730,9 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 600;
   padding: 2px 5px;
 }
+
 </style>

src/components/problem/areaCard.vue

@@ -581,17 +581,6 @@ export default {
   align-items: center;
   justify-content: space-between;
 }
-.num {
-  color: #fff;
-  display: inline-block;
-  width: 30px;
-  height: 30px;
-  background-color: rgba(37, 116, 219, 1);
-  border-radius: 50%;
-  line-height: 30px;
-  text-align: center;
-  box-sizing: border-box;
-}
 .body {
   border: 1px solid #373737;
   width: 100%;
@@ -607,6 +596,7 @@ export default {
   color: #ffffff;
   font-size: 14px;
   margin-left: 32px;
+  font-weight: bold;
   /* margin-top: 12px; */
   margin-bottom: 10px;
   /* width: 570px; */
@@ -657,3 +647,24 @@ export default {
   /* padding-left: 20px; */
 }
 </style>
+
+<style lang="less">
+.tit1{
+    .title{
+        font-size: 14px;
+        font-weight: bold;
+        color: #bfbfbf;
+    }
+    .num {
+        color: #fff;
+        display: inline-block;
+        width: 30px;
+        height: 30px;
+        background-color: rgba(37, 116, 219, 1);
+        border-radius: 50%;
+        line-height: 30px;
+        text-align: center;
+        box-sizing: border-box;
+    }
+}
+</style>

src/components/warning/warningCard.vue

@@ -107,6 +107,7 @@ export default {
           let val = res.data;
           if (Object.keys(val).length > 0) {
             let syzAlarmArray = this.$store.state.syzAlarmArray || [];
+            console.log('syzAlarmRank', this.$store.state.syzAlarmRank)
             val.forEach((ele) => {
               if (
                 ele.category1 === "SYZ" &&

src/views/TitleBar.vue

@@ -1,275 +1,226 @@
 /* 标题栏 */
 <template>
-  <div class="title-bar" onselectstart="return false">
-    <el-row>
-      <el-col :span="3">
-        <img
-          class="logo"
-          src="../assets/img/main_window/logo.png"
-          sytle="align-items"
-        />
-      </el-col>
-      <el-col :span="0.1">
-        <div>
-          <el-dialog
-            title="用户登录"
-            v-model="dialogVisible"
-            width="21%"
-            :before-close="handleClose"
-            :show-close="false"
-          >
-            <el-form :model="form">
-              <el-form-item :label="loginMessage"> </el-form-item>
-              <el-form-item label="用户名：" :label-width="formLabelWidth">
-                <el-input
-                  v-model="form.name"
-                  autocomplete="off"
-                  type="text"
-                  placeholder="用户名"
-                  style="width: 80%"
+    <div class="title-bar" onselectstart="return false">
+        <el-row>
+            <el-col :span="3">
+                <img
+                class="logo"
+                src="../assets/img/main_window/logo.png"
+                sytle="align-items"
+                />
+            </el-col>
+            <el-col :span="0.1">
+                <div>
+                <el-dialog
+                    title="用户登录"
+                    v-model="dialogVisible"
+                    width="21%"
+                    :before-close="handleClose"
+                    :show-close="false"
                 >
-                </el-input>
-              </el-form-item>
-              <el-form-item label="密&emsp;码：" :label-width="formLabelWidth">
-                <el-input
-                  v-model="form.psd"
-                  autocomplete="off"
-                  type="text"
-                  placeholder="密&emsp;码"
-                  style="width: 80%"
-                  show-password
-                ></el-input>
-              </el-form-item>
-              <el-form-item
-                label="验证码："
-                :label-width="formLabelWidth"
-                style="display: none"
-              >
-                <el-input
-                  v-model="form.name"
-                  autocomplete="off"
-                  type="text"
-                  placeholder="验证码"
-                  style="width: 80%"
+                    <el-form :model="form">
+                    <el-form-item :label="loginMessage"> </el-form-item>
+                    <el-form-item label="用户名：" :label-width="formLabelWidth">
+                        <el-input
+                        v-model="form.name"
+                        autocomplete="off"
+                        type="text"
+                        placeholder="用户名"
+                        style="width: 80%"
+                        >
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item label="密&emsp;码：" :label-width="formLabelWidth">
+                        <el-input
+                        v-model="form.psd"
+                        autocomplete="off"
+                        type="text"
+                        placeholder="密&emsp;码"
+                        style="width: 80%"
+                        show-password
+                        ></el-input>
+                    </el-form-item>
+                    <el-form-item
+                        label="验证码："
+                        :label-width="formLabelWidth"
+                        style="display: none"
+                    >
+                        <el-input
+                        v-model="form.name"
+                        autocomplete="off"
+                        type="text"
+                        placeholder="验证码"
+                        style="width: 80%"
+                        >
+                        <template #append
+                            ><img src="" style="width: 50px; height: 20px"
+                        /></template>
+                        </el-input>
+                    </el-form-item>
+                    </el-form>
+                    <template #footer>
+                    <span class="dialog-footer">
+                        <el-button
+                        @click="dialogVisible = false"
+                        style="
+                            background-color: rgb(100, 100, 100);
+                            color: rgb(220, 220, 220);
+                        "
+                        >取 消</el-button
+                        >
+                        <el-button type="primary" @click="login">登 录</el-button>
+                    </span>
+                    </template>
+                </el-dialog>
+                </div>
+            </el-col>
+            <el-col :span="19" style="margin-left: 90px">
+                <div class="titleinfoall">
+                    <div class="titleinfo" @dblclick="dbClicks(titleInfo.dailyPowerGeneration, '日发电量')">
+                        <span class="showTitle fontSty1">日发电量:</span>
+                        <span class="showvalue">{{
+                            titleInfo.dailyPowerGeneration?.value?.toFixed(2)
+                        }}</span>
+                        <span class="showTitle fontSty">万kW/h</span>
+                    </div>
+                    <div class="titleinfo" @dblclick="dbClicks(titleInfo.powerLossFault, '故障损失')" >
+                        <span class="showTitle fontSty1">故障损失:</span>
+                        <span
+                        :class="
+                            titleInfo.powerLossFault
+                            ? titleInfo.powerLossFault.trend === 'Counterpoise'
+                                ? 'showvalue'
+                                : titleInfo.powerLossFault.trend === 'Rise'
+                                ? 'showvalue-up'
+                                : 'showvalue-down'
+                            : ''
+                        "
+                        >{{ titleInfo.powerLossFault?.value.toFixed(2) }}</span
+                        >
+                        <span class="showTitle fontSty">万kW/h</span>
+                    </div>
+                    <div class="titleinfo" @dblclick="dbClicks(titleInfo.powerLossRestrictions, '限电损失')" >
+                        <span class="showTitle fontSty1">限电损失:</span>
+                        <span
+                        :class="
+                            titleInfo.powerLossRestrictions
+                            ? titleInfo.powerLossRestrictions.trend === 'Counterpoise'
+                                ? 'showvalue'
+                                : titleInfo.powerLossRestrictions.trend === 'Rise'
+                                ? 'showvalue-up'
+                                : 'showvalue-down'
+                            : ''
+                        "
+                        >{{ titleInfo.powerLossRestrictions?.value.toFixed(2) }}</span
+                        >
+                        <span class="showTitle fontSty">万kW/h</span>
+                    </div>
+                    <div class="titleinfo" @dblclick="dbClicks(titleInfo.powerLossInspection, '检修损失')" >
+                        <span class="showTitle fontSty1">检修损失:</span>
+                        <span
+                        :class="
+                            titleInfo.powerLossInspection
+                            ? titleInfo.powerLossInspection.trend === 'Counterpoise'
+                                ? 'showvalue'
+                                : titleInfo.powerLossInspection.trend === 'Rise'
+                                ? 'showvalue-up'
+                                : 'showvalue-down'
+                            : ''
+                        "
+                        >{{ titleInfo.powerLossInspection?.value.toFixed(2) }}</span
+                        >
+                        <span class="showTitle fontSty">万kW/h</span>
+                    </div>
+                    <div class="titleinfo" @dblclick="dbClicks(titleInfo.powerLossBurden, '受累损失')" >
+                        <span class="showTitle fontSty1">受累损失:</span>
+                        <span
+                        :class="
+                            titleInfo.powerLossBurden
+                            ? titleInfo.powerLossBurden.trend === 'Counterpoise'
+                                ? 'showvalue'
+                                : titleInfo.powerLossBurden.trend === 'Rise'
+                                ? 'showvalue-up'
+                                : 'showvalue-down'
+                            : ''
+                        "
+                        >{{ titleInfo.powerLossBurden?.value.toFixed(2) }}</span
+                        >
+                        <span class="showTitle fontSty">万kW/h</span>
+                    </div>
+                    <div class="titleinfo" @dblclick="dbClicks(titleInfo.powerLossPerformance, '性能损失')" >
+                        <span class="showTitle fontSty1">性能损失:</span>
+                        <span
+                            :class="
+                            titleInfo.powerLossPerformance
+                                ? titleInfo.powerLossPerformance.trend === 'Counterpoise'
+                                ? 'showvalue'
+                                : titleInfo.powerLossPerformance.trend === 'Rise'
+                                ? 'showvalue-up'
+                                : 'showvalue-down'
+                                : ''
+                            "
+                            >{{ titleInfo.powerLossPerformance?.value.toFixed(2) }}</span
+                        >
+                        <span class="showTitle fontSty">万kW/h</span>
+                    </div>
+                    <div class="titleinfo"  @dblclick="dbClicks(titleInfo.fieldElectricity, '场用电量')">
+                        <span class="showTitle fontSty1">场用电量:</span>
+                        <span class="showvalue">{{
+                        titleInfo.fieldElectricity?.value.toFixed(2)
+                        }}</span>
+                        <span class="showTitle fontSty">万kW/h</span>
+                    </div>
+                </div>
+            </el-col>
+            <el-col :span="1">
+                <el-popover
+                placement="bottom"
+                :width="150"
+                trigger="hover"
+                :show-arrow="false"
                 >
-                  <template #append
-                    ><img src="" style="width: 50px; height: 20px"
-                  /></template>
-                </el-input>
-              </el-form-item>
-            </el-form>
-            <template #footer>
-              <span class="dialog-footer">
-                <el-button
-                  @click="dialogVisible = false"
-                  style="
-                    background-color: rgb(100, 100, 100);
-                    color: rgb(220, 220, 220);
-                  "
-                  >取 消</el-button
-                >
-                <el-button type="primary" @click="login">登 录</el-button>
-              </span>
-            </template>
-          </el-dialog>
-        </div>
-      </el-col>
-      <el-col :span="19" style="margin-left: 23px">
-        <div class="titleinfoall">
-          <div
-            class="titleinfo"
-            @dblclick="dbClicks(titleInfo.dailyPowerGeneration, '日发电量')"
-          >
-            <ul>
-              <li>
-                <span class="showTitle">日发电量</span>
-                <span class="showvalue">{{
-                  titleInfo.dailyPowerGeneration?.value?.toFixed(2)
-                }}</span>
-                <span class="showTitle">万kW/h</span>
-              </li>
-            </ul>
-          </div>
-          <div
-            class="titleinfo"
-            @dblclick="dbClicks(titleInfo.powerLossFault, '故障损失')"
-          >
-            <ul>
-              <li>
-                <span class="showTitle">故障损失</span>
-                <span
-                  :class="
-                    titleInfo.powerLossFault
-                      ? titleInfo.powerLossFault.trend === 'Counterpoise'
-                        ? 'showvalue'
-                        : titleInfo.powerLossFault.trend === 'Rise'
-                        ? 'showvalue-up'
-                        : 'showvalue-down'
-                      : ''
-                  "
-                  >{{ titleInfo.powerLossFault?.value.toFixed(2) }}</span
-                >
-                <span class="showTitle">万kW/h</span>
-              </li>
-            </ul>
-          </div>
-          <div
-            class="titleinfo"
-            @dblclick="dbClicks(titleInfo.powerLossRestrictions, '限电损失')"
-          >
-            <ul>
-              <li>
-                <span class="showTitle">限电损失</span>
-                <span
-                  :class="
-                    titleInfo.powerLossRestrictions
-                      ? titleInfo.powerLossRestrictions.trend === 'Counterpoise'
-                        ? 'showvalue'
-                        : titleInfo.powerLossRestrictions.trend === 'Rise'
-                        ? 'showvalue-up'
-                        : 'showvalue-down'
-                      : ''
-                  "
-                  >{{ titleInfo.powerLossRestrictions?.value.toFixed(2) }}</span
-                >
-                <span class="showTitle">万kW/h</span>
-              </li>
-            </ul>
-          </div>
-          <div
-            class="titleinfo"
-            @dblclick="dbClicks(titleInfo.powerLossInspection, '检修损失')"
-          >
-            <ul>
-              <li>
-                <span class="showTitle">检修损失</span>
-                <span
-                  :class="
-                    titleInfo.powerLossInspection
-                      ? titleInfo.powerLossInspection.trend === 'Counterpoise'
-                        ? 'showvalue'
-                        : titleInfo.powerLossInspection.trend === 'Rise'
-                        ? 'showvalue-up'
-                        : 'showvalue-down'
-                      : ''
-                  "
-                  >{{ titleInfo.powerLossInspection?.value.toFixed(2) }}</span
-                >
-                <span class="showTitle">万kW/h</span>
-              </li>
-            </ul>
-          </div>
-          <div
-            class="titleinfo"
-            @dblclick="dbClicks(titleInfo.powerLossBurden, '受累损失')"
-          >
-            <ul>
-              <li>
-                <span class="showTitle">受累损失</span>
-                <span
-                  :class="
-                    titleInfo.powerLossBurden
-                      ? titleInfo.powerLossBurden.trend === 'Counterpoise'
-                        ? 'showvalue'
-                        : titleInfo.powerLossBurden.trend === 'Rise'
-                        ? 'showvalue-up'
-                        : 'showvalue-down'
-                      : ''
-                  "
-                  >{{ titleInfo.powerLossBurden?.value.toFixed(2) }}</span
-                >
-                <span class="showTitle">万kW/h</span>
-              </li>
-            </ul>
-          </div>
-          <div
-            class="titleinfo"
-            @dblclick="dbClicks(titleInfo.powerLossPerformance, '性能损失')"
-          >
-            <ul>
-              <li>
-                <span class="showTitle">性能损失</span>
-                <span
-                  :class="
-                    titleInfo.powerLossPerformance
-                      ? titleInfo.powerLossPerformance.trend === 'Counterpoise'
-                        ? 'showvalue'
-                        : titleInfo.powerLossPerformance.trend === 'Rise'
-                        ? 'showvalue-up'
-                        : 'showvalue-down'
-                      : ''
-                  "
-                  >{{ titleInfo.powerLossPerformance?.value.toFixed(2) }}</span
-                >
-                <span class="showTitle">万kW/h</span>
-              </li>
-            </ul>
-          </div>
-          <div
-            class="titleinfo"
-            @dblclick="dbClicks(titleInfo.fieldElectricity, '场用电量')"
-          >
-            <ul>
-              <li>
-                <span class="showTitle">场用电量</span>
-                <span class="showvalue">{{
-                  titleInfo.fieldElectricity?.value.toFixed(2)
-                }}</span>
-                <span class="showTitle">万kW/h</span>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </el-col>
-      <el-col :span="1">
-        <el-popover
-          placement="bottom"
-          :width="150"
-          trigger="hover"
-          :show-arrow="false"
-        >
-          <template #reference>
-            <el-button
-              @click="userClick"
-              style="
-                top: 10px;
-                right: 70px;
-                color: #ffffff;
-                position: absolute;
-                background-color: black;
-                border: none;
-                font-size: 16px;
-              "
-            >
-              {{ usreName }}</el-button
-            >
-          </template>
-          <div style="background-color: #363636">
-            <!-- <el-button class="loginoption">编&emsp;辑</el-button> -->
-            <el-button v-if="!isLogin" class="loginoption" @click="userClick"
-              >登&emsp;录</el-button
-            >
-            <br v-if="!isLogin" />
-            <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-row>
-    <DataDetails
-      @closed="closeds()"
-      v-model="display"
-      :datas="titleDetails"
-      :partsName="partsName"
-      echartsId="titleEcharts"
-      @search-data="search"
-      @original-data="originalData"
-    ></DataDetails>
-  </div>
+                <template #reference>
+                    <el-button
+                    @click="userClick"
+                    style="
+                        top: 10px;
+                        right: 70px;
+                        color: #ffffff;
+                        position: absolute;
+                        background-color: black;
+                        border: none;
+                        font-size: 16px;
+                    "
+                    >
+                    {{ usreName }}</el-button
+                    >
+                </template>
+                <div style="background-color: #363636">
+                    <!-- <el-button class="loginoption">编&emsp;辑</el-button> -->
+                    <el-button v-if="!isLogin" class="loginoption" @click="userClick"
+                    >登&emsp;录</el-button
+                    >
+                    <br v-if="!isLogin" />
+                    <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-row>
+        <DataDetails
+        @closed="closeds()"
+        v-model="display"
+        :datas="titleDetails"
+        :partsName="partsName"
+        echartsId="titleEcharts"
+        @search-data="search"
+        @original-data="originalData"
+        ></DataDetails>
+    </div>
 </template>
 
 <script>
@@ -548,19 +499,31 @@ export default {
   color: #ffffff;
   margin-right: 10px;
 }
+.fontSty{
+    font-size: 12px;
+}
+.fontSty1{
+    font-weight: bold;;
+}
 
 .showvalue {
   color: #ffffff;
+  font-size: 14px;
+  font-weight: bold;
   margin-right: 10px;
 }
 
 .showvalue-down {
   color: #50ae56;
+  font-size: 14px;
+  font-weight: bold;
   margin-right: 10px;
 }
 
 .showvalue-up {
   color: red;
+  font-size: 14px;
+  font-weight: bold;
   margin-right: 10px;
 }
 </style>