修改登录页面及头部logo，修改两个明细数据，修改风功率监视和状态监视颜色切换

src/App.vue

@@ -14,7 +14,7 @@
         <div class="header-title" @click="handleClickJump()">
           <!-- <img v-if="$store.state.themeName === 'dark'" src="./assets/projectLogo.png" alt="" />
         <img v-if="$store.state.themeName === 'light'" src="./assets/light-projectLogo.png" alt="" /> -->
-          <span
+          <!-- <span
             :style="
               $store.state.themeName === 'dark'
                 ? 'color:#fff; font-size:18px;font-family: SimHei'
@@ -22,7 +22,8 @@
             "
           >
             >>发电场站生产实时运营管理平台</span
-          >
+          > -->
+          <img src="./assets/loginImage/logoTit.png" alt="" />
         </div>
         <div class="header-menu-body">
           <Header @proStyle="proStyleFn" />
@@ -355,6 +356,9 @@ body {
       padding-left: 20px;
       margin: auto;
       color: #fff;
+      img{
+        width: 400px;
+      }
     }
     .header-menu-body {
       flex-grow: 1;

src/views/layout/Header.vue

@@ -55,7 +55,7 @@
           </template>
         </el-dropdown>
       </li>
-      <li class="header-menu-user-title">
+      <!-- <li class="header-menu-user-title">
         <el-tooltip
           effect="dark"
           content="后台管理系统"
@@ -66,7 +66,7 @@
             <SvgIcon svgid="svg-admin-set"></SvgIcon>
           </i>
         </el-tooltip>
-      </li>
+      </li> -->
     </ul>
   </div>
 </template>

src/views/layout/login-page.vue

@@ -1,10 +1,11 @@
 <template>
     <div class="login-panel">
         <div class="login-title">
-            <p>
+            <!-- <p>
                 <img src="@/assets/imgs/login-icon.png" alt="" class="login-img" />发电场站
             </p>
-            <div class="login-name">生产实时运营管理平台</div>
+            <div class="login-name">生产实时运营管理平台</div> -->
+            <img src="@/assets/loginImage/logo.png" alt="" />
         </div>
         <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
             <el-form-item prop="username">

src/views/stateMonitor/DetailMatrix/dataJson.json

@@ -28,7 +28,7 @@
     },
     "showMatrixListdata": [
         {
-            "wpname": "测试1",
+            "wpname": "太旗卧牛山",
             "czlx": "-1",
             "jrts": 25,
             "djts": 21,
@@ -43,10 +43,14 @@
             "bzgl": 1254,
             "llgl": 125445,
             "sjgl": 1254,
-            "wtlist": []
+            "wtlist": {
+                "一期": [],
+                "二期": [],
+                "三期": []
+            }
         },
         {
-            "wpname": "测试2",
+            "wpname": "右玉高家堡",
             "czlx": "-1",
             "jrts": 25,
             "djts": 21,
@@ -61,10 +65,16 @@
             "bzgl": 1254,
             "llgl": 125445,
             "sjgl": 1254,
-            "wtlist": []
+            "wtlist": {
+                "一期": [],
+                "二期": [],
+                "三期": [],
+                "四期": [],
+                "五期": []
+            }
         },
         {
-            "wpname": "测试3",
+            "wpname": "平鲁虎头山",
             "czlx": "-1",
             "jrts": 25,
             "djts": 21,
@@ -79,10 +89,15 @@
             "bzgl": 1254,
             "llgl": 125445,
             "sjgl": 1254,
-            "wtlist": []
+            "wtlist": {
+                "一期": [],
+                "二期": [],
+                "三期": [],
+                "四期": []
+            }
         },
         {
-            "wpname": "测试4",
+            "wpname": "广灵劲风",
             "czlx": "-1",
             "jrts": 25,
             "djts": 21,
@@ -97,10 +112,13 @@
             "bzgl": 1254,
             "llgl": 125445,
             "sjgl": 1254,
-            "wtlist": []
+            "wtlist": {
+                "一期": [],
+                "二期": []
+            }
         },
         {
-            "wpname": "测试5",
+            "wpname": "浑源峰岳",
             "czlx": "-1",
             "jrts": 25,
             "djts": 21,
@@ -115,7 +133,52 @@
             "bzgl": 1254,
             "llgl": 125445,
             "sjgl": 1254,
-            "wtlist": []
+            "wtlist": {
+                "一期": [],
+                "二期": []
+            }
+        },
+        {
+            "wpname": "方山宝塔山",
+            "czlx": "-1",
+            "jrts": 25,
+            "djts": 21,
+            "bwts": 15,
+            "gzts": 38,
+            "jxts": 15,
+            "xdts": 17,
+            "slts": 29,
+            "lxts": 38,
+            "spped": 14,
+            "ycgl": 21556,
+            "bzgl": 1254,
+            "llgl": 125445,
+            "sjgl": 1254,
+            "wtlist": {
+                "一期": [],
+                "二期": []
+            }
+        },
+        {
+            "wpname": "阳高采凉山",
+            "czlx": "-1",
+            "jrts": 25,
+            "djts": 21,
+            "bwts": 15,
+            "gzts": 38,
+            "jxts": 15,
+            "xdts": 17,
+            "slts": 29,
+            "lxts": 38,
+            "spped": 14,
+            "ycgl": 21556,
+            "bzgl": 1254,
+            "llgl": 125445,
+            "sjgl": 1254,
+            "wtlist": {
+                "一期": [],
+                "二期": []
+            }
         }
     ]
 }

src/views/stateMonitor/DetailMatrix/index.vue

@@ -178,150 +178,154 @@
               </div>
             </div>
             <!-- wt v-show="value['switch' + index]"-->
-            <div class="matrix-list">
-              <div
-                class="matrix-card"
-                style="cursor: pointer"
-                :class="
-                  val.status !== '' && colorList[Number(val.status)]
-                    ? colorList[Number(val.status)]
-                    : 'gray'
-                "
-                v-for="(val, indexe) in value.wtlist"
-                :key="indexe"
-              >
-                <div class="info">
-                  <!-- wtname + 状态 -->
-                  <div
-                    class="card-left"
-                    @click="handleLeftClick(val, value.czlx, value.wpid)"
-                  >
-                    <!-- <i class="lock" @mouseenter="handleMouse"></i> -->
-                    <div class="card-name">{{ val.wtname }}</div>
-                    <i
-                      class="svg-icon svg-icon-sm"
-                      :class="
-                        val.status === 4 || val.status === 5
-                          ? 'svg-icon-white'
-                          : `svg-icon-${colorList[Number(val.status)]}`
-                      "
-                    >
-                      <SvgIcon :svgid="mapping[val.status]"></SvgIcon
-                    ></i>
-                  </div>
-                  <div class="dashed" />
-                  <!-- 数据项 -->
-                  <div
-                    class="card-right"
-                    @click="handleRightClick(value.czlx, val.wtid)"
-                  >
-                    <div class="right-item">
-                      <i
-                        class="svg-icon svg-icon-sm"
-                        :class="
-                          val.status === 4 || val.status === 5
-                            ? 'svg-icon-white'
-                            : `svg-icon-${colorList[Number(val.status)]}`
-                        "
-                      >
-                        <SvgIcon svgid="svg-P"></SvgIcon
-                      ></i>
-                      <div class="right-value">
-                        {{
-                          val.power
-                            ? val && Number(val.power)?.toFixed(2)
-                            : "0.00"
-                        }}
-                      </div>
-                      <!-- <input style="width: 200px" :value="val.power" /> -->
-                    </div>
-                    <div class="right-item">
-                      <i
-                        class="svg-icon svg-icon-sm"
-                        :class="
-                          val.status === 4 || val.status === 5
-                            ? 'svg-icon-white'
-                            : `svg-icon-${colorList[Number(val.status)]}`
-                        "
-                      >
-                        <SvgIcon
-                          :svgid="value.czlx == '-1' ? 'svg-W' : 'svg-A'"
-                        ></SvgIcon
-                      ></i>
-                      <div class="right-value">
-                        {{
-                          value.czlx == "-1"
-                            ? val.speed
-                              ? Number(val.speed)?.toFixed(2)
-                              : "0.00"
-                            : val.current
-                            ? Number(val.current)?.toFixed(2)
-                            : "0.00"
-                        }}
-                      </div>
-                      <!-- <input
-                        style="width: 200px"
-                        :value="
-                          value.czlx == '-1'
-                            ? val.speed
-                              ? Number(val.speed)?.toFixed(2)
-                              : '0.00'
-                            : val.current
-                            ? Number(val.current)?.toFixed(2)
-                            : '0.00'
-                        "
-                      /> -->
-                    </div>
-                    <div class="right-item">
-                      <i
-                        class="svg-icon svg-icon-sm"
+            <div class="data_views_text" v-for="(vals, key, index) in value.wtlist" :key="index">
+                <div class="textsx">{{key}}</div>
+                <div class="matrix-list">
+                    <div
+                        class="matrix-card"
+                        style="cursor: pointer"
                         :class="
-                          val.status === 4 || val.status === 5
-                            ? 'svg-icon-white'
-                            : `svg-icon-${colorList[Number(val.status)]}`
+                        val.status !== '' && colorList[Number(val.status)]
+                            ? colorList[Number(val.status)]
+                            : 'gray'
                         "
-                      >
-                        <SvgIcon
-                          :svgid="value.czlx == '-1' ? 'svg-R' : 'svg-V'"
-                        ></SvgIcon
-                      ></i>
-                      <div class="right-value">
-                        {{
-                          value.czlx == "-1"
-                            ? val.transfer
-                              ? Number(val.transfer)?.toFixed(2)
-                              : "0.00"
-                            : val.voltage
-                            ? Number(val.voltage)?.toFixed(2)
-                            : "0.00"
-                        }}
-                      </div>
-                      <!-- <input
-                        style="width: 200px"
-                        :value="
-                          value.czlx == '-1'
-                            ? val.transfer
-                              ? Number(val.transfer)?.toFixed(2)
-                              : '0.00'
-                            : val.voltage
-                            ? Number(val.voltage)?.toFixed(2)
-                            : '0.00'
-                        "
-                      /> -->
+                        v-for="(val, indexe) in vals"
+                        :key="indexe"
+                    >
+                        <div class="info">
+                        <!-- wtname + 状态 -->
+                        <div
+                            class="card-left"
+                            @click="handleLeftClick(val, value.czlx, value.wpid)"
+                        >
+                            <!-- <i class="lock" @mouseenter="handleMouse"></i> -->
+                            <div class="card-name">{{ val.wtname }}</div>
+                            <i
+                            class="svg-icon svg-icon-sm"
+                            :class="
+                                val.status === 4 || val.status === 5
+                                ? 'svg-icon-white'
+                                : `svg-icon-${colorList[Number(val.status)]}`
+                            "
+                            >
+                            <SvgIcon :svgid="mapping[val.status]"></SvgIcon
+                            ></i>
+                        </div>
+                        <div class="dashed" />
+                        <!-- 数据项 -->
+                        <div
+                            class="card-right"
+                            @click="handleRightClick(value.czlx, val.wtid)"
+                        >
+                            <div class="right-item">
+                            <i
+                                class="svg-icon svg-icon-sm"
+                                :class="
+                                val.status === 4 || val.status === 5
+                                    ? 'svg-icon-white'
+                                    : `svg-icon-${colorList[Number(val.status)]}`
+                                "
+                            >
+                                <SvgIcon svgid="svg-P"></SvgIcon
+                            ></i>
+                            <div class="right-value">
+                                {{
+                                val.power
+                                    ? val && Number(val.power)?.toFixed(2)
+                                    : "0.00"
+                                }}
+                            </div>
+                            <!-- <input style="width: 200px" :value="val.power" /> -->
+                            </div>
+                            <div class="right-item">
+                            <i
+                                class="svg-icon svg-icon-sm"
+                                :class="
+                                val.status === 4 || val.status === 5
+                                    ? 'svg-icon-white'
+                                    : `svg-icon-${colorList[Number(val.status)]}`
+                                "
+                            >
+                                <SvgIcon
+                                :svgid="value.czlx == '-1' ? 'svg-W' : 'svg-A'"
+                                ></SvgIcon
+                            ></i>
+                            <div class="right-value">
+                                {{
+                                value.czlx == "-1"
+                                    ? val.speed
+                                    ? Number(val.speed)?.toFixed(2)
+                                    : "0.00"
+                                    : val.current
+                                    ? Number(val.current)?.toFixed(2)
+                                    : "0.00"
+                                }}
+                            </div>
+                            <!-- <input
+                                style="width: 200px"
+                                :value="
+                                value.czlx == '-1'
+                                    ? val.speed
+                                    ? Number(val.speed)?.toFixed(2)
+                                    : '0.00'
+                                    : val.current
+                                    ? Number(val.current)?.toFixed(2)
+                                    : '0.00'
+                                "
+                            /> -->
+                            </div>
+                            <div class="right-item">
+                            <i
+                                class="svg-icon svg-icon-sm"
+                                :class="
+                                val.status === 4 || val.status === 5
+                                    ? 'svg-icon-white'
+                                    : `svg-icon-${colorList[Number(val.status)]}`
+                                "
+                            >
+                                <SvgIcon
+                                :svgid="value.czlx == '-1' ? 'svg-R' : 'svg-V'"
+                                ></SvgIcon
+                            ></i>
+                            <div class="right-value">
+                                {{
+                                value.czlx == "-1"
+                                    ? val.transfer
+                                    ? Number(val.transfer)?.toFixed(2)
+                                    : "0.00"
+                                    : val.voltage
+                                    ? Number(val.voltage)?.toFixed(2)
+                                    : "0.00"
+                                }}
+                            </div>
+                            <!-- <input
+                                style="width: 200px"
+                                :value="
+                                value.czlx == '-1'
+                                    ? val.transfer
+                                    ? Number(val.transfer)?.toFixed(2)
+                                    : '0.00'
+                                    : val.voltage
+                                    ? Number(val.voltage)?.toFixed(2)
+                                    : '0.00'
+                                "
+                            /> -->
+                            </div>
+                        </div>
+                        </div>
+                        <div class="matrix-progress">
+                        <div
+                            class="progress-block"
+                            :style="{ width: (val.rate > 100 ? 100 : val.rate) + '%' }"
+                            :class="
+                            findUpColor(unpaidList, parseInt(Number(val.ssqfzt)) + 1)
+                            "
+                        ></div>
+                        </div>
                     </div>
-                  </div>
                 </div>
-                <div class="matrix-progress">
-                  <div
-                    class="progress-block"
-                    :style="{ width: (val.rate > 100 ? 100 : val.rate) + '%' }"
-                    :class="
-                      findUpColor(unpaidList, parseInt(Number(val.ssqfzt)) + 1)
-                    "
-                  ></div>
-                </div>
-              </div>
             </div>
+            
           </div>
         </div>
       </el-scrollbar>
@@ -714,20 +718,23 @@ export default {
     this.sourceMap = dataJson.sourceMapData
     this.showMatrixList = dataJson.showMatrixListdata
     dataJson.showMatrixListdata.forEach((it, index) =>{
-        it.wtlist = new Array(125).fill({
-            wtname: it.wpname,
-            status: index === 4 ? 6 : index,
-            // status: 4,
-            czlx: -1,
-            wtid: 5,
-            power: 2514,
-            speed: 13,
-            current: 251,
-            transfer: 21,
-            voltage: 25,
-            rate: 395,
-            ssqfzt: 1
-        })
+        for(let i in it.wtlist) {
+            it.wtlist[i] = new Array(35).fill({
+                wtname: "1B01",
+                // status: index === 2 ? 6 : index,
+                status: i.indexOf("一") > -1 ? 1 : i.indexOf("二") > -1 ? 2 : 
+                i.indexOf("三") > -1 ? 3 : i.indexOf("四") > -1 ? 4 : i.indexOf("五") > -1 ? 5 : 1,
+                czlx: -1,
+                wtid: 5,
+                power: 2514,
+                speed: 13,
+                current: 251,
+                transfer: 21,
+                voltage: 25,
+                rate: 395,
+                ssqfzt: 1
+            })
+        }
     })
   },
 
@@ -799,27 +806,6 @@ export default {
     },
     // 状态切换改变数据
     handleClickWind() {
-      //   const tempWtArray = this.BASE.deepCopy(sourceMap.powerVos);
-
-      //   tempWtArray?.forEach((ele) => {
-      //     ele.spWtlist = this.chunkArray(ele.wtlist, 100);
-      //   });
-
-      //   sourceMap.powerVos.forEach((ele) => {
-      //     ele.wtlist = [];
-      //   });
-
-      //   for (let i = 0; i < sourceMap.powerVos.length; i++) {
-      //     const ele = sourceMap.powerVos[i];
-      //     for (let j = 0; j < tempWtArray[i]?.spWtlist?.length; j++) {
-      //       setTimeout(() => {
-      //         ele.wtlist = ele.wtlist.concat(tempWtArray[i].spWtlist[j]);
-      //       }, 500);
-      //     }
-      //   }
-
-      //   console.log(11, tempWtArray);
-      //   console.log(22, sourceMap);
       this.showMatrixList = JSON.parse(JSON.stringify(this.sourceMap.powerVos));
       let matrixList = this.sourceMap.powerVos;
       if (this.fillFjzt !== "all") {
@@ -1732,8 +1718,15 @@ export default {
           }
         }
       }
-
-      .matrix-list {
+        .data_views_text{
+            display: flex;
+            .textsx{
+                writing-mode: vertical-lr;
+                font-size: 14px;
+                letter-spacing: 5px;
+                text-align: center;
+            }
+            .matrix-list {
         display: grid;
         justify-content: space-between;
         grid-template-columns: repeat(auto-fill, 142px);
@@ -1920,7 +1913,7 @@ export default {
 
             .info {
               border-bottom: 1px solid #ba3237;
-              background-color: rgba(186, 50, 55, 1);
+              background-color: rgba(186, 50, 55, 0.15);
 
               .dashed {
                 width: 1px;
@@ -1999,6 +1992,8 @@ export default {
           }
         }
       }
+        }
+      
     }
 
     .active_vie {

src/views/stateMonitor/LightMatrix/dataJson.json

@@ -12,7 +12,7 @@
     },
     "showMatrixListdata": [
         {
-            "wpname": "测试1",
+            "wpname": "太旗卧牛山",
             "jrts": 25,
             "djts": 21,
             "bwts": 15,
@@ -26,10 +26,14 @@
             "bzgl": 1254,
             "llgl": 125445,
             "sjgl": 1254,
-            "wtlist": []
+            "wtlist": {
+                "一期": [],
+                "二期": [],
+                "三期": []
+            }
         },
         {
-            "wpname": "测试2",
+            "wpname": "右玉高家堡",
             "jrts": 25,
             "djts": 21,
             "bwts": 15,
@@ -43,10 +47,16 @@
             "bzgl": 1254,
             "llgl": 125445,
             "sjgl": 1254,
-            "wtlist": []
+            "wtlist": {
+                "一期": [],
+                "二期": [],
+                "三期": [],
+                "四期": [],
+                "五期": []
+            }
         },
         {
-            "wpname": "测试3",
+            "wpname": "平鲁虎头山",
             "jrts": 25,
             "djts": 21,
             "bwts": 15,
@@ -60,10 +70,15 @@
             "bzgl": 1254,
             "llgl": 125445,
             "sjgl": 1254,
-            "wtlist": []
+            "wtlist": {
+                "一期": [],
+                "二期": [],
+                "三期": [],
+                "四期": []
+            }
         },
         {
-            "wpname": "测试4",
+            "wpname": "广灵劲风",
             "jrts": 25,
             "djts": 21,
             "bwts": 15,
@@ -77,10 +92,13 @@
             "bzgl": 1254,
             "llgl": 125445,
             "sjgl": 1254,
-            "wtlist": []
+            "wtlist": {
+                "一期": [],
+                "二期": []
+            }
         },
         {
-            "wpname": "测试5",
+            "wpname": "浑源峰岳",
             "jrts": 25,
             "djts": 21,
             "bwts": 15,
@@ -94,7 +112,50 @@
             "bzgl": 1254,
             "llgl": 125445,
             "sjgl": 1254,
-            "wtlist": []
+            "wtlist": {
+                "一期": [],
+                "二期": []
+            }
+        },
+        {
+            "wpname": "方山宝塔山",
+            "jrts": 25,
+            "djts": 21,
+            "bwts": 15,
+            "gzts": 38,
+            "jxts": 15,
+            "xdts": 17,
+            "slts": 29,
+            "lxts": 38,
+            "spped": 14,
+            "ycgl": 21556,
+            "bzgl": 1254,
+            "llgl": 125445,
+            "sjgl": 1254,
+            "wtlist": {
+                "一期": [],
+                "二期": []
+            }
+        },
+        {
+            "wpname": "阳高采凉山",
+            "jrts": 25,
+            "djts": 21,
+            "bwts": 15,
+            "gzts": 38,
+            "jxts": 15,
+            "xdts": 17,
+            "slts": 29,
+            "lxts": 38,
+            "spped": 14,
+            "ycgl": 21556,
+            "bzgl": 1254,
+            "llgl": 125445,
+            "sjgl": 1254,
+            "wtlist": {
+                "一期": [],
+                "二期": []
+            }
         }
     ]
 }

src/views/stateMonitor/LightMatrix/index.vue

@@ -357,19 +357,31 @@
           > -->
         </el-row>
 
-        <div
-          class="data_views"
-          :class="{ active_vie: item.wtlist.length == 0 }"
-        >
-          <span
-            v-for="(subItem, index) in item.wtlist"
-            :class="getColor(subItem?.status)"
-            :key="index"
-            @click="goDetails(subItem, item.czlx, item.wpid)"
-            >{{ subItem.wtname }}
-            <!-- <i class="lock"></i> -->
-          </span>
+        <div class="data_views_text" v-for="(value, key, index) in item.wtlist" :key="index">
+            <div class="textsx">{{key}}</div>
+            <div class="data_views" :class="{ active_vie: value.length == 0 }">
+                <div
+                    v-for="(subItem, index) in value"
+                    :key="index"
+                    @click="goDetails(subItem, item.czlx, item.wpid)"
+                    >
+                    <div class="subItemstatus" :class="getColor(subItem?.status)">
+                        <div style="align-items: center;display: flex;width: 40px;padding: 0 2px;">{{ subItem.wtname }}</div>
+                        <div style="height: 40px">
+                            <div style="height: 20px;align-items: center;display: flex;">
+                                <span style="width: 35px;display: inline-block;text-align: end;">{{ subItem.czlx }}</span>
+                                <span style="width: 30px;display: inline-block;text-align: end;">m/s</span>
+                            </div>
+                            <div style="height: 20px;align-items: center;display: flex;">
+                                <span style="width: 35px;display: inline-block;text-align: end;">{{ subItem.czlx }}</span>
+                                <span style="width: 30px;display: inline-block;text-align: end;">MW</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
+        
       </div>
     </el-scrollbar>
   </div>
@@ -624,12 +636,16 @@ export default {
     this.sourceMap = dataJson.sourceMapData
     this.showMatrixList = dataJson.showMatrixListdata
     dataJson.showMatrixListdata.forEach((it, index) =>{
-        it.wtlist = new Array(125).fill({
-            wtname: it.wpname,
-            status: index === 2 ? 6 : index,
-            czlx: 251,
-            wpid: 5
-        })
+        for(let i in it.wtlist) {
+            it.wtlist[i] = new Array(35).fill({
+                wtname: "1B01",
+                // status: index === 2 ? 6 : index,
+                status: i.indexOf("一") > -1 ? 1 : i.indexOf("二") > -1 ? 2 : 
+                i.indexOf("三") > -1 ? 3 : i.indexOf("四") > -1 ? 4 : i.indexOf("五") > -1 ? 5 : 1,
+                czlx: 251,
+                wpid: 5
+            })
+        }
     })
     
     let that = this;
@@ -1089,83 +1105,95 @@ export default {
     }
   }
 
-  .data_views {
-    padding: 5px 0;
-    display: grid;
-    justify-content: space-between;
-    grid-template-columns: repeat(auto-fill, 60px);
+    .data_views_text{
+        display: flex;
+        .textsx{
+            writing-mode: vertical-lr;
+            font-size: 14px;
+            letter-spacing: 5px;
+            text-align: center;
+        }
+        .data_views {
+            width: 99%;
+            padding: 5px 0;
+            display: grid;
+            justify-content: space-between;
+            grid-template-columns: repeat(auto-fill, 110px);
 
-    span {
-      cursor: pointer;
-      display: inline-block;
-      min-width: 60px;
-      height: 22px;
-      line-height: 22px;
-      text-align: center;
-      border: 1px solid #4b55ae;
-      color: #4b55ae;
-      border-radius: 2px;
-      margin-bottom: 3px;
-      margin-right: 4px;
-      font-size: 13px;
-      position: relative;
-      .lock {
-        width: 0;
-        height: 0;
-        border-top: 8px solid #fff;
-        border-right: 8px solid transparent;
-        position: absolute;
-        top: 0;
-        left: 0;
-      }
-    }
+            .subItemstatus {
+            cursor: pointer;
+            display: flex;
+            justify-content: space-around;
+            min-width: 110px;
+            // height: 30px;
+            // line-height: 30px;
+            text-align: center;
+            border: 1px solid #4b55ae;
+            color: #4b55ae;
+            border-radius: 2px;
+            margin-bottom: 3px;
+            margin-right: 4px;
+            font-size: 13px;
+            position: relative;
+            .lock {
+                width: 0;
+                height: 0;
+                border-top: 8px solid #fff;
+                border-right: 8px solid transparent;
+                position: absolute;
+                top: 0;
+                left: 0;
+            }
+            }
 
-    .card_hover {
-      background: #1a7ccd;
-    }
-    // 待机
-    .blue {
-      color: #1c99ff;
-      border-color: #1c99ff;
-    }
-    // 并网
-    .green {
-      color: #05bb4c;
-      border-color: #05bb4c;
-    }
-    // 限电
-    .pink {
-      color: #c530c8;
-      border-color: #c530c8;
-    }
-    // 故障
-    .red {
-      color: #fff;
-      border-color: #ba3237;
-      background-color: #ba3237;
-    }
-    // 检修
-    .orange {
-      color: #e17d24;
-      border-color: #e17d24;
-    }
-    // 受累
-    .write {
-      color: #ffffff;
-      border-color: rgba(255, 255, 255, 1);
-    }
-    // 离线
-    .gray {
-      color: #a7a7a7;
-      border-color: #606769;
-      background-color: rgba(96, 103, 105, 0.2);
-    }
+            .card_hover {
+            background: #1a7ccd;
+            }
+            // 待机
+            .blue {
+            color: #1c99ff;
+            border-color: #1c99ff;
+            }
+            // 并网
+            .green {
+            color: #05bb4c;
+            border-color: #05bb4c;
+            }
+            // 限电
+            .pink {
+            color: #c530c8;
+            border-color: #c530c8;
+            }
+            // 故障
+            .red {
+            color: #fff;
+            border-color: #ba3237;
+            // background-color: #ba3237;
+            }
+            // 检修
+            .orange {
+            color: #e17d24;
+            border-color: #e17d24;
+            }
+            // 受累
+            .write {
+            color: #ffffff;
+            border-color: rgba(255, 255, 255, 1);
+            }
+            // 离线
+            .gray {
+            color: #a7a7a7;
+            border-color: #606769;
+            background-color: rgba(96, 103, 105, 0.2);
+            }
 
-    .line_ll {
-      color: #ffffff !important;
-      border-color: #606701 !important;
-      background-color: #606239 !important;
+            .line_ll {
+            color: #ffffff !important;
+            border-color: #606701 !important;
+            background-color: #606239 !important;
+            }
+        }
     }
-  }
+  
 }
 </style>

src/views/stateMonitor/Status/Status.vue

@@ -1,5 +1,5 @@
 <template>
-  <!-- <HeaderNav @typeFlag="typeFlag" :isAll="true" /> -->
+  <HeaderNav @typeFlag="typeFlag" :isAll="true" />
   <div class="status">
       <div class="simp_content" v-if="datas.length" >
         <div class="" v-for="(data, index) of datas" :key="index">

src/views/stateMonitor/Status/components/status-panel.vue

@@ -5,7 +5,7 @@
         <p>{{ data.wpname }}</p>
         <p>
           <!-- <img src="img/images/gridBac.png" /> -->
-          <span>{{ data.jrts }}台</span>
+          <span class="titleApan" :data-type="$store.state.moreSty">{{ data.jrts }}台</span>
         </p>
       </li>
       <li class="simp_first">
@@ -57,7 +57,7 @@
               <p>{{ (data.type == -1 ? "风功" : "光功") + "率:" }}</p>
               <!-- <p>{{ "风功率:" }}</p> -->
               <p class="val_tit">未来15分钟</p>
-              <p class="val_name grd_name">{{ data.ycgl.toFixed(2) }}</p>
+              <p class="val_name grd_name dataType" :data-type="$store.state.moreSty">{{ data.ycgl.toFixed(2) }}</p>
             </div>
             <p class="unit_name"></p>
             <p class="unit_val"></p>
@@ -68,11 +68,11 @@
               {{ data.type == -1 ? "测风塔:" : "气象站:" }}
             </p>
             <p class="val_tit">风速</p>
-            <p class="val_name">
+            <p class="val_name dataType" :data-type="$store.state.moreSty">
               {{ (data.qxzfs.toFixed(2) || 0) + "m/s" }}
             </p>
             <p class="unit_name">风向</p>
-            <p class="unit_val">
+            <p class="unit_val dataType" :data-type="$store.state.moreSty">
               {{ (data.qxzfx.toFixed(2) || 0) + "°" }}
             </p>
           </li>
@@ -80,7 +80,7 @@
             <div class="covers" v-if="data.qcjrzt && !data.djljrzt"></div>
             <p>电能量表:</p>
             <p class="val_tit">发电量</p>
-            <p class="val_name">
+            <p class="val_name dataType" :data-type="$store.state.moreSty">
               {{ data.swdl.toFixed(2) + "万kWh" }}
             </p>
             <p class="unit_name"></p>
@@ -195,13 +195,17 @@ li {
       right: -38px;
       top: 0;
     }
-
-    span {
+    .titleApan {
       position: absolute;
       right: 12px;
       font-size: 16px;
       font-family: Arial;
-      color: #05bb4c;
+    }
+    .titleApan[data-type~="greenSty"] {
+        color: #05bb4c;
+    }
+    .titleApan[data-type~="blueSty"] {
+        color: #054bbb;
     }
   }
   .simp_first {
@@ -324,6 +328,13 @@ li {
       line-height: 30px;
     }
 
+    .dataType[data-type~="greenSty"] {
+        color: #05bb4c;
+    }
+    .dataType[data-type~="blueSty"] {
+        color: #054bbb;
+    }
+
     .unit_name {
       //position: relative;
     }
@@ -512,6 +523,12 @@ li {
       margin-left: 8px;
       line-height: 30px;
     }
+    .dataType[data-type~="greenSty"] {
+        color: #05bb4c;
+    }
+    .dataType[data-type~="blueSty"] {
+        color: #054bbb;
+    }
 
     .unit_name {
       //position: relative;
@@ -543,14 +560,19 @@ li {
       right: -38px;
       top: 0;
     }
-
-    span {
+    .titleApan[data-type~="greenSty"] {
+        color: #05bb4c;
+    }
+    .titleApan[data-type~="blueSty"] {
+        color: #054bbb;
+    }
+    .titleApan {
       position: absolute;
       right: 12px;
       font-size: 16px;
       font-family: Arial;
-      color: #05bb4c;
     }
+
   }
 }
 </style>

src/views/stateMonitor/powerPredictMatrix/components/multiple-line-chart.vue

@@ -31,11 +31,10 @@ export default {
       id: "",
       chart: null,
       chartName: [
-        { name: "实际功率", name1: "实际功率", code: "sjgl", color: "#1c99ff" },
-        { name: "理论功率", name1: "理论功率", code: "llgl", color: "#ff8700" },
-        { name: "预测功率", name1: "预测功率", code: "ycgl", color: "#c530c8" },
-        { name: "实际风速", name1: "实际光照", code: "pjfs", color: "#05BB4C" },
-        { name: "预测风速", name1: "预测光照", code: "ycfs", color: "#f8de5b" },
+        { name: "超短期", name1: "超短期", code: "sjgl", color: "#1c99ff" },
+        { name: "短期当天", name1: "短期当天", code: "llgl", color: "#ff8700" },
+        { name: "短期次天", name1: "短期次天", code: "ycgl", color: "#c530c8" },
+        { name: "短期三天", name1: "短期三天", code: "pjfs", color: "#05BB4C" },
       ],
     };
   },
@@ -50,39 +49,7 @@ export default {
         for (let key in this.chartData) {
           this.chartName.forEach((ele) => {
             if (ele.code == key) {
-              if (ele.code.includes("fs")) {
-                series.push({
-                  name: this.type == -1 ? ele.name : ele.name1,
-                  type: "line",
-                  symbol: "circle",
-                  showAllSymbol: true,
-                  yAxisIndex: 1,
-                  symbolSize: 0,
-                  smooth: true,
-                  lineStyle: {
-                    normal: {
-                      width: 1,
-                      color: ele.color,
-                      type: "dashed",
-                    },
-                    //   borderColor: "rgba(0,0,0,.4)",
-                  },
-                  itemStyle: {
-                    color: ele.color,
-                  },
-                  tooltip: {
-                    show: true,
-                  },
-
-                  data: this.chartData[key].map((item) => {
-                    return {
-                      value: item,
-                      code: this.type == -1 ? ele.name : ele.name1,
-                    };
-                  }),
-                });
-              } else {
-                series.push({
+              series.push({
                   name: this.type == -1 ? ele.name : ele.name1,
                   type: "line",
                   symbol: "circle",
@@ -110,7 +77,6 @@ export default {
                     };
                   }),
                 });
-              }
             }
           });
         }
@@ -144,22 +110,10 @@ export default {
               var unit = `<span style='font-size:14px'>`;
 
               htmlStr += mark; //一个点
-              if (param.seriesName.includes("功率")) {
-                htmlStr += `${seriesName} : ${
-                  value != null ? value + unit + " MW</span>" : "--"
-                }`; //圆点后面显示的文本
-              } else {
-                htmlStr += `${seriesName} : ${
-                  value != null
-                    ? value +
-                      `${
-                        data.code.includes("光照")
-                          ? unit + " W/m²</span>"
-                          : unit + " m/s</span>"
-                      }`
-                    : "--"
-                }`; //圆点后面显示的文本
-              }
+            htmlStr += `${seriesName} : ${
+                value != null ? value + unit + " MW</span>" : "--"
+            }`; //圆点后面显示的文本
+              
               htmlStr += "</div>";
             }
             return htmlStr;
@@ -227,24 +181,7 @@ export default {
                 type: "dashed",
               },
             },
-          },
-          {
-            name: this.type == -1 ? "m/s" : "W/m²",
-            nameTextStyle: {
-              color: "#93989A",
-            },
-            type: "value",
-            axisLabel: {
-              show: true,
-              formatter: "{value}",
-              textStyle: {
-                color: "#93989A",
-              },
-            },
-            splitLine: {
-              show: false,
-            },
-          },
+          }
         ],
         series: this.series || [],
       };

src/views/stateMonitor/powerPredictMatrix/dataJson.json

@@ -2,58 +2,466 @@
     "code": 0,
     "powerData": [
         {
-            "name": "测试风场1",
-            "ycgl": [147,258,369,123,456,789,159,357],
-            "llgl": [123,258,159,123,456,789,159,357],
-            "sjgl": [147,123,357,123,456,357,159,357],
-            "pjfs": [147,258,369,357,456,357,159,357],
-            "ycfs": [147,258,123,123,456,123,159,357],
-            "xAxis": ["09-09 02:00:00","09-10 02:00:00","09-11 02:00:00","09-12 02:00:00","09-12 02:00:00","09-13 02:00:00","09-14 02:00:00","09-15 02:00:00"]
+            "name": "太旗卧牛山",
+            "ycgl": [147,258,369,123,456,789,159,357,147,258,123,123],
+            "llgl": [123,258,159,123,456,789,159,357,258,369,357,456],
+            "sjgl": [147,123,357,123,456,357,159,357,147,258,123,123],
+            "pjfs": [147,258,369,357,456,357,159,357,369,357,456,357],
+            "ycfs": [147,258,123,123,456,123,159,357,369,357,456,357],
+            "xAxis": ["00:00","01:00","02:00","03:00","04:00","05:00","06:00","07:00","08:00","09:00","10:00","11:00"],
+            "chartMessageArr": [
+                {
+                    "title": "第一层平均风速",
+                    "num": 0,
+                    "nuit": "M/S"
+                },
+                {
+                    "title": "第一层平均风向",
+                    "num": 0,
+                    "nuit": "°"
+                },
+                {
+                    "title": "第一层温度",
+                    "num": 0,
+                    "nuit": "°C"
+                },
+                {
+                    "title": "第二层平均风速",
+                    "num": 0,
+                    "nuit": "M/S"
+                },
+                {
+                    "title": "第二层平均风向",
+                    "num": 0,
+                    "nuit": "°"
+                },
+                {
+                    "title": "第二层温度",
+                    "num": 0,
+                    "nuit": "°C"
+                },
+                {
+                    "title": "第三层平均风速",
+                    "num": 0,
+                    "nuit": "M/S"
+                },
+                {
+                    "title": "第三层平均风向",
+                    "num": 0,
+                    "nuit": "°"
+                },
+                {
+                    "title": "第一层压力",
+                    "num": 0,
+                    "nuit": "Pa"
+                },
+                {
+                    "title": "第四层平均风速",
+                    "num": 0,
+                    "nuit": "M/S"
+                },
+                {
+                    "title": "第四层平均风向",
+                    "num": 0,
+                    "nuit": "°"
+                }
+            ]
         },
         {
-            "name": "测试风场2",
-            "ycgl": [147,258,369,123,456,789,159,357],
-            "llgl": [123,258,159,123,456,789,159,357],
-            "sjgl": [147,123,357,123,456,357,159,357],
-            "pjfs": [147,258,369,357,456,357,159,357],
-            "ycfs": [147,258,123,123,456,123,159,357],
-            "xAxis": ["09-09 02:00:00","09-10 02:00:00","09-11 02:00:00","09-12 02:00:00","09-12 02:00:00","09-13 02:00:00","09-14 02:00:00","09-15 02:00:00"]
+            "name": "右玉高家堡",
+            "ycgl": [147,258,369,123,456,789,159,357,147,258,123,123],
+            "llgl": [123,258,159,123,456,789,159,357,258,369,357,456],
+            "sjgl": [147,123,357,123,456,357,159,357,147,258,123,123],
+            "pjfs": [147,258,369,357,456,357,159,357,369,357,456,357],
+            "ycfs": [147,258,123,123,456,123,159,357,369,357,456,357],
+            "xAxis": ["00:00","01:00","02:00","03:00","04:00","05:00","06:00","07:00","08:00","09:00","10:00","11:00"],
+            "chartMessageArr": [
+                {
+                    "title": "第一层平均风速",
+                    "num": 5.84,
+                    "nuit": "M/S"
+                },
+                {
+                    "title": "第一层平均风向",
+                    "num": 193.2,
+                    "nuit": "°"
+                },
+                {
+                    "title": "第一层温度",
+                    "num": 2.7,
+                    "nuit": "°C"
+                },
+                {
+                    "title": "第二层平均风速",
+                    "num": 5.05,
+                    "nuit": "M/S"
+                },
+                {
+                    "title": "第二层平均风向",
+                    "num": 215.9,
+                    "nuit": "°"
+                },
+                {
+                    "title": "第二层温度",
+                    "num": 75.81,
+                    "nuit": "°C"
+                },
+                {
+                    "title": "第三层平均风速",
+                    "num": 3.49,
+                    "nuit": "M/S"
+                },
+                {
+                    "title": "第三层平均风向",
+                    "num": 178.91,
+                    "nuit": "°"
+                },
+                {
+                    "title": "第一层压力",
+                    "num": 845.21,
+                    "nuit": "Pa"
+                },
+                {
+                    "title": "第四层平均风速",
+                    "num": 4.24,
+                    "nuit": "M/S"
+                },
+                {
+                    "title": "第四层平均风向",
+                    "num": 194.22,
+                    "nuit": "°"
+                }
+            ]
         },
         {
-            "name": "测试风场3",
-            "ycgl": [147,258,369,123,456,789,159,357],
-            "llgl": [123,258,159,123,456,789,159,357],
-            "sjgl": [147,123,357,123,456,357,159,357],
-            "pjfs": [147,258,369,357,456,357,159,357],
-            "ycfs": [147,258,123,123,456,123,159,357],
-            "xAxis": ["09-09 02:00:00","09-10 02:00:00","09-11 02:00:00","09-12 02:00:00","09-12 02:00:00","09-13 02:00:00","09-14 02:00:00","09-15 02:00:00"]
+            "name": "平鲁虎头山",
+            "ycgl": [147,258,369,123,456,789,159,357,147,258,123,123],
+            "llgl": [123,258,159,123,456,789,159,357,258,369,357,456],
+            "sjgl": [147,123,357,123,456,357,159,357,147,258,123,123],
+            "pjfs": [147,258,369,357,456,357,159,357,369,357,456,357],
+            "ycfs": [147,258,123,123,456,123,159,357,369,357,456,357],
+            "xAxis": ["00:00","01:00","02:00","03:00","04:00","05:00","06:00","07:00","08:00","09:00","10:00","11:00"],
+            "chartMessageArr": [
+                {
+                    "title": "第一层平均风速",
+                    "num": 2.36,
+                    "nuit": "M/S"
+                },
+                {
+                    "title": "第一层平均风向",
+                    "num": 16.16,
+                    "nuit": "°"
+                },
+                {
+                    "title": "第一层温度",
+                    "num": -3.2,
+                    "nuit": "°C"
+                },
+                {
+                    "title": "第二层平均风速",
+                    "num": 0,
+                    "nuit": "M/S"
+                },
+                {
+                    "title": "第二层平均风向",
+                    "num": 18.26,
+                    "nuit": "°"
+                },
+                {
+                    "title": "第二层温度",
+                    "num": 68.29,
+                    "nuit": "°C"
+                },
+                {
+                    "title": "第三层平均风速",
+                    "num": 0,
+                    "nuit": "M/S"
+                },
+                {
+                    "title": "第三层平均风向",
+                    "num": 24.17,
+                    "nuit": "°"
+                },
+                {
+                    "title": "第一层压力",
+                    "num": 811,
+                    "nuit": "Pa"
+                },
+                {
+                    "title": "第四层平均风速",
+                    "num": 0,
+                    "nuit": "M/S"
+                },
+                {
+                    "title": "第四层平均风向",
+                    "num": 36.36,
+                    "nuit": "°"
+                }
+            ]
         },
         {
-            "name": "测试风场4",
-            "ycgl": [147,258,369,123,456,789,159,357],
-            "llgl": [123,258,159,123,456,789,159,357],
-            "sjgl": [147,123,357,123,456,357,159,357],
-            "pjfs": [147,258,369,357,456,357,159,357],
-            "ycfs": [147,258,123,123,456,123,159,357],
-            "xAxis": ["09-09 02:00:00","09-10 02:00:00","09-11 02:00:00","09-12 02:00:00","09-12 02:00:00","09-13 02:00:00","09-14 02:00:00","09-15 02:00:00"]
+            "name": "广灵劲风",
+            "ycgl": [147,258,369,123,456,789,159,357,147,258,123,123],
+            "llgl": [123,258,159,123,456,789,159,357,258,369,357,456],
+            "sjgl": [147,123,357,123,456,357,159,357,147,258,123,123],
+            "pjfs": [147,258,369,357,456,357,159,357,369,357,456,357],
+            "ycfs": [147,258,123,123,456,123,159,357,369,357,456,357],
+            "xAxis": ["00:00","01:00","02:00","03:00","04:00","05:00","06:00","07:00","08:00","09:00","10:00","11:00"],
+            "chartMessageArr": [
+                {
+                    "title": "第一层平均风速",
+                    "num": 7.23,
+                    "nuit": "M/S"
+                },
+                {
+                    "title": "第一层平均风向",
+                    "num": 5.4,
+                    "nuit": "°"
+                },
+                {
+                    "title": "第一层温度",
+                    "num": 1.99,
+                    "nuit": "°C"
+                },
+                {
+                    "title": "第二层平均风速",
+                    "num": 5.74,
+                    "nuit": "M/S"
+                },
+                {
+                    "title": "第二层平均风向",
+                    "num": 96,
+                    "nuit": "°"
+                },
+                {
+                    "title": "第二层温度",
+                    "num": 54.2,
+                    "nuit": "°C"
+                },
+                {
+                    "title": "第三层平均风速",
+                    "num": 5.8,
+                    "nuit": "M/S"
+                },
+                {
+                    "title": "第三层平均风向",
+                    "num": 140.5,
+                    "nuit": "°"
+                },
+                {
+                    "title": "第一层压力",
+                    "num": 472.5,
+                    "nuit": "Pa"
+                },
+                {
+                    "title": "第四层平均风速",
+                    "num": 5.86,
+                    "nuit": "M/S"
+                },
+                {
+                    "title": "第四层平均风向",
+                    "num": 3.55,
+                    "nuit": "°"
+                }
+            ]
         },
         {
-            "name": "测试风场5",
-            "ycgl": [147,258,369,123,456,789,159,357],
-            "llgl": [123,258,159,123,456,789,159,357],
-            "sjgl": [147,123,357,123,456,357,159,357],
-            "pjfs": [147,258,369,357,456,357,159,357],
-            "ycfs": [147,258,123,123,456,123,159,357],
-            "xAxis": ["09-09 02:00:00","09-10 02:00:00","09-11 02:00:00","09-12 02:00:00","09-12 02:00:00","09-13 02:00:00","09-14 02:00:00","09-15 02:00:00"]
+            "name": "浑源峰岳",
+            "ycgl": [147,258,369,123,456,789,159,357,147,258,123,123],
+            "llgl": [123,258,159,123,456,789,159,357,258,369,357,456],
+            "sjgl": [147,123,357,123,456,357,159,357,147,258,123,123],
+            "pjfs": [147,258,369,357,456,357,159,357,369,357,456,357],
+            "ycfs": [147,258,123,123,456,123,159,357,369,357,456,357],
+            "xAxis": ["00:00","01:00","02:00","03:00","04:00","05:00","06:00","07:00","08:00","09:00","10:00","11:00"],
+            "chartMessageArr": [
+                {
+                    "title": "第一层平均风速",
+                    "num": 3.03,
+                    "nuit": "M/S"
+                },
+                {
+                    "title": "第一层平均风向",
+                    "num": 147.2,
+                    "nuit": "°"
+                },
+                {
+                    "title": "第一层温度",
+                    "num": -1.51,
+                    "nuit": "°C"
+                },
+                {
+                    "title": "第二层平均风速",
+                    "num": 3.06,
+                    "nuit": "M/S"
+                },
+                {
+                    "title": "第二层平均风向",
+                    "num": 161.3,
+                    "nuit": "°"
+                },
+                {
+                    "title": "第二层温度",
+                    "num": 44.11,
+                    "nuit": "°C"
+                },
+                {
+                    "title": "第三层平均风速",
+                    "num": 2.83,
+                    "nuit": "M/S"
+                },
+                {
+                    "title": "第三层平均风向",
+                    "num": 159.8,
+                    "nuit": "°"
+                },
+                {
+                    "title": "第一层压力",
+                    "num": 813,
+                    "nuit": "Pa"
+                },
+                {
+                    "title": "第四层平均风速",
+                    "num": 0.07,
+                    "nuit": "M/S"
+                },
+                {
+                    "title": "第四层平均风向",
+                    "num": 174.8,
+                    "nuit": "°"
+                }
+            ]
         },
         {
-            "name": "测试风场6",
-            "ycgl": [147,258,369,123,456,789,159,357],
-            "llgl": [123,258,159,123,456,789,159,357],
-            "sjgl": [147,123,357,123,456,357,159,357],
-            "pjfs": [147,258,369,357,456,357,159,357],
-            "ycfs": [147,258,123,123,456,123,159,357],
-            "xAxis": ["09-09 02:00:00","09-10 02:00:00","09-11 02:00:00","09-12 02:00:00","09-12 02:00:00","09-13 02:00:00","09-14 02:00:00","09-15 02:00:00"]
+            "name": "方山宝塔山",
+            "ycgl": [147,258,369,123,456,789,159,357,147,258,123,123],
+            "llgl": [123,258,159,123,456,789,159,357,258,369,357,456],
+            "sjgl": [147,123,357,123,456,357,159,357,147,258,123,123],
+            "pjfs": [147,258,369,357,456,357,159,357,369,357,456,357],
+            "ycfs": [147,258,123,123,456,123,159,357,369,357,456,357],
+            "xAxis": ["00:00","01:00","02:00","03:00","04:00","05:00","06:00","07:00","08:00","09:00","10:00","11:00"],
+            "chartMessageArr": [
+                {
+                    "title": "第一层平均风速",
+                    "num": 0,
+                    "nuit": "M/S"
+                },
+                {
+                    "title": "第一层平均风向",
+                    "num": 0,
+                    "nuit": "°"
+                },
+                {
+                    "title": "第一层温度",
+                    "num": 0,
+                    "nuit": "°C"
+                },
+                {
+                    "title": "第二层平均风速",
+                    "num": 0,
+                    "nuit": "M/S"
+                },
+                {
+                    "title": "第二层平均风向",
+                    "num": 0,
+                    "nuit": "°"
+                },
+                {
+                    "title": "第二层温度",
+                    "num": 0,
+                    "nuit": "°C"
+                },
+                {
+                    "title": "第三层平均风速",
+                    "num": 0,
+                    "nuit": "M/S"
+                },
+                {
+                    "title": "第三层平均风向",
+                    "num": 0,
+                    "nuit": "°"
+                },
+                {
+                    "title": "第一层压力",
+                    "num": 0,
+                    "nuit": "Pa"
+                },
+                {
+                    "title": "第四层平均风速",
+                    "num": 0,
+                    "nuit": "M/S"
+                },
+                {
+                    "title": "第四层平均风向",
+                    "num": 0,
+                    "nuit": "°"
+                }
+            ]
+        },
+        {
+            "name": "阳高采凉山",
+            "ycgl": [147,258,369,123,456,789,159,357,147,258,123,123],
+            "llgl": [123,258,159,123,456,789,159,357,258,369,357,456],
+            "sjgl": [147,123,357,123,456,357,159,357,147,258,123,123],
+            "pjfs": [147,258,369,357,456,357,159,357,369,357,456,357],
+            "ycfs": [147,258,123,123,456,123,159,357,369,357,456,357],
+            "xAxis": ["00:00","01:00","02:00","03:00","04:00","05:00","06:00","07:00","08:00","09:00","10:00","11:00"],
+            "chartMessageArr": [
+                {
+                    "title": "第一层平均风速",
+                    "num": 0,
+                    "nuit": "M/S"
+                },
+                {
+                    "title": "第一层平均风向",
+                    "num": 163,
+                    "nuit": "°"
+                },
+                {
+                    "title": "第一层温度",
+                    "num": -1.28,
+                    "nuit": "°C"
+                },
+                {
+                    "title": "第二层平均风速",
+                    "num": 1.42,
+                    "nuit": "M/S"
+                },
+                {
+                    "title": "第二层平均风向",
+                    "num": 104.1,
+                    "nuit": "°"
+                },
+                {
+                    "title": "第二层温度",
+                    "num": 77.82,
+                    "nuit": "°C"
+                },
+                {
+                    "title": "第三层平均风速",
+                    "num": 1.69,
+                    "nuit": "M/S"
+                },
+                {
+                    "title": "第三层平均风向",
+                    "num": 116.1,
+                    "nuit": "°"
+                },
+                {
+                    "title": "第一层压力",
+                    "num": 844,
+                    "nuit": "Pa"
+                },
+                {
+                    "title": "第四层平均风速",
+                    "num": 2.32,
+                    "nuit": "M/S"
+                },
+                {
+                    "title": "第四层平均风向",
+                    "num": 125.2,
+                    "nuit": "°"
+                }
+            ]
         }
     ],
     "diaData": {

src/views/stateMonitor/powerPredictMatrix/index.vue

@@ -6,7 +6,7 @@
     element-loading-background="rgba(4, 12, 11, 0.8)"
   >
     <!-- 头部按钮选项 -->
-    <!-- <HeaderNav @firstRender="firstRender" :isAll="true" /> -->
+    <HeaderNav @firstRender="firstRender" :isAll="true" />
     <div class="wrapper">
       <div class="chart-wrapper">
         <div
@@ -15,16 +15,16 @@
           v-for="(item, index) in list"
           :key="index"
           :style="{ width: isFixed ? '900px' : '935px' }"
-          @dblclick="handleClick(list[index]?.name, index)"
+          @dblclick="handleClick(list[index]?.name, index, list[index])"
         >
           <div class="chart-item-name">
             <p class="text" title="双击查看详情">{{ list[index]?.name }}</p>
           </div>
           <div class="chart-item-chart">
             <div class="chartMessage">
-                <div class="chartMessageItem" :span="8" v-for="it in chartMessageArr" :key="it">
+                <div class="chartMessageItem" :span="8" v-for="it in item.chartMessageArr" :key="it">
                     <span>{{it.title}}</span>
-                    <span>{{it.num}}</span>
+                    <span :data-type="$store.state.moreSty">{{it.num}}</span>
                     <span>{{it.nuit}}</span>
                 </div>
             </div>
@@ -96,7 +96,6 @@ export default {
       timer: null,
       loading: false,
       flag: false,
-      chartMessageArr: []
     };
   },
   components: {
@@ -106,63 +105,6 @@ export default {
   created() {
     this.beginDate = dayjs().startOf("day").format(this.format);
     this.endDate = dayjs().add(3, "day").format(this.format);
-    this.chartMessageArr = [
-        {
-            title: "第一层平均风速",
-            num: 0,
-            nuit: "M/S"
-        },
-        {
-            title: "第一层平均风向",
-            num: 0,
-            nuit: "°"
-        },
-        {
-            title: "第一层温度",
-            num: 0,
-            nuit: "°C"
-        },
-        {
-            title: "第二层平均风速",
-            num: 0,
-            nuit: "M/S"
-        },
-        {
-            title: "第二层平均风向",
-            num: 0,
-            nuit: "°"
-        },
-        {
-            title: "第二层温度",
-            num: 0,
-            nuit: "°C"
-        },
-        {
-            title: "第三层平均风速",
-            num: 0,
-            nuit: "M/S"
-        },
-        {
-            title: "第三层平均风向",
-            num: 1000,
-            nuit: "°"
-        },
-        {
-            title: "第一层压力",
-            num: 0,
-            nuit: "Pa"
-        },
-        {
-            title: "第四层平均风速",
-            num: 0,
-            nuit: "M/S"
-        },
-        {
-            title: "第四层平均风向",
-            num: 0,
-            nuit: "°"
-        },
-    ]
     // this.init();
   },
   mounted() {
@@ -229,7 +171,7 @@ export default {
           llgl: [],
           sjgl: [],
           pjfs: [],
-          ycfs: [],
+        //   ycfs: [],
           xAxis: [],
         };
       }
@@ -243,7 +185,7 @@ export default {
         //   resData[index].llgl.push(ele.llgl);
         //   resData[index].xAxis.push(dayjs(ele.hours).format("MM-DD HH:mm:ss"));
         resData[index].pjfs= ele.pjfs;
-        resData[index].ycfs= ele.ycfs;
+        // resData[index].ycfs= ele.ycfs;
         resData[index].sjgl= ele.sjgl;
         resData[index].ycgl= ele.ycgl;
         resData[index].llgl= ele.llgl;
@@ -253,14 +195,15 @@ export default {
       return resData;
     },
 
-    handleClick(name, id) {
+    handleClick(name, id, datas) {
       this.showName = name;
       this.showWpid = id;
       this.beginDate = dayjs().startOf("day").format(this.format);
       this.endDate = dayjs().add(10, "day").format(this.format);
       this.displayDialog = true;
     //   this.getPowerData();
-        this.doubleChartData = this.dealRes(dataJson.diaData);
+        this.singleChartData = this.dealRes(datas);
+        // this.doubleChartData = this.dealRes(dataJson.diaData);
     },
     getPowerData() {
       GetPowerData({
@@ -372,6 +315,8 @@ export default {
       align-items: center;
       .text {
         writing-mode: vertical-lr;
+        font-size: 18px;
+        letter-spacing: 5px;
         margin: 0;
       }
     }
@@ -396,7 +341,12 @@ export default {
             }
             span:nth-child(2) {
                 margin-right: 10px;
-                color: rgb(230, 73, 11);
+            }
+            span:nth-child(2)[data-type~="greenSty"] {
+                color: #05bb4c;
+            }
+            span:nth-child(2)[data-type~="blueSty"] {
+                color: #054bbb;
             }
         }
       }