2023-03-13 update

1. 同步neic 3-13版本代码

README.md

@@ -17,3 +17,4 @@ npm run build
 
 ### Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).
+采用node14版本

package.json

@@ -1,51 +1,51 @@
-{
-  "name": "project-neic",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "electron:build": "vue-cli-service electron:build",
-    "electron:serve": "vue-cli-service electron:serve",
-    "postinstall": "electron-builder install-app-deps",
-    "postuninstall": "electron-builder install-app-deps"
-  },
-  "main": "background.js",
-  "dependencies": {
-    "axios": "^0.21.1",
-    "core-js": "^3.6.5",
-    "dayjs": "^1.10.6",
-    "echarts": "^5.1.2",
-    "element-plus": "^1.1.0-beta.4",
-    "html2canvas": "^1.4.1",
-    "jquery": "^3.6.0",
-    "json-bigint": "^1.0.0",
-    "register-service-worker": "^1.7.1",
-    "stompjs": "^2.3.3",
-    "vue": "^3.0.11",
-    "vue-grid-layout": "^3.0.0-beta1",
-    "vue-router": "^4.0.0-0",
-    "vuex": "^4.0.0-0",
-    "xlsx": "^0.17.1"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-pwa": "~4.5.0",
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-plugin-vuex": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.0.0",
-    "electron": "^13.0.0",
-    "electron-devtools-installer": "^3.1.0",
-    "less": "^3.0.4",
-    "less-loader": "^5.0.0",
-    "sass": "^1.52.3",
-    "sass-loader": "^8.0.2",
-    "vue-cli-plugin-electron-builder": "~2.1.1"
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ]
-}
+{
+  "name": "project-neic",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "electron:build": "vue-cli-service electron:build",
+    "electron:serve": "vue-cli-service electron:serve",
+    "postinstall": "electron-builder install-app-deps",
+    "postuninstall": "electron-builder install-app-deps"
+  },
+  "main": "background.js",
+  "dependencies": {
+    "axios": "^0.21.1",
+    "core-js": "^3.6.5",
+    "dayjs": "^1.10.6",
+    "echarts": "^5.1.2",
+    "element-plus": "^1.1.0-beta.4",
+    "html2canvas": "^1.4.1",
+    "jquery": "^3.6.0",
+    "json-bigint": "^1.0.0",
+    "register-service-worker": "^1.7.1",
+    "stompjs": "^2.3.3",
+    "vue": "^3.0.11",
+    "vue-grid-layout": "^3.0.0-beta1",
+    "vue-router": "^4.0.0-0",
+    "vuex": "^4.0.0-0",
+    "xlsx": "^0.17.1"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-pwa": "~4.5.0",
+    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-plugin-vuex": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/compiler-sfc": "^3.0.0",
+    "electron": "^13.0.0",
+    "electron-devtools-installer": "^3.1.0",
+    "less": "^3.0.4",
+    "less-loader": "^5.0.0",
+    "sass": "^1.52.3",
+    "sass-loader": "^8.0.2",
+    "vue-cli-plugin-electron-builder": "~2.1.1"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

public/img/icons/safari-pinned-tab.svg

@@ -1,3 +1,3 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.00251 14.9297L0 1.07422H6.14651L8.00251 4.27503L9.84583 1.07422H16L8.00251 14.9297Z" fill="black"/>
-</svg>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.00251 14.9297L0 1.07422H6.14651L8.00251 4.27503L9.84583 1.07422H16L8.00251 14.9297Z" fill="black"/>
+</svg>

public/robots.txt

@@ -1,2 +1,2 @@
-User-agent: *
-Disallow:
+User-agent: *
+Disallow:

src/App.vue

@@ -1,454 +1,462 @@
-<template class="app">
-  <div :class="$store.state.showWarningMask ? 'warningMask' : ''"></div>
-  <div style="background-color: #000000" ref="imageTofile">
-    <div v-if="lockMaskDisplay" class="lockMask"></div>
-    <!-- <div class="warningMask"></div> -->
-    <TitleBar class="titleBar" />
-    <div class="left">
-      <Menu
-        :lockMaskDisplay="lockMaskDisplay"
-        :temperatureNum="temperatureNum"
-        @handleChange="handleChange"
-        @handleSearch="handleSearch"
-      />
-    </div>
-    <div class="right">
-      <el-col>
-        <el-row>
-          <el-col>
-            <ModeControl
-              ref="modeControl"
-              :current="current"
-              @clicks="handleClick"
-            ></ModeControl>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col>
-            <FocusArea />
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col>
-            <WarningArea></WarningArea>
-          </el-col>
-        </el-row>
-      </el-col>
-    </div>
-    <div class="Dialog" v-show="state">
-      <div class="D-" @click="none">-</div>
-    </div>
-    <StatusBar class="statusBar" @getData="getData" />
-    <router-view />
-    <AllMatrices v-model="matricesDisplay" />
-    <SYZDetails v-model="$store.state.syzDialogShow"></SYZDetails>
-    <AGCDetails v-model="agcDisplay"></AGCDetails>
-    <TemperatureMatrix v-model="temperatureDisplay" />
-    <Fault v-model="faultDisplay" />
-    <Warning v-model="warningDisplay" />
-    <Status v-model="statusDisplay" />
-    <Action v-model="actionDisplay" />
-    <Calendar v-model="calendarDisplay" />
-    <Record v-model="recordDisplay" />
-    <State v-model="stateDisplay" />
-  </div>
-</template>
-<script>
-import TitleBar from "views/TitleBar.vue";
-import StatusBar from "views/StatusBar.vue";
-import Menu from "views/Menu.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";
-import boxSelect from "components/boxSelect.vue";
-import AGCDetails from "components/focus/agcDetails.vue";
-import SYZDetails from "components/svgStation.vue";
-import AllMatrices from "components/allMatrices.vue";
-import TemperatureMatrix from "components/temperatureMatrix.vue";
-import Fault from "components/search/fault.vue";
-import Warning from "components/search/warning.vue";
-import Status from "components/search/status.vue";
-import Action from "components/search/action.vue";
-import Calendar from "components/search/calendar.vue";
-import Record from "components/search/record.vue";
-import State from "components/search/state.vue";
-
-import html2canvas from "html2canvas";
-import { debounce } from "lodash";
-export default {
-  data() {
-    return {
-      state: false,
-      agcDisplay: false, //AGC功能
-      matricesDisplay: false, //全部矩阵
-      temperatureDisplay: false, //温度矩阵
-      faultDisplay: false, //查询-报警/故障查询
-      warningDisplay: false, //查询-预警查询
-      statusDisplay: false, //查询-状态时间查询
-      actionDisplay: false, //查询-动作查询
-      recordDisplay: false, //查询-推荐记录
-      stateDisplay: false, //查询-状态变化查询
-      calendarDisplay: false, //查询-日历查询
-      lockMaskDisplay: false, //锁屏
-      temperatureNum: 0, //温度矩阵故障数
-    };
-  },
-  components: {
-    TitleBar,
-    StatusBar,
-    Menu,
-    ModeControl,
-    FocusArea,
-    WarningArea,
-    boxSelect,
-    AGCDetails,
-    SYZDetails,
-    AllMatrices,
-    TemperatureMatrix,
-    Fault,
-    Warning,
-    Status,
-    Action,
-    Calendar,
-    Record,
-    State,
-  },
-  created: function () {
-    this.getStation();
-    this.initData();
-  },
-  methods: {
-    getData(val) {
-      this.state = val;
-    },
-    none() {
-      this.state = false;
-    },
-
-    initData: function () {
-      let mb = MessageBridge.getInstance();
-      let temperature = [
-        { key: "/topic/temperature-count", action: this.debounceTemperatureMessage },
-      ];
-      mb.register(temperature);
-    },
-    debounceTemperatureMessage: debounce(function(msg) {
-      this.temperatureMessage(msg)
-    }, 1000),
-    temperatureMessage(msg) {
-      let json = JSON.parse(msg);
-      this.temperatureNum = json.countOverLimit + json.countCrossingLimit;
-    },
-    
-    getStation() {
-      api.getStation().then((res) => {
-        let stationList = [];
-        res.data.forEach((item) => {
-          if (item.type === 1) {
-            stationList.push(item);
-          }
-        });
-        this.$store.commit("stationList", stationList);
-        let syzArray = [];
-        stationList.forEach((item) => {
-          let obj = {
-            id: item.id, // 升压站 ID
-            isWarning: "0", // 升压站是否显示报警小红点
-            name: item.address, // 升压站中文名称
-            isMute: false, // 升压站报警是否静音
-          };
-          syzArray.push(obj);
-        });
-        this.$store.commit("syzArray", syzArray);
-        this.$store.commit("activeTab", syzArray[0].name);
-      });
-    },
-    handleChange(val) {
-      if (val !== 9) {
-        this.matricesDisplay = false;
-        this.$store.commit("syzDialogShow", false);
-        this.agcDisplay = false;
-        this.temperatureDisplay = false;
-        this.faultDisplay = false;
-        this.warningDisplay = false;
-        this.statusDisplay = false;
-        this.actionDisplay = false;
-        this.calendarDisplay = false;
-        this.recordDisplay = false;
-        this.stateDisplay = false;
-      }
-
-      switch (val) {
-        case 2:
-          this.matricesDisplay = true;
-          break;
-        case 3:
-          this.temperatureDisplay = true;
-          break;
-        case 4:
-          this.$store.commit("syzDialogShow", true);
-          break;
-        case 5:
-          this.agcDisplay = true;
-          break;
-        case 7:
-          this.lockMaskDisplay = !this.lockMaskDisplay;
-          break;
-        case 9:
-          this.toImage();
-          break;
-        default:
-          break;
-      }
-    },
-    handleSearch(val) {
-      this.matricesDisplay = false;
-      this.$store.commit("syzDialogShow", false);
-      this.agcDisplay = false;
-      this.temperatureDisplay = false;
-      this.faultDisplay = false;
-      this.warningDisplay = false;
-      this.statusDisplay = false;
-      this.actionDisplay = false;
-      this.calendarDisplay = false;
-      this.recordDisplay = false;
-      this.stateDisplay = false;
-      switch (val) {
-        case "fault":
-          this.faultDisplay = true;
-          break;
-        case "warning":
-          this.warningDisplay = true;
-          break;
-        case "status":
-          this.statusDisplay = true;
-          break;
-        case "action":
-          this.actionDisplay = true;
-          break;
-        case "calendar":
-          this.calendarDisplay = true;
-          break;
-        case "record":
-          this.recordDisplay = true;
-          break;
-        case "changeState":
-          this.stateDisplay = true;
-          break;
-          
-        default:
-          break;
-      }
-    },
-    // 页面元素转图片
-    toImage() {
-      // 手动创建一个 canvas 标签
-      const canvas = document.createElement("canvas");
-      // 获取父标签，意思是这个标签内的 DOM 元素生成图片
-      // imageTofile是给截图范围内的父级元素自定义的ref名称
-      let canvasBox = this.$refs.imageTofile;
-      // 获取父级的宽高
-      const width = parseInt(window.getComputedStyle(canvasBox).width);
-      const height = parseInt(window.getComputedStyle(canvasBox).height);
-      // 宽高 * 2 并放大 2 倍 是为了防止图片模糊
-      canvas.width = width * 2;
-      canvas.height = height * 2;
-      canvas.style.width = width + "px";
-      canvas.style.height = height + "px";
-      const context = canvas.getContext("2d");
-      context.scale(2, 2);
-      const options = {
-        backgroundColor: null,
-        canvas: canvas,
-        useCORS: true,
-      };
-      html2canvas(canvasBox, options).then((canvas) => {
-        // toDataURL 图片格式转成 base64
-        let dataURL = canvas.toDataURL("image/png");
-        console.log(dataURL);
-        this.downloadImage(dataURL);
-      });
-    },
-    //下载图片
-    downloadImage(url) {
-      // 如果是在网页中可以直接创建一个 a 标签直接下载
-      let a = document.createElement("a");
-      a.href = url;
-      a.download = "页面截图";
-      a.click();
-    },
-  },
-};
-</script>
-<style>
-@import "../src/assets/styles/main.css";
-body {
-  /* 设置内容不可选中 */
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-/* .app{
-    background-color: #000000;
-  } */
-.Dialog {
-  width: 520px;
-  height: 800px;
-  background-color: rgb(250, 249, 249);
-  position: absolute;
-  right: 30px;
-  z-index: 999;
-  bottom: 50px;
-  /* display: none; */
-}
-.D- {
-  width: 30px;
-  height: 30px;
-  background-color: rgb(167, 204, 192);
-  font-size: 30px;
-  position: absolute;
-  top: 5px;
-  right: 10px;
-  line-height: 30px;
-  text-align: center;
-}
-.D-:hover {
-  background-color: #999999;
-}
-.left {
-  width: 40px;
-  position: absolute;
-  left: 0px;
-  height: 100%;
-  z-index: 9999;
-  background-color: #242424;
-  margin-left: 7px;
-  border-radius: 8px;
-}
-.right {
-  width: 31%;
-  position: absolute;
-  right: 20px;
-  z-index: 99;
-}
-
-.statusBar {
-  width: 100%;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  z-index: 9999;
-}
-
-.titleBar {
-  width: 100%;
-  position: relative;
-  top: 0;
-  left: 0;
-  z-index: 999;
-}
-.el-table__body-wrapper::-webkit-scrollbar-thumb {
-  background-color: #999999;
-  border-radius: 8px;
-}
-.el-collapse-item__wrap {
-  background-color: #000000 !important;
-  box-sizing: border-box !important;
-  padding-left: 27px !important;
-}
-.el-collapse-item__header {
-  background-color: rgb(20, 20, 20) !important;
-  font-size: 12px !important;
-  color: #bfbfbf !important;
-  box-sizing: border-box !important;
-  padding-left: 30px !important;
-  margin-bottom: 2px !important;
-}
-.el-collapse {
-  border: none !important;
-}
-.el-collapse-item__header {
-  border: none !important;
-}
-.el-collapse-item__wrap {
-  border: none !important;
-}
-.lockMask {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  background-color: rgba(0, 0, 0, 0.2);
-  z-index: 9998;
-}
-.warningMask {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  background-image: radial-gradient(
-    circle,
-    rgb(255, 0, 0, 0),
-    rgb(255, 0, 0, 0),
-    rgb(255, 0, 0, 0),
-    rgb(255, 0, 0)
-  );
-  animation: fade 2000ms infinite;
-  -webkit-animation: fade 2000ms infinite;
-  z-index: 999;
-  pointer-events: none;
-}
-@keyframes fade {
-  from {
-    opacity: 0.7;
-  }
-  50% {
-    opacity: 0.3;
-  }
-  to {
-    opacity: 0.7;
-  }
-}
-@-webkit-keyframes fade {
-  from {
-    opacity: 0.7;
-  }
-  50% {
-    opacity: 0.3;
-  }
-  to {
-    opacity: 0.7;
-  }
-}
-</style>
-<style lang="less">
-#app {
-  .currentScroll::-webkit-scrollbar {
-    width: 8px;
-    height: 0px;
-    background-color: black;
-  }
-
-  .currentScroll::-webkit-scrollbar-thumb {
-    background-color: #999999;
-    border-radius: 6px;
-  }
-}
-::-webkit-scrollbar {
-  width: 8px !important;
-  height: 8px !important;
-  background-color: black !important;
-}
-::-webkit-scrollbar-thumb {
-  background-color: #999999 !important;
-  border-radius: 6px !important;
-}
-.el-table--enable-row-hover .el-table__body tr:hover > td {
-  color: rgba(37, 116, 219, 0.8) !important;
-}
-.el-table__body tr.current-row > td {
-  color: rgba(37, 116, 219, 0.8) !important;
-}
+<template class="app">
+  <div :class="$store.state.showWarningMask ? 'warningMask' : ''"></div>
+  <div style="background-color: #000000" ref="imageTofile">
+    <div v-if="lockMaskDisplay" class="lockMask"></div>
+    <!-- <div class="warningMask"></div> -->
+    <TitleBar class="titleBar" />
+    <div class="left">
+      <Menu
+        :lockMaskDisplay="lockMaskDisplay"
+        :temperatureNum="temperatureNum"
+        @handleChange="handleChange"
+        @handleSearch="handleSearch"
+      />
+    </div>
+    <div class="right">
+      <el-col>
+        <el-row>
+          <el-col>
+            <ModeControl
+              ref="modeControl"
+              :current="current"
+              @clicks="handleClick"
+            ></ModeControl>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <FocusArea />
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <WarningArea></WarningArea>
+          </el-col>
+        </el-row>
+      </el-col>
+    </div>
+    <div class="Dialog" v-show="state">
+      <div class="D-" @click="none">-</div>
+    </div>
+    <StatusBar class="statusBar" @getData="getData" />
+    <router-view />
+    <AllMatrices v-model="matricesDisplay" />
+    <!-- <SYZDetails v-model="$store.state.syzDialogShow"></SYZDetails> -->
+    <AGCDetails v-model="agcDisplay"></AGCDetails>
+    <TemperatureMatrix v-model="temperatureDisplay" />
+    <Fault v-model="faultDisplay" />
+    <Warning v-model="warningDisplay" />
+    <Status v-model="statusDisplay" />
+    <Action v-model="actionDisplay" />
+    <Calendar v-model="calendarDisplay" />
+    <Record v-model="recordDisplay" />
+    <State v-model="stateDisplay" />
+    <Setting v-model="settingDisplay" ></Setting>
+  </div>
+</template>
+<script>
+import TitleBar from "views/TitleBar.vue";
+import StatusBar from "views/StatusBar.vue";
+import Menu from "views/Menu.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";
+import boxSelect from "components/boxSelect.vue";
+import AGCDetails from "components/focus/agcDetails.vue";
+import SYZDetails from "components/svgStation.vue";
+import AllMatrices from "components/allMatrices.vue";
+import TemperatureMatrix from "components/temperatureMatrix.vue";
+import Fault from "components/search/fault.vue";
+import Warning from "components/search/warning.vue";
+import Status from "components/search/status.vue";
+import Action from "components/search/action.vue";
+import Calendar from "components/search/calendar.vue";
+import Record from "components/search/record.vue";
+import State from "components/search/state.vue";
+import Setting from "components/setting.vue";
+import html2canvas from "html2canvas";
+import { debounce } from "lodash";
+export default {
+  data() {
+    return {
+      state: false,
+      agcDisplay: false, //AGC功能
+      matricesDisplay: false, //全部矩阵
+      temperatureDisplay: false, //温度矩阵
+      faultDisplay: false, //查询-报警/故障查询
+      warningDisplay: false, //查询-预警查询
+      statusDisplay: false, //查询-状态时间查询
+      actionDisplay: false, //查询-动作查询
+      recordDisplay: false, //查询-推荐记录
+      stateDisplay: false, //查询-状态变化查询
+      calendarDisplay: false, //查询-日历查询
+      lockMaskDisplay: false, //锁屏
+      temperatureNum: 0, //温度矩阵故障数
+      settingDisplay: false, //设置
+    };
+  },
+  components: {
+    TitleBar,
+    StatusBar,
+    Menu,
+    ModeControl,
+    FocusArea,
+    WarningArea,
+    boxSelect,
+    AGCDetails,
+    SYZDetails,
+    AllMatrices,
+    TemperatureMatrix,
+    Setting,
+    Fault,
+    Warning,
+    Status,
+    Action,
+    Calendar,
+    Record,
+    State,
+  },
+  created: function () {
+    this.getStation();
+    this.initData();
+  },
+  methods: {
+    getData(val) {
+      this.state = val;
+    },
+    none() {
+      this.state = false;
+    },
+
+    initData: function () {
+      let mb = MessageBridge.getInstance();
+      let temperature = [
+        { key: "/topic/temperature-count", action: this.debounceTemperatureMessage },
+      ];
+      mb.register(temperature);
+    },
+    debounceTemperatureMessage: debounce(function(msg) {
+      this.temperatureMessage(msg)
+    }, 1000),
+    temperatureMessage(msg) {
+      let json = JSON.parse(msg);
+      this.temperatureNum = json.countOverLimit + json.countCrossingLimit;
+    },
+    
+    getStation() {
+      api.getStation().then((res) => {
+        let stationList = [];
+        res.data.forEach((item) => {
+          if (item.type === 1) {
+            stationList.push(item);
+          }
+        });
+        this.$store.commit("stationList", stationList);
+        let syzArray = [];
+        stationList.forEach((item) => {
+          let obj = {
+            id: item.id, // 升压站 ID
+            isWarning: "0", // 升压站是否显示报警小红点
+            name: item.name, // 升压站中文名称
+            isMute: false, // 升压站报警是否静音
+          };
+          syzArray.push(obj);
+        });
+        this.$store.commit("syzArray", syzArray);
+        this.$store.commit("activeTab", syzArray[0].name);
+      });
+    },
+    handleChange(val) {
+      if (val !== 9) {
+        this.matricesDisplay = false;
+        this.$store.commit("syzDialogShow", false);
+        this.agcDisplay = false;
+        this.temperatureDisplay = false;
+        this.faultDisplay = false;
+        this.warningDisplay = false;
+        this.statusDisplay = false;
+        this.actionDisplay = false;
+        this.calendarDisplay = false;
+        this.recordDisplay = false;
+        this.stateDisplay = false;
+        this.settingDisplay = false;
+      }
+
+      switch (val) {
+        case 2:
+          this.matricesDisplay = true;
+          break;
+        case 3:
+          this.temperatureDisplay = true;
+          break;
+        case 4:
+          this.$store.commit("syzDialogShow", true);
+          break;
+        case 5:
+          this.agcDisplay = true;
+          break;
+        case 7:
+          this.lockMaskDisplay = !this.lockMaskDisplay;
+          break;
+        case 9:
+          this.toImage();
+          break;
+        case 10:
+          this.settingDisplay = true;
+          break;
+        default:
+          break;
+      }
+    },
+    handleSearch(val) {
+      this.matricesDisplay = false;
+      this.$store.commit("syzDialogShow", false);
+      this.agcDisplay = false;
+      this.temperatureDisplay = false;
+      this.faultDisplay = false;
+      this.warningDisplay = false;
+      this.statusDisplay = false;
+      this.actionDisplay = false;
+      this.calendarDisplay = false;
+      this.recordDisplay = false;
+      this.stateDisplay = false;
+      this.settingDisplay = false;
+      switch (val) {
+        case "fault":
+          this.faultDisplay = true;
+          break;
+        case "warning":
+          this.warningDisplay = true;
+          break;
+        case "status":
+          this.statusDisplay = true;
+          break;
+        case "action":
+          this.actionDisplay = true;
+          break;
+        case "calendar":
+          this.calendarDisplay = true;
+          break;
+        case "record":
+          this.recordDisplay = true;
+          break;
+        case "changeState":
+          this.stateDisplay = true;
+          break;
+          
+        default:
+          break;
+      }
+    },
+    // 页面元素转图片
+    toImage() {
+      // 手动创建一个 canvas 标签
+      const canvas = document.createElement("canvas");
+      // 获取父标签，意思是这个标签内的 DOM 元素生成图片
+      // imageTofile是给截图范围内的父级元素自定义的ref名称
+      let canvasBox = this.$refs.imageTofile;
+      // 获取父级的宽高
+      const width = parseInt(window.getComputedStyle(canvasBox).width);
+      const height = parseInt(window.getComputedStyle(canvasBox).height);
+      // 宽高 * 2 并放大 2 倍 是为了防止图片模糊
+      canvas.width = width * 2;
+      canvas.height = height * 2;
+      canvas.style.width = width + "px";
+      canvas.style.height = height + "px";
+      const context = canvas.getContext("2d");
+      context.scale(2, 2);
+      const options = {
+        backgroundColor: null,
+        canvas: canvas,
+        useCORS: true,
+      };
+      html2canvas(canvasBox, options).then((canvas) => {
+        // toDataURL 图片格式转成 base64
+        let dataURL = canvas.toDataURL("image/png");
+        console.log(dataURL);
+        this.downloadImage(dataURL);
+      });
+    },
+    //下载图片
+    downloadImage(url) {
+      // 如果是在网页中可以直接创建一个 a 标签直接下载
+      let a = document.createElement("a");
+      a.href = url;
+      a.download = "页面截图";
+      a.click();
+    },
+  },
+};
+</script>
+<style>
+@import "../src/assets/styles/main.css";
+body {
+  /* 设置内容不可选中 */
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+/* .app{
+    background-color: #000000;
+  } */
+.Dialog {
+  width: 520px;
+  height: 800px;
+  background-color: rgb(250, 249, 249);
+  position: absolute;
+  right: 30px;
+  z-index: 999;
+  bottom: 50px;
+  /* display: none; */
+}
+.D- {
+  width: 30px;
+  height: 30px;
+  background-color: rgb(167, 204, 192);
+  font-size: 30px;
+  position: absolute;
+  top: 5px;
+  right: 10px;
+  line-height: 30px;
+  text-align: center;
+}
+.D-:hover {
+  background-color: #999999;
+}
+.left {
+  width: 40px;
+  position: absolute;
+  left: 0px;
+  height: 100%;
+  z-index: 9999;
+  background-color: #242424;
+  margin-left: 7px;
+  border-radius: 8px;
+}
+.right {
+  width: 31%;
+  position: absolute;
+  right: 20px;
+  z-index: 99;
+}
+
+.statusBar {
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: 9999;
+}
+
+.titleBar {
+  width: 100%;
+  position: relative;
+  top: 0;
+  left: 0;
+  z-index: 999;
+}
+.el-table__body-wrapper::-webkit-scrollbar-thumb {
+  background-color: #999999;
+  border-radius: 8px;
+}
+.el-collapse-item__wrap {
+  background-color: #000000 !important;
+  box-sizing: border-box !important;
+  padding-left: 27px !important;
+}
+.el-collapse-item__header {
+  background-color: rgb(20, 20, 20) !important;
+  font-size: 12px !important;
+  color: #bfbfbf !important;
+  box-sizing: border-box !important;
+  padding-left: 30px !important;
+  margin-bottom: 2px !important;
+}
+.el-collapse {
+  border: none !important;
+}
+.el-collapse-item__header {
+  border: none !important;
+}
+.el-collapse-item__wrap {
+  border: none !important;
+}
+.lockMask {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.2);
+  z-index: 9998;
+}
+.warningMask {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  background-image: radial-gradient(
+    circle,
+    rgb(255, 0, 0, 0),
+    rgb(255, 0, 0, 0),
+    rgb(255, 0, 0, 0),
+    rgb(255, 0, 0)
+  );
+  animation: fade 2000ms infinite;
+  -webkit-animation: fade 2000ms infinite;
+  z-index: 999;
+  pointer-events: none;
+}
+@keyframes fade {
+  from {
+    opacity: 0.7;
+  }
+  50% {
+    opacity: 0.3;
+  }
+  to {
+    opacity: 0.7;
+  }
+}
+@-webkit-keyframes fade {
+  from {
+    opacity: 0.7;
+  }
+  50% {
+    opacity: 0.3;
+  }
+  to {
+    opacity: 0.7;
+  }
+}
+</style>
+<style lang="less">
+#app {
+  .currentScroll::-webkit-scrollbar {
+    width: 8px;
+    height: 0px;
+    background-color: black;
+  }
+
+  .currentScroll::-webkit-scrollbar-thumb {
+    background-color: #999999;
+    border-radius: 6px;
+  }
+}
+::-webkit-scrollbar {
+  width: 8px !important;
+  height: 8px !important;
+  background-color: black !important;
+}
+::-webkit-scrollbar-thumb {
+  background-color: #999999 !important;
+  border-radius: 6px !important;
+}
+.el-table--enable-row-hover .el-table__body tr:hover > td {
+  color: rgba(37, 116, 219, 0.8) !important;
+}
+.el-table__body tr.current-row > td {
+  color: rgba(37, 116, 219, 0.8) !important;
+}
 </style>

src/api/index.js

@@ -1,362 +1,421 @@
-import request from "../utils/request";
-//全部风机
-const getWindturbine = () => {
-    return request({
-        baseURL:process.env.VUE_APP_API,
-        url: `/api/windturbine/all`,
-        method: "get",
-    });
-};
-// 标题栏数据
-const stationOverview = () => {
-    return request({
-        baseURL:process.env.VUE_APP_API,
-        url: `/api/station/overview`,
-        method: "get",
-    });
-};
-//获取报警数据
-const alarmFault = () => {
-    return request({
-        baseURL:process.env.VUE_APP_API,
-        url: `/alarm/fault`,
-        method: "get",
-    });
-};
-//获取推荐风机信息
-const recommendation = () => {
-    return request({
-        baseURL:process.env.VUE_APP_API,
-        url: `/api/windturbine/recommendation`,
-        method: "get",
-    });
-};
-//登陆
-const login = (data) => {
-    return request({
-        baseURL:process.env.VUE_APP_API,
-        url: `/user/login`,
-        method: "post",
-        data:data,
-    });
-};
-//获取场站
-const getStation = () => {
-    return request({
-        baseURL:process.env.VUE_APP_API,
-        url: `/api/station/info`,
-        method: "get",
-    });
-};
-//获取AGC场站
-const getAGCStation = () => {
-    return request({
-        baseURL:process.env.VUE_APP_API,
-        url: `/api/station/agc`,
-        method: "get",
-    });
-};
-//刷新报警信息
-const getSnap = (data) => {
-    return request({
-        baseURL:process.env.VUE_APP_SHARDINGURL,
-        url: `/alarm/snap/page?pagenum=${data.pagenum}&pagesize=${data.pagesize}&category1=${data.category1}&isopened=${data.isopened}&starttime=${data.starttime}&endtime=${data.endtime}&windturbineId=${data.windturbineId?data.windturbineId:''}`,
-        method: "get",
-    });
-};
-//数据刷新
-const refreshData = (keys) => {
-    return request({
-        baseURL:process.env.VUE_APP_ADAPTERURL,
-        url: `/ts/latest?keys=${keys}`,
-        method: "get",
-    });
-};
-//风机控制
-const windturbControl = (pairs) => {
-    return request({
-        baseURL:process.env.VUE_APP_API,
-        url: `/api/control/`,
-        method: "post",
-        data:pairs
-    });
-};
-//风机控制
-const windturbControlLock = (pairs) => {
-    return request({
-        baseURL:process.env.VUE_APP_API,
-        url: `/api/control/lock`,
-        method: "post",
-        data:pairs
-    });
-};
-//获取风机详情页面数据
-const nitWinturbineBaseData = (data) => {
-    return request({
-        baseURL:process.env.VUE_APP_ADAPTERURL,
-        url: `/ts/latest?thingType=${data.thingType}&thingId=${data.thingId}&uniformCodes=${data.uniformCodes}`,
-        method: "get",
-    });
-};
-const getOverview = (data) => {
-    return request({
-        baseURL:process.env.VUE_APP_API,
-        url: `/api/windturbine/overview`,
-        method: "get",
-    });
-};
-const sendWarning = (data) => {
-    return request({
-        baseURL:process.env.VUE_APP_API,
-        url: `/alarm/confirm?snapID=${data.snapID}&faultID=${data.faultID}&userName=${data.userName}`,
-        method: "get",
-    });
-};
-const sendRecommend = (data) => {
-    return request({
-        baseURL:process.env.VUE_APP_API,
-        url: `api/voice-control/addvoicetask`,
-        method: "post",
-        data:data
-    });
-};
-const getPower = (data) => {
-    return request({
-        baseURL:process.env.VUE_APP_ADAPTERURL,
-        url: `/ts/history/snap?tagName=${data.tagName}&startTs=${data.startTs}&endTs=${data.endTs}&interval=${data.interval}`,
-        method: "get",
-    });
-};
-const getOriginalPower = (data) => {
-    return request({
-        baseURL:process.env.VUE_APP_ADAPTERURL,
-        url: `/ts/history/raw?tagName=${data.tagName}&startTs=${data.startTs}&endTs=${data.endTs}`,
-        method: "get",
-    });
-};
-const getWindturbinePower = (data) => {
-    return request({
-        baseURL:process.env.VUE_APP_ADAPTERURL,
-        url: `/ts/history/snap?thingId=${data.thingId}&uniformCode=${data.uniformCode}&startTs=${data.startTs}&endTs=${data.endTs}&thingType=${data.thingType}&interval=${data.interval}`,
-        method: "get",
-    });
-};
-const getOriginalWindturbinePower = (data) => {
-    return request({
-        baseURL:process.env.VUE_APP_ADAPTERURL,
-        url: `/ts/history/raw?thingId=${data.thingId}&uniformCode=${data.uniformCode}&startTs=${data.startTs}&endTs=${data.endTs}&thingType=${data.thingType}`,
-        method: "get",
-    });
-};
-const getWindWarning = (data,pageIndex,pageSize) => {
-    return request({
-        baseURL:process.env.VUE_APP_API,
-        url: `/alarm/real-time-alarm?objectId=${data}&pageIndex=${pageIndex}&pageSize=${pageSize}`,
-        method: "get"
-    });
-};
-const getHealthDate=(stid,wtid)=>{
-    return request({
-        baseURL:process.env.VUE_APP_WARNING,
-        url:`/alarm/statistic?stId=${stid}&wtId=${wtid}`,
-        method:"get"
-    })
-}
-const getDetial=(data)=>{
-    return request({
-        baseURL:process.env.VUE_APP_API,
-        url:`/api/windturbine/${data}`,
-        method:"get"
-    })
-}
-const getWarning=(data,wtid,pt)=>{
-    return request({
-        baseURL:process.env.VUE_APP_WARNING,
-        url:`/alarm/list?stId=${data}&wtId=${wtid}&widget=${pt}`,
-        method:"get"
-    })
-}
-const getCustomerLock=()=>{
-    return request({
-        baseURL: process.env.VUE_APP_API,
-        url:`/api/windturbine/customer-lock`,
-        method:"get"
-    })
-}
-const controlRecord = (data) => {
-    return request({
-        baseURL:process.env.VUE_APP_API,
-        url: `/control-record/search?stationId=${data.stationId}&userName=${data.userName}&windturbineId=${data.windturbineId}&startTime=${data.startTime}&endTime=${data.endTime}&pageSize=${data.pageSize}&pageIndex=${data.pageIndex}`,
-        method: "get",
-    });
-};
-const getLatest = (data) => {
-    return request({
-        baseURL:process.env.VUE_APP_ADAPTERURL,
-        url: `/ts/latest?keys=${data}`,
-        method: "get",
-    });
-};
-//获取智能模式下场站
-const getControlType = () => {
-    return request({
-        baseURL:process.env.VUE_APP_API,
-        url: `/api/station/status`,
-        method: "get",
-    });
-};
-const uodateControlType = (data) => {
-    return request({
-        baseURL:process.env.VUE_APP_API,
-        url: `/api/station/status/update?stationid=${data.stationid}&type=${data.type}&userName=${data.userName}`,
-        method: "get",
-    });
-};
-//获取UniformCodes数据
-const getUniformCodes = () => {
-    return request({
-        baseURL:process.env.VUE_APP_API,
-        url: `/api/windturbine/uniform-code`,
-        method: "get",
-    });
-};
-const getBoostStation = () => {
-    return request({
-        baseURL:process.env.VUE_APP_API,
-        url: `/api/station/boost-station`,
-        method: "get",
-    });
-};
-//获取风机code名称
-const getWindturbineFdc = () => {
-    return request({
-        baseURL:process.env.VUE_APP_API,
-        url: `/api/windturbine/fdc`,
-        method: "get",
-    });
-};
-const getWindturbineWarning = (data) => {
-    return request({
-        baseURL:process.env.VUE_APP_SHARDINGURL,
-        url: `/alarm/history/page?pagenum=${data.pagenum}&pagesize=${data.pagesize}&windturbineid=${data.windturbineid?data.windturbineid:''}&starttime=${data.starttime}&endtime=${data.endtime}&keyword=${data.keyword?data.keyword:''}&stationid=${data.stationid?data.stationid:''}&category1=${data.category1?data.category1:''}`,
-        method: "get",
-    });
-};
-//获取报警历史数据
-const getFaultHistory = (data) => {
-    return request({
-        baseURL:process.env.VUE_APP_SHARDINGURL,
-        url: `/fault/history/listpage?pagenum=${data.pageIndex}&pagesize=${data.pageSize}&stationid=${data.stationid}&keyword=${data.keyword}&starttime=${data.startTime}&endtime=${data.endTime}`,
-        method: "get",
-    });
-};
-
-const stationCompared = (data) => {
-    return request({
-        baseURL:process.env.VUE_APP_API,
-        url: `/api/station/compared?models=${data}`,
-        method: "get",
-    });
-};
-//温度矩阵
-const temperatureInfo = (data) => {
-    return request({
-        baseURL:process.env.VUE_APP_API,
-        url: `/api/windturbine/temperature-info?id=${data.id}&status=${data.status}&projects=${data.period}`,
-        method: "get",
-    });
-};
-//获取风机故障
-const alarmSnap = (data) => {
-    return request({
-        baseURL:process.env.VUE_APP_API,
-        url: `/alarm/alarm-snap?windturbineId=${data.windturbineId}`,
-        method: "get",
-    });
-};
-
-//预警分析
-const analysisDetail = (data) => {
-    return request({
-        baseURL:process.env.VUE_APP_WARNING,
-        url: `/analysis/detail?station=${data.station}&startTs=${data.startTs}&endTs=${data.endTs}&interval=${data.interval}&wtId=${data.wtId}&name=${data.name}`,
-        method: "get",
-    });
-};
-//预警分析
-const alarmCountQuery = (data) => {
-    return request({
-        baseURL:process.env.VUE_APP_WARNING,
-        url: `/alarm/count/query/new2?stationid=${data.stationid}&startdate=${data.startdate}&enddate=${data.enddate}`,
-        method: "get",
-    });
-};
-//状态时间查询
-const statusTime = (data) => {
-    return request({
-        baseURL:process.env.VUE_APP_API,
-        url: `/api/windturbine/status-time?stationId=${data.stationid}&startTs=${data.startTs}&endTs=${data.endTs}`,
-        method: "get",
-    });
-};
-
-//推荐记录查询
-const recommended = (data) => {
-    return request({
-        baseURL:process.env.VUE_APP_API,
-        url: `control-record/recommended?pagesize=${data.pagesize}&pagenum=${data.pagenum}&stationid=${data.stationid}&windturbineid=${data.windturbineid}`,
-        method: "get",
-    });
-};
-
-//状态变化查询
-const statusChange = (data) => {
-    return request({
-        baseURL:process.env.VUE_APP_API,
-        url: `/api/windturbine/status?startTs=${data.startTs}&endTs=${data.endTs}&pagesize=${data.pagesize}&pagenum=${data.pagenum}&windturbineId=${data.windturbineid}`,
-        method: "get",
-    });
-};
-export default {
-    login,
-    getStation,
-    getAGCStation,
-    getSnap,
-    refreshData,
-    windturbControl,
-    windturbControlLock,
-    nitWinturbineBaseData,
-    getOverview,
-    sendWarning,
-    sendRecommend,
-    getPower,
-    getOriginalPower,
-    getWindWarning,
-    getHealthDate,
-    getDetial,
-    getWarning,
-    getCustomerLock,
-    getWindturbinePower,
-    getOriginalWindturbinePower,
-    controlRecord,
-    getLatest,
-    getControlType,
-    uodateControlType,
-    getUniformCodes,
-    getBoostStation,
-    getWindturbineFdc,
-    getWindturbineWarning,
-    getFaultHistory,
-    stationCompared,
-    temperatureInfo,
-    alarmSnap,
-    analysisDetail,
-    alarmCountQuery,
-    statusTime,
-    getWindturbine,
-    stationOverview,
-    alarmFault,
-    recommendation,
-    recommended,
-    statusChange,
+import request from "../utils/request";
+//全部风机
+const getWindturbine = () => {
+    return request({
+        baseURL:process.env.VUE_APP_API,
+        url: `/api/windturbine/all`,
+        method: "get",
+    });
+};
+// 标题栏数据
+const stationOverview = () => {
+    return request({
+        baseURL:process.env.VUE_APP_API,
+        url: `/api/station/overview`,
+        method: "get",
+    });
+};
+//获取报警数据
+const alarmFault = () => {
+    return request({
+        baseURL:process.env.VUE_APP_API,
+        url: `/alarm/fault`,
+        method: "get",
+    });
+};
+//获取推荐风机信息
+const recommendation = () => {
+    return request({
+        baseURL:process.env.VUE_APP_API,
+        url: `/api/windturbine/recommendation`,
+        method: "get",
+    });
+};
+//登陆
+const login = (data) => {
+    return request({
+        baseURL:process.env.VUE_APP_API,
+        url: `/user/login`,
+        method: "post",
+        data:data,
+    });
+};
+//获取场站
+const getStation = () => {
+    return request({
+        baseURL:process.env.VUE_APP_API,
+        url: `/api/station/info`,
+        method: "get",
+    });
+};
+//获取AGC场站
+const getAGCStation = () => {
+    return request({
+        baseURL:process.env.VUE_APP_API,
+        url: `/api/station/agc`,
+        method: "get",
+    });
+};
+//刷新报警信息
+const getSnap = (data) => {
+    return request({
+        baseURL:process.env.VUE_APP_SHARDINGURL,
+        url: `/alarm/snap/page?pagenum=${data.pagenum}&pagesize=${data.pagesize}&category1=${data.category1}&isopened=${data.isopened}&starttime=${data.starttime}&endtime=${data.endtime}&windturbineId=${data.windturbineId?data.windturbineId:''}`,
+        method: "get",
+    });
+};
+//数据刷新
+const refreshData = (keys) => {
+    return request({
+        baseURL:process.env.VUE_APP_ADAPTERURL,
+        url: `/ts/latest?keys=${keys}`,
+        method: "get",
+    });
+};
+//风机控制
+const windturbControl = (pairs) => {
+    return request({
+        baseURL:process.env.VUE_APP_API,
+        url: `/api/control/`,
+        method: "post",
+        data:pairs
+    });
+};
+//风机控制
+const windturbControlLock = (pairs) => {
+    return request({
+        baseURL:process.env.VUE_APP_API,
+        url: `/api/control/lock`,
+        method: "post",
+        data:pairs
+    });
+};
+//获取风机详情页面数据
+const nitWinturbineBaseData = (data) => {
+    return request({
+        baseURL:process.env.VUE_APP_ADAPTERURL,
+        url: `/ts/latest?thingType=${data.thingType}&thingId=${data.thingId}&uniformCodes=${data.uniformCodes}`,
+        method: "get",
+    });
+};
+const getOverview = (data) => {
+    return request({
+        baseURL:process.env.VUE_APP_API,
+        url: `/api/windturbine/overview`,
+        method: "get",
+    });
+};
+const sendWarning = (data) => {
+    return request({
+        baseURL:process.env.VUE_APP_API,
+        url: `/alarm/confirm?snapID=${data.snapID}&faultID=${data.faultID}&userName=${data.userName}`,
+        method: "get",
+    });
+};
+const sendRecommend = (data) => {
+    return request({
+        baseURL:process.env.VUE_APP_API,
+        url: `api/voice-control/addvoicetask`,
+        method: "post",
+        data:data
+    });
+};
+const getPower = (data) => {
+    return request({
+        baseURL:process.env.VUE_APP_ADAPTERURL,
+        url: `/ts/history/snap?tagName=${data.tagName}&startTs=${data.startTs}&endTs=${data.endTs}&interval=${data.interval}`,
+        method: "get",
+    });
+};
+const getOriginalPower = (data) => {
+    return request({
+        baseURL:process.env.VUE_APP_ADAPTERURL,
+        url: `/ts/history/raw?tagName=${data.tagName}&startTs=${data.startTs}&endTs=${data.endTs}`,
+        method: "get",
+    });
+};
+const getWindturbinePower = (data) => {
+    return request({
+        baseURL:process.env.VUE_APP_ADAPTERURL,
+        url: `/ts/history/snap?thingId=${data.thingId}&uniformCode=${data.uniformCode}&startTs=${data.startTs}&endTs=${data.endTs}&thingType=${data.thingType}&interval=${data.interval}`,
+        method: "get",
+    });
+};
+const getOriginalWindturbinePower = (data) => {
+    return request({
+        baseURL:process.env.VUE_APP_ADAPTERURL,
+        url: `/ts/history/raw?thingId=${data.thingId}&uniformCode=${data.uniformCode}&startTs=${data.startTs}&endTs=${data.endTs}&thingType=${data.thingType}`,
+        method: "get",
+    });
+};
+const getWindWarning = (data,pageIndex,pageSize) => {
+    return request({
+        baseURL:process.env.VUE_APP_API,
+        url: `/alarm/real-time-alarm?objectId=${data}&pageIndex=${pageIndex}&pageSize=${pageSize}`,
+        method: "get"
+    });
+};
+const getHealthDate=(stid,wtid)=>{
+    return request({
+        baseURL:process.env.VUE_APP_WARNING,
+        url:`/alarm/statistic?stId=${stid}&wtId=${wtid}`,
+        method:"get"
+    })
+}
+const getDetial=(data)=>{
+    return request({
+        baseURL:process.env.VUE_APP_API,
+        url:`/api/windturbine/${data}`,
+        method:"get"
+    })
+}
+const getWarning=(data,wtid,pt)=>{
+    return request({
+        baseURL:process.env.VUE_APP_WARNING,
+        url:`/alarm/list?stId=${data}&wtId=${wtid}&widget=${pt}`,
+        method:"get"
+    })
+}
+const getCustomerLock=()=>{
+    return request({
+        baseURL: process.env.VUE_APP_API,
+        url:`/api/windturbine/customer-lock`,
+        method:"get"
+    })
+}
+const controlRecord = (data) => {
+    return request({
+        baseURL:process.env.VUE_APP_API,
+        url: `/control-record/search?stationId=${data.stationId}&userName=${data.userName}&windturbineId=${data.windturbineId}&startTime=${data.startTime}&endTime=${data.endTime}&pageSize=${data.pageSize}&pageIndex=${data.pageIndex}`,
+        method: "get",
+    });
+};
+const getLatest = (data) => {
+    return request({
+        baseURL:process.env.VUE_APP_ADAPTERURL,
+        url: `/ts/latest?keys=${data}`,
+        method: "get",
+    });
+};
+//获取智能模式下场站
+const getControlType = () => {
+    return request({
+        baseURL:process.env.VUE_APP_API,
+        url: `/api/station/status`,
+        method: "get",
+    });
+};
+const uodateControlType = (data) => {
+    return request({
+        baseURL:process.env.VUE_APP_API,
+        url: `/api/station/status/update?stationid=${data.stationid}&type=${data.type}&userName=${data.userName}`,
+        method: "get",
+    });
+};
+//获取UniformCodes数据
+const getUniformCodes = () => {
+    return request({
+        baseURL:process.env.VUE_APP_API,
+        url: `/api/windturbine/uniform-code`,
+        method: "get",
+    });
+};
+const getBoostStation = () => {
+    return request({
+        baseURL:process.env.VUE_APP_API,
+        url: `/api/station/boost-station`,
+        method: "get",
+    });
+};
+//获取风机code名称
+const getWindturbineFdc = () => {
+    return request({
+        baseURL:process.env.VUE_APP_API,
+        url: `/api/windturbine/fdc`,
+        method: "get",
+    });
+};
+const getWindturbineWarning = (data) => {
+    return request({
+        baseURL:process.env.VUE_APP_SHARDINGURL,
+        url: `/alarm/history/page?pagenum=${data.pagenum}&pagesize=${data.pagesize}&windturbineid=${data.windturbineid?data.windturbineid:''}&starttime=${data.starttime}&endtime=${data.endtime}&keyword=${data.keyword?data.keyword:''}&stationid=${data.stationid?data.stationid:''}&category1=${data.category1?data.category1:''}`,
+        method: "get",
+    });
+};
+//获取报警历史数据
+const getFaultHistory = (data) => {
+    return request({
+        baseURL:process.env.VUE_APP_SHARDINGURL,
+        url: `/fault/history/listpage?pagenum=${data.pageIndex}&pagesize=${data.pageSize}&stationid=${data.stationid}&keyword=${data.keyword}&starttime=${data.startTime}&endtime=${data.endTime}`,
+        method: "get",
+    });
+};
+
+const stationCompared = (data) => {
+    return request({
+        baseURL:process.env.VUE_APP_API,
+        url: `/api/station/compared?models=${data}`,
+        method: "get",
+    });
+};
+//温度矩阵
+const temperatureInfo = (data) => {
+    return request({
+        baseURL:process.env.VUE_APP_API,
+        url: `/api/windturbine/temperature-info?id=${data.id}&status=${data.status}&pagenum=${data.pagenum}&pagesize=${data.pagesize}`,
+        method: "get",
+    });
+};
+//获取风机故障
+const alarmSnap = (data) => {
+    return request({
+        baseURL:process.env.VUE_APP_API,
+        url: `/alarm/alarm-snap?windturbineId=${data.windturbineId}`,
+        method: "get",
+    });
+};
+
+//预警分析
+const analysisDetail = (data) => {
+    return request({
+        baseURL:process.env.VUE_APP_WARNING,
+        url: `/analysis/detail?station=${data.station}&startTs=${data.startTs}&endTs=${data.endTs}&interval=${data.interval}&wtId=${data.wtId}&name=${data.name}`,
+        method: "get",
+    });
+};
+//预警分析
+const alarmCountQuery = (data) => {
+    return request({
+        baseURL:process.env.VUE_APP_WARNING,
+        url: `/alarm/count/query/new2?stationid=${data.stationid}&startdate=${data.startdate}&enddate=${data.enddate}`,
+        method: "get",
+    });
+};
+//状态时间查询
+const statusTime = (data) => {
+    return request({
+        baseURL:process.env.VUE_APP_API,
+        url: `/api/windturbine/status-time?stationId=${data.stationid}&startTs=${data.startTs}&endTs=${data.endTs}`,
+        method: "get",
+    });
+};
+
+//推荐记录查询
+const recommended = (data) => {
+    return request({
+        baseURL:process.env.VUE_APP_API,
+        url: `control-record/recommended?pagesize=${data.pagesize}&pagenum=${data.pagenum}&stationid=${data.stationid}&windturbineid=${data.windturbineid}`,
+        method: "get",
+    });
+};
+
+//状态变化查询
+const statusChange = (data) => {
+    return request({
+        baseURL:process.env.VUE_APP_API,
+        url: `/api/windturbine/status?startTs=${data.startTs}&endTs=${data.endTs}&pagesize=${data.pagesize}&pagenum=${data.pagenum}&windturbineId=${data.windturbineid}`,
+        method: "get",
+    });
+};
+
+//获取风场机型
+const getStationModels = (data) => {
+    return request({
+        baseURL:process.env.VUE_APP_API,
+        url: `/api/station/models?stationid=${data.stationid}`,
+        method: "get",
+    });
+};
+//获取设置查询
+const getSettings = (data) => {
+    return request({
+        baseURL:process.env.VUE_APP_API,
+        url: `/api/settings/recommendation?stationId=${data.stationId}&modelId=${data.modelId}`,
+        method: "get",
+    });
+};
+//修改设置
+const updateSettings = (data) => {
+    return request({
+        baseURL:process.env.VUE_APP_API,
+        url: `/api/settings/recommendation`,
+        method: "post",
+        data:data
+    });
+};
+//恢复默认设置
+const returnSetting = (data) => {
+    return request({
+        baseURL:process.env.VUE_APP_API,
+        url: `/api/settings/recommendation/recover?stationId=${data.stationId}&modelId=${data.modelId}`,
+        method: "get",
+    });
+};
+
+//获取报警列表
+const warningSetting = (data) => {
+    return request({
+        baseURL: process.env.VUE_APP_API,
+        url: `/api/settings/alarminfos?stationId=${data.stationId}&modelId=${data.modelId}`,
+        method: "get"
+    })
+}
+
+//获取预警列表
+const costumeSetting = (data) => {
+    return request({
+        baseURL: process.env.VUE_APP_API,
+        url: `/api/settings/costume-alarminfos?stationId=${data.stationId}&modelId=${data.modelId}`,
+        method: "get"
+    })
+}
+
+export default {
+    login,
+    getStation,
+    getAGCStation,
+    getSnap,
+    refreshData,
+    windturbControl,
+    windturbControlLock,
+    nitWinturbineBaseData,
+    getOverview,
+    sendWarning,
+    sendRecommend,
+    getPower,
+    getOriginalPower,
+    getWindWarning,
+    getHealthDate,
+    getDetial,
+    getWarning,
+    getCustomerLock,
+    getWindturbinePower,
+    getOriginalWindturbinePower,
+    controlRecord,
+    getLatest,
+    getControlType,
+    uodateControlType,
+    getUniformCodes,
+    getBoostStation,
+    getWindturbineFdc,
+    getWindturbineWarning,
+    getFaultHistory,
+    stationCompared,
+    temperatureInfo,
+    alarmSnap,
+    analysisDetail,
+    alarmCountQuery,
+    statusTime,
+    getWindturbine,
+    stationOverview,
+    alarmFault,
+    recommendation,
+    recommended,
+    statusChange,
+    getStationModels,
+    getSettings,
+    updateSettings,
+    returnSetting,
+    warningSetting,
+    costumeSetting,
 };

src/assets/dataService/arcgis-mhs-line.json

@@ -1,234 +1,234 @@
-[
-    {
-        "geometry": {
-            "spatialReference": {
-                "wkid": 4326
-            },
-            "paths": [
-                [
-                    107.0644069,
-                    37.30000218
-                ],
-                [
-                    107.0609736,
-                    37.29027221
-                ],
-                [
-                    107.0545363,
-                    37.29431798
-                ],
-                [
-                    107.0488715,
-                    37.29385708
-                ],
-                [
-                    107.04561,
-                    37.29752713
-                ],
-                [
-                    107.0409322,
-                    37.30025821
-                ],
-                [
-                    107.0374346,
-                    37.30382554
-                ],
-                [
-                    107.0325208,
-                    37.30630038
-                ],
-                [
-                    107.0349455,
-                    37.30909941
-                ],
-                [
-                    107.0286155,
-                    37.30956022
-                ],
-                [
-                    107.0238519,
-                    37.31106208
-                ]
-            ]
-        },
-        "symbol": null,
-        "attributes": {
-            "fc_code": "MHS",
-            "width": 3
-        },
-        "popupTemplate": null
-    },
-    {
-        "geometry": {
-            "spatialReference": {
-                "wkid": 4326
-            },
-            "paths": [
-                [
-                    107.0649004,
-                    37.30542993
-                ],
-                [
-                    107.0527768,
-                    37.30129941
-                ],
-                [
-                    107.048614,
-                    37.30432051
-                ],
-                [
-                    107.0456958,
-                    37.30819486
-                ],
-                [
-                    107.0414472,
-                    37.31130101
-                ],
-                [
-                    107.0348811,
-                    37.31508967
-                ],
-                [
-                    107.0305467,
-                    37.31749588
-                ],
-                [
-                    107.0199444,
-                    37.31830556
-                ],
-                [
-                    107.0611238,
-                    37.30860447
-                ],
-                [
-                    107.0571327,
-                    37.31169354
-                ],
-                [
-                    107.0521975,
-                    37.31369028
-                ]
-            ]
-        },
-        "symbol": null,
-        "attributes": {
-            "fc_code": "MHS",
-            "width": 3
-        },
-        "popupTemplate": null
-    },
-    {
-        "geometry": {
-            "spatialReference": {
-                "wkid": 4326
-            },
-            "paths": [
-                [
-                    107.0693851,
-                    37.30322815
-                ],
-                [
-                    107.0744705,
-                    37.30041183
-                ],
-                [
-                    107.0696425,
-                    37.29628104
-                ],
-                [
-                    107.0717883,
-                    37.29213295
-                ],
-                [
-                    107.0662093,
-                    37.28824071
-                ],
-                [
-                    107.0567894,
-                    37.31587468
-                ],
-                [
-                    107.0560169,
-                    37.31988494
-                ],
-                [
-                    107.0506954,
-                    37.32184734
-                ],
-                [
-                    107.0727539,
-                    37.31087435
-                ],
-                [
-                    107.0761871,
-                    37.3067612
-                ],
-                [
-                    107.0820665,
-                    37.30641985
-                ]
-            ]
-        },
-        "symbol": null,
-        "attributes": {
-            "fc_code": "MHS",
-            "width": 3
-        },
-        "popupTemplate": null
-    },
-    {
-        "geometry": {
-            "spatialReference": {
-                "wkid": 4326
-            },
-            "paths": [
-                [
-                    107.0360184,
-                    37.32406563
-                ],
-                [
-                    107.0318985,
-                    37.32969639
-                ],
-                [
-                    107.0269525,
-                    37.33528407
-                ],
-                [
-                    107.0515966,
-                    37.32539657
-                ],
-                [
-                    107.0396662,
-                    37.33669159
-                ],
-                [
-                    107.0315766,
-                    37.34420644
-                ],
-                [
-                    107.0183909,
-                    37.34223611
-                ],
-                [
-                    107.0164329,
-                    37.33144098
-                ],
-                [
-                    107.0044997,
-                    37.32873236
-                ],
-                [
-                    107.0019168,
-                    37.33337322
-                ]
-            ]
-        },
-        "symbol": null,
-        "attributes": {
-            "fc_code": "MHS",
-            "width": 3
-        },
-        "popupTemplate": null
-    }
+[
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "paths": [
+                [
+                    107.0644069,
+                    37.30000218
+                ],
+                [
+                    107.0609736,
+                    37.29027221
+                ],
+                [
+                    107.0545363,
+                    37.29431798
+                ],
+                [
+                    107.0488715,
+                    37.29385708
+                ],
+                [
+                    107.04561,
+                    37.29752713
+                ],
+                [
+                    107.0409322,
+                    37.30025821
+                ],
+                [
+                    107.0374346,
+                    37.30382554
+                ],
+                [
+                    107.0325208,
+                    37.30630038
+                ],
+                [
+                    107.0349455,
+                    37.30909941
+                ],
+                [
+                    107.0286155,
+                    37.30956022
+                ],
+                [
+                    107.0238519,
+                    37.31106208
+                ]
+            ]
+        },
+        "symbol": null,
+        "attributes": {
+            "fc_code": "MHS",
+            "width": 3
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "paths": [
+                [
+                    107.0649004,
+                    37.30542993
+                ],
+                [
+                    107.0527768,
+                    37.30129941
+                ],
+                [
+                    107.048614,
+                    37.30432051
+                ],
+                [
+                    107.0456958,
+                    37.30819486
+                ],
+                [
+                    107.0414472,
+                    37.31130101
+                ],
+                [
+                    107.0348811,
+                    37.31508967
+                ],
+                [
+                    107.0305467,
+                    37.31749588
+                ],
+                [
+                    107.0199444,
+                    37.31830556
+                ],
+                [
+                    107.0611238,
+                    37.30860447
+                ],
+                [
+                    107.0571327,
+                    37.31169354
+                ],
+                [
+                    107.0521975,
+                    37.31369028
+                ]
+            ]
+        },
+        "symbol": null,
+        "attributes": {
+            "fc_code": "MHS",
+            "width": 3
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "paths": [
+                [
+                    107.0693851,
+                    37.30322815
+                ],
+                [
+                    107.0744705,
+                    37.30041183
+                ],
+                [
+                    107.0696425,
+                    37.29628104
+                ],
+                [
+                    107.0717883,
+                    37.29213295
+                ],
+                [
+                    107.0662093,
+                    37.28824071
+                ],
+                [
+                    107.0567894,
+                    37.31587468
+                ],
+                [
+                    107.0560169,
+                    37.31988494
+                ],
+                [
+                    107.0506954,
+                    37.32184734
+                ],
+                [
+                    107.0727539,
+                    37.31087435
+                ],
+                [
+                    107.0761871,
+                    37.3067612
+                ],
+                [
+                    107.0820665,
+                    37.30641985
+                ]
+            ]
+        },
+        "symbol": null,
+        "attributes": {
+            "fc_code": "MHS",
+            "width": 3
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "paths": [
+                [
+                    107.0360184,
+                    37.32406563
+                ],
+                [
+                    107.0318985,
+                    37.32969639
+                ],
+                [
+                    107.0269525,
+                    37.33528407
+                ],
+                [
+                    107.0515966,
+                    37.32539657
+                ],
+                [
+                    107.0396662,
+                    37.33669159
+                ],
+                [
+                    107.0315766,
+                    37.34420644
+                ],
+                [
+                    107.0183909,
+                    37.34223611
+                ],
+                [
+                    107.0164329,
+                    37.33144098
+                ],
+                [
+                    107.0044997,
+                    37.32873236
+                ],
+                [
+                    107.0019168,
+                    37.33337322
+                ]
+            ]
+        },
+        "symbol": null,
+        "attributes": {
+            "fc_code": "MHS",
+            "width": 3
+        },
+        "popupTemplate": null
+    }
 ]

src/assets/dataService/arcgis-sbq-line.json

@@ -1,173 +1,173 @@
-[{
-	"geometry": {
-		"spatialReference": {
-			"wkid": 4326
-		},
-		"paths": [
-			[106.4515667, 37.60171667],
-			[106.4368167, 37.6033],
-			[106.4341333, 37.60171667],
-			[106.4250833, 37.60041667],
-			[106.4375, 37.5879],
-			[106.4398167, 37.5854],
-			[106.4510667, 37.57506667],
-			[106.4539333, 37.57455],
-			[106.4591, 37.57405],
-			[106.4753, 37.57543333],
-			[106.48525, 37.57398333],
-			[106.4558833, 37.59241667],
-			[106.4520667, 37.59083333],
-			[106.4503333, 37.5869],
-			[106.4539, 37.58436667],
-			[106.4588333, 37.58393333],
-			[106.4689667, 37.58508333],
-			[106.4557667, 37.58851667],
-			[106.4691, 37.58788333],
-			[106.4727167, 37.5859],
-			[106.4853833, 37.58373333],
-			[106.501, 37.57553333],
-			[106.4698833, 37.6003],
-			[106.4722333, 37.59011667],
-			[106.4838333, 37.59091667],
-			[106.4861333, 37.58858333],
-			[106.4880333, 37.58626667],
-			[106.4897833, 37.58736667],
-			[106.5011667, 37.58518333],
-			[106.5076667, 37.58378333],
-			[106.5184167, 37.5862],
-			[106.5253667, 37.58713333],
-			[106.5342833, 37.58786667]
-		]
-	},
-	"symbol": null,
-	"attributes": {
-		"fc_code": "SBQ",
-		"width": 3
-	},
-	"popupTemplate": null
-}, {
-	"geometry": {
-		"spatialReference": {
-			"wkid": 4326
-		},
-		"paths": [
-			[106.4565333, 37.63861667],
-			[106.4537167, 37.63945],
-			[106.4505667, 37.64101667],
-			[106.4369333, 37.64116667],
-			[106.43425, 37.65011667],
-			[106.43735, 37.654],
-			[106.4381333, 37.65733333],
-			[106.4344, 37.65973333],
-			[106.4393167, 37.66668333],
-			[106.4433167, 37.667],
-			[106.45585, 37.65986667],
-			[106.4680167, 37.63951667],
-			[106.4685, 37.65056667],
-			[106.4562167, 37.6501],
-			[106.43795, 37.65021667],
-			[106.4415833, 37.65116667],
-			[106.4413667, 37.65436667],
-			[106.4417667, 37.65761667],
-			[106.4568333, 37.65378333],
-			[106.47095, 37.65178333],
-			[106.4699833, 37.65555],
-			[106.4736333, 37.66703333],
-			[106.4756167, 37.63865],
-			[106.4847167, 37.64136667],
-			[106.4739833, 37.64246667],
-			[106.4729333, 37.65466667],
-			[106.4751667, 37.6567],
-			[106.48745, 37.65055],
-			[106.4874333, 37.65305],
-			[106.4893333, 37.65453333],
-			[106.48695, 37.65755],
-			[106.4923667, 37.64303333],
-			[106.4925333, 37.6522]
-		]
-	},
-	"symbol": null,
-	"attributes": {
-		"fc_code": "SBQ",
-		"width": 3
-	},
-	"popupTemplate": null
-}, {
-	"geometry": {
-		"spatialReference": {
-			"wkid": 4326
-		},
-		"paths": [
-			[106.4372667, 37.60863333],
-			[106.4358333, 37.62263333],
-			[106.4697, 37.62076667],
-			[106.4594167, 37.6087],
-			[106.4585833, 37.60526667],
-			[106.4248667, 37.617],
-			[106.48565, 37.63513333],
-			[106.4233833, 37.63723333],
-			[106.4683667, 37.63515],
-			[106.4348333, 37.61908333],
-			[106.4395333, 37.62545],
-			[106.4423, 37.62185],
-			[106.4758667, 37.63501667],
-			[106.451, 37.60971667],
-			[106.4543167, 37.60706667],
-			[106.4505, 37.62356667],
-			[106.4544833, 37.61888333],
-			[106.4586833, 37.62058333],
-			[106.4376833, 37.63785],
-			[106.4405167, 37.61908333],
-			[106.4345, 37.63703333],
-			[106.4260833, 37.62615],
-			[106.4693667, 37.61766667],
-			[106.4713333, 37.63703333],
-			[106.4408833, 37.60918333]
-		]
-	},
-	"symbol": null,
-	"attributes": {
-		"fc_code": "SBQ",
-		"width": 3
-	},
-	"popupTemplate": null
-}, {
-	"geometry": {
-		"spatialReference": {
-			"wkid": 4326
-		},
-		"paths": [
-			[106.53535, 37.60373333],
-			[106.5314833, 37.60988333],
-			[106.5277833, 37.61066667],
-			[106.5195, 37.6084],
-			[106.5133333, 37.60538333],
-			[106.5099333, 37.62868333],
-			[106.5286667, 37.62028333],
-			[106.5286833, 37.62013333],
-			[106.5013167, 37.62301667],
-			[106.459833, 37.61241667],
-			[106.5030833, 37.61541667],
-			[106.4942667, 37.61318333],
-			[106.4932667, 37.61023333],
-			[106.4872, 37.61611667],
-			[106.4764833, 37.61796667],
-			[106.4820833, 37.61956667],
-			[106.485, 37.62698333],
-			[106.4895333, 37.63096667],
-			[106.4963, 37.6317],
-			[106.5025167, 37.62693333],
-			[106.5047, 37.63411667],
-			[106.5142, 37.63583333],
-			[106.5098667, 37.64313333],
-			[106.50405, 37.64968333],
-			[106.4992333, 37.6394]
-		]
-	},
-	"symbol": null,
-	"attributes": {
-		"fc_code": "SBQ",
-		"width": 3
-	},
-	"popupTemplate": null
-}]
+[{
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"paths": [
+			[106.4515667, 37.60171667],
+			[106.4368167, 37.6033],
+			[106.4341333, 37.60171667],
+			[106.4250833, 37.60041667],
+			[106.4375, 37.5879],
+			[106.4398167, 37.5854],
+			[106.4510667, 37.57506667],
+			[106.4539333, 37.57455],
+			[106.4591, 37.57405],
+			[106.4753, 37.57543333],
+			[106.48525, 37.57398333],
+			[106.4558833, 37.59241667],
+			[106.4520667, 37.59083333],
+			[106.4503333, 37.5869],
+			[106.4539, 37.58436667],
+			[106.4588333, 37.58393333],
+			[106.4689667, 37.58508333],
+			[106.4557667, 37.58851667],
+			[106.4691, 37.58788333],
+			[106.4727167, 37.5859],
+			[106.4853833, 37.58373333],
+			[106.501, 37.57553333],
+			[106.4698833, 37.6003],
+			[106.4722333, 37.59011667],
+			[106.4838333, 37.59091667],
+			[106.4861333, 37.58858333],
+			[106.4880333, 37.58626667],
+			[106.4897833, 37.58736667],
+			[106.5011667, 37.58518333],
+			[106.5076667, 37.58378333],
+			[106.5184167, 37.5862],
+			[106.5253667, 37.58713333],
+			[106.5342833, 37.58786667]
+		]
+	},
+	"symbol": null,
+	"attributes": {
+		"fc_code": "SBQ",
+		"width": 3
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"paths": [
+			[106.4565333, 37.63861667],
+			[106.4537167, 37.63945],
+			[106.4505667, 37.64101667],
+			[106.4369333, 37.64116667],
+			[106.43425, 37.65011667],
+			[106.43735, 37.654],
+			[106.4381333, 37.65733333],
+			[106.4344, 37.65973333],
+			[106.4393167, 37.66668333],
+			[106.4433167, 37.667],
+			[106.45585, 37.65986667],
+			[106.4680167, 37.63951667],
+			[106.4685, 37.65056667],
+			[106.4562167, 37.6501],
+			[106.43795, 37.65021667],
+			[106.4415833, 37.65116667],
+			[106.4413667, 37.65436667],
+			[106.4417667, 37.65761667],
+			[106.4568333, 37.65378333],
+			[106.47095, 37.65178333],
+			[106.4699833, 37.65555],
+			[106.4736333, 37.66703333],
+			[106.4756167, 37.63865],
+			[106.4847167, 37.64136667],
+			[106.4739833, 37.64246667],
+			[106.4729333, 37.65466667],
+			[106.4751667, 37.6567],
+			[106.48745, 37.65055],
+			[106.4874333, 37.65305],
+			[106.4893333, 37.65453333],
+			[106.48695, 37.65755],
+			[106.4923667, 37.64303333],
+			[106.4925333, 37.6522]
+		]
+	},
+	"symbol": null,
+	"attributes": {
+		"fc_code": "SBQ",
+		"width": 3
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"paths": [
+			[106.4372667, 37.60863333],
+			[106.4358333, 37.62263333],
+			[106.4697, 37.62076667],
+			[106.4594167, 37.6087],
+			[106.4585833, 37.60526667],
+			[106.4248667, 37.617],
+			[106.48565, 37.63513333],
+			[106.4233833, 37.63723333],
+			[106.4683667, 37.63515],
+			[106.4348333, 37.61908333],
+			[106.4395333, 37.62545],
+			[106.4423, 37.62185],
+			[106.4758667, 37.63501667],
+			[106.451, 37.60971667],
+			[106.4543167, 37.60706667],
+			[106.4505, 37.62356667],
+			[106.4544833, 37.61888333],
+			[106.4586833, 37.62058333],
+			[106.4376833, 37.63785],
+			[106.4405167, 37.61908333],
+			[106.4345, 37.63703333],
+			[106.4260833, 37.62615],
+			[106.4693667, 37.61766667],
+			[106.4713333, 37.63703333],
+			[106.4408833, 37.60918333]
+		]
+	},
+	"symbol": null,
+	"attributes": {
+		"fc_code": "SBQ",
+		"width": 3
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"paths": [
+			[106.53535, 37.60373333],
+			[106.5314833, 37.60988333],
+			[106.5277833, 37.61066667],
+			[106.5195, 37.6084],
+			[106.5133333, 37.60538333],
+			[106.5099333, 37.62868333],
+			[106.5286667, 37.62028333],
+			[106.5286833, 37.62013333],
+			[106.5013167, 37.62301667],
+			[106.459833, 37.61241667],
+			[106.5030833, 37.61541667],
+			[106.4942667, 37.61318333],
+			[106.4932667, 37.61023333],
+			[106.4872, 37.61611667],
+			[106.4764833, 37.61796667],
+			[106.4820833, 37.61956667],
+			[106.485, 37.62698333],
+			[106.4895333, 37.63096667],
+			[106.4963, 37.6317],
+			[106.5025167, 37.62693333],
+			[106.5047, 37.63411667],
+			[106.5142, 37.63583333],
+			[106.5098667, 37.64313333],
+			[106.50405, 37.64968333],
+			[106.4992333, 37.6394]
+		]
+	},
+	"symbol": null,
+	"attributes": {
+		"fc_code": "SBQ",
+		"width": 3
+	},
+	"popupTemplate": null
+}]

src/assets/styles/main.css

@@ -1,123 +1,123 @@
-* {
-    margin: 0;
-    padding: 0;
-}
-
-html,
-body,
-#app,
-.wrapper {
-    width: 100%;
-    height: 100%;
-    background-color: #000000;
-    overflow: hidden;
-    font-family: "Microsoft YaHei";
-}
-.el-popover{
-    background-color: rgb(36,36,36) !important;
-    border-color: rgb(36,36,36) !important;
-  }
-/*   .el-table{
-    border-color: rgb(36,36,36) !important;
-  }
-  .el-table__border td{
-    border: 1px solid red !important;
-  }
-  .el-table__row>td{
-	border-color: rgb(36,36,36) !important;
-}
-.el-table::before {
-	height: 0px !important;
-}
-.el-table::after {
-	height: 0px !important;
-} */
-.el-dialog{
-  background-color: rgb(36,36,36) !important;
-}
-.el-form-item__label{
-  color: rgb(220, 220, 220) !important;
-}
-.el-dialog__title{
-  color: rgb(220, 220, 220) !important;
-}
-.inputs .el-input__inner{
-  background-color: #000000 !important;
-  color: rgb(220, 220, 220) !important;
-}
-.el-input__inner{
-  /* background-color: rgb(100,100,100) !important; */
-  color: rgb(220, 220, 220) !important;
-  border: 1px solid rgba(77, 77, 77, 1) !important;
-}
-.el-tabs{
-  background-color: black !important;
-  border: none !important;
-  color: rgb(220,220,220) !important;
-}
-.el-table__empty-block{
-  background-color: #141414;
-  border: none;
-}
-.el-tabs__item{
-  background-color: #363636 !important;
-  color: rgb(220,220,220) !important;
-  border-color: black !important;
-} 
-.el-tabs__item:hover{
-  background-color: rgb(36,36,36) !important;
-  border-color: black !important;
-}
-.el-tabs__item.is-active{
-  background-color: rgb(29,106,235) !important;
-}
-
-
-.el-table--border:after,.el-table--group:after,.el-table:before {
-  background-color: black;
-  
-  }
-  
-  .el-table--border,.el-table--group {
-    border-color:black;
-  
-  }
-  
-/*   .el-table td,.el-table th {
-    border-bottom:2px solid rgb(36,36,36);
-  } 
-  
-  .el-table--border th,.el-table--border th.gutter:last-of-type {
-    border-bottom:1px solid yellow;
-  
-  }*/
-  
-  .el-table--border td,.el-table--border th {
-    border-right:1px solid rgb(36,36,36);
-  
-  }
-  
-  .el-table__empty-text{
-    color: black;
-  }
-
-  .el-tree-node:focus>.el-tree-node__content {
-    background-color: #000000 !important;
-  }
-
-  .el-tree-node__content:hover {
-    background-color: #000000 !important;
-  }
-  .el-notification .el-icon-success{
-    color: #67C23A !important;
-  }
-  .el-notification .el-icon-warning {
-    color: #E6A23C !important;
-  }
-  .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
-    border-bottom: 2px solid black !important;
-  }
-  .el-table__body-wrapper::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
+* {
+    margin: 0;
+    padding: 0;
+}
+
+html,
+body,
+#app,
+.wrapper {
+    width: 100%;
+    height: 100%;
+    background-color: #000000;
+    overflow: hidden;
+    font-family: "Microsoft YaHei";
+}
+.el-popover{
+    background-color: rgb(36,36,36) !important;
+    border-color: rgb(36,36,36) !important;
+  }
+/*   .el-table{
+    border-color: rgb(36,36,36) !important;
+  }
+  .el-table__border td{
+    border: 1px solid red !important;
+  }
+  .el-table__row>td{
+	border-color: rgb(36,36,36) !important;
+}
+.el-table::before {
+	height: 0px !important;
+}
+.el-table::after {
+	height: 0px !important;
+} */
+.el-dialog{
+  background-color: rgb(36,36,36) !important;
+}
+.el-form-item__label{
+  color: rgb(220, 220, 220) !important;
+}
+.el-dialog__title{
+  color: rgb(220, 220, 220) !important;
+}
+.inputs .el-input__inner{
+  background-color: #000000 !important;
+  color: rgb(220, 220, 220) !important;
+}
+.el-input__inner{
+  /* background-color: rgb(100,100,100) !important; */
+  color: rgb(220, 220, 220) !important;
+  border: 1px solid rgba(77, 77, 77, 1) !important;
+}
+.el-tabs{
+  background-color: black !important;
+  border: none !important;
+  color: rgb(220,220,220) !important;
+}
+.el-table__empty-block{
+  background-color: #141414;
+  border: none;
+}
+.el-tabs__item{
+  background-color: #363636 !important;
+  color: rgb(220,220,220) !important;
+  border-color: black !important;
+} 
+.el-tabs__item:hover{
+  background-color: rgb(36,36,36) !important;
+  border-color: black !important;
+}
+.el-tabs__item.is-active{
+  background-color: rgb(29,106,235) !important;
+}
+
+
+.el-table--border:after,.el-table--group:after,.el-table:before {
+  background-color: black;
+  
+  }
+  
+  .el-table--border,.el-table--group {
+    border-color:black;
+  
+  }
+  
+/*   .el-table td,.el-table th {
+    border-bottom:2px solid rgb(36,36,36);
+  } 
+  
+  .el-table--border th,.el-table--border th.gutter:last-of-type {
+    border-bottom:1px solid yellow;
+  
+  }*/
+  
+  .el-table--border td,.el-table--border th {
+    border-right:1px solid rgb(36,36,36);
+  
+  }
+  
+  .el-table__empty-text{
+    color: black;
+  }
+
+  .el-tree-node:focus>.el-tree-node__content {
+    background-color: #000000 !important;
+  }
+
+  .el-tree-node__content:hover {
+    background-color: #000000 !important;
+  }
+  .el-notification .el-icon-success{
+    color: #67C23A !important;
+  }
+  .el-notification .el-icon-warning {
+    color: #E6A23C !important;
+  }
+  .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
+    border-bottom: 2px solid black !important;
+  }
+  .el-table__body-wrapper::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
   }

src/background.js

@@ -1,86 +1,86 @@
-'use strict'
-
-import { app, protocol, BrowserWindow } from 'electron'
-import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
-import installExtension, { VUEJS3_DEVTOOLS } from 'electron-devtools-installer'
-const isDevelopment = process.env.NODE_ENV !== 'production'
-
-// Scheme must be registered before the app is ready
-protocol.registerSchemesAsPrivileged([
-  { scheme: 'app', privileges: { secure: true, standard: true } }
-])
-
-async function createWindow() {
-  // Create the browser window.
-  const win = new BrowserWindow({
-    width: 800,
-    height: 600,
-    frame:false,
-    fullscreen:true,
-    webPreferences: {
-      
-      // Use pluginOptions.nodeIntegration, leave this alone
-      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
-      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
-      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
-      nodeIntegration: true,
-      contextIsolation: false,
-      enableRemoteModule: true,   // 打开remote模块
-    }
-  })
-
-  if (process.env.WEBPACK_DEV_SERVER_URL) {
-    // Load the url of the dev server if in development mode
-    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
-    if (!process.env.IS_TEST) win.webContents.openDevTools()
-  } else {
-    createProtocol('app')
-    // Load the index.html when not in development
-    win.loadURL('app://./index.html')
-  }
-}
-
-// Quit when all windows are closed.
-app.on('window-all-closed', () => {
-  // On macOS it is common for applications and their menu bar
-  // to stay active until the user quits explicitly with Cmd + Q
-  if (process.platform !== 'darwin') {
-    app.quit()
-  }
-})
-
-app.on('activate', () => {
-  // On macOS it's common to re-create a window in the app when the
-  // dock icon is clicked and there are no other windows open.
-  if (BrowserWindow.getAllWindows().length === 0) createWindow()
-})
-
-// This method will be called when Electron has finished
-// initialization and is ready to create browser windows.
-// Some APIs can only be used after this event occurs.
-app.on('ready', async () => {
-  if (isDevelopment && !process.env.IS_TEST) {
-    // Install Vue Devtools
-    try {
-      await installExtension(VUEJS3_DEVTOOLS)
-    } catch (e) {
-      console.error('Vue Devtools failed to install:', e.toString())
-    }
-  }
-  createWindow()
-})
-
-// Exit cleanly on request from parent process in development mode.
-if (isDevelopment) {
-  if (process.platform === 'win32') {
-    process.on('message', (data) => {
-      if (data === 'graceful-exit') {
-        app.quit()
-      }
-    })
-  } else {
-    process.on('SIGTERM', () => {
-      app.quit()
-    })
-  }
-}
+'use strict'
+
+import { app, protocol, BrowserWindow } from 'electron'
+import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
+import installExtension, { VUEJS3_DEVTOOLS } from 'electron-devtools-installer'
+const isDevelopment = process.env.NODE_ENV !== 'production'
+
+// Scheme must be registered before the app is ready
+protocol.registerSchemesAsPrivileged([
+  { scheme: 'app', privileges: { secure: true, standard: true } }
+])
+
+async function createWindow() {
+  // Create the browser window.
+  const win = new BrowserWindow({
+    width: 800,
+    height: 600,
+    frame:false,
+    fullscreen:true,
+    webPreferences: {
+      
+      // Use pluginOptions.nodeIntegration, leave this alone
+      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
+      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
+      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
+      nodeIntegration: true,
+      contextIsolation: false,
+      enableRemoteModule: true,   // 打开remote模块
+    }
+  })
+
+  if (process.env.WEBPACK_DEV_SERVER_URL) {
+    // Load the url of the dev server if in development mode
+    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
+    if (!process.env.IS_TEST) win.webContents.openDevTools()
+  } else {
+    createProtocol('app')
+    // Load the index.html when not in development
+    win.loadURL('app://./index.html')
+  }
+}
+
+// Quit when all windows are closed.
+app.on('window-all-closed', () => {
+  // On macOS it is common for applications and their menu bar
+  // to stay active until the user quits explicitly with Cmd + Q
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+app.on('activate', () => {
+  // On macOS it's common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (BrowserWindow.getAllWindows().length === 0) createWindow()
+})
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.on('ready', async () => {
+  if (isDevelopment && !process.env.IS_TEST) {
+    // Install Vue Devtools
+    try {
+      await installExtension(VUEJS3_DEVTOOLS)
+    } catch (e) {
+      console.error('Vue Devtools failed to install:', e.toString())
+    }
+  }
+  createWindow()
+})
+
+// Exit cleanly on request from parent process in development mode.
+if (isDevelopment) {
+  if (process.platform === 'win32') {
+    process.on('message', (data) => {
+      if (data === 'graceful-exit') {
+        app.quit()
+      }
+    })
+  } else {
+    process.on('SIGTERM', () => {
+      app.quit()
+    })
+  }
+}

src/components/basicDataDetails.vue

@@ -1,496 +1,496 @@
-<template>
-  <el-dialog
-    width="50%"
-    @closed="closed()"
-    :show-close="false"
-    class="my-info-dialog"
-  >
-    <template #title>
-      <div class="showTitles">
-        <div class="titles">{{ partsName }}详情</div>
-        <div class="model">
-          <div class="selects" v-show="!switchFlag">
-            <el-select
-              @change="search()"
-              class="inputs"
-              v-model="selectValue"
-              placeholder="请选择"
-            >
-              <el-option
-                v-for="item in options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              >
-              </el-option>
-            </el-select>
-          </div>
-          <div class="choose">
-            <div
-              :class="switchFlag ? 'interval' : 'interval_on'"
-              @click="switchChange"
-            >
-              等间隔
-            </div>
-            <div
-              :class="switchFlag ? 'original_on' : 'original'"
-              @click="switchChange"
-            >
-              原始数据
-            </div>
-          </div>
-        </div>
-      </div>
-    </template>
-    <div class="bodys">
-       <div class="dataTitle">
-        <div class="operate">
-          <el-date-picker
-            class="picker"
-            @change="changes"
-            v-model="timeValue"
-            type="datetimerange"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-          >
-          </el-date-picker>
-          <div class="buttons" @click="search()">查询</div>
-        </div>
-        <div class="buttons" @click="search('flag')">导出</div>
-      </div>
-      <div :id="echartsId" class="showEcharts"></div> 
-    </div>
-  </el-dialog>
-</template>
-<script>
-import * as echarts from "echarts";
-import dayjs from "dayjs";
-import XLSX from "xlsx";
-export default {
-  props: {
-    datas: {
-      type: Array,
-      default: () => {
-        return [];
-      },
-    },
-    partsName: Object,
-    echartsId: Object,
-    calc: {
-      type: Number,
-      default: 1
-    },
-  },
-  updated() {
-    if (this.timeValue.length === 0) {
-      let date = new Date();
-      this.timeValue[0] = date.getTime() - 28800000;
-      this.timeValue[1] = date.getTime();
-    }
-    this.chooseTime = this.timeValue;
-    this.xdata = [];
-    this.values = [];
-    if (this.timeValue[1] - this.timeValue[0] <= 86400000) {
-      this.datas.map((item) => {
-        this.xdata.push(dayjs(item.ts).format("HH:mm"));
-        this.values.push(
-          item.doubleValue
-            ? (item.doubleValue * this.calc).toFixed(2)
-            : item.doubleValue === 0
-            ? item.doubleValue
-            : item.longValue * this.calc
-        );
-      });
-    } else {
-      this.datas.map((item) => {
-        this.xdata.push(dayjs(item.ts).format("MM-DD HH:mm"));
-        this.values.push(
-          item.doubleValue
-            ? (item.doubleValue * this.calc).toFixed(2)
-            : item.doubleValue === 0
-            ? item.doubleValue
-            : item.longValue * this.calc
-        );
-      });
-    }
-    this.$nextTick(() => {
-      this.getEcharts();
-    });
-  },
-  mounted() {},
-  data() {
-    return {
-      xdata: [],
-      values: [],
-      timeValue: [],
-      chooseTime: [],
-      switchFlag: false,
-      selectValue: "60",
-      options: [
-        {
-          value: "60",
-          label: "一分钟",
-        },
-        {
-          value: "300",
-          label: "五分钟",
-        },
-        {
-          value: "600",
-          label: "十分钟",
-        },
-        {
-          value: "1800",
-          label: "三十分钟",
-        },
-        {
-          value: "3600",
-          label: "一小时",
-        },
-        {
-          value: "86400",
-          label: "一天",
-        },
-      ],
-    };
-  },
-  methods: {
-    changes() {
-      let timeValue = [];
-      this.timeValue?.forEach((item) => {
-        timeValue.push(dayjs(item).valueOf());
-      });
-      this.chooseTime = timeValue;
-    },
-    switchChange() {
-      this.switchFlag = !this.switchFlag;
-      this.selectValue = "60";
-      this.search();
-      const loading = this.$loading({
-        lock: true,
-        text: "数据加载中",
-        spinner: "el-icon-loading",
-        background: "rgba(0, 0, 0, 0.7)",
-      });
-      setTimeout(() => {
-        loading.close();
-      }, 1000);
-    },
-    search(values) {
-      let times = [];
-      this.chooseTime.forEach((item) => {
-        times.push(dayjs(item).valueOf());
-      });
-      times.length > 0
-        ? this.switchFlag
-          ? this.$emit("original-data", times)
-          : this.$emit("search-data", times, Number(this.selectValue))
-        : this.$message({
-            showClose: true,
-            message: "请选择查询日期",
-            center: true,
-            type: "error",
-          });
-      if (values) {
-        this.$message({
-          showClose: true,
-          center: true,
-          message: "下载中",
-        });
-        setTimeout(() => {
-          this.export();
-        }, 2000);
-      }
-    },
-    export() {
-      // 数据源
-      let data = [];
-      this.datas.forEach((item) => {
-        let values = {
-          时间: dayjs(item.ts).format("MM-DD HH:mm:ss"),
-          数值: item.doubleValue,
-        };
-        data.push(values);
-      });
-      // 下载的路径
-      let fileName = `${this.partsName}.xlsx`;
-      let filePath = "/root/" + fileName;
-      // 新建workbook
-      const wb = XLSX.utils.book_new();
-      // 新建worksheet，并载入数据
-      const ws = XLSX.utils.json_to_sheet(data);
-      // 设置每列的列宽，10代表10个字符，注意中文占2个字符
-      ws["!cols"] = [{ wch: 30 }, { wch: 30 }];
-      // 生成xlsx文件(workbook，worksheet数据，sheet命名)
-      XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
-
-      // 写文件(workbook，xlsx文件路径+文件名)
-      XLSX.writeFile(wb, filePath);
-      this.$message({
-        showClose: true,
-        message: "下载成功",
-        center: true,
-        type: "success",
-      });
-    },
-    getEcharts() {
-      let chartDom = document.getElementById(this.echartsId);
-      let myChart = echarts.init(chartDom, "#ffffff");
-      let option;
-      option = {
-        tooltip: {
-          trigger: 'axis'
-        },
-        legend: {
-          show: true,
-          data: [this.partsName],
-          right: 56,
-          icon: "circle",
-          itemWidth: 6,
-          inactiveColor: "#606769",
-          textStyle: {
-            color: "#B3BDC0",
-            fontSize: 12,
-          },
-        },
-        xAxis: [
-          {
-            type: "category",
-            boundaryGap: false,
-            axisLabel: {
-              interval:
-                Number((this.xdata.length / 8).toFixed(0)) > 2
-                  ? Number((this.xdata.length / 8).toFixed(0))
-                  : 0,
-              showMinLabel: true,
-              showMaxLabel: true,
-              formatter: "{value}",
-              fontSize: 14,
-              textStyle: {
-                color: "#606769",
-              },
-            },
-            axisLine: {
-              show: false,
-            },
-            data: this.xdata,
-          },
-        ],
-        yAxis: {
-          type: "value",
-          axisLabel: {
-            formatter: "{value}",
-            fontSize: 14,
-          },
-          axisLine: {
-            show: false,
-          },
-          splitLine: {
-            show: true,
-            lineStyle: {
-              color: "#606769",
-              type: "dashed",
-            },
-          },
-        },
-        series: [
-          {
-            // name: this.partsName,
-            smooth: true,
-            showSymbol: false,
-            data: this.values,
-            type: "line",
-          },
-        ],
-      };
-      option && myChart.setOption(option);
-    },
-    closed() {
-      this.chooseTime = [];
-      this.timeValue = [];
-      this.switchFlag = false;
-      this.selectValue = "60";
-      this.$emit("closed");
-    },
-  },
-};
-</script>
-
-<style>
-.showTitles {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: -10px;
-  font-size: 18px;
-  color: #ffffff;
-  height: 40px;
-}
-
-.titles {
-  font-size: 16px;
-  color: #ffffff;
-}
-
-.el-dialog__body {
-  padding: 30px 10px 10px 10px;
-}
-
-.bodys {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background-color: black;
-  width: 100%;
-  margin-top: -30px;
-}
-
-.showEcharts {
-  width: 1030px;
-  height: 480px;
-  margin-left: 30px;
-  /* padding-top: 20px; */
-}
-
-.dataTitle {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: 10px;
-}
-
-.picker {
-  margin-left: 20px;
-  margin-right: 16px;
-}
-
-.el-date-editor .el-range-input {
-  background-color: rgba(26, 26, 26, 1) !important;
-  border: none;
-  color: #ffffff !important;
-}
-
-.el-input__inner {
-  background-color: rgba(26, 26, 26, 1) !important;
-}
-
-.el-date-editor .el-range-separator {
-  color: #ffffff !important;
-}
-
-.el-date-table td.in-range div,
-.el-date-table td.in-range div:hover,
-.el-date-table.is-week-mode .el-date-table__row.current div,
-.el-date-table.is-week-mode .el-date-table__row:hover div {
-  background-color: #ceceff !important;
-}
-
-.operate {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  /* margin-right: 65px; */
-}
-
-.buttons {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100px;
-  height: 40px;
-  background-color: rgba(26, 26, 26, 1);
-  border: 1px solid rgba(77, 77, 77, 1);
-  color: #ffffff;
-  margin-right: 28px;
-  font-size: 12px;
-}
-
-.model {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  color: rgba(240, 240, 240, 1);
-  font-size: 12px;
-}
-
-.el-switch {
-  width: 453px;
-}
-
-.el-switch__label {
-  color: #999999 !important;
-}
-
-.el-switch__label.is-active {
-  color: rgba(37, 116, 219, 1) !important;
-}
-
-.selects {
-  margin-right: 16px;
-}
-
-.choose {
-  width: 160px;
-  height: 25px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  color: #ffffff;
-}
-
-.interval {
-  width: 50%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid rgba(77, 77, 77, 1);
-  border-top-left-radius: 12.5px;
-  border-bottom-left-radius: 12.5px;
-}
-
-.interval_on {
-  width: 50%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: rgba(29, 106, 235, 1);
-  border: 1px solid rgba(29, 106, 235, 1);
-  border-top-left-radius: 12.5px;
-  border-bottom-left-radius: 12.5px;
-}
-
-.original {
-  width: 50%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid rgba(77, 77, 77, 1);
-  border-top-right-radius: 12.5px;
-  border-bottom-right-radius: 12.5px;
-}
-
-.original_on {
-  width: 50%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: rgba(29, 106, 235, 1);
-  border: 1px solid rgba(29, 106, 235, 1);
-  border-top-right-radius: 12.5px;
-  border-bottom-right-radius: 12.5px;
-}
-
-.inputs {
-  border: none;
-  width: 110px !important;
-}
+<template>
+  <el-dialog
+    width="50%"
+    @closed="closed()"
+    :show-close="false"
+    class="my-info-dialog"
+  >
+    <template #title>
+      <div class="showTitles">
+        <div class="titles">{{ partsName }}详情</div>
+        <div class="model">
+          <div class="selects" v-show="!switchFlag">
+            <el-select
+              @change="search()"
+              class="inputs"
+              v-model="selectValue"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div class="choose">
+            <div
+              :class="switchFlag ? 'interval' : 'interval_on'"
+              @click="switchChange"
+            >
+              等间隔
+            </div>
+            <div
+              :class="switchFlag ? 'original_on' : 'original'"
+              @click="switchChange"
+            >
+              原始数据
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+    <div class="bodys">
+       <div class="dataTitle">
+        <div class="operate">
+          <el-date-picker
+            class="picker"
+            @change="changes"
+            v-model="timeValue"
+            type="datetimerange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          >
+          </el-date-picker>
+          <div class="buttons" @click="search()">查询</div>
+        </div>
+        <div class="buttons" @click="search('flag')">导出</div>
+      </div>
+      <div :id="echartsId" class="showEcharts"></div> 
+    </div>
+  </el-dialog>
+</template>
+<script>
+import * as echarts from "echarts";
+import dayjs from "dayjs";
+import XLSX from "xlsx";
+export default {
+  props: {
+    datas: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    partsName: Object,
+    echartsId: Object,
+    calc: {
+      type: Number,
+      default: 1
+    },
+  },
+  updated() {
+    if (this.timeValue.length === 0) {
+      let date = new Date();
+      this.timeValue[0] = date.getTime() - 28800000;
+      this.timeValue[1] = date.getTime();
+    }
+    this.chooseTime = this.timeValue;
+    this.xdata = [];
+    this.values = [];
+    if (this.timeValue[1] - this.timeValue[0] <= 86400000) {
+      this.datas.map((item) => {
+        this.xdata.push(dayjs(item.ts).format("HH:mm"));
+        this.values.push(
+          item.doubleValue
+            ? (item.doubleValue * this.calc).toFixed(2)
+            : item.doubleValue === 0
+            ? item.doubleValue
+            : item.longValue * this.calc
+        );
+      });
+    } else {
+      this.datas.map((item) => {
+        this.xdata.push(dayjs(item.ts).format("MM-DD HH:mm"));
+        this.values.push(
+          item.doubleValue
+            ? (item.doubleValue * this.calc).toFixed(2)
+            : item.doubleValue === 0
+            ? item.doubleValue
+            : item.longValue * this.calc
+        );
+      });
+    }
+    this.$nextTick(() => {
+      this.getEcharts();
+    });
+  },
+  mounted() {},
+  data() {
+    return {
+      xdata: [],
+      values: [],
+      timeValue: [],
+      chooseTime: [],
+      switchFlag: false,
+      selectValue: "60",
+      options: [
+        {
+          value: "60",
+          label: "一分钟",
+        },
+        {
+          value: "300",
+          label: "五分钟",
+        },
+        {
+          value: "600",
+          label: "十分钟",
+        },
+        {
+          value: "1800",
+          label: "三十分钟",
+        },
+        {
+          value: "3600",
+          label: "一小时",
+        },
+        {
+          value: "86400",
+          label: "一天",
+        },
+      ],
+    };
+  },
+  methods: {
+    changes() {
+      let timeValue = [];
+      this.timeValue?.forEach((item) => {
+        timeValue.push(dayjs(item).valueOf());
+      });
+      this.chooseTime = timeValue;
+    },
+    switchChange() {
+      this.switchFlag = !this.switchFlag;
+      this.selectValue = "60";
+      this.search();
+      const loading = this.$loading({
+        lock: true,
+        text: "数据加载中",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+      setTimeout(() => {
+        loading.close();
+      }, 1000);
+    },
+    search(values) {
+      let times = [];
+      this.chooseTime.forEach((item) => {
+        times.push(dayjs(item).valueOf());
+      });
+      times.length > 0
+        ? this.switchFlag
+          ? this.$emit("original-data", times)
+          : this.$emit("search-data", times, Number(this.selectValue))
+        : this.$message({
+            showClose: true,
+            message: "请选择查询日期",
+            center: true,
+            type: "error",
+          });
+      if (values) {
+        this.$message({
+          showClose: true,
+          center: true,
+          message: "下载中",
+        });
+        setTimeout(() => {
+          this.export();
+        }, 2000);
+      }
+    },
+    export() {
+      // 数据源
+      let data = [];
+      this.datas.forEach((item) => {
+        let values = {
+          时间: dayjs(item.ts).format("MM-DD HH:mm:ss"),
+          数值: item.doubleValue,
+        };
+        data.push(values);
+      });
+      // 下载的路径
+      let fileName = `${this.partsName}.xlsx`;
+      let filePath = "/root/" + fileName;
+      // 新建workbook
+      const wb = XLSX.utils.book_new();
+      // 新建worksheet，并载入数据
+      const ws = XLSX.utils.json_to_sheet(data);
+      // 设置每列的列宽，10代表10个字符，注意中文占2个字符
+      ws["!cols"] = [{ wch: 30 }, { wch: 30 }];
+      // 生成xlsx文件(workbook，worksheet数据，sheet命名)
+      XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
+
+      // 写文件(workbook，xlsx文件路径+文件名)
+      XLSX.writeFile(wb, filePath);
+      this.$message({
+        showClose: true,
+        message: "下载成功",
+        center: true,
+        type: "success",
+      });
+    },
+    getEcharts() {
+      let chartDom = document.getElementById(this.echartsId);
+      let myChart = echarts.init(chartDom, "#ffffff");
+      let option;
+      option = {
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          show: true,
+          data: [this.partsName],
+          right: 56,
+          icon: "circle",
+          itemWidth: 6,
+          inactiveColor: "#606769",
+          textStyle: {
+            color: "#B3BDC0",
+            fontSize: 12,
+          },
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            axisLabel: {
+              interval:
+                Number((this.xdata.length / 8).toFixed(0)) > 2
+                  ? Number((this.xdata.length / 8).toFixed(0))
+                  : 0,
+              showMinLabel: true,
+              showMaxLabel: true,
+              formatter: "{value}",
+              fontSize: 14,
+              textStyle: {
+                color: "#606769",
+              },
+            },
+            axisLine: {
+              show: false,
+            },
+            data: this.xdata,
+          },
+        ],
+        yAxis: {
+          type: "value",
+          axisLabel: {
+            formatter: "{value}",
+            fontSize: 14,
+          },
+          axisLine: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#606769",
+              type: "dashed",
+            },
+          },
+        },
+        series: [
+          {
+            // name: this.partsName,
+            smooth: true,
+            showSymbol: false,
+            data: this.values,
+            type: "line",
+          },
+        ],
+      };
+      option && myChart.setOption(option);
+    },
+    closed() {
+      this.chooseTime = [];
+      this.timeValue = [];
+      this.switchFlag = false;
+      this.selectValue = "60";
+      this.$emit("closed");
+    },
+  },
+};
+</script>
+
+<style>
+.showTitles {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: -10px;
+  font-size: 18px;
+  color: #ffffff;
+  height: 40px;
+}
+
+.titles {
+  font-size: 16px;
+  color: #ffffff;
+}
+
+.el-dialog__body {
+  padding: 30px 10px 10px 10px;
+}
+
+.bodys {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: black;
+  width: 100%;
+  margin-top: -30px;
+}
+
+.showEcharts {
+  width: 1030px;
+  height: 480px;
+  margin-left: 30px;
+  /* padding-top: 20px; */
+}
+
+.dataTitle {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 10px;
+}
+
+.picker {
+  margin-left: 20px;
+  margin-right: 16px;
+}
+
+.el-date-editor .el-range-input {
+  background-color: rgba(26, 26, 26, 1) !important;
+  border: none;
+  color: #ffffff !important;
+}
+
+.el-input__inner {
+  background-color: rgba(26, 26, 26, 1) !important;
+}
+
+.el-date-editor .el-range-separator {
+  color: #ffffff !important;
+}
+
+.el-date-table td.in-range div,
+.el-date-table td.in-range div:hover,
+.el-date-table.is-week-mode .el-date-table__row.current div,
+.el-date-table.is-week-mode .el-date-table__row:hover div {
+  background-color: #ceceff !important;
+}
+
+.operate {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  /* margin-right: 65px; */
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100px;
+  height: 40px;
+  background-color: rgba(26, 26, 26, 1);
+  border: 1px solid rgba(77, 77, 77, 1);
+  color: #ffffff;
+  margin-right: 28px;
+  font-size: 12px;
+}
+
+.model {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  color: rgba(240, 240, 240, 1);
+  font-size: 12px;
+}
+
+.el-switch {
+  width: 453px;
+}
+
+.el-switch__label {
+  color: #999999 !important;
+}
+
+.el-switch__label.is-active {
+  color: rgba(37, 116, 219, 1) !important;
+}
+
+.selects {
+  margin-right: 16px;
+}
+
+.choose {
+  width: 160px;
+  height: 25px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  color: #ffffff;
+}
+
+.interval {
+  width: 50%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(77, 77, 77, 1);
+  border-top-left-radius: 12.5px;
+  border-bottom-left-radius: 12.5px;
+}
+
+.interval_on {
+  width: 50%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(29, 106, 235, 1);
+  border: 1px solid rgba(29, 106, 235, 1);
+  border-top-left-radius: 12.5px;
+  border-bottom-left-radius: 12.5px;
+}
+
+.original {
+  width: 50%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(77, 77, 77, 1);
+  border-top-right-radius: 12.5px;
+  border-bottom-right-radius: 12.5px;
+}
+
+.original_on {
+  width: 50%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(29, 106, 235, 1);
+  border: 1px solid rgba(29, 106, 235, 1);
+  border-top-right-radius: 12.5px;
+  border-bottom-right-radius: 12.5px;
+}
+
+.inputs {
+  border: none;
+  width: 110px !important;
+}
 </style>

src/components/boxSelect.vue

@@ -1,210 +1,210 @@
-<template>
-  <div
-    class="box-select__container"
-    @mousedown.left="mouseDown"
-    @mousemove.stop="mouseMove"
-    :class="uuid"
-  >
-    <div
-      class="box-select__coordinate"
-      :style="style"
-      ref="selectContainer"
-    ></div>
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-import { debounce, isNumber } from "lodash";
-import { ref, onUnmounted, nextTick, shallowRef } from "vue";
-
-/**
- * @description 判断元素是否在范围内
- * @param {Object} dom dom元素
- */
-const isWithinRange = (dom, top, bottom, left, right) => {
-  const eleRect = dom.getBoundingClientRect();
-  return !(
-    eleRect.top > bottom ||
-    eleRect.bottom < top ||
-    eleRect.right < left ||
-    eleRect.left > right
-  );
-};
-
-export default {
-  name: "BoxSelect",
-  /**
-   * @member props
-   * @property  {String} [node] 要框选的元素,可以是元素名,也可以是class名, 也可以是id名
-   * @property  {String} [selectedClass] 已选中元素附加的class名
-   */
-  props: {
-    node: {
-      required: true,
-      type: String,
-    },
-    selectedClass: {
-      type: String,
-      default: "box-select__hypocritical",
-    },
-  },
-  // 鼠标按下
-  emits: ["mouseUp", "mouseDown"],
-  setup(props, { emit }) {
-    let top = 0,
-      left = 0,
-      width = 0,
-      height = 0,
-      startX = 0,
-      startY = 0,
-      timer = null,
-      // 记录是框选还是点击
-      mouseOn = false;
-
-    const style = ref({}),
-      selectContainer = ref(null),
-      // 给当前框容器加一个唯一识别符, 以保证所选择到的元素都是当前容器的. 否则会选择到容器外同名的元素
-      uuid = shallowRef("uuid_" + new Date().valueOf());
-
-    const query = (className = "") => {
-      let domName = `.${uuid.value} ${props.node}`;
-      className && (domName += `.${className}`);
-      return Array.from(document.querySelectorAll(domName) || []);
-    };
-
-    const classOperation = (ele, method = "add", className = "") =>
-      ele.classList[method](className);
-
-    const setStyle = (styles = {}, newStyles = {}) => {
-      Object.keys(styles).map((item) => {
-        newStyles[item] = styles[item] + (isNumber(styles[item]) ? "px" : "");
-      });
-      style.value = newStyles;
-    };
-
-    const getAreaWithinElements = () => {
-      const { bottom, left, right, top } =
-        selectContainer.value.getBoundingClientRect();
-
-      // 所有可框选元素
-      const elements = query();
-      // // 已选中元素
-      // const selectedElements = elements.filter((item) =>
-      //   classOperation(item, "contains", props.selectedClass)
-      // );
-      // // 未选中元素
-      // const unselectedElements = elements.filter(
-      //   (item) => !classOperation(item, "contains", props.selectedClass)
-      // );
-      // 本次框选元素
-      let selctList = []
-      for (const key in elements) {
-        for (const i in elements[key].children) {
-          if(Number(i) || i === '0'){
-            let val = elements[key].children[i]
-            const withinRange = isWithinRange(val, top, bottom, left, right);
-            if(withinRange){
-                selctList.push(val)
-            }
-          }
-        }
-      }
-        
-      emit('selectList', selctList);
-      // selectedElements.map((item) => {
-      //     const withinRange = isWithinRange(item, top, bottom, left, right);
-      //     withinRange &&
-      //       classOperation(item, "add", props.selectedClass)
-      //   });
-      //   unselectedElements.map(
-      //     (item) =>
-      //       isWithinRange(item, top, bottom, left, right) &&
-      //       classOperation(item, "add", props.selectedClass)
-      //   );
-
-      // return query(props.selectedClass);
-    };
-
-    const mouseDown = debounce((event) => {
-      timer = setTimeout(() => {
-        mouseOn = true;
-        startX = event.clientX;
-        startY = event.clientY;
-        emit("mouseDown");
-      }, 300);
-      // 重置本次框选的元素列表
-      setStyle({
-        left,
-        startX,
-        top: startY,
-        width: 0,
-        height: 0,
-        display: "block",
-      });
-    });
-
-    const mouseMove = debounce((event) => {
-      if (!mouseOn) return false;
-      const _width = event.clientX - startX;
-      const _height = event.clientY - startY;
-
-      top = _height > 0 ? startY : event.clientY;
-      left = _width > 0 ? startX : event.clientX;
-      width = Math.abs(_width);
-      height = Math.abs(_height);
-      setStyle({ left, top, width, height });
-    });
-
-    const mouseUp = debounce((event) => {
-      timer && clearTimeout(timer);
-      // 判断是否鼠标左键
-      if (event.which !== 1) return false;
-      // 判断是框选还是点击
-      if (!mouseOn) return false;
-      mouseOn = false;
-      setStyle({ display: "none" });
-      // 获得已选中的元素
-      const selectedEles = getAreaWithinElements();
-      // 响应事件,并传递本次框选的元素列表
-      emit("mouseUp", selectedEles);
-    });
-
-    nextTick(() => document.addEventListener("mouseup", mouseUp));
-    onUnmounted(() => document.removeEventListener("mouseup", mouseUp));
-
-    return {
-      mouseUp,
-      mouseDown,
-      mouseMove,
-      timer,
-      style,
-      selectContainer,
-      uuid,
-    };
-  },
-};
-</script>
-
-<style lang="scss">
-.box-select__container {
-  // height: 50vh;
-}
-
-.box-select__coordinate {
-  position: fixed;
-  z-index: 11;
-  left: 0;
-  top: 0;
-  width: 0;
-  height: 0;
-  background: rgba(106, 90, 205,.5);
-  border: 1px solid blue;
-  opacity: 0.6;
-  pointer-events: none;
-}
-
-.box-select__hypocritical {
-  background-color: blue;
-}
+<template>
+  <div
+    class="box-select__container"
+    @mousedown.left="mouseDown"
+    @mousemove.stop="mouseMove"
+    :class="uuid"
+  >
+    <div
+      class="box-select__coordinate"
+      :style="style"
+      ref="selectContainer"
+    ></div>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import { debounce, isNumber } from "lodash";
+import { ref, onUnmounted, nextTick, shallowRef } from "vue";
+
+/**
+ * @description 判断元素是否在范围内
+ * @param {Object} dom dom元素
+ */
+const isWithinRange = (dom, top, bottom, left, right) => {
+  const eleRect = dom.getBoundingClientRect();
+  return !(
+    eleRect.top > bottom ||
+    eleRect.bottom < top ||
+    eleRect.right < left ||
+    eleRect.left > right
+  );
+};
+
+export default {
+  name: "BoxSelect",
+  /**
+   * @member props
+   * @property  {String} [node] 要框选的元素,可以是元素名,也可以是class名, 也可以是id名
+   * @property  {String} [selectedClass] 已选中元素附加的class名
+   */
+  props: {
+    node: {
+      required: true,
+      type: String,
+    },
+    selectedClass: {
+      type: String,
+      default: "box-select__hypocritical",
+    },
+  },
+  // 鼠标按下
+  emits: ["mouseUp", "mouseDown"],
+  setup(props, { emit }) {
+    let top = 0,
+      left = 0,
+      width = 0,
+      height = 0,
+      startX = 0,
+      startY = 0,
+      timer = null,
+      // 记录是框选还是点击
+      mouseOn = false;
+
+    const style = ref({}),
+      selectContainer = ref(null),
+      // 给当前框容器加一个唯一识别符, 以保证所选择到的元素都是当前容器的. 否则会选择到容器外同名的元素
+      uuid = shallowRef("uuid_" + new Date().valueOf());
+
+    const query = (className = "") => {
+      let domName = `.${uuid.value} ${props.node}`;
+      className && (domName += `.${className}`);
+      return Array.from(document.querySelectorAll(domName) || []);
+    };
+
+    const classOperation = (ele, method = "add", className = "") =>
+      ele.classList[method](className);
+
+    const setStyle = (styles = {}, newStyles = {}) => {
+      Object.keys(styles).map((item) => {
+        newStyles[item] = styles[item] + (isNumber(styles[item]) ? "px" : "");
+      });
+      style.value = newStyles;
+    };
+
+    const getAreaWithinElements = () => {
+      const { bottom, left, right, top } =
+        selectContainer.value.getBoundingClientRect();
+
+      // 所有可框选元素
+      const elements = query();
+      // // 已选中元素
+      // const selectedElements = elements.filter((item) =>
+      //   classOperation(item, "contains", props.selectedClass)
+      // );
+      // // 未选中元素
+      // const unselectedElements = elements.filter(
+      //   (item) => !classOperation(item, "contains", props.selectedClass)
+      // );
+      // 本次框选元素
+      let selctList = []
+      for (const key in elements) {
+        for (const i in elements[key].children) {
+          if(Number(i) || i === '0'){
+            let val = elements[key].children[i]
+            const withinRange = isWithinRange(val, top, bottom, left, right);
+            if(withinRange){
+                selctList.push(val)
+            }
+          }
+        }
+      }
+        
+      emit('selectList', selctList);
+      // selectedElements.map((item) => {
+      //     const withinRange = isWithinRange(item, top, bottom, left, right);
+      //     withinRange &&
+      //       classOperation(item, "add", props.selectedClass)
+      //   });
+      //   unselectedElements.map(
+      //     (item) =>
+      //       isWithinRange(item, top, bottom, left, right) &&
+      //       classOperation(item, "add", props.selectedClass)
+      //   );
+
+      // return query(props.selectedClass);
+    };
+
+    const mouseDown = debounce((event) => {
+      timer = setTimeout(() => {
+        mouseOn = true;
+        startX = event.clientX;
+        startY = event.clientY;
+        emit("mouseDown");
+      }, 300);
+      // 重置本次框选的元素列表
+      setStyle({
+        left,
+        startX,
+        top: startY,
+        width: 0,
+        height: 0,
+        display: "block",
+      });
+    });
+
+    const mouseMove = debounce((event) => {
+      if (!mouseOn) return false;
+      const _width = event.clientX - startX;
+      const _height = event.clientY - startY;
+
+      top = _height > 0 ? startY : event.clientY;
+      left = _width > 0 ? startX : event.clientX;
+      width = Math.abs(_width);
+      height = Math.abs(_height);
+      setStyle({ left, top, width, height });
+    });
+
+    const mouseUp = debounce((event) => {
+      timer && clearTimeout(timer);
+      // 判断是否鼠标左键
+      if (event.which !== 1) return false;
+      // 判断是框选还是点击
+      if (!mouseOn) return false;
+      mouseOn = false;
+      setStyle({ display: "none" });
+      // 获得已选中的元素
+      const selectedEles = getAreaWithinElements();
+      // 响应事件,并传递本次框选的元素列表
+      emit("mouseUp", selectedEles);
+    });
+
+    nextTick(() => document.addEventListener("mouseup", mouseUp));
+    onUnmounted(() => document.removeEventListener("mouseup", mouseUp));
+
+    return {
+      mouseUp,
+      mouseDown,
+      mouseMove,
+      timer,
+      style,
+      selectContainer,
+      uuid,
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+.box-select__container {
+  // height: 50vh;
+}
+
+.box-select__coordinate {
+  position: fixed;
+  z-index: 11;
+  left: 0;
+  top: 0;
+  width: 0;
+  height: 0;
+  background: rgba(106, 90, 205,.5);
+  border: 1px solid blue;
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.box-select__hypocritical {
+  background-color: blue;
+}
 </style>

src/components/check/areaCard.vue

@@ -1,201 +1,201 @@
-/* 自定义tabs */
-<template>
-  <!-- <transition>
-        <div :class='areaClass' @mouseover="hover = false" @mouseleave="hover = false" onselectstart="return false">
-            <div :class="headerClass">
-                <div :class='circleClass'></div>
-                <span class="gy-card-title">{{ title }}</span>
-                <img class="gy-card-decoration01" src="../../assets/img/controlcenter/decoration01.png">
-                <img class="gy-card-decoration02" src="../../assets/img/controlcenter/decoration02.png">
-            </div>
-            <div :class='contentClass'>
-                <el-scrollbar style="height: 100%">
-                    <slot></slot>
-                </el-scrollbar>
-            </div>
-        </div>
-    </transition> -->
-  <div class="body">
-    <img class="logo" src="../../assets/img/logo.png" alt="" />
-    <div class="title">{{ title }}</div>
-    <!-- <div class="record" @click="showRecord">校验记录</div> -->
-    <div style="margin-top: 50px; margin-left: 20px; height: 80%">
-      <el-scrollbar>
-        <div class="scoll" style="margin-left: 5px">
-          <MatrixBlock
-            @on-click="handleClick"
-            :dataList="showList"
-          ></MatrixBlock>
-        </div>
-      </el-scrollbar>
-    </div>
-    <OperationRecords
-      ref="records"
-      v-model="display"
-      @closed="closed()"
-    ></OperationRecords>
-    <WindturbineDetailPages
-      v-model="dialogVisible"
-      @close="handleClose"
-      :windturbine="currentWindturbine"
-    >
-    </WindturbineDetailPages>
-  </div>
-</template>
-
-<script>
-import BackgroundData from "utils/BackgroundData";
-import MatrixBlock from "../matrixBlock.vue";
-import OperationRecords from "./operationRecords.vue";
-import WindturbineDetailPages from "../WindturbineDetailPages.vue";
-export default {
-  props: {
-    title: {
-      type: String,
-      default: "校验区",
-      required: true,
-    },
-    height: {
-      type: Number,
-      default: 200,
-    },
-  },
-  components: {
-    MatrixBlock,
-    OperationRecords,
-    WindturbineDetailPages,
-  },
-  data() {
-    return {
-      showList: [],
-      arr: [],
-      display: false,
-      dialogVisible: false,
-      currentWindturbine: {},
-      intervals: null,
-    };
-  },
-  created() {
-    this.dataDeal();
-    this.intervals = setInterval(this.dataDeal, 1000);
-    this.arr = BackgroundData.getInstance().checkouts;
-  },
-  methods: {
-    dataDeal() {
-      if (this.arr.length > 0) {
-        let flag = false;
-        let showList = [];
-        let arr = [];
-        let checks = BackgroundData.getInstance().checkouts;
-        console.log(this.$store.state.windturbinelist);
-        checks.forEach((item) => {
-          if (item.status === this.$store.state.windturbinelist[item.windturbineId].status) {
-            showList.push(this.$store.state.windturbinelist[item.windturbineId]);
-          } else {
-            BackgroundData.getInstance().removeCheckouts(item);
-          }
-          if (new Date().getTime() - item.checkTime > 120000) {
-            BackgroundData.getInstance().removeCheckouts(item);
-            arr.push(item.windturbineId);
-            flag = true;
-          }
-        });
-        this.showList = showList;
-        if (flag) {
-          let mss = arr.join(",") + "风机超时未响应，已移除";
-          this.$notify({
-            title: "控制",
-            message: mss,
-            type: "warning",
-            position: "bottom-right",
-            offset: 60,
-            duration: 3000,
-          });
-          flag = false;
-        }
-      }else{
-        this.showList = [];
-      }
-    },
-    showRecord() {
-      this.display = true;
-      this.$refs.records.dataDeal();
-    },
-    closed() {
-      this.display = false;
-    },
-    handleClick(itm) {
-      this.dialogVisible = true;
-      this.currentWindturbine = itm;
-    },
-    handleClose() {
-      this.dialogVisible = false;
-    },
-  },
-  unmounted() {
-    clearInterval(this.intervals);
-    this.intervals = null;
-  },
-};
-</script>
-
-<style scoped="scoped">
-.body {
-  border: 1px solid #373737;
-  width: 100%;
-  margin-left: 15px;
-  margin-top: 10px;
-  height: 25vh;
-}
-
-.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: #54b75a;
-  border-radius: 50%;
-}
-
-.record {
-  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);
-}
-
-.logo {
-  position: absolute;
-  top: 2px;
-  left: 12px;
-}
-</style>
+/* 自定义tabs */
+<template>
+  <!-- <transition>
+        <div :class='areaClass' @mouseover="hover = false" @mouseleave="hover = false" onselectstart="return false">
+            <div :class="headerClass">
+                <div :class='circleClass'></div>
+                <span class="gy-card-title">{{ title }}</span>
+                <img class="gy-card-decoration01" src="../../assets/img/controlcenter/decoration01.png">
+                <img class="gy-card-decoration02" src="../../assets/img/controlcenter/decoration02.png">
+            </div>
+            <div :class='contentClass'>
+                <el-scrollbar style="height: 100%">
+                    <slot></slot>
+                </el-scrollbar>
+            </div>
+        </div>
+    </transition> -->
+  <div class="body">
+    <img class="logo" src="../../assets/img/logo.png" alt="" />
+    <div class="title">{{ title }}</div>
+    <!-- <div class="record" @click="showRecord">校验记录</div> -->
+    <div style="margin-top: 50px; margin-left: 20px; height: 80%">
+      <el-scrollbar>
+        <div class="scoll" style="margin-left: 5px">
+          <MatrixBlock
+            @on-click="handleClick"
+            :dataList="showList"
+          ></MatrixBlock>
+        </div>
+      </el-scrollbar>
+    </div>
+    <OperationRecords
+      ref="records"
+      v-model="display"
+      @closed="closed()"
+    ></OperationRecords>
+    <WindturbineDetailPages
+      v-model="dialogVisible"
+      @close="handleClose"
+      :windturbine="currentWindturbine"
+    >
+    </WindturbineDetailPages>
+  </div>
+</template>
+
+<script>
+import BackgroundData from "utils/BackgroundData";
+import MatrixBlock from "../matrixBlock.vue";
+import OperationRecords from "./operationRecords.vue";
+import WindturbineDetailPages from "../WindturbineDetailPages.vue";
+export default {
+  props: {
+    title: {
+      type: String,
+      default: "校验区",
+      required: true,
+    },
+    height: {
+      type: Number,
+      default: 200,
+    },
+  },
+  components: {
+    MatrixBlock,
+    OperationRecords,
+    WindturbineDetailPages,
+  },
+  data() {
+    return {
+      showList: [],
+      arr: [],
+      display: false,
+      dialogVisible: false,
+      currentWindturbine: {},
+      intervals: null,
+    };
+  },
+  created() {
+    this.dataDeal();
+    this.intervals = setInterval(this.dataDeal, 1000);
+    this.arr = BackgroundData.getInstance().checkouts;
+  },
+  methods: {
+    dataDeal() {
+      if (this.arr.length > 0) {
+        let flag = false;
+        let showList = [];
+        let arr = [];
+        let checks = BackgroundData.getInstance().checkouts;
+        console.log(this.$store.state.windturbinelist);
+        checks.forEach((item) => {
+          if (item.status === this.$store.state.windturbinelist[item.windturbineId].status) {
+            showList.push(this.$store.state.windturbinelist[item.windturbineId]);
+          } else {
+            BackgroundData.getInstance().removeCheckouts(item);
+          }
+          if (new Date().getTime() - item.checkTime > 120000) {
+            BackgroundData.getInstance().removeCheckouts(item);
+            arr.push(item.windturbineId);
+            flag = true;
+          }
+        });
+        this.showList = showList;
+        if (flag) {
+          let mss = arr.join(",") + "风机超时未响应，已移除";
+          this.$notify({
+            title: "控制",
+            message: mss,
+            type: "warning",
+            position: "bottom-right",
+            offset: 60,
+            duration: 3000,
+          });
+          flag = false;
+        }
+      }else{
+        this.showList = [];
+      }
+    },
+    showRecord() {
+      this.display = true;
+      this.$refs.records.dataDeal();
+    },
+    closed() {
+      this.display = false;
+    },
+    handleClick(itm) {
+      this.dialogVisible = true;
+      this.currentWindturbine = itm;
+    },
+    handleClose() {
+      this.dialogVisible = false;
+    },
+  },
+  unmounted() {
+    clearInterval(this.intervals);
+    this.intervals = null;
+  },
+};
+</script>
+
+<style scoped="scoped">
+.body {
+  border: 1px solid #373737;
+  width: 100%;
+  margin-left: 15px;
+  margin-top: 10px;
+  height: 25vh;
+}
+
+.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: #54b75a;
+  border-radius: 50%;
+}
+
+.record {
+  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);
+}
+
+.logo {
+  position: absolute;
+  top: 2px;
+  left: 12px;
+}
+</style>

src/components/check/checkArea.vue

@@ -1,33 +1,33 @@
-<template>
-  <div class="problem">
-    <AreaCard title="校验区" height="25"></AreaCard>
-  </div>
-</template>
-
-<script>
-  import AreaCard from "./areaCard.vue";
-  import BackgroundData from 'utils/BackgroundData'
-  export default {
-    name: "ProblemArea",
-    components: {
-      AreaCard,
-    },
-    props: {},
-    data() {
-      return {
-      };
-    },
-    computed: {},
-    created: function () {
-
-    },
-    methods: {
-      
-    },
-  };
-</script>
-<style scoped>
-  .problem {
-    height: 100%;
-  }
+<template>
+  <div class="problem">
+    <AreaCard title="校验区" height="25"></AreaCard>
+  </div>
+</template>
+
+<script>
+  import AreaCard from "./areaCard.vue";
+  import BackgroundData from 'utils/BackgroundData'
+  export default {
+    name: "ProblemArea",
+    components: {
+      AreaCard,
+    },
+    props: {},
+    data() {
+      return {
+      };
+    },
+    computed: {},
+    created: function () {
+
+    },
+    methods: {
+      
+    },
+  };
+</script>
+<style scoped>
+  .problem {
+    height: 100%;
+  }
 </style>

src/components/check/operationRecords.vue

@@ -1,410 +1,410 @@
-<template>
-  <el-dialog
-    width="50%"
-    @open="opened()"
-    @closed="closed()"
-    :show-close="false"
-    class="my-info-dialog"
-  >
-    <template #title>
-      <div class="showTitles">
-        <div class="titles">校验记录详情</div>
-      </div>
-    </template>
-    <div class="bodyDetial">
-      <!-- <div style="width: 50%;height:200px;background-color:red;"></div>
-      <div style="width: 50%;height:200px;background-color:yellow;"></div> -->
-      <div class="left-item">
-        <el-scrollbar>
-          <el-input placeholder="输入关键字进行过滤" v-model="filterText">
-          </el-input>
-          <el-tree
-            class="filter-tree"
-            :data="showData"
-            :props="defaultProps"
-            :filter-node-method="filterNode"
-            node-key="id"
-            :default-expanded-keys="[0]"
-            ref="tree"
-            @node-click="handleChange"
-          >
-          </el-tree>
-        </el-scrollbar>
-      </div>
-      <div class="right-item">
-        <div class="dateBar">
-          <el-date-picker
-            class="pickers"
-            @change="changes"
-            v-model="timeValue"
-            type="datetimerange"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-          >
-          </el-date-picker>
-          <div class="buttons" @click="getControlRecord()">查询</div>
-        </div>
-        <el-scrollbar style="height: 86%">
-          <div class="tables">
-            <el-table
-              :data="recordData"
-              class="table"
-              style="width: 100%"
-              height="49vh"
-              :header-cell-style="{
-                background: 'rgb(30,30,30)',
-                color: 'rgb(220,220,220)',
-                padding: '4px',
-                fontSize: '14px',
-                'border-bottom': 'solid 1px rgba(77, 77, 77, 1)',
-              }"
-              :cell-style="{
-                height: '40px',
-                background: 'rgb(30,30,30)',
-                color: 'rgb(220,220,220)',
-                padding: '3px',
-                fontSize: '12px',
-                'border-bottom': '1px solid #000000',
-              }"
-            >
-              <el-table-column
-                prop="time"
-                label="日期"
-                width="120"
-                align="center"
-              >
-              </el-table-column>
-              <el-table-column
-                prop="showName"
-                label="风机号"
-                width="120"
-                align="center"
-              >
-              </el-table-column>
-              <el-table-column
-                prop="controls"
-                label="控制命令"
-                width="100"
-                align="center"
-              >
-              </el-table-column>
-              <el-table-column prop="result" label="操作结果" align="center">
-              </el-table-column>
-              <el-table-column
-                prop="userName"
-                label="操作人"
-                width="160"
-                align="center"
-              >
-              </el-table-column>
-            </el-table>
-          </div>
-        </el-scrollbar>
-        <div class="paginations">
-          <el-pagination
-            :hide-on-single-page="true"
-            :page-size="currentPage"
-            background
-            layout="prev, pager, next"
-            :total="total"
-            @current-change="handleCurrentChange"
-          >
-          </el-pagination>
-        </div>
-      </div>
-    </div>
-  </el-dialog>
-</template>
-<script>
-import dayjs from "dayjs";
-import api from "api/index";
-export default {
-  props: {},
-  updated() {
-    if (this.timeValue.length === 0) {
-      let date = new Date();
-      this.timeValue[0] = date.getTime() - 28800000;
-      this.timeValue[1] = date.getTime() + 3600000;
-    }
-  },
-  mounted() {},
-  data() {
-    return {
-      currentPage: 10,
-      filterText: "",
-      pageIndex: 1,
-      station: [],
-      datas: {},
-      chooseStation: {},
-      timeValue: [],
-      showData: [
-        {
-          id: 0,
-          windturbineId: "全部",
-          stationId: "",
-          children: [],
-        },
-      ],
-      defaultProps: {
-        children: "children",
-        label: "windturbineId",
-      },
-      recordData: [],
-      total: "",
-      controlErorCodes: [
-        "控制成功",
-        "控制命令发送失败",
-        "无效的控制地址",
-        "被控设备异常",
-        "无效的控制功能",
-        "网络连接错误,检查场站通信",
-        "控制结果读取超时",
-        "未知错误",
-        "控制命令错误",
-        "收到无法识别数据",
-        "未读取到数据包",
-        "未知错误",
-        "风机操作过频繁",
-        "风机被挂牌",
-        "风机操作与风机状态不符",
-        "需要登录",
-      ],
-    };
-  },
-  methods: {
-    // getWindturbineFdc() {
-    //   api.getWindturbineFdc().then((res) => {
-    //     this.station = res.data;
-    //     this.getControlRecord();
-    //   });
-    // },
-    dataDeal() {
-      let stationList = this.$store.state.stationList;
-      this.showData[0].children = [];
-      stationList.forEach((item, index) => {
-        let obj = {};
-        obj.id = index + 1;
-        obj.windturbineId = item.address;
-        obj.stationId = item.code;
-        obj.children = [];
-        this.showData[0].children.push(obj);
-      });
-      this.datas = this.$store.state.windturbinelist
-        ? this.$store.state.windturbinelist
-        : {};
-      let arr = Object.keys(this.datas).sort();
-      for (let id of arr) {
-        let item = this.datas[id];
-        this.showData[0].children
-          .filter((val) => val.stationId === item.stationId)[0]
-          .children.push(item);
-      }
-    },
-    handleChange(value) {
-      this.chooseStation = value;
-      this.pageIndex = 1;
-      this.getControlRecord(value);
-    },
-    closed() {
-      this.pageIndex = 1;
-      this.chooseStation = {};
-      this.showData = [
-        {
-          id: 0,
-          windturbineId: "全部",
-          stationId: "",
-          children: [],
-        },
-      ];
-      let stationList = this.$store.state.stationList;
-      stationList.forEach((item, index) => {
-        let obj = {};
-        obj.id = index + 1;
-        obj.windturbineId = item.address;
-        obj.stationId = item.code;
-        obj.children = [];
-        this.showData[0].children.push(obj);
-      });
-
-      this.$emit("closed");
-    },
-    filterNode(value, data) {
-      if (!value) return true;
-      return data.windturbineId.indexOf(value) !== -1;
-    },
-    handleCurrentChange(val) {
-      this.pageIndex = val;
-      this.getControlRecord();
-    },
-    opened() {
-      let date = new Date();
-      this.timeValue[0] = date.getTime() - 28800000;
-      this.timeValue[1] = date.getTime() + 3600000;
-      this.getControlRecord();
-    },
-    getControlRecord() {
-      api
-        .controlRecord({
-          stationId: this.chooseStation.stationId
-            ? this.chooseStation.stationId
-            : "",
-          userName: "",
-          windturbineId: this.chooseStation.id
-            ? ""
-            : this.chooseStation.stationId
-            ? this.chooseStation.windturbineId
-            : "",
-          startTime: dayjs(this.timeValue[0]).format("YYYY/MM/DD HH:mm:ss"),
-          endTime: dayjs(this.timeValue[1]).format("YYYY/MM/DD HH:mm:ss"),
-          pageSize: this.currentPage,
-          pageIndex: this.pageIndex,
-        })
-        .then((res) => {
-          if (res) {
-            let types = {
-              Start: "启动",
-              Stop: "停止",
-              Reset: "复位",
-              Maintain: "维护",
-              UnMaintain: "取消维护",
-              Lock: "挂牌",
-              UnLock: "取消挂牌",
-            };
-            res.data.dataList.forEach((item) => {
-              item.time = dayjs(item.time).format("MM-DD HH:mm:ss");
-              item.result = this.controlErorCodes[item.errorCode];
-              item.controls = types[item.controlType];
-              item.showName = item.windturbineId;
-            });
-            this.total = res.data.total;
-            this.recordData = res.data.dataList;
-          }
-        });
-    },
-  },
-  watch: {
-    filterText(val) {
-      this.$refs.tree.filter(val);
-    },
-  },
-};
-</script>
-
-<style scoped>
-.showTitles {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: -10px;
-  font-size: 18px;
-  color: #ffffff;
-  height: 40px;
-}
-
-.titles {
-  font-size: 16px;
-  color: #ffffff;
-}
-
-.el-dialog__body {
-  padding: 30px 10px 10px 10px;
-}
-
-.bodyDetial {
-  display: flex;
-  flex-direction: row;
-  background-color: black;
-  width: 100%;
-  margin-top: -30px;
-  height: 60vh;
-}
-
-.left-item {
-  width: 20%;
-  height: 100%;
-  background-color: rgba(77, 77, 77, 1);
-  border-right: 2px solid #000000;
-}
-
-.right-item {
-  width: 80%;
-  height: 100%;
-  background-color: rgba(77, 77, 77, 1);
-}
-
-.el-tree {
-  color: #ffffff !important;
-  background-color: rgba(77, 77, 77, 1) !important;
-}
-
-.el-tree-node:focus > .el-tree-node__content {
-  background-color: #000000 !important;
-}
-
-.el-tree-node__content:hover {
-  background-color: #000000 !important;
-}
-
-.dateBar {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  margin-left: 20px;
-}
-
-.pickers {
-  margin-left: 20px;
-}
-
-.tables {
-  margin-top: 20px;
-  width: 95%;
-  margin-left: 3%;
-}
-
-.table {
-  background-color: rgba(77, 77, 77, 1) !important;
-}
-
-.el-table td,
-.el-table th.is-leaf {
-  border-bottom: 1px solid rgba(77, 77, 77, 1) !important;
-}
-
-.el-table__header {
-  width: 100% !important;
-}
-
-.el-table__body-wrapper {
-  background-color: rgba(77, 77, 77, 1) !important;
-}
-
-.el-table::before {
-  width: 0;
-}
-
-tr {
-  line-height: 1.5;
-  background: #1e1e1e;
-  margin-bottom: 2px;
-  border-radius: 5px;
-}
-
-.table-main {
-  font-size: 14px;
-  width: 600px;
-  text-align: center;
-  background: #000000;
-  margin: 5px;
-  border-collapse: separate;
-  border-spacing: 0px 5px;
-}
-
-.paginations {
-  display: flex;
-  flex-direction: row-reverse;
-}
+<template>
+  <el-dialog
+    width="50%"
+    @open="opened()"
+    @closed="closed()"
+    :show-close="false"
+    class="my-info-dialog"
+  >
+    <template #title>
+      <div class="showTitles">
+        <div class="titles">校验记录详情</div>
+      </div>
+    </template>
+    <div class="bodyDetial">
+      <!-- <div style="width: 50%;height:200px;background-color:red;"></div>
+      <div style="width: 50%;height:200px;background-color:yellow;"></div> -->
+      <div class="left-item">
+        <el-scrollbar>
+          <el-input placeholder="输入关键字进行过滤" v-model="filterText">
+          </el-input>
+          <el-tree
+            class="filter-tree"
+            :data="showData"
+            :props="defaultProps"
+            :filter-node-method="filterNode"
+            node-key="id"
+            :default-expanded-keys="[0]"
+            ref="tree"
+            @node-click="handleChange"
+          >
+          </el-tree>
+        </el-scrollbar>
+      </div>
+      <div class="right-item">
+        <div class="dateBar">
+          <el-date-picker
+            class="pickers"
+            @change="changes"
+            v-model="timeValue"
+            type="datetimerange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          >
+          </el-date-picker>
+          <div class="buttons" @click="getControlRecord()">查询</div>
+        </div>
+        <el-scrollbar style="height: 86%">
+          <div class="tables">
+            <el-table
+              :data="recordData"
+              class="table"
+              style="width: 100%"
+              height="49vh"
+              :header-cell-style="{
+                background: 'rgb(30,30,30)',
+                color: 'rgb(220,220,220)',
+                padding: '4px',
+                fontSize: '14px',
+                'border-bottom': 'solid 1px rgba(77, 77, 77, 1)',
+              }"
+              :cell-style="{
+                height: '40px',
+                background: 'rgb(30,30,30)',
+                color: 'rgb(220,220,220)',
+                padding: '3px',
+                fontSize: '12px',
+                'border-bottom': '1px solid #000000',
+              }"
+            >
+              <el-table-column
+                prop="time"
+                label="日期"
+                width="120"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column
+                prop="showName"
+                label="风机号"
+                width="120"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column
+                prop="controls"
+                label="控制命令"
+                width="100"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="result" label="操作结果" align="center">
+              </el-table-column>
+              <el-table-column
+                prop="userName"
+                label="操作人"
+                width="160"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </el-scrollbar>
+        <div class="paginations">
+          <el-pagination
+            :hide-on-single-page="true"
+            :page-size="currentPage"
+            background
+            layout="prev, pager, next"
+            :total="total"
+            @current-change="handleCurrentChange"
+          >
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import dayjs from "dayjs";
+import api from "api/index";
+export default {
+  props: {},
+  updated() {
+    if (this.timeValue.length === 0) {
+      let date = new Date();
+      this.timeValue[0] = date.getTime() - 28800000;
+      this.timeValue[1] = date.getTime() + 3600000;
+    }
+  },
+  mounted() {},
+  data() {
+    return {
+      currentPage: 10,
+      filterText: "",
+      pageIndex: 1,
+      station: [],
+      datas: {},
+      chooseStation: {},
+      timeValue: [],
+      showData: [
+        {
+          id: 0,
+          windturbineId: "全部",
+          stationId: "",
+          children: [],
+        },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "windturbineId",
+      },
+      recordData: [],
+      total: "",
+      controlErorCodes: [
+        "控制成功",
+        "控制命令发送失败",
+        "无效的控制地址",
+        "被控设备异常",
+        "无效的控制功能",
+        "网络连接错误,检查场站通信",
+        "控制结果读取超时",
+        "未知错误",
+        "控制命令错误",
+        "收到无法识别数据",
+        "未读取到数据包",
+        "未知错误",
+        "风机操作过频繁",
+        "风机被挂牌",
+        "风机操作与风机状态不符",
+        "需要登录",
+      ],
+    };
+  },
+  methods: {
+    // getWindturbineFdc() {
+    //   api.getWindturbineFdc().then((res) => {
+    //     this.station = res.data;
+    //     this.getControlRecord();
+    //   });
+    // },
+    dataDeal() {
+      let stationList = this.$store.state.stationList;
+      this.showData[0].children = [];
+      stationList.forEach((item, index) => {
+        let obj = {};
+        obj.id = index + 1;
+        obj.windturbineId = item.name;
+        obj.stationId = item.code;
+        obj.children = [];
+        this.showData[0].children.push(obj);
+      });
+      this.datas = this.$store.state.windturbinelist
+        ? this.$store.state.windturbinelist
+        : {};
+      let arr = Object.keys(this.datas).sort();
+      for (let id of arr) {
+        let item = this.datas[id];
+        this.showData[0].children
+          .filter((val) => val.stationId === item.stationId)[0]
+          .children.push(item);
+      }
+    },
+    handleChange(value) {
+      this.chooseStation = value;
+      this.pageIndex = 1;
+      this.getControlRecord(value);
+    },
+    closed() {
+      this.pageIndex = 1;
+      this.chooseStation = {};
+      this.showData = [
+        {
+          id: 0,
+          windturbineId: "全部",
+          stationId: "",
+          children: [],
+        },
+      ];
+      let stationList = this.$store.state.stationList;
+      stationList.forEach((item, index) => {
+        let obj = {};
+        obj.id = index + 1;
+        obj.windturbineId = item.name;
+        obj.stationId = item.code;
+        obj.children = [];
+        this.showData[0].children.push(obj);
+      });
+
+      this.$emit("closed");
+    },
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.windturbineId.indexOf(value) !== -1;
+    },
+    handleCurrentChange(val) {
+      this.pageIndex = val;
+      this.getControlRecord();
+    },
+    opened() {
+      let date = new Date();
+      this.timeValue[0] = date.getTime() - 28800000;
+      this.timeValue[1] = date.getTime() + 3600000;
+      this.getControlRecord();
+    },
+    getControlRecord() {
+      api
+        .controlRecord({
+          stationId: this.chooseStation.stationId
+            ? this.chooseStation.stationId
+            : "",
+          userName: "",
+          windturbineId: this.chooseStation.id
+            ? ""
+            : this.chooseStation.stationId
+            ? this.chooseStation.windturbineId
+            : "",
+          startTime: dayjs(this.timeValue[0]).format("YYYY/MM/DD HH:mm:ss"),
+          endTime: dayjs(this.timeValue[1]).format("YYYY/MM/DD HH:mm:ss"),
+          pageSize: this.currentPage,
+          pageIndex: this.pageIndex,
+        })
+        .then((res) => {
+          if (res) {
+            let types = {
+              Start: "启动",
+              Stop: "停止",
+              Reset: "复位",
+              Maintain: "维护",
+              UnMaintain: "取消维护",
+              Lock: "挂牌",
+              UnLock: "取消挂牌",
+            };
+            res.data.dataList.forEach((item) => {
+              item.time = dayjs(item.time).format("MM-DD HH:mm:ss");
+              item.result = this.controlErorCodes[item.errorCode];
+              item.controls = types[item.controlType];
+              item.showName = item.windturbineId;
+            });
+            this.total = res.data.total;
+            this.recordData = res.data.dataList;
+          }
+        });
+    },
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.showTitles {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: -10px;
+  font-size: 18px;
+  color: #ffffff;
+  height: 40px;
+}
+
+.titles {
+  font-size: 16px;
+  color: #ffffff;
+}
+
+.el-dialog__body {
+  padding: 30px 10px 10px 10px;
+}
+
+.bodyDetial {
+  display: flex;
+  flex-direction: row;
+  background-color: black;
+  width: 100%;
+  margin-top: -30px;
+  height: 60vh;
+}
+
+.left-item {
+  width: 20%;
+  height: 100%;
+  background-color: rgba(77, 77, 77, 1);
+  border-right: 2px solid #000000;
+}
+
+.right-item {
+  width: 80%;
+  height: 100%;
+  background-color: rgba(77, 77, 77, 1);
+}
+
+.el-tree {
+  color: #ffffff !important;
+  background-color: rgba(77, 77, 77, 1) !important;
+}
+
+.el-tree-node:focus > .el-tree-node__content {
+  background-color: #000000 !important;
+}
+
+.el-tree-node__content:hover {
+  background-color: #000000 !important;
+}
+
+.dateBar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-left: 20px;
+}
+
+.pickers {
+  margin-left: 20px;
+}
+
+.tables {
+  margin-top: 20px;
+  width: 95%;
+  margin-left: 3%;
+}
+
+.table {
+  background-color: rgba(77, 77, 77, 1) !important;
+}
+
+.el-table td,
+.el-table th.is-leaf {
+  border-bottom: 1px solid rgba(77, 77, 77, 1) !important;
+}
+
+.el-table__header {
+  width: 100% !important;
+}
+
+.el-table__body-wrapper {
+  background-color: rgba(77, 77, 77, 1) !important;
+}
+
+.el-table::before {
+  width: 0;
+}
+
+tr {
+  line-height: 1.5;
+  background: #1e1e1e;
+  margin-bottom: 2px;
+  border-radius: 5px;
+}
+
+.table-main {
+  font-size: 14px;
+  width: 600px;
+  text-align: center;
+  background: #000000;
+  margin: 5px;
+  border-collapse: separate;
+  border-spacing: 0px 5px;
+}
+
+.paginations {
+  display: flex;
+  flex-direction: row-reverse;
+}
 </style>

src/components/control/controlArea.vue

@@ -1,46 +1,46 @@
-<template>
-  <div class="problem">
-    <AreaCard title="控制区" height="60" :windturbineList="windturbineList" :current="current" ref="areaCard"></AreaCard>
-  </div>
-</template>
-
-<script>
-  import AreaCard from "./areaCard.vue";
-  export default {
-    name: "ProblemArea",
-    components: {
-      AreaCard,
-    },
-    props: {
-      current: {
-        type: Number,
-      },
-      windturbineList: {
-        type: String,
-      },
-    },
-    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)
-      }
-    }
-  };
-</script>
-<style scoped>
-  .problem {
-    height: 100%;
-  }
+<template>
+  <div class="problem">
+    <AreaCard title="控制区" height="60" :windturbineList="windturbineList" :current="current" ref="areaCard"></AreaCard>
+  </div>
+</template>
+
+<script>
+  import AreaCard from "./areaCard.vue";
+  export default {
+    name: "ProblemArea",
+    components: {
+      AreaCard,
+    },
+    props: {
+      current: {
+        type: Number,
+      },
+      windturbineList: {
+        type: String,
+      },
+    },
+    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)
+      }
+    }
+  };
+</script>
+<style scoped>
+  .problem {
+    height: 100%;
+  }
 </style>

src/components/control/parametersContrast.vue

@@ -1,323 +1,323 @@
-<template>
-  <el-dialog
-    width="85%"
-    @opened="opened()"
-    @closed="closed()"
-    :show-close="false"
-    class="my-info-dialog"
-  >
-    <template #title>
-      <div style="margin-top: -10px; color: #ffffff">参数对比</div>
-    </template>
-    <div class="body">
-      <div class="title" v-if="labelList.length > 0">
-        <div class="labelList">
-          <div
-            :class="items?.type ? 'label_on' : 'label'"
-            v-for="(items, index) in labelList"
-            :key="index"
-            @click="handleClick(items)"
-          >
-            {{ items.name }}
-          </div>
-        </div>
-      </div>
-
-      <div class="titleList" v-if="dataList.length > 0">
-        <el-table
-          :data="dataList"
-          class="table"
-          width="100%"
-          :header-cell-style="{
-            background: '#000000',
-            color: 'rgb(220,220,220)',
-            padding: '4px',
-            fontSize: '14px',
-            'border-bottom': 'solid 1px black',
-          }"
-          :cell-style="{
-            height: '45px',
-            background: 'rgb(30,30,30)',
-            color: 'rgb(220,220,220)',
-            'line-height': '0px',
-            fontSize: '12px',
-            'border-bottom': '1px solid #000000',
-          }"
-        >
-          <el-table-column
-            v-for="(item, index) in titleList"
-            :key="index"
-            min-width="170"
-            align="center"
-            :label="item.name"
-            @click="showPercent(item)"
-          >
-            <template #default="scope" @click="showPercent(item)">
-              <span @click="showPercent(item)">
-                <div
-                  class="cell"
-                  style="
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                  "
-                >
-                  <div
-                    class="left"
-                    v-if="item.showFlag && index !== 0"
-                    :style="`width:${
-                      (scope?.row.filter((val) => val.name === item.name)[0]
-                        ?.value /
-                        item.maxValue) *
-                      95
-                    }%;position: absolute;left: 10px;`"
-                  ></div>
-                  <div style="position: absolute">
-                    {{
-                      index === 0
-                        ? scope?.row.filter((val) => val.name === item.name)[0]
-                            ?.value
-                        : scope?.row
-                            .filter((val) => val.name === item.name)[0]
-                            ?.value?.toFixed(2)
-                    }}
-                  </div>
-                </div>
-              </span>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-    </div>
-  </el-dialog>
-</template>
-<script>
-import api from "api/index";
-export default {
-  props: {
-    chooseList: {
-      type: Array,
-      default: () => {
-        return [];
-      },
-    },
-  },
-  data() {
-    return {
-      dataList: [],
-      labelList: [],
-      allData: {},
-      arrList: [],
-      titleList: [],
-      // intervals: null,
-    };
-  },
-  methods: {
-    opened() {
-      this.dataList = [];
-      this.getCompared();
-      // this.intervals = setInterval(this.getCompared, 5000);
-    },
-    getCompared() {
-      this.labelList = [
-        {
-          name: "全部",
-        },
-      ];
-      let arr = [];
-      this.chooseList.forEach((item) => {
-        let obj = `${item.stationId}.${item.modelId}`;
-        arr.push(obj);
-      });
-      let list = Array.from(new Set(arr));
-      let params = list.join(",");
-      api.stationCompared(params).then((res) => {
-        if (res) {
-          this.arrList = res.data[list[0]];
-          this.allData = res.data;
-          this.labelList = [...this.labelList, ...res.data[list[0]]];
-          this.labelList.forEach((item) => {
-            item.type = true;
-          });
-          this.titleList = JSON.parse(JSON.stringify(this.labelList));
-          this.titleList[0].name = "风机";
-          this.getLatest(0);
-        }
-      });
-    },
-    getLatest(index) {
-      let list = [];
-
-      let arr = this.arrList.map((item) => {
-        return {
-          ...item,
-        };
-      });
-      this.titleList.forEach((item, index) => {
-        if (index !== 0) {
-          arr.forEach(val =>{
-            if(val.name === item.name){
-              val.type = true
-            }
-          })
-        }
-      });
-      arr.map((item) => {
-        if (this.labelList.filter((val) => val.name === item.name)[0]?.type) {
-          list.push(item.code);
-        }
-      });
-      arr.unshift({
-        name: "风机",
-        value: this.chooseList[index].windturbineId,
-      });
-      let params = list.join(",");
-      api
-        .nitWinturbineBaseData({
-          thingType: "windturbine",
-          thingId: this.chooseList[index].windturbineId,
-          uniformCodes: params,
-        })
-        .then((res) => {
-          if (res) {
-            arr.forEach((item) => {
-              if (item.type) {
-                item.value = res.data[item.code]?.value;
-              }
-            });
-            this.dataList.push(arr);
-            if (index < this.chooseList.length - 1) {
-              index++;
-              this.getLatest(index);
-            } else {
-              this.titleList.forEach((item, index) => {
-                if (index > 0) {
-                  let datas = [];
-                  this.dataList.map((items) => {
-                    datas.push(
-                      items.filter((val) => item.name === val.name)[0]?.value
-                    );
-                  });
-                  item.maxValue = Math.max.apply(
-                    null,
-                    datas.map((v) => v)
-                  );
-                  item.showFlag = false;
-                }
-              });
-            }
-          }
-        });
-    },
-    closed() {
-      this.labelList = [];
-      this.dataList = [];
-      this.allData = {};
-      this.arrList = [];
-      // clearInterval(this.intervals);
-      // this.intervals = null;
-      this.$emit('par-closed');
-    },
-    handleClick(value) {
-      this.dataList = [];
-      this.titleList = [];
-      let titleList = [
-        {
-          name: "风机",
-          type: true,
-        },
-      ];
-      if (value.name === "全部") {
-        if (value.type) {
-          this.labelList.forEach((item) => {
-            item.type = false;
-          });
-        } else {
-          this.labelList.forEach((item) => {
-            item.type = true;
-          });
-        }
-      } else {
-        value.type = !value.type;
-      }
-      this.labelList.forEach((item) => {
-        if (item.type && item.name !== "全部") {
-          titleList.push(item);
-        }
-      });
-      this.titleList = JSON.parse(JSON.stringify(titleList));
-      this.getLatest(0);
-    },
-    showPercent(item) {
-      item.showFlag = !item.showFlag;
-    },
-  },
-};
-</script>
-<style scoped>
-.body {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 62vh;
-  overflow-y: auto;
-}
-.title {
-  /* height: 300px; */
-}
-.labelList {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-.label {
-  border: 1px solid #999999;
-  padding: 2px 4px;
-  margin: 0 10px 10px 0;
-  color: #999999;
-}
-.label_on {
-  border: 1px solid rgba(37, 116, 219, 1);
-  background-color: rgba(37, 116, 219, 1);
-  color: #ffffff;
-  padding: 2px 4px;
-  margin: 0 10px 10px 0;
-}
-.titleList {
-  width: 100%;
-}
-.left {
-  height: 20px;
-  background: linear-gradient(
-    to right,
-    rgba(37, 116, 219, 1),
-    rgba(37, 116, 219, 0.6)
-  );
-}
-.table {
-  background-color: #000000 !important;
-}
-
-.el-table td,
-.el-table th.is-leaf {
-  border-bottom: 1px solid #000000 !important;
-}
-
-.el-table__header {
-  width: 100% !important;
-}
-
-.el-table__body-wrapper {
-  background-color: #000000 !important;
-}
-
-.el-table::before {
-  width: 0;
-}
-.el-table__body-wrapper is-scrolling-left {
-  height: 90% !important;
-}
-/* .el-table--scrollable-y ::-webkit-scrollbar {
-  display: none;
-} */
+<template>
+  <el-dialog
+    width="85%"
+    @opened="opened()"
+    @closed="closed()"
+    :show-close="false"
+    class="my-info-dialog"
+  >
+    <template #title>
+      <div style="margin-top: -10px; color: #ffffff">参数对比</div>
+    </template>
+    <div class="body">
+      <div class="title" v-if="labelList.length > 0">
+        <div class="labelList">
+          <div
+            :class="items?.type ? 'label_on' : 'label'"
+            v-for="(items, index) in labelList"
+            :key="index"
+            @click="handleClick(items)"
+          >
+            {{ items.name }}
+          </div>
+        </div>
+      </div>
+
+      <div class="titleList" v-if="dataList.length > 0">
+        <el-table
+          :data="dataList"
+          class="table"
+          width="100%"
+          :header-cell-style="{
+            background: '#000000',
+            color: 'rgb(220,220,220)',
+            padding: '4px',
+            fontSize: '14px',
+            'border-bottom': 'solid 1px black',
+          }"
+          :cell-style="{
+            height: '45px',
+            background: 'rgb(30,30,30)',
+            color: 'rgb(220,220,220)',
+            'line-height': '0px',
+            fontSize: '12px',
+            'border-bottom': '1px solid #000000',
+          }"
+        >
+          <el-table-column
+            v-for="(item, index) in titleList"
+            :key="index"
+            min-width="170"
+            align="center"
+            :label="item.name"
+            @click="showPercent(item)"
+          >
+            <template #default="scope" @click="showPercent(item)">
+              <span @click="showPercent(item)">
+                <div
+                  class="cell"
+                  style="
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                  "
+                >
+                  <div
+                    class="left"
+                    v-if="item.showFlag && index !== 0"
+                    :style="`width:${
+                      (scope?.row.filter((val) => val.name === item.name)[0]
+                        ?.value /
+                        item.maxValue) *
+                      95
+                    }%;position: absolute;left: 10px;`"
+                  ></div>
+                  <div style="position: absolute">
+                    {{
+                      index === 0
+                        ? scope?.row.filter((val) => val.name === item.name)[0]
+                            ?.value
+                        : scope?.row
+                            .filter((val) => val.name === item.name)[0]
+                            ?.value?.toFixed(2)
+                    }}
+                  </div>
+                </div>
+              </span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import api from "api/index";
+export default {
+  props: {
+    chooseList: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      dataList: [],
+      labelList: [],
+      allData: {},
+      arrList: [],
+      titleList: [],
+      // intervals: null,
+    };
+  },
+  methods: {
+    opened() {
+      this.dataList = [];
+      this.getCompared();
+      // this.intervals = setInterval(this.getCompared, 5000);
+    },
+    getCompared() {
+      this.labelList = [
+        {
+          name: "全部",
+        },
+      ];
+      let arr = [];
+      this.chooseList.forEach((item) => {
+        let obj = `${item.stationId}.${item.modelId}`;
+        arr.push(obj);
+      });
+      let list = Array.from(new Set(arr));
+      let params = list.join(",");
+      api.stationCompared(params).then((res) => {
+        if (res) {
+          this.arrList = res.data[list[0]];
+          this.allData = res.data;
+          this.labelList = [...this.labelList, ...res.data[list[0]]];
+          this.labelList.forEach((item) => {
+            item.type = true;
+          });
+          this.titleList = JSON.parse(JSON.stringify(this.labelList));
+          this.titleList[0].name = "风机";
+          this.getLatest(0);
+        }
+      });
+    },
+    getLatest(index) {
+      let list = [];
+
+      let arr = this.arrList.map((item) => {
+        return {
+          ...item,
+        };
+      });
+      this.titleList.forEach((item, index) => {
+        if (index !== 0) {
+          arr.forEach(val =>{
+            if(val.name === item.name){
+              val.type = true
+            }
+          })
+        }
+      });
+      arr.map((item) => {
+        if (this.labelList.filter((val) => val.name === item.name)[0]?.type) {
+          list.push(item.code);
+        }
+      });
+      arr.unshift({
+        name: "风机",
+        value: this.chooseList[index].windturbineId,
+      });
+      let params = list.join(",");
+      api
+        .nitWinturbineBaseData({
+          thingType: "windturbine",
+          thingId: this.chooseList[index].windturbineId,
+          uniformCodes: params,
+        })
+        .then((res) => {
+          if (res) {
+            arr.forEach((item) => {
+              if (item.type) {
+                item.value = res.data[item.code]?.value;
+              }
+            });
+            this.dataList.push(arr);
+            if (index < this.chooseList.length - 1) {
+              index++;
+              this.getLatest(index);
+            } else {
+              this.titleList.forEach((item, index) => {
+                if (index > 0) {
+                  let datas = [];
+                  this.dataList.map((items) => {
+                    datas.push(
+                      items.filter((val) => item.name === val.name)[0]?.value
+                    );
+                  });
+                  item.maxValue = Math.max.apply(
+                    null,
+                    datas.map((v) => v)
+                  );
+                  item.showFlag = false;
+                }
+              });
+            }
+          }
+        });
+    },
+    closed() {
+      this.labelList = [];
+      this.dataList = [];
+      this.allData = {};
+      this.arrList = [];
+      // clearInterval(this.intervals);
+      // this.intervals = null;
+      this.$emit('par-closed');
+    },
+    handleClick(value) {
+      this.dataList = [];
+      this.titleList = [];
+      let titleList = [
+        {
+          name: "风机",
+          type: true,
+        },
+      ];
+      if (value.name === "全部") {
+        if (value.type) {
+          this.labelList.forEach((item) => {
+            item.type = false;
+          });
+        } else {
+          this.labelList.forEach((item) => {
+            item.type = true;
+          });
+        }
+      } else {
+        value.type = !value.type;
+      }
+      this.labelList.forEach((item) => {
+        if (item.type && item.name !== "全部") {
+          titleList.push(item);
+        }
+      });
+      this.titleList = JSON.parse(JSON.stringify(titleList));
+      this.getLatest(0);
+    },
+    showPercent(item) {
+      item.showFlag = !item.showFlag;
+    },
+  },
+};
+</script>
+<style scoped>
+.body {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 62vh;
+  overflow-y: auto;
+}
+.title {
+  /* height: 300px; */
+}
+.labelList {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.label {
+  border: 1px solid #999999;
+  padding: 2px 4px;
+  margin: 0 10px 10px 0;
+  color: #999999;
+}
+.label_on {
+  border: 1px solid rgba(37, 116, 219, 1);
+  background-color: rgba(37, 116, 219, 1);
+  color: #ffffff;
+  padding: 2px 4px;
+  margin: 0 10px 10px 0;
+}
+.titleList {
+  width: 100%;
+}
+.left {
+  height: 20px;
+  background: linear-gradient(
+    to right,
+    rgba(37, 116, 219, 1),
+    rgba(37, 116, 219, 0.6)
+  );
+}
+.table {
+  background-color: #000000 !important;
+}
+
+.el-table td,
+.el-table th.is-leaf {
+  border-bottom: 1px solid #000000 !important;
+}
+
+.el-table__header {
+  width: 100% !important;
+}
+
+.el-table__body-wrapper {
+  background-color: #000000 !important;
+}
+
+.el-table::before {
+  width: 0;
+}
+.el-table__body-wrapper is-scrolling-left {
+  height: 90% !important;
+}
+/* .el-table--scrollable-y ::-webkit-scrollbar {
+  display: none;
+} */
 </style>

src/components/dataDetails.vue

@@ -1,144 +1,144 @@
-<template>
-    <el-dialog  width="50%" @closed="closed()" :show-close="false" class="my-info-dialog">
-        <template #title>
-            <div class="showTitles">
-				<div class="titles">{{title}}详情</div>
-			</div>
-		</template>
-        <div class="body">
-            <div id="detailEcharts" class="echarts"></div>
-        </div>
-    </el-dialog>
-</template>
-<script>
-    import * as echarts from "echarts";
-    export default {
-        props: {
-            title: {
-                type: String,
-                default: '111',
-                required: true,
-            },
-        },
-        updated() {
-            this.getEcharts()
-        },
-        mounted() {
-
-        },
-        data(){
-            return{
-                xdata: []
-            }
-        },
-        methods: {
-            getEcharts() {
-                let chartDom = document.getElementById('detailEcharts');
-                let myChart = echarts.init(chartDom, '#ffffff');
-                let option;
-                option = {
-                    legend: {
-                        show: true,
-                        data: ["111", "222"],
-                        right: 56,
-                        icon: "circle",
-                        itemWidth: 6,
-                        inactiveColor: '#606769',
-                        textStyle: {
-                            color: '#B3BDC0',
-                            fontSize: 12,
-                        },
-                    },
-                    // title: {
-                    //     text: 'Income of Germany and France since 1950'
-                    // },
-                    tooltip: {
-                        trigger: 'axis'
-                    },
-                    xAxis: [
-                        {
-                            type: "category",
-                            boundaryGap: false,
-                            axisLabel: {
-                                interval: 60,
-                                showMinLabel: true,
-                                showMaxLabel: true,
-                                formatter: "{value}",
-                                fontSize: 14,
-                                textStyle: {
-                                    color: '#606769',
-                                },
-                            },
-                            axisLine: {
-                                show: false,
-                            },
-                            data: this.xdata,
-                        },
-                    ],
-                    yAxis: {
-                        type: "value",
-                        // name: 'y轴',
-                        axisLabel: {
-                            formatter: "{value}",
-                            fontSize: 14,
-                        },
-                        axisLine: {
-                            show: false,
-                        },
-                        splitLine: {
-                        show: true,
-                        lineStyle: {
-                            color: '#606769',
-                            type: "dashed",
-                        },
-                        },
-                    },
-                    series: [{
-                        name: '111',
-                        smooth: true,
-                        showSymbol: false,
-                        data: [150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260,],
-                        type: 'line'
-                    },
-                    {
-                        name: '222',
-                        smooth: true,
-                        showSymbol: false,
-                        data: [50, 30, 24, 18, 35, 47, 60, 50, 30, 24, 18, 35, 47, 60, 50, 30, 24, 18, 35, 47, 60, 50, 30, 24, 18, 35, 47, 60, 50, 30, 24, 18, 35, 47, 60,],
-                        type: 'line'
-                    }]
-                };
-
-                option && myChart.setOption(option);
-            },
-            closed() {
-                this.$emit('closed');
-            },
-        },
-    }
-</script>
-
-<style>
-    .showTitles {
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		justify-content: center;
-		margin-top: -10px;
-		font-size: 18px;
-		color: #FFFFFF;
-	}
-    .body {
-		background-color: black;
-		width: 100%;
-		margin-top: -30px;
-		/* height: 200px; */
-	}
-    .echarts {
-        width: 900px;
-        height: 480px;
-        /* margin-top: 20px; */
-        margin-left: 10px;
-        padding-top: 20px;
-    }
+<template>
+    <el-dialog  width="50%" @closed="closed()" :show-close="false" class="my-info-dialog">
+        <template #title>
+            <div class="showTitles">
+				<div class="titles">{{title}}详情</div>
+			</div>
+		</template>
+        <div class="body">
+            <div id="detailEcharts" class="echarts"></div>
+        </div>
+    </el-dialog>
+</template>
+<script>
+    import * as echarts from "echarts";
+    export default {
+        props: {
+            title: {
+                type: String,
+                default: '111',
+                required: true,
+            },
+        },
+        updated() {
+            this.getEcharts()
+        },
+        mounted() {
+
+        },
+        data(){
+            return{
+                xdata: []
+            }
+        },
+        methods: {
+            getEcharts() {
+                let chartDom = document.getElementById('detailEcharts');
+                let myChart = echarts.init(chartDom, '#ffffff');
+                let option;
+                option = {
+                    legend: {
+                        show: true,
+                        data: ["111", "222"],
+                        right: 56,
+                        icon: "circle",
+                        itemWidth: 6,
+                        inactiveColor: '#606769',
+                        textStyle: {
+                            color: '#B3BDC0',
+                            fontSize: 12,
+                        },
+                    },
+                    // title: {
+                    //     text: 'Income of Germany and France since 1950'
+                    // },
+                    tooltip: {
+                        trigger: 'axis'
+                    },
+                    xAxis: [
+                        {
+                            type: "category",
+                            boundaryGap: false,
+                            axisLabel: {
+                                interval: 60,
+                                showMinLabel: true,
+                                showMaxLabel: true,
+                                formatter: "{value}",
+                                fontSize: 14,
+                                textStyle: {
+                                    color: '#606769',
+                                },
+                            },
+                            axisLine: {
+                                show: false,
+                            },
+                            data: this.xdata,
+                        },
+                    ],
+                    yAxis: {
+                        type: "value",
+                        // name: 'y轴',
+                        axisLabel: {
+                            formatter: "{value}",
+                            fontSize: 14,
+                        },
+                        axisLine: {
+                            show: false,
+                        },
+                        splitLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#606769',
+                            type: "dashed",
+                        },
+                        },
+                    },
+                    series: [{
+                        name: '111',
+                        smooth: true,
+                        showSymbol: false,
+                        data: [150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260,],
+                        type: 'line'
+                    },
+                    {
+                        name: '222',
+                        smooth: true,
+                        showSymbol: false,
+                        data: [50, 30, 24, 18, 35, 47, 60, 50, 30, 24, 18, 35, 47, 60, 50, 30, 24, 18, 35, 47, 60, 50, 30, 24, 18, 35, 47, 60, 50, 30, 24, 18, 35, 47, 60,],
+                        type: 'line'
+                    }]
+                };
+
+                option && myChart.setOption(option);
+            },
+            closed() {
+                this.$emit('closed');
+            },
+        },
+    }
+</script>
+
+<style>
+    .showTitles {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		margin-top: -10px;
+		font-size: 18px;
+		color: #FFFFFF;
+	}
+    .body {
+		background-color: black;
+		width: 100%;
+		margin-top: -30px;
+		/* height: 200px; */
+	}
+    .echarts {
+        width: 900px;
+        height: 480px;
+        /* margin-top: 20px; */
+        margin-left: 10px;
+        padding-top: 20px;
+    }
 </style>

src/components/focus/PhotoelectricDetailPages.vue

@@ -1,259 +1,259 @@
-<template>
-	<el-dialog width="55%" @closed="closed()" :show-close="false" class="my-info-dialog">
-		<template #title>
-			<div class="showTitle">
-				<img class="titleImg" src="../../assets/img/controlcenter/daraTrue.png" alt="">
-				<div class="titles">{{stationName}}</div>
-			</div>
-		</template>
-		<div class="body">
-			<div class="dataList">
-				<div class="data">
-					<div class="name">{{data.PowerSet.name}}：</div>
-					<div class="num">{{data.PowerSet?.value}}</div>
-					<div class="unit">MW</div>
-				</div>
-				<div class="data">
-					<div class="name">{{data.TheoryPower.name}}：</div>
-					<div class="num">{{data.TheoryPower?.value}}</div>
-					<div class="unit">MW</div>
-				</div>
-				<div class="data">
-					<div class="name">{{data.AgcLower.name}}：</div>
-					<div class="num">{{data.AgcLower?.value}}</div>
-					<div class="unit">MW</div>
-				</div>
-				<div class="data">
-					<div class="name">{{data.ActualPower.name}}：</div>
-					<div class="num">{{data.ActualPower?.value}}</div>
-					<div class="unit">MW</div>
-				</div>
-				<div class="data">
-					<div class="name">{{data.AgcUp.name}}：</div>
-					<div class="num">{{data.AgcUp?.value}}</div>
-					<div class="unit">MW</div>
-				</div>
-				<div class="data">
-					<div class="name">{{data.ForecastPower.name}}：</div>
-					<div class="num">{{data.ForecastPower?.value}}</div>
-					<div class="unit">MW</div>
-				</div>
-			</div>
-			<div class="condition">
-				<div class="status">
-					<div class="name">{{data.AgcIn.name}}：</div>
-					<img v-if="data.AgcIn.value === 0" class="statusIcon"
-						src="../../assets/img/controlcenter/daraTrue.png">
-					<img v-else-if="data.AgcIn.value === 1" class="statusIcon"
-						src="../../assets/img/controlcenter/dataFalse.png">
-					<div v-else-if="data.AgcIn.value === ''">
-						暂无数据
-					</div>
-				</div>
-				<div class="status">
-					<div class="name">{{data.AgcFar.name}}：</div>
-					<img v-if="data.AgcFar.value === 0" class="statusIcon"
-						src="../../assets/img/controlcenter/daraTrue.png">
-					<img v-else-if="data.AgcFar.value === 1" class="statusIcon"
-						src="../../assets/img/controlcenter/dataFalse.png">
-					<div v-else-if="data.AgcFar.value === ''">
-						暂无数据
-					</div>
-				</div>
-				<div class="status">
-					<div class="name">{{data.SumLock.name}}：</div>
-					<img v-if="data.SumLock.value === 0" class="statusIcon"
-						src="../../assets/img/controlcenter/daraTrue.png">
-					<img v-else-if="data.SumLock.value === 1" class="statusIcon"
-						src="../../assets/img/controlcenter/dataFalse.png">
-					<div v-else-if="data.SumLock.value === ''">
-						暂无数据
-					</div>
-				</div>
-				<div class="status">
-					<div class="name">{{data.SubLock.name}}：</div>
-					<img v-if="data.SubLock.value === 0" class="statusIcon"
-						src="../../assets/img/controlcenter/daraTrue.png">
-					<img v-else-if="data.SubLock.value === 1" class="statusIcon"
-						src="../../assets/img/controlcenter/dataFalse.png">
-					<div v-else-if="data.SubLock.value === ''">
-						暂无数据
-					</div>
-				</div>
-			</div>
-			<!-- <button @click='ChangeColors()'>测试按钮</button> -->
-			<!-- <div id="main" class="echartsBox"></div> -->
-			<MultipleLineChart ref="multipleLineChart" height="400px" :units="powerLineChartData.units" :list="powerLineChartData.value"
-				 :showLegend="true" />
-		</div>
-	</el-dialog>
-</template>
-
-<script>
-	import MultipleLineChart from "./multiple-line-chart.vue";
-	import dayjs from 'dayjs'
-	export default {
-		components: {
-			MultipleLineChart
-		},
-		props: {
-			stationName: {
-				type: String,
-				default: ''
-			},
-			data: {
-				type: Array
-			},
-		},
-		data() {
-			return {
-				chartData: {
-					units: [""],
-					value: [],
-				},
-				colors: ["rgba(75, 85, 174, 1)", "rgba(05, 187, 76, 1)"],
-				timeData: [],
-				PowerSet: [],
-				ActualPower: [],
-				index: 0,
-				powerLineChartData: {},
-			};
-		},
-		methods: {
-			closed() {
-				//勿删，传递关闭方法
-			},
-			ChangeColors() {
-				this.colors = ["#aa2116", "#fcaf17"]
-			},
-			initData(PowerSet, ActualPower) {
-				// this.chartData.units = ["(MW)", "(MW)"];
-				this.chartData.value[0] = {
-					title: "有功设定限值(MW)",
-					yAxisIndex: 0,
-					value: []
-				};
-				this.chartData.value[1] = {
-					title: "实发有功(MW)",
-					yAxisIndex: 0,
-					value: []
-				}
-				PowerSet.forEach(item => {
-					this.chartData.value[0].value.push({
-						text: dayjs(item.ts).format('HH:mm'),
-						value: parseFloat((item.doubleValue).toFixed(2))
-					})
-				})
-				ActualPower.forEach(item => {
-					this.chartData.value[1].value.push({
-						text: dayjs(item.ts).format('HH:mm'),
-						value: parseFloat((item.doubleValue).toFixed(2))
-					})
-				})
-				this.powerLineChartData = this.chartData;
-				this.$refs.multipleLineChart.initChart(this.chartData)
-			}
-		},
-	};
-</script>
-<style scoped>
-	.echartsBox {
-		width: 64rem;
-		height: 220px;
-		overflow: hidden;
-	}
-
-	.el-dialog__header {
-		background-color: #000000;
-	}
-
-	.showTitle {
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		justify-content: center;
-		margin-top: -10px;
-		font-size: 18px;
-		color: #FFFFFF;
-	}
-
-	.titleImg {
-		width: 16px;
-		height: 16px;
-		margin-right: 13px;
-	}
-
-	.icon {
-		font-size: 12px;
-		margin-left: 10px;
-		margin-top: 5px;
-	}
-
-	.body {
-		background-color: black;
-		width: 100%;
-		margin-top: -30px;
-		/* height: 200px; */
-	}
-
-	.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: 22px;
-	}
-
-	.name {
-		width: 40%;
-		display: flex;
-		flex-direction: row-reverse;
-		font-size: 12px;
-		color: #FFFFFF;
-	}
-
-	.num {
-		margin-left: 59px;
-		font-size: 16px;
-		color: #05BB4C;
-		min-width: 40px;
-	}
-
-	.unit {
-		font-size: 16px;
-		color: #FFFFFF;
-		margin-left: 20px;
-	}
-
-	.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;
-	}
-
-	.statusIcon {
-		width: 14px;
-		height: 14px;
-		margin-left: 8px;
-	}
+<template>
+	<el-dialog width="55%" @closed="closed()" :show-close="false" class="my-info-dialog">
+		<template #title>
+			<div class="showTitle">
+				<img class="titleImg" src="../../assets/img/controlcenter/daraTrue.png" alt="">
+				<div class="titles">{{stationName}}</div>
+			</div>
+		</template>
+		<div class="body">
+			<div class="dataList">
+				<div class="data">
+					<div class="name">{{data.PowerSet.name}}：</div>
+					<div class="num">{{data.PowerSet?.value}}</div>
+					<div class="unit">MW</div>
+				</div>
+				<div class="data">
+					<div class="name">{{data.TheoryPower.name}}：</div>
+					<div class="num">{{data.TheoryPower?.value}}</div>
+					<div class="unit">MW</div>
+				</div>
+				<div class="data">
+					<div class="name">{{data.AgcLower.name}}：</div>
+					<div class="num">{{data.AgcLower?.value}}</div>
+					<div class="unit">MW</div>
+				</div>
+				<div class="data">
+					<div class="name">{{data.ActualPower.name}}：</div>
+					<div class="num">{{data.ActualPower?.value}}</div>
+					<div class="unit">MW</div>
+				</div>
+				<div class="data">
+					<div class="name">{{data.AgcUp.name}}：</div>
+					<div class="num">{{data.AgcUp?.value}}</div>
+					<div class="unit">MW</div>
+				</div>
+				<div class="data">
+					<div class="name">{{data.ForecastPower.name}}：</div>
+					<div class="num">{{data.ForecastPower?.value}}</div>
+					<div class="unit">MW</div>
+				</div>
+			</div>
+			<div class="condition">
+				<div class="status">
+					<div class="name">{{data.AgcIn.name}}：</div>
+					<img v-if="data.AgcIn.value === 0" class="statusIcon"
+						src="../../assets/img/controlcenter/daraTrue.png">
+					<img v-else-if="data.AgcIn.value === 1" class="statusIcon"
+						src="../../assets/img/controlcenter/dataFalse.png">
+					<div v-else-if="data.AgcIn.value === ''">
+						暂无数据
+					</div>
+				</div>
+				<div class="status">
+					<div class="name">{{data.AgcFar.name}}：</div>
+					<img v-if="data.AgcFar.value === 0" class="statusIcon"
+						src="../../assets/img/controlcenter/daraTrue.png">
+					<img v-else-if="data.AgcFar.value === 1" class="statusIcon"
+						src="../../assets/img/controlcenter/dataFalse.png">
+					<div v-else-if="data.AgcFar.value === ''">
+						暂无数据
+					</div>
+				</div>
+				<div class="status">
+					<div class="name">{{data.SumLock.name}}：</div>
+					<img v-if="data.SumLock.value === 0" class="statusIcon"
+						src="../../assets/img/controlcenter/daraTrue.png">
+					<img v-else-if="data.SumLock.value === 1" class="statusIcon"
+						src="../../assets/img/controlcenter/dataFalse.png">
+					<div v-else-if="data.SumLock.value === ''">
+						暂无数据
+					</div>
+				</div>
+				<div class="status">
+					<div class="name">{{data.SubLock.name}}：</div>
+					<img v-if="data.SubLock.value === 0" class="statusIcon"
+						src="../../assets/img/controlcenter/daraTrue.png">
+					<img v-else-if="data.SubLock.value === 1" class="statusIcon"
+						src="../../assets/img/controlcenter/dataFalse.png">
+					<div v-else-if="data.SubLock.value === ''">
+						暂无数据
+					</div>
+				</div>
+			</div>
+			<!-- <button @click='ChangeColors()'>测试按钮</button> -->
+			<!-- <div id="main" class="echartsBox"></div> -->
+			<MultipleLineChart ref="multipleLineChart" height="400px" :units="powerLineChartData.units" :list="powerLineChartData.value"
+				 :showLegend="true" />
+		</div>
+	</el-dialog>
+</template>
+
+<script>
+	import MultipleLineChart from "./multiple-line-chart.vue";
+	import dayjs from 'dayjs'
+	export default {
+		components: {
+			MultipleLineChart
+		},
+		props: {
+			stationName: {
+				type: String,
+				default: ''
+			},
+			data: {
+				type: Array
+			},
+		},
+		data() {
+			return {
+				chartData: {
+					units: [""],
+					value: [],
+				},
+				colors: ["rgba(75, 85, 174, 1)", "rgba(05, 187, 76, 1)"],
+				timeData: [],
+				PowerSet: [],
+				ActualPower: [],
+				index: 0,
+				powerLineChartData: {},
+			};
+		},
+		methods: {
+			closed() {
+				//勿删，传递关闭方法
+			},
+			ChangeColors() {
+				this.colors = ["#aa2116", "#fcaf17"]
+			},
+			initData(PowerSet, ActualPower) {
+				// this.chartData.units = ["(MW)", "(MW)"];
+				this.chartData.value[0] = {
+					title: "有功设定限值(MW)",
+					yAxisIndex: 0,
+					value: []
+				};
+				this.chartData.value[1] = {
+					title: "实发有功(MW)",
+					yAxisIndex: 0,
+					value: []
+				}
+				PowerSet.forEach(item => {
+					this.chartData.value[0].value.push({
+						text: dayjs(item.ts).format('HH:mm'),
+						value: parseFloat((item.doubleValue).toFixed(2))
+					})
+				})
+				ActualPower.forEach(item => {
+					this.chartData.value[1].value.push({
+						text: dayjs(item.ts).format('HH:mm'),
+						value: parseFloat((item.doubleValue).toFixed(2))
+					})
+				})
+				this.powerLineChartData = this.chartData;
+				this.$refs.multipleLineChart.initChart(this.chartData)
+			}
+		},
+	};
+</script>
+<style scoped>
+	.echartsBox {
+		width: 64rem;
+		height: 220px;
+		overflow: hidden;
+	}
+
+	.el-dialog__header {
+		background-color: #000000;
+	}
+
+	.showTitle {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		margin-top: -10px;
+		font-size: 18px;
+		color: #FFFFFF;
+	}
+
+	.titleImg {
+		width: 16px;
+		height: 16px;
+		margin-right: 13px;
+	}
+
+	.icon {
+		font-size: 12px;
+		margin-left: 10px;
+		margin-top: 5px;
+	}
+
+	.body {
+		background-color: black;
+		width: 100%;
+		margin-top: -30px;
+		/* height: 200px; */
+	}
+
+	.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: 22px;
+	}
+
+	.name {
+		width: 40%;
+		display: flex;
+		flex-direction: row-reverse;
+		font-size: 12px;
+		color: #FFFFFF;
+	}
+
+	.num {
+		margin-left: 59px;
+		font-size: 16px;
+		color: #05BB4C;
+		min-width: 40px;
+	}
+
+	.unit {
+		font-size: 16px;
+		color: #FFFFFF;
+		margin-left: 20px;
+	}
+
+	.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;
+	}
+
+	.statusIcon {
+		width: 14px;
+		height: 14px;
+		margin-left: 8px;
+	}
 </style>

src/components/focus/agcDetails.vue

@@ -1,223 +1,223 @@
-<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 currentScroll">
-      <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 api from "api/index";
-import dayjs from "dayjs";
-export default {
-  components: {
-    DataDetails,
-    DetailsCharts,
-  },
-  data() {
-    return {
-      station: [],
-      allDate: {},
-      allChartDate: [],
-      detailsDisplay: false,
-      showData: {},
-      intervals: "",
-      intervalsChar: "",
-    };
-  },
-  created() {
-    this.getAGCStation();
-  },
-  updated() {},
-  methods: {
-    getAGCStation() {
-      api.getAGCStation().then((res) => {
-        this.station = res.data;
-      });
-    },
-    getLatest(index) {
-      let dialogData = {};
-      let thisKey = this.station[index].tags;
-      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
-                    : Number((res.data[v].doubleValue * calc).toFixed(2))
-                  : Number(res.data[v].booleanValue)
-                  ? 1
-                  : 0,
-                tag: item.value,
-                calc: item.calc,
-              };
-            }
-          });
-        }
-        this.allDate[this.station[index].id] = dialogData;
-        this.allDate[this.station[index].id].InstalledCapacity = this.station[
-          index
-        ].tags.find((ele) => {
-          return ele.tag == "InstalledCapacity";
-        });
-        index++;
-        if (index >= this.station.length) {
-          this.intervals = setTimeout(() => {
-            this.getLatest(0);
-          }, 3000);
-        } else {
-          this.getLatest(index);
-        }
-      });
-    },
-    getChartData(index) {
-      let thisKey = this.station[index].tags;
-      let endTs = new Date().getTime();
-      let starTs = new Date(
-        new Date(new Date().toLocaleDateString()).getTime()
-      ).getTime();
-      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,
-                });
-              });
-              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(Number(item.doubleValue).toFixed(2)),
-                });
-              });
-              ActualPowerData.forEach((item) => {
-                chartData.value[1].value.push({
-                  text: dayjs(item.ts).format("HH:mm"),
-                  value: parseFloat(Number(item.doubleValue).toFixed(2)),
-                });
-              });
-              chartData.id = this.station[index].id;
-              this.allChartDate.push(chartData);
-              index++;
-              if (index >= this.station.length) {
-                this.$refs.detailst.totleErtcher();
-                this.intervalsChar = setTimeout(() => {
-                  this.allChartDate = [];
-                  this.getChartData(0);
-                }, 60000);
-              } else {
-                this.getChartData(index);
-              }
-            });
-        });
-    },
-    opened() {
-      this.getLatest(0);
-      this.getChartData(0);
-    },
-    closed() {
-      clearInterval(this.intervals);
-      clearInterval(this.intervalsChar);
-      this.intervals = null;
-      this.intervalsChar = null;
-    },
-    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;
-  min-height: 90vh;
-}
+<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 currentScroll">
+      <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 api from "api/index";
+import dayjs from "dayjs";
+export default {
+  components: {
+    DataDetails,
+    DetailsCharts,
+  },
+  data() {
+    return {
+      station: [],
+      allDate: {},
+      allChartDate: [],
+      detailsDisplay: false,
+      showData: {},
+      intervals: "",
+      intervalsChar: "",
+    };
+  },
+  created() {
+    this.getAGCStation();
+  },
+  updated() {},
+  methods: {
+    getAGCStation() {
+      api.getAGCStation().then((res) => {
+        this.station = res.data;
+      });
+    },
+    getLatest(index) {
+      let dialogData = {};
+      let thisKey = this.station[index].tags;
+      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
+                    : Number((res.data[v].doubleValue * calc).toFixed(2))
+                  : Number(res.data[v].booleanValue)
+                  ? 1
+                  : 0,
+                tag: item.value,
+                calc: item.calc,
+              };
+            }
+          });
+        }
+        this.allDate[this.station[index].id] = dialogData;
+        this.allDate[this.station[index].id].InstalledCapacity = this.station[
+          index
+        ].tags.find((ele) => {
+          return ele.tag == "InstalledCapacity";
+        });
+        index++;
+        if (index >= this.station.length) {
+          this.intervals = setTimeout(() => {
+            this.getLatest(0);
+          }, 3000);
+        } else {
+          this.getLatest(index);
+        }
+      });
+    },
+    getChartData(index) {
+      let thisKey = this.station[index].tags;
+      let endTs = new Date().getTime();
+      let starTs = new Date(
+        new Date(new Date().toLocaleDateString()).getTime()
+      ).getTime();
+      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,
+                });
+              });
+              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(Number(item.doubleValue).toFixed(2)),
+                });
+              });
+              ActualPowerData.forEach((item) => {
+                chartData.value[1].value.push({
+                  text: dayjs(item.ts).format("HH:mm"),
+                  value: parseFloat(Number(item.doubleValue).toFixed(2)),
+                });
+              });
+              chartData.id = this.station[index].id;
+              this.allChartDate.push(chartData);
+              index++;
+              if (index >= this.station.length) {
+                this.$refs.detailst.totleErtcher();
+                this.intervalsChar = setTimeout(() => {
+                  this.allChartDate = [];
+                  this.getChartData(0);
+                }, 60000);
+              } else {
+                this.getChartData(index);
+              }
+            });
+        });
+    },
+    opened() {
+      this.getLatest(0);
+      this.getChartData(0);
+    },
+    closed() {
+      clearInterval(this.intervals);
+      clearInterval(this.intervalsChar);
+      this.intervals = null;
+      this.intervalsChar = null;
+    },
+    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;
+  min-height: 90vh;
+}
 </style>

src/components/focus/currentWarningCard.vue

@@ -1,289 +1,289 @@
-<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.faultMessage();
-    this.intervals = setInterval(this.faultMessage, 15000);
-  },
-  props: {
-    activeTab: {
-      type: String,
-      default: "",
-    },
-  },
-  data() {
-    return {
-      values: [],
-      tableData: [],
-      dialogVisible: false,
-      showSvg: false,
-      svgVisible: false,
-      svgWeb: "",
-      stationName: "",
-      currentWindturbine: {},
-      audio: null,
-      intervals: 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);
-    },
-    faultMessage(json) {
-      api.alarmFault().then((res) => {
-        if (res.data) {
-          let val = res.data;
-          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";
-      }
-    },
-  },
-  unmounted() {
-    clearInterval(this.intervals);
-    this.intervals = null;
-  },
-  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);
-  }
-}
+<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.faultMessage();
+    this.intervals = setInterval(this.faultMessage, 15000);
+  },
+  props: {
+    activeTab: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      values: [],
+      tableData: [],
+      dialogVisible: false,
+      showSvg: false,
+      svgVisible: false,
+      svgWeb: "",
+      stationName: "",
+      currentWindturbine: {},
+      audio: null,
+      intervals: 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);
+    },
+    faultMessage(json) {
+      api.alarmFault().then((res) => {
+        if (res.data) {
+          let val = res.data;
+          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";
+      }
+    },
+  },
+  unmounted() {
+    clearInterval(this.intervals);
+    this.intervals = null;
+  },
+  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/detailsCharts.vue

@@ -1,166 +1,166 @@
-<template>
-  <el-dialog
-    width="70%"
-    @open="opened()"
-    @closed="closed()"
-    :show-close="true"
-    class="dialogs"
-  >
-    <template #title>
-      <div class="showTitles">
-        <div class="stationName">
-          <div class="titleName">{{ showData?.name?.name }}</div>
-          <div class="titleNames" v-if="showData?.name?.names">
-            ({{ showData?.name?.names }})
-          </div>
-        </div>
-      </div>
-    </template>
-    <div class="bodyy">
-      <div id="showEcharts" class="echarts"></div>
-    </div>
-  </el-dialog>
-</template>
-<script>
-import * as echarts from "echarts";
-export default {
-  props: {
-    showData: {
-      type: String,
-      default: "",
-    },
-  },
-  updated() {
-    this.showEcharts(this.showData);
-  },
-  methods: {
-    showEcharts(showData) {
-      let chartDom = document.getElementById("showEcharts");
-      let myChart = echarts.init(chartDom, "#ffffff");
-      let option;
-      option = {
-        tooltip: {
-          trigger: "axis",
-        },
-        legend: {
-          show: true,
-          data: showData.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: showData.value[0].value.map((item) => {
-              return item.text;
-            }),
-          },
-        ],
-        yAxis: {
-          type: "value",
-          axisLabel: {
-            formatter: "{value}",
-            fontSize: 14,
-          },
-          axisLine: {
-            show: false,
-          },
-          splitLine: {
-            show: true,
-            lineStyle: {
-              color: "#606769",
-              type: "dashed",
-            },
-          },
-        },
-        series: [
-          {
-            name: showData.value[0].title,
-            smooth: true,
-            showSymbol: false,
-            data: showData.value[0].value.map((item) => {
-              return item.value;
-            }),
-            type: "line",
-            lineStyle: {
-              normal: {
-                color: "rgba(75, 85, 174, 1)",
-                width: 1,
-              },
-            },
-          },
-          {
-            name: showData.value[1].title,
-            smooth: true,
-            showSymbol: false,
-            data: showData.value[1].value.map((item) => {
-              return item.value;
-            }),
-            type: "line",
-            lineStyle: {
-              normal: {
-                color: "rgba(05, 187, 76, 1)",
-                width: 1,
-              },
-            },
-          },
-        ],
-      };
-      option && myChart.setOption(option);
-    },
-    opened() {},
-    closed() {
-      this.$emit("closeds");
-    },
-  },
-};
-</script>
-<style scoped>
-.echarts {
-  width: 1300px;
-  height: 60vh;
-}
-
-.stationName {
-  font-size: 20px;
-  width: 400px;
-  height: 45px;
-  display: flex;
-  flex-direction: row;
-  align-items: baseline;
-  justify-content: center;
-  color: #ffffff;
-}
-
-.titleName {
-  margin-top: 10px;
-}
-
-.titleNames {
-  font-size: 12px;
-  margin-left: 10px;
-  margin-top: 10px;
-}
+<template>
+  <el-dialog
+    width="70%"
+    @open="opened()"
+    @closed="closed()"
+    :show-close="true"
+    class="dialogs"
+  >
+    <template #title>
+      <div class="showTitles">
+        <div class="stationName">
+          <div class="titleName">{{ showData?.name?.name }}</div>
+          <div class="titleNames" v-if="showData?.name?.names">
+            ({{ showData?.name?.names }})
+          </div>
+        </div>
+      </div>
+    </template>
+    <div class="bodyy">
+      <div id="showEcharts" class="echarts"></div>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  props: {
+    showData: {
+      type: String,
+      default: "",
+    },
+  },
+  updated() {
+    this.showEcharts(this.showData);
+  },
+  methods: {
+    showEcharts(showData) {
+      let chartDom = document.getElementById("showEcharts");
+      let myChart = echarts.init(chartDom, "#ffffff");
+      let option;
+      option = {
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          show: true,
+          data: showData.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: showData.value[0].value.map((item) => {
+              return item.text;
+            }),
+          },
+        ],
+        yAxis: {
+          type: "value",
+          axisLabel: {
+            formatter: "{value}",
+            fontSize: 14,
+          },
+          axisLine: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#606769",
+              type: "dashed",
+            },
+          },
+        },
+        series: [
+          {
+            name: showData.value[0].title,
+            smooth: true,
+            showSymbol: false,
+            data: showData.value[0].value.map((item) => {
+              return item.value;
+            }),
+            type: "line",
+            lineStyle: {
+              normal: {
+                color: "rgba(75, 85, 174, 1)",
+                width: 1,
+              },
+            },
+          },
+          {
+            name: showData.value[1].title,
+            smooth: true,
+            showSymbol: false,
+            data: showData.value[1].value.map((item) => {
+              return item.value;
+            }),
+            type: "line",
+            lineStyle: {
+              normal: {
+                color: "rgba(05, 187, 76, 1)",
+                width: 1,
+              },
+            },
+          },
+        ],
+      };
+      option && myChart.setOption(option);
+    },
+    opened() {},
+    closed() {
+      this.$emit("closeds");
+    },
+  },
+};
+</script>
+<style scoped>
+.echarts {
+  width: 1300px;
+  height: 60vh;
+}
+
+.stationName {
+  font-size: 20px;
+  width: 400px;
+  height: 45px;
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  justify-content: center;
+  color: #ffffff;
+}
+
+.titleName {
+  margin-top: 10px;
+}
+
+.titleNames {
+  font-size: 12px;
+  margin-left: 10px;
+  margin-top: 10px;
+}
 </style>

src/components/focus/focusArea.vue

@@ -1,240 +1,240 @@
-<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 class="booster" @click="showBooster">升压站监控</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>
-    <AGCDetails v-model="display"></AGCDetails>
-    <StationSvgDetailPages v-model="displayBooster" @close="close">
-    </StationSvgDetailPages>
-  </div> -->
-  <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>
-      </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 StationSvgDetailPages from "../stationSvgDetailPages.vue";
-// import SYZDetails from "./syzDetails.vue";
-export default {
-  data() {
-    return {
-      display: false,
-      displayBooster: false,
-    };
-  },
-  components: {
-    FocusCard,
-    // AGCDetails,
-    // StationSvgDetailPages,
-    // SYZDetails,
-  },
-  methods: {
-    // showAGC() {
-    //   this.display = true;
-    // },
-    // showBooster() {
-    //   this.displayBooster = true;
-    // },
-    // close() {
-    //   this.displayBooster = false;
-    // },
-    // showSYZ() {
-    //   this.$store.commit("syzDialogShow", true);
-    // },
-  },
-};
-</script>
-<style scoped>
-/* .box {
-  width: 100px;
-  height: 20px;
-
-  margin-top: 30px;
-}
-.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-bottom: 10px;
-  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;
-  width: 5px;
-  height: 5px;
-  background-color: rgba(230, 191, 65, 1);
-  border-radius: 50%;
-}
-
-.logo {
-  position: absolute;
-  top: 2px;
-  left: 12px;
-}
-
-.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);
-}
-.booster {
-  position: absolute;
-  color: #ffffff;
-  font-size: 14px;
-  right: 100px;
-  top: 23px;
-  width: 80px;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: rgba(37, 116, 219, 1);
-} */
-.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: 27vw;
-  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%;
-}
-
-.logo {
-  position: absolute;
-  top: 2px;
-  left: 12px;
-}
-
-.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;
-}
-
-.syz {
-  right: 90px;
-  transition: 0.2s;
-}
-
-.syz.flicker {
-  right: 90px;
-  animation: flicker 0.8s infinite;
-}
-
-@keyframes flicker {
-  0% {
-    background: rgba(37, 116, 219);
-  }
-  50% {
-    background: orangered;
-  }
-  100% {
-    background: rgba(37, 116, 219);
-  }
-}
+<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 class="booster" @click="showBooster">升压站监控</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>
+    <AGCDetails v-model="display"></AGCDetails>
+    <StationSvgDetailPages v-model="displayBooster" @close="close">
+    </StationSvgDetailPages>
+  </div> -->
+  <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>
+      </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 StationSvgDetailPages from "../stationSvgDetailPages.vue";
+// import SYZDetails from "./syzDetails.vue";
+export default {
+  data() {
+    return {
+      display: false,
+      displayBooster: false,
+    };
+  },
+  components: {
+    FocusCard,
+    // AGCDetails,
+    // StationSvgDetailPages,
+    // SYZDetails,
+  },
+  methods: {
+    // showAGC() {
+    //   this.display = true;
+    // },
+    // showBooster() {
+    //   this.displayBooster = true;
+    // },
+    // close() {
+    //   this.displayBooster = false;
+    // },
+    // showSYZ() {
+    //   this.$store.commit("syzDialogShow", true);
+    // },
+  },
+};
+</script>
+<style scoped>
+/* .box {
+  width: 100px;
+  height: 20px;
+
+  margin-top: 30px;
+}
+.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-bottom: 10px;
+  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;
+  width: 5px;
+  height: 5px;
+  background-color: rgba(230, 191, 65, 1);
+  border-radius: 50%;
+}
+
+.logo {
+  position: absolute;
+  top: 2px;
+  left: 12px;
+}
+
+.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);
+}
+.booster {
+  position: absolute;
+  color: #ffffff;
+  font-size: 14px;
+  right: 100px;
+  top: 23px;
+  width: 80px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(37, 116, 219, 1);
+} */
+.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: 27vw;
+  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%;
+}
+
+.logo {
+  position: absolute;
+  top: 2px;
+  left: 12px;
+}
+
+.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;
+}
+
+.syz {
+  right: 90px;
+  transition: 0.2s;
+}
+
+.syz.flicker {
+  right: 90px;
+  animation: flicker 0.8s infinite;
+}
+
+@keyframes flicker {
+  0% {
+    background: rgba(37, 116, 219);
+  }
+  50% {
+    background: orangered;
+  }
+  100% {
+    background: rgba(37, 116, 219);
+  }
+}
 </style>

src/components/focus/focusCard.vue

@@ -1,241 +1,241 @@
-/* 推荐区 */
-<template>
-  <div style="display: flex; justify-content: flex-start; flex-wrap: wrap">
-    <div
-      class="area"
-      v-for="(vl, index) in values"
-      :key="vl"
-      @dblclick="sendMsg(vl, flase, index)"
-    >
-      <img
-        class="imgs"
-        src="../../assets/img/RecommendedArea/background.png"
-        alt=""
-      />
-      <div class="content">{{ vl.showType }}</div>
-      <div class="">{{ vl.name }}</div>
-      <div class="">{{ vl.createTime }}</div>
-    </div>
-  </div>
-  <PhotoelectricDetailPages
-    ref="photo"
-    @closed="closed()"
-    :data="dialogData.data"
-    :stationName="dialogData.stationName"
-    v-model="dialogVisible"
-  >
-  </PhotoelectricDetailPages>
-  <WindturbineDetailPages
-    v-model="windVisible"
-    :windturbine="currentWindturbine"
-    @close="close"
-  >
-  </WindturbineDetailPages>
-  <StationSvgDetailPages
-    v-model="svgVisible"
-    :svgWeb="svgWeb"
-    @close="close"
-  >
-  </StationSvgDetailPages>
-</template>
-
-<script>
-import PhotoelectricDetailPages from "./PhotoelectricDetailPages.vue";
-import MessageBridge from "utils/MessageBridge";
-import StationSvgDetailPages from "../stationSvgDetailPages.vue";
-import WindturbineDetailPages from "../WindturbineDetailPages.vue";
-import api from "api/index";
-import dayjs from "dayjs";
-export default {
-  name: "RecommendedArea",
-  props: ["datas"],
-  data() {
-    return {
-      values: [],
-      currentWindturbine: {},
-      dialogVisible: false,
-      svgVisible: false,
-      windVisible: false,
-      svgWeb: "",
-      station: [],
-      dialogData: {
-        data: {
-          PowerSet: "",
-          AgcUp: "",
-          AgcLower: "",
-          ActualPower: "",
-          TheoryPower: "",
-          ForecastPower: "",
-          AgcIn: "",
-          AgcFar: "",
-          SumLock: "",
-          SubLock: "",
-        },
-      },
-      interval: "",
-      intervalTimer: "",
-      timeIndex: 0,
-    };
-  },
-  components: {
-    PhotoelectricDetailPages,
-    StationSvgDetailPages,
-    WindturbineDetailPages,
-  },
-  created() {
-    this.datacontrol();
-    this.getAGCStation();
-  },
-  methods: {
-    getAGCStation() {
-      api.getAGCStation().then((res) => {
-        this.station = res.data;
-      });
-    },
-    datacontrol() {
-      let mb = MessageBridge.getInstance();
-      let attention = [{ key: "/topic/attention", action: this.attention }];
-      mb.register(attention);
-    },
-    attention(msg) {
-      let list = JSON.parse(msg);
-      let types = {
-        ElectricityRestrictions: "限电",
-        Offline: "离线",
-        Accident: "故障",
-        LowCurveFollowingRate: "跟随率低",
-      };
-      list.forEach((item) => {
-        item.createTime = dayjs(item.time).format("YYYY-MM-DD HH:mm:ss");
-        item.showType = types[item.type];
-      });
-      this.values = list;
-    },
-    closed() {
-      clearInterval(this.intervalTimer);
-      this.intervalTimer = null
-    },
-    close() {
-      this.svgVisible = false;
-    },
-
-    sendMsg: function (vl, types, index) {
-      if (vl.attentionType === "Station" && vl.type === "Accident") {
-        this.svgVisible = true;
-        this.svgWeb = vl.stationId;
-      } else if (
-        (vl.attentionType === "Station" &&
-          vl.type === "ElectricityRestrictions") ||
-        types
-      ) {
-        let that = this;
-        that.timeIndex = 0;
-        that.ajaxDetail(vl, index);
-        that.intervalTimer = window.setInterval(function () {
-          that.ajaxDetail(vl, index);
-        }, 3000);
-        that.dialogVisible = true;
-        that.dialogData.stationName = this.station.filter(
-          (item) => item.id === vl.id
-        )[0].name;
-      } else if (vl.attentionType === "WindTurbine") {
-        this.windVisible = true;
-        this.currentWindturbine = this.$store.state.windturbinelist[vl.id];
-      }
-    },
-    ajaxDetail(data, index) {
-      let thisKey = this.station.filter((item) => item.id === data.id)[0].tags;
-      let array = [];
-      thisKey.forEach((item) => {
-        item.value ? array.push(item.value) : "";
-      });
-      let params = array.join(",");
-      api.getLatest(params).then((res) => {
-        if (res) {
-          for (let v in res.data) {
-            thisKey.forEach((item) => {
-              let calc = item.calc ? item.calc : 1;
-              if (item.value === v) {
-                this.dialogData.data[item.tag] = {
-                  name: item.name,
-                  value: res.data[v].doubleValue
-                    ? res.data[v].doubleValue === 0? 0 : Number((res.data[v].doubleValue * calc).toFixed(2))
-                    : res.data[v].booleanValue? 1: 0,
-                };
-              }
-            });
-          }
-        }
-      });
-      if (this.timeIndex == 0) {
-        //一分钟执行一次
-        let date = new Date();
-        let endTs = date.getTime();
-        let starTs = endTs - 28800000;
-        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,
-                  });
-                });
-                res2.data.forEach((item) => {
-                  ActualPowerData.push({
-                    ts: item.ts,
-                    doubleValue: item.doubleValue * ActualPower.calc,
-                  });
-                });
-                this.$refs.photo.initData(PowerSetData, ActualPowerData);
-              });
-          });
-      } else if (this.timeIndex == 20) {
-        this.timeIndex = -1;
-      }
-      this.timeIndex++;
-    },
-  },
-};
-</script>
-<style scoped>
-.area {
-  display: flex;
-  flex-direction: column;
-  font-size: 12px;
-  color: #ffffff;
-  width: 130px;
-  align-items: center;
-  margin-bottom: 10px;
-}
-
-.content {
-  margin-top: -70px;
-  width: 25px;
-  height: 34px;
-  margin-bottom: 20px;
-  display: flex;
-  align-items: center;
-}
+/* 推荐区 */
+<template>
+  <div style="display: flex; justify-content: flex-start; flex-wrap: wrap">
+    <div
+      class="area"
+      v-for="(vl, index) in values"
+      :key="vl"
+      @dblclick="sendMsg(vl, flase, index)"
+    >
+      <img
+        class="imgs"
+        src="../../assets/img/RecommendedArea/background.png"
+        alt=""
+      />
+      <div class="content">{{ vl.showType }}</div>
+      <div class="">{{ vl.name }}</div>
+      <div class="">{{ vl.createTime }}</div>
+    </div>
+  </div>
+  <PhotoelectricDetailPages
+    ref="photo"
+    @closed="closed()"
+    :data="dialogData.data"
+    :stationName="dialogData.stationName"
+    v-model="dialogVisible"
+  >
+  </PhotoelectricDetailPages>
+  <WindturbineDetailPages
+    v-model="windVisible"
+    :windturbine="currentWindturbine"
+    @close="close"
+  >
+  </WindturbineDetailPages>
+  <StationSvgDetailPages
+    v-model="svgVisible"
+    :svgWeb="svgWeb"
+    @close="close"
+  >
+  </StationSvgDetailPages>
+</template>
+
+<script>
+import PhotoelectricDetailPages from "./PhotoelectricDetailPages.vue";
+import MessageBridge from "utils/MessageBridge";
+import StationSvgDetailPages from "../stationSvgDetailPages.vue";
+import WindturbineDetailPages from "../WindturbineDetailPages.vue";
+import api from "api/index";
+import dayjs from "dayjs";
+export default {
+  name: "RecommendedArea",
+  props: ["datas"],
+  data() {
+    return {
+      values: [],
+      currentWindturbine: {},
+      dialogVisible: false,
+      svgVisible: false,
+      windVisible: false,
+      svgWeb: "",
+      station: [],
+      dialogData: {
+        data: {
+          PowerSet: "",
+          AgcUp: "",
+          AgcLower: "",
+          ActualPower: "",
+          TheoryPower: "",
+          ForecastPower: "",
+          AgcIn: "",
+          AgcFar: "",
+          SumLock: "",
+          SubLock: "",
+        },
+      },
+      interval: "",
+      intervalTimer: "",
+      timeIndex: 0,
+    };
+  },
+  components: {
+    PhotoelectricDetailPages,
+    StationSvgDetailPages,
+    WindturbineDetailPages,
+  },
+  created() {
+    this.datacontrol();
+    this.getAGCStation();
+  },
+  methods: {
+    getAGCStation() {
+      api.getAGCStation().then((res) => {
+        this.station = res.data;
+      });
+    },
+    datacontrol() {
+      let mb = MessageBridge.getInstance();
+      let attention = [{ key: "/topic/attention", action: this.attention }];
+      mb.register(attention);
+    },
+    attention(msg) {
+      let list = JSON.parse(msg);
+      let types = {
+        ElectricityRestrictions: "限电",
+        Offline: "离线",
+        Accident: "故障",
+        LowCurveFollowingRate: "跟随率低",
+      };
+      list.forEach((item) => {
+        item.createTime = dayjs(item.time).format("YYYY-MM-DD HH:mm:ss");
+        item.showType = types[item.type];
+      });
+      this.values = list;
+    },
+    closed() {
+      clearInterval(this.intervalTimer);
+      this.intervalTimer = null
+    },
+    close() {
+      this.svgVisible = false;
+    },
+
+    sendMsg: function (vl, types, index) {
+      if (vl.attentionType === "Station" && vl.type === "Accident") {
+        this.svgVisible = true;
+        this.svgWeb = vl.stationId;
+      } else if (
+        (vl.attentionType === "Station" &&
+          vl.type === "ElectricityRestrictions") ||
+        types
+      ) {
+        let that = this;
+        that.timeIndex = 0;
+        that.ajaxDetail(vl, index);
+        that.intervalTimer = window.setInterval(function () {
+          that.ajaxDetail(vl, index);
+        }, 3000);
+        that.dialogVisible = true;
+        that.dialogData.stationName = this.station.filter(
+          (item) => item.id === vl.id
+        )[0].name;
+      } else if (vl.attentionType === "WindTurbine") {
+        this.windVisible = true;
+        this.currentWindturbine = this.$store.state.windturbinelist[vl.id];
+      }
+    },
+    ajaxDetail(data, index) {
+      let thisKey = this.station.filter((item) => item.id === data.id)[0].tags;
+      let array = [];
+      thisKey.forEach((item) => {
+        item.value ? array.push(item.value) : "";
+      });
+      let params = array.join(",");
+      api.getLatest(params).then((res) => {
+        if (res) {
+          for (let v in res.data) {
+            thisKey.forEach((item) => {
+              let calc = item.calc ? item.calc : 1;
+              if (item.value === v) {
+                this.dialogData.data[item.tag] = {
+                  name: item.name,
+                  value: res.data[v].doubleValue
+                    ? res.data[v].doubleValue === 0? 0 : Number((res.data[v].doubleValue * calc).toFixed(2))
+                    : res.data[v].booleanValue? 1: 0,
+                };
+              }
+            });
+          }
+        }
+      });
+      if (this.timeIndex == 0) {
+        //一分钟执行一次
+        let date = new Date();
+        let endTs = date.getTime();
+        let starTs = endTs - 28800000;
+        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,
+                  });
+                });
+                res2.data.forEach((item) => {
+                  ActualPowerData.push({
+                    ts: item.ts,
+                    doubleValue: item.doubleValue * ActualPower.calc,
+                  });
+                });
+                this.$refs.photo.initData(PowerSetData, ActualPowerData);
+              });
+          });
+      } else if (this.timeIndex == 20) {
+        this.timeIndex = -1;
+      }
+      this.timeIndex++;
+    },
+  },
+};
+</script>
+<style scoped>
+.area {
+  display: flex;
+  flex-direction: column;
+  font-size: 12px;
+  color: #ffffff;
+  width: 130px;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.content {
+  margin-top: -70px;
+  width: 25px;
+  height: 34px;
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+}
 </style>

src/components/focus/multiple-line-chart.vue

@@ -1,130 +1,130 @@
-<template>
-  <div class="charts" id="showEchart"></div>
-</template>
-
-<script>
-import * as echarts from "echarts";
-export default {
-  name: "multiple-line-chart",
-  componentName: "multiple-line-chart",
-  data() {
-    return {
-      id: "",
-      chart: null,
-    };
-  },
-  methods: {
-    initChart(chartData) {
-      let chartDom = document.getElementById("showEchart");
-      let myChart = echarts.init(chartDom, "#ffffff");
-      let option = {
-        tooltip: {
-          trigger: 'axis'
-        },
-        legend: {
-          show: true,
-          data: chartData.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: chartData.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: chartData.value[0].title,
-            smooth: true,
-            showSymbol: false,
-            data: chartData.value[0].value.map((items) => {
-              return items.value;
-            }),
-            type: "line",
-            lineStyle: {
-              normal: {
-                color: "rgba(75, 85, 174, 1)",
-                width: 1,
-              },
-            },
-          },
-          {
-            name: chartData.value[1].title,
-            smooth: true,
-            showSymbol: false,
-            data: chartData.value[1].value.map((items) => {
-              return items.value;
-            }),
-            type: "line",
-            lineStyle: {
-              normal: {
-                color: "rgba(05, 187, 76, 1)",
-                width: 1,
-              },
-            },
-          },
-        ],
-      };
-      option && myChart.setOption(option);
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.charts {
-  width: 1050px;
-  height: 40vh;
-}
+<template>
+  <div class="charts" id="showEchart"></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+  name: "multiple-line-chart",
+  componentName: "multiple-line-chart",
+  data() {
+    return {
+      id: "",
+      chart: null,
+    };
+  },
+  methods: {
+    initChart(chartData) {
+      let chartDom = document.getElementById("showEchart");
+      let myChart = echarts.init(chartDom, "#ffffff");
+      let option = {
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          show: true,
+          data: chartData.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: chartData.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: chartData.value[0].title,
+            smooth: true,
+            showSymbol: false,
+            data: chartData.value[0].value.map((items) => {
+              return items.value;
+            }),
+            type: "line",
+            lineStyle: {
+              normal: {
+                color: "rgba(75, 85, 174, 1)",
+                width: 1,
+              },
+            },
+          },
+          {
+            name: chartData.value[1].title,
+            smooth: true,
+            showSymbol: false,
+            data: chartData.value[1].value.map((items) => {
+              return items.value;
+            }),
+            type: "line",
+            lineStyle: {
+              normal: {
+                color: "rgba(05, 187, 76, 1)",
+                width: 1,
+              },
+            },
+          },
+        ],
+      };
+      option && myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.charts {
+  width: 1050px;
+  height: 40vh;
+}
 </style>

src/components/focus/syzDetails.vue

@@ -1,382 +1,382 @@
-<template>
-  <el-dialog
-    width="90%"
-    @open="opened"
-    @closed="closed"
-    :fullscreen="true"
-    :show-close="true"
-    class="dialogs"
-    destroy-on-close
-  >
-    <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>
-          <CL ref="svgRef0" v-if="item.id === 'CL_FDC'" />
-          <KB ref="svgRef1" v-if="item.id === 'KB_FDC'" />
-          <DX ref="svgRef2" v-if="item.id === 'DX_FDC'" />
-          <SY ref="svgRef3" v-if="item.id === 'SY_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 || 'CL_FDC'"
-      />
-    </div>
-  </el-dialog>
-</template>
-<script>
-import CL from "../BoosterStation/cl.vue";
-import DX from "../BoosterStation/dx.vue";
-import KB from "../BoosterStation/kb.vue";
-import SY from "../BoosterStation/sy.vue";
-import CurrentWarningCard from "./currentWarningCard.vue";
-export default {
-  components: {
-    CL,
-    DX,
-    KB,
-    CurrentWarningCard,
-  },
-  data() {
-    return {
-      activeTab: this.$store.state.activeTab,
-      svgVisible: true,
-      audio: null,
-      timmer: null,
-      syzArray: this.$store.getters.syzArray || [],
-      pageshowMode: 0,
-      current: 0,
-      currentStation: "",
-    };
-  },
-  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.$nextTick(() => {
-        this.$refs.svgRef0[0].opened();
-      });
-      this.initAlarm();
-      this.timmer = setInterval(() => {
-        this.renderAlarm();
-      }, 3000);
-    },
-
-
-    closed() {
-      this.$refs.svgRef0[0].closed();
-      this.$refs.svgRef1[0].closed();
-      this.$refs.svgRef2[0].closed();
-      this.$refs.svgRef3[0].closed();
-      clearInterval(this.timmer);
-      this.timmer = null;
-      this.$store.commit("activeTab", "");
-      this.$store.commit("syzDialogShow", false);
-    },
-
-    tabClick(res) {
-      switch (Number(res.index)) {
-        case 0:
-          this.$refs.svgRef1[0].closed();
-          this.$refs.svgRef2[0].closed();
-          this.$refs.svgRef0[0].opened();
-          this.$refs.svgRef3[0].closed();
-          break;
-        case 1:
-          this.$refs.svgRef0[0].closed();
-          this.$refs.svgRef2[0].closed();
-          this.$refs.svgRef1[0].opened();
-          this.$refs.svgRef3[0].closed();
-          break;
-        case 2:
-          this.$refs.svgRef1[0].closed();
-          this.$refs.svgRef0[0].closed();
-          this.$refs.svgRef2[0].opened();
-          this.$refs.svgRef3[0].closed();
-          break;
-        case 3:
-          this.$refs.svgRef0[0].closed();
-          this.$refs.svgRef1[0].closed();
-          this.$refs.svgRef2[0].closed();
-          this.$refs.svgRef3[0].opened();
-          break;
-      }
-      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: 98%;
-  margin-top: -30px;
-  height: 90vh;
-  position: relative;
-  overflow: hidden;
-  margin-left: 44px;
-
-  .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;
-  }
-}
+<template>
+  <el-dialog
+    width="90%"
+    @open="opened"
+    @closed="closed"
+    :fullscreen="true"
+    :show-close="true"
+    class="dialogs"
+    destroy-on-close
+  >
+    <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>
+          <CL ref="svgRef0" v-if="item.id === 'CL_FDC'" />
+          <KB ref="svgRef1" v-if="item.id === 'KB_FDC'" />
+          <DX ref="svgRef2" v-if="item.id === 'DX_FDC'" />
+          <SY ref="svgRef3" v-if="item.id === 'SY_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 || 'CL_FDC'"
+      />
+    </div>
+  </el-dialog>
+</template>
+<script>
+import CL from "../BoosterStation/cl.vue";
+import DX from "../BoosterStation/dx.vue";
+import KB from "../BoosterStation/kb.vue";
+import SY from "../BoosterStation/sy.vue";
+import CurrentWarningCard from "./currentWarningCard.vue";
+export default {
+  components: {
+    CL,
+    DX,
+    KB,
+    CurrentWarningCard,
+  },
+  data() {
+    return {
+      activeTab: this.$store.state.activeTab,
+      svgVisible: true,
+      audio: null,
+      timmer: null,
+      syzArray: this.$store.getters.syzArray || [],
+      pageshowMode: 0,
+      current: 0,
+      currentStation: "",
+    };
+  },
+  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.$nextTick(() => {
+        this.$refs.svgRef0[0].opened();
+      });
+      this.initAlarm();
+      this.timmer = setInterval(() => {
+        this.renderAlarm();
+      }, 3000);
+    },
+
+
+    closed() {
+      this.$refs.svgRef0[0].closed();
+      this.$refs.svgRef1[0].closed();
+      this.$refs.svgRef2[0].closed();
+      this.$refs.svgRef3[0].closed();
+      clearInterval(this.timmer);
+      this.timmer = null;
+      this.$store.commit("activeTab", "");
+      this.$store.commit("syzDialogShow", false);
+    },
+
+    tabClick(res) {
+      switch (Number(res.index)) {
+        case 0:
+          this.$refs.svgRef1[0].closed();
+          this.$refs.svgRef2[0].closed();
+          this.$refs.svgRef0[0].opened();
+          this.$refs.svgRef3[0].closed();
+          break;
+        case 1:
+          this.$refs.svgRef0[0].closed();
+          this.$refs.svgRef2[0].closed();
+          this.$refs.svgRef1[0].opened();
+          this.$refs.svgRef3[0].closed();
+          break;
+        case 2:
+          this.$refs.svgRef1[0].closed();
+          this.$refs.svgRef0[0].closed();
+          this.$refs.svgRef2[0].opened();
+          this.$refs.svgRef3[0].closed();
+          break;
+        case 3:
+          this.$refs.svgRef0[0].closed();
+          this.$refs.svgRef1[0].closed();
+          this.$refs.svgRef2[0].closed();
+          this.$refs.svgRef3[0].opened();
+          break;
+      }
+      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: 98%;
+  margin-top: -30px;
+  height: 90vh;
+  position: relative;
+  overflow: hidden;
+  margin-left: 44px;
+
+  .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/modeControl/detailPages.vue

@@ -1,403 +1,403 @@
-<template>
-  <el-dialog
-    width="55%"
-    @opened="opened()"
-    @closed="closed()"
-    :show-close="false"
-    class="my-info-dialog"
-  >
-    <template #title>
-      <div class="showTitle">
-        <img
-          class="titleImg"
-          src="../../assets/img/controlcenter/daraTrue.png"
-          alt=""
-        />
-        <div class="titles">国电电力河北新能源开发有限公司</div>
-      </div>
-    </template>
-    <div class="body">
-      <div class="dataList">
-        <div class="data">
-          <div class="name">健康指数：</div>
-          <div class="num">{{ showDate?.healthIndex?.value }}</div>
-        </div>
-        <div class="data">
-          <div class="name">资源指数：</div>
-          <div class="num">{{ showDate?.resourceIndex?.value }}</div>
-        </div>
-        <div class="data">
-          <div class="name">风能利用率：</div>
-          <div class="num">{{ showDate?.windEnergyRate?.value }}%</div>
-        </div>
-        <div class="data">
-          <div class="name">曲线跟随率：</div>
-          <div class="num">{{ showDate?.curveFollowingRate?.value }}%</div>
-        </div>
-        <div class="data">
-          <div class="name">实际功率：</div>
-          <div class="num">{{ showDate?.realTimePower?.value }}</div>
-          <div class="unit">MW</div>
-        </div>
-        <div class="data">
-          <div class="name">理论功率：</div>
-          <div class="num">{{ showDate?.theoreticalPower?.value }}</div>
-          <div class="unit" @click="ChangeColor()">MW</div>
-        </div>
-        <div class="data">
-          <div class="name">AGC有功设定：</div>
-          <div class="num">{{ showDate?.agcPowerSet?.value }}</div>
-          <div class="unit" @click="ChangeColors()">MW</div>
-        </div>
-      </div>
-      <div id="totleEcharts" class="echarts"></div>
-      <!-- <MultipleLineChart height="400px" :units="powerLineChartData.units" :list="powerLineChartData.value" :colors="colors"
-				:showLegend="true" /> -->
-    </div>
-  </el-dialog>
-</template>
-
-<script>
-import MultipleLineChart from "../focus/multiple-line-chart.vue";
-import MessageBridge from "utils/MessageBridge";
-import dayjs from "dayjs";
-import api from "api/index";
-import * as echarts from "echarts";
-export default {
-  components: {
-    MultipleLineChart,
-  },
-  props: {
-    stationName: {
-      type: String,
-      default: "",
-    },
-    data: {
-      type: Array,
-    },
-  },
-  created() {},
-  mounted() {},
-  data() {
-    return {
-      // 定时器
-      timer: "",
-      colors: ["rgba(75, 85, 174, 1)", "rgba(05, 187, 76, 1)"],
-      showDate: {},
-      chartData: {
-        units: [""],
-        value: [
-          {
-            title: "实际功率(MW)",
-            yAxisIndex: 0,
-            value: [],
-          },
-          {
-            title: "理论功率(MW)",
-            yAxisIndex: 0,
-            value: [],
-          },
-        ],
-      },
-      timeData: [],
-      PowerSet: [],
-      ActualPower: [],
-      index: 0,
-      powerLineChartData: {},
-      intervals: null,
-    };
-  },
-  methods: {
-    opened() {
-      this.getMessage();
-      this.intervals = setInterval(this.getMessage, 10000);
-    },
-    getMessage() {
-      api.stationOverview().then((res) => {
-        let data = res.data;
-        data.healthIndex.value = Number(data.healthIndex.value).toFixed(0);
-        data.resourceIndex.value = Number(data.resourceIndex.value).toFixed(0);
-        data.realTimePower.value = data.realTimePower.value.toFixed(2);
-        data.theoreticalPower.value = data.theoreticalPower.value.toFixed(2);
-        data.agcPowerSet.value = data.agcPowerSet.value.toFixed(2);
-        data.windEnergyRate.value = data.windEnergyRate.value.toFixed(2);
-        data.curveFollowingRate.value =
-          data.curveFollowingRate.value.toFixed(2);
-        this.showDate = data;
-      });
-    },
-    async getDate() {
-      await this.getPower({
-        PowerSet: "HB_GD_QYG_JS_XX_XX_XXX_CI0125",
-        name: "ActualPower",
-      });
-      await this.getPower({
-        ActualPower: "HB_GD_QYG_JS_XX_XX_XXX_CI0180",
-        name: "theoryPower",
-      });
-      this.timer = setTimeout(() => {
-        this.getDate();
-      }, 60000);
-    },
-    getPower(values) {
-      let date = new Date();
-      let endTs = date.getTime();
-      let startTs = endTs - 28800000;
-      let names = values.name;
-      api
-        .getPower({
-          tagName: values.PowerSet ? values.PowerSet : values.ActualPower,
-          startTs: startTs,
-          endTs: endTs,
-          interval: 60,
-        })
-        .then((res) => {
-          if (res) {
-            if (names === "ActualPower") {
-              let list = [];
-              res.data.forEach((item) => {
-                list.push({
-                  text: dayjs(item.ts).format("HH:mm"),
-                  value: parseFloat(item.doubleValue.toFixed(2)),
-                });
-                this.chartData.value[0].value = list;
-              });
-            } else {
-              let list = [];
-              res.data.forEach((item) => {
-                list.push({
-                  text: dayjs(item.ts).format("HH:mm"),
-                  value: parseFloat(item.doubleValue.toFixed(2) / 1000),
-                });
-                this.chartData.value[1].value = list;
-              });
-            }
-            this.totleErtcher(this.chartData);
-          }
-        });
-    },
-    totleErtcher(chartData) {
-      console.log(document.getElementById("totleEcharts"));
-      let chartDom = document.getElementById("totleEcharts");
-      let myChart = echarts.init(chartDom, "#ffffff");
-      let option;
-      option = {
-        tooltip: {
-          trigger: "axis",
-        },
-        legend: {
-          show: true,
-          data: chartData.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: chartData.value[0].value.map((item) => {
-              return item.text;
-            }),
-          },
-        ],
-        yAxis: {
-          type: "value",
-          axisLabel: {
-            formatter: "{value}",
-            fontSize: 14,
-          },
-          axisLine: {
-            show: false,
-          },
-          splitLine: {
-            show: true,
-            lineStyle: {
-              color: "#606769",
-              type: "dashed",
-            },
-          },
-        },
-        series: [
-          {
-            name: chartData.value[0].title,
-            smooth: true,
-            showSymbol: false,
-            data: chartData.value[0].value.map((item) => {
-              return item.value;
-            }),
-            type: "line",
-            lineStyle: {
-              normal: {
-                color: "rgba(75, 85, 174, 1)",
-                width: 1,
-              },
-            },
-          },
-          {
-            name: chartData.value[1].title,
-            smooth: true,
-            showSymbol: false,
-            data: chartData.value[1].value.map((item) => {
-              return item.value;
-            }),
-            type: "line",
-            lineStyle: {
-              normal: {
-                color: "rgba(05, 187, 76, 1)",
-                width: 1,
-              },
-            },
-          },
-        ],
-      };
-
-      option && myChart.setOption(option);
-    },
-    ChangeColors() {
-      this.colors = ["#aa2116", "#fcaf17"];
-    },
-    ChangeColor() {
-      this.colors = ["rgba(75, 85, 174, 1)", "rgba(05, 187, 76, 1)"];
-    },
-    closed() {
-      clearInterval(this.timer);
-      //勿删，传递关闭方法
-      clearInterval(this.intervals);
-      this.intervals = null;
-      this.timer = null;
-    },
-  },
-  unmounted() {
-    clearInterval(this.intervals);
-    this.intervals = null;
-  },
-};
-</script>
-<style scoped>
-.echartsBox {
-  width: 64rem;
-  height: 220px;
-  overflow: hidden;
-}
-
-.el-dialog__header {
-  background-color: #000000;
-}
-
-.showTitle {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  margin-top: -10px;
-  font-size: 18px;
-  color: #ffffff;
-}
-
-.titleImg {
-  width: 16px;
-  height: 16px;
-  margin-right: 13px;
-}
-
-.icon {
-  font-size: 12px;
-  margin-left: 10px;
-  margin-top: 5px;
-}
-
-.body {
-  background-color: black;
-  width: 100%;
-  margin-top: -30px;
-  /* height: 200px; */
-}
-
-.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: 22px;
-}
-
-.name {
-  width: 40%;
-  display: flex;
-  flex-direction: row-reverse;
-  font-size: 12px;
-  color: #ffffff;
-}
-
-.num {
-  margin-left: 59px;
-  font-size: 16px;
-  color: #05bb4c;
-  min-width: 40px;
-}
-
-.unit {
-  font-size: 16px;
-  color: #ffffff;
-  margin-left: 20px;
-}
-
-.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;
-}
-
-.statusIcon {
-  width: 14px;
-  height: 14px;
-  margin-left: 8px;
-}
-
-.echarts {
-  width: 100%;
-  height: 400px;
-  display: inline-block;
-}
+<template>
+  <el-dialog
+    width="55%"
+    @opened="opened()"
+    @closed="closed()"
+    :show-close="false"
+    class="my-info-dialog"
+  >
+    <template #title>
+      <div class="showTitle">
+        <img
+          class="titleImg"
+          src="../../assets/img/controlcenter/daraTrue.png"
+          alt=""
+        />
+        <div class="titles">国电电力河北新能源开发有限公司</div>
+      </div>
+    </template>
+    <div class="body">
+      <div class="dataList">
+        <div class="data">
+          <div class="name">健康指数：</div>
+          <div class="num">{{ showDate?.healthIndex?.value }}</div>
+        </div>
+        <div class="data">
+          <div class="name">资源指数：</div>
+          <div class="num">{{ showDate?.resourceIndex?.value }}</div>
+        </div>
+        <div class="data">
+          <div class="name">风能利用率：</div>
+          <div class="num">{{ showDate?.windEnergyRate?.value }}%</div>
+        </div>
+        <div class="data">
+          <div class="name">曲线跟随率：</div>
+          <div class="num">{{ showDate?.curveFollowingRate?.value }}%</div>
+        </div>
+        <div class="data">
+          <div class="name">实际功率：</div>
+          <div class="num">{{ showDate?.realTimePower?.value }}</div>
+          <div class="unit">MW</div>
+        </div>
+        <div class="data">
+          <div class="name">理论功率：</div>
+          <div class="num">{{ showDate?.theoreticalPower?.value }}</div>
+          <div class="unit" @click="ChangeColor()">MW</div>
+        </div>
+        <div class="data">
+          <div class="name">AGC有功设定：</div>
+          <div class="num">{{ showDate?.agcPowerSet?.value }}</div>
+          <div class="unit" @click="ChangeColors()">MW</div>
+        </div>
+      </div>
+      <div id="totleEcharts" class="echarts"></div>
+      <!-- <MultipleLineChart height="400px" :units="powerLineChartData.units" :list="powerLineChartData.value" :colors="colors"
+				:showLegend="true" /> -->
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import MultipleLineChart from "../focus/multiple-line-chart.vue";
+import MessageBridge from "utils/MessageBridge";
+import dayjs from "dayjs";
+import api from "api/index";
+import * as echarts from "echarts";
+export default {
+  components: {
+    MultipleLineChart,
+  },
+  props: {
+    stationName: {
+      type: String,
+      default: "",
+    },
+    data: {
+      type: Array,
+    },
+  },
+  created() {},
+  mounted() {},
+  data() {
+    return {
+      // 定时器
+      timer: "",
+      colors: ["rgba(75, 85, 174, 1)", "rgba(05, 187, 76, 1)"],
+      showDate: {},
+      chartData: {
+        units: [""],
+        value: [
+          {
+            title: "实际功率(MW)",
+            yAxisIndex: 0,
+            value: [],
+          },
+          {
+            title: "理论功率(MW)",
+            yAxisIndex: 0,
+            value: [],
+          },
+        ],
+      },
+      timeData: [],
+      PowerSet: [],
+      ActualPower: [],
+      index: 0,
+      powerLineChartData: {},
+      intervals: null,
+    };
+  },
+  methods: {
+    opened() {
+      this.getMessage();
+      this.intervals = setInterval(this.getMessage, 10000);
+    },
+    getMessage() {
+      api.stationOverview().then((res) => {
+        let data = res.data;
+        data.healthIndex.value = Number(data.healthIndex.value).toFixed(0);
+        data.resourceIndex.value = Number(data.resourceIndex.value).toFixed(0);
+        data.realTimePower.value = data.realTimePower.value.toFixed(2);
+        data.theoreticalPower.value = data.theoreticalPower.value.toFixed(2);
+        data.agcPowerSet.value = data.agcPowerSet.value.toFixed(2);
+        data.windEnergyRate.value = data.windEnergyRate.value.toFixed(2);
+        data.curveFollowingRate.value =
+          data.curveFollowingRate.value.toFixed(2);
+        this.showDate = data;
+      });
+    },
+    async getDate() {
+      await this.getPower({
+        PowerSet: "HB_GD_QYG_JS_XX_XX_XXX_CI0125",
+        name: "ActualPower",
+      });
+      await this.getPower({
+        ActualPower: "HB_GD_QYG_JS_XX_XX_XXX_CI0180",
+        name: "theoryPower",
+      });
+      this.timer = setTimeout(() => {
+        this.getDate();
+      }, 60000);
+    },
+    getPower(values) {
+      let date = new Date();
+      let endTs = date.getTime();
+      let startTs = endTs - 28800000;
+      let names = values.name;
+      api
+        .getPower({
+          tagName: values.PowerSet ? values.PowerSet : values.ActualPower,
+          startTs: startTs,
+          endTs: endTs,
+          interval: 60,
+        })
+        .then((res) => {
+          if (res) {
+            if (names === "ActualPower") {
+              let list = [];
+              res.data.forEach((item) => {
+                list.push({
+                  text: dayjs(item.ts).format("HH:mm"),
+                  value: parseFloat(item.doubleValue.toFixed(2)),
+                });
+                this.chartData.value[0].value = list;
+              });
+            } else {
+              let list = [];
+              res.data.forEach((item) => {
+                list.push({
+                  text: dayjs(item.ts).format("HH:mm"),
+                  value: parseFloat(item.doubleValue.toFixed(2) / 1000),
+                });
+                this.chartData.value[1].value = list;
+              });
+            }
+            this.totleErtcher(this.chartData);
+          }
+        });
+    },
+    totleErtcher(chartData) {
+      console.log(document.getElementById("totleEcharts"));
+      let chartDom = document.getElementById("totleEcharts");
+      let myChart = echarts.init(chartDom, "#ffffff");
+      let option;
+      option = {
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          show: true,
+          data: chartData.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: chartData.value[0].value.map((item) => {
+              return item.text;
+            }),
+          },
+        ],
+        yAxis: {
+          type: "value",
+          axisLabel: {
+            formatter: "{value}",
+            fontSize: 14,
+          },
+          axisLine: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#606769",
+              type: "dashed",
+            },
+          },
+        },
+        series: [
+          {
+            name: chartData.value[0].title,
+            smooth: true,
+            showSymbol: false,
+            data: chartData.value[0].value.map((item) => {
+              return item.value;
+            }),
+            type: "line",
+            lineStyle: {
+              normal: {
+                color: "rgba(75, 85, 174, 1)",
+                width: 1,
+              },
+            },
+          },
+          {
+            name: chartData.value[1].title,
+            smooth: true,
+            showSymbol: false,
+            data: chartData.value[1].value.map((item) => {
+              return item.value;
+            }),
+            type: "line",
+            lineStyle: {
+              normal: {
+                color: "rgba(05, 187, 76, 1)",
+                width: 1,
+              },
+            },
+          },
+        ],
+      };
+
+      option && myChart.setOption(option);
+    },
+    ChangeColors() {
+      this.colors = ["#aa2116", "#fcaf17"];
+    },
+    ChangeColor() {
+      this.colors = ["rgba(75, 85, 174, 1)", "rgba(05, 187, 76, 1)"];
+    },
+    closed() {
+      clearInterval(this.timer);
+      //勿删，传递关闭方法
+      clearInterval(this.intervals);
+      this.intervals = null;
+      this.timer = null;
+    },
+  },
+  unmounted() {
+    clearInterval(this.intervals);
+    this.intervals = null;
+  },
+};
+</script>
+<style scoped>
+.echartsBox {
+  width: 64rem;
+  height: 220px;
+  overflow: hidden;
+}
+
+.el-dialog__header {
+  background-color: #000000;
+}
+
+.showTitle {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  margin-top: -10px;
+  font-size: 18px;
+  color: #ffffff;
+}
+
+.titleImg {
+  width: 16px;
+  height: 16px;
+  margin-right: 13px;
+}
+
+.icon {
+  font-size: 12px;
+  margin-left: 10px;
+  margin-top: 5px;
+}
+
+.body {
+  background-color: black;
+  width: 100%;
+  margin-top: -30px;
+  /* height: 200px; */
+}
+
+.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: 22px;
+}
+
+.name {
+  width: 40%;
+  display: flex;
+  flex-direction: row-reverse;
+  font-size: 12px;
+  color: #ffffff;
+}
+
+.num {
+  margin-left: 59px;
+  font-size: 16px;
+  color: #05bb4c;
+  min-width: 40px;
+}
+
+.unit {
+  font-size: 16px;
+  color: #ffffff;
+  margin-left: 20px;
+}
+
+.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;
+}
+
+.statusIcon {
+  width: 14px;
+  height: 14px;
+  margin-left: 8px;
+}
+
+.echarts {
+  width: 100%;
+  height: 400px;
+  display: inline-block;
+}
 </style>

src/components/panel/panel-no-title.vue

@@ -1,93 +1,93 @@
-<template>
-  <div class="com-panel" :class="{ 'no-title': !hasTitle }">
-    <div v-if="hasTitle" class="panel-header">
-      <div class="panel-title">
-        <i v-if="hasIcon" class="panel-icon" :class="icon"></i>
-        {{ title }}
-      </div>
-      <div class="panel-tools">{{ subTitle }}</div>
-    </div>
-    <div class="panel-body">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "com-panel",
-  componentName: "com-panel",
-  props: {
-    title: String,
-    icon: String,
-    subTitle: String,
-  },
-  computed: {
-    hasTitle() {
-      if (this.title) return true;
-      return false;
-    },
-    hasIcon() {
-      if (this.icon) return true;
-      return false;
-    },
-  },
-};
-</script>
-<style lang="less" scoped>
-.com-panel {
-  border-left: 0.185vh solid rgba(255, 255, 255, 50%);
-
-  &:before {
-    content: " ";
-    width: 0.37vh;
-    height: 0.37vh;
-    float: left;
-    background: #fff;
-    margin: 0.185vh 0.556vh 0vh 0.185vh;
-  }
-
-  &.no-title {
-    border-left: 0vh;
-  }
-
-  &.no-title::before {
-    display: none;
-  }
-
-  .panel-header {
-    display: flex;
-    font-size: @fontsize;
-    padding-left: 1.4815vh;
-    background: rgba(255, 255, 255, 10%);
-    line-height: 2.963vh;
-    margin-bottom: 1.481vh;
-
-    .panel-title {
-      color: rgba(255, 255, 255, 0.8);
-      flex: 1 1 auto;
-      .panel-icon {
-        margin-right: 0.741vh;
-      }
-    }
-
-    .panel-tools {
-      flex: 0 0 auto;
-      color: #fff;
-      opacity: 0.3;
-      padding: 0 0.741vh;
-      font-size: @fontsize-s;
-      letter-spacing: 0.093vh;
-    }
-  }
-
-  .panel-body {
-    padding-left: 1.111vh;
-    color: rgba(255, 255, 255, 0.8);
-  }
-
-  &.no-title .panel-body {
-    padding-left: 0vh;
-  }
-}
-</style>
+<template>
+  <div class="com-panel" :class="{ 'no-title': !hasTitle }">
+    <div v-if="hasTitle" class="panel-header">
+      <div class="panel-title">
+        <i v-if="hasIcon" class="panel-icon" :class="icon"></i>
+        {{ title }}
+      </div>
+      <div class="panel-tools">{{ subTitle }}</div>
+    </div>
+    <div class="panel-body">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "com-panel",
+  componentName: "com-panel",
+  props: {
+    title: String,
+    icon: String,
+    subTitle: String,
+  },
+  computed: {
+    hasTitle() {
+      if (this.title) return true;
+      return false;
+    },
+    hasIcon() {
+      if (this.icon) return true;
+      return false;
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.com-panel {
+  border-left: 0.185vh solid rgba(255, 255, 255, 50%);
+
+  &:before {
+    content: " ";
+    width: 0.37vh;
+    height: 0.37vh;
+    float: left;
+    background: #fff;
+    margin: 0.185vh 0.556vh 0vh 0.185vh;
+  }
+
+  &.no-title {
+    border-left: 0vh;
+  }
+
+  &.no-title::before {
+    display: none;
+  }
+
+  .panel-header {
+    display: flex;
+    font-size: @fontsize;
+    padding-left: 1.4815vh;
+    background: rgba(255, 255, 255, 10%);
+    line-height: 2.963vh;
+    margin-bottom: 1.481vh;
+
+    .panel-title {
+      color: rgba(255, 255, 255, 0.8);
+      flex: 1 1 auto;
+      .panel-icon {
+        margin-right: 0.741vh;
+      }
+    }
+
+    .panel-tools {
+      flex: 0 0 auto;
+      color: #fff;
+      opacity: 0.3;
+      padding: 0 0.741vh;
+      font-size: @fontsize-s;
+      letter-spacing: 0.093vh;
+    }
+  }
+
+  .panel-body {
+    padding-left: 1.111vh;
+    color: rgba(255, 255, 255, 0.8);
+  }
+
+  &.no-title .panel-body {
+    padding-left: 0vh;
+  }
+}
+</style>

src/components/panel/panel-sand-toolbar.vue

@@ -1,73 +1,73 @@
-<template>
-    <div class="com-panel-sand">
-        <div class="com-panel-sand-header font-sm white">
-            {{ title }}<div class="com-panel-sand-sub-title"><slot name="tools"></slot></div>
-        </div>
-        <div class="com-panel-body">
-            <slot></slot>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    name: "com-panel-sand-toolbar",
-    componentName: "com-panel-sand-toolbar",
-    props: {
-        // 标题
-        title: {
-            type: String,
-            default: "",
-        },
-    },
-};
-</script>
-<style lang="less">
-.com-panel-sand {
-    background: #1a1f2fCC;
-    padding: 0 1.481vh 1.481vh 1.481vh;
-    border-top: 1px solid #15a952;
-    position: relative;
-
-    &::after {
-        content: "";
-        position: absolute;
-        width: 5px;
-        height: 5px;
-        background: #15a952;
-        right: -2.5px;
-        top: -2.5px;
-    }
-
-    .com-panel-sand-header {
-        text-align: center;
-        position: relative;
-        padding: 0.833vh 0;
-        border-bottom: 1px solid #15a95266;
-
-        &::after,
-        &::before {
-            content: "";
-            position: absolute;
-            bottom: -1px;
-            width: 15px;
-            height: 1px;
-            background: #15a952;
-        }
-
-        &::after {
-            left: 0;
-        }
-
-        &::before {
-            right: 0;
-        }
-
-        .com-panel-sand-sub-title {
-            position: absolute;
-            right: 0;
-            top: 0.833vh;
-        }
-    }
-}
-</style>
+<template>
+    <div class="com-panel-sand">
+        <div class="com-panel-sand-header font-sm white">
+            {{ title }}<div class="com-panel-sand-sub-title"><slot name="tools"></slot></div>
+        </div>
+        <div class="com-panel-body">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "com-panel-sand-toolbar",
+    componentName: "com-panel-sand-toolbar",
+    props: {
+        // 标题
+        title: {
+            type: String,
+            default: "",
+        },
+    },
+};
+</script>
+<style lang="less">
+.com-panel-sand {
+    background: #1a1f2fCC;
+    padding: 0 1.481vh 1.481vh 1.481vh;
+    border-top: 1px solid #15a952;
+    position: relative;
+
+    &::after {
+        content: "";
+        position: absolute;
+        width: 5px;
+        height: 5px;
+        background: #15a952;
+        right: -2.5px;
+        top: -2.5px;
+    }
+
+    .com-panel-sand-header {
+        text-align: center;
+        position: relative;
+        padding: 0.833vh 0;
+        border-bottom: 1px solid #15a95266;
+
+        &::after,
+        &::before {
+            content: "";
+            position: absolute;
+            bottom: -1px;
+            width: 15px;
+            height: 1px;
+            background: #15a952;
+        }
+
+        &::after {
+            left: 0;
+        }
+
+        &::before {
+            right: 0;
+        }
+
+        .com-panel-sand-sub-title {
+            position: absolute;
+            right: 0;
+            top: 0.833vh;
+        }
+    }
+}
+</style>

src/components/panel/panel-sand.vue

@@ -1,78 +1,78 @@
-<template>
-    <div class="com-panel-sand">
-        <div class="com-panel-sand-header font-sm white">
-            {{ title }}<span class="com-panel-sand-sub-title font-sm gray">{{ subTitle }}</span>
-        </div>
-        <div class="com-panel-body">
-            <slot></slot>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    name: "com-panel-sand",
-    componentName: "com-panel-sand",
-    props: {
-        // 标题
-        title: {
-            type: String,
-            default: "",
-        },
-        // 副标题
-        subTitle: {
-            type: String,
-            default: "",
-        },
-    },
-};
-</script>
-<style lang="less">
-.com-panel-sand {
-    background: #1a1f2fCC;
-    padding: 0 1.481vh 1.481vh 1.481vh;
-    border-top: 1px solid #15a952;
-    position: relative;
-
-    &::after {
-        content: "";
-        position: absolute;
-        width: 5px;
-        height: 5px;
-        background: #15a952;
-        right: -2.5px;
-        top: -2.5px;
-    }
-
-    .com-panel-sand-header {
-        text-align: center;
-        position: relative;
-        padding: 0.833vh 0;
-        border-bottom: 1px solid #15a95266;
-
-        &::after,
-        &::before {
-            content: "";
-            position: absolute;
-            bottom: -1px;
-            width: 15px;
-            height: 1px;
-            background: #15a952;
-        }
-
-        &::after {
-            left: 0;
-        }
-
-        &::before {
-            right: 0;
-        }
-
-        .com-panel-sand-sub-title {
-            position: absolute;
-            right: 0;
-            top: 0.833vh;
-        }
-    }
-}
-</style>
+<template>
+    <div class="com-panel-sand">
+        <div class="com-panel-sand-header font-sm white">
+            {{ title }}<span class="com-panel-sand-sub-title font-sm gray">{{ subTitle }}</span>
+        </div>
+        <div class="com-panel-body">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "com-panel-sand",
+    componentName: "com-panel-sand",
+    props: {
+        // 标题
+        title: {
+            type: String,
+            default: "",
+        },
+        // 副标题
+        subTitle: {
+            type: String,
+            default: "",
+        },
+    },
+};
+</script>
+<style lang="less">
+.com-panel-sand {
+    background: #1a1f2fCC;
+    padding: 0 1.481vh 1.481vh 1.481vh;
+    border-top: 1px solid #15a952;
+    position: relative;
+
+    &::after {
+        content: "";
+        position: absolute;
+        width: 5px;
+        height: 5px;
+        background: #15a952;
+        right: -2.5px;
+        top: -2.5px;
+    }
+
+    .com-panel-sand-header {
+        text-align: center;
+        position: relative;
+        padding: 0.833vh 0;
+        border-bottom: 1px solid #15a95266;
+
+        &::after,
+        &::before {
+            content: "";
+            position: absolute;
+            bottom: -1px;
+            width: 15px;
+            height: 1px;
+            background: #15a952;
+        }
+
+        &::after {
+            left: 0;
+        }
+
+        &::before {
+            right: 0;
+        }
+
+        .com-panel-sand-sub-title {
+            position: absolute;
+            right: 0;
+            top: 0.833vh;
+        }
+    }
+}
+</style>

src/components/panel/panel.vue

@@ -1,112 +1,112 @@
-<template>
-  <div class="com-panel" :class="{ 'no-title': !hasTitle, line: showLine }">
-    <div v-if="hasTitle" class="panel-header">
-      <div class="panel-title">
-        <i v-if="hasIcon" class="panel-icon" :class="icon"></i>
-        {{ title }}
-      </div>
-      <div class="panel-tools">{{ subTitle }}</div>
-    </div>
-    <div class="panel-body" :class="{ blur: bgBlur }">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "com-panel",
-  componentName: "com-panel",
-  props: {
-    // 标题
-    title: String,
-    // 图标
-    icon: String,
-    // 副标题
-    subTitle: String,
-    showLine: {
-      type: Boolean,
-      default: true,
-    },
-    bgBlur: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  computed: {
-    // 是否存在标题
-    // 标题为空时 不显示标题框
-    hasTitle() {
-      if (this.title) return true;
-      return false;
-    },
-    // 是否存在图标
-    hasIcon() {
-      if (this.icon) return true;
-      return false;
-    },
-  },
-};
-</script>
-<style lang="less">
-.com-panel {
-  &.line {
-    border-left: 1px solid @gray;
-  }
-
-  &.line:before {
-    content: " ";
-    width: 3px;
-    height: 3px;
-    float: left;
-    background: #c9c9c9;
-    margin: 0.185vh 0.556vh 0vh 0.185vh;
-  }
-
-  &.no-title {
-    border-left: 0vh;
-  }
-
-  &.no-title::before {
-    display: none;
-  }
-
-  .panel-header {
-    display: flex;
-    font-size: 14px;
-    padding-left: 1.185vh;
-    background: rgba(255, 255, 255, 10%);
-    line-height: 27px;
-    margin-bottom: 0.7407vh;
-    height: 27px;
-
-    .panel-title {
-      color: fade(#fff, 75);
-      flex: 1 1 auto;
-      .panel-icon {
-        margin-right: 0.741vh;
-      }
-    }
-
-    .panel-tools {
-      flex: 0 0 auto;
-      color: #ffffff4d;
-      padding: 0 0.741vh;
-      font-size: 12px;
-      letter-spacing: 0.093vh;
-    }
-  }
-
-  .panel-body {
-    position: relative;
-  }
-
-  &.line .panel-body {
-    padding-left: 1.185vh;
-  }
-
-  &.no-title .panel-body {
-    padding-left: 0vh;
-  }
-}
-</style>
+<template>
+  <div class="com-panel" :class="{ 'no-title': !hasTitle, line: showLine }">
+    <div v-if="hasTitle" class="panel-header">
+      <div class="panel-title">
+        <i v-if="hasIcon" class="panel-icon" :class="icon"></i>
+        {{ title }}
+      </div>
+      <div class="panel-tools">{{ subTitle }}</div>
+    </div>
+    <div class="panel-body" :class="{ blur: bgBlur }">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "com-panel",
+  componentName: "com-panel",
+  props: {
+    // 标题
+    title: String,
+    // 图标
+    icon: String,
+    // 副标题
+    subTitle: String,
+    showLine: {
+      type: Boolean,
+      default: true,
+    },
+    bgBlur: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    // 是否存在标题
+    // 标题为空时 不显示标题框
+    hasTitle() {
+      if (this.title) return true;
+      return false;
+    },
+    // 是否存在图标
+    hasIcon() {
+      if (this.icon) return true;
+      return false;
+    },
+  },
+};
+</script>
+<style lang="less">
+.com-panel {
+  &.line {
+    border-left: 1px solid @gray;
+  }
+
+  &.line:before {
+    content: " ";
+    width: 3px;
+    height: 3px;
+    float: left;
+    background: #c9c9c9;
+    margin: 0.185vh 0.556vh 0vh 0.185vh;
+  }
+
+  &.no-title {
+    border-left: 0vh;
+  }
+
+  &.no-title::before {
+    display: none;
+  }
+
+  .panel-header {
+    display: flex;
+    font-size: 14px;
+    padding-left: 1.185vh;
+    background: rgba(255, 255, 255, 10%);
+    line-height: 27px;
+    margin-bottom: 0.7407vh;
+    height: 27px;
+
+    .panel-title {
+      color: fade(#fff, 75);
+      flex: 1 1 auto;
+      .panel-icon {
+        margin-right: 0.741vh;
+      }
+    }
+
+    .panel-tools {
+      flex: 0 0 auto;
+      color: #ffffff4d;
+      padding: 0 0.741vh;
+      font-size: 12px;
+      letter-spacing: 0.093vh;
+    }
+  }
+
+  .panel-body {
+    position: relative;
+  }
+
+  &.line .panel-body {
+    padding-left: 1.185vh;
+  }
+
+  &.no-title .panel-body {
+    padding-left: 0vh;
+  }
+}
+</style>

src/components/panel/panel2.vue

@@ -1,139 +1,139 @@
-<template>
-  <div class="com-panel2" :class="(hasTitle ? '' : 'no-title') + ' ' + color">
-    <div v-if="hasTitle" class="panel-header2">
-      <div class="panel-title2">
-        <i v-if="hasIcon" class="panel-icon2" :class="icon"></i>
-        {{ title }}
-      </div>
-      <div class="panel-tools2">{{ subTitle }}</div>
-    </div>
-    <div class="panel-body2">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "ComPanel",
-  componentName: "ComPanel",
-  props: {
-    title: String,
-    icon: String,
-    subTitle: String,
-    color: String,
-  },
-  computed: {
-    hasTitle() {
-      if (this.title) return true;
-      return false;
-    },
-    hasIcon() {
-      if (this.icon) return true;
-      return false;
-    },
-  },
-};
-</script>
-<style lang="less">
-.com-panel2 {
-  border-left: 0.185vh solid rgba(255, 255, 255, 50%);
-  padding-left: 1.185vh;
-  position: relative;
-
-  &:before,
-  &:after {
-    content: " ";
-    width: 0.37vh;
-    height: 0.37vh;
-    background: @write;
-    position: absolute;
-    left: 0.185vh;
-  }
-
-  &:before {
-    top: 0.185vh;
-  }
-
-  &:after {
-    bottom: 0.185vh;
-  }
-
-  &.no-title {
-    border-left: 0vh;
-  }
-
-  &.no-title::before {
-    display: none;
-  }
-
-  &.green {
-    .panel-header2 {
-      &::after {
-        background-image: @greenLinearRight;
-        width: 10%;
-      }
-      .panel-title2 {
-        .panel-icon2 {
-          color: @green;
-        }
-      }
-    }
-  }
-
-  &.red {
-    .panel-header2 {
-      &::after {
-        background-image: @redLinearRight;
-        width: 10%;
-      }
-      .panel-title2 {
-        .panel-icon2 {
-          color: @red;
-        }
-      }
-    }
-  }
-
-  .panel-header2 {
-    display: flex;
-    font-size: @fontsize;
-    padding-left: 1.185vh;
-    background: fade(@gray, 20);
-    line-height: 2.963vh;
-    margin-bottom: 1.111vh;
-    position: relative;
-
-    &::after {
-      content: "";
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 40vh;
-      height: 100%;
-    }
-
-    .panel-title2 {
-      color: @write;
-
-      .panel-icon2 {
-        margin-right: 0.741vh;
-      }
-    }
-
-    .panel-tools2 {
-      color: #fff;
-      opacity: 0.3;
-      padding: 0 0.741vh;
-    }
-  }
-
-  .panel-body2 {
-    color: rgba(255, 255, 255, 0.8);
-  }
-
-  &.no-title .panel-body2 {
-    padding-left: 0vh;
-  }
-}
-</style>
+<template>
+  <div class="com-panel2" :class="(hasTitle ? '' : 'no-title') + ' ' + color">
+    <div v-if="hasTitle" class="panel-header2">
+      <div class="panel-title2">
+        <i v-if="hasIcon" class="panel-icon2" :class="icon"></i>
+        {{ title }}
+      </div>
+      <div class="panel-tools2">{{ subTitle }}</div>
+    </div>
+    <div class="panel-body2">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ComPanel",
+  componentName: "ComPanel",
+  props: {
+    title: String,
+    icon: String,
+    subTitle: String,
+    color: String,
+  },
+  computed: {
+    hasTitle() {
+      if (this.title) return true;
+      return false;
+    },
+    hasIcon() {
+      if (this.icon) return true;
+      return false;
+    },
+  },
+};
+</script>
+<style lang="less">
+.com-panel2 {
+  border-left: 0.185vh solid rgba(255, 255, 255, 50%);
+  padding-left: 1.185vh;
+  position: relative;
+
+  &:before,
+  &:after {
+    content: " ";
+    width: 0.37vh;
+    height: 0.37vh;
+    background: @write;
+    position: absolute;
+    left: 0.185vh;
+  }
+
+  &:before {
+    top: 0.185vh;
+  }
+
+  &:after {
+    bottom: 0.185vh;
+  }
+
+  &.no-title {
+    border-left: 0vh;
+  }
+
+  &.no-title::before {
+    display: none;
+  }
+
+  &.green {
+    .panel-header2 {
+      &::after {
+        background-image: @greenLinearRight;
+        width: 10%;
+      }
+      .panel-title2 {
+        .panel-icon2 {
+          color: @green;
+        }
+      }
+    }
+  }
+
+  &.red {
+    .panel-header2 {
+      &::after {
+        background-image: @redLinearRight;
+        width: 10%;
+      }
+      .panel-title2 {
+        .panel-icon2 {
+          color: @red;
+        }
+      }
+    }
+  }
+
+  .panel-header2 {
+    display: flex;
+    font-size: @fontsize;
+    padding-left: 1.185vh;
+    background: fade(@gray, 20);
+    line-height: 2.963vh;
+    margin-bottom: 1.111vh;
+    position: relative;
+
+    &::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 40vh;
+      height: 100%;
+    }
+
+    .panel-title2 {
+      color: @write;
+
+      .panel-icon2 {
+        margin-right: 0.741vh;
+      }
+    }
+
+    .panel-tools2 {
+      color: #fff;
+      opacity: 0.3;
+      padding: 0 0.741vh;
+    }
+  }
+
+  .panel-body2 {
+    color: rgba(255, 255, 255, 0.8);
+  }
+
+  &.no-title .panel-body2 {
+    padding-left: 0vh;
+  }
+}
+</style>

src/components/panel/panel3.vue

@@ -1,52 +1,52 @@
-<template>
-  <div class="com-panel-3">
-    <span class="dot top-left"></span>
-    <span class="dot bottom-left"></span>
-    <span class="dot top-rignt"></span>
-    <span class="dot bottom-right"></span>
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "com-panel-3",
-  componentName: "com-panel-3",
-};
-</script>
-<style lang="less" scoped>
-.com-panel-3 {
-  position: relative;
-  background: rgba(255, 255, 255, 0.1);
-  padding: 1.4815vh;
-  display: inline-block;
-  border: 0.093vh solid #536268;
-
-  .dot {
-    position: absolute;
-    width: 0.370vh;
-    height: 0.370vh;
-    background: #fff;
-
-    &.top-left {
-      top: 0.556vh;
-      left: 0.556vh;
-    }
-
-    &.bottom-left {
-      bottom: 0.556vh;
-      left: 0.556vh;
-    }
-
-    &.top-rignt {
-      top: 0.556vh;
-      right: 0.556vh;
-    }
-
-    &.bottom-right {
-      bottom: 0.556vh;
-      right: 0.556vh;
-    }
-  }
-}
-</style>
+<template>
+  <div class="com-panel-3">
+    <span class="dot top-left"></span>
+    <span class="dot bottom-left"></span>
+    <span class="dot top-rignt"></span>
+    <span class="dot bottom-right"></span>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "com-panel-3",
+  componentName: "com-panel-3",
+};
+</script>
+<style lang="less" scoped>
+.com-panel-3 {
+  position: relative;
+  background: rgba(255, 255, 255, 0.1);
+  padding: 1.4815vh;
+  display: inline-block;
+  border: 0.093vh solid #536268;
+
+  .dot {
+    position: absolute;
+    width: 0.370vh;
+    height: 0.370vh;
+    background: #fff;
+
+    &.top-left {
+      top: 0.556vh;
+      left: 0.556vh;
+    }
+
+    &.bottom-left {
+      bottom: 0.556vh;
+      left: 0.556vh;
+    }
+
+    &.top-rignt {
+      top: 0.556vh;
+      right: 0.556vh;
+    }
+
+    &.bottom-right {
+      bottom: 0.556vh;
+      right: 0.556vh;
+    }
+  }
+}
+</style>

src/components/panel/toolbar-panel.vue

@@ -1,46 +1,46 @@
-<template>
-  <div class="com-panel" :class="{ 'no-title': !hasTitle, line: showLine }">
-    <div v-if="hasTitle" class="panel-header">
-      <div class="panel-title">
-        <i v-if="hasIcon" class="panel-icon" :class="icon"></i>
-        {{ title }}
-      </div>
-      <div class="panel-tools">
-        <slot name="tools"></slot>
-      </div>
-    </div>
-    <div class="panel-body">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-// 副标题可嵌入html的panel
-export default {
-  name: "toolbar-panel",
-  componentName: "toolbar-panel",
-  props: {
-    // 标题
-    title: String,
-    // 图标
-    icon: String,
-    showLine: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  computed: {
-    hasTitle() {
-      if (this.title) return true;
-      return false;
-    },
-    hasIcon() {
-      if (this.icon) return true;
-      return false;
-    },
-  },
-};
-</script>
-
-<style lang="less"></style>
+<template>
+  <div class="com-panel" :class="{ 'no-title': !hasTitle, line: showLine }">
+    <div v-if="hasTitle" class="panel-header">
+      <div class="panel-title">
+        <i v-if="hasIcon" class="panel-icon" :class="icon"></i>
+        {{ title }}
+      </div>
+      <div class="panel-tools">
+        <slot name="tools"></slot>
+      </div>
+    </div>
+    <div class="panel-body">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+// 副标题可嵌入html的panel
+export default {
+  name: "toolbar-panel",
+  componentName: "toolbar-panel",
+  props: {
+    // 标题
+    title: String,
+    // 图标
+    icon: String,
+    showLine: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  computed: {
+    hasTitle() {
+      if (this.title) return true;
+      return false;
+    },
+    hasIcon() {
+      if (this.icon) return true;
+      return false;
+    },
+  },
+};
+</script>
+
+<style lang="less"></style>

src/components/problem/ProblemArea.vue

@@ -1,40 +1,40 @@
-/* 问题区 */
-<template>
-  <div class="problem" >
-    <AreaCard title="问题区" height="86"></AreaCard>
-  </div>
-</template>
-
-<script>
-  import AreaCard from "./areaCard.vue";
-  import BackgroundData from 'utils/BackgroundData'
-  export default {
-    name: "ProblemArea",
-    components: {
-      AreaCard,
-    },
-    props: {},
-    data() {
-      return {
-        ls: {
-          maintain: { key: "维护", value: [] },
-          malfunction: { key: "故障", value: [] },
-          offline: { key: "离线", value: [] },
-          lockd: { key: "挂牌", value: [] },
-        },
-      };
-    },
-    computed: {},
-    created: function () {
-
-    },
-    methods: {
-    },
-  };
-</script>
-<style scoped>
-  .problem {
-    height: 97%;
-    background-color: #000000;
-  }
+/* 问题区 */
+<template>
+  <div class="problem" >
+    <AreaCard title="问题区" height="86"></AreaCard>
+  </div>
+</template>
+
+<script>
+  import AreaCard from "./areaCard.vue";
+  import BackgroundData from 'utils/BackgroundData'
+  export default {
+    name: "ProblemArea",
+    components: {
+      AreaCard,
+    },
+    props: {},
+    data() {
+      return {
+        ls: {
+          maintain: { key: "维护", value: [] },
+          malfunction: { key: "故障", value: [] },
+          offline: { key: "离线", value: [] },
+          lockd: { key: "挂牌", value: [] },
+        },
+      };
+    },
+    computed: {},
+    created: function () {
+
+    },
+    methods: {
+    },
+  };
+</script>
+<style scoped>
+  .problem {
+    height: 97%;
+    background-color: #000000;
+  }
 </style>

src/components/search/action.vue

@@ -1,408 +1,408 @@
-<template>
-  <el-dialog
-    width="70%"
-    @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="body">
-      <div class="bodyDetial">
-        <!-- <div style="width: 50%;height:200px;background-color:red;"></div>
-      <div style="width: 50%;height:200px;background-color:yellow;"></div> -->
-        <div class="left-item">
-          <el-scrollbar>
-            <el-input placeholder="输入关键字进行过滤" v-model="filterText">
-            </el-input>
-            <el-tree
-              class="filter-tree"
-              :data="showData"
-              :props="defaultProps"
-              :filter-node-method="filterNode"
-              node-key="id"
-              :default-expanded-keys="[0]"
-              ref="tree"
-              @node-click="handleChange"
-            >
-            </el-tree>
-          </el-scrollbar>
-        </div>
-        <div class="right-item">
-          <div class="dateBar">
-            <el-date-picker
-              class="pickers"
-              @change="changes"
-              v-model="timeValue"
-              type="datetimerange"
-              range-separator="至"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-            >
-            </el-date-picker>
-            <div class="buttons" @click="getControlRecord()">查询</div>
-          </div>
-          <el-scrollbar style="height: 94%">
-            <div class="tables">
-              <el-table
-                :data="recordData"
-                class="table"
-                style="width: 100%"
-                height="81vh"
-                :header-cell-style="{
-                  background: 'rgb(30,30,30)',
-                  color: 'rgb(220,220,220)',
-                  padding: '4px',
-                  fontSize: '14px',
-                  'border-bottom': 'solid 1px rgba(77, 77, 77, 1)',
-                }"
-                :cell-style="{
-                  height: '40px',
-                  background: 'rgb(30,30,30)',
-                  color: 'rgb(220,220,220)',
-                  padding: '3px',
-                  fontSize: '12px',
-                  'border-bottom': '1px solid #000000',
-                }"
-              >
-                <el-table-column
-                  prop="time"
-                  label="日期"
-                  width="120"
-                  align="center"
-                >
-                </el-table-column>
-                <el-table-column
-                  prop="code"
-                  label="风机号"
-                  width="120"
-                  align="center"
-                >
-                </el-table-column>
-                <el-table-column
-                  prop="controls"
-                  label="控制命令"
-                  width="100"
-                  align="center"
-                >
-                </el-table-column>
-                <el-table-column prop="result" label="操作结果" align="center">
-                </el-table-column>
-                <el-table-column
-                  prop="userName"
-                  label="操作人"
-                  width="160"
-                  align="center"
-                >
-                </el-table-column>
-              </el-table>
-            </div>
-          </el-scrollbar>
-          <div class="paginations">
-            <el-pagination
-              :hide-on-single-page="true"
-              :page-size="currentPage"
-              background
-              layout="prev, pager, next"
-              :total="total"
-              @current-change="handleCurrentChange"
-            >
-            </el-pagination>
-          </div>
-        </div>
-      </div>
-    </div>
-  </el-dialog>
-</template>
-
-<script>
-import dayjs from "dayjs";
-import api from "api/index";
-export default {
-  props: {},
-  updated() {
-    if (this.timeValue.length === 0) {
-      let date = new Date();
-      this.timeValue[0] = date.getTime() - 28800000;
-      this.timeValue[1] = date.getTime() + 3600000;
-    }
-  },
-  mounted() {},
-  data() {
-    return {
-      currentPage: 10,
-      filterText: "",
-      pageIndex: 1,
-      station: [],
-      datas: {},
-      chooseStation: {},
-      timeValue: [],
-      showData: [
-        {
-          id: 0,
-          code: "全部",
-          stationId: "",
-          children: [],
-        },
-      ],
-      defaultProps: {
-        children: "children",
-        label: "code",
-      },
-      recordData: [],
-      total: "",
-      controlErorCodes: [
-        "控制成功",
-        "控制命令发送失败",
-        "无效的控制地址",
-        "被控设备异常",
-        "无效的控制功能",
-        "网络连接错误,检查场站通信",
-        "控制结果读取超时",
-        "未知错误",
-        "控制命令错误",
-        "收到无法识别数据",
-        "未读取到数据包",
-        "未知错误",
-        "风机操作过频繁",
-        "风机被挂牌",
-        "风机操作与风机状态不符",
-        "需要登录",
-      ],
-    };
-  },
-  methods: {
-    // getWindturbineFdc() {
-    //   api.getWindturbineFdc().then((res) => {
-    //     this.station = res.data;
-    //     this.getControlRecord();
-    //   });
-    // },
-    dataDeal() {
-      let stationList = this.$store.state.stationList;
-      this.showData[0].children = [];
-      stationList.forEach((item, index) => {
-        let obj = {};
-        obj.id = index + 1;
-        obj.code = item.address;
-        obj.stationId = item.id;
-        obj.children = [];
-        this.showData[0].children.push(obj);
-      });
-      this.datas = this.$store.state.windturbinelist
-        ? this.$store.state.windturbinelist
-        : {};
-      let arr = Object.keys(this.datas).sort();
-      for (let id of arr) {
-        let item = this.datas[id];
-        this.showData[0].children
-          .filter((val) => val.stationId === item.stationId)[0]
-          ?.children.push(item);
-      }
-      console.log(this.showData);
-    },
-    handleChange(value) {
-      this.chooseStation = value;
-      this.pageIndex = 1;
-      this.getControlRecord(value);
-    },
-    closed() {
-      this.pageIndex = 1;
-      this.chooseStation = {};
-      this.showData = [
-        {
-          id: 0,
-          code: "全部",
-          stationId: "",
-          children: [],
-        },
-      ];
-      let stationList = this.$store.state.stationList;
-      stationList.forEach((item, index) => {
-        let obj = {};
-        obj.id = index + 1;
-        obj.code = item.name;
-        obj.stationId = item.id;
-        obj.children = [];
-        this.showData[0].children.push(obj);
-      });
-
-      this.$emit("closed");
-    },
-    filterNode(value, data) {
-      if (!value) return true;
-      return data.code.indexOf(value) !== -1;
-    },
-    handleCurrentChange(val) {
-      this.pageIndex = val;
-      this.getControlRecord();
-    },
-    opened() {
-      let date = new Date();
-      this.timeValue[0] = date.getTime() - 28800000;
-      this.timeValue[1] = date.getTime() + 3600000;
-      this.dataDeal();
-      this.getControlRecord();
-    },
-    getControlRecord() {
-      api
-        .controlRecord({
-          stationId: this.chooseStation.stationId
-            ? this.chooseStation.stationId
-            : "",
-          userName: "",
-          windturbineId: this.chooseStation.id
-            ? ""
-            : this.chooseStation.stationId
-            ? this.chooseStation.windturbineId
-            : "",
-          startTime: dayjs(this.timeValue[0]).format("YYYY/MM/DD HH:mm:ss"),
-          endTime: dayjs(this.timeValue[1]).format("YYYY/MM/DD HH:mm:ss"),
-          pageSize: this.currentPage,
-          pageIndex: this.pageIndex,
-        })
-        .then((res) => {
-          if (res) {
-            let types = {
-              Start: "启动",
-              Stop: "停止",
-              Reset: "复位",
-              Maintain: "维护",
-              UnMaintain: "取消维护",
-              Lock: "挂牌",
-              UnLock: "取消挂牌",
-            };
-            res.data.dataList.forEach((item) => {
-              item.time = dayjs(item.time).format("MM-DD HH:mm:ss");
-              item.result = this.controlErorCodes[item.errorCode];
-              item.controls = types[item.controlType];
-              item.showName = item.windturbineId;
-            });
-            this.total = res.data.total;
-            this.recordData = res.data.dataList;
-          }
-        });
-    },
-  },
-  watch: {
-    filterText(val) {
-      this.$refs.tree.filter(val);
-    },
-  },
-};
-</script>
-<style lang="less" scoped>
-.body {
-  background-color: #000000;
-  height: 90vh;
-  width: 102%;
-  margin-left: -1%;
-  margin-top: -40px;
-}
-.searchTitle {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-}
-.bodyDetial {
-  display: flex;
-  flex-direction: row;
-  margin-left: 3vw;
-  padding-top: 10px;
-  color: #ffffff;
-  height: 98%;
-}
-
-.left-item {
-  width: 20%;
-  height: 100%;
-  background-color: rgba(77, 77, 77, 1);
-  border-right: 2px solid #000000;
-}
-
-.right-item {
-  width: 80%;
-  height: 100%;
-  background-color: rgba(77, 77, 77, 1);
-}
-
-.el-tree {
-  color: #ffffff !important;
-  background-color: rgba(77, 77, 77, 1) !important;
-}
-
-.el-tree-node:focus > .el-tree-node__content {
-  background-color: #000000 !important;
-}
-
-.el-tree-node__content:hover {
-  background-color: #000000 !important;
-}
-
-.dateBar {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  margin-left: 20px;
-}
-
-.pickers {
-  margin-left: 20px;
-}
-
-.tables {
-  margin-top: 20px;
-  width: 95%;
-  margin-left: 3%;
-}
-
-.table {
-  background-color: rgba(77, 77, 77, 1) !important;
-}
-
-.el-table td,
-.el-table th.is-leaf {
-  border-bottom: 1px solid rgba(77, 77, 77, 1) !important;
-}
-
-.el-table__header {
-  width: 100% !important;
-}
-
-.el-table__body-wrapper {
-  background-color: rgba(77, 77, 77, 1) !important;
-}
-
-.el-table::before {
-  width: 0;
-}
-
-tr {
-  line-height: 1.5;
-  background: #1e1e1e;
-  margin-bottom: 2px;
-  border-radius: 5px;
-}
-
-.table-main {
-  font-size: 14px;
-  width: 600px;
-  text-align: center;
-  background: #000000;
-  margin: 5px;
-  border-collapse: separate;
-  border-spacing: 0px 5px;
-}
-
-.paginations {
-  display: flex;
-  flex-direction: row-reverse;
-}
+<template>
+  <el-dialog
+    width="70%"
+    @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="body">
+      <div class="bodyDetial">
+        <!-- <div style="width: 50%;height:200px;background-color:red;"></div>
+      <div style="width: 50%;height:200px;background-color:yellow;"></div> -->
+        <div class="left-item">
+          <el-scrollbar>
+            <el-input placeholder="输入关键字进行过滤" v-model="filterText">
+            </el-input>
+            <el-tree
+              class="filter-tree"
+              :data="showData"
+              :props="defaultProps"
+              :filter-node-method="filterNode"
+              node-key="id"
+              :default-expanded-keys="[0]"
+              ref="tree"
+              @node-click="handleChange"
+            >
+            </el-tree>
+          </el-scrollbar>
+        </div>
+        <div class="right-item">
+          <div class="dateBar">
+            <el-date-picker
+              class="pickers"
+              @change="changes"
+              v-model="timeValue"
+              type="datetimerange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            >
+            </el-date-picker>
+            <div class="buttons" @click="getControlRecord()">查询</div>
+          </div>
+          <el-scrollbar style="height: 94%">
+            <div class="tables">
+              <el-table
+                :data="recordData"
+                class="table"
+                style="width: 100%"
+                height="81vh"
+                :header-cell-style="{
+                  background: 'rgb(30,30,30)',
+                  color: 'rgb(220,220,220)',
+                  padding: '4px',
+                  fontSize: '14px',
+                  'border-bottom': 'solid 1px rgba(77, 77, 77, 1)',
+                }"
+                :cell-style="{
+                  height: '40px',
+                  background: 'rgb(30,30,30)',
+                  color: 'rgb(220,220,220)',
+                  padding: '3px',
+                  fontSize: '12px',
+                  'border-bottom': '1px solid #000000',
+                }"
+              >
+                <el-table-column
+                  prop="time"
+                  label="日期"
+                  width="120"
+                  align="center"
+                >
+                </el-table-column>
+                <el-table-column
+                  prop="code"
+                  label="风机号"
+                  width="120"
+                  align="center"
+                >
+                </el-table-column>
+                <el-table-column
+                  prop="controls"
+                  label="控制命令"
+                  width="100"
+                  align="center"
+                >
+                </el-table-column>
+                <el-table-column prop="result" label="操作结果" align="center">
+                </el-table-column>
+                <el-table-column
+                  prop="userName"
+                  label="操作人"
+                  width="160"
+                  align="center"
+                >
+                </el-table-column>
+              </el-table>
+            </div>
+          </el-scrollbar>
+          <div class="paginations">
+            <el-pagination
+              :hide-on-single-page="true"
+              :page-size="currentPage"
+              background
+              layout="prev, pager, next"
+              :total="total"
+              @current-change="handleCurrentChange"
+            >
+            </el-pagination>
+          </div>
+        </div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import dayjs from "dayjs";
+import api from "api/index";
+export default {
+  props: {},
+  updated() {
+    if (this.timeValue.length === 0) {
+      let date = new Date();
+      this.timeValue[0] = date.getTime() - 28800000;
+      this.timeValue[1] = date.getTime() + 3600000;
+    }
+  },
+  mounted() {},
+  data() {
+    return {
+      currentPage: 10,
+      filterText: "",
+      pageIndex: 1,
+      station: [],
+      datas: {},
+      chooseStation: {},
+      timeValue: [],
+      showData: [
+        {
+          id: 0,
+          code: "全部",
+          stationId: "",
+          children: [],
+        },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "code",
+      },
+      recordData: [],
+      total: "",
+      controlErorCodes: [
+        "控制成功",
+        "控制命令发送失败",
+        "无效的控制地址",
+        "被控设备异常",
+        "无效的控制功能",
+        "网络连接错误,检查场站通信",
+        "控制结果读取超时",
+        "未知错误",
+        "控制命令错误",
+        "收到无法识别数据",
+        "未读取到数据包",
+        "未知错误",
+        "风机操作过频繁",
+        "风机被挂牌",
+        "风机操作与风机状态不符",
+        "需要登录",
+      ],
+    };
+  },
+  methods: {
+    // getWindturbineFdc() {
+    //   api.getWindturbineFdc().then((res) => {
+    //     this.station = res.data;
+    //     this.getControlRecord();
+    //   });
+    // },
+    dataDeal() {
+      let stationList = this.$store.state.stationList;
+      this.showData[0].children = [];
+      stationList.forEach((item, index) => {
+        let obj = {};
+        obj.id = index + 1;
+        obj.code = item.name;
+        obj.stationId = item.id;
+        obj.children = [];
+        this.showData[0].children.push(obj);
+      });
+      this.datas = this.$store.state.windturbinelist
+        ? this.$store.state.windturbinelist
+        : {};
+      let arr = Object.keys(this.datas).sort();
+      for (let id of arr) {
+        let item = this.datas[id];
+        this.showData[0].children
+          .filter((val) => val.stationId === item.stationId)[0]
+          ?.children.push(item);
+      }
+      console.log(this.showData);
+    },
+    handleChange(value) {
+      this.chooseStation = value;
+      this.pageIndex = 1;
+      this.getControlRecord(value);
+    },
+    closed() {
+      this.pageIndex = 1;
+      this.chooseStation = {};
+      this.showData = [
+        {
+          id: 0,
+          code: "全部",
+          stationId: "",
+          children: [],
+        },
+      ];
+      let stationList = this.$store.state.stationList;
+      stationList.forEach((item, index) => {
+        let obj = {};
+        obj.id = index + 1;
+        obj.code = item.name;
+        obj.stationId = item.id;
+        obj.children = [];
+        this.showData[0].children.push(obj);
+      });
+
+      this.$emit("closed");
+    },
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.code.indexOf(value) !== -1;
+    },
+    handleCurrentChange(val) {
+      this.pageIndex = val;
+      this.getControlRecord();
+    },
+    opened() {
+      let date = new Date();
+      this.timeValue[0] = date.getTime() - 28800000;
+      this.timeValue[1] = date.getTime() + 3600000;
+      this.dataDeal();
+      this.getControlRecord();
+    },
+    getControlRecord() {
+      api
+        .controlRecord({
+          stationId: this.chooseStation.stationId
+            ? this.chooseStation.stationId
+            : "",
+          userName: "",
+          windturbineId: this.chooseStation.id
+            ? ""
+            : this.chooseStation.stationId
+            ? this.chooseStation.windturbineId
+            : "",
+          startTime: dayjs(this.timeValue[0]).format("YYYY/MM/DD HH:mm:ss"),
+          endTime: dayjs(this.timeValue[1]).format("YYYY/MM/DD HH:mm:ss"),
+          pageSize: this.currentPage,
+          pageIndex: this.pageIndex,
+        })
+        .then((res) => {
+          if (res) {
+            let types = {
+              Start: "启动",
+              Stop: "停止",
+              Reset: "复位",
+              Maintain: "维护",
+              UnMaintain: "取消维护",
+              Lock: "挂牌",
+              UnLock: "取消挂牌",
+            };
+            res.data.dataList.forEach((item) => {
+              item.time = dayjs(item.time).format("MM-DD HH:mm:ss");
+              item.result = this.controlErorCodes[item.errorCode];
+              item.controls = types[item.controlType];
+              item.showName = item.windturbineId;
+            });
+            this.total = res.data.total;
+            this.recordData = res.data.dataList;
+          }
+        });
+    },
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val);
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.body {
+  background-color: #000000;
+  height: 90vh;
+  width: 102%;
+  margin-left: -1%;
+  margin-top: -40px;
+}
+.searchTitle {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+.bodyDetial {
+  display: flex;
+  flex-direction: row;
+  margin-left: 3vw;
+  padding-top: 10px;
+  color: #ffffff;
+  height: 98%;
+}
+
+.left-item {
+  width: 20%;
+  height: 100%;
+  background-color: rgba(77, 77, 77, 1);
+  border-right: 2px solid #000000;
+}
+
+.right-item {
+  width: 80%;
+  height: 100%;
+  background-color: rgba(77, 77, 77, 1);
+}
+
+.el-tree {
+  color: #ffffff !important;
+  background-color: rgba(77, 77, 77, 1) !important;
+}
+
+.el-tree-node:focus > .el-tree-node__content {
+  background-color: #000000 !important;
+}
+
+.el-tree-node__content:hover {
+  background-color: #000000 !important;
+}
+
+.dateBar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-left: 20px;
+}
+
+.pickers {
+  margin-left: 20px;
+}
+
+.tables {
+  margin-top: 20px;
+  width: 95%;
+  margin-left: 3%;
+}
+
+.table {
+  background-color: rgba(77, 77, 77, 1) !important;
+}
+
+.el-table td,
+.el-table th.is-leaf {
+  border-bottom: 1px solid rgba(77, 77, 77, 1) !important;
+}
+
+.el-table__header {
+  width: 100% !important;
+}
+
+.el-table__body-wrapper {
+  background-color: rgba(77, 77, 77, 1) !important;
+}
+
+.el-table::before {
+  width: 0;
+}
+
+tr {
+  line-height: 1.5;
+  background: #1e1e1e;
+  margin-bottom: 2px;
+  border-radius: 5px;
+}
+
+.table-main {
+  font-size: 14px;
+  width: 600px;
+  text-align: center;
+  background: #000000;
+  margin: 5px;
+  border-collapse: separate;
+  border-spacing: 0px 5px;
+}
+
+.paginations {
+  display: flex;
+  flex-direction: row-reverse;
+}
 </style>

src/components/search/calendar.vue

@@ -1,223 +1,223 @@
-<template>
-    <el-dialog width="70%" @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="body">
-            <div class="searchTitle">
-                <div class="search">
-                    <div class="date">日期:</div>
-                    <el-date-picker class="pickers" @change="changes" v-model="timeValue" type="month">
-                    </el-date-picker>
-                </div>
-
-                <div class="buttons" @click="getWarning()">查询</div>
-            </div>
-            <div class="calendar">
-                <div class="week">
-                    <div class="week-item">星期一</div>
-                    <div class="week-item">星期二</div>
-                    <div class="week-item">星期三</div>
-                    <div class="week-item">星期四</div>
-                    <div class="week-item">星期五</div>
-                    <div class="week-item">星期六</div>
-                    <div class="week-item">星期日</div>
-                </div>
-                <div class="week-content">
-                    <div :class="item.id>0?'content-item':'content-item-none'" v-for="(item, index) in dataList" :key="index">
-                        <div class="dateTitle" v-if="item.id>0">{{month}}/{{item.id}}</div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </el-dialog>
-</template>
-<script>
-import api from "api/index";
-export default {
-    components: {
-    },
-    data() {
-        return {
-            timeValue:'',
-            dataList: []
-        };
-    },
-    created() {
-
-    },
-    mounted() { },
-    methods: {
-        opened() {
-            let date = new Date();
-            this.timeValue = date.getTime()
-            this.arrayDeal()
-        },
-        closed() {
-
-        },
-        changes(){
-            this.arrayDeal()
-        },
-        arrayDeal(){
-            this.dataList = [] 
-            let year = new Date(this.timeValue).getFullYear()
-            let month = new Date(this.timeValue).getMonth() + 1
-            this.month = month
-            let MonthDayNum = new Date(year,month,0).getDate(); 
-            let weekList = [7, 1, 2, 3, 4, 5, 6]
-            let res = new Date(month + '/' + 1 + '/' + year);
-		    let reNum = weekList[res.getDay()]
-            let arr = []
-            let list = []
-            for (let index = 1; index < reNum; index++) {
-                let obj = {
-                    id: 0
-                }
-                arr.push(obj)
-            }
-            for (let index = 1; index <= MonthDayNum; index++) {
-                let obj = {
-                    id: index,
-                    children: []
-                }
-                list.push(obj)
-            }
-            this.dataList = [...arr, ...list]
-        }
-    },
-};
-</script>
-<style lang="less" scoped>
-.body {
-    display: flex;
-    flex-direction: column;
-    background-color: #000000;
-    height: 90vh;
-    width: 102%;
-    margin-left: -1%;
-    margin-top: -40px;
-    overflow-y: auto;
-}
-
-.body::-webkit-scrollbar {
-    /*隐藏滚轮*/
-    display: none;
-}
-
-.searchTitle {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    margin-left: 3vw;
-    padding-top: 10px;
-    color: #ffffff;
-}
-
-.search {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    margin-right: 50px;
-}
-
-.date {
-    margin-right: 10px;
-    font-size: 16px;
-}
-
-.tables {
-    margin-left: 3vw;
-    padding-top: 10px;
-}
-
-.lable {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    flex-wrap: wrap;
-    width: 100%;
-    margin-left: 75px;
-    padding-top: 10px;
-}
-
-.lable-item {
-    font-size: 16px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    width: 16%;
-    color: #ffffff;
-    margin-bottom: 10px;
-}
-
-.el-table {
-    position: static;
-    background-color: #141414;
-}
-
-.inputs {
-    border: none;
-    width: 174px !important;
-    background-color: #292929;
-    height: 40px;
-    color: #ffffff;
-}
-.calendar{
-    display: flex;
-    flex-direction: column;
-    margin-left: 3vw;
-    width: 96%;
-    .week{
-        width: 100%;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        height: 50px;
-        border-bottom: 1px solid #999999;
-        color: #ffffff;
-        font-size: 16px;
-
-        .week-item{
-            width: 14.28%;
-            height: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-    }
-
-    .week-content{
-        width: 100%;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        flex-wrap: wrap;
-
-        .content-item{
-            width: 14.28%;
-            min-height: 15vh;
-            // background-color: greenyellow;
-            border-top: 1px solid #999999;
-            .dateTitle{
-                width: 100%;
-                height: 30px;
-                padding-left: 10px;
-                color: #ffffff;
-                font-size: 16px;
-                display: flex;
-                align-items: center;
-            }
-        }
-        .content-item-none{
-            width: 14.28%;
-            min-height: 15vh;
-            border-top: 1px solid #999999; 
-        }
-    }
-
-}
-</style>
+<template>
+    <el-dialog width="70%" @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="body">
+            <div class="searchTitle">
+                <div class="search">
+                    <div class="date">日期:</div>
+                    <el-date-picker class="pickers" @change="changes" v-model="timeValue" type="month">
+                    </el-date-picker>
+                </div>
+
+                <div class="buttons" @click="getWarning()">查询</div>
+            </div>
+            <div class="calendar">
+                <div class="week">
+                    <div class="week-item">星期一</div>
+                    <div class="week-item">星期二</div>
+                    <div class="week-item">星期三</div>
+                    <div class="week-item">星期四</div>
+                    <div class="week-item">星期五</div>
+                    <div class="week-item">星期六</div>
+                    <div class="week-item">星期日</div>
+                </div>
+                <div class="week-content">
+                    <div :class="item.id>0?'content-item':'content-item-none'" v-for="(item, index) in dataList" :key="index">
+                        <div class="dateTitle" v-if="item.id>0">{{month}}/{{item.id}}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </el-dialog>
+</template>
+<script>
+import api from "api/index";
+export default {
+    components: {
+    },
+    data() {
+        return {
+            timeValue:'',
+            dataList: []
+        };
+    },
+    created() {
+
+    },
+    mounted() { },
+    methods: {
+        opened() {
+            let date = new Date();
+            this.timeValue = date.getTime()
+            this.arrayDeal()
+        },
+        closed() {
+
+        },
+        changes(){
+            this.arrayDeal()
+        },
+        arrayDeal(){
+            this.dataList = [] 
+            let year = new Date(this.timeValue).getFullYear()
+            let month = new Date(this.timeValue).getMonth() + 1
+            this.month = month
+            let MonthDayNum = new Date(year,month,0).getDate(); 
+            let weekList = [7, 1, 2, 3, 4, 5, 6]
+            let res = new Date(month + '/' + 1 + '/' + year);
+		    let reNum = weekList[res.getDay()]
+            let arr = []
+            let list = []
+            for (let index = 1; index < reNum; index++) {
+                let obj = {
+                    id: 0
+                }
+                arr.push(obj)
+            }
+            for (let index = 1; index <= MonthDayNum; index++) {
+                let obj = {
+                    id: index,
+                    children: []
+                }
+                list.push(obj)
+            }
+            this.dataList = [...arr, ...list]
+        }
+    },
+};
+</script>
+<style lang="less" scoped>
+.body {
+    display: flex;
+    flex-direction: column;
+    background-color: #000000;
+    height: 90vh;
+    width: 102%;
+    margin-left: -1%;
+    margin-top: -40px;
+    overflow-y: auto;
+}
+
+.body::-webkit-scrollbar {
+    /*隐藏滚轮*/
+    display: none;
+}
+
+.searchTitle {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-left: 3vw;
+    padding-top: 10px;
+    color: #ffffff;
+}
+
+.search {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-right: 50px;
+}
+
+.date {
+    margin-right: 10px;
+    font-size: 16px;
+}
+
+.tables {
+    margin-left: 3vw;
+    padding-top: 10px;
+}
+
+.lable {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+    width: 100%;
+    margin-left: 75px;
+    padding-top: 10px;
+}
+
+.lable-item {
+    font-size: 16px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 16%;
+    color: #ffffff;
+    margin-bottom: 10px;
+}
+
+.el-table {
+    position: static;
+    background-color: #141414;
+}
+
+.inputs {
+    border: none;
+    width: 174px !important;
+    background-color: #292929;
+    height: 40px;
+    color: #ffffff;
+}
+.calendar{
+    display: flex;
+    flex-direction: column;
+    margin-left: 3vw;
+    width: 96%;
+    .week{
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        height: 50px;
+        border-bottom: 1px solid #999999;
+        color: #ffffff;
+        font-size: 16px;
+
+        .week-item{
+            width: 14.28%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+    }
+
+    .week-content{
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        flex-wrap: wrap;
+
+        .content-item{
+            width: 14.28%;
+            min-height: 15vh;
+            // background-color: greenyellow;
+            border-top: 1px solid #999999;
+            .dateTitle{
+                width: 100%;
+                height: 30px;
+                padding-left: 10px;
+                color: #ffffff;
+                font-size: 16px;
+                display: flex;
+                align-items: center;
+            }
+        }
+        .content-item-none{
+            width: 14.28%;
+            min-height: 15vh;
+            border-top: 1px solid #999999; 
+        }
+    }
+
+}
+</style>
   

src/components/search/fault.vue

@@ -1,361 +1,361 @@
-<template>
-  <el-dialog
-    width="70%"
-    @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="body">
-      <div class="searchTitle">
-        <div class="search">
-          <div class="date">风场:</div>
-          <el-select
-            @change="listedChange(selectValue)"
-            class="inputs"
-            v-model="selectValue"
-            placeholder="请选择"
-          >
-            <el-option
-              v-for="item in stationList"
-              :key="item.id"
-              :label="item.address"
-              :value="item.id"
-            >
-            </el-option>
-          </el-select>
-        </div>
-        <div class="search">
-          <div class="date">风机名称:</div>
-          <el-select class="inputs" v-model="selectWind" @change="handleChange" placeholder="请选择" clearable>
-            <el-option
-              v-for="item in windturbinelist"
-              :key="item.code"
-              :label="item.code"
-              :value="item.code"
-            >
-            </el-option>
-          </el-select>
-        </div>
-        <div class="search">
-          <div class="date">日期:</div>
-          <el-date-picker
-            class="pickers"
-            @change="changes"
-            v-model="timeValue"
-            type="datetimerange"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-          >
-          </el-date-picker>
-        </div>
-        <div class="search">
-          <div class="date">关键字:</div>
-          <el-input
-            class="inputs"
-            placeholder="请输入"
-            v-model="inputVlaues"
-          ></el-input>
-        </div>
-
-        <div class="buttons" @click="getWarning()">查询</div>
-      </div>
-      <!-- <div class="lable">
-        <div class="lable-item" v-for="(item, index) in lableList" :key="index">
-          <div>{{item.name}}:</div>
-          <div style="margin-left: 10px;color:red;">{{item.value}}</div>
-        </div>
-      </div> -->
-      <div class="tables">
-        <el-table
-          :data="warningList"
-          class="table"
-          style="width: 100%"
-          height="80vh"
-          :header-cell-style="{
-            background: 'rgb(30,30,30)',
-            color: 'rgb(220,220,220)',
-            padding: '4px',
-            fontSize: '14px',
-            'border-bottom': 'solid 1px rgba(77, 77, 77, 1)',
-          }"
-          :cell-style="{
-            height: '40px',
-            background: 'rgb(30,30,30)',
-            color: 'rgb(220,220,220)',
-            padding: '3px',
-            fontSize: '12px',
-            'border-bottom': '1px solid #000000',
-          }"
-        >
-          <el-table-column
-            prop="alertTime"
-            label="发生时间"
-            width="150"
-            align="center"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="stationName"
-            label="风场名称"
-            width="120"
-            align="center"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="windturbineName"
-            label="风机名称"
-            width="120"
-            align="center"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="rank"
-            label="报警等级"
-            width="100"
-            align="center"
-          >
-          </el-table-column>
-          <el-table-column label="状态" width="120" align="center">
-                <template #default="scope">
-                  <span>
-                    {{ scope.row?.messageType  === 1 ? "触发" : "已解除" }}
-                  </span>
-                </template>
-              </el-table-column>
-          <el-table-column
-            prop="snapId"
-            label="故障编号"
-            width="240"
-            align="center"
-          >
-          </el-table-column>
-          <el-table-column prop="alertText" label="故障信息" align="center">
-          </el-table-column>
-        </el-table>
-      </div>
-      <div class="paginations">
-        <el-pagination
-          :hide-on-single-page="true"
-          :page-size="currentPage"
-          background
-          layout="prev, pager, next"
-          :total="total"
-          @current-change="handleCurrentChange"
-        >
-        </el-pagination>
-      </div>
-    </div>
-  </el-dialog>
-</template>
-
-<script>
-import dayjs from "dayjs";
-import api from "api/index";
-export default {
-  data() {
-    return {
-      current: 0,
-      pagenum: 1,
-      total: "",
-      timeValue: [],
-      selectValue: "",
-      inputVlaues: "",
-      stationList: [],
-      selectWind: "",
-      windturbineId: "",
-      windturbinelist: [],
-      warningList: [],
-      currentPage: 20,
-      lableList: [
-        {
-          name: "偏航系统故障",
-          value: "6996",
-        },
-        {
-          name: "偏航系统故障",
-          value: "6996",
-        },
-        {
-          name: "偏航系统故障",
-          value: "6996",
-        },
-        {
-          name: "偏航系统故障",
-          value: "6996",
-        },
-        {
-          name: "偏航系统故障",
-          value: "6996",
-        },
-        {
-          name: "偏航系统故障",
-          value: "6996",
-        },
-        {
-          name: "偏航系统故障",
-          value: "6996",
-        },
-        {
-          name: "偏航系统故障",
-          value: "6996",
-        },
-        {
-          name: "偏航系统故障",
-          value: "6996",
-        },
-        {
-          name: "偏航系统故障",
-          value: "6996",
-        },
-        {
-          name: "偏航系统故障",
-          value: "6996",
-        },
-        {
-          name: "偏航系统故障",
-          value: "6996",
-        },
-      ],
-    };
-  },
-  methods: {
-    ChangeBar(values) {
-      this.current = values;
-    },
-    opened() {
-      let date = new Date();
-      this.timeValue[0] = date.getTime() - 28800000;
-      this.timeValue[1] = date.getTime() + 3600000;
-      let stationList = this.$store.state.stationList;
-      this.selectValue = stationList[0].id;
-      this.stationList = stationList;
-      this.listedChange(this.selectValue);
-      this.getWarning();
-    },
-    closed() {
-      this.pagenum = 1;
-    },
-    getWarning() {
-      api
-        .getWindturbineWarning({
-          pagesize: this.currentPage,
-          pagenum: this.pagenum,
-          stationid: this.selectValue,
-          windturbineid: this.windturbineId,
-          starttime: dayjs(this.timeValue[0]).format("YYYY-MM-DD HH:mm:ss"),
-          endtime: dayjs(this.timeValue[1]).format("YYYY-MM-DD HH:mm:ss"),
-          keyword: this.inputVlaues,
-          category1: 'windturbine,SYZ,GF',
-        })
-        .then((msg) => {
-          if (msg.data) {
-            this.total = msg.data.total
-            msg.data.records.forEach((item) => {
-              item.alertTime = dayjs(item.alertTime).format("MM-DD HH:mm:ss");
-            });
-            this.warningList = msg.data.records;
-          }
-        });
-    },
-    handleCurrentChange(val) {
-      this.pagenum = val;
-      this.getWarning();
-    },
-    listedChange(value) {
-      this.windturbinelist = [];
-      let windturbinelist = this.$store.state.windturbinelist;
-      let arr = Object.keys(windturbinelist).sort();
-      let windturbine = [];
-      for (const key of arr) {
-        let wind = windturbinelist[key];
-        if (wind.stationId === value) {
-          windturbine.push(wind);
-        }
-      }
-      // this.selectWind = windturbine[0]?.code || "";
-      // this.windturbineId = windturbine[0]?.windturbineId
-      this.windturbinelist = windturbine;
-    },
-    handleChange(val){
-      if(val){
-        this.windturbineId = this.windturbinelist.filter(item => item.code === val)[0].windturbineId
-      }else{
-        this.windturbineId = ''
-      }
-      
-    }
-  },
-};
-</script>
-<style lang="less" scoped>
-.body {
-  background-color: #000000;
-  height: 89vh;
-  width: 102%;
-  margin-left: -1%;
-  margin-top: -40px;
-}
-.searchTitle {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-left: 3vw;
-  padding-top: 10px;
-  color: #ffffff;
-}
-.search {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-right: 50px;
-}
-.date {
-  margin-right: 10px;
-  font-size: 16px;
-}
-.tables {
-  margin-left: 3vw;
-  padding-top: 10px;
-}
-.lable {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  flex-wrap: wrap;
-  width: 100%;
-  margin-left: 75px;
-  padding-top: 10px;
-}
-.lable-item {
-  font-size: 16px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  width: 16%;
-  color: #ffffff;
-  margin-bottom: 10px;
-}
-.el-table {
-  position: static;
-  background-color: #141414;
-}
-.inputs {
-  border: none;
-  width: 174px !important;
-  background-color: #292929;
-  height: 40px;
-  color: #ffffff;
-}
-.paginations {
-  display: flex;
-  flex-direction: row-reverse;
-}
+<template>
+  <el-dialog
+    width="70%"
+    @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="body">
+      <div class="searchTitle">
+        <div class="search">
+          <div class="date">风场:</div>
+          <el-select
+            @change="listedChange(selectValue)"
+            class="inputs"
+            v-model="selectValue"
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in stationList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </div>
+        <div class="search">
+          <div class="date">风机名称:</div>
+          <el-select class="inputs" v-model="selectWind" @change="handleChange" placeholder="请选择" clearable>
+            <el-option
+              v-for="item in windturbinelist"
+              :key="item.code"
+              :label="item.code"
+              :value="item.code"
+            >
+            </el-option>
+          </el-select>
+        </div>
+        <div class="search">
+          <div class="date">日期:</div>
+          <el-date-picker
+            class="pickers"
+            @change="changes"
+            v-model="timeValue"
+            type="datetimerange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          >
+          </el-date-picker>
+        </div>
+        <div class="search">
+          <div class="date">关键字:</div>
+          <el-input
+            class="inputs"
+            placeholder="请输入"
+            v-model="inputVlaues"
+          ></el-input>
+        </div>
+
+        <div class="buttons" @click="getWarning()">查询</div>
+      </div>
+      <!-- <div class="lable">
+        <div class="lable-item" v-for="(item, index) in lableList" :key="index">
+          <div>{{item.name}}:</div>
+          <div style="margin-left: 10px;color:red;">{{item.value}}</div>
+        </div>
+      </div> -->
+      <div class="tables">
+        <el-table
+          :data="warningList"
+          class="table"
+          style="width: 100%"
+          height="80vh"
+          :header-cell-style="{
+            background: 'rgb(30,30,30)',
+            color: 'rgb(220,220,220)',
+            padding: '4px',
+            fontSize: '14px',
+            'border-bottom': 'solid 1px rgba(77, 77, 77, 1)',
+          }"
+          :cell-style="{
+            height: '40px',
+            background: 'rgb(30,30,30)',
+            color: 'rgb(220,220,220)',
+            padding: '3px',
+            fontSize: '12px',
+            'border-bottom': '1px solid #000000',
+          }"
+        >
+          <el-table-column
+            prop="alertTime"
+            label="发生时间"
+            width="150"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="stationName"
+            label="风场名称"
+            width="120"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="windturbineName"
+            label="风机名称"
+            width="120"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="rank"
+            label="报警等级"
+            width="100"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column label="状态" width="120" align="center">
+                <template #default="scope">
+                  <span>
+                    {{ scope.row?.messageType  === 1 ? "触发" : "已解除" }}
+                  </span>
+                </template>
+              </el-table-column>
+          <el-table-column
+            prop="snapId"
+            label="故障编号"
+            width="240"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column prop="alertText" label="故障信息" align="center">
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="paginations">
+        <el-pagination
+          :hide-on-single-page="true"
+          :page-size="currentPage"
+          background
+          layout="prev, pager, next"
+          :total="total"
+          @current-change="handleCurrentChange"
+        >
+        </el-pagination>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import dayjs from "dayjs";
+import api from "api/index";
+export default {
+  data() {
+    return {
+      current: 0,
+      pagenum: 1,
+      total: "",
+      timeValue: [],
+      selectValue: "",
+      inputVlaues: "",
+      stationList: [],
+      selectWind: "",
+      windturbineId: "",
+      windturbinelist: [],
+      warningList: [],
+      currentPage: 20,
+      lableList: [
+        {
+          name: "偏航系统故障",
+          value: "6996",
+        },
+        {
+          name: "偏航系统故障",
+          value: "6996",
+        },
+        {
+          name: "偏航系统故障",
+          value: "6996",
+        },
+        {
+          name: "偏航系统故障",
+          value: "6996",
+        },
+        {
+          name: "偏航系统故障",
+          value: "6996",
+        },
+        {
+          name: "偏航系统故障",
+          value: "6996",
+        },
+        {
+          name: "偏航系统故障",
+          value: "6996",
+        },
+        {
+          name: "偏航系统故障",
+          value: "6996",
+        },
+        {
+          name: "偏航系统故障",
+          value: "6996",
+        },
+        {
+          name: "偏航系统故障",
+          value: "6996",
+        },
+        {
+          name: "偏航系统故障",
+          value: "6996",
+        },
+        {
+          name: "偏航系统故障",
+          value: "6996",
+        },
+      ],
+    };
+  },
+  methods: {
+    ChangeBar(values) {
+      this.current = values;
+    },
+    opened() {
+      let date = new Date();
+      this.timeValue[0] = date.getTime() - 28800000;
+      this.timeValue[1] = date.getTime() + 3600000;
+      let stationList = this.$store.state.stationList;
+      this.selectValue = stationList[0].id;
+      this.stationList = stationList;
+      this.listedChange(this.selectValue);
+      this.getWarning();
+    },
+    closed() {
+      this.pagenum = 1;
+    },
+    getWarning() {
+      api
+        .getWindturbineWarning({
+          pagesize: this.currentPage,
+          pagenum: this.pagenum,
+          stationid: this.selectValue,
+          windturbineid: this.windturbineId,
+          starttime: dayjs(this.timeValue[0]).format("YYYY-MM-DD HH:mm:ss"),
+          endtime: dayjs(this.timeValue[1]).format("YYYY-MM-DD HH:mm:ss"),
+          keyword: this.inputVlaues,
+          category1: 'windturbine,SYZ,GF',
+        })
+        .then((msg) => {
+          if (msg.data) {
+            this.total = msg.data.total
+            msg.data.records.forEach((item) => {
+              item.alertTime = dayjs(item.alertTime).format("MM-DD HH:mm:ss");
+            });
+            this.warningList = msg.data.records;
+          }
+        });
+    },
+    handleCurrentChange(val) {
+      this.pagenum = val;
+      this.getWarning();
+    },
+    listedChange(value) {
+      this.windturbinelist = [];
+      let windturbinelist = this.$store.state.windturbinelist;
+      let arr = Object.keys(windturbinelist).sort();
+      let windturbine = [];
+      for (const key of arr) {
+        let wind = windturbinelist[key];
+        if (wind.stationId === value) {
+          windturbine.push(wind);
+        }
+      }
+      // this.selectWind = windturbine[0]?.code || "";
+      // this.windturbineId = windturbine[0]?.windturbineId
+      this.windturbinelist = windturbine;
+    },
+    handleChange(val){
+      if(val){
+        this.windturbineId = this.windturbinelist.filter(item => item.code === val)[0].windturbineId
+      }else{
+        this.windturbineId = ''
+      }
+      
+    }
+  },
+};
+</script>
+<style lang="less" scoped>
+.body {
+  background-color: #000000;
+  height: 89vh;
+  width: 102%;
+  margin-left: -1%;
+  margin-top: -40px;
+}
+.searchTitle {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-left: 3vw;
+  padding-top: 10px;
+  color: #ffffff;
+}
+.search {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-right: 50px;
+}
+.date {
+  margin-right: 10px;
+  font-size: 16px;
+}
+.tables {
+  margin-left: 3vw;
+  padding-top: 10px;
+}
+.lable {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+  width: 100%;
+  margin-left: 75px;
+  padding-top: 10px;
+}
+.lable-item {
+  font-size: 16px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 16%;
+  color: #ffffff;
+  margin-bottom: 10px;
+}
+.el-table {
+  position: static;
+  background-color: #141414;
+}
+.inputs {
+  border: none;
+  width: 174px !important;
+  background-color: #292929;
+  height: 40px;
+  color: #ffffff;
+}
+.paginations {
+  display: flex;
+  flex-direction: row-reverse;
+}
 </style>

src/components/search/record.vue

@@ -1,258 +1,258 @@
-<template>
-  <el-dialog width="70%" @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="body">
-      <div class="searchTitle">
-        <div class="search">
-          <div class="date">风场:</div>
-          <el-select @change="listedChange(selectValue)" class="inputs" v-model="selectValue" placeholder="请选择">
-            <el-option v-for="item in stationList" :key="item.id" :label="item.address" :value="item.id">
-            </el-option>
-          </el-select>
-        </div>
-        <div class="search">
-          <div class="date">风机名称:</div>
-          <el-select class="inputs" v-model="selectWind" @change="handleChange" placeholder="请选择" clearable>
-            <el-option v-for="item in windturbinelist" :key="item.code" :label="item.code" :value="item.code">
-            </el-option>
-          </el-select>
-        </div>
-
-        <div class="buttons" @click="getData()">查询</div>
-      </div>
-      <div class="tables">
-        <el-table
-          :data="recordList"
-          class="table"
-          style="width: 100%"
-          height="80vh"
-          :header-cell-style="{
-            background: 'rgb(30,30,30)',
-            color: 'rgb(220,220,220)',
-            padding: '4px',
-            fontSize: '14px',
-            'border-bottom': 'solid 1px rgba(77, 77, 77, 1)',
-          }"
-          :cell-style="{
-            height: '40px',
-            background: 'rgb(30,30,30)',
-            color: 'rgb(220,220,220)',
-            padding: '3px',
-            fontSize: '12px',
-            'border-bottom': '1px solid #000000',
-          }"
-        >
-          <el-table-column
-            prop="recommendedDate"
-            label="推荐时间"
-            width="150"
-            align="center"
-          >
-          </el-table-column>
-          <el-table-column prop="stationId" label="场站" align="center">
-          </el-table-column>
-          <el-table-column prop="windturbineId" label="风机" align="center">
-          </el-table-column>
-          <el-table-column prop="windSpeed" label="推荐时风速" align="center">
-          </el-table-column>
-          <el-table-column prop="averageWindSpeed5" label="推荐时五分钟平均风速" align="center">
-          </el-table-column>
-          <el-table-column label="推荐操作" align="center">
-            <template #default="scope">
-                  <span>
-                    {{ controlType[scope.row?.controlType] }}
-                  </span>
-                </template>
-          </el-table-column>
-          <el-table-column prop="rollSpeed" label="推荐时发电机转速" align="center">
-          </el-table-column>
-          <el-table-column prop="power" label="推荐时功率" align="center">
-          </el-table-column>
-          <el-table-column prop="theoreticalPower" label="推荐时理论功率" align="center">
-          </el-table-column>
-          <el-table-column prop="healthIndex" label="推荐时健康指数" align="center">
-          </el-table-column>
-          <el-table-column prop="cause" label="推荐原因" align="center">
-          </el-table-column>
-
-        </el-table>
-      </div>
-      <div class="paginations">
-        <el-pagination :hide-on-single-page="true" :page-size="1" background layout="prev, pager, next"
-          :total="total" @current-change="handleCurrentChange">
-        </el-pagination>
-      </div>
-    </div>
-  </el-dialog>
-</template>
-<script>
-import api from "api/index";
-import dayjs from "dayjs";
-export default {
-  components: {
-  },
-  data() {
-    return {
-      selectValue: "",
-      stationList: [],
-      selectWind: "",
-      windturbinelist: [],
-      pagesize: 20,
-      pagenum: 1,
-      total: "",
-      recordList: [],
-      controlType:{
-        Nothing: '不推荐 ',
-        Start: '推荐启动 ',
-        Stop: '推荐停机',
-        Maintain: '推荐维护',
-        UnMaintain: '取消维护',
-        Lock: '挂牌',
-        UnLock: '取消挂牌 ',
-      }
-    };
-  },
-  created() {
-
-  },
-  mounted() { },
-  methods: {
-    opened() {
-      let stationList = this.$store.state.stationList;
-      this.selectValue = stationList[0].id;
-      this.stationList = stationList;
-      this.listedChange(this.selectValue);
-      this.getData()
-    },
-    closed() {
-      this.pagenum = 1;
-    },
-    listedChange(value) {
-      this.windturbinelist = [];
-      let windturbinelist = this.$store.state.windturbinelist;
-      let arr = Object.keys(windturbinelist).sort();
-      let windturbine = [];
-      for (const key of arr) {
-        let wind = windturbinelist[key];
-        if (wind.stationId === value) {
-          windturbine.push(wind);
-        }
-      }
-      this.selectWind = windturbine[0]?.code || "";
-      this.windturbineId = windturbine[0]?.windturbineId
-      this.windturbinelist = windturbine;
-    },
-    getData() {
-      api.recommended({
-        pagesize: this.pagesize,
-        pagenum: this.pagenum,
-        stationid: this.selectValue,
-        windturbineid: this.windturbineId || 'SG01_57',
-      }).then(res => {
-        if (res.data) {
-          this.total = Number(res.data.totalPages)
-          res.data.content.forEach(item => {
-            item.recommendedDate = dayjs(item.recommendedDate ).format("YYYY-MM-DD HH:mm:ss")
-            item.power = item.power.toFixed(2)
-            item.rollSpeed = item.rollSpeed.toFixed(2)
-            item.theoreticalPower = item.theoreticalPower.toFixed(2)
-            item.windSpeed = item.windSpeed.toFixed(2)
-            item.averageWindSpeed5 = item.averageWindSpeed5.toFixed(2)
-          }); 
-          this.recordList = res.data.content
-        }
-      })
-    },
-    handleCurrentChange(val) {
-      this.pagenum = val;
-      this.getData();
-    },
-  },
-};
-</script>
-<style lang="less" scoped>
-.body {
-  display: flex;
-  flex-direction: column;
-  background-color: #000000;
-  height: 90vh;
-  width: 102%;
-  margin-left: -1%;
-  margin-top: -40px;
-  overflow-y: auto;
-}
-
-.body::-webkit-scrollbar {
-  /*隐藏滚轮*/
-  display: none;
-}
-
-.searchTitle {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-left: 3vw;
-  padding-top: 10px;
-  color: #ffffff;
-}
-
-.search {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-right: 50px;
-}
-
-.date {
-  margin-right: 10px;
-  font-size: 16px;
-}
-
-.tables {
-  margin-left: 3vw;
-  padding-top: 10px;
-}
-
-.lable {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  flex-wrap: wrap;
-  width: 100%;
-  margin-left: 75px;
-  padding-top: 10px;
-}
-
-.lable-item {
-  font-size: 16px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  width: 16%;
-  color: #ffffff;
-  margin-bottom: 10px;
-}
-
-.el-table {
-  position: static;
-  background-color: #141414;
-}
-
-.inputs {
-  border: none;
-  width: 174px !important;
-  background-color: #292929;
-  height: 40px;
-  color: #ffffff;
-}
-
-.paginations {
-  display: flex;
-  flex-direction: row-reverse;
-}
-</style>
+<template>
+  <el-dialog width="70%" @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="body">
+      <div class="searchTitle">
+        <div class="search">
+          <div class="date">风场:</div>
+          <el-select @change="listedChange(selectValue)" class="inputs" v-model="selectValue" placeholder="请选择">
+            <el-option v-for="item in stationList" :key="item.id" :label="item.name" :value="item.id">
+            </el-option>
+          </el-select>
+        </div>
+        <div class="search">
+          <div class="date">风机名称:</div>
+          <el-select class="inputs" v-model="selectWind" @change="handleChange" placeholder="请选择" clearable>
+            <el-option v-for="item in windturbinelist" :key="item.code" :label="item.code" :value="item.code">
+            </el-option>
+          </el-select>
+        </div>
+
+        <div class="buttons" @click="getData()">查询</div>
+      </div>
+      <div class="tables">
+        <el-table
+          :data="recordList"
+          class="table"
+          style="width: 100%"
+          height="80vh"
+          :header-cell-style="{
+            background: 'rgb(30,30,30)',
+            color: 'rgb(220,220,220)',
+            padding: '4px',
+            fontSize: '14px',
+            'border-bottom': 'solid 1px rgba(77, 77, 77, 1)',
+          }"
+          :cell-style="{
+            height: '40px',
+            background: 'rgb(30,30,30)',
+            color: 'rgb(220,220,220)',
+            padding: '3px',
+            fontSize: '12px',
+            'border-bottom': '1px solid #000000',
+          }"
+        >
+          <el-table-column
+            prop="recommendedDate"
+            label="推荐时间"
+            width="150"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column prop="stationId" label="场站" align="center">
+          </el-table-column>
+          <el-table-column prop="windturbineId" label="风机" align="center">
+          </el-table-column>
+          <el-table-column prop="windSpeed" label="推荐时风速" align="center">
+          </el-table-column>
+          <el-table-column prop="averageWindSpeed5" label="推荐时五分钟平均风速" align="center">
+          </el-table-column>
+          <el-table-column label="推荐操作" align="center">
+            <template #default="scope">
+                  <span>
+                    {{ controlType[scope.row?.controlType] }}
+                  </span>
+                </template>
+          </el-table-column>
+          <el-table-column prop="rollSpeed" label="推荐时发电机转速" align="center">
+          </el-table-column>
+          <el-table-column prop="power" label="推荐时功率" align="center">
+          </el-table-column>
+          <el-table-column prop="theoreticalPower" label="推荐时理论功率" align="center">
+          </el-table-column>
+          <el-table-column prop="healthIndex" label="推荐时健康指数" align="center">
+          </el-table-column>
+          <el-table-column prop="cause" label="推荐原因" align="center">
+          </el-table-column>
+
+        </el-table>
+      </div>
+      <div class="paginations">
+        <el-pagination :hide-on-single-page="true" :page-size="1" background layout="prev, pager, next"
+          :total="total" @current-change="handleCurrentChange">
+        </el-pagination>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import api from "api/index";
+import dayjs from "dayjs";
+export default {
+  components: {
+  },
+  data() {
+    return {
+      selectValue: "",
+      stationList: [],
+      selectWind: "",
+      windturbinelist: [],
+      pagesize: 20,
+      pagenum: 1,
+      total: "",
+      recordList: [],
+      controlType:{
+        Nothing: '不推荐 ',
+        Start: '推荐启动 ',
+        Stop: '推荐停机',
+        Maintain: '推荐维护',
+        UnMaintain: '取消维护',
+        Lock: '挂牌',
+        UnLock: '取消挂牌 ',
+      }
+    };
+  },
+  created() {
+
+  },
+  mounted() { },
+  methods: {
+    opened() {
+      let stationList = this.$store.state.stationList;
+      this.selectValue = stationList[0].id;
+      this.stationList = stationList;
+      this.listedChange(this.selectValue);
+      this.getData()
+    },
+    closed() {
+      this.pagenum = 1;
+    },
+    listedChange(value) {
+      this.windturbinelist = [];
+      let windturbinelist = this.$store.state.windturbinelist;
+      let arr = Object.keys(windturbinelist).sort();
+      let windturbine = [];
+      for (const key of arr) {
+        let wind = windturbinelist[key];
+        if (wind.stationId === value) {
+          windturbine.push(wind);
+        }
+      }
+      this.selectWind = windturbine[0]?.code || "";
+      this.windturbineId = windturbine[0]?.windturbineId
+      this.windturbinelist = windturbine;
+    },
+    getData() {
+      api.recommended({
+        pagesize: this.pagesize,
+        pagenum: this.pagenum,
+        stationid: this.selectValue,
+        windturbineid: this.windturbineId || 'SG01_57',
+      }).then(res => {
+        if (res.data) {
+          this.total = Number(res.data.totalPages)
+          res.data.content.forEach(item => {
+            item.recommendedDate = dayjs(item.recommendedDate ).format("YYYY-MM-DD HH:mm:ss")
+            item.power = item.power.toFixed(2)
+            item.rollSpeed = item.rollSpeed.toFixed(2)
+            item.theoreticalPower = item.theoreticalPower.toFixed(2)
+            item.windSpeed = item.windSpeed.toFixed(2)
+            item.averageWindSpeed5 = item.averageWindSpeed5.toFixed(2)
+          }); 
+          this.recordList = res.data.content
+        }
+      })
+    },
+    handleCurrentChange(val) {
+      this.pagenum = val;
+      this.getData();
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.body {
+  display: flex;
+  flex-direction: column;
+  background-color: #000000;
+  height: 90vh;
+  width: 102%;
+  margin-left: -1%;
+  margin-top: -40px;
+  overflow-y: auto;
+}
+
+.body::-webkit-scrollbar {
+  /*隐藏滚轮*/
+  display: none;
+}
+
+.searchTitle {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-left: 3vw;
+  padding-top: 10px;
+  color: #ffffff;
+}
+
+.search {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-right: 50px;
+}
+
+.date {
+  margin-right: 10px;
+  font-size: 16px;
+}
+
+.tables {
+  margin-left: 3vw;
+  padding-top: 10px;
+}
+
+.lable {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+  width: 100%;
+  margin-left: 75px;
+  padding-top: 10px;
+}
+
+.lable-item {
+  font-size: 16px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 16%;
+  color: #ffffff;
+  margin-bottom: 10px;
+}
+
+.el-table {
+  position: static;
+  background-color: #141414;
+}
+
+.inputs {
+  border: none;
+  width: 174px !important;
+  background-color: #292929;
+  height: 40px;
+  color: #ffffff;
+}
+
+.paginations {
+  display: flex;
+  flex-direction: row-reverse;
+}
+</style>
   

src/components/search/state.vue

@@ -1,251 +1,251 @@
-<template>
-  <el-dialog width="70%" @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="body">
-      <div class="searchTitle">
-        <div class="search">
-          <div class="date">风场:</div>
-          <el-select @change="listedChange(selectValue)" class="inputs" v-model="selectValue" placeholder="请选择">
-            <el-option v-for="item in stationList" :key="item.id" :label="item.address" :value="item.id">
-            </el-option>
-          </el-select>
-        </div>
-        <div class="search">
-          <div class="date">风机名称:</div>
-          <el-select class="inputs" v-model="selectWind" @change="handleChange" placeholder="请选择">
-            <el-option v-for="item in windturbinelist" :key="item.code" :label="item.code" :value="item.code">
-            </el-option>
-          </el-select>
-        </div>
-        <div class="search">
-          <div class="date">日期:</div>
-          <el-date-picker class="pickers" @change="changes" v-model="timeValue" type="datetimerange" range-separator="至"
-            start-placeholder="开始日期" end-placeholder="结束日期">
-          </el-date-picker>
-        </div>
-
-        <div class="buttons" @click="getWarning()">查询</div>
-      </div>
-      <div class="tables">
-        <el-table
-          :data="stateList"
-          class="table"
-          style="width: 100%"
-          height="80vh"
-          :header-cell-style="{
-            background: 'rgb(30,30,30)',
-            color: 'rgb(220,220,220)',
-            padding: '4px',
-            fontSize: '14px',
-            'border-bottom': 'solid 1px rgba(77, 77, 77, 1)',
-          }"
-          :cell-style="{
-            height: '40px',
-            background: 'rgb(30,30,30)',
-            color: 'rgb(220,220,220)',
-            padding: '3px',
-            fontSize: '12px',
-            'border-bottom': '1px solid #000000',
-          }"
-        >
-          <el-table-column prop="ts" label="动作时间" align="center">
-          </el-table-column>
-          <el-table-column prop="code" label="风机名称" align="center">
-          </el-table-column>
-          <el-table-column prop="status" label="动作编号" align="center">
-          </el-table-column>
-          <el-table-column prop="statusName" label="动作信息" align="center">
-          </el-table-column>
-
-        </el-table>
-      </div>
-      <div class="paginations">
-        <el-pagination :hide-on-single-page="true" :page-size="1" background layout="prev, pager, next"
-          :total="total" @current-change="handleCurrentChange">
-        </el-pagination>
-      </div>
-    </div>
-  </el-dialog>
-</template>
-<script>
-import api from "api/index";
-import dayjs from "dayjs";
-export default {
-  components: {
-  },
-  data() {
-    return {
-      timeValue: [],
-      selectValue: "",
-      stationList: [],
-      selectWind: "",
-      windturbinelist: [],
-      pagesize: 20,
-      pagenum: 1,
-      total: 20,
-      stateList: [
-      {
-            "ts": 1662385197000,
-            "status": "Standby",
-            "code": "MG01-03",
-            "statusName": "待机"
-        },
-        {
-            "ts": 1662385201000,
-            "status": "Standby",
-            "code": "MG01-03",
-            "statusName": "待机"
-        },
-        {
-            "ts": 1662386645000,
-            "status": "Start",
-            "code": "MG01-03",
-            "statusName": "启动"
-        },
-        {
-            "ts": 1662386690000,
-            "status": "OnPower",
-            "code": "MG01-03",
-            "statusName": "上电"
-        },
-      ],
-    };
-  },
-  created() {
-
-  },
-  mounted() { },
-  methods: {
-    opened() {
-      let date = new Date();
-      this.timeValue[0] = date.getTime() - 28800000;
-      this.timeValue[1] = date.getTime() + 3600000;
-      let stationList = this.$store.state.stationList;
-      this.selectValue = stationList[0].id;
-      this.stationList = stationList;
-      this.listedChange(this.selectValue);
-      this.getData()
-    },
-    closed() {
-      this.pagenum = 1;
-    },
-    listedChange(value) {
-      this.windturbinelist = [];
-      let windturbinelist = this.$store.state.windturbinelist;
-      let arr = Object.keys(windturbinelist).sort();
-      let windturbine = [];
-      for (const key of arr) {
-        let wind = windturbinelist[key];
-        if (wind.stationId === value) {
-          windturbine.push(wind);
-        }
-      }
-      this.selectWind = windturbine[0]?.code || "";
-      this.windturbineId = windturbine[0]?.windturbineId
-      this.windturbinelist = windturbine;
-    },
-    getData(){
-      api.statusChange({
-        pagesize: this.pagesize,
-        pagenum: this.pagenum,
-        startTs: new Date(this.timeValue[0]).getTime(),
-        endTs: new Date(this.timeValue[1]).getTime(),
-        windturbineid: this.windturbineId || 'MG01_03',
-      }).then(res =>{
-        if(res.data){
-          this.total = Number(res.data.totalPages)
-          res.data.content.forEach(item => {
-            item.recommendedDate = dayjs(item.ts ).format("YYYY-MM-DD HH:mm:ss")
-          }); 
-          this.recordList = res.data.content
-        }
-      })
-    },
-  },
-};
-</script>
-<style lang="less" scoped>
-.body {
-  display: flex;
-  flex-direction: column;
-  background-color: #000000;
-  height: 90vh;
-  width: 102%;
-  margin-left: -1%;
-  margin-top: -40px;
-  overflow-y: auto;
-}
-
-.body::-webkit-scrollbar {
-  /*隐藏滚轮*/
-  display: none;
-}
-.searchTitle {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-left: 3vw;
-  padding-top: 10px;
-  color: #ffffff;
-}
-
-.search {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-right: 50px;
-}
-
-.date {
-  margin-right: 10px;
-  font-size: 16px;
-}
-
-.tables {
-  margin-left: 3vw;
-  padding-top: 10px;
-}
-
-.lable {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  flex-wrap: wrap;
-  width: 100%;
-  margin-left: 75px;
-  padding-top: 10px;
-}
-
-.lable-item {
-  font-size: 16px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  width: 16%;
-  color: #ffffff;
-  margin-bottom: 10px;
-}
-
-.el-table {
-  position: static;
-  background-color: #141414;
-}
-
-.inputs {
-  border: none;
-  width: 174px !important;
-  background-color: #292929;
-  height: 40px;
-  color: #ffffff;
-}
-
-.paginations {
-  display: flex;
-  flex-direction: row-reverse;
-}
-</style>
+<template>
+  <el-dialog width="70%" @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="body">
+      <div class="searchTitle">
+        <div class="search">
+          <div class="date">风场:</div>
+          <el-select @change="listedChange(selectValue)" class="inputs" v-model="selectValue" placeholder="请选择">
+            <el-option v-for="item in stationList" :key="item.id" :label="item.name" :value="item.id">
+            </el-option>
+          </el-select>
+        </div>
+        <div class="search">
+          <div class="date">风机名称:</div>
+          <el-select class="inputs" v-model="selectWind" @change="handleChange" placeholder="请选择">
+            <el-option v-for="item in windturbinelist" :key="item.code" :label="item.code" :value="item.code">
+            </el-option>
+          </el-select>
+        </div>
+        <div class="search">
+          <div class="date">日期:</div>
+          <el-date-picker class="pickers" @change="changes" v-model="timeValue" type="datetimerange" range-separator="至"
+            start-placeholder="开始日期" end-placeholder="结束日期">
+          </el-date-picker>
+        </div>
+
+        <div class="buttons" @click="getData()">查询</div>
+      </div>
+      <div class="tables">
+        <el-table
+          :data="stateList"
+          class="table"
+          style="width: 100%"
+          height="80vh"
+          :header-cell-style="{
+            background: 'rgb(30,30,30)',
+            color: 'rgb(220,220,220)',
+            padding: '4px',
+            fontSize: '14px',
+            'border-bottom': 'solid 1px rgba(77, 77, 77, 1)',
+          }"
+          :cell-style="{
+            height: '40px',
+            background: 'rgb(30,30,30)',
+            color: 'rgb(220,220,220)',
+            padding: '3px',
+            fontSize: '12px',
+            'border-bottom': '1px solid #000000',
+          }"
+        >
+          <el-table-column prop="ts" label="动作时间" align="center">
+          </el-table-column>
+          <el-table-column prop="code" label="风机名称" align="center">
+          </el-table-column>
+          <el-table-column prop="status" label="动作编号" align="center">
+          </el-table-column>
+          <el-table-column prop="statusName" label="动作信息" align="center">
+          </el-table-column>
+
+        </el-table>
+      </div>
+      <div class="paginations">
+        <el-pagination :hide-on-single-page="true" :page-size="1" background layout="prev, pager, next"
+          :total="total" @current-change="handleCurrentChange">
+        </el-pagination>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import api from "api/index";
+import dayjs from "dayjs";
+export default {
+  components: {
+  },
+  data() {
+    return {
+      timeValue: [],
+      selectValue: "",
+      stationList: [],
+      selectWind: "",
+      windturbinelist: [],
+      pagesize: 20,
+      pagenum: 1,
+      total: 20,
+      stateList: [
+      {
+            "ts": 1662385197000,
+            "status": "Standby",
+            "code": "MG01-03",
+            "statusName": "待机"
+        },
+        {
+            "ts": 1662385201000,
+            "status": "Standby",
+            "code": "MG01-03",
+            "statusName": "待机"
+        },
+        {
+            "ts": 1662386645000,
+            "status": "Start",
+            "code": "MG01-03",
+            "statusName": "启动"
+        },
+        {
+            "ts": 1662386690000,
+            "status": "OnPower",
+            "code": "MG01-03",
+            "statusName": "上电"
+        },
+      ],
+    };
+  },
+  created() {
+
+  },
+  mounted() { },
+  methods: {
+    opened() {
+      let date = new Date();
+      this.timeValue[0] = date.getTime() - 28800000;
+      this.timeValue[1] = date.getTime() + 3600000;
+      let stationList = this.$store.state.stationList;
+      this.selectValue = stationList[0].id;
+      this.stationList = stationList;
+      this.listedChange(this.selectValue);
+      this.getData()
+    },
+    closed() {
+      this.pagenum = 1;
+    },
+    listedChange(value) {
+      this.windturbinelist = [];
+      let windturbinelist = this.$store.state.windturbinelist;
+      let arr = Object.keys(windturbinelist).sort();
+      let windturbine = [];
+      for (const key of arr) {
+        let wind = windturbinelist[key];
+        if (wind.stationId === value) {
+          windturbine.push(wind);
+        }
+      }
+      this.selectWind = windturbine[0]?.code || "";
+      this.windturbineId = windturbine[0]?.windturbineId
+      this.windturbinelist = windturbine;
+    },
+    getData(){
+      api.statusChange({
+        pagesize: this.pagesize,
+        pagenum: this.pagenum,
+        startTs: new Date(this.timeValue[0]).getTime(),
+        endTs: new Date(this.timeValue[1]).getTime(),
+        windturbineid: this.windturbineId || 'MG01_03',
+      }).then(res =>{
+        if(res.data){
+          this.total = Number(res.data.totalPages)
+          res.data.content.forEach(item => {
+            item.recommendedDate = dayjs(item.ts ).format("YYYY-MM-DD HH:mm:ss")
+          }); 
+          this.stateList = res.data.content
+        }
+      })
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.body {
+  display: flex;
+  flex-direction: column;
+  background-color: #000000;
+  height: 90vh;
+  width: 102%;
+  margin-left: -1%;
+  margin-top: -40px;
+  overflow-y: auto;
+}
+
+.body::-webkit-scrollbar {
+  /*隐藏滚轮*/
+  display: none;
+}
+.searchTitle {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-left: 3vw;
+  padding-top: 10px;
+  color: #ffffff;
+}
+
+.search {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-right: 50px;
+}
+
+.date {
+  margin-right: 10px;
+  font-size: 16px;
+}
+
+.tables {
+  margin-left: 3vw;
+  padding-top: 10px;
+}
+
+.lable {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+  width: 100%;
+  margin-left: 75px;
+  padding-top: 10px;
+}
+
+.lable-item {
+  font-size: 16px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 16%;
+  color: #ffffff;
+  margin-bottom: 10px;
+}
+
+.el-table {
+  position: static;
+  background-color: #141414;
+}
+
+.inputs {
+  border: none;
+  width: 174px !important;
+  background-color: #292929;
+  height: 40px;
+  color: #ffffff;
+}
+
+.paginations {
+  display: flex;
+  flex-direction: row-reverse;
+}
+</style>
   

src/components/search/status.vue

@@ -1,214 +1,214 @@
-<template>
-  <el-dialog
-    width="70%"
-    @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="body">
-        <div class="searchTitle">
-          <div class="search">
-          <div class="date">风场:</div>
-          <el-select
-            class="inputs"
-            v-model="selectValue"
-            placeholder="请选择"
-          >
-            <el-option
-              v-for="item in stationList"
-              :key="item.id"
-              :label="item.address"
-              :value="item.id"
-            >
-            </el-option>
-          </el-select>
-        </div>
-        <div class="search">
-          <div class="date">日期:</div>
-          <el-date-picker
-            class="pickers"
-            @change="changes"
-            v-model="timeValue"
-            type="datetimerange"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-          >
-          </el-date-picker>
-        </div>
-        <div class="buttons" @click="getData()">查询</div>
-      </div>
-      <div class="tables">
-        <el-table
-          :data="StatusList"
-          class="table"
-          style="width: 100%"
-          height="82vh"
-          :header-cell-style="{
-            background: 'rgb(30,30,30)',
-            color: 'rgb(220,220,220)',
-            padding: '4px',
-            fontSize: '14px',
-            'border-bottom': 'solid 1px rgba(77, 77, 77, 1)',
-          }"
-          :cell-style="{
-            height: '40px',
-            background: 'rgb(30,30,30)',
-            color: 'rgb(220,220,220)',
-            padding: '3px',
-            fontSize: '12px',
-            'border-bottom': '1px solid #000000',
-          }"
-        >
-          <el-table-column
-            prop="code"
-            label="风机名称"
-            width="150"
-            align="center"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="averageWindSpeedDay"
-            label="平均风速（m/s）"
-            align="center"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="actualpowerday"
-            label="发电量（Kwh）"
-            align="center"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="powerfactor"
-            label="功率因数"
-            align="center"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="onlinehours"
-            label="并网运行时间（H）"
-            align="center"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="maintainhours"
-            label="风机维护时间（H）"
-            align="center"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="faulthours"
-            label="风机故障时间（H）"
-            align="center"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="standbyhours"
-            label="待机时间（H）"
-            align="center"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="offlinehours"
-            label="离线时间（H）"
-            align="center"
-          >
-          </el-table-column>
-          
-        </el-table>
-      </div>
-    </div>
-  </el-dialog>
-</template>
-
-<script>
-import api from "api/index";
-export default {
-  data() {
-    return {
-      timeValue: [],
-      stationList: [],
-      selectValue:'',
-      StatusList: [],
-    };
-  },
-  methods: {
-    opened() {
-      let date = new Date();
-      this.timeValue[0] = date.getTime() - (28800000 *3);
-      this.timeValue[1] = date.getTime();
-      let stationList = this.$store.state.stationList;
-      this.selectValue = stationList[0].id;
-      this.stationList = stationList;
-      this.getData()
-    },
-    getData(){
-      console.log(11111111);
-      api.statusTime({
-        stationid: this.selectValue,
-        startTs: new Date(this.timeValue[0]).getTime(),
-        endTs: new Date(this.timeValue[1]).getTime(),
-      }).then(res =>{
-        res.data.forEach(item =>{
-        for (const key in item) {
-          if (typeof(item[key]) === 'number') {
-            item[key] = item[key].toFixed(2)
-          }
-        }
-      })
-        this.StatusList = res.data
-      })
-    }
-  },
-};
-</script>
-<style lang="less" scoped>
-.body {
-  background-color: #000000;
-  height: 90vh;
-  width: 102%;
-  margin-left: -1%;
-  margin-top: -40px;
-}
-.searchTitle {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-left: 3vw;
-  padding-top: 10px;
-  color: #ffffff;
-}
-.search {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-right: 50px;
-}
-.date {
-  margin-right: 10px;
-  font-size: 16px;
-}
-.tables {
-  margin-left: 3vw;
-  padding-top: 10px;
-}
-.el-table {
-  position: static;
-  background-color: #141414;
-}
-.inputs {
-  border: none;
-  width: 174px !important;
-  background-color: #292929;
-  height: 40px;
-  color: #ffffff;
-}
+<template>
+  <el-dialog
+    width="70%"
+    @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="body">
+        <div class="searchTitle">
+          <div class="search">
+          <div class="date">风场:</div>
+          <el-select
+            class="inputs"
+            v-model="selectValue"
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in stationList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </div>
+        <div class="search">
+          <div class="date">日期:</div>
+          <el-date-picker
+            class="pickers"
+            @change="changes"
+            v-model="timeValue"
+            type="datetimerange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          >
+          </el-date-picker>
+        </div>
+        <div class="buttons" @click="getData()">查询</div>
+      </div>
+      <div class="tables">
+        <el-table
+          :data="StatusList"
+          class="table"
+          style="width: 100%"
+          height="82vh"
+          :header-cell-style="{
+            background: 'rgb(30,30,30)',
+            color: 'rgb(220,220,220)',
+            padding: '4px',
+            fontSize: '14px',
+            'border-bottom': 'solid 1px rgba(77, 77, 77, 1)',
+          }"
+          :cell-style="{
+            height: '40px',
+            background: 'rgb(30,30,30)',
+            color: 'rgb(220,220,220)',
+            padding: '3px',
+            fontSize: '12px',
+            'border-bottom': '1px solid #000000',
+          }"
+        >
+          <el-table-column
+            prop="code"
+            label="风机名称"
+            width="150"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="averageWindSpeedDay"
+            label="平均风速（m/s）"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="actualpowerday"
+            label="发电量（Kwh）"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="powerfactor"
+            label="功率因数"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="onlinehours"
+            label="并网运行时间（H）"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="maintainhours"
+            label="风机维护时间（H）"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="faulthours"
+            label="风机故障时间（H）"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="standbyhours"
+            label="待机时间（H）"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="offlinehours"
+            label="离线时间（H）"
+            align="center"
+          >
+          </el-table-column>
+          
+        </el-table>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import api from "api/index";
+export default {
+  data() {
+    return {
+      timeValue: [],
+      stationList: [],
+      selectValue:'',
+      StatusList: [],
+    };
+  },
+  methods: {
+    opened() {
+      let date = new Date();
+      this.timeValue[0] = date.getTime() - (28800000 *3);
+      this.timeValue[1] = date.getTime();
+      let stationList = this.$store.state.stationList;
+      this.selectValue = stationList[0].id;
+      this.stationList = stationList;
+      this.getData()
+    },
+    getData(){
+      console.log(11111111);
+      api.statusTime({
+        stationid: this.selectValue,
+        startTs: new Date(this.timeValue[0]).getTime(),
+        endTs: new Date(this.timeValue[1]).getTime(),
+      }).then(res =>{
+        res.data.forEach(item =>{
+        for (const key in item) {
+          if (typeof(item[key]) === 'number') {
+            item[key] = item[key].toFixed(2)
+          }
+        }
+      })
+        this.StatusList = res.data
+      })
+    }
+  },
+};
+</script>
+<style lang="less" scoped>
+.body {
+  background-color: #000000;
+  height: 90vh;
+  width: 102%;
+  margin-left: -1%;
+  margin-top: -40px;
+}
+.searchTitle {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-left: 3vw;
+  padding-top: 10px;
+  color: #ffffff;
+}
+.search {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-right: 50px;
+}
+.date {
+  margin-right: 10px;
+  font-size: 16px;
+}
+.tables {
+  margin-left: 3vw;
+  padding-top: 10px;
+}
+.el-table {
+  position: static;
+  background-color: #141414;
+}
+.inputs {
+  border: none;
+  width: 174px !important;
+  background-color: #292929;
+  height: 40px;
+  color: #ffffff;
+}
 </style>

src/components/search/warning.vue

@@ -1,285 +1,285 @@
-<template>
-  <el-dialog width="70%" @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="body">
-      <div class="searchTitle">
-        <div class="search">
-          <div class="date">风场:</div>
-          <el-select @change="listedChange(selectValue)" class="inputs" v-model="selectValue" placeholder="请选择">
-            <el-option v-for="item in stationList" :key="item.id" :label="item.address" :value="item.id">
-            </el-option>
-          </el-select>
-        </div>
-        <div class="search">
-          <div class="date">日期:</div>
-          <el-date-picker class="pickers" @change="changes" v-model="timeValue" type="datetimerange" range-separator="至"
-            start-placeholder="开始日期" end-placeholder="结束日期">
-          </el-date-picker>
-        </div>
-        <div class="search">
-          <div class="date">关键字:</div>
-          <el-input class="inputs" placeholder="请输入" v-model="inputVlaues"></el-input>
-        </div>
-
-        <div class="buttons" @click="getWarning()">查询</div>
-      </div>
-      <!-- <div class="lable">
-        <div class="lable-item" v-for="(item, index) in lableList" :key="index">
-          <div>{{item.name}}:</div>
-          <div style="margin-left: 10px;color:red;">{{item.value}}</div>
-        </div>
-      </div> -->
-      <div class="tables">
-        <el-table :data="warningList" class="table" style="width: 100%" height="80vh" :header-cell-style="{
-          background: 'rgb(30,30,30)',
-          color: 'rgb(220,220,220)',
-          padding: '4px',
-          fontSize: '14px',
-          'border-bottom': 'solid 1px rgba(77, 77, 77, 1)',
-        }" :cell-style="{
-            height: '40px',
-            background: 'rgb(30,30,30)',
-            color: 'rgb(220,220,220)',
-            padding: '3px',
-            fontSize: '12px',
-            'border-bottom': '1px solid #000000',
-          }">
-          <el-table-column prop="alertTime" label="发生时间" width="150" align="center">
-          </el-table-column>
-          <el-table-column prop="stationName" label="风场名称" width="120" align="center">
-          </el-table-column>
-          <el-table-column prop="windturbineName" label="风机名称" width="120" align="center">
-          </el-table-column>
-          <el-table-column prop="rank" label="报警等级" width="100" align="center">
-          </el-table-column>
-          <el-table-column label="状态" width="120" align="center">
-            <template #default="scope">
-              <span>
-                {{ scope.row.messageType === 1 ? "触发" : "已解除" }}
-              </span>
-            </template>
-          </el-table-column>
-          <el-table-column prop="snapId" label="故障编号" width="240" align="center">
-          </el-table-column>
-          <el-table-column prop="alertText" label="故障信息" align="center">
-          </el-table-column>
-        </el-table>
-      </div>
-      <div class="paginations">
-        <el-pagination :hide-on-single-page="true" :page-size="currentPage" background layout="prev, pager, next"
-          :total="total" @current-change="handleCurrentChange">
-        </el-pagination>
-      </div>
-    </div>
-  </el-dialog>
-</template>
-
-<script>
-import dayjs from "dayjs";
-import api from "api/index";
-export default {
-  data() {
-    return {
-      current: 0,
-      pagenum: 1,
-      total: "",
-      timeValue: [],
-      selectValue: "",
-      inputVlaues: "",
-      stationList: [],
-      windturbineId: "",
-      windturbinelist: [],
-      warningList: [],
-      currentPage: 20,
-      lableList: [
-        {
-          name: "偏航系统故障",
-          value: "6996",
-        },
-        {
-          name: "偏航系统故障",
-          value: "6996",
-        },
-        {
-          name: "偏航系统故障",
-          value: "6996",
-        },
-        {
-          name: "偏航系统故障",
-          value: "6996",
-        },
-        {
-          name: "偏航系统故障",
-          value: "6996",
-        },
-        {
-          name: "偏航系统故障",
-          value: "6996",
-        },
-        {
-          name: "偏航系统故障",
-          value: "6996",
-        },
-        {
-          name: "偏航系统故障",
-          value: "6996",
-        },
-        {
-          name: "偏航系统故障",
-          value: "6996",
-        },
-        {
-          name: "偏航系统故障",
-          value: "6996",
-        },
-        {
-          name: "偏航系统故障",
-          value: "6996",
-        },
-        {
-          name: "偏航系统故障",
-          value: "6996",
-        },
-      ],
-    };
-  },
-  methods: {
-    ChangeBar(values) {
-      this.current = values;
-    },
-    opened() {
-      let date = new Date();
-      this.timeValue[0] = date.getTime() - 28800000;
-      this.timeValue[1] = date.getTime() + 3600000;
-      let stationList = this.$store.state.stationList;
-      this.selectValue = stationList[0].id;
-      this.stationList = stationList;
-      this.listedChange(this.selectValue);
-      this.getWarning();
-    },
-    closed() {
-      this.pagenum = 1;
-    },
-    getWarning() {
-      api
-        .getWindturbineWarning({
-          pagesize: this.currentPage,
-          pagenum: this.pagenum,
-          stationid: this.selectValue,
-          windturbineid: '',
-          starttime: dayjs(this.timeValue[0]).format("YYYY-MM-DD HH:mm:ss"),
-          endtime: dayjs(this.timeValue[1]).format("YYYY-MM-DD HH:mm:ss"),
-          keyword: this.inputVlaues,
-          category1: 'custom',
-        })
-        .then((msg) => {
-          if (msg.data) {
-            this.total = msg.data.total
-            msg.data.records.forEach((item) => {
-              item.alertTime = dayjs(item.alertTime).format("MM-DD HH:mm:ss");
-            });
-            this.warningList = msg.data.records;
-          }
-        });
-    },
-    handleCurrentChange(val) {
-      this.pagenum = val;
-      this.getWarning();
-    },
-    listedChange(value) {
-      this.windturbinelist = [];
-      let windturbinelist = this.$store.state.windturbinelist;
-      let arr = Object.keys(windturbinelist).sort();
-      let windturbine = [];
-      for (const key of arr) {
-        let wind = windturbinelist[key];
-        if (wind.stationId === value) {
-          windturbine.push(wind);
-        }
-      }
-      this.windturbineId = windturbine[0]?.windturbineId
-      this.windturbinelist = windturbine;
-    },
-    handleChange(val) {
-      this.windturbineId = this.windturbinelist.filter(item => item.code === val)[0].windturbineId
-    }
-  },
-};
-</script>
-<style lang="less" scoped>
-.body {
-  background-color: #000000;
-  height: 89vh;
-  width: 102%;
-  margin-left: -1%;
-  margin-top: -40px;
-}
-
-.searchTitle {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-left: 3vw;
-  padding-top: 10px;
-  color: #ffffff;
-}
-
-.search {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-right: 50px;
-}
-
-.date {
-  margin-right: 10px;
-  font-size: 16px;
-}
-
-.tables {
-  margin-left: 3vw;
-  padding-top: 10px;
-}
-
-.lable {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  flex-wrap: wrap;
-  width: 100%;
-  margin-left: 75px;
-  padding-top: 10px;
-}
-
-.lable-item {
-  font-size: 16px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  width: 16%;
-  color: #ffffff;
-  margin-bottom: 10px;
-}
-
-.el-table {
-  position: static;
-  background-color: #141414;
-}
-
-.inputs {
-  border: none;
-  width: 174px !important;
-  background-color: #292929;
-  height: 40px;
-  color: #ffffff;
-}
-
-.paginations {
-  display: flex;
-  flex-direction: row-reverse;
-}
+<template>
+  <el-dialog width="70%" @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="body">
+      <div class="searchTitle">
+        <div class="search">
+          <div class="date">风场:</div>
+          <el-select @change="listedChange(selectValue)" class="inputs" v-model="selectValue" placeholder="请选择">
+            <el-option v-for="item in stationList" :key="item.id" :label="item.name" :value="item.id">
+            </el-option>
+          </el-select>
+        </div>
+        <div class="search">
+          <div class="date">日期:</div>
+          <el-date-picker class="pickers" @change="changes" v-model="timeValue" type="datetimerange" range-separator="至"
+            start-placeholder="开始日期" end-placeholder="结束日期">
+          </el-date-picker>
+        </div>
+        <div class="search">
+          <div class="date">关键字:</div>
+          <el-input class="inputs" placeholder="请输入" v-model="inputVlaues"></el-input>
+        </div>
+
+        <div class="buttons" @click="getWarning()">查询</div>
+      </div>
+      <!-- <div class="lable">
+        <div class="lable-item" v-for="(item, index) in lableList" :key="index">
+          <div>{{item.name}}:</div>
+          <div style="margin-left: 10px;color:red;">{{item.value}}</div>
+        </div>
+      </div> -->
+      <div class="tables">
+        <el-table :data="warningList" class="table" style="width: 100%" height="80vh" :header-cell-style="{
+          background: 'rgb(30,30,30)',
+          color: 'rgb(220,220,220)',
+          padding: '4px',
+          fontSize: '14px',
+          'border-bottom': 'solid 1px rgba(77, 77, 77, 1)',
+        }" :cell-style="{
+            height: '40px',
+            background: 'rgb(30,30,30)',
+            color: 'rgb(220,220,220)',
+            padding: '3px',
+            fontSize: '12px',
+            'border-bottom': '1px solid #000000',
+          }">
+          <el-table-column prop="alertTime" label="发生时间" width="150" align="center">
+          </el-table-column>
+          <el-table-column prop="stationName" label="风场名称" width="120" align="center">
+          </el-table-column>
+          <el-table-column prop="windturbineName" label="风机名称" width="120" align="center">
+          </el-table-column>
+          <el-table-column prop="rank" label="报警等级" width="100" align="center">
+          </el-table-column>
+          <el-table-column label="状态" width="120" align="center">
+            <template #default="scope">
+              <span>
+                {{ scope.row.messageType === 1 ? "触发" : "已解除" }}
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="snapId" label="故障编号" width="240" align="center">
+          </el-table-column>
+          <el-table-column prop="alertText" label="故障信息" align="center">
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="paginations">
+        <el-pagination :hide-on-single-page="true" :page-size="currentPage" background layout="prev, pager, next"
+          :total="total" @current-change="handleCurrentChange">
+        </el-pagination>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import dayjs from "dayjs";
+import api from "api/index";
+export default {
+  data() {
+    return {
+      current: 0,
+      pagenum: 1,
+      total: "",
+      timeValue: [],
+      selectValue: "",
+      inputVlaues: "",
+      stationList: [],
+      windturbineId: "",
+      windturbinelist: [],
+      warningList: [],
+      currentPage: 20,
+      lableList: [
+        {
+          name: "偏航系统故障",
+          value: "6996",
+        },
+        {
+          name: "偏航系统故障",
+          value: "6996",
+        },
+        {
+          name: "偏航系统故障",
+          value: "6996",
+        },
+        {
+          name: "偏航系统故障",
+          value: "6996",
+        },
+        {
+          name: "偏航系统故障",
+          value: "6996",
+        },
+        {
+          name: "偏航系统故障",
+          value: "6996",
+        },
+        {
+          name: "偏航系统故障",
+          value: "6996",
+        },
+        {
+          name: "偏航系统故障",
+          value: "6996",
+        },
+        {
+          name: "偏航系统故障",
+          value: "6996",
+        },
+        {
+          name: "偏航系统故障",
+          value: "6996",
+        },
+        {
+          name: "偏航系统故障",
+          value: "6996",
+        },
+        {
+          name: "偏航系统故障",
+          value: "6996",
+        },
+      ],
+    };
+  },
+  methods: {
+    ChangeBar(values) {
+      this.current = values;
+    },
+    opened() {
+      let date = new Date();
+      this.timeValue[0] = date.getTime() - 28800000;
+      this.timeValue[1] = date.getTime() + 3600000;
+      let stationList = this.$store.state.stationList;
+      this.selectValue = stationList[0].id;
+      this.stationList = stationList;
+      this.listedChange(this.selectValue);
+      this.getWarning();
+    },
+    closed() {
+      this.pagenum = 1;
+    },
+    getWarning() {
+      api
+        .getWindturbineWarning({
+          pagesize: this.currentPage,
+          pagenum: this.pagenum,
+          stationid: this.selectValue,
+          windturbineid: '',
+          starttime: dayjs(this.timeValue[0]).format("YYYY-MM-DD HH:mm:ss"),
+          endtime: dayjs(this.timeValue[1]).format("YYYY-MM-DD HH:mm:ss"),
+          keyword: this.inputVlaues,
+          category1: 'custom',
+        })
+        .then((msg) => {
+          if (msg.data) {
+            this.total = msg.data.total
+            msg.data.records.forEach((item) => {
+              item.alertTime = dayjs(item.alertTime).format("MM-DD HH:mm:ss");
+            });
+            this.warningList = msg.data.records;
+          }
+        });
+    },
+    handleCurrentChange(val) {
+      this.pagenum = val;
+      this.getWarning();
+    },
+    listedChange(value) {
+      this.windturbinelist = [];
+      let windturbinelist = this.$store.state.windturbinelist;
+      let arr = Object.keys(windturbinelist).sort();
+      let windturbine = [];
+      for (const key of arr) {
+        let wind = windturbinelist[key];
+        if (wind.stationId === value) {
+          windturbine.push(wind);
+        }
+      }
+      this.windturbineId = windturbine[0]?.windturbineId
+      this.windturbinelist = windturbine;
+    },
+    handleChange(val) {
+      this.windturbineId = this.windturbinelist.filter(item => item.code === val)[0].windturbineId
+    }
+  },
+};
+</script>
+<style lang="less" scoped>
+.body {
+  background-color: #000000;
+  height: 89vh;
+  width: 102%;
+  margin-left: -1%;
+  margin-top: -40px;
+}
+
+.searchTitle {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-left: 3vw;
+  padding-top: 10px;
+  color: #ffffff;
+}
+
+.search {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-right: 50px;
+}
+
+.date {
+  margin-right: 10px;
+  font-size: 16px;
+}
+
+.tables {
+  margin-left: 3vw;
+  padding-top: 10px;
+}
+
+.lable {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+  width: 100%;
+  margin-left: 75px;
+  padding-top: 10px;
+}
+
+.lable-item {
+  font-size: 16px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 16%;
+  color: #ffffff;
+  margin-bottom: 10px;
+}
+
+.el-table {
+  position: static;
+  background-color: #141414;
+}
+
+.inputs {
+  border: none;
+  width: 174px !important;
+  background-color: #292929;
+  height: 40px;
+  color: #ffffff;
+}
+
+.paginations {
+  display: flex;
+  flex-direction: row-reverse;
+}
 </style>

src/components/stationSvgDetailPages.vue

@@ -1,240 +1,240 @@
-<template>
-  <el-dialog
-    width="85%"
-    @opened="opened()"
-    @closed="closed()"
-    :show-close="false"
-    class="my-info-dialog"
-  >
-    <template #title>
-      <!-- <div style="margin-top:-10px;color: #FFFFFF;">{{stationName}}</div> -->
-      <div class="titleList">
-        <div v-for="(item, index) in stationList" :key="index">
-          <div
-            v-if="item?.id !== currentStation"
-            :class="
-              index === 0
-                ? 'controlTypesLeft'
-                : index === stationList.length - 1
-                ? 'controlTypesRight'
-                : 'controlTypes'
-            "
-            @click="handleTypeChange(item)"
-          >
-            {{ item.stationName ||  item.address }}
-          </div>
-          <div
-            v-else
-            :class="
-              index === 0
-                ? 'onControlTypesLeft'
-                : index === stationList.length - 1
-                ? 'onControlTypesRight'
-                : 'onControlTypes'
-            "
-            @click="handleTypeChange(item)"
-          >
-            {{ item.stationName ||  item.address  }}
-          </div>
-        </div>
-      </div>
-    </template>
-    <div>
-      <Cl
-        ref="svgRef"
-        v-if="currentStation == 'CL_FDC' || currentStation == 'CL_SYZ'"
-      />
-      <KB
-        ref="svgRef"
-        v-if="currentStation == 'KB_FDC' || currentStation == 'KB_SYZ'"
-      />
-      <DX
-        ref="svgRef"
-        v-if="currentStation == 'DX_FDC' || currentStation == 'DX_SYZ'"
-      />
-      <SY
-        ref="svgRef"
-        v-if="currentStation == 'SY_FDC' || currentStation == 'SY_SYZ'"
-      />
-    </div>
-  </el-dialog>
-</template>
-
-<script>
-import Cl from "./BoosterStation/cl.vue";
-import KB from "./BoosterStation/kb.vue";
-import DX from "./BoosterStation/dx.vue";
-import SY from "./BoosterStation/sy.vue";
-export default {
-  components: {
-    Cl,
-    KB,
-    DX,
-    SY,
-  },
-  props: {
-    svgWeb: {
-      type: String,
-      default: "",
-    },
-  },
-  data() {
-    return {
-      BasicInfo: {},
-      line: "",
-      currentStation: "",
-      alarmTime: "",
-      alarmContent: "",
-      alarms: [],
-      count: false,
-      stationList: [],
-      types: null,
-    };
-  },
-  created() {},
-
-  methods: {
-    closed() {
-      // todo 切换页面的时候应该让上一个页面停止刷新数据（调用end方法）
-      this.$refs.svgRef.closed();
-      // this.$refs.BasicInfo.end();
-      // this.$refs.BasicInfo.labelChange();
-      this.$emit("close");
-      //clearInterval(this.refreshTimer);
-    },
-    opened() {
-      this.currentStation = this.svgWeb?this.svgWeb:this.$store.state.stationList[0].id;
-      this.stationList = this.$store.state.stationList;
-	  this.$nextTick(() => {
-           this.$refs.svgRef.opened();
-        });
-    },
-    dbClicks(value) {
-      this.$refs.BasicInfo.dbClicks(value, this.windturbine.windturbineId);
-    },
-    handleTypeChange(val) {
-      this.currentStation = val.id;
-	  this.$nextTick(() => {
-           this.$refs.svgRef.opened();
-        });
-    },
-  },
-};
-</script>
-<style scoped>
-.my-info-dialog {
-  box-shadow: 0px 0px 10px #05bb4c;
-}
-
-.body {
-  background-color: black;
-  margin-top: -30px;
-  margin-left: -10px;
-  margin-right: -10px;
-  margin-bottom: -30px;
-  border-bottom: 20px solid rgb(36, 36, 36);
-}
-
-.chunkdiv {
-  display: flex;
-  /* justify-content: center; */
-  background-color: #363636;
-  margin: 1px;
-  padding: 4px 2px;
-  font-size: 12px;
-  color: #ffffff;
-  overflow: hidden;
-  white-space: nowrap;
-  padding-left: 32px;
-}
-
-.title {
-  font-size: 12px;
-  color: #b3b3b3;
-}
-
-.titleList {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-top: -10px;
-  color: #ffffff;
-}
-
-table {
-  margin-left: 2px;
-  margin-right: 2px;
-}
-
-td {
-  width: 20%;
-}
-
-el-tabs {
-  background-color: black;
-}
-
-.svg {
-  height: 67vh;
-}
-
-.controlTypes {
-  width: 110px;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid rgba(51, 51, 51, 1);
-}
-.controlTypesLeft {
-  width: 110px;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid rgba(51, 51, 51, 1);
-  border-top-left-radius: 15px;
-  border-bottom-left-radius: 15px;
-}
-.controlTypesRight {
-  width: 110px;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid rgba(51, 51, 51, 1);
-  border-top-right-radius: 15px;
-  border-bottom-right-radius: 15px;
-}
-.onControlTypes {
-  width: 110px;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid rgba(51, 51, 51, 1);
-  background-color: rgba(37, 116, 219, 1);
-}
-.onControlTypesLeft {
-  width: 110px;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  /* border: 1px solid rgba(37, 116, 219, 1); */
-  border-top-left-radius: 15px;
-  border-bottom-left-radius: 15px;
-  background-color: rgba(37, 116, 219, 1);
-}
-.onControlTypesRight {
-  width: 110px;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  /* border: 1px solid rgba(37, 116, 219, 1); */
-  border-top-right-radius: 15px;
-  border-bottom-right-radius: 15px;
-  background-color: rgba(37, 116, 219, 1);
-}
+<template>
+  <el-dialog
+    width="85%"
+    @opened="opened()"
+    @closed="closed()"
+    :show-close="false"
+    class="my-info-dialog"
+  >
+    <template #title>
+      <!-- <div style="margin-top:-10px;color: #FFFFFF;">{{stationName}}</div> -->
+      <div class="titleList">
+        <div v-for="(item, index) in stationList" :key="index">
+          <div
+            v-if="item?.id !== currentStation"
+            :class="
+              index === 0
+                ? 'controlTypesLeft'
+                : index === stationList.length - 1
+                ? 'controlTypesRight'
+                : 'controlTypes'
+            "
+            @click="handleTypeChange(item)"
+          >
+            {{ item.stationName ||  item.name }}
+          </div>
+          <div
+            v-else
+            :class="
+              index === 0
+                ? 'onControlTypesLeft'
+                : index === stationList.length - 1
+                ? 'onControlTypesRight'
+                : 'onControlTypes'
+            "
+            @click="handleTypeChange(item)"
+          >
+            {{ item.stationName ||  item.name  }}
+          </div>
+        </div>
+      </div>
+    </template>
+    <div>
+      <Cl
+        ref="svgRef"
+        v-if="currentStation == 'CL_FDC' || currentStation == 'CL_SYZ'"
+      />
+      <KB
+        ref="svgRef"
+        v-if="currentStation == 'KB_FDC' || currentStation == 'KB_SYZ'"
+      />
+      <DX
+        ref="svgRef"
+        v-if="currentStation == 'DX_FDC' || currentStation == 'DX_SYZ'"
+      />
+      <SY
+        ref="svgRef"
+        v-if="currentStation == 'SY_FDC' || currentStation == 'SY_SYZ'"
+      />
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import Cl from "./BoosterStation/cl.vue";
+import KB from "./BoosterStation/kb.vue";
+import DX from "./BoosterStation/dx.vue";
+import SY from "./BoosterStation/sy.vue";
+export default {
+  components: {
+    Cl,
+    KB,
+    DX,
+    SY,
+  },
+  props: {
+    svgWeb: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      BasicInfo: {},
+      line: "",
+      currentStation: "",
+      alarmTime: "",
+      alarmContent: "",
+      alarms: [],
+      count: false,
+      stationList: [],
+      types: null,
+    };
+  },
+  created() {},
+
+  methods: {
+    closed() {
+      // todo 切换页面的时候应该让上一个页面停止刷新数据（调用end方法）
+      this.$refs.svgRef.closed();
+      // this.$refs.BasicInfo.end();
+      // this.$refs.BasicInfo.labelChange();
+      this.$emit("close");
+      //clearInterval(this.refreshTimer);
+    },
+    opened() {
+      this.currentStation = this.svgWeb?this.svgWeb:this.$store.state.stationList[0].id;
+      this.stationList = this.$store.state.stationList;
+	  this.$nextTick(() => {
+           this.$refs.svgRef.opened();
+        });
+    },
+    dbClicks(value) {
+      this.$refs.BasicInfo.dbClicks(value, this.windturbine.windturbineId);
+    },
+    handleTypeChange(val) {
+      this.currentStation = val.id;
+	  this.$nextTick(() => {
+           this.$refs.svgRef.opened();
+        });
+    },
+  },
+};
+</script>
+<style scoped>
+.my-info-dialog {
+  box-shadow: 0px 0px 10px #05bb4c;
+}
+
+.body {
+  background-color: black;
+  margin-top: -30px;
+  margin-left: -10px;
+  margin-right: -10px;
+  margin-bottom: -30px;
+  border-bottom: 20px solid rgb(36, 36, 36);
+}
+
+.chunkdiv {
+  display: flex;
+  /* justify-content: center; */
+  background-color: #363636;
+  margin: 1px;
+  padding: 4px 2px;
+  font-size: 12px;
+  color: #ffffff;
+  overflow: hidden;
+  white-space: nowrap;
+  padding-left: 32px;
+}
+
+.title {
+  font-size: 12px;
+  color: #b3b3b3;
+}
+
+.titleList {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-top: -10px;
+  color: #ffffff;
+}
+
+table {
+  margin-left: 2px;
+  margin-right: 2px;
+}
+
+td {
+  width: 20%;
+}
+
+el-tabs {
+  background-color: black;
+}
+
+.svg {
+  height: 67vh;
+}
+
+.controlTypes {
+  width: 110px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(51, 51, 51, 1);
+}
+.controlTypesLeft {
+  width: 110px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(51, 51, 51, 1);
+  border-top-left-radius: 15px;
+  border-bottom-left-radius: 15px;
+}
+.controlTypesRight {
+  width: 110px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(51, 51, 51, 1);
+  border-top-right-radius: 15px;
+  border-bottom-right-radius: 15px;
+}
+.onControlTypes {
+  width: 110px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(51, 51, 51, 1);
+  background-color: rgba(37, 116, 219, 1);
+}
+.onControlTypesLeft {
+  width: 110px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* border: 1px solid rgba(37, 116, 219, 1); */
+  border-top-left-radius: 15px;
+  border-bottom-left-radius: 15px;
+  background-color: rgba(37, 116, 219, 1);
+}
+.onControlTypesRight {
+  width: 110px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* border: 1px solid rgba(37, 116, 219, 1); */
+  border-top-right-radius: 15px;
+  border-bottom-right-radius: 15px;
+  background-color: rgba(37, 116, 219, 1);
+}
 </style>

src/components/svgStation.vue

@@ -1,257 +1,257 @@
-<template>
-  <el-dialog
-    width="70%"
-    @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="body">
-      <div class="titleList">
-        <div v-for="(item, index) in stationList" :key="index">
-          <div
-            v-if="item?.id !== currentStation"
-            :class="
-              index === 0
-                ? 'controlTypesLeft'
-                : index === stationList.length - 1
-                ? 'controlTypesRight'
-                : 'controlTypes'
-            "
-            @click="handleTypeChange(item)"
-          >
-            {{ item.address }}
-          </div>
-          <div
-            v-else
-            :class="
-              index === 0
-                ? 'onControlTypesLeft'
-                : index === stationList.length - 1
-                ? 'onControlTypesRight'
-                : 'onControlTypes'
-            "
-            @click="handleTypeChange(item)"
-          >
-            {{ item.address }}
-          </div>
-        </div>
-      </div>
-      <div style="height: 90vh">
-        <Cl
-        ref="svgRef"
-        v-if="currentStation == 'CL_FDC' || currentStation == 'CL_SYZ'"
-      />
-      <KB
-        ref="svgRef"
-        v-if="currentStation == 'KB_FDC' || currentStation == 'KB_SYZ'"
-      />
-      <DX
-        ref="svgRef"
-        v-if="currentStation == 'DX_FDC' || currentStation == 'DX_SYZ'"
-      />
-      <SY
-        ref="svgRef"
-        v-if="currentStation == 'SY_FDC' || currentStation == 'SY_SYZ'"
-      />
-      </div>
-    </div>
-  </el-dialog>
-</template>
-<script>
-import Cl from "./BoosterStation/cl.vue";
-import KB from "./BoosterStation/kb.vue";
-import DX from "./BoosterStation/dx.vue";
-import SY from "./BoosterStation/sy.vue";
-export default {
-  components: {
-    Cl,
-    KB,
-    DX,
-    SY,
-  },
-  props: {
-    currentStation: {
-      type: String,
-      default: "",
-    },
-  },
-  data() {
-    return {
-      BasicInfo: {},
-      line: "",
-      currentStation: "",
-      alarmTime: "",
-      alarmContent: "",
-      alarms: [],
-      count: false,
-      stationList: [],
-      types: null,
-    };
-  },
-  created() {},
-
-  methods: {
-    closed() {
-      // todo 切换页面的时候应该让上一个页面停止刷新数据（调用end方法）
-      this.$refs.svgRef.closed();
-      // this.$refs.BasicInfo.end();
-      // this.$refs.BasicInfo.labelChange();
-      this.$emit("close");
-      //clearInterval(this.refreshTimer);
-    },
-    opened() {
-      this.currentStation = this.currentStation
-        ? this.currentStation
-        : this.$store.state.stationList[0].id;
-      this.stationList = this.$store.state.stationList;
-      this.$nextTick(() => {
-        this.$refs.svgRef.opened();
-      });
-    },
-    dbClicks(value) {
-      this.$refs.BasicInfo.dbClicks(value, this.windturbine.windturbineId);
-    },
-    handleTypeChange(val) {
-      this.currentStation = val.id;
-      this.$nextTick(() => {
-        this.$refs.svgRef.opened();
-      });
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.body {
-  background-color: #000000;
-  height: 89vh;
-  width: 102%;
-  margin-left: -1%;
-  margin-top: -40px;
-}
-.title {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-left: 3vw;
-  padding-top: 8px;
-  position: absolute;
-  width: 100%;
-  background-color: #000000;
-  padding-bottom: 10px;
-}
-.my-info-dialog {
-  box-shadow: 0px 0px 10px #05bb4c;
-}
-
-.chunkdiv {
-  display: flex;
-  /* justify-content: center; */
-  background-color: #363636;
-  margin: 1px;
-  padding: 4px 2px;
-  font-size: 12px;
-  color: #ffffff;
-  overflow: hidden;
-  white-space: nowrap;
-  padding-left: 32px;
-}
-
-.title {
-  font-size: 12px;
-  color: #b3b3b3;
-}
-
-.titleList {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-top: -10px;
-  color: #ffffff;
-  margin-left: 50px;
-}
-
-table {
-  margin-left: 2px;
-  margin-right: 2px;
-}
-
-td {
-  width: 20%;
-}
-
-el-tabs {
-  background-color: black;
-}
-
-.svg {
-  height: 67vh;
-}
-
-.controlTypes {
-  width: 110px;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid rgba(51, 51, 51, 1);
-}
-.controlTypesLeft {
-  width: 110px;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid rgba(51, 51, 51, 1);
-  border-top-left-radius: 15px;
-  border-bottom-left-radius: 15px;
-}
-.controlTypesRight {
-  width: 110px;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid rgba(51, 51, 51, 1);
-  border-top-right-radius: 15px;
-  border-bottom-right-radius: 15px;
-}
-.onControlTypes {
-  width: 110px;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid rgba(51, 51, 51, 1);
-  background-color: rgba(37, 116, 219, 1);
-}
-.onControlTypesLeft {
-  width: 110px;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  /* border: 1px solid rgba(37, 116, 219, 1); */
-  border-top-left-radius: 15px;
-  border-bottom-left-radius: 15px;
-  background-color: rgba(37, 116, 219, 1);
-}
-.onControlTypesRight {
-  width: 110px;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  /* border: 1px solid rgba(37, 116, 219, 1); */
-  border-top-right-radius: 15px;
-  border-bottom-right-radius: 15px;
-  background-color: rgba(37, 116, 219, 1);
-}
+<template>
+  <el-dialog
+    width="70%"
+    @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="body">
+      <div class="titleList">
+        <div v-for="(item, index) in stationList" :key="index">
+          <div
+            v-if="item?.id !== currentStation"
+            :class="
+              index === 0
+                ? 'controlTypesLeft'
+                : index === stationList.length - 1
+                ? 'controlTypesRight'
+                : 'controlTypes'
+            "
+            @click="handleTypeChange(item)"
+          >
+            {{ item.name }}
+          </div>
+          <div
+            v-else
+            :class="
+              index === 0
+                ? 'onControlTypesLeft'
+                : index === stationList.length - 1
+                ? 'onControlTypesRight'
+                : 'onControlTypes'
+            "
+            @click="handleTypeChange(item)"
+          >
+            {{ item.name }}
+          </div>
+        </div>
+      </div>
+      <div style="height: 90vh">
+        <Cl
+        ref="svgRef"
+        v-if="currentStation == 'CL_FDC' || currentStation == 'CL_SYZ'"
+      />
+      <KB
+        ref="svgRef"
+        v-if="currentStation == 'KB_FDC' || currentStation == 'KB_SYZ'"
+      />
+      <DX
+        ref="svgRef"
+        v-if="currentStation == 'DX_FDC' || currentStation == 'DX_SYZ'"
+      />
+      <SY
+        ref="svgRef"
+        v-if="currentStation == 'SY_FDC' || currentStation == 'SY_SYZ'"
+      />
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import Cl from "./BoosterStation/cl.vue";
+import KB from "./BoosterStation/kb.vue";
+import DX from "./BoosterStation/dx.vue";
+import SY from "./BoosterStation/sy.vue";
+export default {
+  components: {
+    Cl,
+    KB,
+    DX,
+    SY,
+  },
+  props: {
+    currentStation: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      BasicInfo: {},
+      line: "",
+      currentStation: "",
+      alarmTime: "",
+      alarmContent: "",
+      alarms: [],
+      count: false,
+      stationList: [],
+      types: null,
+    };
+  },
+  created() {},
+
+  methods: {
+    closed() {
+      // todo 切换页面的时候应该让上一个页面停止刷新数据（调用end方法）
+      this.$refs.svgRef.closed();
+      // this.$refs.BasicInfo.end();
+      // this.$refs.BasicInfo.labelChange();
+      this.$emit("close");
+      //clearInterval(this.refreshTimer);
+    },
+    opened() {
+      this.currentStation = this.currentStation
+        ? this.currentStation
+        : this.$store.state.stationList[0].id;
+      this.stationList = this.$store.state.stationList;
+      this.$nextTick(() => {
+        this.$refs.svgRef.opened();
+      });
+    },
+    dbClicks(value) {
+      this.$refs.BasicInfo.dbClicks(value, this.windturbine.windturbineId);
+    },
+    handleTypeChange(val) {
+      this.currentStation = val.id;
+      this.$nextTick(() => {
+        this.$refs.svgRef.opened();
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.body {
+  background-color: #000000;
+  height: 89vh;
+  width: 102%;
+  margin-left: -1%;
+  margin-top: -40px;
+}
+.title {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-left: 3vw;
+  padding-top: 8px;
+  position: absolute;
+  width: 100%;
+  background-color: #000000;
+  padding-bottom: 10px;
+}
+.my-info-dialog {
+  box-shadow: 0px 0px 10px #05bb4c;
+}
+
+.chunkdiv {
+  display: flex;
+  /* justify-content: center; */
+  background-color: #363636;
+  margin: 1px;
+  padding: 4px 2px;
+  font-size: 12px;
+  color: #ffffff;
+  overflow: hidden;
+  white-space: nowrap;
+  padding-left: 32px;
+}
+
+.title {
+  font-size: 12px;
+  color: #b3b3b3;
+}
+
+.titleList {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-top: -10px;
+  color: #ffffff;
+  margin-left: 50px;
+}
+
+table {
+  margin-left: 2px;
+  margin-right: 2px;
+}
+
+td {
+  width: 20%;
+}
+
+el-tabs {
+  background-color: black;
+}
+
+.svg {
+  height: 67vh;
+}
+
+.controlTypes {
+  width: 110px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(51, 51, 51, 1);
+}
+.controlTypesLeft {
+  width: 110px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(51, 51, 51, 1);
+  border-top-left-radius: 15px;
+  border-bottom-left-radius: 15px;
+}
+.controlTypesRight {
+  width: 110px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(51, 51, 51, 1);
+  border-top-right-radius: 15px;
+  border-bottom-right-radius: 15px;
+}
+.onControlTypes {
+  width: 110px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(51, 51, 51, 1);
+  background-color: rgba(37, 116, 219, 1);
+}
+.onControlTypesLeft {
+  width: 110px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* border: 1px solid rgba(37, 116, 219, 1); */
+  border-top-left-radius: 15px;
+  border-bottom-left-radius: 15px;
+  background-color: rgba(37, 116, 219, 1);
+}
+.onControlTypesRight {
+  width: 110px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* border: 1px solid rgba(37, 116, 219, 1); */
+  border-top-right-radius: 15px;
+  border-bottom-right-radius: 15px;
+  background-color: rgba(37, 116, 219, 1);
+}
 </style>

src/components/table/check-table.vue

@@ -1,221 +1,221 @@
-<template>
-  <table class="com-table">
-    <thead>
-      <tr>
-        <th @click="onSort(0)" style="width:50px">排序</th>
-        <th @click="onSort(1)" style="width:50px"></th>
-        <th v-for="(col, index) of data.column" :key="index" :style="{ width: col.width }" :class="{ light: col.is_light }" @click="onSort(col)">{{ col.name }}</th>
-      </tr>
-    </thead>
-    <el-scrollbar>
-      <tbody :style="{ height: height }">
-        <tr v-for="(row, index) of tableData" :key="index">
-          <td v-if="allowIndex == true" style="width:50px" :class="{ light: hoverRow == row || hoverCol == 0, num: true }" @mouseenter="hover(row, col)" @mouseleave="leave()">
-            {{ startRow + index + 1 }}
-          </td>
-          <td :class="{ light: hoverRow == row || hoverCol == 1 }" style="width:50px" @mouseenter="hover(row, col)" @mouseleave="leave()">
-            <input class="check" type="CheckBox" :key="index" :id="'check-' + index" :checked="row.checked ? row.checked : false" @change="onCheck(row)" />
-          </td>
-          <td
-            v-for="(col, i) of data.column"
-            :key="i"
-            :style="{ width: col.width }"
-            :class="{ light: hoverRow == row || hoverCol == col + 2, num: col.is_num, 'always-light': col.is_light || row.is_light }"
-            @mouseenter="hover(row, col)"
-            @mouseleave="leave()"
-          >
-            <component :is="col.type ? col.type : 'div'" v-bind="col.props" v-html="template(col, row[col.field])" @click="onClick(col, row)"> </component>
-          </td>
-        </tr>
-      </tbody>
-    </el-scrollbar>
-    <el-pagination class="mg-t-8" v-if="pageable" @current-change="handleCurrentChange" :current-page="currentPage4" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="data.total" v-bind="elPaggingProps"> </el-pagination>
-  </table>
-</template>
-
-<script>
-export default {
-  // 名称
-  name: "ComTable",
-  // 使用组件
-  components: {},
-  // 传入参数
-  props: {
-    /**
-             * {
-                    column: [{
-                        name: "风机名称",
-                        field: "name",
-                        type:'div',
-                        is_num: false, // 是否为数字
-                        is_light: false, // 是否高亮
-                        template:function(){ }
-                        click:function(){} //点击事件
-                        sortable:fasle // 排序
-                        // 新增用于在表格中使用动态三方组件
-                        type:'el-tag', // * 新增 用于传入三方组件名称 实现三方组件引入  component :is 方式实现
-                        props:{}, // * 新增 用户传入三方组件的 props 与type同时使用
-                    },{
-                        name: "冷却风温度",
-                        field: "lqf",
-                        is_num: true,
-                        is_light: false
-                    }],
-                    data: [{
-                        name: "1E01",
-                        lqf: 15.78,
-                        is_light: false
-                    }]
-                }
-             */
-    data: Object,
-    // hover 样式
-    showHover: {
-      type: Boolean,
-      default: true,
-    },
-    canScroll: {
-      type: Boolean,
-      default: true,
-    },
-    pageSize: {
-      type: Number,
-      default: 0,
-    },
-    height: {
-      type: String,
-      default: "",
-    },
-    allowIndex: {
-      type: Boolean,
-      default: true,
-    },
-    elPaggingProps: {
-      type: Object,
-      default: () => {
-        return {
-          layout: "total, sizes, prev, pager, next, jumper",
-          // "page-sizes": [100, 200, 300, 400],
-        };
-      },
-    },
-  },
-  // 自定义事件
-  emits: {
-    // 分页事件
-    onPagging: null,
-    check: null,
-  },
-  // 数据
-  data() {
-    return {
-      hoverRow: -1,
-      hoverCol: -1,
-      sortCol: "",
-      sortType: "",
-      currentPage: 1,
-    };
-  },
-  computed: {
-    tableData() {
-      let that = this;
-      if (this.sortCol == "") {
-        return this.data.data;
-      } else {
-        let data = this.data.data;
-
-        data.sort((a, b) => {
-          let rev = 1;
-          if (that.sortType == "ASC") rev = 1;
-          else if (that.sortType == "DESC") rev = -1;
-
-          if (a[that.sortCol] > b[that.sortCol]) return rev * 1;
-          if (a[that.sortCol] < b[that.sortCol]) return rev * -1;
-          return 0;
-        });
-        return data;
-      }
-    },
-    pageable() {
-      return this.pageSize != 0;
-    },
-    pages() {
-      if (this.pageable) return parseInt(this.data.total / this.pageSize) + 1;
-      else return 0;
-    },
-    startRow() {
-      if (this.pageable) return (this.currentPage - 1) * this.pageSize;
-      else return 0;
-    },
-    endRow() {
-      if (this.pageable) return this.currentPage * this.pageSize;
-      else return this.data.data.length;
-    },
-  },
-  // 函数
-  methods: {
-    onClick(col, data) {
-      if (col.click) col.click(event, data);
-    },
-    onCheck(data) {
-      data.checked = event.target.checked;
-      this.$emit("check", { data: data, checked: data.checked });
-    },
-    onSort(col) {
-      if (col.sortable == true) {
-        this.sortCol = col.field;
-        switch (this.sortType) {
-          case "":
-            this.sortType = "DESC";
-            break;
-          case "DESC":
-            this.sortType = "ASC";
-            break;
-          case "ASC":
-            this.sortType = "";
-            break;
-        }
-      }
-    },
-    template(col, data) {
-      if (!col.template) return data;
-      else return col.template(data);
-    },
-    hover(row, col) {
-      if (this.showHover) {
-        this.hoverRow = row;
-        this.hoverCol = col;
-      }
-    },
-    leave() {
-      this.hoverRow = -1;
-      this.hoverCol = -1;
-    },
-    handleCurrentChange(val) {
-      this.currentPage = val;
-      this.$emit("onPagging", { pageIndex: this.currentPage, pageSize: this.pageSize, start: this.startRow, end: this.endRow });
-    },
-  },
-  // 生命周期钩子
-  beforeCreate() {
-    // 创建前
-  },
-  created() {
-    // 创建后
-  },
-  beforeMount() {
-    // 渲染前
-  },
-  mounted() {
-    // 渲染后
-  },
-  beforeUpdate() {
-    // 数据更新前
-  },
-  updated() {
-    // 数据更新后
-  },
-};
-</script>
-
-<style lang="less"></style>
+<template>
+  <table class="com-table">
+    <thead>
+      <tr>
+        <th @click="onSort(0)" style="width:50px">排序</th>
+        <th @click="onSort(1)" style="width:50px"></th>
+        <th v-for="(col, index) of data.column" :key="index" :style="{ width: col.width }" :class="{ light: col.is_light }" @click="onSort(col)">{{ col.name }}</th>
+      </tr>
+    </thead>
+    <el-scrollbar>
+      <tbody :style="{ height: height }">
+        <tr v-for="(row, index) of tableData" :key="index">
+          <td v-if="allowIndex == true" style="width:50px" :class="{ light: hoverRow == row || hoverCol == 0, num: true }" @mouseenter="hover(row, col)" @mouseleave="leave()">
+            {{ startRow + index + 1 }}
+          </td>
+          <td :class="{ light: hoverRow == row || hoverCol == 1 }" style="width:50px" @mouseenter="hover(row, col)" @mouseleave="leave()">
+            <input class="check" type="CheckBox" :key="index" :id="'check-' + index" :checked="row.checked ? row.checked : false" @change="onCheck(row)" />
+          </td>
+          <td
+            v-for="(col, i) of data.column"
+            :key="i"
+            :style="{ width: col.width }"
+            :class="{ light: hoverRow == row || hoverCol == col + 2, num: col.is_num, 'always-light': col.is_light || row.is_light }"
+            @mouseenter="hover(row, col)"
+            @mouseleave="leave()"
+          >
+            <component :is="col.type ? col.type : 'div'" v-bind="col.props" v-html="template(col, row[col.field])" @click="onClick(col, row)"> </component>
+          </td>
+        </tr>
+      </tbody>
+    </el-scrollbar>
+    <el-pagination class="mg-t-8" v-if="pageable" @current-change="handleCurrentChange" :current-page="currentPage4" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="data.total" v-bind="elPaggingProps"> </el-pagination>
+  </table>
+</template>
+
+<script>
+export default {
+  // 名称
+  name: "ComTable",
+  // 使用组件
+  components: {},
+  // 传入参数
+  props: {
+    /**
+             * {
+                    column: [{
+                        name: "风机名称",
+                        field: "name",
+                        type:'div',
+                        is_num: false, // 是否为数字
+                        is_light: false, // 是否高亮
+                        template:function(){ }
+                        click:function(){} //点击事件
+                        sortable:fasle // 排序
+                        // 新增用于在表格中使用动态三方组件
+                        type:'el-tag', // * 新增 用于传入三方组件名称 实现三方组件引入  component :is 方式实现
+                        props:{}, // * 新增 用户传入三方组件的 props 与type同时使用
+                    },{
+                        name: "冷却风温度",
+                        field: "lqf",
+                        is_num: true,
+                        is_light: false
+                    }],
+                    data: [{
+                        name: "1E01",
+                        lqf: 15.78,
+                        is_light: false
+                    }]
+                }
+             */
+    data: Object,
+    // hover 样式
+    showHover: {
+      type: Boolean,
+      default: true,
+    },
+    canScroll: {
+      type: Boolean,
+      default: true,
+    },
+    pageSize: {
+      type: Number,
+      default: 0,
+    },
+    height: {
+      type: String,
+      default: "",
+    },
+    allowIndex: {
+      type: Boolean,
+      default: true,
+    },
+    elPaggingProps: {
+      type: Object,
+      default: () => {
+        return {
+          layout: "total, sizes, prev, pager, next, jumper",
+          // "page-sizes": [100, 200, 300, 400],
+        };
+      },
+    },
+  },
+  // 自定义事件
+  emits: {
+    // 分页事件
+    onPagging: null,
+    check: null,
+  },
+  // 数据
+  data() {
+    return {
+      hoverRow: -1,
+      hoverCol: -1,
+      sortCol: "",
+      sortType: "",
+      currentPage: 1,
+    };
+  },
+  computed: {
+    tableData() {
+      let that = this;
+      if (this.sortCol == "") {
+        return this.data.data;
+      } else {
+        let data = this.data.data;
+
+        data.sort((a, b) => {
+          let rev = 1;
+          if (that.sortType == "ASC") rev = 1;
+          else if (that.sortType == "DESC") rev = -1;
+
+          if (a[that.sortCol] > b[that.sortCol]) return rev * 1;
+          if (a[that.sortCol] < b[that.sortCol]) return rev * -1;
+          return 0;
+        });
+        return data;
+      }
+    },
+    pageable() {
+      return this.pageSize != 0;
+    },
+    pages() {
+      if (this.pageable) return parseInt(this.data.total / this.pageSize) + 1;
+      else return 0;
+    },
+    startRow() {
+      if (this.pageable) return (this.currentPage - 1) * this.pageSize;
+      else return 0;
+    },
+    endRow() {
+      if (this.pageable) return this.currentPage * this.pageSize;
+      else return this.data.data.length;
+    },
+  },
+  // 函数
+  methods: {
+    onClick(col, data) {
+      if (col.click) col.click(event, data);
+    },
+    onCheck(data) {
+      data.checked = event.target.checked;
+      this.$emit("check", { data: data, checked: data.checked });
+    },
+    onSort(col) {
+      if (col.sortable == true) {
+        this.sortCol = col.field;
+        switch (this.sortType) {
+          case "":
+            this.sortType = "DESC";
+            break;
+          case "DESC":
+            this.sortType = "ASC";
+            break;
+          case "ASC":
+            this.sortType = "";
+            break;
+        }
+      }
+    },
+    template(col, data) {
+      if (!col.template) return data;
+      else return col.template(data);
+    },
+    hover(row, col) {
+      if (this.showHover) {
+        this.hoverRow = row;
+        this.hoverCol = col;
+      }
+    },
+    leave() {
+      this.hoverRow = -1;
+      this.hoverCol = -1;
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.$emit("onPagging", { pageIndex: this.currentPage, pageSize: this.pageSize, start: this.startRow, end: this.endRow });
+    },
+  },
+  // 生命周期钩子
+  beforeCreate() {
+    // 创建前
+  },
+  created() {
+    // 创建后
+  },
+  beforeMount() {
+    // 渲染前
+  },
+  mounted() {
+    // 渲染后
+  },
+  beforeUpdate() {
+    // 数据更新前
+  },
+  updated() {
+    // 数据更新后
+  },
+};
+</script>
+
+<style lang="less"></style>

src/components/table/group-table.vue

@@ -1,304 +1,304 @@
-<template>
-  <el-table class="custom-table" :show-summary="summary" :class="customClass" stripe :data="data.data" :height="height" style="width: 100%" @cell-click="onClick" @header-click="onHeaderClick" ref="groupTable">
-    <template v-for="(col, cIndex) in data.column" :key="col">
-      <el-table-column v-if="col.child && col.child.length > 0" :label="col.name" :key="col">
-  
-        <el-table-column
-          v-for="(sub, sindex) in col.child"
-          :key="sub"
-          :index="cIndex"
-          :class-name="getClassName(cIndex, sindex)"
-          :label="sub.name"
-          :prop="sub.field"
-          :width="sub.width"
-          :sortable="sub.sortable"
-          :show-overflow-tooltip="!sub.slot"
-          :fixed="sub.fixed"
-          :align="sub.align ? sub.align : 'center'"
-          :resizable="sub.resizable"
-          :header-align="'center'"
-        >
-          <template v-if="sub.slot == true" #default="item">
-            <slot :name="sub.field" :column="sub" :row="item.row" :all="item" :data="item.row[item.field]"></slot>
-          </template>
-        </el-table-column>
-        
-
-      </el-table-column>
-
-      <el-table-column
-        v-if="!col.child"
-        :label="col.name"
-        :prop="col.field"
-        :width="col.width"
-        :sortable="col.sortable"
-        :show-overflow-tooltip="!col.slot"
-        :fixed="col.fixed"
-        :align="col.align ? col.align : 'center'"
-        :resizable="col.resizable"
-        :header-align="'center'"
-      >
-        <template v-if="col.slot == true" #default="item">
-          <slot :name="col.field" :column="col" :row="item.row" :all="item" :data="item.row[col.field]"></slot>
-        </template>
-      </el-table-column>
-      
-    </template>
-  </el-table>
-  <el-pagination class="mg-t-8"
-   v-if="pageable" @current-change="handleCurrentChange"
-    :current-page="currentPage" :page-size="pageSize" :total="data.total" v-bind="elPaggingProps">
-     </el-pagination>
-</template>
-
-<script>
-export default {
-  // 名称
-  name: "ComTable",
-  // 使用组件
-  components: {},
-  // 传入参数
-  props: {
-    /**
-             * {
-                    column: [{
-                        name: "风机名称",
-                        child:[{
-                            field: "name",
-                            width:'', // 宽度
-                            click:function(){} // 点击事件
-                            sortable:fasle,
-                            slot:false,
-                            fixed:false,
-                            align:'center',
-                            resizable :false,
-                        }]
-                    }],
-                    total:200
-                }
-             */
-    data: Object,
-    height: {
-      type: String,
-      default: "",
-    },
-    pageSize: {
-      type: Number,
-      default: 0,
-    },
-    customClass: {
-      type: String,
-      default: "",
-    },
-    elPaggingProps: {
-      type: Object,
-      default: () => {
-        return {
-          layout: "total, sizes, prev, pager, next, jumper",
-          // "page-sizes": [100, 200, 300, 400],
-        };
-      },
-    },
-    isColumnLight: {
-      type: Boolean,
-      default: true,
-    },
-    summary: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: {
-    onPagging: null,
-    headerClick: null,
-  },
-  // 数据
-  data() {
-    return {
-      currentPage: 1,
-      headerIndex: -1,
-      subIndex: -1,
-    };
-  },
-  computed: {
-    tableData() {
-      let that = this;
-      if (this.sortCol == "") {
-        return this.data.data;
-      } else {
-        let data = this.data.data;
-
-        data.sort((a, b) => {
-          let rev = 1;
-          if (that.sortType == "ASC") rev = 1;
-          else if (that.sortType == "DESC") rev = -1;
-
-          if (a[that.sortCol] > b[that.sortCol]) return rev * 1;
-          if (a[that.sortCol] < b[that.sortCol]) return rev * -1;
-          return 0;
-        });
-        return data;
-      }
-    },
-    pageable() {
-      return this.pageSize != 0;
-    },
-    pages() {
-      if (this.pageable) return parseInt(this.data.total / this.pageSize) + 1;
-      else return 0;
-    },
-    startRow() {
-      if (this.pageable) return (this.currentPage - 1) * this.pageSize;
-      else return 0;
-    },
-    endRow() {
-      if (this.pageable) return this.currentPage * this.pageSize;
-      else return this.data.data.length;
-    },
-  },
-  // 函数
-  methods: {
-    onClick(row, column, cell, event) {
-      if (column.rawColumnKey.click) column.rawColumnKey.click(event, row);
-    },
-    onHeaderClick(column, event) {
-      if (column.level == 2) {
-        this.headerIndex = column.index;
-        this.subIndex = column.no;
-      }
-      this.$emit("headerClick", { level: column.level,  event: event, col: column.rawColumnKey, data: this.data.data });
-    },
-    handleCurrentChange(val) {
-      this.currentPage = val;
-      this.$emit("onPagging", {
-        pageIndex: this.currentPage,
-        pageSize: this.pageSize,
-        start: this.startRow,
-        end: this.endRow,
-      });
-    },
-    getClassName(cindex, sindex) {
-      if (this.isColumnLight == true && cindex == this.headerIndex && sindex == this.subIndex) return "light";
-      return "";
-    },
-  },
-  // 生命周期钩子
-  beforeCreate() {
-    // 创建前
-  },
-  created() {
-    // 创建后
-  },
-  beforeMount() {
-    // 渲染前
-  },
-  mounted() {
-    // 渲染后
-  },
-  beforeUpdate() {},
-  updated() {},
-};
-</script>
-
-<style lang="less">
-@titleGray: #9ca5a8;
-@rowGray: #606769;
-@darkBack: #536268;
-.com-table {
-  width: 100%;
-  border-collapse: collapse;
-
-  thead {
-    tr {
-      display: table;
-      table-layout: fixed;
-      width: 100%;
-
-      th {
-        background-color: fade(@darkBack, 20%);
-        height: 30px;
-        line-height: 30px;
-        color: @titleGray;
-        font-weight: 400;
-        font-size: @fontsize-s;
-        position: sticky;
-        top: 0;
-        cursor: pointer;
-
-        &.light,
-        &.always-light {
-          color: @green;
-        }
-      }
-    }
-  }
-
-  tbody {
-    display: block;
-
-    tr {
-      display: table;
-      table-layout: fixed;
-      width: 100%;
-
-      &:nth-child(2n) {
-        background-color: fade(@rowGray, 20%);
-      }
-
-      td {
-        padding: 0.556vh 0;
-        color: @rowGray;
-        text-align: center;
-        font-size: @fontsize-s;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-
-        &.light,
-        &.always-light {
-          color: @green !important;
-        }
-
-        &.num {
-          font-family: "Bicubik";
-          font-weight: 400;
-        }
-      }
-    }
-  }
-
-  .el-pagination {
-    color: @gray;
-    .el-pagination__total {
-      color: @gray;
-    }
-
-    button {
-      &.btn-next,
-      &.btn-prev {
-        background: center center no-repeat fade(@gray, 20);
-        color: @gray-l;
-      }
-      &:disabled {
-        color: @gray-l;
-        background-color: fade(@gray, 20);
-        cursor: not-allowed;
-      }
-    }
-
-    .el-pager li {
-      color: @gray-l;
-      background: fade(@gray, 20);
-      &.active {
-        color: @green;
-      }
-    }
-
-    .el-input__inner {
-      color: @gray-l;
-      background: fade(@gray, 20);
-      border: 1px solid fade(@gray, 20);
-    }
-  }
-}
-</style>
+<template>
+  <el-table class="custom-table" :show-summary="summary" :class="customClass" stripe :data="data.data" :height="height" style="width: 100%" @cell-click="onClick" @header-click="onHeaderClick" ref="groupTable">
+    <template v-for="(col, cIndex) in data.column" :key="col">
+      <el-table-column v-if="col.child && col.child.length > 0" :label="col.name" :key="col">
+  
+        <el-table-column
+          v-for="(sub, sindex) in col.child"
+          :key="sub"
+          :index="cIndex"
+          :class-name="getClassName(cIndex, sindex)"
+          :label="sub.name"
+          :prop="sub.field"
+          :width="sub.width"
+          :sortable="sub.sortable"
+          :show-overflow-tooltip="!sub.slot"
+          :fixed="sub.fixed"
+          :align="sub.align ? sub.align : 'center'"
+          :resizable="sub.resizable"
+          :header-align="'center'"
+        >
+          <template v-if="sub.slot == true" #default="item">
+            <slot :name="sub.field" :column="sub" :row="item.row" :all="item" :data="item.row[item.field]"></slot>
+          </template>
+        </el-table-column>
+        
+
+      </el-table-column>
+
+      <el-table-column
+        v-if="!col.child"
+        :label="col.name"
+        :prop="col.field"
+        :width="col.width"
+        :sortable="col.sortable"
+        :show-overflow-tooltip="!col.slot"
+        :fixed="col.fixed"
+        :align="col.align ? col.align : 'center'"
+        :resizable="col.resizable"
+        :header-align="'center'"
+      >
+        <template v-if="col.slot == true" #default="item">
+          <slot :name="col.field" :column="col" :row="item.row" :all="item" :data="item.row[col.field]"></slot>
+        </template>
+      </el-table-column>
+      
+    </template>
+  </el-table>
+  <el-pagination class="mg-t-8"
+   v-if="pageable" @current-change="handleCurrentChange"
+    :current-page="currentPage" :page-size="pageSize" :total="data.total" v-bind="elPaggingProps">
+     </el-pagination>
+</template>
+
+<script>
+export default {
+  // 名称
+  name: "ComTable",
+  // 使用组件
+  components: {},
+  // 传入参数
+  props: {
+    /**
+             * {
+                    column: [{
+                        name: "风机名称",
+                        child:[{
+                            field: "name",
+                            width:'', // 宽度
+                            click:function(){} // 点击事件
+                            sortable:fasle,
+                            slot:false,
+                            fixed:false,
+                            align:'center',
+                            resizable :false,
+                        }]
+                    }],
+                    total:200
+                }
+             */
+    data: Object,
+    height: {
+      type: String,
+      default: "",
+    },
+    pageSize: {
+      type: Number,
+      default: 0,
+    },
+    customClass: {
+      type: String,
+      default: "",
+    },
+    elPaggingProps: {
+      type: Object,
+      default: () => {
+        return {
+          layout: "total, sizes, prev, pager, next, jumper",
+          // "page-sizes": [100, 200, 300, 400],
+        };
+      },
+    },
+    isColumnLight: {
+      type: Boolean,
+      default: true,
+    },
+    summary: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: {
+    onPagging: null,
+    headerClick: null,
+  },
+  // 数据
+  data() {
+    return {
+      currentPage: 1,
+      headerIndex: -1,
+      subIndex: -1,
+    };
+  },
+  computed: {
+    tableData() {
+      let that = this;
+      if (this.sortCol == "") {
+        return this.data.data;
+      } else {
+        let data = this.data.data;
+
+        data.sort((a, b) => {
+          let rev = 1;
+          if (that.sortType == "ASC") rev = 1;
+          else if (that.sortType == "DESC") rev = -1;
+
+          if (a[that.sortCol] > b[that.sortCol]) return rev * 1;
+          if (a[that.sortCol] < b[that.sortCol]) return rev * -1;
+          return 0;
+        });
+        return data;
+      }
+    },
+    pageable() {
+      return this.pageSize != 0;
+    },
+    pages() {
+      if (this.pageable) return parseInt(this.data.total / this.pageSize) + 1;
+      else return 0;
+    },
+    startRow() {
+      if (this.pageable) return (this.currentPage - 1) * this.pageSize;
+      else return 0;
+    },
+    endRow() {
+      if (this.pageable) return this.currentPage * this.pageSize;
+      else return this.data.data.length;
+    },
+  },
+  // 函数
+  methods: {
+    onClick(row, column, cell, event) {
+      if (column.rawColumnKey.click) column.rawColumnKey.click(event, row);
+    },
+    onHeaderClick(column, event) {
+      if (column.level == 2) {
+        this.headerIndex = column.index;
+        this.subIndex = column.no;
+      }
+      this.$emit("headerClick", { level: column.level,  event: event, col: column.rawColumnKey, data: this.data.data });
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.$emit("onPagging", {
+        pageIndex: this.currentPage,
+        pageSize: this.pageSize,
+        start: this.startRow,
+        end: this.endRow,
+      });
+    },
+    getClassName(cindex, sindex) {
+      if (this.isColumnLight == true && cindex == this.headerIndex && sindex == this.subIndex) return "light";
+      return "";
+    },
+  },
+  // 生命周期钩子
+  beforeCreate() {
+    // 创建前
+  },
+  created() {
+    // 创建后
+  },
+  beforeMount() {
+    // 渲染前
+  },
+  mounted() {
+    // 渲染后
+  },
+  beforeUpdate() {},
+  updated() {},
+};
+</script>
+
+<style lang="less">
+@titleGray: #9ca5a8;
+@rowGray: #606769;
+@darkBack: #536268;
+.com-table {
+  width: 100%;
+  border-collapse: collapse;
+
+  thead {
+    tr {
+      display: table;
+      table-layout: fixed;
+      width: 100%;
+
+      th {
+        background-color: fade(@darkBack, 20%);
+        height: 30px;
+        line-height: 30px;
+        color: @titleGray;
+        font-weight: 400;
+        font-size: @fontsize-s;
+        position: sticky;
+        top: 0;
+        cursor: pointer;
+
+        &.light,
+        &.always-light {
+          color: @green;
+        }
+      }
+    }
+  }
+
+  tbody {
+    display: block;
+
+    tr {
+      display: table;
+      table-layout: fixed;
+      width: 100%;
+
+      &:nth-child(2n) {
+        background-color: fade(@rowGray, 20%);
+      }
+
+      td {
+        padding: 0.556vh 0;
+        color: @rowGray;
+        text-align: center;
+        font-size: @fontsize-s;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        &.light,
+        &.always-light {
+          color: @green !important;
+        }
+
+        &.num {
+          font-family: "Bicubik";
+          font-weight: 400;
+        }
+      }
+    }
+  }
+
+  .el-pagination {
+    color: @gray;
+    .el-pagination__total {
+      color: @gray;
+    }
+
+    button {
+      &.btn-next,
+      &.btn-prev {
+        background: center center no-repeat fade(@gray, 20);
+        color: @gray-l;
+      }
+      &:disabled {
+        color: @gray-l;
+        background-color: fade(@gray, 20);
+        cursor: not-allowed;
+      }
+    }
+
+    .el-pager li {
+      color: @gray-l;
+      background: fade(@gray, 20);
+      &.active {
+        color: @green;
+      }
+    }
+
+    .el-input__inner {
+      color: @gray-l;
+      background: fade(@gray, 20);
+      border: 1px solid fade(@gray, 20);
+    }
+  }
+}
+</style>

src/components/table/table-page.vue

@@ -1,333 +1,333 @@
-<template>
-    <div class="table-page">
-        <div class="toolbar">
-            <div class="title" v-if="grid.title.show">
-                <i :class="grid.title.icon"></i>
-                <span>{{grid.title.text}}</span>
-            </div>
-            <div class="page-bar">
-                <span class="btn" @click="firstPage()">首页</span>
-                <span class="btn" @click="prevPage()">上一页</span>
-                <span v-for="(bar, index) of pageBar" :key="index" @click="gotoPage(bar)"
-                    :class="bar.type + ' ' + (bar.type != 'dot' && page == bar.text ? 'active' : '')">{{bar.text}}</span>
-                <span class="btn" @click="nextPage()">下一页</span>
-                <span class="btn" @click="lastPage()">尾页</span>
-            </div>
-            <div class="page-num">
-                <span>共</span>
-                <span>{{pages}}</span>
-                <span>页</span>
-                <span class="total">{{grid.data.total}}</span>
-                <span>条数据</span>
-            </div>
-            <div class="return" v-if="showReturn" @click="onReturn">
-                返回
-            </div>
-        </div>
-        <div class="sub-title" v-if="grid.subTitle.show">
-            <div class="text">{{grid.subTitle.text}}</div>
-            <div class="sub-text">{{grid.subTitle.subText}}</div>
-        </div>
-        <div class="ct">
-            <table class="com-table">
-                <thead>
-                    <tr>
-                        <th v-for="(col, index) of grid.column" :key="index" :class="{ 'light': col.is_light }">{{col.name}}
-                        </th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr v-for="(row, index) of data" :key="index">
-                        <td v-for="(col, i) of grid.column" :key="i" :class="{ 'light': col.is_light || row.is_light, 'num': col.is_num }">
-                            {{row[col.field]}}</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </div>
-
-</template>
-
-<script>
-    export default {
-        // 名称
-        name: "ComTable",
-        // 使用组件
-        components: {},
-        // 传入参数
-        props: {
-            grid: Object,
-            showReturn: Boolean
-        },
-        // 自定义事件
-        emits: {
-            onReturn: null,
-        },
-        // 数据
-        data() {
-            return {
-                pages: 0,
-                page: 1,
-                pageBar: [],
-                data: []
-            }
-        },
-        // 函数
-        methods: {
-            createPageBar: function() {
-                let pb = [];
-                const p = this.page;
-                const ps = this.pages;
-                if (p >= 4) {
-                    pb.push({
-                        type: "dot",
-                        text: "...",
-                    })
-                }
-                for (let i = p - 2; i <= p + 2 && i <= ps; i++) {
-                    if (i <= 0) {
-                        continue;
-                    }
-                    pb.push({
-                        type: "btn num",
-                        text: i,
-                    })
-                }
-                if (ps > p + 2) {
-                    pb.push({
-                        type: "dot",
-                        text: "...",
-                    })
-                }
-                this.pageBar = pb;
-            },
-            createData: function () {
-                let d = [];
-                let p = this.page;
-                let l = this.grid.limit;
-                let t = this.grid.data.list.length;
-                for (let i = l * (p - 1); i < l * (p - 1) + l && i < t; i++) {
-                    d.push(this.grid.data.list[i]);
-                }
-                this.data = d;
-            },
-            gotoPage: function(item) {
-                if (item.type != 'dot') {
-                    this.page = item.text;
-                    this.createPageBar();
-                    this.createData();
-                }
-            },
-            prevPage: function() {
-                let p = this.page - 1;
-                if (p > 0) {
-                    this.page = p;
-                    this.createPageBar();
-                    this.createData();
-                }
-            },
-            nextPage: function() {
-                let p = this.page + 1;
-                if (p <= this.pages) {
-                    this.page = p;
-                    this.createPageBar();
-                    this.createData();
-                }
-            },
-            firstPage: function() {
-                this.page = 1;
-                this.createPageBar();
-                this.createData();
-            },
-            lastPage: function() {
-                this.page = this.pages;
-                this.createPageBar();
-                this.createData();
-            },
-            onReturn: function() {
-                this.$emit('onReturn');
-            }
-        },
-        // 生命周期钩子
-        beforeCreate() {
-            // 创建前
-        },
-        created() {
-            // 创建后
-            this.pages = Math.ceil(this.grid.data.list.length / this.grid.limit);
-            this.createPageBar();
-            this.createData();
-        },
-        beforeMount() {
-            // 渲染前
-        },
-        mounted() {
-            // 渲染后
-        },
-        beforeUpdate() {
-            // 数据更新前
-        },
-        updated() {
-            // 数据更新后
-        },
-    }
-</script>
-
-<style lang="less">
-    @titleGray: #9CA5A8;
-    @rowGray: #606769;
-    @darkBack: #536268;
-
-    .table-page {
-        display: flex;
-        flex-direction: column;
-        
-        .toolbar {
-            background-color: fade(@darkgray, 40%);
-            display: flex;
-
-            .title {
-                padding: 0.741vh 0;
-                color: @green;
-                font-size: @fontsize;
-
-                i {
-                    margin: 0 0.556vh 0 1.481vh;
-                }
-            }
-
-            .page-bar {
-                margin-left: auto;
-                font-size: @fontsize;
-                color: @gray;
-                display: flex;
-                align-items: center;
-
-                span {
-                    border-radius: 0.370vh;
-                    padding: 0.185vh 0.278vh;
-                    margin-right: 0.556vh;
-
-                    &.btn {
-                        cursor: pointer;
-
-                        &:hover {
-                            color: @green;
-                            border-color: @green;
-                        }
-                    }
-
-                }
-
-                .num {
-                    font-weight: 600;
-                    width: 2.315vh;
-                    text-align: center;
-                    border: 0.093vh solid @darkgray;
-
-                    &.active {
-                        color: @green;
-                        border-color: @green;
-                    }
-                }
-
-            }
-
-            .page-num {
-                margin-left: 1.481vh;
-                margin-right: 1.481vh;
-                font-size: @fontsize;
-                color: @gray;
-                display: flex;
-                align-items: center;
-
-                .total {
-                    margin-left: 0.741vh;
-                }
-            }
-
-            .return {
-                margin-right: 1.481vh;
-                font-size: @fontsize;
-                color: @gray;
-                display: flex;
-                align-items: center;
-                cursor: pointer;
-
-                &:hover {
-                    color: @green;
-                }
-            }
-        }
-
-        .sub-title {
-            background-color: fade(@darkgray, 40%);
-            display: flex;
-            padding: 0.741vh 2.222vh;
-            font-size: @fontsize;
-            margin-top: 1.481vh;
-
-            .text {
-                color: @write;
-            }
-
-            .sub-text {
-                margin-left: auto;
-                color: @write;
-            }
-        }
-        
-        .ct {
-            flex-grow: 1;
-            overflow: auto;
-        }
-        
-        .com-table {
-            width: 100%;
-            border-collapse: collapse;
-        
-            thead {
-                tr {
-                    th {
-                        background-color: fade(@darkBack, 60%);
-                        padding: 0.556vh 0;
-                        color: @titleGray;
-                        font-weight: 400;
-                        font-size: @fontsize-s;
-                        position: sticky;
-                        top: 0;
-                        
-                        &.light {
-                            color: @green;
-                        }
-                    }
-                }
-            }
-        
-            tbody {
-                tr {
-                    &:nth-child(2n) {
-                        background-color: fade(@rowGray, 20%);
-                    }
-        
-                    td {
-                        padding: 0.556vh 0;
-                        color: @rowGray;
-                        text-align: center;
-                        font-size: @fontsize-s;
-                        
-                        &.light {
-                            color: @green;
-                        }
-                        
-                        &.num {
-                            font-family: "Bicubik";
-                            font-weight: 400;
-                        }
-                    }
-                }
-            }
-        }
-        
-    }
-</style>
+<template>
+    <div class="table-page">
+        <div class="toolbar">
+            <div class="title" v-if="grid.title.show">
+                <i :class="grid.title.icon"></i>
+                <span>{{grid.title.text}}</span>
+            </div>
+            <div class="page-bar">
+                <span class="btn" @click="firstPage()">首页</span>
+                <span class="btn" @click="prevPage()">上一页</span>
+                <span v-for="(bar, index) of pageBar" :key="index" @click="gotoPage(bar)"
+                    :class="bar.type + ' ' + (bar.type != 'dot' && page == bar.text ? 'active' : '')">{{bar.text}}</span>
+                <span class="btn" @click="nextPage()">下一页</span>
+                <span class="btn" @click="lastPage()">尾页</span>
+            </div>
+            <div class="page-num">
+                <span>共</span>
+                <span>{{pages}}</span>
+                <span>页</span>
+                <span class="total">{{grid.data.total}}</span>
+                <span>条数据</span>
+            </div>
+            <div class="return" v-if="showReturn" @click="onReturn">
+                返回
+            </div>
+        </div>
+        <div class="sub-title" v-if="grid.subTitle.show">
+            <div class="text">{{grid.subTitle.text}}</div>
+            <div class="sub-text">{{grid.subTitle.subText}}</div>
+        </div>
+        <div class="ct">
+            <table class="com-table">
+                <thead>
+                    <tr>
+                        <th v-for="(col, index) of grid.column" :key="index" :class="{ 'light': col.is_light }">{{col.name}}
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="(row, index) of data" :key="index">
+                        <td v-for="(col, i) of grid.column" :key="i" :class="{ 'light': col.is_light || row.is_light, 'num': col.is_num }">
+                            {{row[col.field]}}</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+
+</template>
+
+<script>
+    export default {
+        // 名称
+        name: "ComTable",
+        // 使用组件
+        components: {},
+        // 传入参数
+        props: {
+            grid: Object,
+            showReturn: Boolean
+        },
+        // 自定义事件
+        emits: {
+            onReturn: null,
+        },
+        // 数据
+        data() {
+            return {
+                pages: 0,
+                page: 1,
+                pageBar: [],
+                data: []
+            }
+        },
+        // 函数
+        methods: {
+            createPageBar: function() {
+                let pb = [];
+                const p = this.page;
+                const ps = this.pages;
+                if (p >= 4) {
+                    pb.push({
+                        type: "dot",
+                        text: "...",
+                    })
+                }
+                for (let i = p - 2; i <= p + 2 && i <= ps; i++) {
+                    if (i <= 0) {
+                        continue;
+                    }
+                    pb.push({
+                        type: "btn num",
+                        text: i,
+                    })
+                }
+                if (ps > p + 2) {
+                    pb.push({
+                        type: "dot",
+                        text: "...",
+                    })
+                }
+                this.pageBar = pb;
+            },
+            createData: function () {
+                let d = [];
+                let p = this.page;
+                let l = this.grid.limit;
+                let t = this.grid.data.list.length;
+                for (let i = l * (p - 1); i < l * (p - 1) + l && i < t; i++) {
+                    d.push(this.grid.data.list[i]);
+                }
+                this.data = d;
+            },
+            gotoPage: function(item) {
+                if (item.type != 'dot') {
+                    this.page = item.text;
+                    this.createPageBar();
+                    this.createData();
+                }
+            },
+            prevPage: function() {
+                let p = this.page - 1;
+                if (p > 0) {
+                    this.page = p;
+                    this.createPageBar();
+                    this.createData();
+                }
+            },
+            nextPage: function() {
+                let p = this.page + 1;
+                if (p <= this.pages) {
+                    this.page = p;
+                    this.createPageBar();
+                    this.createData();
+                }
+            },
+            firstPage: function() {
+                this.page = 1;
+                this.createPageBar();
+                this.createData();
+            },
+            lastPage: function() {
+                this.page = this.pages;
+                this.createPageBar();
+                this.createData();
+            },
+            onReturn: function() {
+                this.$emit('onReturn');
+            }
+        },
+        // 生命周期钩子
+        beforeCreate() {
+            // 创建前
+        },
+        created() {
+            // 创建后
+            this.pages = Math.ceil(this.grid.data.list.length / this.grid.limit);
+            this.createPageBar();
+            this.createData();
+        },
+        beforeMount() {
+            // 渲染前
+        },
+        mounted() {
+            // 渲染后
+        },
+        beforeUpdate() {
+            // 数据更新前
+        },
+        updated() {
+            // 数据更新后
+        },
+    }
+</script>
+
+<style lang="less">
+    @titleGray: #9CA5A8;
+    @rowGray: #606769;
+    @darkBack: #536268;
+
+    .table-page {
+        display: flex;
+        flex-direction: column;
+        
+        .toolbar {
+            background-color: fade(@darkgray, 40%);
+            display: flex;
+
+            .title {
+                padding: 0.741vh 0;
+                color: @green;
+                font-size: @fontsize;
+
+                i {
+                    margin: 0 0.556vh 0 1.481vh;
+                }
+            }
+
+            .page-bar {
+                margin-left: auto;
+                font-size: @fontsize;
+                color: @gray;
+                display: flex;
+                align-items: center;
+
+                span {
+                    border-radius: 0.370vh;
+                    padding: 0.185vh 0.278vh;
+                    margin-right: 0.556vh;
+
+                    &.btn {
+                        cursor: pointer;
+
+                        &:hover {
+                            color: @green;
+                            border-color: @green;
+                        }
+                    }
+
+                }
+
+                .num {
+                    font-weight: 600;
+                    width: 2.315vh;
+                    text-align: center;
+                    border: 0.093vh solid @darkgray;
+
+                    &.active {
+                        color: @green;
+                        border-color: @green;
+                    }
+                }
+
+            }
+
+            .page-num {
+                margin-left: 1.481vh;
+                margin-right: 1.481vh;
+                font-size: @fontsize;
+                color: @gray;
+                display: flex;
+                align-items: center;
+
+                .total {
+                    margin-left: 0.741vh;
+                }
+            }
+
+            .return {
+                margin-right: 1.481vh;
+                font-size: @fontsize;
+                color: @gray;
+                display: flex;
+                align-items: center;
+                cursor: pointer;
+
+                &:hover {
+                    color: @green;
+                }
+            }
+        }
+
+        .sub-title {
+            background-color: fade(@darkgray, 40%);
+            display: flex;
+            padding: 0.741vh 2.222vh;
+            font-size: @fontsize;
+            margin-top: 1.481vh;
+
+            .text {
+                color: @write;
+            }
+
+            .sub-text {
+                margin-left: auto;
+                color: @write;
+            }
+        }
+        
+        .ct {
+            flex-grow: 1;
+            overflow: auto;
+        }
+        
+        .com-table {
+            width: 100%;
+            border-collapse: collapse;
+        
+            thead {
+                tr {
+                    th {
+                        background-color: fade(@darkBack, 60%);
+                        padding: 0.556vh 0;
+                        color: @titleGray;
+                        font-weight: 400;
+                        font-size: @fontsize-s;
+                        position: sticky;
+                        top: 0;
+                        
+                        &.light {
+                            color: @green;
+                        }
+                    }
+                }
+            }
+        
+            tbody {
+                tr {
+                    &:nth-child(2n) {
+                        background-color: fade(@rowGray, 20%);
+                    }
+        
+                    td {
+                        padding: 0.556vh 0;
+                        color: @rowGray;
+                        text-align: center;
+                        font-size: @fontsize-s;
+                        
+                        &.light {
+                            color: @green;
+                        }
+                        
+                        &.num {
+                            font-family: "Bicubik";
+                            font-weight: 400;
+                        }
+                    }
+                }
+            }
+        }
+        
+    }
+</style>

src/components/table/table-qc.vue

@@ -1,497 +1,497 @@
-<template>
-  <table class="com-table">
-    <thead>
-      <tr>
-        <th
-          v-for="(col, index) of data.column"
-          :key="index"
-          :class="{ light: col.is_light }"
-          :style="{ width: col.width }"
-          @click="onSort(col)"
-        >{{ col.name }}</th>
-      </tr>
-    </thead>
-    <el-scrollbar>
-      <tbody :style="{ height: height }">
-        <tr v-for="(row, index) of tableData" :key="index">
-          <td
-            v-for="(col, i) of data.column"
-            :key="i"
-            :style="{ width: col.width }"
-            :class="{ light: hoverRow == row || hoverCol == col, num: col.is_num, 'always-light': col.is_light || row.is_light }"
-            @mouseenter="hover(row, col)"
-            @mouseleave="leave()"
-          >
-            <component
-              :is="col.type ? col.type : 'div'"
-              v-bind="col.props"
-              v-html="template(col, row[col.field])"
-              @click="onClick(col, row)"
-            ></component>
-          </td>
-        </tr>
-      </tbody>
-    </el-scrollbar>
-    <el-pagination
-      class="mg-t-8"
-      v-if="pageable"
-      @current-change="handleCurrentChange"
-      :current-page="currentPage4"
-      :page-size="pageSize"
-      layout="total, prev, pager, next, jumper"
-      :total="data.total"
-    ></el-pagination>
-    <el-dialog
-      :title="dialogTitle"
-      v-model="dialogShow"
-      width="70%"
-      top="10vh"
-      custom-class="modal"
-      :close-on-click-modal="true"
-    >
-      <div class="chart" id="chartDiv" height="500px"></div>
-    </el-dialog>
-  </table>
-</template>
-
-<script>
-import * as echarts from "echarts";
-export default {
-  // 名称
-  name: "ComTable",
-  // 使用组件
-  components: {},
-  // 传入参数
-  props: {
-    data: Object,
-    // hover 样式
-    showHover: {
-      type: Boolean,
-      default: true
-    },
-    // 列高亮
-    showColHover: {
-      type: Boolean,
-      default: false
-    },
-    canScroll: {
-      type: Boolean,
-      default: true
-    },
-    pageSize: {
-      type: Number,
-      default: 0
-    },
-    height: {
-      type: String,
-      default: ""
-    }
-  },
-  // 自定义事件
-  emits: {
-    // 分页事件
-    onPagging: null
-  },
-  // 数据
-  data() {
-    let that = this;
-    return {
-      hoverRow: -1,
-      hoverCol: -1,
-      sortCol: "",
-      sortType: "",
-      currentPage: 1,
-      dialogShow: false,
-      dialogTitle: "",
-      dialogData: {},
-      myChart : null
-    };
-  },
-  computed: {
-    tableData() {
-      let that = this;
-      if (this.sortCol == "") {
-        return this.data.data;
-      } else {
-        let data = this.data.data;
-
-        data.sort((a, b) => {
-          let rev = 1;
-          if (that.sortType == "ASC") rev = 1;
-          else if (that.sortType == "DESC") rev = -1;
-
-          if (a[that.sortCol] > b[that.sortCol]) return rev * 1;
-          if (a[that.sortCol] < b[that.sortCol]) return rev * -1;
-          return 0;
-        });
-        return data; 
-      }
-    },
-    pageable() {
-      return this.pageSize != 0;
-    },
-    pages() {
-      if (this.pageable) return parseInt(this.data.total / this.pageSize) + 1;
-      else return 0;
-    },
-    startRow() {
-      if (this.pageable) return (this.currentPage - 1) * this.pageSize;
-      else return 0;
-    },
-    endRow() {
-      if (this.pageable) return this.currentPage * this.pageSize;
-      else return this.data.data.length;
-    }
-  },
-  // 函数
-  methods: {
-    clearCheckBox(time) {
-      this.$nextTick(() => {
-        setTimeout(() => {
-          const domArray = document.querySelectorAll(".curCheckBox");
-          for (let i = 0; i < domArray.length; i++) {
-            domArray[i].checked = false;
-          }
-        }, time || 300);
-      });
-    },
-    onClick(col, row) {
-      this.clearChart();
-      let subUrl = "";
-      let data = {};
-      let method = "POST";
-      if ("sjbz" == col.field) {
-        subUrl = "/leaderboard/curveMonthchatAjax";
-        data["type"] = "sjbz";
-      } else if ("sjzy" == col.field) {
-        subUrl = "/leaderboard/curveMonthchatAjax";
-        data["type"] = "sjzy";
-      } else if ("zybz" == col.field) {
-        subUrl = "/leaderboard/curveMonthchatAjax";
-        data["type"] = "zybz";
-      } else if ("hb" == col.field) {
-        subUrl = "/leaderboard/curveMonthchatAjaxhb";
-        data["type"] = "hb";
-        method = "GET";
-      } else if ("tb" == col.field) {
-        subUrl = "/leaderboard/curveMonthchatAjaxtb";
-        data["type"] = "tb";
-        method = "GET";
-      } else if ("bbgfj" == col.field) {
-        subUrl = "/leaderboard/curveMonthchatAjaxbg";
-        data["type"] = "bg";
-        method = "GET";
-      } else {
-        return 0;
-      }
-      this.dialogShow = true;
-      this.dialogTitle = "曲线偏差率排行";
-      const date = new Date();
-      let year = date.getFullYear();
-      let month = date.getMonth() + 1;
-      let pdate = this.$parent.date.split("-");
-      if (pdate && pdate.length > 1) {
-        data["year"] = pdate[0];
-        data["month"] = pdate[1];
-      }
-      data["wtId"] = row.fj;
-      let that = this;
-      that.API.requestData({
-        method: method,
-        subUrl: subUrl,
-        data: data,
-        success(res) {
-          if (res.code === 200) {
-            const linedata1 = [];
-            const linedata2 = [];
-            const names = [res.data.name1, res.data.name2];
-            res.data.datas.forEach((item, index) => {
-              linedata1.push(item["value2"]);
-              linedata2.push(item["value3"]);
-            });
-
-            that.dialogShow = true;
-            that.dialogTitle = "曲线偏差率排行";
-            that.initChart(linedata1, linedata2, names);
-          }
-        }
-      });
-    },
-    clearChart(){
-      // echarts.init(document.getElementById("chartDiv"));
-      // TODO 未实现 点开后先清空曲线。mychart 不能定义为全局变量。Echarts bug
-    },
-    initChart(data1, data2, names) {
-      let that = this;
-      let myChart = echarts.init(document.getElementById("chartDiv"));
-      let option = {
-        color: ["#05bb4c", "#4b55ae"],
-        tooltip: {
-          trigger: "axis"
-        },
-        legend: {
-          show: true,
-          data: names,
-          right: 56,
-          icon: "circle",
-          itemWidth: 6,
-          inactiveColor: "#606769",
-          textStyle: {
-            color: "#B3BDC0",
-            fontSize: 12
-          }
-        },
-        grid: {
-          top: 32,
-          left: 40,
-          right: 40,
-          bottom: 24
-        },
-        xAxis: [
-          {
-            type: "category",
-            boundaryGap: false,
-            axisLabel: {
-              formatter: "{value}",
-              fontSize: 9.35925925925926,
-              textStyle: {
-                color: "#606769"
-              }
-            },
-            axisLine: {
-              show: false
-            },
-            data: [
-              "0",
-              "1",
-              "2",
-              "3",
-              "4",
-              "5",
-              "6",
-              "7",
-              "8",
-              "9",
-              "10",
-              "11",
-              "12",
-              "13",
-              "14",
-              "15",
-              "16",
-              "17",
-              "18",
-              "19",
-              "20",
-              "21",
-              "22",
-              "23",
-              "24",
-              "25"
-            ]
-          }
-        ],
-        yAxis: [
-          {
-            type: "value",
-            name: "(W)",
-            axisLabel: {
-              formatter: "{value}",
-              fontSize: 9.35925925925926
-            },
-            axisLine: {
-              show: false
-            },
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: "#606769",
-                type: "dashed"
-              }
-            }
-          }
-        ],
-        series: [
-          {
-            name: names[0],
-            type: "line",
-            smooth: true,
-            showSymbol: false,
-            zlevel: 0,
-            lineStyle: {
-              normal: {
-                color: "#05bb4c",
-                width: 1
-              },
-              emphasis: {
-                color: "#05bb4c"
-              }
-            },
-            areaStyle: {
-              normal: {
-                color: {
-                  colorStops: [
-                    {
-                      offset: 0,
-                      color: "rgba(5,187,76,0.3)"
-                    },
-                    {
-                      offset: 1,
-                      color: "rgba(5,187,76,0.1)"
-                    }
-                  ],
-                  x: 0,
-                  y: 0,
-                  x2: 0,
-                  y2: 1,
-                  type: "linear",
-                  global: false
-                },
-                shadowColor: "rgba(5,187,76,0.1)",
-                shadowBlur: 10
-              },
-              emphasis: {
-                color: {
-                  colorStops: [
-                    {
-                      offset: 0,
-                      color: "rgba(5,187,76,0.3)"
-                    },
-                    {
-                      offset: 1,
-                      color: "rgba(5,187,76,0.1)"
-                    }
-                  ],
-                  x: 0,
-                  y: 0,
-                  x2: 0,
-                  y2: 1,
-                  type: "linear",
-                  global: false
-                },
-                shadowColor: "rgba(5,187,76,0.1)",
-                shadowBlur: 10
-              }
-            },
-
-            yAxisIndex: 0,
-            data: data1
-          },
-          {
-            name: names[1],
-            type: "line",
-            smooth: true,
-            showSymbol: false,
-            zlevel: 2,
-            lineStyle: {
-              normal: {
-                color: "#606769",
-                width: 1
-              },
-              emphasis: {
-                color: "#fa8c16"
-              }
-            },
-            areaStyle: {
-              normal: {
-                color: "transparent",
-                shadowColor: "rgba(250,140,22,0.1)",
-                shadowBlur: 10
-              },
-              emphasis: {
-                color: {
-                  colorStops: [
-                    {
-                      offset: 0,
-                      color: "rgba(250,140,22,0.3)"
-                    },
-                    {
-                      offset: 1,
-                      color: "rgba(250,140,22,0.1)"
-                    }
-                  ],
-                  x: 0,
-                  y: 0,
-                  x2: 0,
-                  y2: 1,
-                  type: "linear",
-                  global: false
-                },
-                shadowColor: "rgba(250,140,22,0.1)",
-                shadowBlur: 10
-              }
-            },
-
-            yAxisIndex: 0,
-            data: data2
-          }
-        ]
-      };
-      myChart.clear();
-      myChart.setOption(option);
-      this.resize = function() {
-        myChart.resize();
-      };
-      window.addEventListener("resize", this.resize);
-      myChart.resize();
-    },
-    onSort(col) {
-      if (col.sortable == true) {
-        this.sortCol = col.field;
-        switch (this.sortType) {
-          case "":
-            this.sortType = "DESC";
-            break;
-          case "DESC":
-            this.sortType = "ASC";
-            break;
-          case "ASC":
-            this.sortType = "";
-            break;
-        }
-      }
-    },
-    template(col, data) {
-      if (!col.template) return data;
-      else return col.template(data);
-    },
-    hover(row, col) {
-      if (this.showHover) {
-        this.hoverRow = row;
-        if (this.showColHover) this.hoverCol = col;
-      }
-    },
-    leave() {
-      this.hoverRow = -1;
-      this.hoverCol = -1;
-    },
-    handleCurrentChange(val) {
-      this.currentPage = val;
-      this.$emit("onPagging", {
-        pageIndex: this.currentPage,
-        pageSize: this.pageSize,
-        start: this.startRow,
-        end: this.endRow
-      });
-    }
-  },
-  // 生命周期钩子
-  // 创建前
-  beforeCreate() {},
-  // 创建后
-  created() {},
-  // 渲染前
-  beforeMount() {},
-  // 渲染后
-  mounted() {},
-  beforeUpdate() {},
-  updated() {}
-};
-</script>
-
-<style lang="less">
-.chart {
-  width: 100%;
-  height: 500px;
-}
-</style>
+<template>
+  <table class="com-table">
+    <thead>
+      <tr>
+        <th
+          v-for="(col, index) of data.column"
+          :key="index"
+          :class="{ light: col.is_light }"
+          :style="{ width: col.width }"
+          @click="onSort(col)"
+        >{{ col.name }}</th>
+      </tr>
+    </thead>
+    <el-scrollbar>
+      <tbody :style="{ height: height }">
+        <tr v-for="(row, index) of tableData" :key="index">
+          <td
+            v-for="(col, i) of data.column"
+            :key="i"
+            :style="{ width: col.width }"
+            :class="{ light: hoverRow == row || hoverCol == col, num: col.is_num, 'always-light': col.is_light || row.is_light }"
+            @mouseenter="hover(row, col)"
+            @mouseleave="leave()"
+          >
+            <component
+              :is="col.type ? col.type : 'div'"
+              v-bind="col.props"
+              v-html="template(col, row[col.field])"
+              @click="onClick(col, row)"
+            ></component>
+          </td>
+        </tr>
+      </tbody>
+    </el-scrollbar>
+    <el-pagination
+      class="mg-t-8"
+      v-if="pageable"
+      @current-change="handleCurrentChange"
+      :current-page="currentPage4"
+      :page-size="pageSize"
+      layout="total, prev, pager, next, jumper"
+      :total="data.total"
+    ></el-pagination>
+    <el-dialog
+      :title="dialogTitle"
+      v-model="dialogShow"
+      width="70%"
+      top="10vh"
+      custom-class="modal"
+      :close-on-click-modal="true"
+    >
+      <div class="chart" id="chartDiv" height="500px"></div>
+    </el-dialog>
+  </table>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+  // 名称
+  name: "ComTable",
+  // 使用组件
+  components: {},
+  // 传入参数
+  props: {
+    data: Object,
+    // hover 样式
+    showHover: {
+      type: Boolean,
+      default: true
+    },
+    // 列高亮
+    showColHover: {
+      type: Boolean,
+      default: false
+    },
+    canScroll: {
+      type: Boolean,
+      default: true
+    },
+    pageSize: {
+      type: Number,
+      default: 0
+    },
+    height: {
+      type: String,
+      default: ""
+    }
+  },
+  // 自定义事件
+  emits: {
+    // 分页事件
+    onPagging: null
+  },
+  // 数据
+  data() {
+    let that = this;
+    return {
+      hoverRow: -1,
+      hoverCol: -1,
+      sortCol: "",
+      sortType: "",
+      currentPage: 1,
+      dialogShow: false,
+      dialogTitle: "",
+      dialogData: {},
+      myChart : null
+    };
+  },
+  computed: {
+    tableData() {
+      let that = this;
+      if (this.sortCol == "") {
+        return this.data.data;
+      } else {
+        let data = this.data.data;
+
+        data.sort((a, b) => {
+          let rev = 1;
+          if (that.sortType == "ASC") rev = 1;
+          else if (that.sortType == "DESC") rev = -1;
+
+          if (a[that.sortCol] > b[that.sortCol]) return rev * 1;
+          if (a[that.sortCol] < b[that.sortCol]) return rev * -1;
+          return 0;
+        });
+        return data; 
+      }
+    },
+    pageable() {
+      return this.pageSize != 0;
+    },
+    pages() {
+      if (this.pageable) return parseInt(this.data.total / this.pageSize) + 1;
+      else return 0;
+    },
+    startRow() {
+      if (this.pageable) return (this.currentPage - 1) * this.pageSize;
+      else return 0;
+    },
+    endRow() {
+      if (this.pageable) return this.currentPage * this.pageSize;
+      else return this.data.data.length;
+    }
+  },
+  // 函数
+  methods: {
+    clearCheckBox(time) {
+      this.$nextTick(() => {
+        setTimeout(() => {
+          const domArray = document.querySelectorAll(".curCheckBox");
+          for (let i = 0; i < domArray.length; i++) {
+            domArray[i].checked = false;
+          }
+        }, time || 300);
+      });
+    },
+    onClick(col, row) {
+      this.clearChart();
+      let subUrl = "";
+      let data = {};
+      let method = "POST";
+      if ("sjbz" == col.field) {
+        subUrl = "/leaderboard/curveMonthchatAjax";
+        data["type"] = "sjbz";
+      } else if ("sjzy" == col.field) {
+        subUrl = "/leaderboard/curveMonthchatAjax";
+        data["type"] = "sjzy";
+      } else if ("zybz" == col.field) {
+        subUrl = "/leaderboard/curveMonthchatAjax";
+        data["type"] = "zybz";
+      } else if ("hb" == col.field) {
+        subUrl = "/leaderboard/curveMonthchatAjaxhb";
+        data["type"] = "hb";
+        method = "GET";
+      } else if ("tb" == col.field) {
+        subUrl = "/leaderboard/curveMonthchatAjaxtb";
+        data["type"] = "tb";
+        method = "GET";
+      } else if ("bbgfj" == col.field) {
+        subUrl = "/leaderboard/curveMonthchatAjaxbg";
+        data["type"] = "bg";
+        method = "GET";
+      } else {
+        return 0;
+      }
+      this.dialogShow = true;
+      this.dialogTitle = "曲线偏差率排行";
+      const date = new Date();
+      let year = date.getFullYear();
+      let month = date.getMonth() + 1;
+      let pdate = this.$parent.date.split("-");
+      if (pdate && pdate.length > 1) {
+        data["year"] = pdate[0];
+        data["month"] = pdate[1];
+      }
+      data["wtId"] = row.fj;
+      let that = this;
+      that.API.requestData({
+        method: method,
+        subUrl: subUrl,
+        data: data,
+        success(res) {
+          if (res.code === 200) {
+            const linedata1 = [];
+            const linedata2 = [];
+            const names = [res.data.name1, res.data.name2];
+            res.data.datas.forEach((item, index) => {
+              linedata1.push(item["value2"]);
+              linedata2.push(item["value3"]);
+            });
+
+            that.dialogShow = true;
+            that.dialogTitle = "曲线偏差率排行";
+            that.initChart(linedata1, linedata2, names);
+          }
+        }
+      });
+    },
+    clearChart(){
+      // echarts.init(document.getElementById("chartDiv"));
+      // TODO 未实现 点开后先清空曲线。mychart 不能定义为全局变量。Echarts bug
+    },
+    initChart(data1, data2, names) {
+      let that = this;
+      let myChart = echarts.init(document.getElementById("chartDiv"));
+      let option = {
+        color: ["#05bb4c", "#4b55ae"],
+        tooltip: {
+          trigger: "axis"
+        },
+        legend: {
+          show: true,
+          data: names,
+          right: 56,
+          icon: "circle",
+          itemWidth: 6,
+          inactiveColor: "#606769",
+          textStyle: {
+            color: "#B3BDC0",
+            fontSize: 12
+          }
+        },
+        grid: {
+          top: 32,
+          left: 40,
+          right: 40,
+          bottom: 24
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            axisLabel: {
+              formatter: "{value}",
+              fontSize: 9.35925925925926,
+              textStyle: {
+                color: "#606769"
+              }
+            },
+            axisLine: {
+              show: false
+            },
+            data: [
+              "0",
+              "1",
+              "2",
+              "3",
+              "4",
+              "5",
+              "6",
+              "7",
+              "8",
+              "9",
+              "10",
+              "11",
+              "12",
+              "13",
+              "14",
+              "15",
+              "16",
+              "17",
+              "18",
+              "19",
+              "20",
+              "21",
+              "22",
+              "23",
+              "24",
+              "25"
+            ]
+          }
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "(W)",
+            axisLabel: {
+              formatter: "{value}",
+              fontSize: 9.35925925925926
+            },
+            axisLine: {
+              show: false
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: "#606769",
+                type: "dashed"
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            name: names[0],
+            type: "line",
+            smooth: true,
+            showSymbol: false,
+            zlevel: 0,
+            lineStyle: {
+              normal: {
+                color: "#05bb4c",
+                width: 1
+              },
+              emphasis: {
+                color: "#05bb4c"
+              }
+            },
+            areaStyle: {
+              normal: {
+                color: {
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(5,187,76,0.3)"
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(5,187,76,0.1)"
+                    }
+                  ],
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  type: "linear",
+                  global: false
+                },
+                shadowColor: "rgba(5,187,76,0.1)",
+                shadowBlur: 10
+              },
+              emphasis: {
+                color: {
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(5,187,76,0.3)"
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(5,187,76,0.1)"
+                    }
+                  ],
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  type: "linear",
+                  global: false
+                },
+                shadowColor: "rgba(5,187,76,0.1)",
+                shadowBlur: 10
+              }
+            },
+
+            yAxisIndex: 0,
+            data: data1
+          },
+          {
+            name: names[1],
+            type: "line",
+            smooth: true,
+            showSymbol: false,
+            zlevel: 2,
+            lineStyle: {
+              normal: {
+                color: "#606769",
+                width: 1
+              },
+              emphasis: {
+                color: "#fa8c16"
+              }
+            },
+            areaStyle: {
+              normal: {
+                color: "transparent",
+                shadowColor: "rgba(250,140,22,0.1)",
+                shadowBlur: 10
+              },
+              emphasis: {
+                color: {
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(250,140,22,0.3)"
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(250,140,22,0.1)"
+                    }
+                  ],
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  type: "linear",
+                  global: false
+                },
+                shadowColor: "rgba(250,140,22,0.1)",
+                shadowBlur: 10
+              }
+            },
+
+            yAxisIndex: 0,
+            data: data2
+          }
+        ]
+      };
+      myChart.clear();
+      myChart.setOption(option);
+      this.resize = function() {
+        myChart.resize();
+      };
+      window.addEventListener("resize", this.resize);
+      myChart.resize();
+    },
+    onSort(col) {
+      if (col.sortable == true) {
+        this.sortCol = col.field;
+        switch (this.sortType) {
+          case "":
+            this.sortType = "DESC";
+            break;
+          case "DESC":
+            this.sortType = "ASC";
+            break;
+          case "ASC":
+            this.sortType = "";
+            break;
+        }
+      }
+    },
+    template(col, data) {
+      if (!col.template) return data;
+      else return col.template(data);
+    },
+    hover(row, col) {
+      if (this.showHover) {
+        this.hoverRow = row;
+        if (this.showColHover) this.hoverCol = col;
+      }
+    },
+    leave() {
+      this.hoverRow = -1;
+      this.hoverCol = -1;
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.$emit("onPagging", {
+        pageIndex: this.currentPage,
+        pageSize: this.pageSize,
+        start: this.startRow,
+        end: this.endRow
+      });
+    }
+  },
+  // 生命周期钩子
+  // 创建前
+  beforeCreate() {},
+  // 创建后
+  created() {},
+  // 渲染前
+  beforeMount() {},
+  // 渲染后
+  mounted() {},
+  beforeUpdate() {},
+  updated() {}
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 500px;
+}
+</style>

src/components/table/table-span.vue

@@ -1,139 +1,139 @@
-<template>
-  <table class="com-table">
-    <thead>
-      <tr>
-        <th v-for="(col, index) of data.column" :key="index" :class="{ light: col.is_light }">{{ col.name }}<br v-if="col.unit != ''" />{{ col.unit }}</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="(row, index) of data.data" :key="index">
-        <td :rowspan="rowspan(row, col)" :colspan="colspan(row, col)" v-for="(col, i) of data.column" :key="i" :class="{ light: col.is_light || row.is_light, num: col.is_num, remove: row[col.field] == '' }">
-          {{ row[col.field] || "a" }}
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</template>
-
-<script>
-export default {
-  // 名称
-  name: "ComTable",
-  // 使用组件
-  components: {},
-  // 传入参数
-  props: {
-    data: Object,
-  },
-  // 自定义事件
-  emits: {},
-  // 数据
-  data() {
-    return {};
-  },
-  computed: {},
-  // 函数
-  methods: {
-    rowspan: function(row, col) {
-      if (row.row_span.length == 0) {
-        return 1;
-      } else {
-        let row_span = row.row_span.find((t) => t[0] == col.field);
-        if (row_span) {
-          return row_span[1];
-        } else {
-          return 1;
-        }
-      }
-    },
-    colspan: function(row, col) {
-      if (row.col_span.length == 0) {
-        return 1;
-      } else {
-        let col_span = row.col_span.find((t) => t[0] == col.field);
-        if (col_span) {
-          return col_span[1];
-        } else {
-          return 1;
-        }
-      }
-    },
-  },
-  // 生命周期钩子
-  beforeCreate() {
-    // 创建前
-  },
-  created() {
-    // 创建后
-  },
-  beforeMount() {
-    // 渲染前
-  },
-  mounted() {
-    // 渲染后
-  },
-  beforeUpdate() {
-    // 数据更新前
-  },
-  updated() {
-    // 数据更新后
-  },
-};
-</script>
-
-<style lang="less">
-@titleGray: #9ca5a8;
-@rowGray: #606769;
-@darkBack: #536268;
-
-.com-table {
-  width: 100%;
-  border-collapse: collapse;
-
-  thead {
-    tr {
-      th {
-        background-color: fade(@darkBack, 60%);
-        padding: 0.741vh 0;
-        color: @titleGray;
-        font-weight: 400;
-        font-size: @fontsize-s;
-        position: sticky;
-        top: 0;
-
-        &.light {
-          color: @green;
-        }
-      }
-    }
-  }
-
-  tbody {
-    tr {
-      &:nth-child(2n) {
-        background-color: fade(@rowGray, 20%);
-      }
-
-      td {
-        padding: 0.556vh 0;
-        color: @rowGray;
-        text-align: center;
-        font-size: @fontsize-s;
-
-        &.light {
-          color: @green;
-        }
-
-        &.num {
-          font-family: "Bicubik";
-          font-weight: 400;
-        }
-
-        &.remove {
-          display: none;
-        }
-      }
-    }
-  }
-}
-</style>
+<template>
+  <table class="com-table">
+    <thead>
+      <tr>
+        <th v-for="(col, index) of data.column" :key="index" :class="{ light: col.is_light }">{{ col.name }}<br v-if="col.unit != ''" />{{ col.unit }}</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(row, index) of data.data" :key="index">
+        <td :rowspan="rowspan(row, col)" :colspan="colspan(row, col)" v-for="(col, i) of data.column" :key="i" :class="{ light: col.is_light || row.is_light, num: col.is_num, remove: row[col.field] == '' }">
+          {{ row[col.field] || "a" }}
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script>
+export default {
+  // 名称
+  name: "ComTable",
+  // 使用组件
+  components: {},
+  // 传入参数
+  props: {
+    data: Object,
+  },
+  // 自定义事件
+  emits: {},
+  // 数据
+  data() {
+    return {};
+  },
+  computed: {},
+  // 函数
+  methods: {
+    rowspan: function(row, col) {
+      if (row.row_span.length == 0) {
+        return 1;
+      } else {
+        let row_span = row.row_span.find((t) => t[0] == col.field);
+        if (row_span) {
+          return row_span[1];
+        } else {
+          return 1;
+        }
+      }
+    },
+    colspan: function(row, col) {
+      if (row.col_span.length == 0) {
+        return 1;
+      } else {
+        let col_span = row.col_span.find((t) => t[0] == col.field);
+        if (col_span) {
+          return col_span[1];
+        } else {
+          return 1;
+        }
+      }
+    },
+  },
+  // 生命周期钩子
+  beforeCreate() {
+    // 创建前
+  },
+  created() {
+    // 创建后
+  },
+  beforeMount() {
+    // 渲染前
+  },
+  mounted() {
+    // 渲染后
+  },
+  beforeUpdate() {
+    // 数据更新前
+  },
+  updated() {
+    // 数据更新后
+  },
+};
+</script>
+
+<style lang="less">
+@titleGray: #9ca5a8;
+@rowGray: #606769;
+@darkBack: #536268;
+
+.com-table {
+  width: 100%;
+  border-collapse: collapse;
+
+  thead {
+    tr {
+      th {
+        background-color: fade(@darkBack, 60%);
+        padding: 0.741vh 0;
+        color: @titleGray;
+        font-weight: 400;
+        font-size: @fontsize-s;
+        position: sticky;
+        top: 0;
+
+        &.light {
+          color: @green;
+        }
+      }
+    }
+  }
+
+  tbody {
+    tr {
+      &:nth-child(2n) {
+        background-color: fade(@rowGray, 20%);
+      }
+
+      td {
+        padding: 0.556vh 0;
+        color: @rowGray;
+        text-align: center;
+        font-size: @fontsize-s;
+
+        &.light {
+          color: @green;
+        }
+
+        &.num {
+          font-family: "Bicubik";
+          font-weight: 400;
+        }
+
+        &.remove {
+          display: none;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/table/table-unpage.vue

@@ -1,216 +1,216 @@
-<template>
-  <table class="com-table">
-    <thead>
-      <tr>
-        <th v-for="(col, index) of data.column" :key="index" :class="{ light: col.is_light }" :style="{ width: col.width }" @click="onSort(col)">
-          {{ col.name }}
-        </th>
-      </tr>
-    </thead>
-    <el-scrollbar>
-      <tbody :style="{ height: height }">
-        <tr v-for="(row, index) of tableData" :key="index">
-          <td
-            v-for="(col, i) of data.column"
-            :key="i"
-            :style="{ width: col.width }"
-            :class="{ light: hoverRow == row || hoverCol == col, num: col.is_num, 'always-light': col.is_light || row.is_light }"
-            @mouseenter="hover(row, col)"
-            @mouseleave="leave()"
-          >
-            <component :is="col.type ? col.type : 'div'" v-bind="col.props" v-html="template(col, row[col.field])" @click="onClick(col, row)"> </component>
-          </td>
-        </tr>
-      </tbody>
-    </el-scrollbar>
-  </table>
-</template>
-
-<script>
-export default {
-  // 名称
-  name: "ComTable",
-  // 使用组件
-  components: {},
-  // 传入参数
-  props: {
-    /**
-             * {
-                    column: [{
-                        name: "风机名称",
-                        field: "name",
-                        type:'div',
-                        width:'', // 宽度
-                        is_num: false, // 是否为数字
-                        is_light: false, // 是否高亮
-                        template:function(){ }
-                        click:function(){} //点击事件
-                        sortable:fasle // 排序
-                        // 新增用于在表格中使用动态三方组件
-                        type:'el-tag', // * 新增 用于传入三方组件名称 实现三方组件引入  component :is 方式实现
-                        props:{}, // * 新增 用户传入三方组件的 props 与type同时使用
-                    },{
-                        name: "冷却风温度",
-                        field: "lqf",
-                        is_num: true,
-                        is_light: false
-                    }],
-                    data: [{
-                        name: "1E01",
-                        lqf: 15.78,
-                        is_light: false
-                    }],
-                    total:200
-                }
-             */
-    data: Object,
-    // hover 样式
-    showHover: {
-      type: Boolean,
-      default: true,
-    },
-    // 列高亮
-    showColHover: {
-      type: Boolean,
-      default: false,
-    },
-    canScroll: {
-      type: Boolean,
-      default: true,
-    },
-    pageSize: {
-      type: Number,
-      default: 0,
-    },
-    height: {
-      type: String,
-      default: "",
-    },
-  },
-  // 自定义事件
-  emits: {
-    // 分页事件
-    onPagging: null,
-  },
-  // 数据
-  data() {
-    return {
-      hoverRow: -1,
-      hoverCol: -1,
-      sortCol: "",
-      sortType: "",
-      currentPage: 1,
-    };
-  },
-  computed: {
-    tableData() {
-      let that = this;
-      if (this.sortCol == "") {
-        return this.data.data;
-      } else {
-        let data = this.data.data;
-
-        data.sort((a, b) => {
-          let rev = 1;
-          if (that.sortType == "ASC") rev = 1;
-          else if (that.sortType == "DESC") rev = -1;
-
-          if (a[that.sortCol] > b[that.sortCol]) return rev * 1;
-          if (a[that.sortCol] < b[that.sortCol]) return rev * -1;
-          return 0;
-        });
-        return data;
-      }
-    },
-    pageable() {
-      return this.pageSize != 0;
-    },
-    pages() {
-      if (this.pageable) return parseInt(this.data.total / this.pageSize) + 1;
-      else return 0;
-    },
-    startRow() {
-      if (this.pageable) return (this.currentPage - 1) * this.pageSize;
-      else return 0;
-    },
-    endRow() {
-      if (this.pageable) return this.currentPage * this.pageSize;
-      else return this.data.data.length;
-    },
-  },
-  // 函数
-  methods: {
-    clearCheckBox(time){
-      this.$nextTick(()=>{
-        setTimeout(()=>{
-          const domArray = document.querySelectorAll(".curCheckBox");
-          for(let i=0;i<domArray.length;i++){
-            domArray[i].checked=false;
-          }
-        },(time || 300));
-      });
-    },
-    onClick(col, data) {
-      if (col.click) col.click(event, data);
-    },
-    onSort(col) {
-    
-      if (col.sortable == true) {
-        this.sortCol = col.field;
-        switch (this.sortType) {
-          case "":
-            this.sortType = "DESC";
-            break;
-          case "DESC":
-            this.sortType = "ASC";
-            break;
-          case "ASC":
-            this.sortType = "DESC";
-            break;
-        }
-      }
-    },
-    template(col, data) {
-      if (!col.template) return data;
-      else return col.template(data);
-    },
-    hover(row, col) {
-      if (this.showHover) {
-        this.hoverRow = row;
-        if (this.showColHover) this.hoverCol = col;
-      }
-    },
-    leave() {
-      this.hoverRow = -1;
-      this.hoverCol = -1;
-    },
-    handleCurrentChange(val) {
-      this.currentPage = val;
-      this.$emit("onPagging", {
-        pageIndex: this.currentPage,
-        pageSize: this.pageSize,
-        start: this.startRow,
-        end: this.endRow,
-      });
-    },
-  },
-  // 生命周期钩子
-  beforeCreate() {
-    // 创建前
-  },
-  created() {
-    // 创建后
-  },
-  beforeMount() {
-    // 渲染前
-  },
-  mounted() {
-    // 渲染后
-  },
-  beforeUpdate() {},
-  updated() {},
-};
-</script>
-
-<style lang="less">
-</style>
+<template>
+  <table class="com-table">
+    <thead>
+      <tr>
+        <th v-for="(col, index) of data.column" :key="index" :class="{ light: col.is_light }" :style="{ width: col.width }" @click="onSort(col)">
+          {{ col.name }}
+        </th>
+      </tr>
+    </thead>
+    <el-scrollbar>
+      <tbody :style="{ height: height }">
+        <tr v-for="(row, index) of tableData" :key="index">
+          <td
+            v-for="(col, i) of data.column"
+            :key="i"
+            :style="{ width: col.width }"
+            :class="{ light: hoverRow == row || hoverCol == col, num: col.is_num, 'always-light': col.is_light || row.is_light }"
+            @mouseenter="hover(row, col)"
+            @mouseleave="leave()"
+          >
+            <component :is="col.type ? col.type : 'div'" v-bind="col.props" v-html="template(col, row[col.field])" @click="onClick(col, row)"> </component>
+          </td>
+        </tr>
+      </tbody>
+    </el-scrollbar>
+  </table>
+</template>
+
+<script>
+export default {
+  // 名称
+  name: "ComTable",
+  // 使用组件
+  components: {},
+  // 传入参数
+  props: {
+    /**
+             * {
+                    column: [{
+                        name: "风机名称",
+                        field: "name",
+                        type:'div',
+                        width:'', // 宽度
+                        is_num: false, // 是否为数字
+                        is_light: false, // 是否高亮
+                        template:function(){ }
+                        click:function(){} //点击事件
+                        sortable:fasle // 排序
+                        // 新增用于在表格中使用动态三方组件
+                        type:'el-tag', // * 新增 用于传入三方组件名称 实现三方组件引入  component :is 方式实现
+                        props:{}, // * 新增 用户传入三方组件的 props 与type同时使用
+                    },{
+                        name: "冷却风温度",
+                        field: "lqf",
+                        is_num: true,
+                        is_light: false
+                    }],
+                    data: [{
+                        name: "1E01",
+                        lqf: 15.78,
+                        is_light: false
+                    }],
+                    total:200
+                }
+             */
+    data: Object,
+    // hover 样式
+    showHover: {
+      type: Boolean,
+      default: true,
+    },
+    // 列高亮
+    showColHover: {
+      type: Boolean,
+      default: false,
+    },
+    canScroll: {
+      type: Boolean,
+      default: true,
+    },
+    pageSize: {
+      type: Number,
+      default: 0,
+    },
+    height: {
+      type: String,
+      default: "",
+    },
+  },
+  // 自定义事件
+  emits: {
+    // 分页事件
+    onPagging: null,
+  },
+  // 数据
+  data() {
+    return {
+      hoverRow: -1,
+      hoverCol: -1,
+      sortCol: "",
+      sortType: "",
+      currentPage: 1,
+    };
+  },
+  computed: {
+    tableData() {
+      let that = this;
+      if (this.sortCol == "") {
+        return this.data.data;
+      } else {
+        let data = this.data.data;
+
+        data.sort((a, b) => {
+          let rev = 1;
+          if (that.sortType == "ASC") rev = 1;
+          else if (that.sortType == "DESC") rev = -1;
+
+          if (a[that.sortCol] > b[that.sortCol]) return rev * 1;
+          if (a[that.sortCol] < b[that.sortCol]) return rev * -1;
+          return 0;
+        });
+        return data;
+      }
+    },
+    pageable() {
+      return this.pageSize != 0;
+    },
+    pages() {
+      if (this.pageable) return parseInt(this.data.total / this.pageSize) + 1;
+      else return 0;
+    },
+    startRow() {
+      if (this.pageable) return (this.currentPage - 1) * this.pageSize;
+      else return 0;
+    },
+    endRow() {
+      if (this.pageable) return this.currentPage * this.pageSize;
+      else return this.data.data.length;
+    },
+  },
+  // 函数
+  methods: {
+    clearCheckBox(time){
+      this.$nextTick(()=>{
+        setTimeout(()=>{
+          const domArray = document.querySelectorAll(".curCheckBox");
+          for(let i=0;i<domArray.length;i++){
+            domArray[i].checked=false;
+          }
+        },(time || 300));
+      });
+    },
+    onClick(col, data) {
+      if (col.click) col.click(event, data);
+    },
+    onSort(col) {
+    
+      if (col.sortable == true) {
+        this.sortCol = col.field;
+        switch (this.sortType) {
+          case "":
+            this.sortType = "DESC";
+            break;
+          case "DESC":
+            this.sortType = "ASC";
+            break;
+          case "ASC":
+            this.sortType = "DESC";
+            break;
+        }
+      }
+    },
+    template(col, data) {
+      if (!col.template) return data;
+      else return col.template(data);
+    },
+    hover(row, col) {
+      if (this.showHover) {
+        this.hoverRow = row;
+        if (this.showColHover) this.hoverCol = col;
+      }
+    },
+    leave() {
+      this.hoverRow = -1;
+      this.hoverCol = -1;
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.$emit("onPagging", {
+        pageIndex: this.currentPage,
+        pageSize: this.pageSize,
+        start: this.startRow,
+        end: this.endRow,
+      });
+    },
+  },
+  // 生命周期钩子
+  beforeCreate() {
+    // 创建前
+  },
+  created() {
+    // 创建后
+  },
+  beforeMount() {
+    // 渲染前
+  },
+  mounted() {
+    // 渲染后
+  },
+  beforeUpdate() {},
+  updated() {},
+};
+</script>
+
+<style lang="less">
+</style>

src/components/table/table.vue

@@ -1,277 +1,277 @@
-<template>
-  <table class="com-table">
-    <thead>
-      <tr>
-        <th
-          v-for="(col, index) of data.column"
-          :key="index"
-          :class="{ light: col.is_light }"
-          :style="{ width: col.width }"
-          @click="onSort(col)"
-        >
-          {{ col.name }}
-        </th>
-      </tr>
-    </thead>
-    <el-scrollbar>
-      <tbody :style="{ height: height }">
-        <tr v-for="(row, index) of tableData" :key="index">
-          <td
-            v-for="(col, i) of data.column"
-            :key="i"
-            :style="{ width: col.width }"
-            :class="{
-              light: hoverRow == row || hoverCol == col,
-              num: col.is_num,
-              'always-light': col.is_light || row.is_light,
-            }"
-            @mouseenter="hover(row, col)"
-            @mouseleave="leave()"
-          >
-            <component
-              :is="col.type ? col.type : 'span'"
-              v-bind="col.props"
-              v-html="template(col, row[col.field])"
-              @click="onClick(col, row)"
-            >
-            </component>
-          </td>
-        </tr>
-      </tbody>
-    </el-scrollbar>
-    <el-pagination
-      class="mg-t-8"
-      v-if="pageable"
-      @size-change="sizeChange"
-      @current-change="handleCurrentChange"
-      @prev-click="prevClick"
-      @next-click="nextClick"
-      :current-page="currentPage"
-      :page-size="pageSize"
-      :total="data.total"
-      v-bind="elPaggingProps"
-    >
-    </el-pagination>
-  </table>
-</template>
-
-<script>
-export default {
-  // 名称
-  name: "ComTable",
-  // 使用组件
-  components: {},
-  // 传入参数
-  props: {
-    /**
-             * {
-                    column: [{
-                        name: "风机名称",
-                        field: "name",
-                        type:'div',
-                        width:'', // 宽度
-                        is_num: false, // 是否为数字
-                        is_light: false, // 是否高亮
-                        template:function(){ }
-                        click:function(){} //点击事件
-                        sortable:fasle // 排序
-                        // 新增用于在表格中使用动态三方组件
-                        type:'el-tag', // * 新增 用于传入三方组件名称 实现三方组件引入  component :is 方式实现
-                        props:{}, // * 新增 用户传入三方组件的 props 与type同时使用
-                    },{
-                        name: "冷却风温度",
-                        field: "lqf",
-                        is_num: true,
-                        is_light: false
-                    }],
-                    data: [{
-                        name: "1E01",
-                        lqf: 15.78,
-                        is_light: false
-                    }],
-                    total:200
-                }
-             */
-    data: Object,
-    // hover 样式
-    showHover: {
-      type: Boolean,
-      default: true,
-    },
-    // 列高亮
-    showColHover: {
-      type: Boolean,
-      default: false,
-    },
-    canScroll: {
-      type: Boolean,
-      default: true,
-    },
-    pageSize: {
-      type: Number,
-      default: 0,
-    },
-    height: {
-      type: String,
-      default: "",
-    },
-    // 新增 支持 pagging 组件
-    elPaggingProps: {
-      type: Object,
-      default: () => {
-        return {
-          layout: "total, sizes, prev, pager, next, jumper",
-          // "page-sizes": [100, 200, 300, 400],
-        };
-      },
-    },
-  },
-  // 自定义事件
-  emits: {
-    // 分页事件
-    onPagging: null,
-  },
-  // 数据
-  data() {
-    return {
-      hoverRow: -1,
-      hoverCol: -1,
-      sortCol: "",
-      sortType: "",
-      currentPage: 1,
-    };
-  },
-  computed: {
-    tableData() {
-      let that = this;
-      if (this.sortCol == "") {
-        return this.data.data;
-      } else {
-        let data = this.data.data;
-
-        data.sort((a, b) => {
-          let rev = 1;
-          if (that.sortType == "ASC") rev = 1;
-          else if (that.sortType == "DESC") rev = -1;
-
-          if (a[that.sortCol] > b[that.sortCol]) return rev * 1;
-          if (a[that.sortCol] < b[that.sortCol]) return rev * -1;
-          return 0;
-        });
-        return data;
-      }
-    },
-    pageable() {
-      return this.pageSize >= 0;
-    },
-    pages() {
-      if (this.pageable) return parseInt(this.data.total / this.pageSize) + 1;
-      else return 0;
-    },
-    startRow() {
-      if (this.pageable) return (this.currentPage - 1) * this.pageSize;
-      else return 0;
-    },
-    endRow() {
-      if (this.pageable) return this.currentPage * this.pageSize;
-      else return this.data.data.length;
-    },
-  },
-  // 函数
-  methods: {
-    clearCheckBox(time) {
-      this.$nextTick(() => {
-        setTimeout(() => {
-          const domArray = document.querySelectorAll(".curCheckBox");
-          for (let i = 0; i < domArray.length; i++) {
-            domArray[i].checked = false;
-          }
-        }, time || 300);
-      });
-    },
-    onClick(col, data) {
-      if (col.click) col.click(event, data);
-    },
-    onSort(col) {
-      if (col.sortable == true) {
-        this.sortCol = col.field;
-        switch (this.sortType) {
-          case "":
-            this.sortType = "DESC";
-            break;
-          case "DESC":
-            this.sortType = "ASC";
-            break;
-          case "ASC":
-            this.sortType = "DESC";
-            break;
-        }
-      }
-    },
-    template(col, data) {
-      if (!col.template) return data;
-      else return col.template(data);
-    },
-    hover(row, col) {
-      if (this.showHover) {
-        this.hoverRow = row;
-        if (this.showColHover) this.hoverCol = col;
-      }
-    },
-    leave() {
-      this.hoverRow = -1;
-      this.hoverCol = -1;
-    },
-    handleCurrentChange(val) {
-      this.currentPage = val;
-      this.$emit("onPagging", {
-        pageIndex: this.currentPage,
-        pageSize: this.pageSize,
-        start: this.startRow,
-        end: this.endRow,
-      });
-    },
-    sizeChange(res) {
-      this.$emit("sizeChange", {
-        pageSize: res,
-      });
-    },
-    prevClick() {
-      this.pageClick({
-        type: "prev",
-        pageNo: this.currentPage,
-      });
-    },
-    nextClick() {
-      this.pageClick({
-        type: "next",
-        pageNo: this.currentPage,
-      });
-    },
-    pageClick(res) {
-      this.$emit("pageClick", res);
-    },
-  },
-  // 生命周期钩子
-  beforeCreate() {
-    // 创建前
-  },
-  created() {
-    // 创建后
-  },
-  beforeMount() {
-    // 渲染前
-  },
-  mounted() {
-    // 渲染后
-  },
-  beforeUpdate() {},
-  updated() {},
-};
-</script>
-
-<style lang="less">
-.com-table{
-  height: 100%;
-}
-</style>
+<template>
+  <table class="com-table">
+    <thead>
+      <tr>
+        <th
+          v-for="(col, index) of data.column"
+          :key="index"
+          :class="{ light: col.is_light }"
+          :style="{ width: col.width }"
+          @click="onSort(col)"
+        >
+          {{ col.name }}
+        </th>
+      </tr>
+    </thead>
+    <el-scrollbar>
+      <tbody :style="{ height: height }">
+        <tr v-for="(row, index) of tableData" :key="index">
+          <td
+            v-for="(col, i) of data.column"
+            :key="i"
+            :style="{ width: col.width }"
+            :class="{
+              light: hoverRow == row || hoverCol == col,
+              num: col.is_num,
+              'always-light': col.is_light || row.is_light,
+            }"
+            @mouseenter="hover(row, col)"
+            @mouseleave="leave()"
+          >
+            <component
+              :is="col.type ? col.type : 'span'"
+              v-bind="col.props"
+              v-html="template(col, row[col.field])"
+              @click="onClick(col, row)"
+            >
+            </component>
+          </td>
+        </tr>
+      </tbody>
+    </el-scrollbar>
+    <el-pagination
+      class="mg-t-8"
+      v-if="pageable"
+      @size-change="sizeChange"
+      @current-change="handleCurrentChange"
+      @prev-click="prevClick"
+      @next-click="nextClick"
+      :current-page="currentPage"
+      :page-size="pageSize"
+      :total="data.total"
+      v-bind="elPaggingProps"
+    >
+    </el-pagination>
+  </table>
+</template>
+
+<script>
+export default {
+  // 名称
+  name: "ComTable",
+  // 使用组件
+  components: {},
+  // 传入参数
+  props: {
+    /**
+             * {
+                    column: [{
+                        name: "风机名称",
+                        field: "name",
+                        type:'div',
+                        width:'', // 宽度
+                        is_num: false, // 是否为数字
+                        is_light: false, // 是否高亮
+                        template:function(){ }
+                        click:function(){} //点击事件
+                        sortable:fasle // 排序
+                        // 新增用于在表格中使用动态三方组件
+                        type:'el-tag', // * 新增 用于传入三方组件名称 实现三方组件引入  component :is 方式实现
+                        props:{}, // * 新增 用户传入三方组件的 props 与type同时使用
+                    },{
+                        name: "冷却风温度",
+                        field: "lqf",
+                        is_num: true,
+                        is_light: false
+                    }],
+                    data: [{
+                        name: "1E01",
+                        lqf: 15.78,
+                        is_light: false
+                    }],
+                    total:200
+                }
+             */
+    data: Object,
+    // hover 样式
+    showHover: {
+      type: Boolean,
+      default: true,
+    },
+    // 列高亮
+    showColHover: {
+      type: Boolean,
+      default: false,
+    },
+    canScroll: {
+      type: Boolean,
+      default: true,
+    },
+    pageSize: {
+      type: Number,
+      default: 0,
+    },
+    height: {
+      type: String,
+      default: "",
+    },
+    // 新增 支持 pagging 组件
+    elPaggingProps: {
+      type: Object,
+      default: () => {
+        return {
+          layout: "total, sizes, prev, pager, next, jumper",
+          // "page-sizes": [100, 200, 300, 400],
+        };
+      },
+    },
+  },
+  // 自定义事件
+  emits: {
+    // 分页事件
+    onPagging: null,
+  },
+  // 数据
+  data() {
+    return {
+      hoverRow: -1,
+      hoverCol: -1,
+      sortCol: "",
+      sortType: "",
+      currentPage: 1,
+    };
+  },
+  computed: {
+    tableData() {
+      let that = this;
+      if (this.sortCol == "") {
+        return this.data.data;
+      } else {
+        let data = this.data.data;
+
+        data.sort((a, b) => {
+          let rev = 1;
+          if (that.sortType == "ASC") rev = 1;
+          else if (that.sortType == "DESC") rev = -1;
+
+          if (a[that.sortCol] > b[that.sortCol]) return rev * 1;
+          if (a[that.sortCol] < b[that.sortCol]) return rev * -1;
+          return 0;
+        });
+        return data;
+      }
+    },
+    pageable() {
+      return this.pageSize >= 0;
+    },
+    pages() {
+      if (this.pageable) return parseInt(this.data.total / this.pageSize) + 1;
+      else return 0;
+    },
+    startRow() {
+      if (this.pageable) return (this.currentPage - 1) * this.pageSize;
+      else return 0;
+    },
+    endRow() {
+      if (this.pageable) return this.currentPage * this.pageSize;
+      else return this.data.data.length;
+    },
+  },
+  // 函数
+  methods: {
+    clearCheckBox(time) {
+      this.$nextTick(() => {
+        setTimeout(() => {
+          const domArray = document.querySelectorAll(".curCheckBox");
+          for (let i = 0; i < domArray.length; i++) {
+            domArray[i].checked = false;
+          }
+        }, time || 300);
+      });
+    },
+    onClick(col, data) {
+      if (col.click) col.click(event, data);
+    },
+    onSort(col) {
+      if (col.sortable == true) {
+        this.sortCol = col.field;
+        switch (this.sortType) {
+          case "":
+            this.sortType = "DESC";
+            break;
+          case "DESC":
+            this.sortType = "ASC";
+            break;
+          case "ASC":
+            this.sortType = "DESC";
+            break;
+        }
+      }
+    },
+    template(col, data) {
+      if (!col.template) return data;
+      else return col.template(data);
+    },
+    hover(row, col) {
+      if (this.showHover) {
+        this.hoverRow = row;
+        if (this.showColHover) this.hoverCol = col;
+      }
+    },
+    leave() {
+      this.hoverRow = -1;
+      this.hoverCol = -1;
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.$emit("onPagging", {
+        pageIndex: this.currentPage,
+        pageSize: this.pageSize,
+        start: this.startRow,
+        end: this.endRow,
+      });
+    },
+    sizeChange(res) {
+      this.$emit("sizeChange", {
+        pageSize: res,
+      });
+    },
+    prevClick() {
+      this.pageClick({
+        type: "prev",
+        pageNo: this.currentPage,
+      });
+    },
+    nextClick() {
+      this.pageClick({
+        type: "next",
+        pageNo: this.currentPage,
+      });
+    },
+    pageClick(res) {
+      this.$emit("pageClick", res);
+    },
+  },
+  // 生命周期钩子
+  beforeCreate() {
+    // 创建前
+  },
+  created() {
+    // 创建后
+  },
+  beforeMount() {
+    // 渲染前
+  },
+  mounted() {
+    // 渲染后
+  },
+  beforeUpdate() {},
+  updated() {},
+};
+</script>
+
+<style lang="less">
+.com-table{
+  height: 100%;
+}
+</style>

src/components/table/table2.vue

@@ -1,301 +1,301 @@
-<template>
-  <el-table
-    class="custom-table"
-    stripe
-    :data="data.data"
-    :height="height"
-    style="width: 100%"
-    @cell-click="onClick"
-    @header-click="onHeaderClick"
-    ref="table"
-  >
-    <el-table-column
-      v-for="(col, cindex) of data.column"
-      :key="col"
-      :prop="col.field"
-      :label="col.name"
-      :width="col.width"
-      :min-width="col.minWidth"
-      :sortable="col.sortable"
-      :sort-orders="sortOrder"
-      :show-overflow-tooltip="!col.slot"
-      :fixed="col.fixed"
-      :align="'center'"
-      :resizable="col.resizable"
-      :header-align="'center'"
-      :class-name="getClassName(cindex)"
-    >
-      <template v-if="col.slot == true" #default="item">
-        <slot
-          :name="col.field"
-          :column="col"
-          :row="item.row"
-          :all="item"
-          :data="item.row[col.field]"
-        ></slot>
-      </template>
-    </el-table-column>
-  </el-table>
-  <el-pagination
-    class="mg-t-8"
-    v-if="pageable"
-    @current-change="handleCurrentChange"
-    :current-page="currentPage"
-    v-modal:page-size="selfPageSize"
-    :total="data.total"
-    v-bind="elPaggingProps"
-  >
-  </el-pagination>
-</template>
-
-<script>
-export default {
-  // 名称
-  name: "ComTable",
-  // 使用组件
-  components: {},
-  // 传入参数
-  props: {
-    /**
-             * {
-                    column: [{
-                        name: "风机名称",
-                        field: "name",
-                        width:'', // 宽度
-                        click:function(){} // 点击事件
-                        sortable:fasle,
-                        slot:false,
-                        fixed:false,
-                        align:'center',
-                        resizable :false,
-                    }],
-                    total:200
-                }
-             */
-    data: Object,
-    height: {
-      type: String,
-      default: "100%",
-    },
-    pageSize: {
-      type: Number,
-      default: 0,
-    },
-    elPaggingProps: {
-      type: Object,
-      default: () => {
-        return {
-          layout: "total, sizes, prev, pager, next, jumper",
-          // "page-sizes": [100, 200, 300, 400],
-        };
-      },
-    },
-    isColumnLight: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  // 自定义事件
-  emits: {
-    // 分页事件
-    onPagging: null,
-  },
-  // 数据
-  data() {
-    return {
-      currentPage: 1,
-      headerIndex: -1,
-    };
-  },
-  computed: {
-    tableData() {
-      let that = this;
-      if (this.sortCol == "") {
-        return this.data.data;
-      } else {
-        let data = this.data.data;
-
-        data.sort((a, b) => {
-          let rev = 1;
-          if (that.sortType == "ASC") rev = 1;
-          else if (that.sortType == "DESC") rev = -1;
-
-          if (a[that.sortCol] > b[that.sortCol]) return rev * 1;
-          if (a[that.sortCol] < b[that.sortCol]) return rev * -1;
-          return 0;
-        });
-        return data;
-      }
-    },
-    pageable() {
-      return this.pageSize != 0;
-    },
-    pages() {
-      if (this.pageable) return parseInt(this.data.total / this.pageSize) + 1;
-      else return 0;
-    },
-    startRow() {
-      if (this.pageable) return (this.currentPage - 1) * this.pageSize;
-      else return 0;
-    },
-    endRow() {
-      if (this.pageable) return this.currentPage * this.pageSize;
-      else return this.data.data.length;
-    },
-    sortOrder:{
-      type:Array,
-      default:()  =>{
-        return ['descending', 'ascending', null]
-      }
-    }
-  },
-  // 函数
-  methods: {
-    onClick(row, column, cell, event) {
-      if (column.rawColumnKey.click) column.rawColumnKey.click(event, row);
-    },
-    handleCurrentChange(val) {
-      this.currentPage = val;
-      this.$emit("onPagging", {
-        pageIndex: this.currentPage,
-        pageSize: this.pageSize,
-        start: this.startRow,
-        end: this.endRow,
-      });
-    },
-    onHeaderClick(column, event) {
-      this.headerIndex = column.no;
-      this.$emit("headerClick", { index: column.no, event: event, col: column.rawColumnKey, data: this.data.data });
-    },
-    getClassName(cindex) {
-      if (this.isColumnLight == true && cindex == this.headerIndex) return "light";
-      return "";
-    },
-  },
-  // 生命周期钩子
-  beforeCreate() {
-    // 创建前
-  },
-  created() {
-    // 创建后
-    this.selfPageSize = this.pageSize
-
-  },
-  beforeMount() {
-    // 渲染前
-  },
-  mounted() {
-    // 渲染后
-  },
-  beforeUpdate() {
-    this.$nextTick(() => { //在数据加载完，重新渲染表格
-      // 数据刷新是闪烁，加上这个就不闪了 
-      this.$refs['table'].doLayout();
-    })
-  },
-  updated() {},
-};
-</script>
-
-<style lang="less">
-@titleGray: #9ca5a8;
-@rowGray: #606769;
-@darkBack: #536268;
-.com-table {
-  width: 100%;
-  border-collapse: collapse;
-
-  thead {
-    tr {
-      display: table;
-      table-layout: fixed;
-      width: 100%;
-
-      th {
-        background-color: fade(@darkBack, 20%);
-        height: 30px;
-        line-height: 30px;
-        color: @titleGray;
-        font-weight: 400;
-        font-size: @fontsize-s;
-        position: sticky;
-        top: 0;
-        cursor: pointer;
-
-        &.light,
-        &.always-light {
-          color: @green;
-        }
-      }
-    }
-  }
-
-  tbody {
-    display: block;
-
-    tr {
-      display: table;
-      table-layout: fixed;
-      width: 100%;
-
-      &:nth-child(2n) {
-        background-color: fade(@rowGray, 20%);
-      }
-
-      td {
-        padding: 0.556vh 0;
-        color: @rowGray;
-        text-align: center;
-        font-size: @fontsize-s;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-
-        &.light,
-        &.always-light {
-          color: @green !important;
-        }
-
-        &.num {
-          font-family: "Bicubik";
-          font-weight: 400;
-        }
-      }
-    }
-  }
-
-  .el-pagination {
-    color: @gray;
-    .el-pagination__total {
-      color: @gray;
-    }
-
-    button {
-      &.btn-next,
-      &.btn-prev {
-        background: center center no-repeat fade(@gray, 20);
-        color: @gray-l;
-      }
-      &:disabled {
-        color: @gray-l;
-        background-color: fade(@gray, 20);
-        cursor: not-allowed;
-      }
-    }
-
-    .el-pager li {
-      color: @gray-l;
-      background: fade(@gray, 20);
-      &.active {
-        color: @green;
-      }
-    }
-
-    .el-input__inner {
-      color: @gray-l;
-      background: fade(@gray, 20);
-      border: 1px solid fade(@gray, 20);
-    }
-  }
-}
-</style>
+<template>
+  <el-table
+    class="custom-table"
+    stripe
+    :data="data.data"
+    :height="height"
+    style="width: 100%"
+    @cell-click="onClick"
+    @header-click="onHeaderClick"
+    ref="table"
+  >
+    <el-table-column
+      v-for="(col, cindex) of data.column"
+      :key="col"
+      :prop="col.field"
+      :label="col.name"
+      :width="col.width"
+      :min-width="col.minWidth"
+      :sortable="col.sortable"
+      :sort-orders="sortOrder"
+      :show-overflow-tooltip="!col.slot"
+      :fixed="col.fixed"
+      :align="'center'"
+      :resizable="col.resizable"
+      :header-align="'center'"
+      :class-name="getClassName(cindex)"
+    >
+      <template v-if="col.slot == true" #default="item">
+        <slot
+          :name="col.field"
+          :column="col"
+          :row="item.row"
+          :all="item"
+          :data="item.row[col.field]"
+        ></slot>
+      </template>
+    </el-table-column>
+  </el-table>
+  <el-pagination
+    class="mg-t-8"
+    v-if="pageable"
+    @current-change="handleCurrentChange"
+    :current-page="currentPage"
+    v-modal:page-size="selfPageSize"
+    :total="data.total"
+    v-bind="elPaggingProps"
+  >
+  </el-pagination>
+</template>
+
+<script>
+export default {
+  // 名称
+  name: "ComTable",
+  // 使用组件
+  components: {},
+  // 传入参数
+  props: {
+    /**
+             * {
+                    column: [{
+                        name: "风机名称",
+                        field: "name",
+                        width:'', // 宽度
+                        click:function(){} // 点击事件
+                        sortable:fasle,
+                        slot:false,
+                        fixed:false,
+                        align:'center',
+                        resizable :false,
+                    }],
+                    total:200
+                }
+             */
+    data: Object,
+    height: {
+      type: String,
+      default: "100%",
+    },
+    pageSize: {
+      type: Number,
+      default: 0,
+    },
+    elPaggingProps: {
+      type: Object,
+      default: () => {
+        return {
+          layout: "total, sizes, prev, pager, next, jumper",
+          // "page-sizes": [100, 200, 300, 400],
+        };
+      },
+    },
+    isColumnLight: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  // 自定义事件
+  emits: {
+    // 分页事件
+    onPagging: null,
+  },
+  // 数据
+  data() {
+    return {
+      currentPage: 1,
+      headerIndex: -1,
+    };
+  },
+  computed: {
+    tableData() {
+      let that = this;
+      if (this.sortCol == "") {
+        return this.data.data;
+      } else {
+        let data = this.data.data;
+
+        data.sort((a, b) => {
+          let rev = 1;
+          if (that.sortType == "ASC") rev = 1;
+          else if (that.sortType == "DESC") rev = -1;
+
+          if (a[that.sortCol] > b[that.sortCol]) return rev * 1;
+          if (a[that.sortCol] < b[that.sortCol]) return rev * -1;
+          return 0;
+        });
+        return data;
+      }
+    },
+    pageable() {
+      return this.pageSize != 0;
+    },
+    pages() {
+      if (this.pageable) return parseInt(this.data.total / this.pageSize) + 1;
+      else return 0;
+    },
+    startRow() {
+      if (this.pageable) return (this.currentPage - 1) * this.pageSize;
+      else return 0;
+    },
+    endRow() {
+      if (this.pageable) return this.currentPage * this.pageSize;
+      else return this.data.data.length;
+    },
+    sortOrder:{
+      type:Array,
+      default:()  =>{
+        return ['descending', 'ascending', null]
+      }
+    }
+  },
+  // 函数
+  methods: {
+    onClick(row, column, cell, event) {
+      if (column.rawColumnKey.click) column.rawColumnKey.click(event, row);
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.$emit("onPagging", {
+        pageIndex: this.currentPage,
+        pageSize: this.pageSize,
+        start: this.startRow,
+        end: this.endRow,
+      });
+    },
+    onHeaderClick(column, event) {
+      this.headerIndex = column.no;
+      this.$emit("headerClick", { index: column.no, event: event, col: column.rawColumnKey, data: this.data.data });
+    },
+    getClassName(cindex) {
+      if (this.isColumnLight == true && cindex == this.headerIndex) return "light";
+      return "";
+    },
+  },
+  // 生命周期钩子
+  beforeCreate() {
+    // 创建前
+  },
+  created() {
+    // 创建后
+    this.selfPageSize = this.pageSize
+
+  },
+  beforeMount() {
+    // 渲染前
+  },
+  mounted() {
+    // 渲染后
+  },
+  beforeUpdate() {
+    this.$nextTick(() => { //在数据加载完，重新渲染表格
+      // 数据刷新是闪烁，加上这个就不闪了 
+      this.$refs['table'].doLayout();
+    })
+  },
+  updated() {},
+};
+</script>
+
+<style lang="less">
+@titleGray: #9ca5a8;
+@rowGray: #606769;
+@darkBack: #536268;
+.com-table {
+  width: 100%;
+  border-collapse: collapse;
+
+  thead {
+    tr {
+      display: table;
+      table-layout: fixed;
+      width: 100%;
+
+      th {
+        background-color: fade(@darkBack, 20%);
+        height: 30px;
+        line-height: 30px;
+        color: @titleGray;
+        font-weight: 400;
+        font-size: @fontsize-s;
+        position: sticky;
+        top: 0;
+        cursor: pointer;
+
+        &.light,
+        &.always-light {
+          color: @green;
+        }
+      }
+    }
+  }
+
+  tbody {
+    display: block;
+
+    tr {
+      display: table;
+      table-layout: fixed;
+      width: 100%;
+
+      &:nth-child(2n) {
+        background-color: fade(@rowGray, 20%);
+      }
+
+      td {
+        padding: 0.556vh 0;
+        color: @rowGray;
+        text-align: center;
+        font-size: @fontsize-s;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        &.light,
+        &.always-light {
+          color: @green !important;
+        }
+
+        &.num {
+          font-family: "Bicubik";
+          font-weight: 400;
+        }
+      }
+    }
+  }
+
+  .el-pagination {
+    color: @gray;
+    .el-pagination__total {
+      color: @gray;
+    }
+
+    button {
+      &.btn-next,
+      &.btn-prev {
+        background: center center no-repeat fade(@gray, 20);
+        color: @gray-l;
+      }
+      &:disabled {
+        color: @gray-l;
+        background-color: fade(@gray, 20);
+        cursor: not-allowed;
+      }
+    }
+
+    .el-pager li {
+      color: @gray-l;
+      background: fade(@gray, 20);
+      &.active {
+        color: @green;
+      }
+    }
+
+    .el-input__inner {
+      color: @gray-l;
+      background: fade(@gray, 20);
+      border: 1px solid fade(@gray, 20);
+    }
+  }
+}
+</style>

src/components/table/table3.vue

@@ -1,303 +1,303 @@
-<template>
-  <el-table
-    class="custom-table"
-    stripe
-    :data="data.data"
-    :height="height"
-    style="width: 100%"
-    @cell-click="onClick"
-    v-if="data && data.data"
-    :header-cell-style="{
-      background: 'rgb(30,30,30)',
-      color: 'rgb(220,220,220)',
-      padding: '4px',
-      fontSize: '14px',
-      'border-bottom': 'solid 1px rgba(77, 77, 77, 1)',
-    }"
-    :cell-style="{
-      height: '40px',
-      background: 'rgb(30,30,30)',
-      color: 'rgb(220,220,220)',
-      padding: '3px',
-      fontSize: '12px',
-      'border-bottom': '1px solid #000000',
-    }"
-  >
-    <el-table-column
-      v-for="col in data.column"
-      :key="col"
-      :prop="col.field"
-      :label="col.name"
-      :width="col.width"
-      :min-width="col.minWidth"
-      :sortable="col.sortable"
-      :sort-orders="sortOrder"
-      :sort-by="col.field + '.count'"
-      :show-overflow-tooltip="!col.slot"
-      :fixed="col.fixed"
-      :align="'center'"
-      :resizable="col.resizable"
-      :header-align="'center'"
-    >
-      <template v-if="col.slot == true" #default="item">
-        <slot
-          :name="col.field"
-          :column="col"
-          :row="item.row"
-          :all="item"
-          :data="item.row[col.field]"
-        ></slot>
-      </template>
-    </el-table-column>
-  </el-table>
-  <el-pagination
-    class="mg-t-8"
-    v-if="pageable"
-    @current-change="handleCurrentChange"
-    :current-page="currentPage"
-    v-modal:page-size="selfPageSize"
-    :total="data.total"
-    v-bind="elPaggingProps"
-  >
-  </el-pagination>
-</template>
-
-<script>
-export default {
-  // 名称
-  name: "ComTable",
-  // 使用组件
-  components: {},
-  // 传入参数
-  props: {
-    /**
-             * {
-                    column: [{
-                        name: "风机名称",
-                        field: "name",
-                        width:'', // 宽度
-                        click:function(){} // 点击事件
-                        sortable:fasle,
-                        slot:false,
-                        fixed:false,
-                        align:'center',
-                        resizable :false,
-                    }],
-                    total:200
-                }
-             */
-    data: Object,
-    height: {
-      type: String,
-      default: "",
-    },
-    pageSize: {
-      type: Number,
-      default: 0,
-    },
-    elPaggingProps: {
-      type: Object,
-      default: () => {
-        return {
-          layout: "total, sizes, prev, pager, next, jumper",
-          // "page-sizes": [100, 200, 300, 400],
-        };
-      },
-    },
-    sortOrder: {
-      type: Array,
-      default: () => {
-        return ["descending", "ascending", null];
-      },
-    },
-  },
-  // 自定义事件
-  emits: {
-    // 分页事件
-    onPagging: null,
-  },
-  // 数据
-  data() {
-    return {
-      currentPage: 1,
-    };
-  },
-  computed: {
-    tableData() {
-      let that = this;
-      if (this.sortCol == "") {
-        return this.data.data;
-      } else {
-        let data = this.data.data;
-
-        data.sort((a, b) => {
-          let rev = 1;
-          if (that.sortType == "ASC") rev = 1;
-          else if (that.sortType == "DESC") rev = -1;
-
-          if (a[that.sortCol] > b[that.sortCol]) return rev * 1;
-          if (a[that.sortCol] < b[that.sortCol]) return rev * -1;
-          return 0;
-        });
-        return data;
-      }
-    },
-    pageable() {
-      return this.pageSize != 0;
-    },
-    pages() {
-      if (this.pageable) return parseInt(this.data.total / this.pageSize) + 1;
-      else return 0;
-    },
-    startRow() {
-      if (this.pageable) return (this.currentPage - 1) * this.pageSize;
-      else return 0;
-    },
-    endRow() {
-      if (this.pageable) return this.currentPage * this.pageSize;
-      else return this.data.data.length;
-    },
-    // sortOrder: {
-    //   type: Array,
-    //   default: () => {
-    //     return ["descending", "ascending", null];
-    //   },
-    // },
-  },
-  // 函数
-  methods: {
-    onClick(row, column, cell, event) {
-      if (column.rawColumnKey.click) column.rawColumnKey.click(event, row);
-    },
-    handleCurrentChange(val) {
-      this.currentPage = val;
-      this.$emit("onPagging", {
-        pageIndex: this.currentPage,
-        pageSize: this.pageSize,
-        start: this.startRow,
-        end: this.endRow,
-      });
-    },
-  },
-  // 生命周期钩子
-  beforeCreate() {
-    // 创建前
-  },
-  created() {
-    // 创建后
-    this.selfPageSize = this.pageSize;
-  },
-  beforeMount() {
-    // 渲染前
-  },
-  mounted() {
-    // 渲染后
-  },
-  beforeUpdate() {},
-  updated() {},
-};
-</script>
-
-<style lang="less" scoped>
-@titleGray: #9ca5a8;
-@rowGray: #606769;
-@darkBack: #536268;
-.com-table {
-  width: 100%;
-  border-collapse: collapse;
-
-  thead {
-    tr {
-      display: table;
-      table-layout: fixed;
-      width: 100%;
-
-      th {
-        background-color: fade(@darkBack, 20%);
-        height: 30px;
-        line-height: 30px;
-        color: @titleGray;
-        font-weight: 400;
-        font-size: 12px;
-        position: sticky;
-        top: 0;
-        cursor: pointer;
-
-        &.light,
-        &.always-light {
-          color: #05bb4c;
-        }
-      }
-    }
-  }
-
-  tbody {
-    display: block;
-
-    tr {
-      display: table;
-      table-layout: fixed;
-      width: 100%;
-
-      &:nth-child(2n) {
-        background-color: fade(@rowGray, 20%);
-      }
-
-      td {
-        padding: 0.556vh 0;
-        color: @rowGray;
-        text-align: center;
-        font-size: 12px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-
-        &.light,
-        &.always-light {
-          color: #05bb4c !important;
-        }
-
-        &.num {
-          font-family: "Bicubik";
-          font-weight: 400;
-        }
-      }
-    }
-  }
-
-  .el-pagination {
-    color: #606769;
-    .el-pagination__total {
-      color: #606769;
-    }
-
-    button {
-      &.btn-next,
-      &.btn-prev {
-        background: center center no-repeat fade(#606769, 20);
-        color: #b3bdc0;
-      }
-      &:disabled {
-        color: #b3bdc0;
-        background-color: fade(#606769, 20);
-        cursor: not-allowed;
-      }
-    }
-
-    .el-pager li {
-      color: #b3bdc0;
-      background: fade(#606769, 20);
-      &.active {
-        color: #05bb4c;
-      }
-    }
-
-    .el-input__inner {
-      color: #b3bdc0;
-      background: fade(#606769, 20);
-      border: 1px solid fade(#606769, 20);
-    }
-  }
-}
-
-</style>
+<template>
+  <el-table
+    class="custom-table"
+    stripe
+    :data="data.data"
+    :height="height"
+    style="width: 100%"
+    @cell-click="onClick"
+    v-if="data && data.data"
+    :header-cell-style="{
+      background: 'rgb(30,30,30)',
+      color: 'rgb(220,220,220)',
+      padding: '4px',
+      fontSize: '14px',
+      'border-bottom': 'solid 1px rgba(77, 77, 77, 1)',
+    }"
+    :cell-style="{
+      height: '40px',
+      background: 'rgb(30,30,30)',
+      color: 'rgb(220,220,220)',
+      padding: '3px',
+      fontSize: '12px',
+      'border-bottom': '1px solid #000000',
+    }"
+  >
+    <el-table-column
+      v-for="col in data.column"
+      :key="col"
+      :prop="col.field"
+      :label="col.name"
+      :width="col.width"
+      :min-width="col.minWidth"
+      :sortable="col.sortable"
+      :sort-orders="sortOrder"
+      :sort-by="col.field + '.count'"
+      :show-overflow-tooltip="!col.slot"
+      :fixed="col.fixed"
+      :align="'center'"
+      :resizable="col.resizable"
+      :header-align="'center'"
+    >
+      <template v-if="col.slot == true" #default="item">
+        <slot
+          :name="col.field"
+          :column="col"
+          :row="item.row"
+          :all="item"
+          :data="item.row[col.field]"
+        ></slot>
+      </template>
+    </el-table-column>
+  </el-table>
+  <el-pagination
+    class="mg-t-8"
+    v-if="pageable"
+    @current-change="handleCurrentChange"
+    :current-page="currentPage"
+    v-modal:page-size="selfPageSize"
+    :total="data.total"
+    v-bind="elPaggingProps"
+  >
+  </el-pagination>
+</template>
+
+<script>
+export default {
+  // 名称
+  name: "ComTable",
+  // 使用组件
+  components: {},
+  // 传入参数
+  props: {
+    /**
+             * {
+                    column: [{
+                        name: "风机名称",
+                        field: "name",
+                        width:'', // 宽度
+                        click:function(){} // 点击事件
+                        sortable:fasle,
+                        slot:false,
+                        fixed:false,
+                        align:'center',
+                        resizable :false,
+                    }],
+                    total:200
+                }
+             */
+    data: Object,
+    height: {
+      type: String,
+      default: "",
+    },
+    pageSize: {
+      type: Number,
+      default: 0,
+    },
+    elPaggingProps: {
+      type: Object,
+      default: () => {
+        return {
+          layout: "total, sizes, prev, pager, next, jumper",
+          // "page-sizes": [100, 200, 300, 400],
+        };
+      },
+    },
+    sortOrder: {
+      type: Array,
+      default: () => {
+        return ["descending", "ascending", null];
+      },
+    },
+  },
+  // 自定义事件
+  emits: {
+    // 分页事件
+    onPagging: null,
+  },
+  // 数据
+  data() {
+    return {
+      currentPage: 1,
+    };
+  },
+  computed: {
+    tableData() {
+      let that = this;
+      if (this.sortCol == "") {
+        return this.data.data;
+      } else {
+        let data = this.data.data;
+
+        data.sort((a, b) => {
+          let rev = 1;
+          if (that.sortType == "ASC") rev = 1;
+          else if (that.sortType == "DESC") rev = -1;
+
+          if (a[that.sortCol] > b[that.sortCol]) return rev * 1;
+          if (a[that.sortCol] < b[that.sortCol]) return rev * -1;
+          return 0;
+        });
+        return data;
+      }
+    },
+    pageable() {
+      return this.pageSize != 0;
+    },
+    pages() {
+      if (this.pageable) return parseInt(this.data.total / this.pageSize) + 1;
+      else return 0;
+    },
+    startRow() {
+      if (this.pageable) return (this.currentPage - 1) * this.pageSize;
+      else return 0;
+    },
+    endRow() {
+      if (this.pageable) return this.currentPage * this.pageSize;
+      else return this.data.data.length;
+    },
+    // sortOrder: {
+    //   type: Array,
+    //   default: () => {
+    //     return ["descending", "ascending", null];
+    //   },
+    // },
+  },
+  // 函数
+  methods: {
+    onClick(row, column, cell, event) {
+      if (column.rawColumnKey.click) column.rawColumnKey.click(event, row);
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.$emit("onPagging", {
+        pageIndex: this.currentPage,
+        pageSize: this.pageSize,
+        start: this.startRow,
+        end: this.endRow,
+      });
+    },
+  },
+  // 生命周期钩子
+  beforeCreate() {
+    // 创建前
+  },
+  created() {
+    // 创建后
+    this.selfPageSize = this.pageSize;
+  },
+  beforeMount() {
+    // 渲染前
+  },
+  mounted() {
+    // 渲染后
+  },
+  beforeUpdate() {},
+  updated() {},
+};
+</script>
+
+<style lang="less" scoped>
+@titleGray: #9ca5a8;
+@rowGray: #606769;
+@darkBack: #536268;
+.com-table {
+  width: 100%;
+  border-collapse: collapse;
+
+  thead {
+    tr {
+      display: table;
+      table-layout: fixed;
+      width: 100%;
+
+      th {
+        background-color: fade(@darkBack, 20%);
+        height: 30px;
+        line-height: 30px;
+        color: @titleGray;
+        font-weight: 400;
+        font-size: 12px;
+        position: sticky;
+        top: 0;
+        cursor: pointer;
+
+        &.light,
+        &.always-light {
+          color: #05bb4c;
+        }
+      }
+    }
+  }
+
+  tbody {
+    display: block;
+
+    tr {
+      display: table;
+      table-layout: fixed;
+      width: 100%;
+
+      &:nth-child(2n) {
+        background-color: fade(@rowGray, 20%);
+      }
+
+      td {
+        padding: 0.556vh 0;
+        color: @rowGray;
+        text-align: center;
+        font-size: 12px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        &.light,
+        &.always-light {
+          color: #05bb4c !important;
+        }
+
+        &.num {
+          font-family: "Bicubik";
+          font-weight: 400;
+        }
+      }
+    }
+  }
+
+  .el-pagination {
+    color: #606769;
+    .el-pagination__total {
+      color: #606769;
+    }
+
+    button {
+      &.btn-next,
+      &.btn-prev {
+        background: center center no-repeat fade(#606769, 20);
+        color: #b3bdc0;
+      }
+      &:disabled {
+        color: #b3bdc0;
+        background-color: fade(#606769, 20);
+        cursor: not-allowed;
+      }
+    }
+
+    .el-pager li {
+      color: #b3bdc0;
+      background: fade(#606769, 20);
+      &.active {
+        color: #05bb4c;
+      }
+    }
+
+    .el-input__inner {
+      color: #b3bdc0;
+      background: fade(#606769, 20);
+      border: 1px solid fade(#606769, 20);
+    }
+  }
+}
+
+</style>

src/components/warning/warningArea.vue

@@ -1,115 +1,115 @@
-<template>
-  <div class="body">
-    <img class="logo" src="../../assets/img/logo.png" alt="" />
-    <div class="title">
-      告警区
-      <i
-        class="icon el-icon-bell"
-        title="点击播放测试音频"
-        style="color: rgb(219, 215, 0)"
-        @click="playSound"
-      ></i>
-    </div>
-    <div class="record" @click="showRecord">告警记录</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>
-  </div>
-  <WarningRecords v-model="display"></WarningRecords>
-</template>
-<script>
-import WarningCard from "./warningCard.vue";
-import WarningRecords from "./warningRecords.vue";
-export default {
-  components: {
-    WarningCard,
-    WarningRecords,
-  },
-  data() {
-    return {
-      display: false,
-    };
-  },
-  methods: {
-    showRecord() {
-      this.display = true;
-    },
-    playSound() {
-      this.audio = new Audio("./static/sound/track.mp3");
-      this.audio.play();
-    },
-  },
-};
-</script>
-<style scoped>
-.body {
-  border: 1px solid #373737;
-  width: 100%;
-  margin-left: 15px;
-  margin-top: 10px;
-  height: 25vh;
-}
-
-.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 .icon {
-  position: absolute;
-  font-size: 20px;
-  left: 50px;
-  top: calc(50% - 10px);
-  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%;
-}
-.record {
-  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);
-}
-
-.logo {
-  position: absolute;
-  top: 2px;
-  left: 12px;
-}
+<template>
+  <div class="body">
+    <img class="logo" src="../../assets/img/logo.png" alt="" />
+    <div class="title">
+      告警区
+      <i
+        class="icon el-icon-bell"
+        title="点击播放测试音频"
+        style="color: rgb(219, 215, 0)"
+        @click="playSound"
+      ></i>
+    </div>
+    <div class="record" @click="showRecord">告警记录</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>
+  </div>
+  <WarningRecords v-model="display"></WarningRecords>
+</template>
+<script>
+import WarningCard from "./warningCard.vue";
+import WarningRecords from "./warningRecords.vue";
+export default {
+  components: {
+    WarningCard,
+    WarningRecords,
+  },
+  data() {
+    return {
+      display: false,
+    };
+  },
+  methods: {
+    showRecord() {
+      this.display = true;
+    },
+    playSound() {
+      this.audio = new Audio("./static/sound/track.mp3");
+      this.audio.play();
+    },
+  },
+};
+</script>
+<style scoped>
+.body {
+  border: 1px solid #373737;
+  width: 100%;
+  margin-left: 15px;
+  margin-top: 10px;
+  height: 25vh;
+}
+
+.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 .icon {
+  position: absolute;
+  font-size: 20px;
+  left: 50px;
+  top: calc(50% - 10px);
+  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%;
+}
+.record {
+  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);
+}
+
+.logo {
+  position: absolute;
+  top: 2px;
+  left: 12px;
+}
 </style>

src/components/warning/warningCard.vue

@@ -1,421 +1,421 @@
-/* 告警区 */
-<template>
-  <div style="padding-left: 5px; padding-right: 5px">
-    <el-table
-      :data="values"
-      class="table"
-      height="19vh"
-      :header-cell-style="{
-        background: '#000000',
-        color: 'rgb(220,220,220)',
-        padding: '4px',
-        fontSize: '14px',
-        'border-bottom': 'solid 1px black',
-      }"
-      :cell-class-name="setCellClassName"
-      @row-dblclick="itemDblclick"
-    >
-      <el-table-column
-        prop="lastUpdateTime"
-        align="center"
-        label="时间"
-        width="150"
-      >
-      </el-table-column>
-
-      <el-table-column
-        prop="stationName"
-        align="center"
-        label="场站名称"
-        width="100"
-      >
-      </el-table-column>
-      <el-table-column width="60" align="end">
-        <template #default="scope">
-          <span>
-            <img
-              class="titleImg"
-              v-if="scope.row.category1 === 'SYZ'"
-              src="../../assets/img/controlcenter/warning.png"
-              alt=""
-            />
-          </span>
-        </template>
-      </el-table-column>
-      <el-table-column prop="alertText" align="center" label="描述" width="160">
-      </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"
-    :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() {
-    this.faultMessage();
-    this.intervals = setInterval(this.faultMessage, 15000);
-  },
-  mounted() {},
-  props: {},
-  data() {
-    return {
-      values: [],
-      dialogVisible: false,
-      showSvg: false,
-      svgVisible: false,
-      svgWeb: "",
-      stationName: "",
-      currentWindturbine: {},
-      audio: null,
-      intervals: null,
-    };
-  },
-  methods: {
-    faultMessage(json) {
-      api.alarmFault().then((res) => {
-        if (res.data) {
-          this.values = []
-          let val = res.data;
-          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);
-
-            // this.$store.commit(
-            //   "showWarningMask",
-            //   syzAlarmArray.some((ele) => {
-            //     return ele.rank === this.$store.state.syzAlarmRank;
-            //   })
-            // );
-
-            // 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);
-
-            for (let v in val) {
-              let vl = val[v];
-              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) {
-            //   let syzRes = syzAlarmArray.find((syzAlarmItem) => {
-            //     return (
-            //       syzAlarmItem.category1 === "SYZ" &&
-            //       syzAlarmItem.rank === this.$store.state.syzAlarmRank &&
-            //       this.$store.getters.syzArray.some((findEle) => {
-            //         return (
-            //           findEle.id === syzAlarmItem.stationId && !findEle.isMute
-            //         );
-            //       })
-            //     );
-            //   });
-            //   if (syzRes) {
-            //     // this.syzAudioPlay(syzAlarmArray);
-            //     this.audioPlay(this.getSound("syz"));
-            //   } else {
-            //     this.audioPlay(this.getSound("wd"));
-            //   }
-            // } 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 (cEle.stationId === 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;
-      }
-    },
-    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,
-          });
-          this.faultMessage();
-        });
-    },
-    setCellClassName({ row }) {
-      if (row.rank >= this.$store.state.fjAlarmRank) {
-        return "cellBase flicker";
-      } else {
-        return "cellBase";
-      }
-    },
-  },
-  unmounted() {
-    clearInterval(this.intervals);
-    this.intervals = null;
-  },
-};
-</script>
-<style scoped>
-.el-table::before {
-  width: 0;
-}
-
-.table {
-  background-color: #000000;
-}
-
-.titleImg {
-  width: 20px;
-  height: 20px;
-  margin-left: 22px;
-  display: flex;
-}
-
-: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;
-}
-</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>
+/* 告警区 */
+<template>
+  <div style="padding-left: 5px; padding-right: 5px">
+    <el-table
+      :data="values"
+      class="table"
+      height="19vh"
+      :header-cell-style="{
+        background: '#000000',
+        color: 'rgb(220,220,220)',
+        padding: '4px',
+        fontSize: '14px',
+        'border-bottom': 'solid 1px black',
+      }"
+      :cell-class-name="setCellClassName"
+      @row-dblclick="itemDblclick"
+    >
+      <el-table-column
+        prop="lastUpdateTime"
+        align="center"
+        label="时间"
+        width="150"
+      >
+      </el-table-column>
+
+      <el-table-column
+        prop="stationName"
+        align="center"
+        label="场站名称"
+        width="100"
+      >
+      </el-table-column>
+      <el-table-column width="60" align="end">
+        <template #default="scope">
+          <span>
+            <img
+              class="titleImg"
+              v-if="scope.row.category1 === 'SYZ'"
+              src="../../assets/img/controlcenter/warning.png"
+              alt=""
+            />
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="alertText" align="center" label="描述" width="160">
+      </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"
+    :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() {
+    this.faultMessage();
+    this.intervals = setInterval(this.faultMessage, 15000);
+  },
+  mounted() {},
+  props: {},
+  data() {
+    return {
+      values: [],
+      dialogVisible: false,
+      showSvg: false,
+      svgVisible: false,
+      svgWeb: "",
+      stationName: "",
+      currentWindturbine: {},
+      audio: null,
+      intervals: null,
+    };
+  },
+  methods: {
+    faultMessage(json) {
+      api.alarmFault().then((res) => {
+        if (res.data) {
+          this.values = []
+          let val = res.data;
+          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);
+
+            // this.$store.commit(
+            //   "showWarningMask",
+            //   syzAlarmArray.some((ele) => {
+            //     return ele.rank === this.$store.state.syzAlarmRank;
+            //   })
+            // );
+
+            // 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);
+
+            for (let v in val) {
+              let vl = val[v];
+              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) {
+            //   let syzRes = syzAlarmArray.find((syzAlarmItem) => {
+            //     return (
+            //       syzAlarmItem.category1 === "SYZ" &&
+            //       syzAlarmItem.rank === this.$store.state.syzAlarmRank &&
+            //       this.$store.getters.syzArray.some((findEle) => {
+            //         return (
+            //           findEle.id === syzAlarmItem.stationId && !findEle.isMute
+            //         );
+            //       })
+            //     );
+            //   });
+            //   if (syzRes) {
+            //     // this.syzAudioPlay(syzAlarmArray);
+            //     this.audioPlay(this.getSound("syz"));
+            //   } else {
+            //     this.audioPlay(this.getSound("wd"));
+            //   }
+            // } 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 (cEle.stationId === 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;
+      }
+    },
+    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,
+          });
+          this.faultMessage();
+        });
+    },
+    setCellClassName({ row }) {
+      if (row.rank >= this.$store.state.fjAlarmRank) {
+        return "cellBase flicker";
+      } else {
+        return "cellBase";
+      }
+    },
+  },
+  unmounted() {
+    clearInterval(this.intervals);
+    this.intervals = null;
+  },
+};
+</script>
+<style scoped>
+.el-table::before {
+  width: 0;
+}
+
+.table {
+  background-color: #000000;
+}
+
+.titleImg {
+  width: 20px;
+  height: 20px;
+  margin-left: 22px;
+  display: flex;
+}
+
+: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;
+}
+</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/warning/warningRecords.vue

@@ -1,256 +1,256 @@
-<template>
-  <el-dialog
-    width="60%"
-    @open="opened()"
-    @closed="closed()"
-    :show-close="false"
-    class="my-info-dialog"
-  >
-    <template #title>
-      <div class="showTitles">
-        <div class="titles">报警记录</div>
-      </div>
-    </template>
-    <div class="recordBody">
-      <div class="operate">
-        <el-date-picker
-          class="picker"
-          @change="changes"
-          v-model="timeValue"
-          type="datetimerange"
-          range-separator="至"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-        >
-        </el-date-picker>
-        <div class="showTitle">场站：</div>
-        <el-select
-          class="selects"
-          clearable
-          v-model="selectValue"
-          placeholder="请选择"
-        >
-          <el-option
-            v-for="item in stationList"
-            :key="item.id"
-            :label="item.stationName"
-            :value="item.id"
-          >
-          </el-option>
-        </el-select>
-        <div class="showTitle">搜索:</div>
-        <el-input class="inputs" placeholder="请输入" v-model="filterText"></el-input>
-        <div class="buttons" @click="search()">查询</div>
-      </div>
-      <div class="warningList">
-        <el-table
-          :data="recordData"
-          class="table"
-          height="55vh"
-          :header-cell-style="{
-            background: '#000000',
-            color: 'rgb(220,220,220)',
-            padding: '4px',
-            fontSize: '14px',
-            'border-bottom': 'solid 1px black',
-          }"
-          :cell-style="{
-            height: '45px',
-            background: 'rgb(30,30,30)',
-            color: 'rgb(220,220,220)',
-            padding: '3px',
-            fontSize: '12px',
-            'border-bottom': '1px solid #000000',
-          }"
-          @row-dblclick="itemDblclick"
-        >
-          <el-table-column
-            prop="faultTime"
-            align="center"
-            label="故障时间"
-            width="280"
-          >
-          </el-table-column>
-          
-          <el-table-column
-            prop="categoryName"
-            align="center"
-            label="故障类型"
-          >
-          </el-table-column>
-
-          <el-table-column
-            prop="stationName"
-            align="center"
-            label="场站名称"
-          >
-          </el-table-column>
-          
-          <el-table-column width="80"  align="end">
-            <template #default="scope">
-              <span>
-                <img
-                  class="titleImg"
-                  v-if="scope.row.category1 === 'SYZ'"
-                  src="../../assets/img/controlcenter/warning.png"
-                  alt=""
-                />
-              </span>
-            </template>
-          </el-table-column>
-          <el-table-column
-            prop="alertText"
-            align="center"
-            label="描述"
-            width="520"
-          >
-          </el-table-column>
-        </el-table>
-        
-      </div>
-      <div class="paginations">
-          <el-pagination
-            background
-            layout="prev, pager, next"
-            :total="total"
-            @current-change="handleCurrentChange"
-            :hide-on-single-page="true"
-            :page-size="currentPage"
-            >
-          </el-pagination>
-        </div>
-    </div>
-  </el-dialog>
-</template>
-<script>
-import dayjs from "dayjs";
-import api from "api/index";
-export default {
-  data() {
-    return {
-      timeValue: [],
-      chooseTime: [],
-      recordData: [],
-      pageIndex: 1,
-      currentPage: 10,
-      total: 10,
-      selectValue: "",
-      filterText: "",
-      stationList: [],
-    };
-  },
-  updated() {},
-  methods: {
-    faultHistory() {
-      api
-        .getFaultHistory({
-          startTime: dayjs(this.timeValue[0]).format("YYYY-MM-DD HH:mm:ss"),
-          endTime: dayjs(this.timeValue[1]).format("YYYY-MM-DD HH:mm:ss"),
-          stationid: this.selectValue,
-          keyword: this.filterText,
-          pageSize: this.currentPage,
-          pageIndex: this.pageIndex,
-        })
-        .then((res) => {
-          this.recordData = res.data.records;
-          this.total = res.data.total
-        });
-    },
-    changes() {
-      let timeValue = [];
-      this.timeValue?.forEach((item) => {
-        timeValue.push(dayjs(item).valueOf());
-      });
-      this.chooseTime = timeValue;
-    },
-    search() {
-      this.faultHistory();
-    },
-    opened() {
-      if (this.timeValue.length === 0) {
-        let date = new Date();
-        this.timeValue[0] = date.getTime() - 86400000;
-        this.timeValue[1] = date.getTime();
-      }
-      this.chooseTime = this.timeValue;
-      this.faultHistory();
-      this.stationList = this.$store.state.stationList
-      console.log(this.stationList);
-    },
-    closed() {
-      this.chooseTime = [];
-      this.pageIndex = 1;
-    },
-    handleCurrentChange(val) {
-      this.pageIndex = val;
-      this.faultHistory();
-    },
-  },
-};
-</script>
-<style scoped>
-.recordBody {
-  display: flex;
-  flex-direction: column;
-  align-items: baseline;
-  background-color: black;
-  width: 100%;
-  margin-top: -30px;
-  padding-top: 10px;
-}
-.warningList {
-  width: 100%;
-  height: 60vh;
-}
-.paginations {
-  display: flex;
-  flex-direction: row-reverse;
-  background-color: #000000;
-  margin-top: -60px;
-  z-index: 2;
-  width: 100%;
-  padding-bottom: 30px;
-}
-.selects {
-  border: none;
-  width: 174px !important;
-}
-.inputs {
-  border: none;
-  width: 174px !important;
-  margin-right: 20px;
-}
-.showTitle{
-  margin-left: 20px;
-  margin-right: 10px;
-  color: #ffffff;
-  font-size: 16px;
-}
-.titleImg {
-  width: 20px;
-  height: 20px;
-  margin-left: 22px;
-  display: flex;
-}
-.table {
-  background-color: #000000 !important;
-}
-
-.el-table td,
-.el-table th.is-leaf {
-  border-bottom: 1px solid #000000 !important;
-}
-
-.el-table__header {
-  width: 100% !important;
-}
-
-.el-table__body-wrapper {
-  background-color: #000000 !important;
-}
-
-.el-table::before {
-  width: 0;
-}
-
+<template>
+  <el-dialog
+    width="60%"
+    @open="opened()"
+    @closed="closed()"
+    :show-close="false"
+    class="my-info-dialog"
+  >
+    <template #title>
+      <div class="showTitles">
+        <div class="titles">报警记录</div>
+      </div>
+    </template>
+    <div class="recordBody">
+      <div class="operate">
+        <el-date-picker
+          class="picker"
+          @change="changes"
+          v-model="timeValue"
+          type="datetimerange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        >
+        </el-date-picker>
+        <div class="showTitle">场站：</div>
+        <el-select
+          class="selects"
+          clearable
+          v-model="selectValue"
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in stationList"
+            :key="item.id"
+            :label="item.stationName"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
+        <div class="showTitle">搜索:</div>
+        <el-input class="inputs" placeholder="请输入" v-model="filterText"></el-input>
+        <div class="buttons" @click="search()">查询</div>
+      </div>
+      <div class="warningList">
+        <el-table
+          :data="recordData"
+          class="table"
+          height="55vh"
+          :header-cell-style="{
+            background: '#000000',
+            color: 'rgb(220,220,220)',
+            padding: '4px',
+            fontSize: '14px',
+            'border-bottom': 'solid 1px black',
+          }"
+          :cell-style="{
+            height: '45px',
+            background: 'rgb(30,30,30)',
+            color: 'rgb(220,220,220)',
+            padding: '3px',
+            fontSize: '12px',
+            'border-bottom': '1px solid #000000',
+          }"
+          @row-dblclick="itemDblclick"
+        >
+          <el-table-column
+            prop="faultTime"
+            align="center"
+            label="故障时间"
+            width="280"
+          >
+          </el-table-column>
+          
+          <el-table-column
+            prop="categoryName"
+            align="center"
+            label="故障类型"
+          >
+          </el-table-column>
+
+          <el-table-column
+            prop="stationName"
+            align="center"
+            label="场站名称"
+          >
+          </el-table-column>
+          
+          <el-table-column width="80"  align="end">
+            <template #default="scope">
+              <span>
+                <img
+                  class="titleImg"
+                  v-if="scope.row.category1 === 'SYZ'"
+                  src="../../assets/img/controlcenter/warning.png"
+                  alt=""
+                />
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="alertText"
+            align="center"
+            label="描述"
+            width="520"
+          >
+          </el-table-column>
+        </el-table>
+        
+      </div>
+      <div class="paginations">
+          <el-pagination
+            background
+            layout="prev, pager, next"
+            :total="total"
+            @current-change="handleCurrentChange"
+            :hide-on-single-page="true"
+            :page-size="currentPage"
+            >
+          </el-pagination>
+        </div>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import dayjs from "dayjs";
+import api from "api/index";
+export default {
+  data() {
+    return {
+      timeValue: [],
+      chooseTime: [],
+      recordData: [],
+      pageIndex: 1,
+      currentPage: 10,
+      total: 10,
+      selectValue: "",
+      filterText: "",
+      stationList: [],
+    };
+  },
+  updated() {},
+  methods: {
+    faultHistory() {
+      api
+        .getFaultHistory({
+          startTime: dayjs(this.timeValue[0]).format("YYYY-MM-DD HH:mm:ss"),
+          endTime: dayjs(this.timeValue[1]).format("YYYY-MM-DD HH:mm:ss"),
+          stationid: this.selectValue,
+          keyword: this.filterText,
+          pageSize: this.currentPage,
+          pageIndex: this.pageIndex,
+        })
+        .then((res) => {
+          this.recordData = res.data.records;
+          this.total = res.data.total
+        });
+    },
+    changes() {
+      let timeValue = [];
+      this.timeValue?.forEach((item) => {
+        timeValue.push(dayjs(item).valueOf());
+      });
+      this.chooseTime = timeValue;
+    },
+    search() {
+      this.faultHistory();
+    },
+    opened() {
+      if (this.timeValue.length === 0) {
+        let date = new Date();
+        this.timeValue[0] = date.getTime() - 86400000;
+        this.timeValue[1] = date.getTime();
+      }
+      this.chooseTime = this.timeValue;
+      this.faultHistory();
+      this.stationList = this.$store.state.stationList
+      console.log(this.stationList);
+    },
+    closed() {
+      this.chooseTime = [];
+      this.pageIndex = 1;
+    },
+    handleCurrentChange(val) {
+      this.pageIndex = val;
+      this.faultHistory();
+    },
+  },
+};
+</script>
+<style scoped>
+.recordBody {
+  display: flex;
+  flex-direction: column;
+  align-items: baseline;
+  background-color: black;
+  width: 100%;
+  margin-top: -30px;
+  padding-top: 10px;
+}
+.warningList {
+  width: 100%;
+  height: 60vh;
+}
+.paginations {
+  display: flex;
+  flex-direction: row-reverse;
+  background-color: #000000;
+  margin-top: -60px;
+  z-index: 2;
+  width: 100%;
+  padding-bottom: 30px;
+}
+.selects {
+  border: none;
+  width: 174px !important;
+}
+.inputs {
+  border: none;
+  width: 174px !important;
+  margin-right: 20px;
+}
+.showTitle{
+  margin-left: 20px;
+  margin-right: 10px;
+  color: #ffffff;
+  font-size: 16px;
+}
+.titleImg {
+  width: 20px;
+  height: 20px;
+  margin-left: 22px;
+  display: flex;
+}
+.table {
+  background-color: #000000 !important;
+}
+
+.el-table td,
+.el-table th.is-leaf {
+  border-bottom: 1px solid #000000 !important;
+}
+
+.el-table__header {
+  width: 100% !important;
+}
+
+.el-table__body-wrapper {
+  background-color: #000000 !important;
+}
+
+.el-table::before {
+  width: 0;
+}
+
 </style>

src/main.js

@@ -1,16 +1,16 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-import './registerServiceWorker'
-import router from './router'
-import store from './store'
-import * as echarts from 'echarts';
-import ElementPlus from 'element-plus';
-import 'element-plus/dist/index.css';
-// import 'element-plus/lib/theme-chalk/index.css';
-import locale from 'element-plus/lib/locale/lang/zh-cn';
-const app = createApp(App)
-app.config.globalProperties.$echarts = echarts
-app.use(store)
-app.use(router)
-app.use(ElementPlus, { locale })
-app.mount('#app')
+import { createApp } from 'vue'
+import App from './App.vue'
+import './registerServiceWorker'
+import router from './router'
+import store from './store'
+import * as echarts from 'echarts';
+import ElementPlus from 'element-plus';
+import 'element-plus/dist/index.css';
+// import 'element-plus/lib/theme-chalk/index.css';
+import locale from 'element-plus/lib/locale/lang/zh-cn';
+const app = createApp(App)
+app.config.globalProperties.$echarts = echarts
+app.use(store)
+app.use(router)
+app.use(ElementPlus, { locale })
+app.mount('#app')

src/registerServiceWorker.js

@@ -1,32 +1,32 @@
-/* eslint-disable no-console */
-
-import { register } from 'register-service-worker'
-
-if (process.env.NODE_ENV === 'production') {
-  register(`${process.env.BASE_URL}service-worker.js`, {
-    ready () {
-      console.log(
-        'App is being served from cache by a service worker.\n' +
-        'For more details, visit https://goo.gl/AFskqB'
-      )
-    },
-    registered () {
-      console.log('Service worker has been registered.')
-    },
-    cached () {
-      console.log('Content has been cached for offline use.')
-    },
-    updatefound () {
-      console.log('New content is downloading.')
-    },
-    updated () {
-      console.log('New content is available; please refresh.')
-    },
-    offline () {
-      console.log('No internet connection found. App is running in offline mode.')
-    },
-    error (error) {
-      console.error('Error during service worker registration:', error)
-    }
-  })
-}
+/* eslint-disable no-console */
+
+import { register } from 'register-service-worker'
+
+if (process.env.NODE_ENV === 'production') {
+  register(`${process.env.BASE_URL}service-worker.js`, {
+    ready () {
+      console.log(
+        'App is being served from cache by a service worker.\n' +
+        'For more details, visit https://goo.gl/AFskqB'
+      )
+    },
+    registered () {
+      console.log('Service worker has been registered.')
+    },
+    cached () {
+      console.log('Content has been cached for offline use.')
+    },
+    updatefound () {
+      console.log('New content is downloading.')
+    },
+    updated () {
+      console.log('New content is available; please refresh.')
+    },
+    offline () {
+      console.log('No internet connection found. App is running in offline mode.')
+    },
+    error (error) {
+      console.error('Error during service worker registration:', error)
+    }
+  })
+}

src/router/index.js

@@ -1,22 +1,22 @@
-import { createRouter, createWebHashHistory  } from 'vue-router'
-import CenterPage from 'views/CenterPage.vue'
-
-const routes = [
-  {
-    path: '/',
-    name: 'CenterPage',
-    component: CenterPage
-  },
-  {
-    path: '/ManualPage',
-    name: 'ManualPage',
-    component: () => import( 'views/ManualPage.vue')
-  }
-]
-
-const router = createRouter({
-  history: createWebHashHistory(),
-  routes
-})
-
-export default router
+import { createRouter, createWebHashHistory  } from 'vue-router'
+import CenterPage from 'views/CenterPage.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'CenterPage',
+    component: CenterPage
+  },
+  {
+    path: '/ManualPage',
+    name: 'ManualPage',
+    component: () => import( 'views/ManualPage.vue')
+  }
+]
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes
+})
+
+export default router

src/store/index.js

@@ -1,120 +1,120 @@
-import { createStore } from 'vuex'
-
-// 创建一个新的 store 实例
-const store = createStore({
-     // 值的存储  获取: this.$store.state.xxxx
-     state() {
-          return {
-               windturbinelist: Object,  // 服务器推送的风机详细信息
-               warning: Object,
-               suggestion: [],
-               stationList: [],
-               observers: true,
-               titleInfo: Object,
-               token: "",
-               current: 1,
-               faultList: [],
-               currentStation: "",
-               syzAlarmArray: [],
-               syzDialogShow: false,
-               syzAlarmRank: "6", // 升压站报警级别， === 此级别会报警
-               fjAlarmRank: "6", // 风机报警级别， >= 此级别会报警
-               currentWarningCardClass: "", // 升压站弹窗右下角表格 class 
-               syzBtnFlicker: false, // 升压站按钮本身是否闪烁以提示有未处理报警
-               // 升压站列表
-               syzArray: [],
-               activeTab: "", // 升压站弹窗所停留的tab页
-               showWarningMask: false, // 是否显示全屏报警遮罩
-               changeCount: 0, // 升压站变更次数
-          }
-     },
-
-     //计算state的值  获取: this.$store.getters.xxxx
-     getters: {
-          windturbinelist(state) {
-               return state.windturbinelist;
-          },
-          titleInfo(state) {
-               return state.titleInfo;
-          },
-          current(state) {
-               return state.current;
-          },
-          token(state) {
-               return state.token;
-          },
-          stationList(state) {
-               return state.stationList;
-          },
-          faultList(state) {
-               return state.faultList;
-          },
-          currentStation(state) {
-               return state.currentStation;
-          },
-          syzAlarmArray(state) {
-               return state.syzAlarmArray;
-          },
-          syzArray(state) {
-               return state.syzArray;
-          },
-     },
-
-     // 数据更新 使用: this.$store.commit('函数名','val')
-     mutations: {
-          windturbinelist(state, data) {
-               state.changeCount++;
-               state.windturbinelist = data;
-          },
-          warning(state, data) {
-               state.warning = data;
-          },
-          suggestion(state, data) {
-               state.suggestion = data;
-          },
-          stationList(state, data) {
-               state.stationList = data;
-          },
-          observers(state, data) {
-               state.observers = data;
-          },
-          titleInfo(state, data) {
-               state.titleInfo = data;
-          },
-          current(state, data) {
-               state.current = data;
-          },
-          token(state, data) {
-               state.token = data;
-          },
-          faultList(state, data) {
-               state.faultList = data;
-          },
-          currentStation(state, data) {
-               state.currentStation = 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;
-          },
-          showWarningMask(state, data) {
-               state.showWarningMask = data;
-          },
-     }
-})
-
+import { createStore } from 'vuex'
+
+// 创建一个新的 store 实例
+const store = createStore({
+     // 值的存储  获取: this.$store.state.xxxx
+     state() {
+          return {
+               windturbinelist: Object,  // 服务器推送的风机详细信息
+               warning: Object,
+               suggestion: [],
+               stationList: [],
+               observers: true,
+               titleInfo: Object,
+               token: "",
+               current: 1,
+               faultList: [],
+               currentStation: "",
+               syzAlarmArray: [],
+               syzDialogShow: false,
+               syzAlarmRank: "6", // 升压站报警级别， === 此级别会报警
+               fjAlarmRank: "6", // 风机报警级别， >= 此级别会报警
+               currentWarningCardClass: "", // 升压站弹窗右下角表格 class 
+               syzBtnFlicker: false, // 升压站按钮本身是否闪烁以提示有未处理报警
+               // 升压站列表
+               syzArray: [],
+               activeTab: "", // 升压站弹窗所停留的tab页
+               showWarningMask: false, // 是否显示全屏报警遮罩
+               changeCount: 0, // 升压站变更次数
+          }
+     },
+
+     //计算state的值  获取: this.$store.getters.xxxx
+     getters: {
+          windturbinelist(state) {
+               return state.windturbinelist;
+          },
+          titleInfo(state) {
+               return state.titleInfo;
+          },
+          current(state) {
+               return state.current;
+          },
+          token(state) {
+               return state.token;
+          },
+          stationList(state) {
+               return state.stationList;
+          },
+          faultList(state) {
+               return state.faultList;
+          },
+          currentStation(state) {
+               return state.currentStation;
+          },
+          syzAlarmArray(state) {
+               return state.syzAlarmArray;
+          },
+          syzArray(state) {
+               return state.syzArray;
+          },
+     },
+
+     // 数据更新 使用: this.$store.commit('函数名','val')
+     mutations: {
+          windturbinelist(state, data) {
+               state.changeCount++;
+               state.windturbinelist = data;
+          },
+          warning(state, data) {
+               state.warning = data;
+          },
+          suggestion(state, data) {
+               state.suggestion = data;
+          },
+          stationList(state, data) {
+               state.stationList = data;
+          },
+          observers(state, data) {
+               state.observers = data;
+          },
+          titleInfo(state, data) {
+               state.titleInfo = data;
+          },
+          current(state, data) {
+               state.current = data;
+          },
+          token(state, data) {
+               state.token = data;
+          },
+          faultList(state, data) {
+               state.faultList = data;
+          },
+          currentStation(state, data) {
+               state.currentStation = 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;
+          },
+          showWarningMask(state, data) {
+               state.showWarningMask = data;
+          },
+     }
+})
+
 export default store

src/utils/BackgroundData.js

@@ -1,406 +1,406 @@
-import api from "api/index";
-export default class BackgroundData {
-    /* 当前登录用户 */
-    LoginUser;
-    /* 标题栏数据 */
-    // TopPoint = [
-    //     {
-    //         pointName: "TotalPower",// 实时总功率
-    //         pointTag: "JSFW.NX_GD_XXX_XX_XX_XXX_XXX_CI0135",
-    //         value: 0
-    //     }, {
-    //         pointName: "DailyPowerGeneration",// 日发电量
-    //         pointTag: "JSFW.NX_GD_XXX_XX_XX_XXX_XXX_CI0088",
-    //         value: 0
-    //     }, {
-    //         pointName: "GridPower",// 上网电量
-    //         pointTag: "JSFW.NX_GD_XXX_XX_XX_XXX_XXX_CI0136",
-    //         value: 0
-    //     }, {
-    //         pointName: "MonthlyPowerGeneration",// 月发电量
-    //         pointTag: "JSFW.NX_GD_XXX_XX_XX_XXX_XXX_CI0146",
-    //         value: 0
-    //     }, {
-    //         pointName: "AnnualPowerGeneration",// 年发电量
-    //         pointTag: "JSFW.NX_GD_XXX_XX_XX_XXX_XXX_CI0037",
-    //         value: 0
-    //     },
-    // ];
-    /* 推荐区数据 */
-    // Recommends = {
-    //     "DWK": {
-    //         stationName: "大武口光伏电站",
-    //         content: "通讯中断",
-    //         createTime: this.formatDate(new Date("2021-04-15 8:17:59"), 'YY-MM-DD hh:mm'),
-    //         isActive: false,
-    //         stationID: 'DWK_AGC',
-    //         values:'DWK'
-    //     },
-    //     "NSSFCJSFW.NX_GD_NSSF_XX_XX_XXX_XXX_CI0263": {
-    //         stationName: "牛首山风电场",
-    //         id: 'NSS_BT',
-    //         content: "限电",
-    //         createTime: new Date(),
-    //         isActive: false,
-    //         stationID: 'NSS_AGC',
-    //         values:'NSSFCJSFW.NX_GD_NSSF_XX_XX_XXX_XXX_CI0263'
-    //     },
-    //     "QSFCJSFW.NX_GD_QSF_XX_XX_XXX_XXX_CI0263": {
-    //         stationName: "青山风电场",
-    //         content: "限电",
-    //         createTime: new Date(),
-    //         isActive: false,
-    //         stationID: 'QS_AGC',
-    //         id: 'QS_BT',
-    //         values:'QSFCJSFW.NX_GD_QSF_XX_XX_XXX_XXX_CI0263'
-    //     },
-
-    //     "SBQFCJSFW.NX_GD_SBQF_XX_XX_XXX_XXX_CI0263": {
-    //         stationName: "星能第六风电场",
-    //         content: "限电",
-    //         createTime: new Date(),
-    //         isActive: false,
-    //         stationID: 'XNL_AGC',
-    //         id: 'XN6_BT',
-    //         values:'SBQFCJSFW.NX_GD_SBQF_XX_XX_XXX_XXX_CI0263'
-    //     },
-    //     "MHSFCJSFW.NX_GD_MHSF_XX_XX_XXX_XXX_CI0263": {
-    //         stationName: "麻黄山风电场",
-    //         id: 'MHS_BT',
-    //         content: "限电",
-    //         createTime: new Date(),
-    //         isActive: false,
-    //         stationID: 'MHS_AGC',
-    //         values:'MHSFCJSFW.NX_GD_MHSF_XX_XX_XXX_XXX_CI0263'
-    //     },
-    //     "XSFCJSFW.NX_GD_XSF_XX_XX_XXX_XXX_CI0263": {
-    //         stationName: "香山风电场",
-    //         content: "限电",
-    //         createTime: new Date(),
-    //         isActive: false,
-    //         stationID: 'XS_AGC',
-    //         id: 'XS_BT',
-    //         values:'XSFCJSFW.NX_GD_XSF_XX_XX_XXX_XXX_CI0263'
-    //     },
-    //     "SBQFCJSFW.NX_GD_SBQF_XX_XX_XXX_XXX_CI026X": {
-    //         stationName: "牛首山第五风电场",
-    //         content: "限电",
-    //         createTime: new Date(),
-    //         isActive: false,
-    //         stationID: 'NW_AGC',
-    //         id: 'N5_BT',
-    //         values:'SBQFCJSFW.NX_GD_SBQF_XX_XX_XXX_XXX_CI026X'
-    //     },
-    //     "SLAGC.NX_GD_QSF_DQ_P1_L1_001_DI0165": {
-    //         stationName: "宋堡第六风电场",
-    //         content: "限电",
-    //         createTime: new Date(),
-    //         isActive: false,
-    //         stationID: 'QS3_AGC',
-    //         id: 'SL_BT',
-    //         values:'SLAGC.NX_GD_QSF_DQ_P1_L1_001_DI0165'
-    //     },
-    // };
-    /* 隐患数据 */
-    HiddenProblems = new Array();
-    /* 缺陷数据 */
-    Defects = new Array();
-    /* 故障数据 */
-    Failure = new Array();
-    /* 事故数据 */
-    Accidents = new Array();
-
-    /* 标记数据 */
-    Marks = [];
-    /* 校验区数据 */
-    checkouts = [];
-    MarkIndex = 0;
-
-    constructor() {
-        // this.refreshTPData = this.refreshTPData.bind(this);
-        // this.onTPMessage = this.onTPMessage.bind(this);
-        // this.refreshAlarmData = this.refreshAlarmData.bind(this);
-        this.onHiddenProblemsMessage = this.onHiddenProblemsMessage.bind(this);
-        this.formatDate = this.formatDate.bind(this);
-        this.onDefectsMessage = this.onDefectsMessage.bind(this);
-        this.onAccidentsMessage = this.onAccidentsMessage.bind(this);
-        this.isContains = this.isContains.bind(this);
-        this.refreshRecommendData = this.refreshRecommendData.bind(this);
-        this.onRDMessage = this.onRDMessage.bind(this);
-        this.windturbineControl = this.windturbineControl.bind(this);
-        this.marking = this.marking.bind(this);
-        this.removeMarked = this.removeMarked.bind(this);
-        // this.initWinturbineBaseData = this.initWinturbineBaseData.bind(this);
-        // this.refreshTPData();
-        // this.refreshAlarmData();
-        this.refreshRecommendData();
-        // this.refreshTPTimer = setInterval(this.refreshTPData, 3000);// 标题栏数据
-        // this.refreshAlarmTimer = setInterval(this.refreshAlarmData, 10000);// 报警数据
-        this.refreshRecommendTimer = setInterval(this.refreshRecommendData, 3000);// 推荐数据
-    }
-
-    /* 数据刷新 */
-    // refreshTPData() {
-    //     let val = '';
-    //     for (let v in this.TopPoint) {
-    //         val += this.TopPoint[v].pointTag + ',';
-    //     }
-    //     api.refreshData(val).then(this.onTPMessage)
-    // }
-
-    /* 刷新推荐信息 */
-    refreshRecommendData() {
-        let val = '';
-        for (let v in this.Recommends) {
-            val += v + ',';
-        }
-        // api.refreshData(val).then(this.onRDMessage)
-    }
-
-    /* 刷新报警信息 */
-    refreshAlarmData() {
-        // http://192.168.10.18:8075/alarm
-        // 1、读取一天内的所有open的4级custom报警，作为隐患数据ar
-        let enddt = new Date();
-        let tm = enddt.getTime();
-        enddt = new Date(tm + 900000);
-        let startdt = new Date(tm - 86400000);
-        // api.getSnap({
-        //     pagenum:'1',
-        //     pagesize:'500',
-        //     category1:'custom',
-        //     isopened:'1',
-        //     starttime:this.formatDate(startdt),
-        //     endtime:this.formatDate(enddt),
-        // }).then(this.onHiddenProblemsMessage)
-        // api.getSnap({
-        //     pagenum:'1',
-        //     pagesize:'500',
-        //     category1:'windturbine',
-        //     isopened:'1',
-        //     starttime:this.formatDate(startdt),
-        //     endtime:this.formatDate(enddt),
-        // }).then(this.onHiddenProblemsMessage)
-        // api.getSnap({
-        //     pagenum:'1',
-        //     pagesize:'500',
-        //     category1:'SYZ',
-        //     isopened:'1',
-        //     starttime:this.formatDate(startdt),
-        //     endtime:this.formatDate(enddt),
-        // }).then(this.onHiddenProblemsMessage)
-    }
-
-    /* 获得故障数据 */
-    onAccidentsMessage(msg) {
-        if (!msg.data) return;
-        this.Accidents = new Array();
-        for (let v in msg.data.records) {
-            let val = msg.data.records[v];
-            if (this.isContains(val.alertText, ["跳闸", "开关", "刀闸", "断路器", "合位", "分位"])) {
-                // todo 暂时隐藏事故报警
-                //this.Accidents.push(val);
-            } else {
-                if (val.rank == "5") {
-                    this.Failure.push(val);
-                } else {
-                    this.Defects.push(val);
-                }
-            }
-        }
-    }
-
-    /* 获得缺陷数据 */
-    onDefectsMessage(msg) {
-        if (!msg.data) return;
-        this.Defects = new Array();
-        this.Failure = new Array();
-        for (let v in msg.data.records) {
-            let val = msg.data.records[v];
-            if (val.alertText.indexOf("故障") > 0) {
-                this.Failure.push(val);
-            } else {
-                this.Defects.push(val);
-            }
-        }
-    }
-
-    /* 获得隐患数据 */
-    onHiddenProblemsMessage(msg) {
-        if (!msg.data) return;
-        this.HiddenProblems = msg.data.records;
-    }
-
-    /* 获得标题栏数据 */
-    // onTPMessage(msg) {
-    //     if (!msg.data) return;
-    //     for (let v in this.TopPoint) {
-    //         let val = this.TopPoint[v];
-    //         val.value = msg.data[val.pointTag].doubleValue;
-    //     }
-    // }
-
-    /* 获得推荐信息数据 */
-    onRDMessage(msg) {
-        if (!msg.data) return;
-        // for (let v in msg.data) {
-        //     let isact = false;
-        //     if (!msg.data[v].doubleValue) {
-        //         isact = msg.data[v].booleanValue
-        //     } else {
-        //         isact = msg.data[v].doubleValue != 0;
-        //     }
-        //     if (isact && !this.Recommends[v].isActive) {
-        //         this.Recommends[v].createTime = this.formatDate(new Date(), 'YY-MM-DD hh:mm');
-        //     }
-        //     this.Recommends[v].isActive = isact;
-        // }
-    }
-
-    /* 格式化时间 */
-    formatDate(time, format = 'YY-MM-DD HH:mm:ss') {
-        let date = new Date(time);
-
-        let year = date.getFullYear(),
-            month = date.getMonth() + 1,//月份是从0开始的
-            day = date.getDate(),
-            hour = date.getHours(),
-            min = date.getMinutes(),
-            sec = date.getSeconds();
-        let preArr = Array.apply(null, Array(10)).map(function (elem, index) {
-            return '0' + index;
-        });
-
-        let newTime = format.replace(/YY/g, year)
-            .replace(/MM/g, preArr[month] || month)
-            .replace(/DD/g, preArr[day] || day)
-            .replace(/hh/g, preArr[hour] || hour)
-            .replace(/mm/g, preArr[min] || min)
-            .replace(/ss/g, preArr[sec] || sec);
-        return newTime;
-    }
-
-    /* 判断一个字符串中是否包含第二个字符串列表中的字符 */
-    isContains(str, strs) {
-        for (let v in strs) {
-            if (str.indexOf(strs[v]) > 0) {
-                return true;
-            }
-        }
-        return false;
-    }
-
-    /* 风机控制 */
-    windturbineControl(windturbines, isLockOrUnlock, automatic, test ,success, error) {
-        let pairs = {};
-        for (let ind in windturbines) {
-            let wb = windturbines[ind];
-            let ct = {
-                windturbineId: wb.windturbineId,
-                stationId: wb.stationId,
-                projectId: wb.projectId,
-                modelId: wb.modelId,
-                controlType: wb.controlType,
-                lockType: wb.lockType,
-                userName: automatic?'system_'+this.LoginUser.name:this.LoginUser.name,
-                userId: this.LoginUser.id,
-            };
-            pairs[ct.windturbineId] = ct;
-        }
-        api.windturbControl(pairs).then(res =>{
-            success(res);
-        })
-    }
-
-    /* 系统控制风机，自动下发命令 */
-    windturbineControlSystem(windturbines) {
-        let pairs = {};
-        for (let ind in windturbines) {
-            let wb = windturbines[ind];
-            let ct = {
-                windturbineId: wb.windturbineId,
-                stationId: wb.stationId,
-                projectId: wb.projectId,
-                modelId: wb.modelId,
-                controlType: wb.controlType,
-                lockType: wb.lockType,
-                userName: 'system',
-                userId: 0,
-            };
-            pairs[ct.windturbineId] = ct;
-        }
-        let isLockOrUnlock = false
-        api.windturbControl(pairs).then(res =>{
-            success(res);
-        })
-    }
-
-    /* 标记 */
-    marking(windturbines) {
-        for (let v in windturbines) {
-            ++this.MarkIndex;
-            this.Marks.push({ title: windturbines[v].windturbineId, id: this.MarkIndex });
-        }
-    }
-    updateMarks(windturbine, value) {
-        this.Marks.forEach(item => {
-            if (windturbine.windturbineId === item.title) {
-                item.value = value
-            }
-        })
-    }
-    /* 校验区数据 */
-    checkout(windturbines) {
-        windturbines.forEach(item => {
-            item.checkTime = (new Date()).getTime()
-            if (!this.checkouts.filter(items => items.windturbineId === item.windturbineId)[0]) {
-                this.checkouts.push(item)
-            }
-        })
-    }
-    removeCheckouts(mk) {
-        let indx = -1;
-        for (let id in this.checkouts) {
-            if (this.checkouts[id].windturbineId == mk.windturbineId) {
-                indx = id;
-                break;
-            }
-        }
-        if (indx < 0) return;
-        this.checkouts.splice(indx, 1);
-    }
-
-    /* 移除标记 */
-    removeMarked(mk) {
-        let indx = -1;
-        for (let id in this.Marks) {
-            if (this.Marks[id].id == mk.id) {
-                indx = id;
-                break;
-            }
-        }
-        if (indx < 0) return;
-        this.Marks.splice(indx, 1);
-    }
-
-    /* 获取风机详情页面数据 */
-    initWinturbineBaseData(info, action) {
-        api.nitWinturbineBaseData({
-            thingType: 'windturbine',
-            thingId: info.windturbineId,
-            uniformCodes: info.codes,
-        }).then(res =>{
-            action(res.data);
-        }).catch(err => {
-            console.log(err);
-        });
-    }
-
-    /* 单例 */
-    static getInstance() {
-        if (!BackgroundData.instance) {
-            BackgroundData.instance = new BackgroundData();
-        }
-        return BackgroundData.instance;
-    }
+import api from "api/index";
+export default class BackgroundData {
+    /* 当前登录用户 */
+    LoginUser;
+    /* 标题栏数据 */
+    // TopPoint = [
+    //     {
+    //         pointName: "TotalPower",// 实时总功率
+    //         pointTag: "JSFW.NX_GD_XXX_XX_XX_XXX_XXX_CI0135",
+    //         value: 0
+    //     }, {
+    //         pointName: "DailyPowerGeneration",// 日发电量
+    //         pointTag: "JSFW.NX_GD_XXX_XX_XX_XXX_XXX_CI0088",
+    //         value: 0
+    //     }, {
+    //         pointName: "GridPower",// 上网电量
+    //         pointTag: "JSFW.NX_GD_XXX_XX_XX_XXX_XXX_CI0136",
+    //         value: 0
+    //     }, {
+    //         pointName: "MonthlyPowerGeneration",// 月发电量
+    //         pointTag: "JSFW.NX_GD_XXX_XX_XX_XXX_XXX_CI0146",
+    //         value: 0
+    //     }, {
+    //         pointName: "AnnualPowerGeneration",// 年发电量
+    //         pointTag: "JSFW.NX_GD_XXX_XX_XX_XXX_XXX_CI0037",
+    //         value: 0
+    //     },
+    // ];
+    /* 推荐区数据 */
+    // Recommends = {
+    //     "DWK": {
+    //         stationName: "大武口光伏电站",
+    //         content: "通讯中断",
+    //         createTime: this.formatDate(new Date("2021-04-15 8:17:59"), 'YY-MM-DD hh:mm'),
+    //         isActive: false,
+    //         stationID: 'DWK_AGC',
+    //         values:'DWK'
+    //     },
+    //     "NSSFCJSFW.NX_GD_NSSF_XX_XX_XXX_XXX_CI0263": {
+    //         stationName: "牛首山风电场",
+    //         id: 'NSS_BT',
+    //         content: "限电",
+    //         createTime: new Date(),
+    //         isActive: false,
+    //         stationID: 'NSS_AGC',
+    //         values:'NSSFCJSFW.NX_GD_NSSF_XX_XX_XXX_XXX_CI0263'
+    //     },
+    //     "QSFCJSFW.NX_GD_QSF_XX_XX_XXX_XXX_CI0263": {
+    //         stationName: "青山风电场",
+    //         content: "限电",
+    //         createTime: new Date(),
+    //         isActive: false,
+    //         stationID: 'QS_AGC',
+    //         id: 'QS_BT',
+    //         values:'QSFCJSFW.NX_GD_QSF_XX_XX_XXX_XXX_CI0263'
+    //     },
+
+    //     "SBQFCJSFW.NX_GD_SBQF_XX_XX_XXX_XXX_CI0263": {
+    //         stationName: "星能第六风电场",
+    //         content: "限电",
+    //         createTime: new Date(),
+    //         isActive: false,
+    //         stationID: 'XNL_AGC',
+    //         id: 'XN6_BT',
+    //         values:'SBQFCJSFW.NX_GD_SBQF_XX_XX_XXX_XXX_CI0263'
+    //     },
+    //     "MHSFCJSFW.NX_GD_MHSF_XX_XX_XXX_XXX_CI0263": {
+    //         stationName: "麻黄山风电场",
+    //         id: 'MHS_BT',
+    //         content: "限电",
+    //         createTime: new Date(),
+    //         isActive: false,
+    //         stationID: 'MHS_AGC',
+    //         values:'MHSFCJSFW.NX_GD_MHSF_XX_XX_XXX_XXX_CI0263'
+    //     },
+    //     "XSFCJSFW.NX_GD_XSF_XX_XX_XXX_XXX_CI0263": {
+    //         stationName: "香山风电场",
+    //         content: "限电",
+    //         createTime: new Date(),
+    //         isActive: false,
+    //         stationID: 'XS_AGC',
+    //         id: 'XS_BT',
+    //         values:'XSFCJSFW.NX_GD_XSF_XX_XX_XXX_XXX_CI0263'
+    //     },
+    //     "SBQFCJSFW.NX_GD_SBQF_XX_XX_XXX_XXX_CI026X": {
+    //         stationName: "牛首山第五风电场",
+    //         content: "限电",
+    //         createTime: new Date(),
+    //         isActive: false,
+    //         stationID: 'NW_AGC',
+    //         id: 'N5_BT',
+    //         values:'SBQFCJSFW.NX_GD_SBQF_XX_XX_XXX_XXX_CI026X'
+    //     },
+    //     "SLAGC.NX_GD_QSF_DQ_P1_L1_001_DI0165": {
+    //         stationName: "宋堡第六风电场",
+    //         content: "限电",
+    //         createTime: new Date(),
+    //         isActive: false,
+    //         stationID: 'QS3_AGC',
+    //         id: 'SL_BT',
+    //         values:'SLAGC.NX_GD_QSF_DQ_P1_L1_001_DI0165'
+    //     },
+    // };
+    /* 隐患数据 */
+    HiddenProblems = new Array();
+    /* 缺陷数据 */
+    Defects = new Array();
+    /* 故障数据 */
+    Failure = new Array();
+    /* 事故数据 */
+    Accidents = new Array();
+
+    /* 标记数据 */
+    Marks = [];
+    /* 校验区数据 */
+    checkouts = [];
+    MarkIndex = 0;
+
+    constructor() {
+        // this.refreshTPData = this.refreshTPData.bind(this);
+        // this.onTPMessage = this.onTPMessage.bind(this);
+        // this.refreshAlarmData = this.refreshAlarmData.bind(this);
+        this.onHiddenProblemsMessage = this.onHiddenProblemsMessage.bind(this);
+        this.formatDate = this.formatDate.bind(this);
+        this.onDefectsMessage = this.onDefectsMessage.bind(this);
+        this.onAccidentsMessage = this.onAccidentsMessage.bind(this);
+        this.isContains = this.isContains.bind(this);
+        this.refreshRecommendData = this.refreshRecommendData.bind(this);
+        this.onRDMessage = this.onRDMessage.bind(this);
+        this.windturbineControl = this.windturbineControl.bind(this);
+        this.marking = this.marking.bind(this);
+        this.removeMarked = this.removeMarked.bind(this);
+        // this.initWinturbineBaseData = this.initWinturbineBaseData.bind(this);
+        // this.refreshTPData();
+        // this.refreshAlarmData();
+        this.refreshRecommendData();
+        // this.refreshTPTimer = setInterval(this.refreshTPData, 3000);// 标题栏数据
+        // this.refreshAlarmTimer = setInterval(this.refreshAlarmData, 10000);// 报警数据
+        this.refreshRecommendTimer = setInterval(this.refreshRecommendData, 3000);// 推荐数据
+    }
+
+    /* 数据刷新 */
+    // refreshTPData() {
+    //     let val = '';
+    //     for (let v in this.TopPoint) {
+    //         val += this.TopPoint[v].pointTag + ',';
+    //     }
+    //     api.refreshData(val).then(this.onTPMessage)
+    // }
+
+    /* 刷新推荐信息 */
+    refreshRecommendData() {
+        let val = '';
+        for (let v in this.Recommends) {
+            val += v + ',';
+        }
+        // api.refreshData(val).then(this.onRDMessage)
+    }
+
+    /* 刷新报警信息 */
+    refreshAlarmData() {
+        // http://192.168.10.18:8075/alarm
+        // 1、读取一天内的所有open的4级custom报警，作为隐患数据ar
+        let enddt = new Date();
+        let tm = enddt.getTime();
+        enddt = new Date(tm + 900000);
+        let startdt = new Date(tm - 86400000);
+        // api.getSnap({
+        //     pagenum:'1',
+        //     pagesize:'500',
+        //     category1:'custom',
+        //     isopened:'1',
+        //     starttime:this.formatDate(startdt),
+        //     endtime:this.formatDate(enddt),
+        // }).then(this.onHiddenProblemsMessage)
+        // api.getSnap({
+        //     pagenum:'1',
+        //     pagesize:'500',
+        //     category1:'windturbine',
+        //     isopened:'1',
+        //     starttime:this.formatDate(startdt),
+        //     endtime:this.formatDate(enddt),
+        // }).then(this.onHiddenProblemsMessage)
+        // api.getSnap({
+        //     pagenum:'1',
+        //     pagesize:'500',
+        //     category1:'SYZ',
+        //     isopened:'1',
+        //     starttime:this.formatDate(startdt),
+        //     endtime:this.formatDate(enddt),
+        // }).then(this.onHiddenProblemsMessage)
+    }
+
+    /* 获得故障数据 */
+    onAccidentsMessage(msg) {
+        if (!msg.data) return;
+        this.Accidents = new Array();
+        for (let v in msg.data.records) {
+            let val = msg.data.records[v];
+            if (this.isContains(val.alertText, ["跳闸", "开关", "刀闸", "断路器", "合位", "分位"])) {
+                // todo 暂时隐藏事故报警
+                //this.Accidents.push(val);
+            } else {
+                if (val.rank == "5") {
+                    this.Failure.push(val);
+                } else {
+                    this.Defects.push(val);
+                }
+            }
+        }
+    }
+
+    /* 获得缺陷数据 */
+    onDefectsMessage(msg) {
+        if (!msg.data) return;
+        this.Defects = new Array();
+        this.Failure = new Array();
+        for (let v in msg.data.records) {
+            let val = msg.data.records[v];
+            if (val.alertText.indexOf("故障") > 0) {
+                this.Failure.push(val);
+            } else {
+                this.Defects.push(val);
+            }
+        }
+    }
+
+    /* 获得隐患数据 */
+    onHiddenProblemsMessage(msg) {
+        if (!msg.data) return;
+        this.HiddenProblems = msg.data.records;
+    }
+
+    /* 获得标题栏数据 */
+    // onTPMessage(msg) {
+    //     if (!msg.data) return;
+    //     for (let v in this.TopPoint) {
+    //         let val = this.TopPoint[v];
+    //         val.value = msg.data[val.pointTag].doubleValue;
+    //     }
+    // }
+
+    /* 获得推荐信息数据 */
+    onRDMessage(msg) {
+        if (!msg.data) return;
+        // for (let v in msg.data) {
+        //     let isact = false;
+        //     if (!msg.data[v].doubleValue) {
+        //         isact = msg.data[v].booleanValue
+        //     } else {
+        //         isact = msg.data[v].doubleValue != 0;
+        //     }
+        //     if (isact && !this.Recommends[v].isActive) {
+        //         this.Recommends[v].createTime = this.formatDate(new Date(), 'YY-MM-DD hh:mm');
+        //     }
+        //     this.Recommends[v].isActive = isact;
+        // }
+    }
+
+    /* 格式化时间 */
+    formatDate(time, format = 'YY-MM-DD HH:mm:ss') {
+        let date = new Date(time);
+
+        let year = date.getFullYear(),
+            month = date.getMonth() + 1,//月份是从0开始的
+            day = date.getDate(),
+            hour = date.getHours(),
+            min = date.getMinutes(),
+            sec = date.getSeconds();
+        let preArr = Array.apply(null, Array(10)).map(function (elem, index) {
+            return '0' + index;
+        });
+
+        let newTime = format.replace(/YY/g, year)
+            .replace(/MM/g, preArr[month] || month)
+            .replace(/DD/g, preArr[day] || day)
+            .replace(/hh/g, preArr[hour] || hour)
+            .replace(/mm/g, preArr[min] || min)
+            .replace(/ss/g, preArr[sec] || sec);
+        return newTime;
+    }
+
+    /* 判断一个字符串中是否包含第二个字符串列表中的字符 */
+    isContains(str, strs) {
+        for (let v in strs) {
+            if (str.indexOf(strs[v]) > 0) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    /* 风机控制 */
+    windturbineControl(windturbines, isLockOrUnlock, automatic, test ,success, error) {
+        let pairs = {};
+        for (let ind in windturbines) {
+            let wb = windturbines[ind];
+            let ct = {
+                windturbineId: wb.windturbineId,
+                stationId: wb.stationId,
+                projectId: wb.projectId,
+                modelId: wb.modelId,
+                controlType: wb.controlType,
+                lockType: wb.lockType,
+                userName: automatic?'system_'+this.LoginUser.name:this.LoginUser.name,
+                userId: this.LoginUser.id,
+            };
+            pairs[ct.windturbineId] = ct;
+        }
+        api.windturbControl(pairs).then(res =>{
+            success(res);
+        })
+    }
+
+    /* 系统控制风机，自动下发命令 */
+    windturbineControlSystem(windturbines) {
+        let pairs = {};
+        for (let ind in windturbines) {
+            let wb = windturbines[ind];
+            let ct = {
+                windturbineId: wb.windturbineId,
+                stationId: wb.stationId,
+                projectId: wb.projectId,
+                modelId: wb.modelId,
+                controlType: wb.controlType,
+                lockType: wb.lockType,
+                userName: 'system',
+                userId: 0,
+            };
+            pairs[ct.windturbineId] = ct;
+        }
+        let isLockOrUnlock = false
+        api.windturbControl(pairs).then(res =>{
+            success(res);
+        })
+    }
+
+    /* 标记 */
+    marking(windturbines) {
+        for (let v in windturbines) {
+            ++this.MarkIndex;
+            this.Marks.push({ title: windturbines[v].windturbineId, id: this.MarkIndex });
+        }
+    }
+    updateMarks(windturbine, value) {
+        this.Marks.forEach(item => {
+            if (windturbine.windturbineId === item.title) {
+                item.value = value
+            }
+        })
+    }
+    /* 校验区数据 */
+    checkout(windturbines) {
+        windturbines.forEach(item => {
+            item.checkTime = (new Date()).getTime()
+            if (!this.checkouts.filter(items => items.windturbineId === item.windturbineId)[0]) {
+                this.checkouts.push(item)
+            }
+        })
+    }
+    removeCheckouts(mk) {
+        let indx = -1;
+        for (let id in this.checkouts) {
+            if (this.checkouts[id].windturbineId == mk.windturbineId) {
+                indx = id;
+                break;
+            }
+        }
+        if (indx < 0) return;
+        this.checkouts.splice(indx, 1);
+    }
+
+    /* 移除标记 */
+    removeMarked(mk) {
+        let indx = -1;
+        for (let id in this.Marks) {
+            if (this.Marks[id].id == mk.id) {
+                indx = id;
+                break;
+            }
+        }
+        if (indx < 0) return;
+        this.Marks.splice(indx, 1);
+    }
+
+    /* 获取风机详情页面数据 */
+    initWinturbineBaseData(info, action) {
+        api.nitWinturbineBaseData({
+            thingType: 'windturbine',
+            thingId: info.windturbineId,
+            uniformCodes: info.codes,
+        }).then(res =>{
+            action(res.data);
+        }).catch(err => {
+            console.log(err);
+        });
+    }
+
+    /* 单例 */
+    static getInstance() {
+        if (!BackgroundData.instance) {
+            BackgroundData.instance = new BackgroundData();
+        }
+        return BackgroundData.instance;
+    }
 }

src/utils/MessageBridge.js

@@ -1,169 +1,169 @@
-import { setTimeout } from 'core-js';
-import Stomp from 'stompjs'
-import store from '../store/index'
-
-export default class MessageBridge {
-  observers;// 观察者
-  calcSocket;// 后台websocket
-  // adapterSocket;// 适配器websocket
-  flag;
-  windFlag;
-  flagArr;
-  constructor() {
-    this.register = this.register.bind(this);
-    this.unregister = this.unregister.bind(this);
-    this.onmessage = this.onmessage.bind(this);
-    this.getActions = this.getActions.bind(this);
-    this.observers = new Array();
-    this.flagArr = new Array();
-    this.flag = (new Date()).getTime();
-    this.windFlag = (new Date()).getTime();
-    // this.reconnect()
-    this.calcSocket = new WebSocket(`ws://${process.env.VUE_APP_APIS}/wisdom_service`, this.onmessage, ["/topic/attention","/topic/temperature-count"]);
-      // "/topic/title-info","/topic/suggestion","/topic/fault-popup",
-    // this.adapterSocket = new WebSocket(`ws://${process.env.VUE_APP_ADAPTERURLS}/wisdom`, this.onmessage, ["/topic/windturbine", "/topic/pv"]);
-  }
-
-  /* 单例 */
-  static getInstance() {
-    if (!MessageBridge.instance) {
-      MessageBridge.instance = new MessageBridge();
-    }
-    return MessageBridge.instance;
-  }
-
-  /* 获得消息 */
-  onmessage(msg) {
-    // if (msg.headers.destination === "/topic/title-info") {
-    //   this.flag = (new Date()).getTime()
-    // }
-    // if (msg.headers.destination === "/topic/windturbine") {
-    //   this.windFlag = (new Date()).getTime()
-    // }
-    if (msg.command != "MESSAGE" || !msg.headers.destination) return;
-    let os = this.getActions(msg.headers.destination);
-    for (let id in os) {
-      try {
-        os[id].action(msg.body, msg.headers);
-      } catch (e) { }
-    }
-  }
-
-  getActions(destination) {
-    let list = new Array()
-    if ((this.observers.filter(item => item.key === "/topic/windturbine").length === 0) || (this.observers.filter(item => item.key === "/topic/suggestion").length === 0) || (this.observers.filter(item => item.key === "/topic/title-info").length === 0)) {
-      store.commit('observers', false)
-    }
-    for (let i in this.observers) {
-      if (this.observers[i].key == destination) {
-       if(list.filter(item => item.key  === this.observers[i].key).length <= 2 ) {
-        list.push(this.observers[i]);
-       }
-      }
-    }
-    return list;
-  }
-
-  /* 注册消息 */
-  register(msgs) {
-    for (let i in msgs) {
-      if (this.observers.filter(item => item.key === msgs[i].key).length <= 5) {
-        this.observers.push(msgs[i]);
-      }
-    }
-  }
-
-  /* 取消注册消息 */
-  unregister(msgs) {
-    let showIndex = null
-    let status = this.observers.filter(item => item.key === msgs.key).length
-    if(status){
-      this.observers.forEach((item, index) => {
-        if (item.key === msgs.key) {
-          showIndex = index
-        }
-      })
-      this.observers.splice(showIndex, 1);
-    }
-  }
-
-  // reconnect() {
-  //   setTimeout(() => {
-  //     if ((this.observers.filter(item => item.key === "/topic/windturbine").length === 0) || (this.observers.filter(item => item.key === "/topic/suggestion").length === 0) || (this.observers.filter(item => item.key === "/topic/title-info").length === 0)) {
-  //       store.commit('observers', false)
-  //     }
-  //     this.reconnect()
-  //   }, 10000);
-  //   if (((new Date()).getTime() - this.windFlag) > 20000) {
-  //     this.adapterSocket.disconnect()
-  //     this.adapterSocket.connect()
-  //   }
-  //   if (((new Date()).getTime() - this.flag) > 20000) {
-  //     this.calcSocket.disconnect()
-  //     this.calcSocket.connect()
-  //   }
-  // }
-}
-
-class WebSocket {
-  onmessage;
-  url;
-  settings;
-  client;
-
-  constructor(url, onmessage, settings) {
-    this.onerror = this.onerror.bind(this);
-    this.connectCallBackSubscribe = this.connectCallBackSubscribe.bind(this);
-    this.send = this.send.bind(this);
-    this.connect = this.connect.bind(this);
-    this.disconnect = this.disconnect.bind(this);
-    this.onmessage = onmessage;
-    this.url = url;
-    this.settings = settings;
-    // this.MessageBridge = new MessageBridge()
-    try {
-      this.connect();
-    } catch (e) {
-      // console.log("websocket连接错误:\n" + e);
-    }
-  }
-
-  /* 连接 */
-  connect() {
-    this.client = Stomp.client(this.url);
-    this.client.connect("", "", this.connectCallBackSubscribe, this.onerror);
-    this.client.debug = null;
-  }
-
-  disconnect() {
-    this.client.disconnect()
-  }
-
-  /* 检测连接是否正常 */
-  protector() {
-
-  }
-
-  /* 注册 */
-  connectCallBackSubscribe() {
-    // console.log(`注册消息${this.settings}`)
-    for (let index in this.settings) {
-      this.client.subscribe(this.settings[index], frame => this.onmessage(frame));
-    }
-  }
-
-  /* 发送 */
-  send(destination, headers, body) {
-    if (this.client.connected) {
-      this.client.send(destination, headers, body);
-    }
-  }
-
-  /* 发生错误 */
-  onerror() {
-    // console.log(`websocket [${this.url}] 连接出现错误：\n${error.message}`);
-    // TODO 断线重连还有问题
-    setTimeout(this.connect(), 5000);
-  }
-
+import { setTimeout } from 'core-js';
+import Stomp from 'stompjs'
+import store from '../store/index'
+
+export default class MessageBridge {
+  observers;// 观察者
+  calcSocket;// 后台websocket
+  // adapterSocket;// 适配器websocket
+  flag;
+  windFlag;
+  flagArr;
+  constructor() {
+    this.register = this.register.bind(this);
+    this.unregister = this.unregister.bind(this);
+    this.onmessage = this.onmessage.bind(this);
+    this.getActions = this.getActions.bind(this);
+    this.observers = new Array();
+    this.flagArr = new Array();
+    this.flag = (new Date()).getTime();
+    this.windFlag = (new Date()).getTime();
+    // this.reconnect()
+    this.calcSocket = new WebSocket(`ws://${process.env.VUE_APP_APIS}/wisdom_service`, this.onmessage, ["/topic/attention","/topic/temperature-count"]);
+      // "/topic/title-info","/topic/suggestion","/topic/fault-popup",
+    // this.adapterSocket = new WebSocket(`ws://${process.env.VUE_APP_ADAPTERURLS}/wisdom`, this.onmessage, ["/topic/windturbine", "/topic/pv"]);
+  }
+
+  /* 单例 */
+  static getInstance() {
+    if (!MessageBridge.instance) {
+      MessageBridge.instance = new MessageBridge();
+    }
+    return MessageBridge.instance;
+  }
+
+  /* 获得消息 */
+  onmessage(msg) {
+    // if (msg.headers.destination === "/topic/title-info") {
+    //   this.flag = (new Date()).getTime()
+    // }
+    // if (msg.headers.destination === "/topic/windturbine") {
+    //   this.windFlag = (new Date()).getTime()
+    // }
+    if (msg.command != "MESSAGE" || !msg.headers.destination) return;
+    let os = this.getActions(msg.headers.destination);
+    for (let id in os) {
+      try {
+        os[id].action(msg.body, msg.headers);
+      } catch (e) { }
+    }
+  }
+
+  getActions(destination) {
+    let list = new Array()
+    if ((this.observers.filter(item => item.key === "/topic/windturbine").length === 0) || (this.observers.filter(item => item.key === "/topic/suggestion").length === 0) || (this.observers.filter(item => item.key === "/topic/title-info").length === 0)) {
+      store.commit('observers', false)
+    }
+    for (let i in this.observers) {
+      if (this.observers[i].key == destination) {
+       if(list.filter(item => item.key  === this.observers[i].key).length <= 2 ) {
+        list.push(this.observers[i]);
+       }
+      }
+    }
+    return list;
+  }
+
+  /* 注册消息 */
+  register(msgs) {
+    for (let i in msgs) {
+      if (this.observers.filter(item => item.key === msgs[i].key).length <= 5) {
+        this.observers.push(msgs[i]);
+      }
+    }
+  }
+
+  /* 取消注册消息 */
+  unregister(msgs) {
+    let showIndex = null
+    let status = this.observers.filter(item => item.key === msgs.key).length
+    if(status){
+      this.observers.forEach((item, index) => {
+        if (item.key === msgs.key) {
+          showIndex = index
+        }
+      })
+      this.observers.splice(showIndex, 1);
+    }
+  }
+
+  // reconnect() {
+  //   setTimeout(() => {
+  //     if ((this.observers.filter(item => item.key === "/topic/windturbine").length === 0) || (this.observers.filter(item => item.key === "/topic/suggestion").length === 0) || (this.observers.filter(item => item.key === "/topic/title-info").length === 0)) {
+  //       store.commit('observers', false)
+  //     }
+  //     this.reconnect()
+  //   }, 10000);
+  //   if (((new Date()).getTime() - this.windFlag) > 20000) {
+  //     this.adapterSocket.disconnect()
+  //     this.adapterSocket.connect()
+  //   }
+  //   if (((new Date()).getTime() - this.flag) > 20000) {
+  //     this.calcSocket.disconnect()
+  //     this.calcSocket.connect()
+  //   }
+  // }
+}
+
+class WebSocket {
+  onmessage;
+  url;
+  settings;
+  client;
+
+  constructor(url, onmessage, settings) {
+    this.onerror = this.onerror.bind(this);
+    this.connectCallBackSubscribe = this.connectCallBackSubscribe.bind(this);
+    this.send = this.send.bind(this);
+    this.connect = this.connect.bind(this);
+    this.disconnect = this.disconnect.bind(this);
+    this.onmessage = onmessage;
+    this.url = url;
+    this.settings = settings;
+    // this.MessageBridge = new MessageBridge()
+    try {
+      this.connect();
+    } catch (e) {
+      // console.log("websocket连接错误:\n" + e);
+    }
+  }
+
+  /* 连接 */
+  connect() {
+    this.client = Stomp.client(this.url);
+    this.client.connect("", "", this.connectCallBackSubscribe, this.onerror);
+    this.client.debug = null;
+  }
+
+  disconnect() {
+    this.client.disconnect()
+  }
+
+  /* 检测连接是否正常 */
+  protector() {
+
+  }
+
+  /* 注册 */
+  connectCallBackSubscribe() {
+    // console.log(`注册消息${this.settings}`)
+    for (let index in this.settings) {
+      this.client.subscribe(this.settings[index], frame => this.onmessage(frame));
+    }
+  }
+
+  /* 发送 */
+  send(destination, headers, body) {
+    if (this.client.connected) {
+      this.client.send(destination, headers, body);
+    }
+  }
+
+  /* 发生错误 */
+  onerror() {
+    // console.log(`websocket [${this.url}] 连接出现错误：\n${error.message}`);
+    // TODO 断线重连还有问题
+    setTimeout(this.connect(), 5000);
+  }
+
 }