一区报警弹窗播放音效需求开发完成

.gitignore

@@ -23,4 +23,9 @@ pnpm-debug.log*
 *.sw?
 
 #Electron-builder output
-/dist_electron
+/dist_electron
+
+#压缩包
+*.zip
+*.rar
+*.7z

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "newneic",
+  "name": "neic",
   "version": "0.1.0",
   "lockfileVersion": 1,
   "requires": true,

public/static/sound/音频说明.txt

@@ -0,0 +1,3 @@
+track.mp3 - 测试用音频
+syz.mp3 - 升压站报警音频
+wd.mp3 - 温度报警音频

src/App.vue

@@ -4,7 +4,11 @@
     <el-col>
       <el-row>
         <el-col>
-          <ModeControl ref="modeControl" :current="current" @clicks="handleClick"></ModeControl>
+          <ModeControl
+            ref="modeControl"
+            :current="current"
+            @clicks="handleClick"
+          ></ModeControl>
         </el-col>
       </el-row>
       <el-row>
@@ -23,98 +27,121 @@
   <router-view />
 </template>
 <script>
-  import TitleBar from 'views/TitleBar.vue'
-  import StatusBar from 'views/StatusBar.vue'
-  import MessageBridge from 'utils/MessageBridge'
-  import ModeControl from "components/modeControl/modeControl.vue";
-  import FocusArea from "components/focus/focusArea.vue";
-  import WarningArea from "components/warning/warningArea.vue";
-  export default {
-    components: {
-      TitleBar,
-      StatusBar,
-      ModeControl,
-      FocusArea,
-      WarningArea
+import TitleBar from "views/TitleBar.vue";
+import StatusBar from "views/StatusBar.vue";
+import MessageBridge from "utils/MessageBridge";
+import ModeControl from "components/modeControl/modeControl.vue";
+import FocusArea from "components/focus/focusArea.vue";
+import WarningArea from "components/warning/warningArea.vue";
+
+import api from "api/index";
+
+export default {
+  components: {
+    TitleBar,
+    StatusBar,
+    ModeControl,
+    FocusArea,
+    WarningArea,
+  },
+  created() {
+    this.initData();
+    this.subscribe();
+  },
+  methods: {
+    initData() {
+      let mb = MessageBridge.getInstance();
+      let windturbine = [
+        { key: "/topic/windturbine", action: this.windturbineMessage },
+      ];
+      let popup = [{ key: "/topic/fault-popup", action: this.faultMessage }];
+      let title = [{ key: "/topic/title-info", action: this.titleInfos }];
+      // var heartbeat = [{ key: "/topic/heartbeat-data", action: this.heartbeat }];
+      // mb.register(heartbeat);
+      mb.register(title);
+      mb.register(windturbine);
+      mb.register(popup);
     },
-    created: function () {
-      this.initData()
-      this.subscribe()
+    windturbineMessage(msg) {
+      let json = JSON.parse(msg);
+      this.$store.commit("windturbinelist", json);
     },
-    methods: {
-      initData: function () {
+    faultMessage(msg) {
+      let json = JSON.parse(msg);
+      this.$store.commit("warning", json);
+    },
+    // heartbeat(msg){
+    //   console.log(msg);
+    // },
+    subscribe() {
+      setTimeout(() => {
+        this.subscribe();
+      }, 20000);
+      if (!this.$store.state.observers) {
         let mb = MessageBridge.getInstance();
-        let windturbine = [{ key: "/topic/windturbine", action: this.windturbineMessage }];
+        let windturbine = [
+          { key: "/topic/windturbine", action: this.windturbineMessage },
+        ];
         let popup = [{ key: "/topic/fault-popup", action: this.faultMessage }];
         let title = [{ key: "/topic/title-info", action: this.titleInfos }];
-        // var heartbeat = [{ key: "/topic/heartbeat-data", action: this.heartbeat }];
-        // mb.register(heartbeat);
+        let suggestion = [
+          { key: "/topic/suggestion", action: this.suggestion },
+        ];
+        mb.register(suggestion);
         mb.register(title);
         mb.register(windturbine);
         mb.register(popup);
-      },
-      windturbineMessage(msg) {
-        let json = JSON.parse(msg);
-        this.$store.commit('windturbinelist', json)
-      },
-      faultMessage(msg) {
-        let json = JSON.parse(msg);
-        this.$store.commit('warning', json)
-      },
-      // heartbeat(msg){
-      //   console.log(msg);
-      // },
-      subscribe() {
-        setTimeout(() => {
-          this.subscribe()
-        }, 20000);
-        if (!this.$store.state.observers) {
-          let mb = MessageBridge.getInstance();
-          let windturbine = [{ key: "/topic/windturbine", action: this.windturbineMessage }];
-          let popup = [{ key: "/topic/fault-popup", action: this.faultMessage }];
-          let title = [{ key: "/topic/title-info", action: this.titleInfos }];
-          let suggestion = [{ key: "/topic/suggestion", action: this.suggestion }];
-          mb.register(suggestion);
-          mb.register(title);
-          mb.register(windturbine);
-          mb.register(popup);
-          this.$store.commit('observers', true)
-        }
+        this.$store.commit("observers", true);
       }
     },
-  }
+  },
+};
 </script>
 <style>
-  @import "../src/assets/styles/main.css";
-  body {
-    /* 设置内容不可选中 */
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-  }
+@import "../src/assets/styles/main.css";
+body {
+  /* 设置内容不可选中 */
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
 
-  /* .app{
+/* .app{
     background-color: #000000;
   } */
-  .right {
-    width: 32%;
-    position: absolute;
-    right: 20px;
-    z-index: 99;
-  }
+.right {
+  width: 32%;
+  position: absolute;
+  right: 20px;
+  z-index: 99;
+}
+
+.statusBar {
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
 
-  .statusBar {
-    width: 100%;
-    position: absolute;
-    bottom: 0;
-    left: 0;
+.titleBar {
+  width: 100%;
+  position: relative;
+  top: 0;
+  left: 0;
+}
+</style>
+<style lang="less">
+#app {
+  .currentScroll::-webkit-scrollbar {
+    width: 8px;
+    height: 0px;
+    background-color: black;
   }
 
-  .titleBar {
-    width: 100%;
-    position: relative;
-    top: 0;
-    left: 0;
+  .currentScroll::-webkit-scrollbar-thumb {
+    background-color: #292929;
+    border-radius: 6px;
   }
+}
 </style>

src/api/index.js

@@ -196,4 +196,11 @@ export default {
     getControlType,
     uodateControlType,
     getWindturbineFdc,
+    getStation(){
+        return request({
+            baseURL:process.env.VUE_APP_API,
+            url: `/api/station/agc`,
+            method: "get",
+        });
+    }
 };

src/components/areaCard.vue

@@ -344,7 +344,6 @@
                     val.active = array[2];
                     this.values.splice(array[1], 1, val);
                 }
-                console.log(this.values)
             },
             showWindows(item) {
                 this.dialogVisible = true;

src/components/control/controlAllArea.vue

@@ -20,19 +20,21 @@
         </el-select>
       </div>
       <div style="margin-top: 20px; margin-left: 35px; height: 85%">
-        <el-scrollbar>
-          <div class="scoll">
-            <div class="matrix" v-if="showList.length > 0">
-              <!-- <div class="problemTitle">待启动</div> -->
-              <MatrixBlock
-                @choose-click="handleClick"
-                @on-click="handleDetails"
-                :dataList="showList"
-              >
-              </MatrixBlock>
-            </div>
+        <div class="scoll">
+          <div
+            class="matrix currentScroll"
+            style="height: 100%;overflow-y:scroll"
+            v-if="showList.length > 0"
+          >
+            <!-- <div class="problemTitle">待启动</div> -->
+            <MatrixBlock
+              @choose-click="handleClick"
+              @on-click="handleDetails"
+              :dataList="showList"
+            >
+            </MatrixBlock>
           </div>
-        </el-scrollbar>
+        </div>
       </div>
     </div>
     <WindturbineDetailPages

src/components/control/controlArea.vue

@@ -1,45 +1,48 @@
 <template>
   <div class="problem">
-    <AreaCard title="控制区" height="60" :current="current" ref="areaCard"></AreaCard>
+    <AreaCard
+      title="控制区"
+      height="60"
+      :current="current"
+      ref="areaCard"
+    ></AreaCard>
   </div>
 </template>
 
 <script>
-  import AreaCard from "./areaCard.vue";
-  import BackgroundData from 'utils/BackgroundData'
-  export default {
-    name: "ProblemArea",
-    components: {
-      AreaCard,
+import AreaCard from "./areaCard.vue";
+import BackgroundData from "utils/BackgroundData";
+export default {
+  name: "ProblemArea",
+  components: {
+    AreaCard,
+  },
+  props: {
+    current: {
+      type: Number,
     },
-    props: {
-      current: {
-        type: Number,
+  },
+  data() {
+    return {
+      ls: {
+        maintain: { key: "维护", value: [] },
+        malfunction: { key: "故障", value: [] },
+        offline: { key: "离线", value: [] },
+        lockd: { key: "挂牌", value: [] },
       },
+    };
+  },
+  computed: {},
+  created() {},
+  methods: {
+    control(current) {
+      this.$refs.areaCard.control(current);
     },
-    data() {
-      return {
-        ls: {
-          maintain: { key: "维护", value: [] },
-          malfunction: { key: "故障", value: [] },
-          offline: { key: "离线", value: [] },
-          lockd: { key: "挂牌", value: [] },
-        },
-      };
-    },
-    computed: {},
-    created: function () {
-      console.log(this.current);
-    },
-    methods: {
-      control(current){
-        this.$refs.areaCard.control(current)
-      }
-    }
-  };
+  },
+};
 </script>
 <style scoped>
-  .problem {
-    height: 100%;
-  }
+.problem {
+  height: 100%;
+}
 </style>

src/components/focus/agcDetails.vue

@@ -1,220 +1,270 @@
 <template>
-    <el-dialog width="90%" @open="opened()" @closed="closed()" :fullscreen="true" :show-close="true" class="dialogs">
-        <template #title>
-            <div class="showTitles">
-                <div class="titles">AGC监控</div>
-            </div>
-        </template>
-        <div class="bodyy">
-            <DataDetails ref="detailst" :allDate="allDate" :allChartDate="allChartDate" :station="station"
-                @handleClick="handleClicks"></DataDetails>
-            <DetailsCharts v-model="detailsDisplay" :showData="showData" @closeds="closeds"></DetailsCharts>
-        </div>
-    </el-dialog>
+  <el-dialog
+    width="90%"
+    @open="opened()"
+    @closed="closed()"
+    :fullscreen="true"
+    :show-close="true"
+    class="dialogs"
+  >
+    <template #title>
+      <div class="showTitles">
+        <div class="titles">AGC监控</div>
+      </div>
+    </template>
+    <div class="bodyy">
+      <DataDetails
+        ref="detailst"
+        :allDate="allDate"
+        :allChartDate="allChartDate"
+        :station="station"
+        @handleClick="handleClicks"
+      ></DataDetails>
+      <DetailsCharts
+        v-model="detailsDisplay"
+        :showData="showData"
+        @closeds="closeds"
+      ></DetailsCharts>
+    </div>
+  </el-dialog>
 </template>
 <script>
-    import DataDetails from './dataDetails'
-    import DetailsCharts from './detailsCharts'
-    import { Photoelectric } from "utils/PhotoelectricDetailPages";
-    import api from "api/index";
-    export default {
-        components: {
-            DataDetails,
-            DetailsCharts
+import DataDetails from "./dataDetails";
+import DetailsCharts from "./detailsCharts";
+// import { Photoelectric } from "utils/PhotoelectricDetailPages";
+import api from "api/index";
+export default {
+  components: {
+    DataDetails,
+    DetailsCharts,
+  },
+  data() {
+    return {
+      Photoelectric: null,
+      station: [
+        {
+          id: "MHS_BT",
+          name: "麻黄山第二风电场",
+          names: "麻黄山",
         },
-        data() {
-            return {
-                station: [
-                    {
-                        id: 'MHS_BT',
-                        name: '麻黄山第二风电场',
-                        names: '麻黄山',
-                    },
 
-                    {
-                        id: 'NSS_BT',
-                        name: '牛首山第二风电场',
-                        names: '牛首山',
-                    },
-                    {
-                        id: 'QS_BT',
-                        name: '麻黄山第六风电场',
-                        names: '青山',
-                    },
-                    {
-                        id: 'XN6_BT',
-                        name: '星能第六风电场',
-                        names: '石板泉一期',
-                    },
-                    {
-                        id: 'N5_BT',
-                        name: '牛首山第五风电场',
-                        names: '二三四期',
-                    },
-                    {
-                        id: 'XS_BT',
-                        name: '香山第五风电场',
-                        names: '香山',
-                    },
-                    {
-                        id: 'SL_BT',
-                        name: '宋堡第六风电场',
-                        names: '青山三期',
-                    },
-                ],
-                allDate: {},
-                allChartDate: [],
-                detailsDisplay: false,
-                showData: {},
-            };
+        {
+          id: "NSS_BT",
+          name: "牛首山第二风电场",
+          names: "牛首山",
         },
-        mounted() {
-
+        {
+          id: "QS_BT",
+          name: "麻黄山第六风电场",
+          names: "青山",
+        },
+        {
+          id: "XN6_BT",
+          name: "星能第六风电场",
+          names: "石板泉一期",
+        },
+        {
+          id: "N5_BT",
+          name: "牛首山第五风电场",
+          names: "二三四期",
         },
-        updated() {
-            this.getLatest(0)
-            this.getChartData(0)
+        {
+          id: "XS_BT",
+          name: "香山第五风电场",
+          names: "香山",
         },
-        methods: {
-            getLatest(index) {
-                let dialogData = {}
-                let thisKey = Photoelectric[this.station[index].id];
-                let array = []
-                thisKey.forEach(item => { item.value ? array.push(item.value) : '' })
-                let params = array.join(',')
-                api.getLatest(params).then(res => {
-                    for (let v in res.data) {
-                        thisKey.forEach(item => {
-                            let calc = item.calc ? item.calc : 1;
-                            if (item.value === v) {
-                                dialogData[item.tag] = {
-                                    name: item.name,
-                                    value: res.data[v].doubleValue ? res.data[v].doubleValue === 0 ? '0' : (res.data[v].doubleValue * calc).toFixed(2) : (res.data[v].booleanValue ? 1 : 0)
-                                }
-                            }
-                        })
-                    }
-                    this.allDate[this.station[index].id] = dialogData
-                    this.allDate[this.station[index].id].InstalledCapacity = Photoelectric[this.station[index].id].find(ele => {
-                        return ele.tag == 'InstalledCapacity'
-                    });
-                    index++
-                    if (index >= this.station.length) {
-                        setTimeout(() => {
-                            this.getLatest(0)
-                        }, 3000);
-                    } else {
-                        this.getLatest(index)
-                    }
-                })
-            },
-            getChartData(index) {
-                let thisKey = Photoelectric[this.station[index].id];
-                let date = new Date()
-                let endTs = date.getTime();
-                let starTs = endTs - 28800000;
-                let chartData = {
-                    value: []
-                }
-                const PowerSet = thisKey.find(ele => {
-                    return ele.tag == 'PowerSet'
+        {
+          id: "SL_BT",
+          name: "宋堡第六风电场",
+          names: "青山三期",
+        },
+      ],
+      allDate: {},
+      allChartDate: [],
+      detailsDisplay: false,
+      showData: {},
+    };
+  },
+  mounted() {},
+  updated() {
+    if (this.Photoelectric) {
+      this.getLatest(0);
+      this.getChartData(0);
+    }
+  },
+  methods: {
+    getLatest(index) {
+      let dialogData = {};
+      let thisKey = this.Photoelectric[this.station[index].id];
+      let array = [];
+      thisKey.forEach((item) => {
+        item.value ? array.push(item.value) : "";
+      });
+      let params = array.join(",");
+      api.getLatest(params).then((res) => {
+        for (let v in res.data) {
+          thisKey.forEach((item) => {
+            let calc = item.calc ? item.calc : 1;
+            if (item.value === v) {
+              dialogData[item.tag] = {
+                name: item.name,
+                value: res.data[v].doubleValue
+                  ? res.data[v].doubleValue === 0
+                    ? "0"
+                    : (res.data[v].doubleValue * calc).toFixed(2)
+                  : res.data[v].booleanValue
+                  ? 1
+                  : 0,
+              };
+            }
+          });
+        }
+        this.allDate[this.station[index].id] = dialogData;
+        this.allDate[this.station[index].id].InstalledCapacity =
+          this.Photoelectric[this.station[index].id].find((ele) => {
+            return ele.tag == "InstalledCapacity";
+          });
+        index++;
+        if (index >= this.station.length) {
+          setTimeout(() => {
+            this.getLatest(0);
+          }, 3000);
+        } else {
+          this.getLatest(index);
+        }
+      });
+    },
+
+    getChartData(index) {
+      let thisKey = this.Photoelectric[this.station[index].id];
+      let date = new Date();
+      let endTs = date.getTime();
+      let starTs = endTs - 28800000;
+      let chartData = {
+        value: [],
+      };
+      const PowerSet = thisKey.find((ele) => {
+        return ele.tag == "PowerSet";
+      });
+      const ActualPower = thisKey.find((ele) => {
+        return ele.tag == "ActualPower";
+      });
+      let PowerSetData = [],
+        ActualPowerData = [];
+      api
+        .getPower({
+          tagName: PowerSet.value,
+          startTs: starTs,
+          endTs: endTs,
+          interval: 60,
+        })
+        .then((res1) => {
+          api
+            .getPower({
+              tagName: ActualPower.value,
+              startTs: starTs,
+              endTs: endTs,
+              interval: 60,
+            })
+            .then((res2) => {
+              res1.data.forEach((item) => {
+                PowerSetData.push({
+                  ts: item.ts,
+                  doubleValue: item.doubleValue * PowerSet.calc,
                 });
-                const ActualPower = thisKey.find(ele => {
-                    return ele.tag == 'ActualPower'
+              });
+              res2.data.forEach((item) => {
+                ActualPowerData.push({
+                  ts: item.ts,
+                  doubleValue: item.doubleValue * ActualPower.calc,
                 });
-                let PowerSetData = [],
-                    ActualPowerData = [];
-                api.getPower({
-                    tagName: PowerSet.value,
-                    startTs: starTs,
-                    endTs: endTs,
-                    interval: 60,
-                }).then(res1 => {
-                    api.getPower({
-                        tagName: ActualPower.value,
-                        startTs: starTs,
-                        endTs: endTs,
-                        interval: 60,
-                    }).then(res2 => {
-                        res1.data.forEach(item => {
-                            PowerSetData.push({
-                                ts: item.ts,
-                                doubleValue: item.doubleValue * PowerSet.calc
-                            })
-                        })
-                        res2.data.forEach(item => {
-                            ActualPowerData.push({
-                                ts: item.ts,
-                                doubleValue: item.doubleValue * ActualPower.calc
-                            })
-                        })
-                        chartData.value[0] = {
-                            title: "有功设定限值(MW)",
-                            yAxisIndex: 0,
-                            value: []
-                        };
-                        chartData.value[1] = {
-                            title: "实发有功(MW)",
-                            yAxisIndex: 0,
-                            value: []
-                        }
-                        PowerSetData.forEach(item => {
-                            chartData.value[0].value.push({
-                                text: dayjs(item.ts).format('hh:mm'),
-                                value: parseFloat((item.doubleValue).toFixed(2))
-                            })
-                        })
-                        ActualPowerData.forEach(item => {
-                            chartData.value[1].value.push({
-                                text: dayjs(item.ts).format('hh:mm'),
-                                value: parseFloat((item.doubleValue).toFixed(2))
-                            })
-                        })
-                        chartData.id = this.station[index].id
-                        this.allChartDate.push(chartData)
-                        console.log(this.allChartDate);
-                        index++
-                        if (index >= this.station.length) {
-                            this.$refs.detailst.totleErtcher()
-                            setTimeout(() => {
-                                this.allChartDate = []
-                                this.getChartData(0)
-                            }, 60000);
-                        } else {
-                            this.getChartData(index)
-                        }
-                    })
-                })
-            },
-            opened() {
-
-            },
-            closed() {
-
-            },
-            handleClicks(id) {
-                this.showData = this.allChartDate.find(ele => {
-                    return ele.id == id
+              });
+              chartData.value[0] = {
+                title: "有功设定限值(MW)",
+                yAxisIndex: 0,
+                value: [],
+              };
+              chartData.value[1] = {
+                title: "实发有功(MW)",
+                yAxisIndex: 0,
+                value: [],
+              };
+              PowerSetData.forEach((item) => {
+                chartData.value[0].value.push({
+                  text: dayjs(item.ts).format("hh:mm"),
+                  value: parseFloat(item.doubleValue.toFixed(2)),
                 });
-                this.showData.name = this.station.find(ele => {
-                    return ele.id == id
+              });
+              ActualPowerData.forEach((item) => {
+                chartData.value[1].value.push({
+                  text: dayjs(item.ts).format("hh:mm"),
+                  value: parseFloat(item.doubleValue.toFixed(2)),
                 });
-                this.detailsDisplay = true
-            },
-            closeds() {
-                this.detailsDisplay = false
-            },
-        },
-    }
+              });
+              chartData.id = this.station[index].id;
+              this.allChartDate.push(chartData);
+              index++;
+              if (index >= this.station.length) {
+                this.$refs.detailst.totleErtcher();
+                setTimeout(() => {
+                  this.allChartDate = [];
+                  this.getChartData(0);
+                }, 60000);
+              } else {
+                this.getChartData(index);
+              }
+            });
+        });
+    },
+    opened() {
+      api.getStation().then((res) => {
+        let Photoelectric = {};
+        res.data.forEach((pEle) => {
+          Photoelectric[pEle.id] = [];
+          pEle.tags.forEach((cEle) => {
+            let item = {};
+            for (let key in cEle) {
+              item[key] = String(cEle[key]);
+            }
+            Photoelectric[pEle.id].push(item);
+          });
+        });
+        this.Photoelectric = Photoelectric;
+        this.getLatest(0);
+        this.getChartData(0);
+      });
+    },
+    closed() {},
+    handleClicks(id) {
+      this.showData = this.allChartDate.find((ele) => {
+        return ele.id == id;
+      });
+      this.showData.name = this.station.find((ele) => {
+        return ele.id == id;
+      });
+      this.detailsDisplay = true;
+    },
+    closeds() {
+      this.detailsDisplay = false;
+    },
+  },
+};
 </script>
 
-<style scoped>
-    .bodyy {
-        display: flex;
-        flex-direction: row;
-        background-color: black;
-        width: 100%;
-        margin-top: -30px;
-        height: 91vh;
-    }
+<style lang="less" scoped>
+.bodyy {
+  display: flex;
+  flex-direction: row;
+  background-color: black;
+  width: 100%;
+  margin-top: -30px;
+  height: 89vh;
+
+  .body {
+    height: 100%;
+    max-height: 100%;
+    overflow-x: hidden;
+    overflow-y: scroll;
+  }
+}
 </style>

src/components/focus/currentWarningCard.vue

@@ -0,0 +1,287 @@
+<template>
+  <div
+    class="currentWarningCardTableBox"
+    :class="$store.state.currentWarningCardClass"
+  >
+    <el-table
+      :data="tableData"
+      class="table"
+      height="30vh"
+      :header-cell-style="{
+        background: '#000000',
+        color: 'rgb(220,220,220)',
+        padding: '4px',
+        fontSize: '14px',
+        'border-bottom': 'solid 1px black',
+      }"
+      :cell-class-name="setCellClassName"
+    >
+      <el-table-column
+        prop="lastUpdateTime"
+        align="center"
+        label="时间"
+        width="150"
+      >
+      </el-table-column>
+      <el-table-column prop="alertText" align="center" label="描述" width="280">
+      </el-table-column>
+      <el-table-column prop="isSelected" align="center" label="确认">
+        <template v-slot="scope">
+          <input
+            type="checkbox"
+            v-model="scope.row.isSelected"
+            @click="itemChecked(scope.row)"
+          />
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import MessageBridge from "utils/MessageBridge";
+import BackgroundData from "utils/BackgroundData";
+import api from "api/index";
+
+export default {
+  name: "AlarmArea",
+  components: {},
+  created() {
+    this.initData();
+    this.faultMessage();
+  },
+  props: {
+    activeTab: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      values: [],
+      tableData: [],
+      dialogVisible: false,
+      showSvg: false,
+      svgVisible: false,
+      svgWeb: "",
+      stationName: "",
+      currentWindturbine: {},
+      audio: null,
+    };
+  },
+  methods: {
+    filtrationData(activeTab) {
+      let syzAlarm = [];
+      let syzBase = [];
+      this.values.forEach((ele) => {
+        if (
+          ele.stationId === activeTab &&
+          ele.rank === this.$store.state.syzAlarmRank &&
+          ele.category1 === "SYZ"
+        ) {
+          syzAlarm.push(ele);
+        } else if (ele.stationId === activeTab && ele.category1 === "SYZ") {
+          syzBase.push(ele);
+        }
+      });
+
+      this.$store.commit(
+        "currentWarningCardClass",
+        syzAlarm.length ? "show" : ""
+      );
+
+      this.tableData = [].concat(syzAlarm, syzBase);
+    },
+    initData() {
+      let mb = MessageBridge.getInstance();
+      let vs = [
+        {
+          key: "/topic/fault-popup",
+          action: this.faultMessage,
+        },
+      ];
+      mb.register(vs);
+    },
+    faultMessage(json) {
+      let val = json ? JSON.parse(json) : this.$store.state.warning;
+      if (Object.keys(val).length > 0) {
+        let sleected = {};
+        this.values.forEach((it) => {
+          if (it.isSelected) {
+            sleected[it.id] = 0;
+          }
+        });
+        this.values = new Array();
+        for (let v in val) {
+          let vl = val[v];
+          if (vl.stationId != "QS_FDC" && vl.category1 == "FJ") {
+            vl.alertText = vl.windturbineName + "-" + vl.alertText;
+          }
+          if (sleected[vl.id] == 0 && BackgroundData.getInstance().LoginUser) {
+            vl.isSelected = true;
+          }
+          if (vl.category1 !== "GF" && vl.objectId.indexOf("GDC") === -1) {
+            this.values.push(vl);
+          }
+        }
+        this.filtrationData(this.activeTab);
+      }
+    },
+    close() {
+      this.dialogVisible = false;
+      this.svgVisible = false;
+    },
+    itemChecked(row) {
+      if (row.isSelected == true) {
+        row.isSelected = false;
+        return;
+      }
+      let bd = BackgroundData.getInstance();
+      if (!bd.LoginUser) {
+        this.$notify({
+          title: "请登录",
+          message: "确认报警需要先登录！",
+          type: "warning",
+          position: "bottom-right",
+          offset: 60,
+          duration: 3000,
+        });
+        row.isSelected = false;
+        return;
+      }
+      row.isSelected = true;
+      this.confirm(row);
+    },
+    confirm(item) {
+      api
+        .sendWarning({
+          snapID: item.snapIDString,
+          faultID: item.idString,
+          userName: BackgroundData.getInstance().LoginUser.name,
+        })
+        .then((msg) => {
+          let mms = msg.data > 0 ? "报警确认成功！" : "报警确认出现错误!";
+          let tp = msg.data > 0 ? "success" : "error";
+          msg.data === 0 ? (item.isSelected = false) : "";
+          this.$notify({
+            title: "报警",
+            message: mms,
+            type: tp,
+            position: "bottom-right",
+            offset: 60,
+            duration: 3000,
+          });
+        });
+    },
+    setCellClassName({ row }) {
+      if (row.rank === this.$store.state.syzAlarmRank) {
+        return "cellBase flicker";
+      } else {
+        return "cellBase";
+      }
+    },
+  },
+  watch: {
+    activeTab(res) {
+      this.filtrationData(res);
+    },
+  },
+};
+</script>
+<style scoped>
+.el-table::before {
+  width: 0;
+}
+
+.table {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+:deep(.el-table__body-wrapper::-webkit-scrollbar) {
+  width: 8px;
+  height: 0px;
+  background-color: black;
+}
+
+:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
+  background-color: #292929;
+  border-radius: 6px;
+}
+
+:deep(.el-table td, .el-table th) {
+  border-bottom: 2px solid black;
+}
+.el-table__body-wrapper {
+  background-color: black;
+}
+tr {
+  line-height: 1.5;
+  background: #1e1e1e;
+  margin-bottom: 2px;
+  border-radius: 5px;
+}
+
+/* .ToolBar {
+  position: absolute;
+  right: 12px;
+  width: 586px;
+  text-align: center;
+  z-index: 2;
+  font-size: 14px;
+  height: 28px;
+  margin: 5px;
+  background: #1e1e1e;
+} */
+.table-main {
+  font-size: 14px;
+  width: 600px;
+  text-align: center;
+  background: #000000;
+  margin: 5px;
+  border-collapse: separate;
+  border-spacing: 0px 5px;
+}
+
+.currentWarningCardTableBox {
+  position: absolute;
+  right: -400px;
+  bottom: 40px;
+  padding-left: 5px;
+  padding-right: 5px;
+  opacity: 0.3;
+  transition: 0.3s;
+}
+.currentWarningCardTableBox:hover,
+.currentWarningCardTableBox.show {
+  right: 10px;
+  transition: 0.3s;
+  opacity: 1;
+}
+.currentWarningCardTableBox.hide {
+  opacity: 0.3;
+  transition: 0.3s;
+  right: -200px;
+}
+</style>
+<style lang="less">
+.cellBase {
+  background: rgb(30, 30, 30) !important;
+  color: rgb(220, 220, 220);
+  padding: 3px;
+  font-size: 12px;
+}
+.cellBase.flicker {
+  animation: flicker 0.6s infinite;
+}
+@keyframes flicker {
+  0% {
+    color: rgb(220, 220, 220);
+  }
+  50% {
+    color: orangered;
+  }
+  100% {
+    color: rgb(220, 220, 220);
+  }
+}
+</style>

src/components/focus/dataDetails.vue

@@ -1,394 +1,436 @@
 <template>
-    <div class="body">
-        <div :class="index<3?'showContents':'showContents'" v-for="(item, index) in station" :key="index">
-            <div class="stationName">
-                <div class="titleName">{{item.name}}</div>
-                <div class="titleNames">({{item.names}})</div>
-                <img v-if="allDate[item.id]?.Status?.value === 0" class="statusIcons"
-                    src="../../assets/img/controlcenter/daraTrue.png">
-                <img v-else class="statusIcons"
-                    src="../../assets/img/controlcenter/dataFalse.png">
-                <div class="titleNames" v-if="allDate[item.id]?.Status?.value !== 0">
-                    {{((1-this.allDate[item.id]?.PowerSet?.value/this.allDate[item.id]?.InstalledCapacity?.value)*100).toFixed(2)}}%
-                </div>
-            </div>
-            <div class="dataList">
-                <div class="data">
-                    <div class="name">有功设定限值：</div>
-                    <div :class="index<3?'nums':'nums'">{{allDate[item.id]?.PowerSet?.value??0}}</div>
-                    <div class="unit">MW</div>
-                </div>
-                <div class="data">
-                    <div class="name">实发有功：</div>
-                    <div :class="index<3?'nums':'nums'">{{allDate[item.id]?.ActualPower?.value??0}}</div>
-                    <div class="unit">MW</div>
-                </div>
-                <div class="data">
-                    <div class="name">AGC可调上限：</div>
-                    <div :class="index<3?'nums':'nums'">{{allDate[item.id]?.AgcUp?.value??0}}</div>
-                    <div class="unit">MW</div>
-                </div>
-                <div class="data">
-                    <div class="name">理论功率：</div>
-                    <div :class="index<3?'nums':'nums'">{{allDate[item.id]?.TheoryPower?.value??0}}</div>
-                    <div class="unit">MW</div>
-                </div>
-                <div class="data">
-                    <div class="name">AGC可调下限：</div>
-                    <div :class="index<3?'nums':'nums'">{{allDate[item.id]?.AgcLower?.value??0}}</div>
-                    <div class="unit">MW</div>
-                </div>
+  <div class="body">
+    <div
+      :class="index < 3 ? 'showContents' : 'showContents'"
+      v-for="(item, index) in station"
+      :key="index"
+    >
+      <div class="stationName">
+        <div class="titleName">{{ item.name }}</div>
+        <div class="titleNames">({{ item.names }})</div>
+        <img
+          v-if="allDate[item.id]?.Status?.value === 0"
+          class="statusIcons"
+          src="../../assets/img/controlcenter/daraTrue.png"
+        />
+        <img
+          v-else
+          class="statusIcons"
+          src="../../assets/img/controlcenter/dataFalse.png"
+        />
+        <div class="titleNames" v-if="allDate[item.id]?.Status?.value !== 0">
+          {{
+            (
+              (1 -
+                this.allDate[item.id]?.PowerSet?.value /
+                  this.allDate[item.id]?.InstalledCapacity?.value) *
+              100
+            ).toFixed(2)
+          }}%
+        </div>
+      </div>
+      <div class="dataList">
+        <div class="data">
+          <div class="name">有功设定限值：</div>
+          <div :class="index < 3 ? 'nums' : 'nums'">
+            {{ allDate[item.id]?.PowerSet?.value ?? 0 }}
+          </div>
+          <div class="unit">MW</div>
+        </div>
+        <div class="data">
+          <div class="name">实发有功：</div>
+          <div :class="index < 3 ? 'nums' : 'nums'">
+            {{ allDate[item.id]?.ActualPower?.value ?? 0 }}
+          </div>
+          <div class="unit">MW</div>
+        </div>
+        <div class="data">
+          <div class="name">AGC可调上限：</div>
+          <div :class="index < 3 ? 'nums' : 'nums'">
+            {{ allDate[item.id]?.AgcUp?.value ?? 0 }}
+          </div>
+          <div class="unit">MW</div>
+        </div>
+        <div class="data">
+          <div class="name">理论功率：</div>
+          <div :class="index < 3 ? 'nums' : 'nums'">
+            {{ allDate[item.id]?.TheoryPower?.value ?? 0 }}
+          </div>
+          <div class="unit">MW</div>
+        </div>
+        <div class="data">
+          <div class="name">AGC可调下限：</div>
+          <div :class="index < 3 ? 'nums' : 'nums'">
+            {{ allDate[item.id]?.AgcLower?.value ?? 0 }}
+          </div>
+          <div class="unit">MW</div>
+        </div>
 
-                <div class="data">
-                    <div class="name">预测功率：</div>
-                    <div :class="index<3?'nums':'nums'">{{allDate[item.id]?.ForecastPower?.value??0}}</div>
-                    <div class="unit">MW</div>
-                </div>
-            </div>
-            <div class="condition">
-                <div class="status">
-                    <div class="name">{{allDate[item.id]?.AgcIn?.name}}：</div>
-                    <img v-if="allDate[item.id]?.AgcIn?.value === 0" class="statusIcon"
-                        src="../../assets/img/controlcenter/daraTrue.png">
-                    <img v-else-if="allDate[item.id]?.AgcIn?.value === 1" class="statusIcon"
-                        src="../../assets/img/controlcenter/dataFalse.png">
-                    <div v-else-if="allDate[item.id]?.AgcIn?.value === ''">
-                        暂无数据
-                    </div>
-                </div>
-                <div class="status">
-                    <div class="name">{{allDate[item.id]?.AgcFar?.name}}：</div>
-                    <img v-if="allDate[item.id]?.AgcFar?.value === 0" class="statusIcon"
-                        src="../../assets/img/controlcenter/daraTrue.png">
-                    <img v-else-if="allDate[item.id]?.AgcFar?.value === 1" class="statusIcon"
-                        src="../../assets/img/controlcenter/dataFalse.png">
-                    <div v-else-if="allDate[item.id]?.AgcFar?.value === ''">
-                        暂无数据
-                    </div>
-                </div>
-                <div class="status">
-                    <div class="name">{{allDate[item.id]?.SumLock?.name}}：</div>
-                    <img v-if="allDate[item.id]?.SumLock?.value === 0" class="statusIcon"
-                        src="../../assets/img/controlcenter/daraTrue.png">
-                    <img v-else-if="allDate[item.id]?.SumLock?.value === 1" class="statusIcon"
-                        src="../../assets/img/controlcenter/dataFalse.png">
-                    <div v-else-if="allDate[item.id]?.SumLock?.value === ''">
-                        暂无数据
-                    </div>
-                </div>
-                <div class="status">
-                    <div class="name">{{allDate[item.id]?.SubLock?.name}}：</div>
-                    <img v-if="allDate[item.id]?.SubLock?.value === 0" class="statusIcon"
-                        src="../../assets/img/controlcenter/daraTrue.png">
-                    <img v-else-if="allDate[item.id]?.SubLock?.value === 1" class="statusIcon"
-                        src="../../assets/img/controlcenter/dataFalse.png">
-                    <div v-else-if="allDate[item.id]?.SubLock?.value === ''">
-                        暂无数据
-                    </div>
-                </div>
-            </div>
-            <div :id="item.id" class="echarts" @click="handleClick(item.id)"></div>
+        <div class="data">
+          <div class="name">预测功率：</div>
+          <div :class="index < 3 ? 'nums' : 'nums'">
+            {{ allDate[item.id]?.ForecastPower?.value ?? 0 }}
+          </div>
+          <div class="unit">MW</div>
+        </div>
+      </div>
+      <div class="condition">
+        <div class="status">
+          <div class="name">{{ allDate[item.id]?.AgcIn?.name }}：</div>
+          <img
+            v-if="allDate[item.id]?.AgcIn?.value === 0"
+            class="statusIcon"
+            src="../../assets/img/controlcenter/daraTrue.png"
+          />
+          <img
+            v-else-if="allDate[item.id]?.AgcIn?.value === 1"
+            class="statusIcon"
+            src="../../assets/img/controlcenter/dataFalse.png"
+          />
+          <div v-else-if="allDate[item.id]?.AgcIn?.value === ''">暂无数据</div>
+        </div>
+        <div class="status">
+          <div class="name">{{ allDate[item.id]?.AgcFar?.name }}：</div>
+          <img
+            v-if="allDate[item.id]?.AgcFar?.value === 0"
+            class="statusIcon"
+            src="../../assets/img/controlcenter/daraTrue.png"
+          />
+          <img
+            v-else-if="allDate[item.id]?.AgcFar?.value === 1"
+            class="statusIcon"
+            src="../../assets/img/controlcenter/dataFalse.png"
+          />
+          <div v-else-if="allDate[item.id]?.AgcFar?.value === ''">暂无数据</div>
+        </div>
+        <div class="status">
+          <div class="name">{{ allDate[item.id]?.SumLock?.name }}：</div>
+          <img
+            v-if="allDate[item.id]?.SumLock?.value === 0"
+            class="statusIcon"
+            src="../../assets/img/controlcenter/daraTrue.png"
+          />
+          <img
+            v-else-if="allDate[item.id]?.SumLock?.value === 1"
+            class="statusIcon"
+            src="../../assets/img/controlcenter/dataFalse.png"
+          />
+          <div v-else-if="allDate[item.id]?.SumLock?.value === ''">
+            暂无数据
+          </div>
+        </div>
+        <div class="status">
+          <div class="name">{{ allDate[item.id]?.SubLock?.name }}：</div>
+          <img
+            v-if="allDate[item.id]?.SubLock?.value === 0"
+            class="statusIcon"
+            src="../../assets/img/controlcenter/daraTrue.png"
+          />
+          <img
+            v-else-if="allDate[item.id]?.SubLock?.value === 1"
+            class="statusIcon"
+            src="../../assets/img/controlcenter/dataFalse.png"
+          />
+          <div v-else-if="allDate[item.id]?.SubLock?.value === ''">
+            暂无数据
+          </div>
         </div>
-        
+      </div>
+      <div :id="item.id" class="echarts" @click="handleClick(item.id)"></div>
     </div>
-    
+  </div>
 </template>
 <script>
-    import * as echarts from "echarts";
-    export default {
-        data() {
-            return {
-            };
-        },
-        props: {
-            allDate: {
-                type: String,
-                default: ''
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {};
+  },
+  props: {
+    allDate: {
+      type: String,
+      default: "",
+    },
+    allChartDate: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    station: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  updated() {
+    // this.totleErtcher()
+  },
+  mounted() {},
+  methods: {
+    totleErtcher() {
+      this.allChartDate.forEach((item) => {
+        let chartDom = document.getElementById(item.id);
+        let myChart = echarts.init(chartDom, "#ffffff");
+        let option;
+        option = {
+          legend: {
+            show: true,
+            data: item.value.map((t) => {
+              return t.title;
+            }),
+            right: 56,
+            icon: "circle",
+            itemWidth: 6,
+            inactiveColor: "#606769",
+            textStyle: {
+              color: "#B3BDC0",
+              fontSize: 12,
             },
-            allChartDate: {
-                type: Array,
-                default: () => {
-                    return []
+          },
+
+          xAxis: [
+            {
+              type: "category",
+              boundaryGap: false,
+              axisLabel: {
+                // interval: 60,
+                showMinLabel: true,
+                showMaxLabel: true,
+                formatter: "{value}",
+                fontSize: 14,
+                textStyle: {
+                  color: "#606769",
                 },
+              },
+              axisLine: {
+                show: false,
+              },
+              data: item.value[0].value.map((items) => {
+                return items.text;
+              }),
             },
-            station: {
-                type: Array,
-                default: () => {
-                    return []
-                },
+          ],
+          yAxis: {
+            type: "value",
+            axisLabel: {
+              formatter: "{value}",
+              fontSize: 14,
             },
-        },
-        updated() {
-            // this.totleErtcher() 
-        },
-        mounted() {
-
-        },
-        methods: {
-            totleErtcher() {
-                console.log(this.allDate);
-                this.allChartDate.forEach(item => {
-                    let chartDom = document.getElementById(item.id);
-                    let myChart = echarts.init(chartDom, '#ffffff');
-                    let option;
-                    option = {
-                        legend: {
-                            show: true,
-                            data: item.value.map((t) => {
-                                return t.title;
-                            }),
-                            right: 56,
-                            icon: "circle",
-                            itemWidth: 6,
-                            inactiveColor: '#606769',
-                            textStyle: {
-                                color: '#B3BDC0',
-                                fontSize: 12,
-                            },
-                        },
-
-                        xAxis: [
-                            {
-                                type: "category",
-                                boundaryGap: false,
-                                axisLabel: {
-                                    // interval: 60,
-                                    showMinLabel: true,
-                                    showMaxLabel: true,
-                                    formatter: "{value}",
-                                    fontSize: 14,
-                                    textStyle: {
-                                        color: '#606769',
-                                    },
-                                },
-                                axisLine: {
-                                    show: false,
-                                },
-                                data: item.value[0].value.map(items => {
-                                    return items.text;
-                                }),
-                            },
-                        ],
-                        yAxis: {
-                            type: "value",
-                            axisLabel: {
-                                formatter: "{value}",
-                                fontSize: 14,
-                            },
-                            axisLine: {
-                                show: false,
-                            },
-                            splitLine: {
-                                show: true,
-                                lineStyle: {
-                                    color: '#606769',
-                                    type: "dashed",
-                                },
-                            },
-                        },
-                        dataZoom: [
-                            {
-                                show: false,
-                                type: 'inside',
-                                start: 0,
-                                end: 100
-                            },
-                        ],
-                        series: [{
-                            name: item.value[0].title,
-                            smooth: true,
-                            showSymbol: false,
-                            data: item.value[0].value.map(items => {
-                                return items.value;
-                            }),
-                            type: 'line',
-                            lineStyle: {
-                                normal: {
-                                    color: 'rgba(75, 85, 174, 1)',
-                                    width: 1,
-                                },
-                            },
-                        },
-                        {
-                            name: item.value[1].title,
-                            smooth: true,
-                            showSymbol: false,
-                            data: item.value[1].value.map(items => {
-                                return items.value;
-                            }),
-                            type: 'line',
-                            lineStyle: {
-                                normal: {
-                                    color: 'rgba(05, 187, 76, 1)',
-                                    width: 1,
-                                },
-                            },
-                        }]
-                    };
-                    option && myChart.setOption(option);
-                })
-
+            axisLine: {
+              show: false,
             },
-            handleClick(id) {
-                this.$emit('handleClick', id);
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: "#606769",
+                type: "dashed",
+              },
             },
-            opened() {
-
+          },
+          dataZoom: [
+            {
+              show: false,
+              type: "inside",
+              start: 0,
+              end: 100,
+            },
+          ],
+          series: [
+            {
+              name: item.value[0].title,
+              smooth: true,
+              showSymbol: false,
+              data: item.value[0].value.map((items) => {
+                return items.value;
+              }),
+              type: "line",
+              lineStyle: {
+                normal: {
+                  color: "rgba(75, 85, 174, 1)",
+                  width: 1,
+                },
+              },
+            },
+            {
+              name: item.value[1].title,
+              smooth: true,
+              showSymbol: false,
+              data: item.value[1].value.map((items) => {
+                return items.value;
+              }),
+              type: "line",
+              lineStyle: {
+                normal: {
+                  color: "rgba(05, 187, 76, 1)",
+                  width: 1,
+                },
+              },
             },
-            closed() {
-                this.detailsDisplay = false 
-            }
-        },
-    }
+          ],
+        };
+        option && myChart.setOption(option);
+      });
+    },
+    handleClick(id) {
+      this.$emit("handleClick", id);
+    },
+    opened() {},
+    closed() {
+      this.detailsDisplay = false;
+    },
+  },
+};
 </script>
 
 <style scoped>
-    .showTitles {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-        margin-top: -10px;
-        font-size: 18px;
-        color: #FFFFFF;
-    }
+.showTitles {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  margin-top: -10px;
+  font-size: 18px;
+  color: #ffffff;
+}
 
-    .showContent {
-        width: 32%;
-        display: flex;
-        flex-direction: column;
-        border: 1px solid rgba(77, 77, 77, 1);
-        /* background-color: rgba(77, 77, 77, 1); */
-        margin-right: 10px;
-        margin-left: 10px;
-        height: 44vh;
-        margin-top: 20px;
-        align-items: center;
-    }
+.showContent {
+  width: 32%;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid rgba(77, 77, 77, 1);
+  /* background-color: rgba(77, 77, 77, 1); */
+  margin-right: 10px;
+  margin-left: 10px;
+  height: 44vh;
+  margin-top: 20px;
+  align-items: center;
+}
 
-    .showContents {
-        width: 23.7%;
-        display: flex;
-        flex-direction: column;
-        border: 1px solid rgba(77, 77, 77, 1);
-        /* background-color: rgba(77, 77, 77, 1); */
-        margin-right: 10px;
-        margin-left: 10px;
-        height: 43vh;
-        margin-top: 20px;
-        align-items: center;
-    }
+.showContents {
+  width: 23.7%;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid rgba(77, 77, 77, 1);
+  /* background-color: rgba(77, 77, 77, 1); */
+  margin-right: 10px;
+  margin-left: 10px;
+  height: 43vh;
+  margin-top: 20px;
+  align-items: center;
+}
 
-    .stationName {
-        font-size: 20px;
-        width: 400px;
-        height: 45px;
-        border: 1px solid rgba(77, 77, 77, 1);
-        display: flex;
-        flex-direction: row;
-        align-items: baseline;
-        justify-content: center;
-        color: #FFFFFF;
-        background-color: #000000;
-        margin-top: -15px;
-    }
+.stationName {
+  font-size: 20px;
+  width: 400px;
+  height: 45px;
+  border: 1px solid rgba(77, 77, 77, 1);
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  justify-content: center;
+  color: #ffffff;
+  background-color: #000000;
+  margin-top: -15px;
+}
 
-    .titleName {
-        margin-top: 10px;
-    }
+.titleName {
+  margin-top: 10px;
+}
 
-    .titleNames {
-        font-size: 12px;
-        margin-left: 10px;
-        margin-top: 10px;
-    }
+.titleNames {
+  font-size: 12px;
+  margin-left: 10px;
+  margin-top: 10px;
+}
 
-    .body {
-        background-color: black;
-        width: 100%;
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        justify-content: center;
-    }
+.body {
+  background-color: black;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+}
 
-    .echarts {
-        width: 110%;
-        height: 290px;
-        margin-left: 10px;
-        padding-top: 20px;
-    }
+.echarts {
+  width: 110%;
+  height: 290px;
+  margin-left: 10px;
+  padding-top: 20px;
+}
 
-    .dataList {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-items: center;
-        padding-top: 27px;
-    }
+.dataList {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  padding-top: 27px;
+}
 
-    .data {
-        width: 50%;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        margin-bottom: 12px;
-        justify-content: center;
-    }
+.data {
+  width: 50%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 12px;
+  justify-content: center;
+}
 
-    .name {
-        display: flex;
-        flex-direction: row-reverse;
-        font-size: 12px;
-        color: #FFFFFF;
-    }
+.name {
+  display: flex;
+  flex-direction: row-reverse;
+  font-size: 12px;
+  color: #ffffff;
+}
 
-    .num {
-        margin-left: 59px;
-        font-size: 16px;
-        color: #05BB4C;
-        min-width: 40px;
-    }
+.num {
+  margin-left: 59px;
+  font-size: 16px;
+  color: #05bb4c;
+  min-width: 40px;
+}
 
-    .nums {
-        margin-left: 29px;
-        font-size: 16px;
-        color: #05BB4C;
-        min-width: 40px;
-    }
+.nums {
+  margin-left: 29px;
+  font-size: 16px;
+  color: #05bb4c;
+  min-width: 40px;
+}
 
-    .unit {
-        font-size: 16px;
-        color: #FFFFFF;
-        margin-left: 15px;
-    }
+.unit {
+  font-size: 16px;
+  color: #ffffff;
+  margin-left: 15px;
+}
 
-    .condition {
-        width: 100%;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        margin-bottom: 20px;
-        border-bottom: 1px solid #3D3D3D;
-        padding-bottom: 10px;
-    }
+.condition {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 20px;
+  border-bottom: 1px solid #3d3d3d;
+  padding-bottom: 10px;
+}
 
-    .status {
-        width: 25%;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-    }
+.status {
+  width: 25%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
 
-    .statusIcon {
-        width: 14px;
-        height: 14px;
-        margin-left: 8px;
-    }
-    .statusIcons {
-        width: 14px;
-        height: 14px;
-        margin-left: 20px;
-    }
+.statusIcon {
+  width: 14px;
+  height: 14px;
+  margin-left: 8px;
+}
+.statusIcons {
+  width: 14px;
+  height: 14px;
+  margin-left: 20px;
+}
 </style>

src/components/focus/focusArea.vue

@@ -1,101 +1,146 @@
 <template>
-    <div class="body">
-        <img class="logo" src="../../assets/img/logo.png" alt="">
-        <div class="title">关注区</div>
-        <div class="agc" @click="showAGC">AGC监控</div>
-        <div style="margin-top: 50px; margin-left: 10px; height: 24vh;">
-            <el-scrollbar>
-                <div class="scoll" style="margin-left: 5px;">
-                    <FocusCard></FocusCard>
-                </div>
-            </el-scrollbar>
+  <div class="body">
+    <img class="logo" src="../../assets/img/logo.png" alt="" />
+    <div class="title">关注区</div>
+    <div class="agc" @click="showAGC">AGC监控</div>
+    <el-tooltip
+      v-if="$store.state.syzBtnFlicker"
+      class="box-item"
+      effect="light"
+      :content="`您有${$store.state.syzAlarmArray.length}条报警未处理`"
+      placement="left"
+    >
+      <div
+        class="syz"
+        :class="$store.state.syzBtnFlicker ? 'flicker' : ''"
+        @click="showSYZ"
+      >
+        升压站
+      </div>
+    </el-tooltip>
+    <div v-else class="syz" @click="showSYZ">升压站</div>
+    <div style="margin-top: 50px; margin-left: 10px; height: 24vh">
+      <el-scrollbar>
+        <div class="scoll" style="margin-left: 5px">
+          <FocusCard></FocusCard>
         </div>
-        <AGCDetails v-model="display"></AGCDetails>
+      </el-scrollbar>
     </div>
-
+    <AGCDetails v-model="display"></AGCDetails>
+    <SYZDetails v-model="$store.state.syzDialogShow"></SYZDetails>
+  </div>
 </template>
 <script>
-    import FocusCard from "./focusCard.vue";
-    import AGCDetails from "./agcDetails.vue";
-    
-    // import boxSelect from "components/boxSelect.vue";
-    export default {
-        data() {
-            return {
-                display: false,
-                
-            };
-        },
-        components: {
-            FocusCard,
-            AGCDetails
-            // boxSelect,
-        },
-        methods: {
-            showAGC() {
-                this.display = true
-            },
-            
-        },
-    }
+import FocusCard from "./focusCard.vue";
+import AGCDetails from "./agcDetails.vue";
+import SYZDetails from "./syzDetails.vue";
+
+// import boxSelect from "components/boxSelect.vue";
+export default {
+  data() {
+    return {
+      display: false,
+      alarmMsg: "",
+    };
+  },
+  components: {
+    FocusCard,
+    AGCDetails,
+    SYZDetails,
+    // boxSelect,
+  },
+  methods: {
+    showAGC() {
+      this.display = true;
+    },
+
+    showSYZ() {
+      this.$store.commit("syzDialogShow", true);
+    },
+  },
+};
 </script>
 <style scoped>
-    .body {
-        border: 1px solid #373737;
-        width: 100%;
-        margin-left: 15px;
-        margin-top: 10px;
-        height: 30.5vh
-    }
+.body {
+  border: 1px solid #373737;
+  width: 100%;
+  margin-left: 15px;
+  margin-top: 10px;
+  height: 30.5vh;
+}
+
+.body .scoll {
+  height: 91%;
+}
+
+.title {
+  color: #ffffff;
+  font-size: 14px;
+  margin-left: 32px;
+  /* margin-top: 12px; */
+  margin-bottom: 10px;
+  /* width: 570px; */
+  width: 29vw;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  position: absolute;
+  background-color: #000000;
+}
+
+.title::before {
+  z-index: 1;
+  content: "";
+  position: absolute;
+  left: -18px !important;
+  /* top: 30px !important; */
+  width: 5px;
+  height: 5px;
+  background-color: rgba(230, 191, 65, 1);
+  border-radius: 50%;
+}
 
-    .body .scoll {
-        height: 91%;
-    }
+.logo {
+  position: absolute;
+  top: 2px;
+  left: 12px;
+}
 
-    .title {
-        color: #ffffff;
-        font-size: 14px;
-        margin-left: 32px;
-        /* margin-top: 12px; */
-        margin-bottom: 10px;
-        /* width: 570px; */
-        width: 29vw;
-        height: 50px;
-        display: flex;
-        align-items: center;
-        position: absolute;
-        background-color: #000000;
-    }
+.agc,
+.syz {
+  position: absolute;
+  color: #ffffff;
+  font-size: 14px;
+  right: 0;
+  top: 23px;
+  width: 80px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(37, 116, 219, 1);
+  cursor: pointer;
+}
 
-    .title::before {
-        z-index: 1;
-        content: '';
-        position: absolute;
-        left: -18px !important;
-        /* top: 30px !important; */
-        width: 5px;
-        height: 5px;
-        background-color: rgba(230, 191, 65, 1);
-        border-radius: 50%;
-    }
+.syz {
+  right: 90px;
+  transition: 0.2s;
+}
 
-    .logo {
-        position: absolute;
-        top: 2px;
-        left: 12px;
-    }
+.syz.flicker {
+  right: 90px;
+  animation: flicker 0.8s infinite;
+}
 
-    .agc {
-        position: absolute;
-        color: #ffffff;
-        font-size: 14px;
-        right: 0;
-        top: 23px;
-        width: 80px;
-        height: 30px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background-color: rgba(37, 116, 219, 1);
-    }
+@keyframes flicker {
+  0% {
+    background: rgba(37, 116, 219);
+  }
+  50% {
+    background: orangered;
+  }
+  100% {
+    background: rgba(37, 116, 219);
+  }
+}
 </style>

src/components/focus/syzDetails.vue

@@ -0,0 +1,367 @@
+<template>
+  <el-dialog
+    width="90%"
+    @open="opened"
+    @closed="closed"
+    :fullscreen="true"
+    :show-close="true"
+    class="dialogs"
+  >
+    <template #title>
+      <div class="showTitles currentShowTitles">
+        <div class="titles">升压站</div>
+      </div>
+    </template>
+    <div class="bodyy">
+      <el-tabs
+        type="border-card"
+        stretch
+        lazy
+        style="width: 100%; height: 100%"
+        v-model="activeTab"
+        @tab-click="tabClick"
+      >
+        <el-tab-pane
+          class="syzDetailsPaneItem"
+          v-for="(item, index) in syzArray"
+          :key="index"
+          :name="item.id"
+        >
+          <template #label>
+            <span v-if="pageshowMode % 2">
+              <el-badge is-dot v-if="item.isWarning === '1'">
+                <span>{{ item.name }}</span>
+              </el-badge>
+              <span v-else>{{ item.name }}</span>
+            </span>
+            <span v-else>
+              <el-badge is-dot v-if="item.isWarning === '1'">
+                <span>{{ item.name }}</span>
+              </el-badge>
+              <span v-else>{{ item.name }}</span>
+            </span>
+          </template>
+          <Mhs v-if="item.id === 'MHS_FDC'" />
+          <Nss v-if="item.id === 'NSS_FDC'" />
+          <Qs v-if="item.id === 'QS_FDC'" />
+          <Sbq v-if="item.id === 'SBQ_FDC'" />
+          <Xs v-if="item.id === 'XS_FDC'" />
+          <Pl1 v-if="item.id === 'PL1_GDC'" />
+          <Pl2 v-if="item.id === 'PL2_GDC'" />
+          <Dwk v-if="item.id === 'DWK_GDC'" />
+          <Mch v-if="item.id === 'MCH_GDC'" />
+          <Xh v-if="item.id === 'XH_GDC'" />
+          <Sbdl v-if="item.id === 'QS3_FDC'" />
+          <div class="alarmIconBox" @click="switchAlarmSound(index)">
+            <el-tooltip
+              v-if="item.isMute"
+              effect="light"
+              :content="`当前${item.name}升压站报警已消音，请注意`"
+              placement="left"
+            >
+              <i
+                class="el-icon-close-notification"
+                style="color: orangered"
+              ></i>
+            </el-tooltip>
+            <i v-else class="el-icon-bell" style="color: rgb(219, 215, 0)"></i>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+      <CurrentWarningCard
+        :currentClass="$store.state.currentWarningCardClass"
+        :activeTab="activeTab || 'MHS_FDC'"
+      />
+    </div>
+  </el-dialog>
+</template>
+<script>
+import Mhs from "../BoosterStation/mhs.vue";
+import Nss from "../BoosterStation/nss.vue";
+import Qs from "../BoosterStation/qs.vue";
+import Sbq from "../BoosterStation/sbq.vue";
+import Xs from "../BoosterStation/xs.vue";
+import Dwk from "../BoosterStation/dwk.vue";
+import Sbdl from "../BoosterStation/sbdl.vue";
+import Pl1 from "../BoosterStation/pl1.vue";
+import Pl2 from "../BoosterStation/pl2.vue";
+import Mch from "../BoosterStation/mch.vue";
+import Xh from "../BoosterStation/xh.vue";
+
+import CurrentWarningCard from "./currentWarningCard.vue";
+export default {
+  components: {
+    Mhs,
+    Nss,
+    Qs,
+    Sbq,
+    Xs,
+    Dwk,
+    Sbdl,
+    Pl1,
+    Pl2,
+    Mch,
+    Xh,
+    CurrentWarningCard,
+  },
+  data() {
+    return {
+      activeTab: this.$store.state.activeTab,
+      svgVisible: true,
+      audio: null,
+      timmer: null,
+      syzArray: this.$store.getters.syzArray || [],
+      pageshowMode: 0,
+    };
+  },
+  created() {},
+  mounted() {},
+  updated() {},
+  methods: {
+    // 初始化第一次报警并判断是否播放声音
+    initAlarm() {
+      let syzAlarmArray = this.$store.getters.syzAlarmArray;
+
+      const firstAlarmItem = syzAlarmArray.find((ele) => {
+        return !ele.isConfirm && ele.rank === this.$store.state.syzAlarmRank;
+      });
+
+      firstAlarmItem &&
+        this.audioPlay(this.getSound(firstAlarmItem.soundSource));
+
+      firstAlarmItem &&
+        this.$store.getters.syzAlarmArray.forEach((ele) => {
+          if (ele.stationId === firstAlarmItem.stationId) {
+            ele.isConfirm = true;
+          }
+        });
+
+      this.activeTab =
+        firstAlarmItem?.stationId ||
+        syzAlarmArray.find((ele) => {
+          return ele.rank === this.$store.state.syzAlarmRank;
+        })?.stationId ||
+        this.$store.getters.syzArray[0].id;
+
+      syzAlarmArray.forEach((ele) => {
+        if (ele.stationId === firstAlarmItem?.stationId) {
+          ele.isConfirm = true;
+          this.clearWarningTag(ele.stationId);
+        } else if (
+          !ele.isConfirm &&
+          ele.stationId !== firstAlarmItem?.stationId
+        ) {
+          this.renderWarningTag(ele.stationId);
+        }
+      });
+
+      this.$store.commit("syzAlarmArray", syzAlarmArray);
+    },
+
+    // 定时器循环数据判断小红点渲染及是否播放声音
+    renderAlarm(stationId = "", playSound = true) {
+      let syzAlarmArray = this.$store.getters.syzAlarmArray;
+
+      syzAlarmArray.forEach((ele) => {
+        if (ele.stationId === stationId) {
+          ele.isConfirm = true;
+          this.clearWarningTag(ele.stationId);
+        } else if (!ele.isConfirm && ele.stationId !== stationId) {
+          this.renderWarningTag(ele.stationId);
+        }
+      });
+
+      const res = syzAlarmArray.find((ele) => {
+        return !ele.isConfirm;
+      });
+
+      if (playSound) {
+        // this.audioPlay("./static/sound/syz.mp3");
+      }
+
+      this.$store.commit("syzAlarmArray", syzAlarmArray);
+    },
+
+    // 返回音频文件路径
+    getSound(fileName) {
+      return `./static/sound/${fileName}.mp3`;
+    },
+
+    // 播放音频
+    audioPlay(audioPath) {
+      let soundMuteSelf = [];
+      let soundMuteOther = [];
+
+      this.$store.getters.syzAlarmArray.forEach((ele) => {
+        if (ele.stationId === this.activeTab) {
+          soundMuteSelf.push(ele);
+        } else {
+          soundMuteOther.push(ele);
+        }
+      });
+
+      let alarmSelfLock = soundMuteSelf.some((ele) => {
+        return !ele.isConfirm;
+      });
+
+      let alarmOtherLock = soundMuteOther.some((ele) => {
+        return !ele.isConfirm;
+      });
+
+      if (alarmOtherLock) {
+        this.audio = new Audio(audioPath);
+        this.audio.play();
+      } else if (alarmSelfLock) {
+        this.$store.getters.syzArray.forEach((ele) => {
+          if (ele.stationId === this.activeTab) {
+            ele.isMute = false;
+            this.audio = new Audio(audioPath);
+            this.audio.play();
+          }
+        });
+      } else if (!alarmSelfLock) {
+        this.$store.getters.syzArray.forEach((ele) => {
+          if (ele.stationId === this.activeTab) {
+            if (!ele.isMute) {
+              this.audio = new Audio(audioPath);
+              this.audio.play();
+            }
+          }
+        });
+      }
+    },
+
+    // 显示某个小红点
+    renderWarningTag(stationId = "") {
+      this.$store.getters.syzArray.forEach((ele) => {
+        if (ele.id === stationId) {
+          ele.isWarning = "1";
+        }
+      });
+      this.pageshowMode++;
+    },
+
+    // 清除某个小红点
+    clearWarningTag(stationId = "") {
+      this.$store.getters.syzArray.forEach((ele) => {
+        if (ele.id === stationId) {
+          ele.isWarning = "0";
+        }
+      });
+      this.pageshowMode++;
+    },
+
+    // 切换报警声音开关
+    switchAlarmSound(index) {
+      this.$store.getters.syzArray[index].isMute =
+        !this.$store.getters.syzArray[index].isMute;
+    },
+
+    opened() {
+      this.initAlarm();
+      this.timmer = setInterval(() => {
+        this.renderAlarm();
+      }, 3000);
+    },
+
+    closed() {
+      clearInterval(this.timmer);
+      this.timmer = null;
+      this.$store.commit("activeTab", "");
+      this.$store.commit("syzDialogShow", false);
+    },
+
+    tabClick(res) {
+      this.$store.commit("activeTab", res.props.name);
+      this.renderAlarm(res.props.name, false);
+    },
+  },
+  watch: {
+    "$store.state.syzArray"(res) {
+      this.syzArray = res;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.bodyy {
+  display: flex;
+  flex-direction: row;
+  background-color: black;
+  width: 100%;
+  margin-top: -30px;
+  height: 91vh;
+  position: relative;
+  overflow: hidden;
+
+  .syzDetailsPaneItem {
+    position: relative;
+
+    .alarmIconBox {
+      position: absolute;
+      right: 0;
+      top: 0;
+      cursor: pointer;
+
+      i {
+        font-size: 20px;
+      }
+    }
+  }
+}
+</style>
+<style lang="less">
+.bodyy {
+  .pop-up-main,
+  .paln-box {
+    width: 100%;
+    height: 90vh;
+    overflow: hidden;
+    position: relative;
+  }
+  .movableItem {
+    width: 100% !important;
+    height: 100% !important;
+
+    .svg {
+      width: 100%;
+      height: 92%;
+      margin-left: 0;
+      margin-top: 8%;
+    }
+  }
+
+  .el-badge__content.is-fixed.is-dot {
+    right: 0;
+    top: 10px;
+    background: #f25656;
+    animation: twinkle 0.75s infinite;
+    border-color: transparent;
+  }
+
+  @keyframes twinkle {
+    0% {
+      opacity: 0;
+    }
+    50% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+}
+
+.currentShowTitles {
+  width: 100%;
+  position: relative;
+  .alarIcon {
+    position: absolute;
+    right: 50px;
+    top: 5;
+    font-size: 20px;
+    cursor: pointer;
+  }
+}
+</style>

src/components/problem/areaCard.vue

@@ -329,7 +329,6 @@ export default {
           bd.removeCheckouts(val);
         }
       }
-      console.log(msg);
       let mss = ""; // 信息
       let iserror = false; // 是否有控制错误的风机
       for (let v in msg.data) {
@@ -400,7 +399,6 @@ export default {
         val.active = array[2];
         this.values.splice(array[1], 1, val);
       }
-      console.log(this.values);
     },
     handleDetails(itm) {
       this.dialogVisible = true;
@@ -448,7 +446,6 @@ export default {
             this.listedList.push(val);
           }
         }
-        console.log(this.faultList);
       },
     },
   },

src/components/warning/warningArea.vue

@@ -1,68 +1,68 @@
 <template>
-    <div class="body">
-        <img class="logo" src="../../assets/img/logo.png" alt="">
-        <div class="title">告警区</div>
-        <div style="margin-top: 50px; margin-left: 10px; height: 19vh;">
-            <!-- <el-scrollbar>
+  <div class="body">
+    <img class="logo" src="../../assets/img/logo.png" alt="" />
+    <div class="title">告警区</div>
+    <div style="margin-top: 50px; margin-left: 10px; height: 19vh">
+      <!-- <el-scrollbar>
                 <div class="scoll" style="margin-left: 5px;">
                     <WarningCard></WarningCard>
                 </div>
             </el-scrollbar> -->
-            <WarningCard></WarningCard>
-        </div>
+      <WarningCard></WarningCard>
     </div>
+  </div>
 </template>
 <script>
-    import WarningCard from "./warningCard.vue";
-    export default {
-        components: {
-            WarningCard,
-        },
-    }
+import WarningCard from "./warningCard.vue";
+export default {
+  components: {
+    WarningCard,
+  },
+};
 </script>
 <style scoped>
-    .body {
-        border: 1px solid #373737;
-        width: 100%;
-        margin-left: 15px;
-        margin-top: 10px;
-        height: 25vh
-    }
+.body {
+  border: 1px solid #373737;
+  width: 100%;
+  margin-left: 15px;
+  margin-top: 10px;
+  height: 25vh;
+}
 
-    .body .scoll {
-        height: 91%;
-    }
+.body .scoll {
+  height: 91%;
+}
 
-    .title {
-        color: #ffffff;
-        font-size: 14px;
-        margin-left: 32px;
-        /* margin-top: 12px; */
-        margin-bottom: 10px;
-        /* width: 570px; */
-        width: 29vw;
-        height: 50px;
-        display: flex;
-        align-items: center;
-        position: absolute;
-        background-color: #000000;
-    }
+.title {
+  color: #ffffff;
+  font-size: 14px;
+  margin-left: 32px;
+  /* margin-top: 12px; */
+  margin-bottom: 10px;
+  /* width: 570px; */
+  width: 29vw;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  position: absolute;
+  background-color: #000000;
+}
 
-    .title::before {
-        z-index: 1;
-        content: '';
-        position: absolute;
-        left: -18px !important;
-        /* top: 30px !important; */
-        width: 5px;
-        height: 5px;
-        background-color: rgba(230, 191, 65, 1);
-        border-radius: 50%;
-    }
+.title::before {
+  z-index: 1;
+  content: "";
+  position: absolute;
+  left: -18px !important;
+  /* top: 30px !important; */
+  width: 5px;
+  height: 5px;
+  background-color: rgba(230, 191, 65, 1);
+  border-radius: 50%;
+}
 
-    .logo {
-        position: absolute;
-        top: 2px;
-        left: 12px;
-    }
+.logo {
+  position: absolute;
+  top: 2px;
+  left: 12px;
+}
 </style>

src/components/warning/warningCard.vue

@@ -1,191 +1,342 @@
 /* 告警区 */
 <template>
-	<div style="padding-left: 5px; padding-right: 5px">
-		<el-table :data="values" class="table" height="20vh" :header-cell-style="{
-          background: '#000000',
-          color: 'rgb(220,220,220)',
-          padding: '4px',
-          fontSize: '14px',
-          'border-bottom': 'solid 1px black',
-        }" :cell-style="{
-          background: 'rgb(30,30,30)',
-          color: 'rgb(220,220,220)',
-          padding: '3px',
-          fontSize: '12px',
-        }" @row-dblclick="itemDblclick">
-			<el-table-column prop="lastUpdateTime" align="center" label="时间" width="150">
-			</el-table-column>
-			<el-table-column prop="alertText" align="center" label="描述" width="280">
-			</el-table-column>
-			<el-table-column prop="isSelected" align="center" label="确认">
-				<template v-slot="scope">
-					<input type="checkbox" v-model="scope.row.isSelected" @click="itemChecked(scope.row)" />
-				</template>
-			</el-table-column>
-		</el-table>
-	</div>
-	<WindturbineDetailPages v-model="dialogVisible" :windturbine="currentWindturbine" @close="close"></WindturbineDetailPages>
-		<StationSvgDetailPages v-model="svgVisible"
-		:stationName="stationName" :svgWeb="svgWeb" @close="close"></StationSvgDetailPages>
+  <div style="padding-left: 5px; padding-right: 5px">
+    <el-table
+      :data="values"
+      class="table"
+      height="20vh"
+      :header-cell-style="{
+        background: '#000000',
+        color: 'rgb(220,220,220)',
+        padding: '4px',
+        fontSize: '14px',
+        'border-bottom': 'solid 1px black',
+      }"
+      @row-dblclick="itemDblclick"
+      :cell-class-name="setCellClassName"
+    >
+      <el-table-column
+        prop="lastUpdateTime"
+        align="center"
+        label="时间"
+        width="150"
+      >
+      </el-table-column>
+      <el-table-column prop="alertText" align="center" label="描述" width="280">
+      </el-table-column>
+      <el-table-column prop="isSelected" align="center" label="确认">
+        <template v-slot="scope">
+          <input
+            type="checkbox"
+            v-model="scope.row.isSelected"
+            @click="itemChecked(scope.row)"
+          />
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+  <WindturbineDetailPages
+    v-model="dialogVisible"
+    :windturbine="currentWindturbine"
+    @close="close"
+  ></WindturbineDetailPages>
+  <StationSvgDetailPages
+    v-model="svgVisible"
+    :stationName="stationName"
+    :svgWeb="svgWeb"
+    @close="close"
+  ></StationSvgDetailPages>
 </template>
 
 <script>
-	import MessageBridge from "utils/MessageBridge";
-	import WindturbineDetailPages from "../WindturbineDetailPages.vue";
-	import BackgroundData from "utils/BackgroundData";
-	import api from "api/index";
-	import StationSvgDetailPages from "../stationSvgDetailPages.vue";
-
-	export default {
-		name: "AlarmArea",
-		components: {
-			WindturbineDetailPages,
-			// Sbdl,
-			StationSvgDetailPages,
-		},
-		created: function () {
-			this.initData()
-			this.faultMessage()
-		},
-		props: {},
-		data() {
-			return {
-				values: ["-"],
-				dialogVisible: false,
-				showSvg: false,
-				svgVisible: false,
-				svgWeb: '',
-				stationName: '',
-				currentWindturbine: {},
-			};
-		},
-		methods: {
-			initData() {
-				let mb = MessageBridge.getInstance();
-				let vs = [{
-					key: "/topic/fault-popup",
-					action: this.faultMessage
-				}];
-				mb.register(vs);
-			},
-			faultMessage(json) {
-				let val = json?JSON.parse(json):this.$store.state.warning
-				if (Object.keys(val).length>0) {
-					let sleected = {};
-					this.values.forEach((it) => {
-						if (it.isSelected) {
-							sleected[it.id] = 0;
-						}
-					});
-					this.values = new Array();
-					for (let v in val) {
-						let vl = val[v];
-						if (vl.stationId != "QS_FDC" && vl.category1 == "FJ") {
-							vl.alertText = vl.windturbineName + "-" + vl.alertText;
-						}
-						if (sleected[vl.id] == 0 && BackgroundData.getInstance().LoginUser) {
-							vl.isSelected = true;
-						}
-						if(vl.category1!=="GF" && vl.objectId.indexOf("GDC") < 0){
-							this.values.push(vl);
-						}
-					}
-				}
-			},
-			/* 行双击 */
-			itemDblclick(row) {
-				if (row.category1 === "FJ") {
-					this.dialogVisible = true;
-					this.showSvg = false;
-					this.currentWindturbine = row;
-				} else if(row.category1 === "SYZ"){
-					this.svgVisible = true;
-					this.svgWeb = row.stationId;
-					this.stationName = row.stationName
-				}
-			},
-			close() {
-				this.dialogVisible = false;
-				this.svgVisible = false
-			},
-			/* 报警确认 */
-			itemChecked(row) {
-				if (row.isSelected == true) {
-					row.isSelected = false;
-					return;
-				}
-				let bd = BackgroundData.getInstance();
-				if (!bd.LoginUser) {
-					this.$notify({
-						title: "请登录",
-						message: "确认报警需要先登录！",
-						type: "warning",
-						position: "bottom-right",
-						offset: 60,
-						duration: 3000,
-					});
-					row.isSelected = false;
-					return;
-				}
-				row.isSelected = true;
-				this.confirm(row);
-			},
-			confirm(item) {
-				api.sendWarning({
-					snapID: item.snapIDString,
-					faultID: item.idString,
-					userName: BackgroundData.getInstance().LoginUser.name,
-				}).then(msg => {
-					let mms = msg.data > 0 ? "报警确认成功！" : "报警确认出现错误!";
-					let tp = msg.data > 0 ? "success" : "error";
-					msg.data === 0 ? (item.isSelected = false) : '';
-					this.$notify({
-						title: "报警",
-						message: mms,
-						type: tp,
-						position: "bottom-right",
-						offset: 60,
-						duration: 3000,
-					});
-				})
-			},
-		},
-	};
+import MessageBridge from "utils/MessageBridge";
+import WindturbineDetailPages from "../WindturbineDetailPages.vue";
+import BackgroundData from "utils/BackgroundData";
+import api from "api/index";
+import StationSvgDetailPages from "../stationSvgDetailPages.vue";
+
+export default {
+  name: "AlarmArea",
+  components: {
+    WindturbineDetailPages,
+    // Sbdl,
+    StationSvgDetailPages,
+  },
+  created: function () {
+    this.initData();
+    this.faultMessage();
+  },
+  props: {},
+  data() {
+    return {
+      values: ["-"],
+      dialogVisible: false,
+      showSvg: false,
+      svgVisible: false,
+      svgWeb: "",
+      stationName: "",
+      currentWindturbine: {},
+      audio: null,
+    };
+  },
+  methods: {
+    initData() {
+      let mb = MessageBridge.getInstance();
+      let vs = [
+        {
+          key: "/topic/fault-popup",
+          action: this.faultMessage,
+        },
+      ];
+      mb.register(vs);
+    },
+    faultMessage(json) {
+      let val = json ? JSON.parse(json) : this.$store.state.warning;
+
+      if (Object.keys(val).length > 0) {
+        let syzAlarmArray = this.$store.state.syzAlarmArray || [];
+        val.forEach((ele) => {
+          if (
+            ele.category1 === "SYZ" &&
+            ele.rank === this.$store.state.syzAlarmRank
+          ) {
+            let item = syzAlarmArray.find((findEle) => {
+              return ele.idString === findEle.idString;
+            });
+            if (!item) {
+              ele.soundSource = "syz";
+              ele.isConfirm = false;
+              syzAlarmArray.push(ele);
+            }
+          }
+        });
+
+        this.$store.commit("syzAlarmArray", syzAlarmArray);
+
+        const syzAlarmItem = this.$store.getters.syzAlarmArray.some((ele) => {
+          return (
+            ele.category1 === "SYZ" &&
+            ele.rank === this.$store.state.syzAlarmRank
+          );
+        });
+
+        const syzDialogShow = this.$store.getters.syzAlarmArray.some((ele) => {
+          return !ele.isConfirm;
+        });
+
+        syzDialogShow && this.$store.commit("syzDialogShow", syzDialogShow);
+
+        let syzBtnFlicker = syzAlarmArray.some((ele) => {
+          return ele.rank === this.$store.state.syzAlarmRank;
+        });
+
+        this.$store.commit("syzBtnFlicker", syzBtnFlicker);
+
+        let sleected = {};
+        this.values.forEach((it) => {
+          if (it.isSelected) {
+            sleected[it.id] = 0;
+          }
+        });
+        this.values = new Array();
+        for (let v in val) {
+          let vl = val[v];
+          if (vl.stationId != "QS_FDC" && vl.category1 == "FJ") {
+            vl.alertText = vl.windturbineName + "-" + vl.alertText;
+          }
+          if (sleected[vl.id] == 0 && BackgroundData.getInstance().LoginUser) {
+            vl.isSelected = true;
+          }
+          if (vl.category1 !== "GF" && vl.objectId.indexOf("GDC") < 0) {
+            this.values.push(vl);
+          }
+        }
+
+        let fjAlarArray = [];
+        let fjDataArray = [];
+
+        this.values.forEach((ele) => {
+          if (ele.category1 === "FJ") {
+            if (ele.rank >= this.$store.state.fjAlarmRank) {
+              fjAlarArray.push(ele);
+            } else {
+              fjDataArray.push(ele);
+            }
+          }
+        });
+
+        if (syzAlarmItem) {
+          this.syzAudioPlay(syzAlarmArray);
+        } else if (!syzAlarmItem && fjAlarArray.length) {
+          this.audioPlay(this.getSound(fjAlarArray[0].soundSource || "wd"));
+        }
+
+        this.values = [].concat(fjAlarArray, fjDataArray);
+      }
+    },
+    // 返回音频文件路径
+    getSound(fileName) {
+      return `./static/sound/${fileName}.mp3`;
+    },
+
+    // 播放音频
+    audioPlay(audioPath) {
+      this.audio = new Audio(audioPath);
+      this.audio.play();
+    },
+
+    // 升压站报警播放逻辑,因升压站报警声音是否播放牵扯的分支很多,所以单独声明函数处理
+    syzAudioPlay(syzAlarmArray) {
+      let syzArray = this.$base.deepCopy(this.$store.getters.syzArray);
+      syzArray.forEach((pEle) => {
+        pEle.alarmList = [];
+        syzAlarmArray.forEach((cEle) => {
+          if (pEle.id === cEle.stationId) {
+            pEle.alarmList.push(cEle);
+          }
+        });
+      });
+
+      let alarmSoundLock1 = false;
+      let alarmSoundLock2 = false;
+
+      syzArray.forEach((pEle) => {
+        pEle.alarmList.forEach((cEle) => {
+          if (!cEle.isConfirm) {
+            pEle.isMute = false;
+            alarmSoundLock1 = true;
+            if (pEle.id === this.$store.state.activeTab) {
+              cEle.isConfirm = true;
+            }
+          }
+        });
+      });
+
+      if (alarmSoundLock1) {
+        this.audioPlay(this.getSound("syz"));
+      } else {
+        for (let i = 0; i < syzArray.length; i++) {
+          if (syzArray[i].alarmList.length) {
+            alarmSoundLock2 = syzArray[i].alarmList.some((ele) => {
+              return (
+                !syzArray[i].isMute &&
+                ele.rank === this.$store.state.syzAlarmRank
+              );
+            });
+          }
+        }
+      }
+      alarmSoundLock2 && this.audioPlay(this.getSound("syz"));
+
+      syzArray.forEach((ele) => {
+        Array.isArray(ele.alarmList) && delete ele.alarmList;
+      });
+      this.$store.commit("syzArray", syzArray);
+    },
+
+    /* 行双击 */
+    itemDblclick(row) {
+      if (row.category1 === "FJ") {
+        this.dialogVisible = true;
+        this.showSvg = false;
+        this.currentWindturbine = row;
+      } else if (row.category1 === "SYZ") {
+        this.svgVisible = true;
+        this.svgWeb = row.stationId;
+        this.stationName = row.stationName;
+      }
+    },
+    close() {
+      this.dialogVisible = false;
+      this.svgVisible = false;
+    },
+    /* 报警确认 */
+    itemChecked(row) {
+      if (row.isSelected == true) {
+        row.isSelected = false;
+        return;
+      }
+      let bd = BackgroundData.getInstance();
+      if (!bd.LoginUser) {
+        this.$notify({
+          title: "请登录",
+          message: "确认报警需要先登录！",
+          type: "warning",
+          position: "bottom-right",
+          offset: 60,
+          duration: 3000,
+        });
+        row.isSelected = false;
+        return;
+      }
+      row.isSelected = true;
+      this.confirm(row);
+    },
+    confirm(item) {
+      api
+        .sendWarning({
+          snapID: item.snapIDString,
+          faultID: item.idString,
+          userName: BackgroundData.getInstance().LoginUser.name,
+        })
+        .then((msg) => {
+          let mms = msg.data > 0 ? "报警确认成功！" : "报警确认出现错误!";
+          let tp = msg.data > 0 ? "success" : "error";
+          msg.data === 0 ? (item.isSelected = false) : "";
+          this.$notify({
+            title: "报警",
+            message: mms,
+            type: tp,
+            position: "bottom-right",
+            offset: 60,
+            duration: 3000,
+          });
+        });
+    },
+    setCellClassName({ row }) {
+      if (row.rank >= this.$store.state.fjAlarmRank) {
+        return "cellBase flicker";
+      } else {
+        return "cellBase";
+      }
+    },
+  },
+};
 </script>
-<style scoped>
-	.el-table::before {
-		width: 0;
-	}
-
-	.table {
-		background-color: #000000;
-	}
-
-	:deep(.el-table__body-wrapper::-webkit-scrollbar) {
-		width: 8px;
-		height: 0px;
-		background-color: black;
-	}
-
-	:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
-		background-color: #292929;
-		border-radius: 6px;
-	}
-
-	:deep(.el-table td, .el-table th) {
-		border-bottom: 2px solid black;
-	}
-	.el-table__body-wrapper{
-		background-color: black;
-	}
-	tr {
-		line-height: 1.5;
-		background: #1e1e1e;
-		margin-bottom: 2px;
-		border-radius: 5px;
-	}
-
-	/* .ToolBar {
+<style lang="less" scoped>
+.el-table::before {
+  width: 0;
+}
+
+.table {
+  background-color: #000000;
+}
+
+:deep(.el-table__body-wrapper::-webkit-scrollbar) {
+  width: 8px;
+  height: 0px;
+  background-color: black;
+}
+
+:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
+  background-color: #292929;
+  border-radius: 6px;
+}
+
+:deep(.el-table td, .el-table th) {
+  border-bottom: 2px solid black;
+}
+.el-table__body-wrapper {
+  background-color: black;
+}
+tr {
+  line-height: 1.5;
+  background: #1e1e1e;
+  margin-bottom: 2px;
+  border-radius: 5px;
+}
+
+/* .ToolBar {
   position: absolute;
   right: 12px;
   width: 586px;
@@ -196,13 +347,35 @@
   margin: 5px;
   background: #1e1e1e;
 } */
-	.table-main {
-		font-size: 14px;
-		width: 600px;
-		text-align: center;
-		background: #000000;
-		margin: 5px;
-		border-collapse: separate;
-		border-spacing: 0px 5px;
-	}
+.table-main {
+  font-size: 14px;
+  width: 600px;
+  text-align: center;
+  background: #000000;
+  margin: 5px;
+  border-collapse: separate;
+  border-spacing: 0px 5px;
+}
+</style>
+<style lang="less">
+.cellBase {
+  background: rgb(30, 30, 30) !important;
+  color: rgb(220, 220, 220);
+  padding: 3px;
+  font-size: 12px;
+}
+.cellBase.flicker {
+  animation: flicker 0.6s infinite;
+}
+@keyframes flicker {
+  0% {
+    color: rgb(220, 220, 220);
+  }
+  50% {
+    color: orangered;
+  }
+  100% {
+    color: rgb(220, 220, 220);
+  }
+}
 </style>

src/main.js

@@ -7,8 +7,10 @@ import * as echarts from 'echarts';
 import ElementPlus from 'element-plus';
 import 'element-plus/lib/theme-chalk/index.css';
 import locale from 'element-ui/lib/locale/lang/zh-CN'
+import base from "./utils/baseTool.js"
 const app = createApp(App)
 app.config.globalProperties.$echarts = echarts
+app.config.globalProperties.$base = base
 app.use(store)
 app.use(router)
 app.use(ElementPlus, { locale })

src/store/index.js

@@ -12,6 +12,82 @@ const store = createStore({
                titleInfo: Object,
                token: "",
                current: 1,
+               syzAlarmArray: [],
+               syzDialogShow: false,
+               syzAlarmRank: "6", // 升压站报警级别， === 此级别会报警
+               fjAlarmRank: "6", // 风机报警级别， >= 此级别会报警
+               currentWarningCardClass: "", // 升压站弹窗右下角表格 class 
+               syzBtnFlicker: false, // 升压站按钮本身是否闪烁以提示有未处理报警
+               // 升压站列表
+               syzArray: [
+                    {
+                         id: "MHS_FDC",
+                         isWarning: "0",
+                         name: "麻黄山",
+                         isMute: false,
+                    },
+                    {
+                         id: "NSS_FDC",
+                         isWarning: "0",
+                         name: "牛首山",
+                         isMute: false,
+                    },
+                    {
+                         id: "QS_FDC",
+                         isWarning: "0",
+                         name: "青山",
+                         isMute: false,
+                    },
+                    {
+                         id: "SBQ_FDC",
+                         isWarning: "0",
+                         name: "石板泉",
+                         isMute: false,
+                    },
+                    {
+                         id: "XS_FDC",
+                         isWarning: "0",
+                         name: "香山",
+                         isMute: false,
+                    },
+                    {
+                         id: "DWK_GDC",
+                         isWarning: "0",
+                         name: "大武口",
+                         isMute: false,
+                    },
+                    {
+                         id: "QS3_FDC",
+                         isWarning: "0",
+                         name: "青山三期",
+                         isMute: false,
+                    },
+                    {
+                         id: "PL1_GDC",
+                         isWarning: "0",
+                         name: "平罗一期",
+                         isMute: false,
+                    },
+                    {
+                         id: "PL2_GDC",
+                         isWarning: "0",
+                         name: "平罗二期",
+                         isMute: false,
+                    },
+                    {
+                         id: "MCH_GDC",
+                         isWarning: "0",
+                         name: "马场湖",
+                         isMute: false,
+                    },
+                    {
+                         id: "XH_GDC",
+                         isWarning: "0",
+                         name: "宣和",
+                         isMute: false,
+                    },
+               ],
+               activeTab: "MHS_FDC" // 升压站弹窗所停留的tab页
           }
      },
 
@@ -26,6 +102,12 @@ const store = createStore({
           token(state) {
                return state.token;
           },
+          syzAlarmArray(state) {
+               return state.syzAlarmArray;
+          },
+          syzArray(state) {
+               return state.syzArray;
+          },
      },
 
      // 数据更新 使用: this.$store.commit('函数名','val')
@@ -51,7 +133,25 @@ const store = createStore({
           token(state, data) {
                state.token = data;
           },
+          syzAlarmArray(state, data) {
+               state.syzAlarmArray = data;
+          },
+          syzDialogShow(state, data) {
+               state.syzDialogShow = data;
+          },
+          currentWarningCardClass(state, data) {
+               state.currentWarningCardClass = data;
+          },
+          syzBtnFlicker(state, data) {
+               state.syzBtnFlicker = data;
+          },
+          syzArray(state, data) {
+               state.syzArray = data;
+          },
+          activeTab(state, data) {
+               state.activeTab = data;
+          },
      }
 })
 
-export default store
+export default store;

src/utils/PhotoelectricDetailPages.js

@@ -2,140 +2,140 @@
 // import {config} from '../../config';
 
 export const Photoelectric = {
-		'MHS_BT':[
-			{name:"有功设定限值", tag:"PowerSet", value:"MHSDQ.NX_GD_MHSF_DQ_P1_L1_001_AI0296", calc:"1"},
-			{name:"AGC可调上限", tag:"AgcUp", value:"MHSDQ.NX_GD_MHSF_DQ_P1_L1_001_AI0294", calc:"0.1"},
-			{name:"AGC可调下限", tag:"AgcLower", value:"MHSDQ.NX_GD_MHSF_DQ_P1_L1_001_AI0295", calc:"0.01"},
-			{name:"实发有功", tag:"ActualPower", value:"MHSDQ.NX_GD_MHSF_DQ_P1_L1_001_AI0013", calc:"0.833"},
-			{name:"理论功率", tag:"TheoryPower", value:"MHSFCJSFW.NX_GD_MHSF_XX_XX_XXX_XXX_CI0193", calc:"0.001"},
-			{name:"预测功率", tag:"ForecastPower", value:"MHSFGL.NX_GD_MHSF_YC_P1_L1_001_CDQ001", calc:"1"},
-			{name:"AGC投入", tag:"AgcIn", value:"MHSDQ.NX_GD_MHSF_DQ_P1_L1_001_DI1207"},
-			{name:"AGC远方", tag:"AgcFar", value:"MHSDQ.NX_GD_MHSF_DQ_P1_L1_001_DI1208"},
-			{name:"有功增闭锁", tag:"SumLock", value:"MHSDQ.NX_GD_MHSF_DQ_P1_L1_001_DI1209"},
-			{name:"有功减闭锁", tag:"SubLock", value:"MHSDQ.NX_GD_MHSF_DQ_P1_L1_001_DI1210"},
-			{name:"状态", tag:"Status", value:"MHSFCJSFW.NX_GD_MHSF_XX_XX_XXX_XXX_CI0263"},
-			{name:"装机容量", tag:"InstalledCapacity", value:"69.5"},
-		],
-		'QS_BT':[
-			{name:"有功设定限值", tag:"PowerSet", value:"QSDQ.NX_GD_QSF_DQ_P1_L1_001_AI1281", calc:"1"},
-			{name:"AGC可调上限", tag:"AgcUp", value:"QSDQ.NX_GD_QSF_DQ_P1_L1_001_AI1284", calc:"1"},
-			{name:"AGC可调下限", tag:"AgcLower", value:"QSDQ.NX_GD_QSF_DQ_P1_L1_001_AI1285", calc:"0.1"},
-			{name:"实发有功", tag:"ActualPower", value:"QSDQ.NX_GD_QSF_DQ_P1_L1_001_AI1282", calc:"1"},
-			{name:"理论功率", tag:"TheoryPower", value:"QSFCJSFW.NX_GD_QSF_FJ_P1_XXX_XXX_CI0192", calc:"0.001"},
-			{name:"预测功率", tag:"ForecastPower", value:"QSFGL.NX_GD_QSF_YC_P1_L1_001_CDQ001", calc:"1"},
-			{name:"AGC投入", tag:"AgcIn", value:"QSDQ.NX_GD_QSF_DQ_P1_L1_001_DI2442"},
-			{name:"AGC远方", tag:"AgcFar", value:"QSDQ.NX_GD_QSF_DQ_P1_L1_001_DI2443"},
-			{name:"有功增闭锁", tag:"SumLock", value:"QSDQ.NX_GD_QSF_DQ_P1_L1_001_DI2444"},
-			{name:"有功减闭锁", tag:"SubLock", value:"QSDQ.NX_GD_QSF_DQ_P1_L1_001_DI2445"},
-			{name:"状态", tag:"Status", value:"QSFCJSFW.NX_GD_QSF_XX_XX_XXX_XXX_CI0263"},
-			{name:"装机容量", tag:"InstalledCapacity", value:"99"},
-		],
-		'NSS_BT':[
-			{name:"有功设定限值", tag:"PowerSet", value:"NSSDQN.NX_GD_NSSF_DQ_P1_L1_001_AI1019", calc:"1"},
-			{name:"AGC可调上限", tag:"AgcUp", value:"NSSDQN.NX_GD_NSSF_DQ_P1_L1_001_AI1010", calc:"0.001"},
-			{name:"AGC可调下限", tag:"AgcLower", value:"NSSDQN.NX_GD_NSSF_DQ_P1_L1_001_AI1011", calc:"0.001"},
-			{name:"实发有功", tag:"ActualPower", value:"NSSDQN.NX_GD_NSSF_DQ_P1_L1_001_AI1009", calc:"0.001"},
-			{name:"理论功率", tag:"TheoryPower", value:"NSSFCJSFW.NX_GD_NSSF_XX_XX_XXX_XXX_CI0193", calc:"0.001"},
-			{name:"预测功率", tag:"ForecastPower", value:"NSSFGL.NX_GD_NSSF_YC_P1_L1_001_CDQ001", calc:"0.001"},
-			{name:"AGC投入", tag:"AgcIn", value:"NSSDQN.NX_GD_NSSF_DQ_P1_L1_001_DI1547"},
-			{name:"AGC远方", tag:"AgcFar", value:"NSSDQN.NX_GD_NSSF_DQ_P1_L1_001_DI1556"},
-			{name:"有功增闭锁", tag:"SumLock", value:"NSSDQN.NX_GD_NSSF_DQ_P1_L1_001_DI1567"},
-			{name:"有功减闭锁", tag:"SubLock", value:"NSSDQN.NX_GD_NSSF_DQ_P1_L1_001_DI1568"},
-			{name:"状态", tag:"Status", value:"NSSFCJSFW.NX_GD_NSSF_XX_XX_XXX_XXX_CI0263"},
-			{name:"装机容量", tag:"InstalledCapacity", value:"148.5"},
-		],
-		"XN6_BT":[
-			{name:"有功设定限值", tag:"PowerSet", value:"SBQXLDQ.NX_GD_SBQF_DQ_P1_L1_001_AI0818", calc:"1"},
-			{name:"AGC可调上限", tag:"AgcUp", value:"SBQXLDQ.NX_GD_SBQF_DQ_P1_L1_001_AI0819", calc:"0.1"},
-			{name:"AGC可调下限", tag:"AgcLower", value:"SBQXLDQ.NX_GD_SBQF_DQ_P1_L1_001_AI0820", calc:"0.1"},
-			{name:"实发有功", tag:"ActualPower", value:"SBQXLDQ.NX_GD_SBQF_DQ_P1_L1_001_AI0012", calc:"0.001"},
-			{name:"理论功率", tag:"TheoryPower", value:"SBQFCJSFW.NX_GD_SBQF_FJ_P1_XXX_XXX_CI0192", calc:"0.001"},
-			{name:"预测功率", tag:"ForecastPower", value:"SBQFGL.NX_GD_SBQF_YC_P1_L1_001_CDQ001", calc:"1"},
-			{name:"AGC投入", tag:"AgcIn", value:"SBQXLDQ.NX_GD_SBQF_DQ_P1_L1_001_DI3831"},
-			{name:"AGC远方", tag:"AgcFar", value:"SBQXLDQ.NX_GD_SBQF_DQ_P1_L1_001_DI3832"},
-			{name:"有功增闭锁", tag:"SumLock", value:"SBQXLDQ.NX_GD_SBQF_DQ_P1_L1_001_DI3833"},
-			{name:"有功减闭锁", tag:"SubLock", value:"SBQXLDQ.NX_GD_SBQF_DQ_P1_L1_001_DI3834"},
-			{name:"状态", tag:"Status", value:"SBQFCJSFW.NX_GD_SBQF_XX_XX_XXX_XXX_CI0263"},
-			{name:"装机容量", tag:"InstalledCapacity", value:"49.5"},
-		],
-		'N5_BT':[
-			{name:"有功设定限值", tag:"PowerSet", value:"SBQNWDQ.NX_GD_SBQF_DQ_P1_L1_001_AI0818", calc:"1"},
-			{name:"AGC可调上限", tag:"AgcUp", value:"SBQNWDQ.NX_GD_SBQF_DQ_P1_L1_001_AI0819", calc:"1"},
-			{name:"AGC可调下限", tag:"AgcLower", value:"SBQNWDQ.NX_GD_SBQF_DQ_P1_L1_001_AI0820", calc:"1"},
-			{name:"实发有功", tag:"ActualPower", value:"SBQNWDQ.NX_GD_SBQF_DQ_P1_L1_001_AI0817", calc:"1"},
-			{name:"理论功率", tag:"TheoryPower", value:"SBQFCJSFW.NX_GD_SBQF_FJ_P2_XXX_XXX_CI0192,SBQFCJSFW.NX_GD_SBQF_FJ_P3_XXX_XXX_CI0192,SBQFCJSFW.NX_GD_SBQF_FJ_P4_XXX_XXX_CI0192", calc:"0.001"},
-			{name:"预测功率", tag:"ForecastPower", value:"SBQFGL.NX_GD_SBQF_YC_P1_L1_001_CDQ001", calc:"1"},
-			{name:"AGC投入", tag:"AgcIn", value:"SBQNWDQ.NX_GD_SBQF_DQ_P1_L1_001_DI3831"},
-			{name:"AGC远方", tag:"AgcFar", value:"SBQNWDQ.NX_GD_SBQF_DQ_P1_L1_001_DI3832"},
-			{name:"有功增闭锁", tag:"SumLock", value:"SBQNWDQ.NX_GD_SBQF_DQ_P1_L1_001_DI3833"},
-			{name:"有功减闭锁", tag:"SubLock", value:"SBQNWDQ.NX_GD_SBQF_DQ_P1_L1_001_DI3834"},
-			{name:"状态", tag:"Status", value:"SBQFCJSFW.NX_GD_SBQF_XX_XX_XXX_XXX_CI026X"},
-			{name:"装机容量", tag:"InstalledCapacity", value:"149"},
-		],
-		'XS_BT':[
-			{name:"有功设定限值", tag:"PowerSet", value:"XSDQ.NX_GD_XSF_DQ_P1_L1_001_AI0411", calc:"1"},
-			{name:"AGC可调上限", tag:"AgcUp", value:"XSDQ.NX_GD_XSF_DQ_P1_L1_001_AI0412", calc:"1"},
-			{name:"AGC可调下限", tag:"AgcLower", value:"XSDQ.NX_GD_XSF_DQ_P1_L1_001_AI0413", calc:"1"},
-			{name:"实发有功", tag:"ActualPower", value:"XSDQ.NX_GD_XSF_DQ_P1_L1_001_AI0415", calc:"1"},
-			{name:"理论功率", tag:"TheoryPower", value:"XSFCJSFW.NX_GD_XSF_XX_XX_XXX_XXX_CI0193", calc:"0.001"},
-			{name:"预测功率", tag:"ForecastPower", value:"XSFGL.NX_G D_XSF_YC_P1_L1_001_CDQ001", calc:"1"},
-			{name:"AGC投入", tag:"AgcIn", value:"XSDQ.NX_GD_XSF_DQ_P1_L1_001_DI1749"},
-			{name:"AGC远方", tag:"AgcFar", value:"XSDQ.NX_GD_XSF_DQ_P1_L1_001_DI1750"},
-			{name:"有功增闭锁", tag:"SumLock", value:"XSDQ.NX_GD_XSF_DQ_P1_L1_001_DI1753"},
-			{name:"有功减闭锁", tag:"SubLock", value:"XSDQ.NX_GD_XSF_DQ_P1_L1_001_DI1754"},
-			{name:"状态", tag:"Status", value:"XSFCJSFW.NX_GD_XSF_XX_XX_XXX_XXX_CI0263"},
-			{name:"装机容量", tag:"InstalledCapacity", value:"99"},
-		],
-		'SL_BT':[
-			{name:"有功设定限值", tag:"PowerSet", value:"SLAGC.NX_GD_QSF_DQ_P1_L1_001_AI0052", calc:"1"},
-			{name:"AGC可调上限", tag:"AgcUp", value:"SLAGC.NX_GD_QSF_DQ_P1_L1_001_AI0053", calc:"1"},
-			{name:"AGC可调下限", tag:"AgcLower", value:"SLAGC.NX_GD_QSF_DQ_P1_L1_001_AI0054", calc:"1"},
-			{name:"实发有功", tag:"ActualPower", value:"SLDQ.NX_GD_QSF_DQ_P1_L1_001_AI0013", calc:"1"},
-			{name:"理论功率", tag:"TheoryPower", value:"QSFCJSFW.NX_GD_QSF_FJ_P3_XXX_XXX_CI0192", calc:"0.001"},
-			{name:"预测功率", tag:"ForecastPower", value:"SLFGL.NX_GD_QSF_YC_P1_L1_001_LCDQ01", calc:"1"},
-			{name:"AGC投入", tag:"AgcIn", value:"SLAGC.NX_GD_QSF_DQ_P1_L1_001_DI0142"},
-			{name:"AGC远方", tag:"AgcFar", value:"SLAGC.NX_GD_QSF_DQ_P1_L1_001_DI0143"},
-			{name:"有功增闭锁", tag:"SumLock", value:"SLAGC.NX_GD_QSF_DQ_P1_L1_001_DI0162"},
-			{name:"有功减闭锁", tag:"SubLock", value:"SLAGC.NX_GD_QSF_DQ_P1_L1_001_DI0163"},
-			{name:"状态", tag:"Status", value:"SLAGC.NX_GD_QSF_DQ_P1_L1_001_DI0165"},
-			{name:"装机容量", tag:"InstalledCapacity", value:"49.5"},
-		],
-		"DWKGDCJSFW.NX_GD_DWKG_XX_XX_XXX_XXX_CI0263":[
-			{name:"有功设定限值", tag:"PowerSet" , value:"DWKDQ.NX_GD_DWKG_DQ_P1_L1_001_AI0837"},
-			{name:"AGC可调上限", tag:"AgcUp" , value:"DWKDQ.NX_GD_DWKG_DQ_P1_L1_001_AI0838"},
-			{name:"AGC可调下限", tag:"AgcLower" , value:"DWKDQ.NX_GD_DWKG_DQ_P1_L1_001_AI0839"},
-			{name:"实发有功", tag:"ActualPower" , value:"DWKDQ.NX_GD_DWKG_DQ_P1_L1_001_AI0842" , calc:"0.01"},
-			{name:"理论功率", tag:"TheoryPower" , value:"DWKGDCJSFW.NX_GD_DWKG_XX_XX_XXX_XXX_CI0192"},
-			{name:"预测功率", tag:"ForecastPower" , value:"DWKGGL.NX_GD_DWKG_YC_P1_L1_001_CDQ001"},
-			{name:"AGC投入", tag:"AgcIn", value:"DWKDQ.NX_GD_DWKG_DQ_P1_L1_001_DI0761"},
-			{name:"AGC远方", tag:"AgcFar", value:"DWKDQ.NX_GD_DWKG_DQ_P1_L1_001_DI0767"},
-			{name:"有功增闭锁" ,tag:"SumLock", value:""},
-			{name:"有功减闭锁" ,tag:"SubLock", value:""},
-		],
-		'PLGDCJSFW.NX_GD_PLG_XX_XX_XXX_XXX_CI0263':[
-			{name:"有功设定限值", tag:"PowerSet", value:"PLSJ1.NX_GD_PLG_DQ_P1_L1_001_AI0838"},
-			{name:"AGC可调上限", tag:"AgcUp", value:"PLSJ1.NX_GD_PLG_DQ_P1_L1_001_AI0836"},
-			{name:"AGC可调下限", tag:"AgcLower", value:"PLSJ1.NX_GD_PLG_DQ_P1_L1_001_AI0837"},
-			{name:"实发有功", tag:"ActualPower", value:"PLSJ1.NX_GD_PLG_DQ_P1_L1_001_AI0835"},
-			{name:"理论功率", tag:"TheoryPower", value:"PLGDCJSFW.NX_GD_PLG_XX_XX_XXX_XXX_CI0192"},
-			{name:"预测功率", tag:"ForecastPower", value:"PLGGL.NX_GD_PLG_YC_P1_L1_001_CDQ0001"},
-			{name:"AGC投入", tag:"AgcIn", value:""},
-			{name:"AGC远方", tag:"AgcFar", value:""},
-			{name:"有功增闭锁", tag:"SumLock", value:""},
-			{name:"有功减闭锁", tag:"SubLock", value:""},
-		],
-		'XHGDCJSFW.NX_GD_XHG_XX_XX_XXX_XXX_CI0263':[
-			{name:"有功设定限值", tag:"PowerSet", value:"XHDQ.NX_GD_XHG_DQ_P1_L1_001_AI0204"},
-			{name:"AGC可调上限", tag:"AgcUp", value:"XHDQ.NX_GD_XHG_DQ_P1_L1_001_AI0194"},
-			{name:"AGC可调下限", tag:"AgcLower", value:"XHDQ.NX_GD_XHG_DQ_P1_L1_001_AI0195"},
-			{name:"实发有功", tag:"ActualPower", value:"XHDQ.NX_GD_XHG_DQ_P1_L1_001_AI0193"},
-			{name:"理论功率", tag:"TheoryPower", value:"XHGDCJSFW.NX_GD_XHG_XX_XX_XXX_XXX_CI0192"},
-			{name:"预测功率", tag:"ForecastPower", value:"XHGGL.NX_GD_XHG_YC_P1_L1_001_CDQ001"},
-			{name:"AGC投入", tag:"AgcIn", value:"XHDQ.NX_GD_XHG_DQ_P1_L1_001_DI0099"},
-			{name:"AGC远方", tag:"AgcFar", value:"XHDQ.NX_GD_XHG_DQ_P1_L1_001_DI0100"},
-			{name:"有功增闭锁", tag:"SumLock", value:""},
-			{name:"有功减闭锁", tag:"SubLock", value:""},
-		],
+	'MHS_BT': [
+		{ name: "有功设定限值", tag: "PowerSet", value: "MHSDQ.NX_GD_MHSF_DQ_P1_L1_001_AI0296", calc: "1" },
+		{ name: "AGC可调上限", tag: "AgcUp", value: "MHSDQ.NX_GD_MHSF_DQ_P1_L1_001_AI0294", calc: "0.1" },
+		{ name: "AGC可调下限", tag: "AgcLower", value: "MHSDQ.NX_GD_MHSF_DQ_P1_L1_001_AI0295", calc: "0.01" },
+		{ name: "实发有功", tag: "ActualPower", value: "MHSDQ.NX_GD_MHSF_DQ_P1_L1_001_AI0013", calc: "0.833" },
+		{ name: "理论功率", tag: "TheoryPower", value: "MHSFCJSFW.NX_GD_MHSF_XX_XX_XXX_XXX_CI0193", calc: "0.001" },
+		{ name: "预测功率", tag: "ForecastPower", value: "MHSFGL.NX_GD_MHSF_YC_P1_L1_001_CDQ001", calc: "1" },
+		{ name: "AGC投入", tag: "AgcIn", value: "MHSDQ.NX_GD_MHSF_DQ_P1_L1_001_DI1207" },
+		{ name: "AGC远方", tag: "AgcFar", value: "MHSDQ.NX_GD_MHSF_DQ_P1_L1_001_DI1208" },
+		{ name: "有功增闭锁", tag: "SumLock", value: "MHSDQ.NX_GD_MHSF_DQ_P1_L1_001_DI1209" },
+		{ name: "有功减闭锁", tag: "SubLock", value: "MHSDQ.NX_GD_MHSF_DQ_P1_L1_001_DI1210" },
+		{ name: "状态", tag: "Status", value: "MHSFCJSFW.NX_GD_MHSF_XX_XX_XXX_XXX_CI0263" },
+		{ name: "装机容量", tag: "InstalledCapacity", value: "69.5" },
+	],
+	'QS_BT': [
+		{ name: "有功设定限值", tag: "PowerSet", value: "QSDQ.NX_GD_QSF_DQ_P1_L1_001_AI1281", calc: "1" },
+		{ name: "AGC可调上限", tag: "AgcUp", value: "QSDQ.NX_GD_QSF_DQ_P1_L1_001_AI1284", calc: "1" },
+		{ name: "AGC可调下限", tag: "AgcLower", value: "QSDQ.NX_GD_QSF_DQ_P1_L1_001_AI1285", calc: "0.1" },
+		{ name: "实发有功", tag: "ActualPower", value: "QSDQ.NX_GD_QSF_DQ_P1_L1_001_AI1282", calc: "1" },
+		{ name: "理论功率", tag: "TheoryPower", value: "QSFCJSFW.NX_GD_QSF_FJ_P1_XXX_XXX_CI0192", calc: "0.001" },
+		{ name: "预测功率", tag: "ForecastPower", value: "QSFGL.NX_GD_QSF_YC_P1_L1_001_CDQ001", calc: "1" },
+		{ name: "AGC投入", tag: "AgcIn", value: "QSDQ.NX_GD_QSF_DQ_P1_L1_001_DI2442" },
+		{ name: "AGC远方", tag: "AgcFar", value: "QSDQ.NX_GD_QSF_DQ_P1_L1_001_DI2443" },
+		{ name: "有功增闭锁", tag: "SumLock", value: "QSDQ.NX_GD_QSF_DQ_P1_L1_001_DI2444" },
+		{ name: "有功减闭锁", tag: "SubLock", value: "QSDQ.NX_GD_QSF_DQ_P1_L1_001_DI2445" },
+		{ name: "状态", tag: "Status", value: "QSFCJSFW.NX_GD_QSF_XX_XX_XXX_XXX_CI0263" },
+		{ name: "装机容量", tag: "InstalledCapacity", value: "99" },
+	],
+	'NSS_BT': [
+		{ name: "有功设定限值", tag: "PowerSet", value: "NSSDQN.NX_GD_NSSF_DQ_P1_L1_001_AI1019", calc: "1" },
+		{ name: "AGC可调上限", tag: "AgcUp", value: "NSSDQN.NX_GD_NSSF_DQ_P1_L1_001_AI1010", calc: "0.001" },
+		{ name: "AGC可调下限", tag: "AgcLower", value: "NSSDQN.NX_GD_NSSF_DQ_P1_L1_001_AI1011", calc: "0.001" },
+		{ name: "实发有功", tag: "ActualPower", value: "NSSDQN.NX_GD_NSSF_DQ_P1_L1_001_AI1009", calc: "0.001" },
+		{ name: "理论功率", tag: "TheoryPower", value: "NSSFCJSFW.NX_GD_NSSF_XX_XX_XXX_XXX_CI0193", calc: "0.001" },
+		{ name: "预测功率", tag: "ForecastPower", value: "NSSFGL.NX_GD_NSSF_YC_P1_L1_001_CDQ001", calc: "0.001" },
+		{ name: "AGC投入", tag: "AgcIn", value: "NSSDQN.NX_GD_NSSF_DQ_P1_L1_001_DI1547" },
+		{ name: "AGC远方", tag: "AgcFar", value: "NSSDQN.NX_GD_NSSF_DQ_P1_L1_001_DI1556" },
+		{ name: "有功增闭锁", tag: "SumLock", value: "NSSDQN.NX_GD_NSSF_DQ_P1_L1_001_DI1567" },
+		{ name: "有功减闭锁", tag: "SubLock", value: "NSSDQN.NX_GD_NSSF_DQ_P1_L1_001_DI1568" },
+		{ name: "状态", tag: "Status", value: "NSSFCJSFW.NX_GD_NSSF_XX_XX_XXX_XXX_CI0263" },
+		{ name: "装机容量", tag: "InstalledCapacity", value: "148.5" },
+	],
+	"XN6_BT": [
+		{ name: "有功设定限值", tag: "PowerSet", value: "SBQXLDQ.NX_GD_SBQF_DQ_P1_L1_001_AI0818", calc: "1" },
+		{ name: "AGC可调上限", tag: "AgcUp", value: "SBQXLDQ.NX_GD_SBQF_DQ_P1_L1_001_AI0819", calc: "0.1" },
+		{ name: "AGC可调下限", tag: "AgcLower", value: "SBQXLDQ.NX_GD_SBQF_DQ_P1_L1_001_AI0820", calc: "0.1" },
+		{ name: "实发有功", tag: "ActualPower", value: "SBQXLDQ.NX_GD_SBQF_DQ_P1_L1_001_AI0012", calc: "0.001" },
+		{ name: "理论功率", tag: "TheoryPower", value: "SBQFCJSFW.NX_GD_SBQF_FJ_P1_XXX_XXX_CI0192", calc: "0.001" },
+		{ name: "预测功率", tag: "ForecastPower", value: "SBQFGL.NX_GD_SBQF_YC_P1_L1_001_CDQ001", calc: "1" },
+		{ name: "AGC投入", tag: "AgcIn", value: "SBQXLDQ.NX_GD_SBQF_DQ_P1_L1_001_DI3831" },
+		{ name: "AGC远方", tag: "AgcFar", value: "SBQXLDQ.NX_GD_SBQF_DQ_P1_L1_001_DI3832" },
+		{ name: "有功增闭锁", tag: "SumLock", value: "SBQXLDQ.NX_GD_SBQF_DQ_P1_L1_001_DI3833" },
+		{ name: "有功减闭锁", tag: "SubLock", value: "SBQXLDQ.NX_GD_SBQF_DQ_P1_L1_001_DI3834" },
+		{ name: "状态", tag: "Status", value: "SBQFCJSFW.NX_GD_SBQF_XX_XX_XXX_XXX_CI0263" },
+		{ name: "装机容量", tag: "InstalledCapacity", value: "49.5" },
+	],
+	'N5_BT': [
+		{ name: "有功设定限值", tag: "PowerSet", value: "SBQNWDQ.NX_GD_SBQF_DQ_P1_L1_001_AI0818", calc: "1" },
+		{ name: "AGC可调上限", tag: "AgcUp", value: "SBQNWDQ.NX_GD_SBQF_DQ_P1_L1_001_AI0819", calc: "1" },
+		{ name: "AGC可调下限", tag: "AgcLower", value: "SBQNWDQ.NX_GD_SBQF_DQ_P1_L1_001_AI0820", calc: "1" },
+		{ name: "实发有功", tag: "ActualPower", value: "SBQNWDQ.NX_GD_SBQF_DQ_P1_L1_001_AI0817", calc: "1" },
+		{ name: "理论功率", tag: "TheoryPower", value: "SBQFCJSFW.NX_GD_SBQF_FJ_P2_XXX_XXX_CI0192,SBQFCJSFW.NX_GD_SBQF_FJ_P3_XXX_XXX_CI0192,SBQFCJSFW.NX_GD_SBQF_FJ_P4_XXX_XXX_CI0192", calc: "0.001" },
+		{ name: "预测功率", tag: "ForecastPower", value: "SBQFGL.NX_GD_SBQF_YC_P1_L1_001_CDQ001", calc: "1" },
+		{ name: "AGC投入", tag: "AgcIn", value: "SBQNWDQ.NX_GD_SBQF_DQ_P1_L1_001_DI3831" },
+		{ name: "AGC远方", tag: "AgcFar", value: "SBQNWDQ.NX_GD_SBQF_DQ_P1_L1_001_DI3832" },
+		{ name: "有功增闭锁", tag: "SumLock", value: "SBQNWDQ.NX_GD_SBQF_DQ_P1_L1_001_DI3833" },
+		{ name: "有功减闭锁", tag: "SubLock", value: "SBQNWDQ.NX_GD_SBQF_DQ_P1_L1_001_DI3834" },
+		{ name: "状态", tag: "Status", value: "SBQFCJSFW.NX_GD_SBQF_XX_XX_XXX_XXX_CI026X" },
+		{ name: "装机容量", tag: "InstalledCapacity", value: "149" },
+	],
+	'XS_BT': [
+		{ name: "有功设定限值", tag: "PowerSet", value: "XSDQ.NX_GD_XSF_DQ_P1_L1_001_AI0411", calc: "1" },
+		{ name: "AGC可调上限", tag: "AgcUp", value: "XSDQ.NX_GD_XSF_DQ_P1_L1_001_AI0412", calc: "1" },
+		{ name: "AGC可调下限", tag: "AgcLower", value: "XSDQ.NX_GD_XSF_DQ_P1_L1_001_AI0413", calc: "1" },
+		{ name: "实发有功", tag: "ActualPower", value: "XSDQ.NX_GD_XSF_DQ_P1_L1_001_AI0415", calc: "1" },
+		{ name: "理论功率", tag: "TheoryPower", value: "XSFCJSFW.NX_GD_XSF_XX_XX_XXX_XXX_CI0193", calc: "0.001" },
+		{ name: "预测功率", tag: "ForecastPower", value: "XSFGL.NX_G D_XSF_YC_P1_L1_001_CDQ001", calc: "1" },
+		{ name: "AGC投入", tag: "AgcIn", value: "XSDQ.NX_GD_XSF_DQ_P1_L1_001_DI1749" },
+		{ name: "AGC远方", tag: "AgcFar", value: "XSDQ.NX_GD_XSF_DQ_P1_L1_001_DI1750" },
+		{ name: "有功增闭锁", tag: "SumLock", value: "XSDQ.NX_GD_XSF_DQ_P1_L1_001_DI1753" },
+		{ name: "有功减闭锁", tag: "SubLock", value: "XSDQ.NX_GD_XSF_DQ_P1_L1_001_DI1754" },
+		{ name: "状态", tag: "Status", value: "XSFCJSFW.NX_GD_XSF_XX_XX_XXX_XXX_CI0263" },
+		{ name: "装机容量", tag: "InstalledCapacity", value: "99" },
+	],
+	'SL_BT': [
+		{ name: "有功设定限值", tag: "PowerSet", value: "SLAGC.NX_GD_QSF_DQ_P1_L1_001_AI0052", calc: "1" },
+		{ name: "AGC可调上限", tag: "AgcUp", value: "SLAGC.NX_GD_QSF_DQ_P1_L1_001_AI0053", calc: "1" },
+		{ name: "AGC可调下限", tag: "AgcLower", value: "SLAGC.NX_GD_QSF_DQ_P1_L1_001_AI0054", calc: "1" },
+		{ name: "实发有功", tag: "ActualPower", value: "SLDQ.NX_GD_QSF_DQ_P1_L1_001_AI0013", calc: "1" },
+		{ name: "理论功率", tag: "TheoryPower", value: "QSFCJSFW.NX_GD_QSF_FJ_P3_XXX_XXX_CI0192", calc: "0.001" },
+		{ name: "预测功率", tag: "ForecastPower", value: "SLFGL.NX_GD_QSF_YC_P1_L1_001_LCDQ01", calc: "1" },
+		{ name: "AGC投入", tag: "AgcIn", value: "SLAGC.NX_GD_QSF_DQ_P1_L1_001_DI0142" },
+		{ name: "AGC远方", tag: "AgcFar", value: "SLAGC.NX_GD_QSF_DQ_P1_L1_001_DI0143" },
+		{ name: "有功增闭锁", tag: "SumLock", value: "SLAGC.NX_GD_QSF_DQ_P1_L1_001_DI0162" },
+		{ name: "有功减闭锁", tag: "SubLock", value: "SLAGC.NX_GD_QSF_DQ_P1_L1_001_DI0163" },
+		{ name: "状态", tag: "Status", value: "SLAGC.NX_GD_QSF_DQ_P1_L1_001_DI0165" },
+		{ name: "装机容量", tag: "InstalledCapacity", value: "49.5" },
+	],
+	"DWKGDCJSFW.NX_GD_DWKG_XX_XX_XXX_XXX_CI0263": [
+		{ name: "有功设定限值", tag: "PowerSet", value: "DWKDQ.NX_GD_DWKG_DQ_P1_L1_001_AI0837" },
+		{ name: "AGC可调上限", tag: "AgcUp", value: "DWKDQ.NX_GD_DWKG_DQ_P1_L1_001_AI0838" },
+		{ name: "AGC可调下限", tag: "AgcLower", value: "DWKDQ.NX_GD_DWKG_DQ_P1_L1_001_AI0839" },
+		{ name: "实发有功", tag: "ActualPower", value: "DWKDQ.NX_GD_DWKG_DQ_P1_L1_001_AI0842", calc: "0.01" },
+		{ name: "理论功率", tag: "TheoryPower", value: "DWKGDCJSFW.NX_GD_DWKG_XX_XX_XXX_XXX_CI0192" },
+		{ name: "预测功率", tag: "ForecastPower", value: "DWKGGL.NX_GD_DWKG_YC_P1_L1_001_CDQ001" },
+		{ name: "AGC投入", tag: "AgcIn", value: "DWKDQ.NX_GD_DWKG_DQ_P1_L1_001_DI0761" },
+		{ name: "AGC远方", tag: "AgcFar", value: "DWKDQ.NX_GD_DWKG_DQ_P1_L1_001_DI0767" },
+		{ name: "有功增闭锁", tag: "SumLock", value: "" },
+		{ name: "有功减闭锁", tag: "SubLock", value: "" },
+	],
+	'PLGDCJSFW.NX_GD_PLG_XX_XX_XXX_XXX_CI0263': [
+		{ name: "有功设定限值", tag: "PowerSet", value: "PLSJ1.NX_GD_PLG_DQ_P1_L1_001_AI0838" },
+		{ name: "AGC可调上限", tag: "AgcUp", value: "PLSJ1.NX_GD_PLG_DQ_P1_L1_001_AI0836" },
+		{ name: "AGC可调下限", tag: "AgcLower", value: "PLSJ1.NX_GD_PLG_DQ_P1_L1_001_AI0837" },
+		{ name: "实发有功", tag: "ActualPower", value: "PLSJ1.NX_GD_PLG_DQ_P1_L1_001_AI0835" },
+		{ name: "理论功率", tag: "TheoryPower", value: "PLGDCJSFW.NX_GD_PLG_XX_XX_XXX_XXX_CI0192" },
+		{ name: "预测功率", tag: "ForecastPower", value: "PLGGL.NX_GD_PLG_YC_P1_L1_001_CDQ0001" },
+		{ name: "AGC投入", tag: "AgcIn", value: "" },
+		{ name: "AGC远方", tag: "AgcFar", value: "" },
+		{ name: "有功增闭锁", tag: "SumLock", value: "" },
+		{ name: "有功减闭锁", tag: "SubLock", value: "" },
+	],
+	'XHGDCJSFW.NX_GD_XHG_XX_XX_XXX_XXX_CI0263': [
+		{ name: "有功设定限值", tag: "PowerSet", value: "XHDQ.NX_GD_XHG_DQ_P1_L1_001_AI0204" },
+		{ name: "AGC可调上限", tag: "AgcUp", value: "XHDQ.NX_GD_XHG_DQ_P1_L1_001_AI0194" },
+		{ name: "AGC可调下限", tag: "AgcLower", value: "XHDQ.NX_GD_XHG_DQ_P1_L1_001_AI0195" },
+		{ name: "实发有功", tag: "ActualPower", value: "XHDQ.NX_GD_XHG_DQ_P1_L1_001_AI0193" },
+		{ name: "理论功率", tag: "TheoryPower", value: "XHGDCJSFW.NX_GD_XHG_XX_XX_XXX_XXX_CI0192" },
+		{ name: "预测功率", tag: "ForecastPower", value: "XHGGL.NX_GD_XHG_YC_P1_L1_001_CDQ001" },
+		{ name: "AGC投入", tag: "AgcIn", value: "XHDQ.NX_GD_XHG_DQ_P1_L1_001_DI0099" },
+		{ name: "AGC远方", tag: "AgcFar", value: "XHDQ.NX_GD_XHG_DQ_P1_L1_001_DI0100" },
+		{ name: "有功增闭锁", tag: "SumLock", value: "" },
+		{ name: "有功减闭锁", tag: "SubLock", value: "" },
+	],
 	// constructor(){
 	// 	this.getDatas = this.getDatas.bind(this);
 	// 	this.getTags=this.getTags.bind(this);

src/utils/baseTool.js

@@ -0,0 +1,268 @@
+
+let loadingStatus = null;
+
+import { ElMessage } from 'element-plus';
+import { ElLoading } from 'element-plus';
+
+export default {
+  /**
+   * 页面顶部出现消息提示
+   * @param {Object} options 传入一个对象为配置项，其中：
+   * @param {Boolean} showClose 是否显示可手动关闭的 x 于提示框右侧，默认 false
+   * @param {Boolean} center 消息提示内容是否居中，默认 true
+   * @param {String} msg 消息提示的内容
+   * @param {String} type 消息提示的类型，可选值为 ['success(成功)','warning(警告)','error(错误)',或者直接传入空字符串]，默认 error
+   */
+  showMsg(options) {
+    
+    ElMessage({
+      showClose: (options.showClose == true || options.showClose == false) ? options.showClose : false,
+      center: (options.center == true || options.center == false) ? options.center : true,
+      message: options.msg,
+      type: (options.type || options.type === '') ? options.type : 'error'
+    });
+  },
+
+  /**
+   * 显示防穿透点击 loading 蒙版
+   * @param {Objectr} opt 传入一个对象为配置项，其中：
+   * @param {String} target 此蒙版需要绑定的 DOM 标签 ID 或者 CLASS 或者 TAGNAME，默认绑在 body 上
+   * @param {Boolean} body 是否插入蒙版至 boyd 上，默认 true
+   * @param {Boolean} fullscreen 蒙版是否全屏蒙住整个 html 页面，默认 true
+   * @param {Boolean} lock 蒙版出现时，是否锁定屏幕滚动，默认 false
+   * @param {String} text 蒙版上显示的提示文本
+   * @param {String} background 蒙版的背景颜色，写死 50% 透明度的纯黑色
+   */
+  showLoading(opt) {
+    let options = opt || {};
+    loadingStatus = ElLoading.service({
+      target: options.target || 'body',
+      body: (options.body == true || options.body == false) ? options.body : false,
+      fullscreen: (options.fullscreen == true || options.fullscreen == false) ? options.fullscreen : true,
+      lock: (options.lock == true || options.lock == false) ? options.lock : false,
+      text: options.text || '请稍等...',
+      background: 'rgba(0,0,0,.5)',
+    });
+  },
+
+  /**
+   * 获取标签上的自定义属性
+   * @param {any} node 传入 字符串 或 标准DOM对象 或 jQuery DOM对象 ，函数自动判断传入的类型并返回其 dataset 属性。
+   */
+  getCurrentData(node) {
+    // 如果传入的是 jQuery 对象
+    if (window.jQuery && node instanceof jQuery) {
+      return node[0].dataset;
+    } else {
+      // 判断传入的是否是标准 DOM 对象
+      let isDom = (typeof node === 'object') ?
+        function (obj) {
+          return obj instanceof HTMLElement;
+        } :
+        function (obj) {
+          return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';
+        };
+
+      // 如果是标准 DOM 对象，输出 dataset
+      if (isDom(node)) {
+        return node.dataset;
+      } else {
+        // 如果是不是，则表示传入的是字符串，根据字符串取 DOM 后输出 dataset
+        let dom = document.querySelector(node);
+        return dom.dataset;
+      }
+    }
+  },
+
+  /**
+   * 关闭loading
+   */
+  closeLoading() {
+    loadingStatus.close();
+  },
+
+  /**
+   * 深拷贝 json 数组
+   * @param {Array} jsonArray 传入 Json 数组，返回一个指向新指针拷贝份数据
+   */
+  deepCopy(jsonArray) {
+    return JSON.parse(JSON.stringify(jsonArray));
+  },
+
+  /**
+   * 根据后端返回的 ID 遍历树形结构包装组件编辑用数据函数
+   * @param {String} key 需要找到的 ID
+   * @param {Array} treeData 树形 Array
+   */
+  getTreeDeepArr(key, treeData) {
+
+    let arr = []; // 在递归时操作的数组
+    let returnArr = []; // 存放结果的数组
+    let depth = 0; // 定义全局层级
+
+    // 定义递归函数
+    function childrenEach(childrenData, depthN) {
+
+      for (var j = 0; j < childrenData.length; j++) {
+
+        depth = depthN; // 将执行的层级赋值 到 全局层级
+        arr[depthN] = (childrenData[j].id);
+
+        if (childrenData[j].id == key) {
+
+          returnArr = arr.slice(0, depthN + 1); //将目前匹配的数组，截断并保存到结果数组
+          break;
+
+        } else {
+
+          if (childrenData[j].children) {
+
+            depth++;
+            childrenEach(childrenData[j].children, depth);
+
+          }
+
+        }
+
+      }
+
+      return returnArr;
+
+    }
+
+    return childrenEach(treeData, depth);
+
+  },
+
+  /**
+   * 获取数据的类型
+   * @param {any} options 传入一个数据，返回其类型 (object, array, string, number等)
+   */
+  getType(options) {
+    return Object.prototype.toString.call(options).slice(8, Object.prototype.toString.call(options).length - 1).toLowerCase();
+  },
+
+  /**
+   * 控制页面滚动到指定位置
+   * @param {Object} options 传入一个配置项，其中：
+   * @param {String} el 需要滚动的 DOM 元素选择器，可以为 CLASS 或 ID
+   * @param {Number} scrollTop 需要滚动到顶部的位置，数值越低滚动的越靠近顶部，默认 0
+   * @param {Number} scrollLeft 需要滚动到顶部的位置，数值越低滚动的越靠近顶部，默认 0
+   * @param {Number} speed 滚动到指定位置需要的时间 (动画时间)，默认 200
+   * @param {Function} success 滚动执行完毕后的回调函数
+   */
+  scrollTo(options) {
+    if (!options || !options.el) {
+      this.showMsg({
+        msg: 'scrollTo() 方法需要传入 el 属性'
+      });
+      return;
+    }
+    if ($(options.el)[0] && ($(options.el)[0].scrollHeight > (window.innerHeight || document.documentElement.clientHeight))) {
+      $(options.el).animate({
+        scrollTop: options.scrollTop || 0,
+        scrollLeft: options.scrollLeft || 0,
+      }, options.speed || 200, () => {
+        options.success && options.success();
+      });
+    } else {
+      options.success && options.success();
+    }
+  },
+
+  /**
+   * JS 触发全屏功能
+   */
+  requestFullscreen() {
+    //全屏
+    const docElm = document.documentElement;
+    //W3C
+    if (docElm.requestFullscreen) {
+      docElm.requestFullscreen();
+    }
+
+    //FireFox
+    else if (docElm.mozRequestFullScreen) {
+      docElm.mozRequestFullScreen();
+    }
+
+    //Chrome等
+    else if (docElm.webkitRequestFullScreen) {
+      docElm.webkitRequestFullScreen();
+    }
+
+    //IE11
+    else if (docElm.msRequestFullscreen) {
+      docElm.msRequestFullscreen();
+    }
+  },
+
+  /**
+   * 颜色进制转换  16 <--> 10 互转
+   * @param {String} colorStr 传入一个颜色字符串， 16进制 或者 10进制 ，返回转换后的结果，例：传入 #1890ff ，返回 rgb(24, 144, 255)，反之亦然
+   */
+  replaceColor(colorStr) {
+    if (!colorStr) return '';
+
+    let colorString = colorStr.replace(/#|rgb|\(|\)|\|;|\s+/g, "");
+
+    if (colorString.indexOf(",") === -1) {
+      let color10 = [];
+      for (let i = 0; i < colorString.length; i++) {
+        if (!((i + 1) % 2)) {
+          color10.push(parseInt((colorString[i - 1] + colorString[i]), 16));
+        }
+      }
+      return "rgb(" + color10.toString() + ")";
+    } else {
+      let colorArray = colorString.split(',');
+      let color16 = '';
+      colorArray.forEach(ele => {
+        color16 += (parseInt(ele).toString(16));
+      });
+      return "#" + color16;
+    }
+  },
+
+  /**
+   * 生成指定范围内的随机数
+   * @param {Int} minNum 范围下限
+   * @param {Int} maxNum 范围上限
+   * @returns 
+   */
+  randomNum(minNum, maxNum) {
+    switch (arguments.length) {
+      case 1:
+        return parseInt(Math.random() * minNum + 1, 10);
+      case 2:
+        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
+      default:
+        return 0;
+    }
+  },
+
+  // 正则表达式
+  regs: {
+    // 是否为手机号
+    isPhone: /^1(3|4|5|6|7|8|9)\d{9}$/,
+    // 是否为合法 15 或 18 位身份证号
+    isIdentityCard: /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,
+    // 是否是邮箱
+    isMail: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
+    // 是否是数字
+    isNumber: /^(-?\d+)(\.\d+)?$/
+  },
+
+  // elementUI 自定义表单效验规则
+  elCkeck: {
+    isNumber(rule, value, callback) {
+      if (value === '') {
+        callback(new Error('该值不可为空'));
+      } else if (!/^(-?\d+)(\.\d+)?$/.test(value)) {
+        callback(new Error('输入有误，仅支持输入数字'));
+      } else {
+        callback();
+      }
+    }
+  }
+}