update

.env.development

@@ -0,0 +1,6 @@
+VUE_APP_API=http://192.168.10.18:8099
+VUE_APP_SHARDINGURL=http://192.168.10.18:8075
+VUE_APP_ADAPTERURL=http://192.168.10.18:8011
+VUE_APP_APIS=192.168.10.18:8099
+VUE_APP_SHARDINGURLS=192.168.10.18:8075
+VUE_APP_ADAPTERURLS=192.168.10.18:8011

.env.eapi

@@ -0,0 +1,4 @@
+NODE_ENV=eapi
+VUE_APP_API=https://eapi.nxgqt.org
+VUE_APP_IMAGE=https://eapi.nxgqt.org
+VUE_APP_MAP_KEY=df6LUP4BcbGgSGjZLf8sOBSB6a0fktrb

.env.production

@@ -0,0 +1,8 @@
+# VUE_APP_API=http://18.6.30.53:8075
+# VUE_APP_IMAGE=http://18.6.30.53:8075
+VUE_APP_API=http://18.6.30.63:8099
+VUE_APP_SHARDINGURL=http://18.6.30.53:8075
+VUE_APP_ADAPTERURL=http://18.6.30.63:8011
+VUE_APP_APIS=18.6.30.63:8099
+VUE_APP_SHARDINGURLS=18.6.30.53:8075
+VUE_APP_ADAPTERURLS=18.6.30.63:8011

.gitignore

@@ -21,11 +21,6 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
-node_modules
 
 #Electron-builder output
-/dist_electron
-/out
-
-#vs
-.vs
+/dist_electron

README.md

@@ -1,4 +1,4 @@
-# neic
+# newneic
 
 ## Project setup
 ```
@@ -15,10 +15,5 @@ npm run serve
 npm run build
 ```
 
-### Lints and fixes files
-```
-npm run lint
-```
-
 ### Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).

package.json

@@ -1,65 +1,47 @@
 {
-  "name": "neic",
+  "name": "newneic",
   "version": "0.1.0",
   "private": true,
-  "description": "新能源智能发电集中控制系统",
-  "author": "gyee",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
-    "dist": "electron-builder",
-    "dist-linux": "electron-builder --linux",
-    "dist-mac": "electron-builder --mac",
-    "dist-win": "electron-builder --win --ia32",
-    "dist-win64": "electron-builder --win --x64",
     "electron:build": "vue-cli-service electron:build",
     "electron:serve": "vue-cli-service electron:serve",
-    "pack": "electron-builder --dir",
     "postinstall": "electron-builder install-app-deps",
     "postuninstall": "electron-builder install-app-deps"
   },
   "main": "background.js",
   "dependencies": {
     "axios": "^0.21.1",
-    "core-js": "^3.15.2",
-    "electron-squirrel-startup": "^1.0.0",
-    "element-plus": "^1.0.2-beta.54",
+    "core-js": "^3.6.5",
+    "dayjs": "^1.10.6",
+    "echarts": "^5.1.2",
+    "element-plus": "^1.0.2-beta.55",
+    "element-ui": "^2.15.3",
+    "register-service-worker": "^1.7.1",
     "stompjs": "^2.3.3",
-    "vue": "^3.1.4",
-    "vue-router": "^3.5.2",
-    "vuex": "^4.0.2"
+    "vue": "^3.0.0",
+    "vue-router": "^4.0.0-0",
+    "vuex": "^4.0.0-0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.13",
-    "@vue/cli-plugin-eslint": "~4.5.13",
-    "@vue/cli-service": "~4.5.13",
-    "@vue/compiler-sfc": "^3.1.4",
-    "babel-eslint": "^10.1.0",
-    "electron": "^13.1.5",
-    "electron-devtools-installer": "^3.2.0",
-    "eslint": "^7.30.0",
-    "eslint-plugin-vue": "^7.12.1",
-    "vue-cli-plugin-electron-builder": "^2.1.1"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/vue3-essential",
-      "eslint:recommended"
-    ],
-    "parserOptions": {
-      "parser": "babel-eslint"
-    },
-    "rules": {}
+    "@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",
+    "node-sass": "^4.12.0",
+    "sass-loader": "^8.0.2",
+    "vue-cli-plugin-electron-builder": "~2.1.1"
   },
   "browserslist": [
     "> 1%",
     "last 2 versions",
     "not dead"
-  ],
-  "config": {}
+  ]
 }

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

@@ -0,0 +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>

public/robots.txt

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

src/App.vue

@@ -1,27 +1,18 @@
-<template>
-  <TitleBar />
-  <CenterPage/>
-  <StatusBar />
+<template class="app">
+  <TitleBar class="titleBar"/>
+  <StatusBar class="statusBar" />
+  <router-view />
 </template>
-
 <script>
-import TitleBar from "./components/TitleBar.vue";
-import CenterPage from "./components/CenterPage.vue";
-import StatusBar from "./components/StatusBar.vue";
-
-import MessageBridge from "./assets/script/MessageBridge";
-
-export default {
-  name: "App",
-  components: {
-    TitleBar,
-    CenterPage,
-    StatusBar,
-  },
-  props:{
-    
-  },
-  created: function () {
+  import TitleBar from 'views/TitleBar.vue'
+  import StatusBar from 'views/StatusBar.vue'
+  import MessageBridge from 'utils/MessageBridge'
+  export default {
+    components:{
+      TitleBar,
+      StatusBar,
+    },
+    created: function () {
     this.initData()
   },
   methods: {
@@ -35,29 +26,30 @@ export default {
       this.$store.commit('windturbinelist', json)
     },
   },
-};
+  }
 </script>
-
 <style>
-@import "./assets/style/main.css";
-/*#app {
-   font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px; 
-  background-color: coral;
-  padding: 0;
-  margin: 0;
-  border: none;
-} */
-
-body {
+@import "../src/assets/styles/main.css";
+  body {
   /* 设置内容不可选中 */
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
-</style>
+  /* .app{
+    background-color: #000000;
+  } */
+  .statusBar{
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+  }
+  .titleBar{
+    width: 100%;
+    position: relative;
+    top: 0;
+    left: 0;
+  }
+</style>

src/api/index.js

@@ -0,0 +1,59 @@
+import request from "../utils/request";
+//登陆
+const login = (uname, psd, data) => {
+    return request({
+        baseURL:process.env.VUE_APP_API,
+        url: `/api/user/login?userName=${uname}&psd=${psd}`,
+        method: "get",
+        data,
+    });
+};
+//刷新报警信息
+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}`,
+        method: "get",
+    });
+};
+//数据刷新
+const refreshData = (keys) => {
+    return request({
+        baseURL:process.env.VUE_APP_ADAPTERURL,
+        url: `/ts/latest?keys=${keys}`,
+        method: "get",
+    });
+};
+//风机控制
+const windturbControl = (isLockOrUnlock,pairs) => {
+    return request({
+        baseURL:process.env.VUE_APP_API,
+        url: `/api/control/send?isLockOrUnlock=${isLockOrUnlock}`,
+        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",
+    });
+};
+
+export default {
+    login,
+    getSnap,
+    refreshData,
+    windturbControl,
+    nitWinturbineBaseData,
+    getOverview,
+};

src/assets/style/main.css

@@ -41,15 +41,24 @@ body,
 .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 #1D6AEB !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;

src/background.js

@@ -3,7 +3,6 @@
 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
@@ -19,12 +18,14 @@ async function createWindow() {
     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
+      enableRemoteModule: true,   // 打开remote模块
     }
   })
 
@@ -61,7 +62,7 @@ app.on('ready', async () => {
   if (isDevelopment && !process.env.IS_TEST) {
     // Install Vue Devtools
     try {
-      await installExtension(VUEJS_DEVTOOLS)
+      await installExtension(VUEJS3_DEVTOOLS)
     } catch (e) {
       console.error('Vue Devtools failed to install:', e.toString())
     }

src/components/BasicInformationDetail.vue

@@ -0,0 +1,975 @@
+<template>
+  <div class="firstdiv">
+    <el-row>
+      <el-col :span="12">
+        <StandAloneImg :activeIndex="showIndex" @selectSvg="selectSvg" class="sai"></StandAloneImg>
+      </el-col>
+      <el-col :span="12" class="right">
+        <div class="marks" v-if="healthInfo.bj">
+          <div class="healthInfo">健康指数：</div>
+          <div class="healthTable" v-if="healthInfo.other">
+            <div class="healthTitle">
+              <div class="name">名称</div>
+              <div class="level">等级</div>
+              <div class="times">重要报警次数</div>
+              <div class="times">一般报警次数</div>
+            </div>
+            <div :class="showIndex===3?'healthContent_on':'healthContent'" @click="chooseInfo(3)">
+              <div class="contentName">变桨</div>
+              <el-rate class="starLevel" v-model="healthInfo.bj.star" disabled :max="max" void-color="#141414"
+                text-color="#E8A20D">
+              </el-rate>
+              <div class="contentTimes">{{healthInfo.bj.heightCount}}</div>
+              <div class="contentTimess">{{healthInfo.bj.lowCount}}</div>
+            </div>
+            <div :class="showIndex===2?'healthContent_on':'healthContent'" @click="chooseInfo(2)">
+              <div class="contentName">齿轮箱</div>
+              <el-rate class="starLevel" v-model="healthInfo.clx.star" disabled :max="max" void-color="#242424"
+                text-color="#E8A20D">
+              </el-rate>
+              <div class="contentTimes">{{healthInfo.clx.heightCount}}</div>
+              <div class="contentTimess">{{healthInfo.clx.lowCount}}</div>
+            </div>
+            <div :class="showIndex===1?'healthContent_on':'healthContent'" @click="chooseInfo(1)">
+              <div class="contentName">发电机</div>
+              <el-rate class="starLevel" v-model="healthInfo.fdj.star" disabled :max="max" void-color="#141414"
+                text-color="#E8A20D">
+              </el-rate>
+              <div class="contentTimes">{{healthInfo.fdj.heightCount}}</div>
+              <div class="contentTimess">{{healthInfo.fdj.lowCount}}</div>
+            </div>
+            <div :class="showIndex===5?'healthContent_on':'healthContent'" @click="chooseInfo(5)">
+              <div class="contentName">液压</div>
+              <el-rate class="starLevel" v-model="healthInfo.yy.star" disabled :max="max" void-color="#141414"
+                text-color="#E8A20D">
+              </el-rate>
+              <div class="contentTimes">{{healthInfo.yy.heightCount}}</div>
+              <div class="contentTimess">{{healthInfo.yy.lowCount}}</div>
+            </div>
+            <div :class="showIndex===4?'healthContent_on':'healthContent'" @click="chooseInfo(4)">
+              <div class="contentName">偏航</div>
+              <el-rate class="starLevel" v-model="healthInfo.ph.star" disabled :max="max" void-color="#141414"
+                text-color="#E8A20D">
+              </el-rate>
+              <div class="contentTimes">{{healthInfo.ph.heightCount}}</div>
+              <div class="contentTimess">{{healthInfo.ph.lowCount}}</div>
+            </div>
+            <div :class="showIndex===6?'healthContent_on':'healthContent'">
+              <div class="contentName">其他</div>
+              <el-rate class="starLevel" v-model="healthInfo.other.star" disabled :max="max" void-color="#141414"
+                text-color="#E8A20D">
+              </el-rate>
+              <div class="contentTimes">{{healthInfo.other.heightCount}}</div>
+              <div class="contentTimess">{{healthInfo.other.lowCount}}</div>
+            </div>
+          </div>
+        </div>
+        <div class="showDate">
+          <div class="label">
+            <div class="title">标注信息：</div>
+            <el-autocomplete @blur="labelChange(state1)" class="inputs" v-model="state1"
+              :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect" style="width: 174px">
+            </el-autocomplete>
+          </div>
+          <div class="label1">
+            <div class="title">挂牌信息：</div>
+            <!-- <div>挂牌原因</div> -->
+            <el-select @change="listedChange(value)" 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>
+        <div class="label">
+          <div class="button" v-if="types === 2" @click="menuClicked({ type: 'send', controlType:'1' })">启动</div>
+          <div class="button" v-if="types === 4" @click="menuClicked({ type: 'send', controlType:'2' })">停机</div>
+          <div class="button" v-if="types === 0 ||types === 5 " @click="menuClicked({ type: 'send', controlType:'5' })">
+            复位</div>
+          <div class="button" v-if="types === 2" @click="menuClicked({ type: 'send', controlType:'6' })">维护</div>
+          <div class="button" v-if="types === 6" @click="menuClicked({ type: 'send', controlType:'8' })">取消维护</div>
+          <div class="button" v-if="selectValue !==''" @click="menuClicked({ type: 'lock', value: 'UnLock' })">取消挂牌
+          </div>
+          <!-- <div class="button" @click="menuClicked({ type: 'send' })">生成缺陷单</div> -->
+        </div>
+      </el-col>
+    </el-row>
+    <el-row class="datas">
+      <el-col :span="12">
+        <div class="dataList">
+          <div class="dataTitle">
+            <div style="margin-left: 24px;">部件主要参数</div>
+          </div>
+          <div class="dataContent">
+            <div class="dataBlock" v-for="(item,index) in showData" :key="index">
+              <div class="dataName">{{item.name}}</div>
+              <div class="numerical">
+                <div class="values">{{item.value}}</div>
+                <div class="unit">{{item.unit}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <div class="dataLists">
+          <div class="dataTitle">
+            <div style="margin-left: 24px;">报警参数</div>
+          </div>
+          <el-scrollbar class="scorll">
+            <el-table stripe="true" border-color="#141414" :data="warning" style="width: 100%" :header-cell-style="{
+              background: '#141414',
+              color: '#B3B3B3',
+              'border-bottom':'solid 1px #242424',
+              'text-align':'center'
+            }"
+              :cell-style="{ background: '#141414', color: '#B3B3B3', 'border-bottom': 'solid 1px #242424','text-align':'center' }">
+              <el-table-column prop="time" label="时间" width="220">
+              </el-table-column>
+              <el-table-column prop="alertText" label="故障信息" width="280">
+              </el-table-column>
+              <el-table-column prop="rankName" label="故障级别">
+              </el-table-column>
+            </el-table>
+          </el-scrollbar>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+  import BackgroundData from 'utils/BackgroundData'
+  // import Worning from "./warning.vue"
+  import axios from 'axios';
+  import StandAloneImg from "./StandAloneImg.vue";
+  import dayjs from 'dayjs'
+  export default {
+    name: "BasicInformationDetail",
+    components: {
+      // Worning,
+      StandAloneImg,
+    },
+    props: {
+      types: {
+        type: Number,
+        default: null,
+      },
+      windturbine: Object,
+    },
+    mounted() {
+      this.getDetial()
+
+    },
+    beforeUpdate() {
+      this.getHealthDate()
+      
+      this.getWarning()
+    },
+    // onShow(){
+    //   console.log(1111)
+    // },
+    data() {
+      return {
+        // warnList: [],
+        BasicInfo: {},
+        temperatureInfo: new Array() /* 温度信息 */,
+        pitchInfo: new Array() /* 变桨信息 */,
+        generalInfo: new Array() /* 基本信息 */,
+        powerGridInfo: new Array() /* 电网信息 */,
+        restaurants: [],
+        state1: "",
+        showIndex: 1,
+        starValue: 3,
+        max: 4,
+        current: null,
+        disableds: true,
+        tableData: [{
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        }, {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }, {
+          date: '2016-05-08',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }, {
+          date: '2016-05-09',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }],
+        options: [{
+          value: '8',
+          label: '检修'
+        }, {
+          value: '7',
+          label: '故障维修'
+        }, {
+          value: '2',
+          label: '场内受累检修'
+        }, {
+          value: '3',
+          label: '场内受累故障'
+        }, {
+          value: '4',
+          label: '场外受累电网'
+        }, {
+          value: '5',
+          label: '场外受累天气'
+        }],
+        selectValue: '7',
+        healthInfo: {},
+        warning: [],
+        showData: [],
+        controlErorCodes: [
+          "控制成功",
+          "控制命令发送失败",
+          "无效的控制地址",
+          "被控设备异常",
+          "网络连接错误,检查场站通信",
+          "控制结果读取超时",
+          "未知错误",
+          "控制命令错误",
+          "收到无法识别数据",
+          "未读取到数据包",
+          "未知错误",
+          "风机操作过频繁",
+          "风机被挂牌",
+          "风机操作与风机状态不符",
+          "需要登录",
+        ],
+      };
+    },
+    methods: {
+      getHealthDate() {
+        axios.get(`http://18.6.30.53:8070/alarm/statistic?stId=${this.windturbine.stationId}&wtId=${this.windturbine.windturbineId}`)
+          .then(msg => {
+            if (msg.data.code === 200) {
+              this.healthInfo = msg.data.data;
+            }
+
+          })
+          .catch(err => {
+            console.log(err);
+          });
+      },
+      getDetial() {
+        axios.get(process.env.VUE_APP_API+`/api/windturbine/info/${this.windturbine.windturbineId}`)
+          .then(msg => {
+            let restaurants = []
+            this.selectValue = (msg.data.lockType === 0 ? '' : String(msg.data.lockType))
+            this.state1 = msg.data.markValue
+            msg.data.markValues.forEach(item => {
+              let data = {}
+              data.value = item
+              restaurants.push(data)
+            })
+            this.restaurants = restaurants
+          })
+      },
+      getWarning() {
+        let parts = ''
+        switch (this.showIndex) {
+          case 1:
+            parts = 'fdj'
+            break;
+          case 2:
+            parts = 'clx'
+            break;
+          case 3:
+            parts = 'bj'
+            break;
+          case 4:
+            parts = 'ph'
+            break;
+          case 5:
+            parts = 'yy'
+            break;
+        }
+        axios.get(`http://18.6.30.53:8070/alarm/list?stId=${this.windturbine.stationId}&wtId=${this.windturbine.windturbineId}&widget=${parts}`)
+          .then(msg => {
+            if (msg.data.code === 200) {
+              msg.data.data && msg.data.data.forEach(item => {
+                item.time = dayjs(item.time).format('MM-DD HH:mm:ss')
+              })
+              this.warning = msg.data.data;
+            }
+
+          })
+          .catch(err => {
+            console.log(err);
+          });
+      },
+      chooseInfo(value) {
+        this.showIndex = value
+        switch (this.showIndex) {
+          case 1:
+            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part6")[0] ? this.BasicInfo.BasicInfo.filter(item => item.index === "part6")[0].param : []
+            break;
+          case 2:
+            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part8")[0] ? this.BasicInfo.BasicInfo.filter(item => item.index === "part8")[0].param : []
+            break;
+          case 3:
+            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part7")[0] ? this.BasicInfo.BasicInfo.filter(item => item.index === "part7")[0].param : []
+            break;
+          case 4:
+            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part10")[0] ? this.BasicInfo.BasicInfo.filter(item => item.index === "part10")[0].param : []
+            break;
+          case 5:
+            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part9")[0] ? this.BasicInfo.BasicInfo.filter(item => item.index === "part9")[0].param : []
+            break;
+        }
+        this.getWarning()
+      },
+      listedChange() {
+        switch (this.selectValue) {
+          case '8':
+            this.menuClicked({ type: "lock", value: "CheckLock" });
+            break;
+          case '7':
+            this.menuClicked({ type: "lock", value: "FaultLock" });
+            break;
+          case '2':
+            this.menuClicked({ type: "lock", value: "StationCheckLock" });
+            break;
+          case '3':
+            this.menuClicked({ type: "lock", value: "StationFaulLock" });
+            break;
+          case '4':
+            this.menuClicked({ type: "lock", value: "StationPowerLineLock" });
+            break;
+          case '5':
+            this.menuClicked({ type: "lock", value: "StationWeatherLock" });
+            break;
+        }
+      },
+      labelChange() {
+        let values = BackgroundData.getInstance().Marks;
+        if (!values.filter(item => item.title = this.windturbine.windturbineId)[0]) {
+          this.menuClicked({ type: "marking" })
+        }
+        BackgroundData.getInstance().updateMarks(this.windturbine, this.state1);
+      },
+      show() {
+        // axios.get(`http://${config.calcUrl}/alarm/real-time-alarm?objectId=${this.windturbine.windturbineId}&pageIndex=1&pageSize=50`)
+        // .then(msg=>{
+        //   var vs = msg.data;
+        //   if(vs.length<=0)return;
+        //   this.alarmTime = BackgroundData.getInstance().formatDate(vs[0].lastUpdateTime);
+        //   this.alarmContent = vs[0].alertText;
+        //   this.alarms = msg.data;
+        //   console.log(this.alarms)
+        // })
+      },
+      start(bi) {
+        this.BasicInfo = bi;
+        this.bindData();
+
+        this.refreshData();
+        this.refreshTimer = setInterval(this.refreshData, 3000);
+      },
+      end() {
+        clearInterval(this.refreshTimer);
+      },
+      // alarmd(bi) {
+      //   let dataList = []
+      //   let warnList = []
+      //   let date1 = {
+      //     type: 1,
+      //     alertText: []
+      //   }
+      //   let date2 = {
+      //     type: 2,
+      //     alertText: []
+      //   }
+      //   let date3 = {
+      //     type: 3,
+      //     alertText: []
+      //   }
+      //   let date4 = {
+      //     type: 4,
+      //     alertText: []
+      //   }
+      //   let date5 = {
+      //     type: 5,
+      //     alertText: []
+      //   }
+      //   bi.forEach(item => {
+      //     let data = {}
+      //     data.alertText = item.alertText
+      //     if (item.alertText.indexOf("变桨") >= 0) {
+      //       data.type = 1
+      //     } else if (item.alertText.indexOf("偏航") >= 0) {
+      //       data.type = 5
+      //     }
+      //     else if (item.alertText.indexOf("发电机") >= 0) {
+      //       data.type = 3
+      //     }
+      //     else if (item.alertText.indexOf("齿轮箱") >= 0) {
+      //       data.type = 2
+      //     }
+      //     else if (item.alertText.indexOf("液压") >= 0) {
+      //       data.type = 4
+      //     }
+      //     data.type ? warnList.push(data) : ''
+      //   })
+      //   warnList.forEach(item => {
+      //     switch (item.type) {
+      //       case 1:
+      //         date1.alertText.push(item.alertText)
+      //         break;
+      //       case 2:
+      //         date2.alertText.push(item.alertText)
+      //         break;
+      //       case 3:
+      //         date3.alertText.push(item.alertText)
+      //         break;
+      //       case 4:
+      //         date4.alertText.push(item.alertText)
+      //         break;
+      //       case 5:
+      //         date5.alertText.push(item.alertText)
+      //         break;
+      //     }
+      //   })
+      //   date1.alertText.length > 0 ? dataList.push(date1) : ''
+      //   date2.alertText.length > 0 ? dataList.push(date2) : ''
+      //   date3.alertText.length > 0 ? dataList.push(date3) : ''
+      //   date4.alertText.length > 0 ? dataList.push(date4) : ''
+      //   date5.alertText.length > 0 ? dataList.push(date5) : ''
+      //   this.warnList = dataList
+      // },
+      /* 刷新数据 */
+      refreshData() {
+        var bg = BackgroundData.getInstance();
+        let mark = BackgroundData.getInstance().Marks;
+        console.log(mark);
+        bg.initWinturbineBaseData(this.BasicInfo, this.onMessage);
+
+      },
+
+      /* 获得数据 */
+      onMessage(msg) {
+        this.BasicInfo.BasicInfo.forEach((element) => {
+          element.param.forEach((im) => {
+            var val = msg[im.code];
+            if (typeof val !== "undefined") {
+              if (im.unit == "万度") {
+                im.value = (val.doubleValue / 10000).toFixed(2);
+              } else {
+                im.value = val.doubleValue === 0 ? val.doubleValue : val.doubleValue ? val.doubleValue.toFixed(2) : val.longValue ? val.longValue : val.booleanValue;
+              }
+            }
+          });
+        });
+        console.log(msg);
+        console.log(this.BasicInfo.BasicInfo);
+        switch (this.showIndex) {
+          case 1:
+            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part6")[0] ? this.BasicInfo.BasicInfo.filter(item => item.index === "part6")[0].param : []
+            break;
+          case 2:
+            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part8")[0] ? this.BasicInfo.BasicInfo.filter(item => item.index === "part8")[0].param : []
+            break;
+          case 3:
+            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part7")[0] ? this.BasicInfo.BasicInfo.filter(item => item.index === "part7")[0].param : []
+            break;
+          case 4:
+            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part10")[0] ? this.BasicInfo.BasicInfo.filter(item => item.index === "part10")[0].param : []
+            break;
+          case 5:
+            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part9")[0] ? this.BasicInfo.BasicInfo.filter(item => item.index === "part9")[0].param : []
+            break;
+        }
+      },
+
+      bindData() {
+        this.BasicInfo.BasicInfo.forEach((element) => {
+          if (element.tag == "基本信息") {
+            this.generalInfo = element.param;
+          } else if (element.tag == "温度信息") {
+            this.temperatureInfo = element.param;
+          } else if (element.tag == "电网信息") {
+            this.powerGridInfo = element.param;
+          } else if (element.tag == "桨叶信息") {
+            this.pitchInfo = element.param;
+          }
+        });
+      },
+      querySearch(queryString, cb) {
+        var restaurants = this.restaurants;
+        var results = queryString
+          ? restaurants.filter(this.createFilter(queryString))
+          : restaurants;
+        // 调用 callback 返回建议列表的数据
+        cb(results);
+      },
+      createFilter(queryString) {
+        return (restaurant) => {
+          return (
+            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
+            0
+          );
+        };
+      },
+      handleSelect(item) {
+        console.log(item);
+      },
+      selectSvg(index) {
+        this.showIndex = index;
+        switch (this.showIndex) {
+          case 1:
+            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part6")[0] ? this.BasicInfo.BasicInfo.filter(item => item.index === "part6")[0].param : []
+            break;
+          case 2:
+            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part8")[0] ? this.BasicInfo.BasicInfo.filter(item => item.index === "part8")[0].param : []
+            break;
+          case 3:
+            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part7")[0] ? this.BasicInfo.BasicInfo.filter(item => item.index === "part7")[0].param : []
+            break;
+          case 4:
+            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part10")[0] ? this.BasicInfo.BasicInfo.filter(item => item.index === "part10")[0].param : []
+            break;
+          case 5:
+            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part9")[0] ? this.BasicInfo.BasicInfo.filter(item => item.index === "part9")[0].param : []
+            break;
+        }
+        this.getWarning()
+      },
+      menuClicked(msg, windturbine) {
+        let dataList = []
+        dataList[0] = windturbine ? windturbine : this.windturbine
+        var bd = BackgroundData.getInstance();
+        if (!bd.LoginUser) {
+          this.$notify({
+            title: "请登录",
+            message: "控制风机需要先登录！",
+            type: "warning",
+            position: "bottom-right",
+            offset: 60,
+            duration: 3000,
+          });
+          this.selectValue = ''
+          return;
+        }
+        if (msg.type == "lock") {
+          // 挂牌
+          var los = dataList;
+          for (var id in los) {
+            los[id].lockType = msg.value;
+          }
+          bd.windturbineControl(
+            los,
+            true,
+            this.controlSuccess,
+            this.controlError
+          );
+        } else if (msg.type == "send") {
+
+          // 发送
+          dataList[0].controlType = Number(msg.controlType)
+          var vs = dataList;
+          bd.windturbineControl(
+            vs,
+            false,
+            this.controlSuccess,
+            this.controlError
+          );
+        } else if (msg.type == "marking") {
+          // 标注
+          var vvs = dataList;
+          bd.marking(vvs);
+        }
+      },
+      /* 控制成功 */
+      controlSuccess(msg) {
+        console.log(msg);
+        var mss = '';     // 信息
+        var iserror = false;// 是否有控制错误的风机
+        for (var v in msg.data) {
+          var val = msg.data[v];
+          if (val.errorCode > 0) {
+            iserror = true;
+            mss += `${val.windturbineId}  ${this.controlErorCodes[val.errorCode]}\n`;
+          }
+        }
+        var tp = iserror ? "warning" : "success";
+        var dt = iserror ? 0 : 4500;
+        if (!iserror) {
+          mss = "控制成功";
+        }
+
+        this.$notify({
+          title: "控制",
+          message: mss,
+          type: tp,
+          position: "bottom-right",
+          offset: 60,
+          duration: 3000,
+        });
+      },
+
+      /* 控制失败 */
+      controlError(err) {
+        this.$notify({
+          title: "控制出现错误",
+          message: err.message,
+          type: "warning",
+          position: "bottom-right",
+          offset: 60,
+          duration: 3000,
+        });
+      },
+    },
+  };
+</script>
+
+<style scoped>
+  .firstdiv {
+    height: 70vh;
+  }
+
+  .onediv {
+    float: left;
+    margin-right: 30px;
+  }
+
+  .twodiv {
+    float: right;
+    margin-right: 30px;
+  }
+
+  td:nth-child(1) {
+    height: 25px;
+    width: 130px;
+    text-align: right;
+  }
+
+  td:nth-child(2) {
+    width: 78px;
+    text-align: right;
+    color: rgb(5, 176, 71);
+  }
+
+  td:nth-child(3) {
+    text-align: center;
+    width: 30px;
+  }
+
+  tr:nth-child(1) {
+    font-size: 20px;
+    width: 90px;
+    text-align: right;
+  }
+
+  th {
+    height: 40px;
+  }
+
+  table {
+    margin-top: 30px;
+  }
+
+  /* .worning1{
+    position: absolute;
+    top: 143px;
+    left: 119px;
+    z-index: 999;
+  }
+  .worning2{
+    position: absolute;
+    top: 210px;
+    left: 282px;
+    z-index: 99;
+  }
+  .worning3{
+    position: absolute;
+    top: 219px;
+    left: 348px;
+    z-index: 0;
+  }
+  .worning4{
+    position: absolute;
+    top: 273px;
+    left: 296px;
+    z-index: 0;
+  }
+  .worning5{
+    position: absolute;
+    top: 287px;
+    left: 252px;
+    z-index: 0;
+  } */
+  .sai {
+    float: left;
+    margin-left: 40px;
+    margin-top: 30px;
+    margin-bottom: 15px;
+    width: 55vh;
+    height: 34vh;
+  }
+
+  /* .inline-input {
+    .el-scrollbar{
+      max-height: 160px; 
+    }
+  } */
+  .right {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .marks {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .title {
+    margin-right: 16px;
+    font-size: 18px;
+    color: #ffffff;
+  }
+
+  .inputs {
+    border: none;
+    width: 174px !important;
+  }
+
+  .area {
+    border: 2px dashed #ffffff;
+    height: 200px;
+    border-radius: 10px;
+    margin-top: 20px;
+    margin-left: 5.5%;
+  }
+
+  .healthInfo {
+    margin-top: 16px;
+    margin-bottom: 11px;
+    font-size: 18px;
+    color: #FFFFFF;
+  }
+
+  .healthTable {
+    width: 688px;
+    background-color: #141414;
+  }
+
+  .healthTitle {
+    width: 100%;
+    height: 37px;
+    background-color: #242424;
+    font-size: 12px;
+    color: #FFFFFF;
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 5px;
+  }
+
+  .name {
+    width: 172px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .level {
+    width: 211px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .times {
+    width: 153px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .healthContent {
+    height: 30px;
+    display: flex;
+    flex-direction: row;
+    width: 96%;
+    margin-left: 2%;
+    border-bottom: 1px solid #242424;
+    font-size: 12px;
+    color: #B3B3B3;
+  }
+
+  .healthContent_on {
+    height: 30px;
+    display: flex;
+    flex-direction: row;
+    width: 96%;
+    margin-left: 2%;
+    border-bottom: 1px solid #242424;
+    background-color: #242424;
+    font-size: 12px;
+    color: #05BB4C;
+  }
+
+  .contentName {
+    width: 158px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: -5px;
+  }
+
+  .starLevel {
+    width: 211px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 8px;
+  }
+
+  .contentTimes {
+    width: 124px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 11px;
+  }
+
+  .contentTimess {
+    width: 120px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 30px;
+  }
+
+  .label {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-top: 16px;
+  }
+
+  .label1 {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-top: 16px;
+    margin-right: 15px;
+  }
+
+  .button {
+    width: 100px;
+    height: 27px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    color: #ffffff;
+    background-color: #242424;
+    border: 1px solid #3D3D3D;
+    margin-right: 12px;
+  }
+
+  .datas {
+    margin-top: 15px;
+  }
+
+  .dataList {
+    width: 94%;
+    /* min-height: 250px; */
+    height: 28vh;
+    background-color: #141414;
+    display: flex;
+    flex-direction: column;
+    margin-left: 2%;
+  }
+
+  .dataLists {
+    width: 97%;
+    /* min-height: 250px; */
+    height: 28vh;
+    background-color: #141414;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .dataTitle {
+    display: flex;
+    height: 37px;
+    width: 100%;
+    background-color: #242424;
+    color: #FFFFFF;
+    font-size: 12px;
+    align-items: center;
+  }
+
+  .dataContent {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  .dataBlock {
+    width: 145px;
+    height: 62px;
+    background-color: #242424;
+    border: 1px solid #3D3D3D;
+    margin-left: 16px;
+    margin-top: 22px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .dataName {
+    font-size: 12px;
+    color: #FFFFFF;
+    margin-left: 26px;
+    margin-bottom: 6px;
+  }
+
+  .numerical {
+    display: flex;
+    flex-direction: row;
+    color: #05BB4C;
+    align-items: baseline;
+    margin-left: 26px;
+  }
+
+  .values {
+    font-size: 16px;
+  }
+
+  .unit {
+    font-size: 12px;
+    margin-left: 8px;
+  }
+
+  .scorll {
+    height: 212px;
+  }
+
+  .showDate {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+</style>

src/components/BoosterStation/pl1.vue

@@ -0,0 +1,996 @@
+<template>
+	<div>
+		<el-row :gutter="10">
+			<el-col :span="24">
+				<previewPicture>
+					<template v-slot:svg>
+<svg class="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="图层_1" x="0px" y="0px" width="1848.938px" height="829.936px" viewBox="0 0 1848.938 829.936" enable-background="new 0 0 1848.938 829.936" xml:space="preserve">
+				<g id="other">
+					<text transform="matrix(1 0 0 1 133.1877 296.7874)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">312</text>
+					<rect x="-0.006" y="212.678" transform="matrix(-1 0.0011 -0.0011 -1 1849.1648 426.5897)" fill="#CAA51A" width="1848.942" height="2.25" />
+					<rect x="167.938" y="215.912" fill="#CAA51A" width="2.25" height="42.75" />
+					<rect x="167.938" y="316.967" fill="#CAA51A" width="2.25" height="110.693" />
+					<rect x="134.188" y="325.66" fill="#CAA51A" width="2.25" height="102" />
+					<rect x="134.188" y="461.359" fill="#CAA51A" width="2.25" height="27.303" />
+					<rect x="123.766" y="488.66" fill="#CAA51A" width="23.297" height="2.25" />
+					<rect x="150.089" y="509.16" fill="#CAA51A" width="2.25" height="21.375" />
+					<rect x="139.667" y="530.535" fill="#CAA51A" width="23.297" height="2.25" />
+					<rect x="168.931" y="461.359" fill="#CAA51A" width="2.25" height="27.303" />
+					<rect x="158.509" y="488.66" fill="#CAA51A" width="23.297" height="2.25" />
+					<rect x="56.938" y="325.66" fill="#CAA51A" width="79.5" height="2.25" />
+					<polygon fill="#CAA51A" points="56.934,331.392 47.125,326.781 56.938,322.183  " />
+					<circle fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" cx="169.063" cy="452.338" r="9.021" />
+					<circle fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" cx="169.063" cy="436.681" r="9.021" />
+					<polyline fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" points="172.292,456.467 169.047,453.258    166.023,456.467  " />
+
+					<line fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" x1="168.979" y1="453.173" x2="168.979" y2="447.514" />
+					<polygon fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" points="172.103,433.772 165.583,433.772    169.021,439.148  " />
+					<circle fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" cx="136.438" cy="452.338" r="9.021" />
+					<circle fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" cx="136.438" cy="436.681" r="9.021" />
+					<polyline fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" points="139.667,456.467 136.422,453.258    133.398,456.467  " />
+
+					<line fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" x1="136.354" y1="453.173" x2="136.354" y2="447.514" />
+					<polygon fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" points="139.478,433.772 132.958,433.772    136.396,439.148  " />
+
+					<rect x="112.188" y="473.785" fill="none" stroke="#CAA51A" stroke-width="2" stroke-miterlimit="10" width="77.5" height="46.75" />
+					<circle fill="none" stroke="#CAA51A" stroke-width="1.5" stroke-miterlimit="10" cx="151.5" cy="505.848" r="3.063" />
+
+					<line fill="none" stroke="#CAA51A" stroke-width="1.5" stroke-miterlimit="10" x1="153.777" y1="503.01" x2="168.372" y2="490.635" />
+
+					<line fill="none" stroke="#CAA51A" stroke-width="1.5" stroke-miterlimit="10" x1="134.629" y1="490.635" x2="150.152" y2="503.564" />
+					<polyline fill="#44426C" points="59.295,305.187 59.295,283.253 117.332,283.253 117.332,305.187  " />
+					<text transform="matrix(1 0 0 1 70.5085 297.7932)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.8698">厂用变</text>
+					<text transform="matrix(1 0 0 1 135.4143 557.7874)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">400V</text>
+					<rect x="1397.857" y="650.298" fill="#CAA51A" width="2.25" height="27.303" />
+					<rect x="1387.436" y="677.6" fill="#CAA51A" width="23.297" height="2.25" />
+					<rect x="1413.758" y="698.1" fill="#CAA51A" width="2.25" height="21.375" />
+					<rect x="1403.336" y="719.475" fill="#CAA51A" width="23.297" height="2.25" />
+					<rect x="1432.6" y="650.298" fill="#CAA51A" width="2.25" height="27.303" />
+					<rect x="1422.178" y="677.6" fill="#CAA51A" width="23.297" height="2.25" />
+					<circle fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" cx="1432.732" cy="641.276" r="9.021" />
+					<circle fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" cx="1432.73" cy="625.621" r="9.021" />
+					<polyline fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" points="1435.961,645.403 1432.716,642.194    1429.691,645.403  " />
+
+					<line fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" x1="1432.648" y1="642.109" x2="1432.648" y2="636.449" />
+					<polygon fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" points="1435.771,622.711 1429.251,622.711    1432.689,628.087  " />
+					<circle fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" cx="1400.107" cy="641.276" r="9.021" />
+					<circle fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" cx="1400.105" cy="625.621" r="9.021" />
+					<polyline fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" points="1403.336,645.403 1400.091,642.194    1397.066,645.403  " />
+
+					<line fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" x1="1400.023" y1="642.109" x2="1400.023" y2="636.449" />
+					<polygon fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" points="1403.146,622.711 1396.626,622.711    1400.064,628.087  " />
+
+					<rect x="1375.857" y="662.725" fill="none" stroke="#CAA51A" stroke-width="2" stroke-miterlimit="10" width="77.5" height="46.75" />
+					<circle fill="none" stroke="#CAA51A" stroke-width="1.5" stroke-miterlimit="10" cx="1415.169" cy="694.787" r="3.063" />
+
+					<line fill="none" stroke="#CAA51A" stroke-width="1.5" stroke-miterlimit="10" x1="1417.446" y1="691.947" x2="1432.042" y2="679.572" />
+
+					<line fill="none" stroke="#CAA51A" stroke-width="1.5" stroke-miterlimit="10" x1="1398.297" y1="679.572" x2="1413.821" y2="692.503" />
+					<text transform="matrix(1 0 0 1 1375.8577 744.0569)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">400V  移动箱变</text>
+					<rect x="197.828" y="264.478" opacity="0.9" fill="#162320" enable-background="new    " width="115.109" height="18.491" />
+					<rect x="197.828" y="284.975" opacity="0.9" fill="#162320" enable-background="new    " width="115.109" height="18.49" />
+					<rect x="197.828" y="305.471" opacity="0.9" fill="#162320" enable-background="new    " width="115.109" height="18.49" />
+					<rect x="197.828" y="325.968" opacity="0.9" fill="#162320" enable-background="new    " width="115.109" height="18.488" />
+					<g>
+						<text transform="matrix(1 0 0 1 216.553 278.428)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">la</text>
+						<text transform="matrix(1 0 0 1 225.8801 278.428)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="9.6234">(A)</text>
+						<text transform="matrix(1 0 0 1 239.0789 278.428)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">:</text>
+					</g>
+					<g>
+						<text transform="matrix(1 0 0 1 210.6501 296.7874)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">P</text>
+						<text transform="matrix(1 0 0 1 217.6189 296.7874)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="9.6234">(kW)</text>
+						<text transform="matrix(1 0 0 1 239.0789 296.7874)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">:</text>
+					</g>
+					<g>
+						<text transform="matrix(1 0 0 1 202.6277 319.0725)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">Q</text>
+						<text transform="matrix(1 0 0 1 211.9099 319.0725)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="9.6234">(kVar)</text>
+						<text transform="matrix(1 0 0 1 239.0789 319.0725)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">:</text>
+					</g>
+					<g>
+						<text transform="matrix(1 0 0 1 215.6038 339.9065)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">COS:</text>
+					</g>
+					<rect x="88.313" y="102.478" opacity="0.9" fill="#162320" enable-background="new    " width="115.11" height="18.491" />
+					<rect x="88.313" y="122.975" opacity="0.9" fill="#162320" enable-background="new    " width="115.11" height="18.489" />
+					<rect x="88.313" y="143.471" opacity="0.9" fill="#162320" enable-background="new    " width="115.11" height="18.489" />
+					<rect x="88.313" y="163.968" opacity="0.9" fill="#162320" enable-background="new    " width="115.11" height="18.489" />
+					<g>
+						<text transform="matrix(1 0 0 1 105.2566 116.428)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">Ua</text>
+						<text transform="matrix(1 0 0 1 120.0554 116.428)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="9.6234">(kV)</text>
+						<text transform="matrix(1 0 0 1 138.2317 116.428)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">:</text>
+					</g>
+					<g>
+						<text transform="matrix(1 0 0 1 104.2776 134.7874)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">Ub</text>
+						<text transform="matrix(1 0 0 1 120.0554 134.7874)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="9.6234">(kV)</text>
+						<text transform="matrix(1 0 0 1 138.2307 134.7874)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">:</text>
+					</g>
+					<g>
+						<text transform="matrix(1 0 0 1 105.8406 157.0725)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">Uc</text>
+						<text transform="matrix(1 0 0 1 120.0554 157.0725)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="9.6234">(kV)</text>
+						<text transform="matrix(1 0 0 1 138.2317 157.0725)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">:</text>
+					</g>
+					<g>
+						<text transform="matrix(1 0 0 1 97.9822 177.9065)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">Uab</text>
+						<text transform="matrix(1 0 0 1 120.0564 177.9065)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="9.6234">(kV)</text>
+						<text transform="matrix(1 0 0 1 138.2312 177.9065)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">:</text>
+					</g>
+					<rect x="431.938" y="215.912" fill="#CAA51A" width="2.25" height="42.75" />
+					<rect x="431.938" y="316.967" fill="#CAA51A" width="2.25" height="187.126" />
+					<rect x="335.938" y="635.635" fill="#CAA51A" width="2.25" height="50.943" />
+					<rect x="335.938" y="726.91" fill="#CAA51A" width="2.25" height="10" />
+					<rect x="402.188" y="635.635" fill="#CAA51A" width="2.25" height="50.943" />
+					<rect x="336.444" y="635.635" fill="#CAA51A" width="17.577" height="2.25" />
+					<rect x="386.736" y="635.635" fill="#CAA51A" width="17.577" height="2.25" />
+					<rect x="370.938" y="502.439" fill="#CAA51A" width="123.272" height="2.25" />
+					<rect x="370.7" y="503.01" fill="#CAA51A" width="2.25" height="114.356" />
+					<rect x="491.961" y="503.01" fill="#CAA51A" width="2.25" height="114.356" />
+					<circle fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" cx="370.938" cy="626.389" r="9.021" />
+					<circle fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" cx="363.043" cy="635.412" r="9.021" />
+					<polyline fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" points="367.709,622.262 370.954,625.471    373.979,622.262  " />
+					<polyline fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" points="489.475,622.262 492.72,625.471    495.744,622.262  " />
+
+					<line fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" x1="371.022" y1="625.557" x2="371.022" y2="631.216" />
+					<polygon fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" points="360.002,638.322 366.522,638.322    363.084,632.947  " />
+					<circle fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" cx="378.835" cy="635.412" r="9.021" />
+					<polygon fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" points="375.794,638.322 382.314,638.322    378.876,632.947  " />
+					<g>
+
+						<rect x="325.688" y="686.579" fill="none" stroke="#F7F8F8" stroke-width="1.3" stroke-miterlimit="10" width="24" height="40.331" />
+						<path fill="none" stroke="#CB151D" stroke-width="1.2" stroke-miterlimit="10" d="M326.938,690.66c0,0,3.75,13.5,9.75,0    c4.75-6.5,8.25,3,8.25,3" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="348.438" y1="686.579" x2="325.688" y2="725.91" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="337.063" y1="718.41" x2="345.232" y2="718.41" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="337.063" y1="722.16" x2="345.232" y2="722.16" />
+					</g>
+					<rect x="402.563" y="726.91" fill="#CAA51A" width="2.25" height="10" />
+					<g>
+
+						<rect x="392.313" y="686.579" fill="none" stroke="#F7F8F8" stroke-width="1.3" stroke-miterlimit="10" width="24" height="40.331" />
+						<path fill="none" stroke="#CB151D" stroke-width="1.2" stroke-miterlimit="10" d="M393.563,690.66c0,0,3.75,13.5,9.75,0    c4.75-6.5,8.25,3,8.25,3" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="415.063" y1="686.579" x2="392.313" y2="725.91" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="403.688" y1="718.41" x2="411.857" y2="718.41" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="403.688" y1="722.16" x2="411.857" y2="722.16" />
+					</g>
+					<polyline fill="#44426C" points="355.987,670.835 355.987,648.9 385.188,648.9 385.188,670.835  " />
+					<text transform="matrix(1 0 0 1 363.3196 663.4397)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.8698">#1</text>
+					<polyline fill="#44426C" points="443.973,372.313 471.948,372.313 471.948,467.91 443.973,467.91  " />
+					<text transform="matrix(0 1 -1 0 453.3645 379.6477)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="13.5">#1</text>
+					<text transform="matrix(1 0 0 1 329.9377 748.2483)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">#1</text>
+					<text transform="matrix(1 0 0 1 396.1877 296.7874)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">313</text>
+					<text transform="matrix(1 0 0 1 396.1877 748.2483)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">#2</text>
+					<rect x="457.96" y="635.635" fill="#CAA51A" width="2.25" height="50.943" />
+					<rect x="457.96" y="726.91" fill="#CAA51A" width="2.25" height="10" />
+					<rect x="524.21" y="635.635" fill="#CAA51A" width="2.25" height="50.943" />
+					<rect x="458.466" y="635.635" fill="#CAA51A" width="17.577" height="2.25" />
+					<rect x="508.758" y="635.635" fill="#CAA51A" width="17.577" height="2.25" />
+					<circle fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" cx="492.96" cy="626.389" r="9.021" />
+					<circle fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" cx="485.064" cy="635.412" r="9.021" />
+
+					<line fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" x1="493.044" y1="625.557" x2="493.044" y2="631.216" />
+					<polygon fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" points="482.025,638.322 488.544,638.322    485.107,632.947  " />
+					<circle fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" cx="500.857" cy="635.412" r="9.021" />
+					<polygon fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" points="497.817,638.322 504.336,638.322    500.898,632.947  " />
+					<g>
+
+						<rect x="447.71" y="686.579" fill="none" stroke="#F7F8F8" stroke-width="1.3" stroke-miterlimit="10" width="24" height="40.331" />
+						<path fill="none" stroke="#CB151D" stroke-width="1.2" stroke-miterlimit="10" d="M448.96,690.66c0,0,3.75,13.5,9.75,0    c4.75-6.5,8.25,3,8.25,3" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="470.46" y1="686.579" x2="447.71" y2="725.91" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="459.085" y1="718.41" x2="467.255" y2="718.41" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="459.085" y1="722.16" x2="467.255" y2="722.16" />
+					</g>
+					<rect x="524.585" y="726.91" fill="#CAA51A" width="2.25" height="10" />
+					<g>
+
+						<rect x="514.335" y="686.579" fill="none" stroke="#F7F8F8" stroke-width="1.3" stroke-miterlimit="10" width="24" height="40.331" />
+						<path fill="none" stroke="#CB151D" stroke-width="1.2" stroke-miterlimit="10" d="M515.585,690.66c0,0,3.75,13.5,9.75,0    c4.75-6.5,8.25,3,8.25,3" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="537.085" y1="686.579" x2="514.335" y2="725.91" />
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="525.71" y1="718.41" x2="533.88" y2="718.41" />
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="525.71" y1="722.16" x2="533.88" y2="722.16" />
+					</g>
+					<polyline fill="#44426C" points="478.01,670.835 478.01,648.9 507.21,648.9 507.21,670.835  " />
+					<text transform="matrix(1 0 0 1 485.342 663.4397)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.8698">#2</text>
+					<text transform="matrix(1 0 0 1 451.9602 748.2483)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">#3</text>
+					<text transform="matrix(1 0 0 1 518.2102 748.2483)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">#4</text>
+					<text transform="matrix(1 0 0 1 451.1008 410.3079)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="13.5">光</text>
+					<text transform="matrix(1 0 0 1 451.1008 426.5081)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="13.5">伏</text>
+					<text transform="matrix(1 0 0 1 451.1008 442.7073)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="13.5">进</text>
+					<text transform="matrix(1 0 0 1 451.1008 458.9075)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="13.5">线</text>
+
+					<text transform="matrix(1 0 0 1 464.6008 459.1282)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="13.5" letter-spacing="20"> </text>
+					<rect x="465.381" y="265.196" opacity="0.9" fill="#162320" enable-background="new    " width="115.109" height="18.491" />
+					<rect x="465.381" y="285.693" opacity="0.9" fill="#162320" enable-background="new    " width="115.109" height="18.49" />
+					<rect x="465.381" y="306.189" opacity="0.9" fill="#162320" enable-background="new    " width="115.109" height="18.49" />
+					<rect x="465.381" y="326.686" opacity="0.9" fill="#162320" enable-background="new    " width="115.109" height="18.49" />
+					<g>
+						<text transform="matrix(1 0 0 1 484.1057 279.1467)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">la</text>
+						<text transform="matrix(1 0 0 1 493.4329 279.1467)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="9.6234">(A)</text>
+						<text transform="matrix(1 0 0 1 506.6316 279.1467)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">:</text>
+					</g>
+					<g>
+						<text transform="matrix(1 0 0 1 478.2029 297.5061)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">P</text>
+						<text transform="matrix(1 0 0 1 485.1716 297.5061)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="9.6234">(kW)</text>
+						<text transform="matrix(1 0 0 1 506.6316 297.5061)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">:</text>
+					</g>
+					<g>
+						<text transform="matrix(1 0 0 1 470.1804 319.7913)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">Q</text>
+						<text transform="matrix(1 0 0 1 479.4626 319.7913)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="9.6234">(kVar)</text>
+						<text transform="matrix(1 0 0 1 506.6316 319.7913)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">:</text>
+					</g>
+					<g>
+						<text transform="matrix(1 0 0 1 483.1565 340.6252)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">COS:</text>
+					</g>
+					<rect x="634.499" y="503.01" fill="#CAA51A" width="2.25" height="114.356" />
+					<rect x="755.76" y="503.01" fill="#CAA51A" width="2.25" height="114.356" />
+					<rect x="696.005" y="215.912" fill="#CAA51A" width="2.25" height="42.75" />
+					<rect x="696.005" y="316.967" fill="#CAA51A" width="2.25" height="187.126" />
+					<rect x="600.005" y="635.635" fill="#CAA51A" width="2.25" height="50.943" />
+					<rect x="600.005" y="726.91" fill="#CAA51A" width="2.25" height="10" />
+					<rect x="666.255" y="635.635" fill="#CAA51A" width="2.25" height="50.943" />
+					<rect x="600.511" y="635.635" fill="#CAA51A" width="17.577" height="2.25" />
+					<rect x="650.803" y="635.635" fill="#CAA51A" width="17.577" height="2.25" />
+					<circle fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" cx="635.005" cy="626.389" r="9.021" />
+					<circle fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" cx="627.11" cy="635.412" r="9.021" />
+					<polyline fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" points="631.776,622.262 635.021,625.471    638.045,622.262  " />
+					<polyline fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" points="753.542,622.262 756.787,625.471    759.813,622.262  " />
+
+					<line fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" x1="635.089" y1="625.557" x2="635.089" y2="631.216" />
+					<polygon fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" points="624.069,638.322 630.589,638.322    627.151,632.947  " />
+					<circle fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" cx="642.902" cy="635.412" r="9.021" />
+					<polygon fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" points="639.861,638.322 646.381,638.322    642.943,632.947  " />
+					<g>
+
+						<rect x="589.755" y="686.579" fill="none" stroke="#F7F8F8" stroke-width="1.3" stroke-miterlimit="10" width="24" height="40.331" />
+						<path fill="none" stroke="#CB151D" stroke-width="1.2" stroke-miterlimit="10" d="M591.005,690.66c0,0,3.75,13.5,9.75,0    c4.75-6.5,8.25,3,8.25,3" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="612.505" y1="686.579" x2="589.755" y2="725.91" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="601.13" y1="718.41" x2="609.299" y2="718.41" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="601.13" y1="722.16" x2="609.299" y2="722.16" />
+					</g>
+					<rect x="666.63" y="726.91" fill="#CAA51A" width="2.25" height="10" />
+					<g>
+
+						<rect x="656.38" y="686.579" fill="none" stroke="#F7F8F8" stroke-width="1.3" stroke-miterlimit="10" width="24" height="40.331" />
+						<path fill="none" stroke="#CB151D" stroke-width="1.2" stroke-miterlimit="10" d="M657.63,690.66c0,0,3.75,13.5,9.75,0    c4.75-6.5,8.25,3,8.25,3" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="679.13" y1="686.579" x2="656.38" y2="725.91" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="667.755" y1="718.41" x2="675.924" y2="718.41" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="667.755" y1="722.16" x2="675.924" y2="722.16" />
+					</g>
+					<polyline fill="#44426C" points="620.054,670.835 620.054,648.9 649.255,648.9 649.255,670.835  " />
+					<text transform="matrix(1 0 0 1 627.3865 663.4397)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.8698">#3</text>
+					<polyline fill="#44426C" points="708.039,372.313 736.015,372.313 736.015,467.91 708.039,467.91  " />
+					<text transform="matrix(0 1 -1 0 717.4299 379.6477)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="13.5">#2</text>
+					<text transform="matrix(1 0 0 1 594.0046 748.2483)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">#5</text>
+					<text transform="matrix(1 0 0 1 660.2546 296.7874)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">314</text>
+					<text transform="matrix(1 0 0 1 660.2546 748.2483)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">#6</text>
+					<rect x="722.027" y="635.635" fill="#CAA51A" width="2.25" height="50.943" />
+					<rect x="722.027" y="726.91" fill="#CAA51A" width="2.25" height="10" />
+					<rect x="788.277" y="635.635" fill="#CAA51A" width="2.25" height="50.943" />
+					<rect x="722.532" y="635.635" fill="#CAA51A" width="17.577" height="2.25" />
+					<rect x="772.824" y="635.635" fill="#CAA51A" width="17.577" height="2.25" />
+					<circle fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" cx="757.027" cy="626.389" r="9.021" />
+					<circle fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" cx="749.132" cy="635.412" r="9.021" />
+
+					<line fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" x1="757.111" y1="625.557" x2="757.111" y2="631.216" />
+					<polygon fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" points="746.092,638.322 752.611,638.322    749.174,632.947  " />
+					<circle fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" cx="764.924" cy="635.412" r="9.021" />
+					<polygon fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" points="761.884,638.322 768.403,638.322    764.966,632.947  " />
+					<g>
+
+						<rect x="711.777" y="686.579" fill="none" stroke="#F7F8F8" stroke-width="1.3" stroke-miterlimit="10" width="24" height="40.331" />
+						<path fill="none" stroke="#CB151D" stroke-width="1.2" stroke-miterlimit="10" d="M713.027,690.66c0,0,3.75,13.5,9.75,0    c4.75-6.5,8.25,3,8.25,3" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="734.527" y1="686.579" x2="711.777" y2="725.91" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="723.152" y1="718.41" x2="731.322" y2="718.41" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="723.152" y1="722.16" x2="731.322" y2="722.16" />
+					</g>
+					<rect x="788.652" y="726.91" fill="#CAA51A" width="2.25" height="10" />
+					<g>
+
+						<rect x="778.402" y="686.579" fill="none" stroke="#F7F8F8" stroke-width="1.3" stroke-miterlimit="10" width="24" height="40.331" />
+						<path fill="none" stroke="#CB151D" stroke-width="1.2" stroke-miterlimit="10" d="M779.652,690.66c0,0,3.75,13.5,9.75,0    c4.75-6.5,8.25,3,8.25,3" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="801.152" y1="686.579" x2="778.402" y2="725.91" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="789.777" y1="718.41" x2="797.947" y2="718.41" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="789.777" y1="722.16" x2="797.947" y2="722.16" />
+					</g>
+					<polyline fill="#44426C" points="742.076,670.835 742.076,648.9 771.277,648.9 771.277,670.835  " />
+					<text transform="matrix(1 0 0 1 749.4089 663.4397)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.8698">#4</text>
+					<text transform="matrix(1 0 0 1 716.0271 748.2483)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">#7</text>
+					<text transform="matrix(1 0 0 1 782.2771 748.2483)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">#8</text>
+					<text transform="matrix(1 0 0 1 715.1677 410.3079)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="13.5">光</text>
+					<text transform="matrix(1 0 0 1 715.1677 426.5081)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="13.5">伏</text>
+					<text transform="matrix(1 0 0 1 715.1677 442.7073)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="13.5">进</text>
+					<text transform="matrix(1 0 0 1 715.1677 458.9075)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="13.5">线</text>
+
+					<text transform="matrix(1 0 0 1 728.6677 459.1282)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="13.5" letter-spacing="20"> </text>
+					<rect x="724.059" y="265.196" opacity="0.9" fill="#162320" enable-background="new    " width="115.11" height="18.491" />
+					<rect x="724.059" y="285.693" opacity="0.9" fill="#162320" enable-background="new    " width="115.11" height="18.49" />
+					<rect x="724.059" y="306.189" opacity="0.9" fill="#162320" enable-background="new    " width="115.11" height="18.49" />
+					<rect x="724.059" y="326.686" opacity="0.9" fill="#162320" enable-background="new    " width="115.11" height="18.49" />
+					<g>
+						<text transform="matrix(1 0 0 1 742.7839 279.1467)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">la</text>
+						<text transform="matrix(1 0 0 1 752.1111 279.1467)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="9.6234">(A)</text>
+						<text transform="matrix(1 0 0 1 765.3098 279.1467)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">:</text>
+					</g>
+					<g>
+						<text transform="matrix(1 0 0 1 736.8811 297.5061)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">P</text>
+						<text transform="matrix(1 0 0 1 743.8503 297.5061)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="9.6234">(kW)</text>
+						<text transform="matrix(1 0 0 1 765.3103 297.5061)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">:</text>
+					</g>
+					<g>
+						<text transform="matrix(1 0 0 1 728.8586 319.7913)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">Q</text>
+						<text transform="matrix(1 0 0 1 738.1404 319.7913)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="9.6234">(kVar)</text>
+						<text transform="matrix(1 0 0 1 765.3098 319.7913)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">:</text>
+					</g>
+					<g>
+						<text transform="matrix(1 0 0 1 741.8347 340.6252)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">COS:</text>
+					</g>
+					<rect x="634.738" y="502.439" fill="#CAA51A" width="123.271" height="2.25" />
+					<rect x="898.938" y="502.439" fill="#CAA51A" width="123.273" height="2.25" />
+					<rect x="898.699" y="503.01" fill="#CAA51A" width="2.25" height="114.356" />
+					<rect x="1019.961" y="503.01" fill="#CAA51A" width="2.25" height="114.356" />
+					<rect x="999.77" y="266.198" opacity="0.9" fill="#162320" enable-background="new    " width="115.108" height="18.491" />
+					<rect x="999.77" y="286.696" opacity="0.9" fill="#162320" enable-background="new    " width="115.108" height="18.49" />
+					<rect x="999.77" y="307.192" opacity="0.9" fill="#162320" enable-background="new    " width="115.108" height="18.49" />
+					<rect x="999.77" y="327.688" opacity="0.9" fill="#162320" enable-background="new    " width="115.108" height="18.49" />
+					<g>
+						<text transform="matrix(1 0 0 1 1018.4944 280.1487)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">la</text>
+						<text transform="matrix(1 0 0 1 1027.8206 280.1487)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="9.6234">(A)</text>
+						<text transform="matrix(1 0 0 1 1041.0198 280.1487)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">:</text>
+					</g>
+					<g>
+						<text transform="matrix(1 0 0 1 1012.592 298.51)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">P</text>
+						<text transform="matrix(1 0 0 1 1019.5608 298.51)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="9.6234">(kW)</text>
+						<text transform="matrix(1 0 0 1 1041.0198 298.51)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">:</text>
+					</g>
+					<g>
+						<text transform="matrix(1 0 0 1 1004.5686 320.7952)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">Q</text>
+						<text transform="matrix(1 0 0 1 1013.8499 320.7952)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="9.6234">(kVar)</text>
+						<text transform="matrix(1 0 0 1 1041.0198 320.7952)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">:</text>
+					</g>
+					<g>
+						<text transform="matrix(1 0 0 1 1017.5452 341.6292)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">COS:</text>
+					</g>
+					<rect x="960.325" y="215.912" fill="#CAA51A" width="2.25" height="42.75" />
+					<rect x="960.325" y="316.967" fill="#CAA51A" width="2.25" height="187.126" />
+					<rect x="864.325" y="635.635" fill="#CAA51A" width="2.25" height="50.943" />
+					<rect x="864.325" y="726.91" fill="#CAA51A" width="2.25" height="10" />
+					<rect x="930.575" y="635.635" fill="#CAA51A" width="2.25" height="50.943" />
+					<rect x="864.831" y="635.635" fill="#CAA51A" width="17.577" height="2.25" />
+					<rect x="915.124" y="635.635" fill="#CAA51A" width="17.576" height="2.25" />
+					<circle fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" cx="899.325" cy="626.389" r="9.021" />
+					<circle fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" cx="891.431" cy="635.412" r="9.021" />
+					<polyline fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" points="896.097,622.262 899.342,625.471    902.366,622.262  " />
+					<polyline fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" points="1017.864,622.262 1021.109,625.471    1024.133,622.262  " />
+
+					<line fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" x1="899.409" y1="625.557" x2="899.409" y2="631.216" />
+					<polygon fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" points="888.391,638.322 894.909,638.322    891.473,632.947  " />
+					<circle fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" cx="907.223" cy="635.412" r="9.021" />
+					<polygon fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" points="904.183,638.322 910.701,638.322    907.265,632.947  " />
+					<g>
+
+						<rect x="854.075" y="686.579" fill="none" stroke="#F7F8F8" stroke-width="1.3" stroke-miterlimit="10" width="24" height="40.331" />
+						<path fill="none" stroke="#CB151D" stroke-width="1.2" stroke-miterlimit="10" d="M855.325,690.66c0,0,3.75,13.5,9.75,0    c4.75-6.5,8.25,3,8.25,3" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="876.825" y1="686.579" x2="854.075" y2="725.91" />
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="865.45" y1="718.41" x2="873.62" y2="718.41" />
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="865.45" y1="722.16" x2="873.62" y2="722.16" />
+					</g>
+					<rect x="930.95" y="726.91" fill="#CAA51A" width="2.25" height="10" />
+					<g>
+
+						<rect x="920.7" y="686.579" fill="none" stroke="#F7F8F8" stroke-width="1.3" stroke-miterlimit="10" width="24" height="40.331" />
+						<path fill="none" stroke="#CB151D" stroke-width="1.2" stroke-miterlimit="10" d="M921.95,690.66c0,0,3.75,13.5,9.75,0    c4.75-6.5,8.25,3,8.25,3" />
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="943.45" y1="686.579" x2="920.7" y2="725.91" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="932.075" y1="718.41" x2="940.245" y2="718.41" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="932.075" y1="722.16" x2="940.245" y2="722.16" />
+					</g>
+					<polyline fill="#44426C" points="884.374,670.835 884.374,648.9 913.575,648.9 913.575,670.835  " />
+					<text transform="matrix(1 0 0 1 891.7078 663.4397)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.8698">#5</text>
+					<polyline fill="#44426C" points="972.361,372.313 1000.336,372.313 1000.336,467.91 972.361,467.91  " />
+					<text transform="matrix(0 1 -1 0 981.7542 379.6477)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="13.5">#3</text>
+					<text transform="matrix(1 0 0 1 858.3259 748.2483)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">#9</text>
+					<text transform="matrix(1 0 0 1 924.5759 296.7874)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">315</text>
+					<text transform="matrix(1 0 0 1 924.5759 748.2483)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">#10</text>
+					<rect x="986.348" y="635.635" fill="#CAA51A" width="2.25" height="50.943" />
+					<rect x="986.348" y="726.91" fill="#CAA51A" width="2.25" height="10" />
+					<rect x="1052.598" y="635.635" fill="#CAA51A" width="2.25" height="50.943" />
+					<rect x="986.854" y="635.635" fill="#CAA51A" width="17.578" height="2.25" />
+					<rect x="1037.146" y="635.635" fill="#CAA51A" width="17.575" height="2.25" />
+					<circle fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" cx="1021.348" cy="626.389" r="9.021" />
+					<circle fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" cx="1013.453" cy="635.412" r="9.021" />
+
+					<line fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" x1="1021.432" y1="625.557" x2="1021.432" y2="631.216" />
+					<polygon fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" points="1010.412,638.322 1016.932,638.322    1013.494,632.947  " />
+					<circle fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" cx="1029.245" cy="635.412" r="9.021" />
+					<polygon fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" points="1026.206,638.322 1032.725,638.322    1029.287,632.947  " />
+					<g>
+
+						<rect x="976.099" y="686.579" fill="none" stroke="#F7F8F8" stroke-width="1.3" stroke-miterlimit="10" width="24" height="40.331" />
+						<path fill="none" stroke="#CB151D" stroke-width="1.2" stroke-miterlimit="10" d="M977.349,690.66c0,0,3.75,13.5,9.75,0    c4.75-6.5,8.25,3,8.25,3" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="998.848" y1="686.579" x2="976.099" y2="725.91" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="987.473" y1="718.41" x2="995.643" y2="718.41" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="987.473" y1="722.16" x2="995.643" y2="722.16" />
+					</g>
+					<rect x="1052.973" y="726.91" fill="#CAA51A" width="2.25" height="10" />
+					<g>
+
+						<rect x="1042.723" y="686.579" fill="none" stroke="#F7F8F8" stroke-width="1.3" stroke-miterlimit="10" width="24" height="40.331" />
+						<path fill="none" stroke="#CB151D" stroke-width="1.2" stroke-miterlimit="10" d="M1043.973,690.66c0,0,3.75,13.5,9.75,0    c4.75-6.5,8.25,3,8.25,3" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="1065.473" y1="686.579" x2="1042.723" y2="725.91" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="1054.098" y1="718.41" x2="1062.268" y2="718.41" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="1054.098" y1="722.16" x2="1062.268" y2="722.16" />
+					</g>
+					<polyline fill="#44426C" points="1006.398,670.835 1006.398,648.9 1035.598,648.9 1035.598,670.835  " />
+					<text transform="matrix(1 0 0 1 1013.7307 663.4397)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.8698">#6</text>
+					<text transform="matrix(1 0 0 1 980.3479 748.2483)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">#11</text>
+					<text transform="matrix(1 0 0 1 1043.5979 748.2483)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">#12</text>
+					<text transform="matrix(1 0 0 1 979.4885 410.3079)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="13.5">光</text>
+					<text transform="matrix(1 0 0 1 979.4885 426.5081)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="13.5">伏</text>
+					<text transform="matrix(1 0 0 1 979.4885 442.7073)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="13.5">进</text>
+					<text transform="matrix(1 0 0 1 979.4885 458.9075)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="13.5">线</text>
+
+					<text transform="matrix(1 0 0 1 992.9885 459.1282)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="13.5" letter-spacing="20"> </text>
+					<rect x="1535.633" y="502.439" fill="#CAA51A" width="123.272" height="2.25" />
+					<rect x="1535.395" y="503.01" fill="#CAA51A" width="2.25" height="114.356" />
+					<rect x="1656.656" y="503.01" fill="#CAA51A" width="2.25" height="99.399" />
+					<rect x="1646.463" y="266.198" opacity="0.9" fill="#162320" enable-background="new    " width="115.108" height="18.491" />
+					<rect x="1646.463" y="286.696" opacity="0.9" fill="#162320" enable-background="new    " width="115.108" height="18.49" />
+					<rect x="1646.463" y="307.192" opacity="0.9" fill="#162320" enable-background="new    " width="115.108" height="18.49" />
+					<rect x="1646.463" y="327.688" opacity="0.9" fill="#162320" enable-background="new    " width="115.108" height="18.49" />
+					<g>
+						<text transform="matrix(1 0 0 1 1665.1897 280.1487)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">la</text>
+						<text transform="matrix(1 0 0 1 1674.5159 280.1487)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="9.6234">(A)</text>
+						<text transform="matrix(1 0 0 1 1687.7151 280.1487)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">:</text>
+					</g>
+					<g>
+						<text transform="matrix(1 0 0 1 1659.2854 298.51)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">P</text>
+						<text transform="matrix(1 0 0 1 1666.2542 298.51)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="9.6234">(kW)</text>
+						<text transform="matrix(1 0 0 1 1687.7151 298.51)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">:</text>
+					</g>
+					<g>
+						<text transform="matrix(1 0 0 1 1651.2639 320.7952)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">Q</text>
+						<text transform="matrix(1 0 0 1 1660.5452 320.7952)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="9.6234">(kVar)</text>
+						<text transform="matrix(1 0 0 1 1687.7151 320.7952)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">:</text>
+					</g>
+					<g>
+						<text transform="matrix(1 0 0 1 1664.2405 341.6292)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">COS:</text>
+					</g>
+					<rect x="1597.021" y="215.912" fill="#CAA51A" width="2.25" height="42.75" />
+					<rect x="1597.021" y="316.967" fill="#CAA51A" width="2.25" height="187.126" />
+					<rect x="1501.021" y="635.635" fill="#CAA51A" width="2.25" height="50.943" />
+					<rect x="1501.021" y="726.91" fill="#CAA51A" width="2.25" height="10" />
+					<rect x="1567.271" y="635.635" fill="#CAA51A" width="2.25" height="50.943" />
+					<rect x="1501.527" y="635.635" fill="#CAA51A" width="17.576" height="2.25" />
+					<rect x="1551.818" y="635.635" fill="#CAA51A" width="17.578" height="2.25" />
+					<circle fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" cx="1536.021" cy="626.389" r="9.021" />
+					<circle fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" cx="1528.124" cy="635.412" r="9.021" />
+					<polyline fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" points="1532.792,622.262 1536.037,625.471    1539.061,622.262  " />
+					<polyline fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" points="1662.417,628.714 1659.172,625.505    1656.146,628.714  " />
+
+					<line fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" x1="1536.105" y1="625.557" x2="1536.105" y2="631.216" />
+					<polygon fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" points="1525.085,638.322 1531.605,638.322    1528.167,632.947  " />
+					<circle fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" cx="1543.917" cy="635.412" r="9.021" />
+					<polygon fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" points="1540.876,638.322 1547.396,638.322    1543.958,632.947  " />
+					<g>
+
+						<rect x="1490.771" y="686.579" fill="none" stroke="#F7F8F8" stroke-width="1.3" stroke-miterlimit="10" width="24" height="40.331" />
+						<path fill="none" stroke="#CB151D" stroke-width="1.2" stroke-miterlimit="10" d="M1492.021,690.66c0,0,3.75,13.5,9.75,0    c4.75-6.5,8.25,3,8.25,3" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="1513.521" y1="686.579" x2="1490.771" y2="725.91" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="1502.146" y1="718.41" x2="1510.314" y2="718.41" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="1502.146" y1="722.16" x2="1510.314" y2="722.16" />
+					</g>
+					<rect x="1567.646" y="726.91" fill="#CAA51A" width="2.25" height="10" />
+					<g>
+
+						<rect x="1557.396" y="686.579" fill="none" stroke="#F7F8F8" stroke-width="1.3" stroke-miterlimit="10" width="24" height="40.331" />
+						<path fill="none" stroke="#CB151D" stroke-width="1.2" stroke-miterlimit="10" d="M1558.646,690.66c0,0,3.75,13.5,9.75,0    c4.75-6.5,8.25,3,8.25,3" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="1580.146" y1="686.579" x2="1557.396" y2="725.91" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="1568.771" y1="718.41" x2="1576.939" y2="718.41" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="1568.771" y1="722.16" x2="1576.939" y2="722.16" />
+					</g>
+					<polyline fill="#44426C" points="1521.071,670.835 1521.071,648.9 1550.271,648.9 1550.271,670.835  " />
+					<text transform="matrix(1 0 0 1 1528.4026 663.4397)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.8698">#9</text>
+					<polyline fill="#44426C" points="1609.055,372.313 1637.031,372.313 1637.031,467.91 1609.055,467.91  " />
+					<text transform="matrix(0 1 -1 0 1618.4495 379.6477)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="13.5">#5</text>
+					<text transform="matrix(1 0 0 1 1495.0217 748.2483)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">#17</text>
+					<text transform="matrix(1 0 0 1 1561.2717 296.7874)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">315</text>
+					<text transform="matrix(1 0 0 1 1561.2717 748.2483)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">#18</text>
+					<rect x="1657.781" y="634.29" fill="#CAA51A" width="2.25" height="50.946" />
+					<circle fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" cx="1659.282" cy="624.584" r="9.021" />
+
+					<line fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" x1="1659.281" y1="625.419" x2="1659.281" y2="619.76" />
+					<circle fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" cx="1659.281" cy="611.432" r="9.021" />
+					<polygon fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" points="1662.542,608.523 1656.021,608.523    1659.458,613.898  " />
+					<rect x="1658.156" y="725.569" fill="#CAA51A" width="2.25" height="10" />
+					<g>
+
+						<rect x="1647.906" y="685.238" fill="none" stroke="#F7F8F8" stroke-width="1.3" stroke-miterlimit="10" width="24" height="40.331" />
+						<path fill="none" stroke="#CB151D" stroke-width="1.2" stroke-miterlimit="10" d="M1649.156,689.319c0,0,3.75,13.5,9.75,0    c4.75-6.5,8.25,3,8.25,3" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="1670.656" y1="685.238" x2="1647.906" y2="724.569" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="1659.281" y1="717.069" x2="1667.451" y2="717.069" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="1659.281" y1="720.819" x2="1667.451" y2="720.819" />
+					</g>
+					<polyline fill="#44426C" points="1675.855,671.089 1675.855,649.154 1705.057,649.154 1705.057,671.089  " />
+					<text transform="matrix(1 0 0 1 1679.7092 663.6936)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.8698">#10</text>
+					<text transform="matrix(1 0 0 1 1648.7815 746.9065)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">#19</text>
+					<text transform="matrix(1 0 0 1 1616.1838 410.3079)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="13.5">光</text>
+					<text transform="matrix(1 0 0 1 1616.1838 426.5081)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="13.5">伏</text>
+					<text transform="matrix(1 0 0 1 1616.1838 442.7073)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="13.5">进</text>
+					<text transform="matrix(1 0 0 1 1616.1838 458.9075)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="13.5">线</text>
+
+					<text transform="matrix(1 0 0 1 1629.6838 459.1282)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="13.5" letter-spacing="20"> </text>
+					<rect x="1153.99" y="502.439" fill="#CAA51A" width="246.117" height="2.25" />
+					<rect x="1153.989" y="503.01" fill="#CAA51A" width="2.25" height="114.356" />
+					<rect x="1275.415" y="503.01" fill="#CAA51A" width="2.25" height="114.356" />
+					<rect x="1397.857" y="503.01" fill="#CAA51A" width="2.25" height="114.356" />
+					<rect x="1430.917" y="503.01" fill="#CAA51A" width="2.25" height="114.356" />
+					<rect x="1306.977" y="266.198" opacity="0.9" fill="#162320" enable-background="new    " width="115.109" height="18.491" />
+					<rect x="1306.977" y="286.696" opacity="0.9" fill="#162320" enable-background="new    " width="115.109" height="18.49" />
+					<rect x="1306.977" y="307.192" opacity="0.9" fill="#162320" enable-background="new    " width="115.109" height="18.49" />
+					<rect x="1306.977" y="327.688" opacity="0.9" fill="#162320" enable-background="new    " width="115.109" height="18.49" />
+					<g>
+						<text transform="matrix(1 0 0 1 1325.7014 280.1487)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">la</text>
+						<text transform="matrix(1 0 0 1 1335.0276 280.1487)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="9.6234">(A)</text>
+						<text transform="matrix(1 0 0 1 1348.2268 280.1487)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">:</text>
+					</g>
+					<g>
+						<text transform="matrix(1 0 0 1 1319.7991 298.51)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">P</text>
+						<text transform="matrix(1 0 0 1 1326.7678 298.51)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="9.6234">(kW)</text>
+						<text transform="matrix(1 0 0 1 1348.2288 298.51)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">:</text>
+					</g>
+					<g>
+						<text transform="matrix(1 0 0 1 1311.7776 320.7952)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">Q</text>
+						<text transform="matrix(1 0 0 1 1321.0588 320.7952)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="9.6234">(kVar)</text>
+						<text transform="matrix(1 0 0 1 1348.2268 320.7952)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">:</text>
+					</g>
+					<g>
+						<text transform="matrix(1 0 0 1 1324.7522 341.6292)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">COS:</text>
+					</g>
+					<rect x="1274.614" y="215.912" fill="#CAA51A" width="2.25" height="42.75" />
+					<rect x="1274.614" y="316.967" fill="#CAA51A" width="2.25" height="187.126" />
+					<rect x="1119.615" y="635.635" fill="#CAA51A" width="2.25" height="50.943" />
+					<rect x="1119.615" y="726.91" fill="#CAA51A" width="2.25" height="10" />
+					<rect x="1185.865" y="635.635" fill="#CAA51A" width="2.25" height="50.943" />
+					<rect x="1120.121" y="635.635" fill="#CAA51A" width="17.576" height="2.25" />
+					<rect x="1170.412" y="635.635" fill="#CAA51A" width="17.578" height="2.25" />
+					<circle fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" cx="1154.615" cy="626.389" r="9.021" />
+					<circle fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" cx="1146.72" cy="635.412" r="9.021" />
+					<polyline fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" points="1151.386,622.262 1154.631,625.471    1157.656,622.262  " />
+					<polyline fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" points="1273.316,622.262 1276.563,625.471    1279.586,622.262  " />
+
+					<line fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" x1="1154.699" y1="625.557" x2="1154.699" y2="631.216" />
+					<polygon fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" points="1143.68,638.322 1150.199,638.322    1146.762,632.947  " />
+					<circle fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" cx="1162.512" cy="635.412" r="9.021" />
+					<polygon fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" points="1159.471,638.322 1165.99,638.322    1162.553,632.947  " />
+					<g>
+
+						<rect x="1109.365" y="686.579" fill="none" stroke="#F7F8F8" stroke-width="1.3" stroke-miterlimit="10" width="24" height="40.331" />
+						<path fill="none" stroke="#CB151D" stroke-width="1.2" stroke-miterlimit="10" d="M1110.615,690.66c0,0,3.75,13.5,9.75,0    c4.75-6.5,8.25,3,8.25,3" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="1132.115" y1="686.579" x2="1109.365" y2="725.91" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="1120.74" y1="718.41" x2="1128.909" y2="718.41" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="1120.74" y1="722.16" x2="1128.909" y2="722.16" />
+					</g>
+					<rect x="1186.24" y="726.91" fill="#CAA51A" width="2.25" height="10" />
+					<g>
+
+						<rect x="1175.99" y="686.579" fill="none" stroke="#F7F8F8" stroke-width="1.3" stroke-miterlimit="10" width="24" height="40.331" />
+						<path fill="none" stroke="#CB151D" stroke-width="1.2" stroke-miterlimit="10" d="M1177.24,690.66c0,0,3.75,13.5,9.75,0    c4.75-6.5,8.25,3,8.25,3" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="1198.74" y1="686.579" x2="1175.99" y2="725.91" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="1187.365" y1="718.41" x2="1195.534" y2="718.41" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="1187.365" y1="722.16" x2="1195.534" y2="722.16" />
+					</g>
+					<polyline fill="#44426C" points="1139.665,670.835 1139.665,648.9 1168.865,648.9 1168.865,670.835  " />
+					<text transform="matrix(1 0 0 1 1146.9963 663.4397)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.8698">#7</text>
+					<polyline fill="#44426C" points="1286.648,372.313 1314.624,372.313 1314.624,467.91 1286.648,467.91  " />
+					<text transform="matrix(0 1 -1 0 1296.0393 379.6477)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="13.5">#4</text>
+					<text transform="matrix(1 0 0 1 1110.5549 748.2483)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">#13</text>
+					<text transform="matrix(1 0 0 1 1238.8635 296.7874)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">316</text>
+					<text transform="matrix(1 0 0 1 1176.8049 748.2483)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">#14</text>
+					<rect x="1241.801" y="635.635" fill="#CAA51A" width="2.25" height="50.943" />
+					<rect x="1241.801" y="726.91" fill="#CAA51A" width="2.25" height="10" />
+					<rect x="1308.051" y="635.635" fill="#CAA51A" width="2.25" height="50.943" />
+					<rect x="1242.307" y="635.635" fill="#CAA51A" width="17.578" height="2.25" />
+					<rect x="1292.6" y="635.635" fill="#CAA51A" width="17.576" height="2.25" />
+					<circle fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" cx="1276.801" cy="626.389" r="9.021" />
+					<circle fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" cx="1268.906" cy="635.412" r="9.021" />
+
+					<line fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" x1="1276.885" y1="625.557" x2="1276.885" y2="631.216" />
+					<polygon fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" points="1265.865,638.322 1272.385,638.322    1268.948,632.947  " />
+					<circle fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" cx="1284.698" cy="635.412" r="9.021" />
+					<polygon fill="none" stroke="#A9165D" stroke-width="1.2" stroke-miterlimit="10" points="1281.658,638.322 1288.178,638.322    1284.74,632.947  " />
+					<g>
+
+						<rect x="1231.551" y="686.579" fill="none" stroke="#F7F8F8" stroke-width="1.3" stroke-miterlimit="10" width="24" height="40.331" />
+						<path fill="none" stroke="#CB151D" stroke-width="1.2" stroke-miterlimit="10" d="M1232.801,690.66c0,0,3.75,13.5,9.75,0    c4.75-6.5,8.25,3,8.25,3" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="1254.301" y1="686.579" x2="1231.551" y2="725.91" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="1242.926" y1="718.41" x2="1251.096" y2="718.41" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="1242.926" y1="722.16" x2="1251.096" y2="722.16" />
+					</g>
+					<rect x="1308.426" y="726.91" fill="#CAA51A" width="2.25" height="10" />
+					<g>
+
+						<rect x="1298.176" y="686.579" fill="none" stroke="#F7F8F8" stroke-width="1.3" stroke-miterlimit="10" width="24" height="40.331" />
+						<path fill="none" stroke="#CB151D" stroke-width="1.2" stroke-miterlimit="10" d="M1299.426,690.66c0,0,3.75,13.5,9.75,0    c4.75-6.5,8.25,3,8.25,3" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="1320.926" y1="686.579" x2="1298.176" y2="725.91" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="1309.551" y1="718.41" x2="1317.721" y2="718.41" />
+
+						<line fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-miterlimit="10" x1="1309.551" y1="722.16" x2="1317.721" y2="722.16" />
+					</g>
+					<polyline fill="#44426C" points="1261.852,670.835 1261.852,648.9 1291.051,648.9 1291.051,670.835  " />
+					<text transform="matrix(1 0 0 1 1269.1838 663.4397)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.8698">#8</text>
+					<text transform="matrix(1 0 0 1 1235.801 748.2483)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">#15</text>
+					<text transform="matrix(1 0 0 1 1299.051 748.2483)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">#16</text>
+					<text transform="matrix(1 0 0 1 1293.7756 410.3079)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="13.5">光</text>
+					<text transform="matrix(1 0 0 1 1293.7756 426.5081)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="13.5">伏</text>
+					<text transform="matrix(1 0 0 1 1293.7756 442.7073)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="13.5">进</text>
+					<text transform="matrix(1 0 0 1 1293.7756 458.9075)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="13.5">线</text>
+
+					<text transform="matrix(1 0 0 1 1307.2756 459.1282)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="13.5" letter-spacing="20"> </text>
+					<polygon fill="#CAA51A" points="1427.208,504.689 1432.04,494.392 1436.874,504.688  " />
+					<g>
+						<text transform="matrix(1 0 0 1 1.9905 206.7913)" fill="#D0D0D0" font-family="'MicrosoftYaHei'" font-size="12.619">35kV母线</text>
+					</g>
+					<g>
+						<rect x="443.686" y="116.428" fill="#44426C" width="83.313" height="20.817" />
+						<text transform="matrix(1 0 0 1 466.4919 130.6194)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="12.5667">园特线</text>
+					</g>
+					<text transform="matrix(1 0 0 1 535.8542 132.6194)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">310</text>
+					<polygon fill="#CAA51A" points="567.821,25.24 572.431,15.432 577.03,25.244  " />
+					<rect x="570.938" y="170.912" fill="#CAA51A" width="2.25" height="42.75" />
+					<rect x="570.938" y="25.244" fill="#CAA51A" width="2.25" height="87.361" />
+					<g>
+						<rect x="1148.858" y="116.428" fill="#44426C" width="83.313" height="20.817" />
+						<text transform="matrix(1 0 0 1 1157.6858 130.6194)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="12.5667">1#无功补偿</text>
+					</g>
+					<rect x="698.255" y="107.234" opacity="0.9" fill="#162320" enable-background="new    " width="115.109" height="18.491" />
+					<rect x="698.255" y="127.731" opacity="0.9" fill="#162320" enable-background="new    " width="115.109" height="18.491" />
+					<rect x="698.255" y="148.228" opacity="0.9" fill="#162320" enable-background="new    " width="115.109" height="18.491" />
+					<rect x="698.255" y="168.725" opacity="0.9" fill="#162320" enable-background="new    " width="115.109" height="18.489" />
+					<g>
+						<text transform="matrix(1 0 0 1 716.9797 121.1858)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">la</text>
+						<text transform="matrix(1 0 0 1 726.3069 121.1858)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="9.6234">(A)</text>
+						<text transform="matrix(1 0 0 1 739.5056 121.1858)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">:</text>
+					</g>
+					<g>
+						<text transform="matrix(1 0 0 1 711.0769 139.5452)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">P</text>
+						<text transform="matrix(1 0 0 1 718.0457 139.5452)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="9.6234">(kW)</text>
+						<text transform="matrix(1 0 0 1 739.5056 139.5452)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">:</text>
+					</g>
+					<g>
+						<text transform="matrix(1 0 0 1 703.0544 161.8303)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">Q</text>
+						<text transform="matrix(1 0 0 1 712.3367 161.8303)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="9.6234">(kVar)</text>
+						<text transform="matrix(1 0 0 1 739.5056 161.8303)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">:</text>
+					</g>
+					<g>
+						<text transform="matrix(1 0 0 1 716.0305 182.6643)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">COS:</text>
+					</g>
+					<rect x="1314.624" y="96.987" opacity="0.9" fill="#162320" enable-background="new    " width="115.107" height="18.491" />
+					<rect x="1314.624" y="117.484" opacity="0.9" fill="#162320" enable-background="new    " width="115.107" height="18.49" />
+					<rect x="1314.624" y="137.98" opacity="0.9" fill="#162320" enable-background="new    " width="115.107" height="18.49" />
+					<rect x="1314.624" y="158.477" opacity="0.9" fill="#162320" enable-background="new    " width="115.107" height="18.49" />
+					<g>
+						<text transform="matrix(1 0 0 1 1333.3479 110.9377)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">la</text>
+						<text transform="matrix(1 0 0 1 1342.6741 110.9377)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="9.6234">(A)</text>
+						<text transform="matrix(1 0 0 1 1355.8733 110.9377)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">:</text>
+					</g>
+					<g>
+						<text transform="matrix(1 0 0 1 1327.4456 129.2971)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">P</text>
+						<text transform="matrix(1 0 0 1 1334.4143 129.2971)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="9.6234">(kW)</text>
+						<text transform="matrix(1 0 0 1 1355.8752 129.2971)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">:</text>
+					</g>
+					<g>
+						<text transform="matrix(1 0 0 1 1319.4241 151.5823)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">Q</text>
+						<text transform="matrix(1 0 0 1 1328.7053 151.5823)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="9.6234">(kVar)</text>
+						<text transform="matrix(1 0 0 1 1355.8733 151.5823)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">:</text>
+					</g>
+					<g>
+						<text transform="matrix(1 0 0 1 1332.3987 172.4163)" fill="#97A1A2" font-family="'MicrosoftYaHei'" font-size="11.3899">COS:</text>
+					</g>
+					<text transform="matrix(1 0 0 1 1241.0276 132.6194)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">318</text>
+					<rect x="1275.182" y="170.912" fill="#CAA51A" width="2.25" height="42.75" />
+					<rect x="1275.182" y="27.244" fill="#CAA51A" width="2.25" height="32.667" />
+					<rect x="1275.182" y="79.412" fill="#CAA51A" width="2.25" height="33.834" />
+					<rect x="1259.318" y="26.119" fill="#CAA51A" width="33.979" height="2.25" />
+					<rect x="1259.318" y="15.662" fill="#CAA51A" width="33.979" height="2.25" />
+					<rect x="1275.064" y="12.623" fill="#CAA51A" width="2.484" height="3.039" />
+					<rect x="1275.064" y="8.516" fill="#40B9B0" width="2.484" height="4.106" />
+					<g>
+						<line fill="none" stroke="#40B9B0" stroke-width="2" stroke-miterlimit="10" x1="1282.018" y1="8.515" x2="1270.596" y2="8.515" />
+						<line fill="none" stroke="#40B9B0" stroke-width="2" stroke-miterlimit="10" x1="1279.66" y1="5.346" x2="1272.953" y2="5.346" />
+						<line fill="none" stroke="#40B9B0" stroke-width="2" stroke-miterlimit="10" x1="1277.721" y1="2" x2="1274.893" y2="2" />
+					</g>
+					<path fill="none" stroke="#CAA51A" stroke-width="2.2" stroke-miterlimit="10" d="M1265.973,70.246   c0-5.708,4.627-10.334,10.334-10.334s10.334,4.626,10.334,10.334c0,5.707-4.627,10.334-10.334,10.334" />
+					<path fill="none" stroke="#CAA51A" stroke-width="2.2" stroke-miterlimit="10" d="M1276.42,59.945   c-0.224-0.014-0.443-0.031-0.671-0.031c-5.707,0-10.334,4.626-10.334,10.334h11.005V59.945z" />
+					<text transform="matrix(1 0 0 1 153.7771 779.5334)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="15">输入电压(V):</text>
+					<text transform="matrix(1 0 0 1 153.7771 821.5559)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="15">输出功率(kW):</text>
+				</g>
+				<g id="arrow">
+					<rect x="564.331" y="129.662" :fill="ajaxData.pl1dlq310?red:green" width="15.463" height="24.008"></rect>
+					<rect x="1268.575" y="130.662" :fill="ajaxData.pl1dlq318?red:green" width="15.463" height="24.008"></rect>
+					<rect x="161.332" y="275.904" :fill="ajaxData.pl1dlq312?red:green" width="15.462" height="24.008"></rect>
+					<rect x="425.331" y="275.904" :fill="ajaxData.pl1dlq313?red:green" width="15.463" height="24.008"></rect>
+					<rect x="689.398" y="275.904" :fill="ajaxData.pl1dlq314?red:green" width="15.463" height="24.008"></rect>
+					<rect x="953.72" y="275.904" :fill="ajaxData.pl1dlq315?red:green" width="15.462" height="24.008"></rect>
+					<rect x="1268.007" y="275.904" :fill="ajaxData.pl1dlq316?red:green" width="15.462" height="24.008"></rect>
+					<rect x="1590.415" y="275.904" :fill="ajaxData.pl1dlq317?red:green" width="15.463" height="24.008"></rect>
+					<rect x="329.938" y="645.885" :fill="ajaxData.pL1dlq01?red:green" width="14.25" height="35.774"></rect>
+					<rect x="396.188" y="645.885" :fill="ajaxData.pL1dlq02?red:green" width="14.25" height="35.774"></rect>
+					<rect x="451.96" y="645.885" :fill="ajaxData.pL1dlq03?red:green" width="14.25" height="35.774"></rect>
+					<rect x="518.21" y="645.885" :fill="ajaxData.pL1dlq04?red:green" width="14.25" height="35.774"></rect>
+					<rect x="594.005" y="645.885" :fill="ajaxData.pL1dlq05?red:green" width="14.25" height="35.774"></rect>
+					<rect x="660.255" y="645.885" :fill="ajaxData.pL1dlq06?red:green" width="14.25" height="35.774"></rect>
+					<rect x="716.027" y="645.885" :fill="ajaxData.pL1dlq07?red:green" width="14.25" height="35.774"></rect>
+					<rect x="782.277" y="645.885" :fill="ajaxData.pL1dlq08?red:green" width="14.25" height="35.774"></rect>
+					<rect x="858.325" y="645.885" :fill="ajaxData.pL1dlq09?red:green" width="14.25" height="35.774"></rect>
+					<rect x="924.575" y="645.885" :fill="ajaxData.pL1dlq10?red:green" width="14.25" height="35.774"></rect>
+					<rect x="980.348" y="645.885" :fill="ajaxData.pL1dlq11?red:green" width="14.25" height="35.774"></rect>
+					<rect x="1046.598" y="645.885" :fill="ajaxData.pL1dlq12?red:green" width="14.25" height="35.774"></rect>
+					<rect x="1113.615" y="645.885" :fill="ajaxData.pL1dlq13?red:green" width="14.25" height="35.774"></rect>
+					<rect x="1179.865" y="645.885" :fill="ajaxData.pL1dlq14?red:green" width="14.25" height="35.774"></rect>
+					<rect x="1235.801" y="645.885" :fill="ajaxData.pL1dlq15?red:green" width="14.25" height="35.774"></rect>
+					<rect x="1302.051" y="645.885" :fill="ajaxData.pL1dlq16?red:green" width="14.25" height="35.774"></rect>
+					<rect x="1495.021" y="645.885" :fill="ajaxData.pL1dlq17?red:green" width="14.25" height="35.774"></rect>
+					<rect x="1561.271" y="645.885" :fill="ajaxData.pL1dlq18?red:green" width="14.25" height="35.774"></rect>
+					<rect x="1651.781" y="644.54" :fill="ajaxData.pL1dlq19?red:green" width="14.25" height="35.777"></rect>
+				</g>
+				<g id="block">
+					<g>
+						<polyline fill="none" :stroke="ajaxData.pl1sc310?red:green" stroke-miterlimit="10" points="579.348,162.623 572.523,170.344 565.504,162.623   "></polyline>
+						<polyline fill="none" :stroke="ajaxData.pl1sc310?red:green" stroke-miterlimit="10" points="579.348,156.773 572.523,164.491 565.504,156.773   "></polyline>
+						<polyline fill="none" :stroke="ajaxData.pl1sc310?red:green" stroke-miterlimit="10" points="565.504,120.33 572.327,112.608 579.348,120.33   "></polyline>
+						<polyline fill="none" :stroke="ajaxData.pl1sc310?red:green" stroke-miterlimit="10" points="565.504,125.107 572.327,117.385 579.348,125.107   "></polyline>
+					</g>
+					<g>
+						<polyline fill="none" :stroke="ajaxData.pl1sc318?red:green" stroke-width="1.3" stroke-miterlimit="10" points="1283.591,163.623 1276.768,171.344      1269.747,163.623    "></polyline>
+						<polyline fill="none" :stroke="ajaxData.pl1sc318?red:green" stroke-width="1.3" stroke-miterlimit="10" points="1283.591,157.773 1276.768,165.491      1269.747,157.773    "></polyline>
+						<polyline fill="none" :stroke="ajaxData.pl1sc318?red:green" stroke-width="1.3" stroke-miterlimit="10" points="1269.747,121.33 1276.572,113.608      1283.591,121.33    "></polyline>
+						<polyline fill="none" :stroke="ajaxData.pl1sc318?red:green" stroke-width="1.3" stroke-miterlimit="10" points="1269.747,126.107 1276.572,118.385      1283.591,126.107    "></polyline>
+					</g>
+					<g>
+						<polyline fill="none" :stroke="ajaxData.pl1sc312?red:green" stroke-miterlimit="10" points="161.779,266.95 168.602,259.231 175.622,266.95   "></polyline>
+						<polyline fill="none" :stroke="ajaxData.pl1sc312?red:green" stroke-miterlimit="10" points="161.779,272.802 168.602,265.082 175.622,272.802   "></polyline>
+						<polyline fill="none" :stroke="ajaxData.pl1sc312?red:green" stroke-miterlimit="10" points="175.622,309.242 168.799,316.967 161.779,309.242   "></polyline>
+						<polyline fill="none" :stroke="ajaxData.pl1sc312?red:green" stroke-miterlimit="10" points="175.622,304.468 168.799,312.189 161.779,304.468   "></polyline>
+					</g>
+					<g>
+						<polyline fill="none" :stroke="ajaxData.pl1sc313?red:green" stroke-miterlimit="10" points="425.779,266.95 432.602,259.231 439.621,266.95   "></polyline>
+						<polyline fill="none" :stroke="ajaxData.pl1sc313?red:green" stroke-miterlimit="10" points="425.779,272.802 432.602,265.082 439.621,272.802   "></polyline>
+						<polyline fill="none" :stroke="ajaxData.pl1sc313?red:green" stroke-miterlimit="10" points="439.621,309.242 432.799,316.967 425.779,309.242   "></polyline>
+						<polyline fill="none" :stroke="ajaxData.pl1sc313?red:green" stroke-miterlimit="10" points="439.621,304.468 432.799,312.189 425.779,304.468   "></polyline>
+					</g>
+					<g>
+						<polyline fill="none" :stroke="ajaxData.pl1sc314?red:green" stroke-miterlimit="10" points="689.846,266.95 696.669,259.231 703.689,266.95   "></polyline>
+						<polyline fill="none" :stroke="ajaxData.pl1sc314?red:green" stroke-miterlimit="10" points="689.846,272.802 696.669,265.082 703.689,272.802   "></polyline>
+						<polyline fill="none" :stroke="ajaxData.pl1sc314?red:green" stroke-miterlimit="10" points="703.689,309.242 696.865,316.967 689.846,309.242   "></polyline>
+						<polyline fill="none" :stroke="ajaxData.pl1sc314?red:green" stroke-miterlimit="10" points="703.689,304.468 696.865,312.189 689.846,304.468   "></polyline>
+					</g>
+					<g>
+						<polyline fill="none" :stroke="ajaxData.pl1sc315?red:green" stroke-miterlimit="10" points="954.167,266.95 960.99,259.231 968.01,266.95   "></polyline>
+						<polyline fill="none" :stroke="ajaxData.pl1sc315?red:green" stroke-miterlimit="10" points="954.167,272.802 960.99,265.082 968.01,272.802   "></polyline>
+						<polyline fill="none" :stroke="ajaxData.pl1sc315?red:green" stroke-miterlimit="10" points="968.01,309.242 961.188,316.967 954.167,309.242   "></polyline>
+						<polyline fill="none" :stroke="ajaxData.pl1sc315?red:green" stroke-miterlimit="10" points="968.01,304.468 961.188,312.189 954.167,304.468   "></polyline>
+					</g>
+					<g>
+						<polyline fill="none" :stroke="ajaxData.pl1sc316?red:green" stroke-miterlimit="10" points="1268.453,266.95 1275.277,259.231 1282.297,266.95   "></polyline>
+						<polyline fill="none" :stroke="ajaxData.pl1sc316?red:green" stroke-miterlimit="10" points="1268.453,272.802 1275.277,265.082 1282.297,272.802   "></polyline>
+						<polyline fill="none" :stroke="ajaxData.pl1sc316?red:green" stroke-miterlimit="10" points="1282.297,309.242 1275.475,316.967 1268.453,309.242   "></polyline>
+						<polyline fill="none" :stroke="ajaxData.pl1sc316?red:green" stroke-miterlimit="10" points="1282.297,304.468 1275.475,312.189 1268.453,304.468   "></polyline>
+					</g>
+					<g>
+						<polyline fill="none" :stroke="ajaxData.pl1sc317?red:green" stroke-miterlimit="10" points="1590.862,266.95 1597.686,259.231 1604.706,266.95   "></polyline>
+						<polyline fill="none" :stroke="ajaxData.pl1sc317?red:green" stroke-miterlimit="10" points="1590.862,272.802 1597.686,265.082 1604.706,272.802   "></polyline>
+						<polyline fill="none" :stroke="ajaxData.pl1sc317?red:green" stroke-miterlimit="10" points="1604.706,309.242 1597.881,316.967 1590.862,309.242   "></polyline>
+						<polyline fill="none" :stroke="ajaxData.pl1sc317?red:green" stroke-miterlimit="10" points="1604.706,304.468 1597.881,312.189 1590.862,304.468   "></polyline>
+					</g>
+
+				</g>
+				<g id="data">
+					<g>
+						<text transform="matrix(1 0 0 1 150.9871 155.4553)" fill="#1A823B" font-family="'MicrosoftYaHei'" font-size="9.463">-.--</text>
+						<text transform="matrix(1 0 0 1 150.9875 114.092)" fill="#1A823B" font-family="'MicrosoftYaHei'" font-size="9.463">-.--</text>
+						<text transform="matrix(1 0 0 1 150.9871 134.7874)" fill="#1A823B" font-family="'MicrosoftYaHei'" font-size="9.463">-.--</text>
+						<text transform="matrix(1 0 0 1 150.9871 175.9592)" fill="#1A823B" font-family="'MicrosoftYaHei'" font-size="9.463">-.--</text>
+					</g>
+					<g>
+						<text transform="matrix(1 0 0 1 752.262 119.8499)" fill="#1A823B" font-family="'MicrosoftYaHei'" font-size="9.463">{{ajaxData.pl1laayt}}</text>
+						<text transform="matrix(1 0 0 1 752.2615 139.5452)" fill="#1A823B" font-family="'MicrosoftYaHei'" font-size="9.463">{{ajaxData.pl1pkwyt}}</text>
+						<text transform="matrix(1 0 0 1 752.2615 160.2112)" fill="#1A823B" font-family="'MicrosoftYaHei'" font-size="9.463">{{ajaxData.pl1qkvaryt}}</text>
+						<text transform="matrix(1 0 0 1 752.2615 180.7151)" fill="#1A823B" font-family="'MicrosoftYaHei'" font-size="9.463">{{ajaxData.pl1cosyt}}</text>
+					</g>
+					<g>
+						<text transform="matrix(1 0 0 1 1368.6311 109.6018)" fill="#1A823B" font-family="'MicrosoftYaHei'" font-size="9.463">{{ajaxData.pl1laawg}}</text>
+						<text transform="matrix(1 0 0 1 1368.6311 129.2971)" fill="#1A823B" font-family="'MicrosoftYaHei'" font-size="9.463">{{ajaxData.pl1pkwwg}}</text>
+						<text transform="matrix(1 0 0 1 1368.6311 149.9651)" fill="#1A823B" font-family="'MicrosoftYaHei'" font-size="9.463">{{ajaxData.pl1qkvarwg}}</text>
+						<text transform="matrix(1 0 0 1 1368.6311 170.469)" fill="#1A823B" font-family="'MicrosoftYaHei'" font-size="9.463">{{ajaxData.pl1coswg}}</text>
+					</g>
+					<g>
+						<text transform="matrix(1 0 0 1 251.8352 278.092)" fill="#1A823B" font-family="'MicrosoftYaHei'" font-size="9.463">{{ajaxData.pl1blaacy}}</text>
+						<text transform="matrix(1 0 0 1 251.8347 296.7874)" fill="#1A823B" font-family="'MicrosoftYaHei'" font-size="9.463">{{ajaxData.pl1bpcy}}</text>
+						<text transform="matrix(1 0 0 1 251.8347 317.4553)" fill="#1A823B" font-family="'MicrosoftYaHei'" font-size="9.463">{{ajaxData.pl1bqcy}}</text>
+						<text transform="matrix(1 0 0 1 251.8347 337.9592)" fill="#1A823B" font-family="'MicrosoftYaHei'" font-size="9.463">{{ajaxData.pl1bcoscy}}</text>
+					</g>
+					<g>
+						<text transform="matrix(1 0 0 1 519.3879 278.8108)" fill="#1A823B" font-family="'MicrosoftYaHei'" font-size="9.463">{{ajaxData.pl1laagf1}}</text>
+						<text transform="matrix(1 0 0 1 519.3875 297.5061)" fill="#1A823B" font-family="'MicrosoftYaHei'" font-size="9.463">{{ajaxData.pl1pkwgf1}}</text>
+						<text transform="matrix(1 0 0 1 519.3875 318.1741)" fill="#1A823B" font-family="'MicrosoftYaHei'" font-size="9.463">{{ajaxData.pl1qkvargf1}}</text>
+						<text transform="matrix(1 0 0 1 519.3875 338.678)" fill="#1A823B" font-family="'MicrosoftYaHei'" font-size="9.463">{{ajaxData.pl1cosgf1}}</text>
+					</g>
+					<g>
+						<text transform="matrix(1 0 0 1 778.0662 278.8108)" fill="#1A823B" font-family="'MicrosoftYaHei'" font-size="9.463">{{ajaxData.pl1laagf2}}</text>
+						<text transform="matrix(1 0 0 1 778.0657 297.5061)" fill="#1A823B" font-family="'MicrosoftYaHei'" font-size="9.463">{{ajaxData.pl1pkwgf2}}</text>
+						<text transform="matrix(1 0 0 1 778.0657 318.1741)" fill="#1A823B" font-family="'MicrosoftYaHei'" font-size="9.463">{{ajaxData.pl1qkvargf2}}</text>
+						<text transform="matrix(1 0 0 1 778.0657 338.678)" fill="#1A823B" font-family="'MicrosoftYaHei'" font-size="9.463">{{ajaxData.pl1cosgf2}}</text>
+					</g>
+					<g>
+						<text transform="matrix(1 0 0 1 1053.7756 279.8147)" fill="#1A823B" font-family="'MicrosoftYaHei'" font-size="9.463">{{ajaxData.pl1laagf3}}</text>
+						<text transform="matrix(1 0 0 1 1053.7756 298.51)" fill="#1A823B" font-family="'MicrosoftYaHei'" font-size="9.463">{{ajaxData.pl1pkwgf3}}</text>
+						<text transform="matrix(1 0 0 1 1053.7756 319.176)" fill="#1A823B" font-family="'MicrosoftYaHei'" font-size="9.463">{{ajaxData.pl1qkvargf3}}</text>
+						<text transform="matrix(1 0 0 1 1053.7756 339.6799)" fill="#1A823B" font-family="'MicrosoftYaHei'" font-size="9.463">{{ajaxData.pl1cosgf3}}</text>
+					</g>
+					<g>
+						<text transform="matrix(1 0 0 1 1360.9846 279.8147)" fill="#1A823B" font-family="'MicrosoftYaHei'" font-size="9.463">{{ajaxData.pl1laagf4}}</text>
+						<text transform="matrix(1 0 0 1 1360.9846 298.51)" fill="#1A823B" font-family="'MicrosoftYaHei'" font-size="9.463">{{ajaxData.pl1pkwgf4}}</text>
+						<text transform="matrix(1 0 0 1 1360.9846 319.176)" fill="#1A823B" font-family="'MicrosoftYaHei'" font-size="9.463">{{ajaxData.pl1qkvargf4}}</text>
+						<text transform="matrix(1 0 0 1 1360.9846 339.6799)" fill="#1A823B" font-family="'MicrosoftYaHei'" font-size="9.463">{{ajaxData.pl1cosgf4}}</text>
+					</g>
+					<g>
+						<text transform="matrix(1 0 0 1 1700.4709 277.8147)" fill="#1A823B" font-family="'MicrosoftYaHei'" font-size="9.463">{{ajaxData.pl1laagf5}}</text>
+						<text transform="matrix(1 0 0 1 1700.4709 298.51)" fill="#1A823B" font-family="'MicrosoftYaHei'" font-size="9.463">{{ajaxData.pl1pkwgf5}}</text>
+						<text transform="matrix(1 0 0 1 1700.4709 319.176)" fill="#1A823B" font-family="'MicrosoftYaHei'" font-size="9.463">{{ajaxData.pl1qkvargf5}}</text>
+						<text transform="matrix(1 0 0 1 1700.4709 339.6799)" fill="#1A823B" font-family="'MicrosoftYaHei'" font-size="9.463">{{ajaxData.pl1cosgf5}}</text>
+					</g>
+
+					<g>
+						<text transform="matrix(1 0 0 1 319.9377 772.4983)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">{{ajaxData.pl1srdy01}}</text>
+						<text transform="matrix(1 0 0 1 387.1877 772.4983)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">{{ajaxData.pl1srdy02}}</text>
+						<text transform="matrix(1 0 0 1 441.9602 772.4983)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">{{ajaxData.pl1srdy03}}</text>
+						<text transform="matrix(1 0 0 1 509.2102 772.4983)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">{{ajaxData.pl1srdy04}}</text>
+						<text transform="matrix(1 0 0 1 585.7434 772.4983)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">{{ajaxData.pl1srdy05}}</text>
+						<text transform="matrix(1 0 0 1 652.9934 772.4983)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">{{ajaxData.pl1srdy06}}</text>
+						<text transform="matrix(1 0 0 1 711.7659 772.4983)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">{{ajaxData.pl1srdy07}}</text>
+						<text transform="matrix(1 0 0 1 779.0159 772.4983)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">{{ajaxData.pl1srdy08}}</text>
+						<text transform="matrix(1 0 0 1 850.4915 772.4983)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">{{ajaxData.pl1srdy09}}</text>
+						<text transform="matrix(1 0 0 1 917.7415 772.4983)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">{{ajaxData.pl1srdy10}}</text>
+						<text transform="matrix(1 0 0 1 976.5139 772.4983)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">{{ajaxData.pl1srdy11}}</text>
+						<text transform="matrix(1 0 0 1 1039.7639 772.4983)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">{{ajaxData.pl1srdy12}}</text>
+						<text transform="matrix(1 0 0 1 1107.2639 772.4983)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">{{ajaxData.pl1srdy13}}</text>
+						<text transform="matrix(1 0 0 1 1175.7639 772.4983)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">{{ajaxData.pl1srdy14}}</text>
+						<text transform="matrix(1 0 0 1 1239.7639 772.4983)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">{{ajaxData.pl1srdy15}}</text>
+						<text transform="matrix(1 0 0 1 1298.7639 772.4983)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">{{ajaxData.pl1srdy16}}</text>
+						<text transform="matrix(1 0 0 1 1496.7639 772.4983)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">{{ajaxData.pl1srdy17}}</text>
+						<text transform="matrix(1 0 0 1 1557.7639 772.4983)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">{{ajaxData.pl1srdy18}}</text>
+						<text transform="matrix(1 0 0 1 1651.2639 772.4983)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">{{ajaxData.pl1srdy19}}</text>
+	
+						<text transform="matrix(1 0 0 1 319.9377 824.9983)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">{{ajaxData.pl1scgl01}}</text>
+						<text transform="matrix(1 0 0 1 387.1877 824.9983)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">{{ajaxData.pl1scgl02}}</text>
+						<text transform="matrix(1 0 0 1 441.9602 824.9983)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">{{ajaxData.pl1scgl03}}</text>
+						<text transform="matrix(1 0 0 1 509.2102 824.9983)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">{{ajaxData.pl1scgl04}}</text>
+						<text transform="matrix(1 0 0 1 585.7434 824.9983)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">{{ajaxData.pl1scgl05}}</text>
+						<text transform="matrix(1 0 0 1 652.9934 824.9983)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">{{ajaxData.pl1scgl06}}</text>
+						<text transform="matrix(1 0 0 1 711.7659 824.9983)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">{{ajaxData.pl1scgl07}}</text>
+						<text transform="matrix(1 0 0 1 779.0159 824.9983)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">{{ajaxData.pl1scgl08}}</text>
+						<text transform="matrix(1 0 0 1 850.4915 824.9983)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">{{ajaxData.pl1scgl09}}</text>
+						<text transform="matrix(1 0 0 1 917.7415 824.9983)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">{{ajaxData.pl1scgl10}}</text>
+						<text transform="matrix(1 0 0 1 976.5139 824.9983)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">{{ajaxData.pl1scgl11}}</text>
+						<text transform="matrix(1 0 0 1 1039.7639 824.9983)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">{{ajaxData.pl1scgl12}}</text>
+						<text transform="matrix(1 0 0 1 1107.2639 824.9983)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">{{ajaxData.pl1scgl13}}</text>
+						<text transform="matrix(1 0 0 1 1175.7639 824.9983)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">{{ajaxData.pl1scgl14}}</text>
+						<text transform="matrix(1 0 0 1 1239.7639 824.9983)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">{{ajaxData.pl1scgl15}}</text>
+						<text transform="matrix(1 0 0 1 1298.7639 824.9983)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">{{ajaxData.pl1scgl16}}</text>
+						<text transform="matrix(1 0 0 1 1496.7639 824.9983)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">{{ajaxData.pl1scgl17}}</text>
+						<text transform="matrix(1 0 0 1 1557.7639 824.9983)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">{{ajaxData.pl1scgl18}}</text>
+						<text transform="matrix(1 0 0 1 1651.2639 824.9983)" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="11.6452">{{ajaxData.pl1scgl19}}</text>
+					</g>
+				</g>
+			</svg>
+
+					</template>
+				</previewPicture>
+			</el-col>
+		</el-row>
+	</div>
+</template>
+<script>
+	import previewPicture from "./previewPicture.vue";
+	import {BoosterStation} from "utils/BoosterStation";
+	export default {
+		components: {
+			previewPicture
+		},
+		data() {
+			return {
+				green: '#02A434',
+				red: '#FF0000',
+				ajaxData: {},
+				interval: '',
+			};
+		},
+		created() {
+			this.boosterStation = new BoosterStation();
+	
+			this.refreshTPData()
+			this.interval = setInterval(this.refreshTPData, 3000)
+		},
+		methods: {
+			closed() {
+				clearInterval(this.interval);
+			},
+			refreshTPData() {
+				this.boosterStation.getDatas("PL1_GDC",this.bindValue);
+			},
+			bindValue(msg){
+				this.ajaxData=msg;
+			},
+		}
+	};
+</script>
+
+<style scoped>
+	.center-bar {
+		position: relative;
+		box-sizing: border-box;
+		height: 90vh;
+		background-color: #000000;
+		padding-top: 10px;
+		padding-left: 5px;
+		padding-right: 5px;
+		padding-bottom: 5px;
+		margin-top: 0;
+		margin-right: 0;
+		margin-bottom: 3px;
+		margin-left: 0;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.svg {
+		width: 100%;
+		height: 100%;
+	}
+</style>

src/components/BoosterStation/previewPicture.vue

@@ -0,0 +1,696 @@
+<template>
+	<div class="pop-up-main">
+		<div class="paln-box">
+			<div class="movableItem" :style="{width:width,height:height}" @mousewheel="rollImg($event)"
+				@mousedown="drag($event,1)" ref="bigImage">
+				<!-- 图片不可选中 或不可拖拽到新标签打开-->
+				<slot name="svg" oncontextmenu="return false;" onselectstart="return false;" draggable="false"></slot>
+				<template v-if="isEdit &&iconWidth">
+					<img ref="signImage" :src="iconImgUrl" @mousedown="dragSign($event,key)"
+						v-for="(item,key) in equipment" :key="key"
+						:style="{top:equipment[key].top+'%',left:equipment[key].left+'%',width:iconWidth,height:iconHeight}"
+						class="equipment" />
+				</template>
+				<el-popover width="200" placement="bottom-start" trigger="hover" :close-delay="100" content="暂无描述"
+					v-else-if="!isEdit&&iconWidth &&arrIcon.length==equipment.length " v-for="(item,key) in equipment"
+					:key="key" popper-class="preview-popover">
+					<!-- &&arrIcon.length==equipment.length -->
+					<template>
+						<div v-if="equipment[key].describe" class="describe">
+							<p class="describe-top">{{equipment[key].describe.deviceName}}</p>
+							<p class="describe-center">{{equipment[key].describe.remark}}</p>
+							<p class="describe-bottom">{{equipment[key].describe.location}}</p>
+						</div>
+					</template>
+					<!-- <img oncontextmenu="return false;" onselectstart="return false;" draggable="false" slot="reference"
+						ref="signImage" :src="$baseUrl + equipment[key].iconImgUrl"
+						:style="{top:equipment[key].top+'%',left:equipment[key].left+'%',width:arrIcon[key].iconWidth,height:arrIcon[key].iconHeight}"
+						class="equipment" /> -->
+				</el-popover>
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+	export default {
+		props: {
+			equipment: {
+				type: Array,
+				default: () => {
+					return [{
+						iconImgUrl: "",
+						top: 0,
+						left: 0,
+					}, ];
+				},
+			},
+			isEdit: {
+				default: false,
+			},
+			imgUrl: {},
+		},
+
+		data() {
+			return {
+				// 定时器
+				timer: "",
+				// 图片加载失败
+				imgOnerror: false,
+				imgIndex: 0,
+				isChange: true,
+				// 图片显示默认大小
+				width: "1400px",
+				height: "800px",
+				// 可缩小倍数,为空则可无限缩小
+				minification: 3,
+				// 可放大倍数 为空则可无限放大
+				magnification: "",
+				bigMaxWidth: 1600,
+				bigMaxHeight: 800,
+
+				// 小图标信息
+				iconImgUrl: "",
+				iconWidth: "",
+				// 存储每个小图标处理好的宽高
+				iconHeight: "",
+				arrIcon: [],
+				iconMaxWidth: 32,
+				iconMaxHeight: 32,
+				tog: 1,
+			};
+		},
+		methods: {
+			// 获取图片大小
+			getImgInfo(
+				imgUrl,
+				MaxWidth,
+				MaxHeight,
+				StrWidth,
+				StrHeight,
+				Array = false,
+				arr,
+				num = 0
+			) {
+				var img = new Image();
+
+				// img.src = imgUrl;
+				img = document.getElementsByClassName("svg")
+				let _this = this;
+				img.onerror = () => {
+					// console.log("加载失败！！", _this.arrIcon.length);
+					// console.log(imgUrl, MaxWidth, MaxHeight, StrWidth, StrHeight);
+					_this.imgOnerror = true;
+					_this.imgIndex =
+						_this.arrIcon.length - 1 < 0 ? 0 : _this.arrIcon.length - 1;
+					this.timer = setTimeout(() => {
+						if (num <= 5) {
+							_this.getImgInfo(
+								imgUrl,
+								MaxWidth,
+								MaxHeight,
+								StrWidth,
+								StrHeight,
+								Array,
+								arr,
+								num + 1
+							);
+						}
+						clearInterval(this.timer);
+					}, 2000);
+				};
+				img.onload = function(e) {
+					//  显示时 初始 最大宽度
+					let maxWidth = MaxWidth;
+					//  显示时 初始 最大高度
+					let maxHeight = MaxHeight;
+					if (
+						e.path[0].naturalWidth <= maxWidth &&
+						e.path[0].naturalHeight <= maxHeight
+					) {
+						_this[StrWidth] = e.path[0].naturalWidth + "px";
+						_this[StrHeight] = e.path[0].naturalHeight + "px";
+					} else {
+						_this[StrWidth] = e.path[0].naturalWidth + "px";
+						_this[StrHeight] = e.path[0].naturalHeight + "px";
+						if (
+							e.path[0].naturalWidth > maxWidth &&
+							e.path[0].naturalHeight <= maxHeight
+						) {
+							let ratio = e.path[0].naturalWidth / e.path[0].naturalHeight;
+							_this[StrWidth] = "1600px";
+							_this[StrHeight] = maxWidth / ratio + "px";
+						} else if (
+							e.path[0].naturalWidth <= maxWidth &&
+							e.path[0].naturalHeight > maxHeight
+						) {
+							let ratio = e.path[0].naturalWidth / e.path[0].naturalHeight;
+							_this[StrWidth] = maxHeight * ratio + "px";
+							_this[StrHeight] = "800px";
+						} else if (
+							e.path[0].naturalWidth > maxWidth &&
+							e.path[0].naturalHeight > maxHeight
+						) {
+							let ratio = e.path[0].naturalWidth / e.path[0].naturalHeight;
+							let w = maxWidth;
+							let h = w / ratio;
+							if (h > maxHeight) {
+								let ratio2 = w / h;
+								h = maxHeight;
+								w = h * ratio2;
+							}
+							_this[StrWidth] = w + "px";
+							_this[StrHeight] = h + "px";
+						}
+					}
+					if (Array) {
+						_this[arr].push({
+							iconWidth: _this[StrWidth],
+							iconHeight: _this[StrHeight],
+						});
+						// console.log(
+						// 	"tow#################################arrIcon",
+						// 	_this[arr].length
+						// );
+					}
+					// _this[StrWidth] = `${e.path[0].naturalWidth}px`;
+					// _this[StrHeight] = `${e.path[0].naturalHeight}px`;
+					// vm.$set(vm.imgInfo, "width", img.width);
+					// vm.$set(vm.imgInfo, "height", img.height);
+					// console.log("打印图片信息", imgUrl, _this[StrWidth], _this[StrHeight]); // 打印图片信息
+
+					// console.log("打印图片信息", e.path[0].naturalHeight); // 打印图片信息
+					// console.log("打印图片信息", e); // 打印图片信息
+					// console.log("打印图片信息this.width", _this[StrWidth]); // 打印图片信息
+					// console.log("打印图片信息this.height", _this[StrHeight]); // 打印图片信息
+				};
+			},
+			// 缩放
+			rollImg() {
+				var that = this;
+				// var oImg = document.getElementsByClassName("movableItem")[0];
+				var oImg = this.$refs.bigImage;
+				// console.log(
+				// 	"length",
+				// 	document.getElementsByClassName("movableItem").length
+				// );
+				// console.log("oImg", oImg);
+				var _this = this;
+
+				function fnWheel(obj, fncc) {
+					obj.onmousewheel = fn;
+					if (obj.addEventListener) {
+						obj.addEventListener("DOMMouseScroll", fn, false);
+					}
+
+					function fn(ev) {
+						var oEvent = ev || window.event;
+						var down = true;
+						if (oEvent.detail) {
+							down = oEvent.detail > 0;
+						} else {
+							down = oEvent.wheelDelta < 0;
+						}
+						if (fncc) {
+							fncc.call(this, down, oEvent);
+						}
+						if (oEvent.preventDefault) {
+							oEvent.preventDefault();
+						}
+						return false;
+					}
+				}
+				fnWheel(oImg, function(down, oEvent) {
+					var oldWidth = this.offsetWidth;
+					var oldHeight = this.offsetHeight;
+					var oldLeft = this.offsetLeft;
+					var oldTop = this.offsetTop;
+					var parent = oEvent.path[2];
+					// 获取父元素距离页面可视区域的位置
+					var parentLeft = parent.getBoundingClientRect().left;
+					var parentTop = parent.getBoundingClientRect().top;
+					// 比例 = （点击位置距离可视窗口位置 - 父元素距离可视窗口位置 - 相对定位的left）/ 本身宽度
+					var scaleX = (oEvent.clientX - parentLeft - oldLeft) / oldWidth; //比例
+					var scaleY = (oEvent.clientY - parentTop - oldTop) / oldHeight;
+
+					let nowWidth = this.style.width.split("p")[0];
+					let initWidth = _this.width.split("p")[0];
+					let initHeight = _this.height.split("p")[0];
+
+					let miniFlag = true;
+					let magniFlag = true;
+					if (_this.minification) {
+						// 限制缩小范围
+						if (nowWidth <= parseInt(initWidth / _this.minification)) {
+							miniFlag = false;
+							// console.log("限制缩小范围");
+							// console.log(
+							// 	"限制缩小范围",
+							// 	nowWidth,
+							// 	parseInt(initWidth / _this.minification)
+							// );
+							this.style.width = parseInt(initWidth / _this.minification) + "px";
+							this.style.height =
+								parseInt(initHeight / _this.minification) + "px";
+						}
+						if (_this.magnification) {
+							// 限制放大范围
+							if (nowWidth >= parseInt(initWidth * _this.magnification)) {
+								magniFlag = false;
+								// console.log("限制放大范围");
+								this.style.width =
+									parseInt(initWidth * _this.magnification) + "px";
+								this.style.height =
+									parseInt(initHeight * _this.magnification) + "px";
+							}
+						}
+					}
+
+					if (down && miniFlag) {
+						this.style.width = parseInt(this.offsetWidth * 0.9) + "px";
+						this.style.height = parseInt(this.offsetHeight * 0.9) + "px";
+						
+						that.width = parseInt(this.offsetWidth * 0.9) + "px";
+						that.height = parseInt(this.offsetHeight * 0.9) + "px";
+					} else if (!down && magniFlag) {
+						// console.log("放大");
+						this.style.width = parseInt(this.offsetWidth * 1.1) + "px";
+						this.style.height = parseInt(this.offsetHeight * 1.1) + "px";
+						that.width = parseInt(this.offsetWidth * 1.1) + "px";
+						that.height = parseInt(this.offsetHeight * 1.1) + "px";
+					}
+					var newWidth = this.offsetWidth;
+					var newHeight = this.offsetHeight;
+
+					// 新的相对位置left = 原先的相对位置left - 比例 *（本身新的宽度-旧的宽度）
+					this.style.left =
+						Math.round(this.offsetLeft - scaleX * (newWidth - oldWidth)) + "px";
+					this.style.top =
+						Math.round(this.offsetTop - scaleY * (newHeight - oldHeight)) + "px";
+				});
+				// console.log(that.width)
+			},
+			// },
+			//拖拽
+			drag(ev) {
+				// var ie = document.all;
+				console.log(ev / 0);
+
+				var nn6 = document.getElementById && !document.all;
+				var isdrag = false;
+				var y, x;
+				var nTY, nTX;
+				var oDragObj;
+
+				function moveMouse(e) {
+					if (isdrag) {
+						oDragObj.style.top =
+							(nn6 ? nTY + e.clientY - y : nTY + event.clientY - y) + "px";
+						oDragObj.style.left =
+							(nn6 ? nTX + e.clientX - x : nTX + event.clientX - x) + "px";
+						return false;
+					}
+				}
+
+				function initDrag(e) {
+					// console.log("点击图片initDrag");
+					var oDragHandle = nn6 ? e.target : event.srcElement;
+					var topElement = "HTML";
+					while (
+						oDragHandle.tagName != topElement &&
+						oDragHandle.className != "movableItem"
+					) {
+						oDragHandle = nn6 ?
+							oDragHandle.parentNode :
+							oDragHandle.parentElement;
+					}
+					if (oDragHandle.className == "movableItem") {
+						isdrag = true;
+						oDragObj = oDragHandle;
+						// 父元素宽高
+						let width = e.path[2].offsetWidth;
+						let height = e.path[2].offsetHeight;
+						// 这里判断第一次获取不到style 样式 默认为 居中50%
+						if (oDragObj.style.top == "") {
+							nTY = parseInt((50 * height) / 100 + 0);
+							nTX = parseInt((50 * width) / 100 + 0);
+						} else {
+							nTY = parseInt(oDragObj.style.top + 0);
+							nTX = parseInt(oDragObj.style.left + 0);
+						}
+						y = nn6 ? e.clientY : event.clientY;
+						x = nn6 ? e.clientX : event.clientX;
+						oDragObj.style.cursor = "move";
+						document.onmousemove = moveMouse;
+						return false;
+					}
+				}
+				document.onmousemove = initDrag;
+				// document.onmouseup = new Function("isdrag=false");
+				document.onmouseup = function(e) {
+					isdrag = false;
+					document.onmousemove = null;
+					document.onmouseup = null;
+					var oDragHandle = nn6 ? e.target : event.srcElement;
+					var topElement = "HTML";
+					while (
+						oDragHandle.tagName != topElement &&
+						oDragHandle.className != "movableItem"
+					) {
+						oDragHandle = nn6 ?
+							oDragHandle.parentNode :
+							oDragHandle.parentElement;
+					}
+					if (oDragHandle.className == "movableItem") {
+						oDragObj = oDragHandle;
+						oDragObj.style.cursor = "Default";
+					}
+				};
+				ev = event || window.event;
+
+				// 取消事件冒泡行为
+				// window.event ? (window.event.cancelBubble = true) : ev.stopPropagation();
+			},
+			// 拖拽标记
+			// eslint-disable-next-line no-unused-vars
+			dragSign(ev, key) {
+				var nn6 = document.getElementById && !document.all;
+				var isdrag = false;
+				var y, x;
+				var nTY, nTX;
+				var oDragObj;
+				let _this = this;
+
+				function moveMouse(e) {
+
+					if (isdrag) {
+						this.equipmentKey = key;
+						// console.log("thisequipmentKey", this.equipmentKey);
+
+						let widthItem = e.path[1].style.width.split("p");
+						let heightItem = e.path[1].style.height.split("p");
+						let width = widthItem[0];
+						// eslint-disable-next-line no-unused-vars
+						let height = heightItem[0];
+						let top =
+							((nn6 ?
+									(nTY / 100) * height + e.clientY - y :
+									(nTY / 100) * height + event.clientY - y) /
+								height) *
+							100;
+						let left =
+							((nn6 ?
+									(nTX / 100) * width + e.clientX - x :
+									(nTX / 100) * width + event.clientX - x) /
+								width) *
+							100;
+
+						if (top >= 0 && top <= 100) {
+							_this.equipment[key].top = top;
+						}
+						if (left >= 0 && left <= 100) {
+							_this.equipment[key].left = left;
+						}
+
+						return false;
+					}
+				}
+				// eslint-disable-next-line no-unused-vars
+				function initDrag(e) {
+					// console.log("_this", _this);
+					var oDragHandle = nn6 ? e.target : event.srcElement;
+					var topElement = "HTML";
+					while (
+						oDragHandle.tagName != topElement &&
+						oDragHandle.className.indexOf("equipment") == -1
+					) {
+						oDragHandle = nn6 ?
+							oDragHandle.parentNode :
+							oDragHandle.parentElement;
+					}
+					if (oDragHandle.className.indexOf("equipment") != -1) {
+						isdrag = true;
+						oDragObj = oDragHandle;
+						// 父元素宽高
+						let width = e.path[1].offsetWidth;
+						// let height = e.path[1].offsetHeight;
+						// console.log(width, height);
+						// console.log("oDragObj.style", oDragObj.style);
+						// 这里判断第一次获取不到style 样式 默认为 居中50%
+						if (oDragObj.style.top == "") {
+							// nTY = parseInt((50 * height) / 100 + 0);
+							nTY= 0;
+							nTX = parseInt((50 * width) / 100 + 0);
+						} else if (oDragObj.style.top.indexOf("%") != -1) {
+							nTY = oDragObj.style.top.split("%")[0];
+							nTX = oDragObj.style.left.split("%")[0];
+						} else {
+							nTY = parseInt(oDragObj.style.top + 0);
+							nTX = parseInt(oDragObj.style.left + 0);
+						}
+						y = nn6 ? e.clientY : event.clientY;
+						x = nn6 ? e.clientX : event.clientX;
+
+						oDragObj.style.cursor = "move";
+						document.onmousemove = moveMouse;
+						return false;
+					}
+				}
+
+				// document.onmousedown = initDrag;
+				document.onmousemove = initDrag;
+
+				document.onmouseup = function(e) {
+					isdrag = false;
+					document.onmousemove = null;
+					document.onmouseup = null;
+					var oDragHandle = nn6 ? e.target : event.srcElement;
+					var topElement = "HTML";
+					while (
+						oDragHandle.tagName != topElement &&
+						oDragHandle.className != "equipment"
+					) {
+						oDragHandle = nn6 ?
+							oDragHandle.parentNode :
+							oDragHandle.parentElement;
+					}
+					if (oDragHandle.className == "equipment") {
+						oDragObj = oDragHandle;
+						oDragObj.style.cursor = "Default";
+					}
+				};
+
+				// _this.equipmentKey = key;
+				// _this.equipment[_this.equipmentKey].left = l;
+				// _this.equipment[_this.equipmentKey].top = t;
+				ev = event || window.event;
+
+				// 取消事件冒泡行为
+				window.event ? (window.event.cancelBubble = true) : ev.stopPropagation();
+			},
+		},
+		
+		watch: {
+			equipment() {
+				if (this.equipment.length != 0) {
+					this.arrIcon = [];
+					let finish = true;
+					this.equipment.filter((item) => {
+						if (!item.iconImgUrl) {
+							finish = false;
+						}
+						return true;
+					});
+					// console.log("finish", finish);
+					if (finish) {
+						this.equipment.filter((item, index) => {
+							if (index >= this.imgIndex) {
+								console.log("iconImgUrl", this.equipment[index].iconImgUrl);
+								this.getImgInfo(
+									this.$baseUrl + item.iconImgUrl,
+									this.iconMaxWidth,
+									this.iconMaxHeight,
+									"iconWidth",
+									"iconHeight",
+									true,
+									"arrIcon"
+								);
+							}
+							console.log("22filter", index);
+							return true;
+						});
+					}
+				}
+			},
+		},
+		created() {
+			this.getImgInfo(
+				this.imgUrl,
+				this.bigMaxWidth,
+				this.bigMaxHeight,
+				"width",
+				"height"
+			);
+			if (this.equipment.length != 0) {
+				this.arrIcon = [];
+				let finish = true;
+				this.equipment.filter((item) => {
+					if (!item.iconImgUrl) {
+						finish = false;
+					}
+					return true;
+				});
+				// console.log("finish", finish);
+				if (finish) {
+					this.equipment.filter((item, index) => {
+						if (index >= this.imgIndex) {
+							// console.log("iconImgUrl", this.equipment[index].iconImgUrl);
+							this.getImgInfo(
+								this.$baseUrl + item.iconImgUrl,
+								this.iconMaxWidth,
+								this.iconMaxHeight,
+								"iconWidth",
+								"iconHeight",
+								true,
+								"arrIcon"
+							);
+						}
+						// console.log("22filter", index);
+						return true;
+					});
+				}
+			}
+
+			this.iconImgUrl = JSON.parse(
+				JSON.stringify(this.$baseUrl + this.equipment[0].iconImgUrl)
+			);
+			// console.log("imgUrl", this.imgUrl);
+			// console.log("equipment", this.equipment);
+			// //禁止鼠标右键
+			// document.oncontextmenu = function() {
+			//   return false;
+			// };
+		},
+	};
+</script>
+<style lang="less">
+	.preview-popover {
+		background-color: #d3edf7dd;
+		padding: 12px;
+
+		.popper__arrow::after {
+			border-bottom-color: #d3edf7dd !important;
+		}
+
+		.describe {
+			p {
+				padding-bottom: 5px;
+
+				&:last-child {
+					padding-bottom: 0px;
+				}
+			}
+
+			.describe-top {
+				// color: sandybrown;
+				// color: red;
+				color: rgb(21, 110, 110);
+			}
+
+			.describe-center {
+				color: rgb(79, 21, 206);
+			}
+
+			.describe-bottom {
+				color: rgb(30, 31, 29);
+			}
+		}
+	}
+</style>
+<style lang="less" scoped>
+	.pop-up-main {
+		width: 100%;
+		height: calc(100vh - 32vh);
+		overflow-y:hidden ;
+
+		.paln-box {
+			width: 100%;
+			height: 100%;
+			position: relative;
+
+			.movableItem {
+				position: absolute;
+				// top: 75%;
+				left: 50%;
+				transform: translate(-50%, -10%);
+
+				img,
+				.svg {
+					z-index: 1;
+					width: 100%;
+					height: 100%;
+				}
+
+				.equipment {
+					position: absolute;
+					top: 0;
+					left: 0;
+					transform: translate(-50%, -50%);
+					z-index: 2;
+					font-size: 40px;
+					// color: red;
+					// background: blue;
+					zoom: 1;
+				}
+			}
+
+			.shuaxin {
+				position: absolute;
+				z-index: 2;
+				font-size: 40px;
+				top: 20px;
+				left: 20px;
+				cursor: pointer;
+
+				&:hover {
+					color: yellowgreen;
+				}
+			}
+
+			.equipment {
+				color: white;
+			}
+
+			&/deep/.el-button {
+				z-index: 2;
+				position: absolute;
+				bottom: 60px;
+				right: 20px;
+				width: 60px;
+				height: 35px;
+
+				span {
+					display: inline-block;
+					position: absolute;
+					top: 50%;
+					left: 50%;
+					transform: translate(-50%, -50%);
+				}
+
+				i {
+					display: inline-block;
+					position: absolute;
+					top: 50%;
+					left: 25%;
+					transform: translate(-50%, -50%);
+				}
+			}
+		}
+	}
+
+	// body {
+	// 		height: 100%;
+	// 		overflow: hidden;
+	// 		margin: 0;
+	// 		padding: 0;
+	// 	}
+</style>

src/components/CenterPage.vue

@@ -1,120 +0,0 @@
-/* 中间页面 */
-<template>
-  <div class="center-bar">
-    <el-row :gutter="10">
-      <el-col :span="8">
-        <ProblemArea ref="problempg" :problems="problems" />
-      </el-col>
-      <el-col :span="8">
-        <el-row>
-          <el-col :span="24">
-            <ControlArea />
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="24">
-            <CheckArea />
-          </el-col>
-        </el-row>
-      </el-col>
-      <el-col :span="8">
-        <el-row>
-          <el-col :span="24">
-            <RecommendedArea />
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="24">
-            <LabelArea />
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="24">
-            <AlarmArea />
-          </el-col>
-        </el-row>
-      </el-col>
-    </el-row>
-  <WindturbineDetailPages v-model="dialogVisible"></WindturbineDetailPages>
-  </div>
-</template>
-<script>
-import AlarmArea from "./area/AlarmArea.vue";
-import CheckArea from "./area/CheckArea.vue";
-import ControlArea from "./area/ControlArea.vue";
-import LabelArea from "./area/LabelArea.vue";
-import ProblemArea from "./area/ProblemArea.vue";
-import RecommendedArea from "./area/RecommendedArea.vue";
-import WindturbineDetailPages from "./area/windturbine/WindturbineDetailPages.vue"
-/* import wtbdp from './area/wtbDetailPages'; */
-
-export default {
-  data(){
-    return{
-      dialogVisible:false
-    }
-  },
-  mounted(){
-    /* var self=this;
-    wtbdp.$on("evnt",function(){
-      self.dialogVisible=true;
-    }); */
-  },
-  components: {
-    AlarmArea,
-    CheckArea,
-    ControlArea,
-    LabelArea,
-    ProblemArea,
-    RecommendedArea,
-    WindturbineDetailPages
-  },
-  props: {
-    /* temp: {
-      type: Onject | Array,
-      default: [],
-    }, */
-  },
-  created: function () {
-      
-  },
-  computed: {
-    problems: {
-      get: function () {
-        return this.datas;
-      },
-      set: function (params) {
-        this.datas = params;
-        this.$refs.problempg.problems = params;
-      },
-    },
-  },
-  methods: {
-
-  },
-  watch: {
-    /* temp(res) {
-      this.mapData = res;
-    }, */
-  },
-};
-</script>
-
-<style scoped>
-.center-bar {
-  position: relative;
-  box-sizing: border-box;
-  height: 90vh;
-  background-color: #000000;
-  padding-top: 10px;
-  padding-left: 5px;
-  padding-right: 5px;
-  padding-bottom: 5px;
-  margin-top: 0;
-  margin-right: 0;
-  margin-bottom: 3px;
-  margin-left: 0;
-  display: flex;
-  flex-direction: column;
-}
-</style>

src/components/StatusBar.vue

@@ -1,366 +0,0 @@
-/* 状态栏 */
-<template>
-  <div class="status-bar" onselectstart="return false">
-    <el-row>
-      <el-col :span="18" style="margin-top: 8px">
-        <span style="color: white; margin-left: 20px">系统时间：</span>
-        <span style="color: white">{{ currentTime }}</span>
-      </el-col>
-      <el-col :span="6" style="margin-top: 8px">
-        <el-popover
-          placement="top-start"
-          :width="521"
-          trigger="hover"
-          class="popoverBack"
-          :show-arrow="false"
-        >
-          <template #reference>
-            <div class="status-list">
-              <img
-                class="status-img"
-                src="../assets/img/statusbar/hidden_danger.png"
-              />
-              <span class="status-label hidden-danger">隐患</span>
-              <span>{{ hiddenDangerNum }}</span>
-            </div>
-          </template>
-          <el-scrollbar>
-            <el-table
-              :data="hiddenDangerData"
-              border
-              border-color="rgb(36,36,36)"
-              max-height="650px"
-              :header-cell-style="{
-                background: 'Black',
-                color: 'rgb(220,220,220)',
-                'border-bottom':'solid 1px rgb(36,36,36)'
-              }"
-              :cell-style="{ background: 'Black', color: 'rgb(220,220,220)' }"
-            >
-              <el-table-column
-                width="160"
-                property="lastUpdateTime"
-                label="时间"
-                align="center"
-              ></el-table-column>
-              <el-table-column
-                width="110"
-                property="windturbineId"
-                label="设备"
-                align="center"
-              ></el-table-column>
-              <el-table-column
-                width="250"
-                property="alertText"
-                label="故障信息"
-                align="center"
-              ></el-table-column>
-            </el-table>
-          </el-scrollbar>
-        </el-popover>
-        <el-popover
-          placement="top-start"
-          :width="521"
-          trigger="hover"
-          class="popoverBack"
-          :show-arrow="false"
-        >
-          <template #reference>
-            <div class="status-list">
-              <img
-                class="status-img"
-                src="../assets/img/statusbar/defect.png"
-              />
-              <span class="status-label defect">缺陷</span>
-              <span>{{ defectNum }}</span>
-            </div>
-          </template>
-          <el-scrollbar>
-          <el-table
-            :data="defectData"
-            border
-            border-color="rgb(36,36,36)"
-            max-height="650px"
-            :header-cell-style="{
-              background: 'Black',
-              color: 'rgb(220,220,220)',
-                'border-bottom':'solid 1px rgb(36,36,36)'
-            }"
-            :cell-style="{ background: 'Black', color: 'rgb(220,220,220)' }"
-          >
-            <el-table-column
-              width="160"
-              property="lastUpdateTime"
-              label="时间"
-              align="center"
-            ></el-table-column>
-            <el-table-column
-              width="110"
-              property="windturbineId"
-              label="设备"
-              align="center"
-            ></el-table-column>
-            <el-table-column
-              width="250"
-              property="alertText"
-              label="故障信息"
-              align="center"
-            ></el-table-column>
-          </el-table>
-          </el-scrollbar>
-        </el-popover>
-        <el-popover
-          placement="top-start"
-          :width="521"
-          trigger="hover"
-          class="popoverBack"
-          :show-arrow="false"
-        >
-          <template #reference>
-            <div class="status-list">
-              <img
-                class="status-img"
-                src="../assets/img/statusbar/malfunction.png"
-              />
-              <span class="status-label malfunction">故障</span>
-              <span>{{ malfunctionNum }}</span>
-            </div>
-          </template>
-          <el-scrollbar>
-          <el-table
-            :data="malfunctionData"
-            border
-            border-color="rgb(36,36,36)"
-            max-height="650px"
-            :header-cell-style="{
-              background: 'Black',
-              color: 'rgb(220,220,220)',
-                'border-bottom':'solid 1px rgb(36,36,36)'
-            }"
-            :cell-style="{ background: 'Black', color: 'rgb(220,220,220)' }"
-          >
-            <el-table-column
-              width="160"
-              property="lastUpdateTime"
-              label="时间"
-              align="center"
-            ></el-table-column>
-            <el-table-column
-              width="110"
-              property="stationName"
-              label="设备"
-              align="center"
-            ></el-table-column>
-            <el-table-column
-              width="250"
-              property="alertText"
-              label="故障信息"
-              align="center"
-            ></el-table-column>
-          </el-table>
-          </el-scrollbar>
-        </el-popover>
-        <el-popover
-          placement="top-start"
-          :width="521"
-          trigger="hover"
-          class="popoverBack"
-          :show-arrow="false"
-        >
-          <template #reference>
-            <div class="status-list">
-              <img
-                class="status-img"
-                src="../assets/img/statusbar/accident.png"
-              />
-              <span class="status-label accident">事故</span>
-              <span>{{ accidentNum }}</span>
-            </div>
-          </template>
-          <el-scrollbar>
-          <el-table
-            :data="accidentData"
-            border
-            border-color="rgb(36,36,36)"
-            max-height="650px"
-            :header-cell-style="{
-              background: 'Black',
-              color: 'rgb(220,220,220)',
-                'border-bottom':'solid 1px rgb(36,36,36)'
-            }"
-            :cell-style="{ background: 'Black', color: 'rgb(220,220,220)' }"
-          >
-            <el-table-column
-              width="160"
-              property="lastUpdateTime"
-              label="时间"
-              align="center"
-            ></el-table-column>
-            <el-table-column
-              width="110"
-              property="stationName"
-              label="设备"
-              align="center"
-            ></el-table-column>
-            <el-table-column
-              width="250"
-              property="alertText"
-              label="故障信息"
-              align="center"
-            ></el-table-column>
-          </el-table>
-          </el-scrollbar>
-        </el-popover>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import BackgroundData from "../assets/script/BackgroundData";
-export default {
-  data() {
-    return {
-      hiddenDangerNum: 0,
-      defectNum: 0,
-      malfunctionNum: 0,
-      accidentNum: 0,
-      statusTimer: "",
-      currentTime: "",
-
-      hiddenDangerData: new Array(),
-      defectData: new Array(),
-      malfunctionData: new Array(),
-      accidentData: new Array(),
-    };
-  },
-  mounted() {
-    let that = this;
-    this.statusTimer = setInterval(function () {
-      that.currentTime =
-        new Date().getFullYear() +
-        "-" +
-        that.appendZero(new Date().getMonth() + 1) +
-        "-" +
-        that.appendZero(new Date().getDate()) +
-        " " +
-        that.appendZero(new Date().getHours()) +
-        ":" +
-        that.appendZero(new Date().getMinutes()) +
-        ": " +
-        that.appendZero(new Date().getSeconds());
-    }, 1000);
-  },
-  beforeDestory() {
-    clearInterval(this.statusTimer);
-    this.statusTimer = null;
-  },
-  created() {
-    this.refreshTimer = setInterval(this.refreshData, 2000);
-  },
-  methods: {
-    appendZero(obj) {
-      if (obj < 10) {
-        return "0" + obj;
-      } else {
-        return obj;
-      }
-    },
-    refreshData() {
-      var bd = BackgroundData.getInstance();
-      this.hiddenDangerNum = bd.HiddenProblems.length;
-      this.defectNum = bd.Defects.length;
-      this.malfunctionNum = bd.Failure.length;
-      this.accidentNum = bd.Accidents.length;
-
-      this.hiddenDangerData = bd.HiddenProblems;
-      this.defectData = bd.Defects;
-      this.malfunctionData = bd.Failure;
-      this.accidentData = bd.Accidents;
-/*       if (this.accidentData.length <= 0) {
-        this.accidentData = [
-          { lastUpdateTime: "-", stationName: "-", alertText: "-" },
-        ];
-      }
-      if (this.hiddenDangerData.length <= 0) {
-        this.hiddenDangerData = [
-          { lastUpdateTime: "-", windturbineId: "-", alertText: "-" },
-        ];
-      }
-      if (this.defectData.length <= 0) {
-        this.defectData = [
-          { lastUpdateTime: "-", windturbineId: "-", alertText: "-" },
-        ];
-      }
-      if (this.malfunctionData.length <= 0) {
-        this.malfunctionData = [
-          { lastUpdateTime: "-", stationName: "-", alertText: "-" },
-        ];
-      } */
-
-    },
-  },
-};
-</script>
-
-<style scoped>
-:deep(.el-table__body-wrapper::-webkit-scrollbar) {
-  width: 8px;
-  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:1px solid rgb(36,36,36);
-}
-span {
-  font-size: 13px;
-}
-
-.status-bar {
-  height: 4vh;
-  background-color: #191919;
-
-  margin-bottom: 0;
-  margin-left: 0;
-  margin-right: 0;
-}
-
-.status-list {
-  position: relative;
-  display: inline-block;
-  box-sizing: border-box;
-  color: white;
-}
-
-.status-label {
-  margin-left: 10px;
-  margin-right: 10px;
-}
-
-.status-img {
-  position: relative;
-  top: 4px;
-  margin-left: 20px;
-  width: 20px;
-}
-
-.status-label.hidden-danger {
-  color: #e6d541;
-}
-
-.status-label.defect {
-  color: #e69641;
-}
-
-.status-label.malfunction {
-  color: #d541e6;
-}
-
-.status-label.accident {
-  color: #af3e3d;
-}
-</style>

src/components/TitleBar.vue

@@ -1,513 +0,0 @@
-/* 标题栏 */
-<template>
-  <div class="title-bar" onselectstart="return false">
-    <el-row>
-      <el-col :span="2">
-        <img
-          class="logo"
-          src="../assets/img/main_window/logo.png"
-          sytle="align-items"
-        />
-      </el-col>
-      <el-col :span="1">
-        <div>
-          <el-dialog
-            title="用户登录"
-            v-model="dialogVisible"
-            width="21%"
-            :before-close="handleClose"
-            :show-close="false"
-          >
-            <el-form :model="form">
-              <el-form-item :label="loginMessage"> </el-form-item>
-              <el-form-item label="用户名：" :label-width="formLabelWidth">
-                <el-input
-                  v-model="form.name"
-                  autocomplete="off"
-                  type="text"
-                  placeholder="用户名"
-                  style="width: 80%"
-                ></el-input>
-              </el-form-item>
-              <el-form-item label="密&emsp;码：" :label-width="formLabelWidth">
-                <el-input
-                  v-model="form.psd"
-                  autocomplete="off"
-                  type="text"
-                  placeholder="密&emsp;码"
-                  style="width: 80%"
-                  show-password
-                ></el-input>
-              </el-form-item>
-              <el-form-item
-                label="验证码："
-                :label-width="formLabelWidth"
-                style="display: none"
-              >
-                <el-input
-                  v-model="form.name"
-                  autocomplete="off"
-                  type="text"
-                  placeholder="验证码"
-                  style="width: 80%"
-                  ><template #append
-                    ><img
-                      src="../../src\assets\logo.png"
-                      style="width: 50px; height: 20px" /></template
-                ></el-input>
-              </el-form-item>
-            </el-form>
-            <template #footer>
-              <span class="dialog-footer">
-                <el-button
-                  @click="dialogVisible = false"
-                  style="
-                    background-color: rgb(100, 100, 100);
-                    color: rgb(220, 220, 220);
-                  "
-                  >取 消</el-button
-                >
-                <el-button type="primary" @click="login">登 录</el-button>
-              </span>
-            </template>
-          </el-dialog>
-        </div>
-      </el-col>
-
-      <el-col :span="19">
-            <!-- <el-popover
-          placement="bottom"
-          :width="1416"
-          trigger="hover"
-          :show-arrow="false"
-          offset="0"
-        >
-          <template #reference> -->
-            <div class="titleinfoall">
-              <div class="titleinfo">
-                <ul>
-                  <li>
-                    <TitleBarCard
-                      title="装机容量"
-                      unit="MW"
-                      :value="installedCapacity"
-                    ></TitleBarCard>
-                  </li>
-                </ul>
-              </div>
-              <div class="titleinfo">
-                <ul>
-                  <li>
-                    <TitleBarCard
-                      title="实时功率"
-                      unit="MW"
-                      :value="totalPower"
-                    ></TitleBarCard>
-                  </li>
-                </ul>
-              </div>
-              <div class="titleinfo">
-                <ul>
-                  <li>
-                    <TitleBarCard
-                      title="日发电量"
-                      unit="kWh"
-                      :value="dailyPowerGeneration"
-                    ></TitleBarCard>
-                  </li>
-                </ul>
-              </div>
-              <div class="titleinfo">
-                <ul>
-                  <li>
-                    <TitleBarCard
-                      title="上网电量"
-                      unit="kWh"
-                      :value="gridPower"
-                    ></TitleBarCard>
-                  </li>
-                </ul>
-              </div>
-              <div class="titleinfo">
-                <ul>
-                  <li>
-                    <TitleBarCard
-                      title="月发电量"
-                      unit="kWh"
-                      :value="monthlyPowerGeneration"
-                    ></TitleBarCard>
-                  </li>
-                </ul>
-              </div>
-              <div class="titleinfo">
-                <ul>
-                  <li>
-                    <TitleBarCard
-                      title="年发电量"
-                      unit="kWh"
-                      :value="annualPowerGeneration"
-                    ></TitleBarCard>
-                  </li>
-                </ul>
-              </div>
-              <div class="titleinfo">
-                <ul>
-                  <li>
-                    <TitleBarCard
-                      title="月利用小时"
-                      unit="小时"
-                      :value="monthlyUtilizationHours"
-                    ></TitleBarCard>
-                  </li>
-                </ul>
-              </div>
-              <div class="titleinfo">
-                <ul>
-                  <li>
-                    <TitleBarCard
-                      title="年利用小时"
-                      unit="小时"
-                      :value="annualUtilizationHours"
-                    ></TitleBarCard>
-                  </li>
-                </ul>
-              </div>
-            </div>
-          <!-- </template>
-
-          <el-table
-            :data="tableData"
-            border
-            border-color="rgb(36,36,36)"
-            :header-cell-style="{
-              background: 'Black',
-              color: 'rgb(220,220,220)',
-              'border-bottom':'solid 1px rgb(36,36,36)',
-              fontSize:'14px',
-              'padding-top':'7px',
-              'padding-bottom':'7px'
-            }"
-            :cell-style="{ background: 'Black', color: 'rgb(220,220,220)','border-bottom':'solid 1px rgb(36,36,36)',fontSize:'14px','padding-top':'5px','padding-bottom':'5px'}"
-            >
-        <el-table-column
-              align="center"
-              prop="station"
-              label="站点"
-              width="80px">
-          </el-table-column>
-        <el-table-column
-              align="center"
-              prop="date"
-              label="运行指标"
-              width="120px">
-            <el-table-column
-              align="center"
-              prop="date"
-              label="日发电量(万kwh)"
-              width="135px">
-            </el-table-column>
-            <el-table-column
-              align="center"
-              prop="name"
-              label="&ensp;平均风速(m/s)&ensp;日照强度(w/m²)"
-              width="130px">
-            </el-table-column>
-            <el-table-column
-              align="center"
-              prop="address"
-              label="实时功率(MW)"
-              width="120px">
-            </el-table-column>
-            <el-table-column
-              align="center"
-              prop="name"
-              label="AGC有功设定(MW)"
-              width="150px">
-            </el-table-column>
-            <el-table-column
-              align="center"
-              prop="name"
-              label="理论功率(MW)"
-              width="120px">
-            </el-table-column>
-            <el-table-column
-              align="center"
-              prop="name"
-              label="预测功率(MW)"
-              width="120px">
-            </el-table-column>
-        </el-table-column>
-        
-        <el-table-column
-              align="center"
-              prop="date"
-              label="发电设备状态汇总"
-              width="80px">
-            <el-table-column
-              align="center"
-              prop="date"
-              label="接入"
-              width="80px">
-            </el-table-column>
-            <el-table-column
-              align="center"
-              prop="name"
-              label="运行"
-              width="80px">
-            </el-table-column>
-            <el-table-column
-              align="center"
-              prop="address"
-              label="待机"
-              width="80px">
-            </el-table-column>
-            <el-table-column
-              align="center"
-              prop="name"
-              label="维护"
-              width="80px">
-            </el-table-column>
-            <el-table-column
-              align="center"
-              prop="name"
-              label="故障"
-              width="80px">
-            </el-table-column>
-            <el-table-column
-              align="center"
-              prop="name"
-              label="限电"
-              width="80px">
-            </el-table-column>
-            <el-table-column
-              align="center"
-              prop="name"
-              label="离线"
-              width="80px">
-            </el-table-column>
-        </el-table-column>
-          </el-table> 
-
-        </el-popover> -->
-      </el-col>
-      
-
-      <el-col :span="1">
-        <el-popover  placement="bottom" :width="150" trigger="hover" :show-arrow="false">
-          <template #reference>
-            <el-button @click="userClick" style="top: 10px; right: 70px; color: #ffffff; position: absolute;background-color:black;border:none;font-size:16px;">{{usreName}}</el-button>
-          </template>
-          <div style="background-color: #363636;">
-            <!-- <el-button class="loginoption">编&emsp;辑</el-button>
-            <br> -->
-            <el-button v-if="!isLogin" class="loginoption" @click="userClick">登&emsp;录</el-button>
-            <br v-if="!isLogin">
-            <el-button v-if="isLogin" class="loginoption" @click="logout">注&emsp;销</el-button>
-          </div>
-        </el-popover>
-
-        <!-- <div @click="userClick" style="top: 18px; right: 100px; color: #ffffff; position: absolute">{{usreName}}</div> -->
-
-        <!-- <el-button
-          v-popover:loginref
-          type="text"
-          @click="dialogVisible = true"
-          style="top:9px;right: 85px;color: #ffffff;position: absolute;">管理员</el-button> -->
-      </el-col>
-
-      <el-col :span="1">
-        <div style="margin-top: 7px; position: absolute; right: 10px">
-          <button class="closeButton" v-on:click="mainClose">×</button>
-        </div>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import TitleBarCard from "./area/mainwindow/TitleBarCard.vue";
-import BackgroundData from "../assets/script/BackgroundData";
-
-export default {
-  name: "TitleBar",
-  components: {
-    TitleBarCard
-  },
-  data() {
-    return {
-      dialogVisible: false,
-      dialogFormVisible: false,
-      isLogin:false,
-      form: {
-        name: "",
-        psd: "",
-      },
-      usreName: "未登录...",
-      loginMessage: "", // 登录提示
-      formLabelWidth: "120px",
-      totalPower: 0, // 实时功率
-      dailyPowerGeneration: 0, // 日发电量
-      gridPower: 0, // 上网电量
-      monthlyPowerGeneration: 0, // 月发电量
-      annualPowerGeneration: 0, // 年发电量
-      installedCapacity: 734, // 装机容量
-      tableData: [{
-            station:'麻黄山',
-          }, {
-            station:'牛首山',
-          }, {
-            station:'青山',
-          }, {
-            station:'石板泉',
-          }, {
-            station:'香山',
-          }, {
-            station:'风场汇总',
-          }, {
-            station:'大武口',
-          }, {
-            station:'平罗',
-          }, {
-            station:'宣和',
-          }, {
-            station:'马场湖',
-          }, {
-            station:'海子井',
-          }, {
-            station:'光伏汇总',
-          }
-          ]
-    };
-  },
-  computed: {
-    monthlyUtilizationHours: function () {
-      // 月利用小时数
-      return (
-        (this.monthlyPowerGeneration * 10) /
-        this.installedCapacity
-      ).toFixed(2);
-    },
-    annualUtilizationHours: function () {
-      // 年利用小时数
-      return (
-        (this.annualPowerGeneration * 10) /
-        this.installedCapacity
-      ).toFixed(2);
-    },
-  },
-  created() {
-    this.refreshTimer = setInterval(this.refreshData, 2000);
-  },
-  methods: {
-    handleClose(done) {
-      done();
-    },
-    mainClose() {
-      const { remote } = require("electron");
-      remote.getCurrentWindow().destroy();
-    },
-    refreshData() {
-      // todo 计算发电量的时候没有考虑光伏的，后续完善
-      var bd = BackgroundData.getInstance();
-      var val = bd.TopPoint;
-      for (var v in val) {
-        var pt = val[v];
-        if (pt.pointName == "TotalPower") {
-          this.totalPower = pt.value.toFixed(2);
-        } else if (pt.pointName == "DailyPowerGeneration") {
-          this.dailyPowerGeneration = pt.value.toFixed(2);
-        } else if (pt.pointName == "GridPower") {
-          this.gridPower = pt.value.toFixed(2);
-        } else if (pt.pointName == "MonthlyPowerGeneration") {
-          this.monthlyPowerGeneration = pt.value.toFixed(2);
-        } else if (pt.pointName == "AnnualPowerGeneration") {
-          this.annualPowerGeneration = pt.value.toFixed(2);
-        }
-      }
-    },
-
-    /* 登录 */
-    login() {
-      var bd = BackgroundData.getInstance();
-        this.loginMessage='正在登录...';
-      bd.login(this.form.name,this.form.psd,this.onLoged);
-    },
-
-    onLoged(msg){
-      if(!msg.data){
-        this.loginMessage=msg;
-        return;
-      }
-      var user = msg.data;
-      if (!user.isValid) {
-        this.loginMessage = user.message;
-        return;
-      }
-      BackgroundData.getInstance().LoginUser = user;
-      this.usreName = user.name;
-      this.dialogVisible = false;
-      this.loginMessage = "";
-      this.form.name = this.form.psd = "";
-
-      this.isLogin=true;
-    },
-
-    /* 用户点击 */
-    userClick() {
-      this.dialogVisible = true;
-    },
-
-    /* 用户注销 */
-    logout(){
-      BackgroundData.getInstance().LoginUser=null;
-      this.usreName = '未登录...';
-      this.isLogin=false;
-    }
-  },
-};
-</script>
-
-
-<style scoped>
-.loginoption{
-  font-size:16px;
-  width:150px;
-  background-color: #292929;
-  border:none;
-  color:rgb(220,220,220);
-}
-.title-bar {
-  height: 5vh;
-  background-color: #000000;
-  margin-top: 0;
-  margin-right: 0;
-  margin-left: 0;
-}
-.logo {
-  position: relative;
-  top: 32%;
-  margin-left: 10px;
-}
-.titleinfo {
-  background-color: rgb(20, 20, 20);
-  height: auto;
-  padding: 13px;
-  border-radius: 6px;
-  margin-top: 5px;
-  margin-bottom: 5px;
-  margin-left: -9px;
-}
-
-.closeButton {
-  font-size: 30px;
-  color: white;
-  background: rgb(41, 41, 41);
-  width: 44px;
-  height: 44px;
-  border-radius: 8px;
-  border: none;
-}
-.titleinfoall{
-  display: flex;;
-}
-</style>

src/components/WindturbineDetailPages.vue

@@ -0,0 +1,322 @@
+<template>
+	<el-dialog width="75%" @opened="opened()" @closed="closed()" :show-close="false" class="my-info-dialog">
+		<template #title>
+			<div v-if="!showSvg" style="margin-top:-10px;color: #FFFFFF;">风机详情</div>
+			<div v-else style="margin-top:-10px;color: #FFFFFF;">升压站</div>
+		</template>
+		<div v-if="!showSvg" class="body">
+			<table style="border-bottom: 1px solid #242424;" width="99.8%">
+				<tr>
+					<td>
+						<div class="chunkdiv">
+							<!-- <img
+                src="../../../assets/img/WindturbineDetailPages/pic_01.png"
+              /> -->
+							<div class="title">风机号：&emsp;</div>
+							<div>{{ windturbine.windturbineId }}</div>
+						</div>
+					</td>
+					<td>
+						<div class="chunkdiv">
+							<div class="title">状态：&emsp;</div>
+							<div>{{baseDate.type}}</div>
+						</div>
+					</td>
+					<td>
+						<div class="chunkdiv">
+							<div class="title">{{baseDate.windSpeed.name}}：&emsp;</div>
+							<div>{{baseDate.windSpeed.value}}{{baseDate.windSpeed.unit}}</div>
+						</div>
+					</td>
+					<td>
+						<div class="chunkdiv">
+							<div class="title">{{baseDate.power.name}}：&emsp;</div>
+							<div>{{baseDate.power.value}}{{baseDate.power.unit}}</div>
+						</div>
+					</td>
+					<td>
+						<div class="chunkdiv">
+							<div class="title">{{baseDate.generatorSpeed.name}}：&emsp;</div>
+							<div>{{baseDate.generatorSpeed.value}}{{baseDate.generatorSpeed.unit}}</div>
+						</div>
+					</td>
+				</tr>
+			</table>
+
+			<!-- <BasicInformationDetail ref="BasicInfo"></BasicInformationDetail> -->
+			<!--<div class="worning1">
+        <Worning></Worning>
+      </div>
+      <div class="worning2">
+        <Worning></Worning>
+      </div> -->
+			<BasicInformationDetail ref="BasicInfo" :types="types" :windturbine="windturbine"></BasicInformationDetail>
+			<!-- <el-tabs type="border-card" tab-position="bottom" stretch="true">
+        <el-tab-pane label="基本信息">
+          
+        </el-tab-pane>
+        <el-tab-pane label="机舱信息" disabled>
+        </el-tab-pane>
+        <el-tab-pane label="故障信息" disabled>
+        </el-tab-pane>
+        <el-tab-pane label="齿轮箱" disabled>
+        </el-tab-pane>
+        <el-tab-pane label="变桨" disabled>
+        </el-tab-pane>
+        <el-tab-pane label="偏航" disabled>
+        </el-tab-pane>
+        <el-tab-pane label="液压" disabled>
+        </el-tab-pane>
+        <el-tab-pane label="发电机" disabled>
+        </el-tab-pane>
+      </el-tabs> -->
+		</div>
+		<div v-else>
+			<nss ref="svgRef" v-if="svgWeb=='NSS_FDC'" />
+			<mhs ref="svgRef" v-else-if="svgWeb=='MHS_FDC'" />
+			<qs ref="svgRef" v-else-if="svgWeb=='QS_FDC'" />
+			<sbq ref="svgRef" v-else-if="svgWeb=='SBQ_FDC'" />
+			<xs ref="svgRef" v-else-if="svgWeb=='XS_FDC'" />
+			<pl1 ref="svgRef" v-else-if="svgWeb=='PL1_GDC'" />
+			<pl2 ref="svgRef" v-else-if="svgWeb=='PL2_GDC'" />
+			<dwk ref="svgRef" v-else-if="svgWeb=='DWK_GDC'" />
+			<mch ref="svgRef" v-else-if="svgWeb=='MCH_GDC'" />
+			<xh ref="svgRef" v-else-if="svgWeb=='XH_GDC'" />
+			<sbdl ref="svgRef" v-else-if="svgWeb=='QS3_FDC'" />
+		</div>
+	</el-dialog>
+</template>
+
+<script>
+	// import YawDetail from "./YawDetail.vue";
+	import BasicInformationDetail from "./BasicInformationDetail.vue";
+	import UniformCodes from "utils/UniformCodes";
+	import axios from 'axios';
+	import Dwk from "./BoosterStation/dwk.vue";
+	import Sbdl from "./BoosterStation/sbdl.vue";
+	import Nss from "./BoosterStation/nss.vue";
+	import Mhs from "./BoosterStation/mhs.vue";
+	import Qs from "./BoosterStation/qs.vue";
+	import Pl1 from "./BoosterStation/pl1.vue";
+	import Pl2 from "./BoosterStation/pl2.vue";
+	import Mch from "./BoosterStation/mch.vue";
+	import Xs from "./BoosterStation/xs.vue";
+	import Xh from "./BoosterStation/xh.vue";
+	import Sbq from "./BoosterStation/sbq.vue";
+	import BackgroundData from 'utils/BackgroundData'
+	// import Worning from "./warning.vue"
+	export default {
+		components: {
+			// YawDetail, 
+			BasicInformationDetail,
+			// StandAloneImg,
+			// Worning,
+			Dwk,
+			Sbdl,
+			Nss,
+			Mhs,
+			Qs,
+			Pl1,
+			Pl2,
+			Mch,
+			Xs,
+			Xh,
+			Sbq
+		},
+		props: {
+			windturbine: Object,
+			showSvg: {
+				type: Boolean,
+				default: false,
+			},
+			svgWeb: {
+				type: String,
+				default: '',
+			}
+		},
+		data() {
+			return {
+				BasicInfo: {},
+				line: "",
+				alarmTime: "",
+				alarmContent: "",
+				alarms: [],
+				count: false,
+				typeList: [{
+						type: 0,
+						name: '已经停机',
+					},
+					{
+						type: 1,
+						name: '上电',
+					},
+					{
+						type: 2,
+						name: '待机',
+					},
+					{
+						type: 3,
+						name: '启动',
+					},
+					{
+						type: 4,
+						name: '并网',
+					},
+					{
+						type: 5,
+						name: '故障',
+					},
+					{
+						type: 6,
+						name: '维护',
+					},
+					{
+						type: 7,
+						name: '离线',
+					},
+				],
+				baseDate: {
+					windSpeed: {
+						name: '',
+						num: '',
+						unit: ''
+					},
+					power: {
+						name: '',
+						num: '',
+						unit: ''
+					},
+					generatorSpeed: {
+						name: '',
+						num: '',
+						unit: ''
+					},
+				},
+				types: null,
+			};
+		},
+		created() {
+			this.UniformCodes = new UniformCodes();
+		},
+
+		methods: {
+			opened() {
+
+				this.line = "";
+				this.alarmTime = "";
+				this.alarmContent = "";
+				this.BasicInfo = this.UniformCodes.getStationInfos(this.windturbine);
+				this.BasicInfo.windturbineId = this.windturbine.windturbineId;
+				// this.dateDeal(this.BasicInfo)
+				this.$refs.BasicInfo.start(this.BasicInfo);
+
+				this.initData();
+
+				this.refreshData();
+				this.refreshTimer = setInterval(this.refreshData, 100)
+				// clearInterval(this.refreshTimer);
+			},
+			closed() {
+				// todo 切换页面的时候应该让上一个页面停止刷新数据（调用end方法）
+				this.$refs.svgRef.closed();
+				this.$refs.BasicInfo.end();
+				// this.$refs.BasicInfo.labelChange();
+				this.$emit('close');
+				//clearInterval(this.refreshTimer);
+			},
+			dateDeal(BasicInfo) {
+				let showInf = {}
+				showInf = BasicInfo.BasicInfo.filter(item => item.tag === "基本信息")[0]
+				this.baseDate.windSpeed = showInf.param.filter(item => item.name === "风速")[0]
+				this.baseDate.power = showInf.param.filter(item => item.name === "有功功率")[0]
+				this.baseDate.generatorSpeed = showInf.param.filter(item => item.name === "发电机转速")[0]
+				this.baseDate.type = showInf.param.filter(item => item.name === "状态")[0].value ? this.typeList.filter(
+						status => status.type === Number(showInf.param.filter(item => item.name === "状态")[0].value))[0]
+					.name : ''
+				console.log(this.baseDate.generatorSpeed.name);
+				this.types = Number(showInf.param.filter(item => item.name === "状态")[0].value)
+				console.log(this.types)
+			},
+			refreshData() {
+				var bg = BackgroundData.getInstance();
+				bg.initWinturbineBaseData(this.BasicInfo, this.onMessage);
+				this.dateDeal(this.BasicInfo)
+				clearInterval(this.refreshTimer);
+				this.refreshTimer = setInterval(this.refreshData, 5000)
+
+			},
+			initData() {
+				// axios.get(`http://${config.calcUrl}/windturbine/line/${this.windturbine.windturbineId}`)
+				//   .then(msg => this.line = msg.data);
+				axios.get(
+					process.env.VUE_APP_API+`/alarm/real-time-alarm?objectId=${this.windturbine.windturbineId}&pageIndex=1&pageSize=50`
+						)
+					.then(msg => {
+						var vs = msg.data;
+						if (vs.length <= 0) return;
+						this.alarmTime = BackgroundData.getInstance().formatDate(vs[0].lastUpdateTime);
+						this.alarmContent = vs[0].alertText;
+						this.alarms = msg.data;
+						this.$refs.BasicInfo.alarmd(this.alarms);
+						console.log(this.alarms)
+					})
+					.catch(err => {
+						console.log(err);
+					});
+			},
+		},
+	};
+</script>
+<style scoped>
+	/*   .titeldiv{
+    display: flex;
+    justify-content: space-around;
+  } */
+	.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;
+	}
+
+	table {
+		margin-left: 2px;
+		margin-right: 2px;
+	}
+
+	td {
+		width: 20%;
+	}
+
+	el-tabs {
+		background-color: black;
+	}
+
+	.svg {
+		height: 67vh;
+	}
+</style>

src/components/area/AlarmArea.vue

@@ -1,210 +0,0 @@
-/* 告警区 */
-<template>
-  <gy-card
-    title="告警区"
-    area-style="alarm"
-    circle-style="green"
-    content-style="25"
-  >
-    <div style="padding-left: 5px; padding-right: 5px">
-      <el-table
-        :data="values"
-        height="219px"
-        :header-cell-style="{
-          background: 'Black',
-          color: 'rgb(220,220,220)',
-          padding: '4px',
-          fontSize: '14px',
-          'border-bottom': 'solid 1px black',
-        }"
-        :cell-style="{
-          background: '#1e1e1e',
-          color: 'rgb(220,220,220)',
-          padding: '3px',
-          fontSize: '12px',
-        }"
-        @row-dblclick="itemDblclick"
-      >
-        <el-table-column
-          prop="lastUpdateTime"
-          align="center"
-          label="时间"
-          width="150"
-        >
-        </el-table-column>
-        <el-table-column
-          prop="alertText"
-          align="center"
-          label="描述"
-          width="380"
-        >
-        </el-table-column>
-        <el-table-column prop="isSelected" align="center" label="确认">
-          <template v-slot="scope">
-            <!-- <el-checkbox v-model="scope.row.isSelected" @click="itemChecked(scope.row)"></el-checkbox> -->
-            <input
-              type="checkbox"
-              v-model="scope.row.isSelected"
-              @click="itemChecked(scope.row)"
-            />
-          </template>
-          <!-- <el-checkbox v-model="isSelected"></el-checkbox> -->
-          <!-- <input type="checkbox"/> -->
-        </el-table-column>
-      </el-table>
-    </div>
-  </gy-card>
-  <WindturbineDetailPages
-    v-model="dialogVisible"
-    :windturbine="currentWindturbine"
-  ></WindturbineDetailPages>
-</template>
-
-<script>
-import MessageBridge from "../../assets/script/MessageBridge";
-import WindturbineDetailPages from "../area/windturbine/WindturbineDetailPages.vue";
-import BackgroundData from "../../assets/script/BackgroundData";
-import axios from "axios";
-import { config } from "../../config";
-
-export default {
-  name: "AlarmArea",
-  components: {
-    WindturbineDetailPages,
-  },
-  created: function () {
-    this.initData();
-  },
-  props: {},
-  data() {
-    return {
-
-      values: new Array(),
-      dialogVisible:false,
-      currentWindturbine: {},
-    };
-  },
-  methods: {
-    initData() {
-      var mb = MessageBridge.getInstance();
-      var vs = [{ key: "/topic/fault-popup", action: this.faultMessage }];
-      mb.register(vs);
-    },
-    faultMessage(msg) {
-      var val = JSON.parse(msg);
-      var sleected = {};
-      this.values.forEach((it) => {
-        if (it.isSelected) {
-          sleected[it.id] = 0;
-        }
-      });
-      this.values = new Array();
-      for (var v in val) {
-        var 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;
-        }
-        this.values.push(vl);
-      }
-      console.log(val);
-    },
-    /* 行双击 */
-    itemDblclick(row) {
-      if (row.category1 != "FJ") return;
-      this.dialogVisible = true;
-      this.currentWindturbine = row;
-    },
-    /* 报警确认 */
-    itemChecked(row) {
-      if (row.isSelected == true) {
-        row.isSelected = false;
-        return;
-      }
-      var bd = BackgroundData.getInstance();
-      if (!bd.LoginUser) {
-        this.$notify({
-          title: "请登录",
-          message: "确认报警需要先登录！",
-          type: "warning",
-          position: "bottom-right",
-          offset: 60,
-        });
-        row.isSelected = false;
-        return;
-      }
-      row.isSelected = true;
-      this.confirm(row);
-      console.log(row);
-    },
-    confirm(item) {
-      var url = `http://${config.calcUrl}/alarm/confirm?snapID=${item.snapIDString}&faultID=${item.idString}&userName=${BackgroundData.getInstance().LoginUser.name}`;
-      axios
-        .get(url)
-        .then((msg) => {
-          var mms = msg.data > 0 ? "报警确认成功！" : "报警确认出现错误!";
-          var tp = msg.data > 0 ? "success" : "error";
-          this.$notify({
-            title: "报警",
-            message: mms,
-            type: tp,
-            position: "bottom-right",
-            offset: 60,
-          });
-        })
-        .catch((err) => {
-          this.$notify({
-            title: "报警",
-            message: `报警确认出现错误：${err.message}，请重试`,
-            type: "error",
-            position: "bottom-right",
-            offset: 60,
-          });
-        });
-    },
-  },
-};
-</script>
-<style scoped>
-: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;
-}
-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>

src/components/area/CheckArea.vue

@@ -1,6 +0,0 @@
-/* 校验区 */
-<template>
-    <gy-card title="校验区" area-style="check" circle-style="green" content-style="44">
-        <div></div>
-    </gy-card>
-</template>

src/components/area/ControlArea.vue

@@ -1,399 +0,0 @@
-/* 控制区 */
-<template>
-  <gy-card
-    title="控制区"
-    area-style="control"
-    circle-style="green"
-    content-style="44"
-    @contextmenu="contextmenu"
-  >
-    <ControlMatrixCard
-      title="待启动"
-      :datas="ls.start"
-      :operateStyle="1"
-      ref="start"
-    ></ControlMatrixCard>
-    <ControlMatrixCard
-      title="待停机"
-      :datas="ls.stop"
-      :operateStyle="2"
-      ref="stop"
-    ></ControlMatrixCard>
-    <ControlMatrixCard
-      title="待维护"
-      :datas="ls.maintain"
-      :operateStyle="6"
-      ref="maintain"
-    ></ControlMatrixCard>
-    <ControlMatrixCard
-      title="待取消维护"
-      :datas="ls.unmaintain"
-      :operateStyle="8"
-      ref="unmaintain"
-    ></ControlMatrixCard>
-    <ControlMatrixCard
-      title="待复位"
-      :datas="ls.reset"
-      :operateStyle="5"
-      ref="reset"
-    ></ControlMatrixCard>
-    <el-button
-      style="
-        z-index: 2;
-        position: absolute;
-        bottom: 10px;
-        right: 10px;
-        background: #292929;
-        font-size: 15px;
-        width: 90px;
-        border: none;
-        color: rgb(220, 220, 220);
-      "
-      size="small"
-      @click="menuClicked({ type: 'send' })"
-      >发送</el-button
-    >
-  </gy-card>
-  <el-button-group
-    style="z-index: 3; position: absolute; top: 6px; left: 120px"
-  >
-    <el-button :class="buttonLeftStyle" size="mini" @click="controlClick(false)"
-      >手动</el-button
-    >
-    <el-button :class="buttonRightStyle" size="mini" @click="controlClick(true)"
-      >自动</el-button
-    >
-  </el-button-group>
-</template>
-
-<script>
-import ControlMatrixCard from "./windturbine/control/ControlMatrixCard.vue";
-import MessageBridge from "../../assets/script/MessageBridge";
-import BackgroundData from "../../assets/script/BackgroundData";
-
-export default {
-  name: "ControlArea",
-  components: {
-    ControlMatrixCard,
-  },
-  props: {},
-  computed: {
-    buttonLeftStyle: function () {
-      return this.IsAutoControl ? "button-unselected" : "button-selected";
-    },
-    buttonRightStyle: function () {
-      return this.IsAutoControl ? "button-selected" : "button-unselected";
-    },
-  },
-  created: function () {
-    this.initData();
-  },
-  data() {
-    return {
-      ls: {
-        start: { key: "待启动", value: [] },
-        stop: { key: "待停机", value: [] },
-        maintain: { key: "待维护", value: [] },
-        unmaintain: { key: "待取消维护", value: [] },
-        reset: { key: "待复位", value: [] },
-      },
-      IsAutoControl: false,
-      controlErorCodes:[
-        "控制成功",
-        "控制命令发送失败",
-        "无效的控制地址",
-        "被控设备异常",
-        "网络连接错误,检查场站通信",
-        "控制结果读取超时",
-        "未知错误",
-        "控制命令错误",
-        "收到无法识别数据",
-        "未读取到数据包",
-        "未知错误",
-        "风机操作过频繁",
-        "风机被挂牌",
-        "风机操作与风机状态不符",
-        "需要登录",
-      ],
-    };
-  },
-  methods: {
-    initData: function () {
-      var mb = MessageBridge.getInstance();
-      var vs = [{ key: "/topic/suggestion", action: this.suggestion }];
-      mb.register(vs);
-    },
-    suggestion(msg, headers) {
-      var val = JSON.parse(msg);
-      var tp = headers["operate-type"];
-      if (tp == "UnMaintain") {
-        this.updateSuggestion(this.ls.unmaintain.value, val);
-      } else if (tp == "Start") {
-        //推荐启动
-        this.updateSuggestion(this.ls.start.value, val);
-      } else if (tp == "Stop") {
-        // 推荐停机
-        this.updateSuggestion(this.ls.stop.value, val);
-      } else if (tp == "Reset") {
-        // 推荐复位
-        this.updateSuggestion(this.ls.reset.value, val);
-      } else if (tp == "Maintain") {
-        // 推荐维护
-        this.updateSuggestion(this.ls.maintain.value, val);
-      }
-    },
-
-    /* 获取推荐类型 */
-    getSuggestionType(val) {
-      if (typeof val === "undefined") return null;
-      for (var v in val) {
-        return val[v].adviceOperateStyle;
-      }
-      return null;
-    },
-
-    /* 更新推荐数据 */
-    updateSuggestion(ll, val) {
-      var lls = new Array();
-      for (var v1 in ll) {
-        var v2 = val[ll[v1]];
-        if (typeof v2 === "undefined") {
-          lls.push(v1);
-        }
-      }
-      for (var v3 in lls) {
-        ll.splice(v3, 1);
-      }
-      for (var v in val) {
-        var vl = val[v];
-        if (!ll.includes(vl.windturbineId)) {
-          ll.push(vl.windturbineId);
-        }
-      }
-    },
-
-    /* 右键菜单 */
-    contextmenu() {
-      const { remote } = require("electron");
-      var that = this;
-      const menuTemplate = [
-        {
-          label: "发送",
-          click() {
-            that.menuClicked({ type: "send" });
-          },
-        },
-        {
-          label: "挂牌",
-          submenu: [
-            {
-              label: "检修",
-              click() {
-                that.menuClicked({ type: "lock", value: "CheckLock" });
-              },
-            },
-            {
-              label: "故障维修",
-              click() {
-                that.menuClicked({ type: "lock", value: "FaultLock" });
-              },
-            },
-            {
-              label: "场内受累检修",
-              click() {
-                that.menuClicked({ type: "lock", value: "StationCheckLock" });
-              },
-            },
-            {
-              label: "场内受累故障",
-              click() {
-                that.menuClicked({ type: "lock", value: "StationFaulLock" });
-              },
-            },
-            {
-              label: "场外受累电网",
-              click() {
-                that.menuClicked({
-                  type: "lock",
-                  value: "StationPowerLineLock",
-                });
-              },
-            },
-            {
-              label: "场外受累天气",
-              click() {
-                that.menuClicked({ type: "lock", value: "StationWeatherLock" });
-              },
-            },
-          ],
-        },
-        {
-          label: "标注",
-          click() {
-            that.menuClicked({ type: "marking" });
-          },
-        },
-      ];
-      const menu = remote.Menu.buildFromTemplate(menuTemplate);
-
-      menu.popup(remote.getCurrentWindow());
-    },
-
-    menuClicked(msg) {
-      var bd = BackgroundData.getInstance();
-      if (!bd.LoginUser) {
-        this.$notify({
-          title: "请登录",
-          message: "控制风机需要先登录！",
-          type: "warning",
-          position: "bottom-right",
-          offset: 60,
-        });
-        return;
-      }
-      if (msg.type == "lock") {
-        // 挂牌
-        var los = this.getSelectedItems();
-        for (var id in los) {
-          los[id].lockType = msg.value;
-        }
-        bd.windturbineControl(
-          los,
-          true,
-          this.controlSuccess,
-          this.controlError
-        );
-      } else if (msg.type == "send") {
-        // 发送
-        var vs = this.getSelectedItems(true);
-        bd.windturbineControl(
-          vs,
-          false,
-          this.controlSuccess,
-          this.controlError
-        );
-      } else if (msg.type == "marking") {
-        // 标注
-        var vvs = this.getSelectedItems();
-        bd.marking(vvs);
-      }
-      this.clearSelected();
-    },
-
-    /* 控制成功 */
-    controlSuccess(msg) {
-      console.log(msg);
-      var mss = '';     // 信息
-      var iserror=false;// 是否有控制错误的风机
-      for(var v in msg.data){
-        var val = msg.data[v];
-        if(val.errorCode>0){
-          iserror=true;
-          mss+=`${val.windturbineId}  ${this.controlErorCodes[val.errorCode]}\n`;
-        }
-      }
-      var tp = iserror?"warning":"success";
-      var dt = iserror?0:4500;
-      if(!iserror){
-        mss="控制成功";
-      }
-
-      this.$notify({
-          title: "控制",
-          message: mss,
-          type: tp,
-          position: "bottom-right",
-          offset: 60,
-          duration: dt,
-        });
-    },
-
-    /* 控制失败 */
-    controlError(err) {
-      this.$notify({
-        title: "控制出现错误",
-        message: err.message,
-        type: "warning",
-        position: "bottom-right",
-        offset: 60,
-      });
-    },
-
-    /* 获取选中的项目，isControl：是否是控制 */
-    getSelectedItems(isControl) {
-      var ls = new Array();
-      this.$refs.start.outputSelectedItems(ls);
-      this.$refs.stop.outputSelectedItems(ls);
-      if (isControl) return ls;
-      this.$refs.maintain.outputSelectedItems(ls);
-      this.$refs.unmaintain.outputSelectedItems(ls);
-      this.$refs.reset.outputSelectedItems(ls);
-      return ls;
-    },
-
-    /* 清除所有选择 */
-    clearSelected() {
-      this.$refs.start.clearSelected();
-      this.$refs.stop.clearSelected();
-      this.$refs.maintain.clearSelected();
-      this.$refs.unmaintain.clearSelected();
-      this.$refs.reset.clearSelected();
-    },
-
-    controlClick(isAuto) {
-      var bd = BackgroundData.getInstance();
-      if (isAuto) {
-        if (!bd.LoginUser) {
-          this.$notify({
-            title: "请登录",
-            message: "切换为自动控制需要先登录！",
-            type: "warning",
-            position: "bottom-right",
-            offset: 60,
-          });
-          return;
-        }
-        this.AutoSendTimer = setInterval(this.AutoSend, 60000);
-        /* this.$message({
-          message: "已切换为自动控制",
-          type: "success",
-        }); */
-      } else {
-        /* this.$message({
-          message: "已切换为手动控制",
-          type: "success",
-        }); */
-        clearInterval(this.AutoSendTimer);
-      }
-      this.IsAutoControl = isAuto;
-    },
-
-    /* 自动发送命令 */
-    AutoSend() {
-      var ls = new Array();
-      this.$refs.start.outputAllItems(ls);
-      this.$refs.stop.outputAllItems(ls);
-      console.log("自动发送命令 " + ls.length);
-      if (ls.length <= 0) return;
-      var bd = BackgroundData.getInstance();
-      bd.windturbineControlSystem(ls, false);
-    },
-  },
-};
-</script>
-<style scoped>
-.button-selected {
-  background: black;
-  font-size: 14px;
-  width: 80px;
-  border: none;
-  color: rgb(220, 220, 220);
-}
-.button-unselected {
-  background: #202020;
-  font-size: 14px;
-  width: 80px;
-  border: none;
-  color: rgb(220, 220, 220);
-}
-</style>

src/components/area/LabelArea.vue

@@ -1,64 +0,0 @@
-/* 标注区 */
-<template>
-    <gy-card title="标注区" area-style="label" circle-style="yellow" content-style="25">
-        <div v-for="mk in values" :key="mk" @contextmenu="contextmenu(mk)" style="width:110px;margin-left:10px;margin-top:10px;display: inline-block;">
-            <img src="../../assets/img/LabelArea/flag.png" style="float:left;margin-top:5px;margin-left:18px;"/>
-            <div style="text-align:center;font-size:12px;float:right;margin-right:18px;">{{mk.title}}</div>
-            <input v-model="mk.value" style="font-size:12px;border:none;background-color:#292929;height:26px;border-radius:6px;text-align:center;outline:none;width:110px;color:rgb(220,220,220);"/>
-        </div>
-    </gy-card>
-</template>
-
-<script>
-import BackgroundData from "../../assets/script/BackgroundData";
-
-export default {
-  name: "LabelArea",
-  data() {
-    return {
-      values: new Array(),
-    };
-  },
-  created() {
-    this.refreshTimer = setInterval(this.refreshData, 1000);
-  },
-  methods: {
-    refreshData() {
-      this.values = new Array();
-      this.values = BackgroundData.getInstance().Marks;
-    },
-
-    contextmenu(mk) {
-      const { remote } = require("electron");
-      var that = this;
-      const menuTemplate = [
-        {
-          label: "删除",
-          click() {
-            that.remove(mk);
-          },
-        },
-      ];
-      const menu = remote.Menu.buildFromTemplate(menuTemplate);
-
-      menu.popup(remote.getCurrentWindow());
-    },
-
-    remove(mk) {
-      var indx = -1;
-      for (var ind in this.values) {
-        if (this.values[ind].id == mk.id) {
-          indx = ind;
-          break;
-        }
-      }
-      if (indx < 0) return;
-      this.values.splice(indx, 1);
-      BackgroundData.getInstance().removeMarked(mk);
-    },
-  },
-};
-</script>
-
-<style scoped>
-</style>

src/components/area/ProblemArea.vue

@@ -1,147 +0,0 @@
-/* 问题区 */
-<template>
-  <gy-card
-    title="问题区"
-    area-style="problem"
-    circle-style="green"
-    content-style="89"
-    @parentRun="run"
-    @contextmenu="contextmenu"
-  >
-    <ProblemMatrixCard title="故障" :type="5" ref="malfunction"></ProblemMatrixCard>
-    <ProblemMatrixCard title="维护" :type="6" ref="maintain"></ProblemMatrixCard>
-    <ProblemMatrixCard title="离线" :type="7" ref="offline"></ProblemMatrixCard>
-    <ProblemMatrixCard title="挂牌" :type="-1" ref="lock"></ProblemMatrixCard>
-  </gy-card>
-</template>
-
-<script>
-import ProblemMatrixCard from "./windturbine/problem/ProblemMatrixCard.vue";
-import BackgroundData from "../../assets/script/BackgroundData";
-
-export default {
-  name: "ProblemArea",
-  components: {
-    ProblemMatrixCard,
-  },
-  props: {},
-  data() {
-    return {
-      ls: {
-        maintain: { key: "维护", value: [] },
-        malfunction: { key: "故障", value: [] },
-        offline: { key: "离线", value: [] },
-        lockd: { key: "挂牌", value: [] },
-      },
-    };
-  },
-  computed: {},
-  created: function () {
-    
-  },
-  methods: {
-    /* 右键菜单 */
-    contextmenu() {
-      const { remote } = require("electron");
-      var that = this;
-      const menuTemplate = [
-        {
-          label: "标注",
-          click() {
-            that.menuClicked({ type: "marking" });
-          },
-        },
-        {
-          label: "挂牌",
-          submenu: [
-            {
-              label: "检修",
-              click() {
-                that.menuClicked({ type: "lock", value: "CheckLock" });
-              },
-            },
-            {
-              label: "故障维修",
-              click() {
-                that.menuClicked({ type: "lock", value: "FaultLock" });
-              },
-            },
-            {
-              label: "场内受累检修",
-              click() {
-                that.menuClicked({ type: "lock", value: "StationCheckLock" });
-              },
-            },
-            {
-              label: "场内受累故障",
-              click() {
-                that.menuClicked({ type: "lock", value: "StationFaulLock" });
-              },
-            },
-            {
-              label: "场外受累电网",
-              click() {
-                that.menuClicked({ type: "lock", value: "StationPowerLineLock" });
-              },
-            },
-            {
-              label: "场外受累天气",
-              click() {
-                that.menuClicked({ type: "lock", value: "StationWeatherLock" });
-              },
-            },
-          ],
-        },
-        {
-          label: "取消挂牌",
-          click() {
-            that.menuClicked({ type: "lock",value:"UnLock" });
-          },
-        },
-      ];
-      const menu = remote.Menu.buildFromTemplate(menuTemplate);
-
-      menu.popup(remote.getCurrentWindow());
-    },
-
-    menuClicked(msg) {
-      var bd = BackgroundData.getInstance();
-      if (!bd.LoginUser) {
-        bd.showdialog("提示", "请登录：", "在控制之前需要先登录！");
-        return;
-      }
-      if (msg.type == "lock") {
-        // 挂牌
-        var los = this.getSelectedItems();
-        for(var id in los){
-          los[id].lockType=msg.value;
-        }
-        bd.windturbineControl(los,true);
-      } else if (msg.type == "marking") {
-        // 标注
-        var vs = this.getSelectedItems();
-        bd.marking(vs);
-      }
-      this.clearSelected();
-    },
-
-    /* 获取选中的项目 */
-    getSelectedItems(){
-      var ls = new Array();
-      this.$refs.malfunction.outputSelectedItems(ls);
-      this.$refs.maintain.outputSelectedItems(ls);
-      this.$refs.offline.outputSelectedItems(ls);
-      this.$refs.lock.outputSelectedItems(ls);
-      return ls;
-    },
-    
-    /* 清除所有选择 */
-    clearSelected(){
-      this.$refs.malfunction.clearSelected();
-      this.$refs.maintain.clearSelected();
-      this.$refs.offline.clearSelected();
-      this.$refs.lock.clearSelected();
-    },
-  },
-};
-</script>

src/components/area/RecommendedArea.vue

@@ -1,66 +0,0 @@
-/* 推荐区 */
-<template>
-  <gy-card
-    title="推荐区"
-    area-style="recommended"
-    circle-style="green"
-    content-style="37"
-  >
-  <div style="display: flex;justify-content: flex-start;flex-wrap: wrap;">
-  <table v-for="vl in values" :key="vl">
-      <tr>{{vl.stationName}}</tr>
-      <tr>{{vl.content}}</tr>
-      <tr>{{vl.createTime}}</tr>
-  </table>  
-  </div>
-  </gy-card>
-</template>
-
-<script>
-import BackgroundData from "../../assets/script/BackgroundData";
-export default {
-  name: "RecommendedArea",
-  props: ["datas"],
-  data() {
-    return {
-      values: new Array(),
-    };
-  },
-  created() {
-    this.initData();
-  },
-  mounted() {},
-  watch: {},
-  methods: {
-    initData() {
-      setInterval(this.refreshData, 2000);
-    },
-    refreshData() {
-      var bd = BackgroundData.getInstance();
-      var ll = new Array();
-      for (var v in bd.Recommends) {
-        if (bd.Recommends[v].isActive) {
-          ll.push(bd.Recommends[v]);
-        }
-      }
-      this.values = ll;
-    },
-  },
-};
-</script>
-<style scoped>
-table{
-  background-image: url("../../assets/img/RecommendedArea/guznzhu_bg_01.png");
-  text-align: center;
-  font-size:12px;
-  width: 110px;
-  height: 110px;
-  background-size:110px;
-  margin-left: 10px;
-  margin-top: 10px;
-  padding-top: 10px;
-  background-repeat:no-repeat;
-  
-}
-</style>
-

src/components/area/gy-card.vue

@@ -1,383 +0,0 @@
-/* 自定义tabs */
-<template>
-    <transition>
-        <div :class='areaClass' @mouseover="hover = false"
-             @mouseleave="hover = false" onselectstart="return false">
-            <div :class="headerClass"> <!-- @dblclick="gyCardDbClick" -->
-                <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>
-</template>
-
-<script>
-    /**
-     * todo 拖动
-     * todo 控制区
-     *
-     * 动态值:
-     * 1. gy-card-area-label中的 height,margin-top
-     * 2. gy-card-circle-yellow中的颜色
-     * 3. gy-card-content-25 中的高度
-     *
-     * 使用事例:
-     * <gy-card title="校验区" area-style="check" circle-style="green" content-style="44">
-     * <div>动态内容</div>
-     * </gy-card>
-     */
-    export default {
-        name: 'gy-card',
-        emits: ["parentRun"],
-        props: {
-            title: {
-                type: String,
-                default: '校验区',
-                required: true
-            },
-            areaStyle: {
-                type: String,
-                default: 'check',
-                required: true
-            },
-            circleStyle: {
-                type: String,
-                default: 'green',
-                required: true
-            },
-            contentStyle: {
-                type: String,
-                default: '44',
-                required: true
-            }
-        },
-        data() {
-            return {
-                hover: false,
-                big: false
-            }
-        },
-        computed: {
-            areaClass() {
-                if (this.big) {
-                    return `gy-card-area-big`;
-                } else {
-                    return `gy-card-area-${this.areaStyle}`;
-                }
-            },
-            circleClass() {
-                return `gy-card-circle gy-card-circle-${this.circleStyle}`;
-            },
-            contentClass() {
-                if (this.big) {
-                    return `gy-card-content-big`;
-                } else {
-                    return `gy-card-content-${this.contentStyle}`;
-                }
-            },
-            headerClass() {
-                if (this.hover) {
-                    return `gy-card-header-hover`;
-                } else {
-                    return `gy-card-header`;
-                }
-            }
-        },
-        methods: {
-            /* gyCardDbClick() {
-                let big = this.big
-                if (big) {
-                    this.big = false
-                } else {
-                    this.big = false
-                }
-            }, */
-        }
-    }
-</script>
-
-<style scoped="scoped">
-    .gy-card-header {
-        position: relative;
-        height: 40px;
-        background-color: #292929;
-        color: white;
-        box-sizing: border-box;
-    }
-
-    .gy-card-content-89 {
-        position: relative;
-        height: calc(89vh - 50px);
-        background-color: #000000;
-        color: white;
-        box-sizing: border-box;
-        border-radius: 7px;
-    }
-
-    .gy-card-content-44 {
-        position: relative;
-        height: calc(44vh - 50px);
-        background-color: #000000;
-        color: white;
-        box-sizing: border-box;
-        border-radius: 7px;
-    }
-
-    .gy-card-content-37 {
-        position: relative;
-        height: calc(37vh - 50px);
-        background-color: #000000;
-        color: white;
-        box-sizing: border-box;
-        border-radius: 7px;
-    }
-
-    .gy-card-content-25 {
-        position: relative;
-        height: calc(25vh - 50px);
-        background-color: #000000;
-        color: white;
-        box-sizing: border-box;
-        border-radius: 7px;
-    }
-
-    .gy-card-circle{
-        position: relative;
-        top: 7px;
-        display: inline-block;
-        width: 7px;
-        height: 7px;
-        -moz-border-radius: 50%;
-        -webkit-border-radius: 50%;
-        border-radius: 50%;
-    }
-
-    .gy-card-circle-green {
-        background-color: #008000;
-    }
-
-    .gy-card-circle-yellow {
-        background-color: #ffff00;
-    }
-
-    .gy-card-title {
-        position: relative;
-        top: 10px;
-        left: 10px;
-    }
-
-    .gy-card-decoration01 {
-        position: absolute;
-        right: 80px;
-    }
-
-    .gy-card-decoration02 {
-        position: absolute;
-        top: 20px;
-        right: 20px;
-    }
-
-    .gy-card-area-problem {
-        position: relative;
-        height: 89vh;
-        background-color: #292929;
-        border-radius: 7px;
-        margin: 0px;
-        padding-top: 0;
-        padding-left: 10px;
-        padding-right: 10px;
-        padding-bottom: 10px;
-        box-sizing: border-box;
-    }
-
-    .gy-card-area-alarm {
-        position: relative;
-        height: 25vh;
-        margin-top: 10px;
-        background-color: #292929;
-        border-radius: 7px;
-        padding-left: 10px;
-        padding-right: 10px;
-        padding-bottom: 10px;
-        box-sizing: border-box;
-    }
-
-    .gy-card-area-check {
-        position: relative;
-        height: 44vh;
-        background-color: #292929;
-        border-radius: 7px;
-        margin-top: 10px;
-        padding-top: 0;
-        padding-left: 10px;
-        padding-right: 10px;
-        padding-bottom: 10px;
-        box-sizing: border-box;
-    }
-
-    .gy-card-area-control {
-        position: relative;
-        width: 100%;
-        height: 44vh;
-        background-color: #292929;
-        border-radius: 7px;
-        margin: 0px;
-        padding-top: 0;
-        padding-left: 10px;
-        padding-right: 10px;
-        padding-bottom: 10px;
-        box-sizing: border-box;
-    }
-
-    .gy-card-area-label {
-        position: relative;
-        height: 25vh;
-        margin-top: 10px;
-        background-color: #292929;
-        border-radius: 7px;
-        padding-left: 10px;
-        padding-right: 10px;
-        padding-bottom: 10px;
-        box-sizing: border-box;
-    }
-
-    .gy-card-area-recommended {
-        position: relative;
-        height: 37vh;
-        background-color: #292929;
-        border-radius: 7px;
-        padding-left: 10px;
-        padding-right: 10px;
-        padding-bottom: 10px;
-        box-sizing: border-box;
-    }
-
-    .gy-card-header-hover {
-        position: relative;
-        height: 40px;
-        background-color: #292929;
-        color: white;
-        box-sizing: border-box;
-    }
-
-    .gy-card-area-problem:hover {
-        position: relative;
-        height: 89vh;
-        background-color: #292929;
-        border-radius: 7px;
-        margin: 0px;
-        padding-top: 0;
-        padding-left: 10px;
-        padding-right: 10px;
-        padding-bottom: 10px;
-        box-sizing: border-box;
-    }
-
-    .gy-card-area-alarm:hover {
-        position: relative;
-        height: 25vh;
-        margin-top: 10px;
-        background-color: #292929;
-        border-radius: 7px;
-        padding-left: 10px;
-        padding-right: 10px;
-        padding-bottom: 10px;
-        box-sizing: border-box;
-    }
-
-/*     .gy-card-area-check:hover {
-        position: relative;
-        height: 44vh;
-        background-color: #292929;
-        border-radius: 7px;
-        margin: 0px;
-        padding-top: 0;
-        padding-left: 10px;
-        padding-right: 10px;
-        padding-bottom: 10px;
-        box-sizing: border-box;
-    }
- */
-/*     .gy-card-area-control:hover {
-        position: relative;
-        width: 100%;
-        height: 44vh;
-        background-color: #292929;
-        border-radius: 7px;
-        margin-top: 10px;
-        padding-top: 0;
-        padding-left: 10px;
-        padding-right: 10px;
-        padding-bottom: 10px;
-        box-sizing: border-box;
-    } */
-
-    .gy-card-area-label:hover {
-        position: relative;
-        height: 25vh;
-        margin-top: 10px;
-        background-color: #292929;
-        border-radius: 7px;
-        padding-left: 10px;
-        padding-right: 10px;
-        padding-bottom: 10px;
-        box-sizing: border-box;
-    }
-
-    .gy-card-area-recommended:hover {
-        position: relative;
-        height: 37vh;
-        background-color: #292929;
-        border-radius: 7px;
-        padding-left: 10px;
-        padding-right: 10px;
-        padding-bottom: 10px;
-        box-sizing: border-box;
-    }
-
-
-    .gy-card-area-big {
-        position: fixed;
-        top: 0px;
-        left: 0px;
-        width: 100vw;
-        height: 100vh;
-        background-color: #292929;
-        border-radius: 7px;
-        margin: 0px;
-        padding-top: 0;
-        padding-left: 10px;
-        padding-right: 10px;
-        padding-bottom: 10px;
-        box-sizing: border-box;
-        z-index: 900;
-    }
-
-    .gy-card-content-big {
-        position: relative;
-        height: calc(100vh - 50px);
-        background-color: #000000;
-        color: white;
-        box-sizing: border-box;
-        border-radius: 7px;
-    }
-
-    .el-scrollbar__wrap {
-        overflow: scroll;
-        width: 110%;
-        height: 120%;
-    }
-
-    ::-webkit-scrollbar {
-        width: 0;
-        height: 0;
-    }
-
-</style>

src/components/area/index.js

@@ -1,6 +0,0 @@
-import gyCard from './gy-card'
-
-gyCard.install = function (Vue) {
-    Vue.component(gyCard.name, gyCard)
-}
-export default gyCard

src/components/area/windturbine/BasicInformationDetail.vue

@@ -1,252 +0,0 @@
-<template>
-  <div class="firstdiv">
-    <div v-for="(item, index) in warnList" :key="index">
-      <div :class="'worning' + item.type">
-        <Worning :worn="item.alertText"></Worning>
-      </div>
-    </div>
-    <img style="float: left; margin-left: 40px; margin-top: 90px;width:50vh;height:25vh;"
-      src="../../../assets/img/WindturbineDetailPages/变桨.png" object-fit="fill" />
-    <div class="twodiv">
-      <table>
-        <tr>
-          <th>温度信息</th>
-        </tr>
-        <tr v-for="itm in temperatureInfo" :key="itm">
-          <td>{{ itm.name }}</td>
-          <td>{{ itm.value }}</td>
-          <td>{{ itm.unit }}</td>
-        </tr>
-      </table>
-      <table v-if="pitchInfo.length > 0">
-        <tr>
-          <th>变桨信息</th>
-        </tr>
-        <tr v-for="itm in pitchInfo" :key="itm">
-          <td>{{ itm.name }}</td>
-          <td>{{ itm.value }}</td>
-          <td>{{ itm.unit }}</td>
-        </tr>
-      </table>
-    </div>
-    <div class="onediv">
-      <table>
-        <tr>
-          <th>基本信息</th>
-        </tr>
-        <tr v-for="itm in generalInfo" :key="itm">
-          <td>{{ itm.name }}</td>
-          <td>{{ itm.value }}</td>
-          <td>{{ itm.unit }}</td>
-        </tr>
-      </table>
-      <table>
-        <tr>
-          <th>电网信息</th>
-        </tr>
-        <tr v-for="itm in powerGridInfo" :key="itm">
-          <td>{{ itm.name }}</td>
-          <td>{{ itm.value }}</td>
-          <td>{{ itm.unit }}</td>
-        </tr>
-      </table>
-    </div>
-    <!-- <div>{{alarms[0].alertText}}</div> -->
-  </div>
-</template>
-
-<script>
-  import BackgroundData from "../../../assets/script/BackgroundData";
-  import Worning from "./warning.vue"
-  export default {
-    name: "BasicInformationDetail",
-    components: {
-      Worning,
-    },
-    props: {
-      alarms: Array,
-    },
-    mounted() {
-      this.show()
-    },
-    data() {
-      return {
-        warnList: [],
-        BasicInfo: {},
-        temperatureInfo: new Array() /* 温度信息 */,
-        pitchInfo: new Array() /* 变桨信息 */,
-        generalInfo: new Array() /* 基本信息 */,
-        powerGridInfo: new Array() /* 电网信息 */,
-      };
-    },
-    methods: {
-      show() {
-        // axios.get(`http://${config.calcUrl}/alarm/real-time-alarm?objectId=${this.windturbine.windturbineId}&pageIndex=1&pageSize=50`)
-        // .then(msg=>{
-        //   var vs = msg.data;
-        //   if(vs.length<=0)return;
-        //   this.alarmTime = BackgroundData.getInstance().formatDate(vs[0].lastUpdateTime);
-        //   this.alarmContent = vs[0].alertText;
-        //   this.alarms = msg.data;
-        //   console.log(this.alarms)
-        // })
-      },
-      start(bi) {
-        this.BasicInfo = bi;
-        this.bindData();
-
-        this.refreshData();
-        this.refreshTimer = setInterval(this.refreshData, 3000);
-      },
-      end() {
-        clearInterval(this.refreshTimer);
-      },
-      alarmd(bi) {
-        let dataList = []
-        let warnList = []
-        let date1 = {
-          type: 1,
-          alertText :[]
-        }
-        let date2 = {
-          type: 2,
-          alertText :[]
-        }
-        let date3 = {
-          type: 3,
-          alertText :[]
-        }
-        let date4 = {
-          type: 4,
-          alertText :[]
-        }
-        let date5 = {
-          type: 5,
-          alertText :[]
-        }
-        bi.forEach(item => {
-          let data = {}
-          data.alertText = item.alertText
-          if (item.alertText.indexOf("变桨") >= 0) {
-            data.type = 1
-          } else if (item.alertText.indexOf("偏航") >= 0) {
-            data.type = 5
-          }
-          else if (item.alertText.indexOf("发电机") >= 0) {
-            data.type = 3
-          }
-          else if (item.alertText.indexOf("齿轮箱") >= 0) {
-            data.type = 2
-          }
-          else if (item.alertText.indexOf("液压") >= 0) {
-            data.type = 4
-          }
-          data.type ? warnList.push(data) : ''
-        })
-        warnList.forEach(item =>{
-          switch (item.type) {
-            case 1:
-              date1.alertText.push(item.alertText)
-              break;
-            case 2:
-              date2.alertText.push(item.alertText)
-              break;
-            case 3:
-              date3.alertText.push(item.alertText)
-              break;
-            case 4:
-              date4.alertText.push(item.alertText)
-              break;
-            case 5:
-              date5.alertText.push(item.alertText)
-              break;
-          }
-        })
-        date1.alertText.length>0?dataList.push(date1):''
-        date2.alertText.length>0?dataList.push(date2):''
-        date3.alertText.length>0?dataList.push(date3):''
-        date4.alertText.length>0?dataList.push(date4):''
-        date5.alertText.length>0?dataList.push(date5):''
-        this.warnList = dataList
-      },
-      /* 刷新数据 */
-      refreshData() {
-        var bg = BackgroundData.getInstance();
-        bg.initWinturbineBaseData(this.BasicInfo, this.onMessage);
-      },
-
-      /* 获得数据 */
-      onMessage(msg) {
-        this.BasicInfo.BasicInfo.forEach((element) => {
-          element.param.forEach((im) => {
-            var val = msg[im.code];
-            if (typeof val !== "undefined") {
-              if (im.unit == "万度") {
-                im.value = (val.doubleValue / 10000).toFixed(2);
-              } else {
-                im.value = val.doubleValue.toFixed(2);
-              }
-            }
-          });
-        });
-        console.log(msg);
-      },
-
-      bindData() {
-        this.BasicInfo.BasicInfo.forEach((element) => {
-          if (element.tag == "基本信息") {
-            this.generalInfo = element.param;
-          } else if (element.tag == "温度信息") {
-            this.temperatureInfo = element.param;
-          } else if (element.tag == "电网信息") {
-            this.powerGridInfo = element.param;
-          } else if (element.tag == "桨叶信息") {
-            this.pitchInfo = element.param;
-          }
-        });
-      },
-    },
-  };
-</script>
-
-<style scoped>
-.firstdiv {
-  height: 50vh;
-}
-.onediv {
-  float: right;
-  margin-right: 30px;
-}
-.twodiv {
-  float: right;
-  margin-right: 30px;
-}
-td:nth-child(1) {
-  height: 25px;
-  width: 130px;
-  text-align: right;
-  color: rgb(220, 220, 220);
-}
-td:nth-child(2) {
-  width: 78px;
-  text-align: right;
-  color: rgb(5, 176, 71);
-}
-td:nth-child(3) {
-  text-align: center;
-  width: 30px;
-  color: rgb(220, 220, 220);
-}
-tr:nth-child(1) {
-  font-size: 20px;
-  width: 90px;
-  text-align: right;
-  color: rgb(220, 220, 220);
-}
-th {
-  height: 40px;
-}
-table{
-  margin-top: 30px;
-}
-</style>

src/components/area/windturbine/MatrixCard.vue

@@ -1,62 +0,0 @@
-<template>
-  <div class="main" v-if="values.length > 0">
-    <div style="font-size:15px">{{ title }}</div>
-    <div class="content">
-      <WindturbineMinCard
-        v-for="vs in values"
-        :key="vs"
-        :status="vs.status"
-        :power="vs.power"
-        :windSpeed="vs.windSpeed"
-        :rollSpeed="vs.rollSpeed"
-        :windturbineId="vs.windturbineId"
-      ></WindturbineMinCard>
-    </div>
-    <div class="bottom"></div>
-  </div>
-</template>
-
-<script>
-import WindturbineMinCard from "./WindturbineMinCard.vue";
-export default {
-  name: "MatrixCard",
-  props: ["title", "datas"],
-  data() {
-    return {
-      values: [],
-    };
-  },
-
-  mounted() {
-    this.values = this.datas.value || [];
-  },
-
-  components: {
-    WindturbineMinCard,
-  },
-
-  watch: {
-    datas(val) {
-      this.values = val.value;
-    },
-  },
-};
-</script>
-
-<style scoped>
-.content {
-  display: grid;
-  grid-template-columns: repeat(5, 20%);
-}
-.bottom {
-  background-color: #292929;
-  width: 100%;
-  height: 2px;
-  margin-top: 5px;
-}
-.main {
-  margin-bottom: 15px;
-  margin-left: 5px;
-  margin-right: 5px;
-}
-</style>

src/components/area/windturbine/WindturbineDetailPages.vue

@@ -1,175 +0,0 @@
-<template>
-  <el-dialog
-    width="65%"
-    @opened="opened()"
-    @closed="closed()"
-    :show-close="false"
-  >
-  <template #title>
-    <div style="margin-top:-10px;">风机详情</div>
-  </template>
-    
-    <div style="background-color: black;margin-top:-30px;margin-left:-10px;margin-right:-10px;margin-bottom:-10px;">
-      <table width="99.8%">
-        <tr>
-          <td>
-            <div class="chunkdiv">
-              <img
-                src="../../../assets/img/WindturbineDetailPages/pic_01.png"
-              />
-              <div>&emsp;</div>
-              <div>{{ windturbine.windturbineId }}</div>
-            </div>
-          </td>
-          <td>
-            <div class="chunkdiv">
-              <div>所属线路&emsp;</div>
-              <div>{{line}}</div>
-            </div>
-          </td>
-          <td>
-            <div class="chunkdiv">
-              <div>机型&emsp;</div>
-              <div>{{windturbine.modelId}}</div>
-            </div>
-          </td>
-          <td>
-            <div class="chunkdiv">
-              <div>告警时间：</div>
-              <div>{{alarmTime}}</div>
-            </div>
-          </td>
-          <td>
-            <div class="chunkdiv">
-              <div>告警内容：</div>
-              <div>{{alarmContent}}</div>
-            </div>
-          </td>
-        </tr>
-      </table>
-
-      <BasicInformationDetail ref="BasicInfo"></BasicInformationDetail>
-      <!--<div class="worning1">
-        <Worning></Worning>
-      </div>
-      <div class="worning2">
-        <Worning></Worning>
-      </div>
-      <el-tabs type="border-card" tab-position="bottom" stretch="true">
-        <el-tab-pane label="基本信息">
-          <BasicInformationDetail ref="BasicInfo" :alarms="alarms"></BasicInformationDetail>
-        </el-tab-pane>
-        <el-tab-pane label="机舱信息" disabled>
-        </el-tab-pane>
-        <el-tab-pane label="故障信息" disabled>
-        </el-tab-pane>
-        <el-tab-pane label="齿轮箱" disabled>
-        </el-tab-pane>
-        <el-tab-pane label="变桨" disabled>
-        </el-tab-pane>
-        <el-tab-pane label="偏航" disabled>
-        </el-tab-pane>
-        <el-tab-pane label="液压" disabled>
-        </el-tab-pane>
-        <el-tab-pane label="发电机" disabled>
-        </el-tab-pane>
-      </el-tabs> -->
-    </div>
-  </el-dialog>
-</template>
-
-<script>
-/* import YawDetail from "./YawDetail.vue"; */
-import BasicInformationDetail from "./BasicInformationDetail.vue";
-import UniformCodes from "../../../assets/script/UniformCodes";
-import {config} from '../../../config';
-import axios from 'axios';
-import BackgroundData from "../../../assets/script/BackgroundData";
-// import Worning from "./warning.vue"
-export default {
-  components: {
-    BasicInformationDetail,
-    // Worning,
-  },
-  props: {
-    windturbine: Object,
-  },
-  data() {
-    return {
-      BasicInfo: {},
-      line:"",
-      alarmTime:"",
-      alarmContent:"",
-      alarms:[],
-    };
-  },
-  created() {
-    this.UniformCodes = new UniformCodes();
-  },
-  methods: {
-    opened() {
-      this.line="";
-      this.alarmTime="";
-      this.alarmContent="";
-      this.BasicInfo = this.UniformCodes.getStationInfos(this.windturbine);
-      this.BasicInfo.windturbineId = this.windturbine.windturbineId;
-      
-      this.$refs.BasicInfo.start(this.BasicInfo);
-
-      this.initData();
-
-      //this.refreshData();
-      //this.refreshTimer = setInterval(this.refreshData, 3000);
-    },
-    closed() {
-      // todo 切换页面的时候应该让上一个页面停止刷新数据（调用end方法）
-      this.$refs.BasicInfo.end();
-
-      //clearInterval(this.refreshTimer);
-    },
-    initData(){
-      axios.get(`http://${config.calcUrl}/windturbine/line/${this.windturbine.windturbineId}`)
-      .then(msg=>this.line=msg.data);
-      axios.get(`http://${config.calcUrl}/alarm/real-time-alarm?objectId=${this.windturbine.windturbineId}&pageIndex=1&pageSize=50`)
-      .then(msg=>{
-        var vs = msg.data;
-        if(vs.length<=0)return;
-        this.alarmTime = BackgroundData.getInstance().formatDate(vs[0].lastUpdateTime);
-        this.alarmContent = vs[0].alertText;
-        this.alarms = msg.data;
-        this.$refs.BasicInfo.alarmd(this.alarms);
-        console.log(this.alarms)
-      })
-      .catch(err=>{
-        console.log(err);
-      });
-    }
-  },
-};
-</script>
-<style scoped>
-/*   .titeldiv{
-    display: flex;
-    justify-content: space-around;
-  } */
-.chunkdiv {
-  display: flex;
-  justify-content: center;
-  background-color: #363636;
-  margin: 1px;
-  padding: 2px;
-  color: rgb(220, 220, 220);
-  overflow:hidden;
-  white-space:nowrap;
-}
-table {
-  margin-left: 2px;
-  margin-right: 2px;
-}
-td {
-  width: 20%;
-}
-el-tabs {
-  background-color: black;
-}
-</style>

src/components/area/windturbine/WindturbineMinCard.vue

@@ -1,341 +0,0 @@
-/* 风机矩阵小卡片 */
-<template>
-    <div :class="cardStyle" @click="sigSelectClick" @dblclick="dbcDetailPages">
-        <el-row>
-            <div :class="leftStyle">
-                <el-row>
-                    <div :class="title1Style">{{stationName}}</div>
-                </el-row>
-                <el-row>
-                    <div :class="title2Style">{{windturbineName}}</div>
-                </el-row>
-            </div>
-            <div :class="rightStyle">
-                <el-row>
-                    <div :class="contentStyle" style="font-size: 12px;position: absolute;right: 5px;">{{power.toFixed(2)}} kw</div>
-                </el-row>
-                <el-row>
-                    <div :class="contentStyle" style="font-size: 12px;position: absolute;right: 5px;top:15px;">{{windSpeed.toFixed(2)}} m/s</div>
-                </el-row>
-                <el-row>
-                    <div :class="contentStyle" style="font-size: 12px;position: absolute;right: 5px;top:30px;">{{rollSpeed.toFixed(2)}} rpm</div>
-                </el-row>
-            </div>
-        </el-row>
-        
-    </div>
-</template>
-
-<script>
-
-
-    export default {
-        name: "WindturbineMinCard",
-        props: {
-            status: Number,
-            power:Number,
-            windSpeed:Number,
-            rollSpeed:Number,
-            windturbineId:String,
-        },
-        data() {
-            return {
-                sigSelect: false
-            }
-        },
-        components: {
-            
-        },
-        computed: {
-            cardStyle: function () {
-                if (this.sigSelect) {
-                    return "card-style card-style-select-" + this.status;
-                } else {
-                    return "card-style card-style-" + this.status;
-                }
-            },
-            leftStyle: function () {
-                if (this.sigSelect) {
-                    return "card-style-left card-left-style-select-" + this.status;
-                } else {
-                    return "card-style-left card-left-style-" + this.status;
-                }
-            },
-            rightStyle: function () {
-                if (this.sigSelect) {
-                    return "card-right-style card-right-style-select-" + this.status;
-                } else {
-                    return "card-right-style card-right-style-" + this.status;
-                }
-            },
-            title1Style: function () {
-                return "card-title1-style card-title1-style-" + this.status;
-            },
-            title2Style: function () {
-                return "card-title2-style card-title2-style-" + this.status;
-            },
-            contentStyle: function () {
-                return "card-content-style-" + this.status;
-            },
-            stationName:function () {
-                return this.windturbineId.slice(0,2);
-            },
-            windturbineName:function () {
-                var vs = this.windturbineId.split('_');
-                return vs[1];
-            }
-        },
-        methods: {
-            sigSelectClick() {
-                let sigSelect = this.sigSelect
-                if (sigSelect) {
-                    this.sigSelect = false
-                } else {
-                    this.sigSelect = true
-                }
-                // todo retun id,父组件中接收id
-            }
-        }
-    };
-</script>
-<style scoped>
-    .card-style{
-        position: relative;
-        width: 116px;
-        height: 50px;
-        box-sizing: border-box;
-        display: inline-block;
-        margin-top: 5px;
-    }
-    /* 卡片整体样式(边框和整体背景) */
-    /* 停机 */
-    .card-style-0 {
-        border: 2px solid rgb(255, 255, 255);
-        background-color: rgba(255, 255, 255, 0.15);
-    }
-    /* 上电 */
-    .card-style-1 {
-        border: 2px solid rgb(197, 48, 72);
-        background-color: rgba(197, 48, 72, 0.15);
-    }
-    /* 待机 */
-    .card-style-2 {
-        border: 2px solid rgb(05, 187, 76);
-        background-color: rgba(05, 187, 76, 0.15);
-    }
-    /* 启动 */
-    .card-style-3 {
-        border: 2px solid rgb(05, 187, 76);
-        background-color: rgba(05, 187, 76, 0.15);
-    }
-    /* 并网 */
-    .card-style-4 {
-        border: 2px solid rgb(75, 85, 174);
-        background-color: rgba(75, 85, 174, 0.15);
-    }
-    /* 故障 */
-    .card-style-5 {
-        border: 2px solid rgba(186, 50, 55);
-        background-color: rgba(186, 50, 55, 0.15);
-    }
-    /* 维护 */
-    .card-style-6 {
-        border: 2px solid rgb(225, 125, 36);
-        background-color: rgba(225, 125, 36, 0.15);
-    }
-    /* 离线 */
-    .card-style-7 {
-        border: 2px solid rgb(96, 103, 105);
-        background-color: rgba(96, 103, 105, 0.15);
-    }
-    /* 卡片整体样式-选择 */
-    .card-style-select-0 {
-        border: 2px solid rgba(255, 255, 255, 0.5);
-        background-color: rgba(255, 255, 255, 0.1);
-    }
-    .card-style-select-1 {
-        border: 2px solid rgba(197, 48, 72, 0.5);
-        background-color: rgba(197, 48, 72, 0.1);
-    }
-    .card-style-select-2 {
-        border: 2px solid rgba(05, 187, 76, 0.5);
-        background-color: rgba(05, 187, 76, 0.1);
-    }
-    .card-style-select-3 {
-        border: 2px solid rgba(05, 187, 76, 0.5);
-        background-color: rgba(05, 187, 76, 0.1);
-    }
-    .card-style-select-4 {
-        border: 2px solid rgba(75, 85, 174, 0.5);
-        background-color: rgba(75, 85, 174, 0.1);
-    }
-    .card-style-select-5 {
-        border: 2px solid rgba(186, 50, 55, 0.5);
-        background-color: rgba(186, 50, 55, 0.1);
-    }
-    .card-style-select-6 {
-        border: 2px solid rgba(225, 125, 36, 0.5);
-        background-color: rgba(225, 125, 36, 0.1);
-    }
-    .card-style-select-7 {
-        border: 2px solid rgba(159, 163, 165, 0.5);
-        background-color: rgba(159, 163, 165, 0.1);
-    }
-    .card-style-left{
-        position: relative;
-        width: 25px;
-        height: 41px;
-        box-sizing: border-box;
-        margin: 3px;
-        display: inline-block;
-    }
-    /* 卡片左边样式 */
-    .card-left-style-0 {
-        background-color: rgb(255, 255, 255);
-        color: rgb(0, 0, 0);
-    }
-    .card-left-style-1 {
-        background-color: rgb(121, 73, 81);
-    }
-    .card-left-style-2 {
-        background-color: rgb(05, 187, 76);
-    }
-    .card-left-style-3 {
-        background-color: rgb(05, 187, 76);
-    }
-    .card-left-style-4 {
-        background-color: rgb(75, 85, 174);
-    }
-    .card-left-style-5 {
-        background-color: rgb(186, 50, 55);
-    }
-    .card-left-style-6 {
-        background-color: rgb(225, 125, 36);
-    }
-    .card-left-style-7 {
-        background-color: rgb(159, 163, 165);
-    }
-    /* 卡片左边样式-选择 */
-    .card-left-style-select-0 {
-        background-color: rgba(255, 255, 255,0.7);
-        color: rgba(0, 0, 0,0.7);
-    }
-    .card-left-style-select-1 {
-        background-color: rgba(121, 73, 81,0.7);
-    }
-    .card-left-style-select-2 {
-        background-color: rgba(05, 187, 76,0.7);
-    }
-    .card-left-style-select-3 {
-        background-color: rgba(05, 187, 76,0.7);
-    }
-    .card-left-style-select-4 {
-        background-color: rgba(75, 85, 174,0.7);
-    }
-    .card-left-style-select-5 {
-        background-color: rgba(186, 50, 55,0.7);
-    }
-    .card-left-style-select-6 {
-        background-color: rgba(225, 125, 36,0.7);
-    }
-    .card-left-style-select-7 {
-        background-color: rgba(159, 163, 165,0.7);
-    }
-
-    .card-left-style-select {
-        position: relative;
-        width: 25px;
-        height: 41px;
-        box-sizing: border-box;
-        margin: 3px;
-        display: inline-block;
-    }
-
-    .card-right-style{
-        width: calc(116px - 4px - 6px - 25px);
-        height: calc(50px - 2px);
-        box-sizing: border-box;
-        display: inline-block;
-        position: absolute;
-        right: 0px;
-    }
-    /* 卡片虚线样式 */
-    .card-right-style-0 {
-        border-left: 2px dashed rgb(255, 255, 255);
-        color: rgb(255, 255, 255);
-    }
-    .card-right-style-1 {
-        border-left: 2px dashed rgb(121, 73, 81);
-    }
-    .card-right-style-2 {
-        border-left: 2px dashed rgb(05, 187, 76);
-    }
-    .card-right-style-3 {
-        border-left: 2px dashed rgb(05, 187, 76);
-    }
-    .card-right-style-4 {
-        border-left: 2px dashed rgb(75, 85, 174);
-    }
-    .card-right-style-5 {
-        border-left: 2px dashed rgb(186, 50, 55);
-    }
-    .card-right-style-6 {
-        border-left: 2px dashed rgb(225, 125, 36);
-    }
-    .card-right-style-7 {
-        border-left: 2px dashed rgb(159, 163, 165);
-    }
-    /* 卡片虚线样式-选择 */
-    .card-right-style-select-0 {
-        border-left: 2px dashed rgba(255, 255, 255,0.7);
-        color: rgba(255, 255, 255,0.7);
-    }
-    .card-right-style-select-1 {
-        border-left: 2px dashed rgba(121, 73, 81,0.7);
-    }
-    .card-right-style-select-2 {
-        border-left: 2px dashed rgba(05, 187, 76,0.7);
-    }
-    .card-right-style-select-3 {
-        border-left: 2px dashed rgba(05, 187, 76,0.7);
-    }
-    .card-right-style-select-4 {
-        border-left: 2px dashed rgba(75, 85, 174,0.7);
-    }
-    .card-right-style-select-5 {
-        border-left: 2px dashed rgba(186, 50, 55,0.7);
-    }
-    .card-right-style-select-6 {
-        border-left: 2px dashed rgba(225, 125, 36,0.7);
-    }
-    .card-right-style-select-7 {
-        border-left: 2px dashed rgba(159, 163, 165,0.7);
-    }
-
-    .card-title1-style{
-        margin-top: 2px;
-        font-size: 14px;
-        width: 100%;
-        text-align: center;
-    }
-    .card-title1-style-1 {
-        font-size: 14px;
-    }
-    .card-title2-style{
-        margin-top: 2px;
-        font-size: 12px;
-        width: 100%;
-        text-align: center;
-    }
-    .card-title2-style-1 {
-        font-size: 12px;
-    }
-    .card-content-style{
-        width: 100%;
-        text-align: right;
-        font-size: 12px;
-    }
-    .card-content-style-1 {
-        font-size: 12px;
-    }
-</style>

src/components/area/windturbine/YawDetail.vue

@@ -1,99 +0,0 @@
-<template>
-    <div class="firstdiv">
-    <img
-      style="float: left; margin-left: 40px; margin-top: 90px;width:50vh;height:25vh;"
-      src="../../../assets/img/WindturbineDetailPages/变桨.png"
-      object-fit="fill"
-    />
-    <div class="twodiv">
-    <table>
-        <tr>
-            <th>状态信息</th>
-        </tr>
-        <tr>
-            <td>左极限位置</td>
-            <td><green></green></td>
-        </tr>
-        <tr>
-            <td>右极限位置</td>
-            <td><red></red></td>
-        </tr>
-    </table>
-        <table>
-        <tr>
-            <th>状态信息</th>
-        </tr>
-        <tr>
-            <td>电机1保护OK</td>
-            <td><green></green></td>
-        </tr>
-        <tr>
-            <td>电机2保护OK</td>
-            <td><green></green></td>
-        </tr>
-    </table>
-        <table>
-        <tr>
-            <th>数值信息</th>
-        </tr>
-        <tr>
-            <td>对风偏差</td>
-            <td>28.07</td>
-            <td>度</td>
-        </tr>
-        <tr>
-            <td>对风偏差角度</td>
-            <td>710.07</td>
-            <td>度</td>
-        </tr>
-    </table>
-    </div>
-  </div>
-</template>
-<script>
-
-export default{
-    components: {
-        
-    }
-}
-</script>
-
-<style scoped>
-.firstdiv {
-  height: 50vh;
-}
-.onediv {
-  float: right;
-  margin-right: 30px;
-}
-.twodiv {
-  float: right;
-  margin-right: 30px;
-}
-td:nth-child(1) {
-  height: 25px;
-  width: 130px;
-  text-align: right;
-}
-td:nth-child(2) {
-  width: 78px;
-  text-align: right;
-  color: rgb(5, 176, 71);
-}
-td:nth-child(3) {
-  text-align: center;
-  width: 30px;
-}
-tr:nth-child(1) {
-  font-size: 20px;
-  width: 90px;
-  text-align: right;
-}
-th {
-  height: 40px;
-}
-table{
-  margin-top: 30px;
-}
-</style>

src/components/area/windturbine/control/ControlMatrixCard.vue

@@ -1,457 +0,0 @@
-<template>
-  <div class="main" v-if="values.length > 0">
-    <div>{{ title }}</div>
-    <div class="content">
-      <div
-        class="card"
-        v-for="(item, index) in values"
-        :key="index"
-        :class="
-          item.active
-            ? 'card-select-' + item.status
-            : 'card-unselect-' + item.status
-        "
-        @click="onSelectHandler(item)"
-        @dblclick="sendMsg(item)"
-      >
-        <div
-          class="card-left"
-          :class="
-            item.active
-              ? 'card-left-select-' + item.status
-              : 'card-left-unselect-' + item.status
-          "
-        >
-          <div>{{ item.windturbineId.slice(0, 2) }}</div>
-          <div>{{ item.windturbineId.slice(5) }}</div>
-        </div>
-        <div
-          class="card-right"
-          :class="
-            item.active
-              ? 'card-right-select-' + item.status
-              : 'card-right-unselect-' + item.status
-          "
-        >
-        
-          <div class="rightrow">{{ item.windSpeed.toFixed(2) }} m/s</div>
-          <div class="rightrow">{{ item.power.toFixed(2) }} kw</div>
-          <div class="rightrow">{{ item.rollSpeed.toFixed(2) }} rpm</div>
-        </div>
-      </div>
-    </div>
-    <div class="bottom"></div>
-  </div>
-  <WindturbineDetailPages
-    v-model="dialogVisible"
-    :windturbine="currentWindturbine"
-  ></WindturbineDetailPages>
-</template>
-
-<script>
-import WindturbineDetailPages from "../WindturbineDetailPages.vue";
-export default {
-  name: "ControlMatrixCard",
-  props: { title: String, datas: Object, operateStyle: Number },
-  data() {
-    return {
-      values: [],
-      dialogVisible: false,
-      currentWindturbine: {},
-    };
-  },
-  components: {
-    WindturbineDetailPages,
-  },
-  created() {
-    //this.CheckTimer = setInterval(this.checkCard,2000);
-  },
-  methods: {
-    // 点击卡片事件
-    onSelectHandler(item) {
-      item.active = !item.active;
-    },
-
-    sendMsg: function (itm) {
-      this.dialogVisible = true;
-      this.currentWindturbine = itm;
-    },
-
-    /* 获取选中的项目 */
-    getSelectedItems() {
-      var ls = new Array();
-      this.values.forEach((item) => {
-        if (item.active) {
-          ls.push(item);
-        }
-      });
-      return ls;
-    },
-    /* 将选中的项目填充到数组中 */
-    outputSelectedItems(ls) {
-      this.values.forEach((item) => {
-        if (item.active) {
-          ls.push(item);
-        }
-      });
-    },
-
-    /* 导出所有的项目 */
-    outputAllItems(ls) {
-      this.values.forEach((item) => {
-        ls.push(item);
-      });
-    },
-
-    /* 清除选中的项目 */
-    clearSelected() {
-      this.values.forEach((item) => (item.active = false));
-    },
-
-    /* checkCard(){
-      var st = 2;// 待机
-      if(this.operateStyle==2){
-        st = 4;
-      }else if(this.operateStyle==1){
-        st = 2;
-      }else{
-        return;
-      }
-      var ll = new Array();
-      for(var vvs in this.values){
-        if(this.values[vvs].status!=st){
-          ll.push(vvs);
-        }
-      }
-      for(var it in ll){
-        this.values.splice(it,1);
-      }
-    }, */
-  },
-  watch: {
-    "$store.getters.windturbinelist": {
-      deep: true,
-      handler: function (json) {
-        var val = {};
-        this.datas.value.forEach((item) => {
-          var data = json[item];
-          var active = undefined;
-          var status = data.status;
-          // 设置当前状态
-          for (var i = 0; i < this.values.length; i++) {
-            if (this.values[i].windturbineId == item) {
-              active = this.values[i].active;
-              break;
-            }
-          }
-          val[item] = 0;
-          var obj = {
-            active: active,
-            status: status,
-            power: data.power,
-            windSpeed: data.windSpeed,
-            rollSpeed: data.rollSpeed,
-            windturbineId: item,
-            modelId: data.modelId,
-            projectId: data.projectId,
-            stationId: data.stationId,
-            controlType: this.operateStyle,
-          };
-          if (obj.modelId.indexOf("105") >= 0) {
-            obj.rollSpeed *= 9.55;
-          }
-          // 替换实时刷新的值
-          this.values.splice(i, 1, obj);
-        });
-
-        var lls = new Array();
-        for (var i1 = 0; i1 < this.values.length; ++i1) {
-          var vvv = this.values[i1];
-          if (typeof val[vvv.windturbineId] === "undefined") {
-            lls.push(i1);
-          }
-        }
-        for (var v2 in lls) {
-          this.values.splice(v2, 1);
-        }
-      },
-    },
-  },
-};
-</script>
-
-<style scoped>
-.rightrow{
-  margin-right:3px;
-}
-.content {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-.bottom {
-  background-color: #292929;
-  width: 100%;
-  height: 2px;
-  margin-top: 5px;
-}
-.main {
-  margin: 0 5px 15px 5px;
-}
-/*  最外层卡片 */
-.card {
-  width: 112px;
-  height: 49px;
-  font-size: 12px;
-  margin-top: 4px;
-  margin-left: 3px;
-  display: flex;
-  flex-direction: row;
-  cursor: pointer;
-  /* border: 2px solid rgb(75, 85, 174); */
-}
-/*  卡片左边部分 */
-.card-left {
-  width: 25px;
-  margin: 3px;
-  font-size: 14px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  align-items: center;
-  /* background-color: rgb(75, 85, 174); */
-}
-/* 卡片右边部分 */
-.card-right {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  justify-content: space-around;
-  align-items: flex-end;
-  padding-right: 3px;
-  /* border-left: 2px dashed rgb(75, 85, 174); */
-}
-
-/* ***********颜色************ */
-/* *********************** */
-/*  最外层卡片选中和未选中 */
-.card-select-0 {
-  border: 2px solid rgb(255, 255, 255, 0.5);
-}
-.card-unselect-0 {
-  border: 2px solid rgb(255, 255, 255);
-}
-/*  左边卡片选中和未选中 */
-.card-left-select-0 {
-  background-color: rgb(255, 255, 255, 0.5);
-  color:rgb(0, 0, 0,0.5);
-}
-.card-left-unselect-0 {
-  background-color: rgb(255, 255, 255, .5);
-  color:rgb(0, 0, 0);
-}
-/*  右边卡片选中和未选中 */
-.card-right-select-0 {
-  border-left: 2px dashed rgb(255, 255, 255, 0.5);
-}
-.card-right-unselect-0 {
-  border-left: 2px dashed rgb(255, 255, 255, .5);
-  background-color: rgb(255, 255, 255, .15);
-}
-
-/* ***********颜色************ */
-/* *********************** */
-/*  最外层卡片选中和未选中 */
-.card-select-1 {
-  border: 2px solid rgb(197, 48, 200, 0.5);
-}
-.card-unselect-1 {
-  border: 2px solid rgb(197, 48, 200);
-}
-.card-select-1 {
-  border: 2px solid rgb(197, 48, 200, 0.5);
-}
-/*  左边卡片选中和未选中 */
-.card-left-select-1 {
-  background-color: rgb(197, 48, 200, 0.5);
-}
-.card-left-unselect-1 {
-  background-color: rgb(197, 48, 200, .5);
-}
-/*  右边卡片选中和未选中 */
-.card-right-select-1 {
-  border-left: 2px dashed rgb(197, 48, 200, 0.5);
-}
-.card-right-unselect-1 {
-  border-left: 2px dashed rgb(197, 48, 200, .5);
-  background-color: rgb(197, 48, 200, .15);
-}
-
-/* ***********颜色************ */
-/* *********************** */
-/*  最外层卡片选中和未选中 */
-.card-select-2 {
-  border: 2px solid rgb(05, 187, 76, 0.5);
-}
-.card-unselect-2 {
-  border: 2px solid rgb(05, 187, 76);
-}
-.card-select-2 {
-  border: 2px solid rgb(05, 187, 76, 0.5);
-}
-/*  左边卡片选中和未选中 */
-.card-left-select-2 {
-  background-color: rgb(05, 187, 76, 0.5);
-}
-.card-left-unselect-2 {
-  background-color: rgb(05, 187, 76, .5);
-}
-/*  右边卡片选中和未选中 */
-.card-right-select-2 {
-  border-left: 2px dashed rgb(05, 187, 76, 0.5);
-}
-.card-right-unselect-2 {
-  border-left: 2px dashed rgb(05, 187, 76, .5);
-  background-color: rgb(05, 187, 76,.15);
-}
-
-/* ***********颜色************ */
-/* *********************** */
-/*  最外层卡片选中和未选中 */
-.card-select-3 {
-  border: 2px solid rgb(05, 187, 76, 0.5);
-}
-.card-unselect-3 {
-  border: 2px solid rgb(05, 187, 76);
-}
-.card-select-3 {
-  border: 2px solid rgb(05, 187, 76, 0.5);
-}
-/*  左边卡片选中和未选中 */
-.card-left-select-3 {
-  background-color: rgb(05, 187, 76, 0.5);
-}
-.card-left-unselect-3 {
-  background-color: rgb(05, 187, 76, 0.5);
-}
-/*  右边卡片选中和未选中 */
-.card-right-select-3 {
-  border-left: 2px dashed rgb(05, 187, 76, 0.5);
-}
-.card-right-unselect-3 {
-  border-left: 2px dashed rgba(88, 160, 115, 0.5);
-  background-color: rgb(05, 187, 76,.15);
-}
-
-/* ***********颜色************ */
-/* *********************** */
-/*  最外层卡片选中和未选中 */
-.card-select-4 {
-  border: 2px solid rgb(75, 85, 174, 0.5);
-}
-.card-unselect-4 {
-  border: 2px solid rgb(75, 85, 174);
-}
-.card-select-4 {
-  border: 2px solid rgb(75, 85, 174, 0.5);
-}
-/*  左边卡片选中和未选中 */
-.card-left-select-4 {
-  background-color: rgb(75, 85, 174, 0.5);
-}
-.card-left-unselect-4 {
-  background-color: rgb(75, 85, 174, .5);
-}
-/*  右边卡片选中和未选中 */
-.card-right-select-4 {
-  border-left: 2px dashed rgb(75, 85, 174, 0.5);
-}
-.card-right-unselect-4 {
-  border-left: 2px dashed rgb(75, 85, 174, .5);
-  background-color: rgb(75, 85, 174, .15);
-}
-
-/* ***********颜色************ */
-/* *********************** *
-/*  最外层卡片选中和未选中 */
-.card-select-5 {
-  border: 2px solid rgb(186, 50, 55, 0.5);
-}
-.card-unselect-5 {
-  border: 2px solid rgb(186, 50, 55);
-}
-.card-select-5 {
-  border: 2px solid rgb(186, 50, 55, 0.5);
-}
-/*  左边卡片选中和未选中 */
-.card-left-select-5 {
-  background-color: rgb(186, 50, 55, 0.5);
-}
-.card-left-unselect-5 {
-  background-color: rgb(186, 50, 55,.5);
-}
-/*  右边卡片选中和未选中 */
-.card-right-select-5 {
-  border-left: 2px dashed rgb(186, 50, 55, 0.5);
-}
-.card-right-unselect-5 {
-  border-left: 2px dashed rgb(186, 50, 55, .5);
-  background-color: rgb(186, 50, 55,.15);
-}
-
-/* ***********颜色************ */
-/* *********************** *
-/*  最外层卡片选中和未选中 */
-.card-select-6 {
-  border: 2px solid rgb(225, 125, 36, 0.5);
-}
-.card-unselect-6 {
-  border: 2px solid rgb(225, 125, 36);
-}
-.card-select-6 {
-  border: 2px solid rgb(225, 125, 36, 0.5);
-}
-/*  左边卡片选中和未选中 */
-.card-left-select-6 {
-  background-color: rgb(225, 125, 36, 0.5);
-}
-.card-left-unselect-6 {
-  background-color: rgb(225, 125, 36, .5);
-}
-/*  右边卡片选中和未选中 */
-.card-right-select-6 {
-  border-left: 2px dashed rgb(225, 125, 36, 0.5);
-}
-.card-right-unselect-6 {
-  border-left: 2px dashed rgb(225, 125, 36, .5);
-  background-color: rgb(225, 125, 36, .15);
-}
-
-/* ***********颜色************ */
-/* *********************** *
-/*  最外层卡片选中和未选中 */
-.card-select-7 {
-  border: 2px solid rgb(96, 103, 105, 0.5);
-}
-.card-unselect-7 {
-  border: 2px solid rgb(96, 103, 105);
-}
-.card-select-7 {
-  border: 2px solid rgb(96, 103, 105, 0.5);
-}
-/*  左边卡片选中和未选中 */
-.card-left-select-7 {
-  background-color: rgb(96, 103, 105, 0.5);
-}
-.card-left-unselect-7 {
-  background-color: rgb(96, 103, 105, .5);
-}
-/*  右边卡片选中和未选中 */
-.card-right-select-7 {
-  border-left: 2px dashed rgb(96, 103, 105, 0.5);
-}
-.card-right-unselect-7 {
-  border-left: 2px dashed rgb(96, 103, 105, .5);
-  background-color: rgb(96, 103, 105, .15);
-}
-</style>

src/components/area/windturbine/problem/ProblemMatrixCard.vue

@@ -1,448 +0,0 @@
-<template>
-  <div class="main" v-if="values.length > 0">
-    <div>{{ title }}</div>
-    <div class="content">
-      <div
-        class="card"
-        v-for="(item, index) in values"
-        :key="index"
-        :class="
-          item.active
-            ? 'card-select-' + item.status
-            : 'card-unselect-' + item.status
-        "
-        @click="onSelectHandler(item)"
-        @dblclick="sendMsg(item)"
-      >
-        <div
-          class="card-left"
-          :class="
-            item.active
-              ? 'card-left-select-' + item.status
-              : 'card-left-unselect-' + item.status
-          "
-        >
-          <div>{{ item.windturbineId.slice(0, 2) }}</div>
-          <div>{{ item.windturbineId.slice(5) }}</div>
-        </div>
-        <div
-          class="card-right"
-          :class="
-            item.active
-              ? 'card-right-select-' + item.status
-              : 'card-right-unselect-' + item.status
-          "
-        >
-          <div class="rightrow">{{ item.windSpeed.toFixed(2) }} m/s</div>
-          <div class="rightrow">{{ item.power.toFixed(2) }} kw</div>
-          <div class="rightrow">{{ item.rollSpeed.toFixed(2) }} rpm</div>
-        </div>
-      </div>
-    </div>
-    <div class="bottom"></div>
-  </div>
-  <WindturbineDetailPages
-    v-model="dialogVisible"
-    :windturbine="currentWindturbine"
-  ></WindturbineDetailPages>
-</template>
-
-<script>
-import WindturbineDetailPages from "../WindturbineDetailPages.vue";
-export default {
-  name: "ControlMatrixCard",
-  props: { title: String, type: Number, datas: Object },
-  data() {
-    return {
-      values: [],
-      dialogVisible: false,
-      currentWindturbine:{},
-    };
-  },
-  components: {
-    WindturbineDetailPages,
-  },
-  methods: {
-    // 点击卡片事件
-    onSelectHandler(item) {
-      item.active = !item.active;
-    },
-    sendMsg: function (itm) {
-      this.dialogVisible = true;
-      this.currentWindturbine=itm;
-    },
-    filter(value, windturbineId) {
-      var array = [];
-      var flag = false;
-      for (var i = 0; i < value.length; i++) {
-        if (value[i].windturbineId == windturbineId) {
-          flag = true;
-          array.push(flag); // 风机是否已经存在
-          array.push(i); // 风机在values数组的位置
-          array.push(value[i].active); // 当前风机是否被选中
-          break;
-        }
-      }
-      return array;
-    },
-    addCard(val) {
-      var active = false;
-      var array = this.filter(this.values, val.windturbineId);
-      if (!array[0]) {
-        // 维护
-        val.active = active;
-        if(val.modelId.indexOf("105")>=0){
-          val.rollSpeed*=9.55;
-        }
-        this.values.push(val);
-      } else {
-        val.active = array[2];
-        this.values.splice(array[1], 1, val);
-      }
-    },
-    /* 获取选中的项目 */
-    getSelectedItems() {
-      var ls = new Array();
-      this.values.forEach((item) => {
-        if (item.active) {
-          ls.push(item);
-        }
-      });
-      return ls;
-    },
-    /* 将选中的项目填充到数组中 */
-    outputSelectedItems(ls) {
-      this.values.forEach((item) => {
-        if (item.active && !this.isHas(item, ls)) {
-          ls.push(item);
-        }
-      });
-    },
-
-    /* 清除选中的项目 */
-    clearSelected() {
-      this.values.forEach((item) => (item.active = false));
-    },
-
-    isHas(item, ls) {
-      for (var id in ls) {
-        if (ls[id].windturbineId == item.windturbineId) {
-          return true;
-        }
-      }
-      return false;
-    },
-
-    clear(vs) {
-      var ll = new Array();
-      this.values.forEach((item) => {
-        var it = vs[item.windturbineId];
-        if (typeof it === "undefined") {
-          ll.push(item);
-        }
-      });
-      for (var v1 in ll) {
-        var ind = this.values.indexOf(ll[v1]);
-        if (ind < 0) continue;
-        this.values.splice(ind, 1);
-      }
-    },
-  },
-  watch: {
-    "$store.getters.windturbinelist": {
-      deep: true,
-      handler: function (json) {
-        var vs = {};
-        for (var id in json) {
-          var val = json[id];
-          if (val.status == this.type) {
-            this.addCard(val);
-            vs[val.windturbineId] = 0;
-          }
-          if (this.type < 0 && val.lockValue) {
-            this.addCard(val);
-            vs[val.windturbineId] = 0;
-          }
-        }
-        this.clear(vs);
-      },
-    },
-  },
-};
-</script>
-
-<style scoped>
-.rightrow{
-  margin-right:3px;
-}
-.content {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-.bottom {
-  background-color: #292929;
-  width: 100%;
-  height: 2px;
-  margin-top: 5px;
-}
-.main {
-  margin: 0 5px 15px 5px;
-}
-/*  最外层卡片 */
-.card {
-  width: 112px;
-  height: 49px;
-  font-size: 12px;
-  margin-left: 3px;
-  margin-top: 4px;
-  display: flex;
-  flex-direction: row;
-  cursor: pointer;
-  /* border: 2px solid rgb(75, 85, 174); */
-}
-/*  卡片左边部分 */
-.card-left {
-  width: 25px;
-  margin: 3px;
-  font-size: 14px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  align-items: center;
-  /* background-color: rgb(75, 85, 174); */
-}
-/* 卡片右边部分 */
-.card-right {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  justify-content: space-around;
-  align-items: flex-end;
-  padding-right: 3px;
-  /* border-left: 2px dashed rgb(75, 85, 174); */
-}
-
-/* ***********颜色************ */
-/* *********************** */
-/*  最外层卡片选中和未选中 */
-.card-select-0 {
-  border: 2px solid rgb(255, 255, 255, 0.5);
-}
-.card-unselect-0 {
-  border: 2px solid rgb(255, 255, 255);
-}
-/*  左边卡片选中和未选中 */
-.card-left-select-0 {
-  background-color: rgb(255, 255, 255, 0.5);
-  color:rgb(0, 0, 0,0.5);
-}
-.card-left-unselect-0 {
-  background-color: rgb(255, 255, 255, .5);
-  color:rgb(0, 0, 0);
-}
-/*  右边卡片选中和未选中 */
-.card-right-select-0 {
-  border-left: 2px dashed rgb(255, 255, 255, 0.5);
-}
-.card-right-unselect-0 {
-  border-left: 2px dashed rgb(255, 255, 255, .5);
-  background-color: rgb(255, 255, 255, .15);
-}
-
-/* ***********颜色************ */
-/* *********************** */
-/*  最外层卡片选中和未选中 */
-.card-select-1 {
-  border: 2px solid rgb(197, 48, 200, 0.5);
-}
-.card-unselect-1 {
-  border: 2px solid rgb(197, 48, 200);
-}
-.card-select-1 {
-  border: 2px solid rgb(197, 48, 200, 0.5);
-}
-/*  左边卡片选中和未选中 */
-.card-left-select-1 {
-  background-color: rgb(197, 48, 200, 0.5);
-}
-.card-left-unselect-1 {
-  background-color: rgb(197, 48, 200, .5);
-}
-/*  右边卡片选中和未选中 */
-.card-right-select-1 {
-  border-left: 2px dashed rgb(197, 48, 200, 0.5);
-}
-.card-right-unselect-1 {
-  border-left: 2px dashed rgb(197, 48, 200, .5);
-  background-color: rgb(197, 48, 200, .15);
-}
-
-/* ***********颜色************ */
-/* *********************** */
-/*  最外层卡片选中和未选中 */
-.card-select-2 {
-  border: 2px solid rgb(05, 187, 76, 0.5);
-}
-.card-unselect-2 {
-  border: 2px solid rgb(05, 187, 76);
-}
-.card-select-2 {
-  border: 2px solid rgb(05, 187, 76, 0.5);
-}
-/*  左边卡片选中和未选中 */
-.card-left-select-2 {
-  background-color: rgb(05, 187, 76, 0.5);
-}
-.card-left-unselect-2 {
-  background-color: rgb(05, 187, 76, .5);
-}
-/*  右边卡片选中和未选中 */
-.card-right-select-2 {
-  border-left: 2px dashed rgb(05, 187, 76, 0.5);
-}
-.card-right-unselect-2 {
-  border-left: 2px dashed rgb(05, 187, 76, .5);
-  background-color: rgb(05, 187, 76,.15);
-}
-
-/* ***********颜色************ */
-/* *********************** */
-/*  最外层卡片选中和未选中 */
-.card-select-3 {
-  border: 2px solid rgb(05, 187, 76, 0.5);
-}
-.card-unselect-3 {
-  border: 2px solid rgb(05, 187, 76);
-}
-.card-select-3 {
-  border: 2px solid rgb(05, 187, 76, 0.5);
-}
-/*  左边卡片选中和未选中 */
-.card-left-select-3 {
-  background-color: rgb(05, 187, 76, 0.5);
-}
-.card-left-unselect-3 {
-  background-color: rgb(05, 187, 76,.5);
-}
-/*  右边卡片选中和未选中 */
-.card-right-select-3 {
-  border-left: 2px dashed rgb(05, 187, 76, 0.5);
-}
-.card-right-unselect-3 {
-  border-left: 2px dashed rgb(05, 187, 76, .5);
-  background-color: rgb(05, 187, 76,.15);
-}
-
-/* ***********颜色************ */
-/* *********************** */
-/*  最外层卡片选中和未选中 */
-.card-select-4 {
-  border: 2px solid rgb(75, 85, 174, 0.5);
-}
-.card-unselect-4 {
-  border: 2px solid rgb(75, 85, 174);
-}
-.card-select-4 {
-  border: 2px solid rgb(75, 85, 174, 0.5);
-}
-/*  左边卡片选中和未选中 */
-.card-left-select-4 {
-  background-color: rgb(75, 85, 174, 0.5);
-}
-.card-left-unselect-4 {
-  background-color: rgb(75, 85, 174, .5);
-}
-/*  右边卡片选中和未选中 */
-.card-right-select-4 {
-  border-left: 2px dashed rgb(75, 85, 174, 0.5);
-}
-.card-right-unselect-4 {
-  border-left: 2px dashed rgb(75, 85, 174, .5);
-  background-color: rgb(75, 85, 174, .15);
-}
-
-/* ***********颜色************ */
-/* *********************** *
-/*  最外层卡片选中和未选中 */
-.card-select-5 {
-  border: 2px solid rgb(186, 50, 55, 0.5);
-}
-.card-unselect-5 {
-  border: 2px solid rgb(186, 50, 55);
-}
-.card-select-5 {
-  border: 2px solid rgb(186, 50, 55, 0.5);
-}
-/*  左边卡片选中和未选中 */
-.card-left-select-5 {
-  background-color: rgb(186, 50, 55, 0.5);
-}
-.card-left-unselect-5 {
-  background-color: rgb(186, 50, 55, .5);
-}
-/*  右边卡片选中和未选中 */
-.card-right-select-5 {
-  border-left: 2px dashed rgb(186, 50, 55, 0.5);
-}
-.card-right-unselect-5 {
-  border-left: 2px dashed rgb(186, 50, 55, .5);
-  background-color: rgb(186, 50, 55,.15);
-}
-
-/* ***********颜色************ */
-/* *********************** *
-/*  最外层卡片选中和未选中 */
-.card-select-6 {
-  border: 2px solid rgb(225, 125, 36, 0.5);
-}
-.card-unselect-6 {
-  border: 2px solid rgb(225, 125, 36);
-}
-.card-select-6 {
-  border: 2px solid rgb(225, 125, 36, 0.5);
-}
-/*  左边卡片选中和未选中 */
-.card-left-select-6 {
-  background-color: rgb(225, 125, 36, 0.5);
-}
-.card-left-unselect-6 {
-  background-color: rgb(225, 125, 36, .5);
-}
-/*  右边卡片选中和未选中 */
-.card-right-select-6 {
-  border-left: 2px dashed rgb(225, 125, 36, 0.5);
-}
-.card-right-unselect-6 {
-  border-left: 2px dashed rgb(225, 125, 36, .5);
-  background-color: rgb(225, 125, 36, .15);
-}
-
-/* ***********颜色************ */
-/* *********************** *
-/*  最外层卡片选中和未选中 */
-.card-select-7 {
-  border: 2px solid rgb(96, 103, 105, 0.5);
-}
-.card-unselect-7 {
-  border: 2px solid rgb(96, 103, 105);
-}
-.card-select-7 {
-  border: 2px solid rgb(96, 103, 105, 0.5);
-}
-/*  左边卡片选中和未选中 */
-.card-left-select-7 {
-  background-color: rgb(96, 103, 105, 0.5);
-}
-.card-left-unselect-7 {
-  background-color: rgb(96, 103, 105, .5);
-}
-/*  右边卡片选中和未选中 */
-.card-right-select-7 {
-  border-left: 2px dashed rgb(96, 103, 105, 0.5);
-}
-.card-right-unselect-7 {
-  border-left: 2px dashed rgb(96, 103, 105, .5);
-  background-color: rgb(96, 103, 105, .15);
-}
-</style>

src/components/area/windturbine/warning.vue

@@ -1,143 +0,0 @@
-<template>
-    <div class="container">
-        <div class="dot"></div>
-        <div class="pulse"></div>
-        <div class="content" v-for="(item , index) in worn" :key="index">{{item}}</div>
-    </div>
-</template>
-
-<script>
-    export default {
-        props: {
-            worn: Array,
-        },
-    }
-</script>
-<style scoped>
-    @keyframes warn {
-        0% {
-            transform: scale(0.3);
-            -webkit-transform: scale(0.3);
-            opacity: 0.0;
-        }
-
-        25% {
-            transform: scale(0.3);
-            -webkit-transform: scale(0.3);
-            opacity: 0.1;
-        }
-
-        50% {
-            transform: scale(0.5);
-            -webkit-transform: scale(0.5);
-            opacity: 0.3;
-        }
-
-        75% {
-            transform: scale(0.8);
-            -webkit-transform: scale(0.8);
-            opacity: 0.5;
-        }
-
-        100% {
-            transform: scale(1);
-            -webkit-transform: scale(1);
-            opacity: 0.0;
-        }
-    }
-
-    @keyframes warn1 {
-        0% {
-            transform: scale(0.3);
-            -webkit-transform: scale(0.3);
-            opacity: 0.0;
-        }
-
-        25% {
-            transform: scale(0.3);
-            -webkit-transform: scale(0.3);
-            opacity: 0.1;
-        }
-
-        50% {
-            transform: scale(0.3);
-            -webkit-transform: scale(0.3);
-            opacity: 0.3;
-        }
-
-        75% {
-            transform: scale(0.5);
-            -webkit-transform: scale(0.5);
-            opacity: 0.5;
-        }
-
-        100% {
-            transform: scale(0.8);
-            -webkit-transform: scale(0.8);
-            opacity: 0.0;
-        }
-    }
-
-    .container {
-        position: absolute;
-        width: 40px;
-        height: 40px;
-        z-index: 99;
-        /*border: 1px solid #000; hovertree.com */
-    }
-
-    .content{
-        position: relative;
-        display: none;
-        z-index: 9999;
-    }
-
-    .container:hover .content{
-        /* position: absolute;  */
-        padding: 10px;
-        width: 200px;
-        color: #000000;
-        background-color: #ffffff;
-        display: block;
-        min-height: 20px;
-        z-index: 9999;
-        margin-left: 40px;
-    }
-
-    /* 保持大小不变的小圆圈 何问起 */
-    .dot {
-        position: absolute;
-        width: 8px;
-        height: 8px;
-        left: 42px;
-        top: 42px;
-        -webkit-border-radius: 50%;
-        -moz-border-radius: 50%;
-        /* border: 2px solid rgba(255,0,0,.5); */
-        border-radius: 50%;
-        z-index: 2;
-        background-color: rgba(255,0,0,.8);
-    }
-
-    /* 产生动画（向外扩散变大）的圆圈  */
-    .pulse {
-        position: absolute;
-        width: 80px;
-        height: 80px;
-        left: 2px;
-        top: 2px;
-        border: 3px solid rgba(255,0,0,.8);
-        -webkit-border-radius: 50%;
-        -moz-border-radius: 50%;
-        border-radius: 50%;
-        z-index: 1;
-        opacity: 0;
-        -webkit-animation: warn 1.5s linear;
-        -moz-animation: warn 1.5s linear;
-        animation: warn 1.5s linear;
-        -webkit-animation-iteration-count: infinite;
-        -moz-animation-iteration-count: infinite;
-        animation-iteration-count: infinite;
-        box-shadow: 1px 1px 15px rgba(255,0,0,.8);
-    }
-</style>

src/components/area/wtbDetailPages.js

@@ -1,2 +0,0 @@
-import Vue from 'Vue'
-export default new Vue;

src/components/areaCard.vue

@@ -0,0 +1,769 @@
+/* 自定义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" :style="style">
+        <img class="logo" src="../assets/img/logo.png" alt="">
+        <div class="title">{{ title }}</div>
+        <div style="margin-top: 50px; height: 91%;">
+            <el-scrollbar>
+                <div class="scoll">
+                    <div class="matrix" v-if="faultList.length>0">
+                        <div class="problemTitle">故障</div>
+                        <MatrixBlock @on-click="handleClick" :dataList="faultList"></MatrixBlock>
+                    </div>
+                    <div class="matrix" v-if="maintainList.length>0">
+                        <div class="problemTitle">维护</div>
+                        <MatrixBlock @on-click="handleClick" :dataList="maintainList"></MatrixBlock>
+                    </div>
+                    <div class="matrix" v-if="offlineList.length>0">
+                        <div class="problemTitle">离线</div>
+                        <MatrixBlock @on-click="handleClick" :dataList="offlineList"></MatrixBlock>
+                    </div>
+                    <div class="matrix" v-if="listedList.length>0">
+                        <div class="problemTitle">挂牌</div>
+                        <MatrixBlock @on-click="handleClick" :dataList="listedList"></MatrixBlock>
+                    </div>
+                    <div class="matrix" v-if="listedList.length>0">
+                        <div class="problemTitle">挂牌</div>
+                        <MatrixBlock @on-click="handleClick" :dataList="listedList"></MatrixBlock>
+                    </div>
+                </div>
+            </el-scrollbar>
+        </div>
+    </div>
+</template>
+
+<script>
+    import BackgroundData from 'utils/BackgroundData'
+    // import ProblemMatrixCard from "./problem/ProblemMatrixCard.vue";
+    import MatrixBlock from "./matrixBlock.vue";
+    /**
+     * todo 拖动
+     * todo 控制区
+     *
+     * 动态值:
+     * 1. gy-card-area-label中的 height,margin-top
+     * 2. gy-card-circle-yellow中的颜色
+     * 3. gy-card-content-25 中的高度
+     *
+     * 使用事例:
+     * <gy-card title="校验区" area-style="check" circle-style="green" content-style="44">
+     * <div>动态内容</div>
+     * </gy-card>
+     */
+    export default {
+        name: 'gy-card',
+        components: {
+            // ProblemMatrixCard,
+            MatrixBlock
+        },
+        emits: ["parentRun"],
+        props: {
+            title: {
+                type: String,
+                default: '校验区',
+                required: true
+            },
+            height: {
+                type: Number,
+                default: 200,
+            },
+            areaStyle: {
+                type: String,
+                default: 'check',
+                required: true
+            },
+            circleStyle: {
+                type: String,
+                default: 'green',
+                required: true
+            },
+            contentStyle: {
+                type: String,
+                default: '44',
+                required: true
+            },
+            showFlag: {
+                type: Boolean,
+                default: false,
+            }
+        },
+        data() {
+            return {
+                dialogVisible: false,
+                currentWindturbine: {},
+                values: [],
+                hover: false,
+                big: false,
+                current: 0,
+                faultList: [],
+                maintainList: [],
+                offlineList: [],
+                listedList: [],
+                chooseList: [],
+                totleList: [],
+                titleList: [
+                    {
+                        id: 0,
+                        title: '麻黄山',
+                    },
+                    {
+                        id: 1,
+                        title: '牛首山',
+                    },
+                    {
+                        id: 2,
+                        title: '青山',
+                    },
+                    {
+                        id: 3,
+                        title: '石板泉',
+                    },
+                    {
+                        id: 4,
+                        title: '香山',
+                    },
+                ],
+            }
+        },
+        computed: {
+            style() {
+                return `width: 100%; height: 82%;`
+            },
+            areaClass() {
+                if (this.big) {
+                    return `gy-card-area-big`;
+                } else {
+                    return `gy-card-area-${this.areaStyle}`;
+                }
+            },
+            circleClass() {
+                return `gy-card-circle gy-card-circle-${this.circleStyle}`;
+            },
+            contentClass() {
+                if (this.big) {
+                    return `gy-card-content-big`;
+                } else {
+                    return `gy-card-content-${this.contentStyle}`;
+                }
+            },
+            headerClass() {
+                if (this.hover) {
+                    return `gy-card-header-hover`;
+                } else {
+                    return `gy-card-header`;
+                }
+            }
+        },
+        methods: {
+            handleClick(values) {
+                console.log(this.chooseList, values)
+                if (values.active) {
+                    let showIndex = null
+                    this.chooseList.forEach((item, index) => {
+                        if (item.windturbineId === values.windturbineId) {
+                            showIndex = index
+                        }
+                    })
+                    this.chooseList.splice(showIndex, 1);
+                } else {
+                    this.chooseList.push(values)
+                }
+            },
+            /* 右键菜单 */
+            contextmenu() {
+                const { remote } = require("electron");
+                var that = this;
+                const menuTemplate = [
+                    {
+                        label: "启动",
+                        click() {
+                            that.menuClicked({ type: "send", controlType: '1' });
+                        },
+                    },
+                    {
+                        label: "停机",
+                        click() {
+                            that.menuClicked({ type: "send", controlType: '2' });
+                        },
+                    },
+                    {
+                        label: "复位",
+                        click() {
+                            that.menuClicked({ type: "send", controlType: '5' });
+                        },
+                    },
+                    {
+                        label: "维护",
+                        click() {
+                            that.menuClicked({ type: "send", controlType: '6' });
+                        },
+                    },
+                    {
+                        label: "取消维护",
+                        click() {
+                            that.menuClicked({ type: "send", controlType: '8' });
+                        },
+                    },
+                    {
+                        label: "挂牌",
+                        submenu: [
+                            {
+                                label: "检修",
+                                click() {
+                                    that.menuClicked({ type: "lock", value: "CheckLock" });
+                                },
+                            },
+                            {
+                                label: "故障维修",
+                                click() {
+                                    that.menuClicked({ type: "lock", value: "FaultLock" });
+                                },
+                            },
+                            {
+                                label: "场内受累检修",
+                                click() {
+                                    that.menuClicked({ type: "lock", value: "StationCheckLock" });
+                                },
+                            },
+                            {
+                                label: "场内受累故障",
+                                click() {
+                                    that.menuClicked({ type: "lock", value: "StationFaulLock" });
+                                },
+                            },
+                            {
+                                label: "场外受累电网",
+                                click() {
+                                    that.menuClicked({
+                                        type: "lock",
+                                        value: "StationPowerLineLock",
+                                    });
+                                },
+                            },
+                            {
+                                label: "场外受累天气",
+                                click() {
+                                    that.menuClicked({ type: "lock", value: "StationWeatherLock" });
+                                },
+                            },
+                        ],
+                    },
+                    {
+                        label: "取消挂牌",
+                        click() {
+                            that.menuClicked({ type: 'lock', value: 'UnLock' });
+                        },
+                    },
+                    {
+                        label: "标注",
+                        click() {
+                            that.menuClicked({ type: "marking" });
+                        },
+                    },
+                ];
+                const menu = remote.Menu.buildFromTemplate(menuTemplate);
+
+                menu.popup(remote.getCurrentWindow());
+            },
+            menuClicked(msg) {
+                var bd = BackgroundData.getInstance();
+                if (!bd.LoginUser) {
+                    this.$notify({
+                        title: "请登录",
+                        message: "控制风机需要先登录！",
+                        type: "warning",
+                        position: "bottom-right",
+                        offset: 60,
+                    });
+                    return;
+                }
+                if (msg.type == "lock") {
+                    // 挂牌
+                    var los = this.getSelectedItems();
+                    for (var id in los) {
+                        los[id].lockType = msg.value;
+                    }
+                    bd.windturbineControl(
+                        los,
+                        true,
+                        this.controlSuccess,
+                        this.controlError
+                    );
+                } else if (msg.type == "send") {
+                    // 发送
+                    var vs = this.getSelectedItems(true);
+                    for (var item in los) {
+                        los[item].controlType = Number(msg.controlType)
+                    }
+                    bd.windturbineControl(
+                        vs,
+                        false,
+                        this.controlSuccess,
+                        this.controlError
+                    );
+                } else if (msg.type == "marking") {
+                    // 标注
+                    var vvs = this.getSelectedItems();
+                    bd.marking(vvs);
+                }
+                this.clearSelected();
+            },
+            /* 获取选中的项目，isControl：是否是控制 */
+            getSelectedItems() {
+                // isControl
+                var ls = new Array();
+                this.$refs.malfunction.outputSelectedItems(ls);
+                return ls;
+            },
+            /* 清除所有选择 */
+            clearSelected() {
+                this.$refs.malfunction.clearSelected();
+            },
+            filter(value, windturbineId) {
+                var array = [];
+                var flag = false;
+                for (var i = 0; i < value.length; i++) {
+                    if (value[i].windturbineId == windturbineId) {
+                        flag = true;
+                        array.push(flag); // 风机是否已经存在
+                        array.push(i); // 风机在values数组的位置
+                        array.push(value[i].active); // 当前风机是否被选中
+                        break;
+                    }
+                }
+                return array;
+            },
+            changeTitle(id) {
+                this.current = id
+                this.$refs.malfunction.dateClick(id)
+            },
+            addCard(val) {
+                var active = false;
+                var array = this.filter(this.values, val.windturbineId);
+                if (!array[0]) {
+                    // 维护
+                    val.active = active;
+                    if (val.modelId.indexOf("105") >= 0) {
+                        val.rollSpeed *= 9.55;
+                    }
+                    this.values.push(val);
+                } else {
+                    val.active = array[2];
+                    this.values.splice(array[1], 1, val);
+                }
+                console.log(this.values)
+            },
+            clear(vs) {
+                var ll = new Array();
+                this.values.forEach((item) => {
+                    var it = vs[item.windturbineId];
+                    if (typeof it === "undefined") {
+                        ll.push(item);
+                    }
+                });
+                for (var v1 in ll) {
+                    var ind = this.values.indexOf(ll[v1]);
+                    if (ind < 0) continue;
+                    this.values.splice(ind, 1);
+                }
+            },
+            showWindows(item) {
+                this.dialogVisible = true;
+                this.currentWindturbine = item;
+            }
+        },
+        watch: {
+            "$store.getters.windturbinelist": {
+                deep: true,
+                handler: function (json) {
+                    var vs = {};
+                    this.faultList = []
+                    this.maintainList = []
+                    this.offlineList = []
+                    this.listedList = []
+                    let arr = Object.keys(json).sort()
+                    for (var id of arr) {
+                        var val = json[id];
+                        this.chooseList.forEach(item => {
+                            if (item.windturbineId === val.windturbineId) {
+                                val.active = true
+                            }
+                        })
+                        this.totleList.push(val)
+                        switch (val.status) {
+                            case 5:
+                                this.faultList.push(val)
+                                break;
+                            case 6:
+                                this.maintainList.push(val)
+                                break;
+                            case 7:
+                                this.offlineList.push(val)
+                                break;
+                        }
+                        if (val.lockValue > 0) {
+                            this.listedList.push(val)
+                        }
+                    }
+                    console.log(this.faultList);
+                    //   this.clear(vs);
+                },
+            },
+        },
+    }
+</script>
+
+<style scoped="scoped">
+    .body {
+        border: 1px solid #373737;
+        width: 100%;
+        margin-left: 15px;
+        margin-top: 10px;
+    }
+
+    .body .scoll {
+        height: 91%;
+    }
+
+    .title {
+        color: #ffffff;
+        font-size: 14px;
+        margin-left: 32px;
+        /* margin-top: 12px; */
+        margin-bottom: 10px;
+        width: 570px;
+        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%;
+    }
+
+    .logo {
+        position: absolute;
+        top: 2px;
+        left: 18px;
+    }
+
+    .matrix {
+        margin-left: 32px;
+        margin-right: 10px;
+        padding-bottom: 20px;
+        border-bottom: 1px solid rgba(31, 31, 31, 1);
+    }
+
+    .problemTitle {
+        font-size: 12px;
+        color: #BFBFBF;
+        margin-top: 20px;
+        margin-bottom: 20px;
+    }
+
+    .gy-card-header {
+        position: relative;
+        height: 40px;
+        background-color: #292929;
+        color: white;
+        box-sizing: border-box;
+    }
+
+    .gy-card-content-89 {
+        position: relative;
+        height: calc(89vh - 50px);
+        background-color: #000000;
+        color: white;
+        box-sizing: border-box;
+        border-radius: 7px;
+    }
+
+    .gy-card-content-44 {
+        position: relative;
+        height: calc(44vh - 50px);
+        background-color: #000000;
+        color: white;
+        box-sizing: border-box;
+        border-radius: 7px;
+    }
+
+    .gy-card-content-37 {
+        position: relative;
+        height: calc(37vh - 50px);
+        background-color: #000000;
+        color: white;
+        box-sizing: border-box;
+        border-radius: 7px;
+    }
+
+    .gy-card-content-25 {
+        position: relative;
+        height: calc(25vh - 50px);
+        background-color: #000000;
+        color: white;
+        box-sizing: border-box;
+        border-radius: 7px;
+    }
+
+    .gy-card-circle {
+        position: relative;
+        top: 7px;
+        display: inline-block;
+        width: 7px;
+        height: 7px;
+        -moz-border-radius: 50%;
+        -webkit-border-radius: 50%;
+        border-radius: 50%;
+    }
+
+    .gy-card-circle-green {
+        background-color: #008000;
+    }
+
+    .gy-card-circle-yellow {
+        background-color: #ffff00;
+    }
+
+    .gy-card-title {
+        position: relative;
+        top: 10px;
+        left: 10px;
+    }
+
+    .gy-card-decoration01 {
+        position: absolute;
+        right: 80px;
+    }
+
+    .gy-card-decoration02 {
+        position: absolute;
+        top: 20px;
+        right: 20px;
+    }
+
+    .gy-card-area-problem {
+        position: relative;
+        height: 89vh;
+        background-color: #292929;
+        border-radius: 7px;
+        margin: 0px;
+        padding-top: 0;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-bottom: 10px;
+        box-sizing: border-box;
+    }
+
+    .gy-card-area-alarm {
+        position: relative;
+        height: 25vh;
+        margin-top: 10px;
+        background-color: #292929;
+        border-radius: 7px;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-bottom: 10px;
+        box-sizing: border-box;
+    }
+
+    .gy-card-area-check {
+        position: relative;
+        height: 44vh;
+        background-color: #292929;
+        border-radius: 7px;
+        margin-top: 10px;
+        padding-top: 0;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-bottom: 10px;
+        box-sizing: border-box;
+    }
+
+    .gy-card-area-control {
+        position: relative;
+        width: 100%;
+        height: 44vh;
+        background-color: #292929;
+        border-radius: 7px;
+        margin: 0px;
+        padding-top: 0;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-bottom: 10px;
+        box-sizing: border-box;
+    }
+
+    .gy-card-area-label {
+        position: relative;
+        height: 25vh;
+        margin-top: 10px;
+        background-color: #292929;
+        border-radius: 7px;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-bottom: 10px;
+        box-sizing: border-box;
+    }
+
+    .gy-card-area-recommended {
+        position: relative;
+        height: 37vh;
+        background-color: #292929;
+        border-radius: 7px;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-bottom: 10px;
+        box-sizing: border-box;
+    }
+
+    .gy-card-header-hover {
+        position: relative;
+        height: 40px;
+        background-color: #292929;
+        color: white;
+        box-sizing: border-box;
+    }
+
+    .gy-card-area-problem:hover {
+        position: relative;
+        height: 89vh;
+        background-color: #292929;
+        border-radius: 7px;
+        margin: 0px;
+        padding-top: 0;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-bottom: 10px;
+        box-sizing: border-box;
+    }
+
+    .gy-card-area-alarm:hover {
+        position: relative;
+        height: 25vh;
+        margin-top: 10px;
+        background-color: #292929;
+        border-radius: 7px;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-bottom: 10px;
+        box-sizing: border-box;
+    }
+
+    .gy-card-area-label:hover {
+        position: relative;
+        height: 25vh;
+        margin-top: 10px;
+        background-color: #292929;
+        border-radius: 7px;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-bottom: 10px;
+        box-sizing: border-box;
+    }
+
+    .gy-card-area-recommended:hover {
+        position: relative;
+        height: 37vh;
+        background-color: #292929;
+        border-radius: 7px;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-bottom: 10px;
+        box-sizing: border-box;
+    }
+
+
+    .gy-card-area-big {
+        position: fixed;
+        top: 0px;
+        left: 0px;
+        width: 100vw;
+        height: 100vh;
+        background-color: #292929;
+        border-radius: 7px;
+        margin: 0px;
+        padding-top: 0;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-bottom: 10px;
+        box-sizing: border-box;
+        z-index: 900;
+    }
+
+    .gy-card-content-big {
+        position: relative;
+        height: calc(100vh - 50px);
+        background-color: #000000;
+        color: white;
+        box-sizing: border-box;
+        border-radius: 7px;
+    }
+
+    .el-scrollbar__wrap {
+        overflow: scroll;
+        width: 110%;
+        height: 120%;
+    }
+
+    ::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+    }
+
+    .scroll {
+        color: #ffffff;
+        min-height: 300px;
+        height: 400px;
+    }
+
+
+    .content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 80px;
+        color: #ffffff;
+        height: 25px;
+        border: 1px solid blue;
+        margin-right: 10px;
+        margin-bottom: 10px;
+    }
+
+    .content_on {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 80px;
+        color: #ffffff;
+        height: 25px;
+        border: 1px solid blue;
+        margin-right: 10px;
+        margin-bottom: 10px;
+        background-color: chartreuse;
+    }
+</style>

src/components/check/areaCard.vue

@@ -0,0 +1,151 @@
+/* 自定义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 style="margin-top: 50px; height: 80%;">
+            <el-scrollbar>
+                <div class="scoll" style="margin-left: 5px;">
+                    <MatrixBlock @on-click="handleClick" :dataList="showList"></MatrixBlock>
+                </div>
+            </el-scrollbar>
+        </div>
+    </div>
+</template>
+
+<script>
+    import BackgroundData from 'utils/BackgroundData'
+    import MatrixBlock from "../matrixBlock.vue";
+    export default {
+        props: {
+            title: {
+                type: String,
+                default: '校验区',
+                required: true
+            },
+            height: {
+                type: Number,
+                default: 200,
+            },
+        },
+        components: {
+            MatrixBlock
+        },
+        data() {
+            return {
+                showList: [],
+                arr: [],
+                list: [],
+            }
+        },
+        methods: {
+            dataDeal() {
+                let flag = false
+                let showList = []
+                let arr = []
+                let checks =BackgroundData.getInstance().checkouts;
+                checks.forEach(item => {
+                    if (item.status === this.list[item.windturbineId].status) {
+                        showList.push(this.list[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
+                console.log(this.showList)
+                if(flag){
+                    let mss = arr.join(',') + '风机超时未响应，已移除'
+                    this.$notify({
+                        title: "控制",
+                        message: mss,
+                        type: "warning",
+                        position: "bottom-right",
+                        offset: 60,
+                        duration: 3000,
+                    });
+                    flag = false
+                }
+                
+            },
+        },
+        watch: {
+            "$store.getters.windturbinelist": {
+                deep: true,
+                handler: function (json) {
+                    this.list = json
+                    this.arr = BackgroundData.getInstance().checkouts;
+                    this.dataDeal()
+                },
+            },
+        },
+    }
+</script>
+
+<style scoped="scoped">
+    .body {
+        border: 1px solid #373737;
+        width: 100%;
+        margin-left: 15px;
+        margin-top: 10px;
+        height: 34vh;
+    }
+
+    .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%;
+    }
+
+    .logo {
+        position: absolute;
+        top: 2px;
+        left: 12px;
+    }
+
+
+</style>

src/components/check/checkArea.vue

@@ -0,0 +1,34 @@
+/* 问题区 */
+<template>
+  <div class="problem">
+    <AreaCard title="校验区" height="33.5"></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/control/areaCard.vue

@@ -0,0 +1,538 @@
+/* 自定义tabs */
+<template>
+    <div class="body" :style="style">
+        <img class="logo" src="../../assets/img/logo.png" alt="">
+        <div class="title">{{ title }}</div>
+        <div style="margin-top: 50px; height:85%;" @contextmenu="contextmenu">
+            <el-scrollbar>
+                <div class="scoll">
+                    <div class="matrix" v-if="startList.length>0">
+                        <div class="problemTitle">启动</div>
+                        <MatrixBlock @on-click="handleDetial" @choose-click="handleClick" :dataList="startList">
+                        </MatrixBlock>
+                    </div>
+                    <div class="matrix" v-if="stopList.length>0">
+                        <div class="problemTitle">停机</div>
+                        <MatrixBlock @on-click="handleDetial" @choose-click="handleClick" :dataList="stopList">
+                        </MatrixBlock>
+                    </div>
+                </div>
+            </el-scrollbar>
+        </div>
+        <div v-if="current===1" class="send" @click="handleSend">发送</div>
+        <div class="success" v-if="showFlag&&current===0">指令发送成功</div>
+    </div>
+    <WindturbineDetailPages v-model="dialogVisible" :showSvg="showSvg" @close="handleClose" :svgWeb="svgWeb"
+        :windturbine="currentWindturbine"></WindturbineDetailPages>
+</template>
+
+<script>
+    import BackgroundData from 'utils/BackgroundData'
+    import WindturbineDetailPages from "../WindturbineDetailPages.vue";
+    import MatrixBlock from "../matrixBlock.vue";
+    import MessageBridge from 'utils/MessageBridge'
+    export default {
+        name: 'gy-card',
+        components: {
+            MatrixBlock,
+            WindturbineDetailPages
+        },
+        created: function () {
+            console.log(this.current);
+            this.initData();
+        },
+        emits: ["parentRun"],
+        props: {
+            title: {
+                type: String,
+                default: '',
+                required: true,
+
+            },
+            height: {
+                type: Number,
+                default: 200,
+            },
+            current: {
+                type: Number,
+            },
+        },
+        data() {
+            return {
+                windturbinelist: {},
+                titleList: [],
+                startList: [],
+                stopList: [],
+                chooseList: [],
+                sendList: [],
+                currentWindturbine: {},
+                dialogVisible: false,
+                showSvg: false,
+                showFlag: false,
+                svgWeb: '',
+                controlErorCodes: [
+                    "控制成功",
+                    "控制命令发送失败",
+                    "无效的控制地址",
+                    "被控设备异常",
+                    "无效的控制功能",
+                    "网络连接错误,检查场站通信",
+                    "控制结果读取超时",
+                    "未知错误",
+                    "控制命令错误",
+                    "收到无法识别数据",
+                    "未读取到数据包",
+                    "未知错误",
+                    "风机操作过频繁",
+                    "风机被挂牌",
+                    "风机操作与风机状态不符",
+                    "需要登录",
+                ],
+            }
+        },
+        computed: {
+            style() {
+                return `width: 100%; height: ${this.height}vh;`
+            },
+        },
+        methods: {
+            initData: function () {
+                var mb = MessageBridge.getInstance();
+                var vs = [{ key: "/topic/suggestion", action: this.suggestion }];
+                var vss = [{ key: "/topic/voice-control", action: this.windturbineMessage }];
+                mb.register(vs);
+                mb.register(vss);
+            },
+            suggestion(msg, headers) {
+                this.titleList = JSON.parse(msg)
+                if (this.current === 0) {
+                    let dateList = []
+                    this.titleList.forEach(item => {
+                        item.operateStyle === 'Start' ? this.windturbinelist[item.windturbineId].controlType = 1 : this.windturbinelist[item.windturbineId].controlType = 2
+                        dateList.push(this.windturbinelist[item.windturbineId])
+                    })
+                    let mss = {}
+                    mss.type = 'send'
+                    setTimeout(() => {
+                        this.menuClicked(mss, dateList, 'automatic')
+                        this.showFlag = false
+                    }, 3000);
+                }
+            },
+            windturbineMessage(msg) {
+                let arr = []
+                if (msg === 'CLOSE') {
+                    arr.push(msg)
+                } else {
+                    arr = msg.split('-')
+                }
+                this.dialogVisible = false
+                this.showSvg = false
+                this.svgWeb = ''
+                console.log(arr);
+                if (arr[0] === 'OPEN_FJ') {
+                    this.currentWindturbine = this.windturbinelist[arr[1]]
+                    this.dialogVisible = true;
+                } else if (arr[0] === 'CLOSE') {
+                    this.dialogVisible = false
+                } else if (arr[0] === 'OPEN_SYZ') {
+                    this.showSvg = true
+                    this.dialogVisible = true
+                    this.svgWeb = arr[1];
+                } else if (arr[0] === 'CONTROL_START' || arr[0] === 'CONTROL_STOP' || arr[0] === 'CONTROL_MAINTAIN') {
+                    let mss = {}
+                    let windturbine = this.windturbinelist[arr[1]]
+                    switch (arr[0]) {
+                        case 'CONTROL_START':
+                            mss.controlType = '1'
+                            break
+                        case 'CONTROL_STOP':
+                            mss.controlType = '2'
+                            break
+                        case 'CONTROL_MAINTAIN':
+                            mss.controlType = '6'
+                            break
+                    }
+                    mss.type = 'send'
+                    this.menuClicked(mss, windturbine)
+                }
+                // else if (arr[0] === 'CONTROL_LOCK_OVERHAUL' || arr[0] === 'CONTROL_LOCK_MAINTAIN' || arr[0] === 'CONTROL_LOCK_LNVOLVED_OVERHAUL' ||
+                //     arr[0] === 'CONTROL_LOCK_LNVOLVED_MAINTAIN' || arr[0] === 'CONTROL_LOCK_LNVOLVED_PG' || arr[0] === 'CONTROL_LOCK_LNVOLVED_WEATHER' || arr[0] === 'CONTROL_UNLOCK') {
+                //     let windturbine = this.windturbinelist[arr[1]]
+                //     switch (arr[0]) {
+                //         case 'CONTROL_LOCK_OVERHAUL':
+                //             this.menuClicked({ type: "lock", value: "CheckLock" }, windturbine);
+                //             break;
+                //         case 'CONTROL_LOCK_MAINTAIN':
+                //             this.menuClicked({ type: "lock", value: "FaultLock" }, windturbine);
+                //             break;
+                //         case 'CONTROL_LOCK_LNVOLVED_OVERHAUL':
+                //             this.menuClicked({ type: "lock", value: "StationCheckLock" }, windturbine);
+                //             break;
+                //         case 'CONTROL_LOCK_LNVOLVED_MAINTAIN':
+                //             this.menuClicked({ type: "lock", value: "StationFaulLock" }, windturbine);
+                //             break;
+                //         case 'CONTROL_LOCK_LNVOLVED_PG':
+                //             this.menuClicked({ type: "lock", value: "StationPowerLineLock" }, windturbine);
+                //             break;
+                //         case 'CONTROL_LOCK_LNVOLVED_WEATHER':
+                //             this.menuClicked({ type: "lock", value: "StationWeatherLock" }, windturbine);
+                //             break;
+                //         case 'CONTROL_UNLOCK':
+                //             this.menuClicked({ type: "lock", value: "UnLock" }, windturbine);
+                //             break;
+                //     }
+                // }
+            },
+            handleClick(values) {
+                if (values.active) {
+                    let showIndex = null
+                    this.chooseList.forEach((item, index) => {
+                        if (item.windturbineId === values.windturbineId) {
+                            showIndex = index
+                        }
+                    })
+                    this.chooseList.splice(showIndex, 1);
+                } else {
+                    this.chooseList.push(values)
+                }
+                this.startList.forEach(item => { if (item.windturbineId === values.windturbineId) { item.active = !item.active } })
+                this.stopList.forEach(item => { if (item.windturbineId === values.windturbineId) { item.active = !item.active } })
+            },
+            handleDetial(itm) {
+                this.dialogVisible = true;
+                this.currentWindturbine = itm;
+            },
+            handleClose() {
+                this.dialogVisible = false
+                this.showSvg = false
+            },
+            handleSend() {
+                if (this.chooseList.length > 0) {
+                    this.menuClicked({ type: "send" });
+                }
+            },
+            /* 右键菜单 */
+            contextmenu() {
+                const { remote } = require("electron");
+                var that = this;
+                const menuTemplate = [
+                    {
+                        label: "发送",
+                        click() {
+                            that.menuClicked({ type: "send" });
+                        },
+                    },
+                    {
+                        label: "挂牌",
+                        submenu: [
+                            {
+                                label: "检修",
+                                click() {
+                                    that.menuClicked({ type: "lock", value: "CheckLock" });
+                                },
+                            },
+                            {
+                                label: "故障维修",
+                                click() {
+                                    that.menuClicked({ type: "lock", value: "FaultLock" });
+                                },
+                            },
+                            {
+                                label: "场内受累检修",
+                                click() {
+                                    that.menuClicked({ type: "lock", value: "StationCheckLock" });
+                                },
+                            },
+                            {
+                                label: "场内受累故障",
+                                click() {
+                                    that.menuClicked({ type: "lock", value: "StationFaulLock" });
+                                },
+                            },
+                            {
+                                label: "场外受累电网",
+                                click() {
+                                    that.menuClicked({
+                                        type: "lock",
+                                        value: "StationPowerLineLock",
+                                    });
+                                },
+                            },
+                            {
+                                label: "场外受累天气",
+                                click() {
+                                    that.menuClicked({ type: "lock", value: "StationWeatherLock" });
+                                },
+                            },
+                        ],
+                    },
+                    // {
+                    //     label: "标注",
+                    //     click() {
+                    //         that.menuClicked({ type: "marking" });
+                    //     },
+                    // },
+                ];
+                const menu = remote.Menu.buildFromTemplate(menuTemplate);
+
+                menu.popup(remote.getCurrentWindow());
+            },
+
+            menuClicked(msg, windturbine, automatic) {
+                var bd = BackgroundData.getInstance();
+                if (!bd.LoginUser) {
+                    this.$notify({
+                        title: "请登录",
+                        message: "控制风机需要先登录！",
+                        type: "warning",
+                        position: "bottom-right",
+                        offset: 60,
+                        duration: 3000,
+                    });
+                    return;
+                }
+
+                if (msg.type == "lock") {
+                    // 挂牌
+                    this.chooseList.forEach(item => {
+                        item.lockType = msg.value;
+                    })
+                    bd.windturbineControl(
+                        this.chooseList,
+                        true,
+                        this.controlSuccess,
+                        this.controlError
+                    );
+                } else if (msg.type == "send") {
+                    // 发送
+                    let sendList = []
+                    if (automatic) {
+                        sendList = windturbine
+                    }
+                    else if (windturbine) {
+                        windturbine.controlType = msg.controlType
+                        sendList.push(windturbine)
+                    } else {
+                        this.chooseList.forEach(item => {
+                            if (item.operateStyle === "Start") {
+                                item.controlType = 1
+                            } else if (item.operateStyle === "Stop") {
+                                item.controlType = 2
+                            }
+                        })
+                        sendList = this.chooseList
+                    }
+                    this.showFlag = true
+                    bd.checkout(sendList);
+                    bd.windturbineControl(
+                        sendList,
+                        false,
+                        this.controlSuccess,
+                        this.controlError
+                    );
+                } else if (msg.type == "marking") {
+                    // 标注
+                    var vvs = this.getSelectedItems();
+                    bd.marking(vvs);
+                }
+                this.clearSelected();
+            },
+            clearSelected() {
+                this.startList.forEach(item => {
+                    item.active = false
+                })
+                this.stopList.forEach(item => {
+                    item.active = false
+                })
+                this.chooseList = []
+            },
+            /* 控制成功 */
+            controlSuccess(msg) {
+                var bd = BackgroundData.getInstance();
+                console.log(msg);
+                if (msg.data|| msg.data !== {}) {
+                    var mss = '';     // 信息
+                    var iserror = false;// 是否有控制错误的风机
+                    for (var v in msg.data) {
+                        var val = msg.data[v];
+                        if (val.errorCode > 0) {
+                            iserror = true;
+                            mss += `${val.windturbineId}  ${this.controlErorCodes[val.errorCode]}\n`;
+                        }
+                    }
+                    var tp = iserror ? "warning" : "success";
+                    var dt = iserror ? 0 : 4500;
+                    if (!iserror) {
+                        mss = "控制成功";
+                    }
+
+                    this.$notify({
+                        title: "控制",
+                        message: mss,
+                        type: tp,
+                        position: "bottom-right",
+                        offset: 60,
+                        duration: 3000,
+                    });
+                } else {
+                    this.$notify({
+                        title: "控制出现错误",
+                        message: '控制失败，请重试',
+                        type: "warning",
+                        position: "bottom-right",
+                        offset: 60,
+                        duration: 3000,
+                    });
+                }
+
+            },
+
+            /* 控制失败 */
+            controlError(err) {
+                this.$notify({
+                    title: "控制出现错误",
+                    message: err.message,
+                    type: "warning",
+                    position: "bottom-right",
+                    offset: 60,
+                    duration: 3000,
+                });
+            },
+        },
+        watch: {
+            "$store.getters.windturbinelist": {
+                deep: true,
+                handler: function (json) {
+                    this.windturbinelist = json
+                    let arr = Object.keys(json).sort()
+                    this.stopList = []
+                    this.startList = []
+                    for (var id of arr) {
+                        var val = json[id];
+                        this.chooseList.forEach(item => {
+                            if (item.windturbineId === val.windturbineId) {
+                                val.active = true
+                            }
+                        })
+                        this.titleList.forEach(item => {
+                            if (item.windturbineId === val.windturbineId) {
+                                val.operateStyle = item.operateStyle
+                                item.operateStyle === "Start" ? this.startList.push(val) : this.stopList.push(val)
+                            }
+                        })
+                    }
+                    let checkoutList = BackgroundData.getInstance().checkouts;
+                    checkoutList.forEach(item => {
+                        let showIndex = null
+                        let starFlag = false
+                        let stopFlag = false
+                        this.startList.forEach((param, index) => {
+                            if (item.windturbineId === param.windturbineId) {
+                                showIndex = index
+                                starFlag = true
+                            }
+                        })
+                        this.stopList.forEach((param, index) => {
+                            if (item.windturbineId === param.windturbineId) {
+                                showIndex = index
+                                stopFlag = true
+                            }
+                        })
+                        starFlag ? this.startList.splice(showIndex, 1) : '';
+                        stopFlag ? this.stopList.splice(showIndex, 1) : '';
+                    })
+                },
+            },
+        },
+    }
+</script>
+
+<style scoped="scoped">
+    .body {
+        border: 1px solid #373737;
+        width: 100%;
+        margin-left: 15px;
+        margin-top: 10px;
+    }
+
+    .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%;
+    }
+
+    .logo {
+        position: absolute;
+        top: 2px;
+        left: 12px;
+    }
+
+    .matrix {
+        margin-left: 32px;
+        margin-right: 10px;
+        padding-bottom: 20px;
+        border-bottom: 1px solid rgba(31, 31, 31, 1);
+    }
+
+    .problemTitle {
+        font-size: 12px;
+        color: #BFBFBF;
+        margin-top: 20px;
+        margin-bottom: 20px;
+    }
+
+    .send {
+        width: 86px;
+        height: 26px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: rgba(84, 183, 90, 1);
+        color: #ffffff;
+        font-size: 14px;
+        position: absolute;
+        bottom: 20px;
+        right: 10px;
+    }
+
+    .success {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 250px;
+        height: 48px;
+        position: absolute;
+        bottom: 20px;
+        right: 20%;
+        border: 1px solid rgba(55, 55, 55, 1);
+        border-radius: 10px;
+        color: #ffffff;
+        font-size: 14px;
+    }
+</style>

src/components/control/controlAllArea.vue

@@ -0,0 +1,641 @@
+<template>
+    <div class="problem" @contextmenu="contextmenu">
+        <div class="body">
+            <img class="logo" src="../../assets/img/logo.png" alt="">
+            <div class="titleBar">
+                <div class="title">设备区</div>
+                <el-select @change="listedChange()" 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 style="margin-top: 20px; margin-left: 20px; height:85%;">
+                <el-scrollbar>
+                    <div class="scoll">
+                        <div class="matrix" v-if="showList.length>0">
+                            <!-- <div class="problemTitle">待启动</div> -->
+                            <MatrixBlock @choose-click="handleClick" @on-click="handleDetails" :dataList="showList">
+                            </MatrixBlock>
+                        </div>
+                    </div>
+                </el-scrollbar>
+            </div>
+        </div>
+        <WindturbineDetailPages v-model="dialogVisible" :showSvg="showSvg" @close="handleClose" :svgWeb="svgWeb"
+            :windturbine="currentWindturbine"></WindturbineDetailPages>
+    </div>
+</template>
+
+<script>
+    import WindturbineDetailPages from "../WindturbineDetailPages.vue";
+    import MatrixBlock from "../matrixBlock.vue";
+    import BackgroundData from 'utils/BackgroundData'
+    import MessageBridge from 'utils/MessageBridge'
+    export default {
+        name: "ProblemArea",
+        components: {
+            WindturbineDetailPages,
+            MatrixBlock,
+        },
+        props: {},
+        data() {
+            return {
+                dataList: [],
+                showList: [],
+                chooseList: [],
+                totleList: [],
+                currentWindturbine: {},
+                dialogVisible: false,
+                showSvg: false,
+                svgWeb: '',
+                windturbinelist: {},
+                options: [
+                    {
+                        value: '0',
+                        label: '问题设备'
+                    },
+                    {
+                        value: '1',
+                        label: '故障'
+                    },
+                    {
+                        value: '2',
+                        label: '维护'
+                    },
+                    {
+                        value: '3',
+                        label: '离线'
+                    },
+                    {
+                        value: '4',
+                        label: '挂牌'
+                    },
+                    {
+                        value: '5',
+                        label: '麻黄山'
+                    },
+                    {
+                        value: '6',
+                        label: '牛首山'
+                    },
+                    {
+                        value: '7',
+                        label: '青山'
+                    },
+                    {
+                        value: '8',
+                        label: '石板泉'
+                    },
+                    {
+                        value: '9',
+                        label: '香山'
+                    },
+                ],
+                selectValue: '0',
+                controlErorCodes: [
+                    "控制成功",
+                    "控制命令发送失败",
+                    "无效的控制地址",
+                    "被控设备异常",
+                    "无效的控制功能",
+                    "网络连接错误,检查场站通信",
+                    "控制结果读取超时",
+                    "未知错误",
+                    "控制命令错误",
+                    "收到无法识别数据",
+                    "未读取到数据包",
+                    "未知错误",
+                    "风机操作过频繁",
+                    "风机被挂牌",
+                    "风机操作与风机状态不符",
+                    "需要登录",
+                ],
+            };
+        },
+        computed: {},
+        created: function () {
+            this.initData();
+        },
+        methods: {
+            /* 右键菜单 */
+            initData: function () {
+                var mb = MessageBridge.getInstance();
+                var vss = [{ key: "/topic/voice-control", action: this.windturbineMessage }];
+                mb.register(vss);
+            },
+            windturbineMessage(msg) {
+                let arr = []
+                if (msg === 'CLOSE') {
+                    arr.push(msg)
+                } else {
+                    arr = msg.split('-')
+                }
+                this.dialogVisible = false
+                this.showSvg = false
+                this.svgWeb = ''
+                console.log(arr);
+                if (arr[0] === 'OPEN_FJ') {
+                    this.currentWindturbine = this.windturbinelist[arr[1]]
+                    this.dialogVisible = true;
+                } else if (arr[0] === 'CLOSE') {
+                    this.dialogVisible = false
+                } else if (arr[0] === 'OPEN_SYZ') {
+                    this.showSvg = true
+                    this.dialogVisible = true
+                    this.svgWeb = arr[1];
+                } else if (arr[0] === 'CONTROL_START' || arr[0] === 'CONTROL_STOP' || arr[0] === 'CONTROL_MAINTAIN') {
+                    let mss = {}
+                    let windturbine = this.windturbinelist[arr[1]]
+                    switch (arr[0]) {
+                        case 'CONTROL_START':
+                        mss.controlType = '1'
+                            break
+                        case 'CONTROL_STOP':
+                        mss.controlType = '2'
+                            break
+                        case 'CONTROL_MAINTAIN':
+                        mss.controlType = '6'
+                            break
+                    }
+                    mss.type = 'send'
+                    this.menuClicked(mss, windturbine)
+                }
+                // else if (arr[0] === 'CONTROL_LOCK_OVERHAUL' || arr[0] === 'CONTROL_LOCK_MAINTAIN' || arr[0] === 'CONTROL_LOCK_LNVOLVED_OVERHAUL' ||
+                //     arr[0] === 'CONTROL_LOCK_LNVOLVED_MAINTAIN' || arr[0] === 'CONTROL_LOCK_LNVOLVED_PG' || arr[0] === 'CONTROL_LOCK_LNVOLVED_WEATHER' || arr[0] === 'CONTROL_UNLOCK') {
+                //     let windturbine = this.windturbinelist[arr[1]]
+                //     switch (arr[0]) {
+                //         case 'CONTROL_LOCK_OVERHAUL':
+                //             this.menuClicked({ type: "lock", value: "CheckLock" }, windturbine);
+                //             break;
+                //         case 'CONTROL_LOCK_MAINTAIN':
+                //             this.menuClicked({ type: "lock", value: "FaultLock" }, windturbine);
+                //             break;
+                //         case 'CONTROL_LOCK_LNVOLVED_OVERHAUL':
+                //             this.menuClicked({ type: "lock", value: "StationCheckLock" }, windturbine);
+                //             break;
+                //         case 'CONTROL_LOCK_LNVOLVED_MAINTAIN':
+                //             this.menuClicked({ type: "lock", value: "StationFaulLock" }, windturbine);
+                //             break;
+                //         case 'CONTROL_LOCK_LNVOLVED_PG':
+                //             this.menuClicked({ type: "lock", value: "StationPowerLineLock" }, windturbine);
+                //             break;
+                //         case 'CONTROL_LOCK_LNVOLVED_WEATHER':
+                //             this.menuClicked({ type: "lock", value: "StationWeatherLock" }, windturbine);
+                //             break;
+                //         case 'CONTROL_UNLOCK':
+                //             this.menuClicked({ type: "lock", value: "UnLock" }, windturbine);
+                //             break;
+                //     }
+                // }
+            },
+            contextmenu() {
+                const remote = require('electron').remote;
+                var that = this;
+                let menuTemplate = []
+                if (this.selectValue === '0' || this.selectValue === '1' || this.selectValue === '2' || this.selectValue === '3' || this.selectValue === '4') {
+                    menuTemplate = [
+                        // {
+                        //     label: "标注",
+                        //     click() {
+                        //         that.menuClicked({ type: "marking" });
+                        //     },
+                        // },
+                        {
+                            label: "挂牌",
+                            submenu: [
+                                {
+                                    label: "检修",
+                                    click() {
+                                        that.menuClicked({ type: "lock", value: "CheckLock" });
+                                    },
+                                },
+                                {
+                                    label: "故障维修",
+                                    click() {
+                                        that.menuClicked({ type: "lock", value: "FaultLock" });
+                                    },
+                                },
+                                {
+                                    label: "场内受累检修",
+                                    click() {
+                                        that.menuClicked({ type: "lock", value: "StationCheckLock" });
+                                    },
+                                },
+                                {
+                                    label: "场内受累故障",
+                                    click() {
+                                        that.menuClicked({ type: "lock", value: "StationFaulLock" });
+                                    },
+                                },
+                                {
+                                    label: "场外受累电网",
+                                    click() {
+                                        that.menuClicked({ type: "lock", value: "StationPowerLineLock" });
+                                    },
+                                },
+                                {
+                                    label: "场外受累天气",
+                                    click() {
+                                        that.menuClicked({ type: "lock", value: "StationWeatherLock" });
+                                    },
+                                },
+                            ],
+                        },
+                        {
+                            label: "取消挂牌",
+                            click() {
+                                that.menuClicked({ type: "lock", value: "UnLock" });
+                            },
+                        },
+                    ];
+                } else {
+                    menuTemplate = [
+                        {
+                            label: "启动",
+                            click() {
+                                that.menuClicked({ type: "send", controlType: '1' });
+                            },
+                        },
+                        {
+                            label: "停机",
+                            click() {
+                                that.menuClicked({ type: "send", controlType: '2' });
+                            },
+                        },
+                        {
+                            label: "复位",
+                            click() {
+                                that.menuClicked({ type: "send", controlType: '5' });
+                            },
+                        },
+                        {
+                            label: "维护",
+                            click() {
+                                that.menuClicked({ type: "send", controlType: '6' });
+                            },
+                        },
+                        {
+                            label: "取消维护",
+                            click() {
+                                that.menuClicked({ type: "send", controlType: '8' });
+                            },
+                        },
+                        {
+                            label: "挂牌",
+                            submenu: [
+                                {
+                                    label: "检修",
+                                    click() {
+                                        that.menuClicked({ type: "lock", value: "CheckLock" });
+                                    },
+                                },
+                                {
+                                    label: "故障维修",
+                                    click() {
+                                        that.menuClicked({ type: "lock", value: "FaultLock" });
+                                    },
+                                },
+                                {
+                                    label: "场内受累检修",
+                                    click() {
+                                        that.menuClicked({ type: "lock", value: "StationCheckLock" });
+                                    },
+                                },
+                                {
+                                    label: "场内受累故障",
+                                    click() {
+                                        that.menuClicked({ type: "lock", value: "StationFaulLock" });
+                                    },
+                                },
+                                {
+                                    label: "场外受累电网",
+                                    click() {
+                                        that.menuClicked({
+                                            type: "lock",
+                                            value: "StationPowerLineLock",
+                                        });
+                                    },
+                                },
+                                {
+                                    label: "场外受累天气",
+                                    click() {
+                                        that.menuClicked({ type: "lock", value: "StationWeatherLock" });
+                                    },
+                                },
+                            ],
+                        },
+                        {
+                            label: "取消挂牌",
+                            click() {
+                                that.menuClicked({ type: 'lock', value: 'UnLock' });
+                            },
+                        },
+                        // {
+                        //     label: "标注",
+                        //     click() {
+                        //         that.menuClicked({ type: "marking" });
+                        //     },
+                        // },
+                    ];
+                }
+
+                const menu = remote.Menu.buildFromTemplate(menuTemplate);
+
+                menu.popup(remote.getCurrentWindow());
+            },
+
+            menuClicked(msg, windturbine) {
+                var bd = BackgroundData.getInstance();
+                if (!bd.LoginUser) {
+                    this.$notify({
+                        title: "请登录",
+                        message: "控制风机需要先登录！",
+                        type: "warning",
+                        position: "bottom-right",
+                        offset: 60,
+                        duration: 3000,
+                    });
+                    return;
+                }
+                if (msg.type == "lock") {
+                    // 挂牌
+                    this.chooseList.forEach(item => {
+                        item.lockType = msg.value;
+                    })
+                    bd.windturbineControl(this.chooseList, true);
+                } else if (msg.type == "send") {
+                    // 发送
+                    let sendList = []
+                    if (windturbine) {
+                        windturbine.controlType = msg.controlType
+                        sendList.push(windturbine)
+                    } else {
+                        this.chooseList.forEach(item => {
+                            item.controlType = Number(msg.controlType)
+                        })
+                        sendList = this.chooseList
+                    }
+
+                    bd.checkout(sendList);
+                    bd.windturbineControl(
+                        sendList,
+                        false,
+                        this.controlSuccess,
+                        this.controlError
+                    );
+                } else if (msg.type == "marking") {
+                    // 标注
+                    bd.marking(this.chooseList);
+                }
+                this.clearSelected();
+            },
+
+            /* 清除所有选择 */
+            clearSelected() {
+                this.chooseList = []
+            },
+            /* 控制成功 */
+            controlSuccess(msg) {
+                console.log(msg);
+                var mss = '';     // 信息
+                var iserror = false;// 是否有控制错误的风机
+                for (var v in msg.data) {
+                    var val = msg.data[v];
+                    if (val.errorCode > 0) {
+                        iserror = true;
+                        mss += `${val.windturbineId}  ${this.controlErorCodes[val.errorCode]}\n`;
+                    }
+                }
+                var tp = iserror ? "warning" : "success";
+                var dt = iserror ? 0 : 4500;
+                if (!iserror) {
+                    mss = "控制成功";
+                }
+
+                this.$notify({
+                    title: "控制",
+                    message: mss,
+                    type: tp,
+                    position: "bottom-right",
+                    offset: 60,
+                    duration: 3000,
+                });
+            },
+
+            /* 控制失败 */
+            controlError(err) {
+                this.$notify({
+                    title: "控制出现错误",
+                    message: err.message,
+                    type: "warning",
+                    position: "bottom-right",
+                    offset: 60,
+                    duration: 3000,
+                });
+            },
+            handleClick(values) {
+                if (values.active) {
+                    let showIndex = null
+                    this.chooseList.forEach((item, index) => {
+                        if (item.windturbineId === values.windturbineId) {
+                            showIndex = index
+                        }
+                    })
+                    this.chooseList.splice(showIndex, 1);
+                } else {
+                    this.chooseList.push(values)
+                }
+                this.showList.forEach(item => { if (item.windturbineId === values.windturbineId) { item.active = !item.active } })
+            },
+            listedChange() {
+                this.chooseList = []
+                this.showList = []
+                this.dataList.forEach(val => {
+                    val.active = false
+                    switch (Number(this.selectValue)) {
+                        case 0:
+                            if (val.status === 5 || val.status === 6 || val.status === 7 || val.lockValue > 0) {
+                                this.showList.push(val)
+                            }
+                            break;
+                        case 1:
+                            val.status === 5 ? this.showList.push(val) : ''
+                            break;
+                        case 2:
+                            val.status === 6 ? this.showList.push(val) : ''
+                            break;
+                        case 3:
+                            val.status === 7 ? this.showList.push(val) : ''
+                            break;
+                        case 4:
+                            val.lockValue > 0 ? this.showList.push(val) : ''
+                            break;
+                        case 5:
+                            val.windturbineId.substring(0, 2) === 'MG' ? this.showList.push(val) : ''
+                            break;
+                        case 6:
+                            val.windturbineId.substring(0, 2) === 'NG' ? this.showList.push(val) : ''
+                            break;
+                        case 7:
+                            val.windturbineId.substring(0, 2) === 'QG' ? this.showList.push(val) : ''
+                            break;
+                        case 8:
+                            val.windturbineId.substring(0, 2) === 'SG' ? this.showList.push(val) : ''
+                            break;
+                        case 9:
+                            val.windturbineId.substring(0, 2) === 'XG' ? this.showList.push(val) : ''
+                            break;
+
+                    }
+                })
+            },
+            handleDetails(itm) {
+                this.dialogVisible = true;
+                this.currentWindturbine = itm;
+            },
+            handleClose() {
+                this.dialogVisible = false
+                this.showSvg = false
+            },
+        },
+        watch: {
+            "$store.getters.windturbinelist": {
+                deep: true,
+                handler: function (json) {
+                    this.windturbinelist = json
+                    var vs = {};
+                    this.dataList = []
+                    this.showList = []
+                    let arr = Object.keys(json).sort()
+                    for (var id of arr) {
+                        var val = json[id];
+                        this.chooseList.forEach(item => {
+                            if (item.windturbineId === val.windturbineId) {
+                                val.active = true
+                            }
+                        })
+                        this.dataList.push(val)
+                        switch (Number(this.selectValue)) {
+                            case 0:
+                                if (val.status === 5 || val.status === 6 || val.status === 7 || val.lockValue > 0) {
+                                    this.showList.push(val)
+                                }
+                                break;
+                            case 1:
+                                val.status === 5 ? this.showList.push(val) : ''
+                                break;
+                            case 2:
+                                val.status === 6 ? this.showList.push(val) : ''
+                                break;
+                            case 3:
+                                val.status === 7 ? this.showList.push(val) : ''
+                                break;
+                            case 4:
+                                val.lockValue > 0 ? this.showList.push(val) : ''
+                                break;
+                            case 5:
+                                val.windturbineId.substring(0, 2) === 'MG' ? this.showList.push(val) : ''
+                                break;
+                            case 6:
+                                val.windturbineId.substring(0, 2) === 'NG' ? this.showList.push(val) : ''
+                                break;
+                            case 7:
+                                val.windturbineId.substring(0, 2) === 'QG' ? this.showList.push(val) : ''
+                                break;
+                            case 8:
+                                val.windturbineId.substring(0, 2) === 'SG' ? this.showList.push(val) : ''
+                                break;
+                            case 9:
+                                val.windturbineId.substring(0, 2) === 'XG' ? this.showList.push(val) : ''
+                                break;
+
+                        }
+                        // if (val.lockValue > 0) {
+                        //     this.listedList.push(val)
+                        // }
+                    }
+                    console.log(this.showList);
+                    let checkoutList = BackgroundData.getInstance().checkouts;
+                    checkoutList.forEach(item => {
+                        let showIndex = null
+                        this.showList.forEach((param, index) => {
+                            if (item.windturbineId === param.windturbineId) {
+                                showIndex = index
+                            }
+                        })
+                        this.showList.splice(showIndex, 1);
+                    })
+                    console.log(this.showList);
+                },
+            },
+        },
+    };
+</script>
+<style scoped>
+    .problem {
+        height: 100%;
+    }
+
+    .body {
+        border: 1px solid #373737;
+        width: 100%;
+        margin-left: 15px;
+        margin-top: 10px;
+        height: 50vh;
+    }
+
+    .body .scoll {
+        height: 91%;
+    }
+
+    .titleBar {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+
+    .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%;
+    }
+
+    .inputs {
+        border: none;
+        width: 174px !important;
+        margin-left: 110px;
+    }
+
+    .el-input__inner {
+        background-color: rgb(100, 100, 100) !important;
+        color: rgb(220, 220, 220) !important;
+        border: 1px solid red !important;
+    }
+
+    .logo {
+        position: absolute;
+        top: 2px;
+        left: 12px;
+    }
+</style>

src/components/control/controlArea.vue

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

src/components/focus/PhotoelectricDetailPages.vue

@@ -0,0 +1,258 @@
+<template>
+	<el-dialog width="55%" @closed="closed()" :show-close="false" class="my-info-dialog">
+		<template #title>
+			<div class="showTitle" @click="initData()">
+				<img class="titleImg" src="../../assets/img/controlcenter/daraTrue.png" alt="">
+				<div class="titles">{{stationName}}</div>
+				<!-- <div class="icon">(麻黄山)</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?data.PowerSet.value:''}}</div>
+					<div class="unit">MW</div>
+				</div>
+				<div class="data">
+					<div class="name">{{data.AgcUp.name}}：</div>
+					<div class="num">{{data.AgcUp.value?data.AgcUp.value:''}}</div>
+					<div class="unit">MW</div>
+				</div>
+				<div class="data">
+					<div class="name">{{data.AgcLower.name}}：</div>
+					<div class="num">{{data.AgcLower.value?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?data.ActualPower.value:''}}</div>
+					<div class="unit">MW</div>
+				</div>
+				<div class="data">
+					<div class="name">{{data.TheoryPower.name}}：</div>
+					<div class="num">{{data.TheoryPower.value?data.TheoryPower.value:''}}</div>
+					<div class="unit">MW</div>
+				</div>
+				<div class="data">
+					<div class="name">{{data.ForecastPower.name}}：</div>
+					<div class="num">{{data.ForecastPower.value?data.ForecastPower.value:''}}</div>
+					<div class="unit">MW</div>
+				</div>
+			</div>
+			<div class="condition">
+				<div class="status">
+					<div class="name">{{data.AgcIn.name}}：{{data.AgcIn.value}}</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>
+			<!-- <div id="main" class="echartsBox"></div> -->
+			<MultipleLineChart height="400px" :units="powerLineChartData.units" :list="powerLineChartData.value"
+				:showLegend="true" />
+		</div>
+	</el-dialog>
+</template>
+
+<script>
+	// import UniformCodes from "../../assets/script/UniformCodes";
+	// import { config } from '../../config';
+	// import axios from 'axios';
+	// import BackgroundData from "../../assets/script/BackgroundData"
+	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: [],
+				},
+				timeData: [],
+				PowerSet: [],
+				ActualPower: [],
+				index: 0,
+				powerLineChartData: {},
+			};
+		},
+		methods: {
+			closed() {
+				//勿删，传递关闭方法
+			},
+			initData(PowerSet, ActualPower) {
+				this.chartData.units = ["(MW)", "(m/s)"];
+				this.chartData.value[0] = {
+					title: "有功设定限值",
+					yAxisIndex: 0,
+					value: []
+				};
+				this.chartData.value[1] = {
+					title: "实发有功",
+					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;
+			}
+		},
+	};
+</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/focusArea.vue

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

src/components/focus/focusCard.vue

@@ -0,0 +1,205 @@
+/* 推荐区 */
+<template>
+	<div style="display: flex;justify-content: flex-start;flex-wrap: wrap;">
+		<!-- <table v-for="(vl , index) in values" :key="vl" @dblclick="sendMsg(vl,index)">
+				<tr>{{vl.stationName}}</tr>
+				<tr>{{vl.content}}</tr>
+				<tr>{{vl.createTime}}</tr>
+			</table> -->
+		<div class="area" v-for="(vl , index) in values" :key="vl" @dblclick="sendMsg(vl,index)">
+			<img class="imgs" src="../../assets/img/RecommendedArea/background.png" alt="">
+			<div class="content">{{vl.content}}</div>
+			<div class="">{{vl.stationName}}</div>
+			<div class="">{{vl.createTime}}</div>
+		</div>
+	</div>
+	<PhotoelectricDetailPages ref="photo" @closed="closed()" :data="dialogData.data"
+		:stationName="dialogData.stationName" v-model="dialogVisible">
+	</PhotoelectricDetailPages>
+</template>
+
+<script>
+	import BackgroundData from "utils/BackgroundData"
+	import { Photoelectric } from "utils/PhotoelectricDetailPages";
+	import PhotoelectricDetailPages from "./PhotoelectricDetailPages.vue"
+	import axios from 'axios';
+	import dayjs from 'dayjs'
+	export default {
+		name: "RecommendedArea",
+		props: ["datas"],
+		data() {
+			return {
+				values: new Array(),
+				dialogVisible: false,
+				dialogData: {
+					data: {
+						PowerSet: '',
+						AgcUp: '',
+						AgcLower: '',
+						ActualPower: '',
+						TheoryPower: '',
+						ForecastPower: '',
+						AgcIn: '',
+						AgcFar: '',
+						SumLock: '',
+						SubLock: '',
+					}
+				},
+				dataMsg: [],
+				interval: '',
+				arrKey: [],
+				timeIndex: 0
+			};
+		},
+		components: {
+			PhotoelectricDetailPages,
+		},
+		created() {
+			this.initData();
+		},
+		methods: {
+			closed() {
+				clearInterval(this.interval);
+			},
+			initData() {
+				setInterval(this.refreshData, 2000);
+			},
+			refreshData() {
+				var bd = BackgroundData.getInstance();
+				var list = new Array();
+				var arr = [],
+					thisKey = ''
+				console.log(bd.Recommends)
+				for (var v in bd.Recommends) {
+					this.arrKey.push(v);
+					thisKey += v + ',';
+				}
+				axios.get(process.env.VUE_APP_ADAPTERURL+`/ts/latest?keys=` + thisKey)
+					.then(msg => {
+						console.log(msg)
+						for (let v in msg.data) {
+							if (msg.data[v].doubleValue ? (msg.data[v].doubleValue === 0) : (!msg.data[v].booleanValue)) {
+								bd.Recommends[v].isActive = true
+							}
+						}
+						for (let rec in bd.Recommends) {
+							if (bd.Recommends[rec].isActive) {
+								list.push(bd.Recommends[rec])
+							}
+						}
+						list.forEach(item =>{
+							item.createTime = dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss')
+						})
+						this.values = list
+					})
+			},
+			sendMsg: function (vl, index) {
+				var that = this;
+				that.ajaxDetail(vl, index);
+				this.timeIndex = 0;
+				that.interval = window.setInterval(function () {
+					that.ajaxDetail(vl, index);
+				}, 3000);
+				that.dialogVisible = true;
+				that.dialogData.stationName = vl.stationName;
+			},
+			ajaxDetail(data, index) {
+				var thisKey = Photoelectric[this.arrKey[index]];
+				thisKey.forEach(item => {
+					if (item.value) {
+						var calc = item.calc ? item.calc : 1;
+						axios.get(process.env.VUE_APP_ADAPTERURL+`/ts/latest?keys=` + item.value)
+							.then(msg => {
+								var msgData = msg.data[item.value];
+								var val = msgData ? msgData.doubleValue ? (msgData.doubleValue * calc).toFixed(2) : (msgData.booleanValue ? 1 : 0) : '';
+								this.dialogData.data[item.tag] = {
+									name: item.name,
+									value: val
+								}
+							})
+					} else {
+						this.dialogData.data[item.tag] = {
+							name: item.name,
+							value: ''
+						}
+					}
+				})
+				if (this.timeIndex == 0) {//一分钟执行一次
+					var date = new Date()
+					var endTs = date.getTime();
+					var starTs = endTs - 28800000;
+
+					const PowerSet = thisKey.find(ele => {
+						return ele.tag == 'PowerSet'
+					});
+
+					const ActualPower = thisKey.find(ele => {
+						return ele.tag == 'ActualPower'
+					});
+					var PowerSetData = [],
+						ActualPowerData = [];
+					axios.get(process.env.VUE_APP_ADAPTERURL+`/ts/history/snap?tagName=` + PowerSet.value + '&startTs=' +
+						starTs +
+						'&endTs=' + endTs).then(res1 => {
+							axios.get(process.env.VUE_APP_ADAPTERURL+`/ts/history/snap?tagName=` + ActualPower.value +
+								'&startTs=' + starTs + '&endTs=' + endTs).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++;
+				console.log(this.timeIndex)
+			},
+		},
+	};
+</script>
+<style scoped>
+	/* table {
+		background-image: url("../../assets/img/RecommendedArea/background.png");
+		text-align: center;
+		font-size: 12px;
+		background-size: 110px;
+		margin-left: 10px;
+		margin-top: 10px;
+		padding-top: 10px;
+		background-repeat: no-repeat;
+		color: #ffffff;
+	} */
+	.imgs{
+		/* width: 70px;
+		height: 66px; */
+	}
+	.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

@@ -0,0 +1,464 @@
+<template>
+  <div class="chart" :id="id"></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+
+export default {
+  name: "multiple-line-chart",
+  componentName: "multiple-line-chart",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "13.889vh",
+    },
+    // 数据
+    list: {
+      type: Array,
+      default: () => [
+        {
+          title: "日发电量",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "1",
+              value: 1,
+            },
+            {
+              text: "2",
+              value: 2,
+            },
+            {
+              text: "3",
+              value: 1,
+            },
+            {
+              text: "4",
+              value: 4,
+            },
+            {
+              text: "5",
+              value: 6,
+            },
+            {
+              text: "6",
+              value: 2,
+            },
+            {
+              text: "7",
+              value: 3,
+            },
+            {
+              text: "8",
+              value: 8,
+            },
+            {
+              text: "9",
+              value: 3,
+            },
+            {
+              text: "10",
+              value: 2,
+            },
+            {
+              text: "11",
+              value: 5,
+            },
+            {
+              text: "12",
+              value: 8,
+            },
+            {
+              text: "13",
+              value: 3,
+            },
+            {
+              text: "14",
+              value: 9,
+            },
+            {
+              text: "15",
+              value: 3,
+            },
+            {
+              text: "16",
+              value: 2,
+            },
+            {
+              text: "17",
+              value: 1,
+            },
+            {
+              text: "18",
+              value: 3,
+            },
+            {
+              text: "19",
+              value: 4,
+            },
+            {
+              text: "20",
+              value: 9,
+            },
+            {
+              text: "21",
+              value: 2,
+            },
+            {
+              text: "22",
+              value: 1,
+            },
+            {
+              text: "23",
+              value: 2,
+            },
+            {
+              text: "24",
+              value: 3,
+            },
+            {
+              text: "25",
+              value: 3,
+            },
+            {
+              text: "26",
+              value: 4,
+            },
+            {
+              text: "27",
+              value: 9,
+            },
+            {
+              text: "28",
+              value: 7,
+            },
+            {
+              text: "29",
+              value: 4,
+            },
+            {
+              text: "30",
+              value: 1,
+            },
+            {
+              text: "31",
+              value: 2,
+            },
+          ],
+        },
+        {
+          title: "上网电量",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "1",
+              value: 1,
+            },
+            {
+              text: "2",
+              value: 2,
+            },
+            {
+              text: "3",
+              value: 1,
+            },
+            {
+              text: "4",
+              value: 3,
+            },
+          ],
+        },
+        {
+          title: "购网电量",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "1",
+              value: 1,
+            },
+          ],
+        },
+        {
+          title: "风速",
+          yAxisIndex: 1,
+          value: [
+            {
+              text: "1",
+              value: 100,
+            },
+            {
+              text: "2",
+              value: 200,
+            },
+            {
+              text: "1",
+              value: 100,
+            },
+            {
+              text: "2",
+              value: 400,
+            },
+          ],
+        },
+      ],
+    },
+    // 单位
+    units: {
+      type: Array,
+      default: () => ["(MW)", "(风速)"],
+    },
+    showLegend: {
+      type: Boolean,
+      default: false,
+    },
+    hoverType: {
+      type: String,
+      default: "item",
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+      color: ["#05bb4c", "#1D6AEB"],
+    };
+  },
+  computed: {
+    datas() {
+      return this.list.map((t) => {
+        return t.value;
+      });
+    },
+    legend() {
+      return this.list.map((t) => {
+        return t.title;
+      });
+    },
+    xdata() {
+      if (this.list.length > 0)
+        return this.list[0].value.map((t) => {
+          return t.text;
+        });
+      return [];
+    },
+    series() {
+      let result = [];
+
+      this.list.forEach((value, index) => {
+        result.push({
+          name: value.title,
+          type: "line",
+          smooth: true,
+          showSymbol: false,
+          zlevel: index,
+          lineStyle: {
+            normal: {
+              color: this.color[index],
+              width: 1,
+            },
+            // emphasis: {
+            //   color: this.color[index],
+            // },
+          },
+          // areaStyle: {
+          //   normal: {
+          //     color:
+          //       index == 0
+          //         ? new echarts.graphic.LinearGradient(
+          //             0,
+          //             0,
+          //             0,
+          //             1,
+          //             [
+          //               {
+          //                 offset: 0,
+          //                 color: this.hexToRgba(this.color[index], 0.3),
+          //               },
+          //               {
+          //                 offset: 1,
+          //                 color: this.hexToRgba(this.color[index], 0.1),
+          //               },
+          //             ],
+          //             false
+          //           )
+          //         : "transparent",
+          //     shadowColor: this.hexToRgba(this.color[index], 0.1),
+          //     shadowBlur: 10,
+          //   },
+          //   emphasis: {
+          //     color: new echarts.graphic.LinearGradient(
+          //       0,
+          //       0,
+          //       0,
+          //       1,
+          //       [
+          //         {
+          //           offset: 0,
+          //           color: this.hexToRgba(this.color[index], 0.3),
+          //         },
+          //         {
+          //           offset: 1,
+          //           color: this.hexToRgba(this.color[index], 0.1),
+          //         },
+          //       ],
+          //       false
+          //     ),
+          //     shadowColor: this.hexToRgba(this.color[index], 0.1),
+          //     shadowBlur: 10,
+          //   },
+          // },
+          tooltip: {
+            show: true,
+            position: [10, 10],
+          },
+          yAxisIndex: value.yAxisIndex,
+          data: value.value.map((t) => {
+            return t.value;
+          }),
+        });
+      });
+
+      return result;
+    },
+    yAxis() {
+      let result = [];
+      this.units.forEach((value, index) => {
+        result.push({
+          type: "value",
+          name: value,
+          axisLabel: {
+            formatter: "{value}",
+            fontSize: 14,
+          },
+          axisLine: {
+            show: false,
+          },
+          //分格线
+          splitLine: {
+            show: index == 0,
+            lineStyle: {
+              color: '#606769',
+              type: "dashed",
+            },
+          },
+        });
+      });
+
+      return result;
+    },
+  },
+  methods: {
+    hexToRgba(hex, opacity) {
+      let rgbaColor = "";
+      let reg = /^#[\da-f]{6}$/i;
+      if (reg.test(hex)) {
+        rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt("0x" + hex.slice(3, 5))},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
+      }
+      return rgbaColor;
+    },
+    resize() {},
+    initChart() {
+      let chart = echarts.init(this.$el);
+
+      let option = {
+        color: this.color,
+        tooltip: {
+          trigger: this.hoverType,
+          axisPointer:
+            this.hoverType != "item"
+              ? {
+                  type: "cross",
+                }
+              : {},
+          backgroundColor: "rgba(0,0,0,0.4)",
+          borderColor: '#606769',
+          textStyle: {
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        legend: {
+          show: this.showLegend,
+          data: this.legend,
+          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: {
+              interval:60,
+              showMinLabel: true,
+              showMaxLabel: true,
+              formatter: "{value}",
+              fontSize: 14,
+              textStyle: {
+                color: '#606769',
+              },
+            },
+            axisLine: {
+              show: false,
+            },
+            data: this.xdata,
+          },
+        ],
+        yAxis: this.yAxis,
+        series: this.series,
+      };
+      chart.clear();
+      chart && option && chart.setOption(option);
+      this.resize = function() {
+        chart.resize();
+      };
+      window.addEventListener("resize", this.resize);
+      chart.resize();
+    },
+  },
+  created() {
+    this.$nextTick(() => {
+      this.id = "pie-chart-photo";
+    });
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.initChart();
+    });
+  },
+  updated() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  unmounted() {
+    window.removeEventListener("resize", this.resize);
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>

src/components/matrixBlock.vue

@@ -0,0 +1,662 @@
+<template>
+    <div style="display: flex; flex-direction: row; flex-wrap: wrap;">
+        <div :class="item.active?'box-' + item.status:'unbox-' + item.status" v-for="(item, index) in dataList"
+            :key="index" @click="onSelectHandler(item)" @dblclick="sendMsg(item)">
+            <div :class="item.active?'left-' + item.status:'unleft-' + item.status">
+                <div>{{ item.windturbineId.slice(0, 2) }}</div>
+                <div>{{ item.windturbineId.slice(5) }}</div>
+            </div>
+            <div :class="item.active?'right-' + item.status:'unright-' + item.status">
+                <div class="rightrow">{{ item.windSpeed.toFixed(2) }} m/s</div>
+                <div class="rightrow">{{ item.power.toFixed(2) }} kw</div>
+                <div class="rightrow">{{ item.rollSpeed.toFixed(2) }} rpm</div>
+            </div>
+        </div>
+    </div>
+    <WindturbineDetailPages v-model="dialogVisible" :showSvg="showSvg" @close="handleClose"
+        :windturbine="currentWindturbine"></WindturbineDetailPages>
+</template>
+<script>
+    import WindturbineDetailPages from "./WindturbineDetailPages.vue";
+    export default {
+        components: {
+            WindturbineDetailPages,
+        },
+        props: {
+            dataList: {
+                type: Array,
+                default: () => {
+                    return []
+                },
+            },
+            area: String,
+
+        },
+        mounted() {
+            this.dataList.forEach(item => {
+                if (item.modelId.indexOf("105") >= 0) {
+                    item.rollSpeed *= 9.55;
+                }
+            })
+        },
+        methods: {
+            onSelectHandler(values) {
+                if (this.area === 'problem') {
+                    this.$emit('problem-click', values);
+                } else {
+                    this.$emit('choose-click', values);
+                }
+                // values.active = !values.active;
+            },
+            sendMsg: function (itm) {
+                // this.dialogVisible = true;
+                this.$emit('on-click', itm);
+                // this.currentWindturbine = itm;
+            },
+            handleClose() {
+                this.dialogVisible = false
+                this.showSvg = false
+            },
+        },
+        data() {
+            return {
+                dialogVisible: false,
+                showSvg: false,
+                currentWindturbine: {},
+            };
+        },
+    }
+</script>
+<style scoped>
+    .box-0 {
+        width: 125px;
+        height: 50px;
+        color: #ffffff;
+        border: 1px solid rgba(255, 255, 255, 1);
+        background-color: rgba(255, 255, 255, .05);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-right: 5px;
+        margin-top: 5px;
+    }
+
+    .unbox-0 {
+        width: 125px;
+        height: 50px;
+        color: #ffffff;
+        border: 1px solid rgba(255, 255, 255, 1);
+        background-color: rgba(255, 255, 255, .2);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-right: 5px;
+        margin-top: 5px;
+    }
+
+    .left-0 {
+        width: 40%;
+        height: 100%;
+        font-size: 12px;
+        color: rgba(255, 255, 255, 1);
+        font-weight: 600;
+        line-height: 20px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .unleft-0 {
+        width: 40%;
+        height: 100%;
+        font-size: 12px;
+        color: rgba(255, 255, 255, 1);
+        font-weight: 600;
+        line-height: 20px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .right-0 {
+        width: 60%;
+        height: 100%;
+        font-size: 12px;
+        color: rgba(255, 255, 255, 1);
+        line-height: 15px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .unright-0 {
+        width: 60%;
+        height: 100%;
+        font-size: 12px;
+        color: rgba(255, 255, 255, 1);
+        line-height: 15px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .box-1 {
+        width: 125px;
+        height: 50px;
+        color: #ffffff;
+        border: 1px solid rgba(197, 48, 200, 1);
+        background-color: rgba(197, 48, 200, .05);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-right: 5px;
+        margin-top: 5px;
+    }
+
+    .unbox-1 {
+        width: 125px;
+        height: 50px;
+        color: #ffffff;
+        border: 1px solid rgba(197, 48, 200, 1);
+        background-color: rgba(197, 48, 200, .2);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-right: 5px;
+        margin-top: 5px;
+    }
+
+    .left-1 {
+        width: 40%;
+        height: 100%;
+        font-size: 12px;
+        color: rgba(197, 48, 200, 1);
+        font-weight: 600;
+        line-height: 20px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .unleft-1 {
+        width: 40%;
+        height: 100%;
+        font-size: 12px;
+        color: rgba(197, 48, 200, 1);
+        font-weight: 600;
+        line-height: 20px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .right-1 {
+        width: 60%;
+        height: 100%;
+        font-size: 12px;
+        color: rgba(197, 48, 200, 1);
+        line-height: 15px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .unright-1 {
+        width: 60%;
+        height: 100%;
+        font-size: 12px;
+        color: rgba(197, 48, 200, 1);
+        line-height: 15px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .box-2 {
+        width: 125px;
+        height: 50px;
+        color: #ffffff;
+        border: 1px solid rgba(05, 187, 76, 1);
+        background-color: rgba(05, 187, 76, .05);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-right: 5px;
+        margin-top: 5px;
+    }
+
+    .unbox-2 {
+        width: 125px;
+        height: 50px;
+        color: #ffffff;
+        border: 1px solid rgba(05, 187, 76, 1);
+        background-color: rgba(05, 187, 76, .2);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-right: 5px;
+        margin-top: 5px;
+    }
+
+    .left-2 {
+        width: 40%;
+        height: 100%;
+        font-size: 12px;
+        color: rgba(05, 187, 76, 1);
+        font-weight: 600;
+        line-height: 20px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .unleft-2 {
+        width: 40%;
+        height: 100%;
+        font-size: 12px;
+        color: rgba(05, 187, 76, 1);
+        font-weight: 600;
+        line-height: 20px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .right-2 {
+        width: 60%;
+        height: 100%;
+        font-size: 12px;
+        color: rgba(05, 187, 76, 1);
+        line-height: 15px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .unright-2 {
+        width: 60%;
+        height: 100%;
+        font-size: 12px;
+        color: rgba(05, 187, 76, 1);
+        line-height: 15px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .box-3 {
+        width: 125px;
+        height: 50px;
+        color: #ffffff;
+        border: 1px solid rgba(05, 187, 76, 1);
+        background-color: rgba(05, 187, 76, .05);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-right: 5px;
+        margin-top: 5px;
+    }
+
+    .unbox-3 {
+        width: 125px;
+        height: 50px;
+        color: #ffffff;
+        border: 1px solid rgba(05, 187, 76, 1);
+        background-color: rgba(05, 187, 76, .2);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-right: 5px;
+        margin-top: 5px;
+    }
+
+    .left-3 {
+        width: 40%;
+        height: 100%;
+        font-size: 12px;
+        color: rgba(05, 187, 76, 1);
+        font-weight: 600;
+        line-height: 20px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .unleft-3 {
+        width: 40%;
+        height: 100%;
+        font-size: 12px;
+        color: rgba(05, 187, 76, 1);
+        font-weight: 600;
+        line-height: 20px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .right-3 {
+        width: 60%;
+        height: 100%;
+        font-size: 12px;
+        color: rgba(05, 187, 76, 1);
+        line-height: 15px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .unright-3 {
+        width: 60%;
+        height: 100%;
+        font-size: 12px;
+        color: rgba(05, 187, 76, 1);
+        line-height: 15px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .box-4 {
+        width: 125px;
+        height: 50px;
+        color: #ffffff;
+        border: 1px solid rgba(75, 85, 174, 1);
+        background-color: rgba(75, 85, 174, .05);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-right: 5px;
+        margin-top: 5px;
+    }
+
+    .unbox-4 {
+        width: 125px;
+        height: 50px;
+        color: #ffffff;
+        border: 1px solid rgba(75, 85, 174, 1);
+        background-color: rgba(75, 85, 174, .2);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-right: 5px;
+        margin-top: 5px;
+    }
+
+    .left-4 {
+        width: 40%;
+        height: 100%;
+        font-size: 12px;
+        color: rgba(75, 85, 174, 1);
+        font-weight: 600;
+        line-height: 20px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .unleft-4 {
+        width: 40%;
+        height: 100%;
+        font-size: 12px;
+        color: rgba(75, 85, 174, 1);
+        font-weight: 600;
+        line-height: 20px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .right-4 {
+        width: 60%;
+        height: 100%;
+        font-size: 12px;
+        color: rgba(75, 85, 174, 1);
+        line-height: 15px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .unright-4 {
+        width: 60%;
+        height: 100%;
+        font-size: 12px;
+        color: rgba(75, 85, 174, 1);
+        line-height: 15px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .box-5 {
+        width: 125px;
+        height: 50px;
+        color: #ffffff;
+        border: 1px solid rgba(186, 50, 55, 1);
+        background-color: rgba(186, 50, 55, .05);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-right: 5px;
+        margin-top: 5px;
+    }
+
+    .unbox-5 {
+        width: 125px;
+        height: 50px;
+        color: #ffffff;
+        border: 1px solid rgba(186, 50, 55, 1);
+        background-color: rgba(186, 50, 55, .2);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-right: 5px;
+        margin-top: 5px;
+    }
+
+    .left-5 {
+        width: 40%;
+        height: 100%;
+        font-size: 12px;
+        color: rgba(186, 50, 55, 1);
+        font-weight: 600;
+        line-height: 20px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .unleft-5 {
+        width: 40%;
+        height: 100%;
+        font-size: 12px;
+        color: rgba(186, 50, 55, 1);
+        font-weight: 600;
+        line-height: 20px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .right-5 {
+        width: 60%;
+        height: 100%;
+        font-size: 12px;
+        color: rgba(186, 50, 55, 1);
+        line-height: 15px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .unright-5 {
+        width: 60%;
+        height: 100%;
+        font-size: 12px;
+        color: rgba(186, 50, 55, 1);
+        line-height: 15px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .box-6 {
+        width: 125px;
+        height: 50px;
+        color: #ffffff;
+        border: 1px solid rgba(225, 125, 36, 1);
+        background-color: rgba(225, 125, 36, .05);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-right: 5px;
+        margin-top: 5px;
+    }
+
+    .unbox-6 {
+        width: 125px;
+        height: 50px;
+        color: #ffffff;
+        border: 1px solid rgba(225, 125, 36, 1);
+        background-color: rgba(225, 125, 36, .2);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-right: 5px;
+        margin-top: 5px;
+    }
+
+    .left-6 {
+        width: 40%;
+        height: 100%;
+        font-size: 12px;
+        color: rgba(225, 125, 36, 1);
+        font-weight: 600;
+        line-height: 20px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .unleft-6 {
+        width: 40%;
+        height: 100%;
+        font-size: 12px;
+        color: rgba(225, 125, 36, 1);
+        font-weight: 600;
+        line-height: 20px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .right-6 {
+        width: 60%;
+        height: 100%;
+        font-size: 12px;
+        color: rgba(225, 125, 36, 1);
+        line-height: 15px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .unright-6 {
+        width: 60%;
+        height: 100%;
+        font-size: 12px;
+        color: rgba(225, 125, 36, 1);
+        line-height: 15px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .box-7 {
+        width: 125px;
+        height: 50px;
+        color: #ffffff;
+        border: 1px solid rgba(96, 103, 105, 1);
+        background-color: rgba(96, 103, 105, .05);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-right: 5px;
+        margin-top: 5px;
+    }
+
+    .unbox-7 {
+        width: 125px;
+        height: 50px;
+        color: #ffffff;
+        border: 1px solid rgba(96, 103, 105, 1);
+        background-color: rgba(96, 103, 105, .2);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-right: 5px;
+        margin-top: 5px;
+    }
+
+    .left-7 {
+        width: 40%;
+        height: 100%;
+        font-size: 12px;
+        color: rgba(96, 103, 105, 1);
+        font-weight: 600;
+        line-height: 20px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .unleft-7 {
+        width: 40%;
+        height: 100%;
+        font-size: 12px;
+        color: rgba(96, 103, 105, 1);
+        font-weight: 600;
+        line-height: 20px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .right-7 {
+        width: 60%;
+        height: 100%;
+        font-size: 12px;
+        color: rgba(96, 103, 105, 1);
+        line-height: 15px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .unright-7 {
+        width: 60%;
+        height: 100%;
+        font-size: 12px;
+        color: rgba(96, 103, 105, 1);
+        line-height: 15px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+</style>

src/components/modeControl/modeControl.vue

@@ -0,0 +1,292 @@
+<template>
+    <div class="body">
+        <div class="control">
+            <div :class="current===0?'smart_on':'smart'" @click="ChangeBar(0)">智能</div>
+            <div :class="current===1?'recommend_on':'recommend'" @click="ChangeBar(1)">推荐</div>
+            <div :class="current===2?'manual_on':'manual'" @click="ChangeBar(2)">手动</div>
+        </div>
+        <div class="dataArea">
+            <div class="dataBlock">
+                <div class="dataName">风能利用率</div>
+                <div class="numerical">
+                    <div class="data">
+                        <div class="values">{{datas.windEnergyRate}}</div>
+                        <div class="unit">%</div>
+                    </div>
+                    <img v-if="winFlag === 1" class="images" src="../../assets/img/type/up.png" alt="">
+                    <img v-if="winFlag === 2" class="images" src="../../assets/img/type/down.png" alt="">
+                    <div v-if="winFlag === 0" class="images_none"></div>
+                </div>
+            </div>
+            <div class="dataBlock">
+                <div class="dataName">曲线跟随率</div>
+                <div class="numerical">
+                    <div class="data">
+                        <div class="values">{{datas.curveFollowingRate}}</div>
+                        <div class="unit">%</div>
+                    </div>
+                    <img v-if="curveFlag === 1" class="images" src="../../assets/img/type/up.png" alt="">
+                    <img v-if="curveFlag === 2" class="images" src="../../assets/img/type/down.png" alt="">
+                    <div v-if="curveFlag === 0" class="images_none"></div>
+                </div>
+            </div>
+            <div class="dataBlock">
+                <div class="dataName">场用电率</div>
+                <div class="numerical">
+                    <div class="data">
+                        <div class="values">{{datas.fieldElectricityRate}}</div>
+                        <div class="unit">%</div>
+                    </div>
+                    <img v-if="fieldFlag === 1" class="images" src="../../assets/img/type/up.png" alt="">
+                    <img v-if="fieldFlag === 2" class="images" src="../../assets/img/type/down.png" alt="">
+                    <div v-if="fieldFlag === 0" class="images_none"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import BackgroundData from 'utils/BackgroundData'
+    import api from "api/index";
+    export default {
+        props: {
+            current: {
+                type: Number,
+            },
+        },
+        data() {
+            return {
+                current: 1,
+                datas: {},
+                winFlag: 0,
+                curveFlag: 0,
+                fieldFlag: 0,
+            };
+        },
+        created() {
+            this.getData(),
+                this.refreshTimer = setInterval(this.getData, 600000);
+        },
+        mounted() {
+            this.current = this.$props.current
+            console.log(this.current);
+        },
+        methods: {
+            getData() {
+                api.getOverview().then(res => {
+                    if (res) {
+                        let data = res.data
+                        this.datas.curveFollowingRate ?
+                            (this.datas.curveFollowingRate > data.curveFollowingRate) ?
+                                (this.curveFlag = 2)
+                                : (this.datas.curveFollowingRate = data.curveFollowingRate) ? (this.curveFlag = 0) : (this.curveFlag = 1)
+                            : (this.curveFlag = 0)
+                        this.datas.fieldElectricityRate ?
+                            (this.datas.fieldElectricityRate > data.fieldElectricityRate) ?
+                                (this.fieldFlag = 2)
+                                : (this.datas.fieldElectricityRate = data.fieldElectricityRate) ? (this.fieldFlag = 0) : (this.fieldFlag = 1)
+                            : (this.fieldFlag = 0)
+                        this.datas.windEnergyRate ?
+                            (this.datas.windEnergyRate > data.windEnergyRate) ?
+                                (this.winFlag = 2)
+                                : (this.datas.windEnergyRate = data.windEnergyRate) ? (this.winFlag = 0) : (this.winFlag = 1)
+                            : (this.winFlag = 0)
+                        data.curveFollowingRate = data.curveFollowingRate.toFixed(2)
+                        data.fieldElectricityRate = data.fieldElectricityRate.toFixed(2)
+                        data.windEnergyRate = data.windEnergyRate.toFixed(2)
+                        this.datas = data
+                    }
+                })
+            },
+            ChangeBar(values) {
+                var bd = BackgroundData.getInstance();
+                if (!bd.LoginUser) {
+                    this.$notify({
+                        title: "请登录",
+                        message: "切换模式需要先登录！",
+                        type: "warning",
+                        position: "bottom-right",
+                        offset: 60,
+                        duration: 3000,
+                    });
+                    return;
+                }
+                if (this.current !== values) {
+                    if ((this.current === 0 && values === 1) || (this.current === 1 && values === 0)) {
+                        this.current = values
+                        this.$emit('clicks', values);
+                    } else if (values === 2 && this.current !== 2) {
+                        this.$router.push('/ManualPage?current=' + values)
+                        // this.current = values
+                    } else {
+                        this.$router.push('/?current=' + values)
+                    }
+                }
+            },
+            controls(value) {
+                this.current = value
+            }
+        },
+    }
+</script>
+<style scoped>
+    .body {
+        width: 100%;
+        height: 18.5vh;
+        /* background-color: #ffffff; */
+        margin-left: 15px;
+        margin-top: 10px;
+        border-left: 1px solid #373737;
+        border-right: 1px solid #373737;
+        border-bottom: 1px solid #373737;
+    }
+
+    .control {
+        display: flex;
+        flex-direction: row-reverse;
+        align-items: center;
+        font-size: 14px;
+        color: #ffffff;
+        margin-right: 5px;
+    }
+
+    .manual {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 29px;
+        width: 86px;
+        border-left: 1px solid rgba(51, 51, 51, 1);
+        border-top: 1px solid rgba(51, 51, 51, 1);
+        border-bottom: 1px solid rgba(51, 51, 51, 1);
+        border-top-left-radius: 15px;
+        border-bottom-left-radius: 15px;
+    }
+
+    .manual_on {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 29px;
+        width: 86px;
+        border-left: 1px solid rgba(37, 116, 219, 1);
+        border-top: 1px solid rgba(37, 116, 219, 1);
+        border-bottom: 1px solid rgba(37, 116, 219, 1);
+        border-top-left-radius: 15px;
+        border-bottom-left-radius: 15px;
+        background-color: rgba(37, 116, 219, 1);
+    }
+
+    .recommend {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 29px;
+        width: 86px;
+        border-top: 1px solid rgba(51, 51, 51, 1);
+        border-bottom: 1px solid rgba(51, 51, 51, 1);
+    }
+
+    .recommend_on {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 29px;
+        width: 86px;
+        border-top: 1px solid rgba(37, 116, 219, 1);
+        border-bottom: 1px solid rgba(37, 116, 219, 1);
+        background-color: rgba(37, 116, 219, 1);
+    }
+
+    .smart {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 29px;
+        width: 86px;
+        border-right: 1px solid rgba(51, 51, 51, 1);
+        border-top: 1px solid rgba(51, 51, 51, 1);
+        border-bottom: 1px solid rgba(51, 51, 51, 1);
+        border-top-right-radius: 15px;
+        border-bottom-right-radius: 15px;
+    }
+
+    .smart_on {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 29px;
+        width: 86px;
+        border-right: 1px solid rgba(37, 116, 219, 1);
+        border-top: 1px solid rgba(37, 116, 219, 1);
+        border-bottom: 1px solid rgba(37, 116, 219, 1);
+        border-top-right-radius: 15px;
+        border-bottom-right-radius: 15px;
+        background-color: rgba(37, 116, 219, 1);
+    }
+
+    .dataArea {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+
+    .dataBlock {
+        width: 29%;
+        height: 82px;
+        background-color: #242424;
+        border: 1px solid #3D3D3D;
+        margin-left: 18px;
+        margin-top: 35px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .dataName {
+        font-size: 16px;
+        color: #FFFFFF;
+        margin-left: 26px;
+        margin-bottom: 6px;
+    }
+
+    .numerical {
+        display: flex;
+        flex-direction: row;
+        color: #05BB4C;
+        align-items: center;
+        margin-left: 26px;
+    }
+
+    .data {
+        display: flex;
+        flex-direction: row;
+        color: #05BB4C;
+        align-items: baseline;
+    }
+
+    .values {
+        font-size: 16px;
+    }
+
+    .unit {
+        font-size: 12px;
+        margin-left: 8px;
+    }
+
+    .images {
+        width: 18px;
+        height: 18px;
+        margin-left: 10px;
+        margin-top: 3px;
+    }
+
+    .images_none {
+        width: 18px;
+        height: 3px;
+        background-color: #FFA500;
+        margin-left: 10px;
+        border-radius: 1px;
+        margin-top: -3px;
+    }
+</style>

src/components/problem/ProblemArea.vue

@@ -0,0 +1,148 @@
+/* 问题区 */
+<template>
+  <div class="problem" >
+    <AreaCard title="问题区" height="85"></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: {
+      /* 右键菜单 */
+      contextmenu() {
+        const { remote } = require("electron");
+        var that = this;
+        const menuTemplate = [
+          {
+            label: "标注",
+            click() {
+              that.menuClicked({ type: "marking" });
+            },
+          },
+          {
+            label: "挂牌",
+            submenu: [
+              {
+                label: "检修",
+                click() {
+                  that.menuClicked({ type: "lock", value: "CheckLock" });
+                },
+              },
+              {
+                label: "故障维修",
+                click() {
+                  that.menuClicked({ type: "lock", value: "FaultLock" });
+                },
+              },
+              {
+                label: "场内受累检修",
+                click() {
+                  that.menuClicked({ type: "lock", value: "StationCheckLock" });
+                },
+              },
+              {
+                label: "场内受累故障",
+                click() {
+                  that.menuClicked({ type: "lock", value: "StationFaulLock" });
+                },
+              },
+              {
+                label: "场外受累电网",
+                click() {
+                  that.menuClicked({ type: "lock", value: "StationPowerLineLock" });
+                },
+              },
+              {
+                label: "场外受累天气",
+                click() {
+                  that.menuClicked({ type: "lock", value: "StationWeatherLock" });
+                },
+              },
+            ],
+          },
+          {
+            label: "取消挂牌",
+            click() {
+              that.menuClicked({ type: "lock", value: "UnLock" });
+            },
+          },
+        ];
+        const menu = remote.Menu.buildFromTemplate(menuTemplate);
+
+        menu.popup(remote.getCurrentWindow());
+      },
+
+      menuClicked(msg) {
+        var bd = BackgroundData.getInstance();
+        if (!bd.LoginUser) {
+          this.$notify({
+            title: "请登录",
+            message: "控制风机需要先登录！",
+            type: "warning",
+            position: "bottom-right",
+            offset: 60,
+            duration: 3000,
+          });
+          return;
+        }
+        if (msg.type == "lock") {
+          // 挂牌
+          var los = this.getSelectedItems();
+          for (var id in los) {
+            los[id].lockType = msg.value;
+          }
+          bd.windturbineControl(los, true);
+        } else if (msg.type == "marking") {
+          // 标注
+          var vs = this.getSelectedItems();
+          bd.marking(vs);
+        }
+        this.clearSelected();
+      },
+
+      /* 获取选中的项目 */
+      getSelectedItems() {
+        var ls = new Array();
+        this.$refs.malfunction.outputSelectedItems(ls);
+        this.$refs.maintain.outputSelectedItems(ls);
+        this.$refs.offline.outputSelectedItems(ls);
+        this.$refs.lock.outputSelectedItems(ls);
+        return ls;
+      },
+
+      /* 清除所有选择 */
+      clearSelected() {
+        this.$refs.malfunction.clearSelected();
+        this.$refs.maintain.clearSelected();
+        this.$refs.offline.clearSelected();
+        this.$refs.lock.clearSelected();
+      },
+    },
+  };
+</script>
+<style scoped>
+  .problem {
+    height: 100%;
+  }
+</style>

src/components/problem/ProblemMatrixCard.vue

@@ -0,0 +1,562 @@
+<template>
+  <div class="main" v-if="values.length > 0">
+    <div>{{ title }}</div>
+    <div class="content">
+      <div class="card" v-for="(item, index) in values" :key="index" :class="
+          item.active
+            ? 'card-select-' + item.status
+            : 'card-unselect-' + item.status
+        " @click="onSelectHandler(item)" @dblclick="sendMsg(item)">
+        <div class="card-left" :class="
+            item.active
+              ? 'card-left-select-' + item.status
+              : 'card-left-unselect-' + item.status
+          ">
+          <div>{{ item.windturbineId.slice(0, 2) }}</div>
+          <div>{{ item.windturbineId.slice(5) }}</div>
+        </div>
+        <div class="card-right" :class="
+            item.active
+              ? 'card-right-select-' + item.status
+              : 'card-right-unselect-' + item.status
+          ">
+          <div class="rightrow">{{ item.windSpeed.toFixed(2) }} m/s</div>
+          <div class="rightrow">{{ item.power.toFixed(2) }} kw</div>
+          <div class="rightrow">{{ item.rollSpeed.toFixed(2) }} rpm</div>
+        </div>
+      </div>
+    </div>
+    <div class="bottom"></div>
+  </div>
+  <!-- <WindturbineDetailPages v-model="dialogVisible" :windturbine="currentWindturbine"></WindturbineDetailPages> -->
+</template>
+
+<script>
+  // import WindturbineDetailPages from "../WindturbineDetailPages.vue";
+  export default {
+    name: "ControlMatrixCard",
+    props: {
+      // dateClick,
+      title: String,
+      type: Number,
+      datas: Object,
+      flag: {
+        type: Boolean,
+        default: false,
+      }
+    },
+    data() {
+      return {
+        values: [],
+        dialogVisible: false,
+        currentWindturbine: {},
+        cacheFlag: false,
+      };
+    },
+    components: {
+      // WindturbineDetailPages,
+    },
+    methods: {
+      
+      // 点击卡片事件
+      onSelectHandler(item) {
+        item.active = !item.active;
+      },
+      sendMsg: function (itm) {
+        if (this.flag) {
+          this.$emit("showWindows", itm);
+        } else {
+          this.dialogVisible = true;
+          this.currentWindturbine = itm;
+        }
+      },
+      filter(value, windturbineId) {
+        var array = [];
+        var flag = false;
+        for (var i = 0; i < value.length; i++) {
+          if (value[i].windturbineId == windturbineId) {
+            flag = true;
+            array.push(flag); // 风机是否已经存在
+            array.push(i); // 风机在values数组的位置
+            array.push(value[i].active); // 当前风机是否被选中
+            break;
+          }
+        }
+        return array;
+      },
+      addCard(val) {
+        var active = false;
+        var array = this.filter(this.values, val.windturbineId);
+        if (!array[0]) {
+          // 维护
+          val.active = active;
+          if (val.modelId.indexOf("105") >= 0) {
+            val.rollSpeed *= 9.55;
+          }
+          this.values.push(val);
+        } else {
+          val.active = array[2];
+          this.values.splice(array[1], 1, val);
+        }
+      },
+      /* 获取选中的项目 */
+      getSelectedItems() {
+        var ls = new Array();
+        this.values.forEach((item) => {
+          if (item.active) {
+            ls.push(item);
+          }
+        });
+        return ls;
+      },
+      /* 将选中的项目填充到数组中 */
+      outputSelectedItems(ls) {
+        this.values.forEach((item) => {
+          if (item.active && !this.isHas(item, ls)) {
+            ls.push(item);
+          }
+        });
+      },
+
+      /* 清除选中的项目 */
+      clearSelected() {
+        this.values.forEach((item) => (item.active = false));
+      },
+
+      isHas(item, ls) {
+        for (var id in ls) {
+          if (ls[id].windturbineId == item.windturbineId) {
+            return true;
+          }
+        }
+        return false;
+      },
+
+      clear(vs) {
+        var ll = new Array();
+        this.values.forEach((item) => {
+          var it = vs[item.windturbineId];
+          if (typeof it === "undefined") {
+            ll.push(item);
+          }
+        });
+        for (var v1 in ll) {
+          var ind = this.values.indexOf(ll[v1]);
+          if (ind < 0) continue;
+          this.values.splice(ind, 1);
+        }
+      },
+      dateClick(type){
+        console.log(this.cacheDate);
+        var vs = {};
+        var address = ''
+          switch (type) {
+            case 0:
+              address = 'MG'
+              break;
+            case 1:
+              address = 'NG'
+              break;
+            case 2:
+              address = 'QG'
+              break;
+            case 3:
+              address = 'SG'
+              break;
+            case 4:
+              address = 'XG'
+              break;
+          }
+          let arr = Object.keys(this.cacheDate).sort()
+          for (var id of arr) {
+            var val = this.cacheDate[id];
+            if (val.windturbineId.substring(0, 2) === address) {
+                this.addCard(val);
+                vs[val.windturbineId] = 0;
+              }
+          }
+          this.clear(vs);
+      },
+    },
+    watch: {
+      "$store.getters.windturbinelist": {
+        deep: true,
+        handler: function (json) {
+          var vs = {};
+          var address = ''
+          switch (this.type) {
+            case 0:
+              address = 'MG'
+              break;
+            case 1:
+              address = 'NG'
+              break;
+            case 2:
+              address = 'QG'
+              break;
+            case 3:
+              address = 'SG'
+              break;
+            case 4:
+              address = 'XG'
+              break;
+          }
+          if (this.flag && !this.cacheFlag){
+            this.cacheDate = json
+            this.cacheFlag = true
+          }
+          let arr = Object.keys(json).sort()
+          for (var id of arr) {
+            var val = json[id];
+            if (this.flag) {
+              if (val.windturbineId.substring(0, 2) === address) {
+                this.addCard(val);
+                vs[val.windturbineId] = 0;
+              }
+            } else {
+              if (val.status == this.type) {
+                this.addCard(val);
+                vs[val.windturbineId] = 0;
+              }
+              if (this.type < 0 && val.lockValue) {
+                this.addCard(val);
+                vs[val.windturbineId] = 0;
+              }
+            }
+          }
+          // console.log(this.values);
+          this.clear(vs);
+        },
+      },
+    },
+  };
+</script>
+
+<style scoped>
+  .rightrow {
+    margin-right: 3px;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  .bottom {
+    background-color: #292929;
+    width: 100%;
+    height: 2px;
+    margin-top: 5px;
+  }
+
+  .main {
+    margin: 0 5px 15px 5px;
+  }
+
+  /*  最外层卡片 */
+  .card {
+    width: 112px;
+    height: 49px;
+    font-size: 12px;
+    margin-left: 3px;
+    margin-top: 4px;
+    display: flex;
+    flex-direction: row;
+    cursor: pointer;
+    /* border: 2px solid rgb(75, 85, 174); */
+  }
+
+  /*  卡片左边部分 */
+  .card-left {
+    width: 25px;
+    margin: 3px;
+    font-size: 14px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    /* background-color: rgb(75, 85, 174); */
+  }
+
+  /* 卡片右边部分 */
+  .card-right {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: flex-end;
+    padding-right: 3px;
+    /* border-left: 2px dashed rgb(75, 85, 174); */
+  }
+
+  /* ***********颜色************ */
+  /* *********************** */
+  /*  最外层卡片选中和未选中 */
+  .card-select-0 {
+    border: 2px solid rgb(255, 255, 255, 0.5);
+  }
+
+  .card-unselect-0 {
+    border: 2px solid rgb(255, 255, 255);
+  }
+
+  /*  左边卡片选中和未选中 */
+  .card-left-select-0 {
+    background-color: rgb(255, 255, 255, 0.5);
+    color: rgb(0, 0, 0, 0.5);
+  }
+
+  .card-left-unselect-0 {
+    background-color: rgb(255, 255, 255, .5);
+    color: rgb(0, 0, 0);
+  }
+
+  /*  右边卡片选中和未选中 */
+  .card-right-select-0 {
+    border-left: 2px dashed rgb(255, 255, 255, 0.5);
+  }
+
+  .card-right-unselect-0 {
+    border-left: 2px dashed rgb(255, 255, 255, .5);
+    background-color: rgb(255, 255, 255, .15);
+  }
+
+  /* ***********颜色************ */
+  /* *********************** */
+  /*  最外层卡片选中和未选中 */
+  .card-select-1 {
+    border: 2px solid rgb(197, 48, 200, 0.5);
+  }
+
+  .card-unselect-1 {
+    border: 2px solid rgb(197, 48, 200);
+  }
+
+  .card-select-1 {
+    border: 2px solid rgb(197, 48, 200, 0.5);
+  }
+
+  /*  左边卡片选中和未选中 */
+  .card-left-select-1 {
+    background-color: rgb(197, 48, 200, 0.5);
+  }
+
+  .card-left-unselect-1 {
+    background-color: rgb(197, 48, 200, .5);
+  }
+
+  /*  右边卡片选中和未选中 */
+  .card-right-select-1 {
+    border-left: 2px dashed rgb(197, 48, 200, 0.5);
+  }
+
+  .card-right-unselect-1 {
+    border-left: 2px dashed rgb(197, 48, 200, .5);
+    background-color: rgb(197, 48, 200, .15);
+  }
+
+  /* ***********颜色************ */
+  /* *********************** */
+  /*  最外层卡片选中和未选中 */
+  .card-select-2 {
+    border: 2px solid rgb(05, 187, 76, 0.5);
+  }
+
+  .card-unselect-2 {
+    border: 2px solid rgb(05, 187, 76);
+  }
+
+  .card-select-2 {
+    border: 2px solid rgb(05, 187, 76, 0.5);
+  }
+
+  /*  左边卡片选中和未选中 */
+  .card-left-select-2 {
+    background-color: rgb(05, 187, 76, 0.5);
+  }
+
+  .card-left-unselect-2 {
+    background-color: rgb(05, 187, 76, .5);
+  }
+
+  /*  右边卡片选中和未选中 */
+  .card-right-select-2 {
+    border-left: 2px dashed rgb(05, 187, 76, 0.5);
+  }
+
+  .card-right-unselect-2 {
+    border-left: 2px dashed rgb(05, 187, 76, .5);
+    background-color: rgb(05, 187, 76, .15);
+  }
+
+  /* ***********颜色************ */
+  /* *********************** */
+  /*  最外层卡片选中和未选中 */
+  .card-select-3 {
+    border: 2px solid rgb(05, 187, 76, 0.5);
+  }
+
+  .card-unselect-3 {
+    border: 2px solid rgb(05, 187, 76);
+  }
+
+  .card-select-3 {
+    border: 2px solid rgb(05, 187, 76, 0.5);
+  }
+
+  /*  左边卡片选中和未选中 */
+  .card-left-select-3 {
+    background-color: rgb(05, 187, 76, 0.5);
+  }
+
+  .card-left-unselect-3 {
+    background-color: rgb(05, 187, 76, .5);
+  }
+
+  /*  右边卡片选中和未选中 */
+  .card-right-select-3 {
+    border-left: 2px dashed rgb(05, 187, 76, 0.5);
+  }
+
+  .card-right-unselect-3 {
+    border-left: 2px dashed rgb(05, 187, 76, .5);
+    background-color: rgb(05, 187, 76, .15);
+  }
+
+  /* ***********颜色************ */
+  /* *********************** */
+  /*  最外层卡片选中和未选中 */
+  .card-select-4 {
+    border: 2px solid rgb(75, 85, 174, 0.5);
+  }
+
+  .card-unselect-4 {
+    border: 2px solid rgb(75, 85, 174);
+  }
+
+  .card-select-4 {
+    border: 2px solid rgb(75, 85, 174, 0.5);
+  }
+
+  /*  左边卡片选中和未选中 */
+  .card-left-select-4 {
+    background-color: rgb(75, 85, 174, 0.5);
+  }
+
+  .card-left-unselect-4 {
+    background-color: rgb(75, 85, 174, .5);
+  }
+
+  /*  右边卡片选中和未选中 */
+  .card-right-select-4 {
+    border-left: 2px dashed rgb(75, 85, 174, 0.5);
+  }
+
+  .card-right-unselect-4 {
+    border-left: 2px dashed rgb(75, 85, 174, .5);
+    background-color: rgb(75, 85, 174, .15);
+  }
+
+  /* ***********颜色************ */
+  /* *********************** *
+/*  最外层卡片选中和未选中 */
+  .card-select-5 {
+    border: 2px solid rgb(186, 50, 55, 0.5);
+  }
+
+  .card-unselect-5 {
+    border: 2px solid rgb(186, 50, 55);
+  }
+
+  .card-select-5 {
+    border: 2px solid rgb(186, 50, 55, 0.5);
+  }
+
+  /*  左边卡片选中和未选中 */
+  .card-left-select-5 {
+    background-color: rgb(186, 50, 55, 0.5);
+  }
+
+  .card-left-unselect-5 {
+    background-color: rgb(186, 50, 55, .5);
+  }
+
+  /*  右边卡片选中和未选中 */
+  .card-right-select-5 {
+    border-left: 2px dashed rgb(186, 50, 55, 0.5);
+  }
+
+  .card-right-unselect-5 {
+    border-left: 2px dashed rgb(186, 50, 55, .5);
+    background-color: rgb(186, 50, 55, .15);
+  }
+
+  /* ***********颜色************ */
+  /* *********************** *
+/*  最外层卡片选中和未选中 */
+  .card-select-6 {
+    border: 2px solid rgb(225, 125, 36, 0.5);
+  }
+
+  .card-unselect-6 {
+    border: 2px solid rgb(225, 125, 36);
+  }
+
+  .card-select-6 {
+    border: 2px solid rgb(225, 125, 36, 0.5);
+  }
+
+  /*  左边卡片选中和未选中 */
+  .card-left-select-6 {
+    background-color: rgb(225, 125, 36, 0.5);
+  }
+
+  .card-left-unselect-6 {
+    background-color: rgb(225, 125, 36, .5);
+  }
+
+  /*  右边卡片选中和未选中 */
+  .card-right-select-6 {
+    border-left: 2px dashed rgb(225, 125, 36, 0.5);
+  }
+
+  .card-right-unselect-6 {
+    border-left: 2px dashed rgb(225, 125, 36, .5);
+    background-color: rgb(225, 125, 36, .15);
+  }
+
+  /* ***********颜色************ */
+  /* *********************** *
+/*  最外层卡片选中和未选中 */
+  .card-select-7 {
+    border: 2px solid rgb(96, 103, 105, 0.5);
+  }
+
+  .card-unselect-7 {
+    border: 2px solid rgb(96, 103, 105);
+  }
+
+  .card-select-7 {
+    border: 2px solid rgb(96, 103, 105, 0.5);
+  }
+
+  /*  左边卡片选中和未选中 */
+  .card-left-select-7 {
+    background-color: rgb(96, 103, 105, 0.5);
+  }
+
+  .card-left-unselect-7 {
+    background-color: rgb(96, 103, 105, .5);
+  }
+
+  /*  右边卡片选中和未选中 */
+  .card-right-select-7 {
+    border-left: 2px dashed rgb(96, 103, 105, 0.5);
+  }
+
+  .card-right-unselect-7 {
+    border-left: 2px dashed rgb(96, 103, 105, .5);
+    background-color: rgb(96, 103, 105, .15);
+  }
+</style>

src/components/problem/areaCard.vue

@@ -0,0 +1,795 @@
+/* 自定义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" :style="style">
+        <img class="logo" src="../../assets/img/logo.png" alt="">
+        <div class="title">{{ title }}</div>
+        <div style="margin-top: 50px; height: 91%;" @contextmenu="contextmenu">
+            <el-scrollbar>
+                <div class="scoll">
+                    <div class="matrix" v-if="faultList.length>0">
+                        <div class="problemTitle">故障</div>
+                        <MatrixBlock area="problem" @problem-click="handleClick" @on-click="handleDetails"
+                            :dataList="faultList"></MatrixBlock>
+                    </div>
+                    <div class="matrix" v-if="maintainList.length>0">
+                        <div class="problemTitle">维护</div>
+                        <MatrixBlock area="problem" @problem-click="handleClick" @on-click="handleDetails"
+                            :dataList="maintainList"></MatrixBlock>
+                    </div>
+                    <div class="matrix" v-if="offlineList.length>0">
+                        <div class="problemTitle">离线</div>
+                        <MatrixBlock area="problem" @problem-click="handleClick" @on-click="handleDetails"
+                            :dataList="offlineList"></MatrixBlock>
+                    </div>
+                    <div class="matrix" v-if="listedList.length>0">
+                        <div class="problemTitle">挂牌</div>
+                        <MatrixBlock area="problem" @problem-click="handleClick" @on-click="handleDetails"
+                            :dataList="listedList"></MatrixBlock>
+                    </div>
+                </div>
+            </el-scrollbar>
+        </div>
+    </div>
+    <WindturbineDetailPages v-model="dialogVisible" :showSvg="showSvg" @close="handleClose"
+        :windturbine="currentWindturbine"></WindturbineDetailPages>
+</template>
+
+<script>
+    import BackgroundData from 'utils/BackgroundData'
+    import WindturbineDetailPages from "../WindturbineDetailPages.vue";
+    import MatrixBlock from "../matrixBlock.vue";
+    /**
+     * todo 拖动
+     * todo 控制区
+     *
+     * 动态值:
+     * 1. gy-card-area-label中的 height,margin-top
+     * 2. gy-card-circle-yellow中的颜色
+     * 3. gy-card-content-25 中的高度
+     *
+     * 使用事例:
+     * <gy-card title="校验区" area-style="check" circle-style="green" content-style="44">
+     * <div>动态内容</div>
+     * </gy-card>
+     */
+    export default {
+        name: 'gy-card',
+        components: {
+            WindturbineDetailPages,
+            MatrixBlock
+        },
+        emits: ["parentRun"],
+        props: {
+            title: {
+                type: String,
+                default: '校验区',
+                required: true
+            },
+            height: {
+                type: Number,
+                default: 200,
+            },
+            areaStyle: {
+                type: String,
+                default: 'check',
+                required: true
+            },
+            circleStyle: {
+                type: String,
+                default: 'green',
+                required: true
+            },
+            contentStyle: {
+                type: String,
+                default: '44',
+                required: true
+            },
+            showFlag: {
+                type: Boolean,
+                default: false,
+            }
+        },
+        data() {
+            return {
+                aaa: '3',
+                dialogVisible: false,
+                currentWindturbine: {},
+                values: [],
+                hover: false,
+                big: false,
+                current: 0,
+                faultList: [],
+                maintainList: [],
+                offlineList: [],
+                listedList: [],
+                chooseList: [],
+                totleList: [],
+                titleList: [
+                    {
+                        id: 0,
+                        title: '麻黄山',
+                    },
+                    {
+                        id: 1,
+                        title: '牛首山',
+                    },
+                    {
+                        id: 2,
+                        title: '青山',
+                    },
+                    {
+                        id: 3,
+                        title: '石板泉',
+                    },
+                    {
+                        id: 4,
+                        title: '香山',
+                    },
+                ],
+                currentWindturbine: {},
+                showSvg: false,
+                controlErorCodes: [
+                    "控制成功",
+                    "控制命令发送失败",
+                    "无效的控制地址",
+                    "被控设备异常",
+                    "网络连接错误,检查场站通信",
+                    "控制结果读取超时",
+                    "未知错误",
+                    "控制命令错误",
+                    "收到无法识别数据",
+                    "未读取到数据包",
+                    "未知错误",
+                    "风机操作过频繁",
+                    "风机被挂牌",
+                    "风机操作与风机状态不符",
+                    "需要登录",
+                ],
+            }
+        },
+        computed: {
+            style() {
+                return `width: 100%; height: ${this.height}vh;`
+            },
+            areaClass() {
+                if (this.big) {
+                    return `gy-card-area-big`;
+                } else {
+                    return `gy-card-area-${this.areaStyle}`;
+                }
+            },
+            circleClass() {
+                return `gy-card-circle gy-card-circle-${this.circleStyle}`;
+            },
+            contentClass() {
+                if (this.big) {
+                    return `gy-card-content-big`;
+                } else {
+                    return `gy-card-content-${this.contentStyle}`;
+                }
+            },
+            headerClass() {
+                if (this.hover) {
+                    return `gy-card-header-hover`;
+                } else {
+                    return `gy-card-header`;
+                }
+            }
+        },
+        methods: {
+            handleClick(values) {
+                if (values.active) {
+                    let showIndex = null
+                    this.chooseList.forEach((item, index) => {
+                        if (item.windturbineId === values.windturbineId) {
+                            showIndex = index
+                        }
+                    })
+                    this.chooseList.splice(showIndex, 1);
+                } else {
+                    this.chooseList.push(values)
+                }
+                let flag = false
+                this.faultList.forEach(item => { if (item.windturbineId === values.windturbineId) { item.active = !item.active, flag = true } })
+                flag ? '' : this.maintainList.forEach(item => { if (item.windturbineId === values.windturbineId) { item.active = !item.active, flag = true } })
+                flag ? '' : this.offlineList.forEach(item => { if (item.windturbineId === values.windturbineId) { item.active = !item.active, flag = true } })
+                flag ? '' : this.listedList.forEach(item => { if (item.windturbineId === values.windturbineId) { item.active = !item.active } })
+            },
+            /* 右键菜单 */
+            contextmenu() {
+                const { remote } = require("electron");
+                var that = this;
+                const menuTemplate = [
+                    // {
+                    //     label: "标注",
+                    //     click() {
+                    //         that.menuClicked({ type: "marking" });
+                    //     },
+                    // },
+                    {
+                        label: "挂牌",
+                        submenu: [
+                            {
+                                label: "检修",
+                                click() {
+                                    that.menuClicked({ type: "lock", value: "CheckLock" });
+                                },
+                            },
+                            {
+                                label: "故障维修",
+                                click() {
+                                    that.menuClicked({ type: "lock", value: "FaultLock" });
+                                },
+                            },
+                            {
+                                label: "场内受累检修",
+                                click() {
+                                    that.menuClicked({ type: "lock", value: "StationCheckLock" });
+                                },
+                            },
+                            {
+                                label: "场内受累故障",
+                                click() {
+                                    that.menuClicked({ type: "lock", value: "StationFaulLock" });
+                                },
+                            },
+                            {
+                                label: "场外受累电网",
+                                click() {
+                                    that.menuClicked({ type: "lock", value: "StationPowerLineLock" });
+                                },
+                            },
+                            {
+                                label: "场外受累天气",
+                                click() {
+                                    that.menuClicked({ type: "lock", value: "StationWeatherLock" });
+                                },
+                            },
+                        ],
+                    },
+                    {
+                        label: "取消挂牌",
+                        click() {
+                            that.menuClicked({ type: "lock", value: "UnLock" });
+                        },
+                    },
+                ];
+                const menu = remote.Menu.buildFromTemplate(menuTemplate);
+
+                menu.popup(remote.getCurrentWindow());
+            },
+            menuClicked(msg) {
+                var bd = BackgroundData.getInstance();
+                if (!bd.LoginUser) {
+                    this.$notify({
+                        title: "请登录",
+                        message: "控制风机需要先登录！",
+                        type: "warning",
+                        position: "bottom-right",
+                        offset: 60,
+                        duration: 3000,
+                    });
+                    return;
+                }
+                if (msg.type == "lock") {
+                    // 挂牌
+                    this.chooseList.forEach(item => {
+                        item.lockType = msg.value;
+                    })
+                    bd.windturbineControl(
+                        this.chooseList,
+                        true,
+                        this.controlSuccess,
+                        this.controlError
+                    );
+                } else if (msg.type == "send") {
+                    // 发送
+                    bd.checkout(this.chooseList);
+                    bd.windturbineControl(
+                        this.chooseList,
+                        false,
+                        this.controlSuccess,
+                        this.controlError
+                    );
+                } else if (msg.type == "marking") {
+                    // 标注
+                    bd.marking(this.chooseList);
+                }
+                this.clearSelected();
+            },
+            /* 清除所有选择 */
+            clearSelected() {
+                this.chooseList = [];
+            },
+            /* 控制成功 */
+            controlSuccess(msg) {
+                console.log(msg);
+                var mss = '';     // 信息
+                var iserror = false;// 是否有控制错误的风机
+                for (var v in msg.data) {
+                    var val = msg.data[v];
+                    if (val.errorCode > 0) {
+                        iserror = true;
+                        mss += `${val.windturbineId}  ${this.controlErorCodes[val.errorCode]}\n`;
+                    }
+                }
+                var tp = iserror ? "warning" : "success";
+                var dt = iserror ? 0 : 4500;
+                if (!iserror) {
+                    mss = "控制成功";
+                }
+
+                this.$notify({
+                    title: "控制",
+                    message: mss,
+                    type: tp,
+                    position: "bottom-right",
+                    offset: 60,
+                    duration: 3000,
+                });
+            },
+
+            /* 控制失败 */
+            controlError(err) {
+                this.$notify({
+                    title: "控制出现错误",
+                    message: err.message,
+                    type: "warning",
+                    position: "bottom-right",
+                    offset: 60,
+                    duration: 3000,
+                });
+            },
+            filter(value, windturbineId) {
+                var array = [];
+                var flag = false;
+                for (var i = 0; i < value.length; i++) {
+                    if (value[i].windturbineId == windturbineId) {
+                        flag = true;
+                        array.push(flag); // 风机是否已经存在
+                        array.push(i); // 风机在values数组的位置
+                        array.push(value[i].active); // 当前风机是否被选中
+                        break;
+                    }
+                }
+                return array;
+            },
+            changeTitle(id) {
+                this.current = id
+                this.$refs.malfunction.dateClick(id)
+            },
+            addCard(val) {
+                var active = false;
+                var array = this.filter(this.values, val.windturbineId);
+                if (!array[0]) {
+                    // 维护
+                    val.active = active;
+                    if (val.modelId.indexOf("105") >= 0) {
+                        val.rollSpeed *= 9.55;
+                    }
+                    this.values.push(val);
+                } else {
+                    val.active = array[2];
+                    this.values.splice(array[1], 1, val);
+                }
+                console.log(this.values)
+            },
+            clear(vs) {
+                var ll = new Array();
+                this.values.forEach((item) => {
+                    var it = vs[item.windturbineId];
+                    if (typeof it === "undefined") {
+                        ll.push(item);
+                    }
+                });
+                for (var v1 in ll) {
+                    var ind = this.values.indexOf(ll[v1]);
+                    if (ind < 0) continue;
+                    this.values.splice(ind, 1);
+                }
+            },
+            handleDetails(itm) {
+                this.dialogVisible = true;
+                this.currentWindturbine = itm;
+            },
+            handleClose() {
+                this.dialogVisible = false
+                this.showSvg = false
+            },
+        },
+        watch: {
+            "$store.getters.windturbinelist": {
+                deep: true,
+                handler: function (json) {
+                    var vs = {};
+                    this.faultList = []
+                    this.maintainList = []
+                    this.offlineList = []
+                    this.listedList = []
+                    let arr = Object.keys(json).sort()
+                    for (var id of arr) {
+                        var val = json[id];
+                        this.chooseList.forEach(item => {
+                            if (item.windturbineId === val.windturbineId) {
+                                val.active = true
+                            }
+                        })
+                        this.totleList.push(val)
+                        switch (val.status) {
+                            case 5:
+                                this.faultList.push(val)
+                                break;
+                            case 6:
+                                this.maintainList.push(val)
+                                break;
+                            case 7:
+                                this.offlineList.push(val)
+                                break;
+                        }
+                        if (val.lockValue > 0) {
+                            this.listedList.push(val)
+                        }
+                    }
+                    console.log(this.faultList);
+                    //   this.clear(vs);
+                },
+            },
+        },
+    }
+</script>
+
+<style scoped="scoped">
+    .body {
+        border: 1px solid #373737;
+        width: 100%;
+        margin-left: 15px;
+        margin-top: 10px;
+    }
+
+    .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%;
+    }
+
+    .logo {
+        position: absolute;
+        top: 2px;
+        left: 12px;
+    }
+
+    .matrix {
+        margin-left: 32px;
+        margin-right: 10px;
+        padding-bottom: 20px;
+        border-bottom: 1px solid rgba(31, 31, 31, 1);
+    }
+
+    .problemTitle {
+        font-size: 12px;
+        color: #BFBFBF;
+        margin-top: 20px;
+        margin-bottom: 20px;
+    }
+
+    .gy-card-header {
+        position: relative;
+        height: 40px;
+        background-color: #292929;
+        color: white;
+        box-sizing: border-box;
+    }
+
+    .gy-card-content-89 {
+        position: relative;
+        height: calc(89vh - 50px);
+        background-color: #000000;
+        color: white;
+        box-sizing: border-box;
+        border-radius: 7px;
+    }
+
+    .gy-card-content-44 {
+        position: relative;
+        height: calc(44vh - 50px);
+        background-color: #000000;
+        color: white;
+        box-sizing: border-box;
+        border-radius: 7px;
+    }
+
+    .gy-card-content-37 {
+        position: relative;
+        height: calc(37vh - 50px);
+        background-color: #000000;
+        color: white;
+        box-sizing: border-box;
+        border-radius: 7px;
+    }
+
+    .gy-card-content-25 {
+        position: relative;
+        height: calc(25vh - 50px);
+        background-color: #000000;
+        color: white;
+        box-sizing: border-box;
+        border-radius: 7px;
+    }
+
+    .gy-card-circle {
+        position: relative;
+        top: 7px;
+        display: inline-block;
+        width: 7px;
+        height: 7px;
+        -moz-border-radius: 50%;
+        -webkit-border-radius: 50%;
+        border-radius: 50%;
+    }
+
+    .gy-card-circle-green {
+        background-color: #008000;
+    }
+
+    .gy-card-circle-yellow {
+        background-color: #ffff00;
+    }
+
+    .gy-card-title {
+        position: relative;
+        top: 10px;
+        left: 10px;
+    }
+
+    .gy-card-decoration01 {
+        position: absolute;
+        right: 80px;
+    }
+
+    .gy-card-decoration02 {
+        position: absolute;
+        top: 20px;
+        right: 20px;
+    }
+
+    .gy-card-area-problem {
+        position: relative;
+        height: 89vh;
+        background-color: #292929;
+        border-radius: 7px;
+        margin: 0px;
+        padding-top: 0;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-bottom: 10px;
+        box-sizing: border-box;
+    }
+
+    .gy-card-area-alarm {
+        position: relative;
+        height: 25vh;
+        margin-top: 10px;
+        background-color: #292929;
+        border-radius: 7px;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-bottom: 10px;
+        box-sizing: border-box;
+    }
+
+    .gy-card-area-check {
+        position: relative;
+        height: 44vh;
+        background-color: #292929;
+        border-radius: 7px;
+        margin-top: 10px;
+        padding-top: 0;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-bottom: 10px;
+        box-sizing: border-box;
+    }
+
+    .gy-card-area-control {
+        position: relative;
+        width: 100%;
+        height: 44vh;
+        background-color: #292929;
+        border-radius: 7px;
+        margin: 0px;
+        padding-top: 0;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-bottom: 10px;
+        box-sizing: border-box;
+    }
+
+    .gy-card-area-label {
+        position: relative;
+        height: 25vh;
+        margin-top: 10px;
+        background-color: #292929;
+        border-radius: 7px;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-bottom: 10px;
+        box-sizing: border-box;
+    }
+
+    .gy-card-area-recommended {
+        position: relative;
+        height: 37vh;
+        background-color: #292929;
+        border-radius: 7px;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-bottom: 10px;
+        box-sizing: border-box;
+    }
+
+    .gy-card-header-hover {
+        position: relative;
+        height: 40px;
+        background-color: #292929;
+        color: white;
+        box-sizing: border-box;
+    }
+
+    .gy-card-area-problem:hover {
+        position: relative;
+        height: 89vh;
+        background-color: #292929;
+        border-radius: 7px;
+        margin: 0px;
+        padding-top: 0;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-bottom: 10px;
+        box-sizing: border-box;
+    }
+
+    .gy-card-area-alarm:hover {
+        position: relative;
+        height: 25vh;
+        margin-top: 10px;
+        background-color: #292929;
+        border-radius: 7px;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-bottom: 10px;
+        box-sizing: border-box;
+    }
+
+    .gy-card-area-label:hover {
+        position: relative;
+        height: 25vh;
+        margin-top: 10px;
+        background-color: #292929;
+        border-radius: 7px;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-bottom: 10px;
+        box-sizing: border-box;
+    }
+
+    .gy-card-area-recommended:hover {
+        position: relative;
+        height: 37vh;
+        background-color: #292929;
+        border-radius: 7px;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-bottom: 10px;
+        box-sizing: border-box;
+    }
+
+
+    .gy-card-area-big {
+        position: fixed;
+        top: 0px;
+        left: 0px;
+        width: 100vw;
+        height: 100vh;
+        background-color: #292929;
+        border-radius: 7px;
+        margin: 0px;
+        padding-top: 0;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-bottom: 10px;
+        box-sizing: border-box;
+        z-index: 900;
+    }
+
+    .gy-card-content-big {
+        position: relative;
+        height: calc(100vh - 50px);
+        background-color: #000000;
+        color: white;
+        box-sizing: border-box;
+        border-radius: 7px;
+    }
+
+    .el-scrollbar__wrap {
+        overflow: scroll;
+        width: 110%;
+        height: 120%;
+    }
+
+    ::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+    }
+
+    .scroll {
+        color: #ffffff;
+        min-height: 300px;
+        height: 400px;
+    }
+
+
+    .content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 80px;
+        color: #ffffff;
+        height: 25px;
+        border: 1px solid blue;
+        margin-right: 10px;
+        margin-bottom: 10px;
+    }
+
+    .content_on {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 80px;
+        color: #ffffff;
+        height: 25px;
+        border: 1px solid blue;
+        margin-right: 10px;
+        margin-bottom: 10px;
+        background-color: chartreuse;
+    }
+</style>

src/components/warning/warningArea.vue

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

src/components/warning/warningCard.vue

@@ -0,0 +1,205 @@
+/* 告警区 */
+<template>
+		<div style="padding-left: 5px; padding-right: 5px">
+			<el-table :data="values" class="table" height="27vh" :header-cell-style="{
+          background: '#000000',
+          color: 'rgb(220,220,220)',
+          padding: '4px',
+          fontSize: '14px',
+          'border-bottom': 'solid 1px black',
+        }" :cell-style="{
+          background: '#1e1e1e',
+          color: 'rgb(220,220,220)',
+          padding: '3px',
+          fontSize: '12px',
+        }" @row-dblclick="itemDblclick">
+				<el-table-column prop="lastUpdateTime" align="center" label="时间" width="150">
+				</el-table-column>
+				<el-table-column prop="alertText" align="center" label="描述" width="280">
+				</el-table-column>
+				<el-table-column prop="isSelected" align="center" label="确认">
+					<template v-slot="scope">
+						<!-- <el-checkbox v-model="scope.row.isSelected" @click="itemChecked(scope.row)"></el-checkbox> -->
+						<input type="checkbox" v-model="scope.row.isSelected" @click="itemChecked(scope.row)" />
+					</template>
+					<!-- <el-checkbox v-model="isSelected"></el-checkbox> -->
+					<!-- <input type="checkbox"/> -->
+				</el-table-column>
+			</el-table>
+		</div>
+	<WindturbineDetailPages v-model="dialogVisible" :windturbine="currentWindturbine" :showSvg="showSvg"
+		:svgWeb="svgWeb" @close="close"></WindturbineDetailPages>
+</template>
+
+<script>
+	import MessageBridge from "utils/MessageBridge";
+	import WindturbineDetailPages from "../WindturbineDetailPages.vue";
+	import BackgroundData from "utils/BackgroundData";
+	// import Sbdl from "../BoosterStation/sbdl.vue";
+	import axios from "axios";
+
+	export default {
+		name: "AlarmArea",
+		components: {
+			WindturbineDetailPages,
+			// Sbdl,
+		},
+		created: function() {
+			this.initData();
+		},
+		props: {},
+		data() {
+			return {
+				values: new Array(),
+				dialogVisible: false,
+				showSvg: false,
+				svgWeb: '',
+				currentWindturbine: {},
+			};
+		},
+		methods: {
+			initData() {
+				var mb = MessageBridge.getInstance();
+				var vs = [{
+					key: "/topic/fault-popup",
+					action: this.faultMessage
+				}];
+				mb.register(vs);
+			},
+			faultMessage(msg) {
+				var val = JSON.parse(msg);
+				var sleected = {};
+				this.values.forEach((it) => {
+					if (it.isSelected) {
+						sleected[it.id] = 0;
+					}
+				});
+				this.values = new Array();
+				for (var v in val) {
+					var 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;
+					}
+					this.values.push(vl);
+				}
+			},
+			/* 行双击 */
+			itemDblclick(row) {
+				this.dialogVisible = true;
+				if (row.category1 === "FJ") {
+					this.showSvg = false;
+					this.currentWindturbine = row;
+				} else {
+					this.svgWeb = row.stationId;
+					this.showSvg = true;
+				}
+			},
+			close() {
+				this.dialogVisible = false;
+			},
+			/* 报警确认 */
+			itemChecked(row) {
+				if (row.isSelected == true) {
+					row.isSelected = false;
+					return;
+				}
+				var 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) {
+				var url =
+                process.env.VUE_APP_API+`/alarm/confirm?snapID=${item.snapIDString}&faultID=${item.idString}&userName=${BackgroundData.getInstance().LoginUser.name}`;
+				axios
+					.get(url)
+					.then((msg) => {
+						var mms = msg.data > 0 ? "报警确认成功！" : "报警确认出现错误!";
+						var tp = msg.data > 0 ? "success" : "error";
+						this.$notify({
+							title: "报警",
+							message: mms,
+							type: tp,
+							position: "bottom-right",
+							offset: 60,
+							duration: 3000,
+						});
+					})
+					.catch((err) => {
+						this.$notify({
+							title: "报警",
+							message: `报警确认出现错误：${err.message}，请重试`,
+							type: "error",
+							position: "bottom-right",
+							offset: 60,
+							duration: 3000,
+						});
+					});
+			},
+		},
+	};
+</script>
+<style scoped>
+    .el-table::before{
+        width: 0;
+    }
+    .table{
+        background-color: #000000;
+    }
+	:deep(.el-table__body-wrapper::-webkit-scrollbar) {
+		width: 8px;
+		height: 0px;
+		background-color: black;
+	}
+
+	:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
+		background-color: #292929;
+		border-radius: 6px;
+	}
+
+	:deep(.el-table td, .el-table th) {
+		border-bottom: 2px solid black;
+	}
+
+	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>

src/config.js

@@ -1,11 +0,0 @@
-export const config = {
-    shardingUrl:"192.168.10.18:8075",// 报警地址
-    calcUrl:"192.168.10.18:8099",// 大后台地址
-    adapterUrl:"192.168.10.18:8011",// 数据适配器地址
-};
-
-/* export const config = {
-    shardingUrl:"18.6.30.53:8075",// 报警地址
-    calcUrl:"18.6.30.63:8099",// 大后台地址
-    adapterUrl:"18.6.30.63:8011",// 数据适配器地址
-}; */

src/main.js

@@ -1,12 +1,15 @@
 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/lib/theme-chalk/index.css';
-import App from './App.vue';
-import store from './store/index'
-import gyCard from './components/area';
 
 const app = createApp(App)
-app.use(ElementPlus)
-app.use(gyCard)
+app.config.globalProperties.$echarts = echarts
 app.use(store)
-app.mount('#app')
+app.use(router)
+app.use(ElementPlus)
+app.mount('#app')

src/registerServiceWorker.js

@@ -0,0 +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)
+    }
+  })
+}

src/router/index.js

@@ -0,0 +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

src/store/index.js

@@ -24,4 +24,4 @@ const store = createStore({
      }
 })
 
-export default store
+export default store

src/assets/script/BackgroundData.js

@@ -1,6 +1,5 @@
-import axios from 'axios';
-import { config } from '../../config';
-
+// import axios from 'axios';
+import api from "api/index";
 export default class BackgroundData {
     /* 当前登录用户 */
     LoginUser;
@@ -79,6 +78,12 @@ export default class BackgroundData {
             createTime: new Date(),
             isActive: false,
         },
+        "SLAGC.NX_GD_QSF_DQ_P1_L1_001_DI0165": {
+            stationName: "宋堡第六风电场",
+            content: "限电",
+            createTime: new Date(),
+            isActive: false,
+        },
     };
     /* 隐患数据 */
     HiddenProblems = new Array();
@@ -91,6 +96,8 @@ export default class BackgroundData {
 
     /* 标记数据 */
     Marks = [];
+    /* 校验区数据 */
+    checkouts = [];
     MarkIndex = 0;
 
     constructor() {
@@ -107,13 +114,10 @@ export default class BackgroundData {
         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.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);// 推荐数据
@@ -126,11 +130,12 @@ export default class BackgroundData {
         for (var v in this.TopPoint) {
             val += this.TopPoint[v].pointTag + ',';
         }
-        axios.get(`http://${config.adapterUrl}/ts/latest?keys=${val}`)
-            .then(this.onTPMessage)
-            .catch(err =>
-                console.log(err)
-            );
+        api.refreshData(val).then(this.onTPMessage)
+        // axios.get(process.env.VUE_APP_ADAPTERURL+`/ts/latest?keys=${val}`)
+        //     .then(this.onTPMessage)
+        //     .catch(err =>
+        //         console.log(err)
+        //     );
     }
 
     /* 刷新推荐信息 */
@@ -139,11 +144,12 @@ export default class BackgroundData {
         for (var v in this.Recommends) {
             val += v + ',';
         }
-        axios.get(`http://${config.adapterUrl}/ts/latest?keys=${val}`)
-            .then(this.onRDMessage)
-            .catch(err =>
-                console.log(err)
-            );
+        api.refreshData(val).then(this.onRDMessage)
+        // axios.get(process.env.VUE_APP_ADAPTERURL+`/ts/latest?keys=${val}`)
+        //     .then(this.onRDMessage)
+        //     .catch(err =>
+        //         console.log(err)
+        //     );
     }
 
     /* 刷新报警信息 */
@@ -154,23 +160,30 @@ export default class BackgroundData {
         var tm = enddt.getTime();
         enddt = new Date(tm + 900000);
         var startdt = new Date(tm - 86400000);
-        axios.get(`http://${config.shardingUrl}/alarm/snap/page?pagenum=1&pagesize=500&category1=custom&rank=4&isopened=1&starttime=${this.formatDate(startdt)}&endtime=${this.formatDate(enddt)}`)
-            .then(this.onHiddenProblemsMessage)
-            .catch(err =>
-                console.log(err)
-            );
-        // 2、读取一天内所有的open的windturbine报警，以故障结尾的报警填充到故障，其他的填充到缺陷
-        axios.get(`http://${config.shardingUrl}/alarm/snap/page?pagenum=1&pagesize=500&category1=windturbine&isopened=1&starttime=${this.formatDate(startdt)}&endtime=${this.formatDate(enddt)}`)
-            .then(this.onDefectsMessage)
-            .catch(err =>
-                console.log(err)
-            );
-        // 3、读取一天内所有open的升压站（SYZ）报警，包含关键字“跳闸”，“开关”，“刀闸”，“断路器”字符的报警信息填充到事故列表
-        axios.get(`http://${config.shardingUrl}/alarm/snap/page?pagenum=1&pagesize=500&category1=SYZ&isopened=1&starttime=${this.formatDate(startdt)}&endtime=${this.formatDate(enddt)}`)
-            .then(this.onAccidentsMessage)
-            .catch(err =>
-                console.log(err)
-            );
+        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)
     }
 
     /* 获得故障数据 */
@@ -259,7 +272,6 @@ export default class BackgroundData {
             .replace(/hh/g, preArr[hour] || hour)
             .replace(/mm/g, preArr[min] || min)
             .replace(/ss/g, preArr[sec] || sec);
-
         return newTime;
     }
 
@@ -272,16 +284,16 @@ export default class BackgroundData {
         }
         return false;
     }
-    
+
     /* 登录 */
-    login(uname, psd, action) {
-        axios.get(`http://${config.calcUrl}/api/user/login?userName=${uname}&psd=${psd}`)
-            .then(action)
-            .catch(err => action("登录出现错误：" + err.message));
-    }
+    // login(uname, psd, action) {
+    //     axios.get(process.env.VUE_APP_API+`/api/user/login?userName=${uname}&psd=${psd}`)
+    //         .then(action)
+    //         .catch(err => action("登录出现错误：" + err.message));
+    // }
 
     /* 风机控制 */
-    windturbineControl(windturbines, isLockOrUnlock,success,error) {
+    windturbineControl(windturbines, isLockOrUnlock, success, error) {
         var pairs = {};
         for (var ind in windturbines) {
             var wb = windturbines[ind];
@@ -297,13 +309,16 @@ export default class BackgroundData {
             };
             pairs[ct.windturbineId] = ct;
         }
-        axios.post(`http://${config.calcUrl}/api/control/send?isLockOrUnlock=${isLockOrUnlock}`, pairs)
-            .then(msg => {
-                success(msg);
-            })
-            .catch(err => {
-                error(err);
-            });
+        api.windturbControl(isLockOrUnlock,pairs).then(res =>{
+            success(res);
+        })
+        // axios.post(process.env.VUE_APP_API+`/api/control/send?isLockOrUnlock=${isLockOrUnlock}`, pairs)
+        //     .then(msg => {
+        //         success(msg);
+        //     })
+        //     .catch(err => {
+        //         error(err);
+        //     });
         console.log(isLockOrUnlock);
     }
 
@@ -324,14 +339,20 @@ export default class BackgroundData {
             };
             pairs[ct.windturbineId] = ct;
         }
-        axios.post(`http://${config.calcUrl}/api/control/send?isLockOrUnlock=false`, pairs)
-            .then(msg => {
-                console.log(msg);
-            })
-            .catch(err => {
-                this.showdialog("错误", "风机控制出现错误", err.message);
-                console.log(err);
-            });
+        let isLockOrUnlock = false
+        api.windturbControl(isLockOrUnlock,{
+            pairs: pairs
+        }).then(res =>{
+            success(res);
+        })
+        // axios.post(process.env.VUE_APP_API+`/api/control/send?isLockOrUnlock=false`, pairs)
+        //     .then(msg => {
+        //         console.log(msg);
+        //     })
+        //     .catch(err => {
+        //         this.showdialog("错误", "风机控制出现错误", err.message);
+        //         console.log(err);
+        //     });
     }
 
     /* 标记 */
@@ -341,6 +362,33 @@ export default class BackgroundData {
             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) {
+        var indx = -1;
+        for (var 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) {
@@ -356,14 +404,23 @@ export default class BackgroundData {
     }
 
     /* 获取风机详情页面数据 */
-    initWinturbineBaseData(info,action){
-        axios.get(`http://${config.adapterUrl}/ts/latest?thingType=windturbine&thingId=${info.windturbineId}&uniformCodes=${info.codes}`)
-        .then(msg=>{
-            action(msg.data);
-        })
-        .catch(err=>{
+    initWinturbineBaseData(info, action) {
+        api.nitWinturbineBaseData({
+            thingType: 'windturbine',
+            thingId: info.windturbineId,
+            uniformCodes: info.codes,
+        }).then(res =>{
+            action(res.data);
+        }).catch(err => {
             console.log(err);
         });
+        // axios.get(process.env.VUE_APP_ADAPTERURL+`/ts/latest?thingType=windturbine&thingId=${info.windturbineId}&uniformCodes=${info.codes}`)
+        //     .then(msg => {
+        //         action(msg.data);
+        //     })
+        //     .catch(err => {
+        //         console.log(err);
+        //     });
     }
 
     /* 单例 */

src/assets/script/MessageBridge.js

@@ -1,5 +1,5 @@
 import Stomp from 'stompjs'
-import {config} from '../../config';
+// import {config} from '../../config';
 
 export default class MessageBridge {
   observers;// 观察者
@@ -12,12 +12,10 @@ export default class MessageBridge {
     this.unregister = this.unregister.bind(this);
     this.onmessage = this.onmessage.bind(this);
     this.getActions = this.getActions.bind(this);
-
     this.observers = new Array();
-
-    this.calcSocket = new WebSocket(`ws://${config.calcUrl}/wisdom_service`, this.onmessage, ["/topic/suggestion", "/topic/sync-command-result", "/topic/fault-count",
-      "/topic/alarm-count", "/topic/fault-popup", "/topic/popup-remove", "/topic/heartbeat-data"]);
-    this.adapterSocket = new WebSocket(`ws://${config.adapterUrl}/wisdom`, this.onmessage, ["/topic/windturbine", "/topic/pv"]);
+    this.calcSocket = new WebSocket(`ws://${process.env.VUE_APP_APIS}/wisdom_service`, this.onmessage, ["/topic/suggestion", "/topic/sync-command-result", "/topic/fault-count",
+      "/topic/alarm-count", "/topic/fault-popup", "/topic/popup-remove", "/topic/heartbeat-data", "/topic/voice-control", "/topic/title-info"]);
+    this.adapterSocket = new WebSocket(`ws://${process.env.VUE_APP_ADAPTERURLS}/wisdom`, this.onmessage, ["/topic/windturbine", "/topic/pv"]);
   }
 
   /* 单例 */
@@ -31,7 +29,7 @@ export default class MessageBridge {
   /* 获得消息 */
   onmessage(msg) {
     if(msg.headers["data-type"] && msg.headers["data-type"]=="heartbeat"){
-      console.log("获得心跳包！");
+      // console.log("获得心跳包！");
       return;
     }
     if (msg.command != "MESSAGE" || !msg.headers.destination) return;
@@ -39,7 +37,7 @@ export default class MessageBridge {
     for (var id in os) {
       try{
         os[id].action(msg.body,msg.headers);
-      }catch(e){console.log(e);}
+      }catch(e){}
     }
   }
 
@@ -83,17 +81,16 @@ class WebSocket {
     try {
       this.connect();
     } catch (e) {
-      console.log("websocket连接错误:\n" + e);
+      // console.log("websocket连接错误:\n" + e);
     }
-
-    console.log("websocket");
   }
 
   /* 连接 */
   connect() {
-    console.log(`正在连接websocket [${this.url}]`)
+    // console.log(`正在连接websocket [${this.url}]`)
     this.client = Stomp.client(this.url);
     this.client.connect("", "", this.connectCallBackSubscribe, this.onerror);
+    this.client.debug = null;
   }
 
   /* 检测连接是否正常 */
@@ -103,7 +100,7 @@ class WebSocket {
 
   /* 注册 */
   connectCallBackSubscribe() {
-    console.log(`注册消息${this.settings}`)
+    // console.log(`注册消息${this.settings}`)
     for (var index in this.settings) {
       this.client.subscribe(this.settings[index], frame => this.onmessage(frame));
     }
@@ -113,12 +110,13 @@ class WebSocket {
   send(destination, headers, body) {
     if (this.client.connected) {
       this.client.send(destination, headers, body);
+     
     }
   }
 
   /* 发生错误 */
-  onerror(error) {
-    console.log(`websocket [${this.url}] 连接出现错误：\n${error.message}`);
+  onerror() {
+    // console.log(`websocket [${this.url}] 连接出现错误：\n${error.message}`);
     // TODO 断线重连还有问题
     setTimeout(this.connect(), 5000);
   }