常规提交

src/components/windDetail/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="bodys">
-    <div class="edge" v-if="Object.keys(monitorInfo).length">
+     <!-- v-if="Object.keys(monitorInfo).length" -->
+    <div class="edge" v-if="0">
       <div class="info" style="position: relative">
         <div class="info-wrapper">
           <!-- <div class="ps-info">
@@ -130,7 +131,7 @@
     </div>
     <div class="parts">
       <div class="part-top">
-        <div class="part-title"  :data-type="$store.state.moreSty">
+        <div class="part-title">
           <div
             class="title-item part-left"
             :class="{ active: current === 'fdj' }"
@@ -174,134 +175,77 @@
           >
             机舱信息
           </div>
-          <div
+          <!-- <div
             class="title-item part-right"
             :class="{ active: current === 'qt' }"
             @click="handleClick('qt')"
           >
             其他
+          </div> -->
+          <div
+            class="title-item part-right"
+            :class="{ active: current === 'zz' }"
+            @click="handleClick('zz')"
+          >
+            主轴
           </div>
         </div>
         <div class="part-imgs" v-if="otherInfo?.model == 'XE100-2000'">
-            <img
-                v-if="$store.state.moreSty === 'greenSty'"
-                class="wind-part"
-                :style="{ width: flag ? '450px' : '500px' }"
-                src="@assets/imgs/zqfj.png"
-            />
-            <img
-                v-else
-                class="wind-part"
-                :style="{ width: flag ? '450px' : '500px' }"
-                src="@assets/imgs/zqfj_b.png"
-            />
+          <img
+            class="wind-part"
+            :style="{ width: flag ? '450px' : '500px' }"
+            src="@assets/imgs/zqfj.png"
+          />
         </div>
         <div class="part-imgs" v-else>
-            <div v-if="current === 'fdj'">
-                <img
-                    v-if="$store.state.moreSty === 'greenSty'"
-                    class="wind-part"
-                    :style="{ width: flag ? '650px' : '800px' }"
-                    src="@assets/imgs/fdj.png"
-                />
-                <img
-                    v-else
-                    class="wind-part"
-                    :style="{ width: flag ? '650px' : '800px' }"
-                    src="@assets/imgs/fdj_b.png"
-                />
-            </div>
-            <div v-if="current === 'clx'">
-                <img
-                    v-if="$store.state.moreSty === 'greenSty'"
-                    class="wind-part"
-                    :style="{ width: flag ? '650px' : '800px' }"
-                    src="@assets/imgs/clx.png"
-                />
-                <img
-                    v-else
-                    class="wind-part"
-                    :style="{ width: flag ? '650px' : '800px' }"
-                    src="@assets/imgs/clx_b.png"
-                />
-            </div>
-            <div v-if="current === 'bj'">
-                <img
-                    v-if="$store.state.moreSty === 'greenSty'"
-                    class="wind-part"
-                    :style="{ width: flag ? '650px' : '800px' }"
-                    src="@assets/imgs/bj.png"
-                />
-                <img
-                    v-else
-                    class="wind-part"
-                    :style="{ width: flag ? '650px' : '800px' }"
-                    src="@assets/imgs/bj_b.png"
-                />
-            </div>
-            <div v-if="current === 'ph'">
-                <img
-                    v-if="$store.state.moreSty === 'greenSty'"
-                    class="wind-part"
-                    :style="{ width: flag ? '650px' : '800px' }"
-                    src="@assets/imgs/ph.png"
-                />
-                <img
-                    v-else
-                    class="wind-part"
-                    :style="{ width: flag ? '650px' : '800px' }"
-                    src="@assets/imgs/ph_b.png"
-                />
-            </div>
-            <div v-if="current === 'yy'">
-                <img
-                    v-if="$store.state.moreSty === 'greenSty'"
-                    class="wind-part"
-                    :style="{ width: flag ? '650px' : '800px' }"
-                    src="@assets/imgs/yy.png"
-                />
-                <img
-                    v-else
-                    class="wind-part"
-                    :style="{ width: flag ? '650px' : '800px' }"
-                    src="@assets/imgs/yy_b.png"
-                />
-            </div>
-            <div v-if="current === 'jc'">
-                <img
-                    v-if="$store.state.moreSty === 'greenSty'"
-                    class="wind-part"
-                    :style="{ width: flag ? '650px' : '800px' }"
-                    src="@assets/imgs/jc.png"
-                />
-                <img
-                    v-else
-                    class="wind-part"
-                    :style="{ width: flag ? '650px' : '800px' }"
-                    src="@assets/imgs/jc_b.png"
-                />
-            </div>
-            <div v-if="current === 'qt'">
-                <img
-                    v-if="$store.state.moreSty === 'greenSty'"
-                    class="wind-part"
-                    :style="{ width: flag ? '650px' : '800px' }"
-                    src="@assets/imgs/qt.png"
-                />
-                <img
-                    v-else
-                    class="wind-part"
-                    :style="{ width: flag ? '650px' : '800px' }"
-                    src="@assets/imgs/qt_b.png"
-                />
-            </div>
+          <img
+            v-if="current === 'fdj'"
+            class="wind-part"
+            :style="{ width: flag ? '650px' : '800px' }"
+            src="@assets/imgs/fdj_b.png"
+          />
+          <img
+            v-if="current === 'clx'"
+            class="wind-part"
+            :style="{ width: flag ? '650px' : '800px' }"
+            src="@assets/imgs/clx_b.png"
+          />
+          <img
+            v-if="current === 'bj'"
+            class="wind-part"
+            :style="{ width: flag ? '650px' : '800px' }"
+            src="@assets/imgs/bj_b.png"
+          />
+          <img
+            v-if="current === 'ph'"
+            class="wind-part"
+            :style="{ width: flag ? '650px' : '800px' }"
+            src="@assets/imgs/ph_b.png"
+          />
+          <img
+            v-if="current === 'yy'"
+            class="wind-part"
+            :style="{ width: flag ? '650px' : '800px' }"
+            src="@assets/imgs/yy_b.png"
+          />
+          <img
+            v-if="current === 'jc'"
+            class="wind-part"
+            :style="{ width: flag ? '650px' : '800px' }"
+            src="@assets/imgs/jc_b.png"
+          />
+          <img
+            v-if="current === 'qt'"
+            class="wind-part"
+            :style="{ width: flag ? '650px' : '800px' }"
+            src="@assets/imgs/qt_b.png"
+          />
         </div>
       </div>
       <div class="part-info">
         <div
           class="part-body"
-          style="max-height: 220px"
-          v-if="partDInfos.length"
+          style="max-height: 25vh"
         >
           <div class="monitoring-item">
             <div class="point point-left bottom"></div>
@@ -327,8 +271,7 @@
         </div>
         <div
           class="part-body"
-          style="max-height: 220px"
-          v-if="partAInfos.length"
+          style="max-height: 25vh"
         >
           <div class="monitoring-item">
             <div class="point point-left bottom"></div>
@@ -363,17 +306,97 @@
         </div>
       </div>
     </div>
+    <div class="problems" style="color: #fff">
+        <div class="problemTit">
+            <div class="point point-left bottom"></div>
+            <div class="point point-right bottom"></div>
+            <span style="font-size: 16px;position: relative;top: -5px;">故障分类</span>
+            <div class="problemSeach">
+                <el-input v-model="inputcv" clearable placeholder="请输入" />
+                <div class="seachBtn">
+                    <el-icon :size="18" :color="color">
+                        <Search />
+                    </el-icon>
+                </div>
+            </div>
+        </div>
+        <div class="problemMain">
+            <div class="problemWarn">
+                <div class="warn">
+                    <div class="warnCom">
+                        <div class="circle-container">
+                            <svg class="circle-segment segment-1" viewBox="0 0 100 100">
+                                <circle cx="50" cy="50" r="40"></circle>
+                            </svg>
+                        </div>
+                        <div class="warnComImg">
+                            <img src="@/assets/imgs/danger.png" alt="">
+                        </div>
+                        <div class="warnComNum">
+                            <div class="numTop">42</div>
+                            <div class="numBot">总故障</div>
+                        </div>
+                    </div>
+                    <div class="warnItems" v-for="(it, index) in 7" :key="index">
+                        <div class="warnItemLeft">20</div>
+                        <div class="warnItemRight">防雷保护类</div>
+                    </div>
+                </div>
+                <div class="warn" v-for="(it, index) in 2" :key="index">
+                    <div class="warnItems" v-for="(it, index) in 10" :key="index">
+                        <div class="warnItemLeft" :class="isRed(index)">20</div>
+                        <div class="warnItemRight" :class="isRed(index)">防雷保护类</div>
+                    </div>
+                </div>
+            </div>
+            <div class="warnTable">
+                <el-table
+                    size="mini"
+                    :data="tableData"
+                    style="width: 100%; height: calc(100% - 310px)"
+                    max-height="520px"
+                    stripe>
+                    <el-table-column
+                        v-for="item in tableHeader"
+                        :label="item.name"
+                        :prop="item.code"
+                        :key="item.code"
+                        :width="item.width || ''"
+                        show-overflow-tooltip
+                        header-align="center"
+                        align="center"
+                    >
+                    <template #default="scope">
+                        <span v-if="item.code == 'status'">
+                            <span :style="scope.row.status === 0 ? 'color: red' : ''">{{scope.row.status === 0 ? "异常" : "正常"}}</span>
+                        </span>
+                        <span v-else>
+                            {{
+                                scope.row[item.code] != "NULL" ? scope.row[item.code] : ""
+                            }}
+                        </span>
+                    </template>
+                    </el-table-column>
+                </el-table>
+            </div>
+        </div>
+    </div>
     <alarmDialog ref="alarmDialog" />
     <powerAndSpeed ref="powerAndSpeed" :tabEvent="-1" />
   </div>
 </template>
 <script>
+import {
+  Search
+} from '@element-plus/icons-vue'
 import { GetWtPoints, GetPointsData } from "@/api/points/index.js";
 import powerAndSpeed from "@/components/powerAndSpeedSearch/index.vue";
 import {
   GetWtMonitorInfo,
   GetWtTelemeteryInfo,
   GetWtOtherInfo,
+  GetMatrixalarmtype,
+  GetMatrixalarmtypeTable
 } from "@/api/factoryMonitor/index.js";
 import svgIcon from "@/components/coms/icon/svg-icon.vue";
 import alarmDialog from "@/components/alarm";
@@ -381,6 +404,7 @@ export default {
   name: "windDetail",
   data() {
     return {
+        inputcv: "",
       current: "fdj",
       windname: "",
       wtid: "",
@@ -390,8 +414,59 @@ export default {
       otherInfo: {},
       partAInfo: [],
       partDInfo: [],
-      partAInfos: [],
-      partDInfos: [],
+      partAInfos: [
+        [
+            {
+                "name": "AI值1",
+                "value": 10.2,
+                "valueUnit": "%"
+            },
+            {
+                "name": "AI值2",
+                "value": 23.4,
+                "valueUnit": "%"
+            },
+            {
+                "name": "AI值3",
+                "value": 32.5,
+                "valueUnit": "%"
+            },
+            {
+                "name": "AI值4",
+                "value": 54.5,
+                "valueUnit": "%"
+            },
+            {
+                "name": "AI值5",
+                "value": 14.5,
+                "valueUnit": "%"
+            },
+        ]
+      ],
+      partDInfos: [
+        [
+            {
+                "name": "DI值1",
+                "value": 10.2
+            },
+            {
+                "name": "DI值2",
+                "value": 23.4
+            },
+            {
+                "name": "DI值3",
+                "value": 32.5
+            },
+            {
+                "name": "DI值4",
+                "value": 54.5
+            },
+            {
+                "name": "DI值5",
+                "value": 14.5
+            },
+        ]
+      ],
       uniformcodesA: [],
       uniformcodesD: [],
       resA: [],
@@ -406,9 +481,137 @@ export default {
       colorFlag: false,
       timer: "",
       times: "",
+      warnLeft: [
+        {
+            name: "防雷保护类",
+            value: 10
+        }
+      ],
+      tableData: [
+        {
+            code: "1000",
+            name: "变桨电池充电故障",
+            message: "error_battery_charger",
+            status: 1
+        },
+        {
+            code: "1002",
+            name: "转子侧变流器电流故障",
+            message: "error_converter_error_inu_flag",
+            status: 0
+        },
+        {
+            code: "1000",
+            name: "变桨电池充电故障",
+            message: "error_battery_charger",
+            status: 1
+        },
+        {
+            code: "1002",
+            name: "转子侧变流器电流故障",
+            message: "error_converter_error_inu_flag",
+            status: 0
+        },
+
+        {
+            code: "1000",
+            name: "变桨电池充电故障",
+            message: "error_battery_charger",
+            status: 1
+        },
+        {
+            code: "1002",
+            name: "转子侧变流器电流故障",
+            message: "error_converter_error_inu_flag",
+            status: 0
+        },
+        {
+            code: "1000",
+            name: "变桨电池充电故障",
+            message: "error_battery_charger",
+            status: 1
+        },
+        {
+            code: "1002",
+            name: "转子侧变流器电流故障",
+            message: "error_converter_error_inu_flag",
+            status: 0
+        },
+        {
+            code: "1000",
+            name: "变桨电池充电故障",
+            message: "error_battery_charger",
+            status: 1
+        },
+        {
+            code: "1002",
+            name: "转子侧变流器电流故障",
+            message: "error_converter_error_inu_flag",
+            status: 0
+        },
+        {
+            code: "1000",
+            name: "变桨电池充电故障",
+            message: "error_battery_charger",
+            status: 1
+        },
+        {
+            code: "1002",
+            name: "转子侧变流器电流故障",
+            message: "error_converter_error_inu_flag",
+            status: 0
+        },
+        {
+            code: "1000",
+            name: "变桨电池充电故障",
+            message: "error_battery_charger",
+            status: 1
+        },
+        {
+            code: "1002",
+            name: "转子侧变流器电流故障",
+            message: "error_converter_error_inu_flag",
+            status: 0
+        },
+        {
+            code: "1000",
+            name: "变桨电池充电故障",
+            message: "error_battery_charger",
+            status: 1
+        },
+        {
+            code: "1002",
+            name: "转子侧变流器电流故障",
+            message: "error_converter_error_inu_flag",
+            status: 0
+        },
+
+      ],
+      tableHeader: [
+        {
+            code: "code",
+            name: "报警编号"
+        },
+        {
+            code: "name",
+            name: "PCL变量名"
+        },
+        {
+            code: "message",
+            name: "报警文字信息"
+        },
+        {
+            code: "status",
+            name: "报警状态"
+        },
+      ],
+      warnTypeData: {
+        typeData: [],
+        tableData: []
+      }
     };
   },
-  components: { svgIcon, alarmDialog, powerAndSpeed },
+  components: { svgIcon, alarmDialog, powerAndSpeed,  },
   apiUrl: "",
   props: {
     wind: {
@@ -486,10 +689,42 @@ export default {
     },
   },
   methods: {
+    getwarnTypeData() {
+        let that = this
+        let params = {
+            wtid: "NX_FGS_HA_F_WT_0039_EQ"
+            // wtid: that.wind.wtid
+        }
+        GetMatrixalarmtype(params).then(res =>{
+            if (res && res.data) {
+                that.warnTypeData.typeData = res.data
+                that.getwarnTableData(res.data[0])
+            }
+        })
+    },
+    getwarnTableData(data) {
+        let that = this
+        let params = {
+            type: "BJXT",
+            wtid: "NX_FGS_HA_F_WT_0039_EQ"
+            // type: data.nemCode,
+            // wtid: that.wind.wtid
+        }
+        GetMatrixalarmtypeTable(params).then(res =>{
+            if (res && res.data) {
+                that.warnTypeData.tableData = res.data
+            }
+        })
+    },
     handleXhClick(wind) {
       //   console.log(wind);
       this.$refs.powerAndSpeed && this.$refs.powerAndSpeed.init(wind);
     },
+    isRed(val) {
+        if (val === 2 || val === 6) {
+            return 'redsty'
+        }
+    },
     cancle() {
       this.windInfo = {};
       this.windname = "";
@@ -921,8 +1156,9 @@ export default {
   }
 
   .parts {
-    width: calc(100% - 400px - 20px);
-    margin-left: 20px;
+    // width: calc(100% - 600px - 20px);
+    width: calc(70vw - 20px);
+    margin-right: 20px;
     height: 100%;
     display: flex;
     flex-direction: column;
@@ -932,42 +1168,13 @@ export default {
     .part-top {
       flex: 1;
       width: 100%;
-      text-align: center;
-    }
-
-    .part-title[data-type~="greenSty"] {
-        .title-item {
-            border-left: 1px solid #3b6c53;
-            border-top: 1px solid #3b6c53;
-            border-bottom: 1px solid #3b6c53;
-            &.part-right {
-                border-right: 1px solid #3b6c53;
-            }
-            &.active {
-                background-color: rgba(0, 199, 19, 0.4);
-            }
-        }
-    }
-    .part-title[data-type~="blueSty"] {
-        .title-item {
-            border-left: 1px solid #3b586c;
-            border-top: 1px solid #3b586c;
-            border-bottom: 1px solid #3b586c;
-            &.part-right {
-                border-right: 1px solid #3b4f6c;
-            }
-            &.active {
-                background-color: rgba(0, 109, 199, 0.4);
-            }
-        }
     }
     .part-title {
       width: 100%;
       height: 30px;
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       flex-direction: row;
-      justify-content: center;
       .title-item {
         width: 140px;
         height: 100%;
@@ -977,16 +1184,22 @@ export default {
         justify-content: center;
         // background: rgba(67, 81, 107, 0.2);
         background: rgba(96, 103, 105, 0.2);
+        border-left: 1px solid rgba(0, 70, 199, 0.48);
+        border-top: 1px solid rgba(0, 70, 199, 0.48);
+        border-bottom: 1px solid rgba(0, 70, 199, 0.48);
 
         &.part-left {
           border-radius: 15px 0px 0px 15px;
         }
 
         &.part-right {
+          border-right: 1px solid rgba(0, 70, 199, 0.48);
           border-radius: 0px 15px 15px 0px;
         }
 
         &.active {
+          //   background-color: rgba(0, 70, 199, 0.4);
+          background-color: rgba(0, 70, 199, 0.48);
           color: #ffffff;
         }
       }
@@ -1004,7 +1217,7 @@ export default {
 
     .part-info {
       width: 100%;
-      max-height: 440px;
+      max-height: 50vh;
       bottom: 0px;
       display: flex;
       flex-direction: column-reverse;
@@ -1062,7 +1275,7 @@ export default {
                 width: 8px;
                 height: 8px;
                 border-radius: 50%;
-                background-color: #05bb4c;
+                background-color: rgba(0, 70, 199, 0.48);
                 margin-right: 90px;
               }
 
@@ -1083,6 +1296,199 @@ export default {
       }
     }
   }
+
+  .problems{
+    width: 30vw;
+    background: rgba(96, 103, 105, 0.2);
+    border-radius: 5px;
+    padding: 10px;
+    .problemTit{
+        display: flex;
+        justify-content: space-between;
+        position: relative;
+        width: 98%;
+        height: 42px;
+        border-bottom: 1px solid #363b46;
+        display: flex;
+        align-items: center;
+        padding-left: 20px;
+        font-size: 16px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #ffffff;
+
+        .problemSeach{
+            display: flex;
+            .el-input{
+                width: 150px;
+                position: relative;
+                top: -4px;
+                margin-right: 5px;
+            }
+            .seachBtn{
+                width: 30px;
+                height: 30px;
+                background: rgba(0, 70, 199, 0.48);
+                border-radius: 30px;
+                position: relative;
+                margin-left: 5px;
+                cursor: pointer;
+                .el-icon{
+                    position: absolute;
+                    top: 6px;
+                    left: 7px;
+                }
+                &:hover {
+                    background-color: rgba(16, 81, 219, 0.5);
+                    color: #ffffff;
+                }
+            }
+            .buttons {
+                background-color: rgba(5, 187, 76, 0.2);
+                border: 1px solid #3b6c53;
+                color: #b3b3b3;
+                font-size: 14px;
+                width: 40px;
+                height: 30px;
+                position: relative;
+                padding: 0 25px !important;
+                .button{
+                    position: absolute;
+                    left: 13px;
+                    top: 7px;
+                }
+
+                &:hover {
+                background-color: rgba(5, 187, 76, 0.5);
+                color: #ffffff;
+                }
+            }
+        }
+    }
+    .problemMain{
+        .problemWarn{
+            margin-top: 10px;
+            display: flex;
+            justify-content: space-between;
+            width: 100%;
+            .warn{
+                width: 32%;
+            }
+            .warnCom{
+                width: 100%;
+                height: 100px;
+                // border: 1px solid rgba(255,0,0,0.8);
+                margin-bottom: 5px;
+                box-shadow: inset 0px 0px 40px 0px red;
+                animation: flash 1s infinite alternate; /* 闪烁动画 */
+                .warnComImg{
+                    width: 50px;
+                    height: 50px;
+                    text-align: center;
+                    border-radius: 50px;
+                    border: 1px solid rgba(255,0,0,.3);
+                    position: relative;
+                    top: -74px;
+                    left: 22px;
+                    img{
+                        position: relative;
+                        top: 5px;
+                    }
+                }
+                .warnComNum{
+                    position: relative;
+                    top: -119px;
+                    left: 88px;
+                    width: 55px;
+                    .numTop{
+                        font-size: 22px;
+                        font-weight: bold;
+                        color: red;
+                        text-align: end;
+                    }
+                    .numBot{
+                        font-size: 14px;
+                        color: rgb(136, 136, 136);
+                        position: absolute;
+                        right: 0;
+                        top: 21px;
+                    }
+                }
+                .circle-container {
+                    width: 100px;
+                    height: 100px;
+                    position: relative;
+                }
+                .circle-segment {
+                    position: absolute;
+                    top: 20%;
+                    left: 17%;
+                    width: 60px;
+                    height: 60px;
+                    transform-origin: center;
+                    transform: translate(-50%, -50%);
+                    stroke-width: 5;
+                    fill: none;
+                    stroke-dasharray: 50, 30; /* 圆周长三分之一加间隔 */
+                    stroke-dashoffset: 0;
+                    animation: rotate 4s linear infinite;
+
+                }
+                .segment-1 { 
+                    stroke: red;
+                    transform: rotate(0deg);
+                }
+
+                @keyframes rotate {
+                    from {
+                    transform: rotate(0deg);
+                    }
+                    to {
+                    transform: rotate(360deg);
+                    }
+                }
+                
+            }
+            @keyframes flash {
+                from {
+                box-shadow: inset 0 0 10px #e60101; /* 开始时的内阴影 */
+                }
+                to {
+                box-shadow: inset 0 0 40px #f00; /* 结束时的内阴影，颜色更亮或更大 */
+                }
+            }
+            .warnItems{
+                width: 100%;
+                display: flex;
+                color: #817c7c;
+                margin-bottom: 3px;
+                .warnItemLeft{
+                    height: 32px;
+                    width: 20%;
+                    border: 1px solid #817c7c;
+                    margin-right: 1%;
+                    text-align: center;
+                    line-height: 28px;
+                }
+                .warnItemRight{
+                    height: 32px;
+                    width: 79%;
+                    line-height: 28px;
+                    border: 1px solid #817c7c;
+                    padding-left: 5px;
+                }
+                
+                .redsty{
+                    border: 1px solid red;
+                    color: red;
+                }
+            }
+        }
+        .warnTable{
+            margin-top: 10px;
+        }
+    }
+  }
 }
 
 .monitoring-item {
@@ -1161,7 +1567,7 @@ export default {
   .table-value {
     font-family: Arial;
     font-weight: 400;
-    color: #05bb4c;
+    color: rgb(15, 120, 240);
     margin-right: 25px;
   }
 }

src/views/stateMonitor/DetailMatrix/index.vue

@@ -327,6 +327,7 @@
       </el-scrollbar>
       <qushi-dialog ref="child" :chartName="chartName"></qushi-dialog>
       <el-dialog
+       :fullscreen="true"
         width="90%"
         top="40px"
         v-model="displayMatrix"
@@ -341,12 +342,12 @@
         <div class="dialog-body" style="height: 900px">
           <img class="dialog-img" src="@assets/imgs/dialog.png" />
           <windDetail
-            v-show="wtType == -1"
+            v-if="wtType == -1"
             :wind="wind"
             :flag="flag"
           ></windDetail>
           <lightDetail
-            v-show="wtType == -2"
+            v-if="wtType == -2"
             :wind="wind"
             :flag="flag"
           ></lightDetail>