Merge branch 'wsy' of http://61.161.152.110:10101/r/electronic-map into sl

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

@@ -1,285 +1,286 @@
-<template>
-  <div class="wind-site-warning">
-    <div class="search pd-16 pd-b-8">
-      <el-row>
-        <div class="query">
-          <input class="search-input" name="query" v-model="query" />
-        </div>
-        <button class="btn search" @click="search">搜索</button>
-        <div class="empty"></div>
-        <button class="btn empty-btn" @click="reset">重置</button>
-      </el-row>
-      <el-row class="options">
-        <el-col class="option-item" :span="8" v-for="(option, index) in options" :key="option" @click="onOptionClick(option, index)" :class="{ active: option.isActive }">
-          <div class="count">{{ option.count }}</div>
-          <div class="text">{{ option.text }}</div>
-        </el-col>
-      </el-row>
-    </div>
-    <div class="warning-list">
-      <Table :data="warning" :canScroll="true" :height="'calc(100vh - 560px)'"/>
-    </div>
-  </div>
-</template>
-
-<script>
-import Table from "../../../../components/coms/table/table.vue";
-export default {
-  components: {
-    Table,
-  },
-  data() {
-    return {
-      query: "",
-      options: [],
-      ackupData: {},
-      warning: {
-        column: [
-          // {
-          //   name: "报警编号",
-          //   field: "Code",
-          //   is_num: true, // 是否为数字
-          // },
-          {
-            name: "PLC变量名",
-            field: "name",
-          },
-          {
-            name: "报警信息",
-            field: "value",
-          },
-          {
-            name: "报警状态",
-            field: "data1",
-            template: function(data) {
-              if (data === 1) return "<div class='error-state'></div>";
-              else return "正常";
-            },
-          },
-        ],
-        data: [],
-      },
-      activeArray: [],
-      isSearch: false,
-    };
-  },
-
-  props: {
-    data: {
-      type: Object,
-      default: () => {},
-    },
-  },
-
-  mounted() {
-    this.backupData = this.BASE.deepCopy(this.data);
-    this.riseData(this.data);
-  },
-
-  methods: {
-    onOptionClick(option, index) {
-      option.isActive = !option.isActive;
-      this.activeArray[index] = !this.activeArray[index];
-
-      let warningData = [];
-
-      this.activeArray.forEach((bool, index) => {
-        if (bool) {
-          this.options[index].vos.forEach((ele) => {
-            warningData.push(ele);
-          });
-        }
-      });
-
-      this.warning.data = warningData;
-      this.isSearch = false;
-      this.query = "";
-    },
-
-    // 格式化数据
-    riseData(data) {
-      let options = [];
-      let warningData = [];
-      let index = 0;
-
-      for (let key in data) {
-        data.index = index;
-
-        if (this.activeArray.length < index + 1) {
-          this.activeArray.push(!index ? true : false);
-        }
-
-        options.push({
-          id: data[key].id,
-          text: data[key].name,
-          vos: data[key].vos,
-          count: data[key].vos.length,
-          isActive: this.activeArray[index],
-        });
-
-        if (this.activeArray[index]) {
-          data[key].vos.forEach((ele) => {
-            warningData.push(ele);
-          });
-        }
-
-        index++;
-      }
-
-      this.options = options;
-      this.warning.data = warningData;
-
-      if (this.isSearch) {
-        this.search();
-      }
-    },
-
-    search() {
-      // 压器类总
-      this.isSearch = true;
-      if (this.query) {
-        let warningData = [];
-        this.BASE.deepCopy(this.warning.data).forEach((ele) => {
-          if (ele.name.indexOf(this.query) !== -1) {
-            warningData.push(ele);
-          }
-        });
-        this.warning.data = warningData;
-      } else {
-        this.riseData(this.data);
-      }
-    },
-
-    reset() {
-      for (let i = 0; i < this.activeArray.length; i++) {
-        this.activeArray[i] = false;
-      }
-
-      this.isSearch = false;
-      this.query = "";
-      let sourceMap = this.BASE.deepCopy(this.backupData);
-      this.riseData(sourceMap, true);
-    },
-  },
-
-  watch: {
-    data(res) {
-      this.backupData = this.BASE.deepCopy(res);
-      this.riseData(res);
-    },
-  },
-};
-</script>
-
-<style lang="less">
-.wind-site-warning {
-  border: 1px solid @darkgray;
-
-  .search {
-    .query {
-      height: 100%;
-      flex: 0 0 200px;
-      margin-right: 8px;
-
-      .search-input {
-        background: transparent;
-        border: 1px solid @darkgray;
-        padding: 0.741vh;
-        color: @gray;
-        outline: unset;
-        border-radius: 0%;
-        margin-right: 0.741vh;
-        height: 28px;
-        line-height: 28px;
-      }
-    }
-
-    button {
-      height: 100%;
-      flex: 0 0 auto;
-      background: transparent;
-      border: 1px solid @darkgray;
-      // padding: 0.741vh 1.481vh;
-      color: @gray;
-      font-size: 14px;
-      cursor: pointer;
-      height: 28px;
-      line-height: 28px;
-    }
-
-    .empty {
-      flex: auto;
-    }
-
-    .options {
-      margin-top: 8px;
-
-      .option-item {
-        display: flex;
-        color: @gray;
-        cursor: pointer;
-        font-size: 12px;
-        margin-bottom: 2px;
-
-        .count {
-          flex: 0 0 3.704vh;
-          text-align: center;
-          border: 1px solid @darkgray;
-          margin-right: 0.37vh;
-          height: 28px;
-          line-height: 28px;
-        }
-
-        .text {
-          flex: 1 0 auto;
-          border: 1px solid @darkgray;
-          height: 28px;
-          line-height: 28px;
-          padding: 0 8px;
-        }
-
-        & + .option-item {
-          padding-left: 0.741vh;
-        }
-
-        &:nth-child(3n + 1) {
-          padding-left: 0px;
-        }
-
-        &.purple {
-          .text,
-          .count {
-            border-color: @purple;
-            color: @purple;
-          }
-        }
-
-        &.active,
-        &:hover {
-          .text,
-          .count {
-            border-color: @green;
-            color: @green;
-          }
-        }
-      }
-    }
-  }
-
-  .warning-list {
-    .error-state {
-      width: 0.741vh;
-      height: 0.741vh;
-      border-radius: 50%;
-      background-color: @red;
-      margin: auto;
-    }
-
-    thead tr th {
-      padding: 0;
-      font-size: 12px;
-    }
-
-  }
-}
-</style>
+<template>
+  <div class="wind-site-warning">
+    <div class="search pd-16 pd-b-8">
+      <el-row>
+        <div class="query">
+          <input class="search-input" name="query" v-model="query" />
+        </div>
+        <button class="btn search" @click="search">搜索</button>
+        <div class="empty"></div>
+        <button class="btn empty-btn" @click="reset">重置</button>
+      </el-row>
+      <el-row class="options">
+        <el-col class="option-item" :span="8" v-for="(option, index) in options" :key="option" @click="onOptionClick(option, index)" :class="{ active: option.isActive }">
+          <div class="count">{{ option.count }}</div>
+          <div class="text">{{ option.text }}</div>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="warning-list">
+      <Table :data="warning" :canScroll="true" :height="'calc(100vh - 560px)'"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import Table from "../../../../components/coms/table/table.vue";
+export default {
+  components: {
+    Table,
+  },
+  data() {
+    return {
+      query: "",
+      options: [],
+      ackupData: {},
+      warning: {
+        column: [
+          // {
+          //   name: "报警编号",
+          //   field: "Code",
+          //   is_num: true, // 是否为数字
+          // },
+          {
+            name: "PLC变量名",
+            field: "name",
+          },
+          {
+            name: "报警信息",
+            field: "value",
+          },
+          {
+            name: "报警状态",
+            field: "data1",
+            template: function(data) {
+              if (data === 1) return "<div class='error-state'></div>";
+              else return "正常";
+            },
+          },
+        ],
+        data: [],
+      },
+      activeArray: [],
+      isSearch: false,
+    };
+  },
+
+  props: {
+    data: {
+      type: Object,
+      default: () => {},
+    },
+  },
+
+  mounted() {
+    this.backupData = this.BASE.deepCopy(this.data);
+    this.riseData(this.data);
+  },
+
+  methods: {
+    onOptionClick(option, index) {
+      option.isActive = !option.isActive;
+      this.activeArray[index] = !this.activeArray[index];
+
+      let warningData = [];
+
+      this.activeArray.forEach((bool, index) => {
+        if (bool) {
+          this.options[index].vos.forEach((ele) => {
+            warningData.push(ele);
+          });
+        }
+      });
+
+      this.warning.data = warningData;
+      this.isSearch = false;
+      this.query = "";
+    },
+
+    // 格式化数据
+    riseData(data) {
+      let options = [];
+      let warningData = [];
+      let index = 0;
+
+      for (let key in data) {
+        data.index = index;
+
+        if (this.activeArray.length < index + 1) {
+          this.activeArray.push(!index ? true : false);
+        }
+
+        options.push({
+          id: data[key].id,
+          text: data[key].name,
+          vos: data[key].vos,
+          count: data[key].vos.length,
+          isActive: this.activeArray[index],
+        });
+
+        if (this.activeArray[index]) {
+          data[key].vos.forEach((ele) => {
+            warningData.push(ele);
+          });
+        }
+
+        index++;
+      }
+
+      this.options = options;
+      this.warning.data = warningData;
+
+      if (this.isSearch) {
+        this.search();
+      }
+    },
+
+    search() {
+      // 压器类总
+      this.isSearch = true;
+      if (this.query) {
+        let warningData = [];
+        this.BASE.deepCopy(this.warning.data).forEach((ele) => {
+          if (ele.name.indexOf(this.query) !== -1) {
+            warningData.push(ele);
+          }
+        });
+        this.warning.data = warningData;
+      } else {
+        this.riseData(this.data);
+      }
+    },
+
+    reset() {
+      for (let i = 0; i < this.activeArray.length; i++) {
+        this.activeArray[i] = false;
+      }
+
+      this.isSearch = false;
+      this.query = "";
+      let sourceMap = this.BASE.deepCopy(this.backupData);
+      this.riseData(sourceMap, true);
+    },
+  },
+
+  watch: {
+    data(res) {
+      this.backupData = this.BASE.deepCopy(res);
+      this.riseData(res);
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.wind-site-warning {
+  border: 1px solid @darkgray;
+
+  .search {
+    .query {
+      height: 100%;
+      flex: 0 0 200px;
+      margin-right: 8px;
+
+      .search-input {
+        background: transparent;
+        border: 1px solid @darkgray;
+        padding: 0.741vh;
+        color: @gray;
+        outline: unset;
+        border-radius: 0%;
+        margin-right: 0.741vh;
+        height: 28px;
+        line-height: 28px;
+      }
+    }
+
+    button {
+      height: 100%;
+      flex: 0 0 auto;
+      background: transparent;
+      border: 1px solid @darkgray;
+      // padding: 0.741vh 1.481vh;
+      color: @gray;
+      font-size: 14px;
+      cursor: pointer;
+      height: 28px;
+      line-height: 28px;
+    }
+
+    .empty {
+      flex: auto;
+    }
+
+    .options {
+      margin-top: 8px;
+
+      .option-item {
+        display: flex;
+        color: @gray;
+        cursor: pointer;
+        font-size: 12px;
+        margin-bottom: 2px;
+
+        .count {
+          flex: 0 0 3.704vh;
+          text-align: center;
+          border: 1px solid @darkgray;
+          margin-right: 0.37vh;
+          height: 28px;
+          line-height: 28px;
+        }
+
+        .text {
+          flex: 1 0 auto;
+          border: 1px solid @darkgray;
+          height: 28px;
+          line-height: 28px;
+          padding: 0 8px;
+        }
+
+        & + .option-item {
+          padding-left: 0.741vh;
+        }
+
+        &:nth-child(3n + 1) {
+          padding-left: 0px;
+        }
+
+        &.purple {
+          .text,
+          .count {
+            border-color: @purple;
+            color: @purple;
+          }
+        }
+
+        &.active,
+        &:hover {
+          .text,
+          .count {
+            border-color: @green;
+            color: @green;
+          }
+        }
+      }
+    }
+  }
+
+  .warning-list {
+    height: 61.5vh;
+    .error-state {
+      width: 0.741vh;
+      height: 0.741vh;
+      border-radius: 50%;
+      background-color: @red;
+      margin: auto;
+    }
+
+    thead tr th {
+      padding: 0;
+      font-size: 12px;
+    }
+
+  }
+}
+</style>