update

src/App.vue

@@ -314,9 +314,8 @@ import Menu from "@/views/layout/Menu.vue";
 import Header from "@/views/layout/Header.vue";
 import LoginPage from "./views/layout/login-page.vue";
 import sisView from "./views/sisView/index.vue";
-
 import SvgIcon from "@com/coms/icon/svg-icon.vue";
-
+//  import MessageBridge from "@tools/MessageBridge";
 import $ from "jquery";
 export default {
   components: {
@@ -348,7 +347,9 @@ export default {
       "class",
       themeName === "dark" || themeName === "light" ? themeName : "dark"
     );
-
+    // let mb = MessageBridge.getInstance();
+    // let windturbine = [{ key: "/topic/windturbine", action: this.windturbineMessage }];
+    // mb.register(windturbine);
     // that.$nextTick(() => {
     //   that.API.requestData({
     //     isMust: false, // 请求是否携带 token ，默认为 true ，可缺省
@@ -379,6 +380,9 @@ export default {
   },
 
   methods: {
+    windturbineMessage(msg){
+      console.log(msg);
+    },
     // 切换子系统事件
     HeaderMenuClick(data) {
       this.root = data.id;

src/api/cockpit/matrix/index.js

@@ -54,6 +54,13 @@ const matrixPush = (showLoading) => {
         method: "get",
     });
 };
+// const matrixPush = (showLoading) => {
+//     return request({
+//         showLoading,
+//         url: `/consumer/matrix/matrixDatas`,
+//         method: "get",
+//     });
+// };
 //全风场简单矩阵
 const findSimpleMatrixAll = (data) => {
     return request({
@@ -122,7 +129,7 @@ const windfarmAllAjax = () => {
     });
 };
 //风机信息列表
-const findWtInfoList = (showLoading,data) => {
+const findWtInfoList = (showLoading, data) => {
     return request({
         showLoading,
         baseURL: process.env.VUE_APP_Matrix,
@@ -167,7 +174,39 @@ const matrixMatrixByWpIdPush = (data) => {
 const monitorFindGeneralAppearance = (data) => {
     return request({
         baseURL: process.env.VUE_APP_Matrix,
-        url: `monitor/findGeneralAppearance?wpId=${data.wpId}`, 
+        url: `monitor/findGeneralAppearance?wpId=${data.wpId}`,
+        method: "get",
+    });
+};
+//光伏所有矩阵信息
+const findPVSimpleMatrixAll = () => {
+    return request({
+        baseURL: process.env.VUE_APP_Matrix,
+        url: `matrix/findPVSimpleMatrixAll`,
+        method: "get",
+    });
+};
+//逆变器监视
+const findInverterInfo = (data) => {
+    return request({
+        baseURL: process.env.VUE_APP_Matrix,
+        url: `monitorinverter/findInverterInfo?wtId=${data.wtId}`,
+        method: "get",
+    });
+};
+//逆变器开网频率
+const findInverterPowerLine = (data) => {
+    return request({
+        baseURL: process.env.VUE_APP_Matrix,
+        url: `monitorinverter/findInverterPowerLine?wtId=${data.wtId}`,
+        method: "get",
+    });
+};
+//光伏矩阵
+const matrixDetialGfPush = () => {
+    return request({
+        baseURL: process.env.VUE_APP_Matrix,
+        url: `matrix/matrixDetialGfPush`,
         method: "get",
     });
 };
@@ -194,4 +233,8 @@ export default {
     genresetFindPowerInfo,
     matrixMatrixByWpIdPush,
     monitorFindGeneralAppearance,
+    findPVSimpleMatrixAll,
+    findInverterInfo,
+    findInverterPowerLine,
+    matrixDetialGfPush,
 }

src/components/dialog/index.vue

@@ -0,0 +1,251 @@
+<template>
+  <el-dialog
+    title="风机详情"
+    width="75%"
+    top="10vh"
+    @opened="opened()"
+    @closed="closed()"
+    :show-close="true"
+    class="my-info-dialog"
+    custom-class="modal"
+    :close-on-click-modal="false"
+  >
+    <div class="body">
+      <div class="wind-site-info-body">
+        <div class="info-menu">
+          <div
+            class="info-menu-item"
+            v-for="(item, index) in InfoBtns.data"
+            :key="item"
+            :class="{ active: InfoBtns.activeIndex == index }"
+            @click="onInfoMenuItemClick(item, index)"
+          >
+            {{ item.text }}
+          </div>
+        </div>
+        <el-row style="height: calc(100% - 45px)">
+          <!-- 基本信息 使用 v-if 每次点击重新加载  -->
+          <!-- 使用 v-show 首次全部加载 之后隐藏 点击后显示 -->
+          <base-info v-show="InfoBtns.activeIndex == 0" ref="baseInfo" />
+          <!-- <base-info v-if="InfoBtns.activeIndex == 2" /> -->
+          <!-- <div class="windParts"> -->
+            <div
+            :style="
+              $store.state.themeName === 'dark'
+                ? 'text-align:center;'
+                : 'text-align:center;background:#fff;'
+            "
+          >
+            <StandAloneImg
+              class="sai"
+              v-show="InfoBtns.activeIndex != 0"
+              :activeIndex="InfoBtns.activeIndex"
+              @selectSvg="selectSvg"
+            ></StandAloneImg>
+          </div>
+          <div class="saigs">
+            <generator
+            v-show="InfoBtns.activeIndex != 0"
+            :index="InfoBtns.activeIndex"
+            :data="sourceMap"
+            ref="generator"
+          ></generator>
+          </div>
+          
+          <!-- </div> -->
+          
+        </el-row>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import BaseInfo from "../../views/WindSite/pages/Info/Base-Info.vue";
+import StandAloneImg from "../../views/WindSite/pages/Info/StandAloneImg.vue";
+import generator from "../../views/WindSite/pages/Info/pages/generator.vue";
+import api from "@api/cockpit/matrix/index.js";
+import BASE from "@tools/basicTool.js";
+export default {
+  props: {
+    wpId: {
+      type: String,
+      default: "",
+    },
+    wtId: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      timmer: '',
+      InfoBtns: {
+        activeIndex: 0,
+        data: [
+          {
+            id: "base-info",
+            text: "基本信息",
+          },
+          {
+            id: "generator",
+            text: "发电机",
+          },
+          {
+            id: "gear-box",
+            text: "齿轮箱",
+          },
+          {
+            id: "pitch",
+            text: "变桨",
+          },
+          {
+            id: "yaw",
+            text: "偏航",
+          },
+          {
+            id: "hydraulic-pressure",
+            text: "液压",
+          },
+          {
+            id: "cabin-info",
+            text: "机舱信息",
+          },
+          // {
+          //   id: "principal-axis",
+          //   text: "主轴",
+          // },
+        ],
+      },
+    };
+  },
+  components: {
+    BaseInfo,
+    StandAloneImg,
+    generator,
+  },
+  methods: {
+    opened() {
+    this.$nextTick(() => {
+      this.getWtInfo();
+      this.timmer = setInterval(() => {
+        this.getWtInfo();
+      }, this.$store.state.websocketTimeSec);
+    });
+    },
+    closed() {
+      clearInterval(this.timmer);
+      this.timmer = null;
+    },
+    onInfoMenuItemClick(item, index) {
+      this.InfoBtns.activeIndex = index;
+    },
+    selectSvg(index) {
+      this.InfoBtns.activeIndex = index;
+    },
+    // 获取风机信息
+    getWtInfo() {
+      api
+        .findWtInfo({
+          wtId: this.wtId,
+        })
+        .then((res) => {
+          let map = ["bjmap", "fdjmap", "clxmap", "yymap", "phmap", "jcmap"];
+          let data = res.data;
+          for (var key in data) {
+            if (map.includes(key) && key.endsWith("map")) {
+              let json = data[key];
+              let arrayai = [];
+              let arraydi = [];
+              for (var i = 0; i < json.length; i++) {
+                let obj = {
+                  name: json[i][0],
+                  unit: json[i][1],
+                  value: json[i][3],
+                };
+                if (json[i][2] == "ai") arrayai.push(obj);
+                else arraydi.push(obj);
+              }
+              data[key] = { ai: arrayai, di: arraydi };
+            }
+          }
+          this.sourceMap = data;
+          this.$refs.baseInfo.dataDeal(data)
+          this.$refs.generator.dataDeal(data)
+        });
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.body {
+  height: 70vh;
+}
+.wind-site-info {
+  display: flex;
+
+  .sai {
+    width: 65%;
+  }
+
+  .saig {
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+  }
+
+  .wind-site-menu {
+    flex: 0 0 13.889vh;
+    color: @gray;
+    background: fade(@darkgray, 10);
+    height: calc(100vh - 122px);
+
+    .wind-site-title {
+      font-size: 14px;
+      font-weight: 600;
+      padding: 16px;
+    }
+  }
+}
+.wind-site-info-body {
+  flex: auto;
+  padding-left: 1.481vh;
+  height: 100%;
+
+  .info-menu {
+    width: 100%;
+    margin-bottom: 10px;
+    .info-menu-item {
+      display: inline-block;
+      border: 1px solid fade(@darkgray, 80);
+      border-radius: 2px;
+      color: @gray;
+      font-size: @fontsize-s;
+      letter-spacing: 1px;
+      cursor: pointer;
+      width: 13%;
+      height: 30px;
+      line-height: 30px;
+      text-align: center;
+
+      &.active {
+        color: @white;
+        background: fade(@purple, 60);
+        border-color: fade(@purple, 60);
+      }
+
+      & + .info-menu-item {
+        margin-left: 2.2vh;
+      }
+    }
+  }
+}
+.windParts{
+  display: flex;
+  flex-direction: row;
+}
+.saigs{
+  position: absolute;
+  bottom: 0;
+  left: 28px;
+}
+</style>

src/store/index.js

@@ -6,7 +6,7 @@ const debug = process.env.NODE_ENV !== 'production';
 
 // 默认状态
 const state = {
-  websocketTimeSec: 5000,
+  websocketTimeSec: 1000,
   loading: false, //全局 - 加载中....
   themeName: localStorage.getItem("themeName") || "dark", // 主题
   menuData: [],

src/views/Home/Home.vue

@@ -1708,4 +1708,64 @@ export default {
     }
   }
 }
+.haha{
+  height: 100px;
+  width: 150px;
+  position: relative;
+  border-radius: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-image: linear-gradient(45deg, gold, deeppink);
+  animation: hue 3s infinite linear;
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    top: -15px;
+    bottom: -15px;
+    left: -15px;
+    right: -15px;
+    border: 5px solid #24acf2;
+    border-image: linear-gradient(45deg, gold, deeppink) 1;
+    clip-path: inset(0px round 10px);
+    animation: clippath 3s infinite linear;
+  }
+  &::after {
+    animation: clippath 3s infinite -1.5s linear;
+  }
+  span {
+    color: white;
+    font-size: 20px;
+  }
+}
+@keyframes hue {
+  0% {
+    filter: hue-rotate(0deg);
+  }
+  100% {
+    filter: hue-rotate(360deg);
+  }
+}
+
+@keyframes clippath {
+  0% {
+    clip-path: inset(0 0 95% 0);
+    filter: hue-rotate(0deg);
+  }
+  25% {
+    clip-path: inset(0 95% 0 0);
+  }
+  50% {
+    clip-path: inset(95% 0 0 0);
+  }
+  75% {
+    clip-path: inset(0 0 0 95%);
+  }
+  100% {
+    clip-path: inset(0 0 95% 0);
+    filter: hue-rotate(360deg);
+  }
+}
+
 </style>

src/views/LightMatrix1/LightMatrix1.vue

@@ -203,15 +203,16 @@
       </div>
     </div>
   </el-scrollbar>
+  <Dialog v-model="detialDisplay" :wpId='stationId' :wtId='windId'></Dialog>
 </template>
 
 <script>
 import Row from "@/components/coms/grid/row.vue";
 import Col from "@/components/coms/grid/col.vue";
 import SvgIcon from "@com/coms/icon/svg-icon.vue";
+import Dialog from "@/components/dialog/index.vue";
 import api from "@api/cockpit/matrix/index.js";
 import util from "@/helper/util.js";
-
 import store from "@store/index.js";
 import { isNumber } from "util";
 import { setInterval, clearInterval } from "timers";
@@ -224,6 +225,7 @@ export default {
     Row,
     Col,
     SvgIcon,
+    Dialog,
   },
 
   // 数据
@@ -233,6 +235,9 @@ export default {
       sourceMap: {}, // 核心数据
       fillCategory: null, // 过滤条件
       fillFjzt: null, // 过滤条件
+      detialDisplay: false,
+      stationId: '',
+      windId: '',
       fcStateArray: [
         {
           text: "接入台数",
@@ -454,9 +459,7 @@ export default {
 
     // 请求服务
     requestData(showLoading) {
-      // console.log(111111);
       api.matrixPush(showLoading).then((res) => {
-        console.log(res.data);
         if (res) {
           let sourceMap = res.data;
           let fjmap = [];
@@ -485,9 +488,12 @@ export default {
     // 查看风机详情
     goDetails(item) {
       if (item.wpId.indexOf("FDC") !== -1) {
-        this.$router.push({
-          path: `/monitor/windsite/info/${item.wpId}/${item.wtId}`,
-        });
+        this.detialDisplay = true
+        this.stationId = item.wpId
+        this.windId = item.wtId
+        // this.$router.push({
+        //   path: `/monitor/windsite/info/${item.wpId}/${item.wtId}`,
+        // });
       } else {
         this.$router.push({
           path: `windsite/inverter-info/${item.wpId}/${item.wtId}`,

src/views/LightMatrix2/LightMatrix2.vue

@@ -169,6 +169,7 @@
         </div>
       </div>
     </el-scrollbar>
+    <Dialog v-model="detialDisplay" :wpId='stationId' :wtId='windId'></Dialog>
   </div>
 </template>
 
@@ -177,6 +178,7 @@ import Row from "@/components/coms/grid/row.vue";
 import Col from "@/components/coms/grid/col.vue";
 import util from "@/helper/util.js";
 import api from "@api/cockpit/matrix/index.js";
+import Dialog from "@/components/dialog/index.vue";
 
 import store from "@store/index.js";
 import { isNumber } from "util";
@@ -189,6 +191,7 @@ export default {
     Row,
     Col,
     SvgIcon,
+    Dialog,
   },
   // 数据
   data() {
@@ -197,6 +200,9 @@ export default {
       sourceMap: {}, // 核心数据
       fillCategory: null, // 过滤条件
       fillFjzt: null, // 过滤条件
+      detialDisplay: false,
+      stationId: '',
+      windId: '',
       panel1Data: {
         first: {
           icon: "fa fa-user",
@@ -473,6 +479,7 @@ export default {
               });
             }
           }
+<<<<<<< HEAD
           this.sourceMap = sourceMap;
           console.log("sourceMap:", this.sourceMap);
           if (this.fillCategory) {
@@ -482,13 +489,19 @@ export default {
           this.sourceMap = {};
         }
       });
+=======
+      })
+>>>>>>> 3b486cbf51a994e6589ad87ac4d58315b74be4f5
     },
 
     // 查看风机详情
     goDetails(item) {
-      this.$router.push({
-        path: `/monitor/windsite/info/${item.wpId}/${item.wtId}`,
-      });
+      this.detialDisplay = true
+        this.stationId = item.wpId
+        this.windId = item.wtId
+      // this.$router.push({
+      //   path: `/monitor/windsite/info/${item.wpId}/${item.wtId}`,
+      // });
     },
   },
 

src/views/LightMatrix3/LightMatrix3.vue

@@ -835,11 +835,13 @@
         </div>
       </div> -->
     </el-scrollbar>
+    <Dialog v-model="detialDisplay" :wpId='stationId' :wtId='windId'></Dialog>
   </div>
 </template>
 
 <script>
 import SvgIcon from "@com/coms/icon/svg-icon.vue";
+import Dialog from "@/components/dialog/index.vue";
 import util from "@/helper/util.js";
 import { isNumber } from "util";
 import store from "@store/index.js";
@@ -850,6 +852,7 @@ export default {
   // 使用组件
   components: {
     SvgIcon,
+    Dialog,
   },
 
   // 数据
@@ -859,6 +862,9 @@ export default {
       sourceMap: {}, // 核心数据
       fillCategory: null, // 过滤条件
       fillFjzt: null, // 过滤条件
+      detialDisplay: false,
+      stationId: '',
+      windId: '',
       fjStatus: "all",
       fjArr: [],
       fjNum: 0,
@@ -1332,9 +1338,12 @@ export default {
       });
     },
     goDetails(item) {
-      this.$router.push({
-        path: `/monitor/windsite/info/${item.wpId}/${item.wtId}`,
-      });
+      this.detialDisplay = true
+        this.stationId = item.wpId
+        this.windId = item.wtId
+      // this.$router.push({
+      //   path: `/monitor/windsite/info/${item.wpId}/${item.wtId}`,
+      // });
     },
   },
 

src/views/WindSite/pages/Info/Base-Info.vue

@@ -6,23 +6,23 @@
         <span class="svg-icon svg-icon-green mg-r-8">
           <svg-icon class="" :svgid="'svg-normal-power'" />
         </span>
-        {{ sourceMap.code }}
+        {{ sourceMap?.code }}
       </div>
       <div class="wind-site-tag">
         <div class="tag-text">所属线路</div>
-        <div class="tag-value">{{ sourceMap.lnname }}</div>
+        <div class="tag-value">{{ sourceMap?.lnname }}</div>
       </div>
       <div class="wind-site-tag">
         <div class="tag-text">机型</div>
-        <div class="tag-value">{{sourceMap.model}}</div>
+        <div class="tag-value">{{sourceMap?.model}}</div>
         </div>
       <div class="wind-site-tag">
         <div class="tag-text">告警时间</div>
-        <div class="tag-value">{{ sourceMap.gxkmap && sourceMap.gxkmap.bjsj }}</div>
+        <div class="tag-value">{{ sourceMap?.gxkmap && sourceMap?.gxkmap.bjsj }}</div>
       </div>
       <div class="wind-site-tag">
         <div class="tag-text">告警内容</div>
-        <div class="tag-value">{{ sourceMap.gxkmap && sourceMap.gxkmap.bjmc }}</div>
+        <div class="tag-value">{{ sourceMap?.gxkmap && sourceMap?.gxkmap.bjmc }}</div>
       </div>
     </el-row>
     <!-- 发电信息 -->
@@ -31,35 +31,35 @@
         <el-row class="generation background mg-r-8">
           <div class="mg-r-8">
             <div class="generation-text">日发电量</div>
-            <div class="generation-value green" style="display:inline-block">{{ sourceMap.jczbmap && sourceMap.jczbmap.RFDL }}</div><span class="green" style="font-size:26px;margin-left: 0.37vh;">kWh</span>
+            <div class="generation-value green" style="display:inline-block">{{ sourceMap?.jczbmap && sourceMap?.jczbmap.RFDL }}</div><span class="green" style="font-size:26px;margin-left: 0.37vh;">kWh</span>
           </div>
           <el-row class="wind-site-state">
             <el-col :span="6" class="generation-item">
               <i class="svg-icon svg-icon-lg svg-icon-gray">
                 <svg-icon :svgid="'svg-availability'" />
               </i>
-              <div class="value">{{ sourceMap.jczbmap && sourceMap.jczbmap.FJKYL }}</div>
+              <div class="value">{{ sourceMap?.jczbmap && sourceMap?.jczbmap.FJKYL }}</div>
               <div class="text">月可利用率</div>
             </el-col>
             <el-col :span="6" class="generation-item">
               <i class="svg-icon svg-icon-lg svg-icon-gray">
                 <svg-icon :svgid="'svg-availability'" />
               </i>
-              <div class="value">{{ sourceMap.gxkmap && sourceMap.gxkmap.ygzxs }}</div>
+              <div class="value">{{ sourceMap?.gxkmap && sourceMap?.gxkmap.ygzxs }}</div>
               <div class="text">月故障小时数</div>
             </el-col>
             <el-col :span="6" class="generation-item">
               <i class="svg-icon svg-icon-lg svg-icon-gray">
                 <svg-icon :svgid="'svg-availability'" />
               </i>
-              <div class="value">{{ sourceMap.gxkmap && sourceMap.gxkmap.ytjxs }}</div>
+              <div class="value">{{ sourceMap?.gxkmap && sourceMap?.gxkmap.ytjxs }}</div>
               <div class="text">月待机小时数</div>
             </el-col>
             <el-col :span="6" class="generation-item">
               <i class="svg-icon svg-icon-lg svg-icon-gray">
                 <svg-icon :svgid="'svg-availability'" />
               </i>
-              <div class="value">{{ sourceMap.gxkmap && sourceMap.gxkmap.yyxxs }}</div>
+              <div class="value">{{ sourceMap?.gxkmap && sourceMap?.gxkmap.yyxxs }}</div>
               <div class="text">月发电小时数</div>
             </el-col>
           </el-row>
@@ -69,7 +69,7 @@
         <el-row type="flex" justify="center" :align="'middle'" class="power-load">
           <!-- 功率复核 PowerLoad -->
           <el-col v-for="item in PowerLoad" :key="item" :span="6">
-            <dash-pie-chart :title="item.title" :value="sourceMap.jczbmap && sourceMap.jczbmap[item.key]" height="9.722vh" />
+            <dash-pie-chart :title="item.title" :value="sourceMap?.jczbmap && sourceMap?.jczbmap[item.key]" height="9.722vh" />
           </el-col>
         </el-row>
       </el-col>
@@ -117,17 +117,18 @@
             </table>
           </div>
         </div>
-        <!-- 变桨信息 -->
+        
+        <!-- 温度信息 -->
         <div class="info-panel base-info">
           <div class="panel-title gary-l">
             <div class="svg-icon svg-icon-gray-l mg-r-16">
-              <svg-icon :svgid="'svg-pitch-info'" style="margin: 3px 0 -3px 0;padding: 2px;" />
+              <svg-icon :svgid="'svg-temperature-info'" style="margin: 3px -5px -3px 5px;" />
             </div>
-            <div class="title">变桨信息</div>
+            <div class="title">液压信息</div>
           </div>
           <div class="panel-body">
             <table class="table-form">
-              <tr v-for="(pItem, pIndex) in bjmap" :key="pIndex">
+              <tr v-for="(pItem, pIndex) in yymap" :key="pIndex">
                 <template v-for="(cItem, cIndex) in pItem" :key="cIndex">
                   <td class="text gray">{{ cItem.name }}</td>
                   <td class="value green">{{ cItem.value }}</td>
@@ -159,17 +160,17 @@
             </table>
           </div>
         </div>
-        <!-- 温度信息 -->
+        <!-- 变桨信息 -->
         <div class="info-panel base-info">
           <div class="panel-title gary-l">
             <div class="svg-icon svg-icon-gray-l mg-r-16">
-              <svg-icon :svgid="'svg-temperature-info'" style="margin: 3px -5px -3px 5px;" />
+              <svg-icon :svgid="'svg-pitch-info'" style="margin: 3px 0 -3px 0;padding: 2px;" />
             </div>
-            <div class="title">液压信息</div>
+            <div class="title">变桨信息</div>
           </div>
           <div class="panel-body">
             <table class="table-form">
-              <tr v-for="(pItem, pIndex) in yymap" :key="pIndex">
+              <tr v-for="(pItem, pIndex) in bjmap" :key="pIndex">
                 <template v-for="(cItem, cIndex) in pItem" :key="cIndex">
                   <td class="text gray">{{ cItem.name }}</td>
                   <td class="value green">{{ cItem.value }}</td>
@@ -191,20 +192,11 @@ export default {
   name: "wind-site-base-info",
   components: { SvgIcon, DashPieChart },
   props: {
-    id: {
-      type: String,
-      default: "",
-    },
-    data: {
-      type: Object,
-      default: () => { },
-    },
   },
   data () {
     return {
       pageReady: false,
-      sourceMap: {
-      },
+      sourceMap:{},
       fdjmap: [],
       clxmap: [],
       bjmap: [],
@@ -246,28 +238,26 @@ export default {
       }
 
       return newArray;
+    },
+    dataDeal(value){
+      this.sourceMap = value
+      this.fdjmap = this.rinseData(value.fdjmap.ai, 2)
+      this.clxmap = this.rinseData(value.clxmap.ai, 2)
+      this.bjmap = this.rinseData(value.bjmap.ai, 2)
+      this.phmap = this.rinseData(value.phmap.ai, 2)
+      this.yymap = this.rinseData(value.yymap.ai, 2)
     }
   },
 
   mounted () {
-    this.sourceMap = this.data;
   },
 
-  watch: {
-    data (value) {
-      this.sourceMap = value;
-      this.fdjmap = this.rinseData(value.fdjmap.ai, 2);
-      this.clxmap = this.rinseData(value.clxmap.ai, 2);
-      this.bjmap = this.rinseData(value.bjmap.ai, 2);
-      this.phmap = this.rinseData(value.phmap.ai, 2);
-      this.yymap = this.rinseData(value.yymap.ai, 2);
-    }
-  },
 };
 </script>
 
 <style lang="less">
 .wind-site-base-info {
+  width: 100%;
   // 风机名称
   .wind-site-name {
     padding: 0.37vh 2.222vh;

src/views/WindSite/pages/Info/StandAloneImg.vue

@@ -369,24 +369,24 @@
                 :class="{ 'stand-alone-line': line && hover == 3 }"
                 x1="320"
                 y1="330"
-                x2="620"
-                y2="30"
+                x2="640"
+                y2="100"
                 stroke="#edbf03"
                 stroke-width="2"
             />
             <circle
                 :class="{ 'stand-alone-circle': circle && hover == 3 }"
-                cx="620"
-                cy="30"
+                cx="640"
+                cy="100"
                 r="5"
                 fill="#edbf03"
             />
             <text
                 :class="{ 'stand-alone-text': text && hover == 3 }"
-                x="630"
-                y="30"
+                x="650"
+                y="100"
                 fill="#36348e"
-                font-size="24"
+                font-size="70"
             >
                 变桨
             </text>
@@ -432,7 +432,7 @@
                 x="1060"
                 y="80"
                 fill="#36348e"
-                font-size="24"
+                font-size="70"
             >
                 机舱
             </text>
@@ -479,7 +479,7 @@
                 x="1110"
                 y="250"
                 fill="#36348e"
-                font-size="24"
+                font-size="70"
             >
                 齿轮箱
             </text>
@@ -526,7 +526,7 @@
                 x="1300"
                 y="920"
                 fill="#36348e"
-                font-size="24"
+                font-size="70"
             >
                 发电机
             </text>
@@ -572,7 +572,7 @@
                 x="960"
                 y="1050"
                 fill="#36348e"
-                font-size="24"
+                font-size="70"
             >
                 偏航
             </text>
@@ -619,7 +619,7 @@
                 x="1160"
                 y="1030"
                 fill="#36348e"
-                font-size="24"
+                font-size="70"
             >
                 液压
             </text>
@@ -644,8 +644,8 @@ export default {
             circle: false,
             text: false,
             hover: 0,
-            svgWidth: 157,
-            svgHeight: 107,
+            svgWidth: 1386,
+            svgHeight: 400,
         };
     },
     props: {
@@ -703,6 +703,7 @@ export default {
         // 渲染前
     },
     mounted() {
+        console.log(222222);
         // 渲染后
         let isShow = setInterval(() => {
             if (this.$el.style.display != 'none') {

src/views/WindSite/pages/Info/pages/generator.vue

@@ -69,12 +69,26 @@ export default {
     rinseData (array = [], length) {
       let index = 0;
       let newArray = [];
+      if(array.length<6){
+        let len = 6-array.length
+        for (let index = 0; index < len; index++) {
+          let obj = {}
+          array.push(obj)
+        }
+      }
 
       while (index < array.length) {
         newArray.push(array.slice(index, index += length));
       }
 
       return newArray;
+    },
+    dataDeal(value){
+      this.datamap = value
+      if(this.activeIndex != 0){
+        this.sourceMapAI = this.rinseData(this.datamap[this.widgetIndex[this.activeIndex - 1]].ai, 6);
+        this.sourceMapDI = this.rinseData(this.datamap[this.widgetIndex[this.activeIndex - 1]].di, 6);
+      }
     }
   },
   // 生命周期钩子
@@ -100,15 +114,8 @@ export default {
     index(value) {
       this.activeIndex = value;
       if(this.activeIndex != 0){
-        this.sourceMapAI = this.rinseData(this.datamap[this.widgetIndex[this.activeIndex - 1]].ai, 4);
-        this.sourceMapDI = this.rinseData(this.datamap[this.widgetIndex[this.activeIndex - 1]].di, 4);
-      }
-    },
-    data(value) {
-       this.datamap = value;
-       if(this.activeIndex != 0){
-        this.sourceMapAI = this.rinseData(this.datamap[this.widgetIndex[this.activeIndex - 1]].ai, 4);
-        this.sourceMapDI = this.rinseData(this.datamap[this.widgetIndex[this.activeIndex - 1]].di, 4);
+        this.sourceMapAI = this.rinseData(this.datamap[this.widgetIndex[this.activeIndex - 1]].ai, 6);
+        this.sourceMapDI = this.rinseData(this.datamap[this.widgetIndex[this.activeIndex - 1]].di, 6);
       }
     },
   },
@@ -175,8 +182,8 @@ export default {
         width: 100%;
       }
       .location-td{
-        width: 20%;
-        padding-left: 7%;
+        // width: 20%;
+        // padding-left: 7%;
         text-align: left;
       }
     }

src/views/WindSite/pages/Inverter-Info.vue

@@ -18,10 +18,10 @@
       </div>
       <div class="Inverter-Info-body">
         <div class="Inverter-Info-title">
-          <div class="title">{{info.name}}</div>
+          <div class="title">{{ info.name }}</div>
 
           <div class="title-tools-left">
-            <div class="other">逆变器型号：{{info.modelid}}</div>
+            <div class="other">逆变器型号：{{ info.modelid }}</div>
             <div class="state">
               状态：
               <div class="dot" :class="stateColor"></div>
@@ -39,40 +39,74 @@
               <div class="form">
                 <div>
                   <table class="table-form mg-b-8" height="60%">
-                    <tr v-for="(aiarr) in aiData" :key="aiarr">
-                      <td class="text gray">{{aiarr[0].name}}</td>
-                      <td class="value green">{{aiarr[0].value}}</td>
-                      <td class="unit gray">{{aiarr[0].unit}}</td>
-                      <td class="text gray" v-if="aiarr.length>1">{{aiarr[1].name}}</td>
-                      <td class="value green" v-if="aiarr.length>1">{{aiarr[1].value}}</td>
-                      <td class="unit gray" v-if="aiarr.length>1">{{aiarr[1].unit}}</td>
+                    <tr v-for="aiarr in aiData" :key="aiarr">
+                      <td class="text gray">{{ aiarr[0].name }}</td>
+                      <td class="value green">{{ aiarr[0].value }}</td>
+                      <td class="unit gray">{{ aiarr[0].unit }}</td>
+                      <td class="text gray" v-if="aiarr.length > 1">
+                        {{ aiarr[1].name }}
+                      </td>
+                      <td class="value green" v-if="aiarr.length > 1">
+                        {{ aiarr[1].value }}
+                      </td>
+                      <td class="unit gray" v-if="aiarr.length > 1">
+                        {{ aiarr[1].unit }}
+                      </td>
                     </tr>
                   </table>
                 </div>
                 <div>
                   <panel class="line-panel" :title="'开网频率'">
-                    <multiple-line-chart :list="lineValue" :units="['']" height="100%" />
+                    <multiple-line-chart
+                      :list="lineValue"
+                      :units="['']"
+                      height="100%"
+                    />
                   </panel>
                 </div>
               </div>
               <div class="states">
                 <div class="counts">
-                  <div class="all">
+                  <div class="all" @click="handleChange(0)">
                     <span class="text">全部状态</span>
-                    <span class="value">30</span>
+                    <span class="value">{{ diAll.length }}</span>
                   </div>
-                  <div class="error">
+                  <div class="error" @click="handleChange(1)">
                     <span class="text">报警状态</span>
-                    <span class="value">30</span>
+                    <span class="value">{{
+                      diAll.filter((item) => item.value === 1).length
+                    }}</span>
                   </div>
                 </div>
                 <div class="state-list">
                   <el-scrollbar>
-                    <div class="list-body">
+                    <div class="list-body" v-if="current === 0">
                       <div v-for="item of diAll" :key="item" class="list-item">
-                        <div class="text">{{item.name}}</div>
+                        <div class="text">{{ item.name }}</div>
                         <div class="state">
-                          <div :class="{ red: item.value == 1, green: item.value != 1 }"></div>
+                          <div
+                            :class="{
+                              red: item.value == 1,
+                              green: item.value != 1,
+                            }"
+                          ></div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="list-body" v-if="current === 1">
+                      <div
+                        v-for="item of errorList"
+                        :key="item"
+                        class="list-item"
+                      >
+                        <div class="text">{{ item.name }}</div>
+                        <div class="state">
+                          <div
+                            :class="{
+                              red: item.value == 1,
+                              green: item.value != 1,
+                            }"
+                          ></div>
                         </div>
                       </div>
                     </div>
@@ -93,6 +127,7 @@ import List from "@com/coms/list/list.vue";
 import Panel from "../../../components/coms/panel/panel.vue";
 import MultipleLineChart from "../../../components/chart/line/multiple-line-chart.vue";
 import collapseList from "@/components/coms/collapse/collapse-list.vue";
+import api from "@api/cockpit/matrix/index.js";
 export default {
   // 名称
   name: "Box",
@@ -102,15 +137,17 @@ export default {
     List,
     Panel,
     MultipleLineChart,
-    collapseList
+    collapseList,
   },
   // 数据
   data() {
     return {
       timmer: null,
       timmer1: null,
+      current: 0,
       WindSites: [],
       diAll: [],
+      errorList: [],
       diOn: [],
       info: {},
       stateColor: "blue",
@@ -119,9 +156,9 @@ export default {
         datas: [
           {
             text: "1#逆变室",
-            color: "blue"
-          }
-        ]
+            color: "blue",
+          },
+        ],
       },
       wtId: "PL01_01",
       aiData: [],
@@ -131,22 +168,22 @@ export default {
           value: [
             {
               text: "00:00",
-              value: 0
-            }
-          ]
-        }
-      ]
+              value: 0,
+            },
+          ],
+        },
+      ],
     };
   },
   // 函数
   methods: {
-    selectList: function(item) {
+    selectList: function (item) {
       console.log(item);
     },
-    select: function(item) {
+    select: function (item) {
       console.log(item);
     },
-    onReturn: function() {
+    onReturn: function () {
       console.log("return");
     },
     // 点击左侧菜单
@@ -154,45 +191,38 @@ export default {
       // console.log(res);
       this.wpId = res.wpId;
       this.wtId = res.wtId;
-      this.$router.replace(`/monitor/windsite/inverter-info/${res.wpId}/${res.wtId}`);
+      this.$router.replace(
+        `/monitor/windsite/inverter-info/${res.wpId}/${res.wtId}`
+      );
       this.getData();
       this.getLineChart();
     },
     async buildSelectList() {
-      let res = await this.API.requestData({
-        method: "POST",
-        // baseURL: "http://localhost:8082/",
-        subUrl: "matrix/findPVSimpleMatrixAll"
-      });
+      let res = await api.findPVSimpleMatrixAll();
       let WindSites = [];
-      res.data.data.forEach((ele, index) => {
-        ele.inverterls.forEach(function(inver) {
+      res?.data?.data?.forEach((ele, index) => {
+        ele.inverterls.forEach(function (inver) {
           // inver["text"] = inver["wtnum"];
           inver["text"] = inver["wtnum"];
           inver["color"] = "blue";
           inver["id"] = inver["wtId"];
-          
         });
         WindSites.push({
           id: String(index),
           text: ele.wpName,
-          children: ele.inverterls
+          children: ele.inverterls,
         });
       });
       this.WindSites = WindSites;
     },
     async getData() {
-      let res = await this.API.requestData({
-        method: "POST",
-        // baseURL: "http://localhost:8082/",
-        subUrl: "monitorinverter/findInverterInfo",
-        data: {
-          wtId: this.wtId
-        }
+      let res = await api.findInverterInfo({
+        wtId: this.wtId,
       });
+      console.log(111111);
       const aiData = [];
-      if (res.data.data.listAI) {
-        const arr = res.data.data.listAI;
+      if (res?.data?.listAI) {
+        const arr = res.data.listAI;
         for (let index = 0; index < arr.length; index = index + 2) {
           const elem1 = arr[index];
           const elem2 = arr[index + 1];
@@ -204,20 +234,15 @@ export default {
       }
       this.aiData = aiData;
       // di
-      if (res.data.data.listDI) {
-        this.diAll = res.data.data.listDI.allList;
-        this.diOn = res.data.data.listDI.onList;
+      if (res.data.listDI) {
+        this.diAll = res.data.listDI.allList;
+        this.diOn = res.data.listDI.onList;
       }
-      this.info = res.data.data.info;
+      this.info = res.data.info;
     },
     async getLineChart() {
-      let res = await this.API.requestData({
-        method: "POST",
-        // baseURL: "http://localhost:8082/",
-        subUrl: "monitorinverter/findInverterPowerLine",
-        data: {
-          wtId: this.wtId
-        }
+      let res = await api.findInverterPowerLine({
+        wtId: this.wtId,
       });
       let date = new Date();
       date.setHours(0);
@@ -228,35 +253,32 @@ export default {
         date.setMinutes(i * 30);
         result.push({
           text: new Date(timt + i * 1000 * 60 * 30).formatDate("hh:mm"),
-          value: res.data.data[i]
+          value: res.data.data[i],
         });
       }
       this.lineValue = [
         {
           title: "功率",
-          value: result
-        }
+          value: result,
+        },
       ];
     },
     async getTurbinesState() {
       let that = this;
-      let res = await this.API.requestData({
-        method: "POST",
-        subUrl: "matrix/matrixDetialGfPush"
-      });
+      let res = await api.matrixDetialGfPush();
       const ztmap = {};
-      if (res && res.data && res.data.data && res.data.data.fjmap) {
-        res.data.data.fjmap.forEach(function(fcList) {
-          fcList.forEach(function(fjItem) {
+      if (res?.data?.data?.fjmap) {
+        res.data.data.fjmap.forEach(function (fcList) {
+          fcList.forEach(function (fjItem) {
             ztmap[fjItem["wtId"]] = fjItem["fjzt"];
           });
         });
       }
       that.stateColor = that.getColor(ztmap[that.wtId]);
       if (this.WindSites) {
-        this.WindSites.forEach(function(ws) {
+        this.WindSites.forEach(function (ws) {
           if (ws.children) {
-            ws.children.forEach(function(fj) {
+            ws.children.forEach(function (fj) {
               fj["color"] = that.getColor(ztmap[fj.wtId]);
             });
           }
@@ -287,7 +309,18 @@ export default {
           return "write";
           break;
       }
-    }
+    },
+    handleChange(current) {
+      this.current = current;
+      if (current === 1) {
+        this.errorList = [];
+        this.diAll.forEach((item) => {
+          if (item.value === 1) {
+            this.errorList.push(item);
+          }
+        });
+      }
+    },
   },
   // 生命周期钩子
   beforeCreate() {
@@ -328,7 +361,7 @@ export default {
     this.timmer = null;
     clearInterval(this.timmer1);
     this.timmer1 = null;
-  }
+  },
 };
 </script>