升压站及AGC界面

package.json

@@ -22,6 +22,8 @@
     "cesium": "1.78.0",
     "core-js": "^3.6.5",
     "cross-env": "^7.0.3",
+    "docxtemplater": "^3.39.0",
+    "docxtemplater-image-module-free": "^1.1.1",
     "echarts": "^5.1.1",
     "echarts-gl": "^2.0.4",
     "echarts-stat": "^1.2.0",
@@ -31,10 +33,13 @@
     "html2canvas": "^1.0.0-rc.7",
     "increase-memory-limit": "^1.0.7",
     "jquery": "^3.6.0",
+    "js-cookie": "^3.0.5",
     "jsencrypt": "^3.3.2",
     "jspdf": "^2.3.1",
     "jszip": "^3.7.1",
+    "jszip-utils": "^0.1.0",
     "papaparse": "^5.3.1",
+    "pizzip": "^3.1.4",
     "stompjs": "^2.3.3",
     "three": "^0.129.0",
     "three-collada-loader": "^0.0.1",
@@ -46,7 +51,8 @@
     "vue-axios": "^3.2.4",
     "vue-router": "^4.0.0-0",
     "vuex": "^4.0.0-0",
-    "xlsx": "^0.17.0"
+    "xlsx": "^0.17.0",
+    "xlsx-js-style": "^1.2.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

src/api/stateMonitor/index.js

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

src/components/BoosterStation/previewPicture.vue

@@ -0,0 +1,722 @@
+<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: "1200px",
+      height: "800px",
+      // 可缩小倍数,为空则可无限缩小
+      minification: 3,
+      // 可放大倍数 为空则可无限放大
+      magnification: "",
+      bigMaxWidth: 1100,
+      bigMaxHeight: 800,
+
+      // 小图标信息
+      iconImgUrl: "",
+      iconWidth: "",
+      // 存储每个小图标处理好的宽高
+      iconHeight: "",
+      arrIcon: [],
+      iconMaxWidth: 32,
+      iconMaxHeight: 32,
+      tog: 1,
+    };
+  },
+  methods: {
+    // 获取图片大小
+    getImgInfo(
+      imgUrl,
+      MaxWidth,
+      MaxHeight,
+      StrWidth,
+      StrHeight,
+      Array = false,
+      arr,
+      num = 0
+    ) {
+      let 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() {
+      let that = this;
+      // let oImg = document.getElementsByClassName("movableItem")[0];
+      let oImg = this.$refs.bigImage;
+      // console.log(
+      // 	"length",
+      // 	document.getElementsByClassName("movableItem").length
+      // );
+      // console.log("oImg", oImg);
+      let _this = this;
+
+      function fnWheel(obj, fncc) {
+        obj.onmousewheel = fn;
+        if (obj.addEventListener) {
+          obj.addEventListener("DOMMouseScroll", fn, false);
+        }
+
+        function fn(ev) {
+          let oEvent = ev || window.event;
+          let 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) {
+        let oldWidth = this.offsetWidth;
+        let oldHeight = this.offsetHeight;
+        let oldLeft = this.offsetLeft;
+        let oldTop = this.offsetTop;
+        let parent = oEvent.path[2];
+        // 获取父元素距离页面可视区域的位置
+        let parentLeft = parent.getBoundingClientRect().left;
+        let parentTop = parent.getBoundingClientRect().top;
+        // 比例 = （点击位置距离可视窗口位置 - 父元素距离可视窗口位置 - 相对定位的left）/ 本身宽度
+        let scaleX = (oEvent.clientX - parentLeft - oldLeft) / oldWidth; //比例
+        let 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";
+        }
+        let newWidth = this.offsetWidth;
+        let 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) {
+      // let ie = document.all;
+      let nn6 = document.getElementById && !document.all;
+      let isdrag = false;
+      let y, x;
+      let nTY, nTX;
+      let 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");
+        let oDragHandle = nn6 ? e.target : event.srcElement;
+        let 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 = 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;
+        let oDragHandle = nn6 ? e.target : event.srcElement;
+        let 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-lets
+    dragSign(ev, key) {
+      let nn6 = document.getElementById && !document.all;
+      let isdrag = false;
+      let y, x;
+      let nTY, nTX;
+      let 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-lets
+          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);
+        let oDragHandle = nn6 ? e.target : event.srcElement;
+        let 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;
+        let oDragHandle = nn6 ? e.target : event.srcElement;
+        let 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%, -15%);
+
+				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%);
+				}
+			}
+		}
+	}
+</style>

src/router/index.js

@@ -339,6 +339,26 @@ export const asyncRoutes = [
           },
         ],
       },
+      {
+        path: "syzmatrix", // 升压站矩阵
+        name: "SYZMatrix",
+        component: () => import("@/views/stateMonitor/focus/syzDetails"),
+        meta: {
+          title: "升压站矩阵",
+          icon: "svg-mx-matrix",
+          permissions: ["jn_mxjz", "*:*:*"],
+        },
+      },
+      {
+        path: "agcmatrix", // AGC矩阵
+        name: "AGCMatrix",
+        component: () => import("@/views/stateMonitor/focus/agcDetails"),
+        meta: {
+          title: "AGC矩阵",
+          icon: "svg-mx-matrix",
+          permissions: ["jn_mxjz", "*:*:*"],
+        },
+      }
     ],
   },
   //   经济运行

src/utills/BackgroundData.js

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

src/views/stateMonitor/focus/agcDetails.vue

@@ -0,0 +1,223 @@
+<template>
+  <el-dialog
+      width="90%"
+      @open="opened()"
+      @closed="closed()"
+      :fullscreen="true"
+      :show-close="true"
+      class="dialogs"
+  >
+    <template #title>
+      <div class="showTitles">
+        <div class="titles">AGC监控</div>
+      </div>
+    </template>
+    <div class="bodyy currentScroll">
+      <DataDetails
+          ref="detailst"
+          :allDate="allDate"
+          :allChartDate="allChartDate"
+          :station="station"
+          @handleClick="handleClicks"
+      ></DataDetails>
+      <DetailsCharts
+          v-model="detailsDisplay"
+          :showData="showData"
+          @closeds="closeds"
+      ></DetailsCharts>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import DataDetails from "./dataDetails";
+import DetailsCharts from "./detailsCharts";
+import api from "@api/stateMonitor/index.js";
+import dayjs from "dayjs";
+
+export default {
+  components: {
+    DataDetails,
+    DetailsCharts,
+  },
+  data() {
+    return {
+      station: [],
+      allDate: {},
+      allChartDate: [],
+      detailsDisplay: false,
+      showData: {},
+      intervals: "",
+    };
+  },
+  created() {
+    this.getAGCStation();
+  },
+  updated() {
+  },
+  methods: {
+    getAGCStation() {
+      api.getAGCStation().then((res) => {
+        this.station = res.data;
+      });
+    },
+    getLatest(index) {
+      let dialogData = {};
+      let thisKey = this.station[index].tags;
+      let array = [];
+      thisKey.forEach((item) => {
+        item.value ? array.push(item.value) : "";
+      });
+      let params = array.join(",");
+      api.getLatest(params).then((res) => {
+        for (let v in res.data) {
+          thisKey.forEach((item) => {
+            let calc = item.calc ? item.calc : 1;
+            if (item.value === v) {
+              dialogData[item.tag] = {
+                name: item.name,
+                value: res.data[v].doubleValue
+                    ? res.data[v].doubleValue === 0
+                        ? 0
+                        : Number((res.data[v].doubleValue * calc).toFixed(2))
+                    : Number(res.data[v].booleanValue)
+                        ? 1
+                        : 0,
+                tag: item.value,
+                calc: item.calc,
+              };
+            }
+          });
+        }
+        this.allDate[this.station[index].id] = dialogData;
+        this.allDate[this.station[index].id].InstalledCapacity = this.station[
+            index
+            ].tags.find((ele) => {
+          return ele.tag == "InstalledCapacity";
+        });
+        index++;
+        if (index >= this.station.length) {
+          this.intervals = setTimeout(() => {
+            this.getLatest(0);
+          }, 3000);
+        } else {
+          this.getLatest(index);
+        }
+      });
+    },
+    getChartData(index) {
+      let thisKey = this.station[index].tags;
+      let endTs = new Date().getTime();
+      let starTs = new Date(
+          new Date(new Date().toLocaleDateString()).getTime()
+      ).getTime();
+      let chartData = {
+        value: [],
+      };
+      const PowerSet = thisKey.find((ele) => {
+        return ele.tag == "PowerSet";
+      });
+      const ActualPower = thisKey.find((ele) => {
+        return ele.tag == "ActualPower";
+      });
+      let PowerSetData = [],
+          ActualPowerData = [];
+      api
+          .getPower({
+            tagName: PowerSet.value,
+            startTs: starTs,
+            endTs: endTs,
+            interval: 60,
+          })
+          .then((res1) => {
+            api
+                .getPower({
+                  tagName: ActualPower.value,
+                  startTs: starTs,
+                  endTs: endTs,
+                  interval: 60,
+                })
+                .then((res2) => {
+                  res1.data.forEach((item) => {
+                    PowerSetData.push({
+                      ts: item.ts,
+                      doubleValue: item.doubleValue * PowerSet.calc,
+                    });
+                  });
+                  res2.data.forEach((item) => {
+                    ActualPowerData.push({
+                      ts: item.ts,
+                      doubleValue: item.doubleValue * ActualPower.calc,
+                    });
+                  });
+                  chartData.value[0] = {
+                    title: "有功设定限值(MW)",
+                    yAxisIndex: 0,
+                    value: [],
+                  };
+                  chartData.value[1] = {
+                    title: "实发有功(MW)",
+                    yAxisIndex: 0,
+                    value: [],
+                  };
+                  PowerSetData.forEach((item) => {
+                    chartData.value[0].value.push({
+                      text: dayjs(item.ts).format("HH:mm"),
+                      value: parseFloat(Number(item.doubleValue).toFixed(2)),
+                    });
+                  });
+                  ActualPowerData.forEach((item) => {
+                    chartData.value[1].value.push({
+                      text: dayjs(item.ts).format("HH:mm"),
+                      value: parseFloat(Number(item.doubleValue).toFixed(2)),
+                    });
+                  });
+                  chartData.id = this.station[index].id;
+                  this.allChartDate.push(chartData);
+                  index++;
+                  if (index >= this.station.length) {
+                    this.$refs.detailst.totleErtcher();
+                    setTimeout(() => {
+                      this.allChartDate = [];
+                      this.getChartData(0);
+                    }, 60000);
+                  } else {
+                    this.getChartData(index);
+                  }
+                });
+          });
+    },
+    opened() {
+      this.getLatest(0);
+      this.getChartData(0);
+    },
+    closed() {
+      clearInterval(this.intervals);
+      this.intervals = null;
+    },
+    handleClicks(id) {
+      this.showData = this.allChartDate.find((ele) => {
+        return ele.id == id;
+      });
+      this.showData.name = this.station.find((ele) => {
+        return ele.id == id;
+      });
+      this.detailsDisplay = true;
+    },
+    closeds() {
+      this.detailsDisplay = false;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.bodyy {
+  display: flex;
+  flex-direction: row;
+  background-color: black;
+  width: 100%;
+  margin-top: -30px;
+  min-height: 90vh;
+}
+</style>

src/views/stateMonitor/focus/basicDataDetails.vue

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

src/views/stateMonitor/focus/currentWarningCard.vue

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

src/views/stateMonitor/focus/dataDetails.vue

@@ -0,0 +1,568 @@
+<template>
+  <div class="body">
+    <div
+        :class="index < 3 ? 'showContents' : 'showContents'"
+        v-for="(item, index) in station"
+        :key="index"
+    >
+      <div class="stationName">
+        <div class="titleName">{{ item.name }}</div>
+        <div class="titleNames" v-if="item.schedulingName">
+          ({{ item.schedulingName }})
+        </div>
+        <img
+            v-if="
+            !allDate[item.id]?.Status?.value ||
+            allDate[item.id]?.Status?.value === 0
+          "
+            class="statusIcons"
+            src="@assets/img/controlcenter/daraTrue.png"
+        />
+        <img
+            v-else
+            class="statusIcons"
+            src="@assets/img/controlcenter/dataFalse.png"
+        />
+        <div
+            class="titleNames"
+            v-if="
+            allDate[item.id]?.Status?.value &&
+            allDate[item.id]?.Status?.value !== 0
+          "
+        >
+          {{
+            (
+                (1 -
+                    this.allDate[item.id]?.PowerSet?.value /
+                    this.allDate[item.id]?.InstalledCapacity?.value) *
+                100
+            ).toFixed(2)
+          }}%
+        </div>
+      </div>
+      <div class="dataList">
+        <div
+            class="data"
+            @dblclick="dbClicks(allDate[item.id]?.PowerSet, '有功设定限值')"
+        >
+          <div class="name">有功设定限值：</div>
+          <div :class="index < 3 ? 'nums' : 'nums'">
+            {{ allDate[item.id]?.PowerSet?.value ?? 0 }}
+          </div>
+          <div class="unit">MW</div>
+        </div>
+        <div
+            class="data"
+            @dblclick="dbClicks(allDate[item.id]?.ActualPower, '实发有功')"
+        >
+          <div class="name">实发有功：</div>
+          <div :class="index < 3 ? 'nums' : 'nums'">
+            {{ allDate[item.id]?.ActualPower?.value ?? 0 }}
+          </div>
+          <div class="unit">MW</div>
+        </div>
+        <div
+            class="data"
+            @dblclick="dbClicks(allDate[item.id]?.AgcUp, 'AGC可调上限')"
+        >
+          <div class="name">AGC可调上限：</div>
+          <div :class="index < 3 ? 'nums' : 'nums'">
+            {{ allDate[item.id]?.AgcUp?.value ?? 0 }}
+          </div>
+          <div class="unit">MW</div>
+        </div>
+        <div
+            class="data"
+            @dblclick="dbClicks(allDate[item.id]?.TheoryPower, '理论功率')"
+        >
+          <div class="name">理论功率：</div>
+          <div :class="index < 3 ? 'nums' : 'nums'">
+            {{ allDate[item.id]?.TheoryPower?.value ?? 0 }}
+          </div>
+          <div class="unit">MW</div>
+        </div>
+        <div
+            class="data"
+            @dblclick="dbClicks(allDate[item.id]?.AgcLower, 'AGC可调下限')"
+        >
+          <div class="name">AGC可调下限：</div>
+          <div :class="index < 3 ? 'nums' : 'nums'">
+            {{ allDate[item.id]?.AgcLower?.value ?? 0 }}
+          </div>
+          <div class="unit">MW</div>
+        </div>
+
+        <div
+            class="data"
+            @dblclick="dbClicks(allDate[item.id]?.ForecastPower, '预测功率')"
+        >
+          <div class="name">预测功率：</div>
+          <div :class="index < 3 ? 'nums' : 'nums'">
+            {{ allDate[item.id]?.ForecastPower?.value ?? 0 }}
+          </div>
+          <div class="unit">MW</div>
+        </div>
+      </div>
+      <div class="condition">
+        <div class="status">
+          <div class="name">{{ allDate[item.id]?.AgcIn?.name }}：</div>
+          <img
+              v-if="allDate[item.id]?.AgcIn?.value === 0"
+              class="statusIcon"
+              src="@assets/img/controlcenter/daraTrue.png"
+          />
+          <img
+              v-else-if="allDate[item.id]?.AgcIn?.value === 1"
+              class="statusIcon"
+              src="@assets/img/controlcenter/dataFalse.png"
+          />
+          <div v-else-if="allDate[item.id]?.AgcIn?.value === ''">暂无数据</div>
+        </div>
+        <div class="status">
+          <div class="name">{{ allDate[item.id]?.AgcFar?.name }}：</div>
+          <img
+              v-if="allDate[item.id]?.AgcFar?.value === 0"
+              class="statusIcon"
+              src="@assets/img/controlcenter/daraTrue.png"
+          />
+          <img
+              v-else-if="allDate[item.id]?.AgcFar?.value === 1"
+              class="statusIcon"
+              src="@assets/img/controlcenter/dataFalse.png"
+          />
+          <div v-else-if="allDate[item.id]?.AgcFar?.value === ''">暂无数据</div>
+        </div>
+        <div class="status">
+          <div class="name">{{ allDate[item.id]?.SumLock?.name }}：</div>
+          <img
+              v-if="allDate[item.id]?.SumLock?.value === 0"
+              class="statusIcon"
+              src="@assets/img/controlcenter/daraTrue.png"
+          />
+          <img
+              v-else-if="allDate[item.id]?.SumLock?.value === 1"
+              class="statusIcon"
+              src="@assets/img/controlcenter/dataFalse.png"
+          />
+          <div v-else-if="allDate[item.id]?.SumLock?.value === ''">
+            暂无数据
+          </div>
+        </div>
+        <div class="status">
+          <div class="name">{{ allDate[item.id]?.SubLock?.name }}：</div>
+          <img
+              v-if="allDate[item.id]?.SubLock?.value === 0"
+              class="statusIcon"
+              src="@assets/img/controlcenter/daraTrue.png"
+          />
+          <img
+              v-else-if="allDate[item.id]?.SubLock?.value === 1"
+              class="statusIcon"
+              src="@assets/img/controlcenter/dataFalse.png"
+          />
+          <div v-else-if="allDate[item.id]?.SubLock?.value === ''">
+            暂无数据
+          </div>
+        </div>
+      </div>
+      <div :id="item.id" class="echarts" @dblclick="handleClick(item.id)"></div>
+    </div>
+
+    <Details
+        @closed="closed()"
+        v-model="display"
+        :partsName="partsName"
+        echartsId="modelEcharts"
+        :datas="modelDetails"
+        :calc="this.modelData.calc"
+        @search-data="search"
+        @original-data="originalData"
+    ></Details>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import Details from "./basicDataDetails.vue";
+import api from "@api/stateMonitor/index.js";
+
+export default {
+  components: {
+    Details,
+  },
+  data() {
+    return {
+      display: false,
+      modelData: {},
+      partsName: "",
+    };
+  },
+  props: {
+    allDate: {
+      type: String,
+      default: "",
+    },
+    allChartDate: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    station: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  updated() {
+    // this.totleErtcher()
+  },
+  mounted() {
+  },
+  methods: {
+    dbClicks(data, partsName, timeValues) {
+      this.modelData = data;
+      let date = new Date();
+      let endTs = timeValues
+          ? timeValues[1] > date.getTime()
+              ? date.getTime()
+              : timeValues[1]
+          : date.getTime();
+      let startTs = timeValues ? timeValues[0] : endTs - 28800000;
+      data.tag &&
+      api
+          .getPower({
+            tagName: data.tag,
+            startTs: startTs,
+            endTs: endTs,
+            interval: 60,
+          })
+          .then((res) => {
+            if (res.data.length > 0) {
+              this.partsName = partsName;
+              this.display = true;
+              this.modelDetails = res.data;
+            } else {
+              this.modelDetails = [];
+            }
+          });
+    },
+    original(data, partsName, timeValues) {
+      this.modelData = data;
+      let date = new Date();
+      let endTs = timeValues
+          ? timeValues[1] > date.getTime()
+              ? date.getTime()
+              : timeValues[1]
+          : date.getTime();
+      let startTs = timeValues ? timeValues[0] : endTs - 28800000;
+      api
+          .getOriginalPower({
+            tagName: data.tag,
+            startTs: startTs,
+            endTs: endTs,
+          })
+          .then((res) => {
+            if (res.data.length > 0) {
+              this.partsName = partsName;
+              this.display = true;
+              this.modelDetails = res.data;
+            } else {
+              this.modelDetails = [];
+            }
+          });
+    },
+    search(values, interval) {
+      this.interval = interval;
+      this.dbClicks(this.modelData, this.partsName, values);
+    },
+    originalData(values) {
+      this.original(this.modelData, this.partsName, values);
+    },
+    totleErtcher() {
+      this.allChartDate.forEach((item) => {
+        let chartDom = document.getElementById(item.id);
+        let myChart = echarts.init(chartDom, "#ffffff");
+        let option;
+        option = {
+          tooltip: {
+            trigger: "axis",
+          },
+          legend: {
+            show: true,
+            data: item.value.map((t) => {
+              return t.title;
+            }),
+            right: 56,
+            icon: "circle",
+            itemWidth: 6,
+            inactiveColor: "#606769",
+            textStyle: {
+              color: "#B3BDC0",
+              fontSize: 12,
+            },
+          },
+
+          xAxis: [
+            {
+              type: "category",
+              boundaryGap: false,
+              axisLabel: {
+                // interval: 60,
+                showMinLabel: true,
+                showMaxLabel: true,
+                formatter: "{value}",
+                fontSize: 14,
+                textStyle: {
+                  color: "#606769",
+                },
+              },
+              axisLine: {
+                show: false,
+              },
+              data: item.value[0].value.map((items) => {
+                return items.text;
+              }),
+            },
+          ],
+          yAxis: {
+            type: "value",
+            axisLabel: {
+              formatter: "{value}",
+              fontSize: 14,
+            },
+            axisLine: {
+              show: false,
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: "#606769",
+                type: "dashed",
+              },
+            },
+          },
+          dataZoom: [
+            {
+              show: false,
+              type: "inside",
+              start: 0,
+              end: 100,
+            },
+          ],
+          series: [
+            {
+              name: item.value[0].title,
+              smooth: true,
+              showSymbol: false,
+              data: item.value[0].value.map((items) => {
+                return items.value;
+              }),
+              type: "line",
+              lineStyle: {
+                normal: {
+                  color: "rgba(75, 85, 174, 1)",
+                  width: 1,
+                },
+              },
+            },
+            {
+              name: item.value[1].title,
+              smooth: true,
+              showSymbol: false,
+              data: item.value[1].value.map((items) => {
+                return items.value;
+              }),
+              type: "line",
+              lineStyle: {
+                normal: {
+                  color: "rgba(05, 187, 76, 1)",
+                  width: 1,
+                },
+              },
+            },
+          ],
+        };
+        option && myChart.setOption(option);
+      });
+    },
+    handleClick(id) {
+      this.$emit("handleClick", id);
+    },
+    opened() {
+    },
+    closed() {
+      this.detailsDisplay = false;
+      this.display = false;
+    },
+  },
+  watch: {
+    allChartDate: {
+      handler: function (json) {
+        if (json) {
+          this.totleErtcher();
+        }
+      },
+    },
+  },
+};
+</script>
+
+<style scoped>
+.showTitles {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  margin-top: -10px;
+  font-size: 18px;
+  color: #ffffff;
+}
+
+.showContent {
+  width: 32%;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid rgba(77, 77, 77, 1);
+  /* background-color: rgba(77, 77, 77, 1); */
+  margin-right: 10px;
+  margin-left: 10px;
+  height: 44vh;
+  margin-top: 20px;
+  align-items: center;
+}
+
+.showContents {
+  width: 40%;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid rgba(77, 77, 77, 1);
+  /* background-color: rgba(77, 77, 77, 1); */
+  margin-right: 10px;
+  margin-left: 10px;
+  height: 43vh;
+  margin-top: 20px;
+  align-items: center;
+}
+
+.stationName {
+  font-size: 20px;
+  width: 400px;
+  height: 45px;
+  border: 1px solid rgba(77, 77, 77, 1);
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  justify-content: center;
+  color: #ffffff;
+  background-color: #000000;
+  margin-top: -15px;
+}
+
+.titleName {
+  margin-top: 10px;
+}
+
+.titleNames {
+  font-size: 12px;
+  margin-left: 10px;
+  margin-top: 10px;
+}
+
+.body {
+  background-color: black;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  height: 90vh;
+  overflow-y: auto;
+}
+
+.body::-webkit-scrollbar {
+  /*隐藏滚轮*/
+  display: none;
+}
+
+.echarts {
+  width: 100%;
+  height: 500px;
+  margin-left: 10px;
+  padding-top: -20px;
+}
+
+.dataList {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  padding-top: 27px;
+}
+
+.data {
+  width: 50%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 12px;
+  justify-content: center;
+}
+
+.name {
+  display: flex;
+  flex-direction: row-reverse;
+  font-size: 12px;
+  color: #ffffff;
+}
+
+.num {
+  margin-left: 59px;
+  font-size: 16px;
+  color: #05bb4c;
+  min-width: 40px;
+}
+
+.nums {
+  margin-left: 29px;
+  font-size: 16px;
+  color: #05bb4c;
+  min-width: 40px;
+}
+
+.unit {
+  font-size: 16px;
+  color: #ffffff;
+  margin-left: 15px;
+}
+
+.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;
+}
+
+.statusIcons {
+  width: 14px;
+  height: 14px;
+  margin-left: 20px;
+}
+</style>

src/views/stateMonitor/focus/detailsCharts.vue

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

src/views/stateMonitor/focus/syzDetails.vue

@@ -0,0 +1,824 @@
+<template>
+  <el-dialog
+      width="90%"
+      @open="opened"
+      @closed="closed"
+      :fullscreen="true"
+      :show-close="true"
+      class="dialogs"
+  >
+    <template #title>
+      <div class="showTitles currentShowTitles">
+        <div class="titles">升压站</div>
+      </div>
+    </template>
+    <div class="bodyy">
+      <el-tabs
+          type="border-card"
+          stretch
+          lazy
+          style="width: 100%; height: 100%"
+          v-model="activeTab"
+          @tab-click="tabClick"
+      >
+        <el-tab-pane
+            class="syzDetailsPaneItem"
+            v-for="(item, index) in syzArray"
+            :key="index"
+            :name="item.id"
+        >
+          <template #label>
+                <span v-if="pageshowMode % 2">
+                <el-badge is-dot v-if="item.isWarning === '1'">
+                    <span>{{ item.name }}</span>
+                </el-badge>
+                <span v-else>{{ item.name }}</span>
+                </span>
+            <span v-else>
+                <el-badge is-dot v-if="item.isWarning === '1'">
+                    <span>{{ item.name }}</span>
+                </el-badge>
+                <span v-else>{{ item.name }}</span>
+                </span>
+          </template>
+          <div class="buttonGroup" v-if="item.id === 'all'">
+            <el-button-group>
+              <el-button type="plain" size="small" @click="changeHeight('D')"
+                         :class="allHeight === 'D' ? 'showSty' : ''">大图标
+              </el-button>
+              <el-button type="plain" size="small" @click="changeHeight('Z')"
+                         :class="allHeight === 'Z' ? 'showSty' : ''">中图标
+              </el-button>
+              <el-button type="plain" size="small" @click="changeHeight('X')"
+                         :class="allHeight === 'X' ? 'showSty' : ''">小图标
+              </el-button>
+            </el-button-group>
+          </div>
+          <div v-if="item.id === 'all'" :style="allpageHeight"
+               style="width: 100%;display: inline-block;overflow-y:auto">
+            <div v-for="(item, index) in allSvgMsgData" :key="index" :style="getStyle(allHeight)">
+              <div class="showAllSvgMsg" @dblclick="dblgetSvgDataFn(item.id)" :class="getWarnstyle(item)">
+                <div class="showAllSvgMsg_top" v-html="item.msg"></div>
+                <div class="showAllSvgMsg_bot">
+                  <span>{{ item.name }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div id="svg" :style="pageHeight" v-if="item.id !== 'all' && item.id === activeTab" v-html="svgMsg"
+               v-loading="loading"></div>
+          <!-- <Mhs ref="svgRef" v-if="item.id === 'MHS_BT'" />
+          <Nss ref="svgRef" v-if="item.id === 'NSS_FDC'" />
+          <Qs ref="svgRef" v-if="item.id === 'QS_FDC'" />
+          <Sbq ref="svgRef" v-if="item.id === 'SBQ_FDC'" />
+          <Xs ref="svgRef" v-if="item.id === 'XS_FDC'" /> -->
+          <!-- <Pl1 ref="svgRef" v-if="item.id === 'PL1_GDC'" />
+          <Pl2 ref="svgRef" v-if="item.id === 'PL2_GDC'" />
+          <Dwk ref="svgRef" v-if="item.id === 'DWK_GDC'" />
+          <Mch ref="svgRef" v-if="item.id === 'MCH_GDC'" />
+          <Xh ref="svgRef" v-if="item.id === 'XH_GDC'" />
+          <Sbdl ref="svgRef" v-if="item.id === 'QS3_FDC'" /> -->
+          <div class="alarmIconBox" v-if="item.id !== 'all'" @click="switchAlarmSound(index)">
+            <el-tooltip
+                v-if="item.isMute"
+                effect="light"
+                :content="`当前${item.name}升压站报警已消音，请注意`"
+                placement="left"
+            >
+              <i
+                  class="el-icon-close-notification"
+                  style="color: orangered"
+              ></i>
+            </el-tooltip>
+            <i v-else class="el-icon-bell" style="color: rgb(219, 215, 0)"></i>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+      <CurrentWarningCard
+          :currentClass="$store.state.currentWarningCardClass"
+          :activeTab="activeTab || 'MHS_FDC'"
+          v-if="activeTab !== 'all'"
+      />
+    </div>
+  </el-dialog>
+</template>
+<script>
+
+import api from "@api/stateMonitor/index.js";
+import CurrentWarningCard from "./currentWarningCard.vue";
+
+export default {
+  props: {
+    activeTabStation: {
+      type: String,
+      default: "",
+    },
+  },
+  components: {
+    CurrentWarningCard
+  },
+  data() {
+    return {
+      activeTab: this.$store.state.activeTab,
+      svgVisible: true,
+      audio: null,
+      timmer: null,
+      syzArray: [],
+      pageshowMode: 0,
+      svgMsg: '',
+      loading: false,
+      allTagidArr: [],
+      starTimer: null,
+      allTagsMS: {},
+      allrefreshData: {},
+      allConditions: {},
+      onlytag: {},
+      allSvgMsgData: [],
+      allHeight: 'D',
+      allWarnData: [],
+      starTimerWarn: null,
+      numm: 0,
+      stationSort: []
+    };
+  },
+  computed: {
+    pageHeight() {
+      return {
+        'height': document.documentElement.clientHeight - 60 + 'px'
+      }
+    },
+    allpageHeight() {
+      return {
+        'height': document.documentElement.clientHeight - 200 + 'px'
+      }
+    },
+  },
+  mounted() {
+  },
+  updated() {
+  },
+  methods: {
+    // 获取升压站报警数据
+    getSyzWarnData() {
+      api.alarmFault().then((res) => {
+        if (res && res.data) {
+          let datas = res.data
+          let arr = []
+          datas.forEach(it => {
+            if (it.rank === '5' && it.category1 === 'SYZ') {
+              // if (it.stationName.indexOf('风电场') !== -1 ) {
+              //     str = it.stationName.substring(0, it.stationName.indexOf('风电场'))
+              // } else if (it.stationName.indexOf('光伏电站') !== -1) {
+              //     str = it.stationName.substring(0, it.stationName.indexOf('光伏电站'))
+              // }
+              arr.push(it.category2)
+            }
+            // let str = ''
+          })
+          this.allWarnData = this.unique(arr)
+        }
+      })
+    },
+    unique(arr) {
+      let newArr = []
+      for (let i = 0; i < arr.length; i++) {
+        if (newArr.indexOf(arr[i]) === -1) {
+          newArr.push(arr[i])
+        }
+      }
+      return newArr
+    },
+    getWarnstyle(item) {
+      let showWarn = ''
+      this.allWarnData.forEach(it => {
+        if (it === item.id) {
+          showWarn = 'warningMaskNew'
+        }
+      })
+      return showWarn
+    },
+    getStyle(type) {
+      let num = null
+      let num1 = null
+      let num2 = null
+      if (type === 'D') {
+        return {
+          'width': '33.3%',
+          'float': 'left',
+          'height': '400px'
+        }
+      } else if (type === 'Z') {
+        num = parseInt(this.allSvgMsgData.length / 4)
+        num1 = this.allSvgMsgData.length % 4
+        num2 = num1 > 0 ? num + 1 : num
+        return {
+          'width': '25%',
+          'float': 'left',
+          'height': (document.documentElement.clientHeight - 200) / num2 + 'px'
+        }
+      } else {
+        num = parseInt(this.allSvgMsgData.length / 5)
+        num1 = this.allSvgMsgData.length % 5
+        num2 = num1 > 0 ? num + 1 : num
+        return {
+          'width': '20%',
+          'float': 'left',
+          'height': (document.documentElement.clientHeight - 200) / num2 + 'px'
+        }
+      }
+
+    },
+    changeHeight(type) {
+      this.allHeight = type
+    },
+    getAllStationtab() {
+      let obj = {
+        id: 'all',
+        name: '全部'
+      }
+      api.getAllStationTab().then((res) => {
+        if (res && res.data) {
+          res.data.unshift(obj)
+          this.syzArray = res.data
+          this.activeTab = res.data[0].id
+          if (this.activeTab === 'all') {
+            let allMsg = res.data
+            this.allSvgMsgData = []
+            this.stationSort = []
+            allMsg.forEach(it => {
+              if (it.id !== 'all') {
+                this.stationSort.push(it.name)
+                this.getallSvgDataFn(it.id, it.name)
+              }
+            })
+            // window.sessionStorage.setItem('allSvgData', [])
+            console.log('allSvgMsgData', this.allSvgMsgData)
+            console.log('stationSort', this.stationSort)
+            console.log('allMsg', allMsg)
+          }
+
+          // this.getSvgDataFn(res.data[0].id)
+        }
+      })
+    },
+    // 获取所有升压站数据
+    getallSvgDataFn(id, name) {
+      let params = {
+        id: id
+      }
+      api.getSvgData(params).then((res) => {
+        let str = ''
+        str = res.data.substring(res.data.indexOf('<svg'))
+        str = str.replace('<svg', '<svg viewBox="0 -100 1900 1260"')
+        let obj = {
+          id: id,
+          name: name,
+          msg: str
+        }
+        this.allSvgMsgData.push(obj)
+        if (this.allSvgMsgData.length === this.stationSort.length) {
+          let sortArr = []
+          this.stationSort.forEach(itc => {
+            this.allSvgMsgData.forEach(itb => {
+              if (itc === itb.name) {
+                sortArr.push(itb)
+              }
+            })
+          })
+          this.allSvgMsgData = sortArr
+        }
+      })
+    },
+    // 获取升压站数据
+    getSvgDataFn(val) {
+      this.svgMsg = ''
+      this.loading = true
+      let params = {
+        id: val
+      }
+      api.getSvgData(params).then((res) => {
+        if (res && res.data) {
+          let str = ''
+          str = res.data.substring(res.data.indexOf('<svg'))
+          str = str.replace('<svg', '<svg viewBox="0 0 1900 1260"')
+          this.svgMsg = str
+          let html = document.getElementById('svg')
+          let svg1 = document.getElementsByTagName('svg')
+          this.$nextTick(() => {
+            if (svg1) {
+              let allTags = []
+              let allTagsxc = []
+              let status = ['g', 'text', 'rect', 'line', 'polyline', 'circle', 'ellipse', 'polygon']
+              status.forEach(it => {
+                let allgs = []
+                allgs = document.querySelectorAll(it);
+                allTags.push(allgs)
+              })
+              allTags = [...allTags[0], ...allTags[1], ...allTags[2], ...allTags[3], ...allTags[4], ...allTags[5], ...allTags[6], ...allTags[7]]
+              allTags.forEach((it) => {
+                if (it.getAttribute("tagid")) {
+                  allTagsxc.push(it);
+                }
+              });
+              console.log('allTags222=>', allTagsxc)
+              this.allTagidArr = allTagsxc
+              this.getSvgInfo()
+            }
+            console.log('html111=>', html)
+          })
+          this.loading = false
+        }
+      })
+    },
+    // 获取触发器
+    getSvgInfo() {
+      let params = {
+        id: this.activeTab
+      }
+      api.getAllStationSvgInfo(params).then((res) => {
+        if (res && res.data) {
+          if (res.data.tags) {
+            let strarr = []
+            let str = ''
+            for (let i in res.data.tags) {
+              strarr.push(res.data.tags[i].tag)
+            }
+            str = strarr.join(',')
+            this.allTagsMS = res.data.tags
+            this.allConditions = res.data.conditions
+            // this.getrefreshData(str)
+            this.starTimer = setInterval(() => {
+              this.getrefreshData(str)
+            }, 1000)
+          }
+          console.log('SvgInfo333=>', res)
+        }
+      })
+    },
+    // 获取根盾数据
+    getrefreshData(val) {
+      api.refreshData(val).then((res) => {
+        if (res && res.data) {
+          this.allrefreshData = res.data
+          this.refreshDataFn(this.allTagsMS)
+        }
+        console.log('refreshData444=>', res)
+      })
+    },
+    // 刷新数据
+    refreshDataFn(datas) {
+      for (let it in datas) {
+        let tagId = datas[it];
+        this.toRefreshFn(it, tagId);
+      }
+    },
+    // 刷新自定义组件
+    toRefreshFn(val, data) {
+      var tag = this.allrefreshData[data.tag];
+      if (!tag) return;
+      this.allTagidArr.forEach(it => {
+        this.onlytag = {}
+        if (it.attributes.tagid) {
+          if (val === it.attributes.tagid.value) {
+            this.onlytag = it
+            if (it.nodeName === 'polyline') {
+              console.log('onlyTag666', this.onlytag)
+            }
+            if (it.nodeName !== 'text') {
+              if (this.onlytag.attributes.csid) {
+                let csid = this.onlytag.attributes.csid.value.split(';')
+                csid.forEach(ic => {
+                  if (ic) {
+                    if (!this.allConditions[ic].isBinding) {
+                      let num = parseInt(this.allConditions[ic].value) === 0 ? '0' : parseInt(this.allConditions[ic].value)
+                      if (num) {
+                        let num2 = tag.value === 0 ? '0' : tag.value
+                        if (num === num2) {
+                          this.onlytag.setAttribute(this.allConditions[ic].property, this.allConditions[ic].propertyValue)
+                          return
+                        }
+                      }
+                    } else {
+                      this.onlytag.setAttribute(this.allConditions[ic].property, this.allConditions[ic].propertyValue)
+                    }
+                  }
+                })
+              }
+            } else {
+              this.onlytag.textContent = tag.value.toFixed(2)
+            }
+          }
+        }
+      })
+      // console.log('onlyTag555', this.onlytag)
+    },
+    // '全部'界面双击事件
+    dblgetSvgDataFn(name) {
+      this.activeTab = name
+      this.getSvgDataFn(name)
+    },
+    // 初始化第一次报警并判断是否播放声音
+    initAlarm() {
+      let syzAlarmArray = this.$store.getters.syzAlarmArray;
+
+      const firstAlarmItem = syzAlarmArray.find((ele) => {
+        return !ele.isConfirm && ele.rank === this.$store.state.syzAlarmRank;
+      });
+
+      firstAlarmItem &&
+      this.audioPlay(this.getSound(firstAlarmItem.soundSource));
+
+      firstAlarmItem &&
+      this.$store.getters.syzAlarmArray.forEach((ele) => {
+        if (ele.stationId === firstAlarmItem.stationId) {
+          ele.isConfirm = true;
+        }
+      });
+
+      this.activeTab =
+          this.activeTabStation ||
+          firstAlarmItem?.stationId ||
+          syzAlarmArray.find((ele) => {
+            return ele.rank === this.$store.state.syzAlarmRank;
+          })?.stationId ||
+          this.$store.getters.syzArray[0].id;
+
+      syzAlarmArray.forEach((ele) => {
+        if (ele.stationId === firstAlarmItem?.stationId) {
+          ele.isConfirm = true;
+          this.clearWarningTag(ele.stationId);
+        } else if (
+            !ele.isConfirm &&
+            ele.stationId !== firstAlarmItem?.stationId
+        ) {
+          this.renderWarningTag(ele.stationId);
+        }
+      });
+
+      this.$store.commit("syzAlarmArray", syzAlarmArray);
+    },
+
+    // 定时器循环数据判断小红点渲染及是否播放声音
+    renderAlarm(stationId = "", playSound = true) {
+      let syzAlarmArray = this.$store.getters.syzAlarmArray;
+
+      syzAlarmArray.forEach((ele) => {
+        if (ele.stationId === stationId) {
+          ele.isConfirm = true;
+          this.clearWarningTag(ele.stationId);
+        } else if (!ele.isConfirm && ele.stationId !== stationId) {
+          this.renderWarningTag(ele.stationId);
+        }
+      });
+
+      const res = syzAlarmArray.find((ele) => {
+        return !ele.isConfirm;
+      });
+
+      if (playSound) {
+        // this.audioPlay("./static/sound/syz.mp3");
+      }
+
+      this.$store.commit("syzAlarmArray", syzAlarmArray);
+    },
+
+    // 返回音频文件路径
+    getSound(fileName) {
+      return `./static/sound/${fileName}.mp3`;
+    },
+
+    // 播放音频
+    audioPlay(audioPath) {
+      let soundMuteSelf = [];
+      let soundMuteOther = [];
+
+      this.$store.getters.syzAlarmArray.forEach((ele) => {
+        if (ele.stationId === this.activeTab) {
+          soundMuteSelf.push(ele);
+        } else {
+          soundMuteOther.push(ele);
+        }
+      });
+
+      let alarmSelfLock = soundMuteSelf.some((ele) => {
+        return !ele.isConfirm;
+      });
+
+      let alarmOtherLock = soundMuteOther.some((ele) => {
+        return !ele.isConfirm;
+      });
+
+      if (alarmOtherLock) {
+        this.audio = new Audio(audioPath);
+        this.audio.play();
+      } else if (alarmSelfLock) {
+        this.$store.getters.syzArray.forEach((ele) => {
+          if (ele.stationId === this.activeTab) {
+            ele.isMute = false;
+            this.audio = new Audio(audioPath);
+            this.audio.play();
+          }
+        });
+      } else if (!alarmSelfLock) {
+        this.$store.getters.syzArray.forEach((ele) => {
+          if (ele.stationId === this.activeTab) {
+            if (!ele.isMute) {
+              this.audio = new Audio(audioPath);
+              this.audio.play();
+            }
+          }
+        });
+      }
+    },
+
+    // 显示某个小红点
+    renderWarningTag(stationId = "") {
+      this.$store.getters.syzArray.forEach((ele) => {
+        if (ele.id === stationId) {
+          ele.isWarning = "1";
+        }
+      });
+      this.pageshowMode++;
+    },
+
+    // 清除某个小红点
+    clearWarningTag(stationId = "") {
+      this.$store.getters.syzArray.forEach((ele) => {
+        if (ele.id === stationId) {
+          ele.isWarning = "0";
+        }
+      });
+      this.pageshowMode++;
+    },
+
+    // 切换报警声音开关
+    switchAlarmSound(index) {
+      this.$store.getters.syzArray[index].isMute =
+          !this.$store.getters.syzArray[index].isMute;
+    },
+
+    opened() {
+      this.initAlarm();
+      this.getAllStationtab()
+      this.timmer = setInterval(() => {
+        this.renderAlarm();
+      }, 3000);
+
+      let starTimerWarn = setInterval(() => {
+        this.getSyzWarnData()
+      }, 2000)
+      if (this.activeTabStation) {
+        setTimeout(() => {
+          clearInterval(this.starTimer);
+          this.starTimer = null;
+          this.$store.commit("activeTab", this.activeTabStation);
+          this.renderAlarm(this.activeTabStation, false);
+          if (this.activeTabStation !== 'all') {
+            this.activeTab = this.activeTabStation
+            this.debounce(this.getSvgDataFn(this.activeTabStation), 200)
+          }
+        }, 100);
+      }
+    },
+
+    closed() {
+      // this.$refs.svgRef[0].closed()
+      // this.$refs.svgRef[1].closed()
+      // this.$refs.svgRef[2].closed()
+      // this.$refs.svgRef[3].closed()
+      // this.$refs.svgRef[4].closed()
+      clearInterval(this.starTimer);
+      clearInterval(this.starTimerWarn);
+      clearInterval(this.timmer);
+      this.starTimer = null
+      this.starTimerWarn = null
+      this.timmer = null;
+      this.$store.commit("activeTab", "");
+      this.$store.commit("syzDialogShow", false);
+    },
+
+    tabClick(res) {
+      clearInterval(this.starTimer);
+      this.starTimer = null;
+      this.$store.commit("activeTab", res.props.name);
+      this.renderAlarm(res.props.name, false);
+      if (res.props.name !== 'all') {
+        this.debounce(this.getSvgDataFn(res.props.name), 200)
+        // this.getSvgDataFn(res.props.name)
+      }
+    },
+    debounce(fn, delay) {
+      var delay = delay || 200;
+      var timer;
+      return function () {
+        var th = this;
+        var args = arguments;
+        if (timer) {
+          clearTimeout(timer);
+        }
+        timer = setTimeout(function () {
+          timer = null;
+          fn.apply(th, args);
+        }, delay);
+      };
+    },
+    throttle(fn, interval) {
+      var last;
+      var timer;
+      var interval = interval || 200;
+      return function () {
+        var th = this;
+        var args = arguments;
+        var now = +new Date();
+        if (last && now - last < interval) {
+          clearTimeout(timer);
+          timer = setTimeout(function () {
+            last = now;
+            fn.apply(th, args);
+          }, interval);
+        } else {
+          last = now;
+          fn.apply(th, args);
+        }
+      }
+    }
+  },
+  watch: {
+    "$store.state.syzArray"(res) {
+      this.syzArray = res;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.bodyy {
+  display: flex;
+  flex-direction: row;
+  background-color: black;
+  width: 98%;
+  margin-top: -30px;
+  height: 90vh;
+  position: relative;
+  overflow: hidden;
+  margin-left: 44px;
+
+  .syzDetailsPaneItem {
+    position: relative;
+
+    .buttonGroup {
+      margin-bottom: 10px;
+      display: flex;
+      // justify-content: end;
+      float: right;
+
+      .el-button-group {
+        .el-button {
+          min-height: 30px !important;
+        }
+
+        .showSty {
+          color: #409eff;
+          border-color: #c6e2ff;
+          background-color: #ecf5ff;
+          outline: 0;
+        }
+      }
+    }
+
+    .warningMaskNew {
+      background-color: rgba(186, 50, 55, 0.5);
+      animation: fade 2000ms infinite;
+      -webkit-animation: fade 2000ms infinite;
+    }
+
+    @keyframes fade {
+      from {
+        opacity: 0.7;
+      }
+
+      50% {
+        opacity: 0.3;
+      }
+
+      to {
+        opacity: 0.7;
+      }
+    }
+
+    @-webkit-keyframes fade {
+      from {
+        opacity: 0.7;
+      }
+
+      50% {
+        opacity: 0.3;
+      }
+
+      to {
+        opacity: 0.7;
+      }
+    }
+
+    .showAllSvgMsg {
+      width: calc(100% - 15px);
+      height: calc(100% - 15px);
+      // padding: 20px;
+      // margin-bottom: 20px;
+      // background: #3a3a3a;
+      // border: 3px solid #3a3a3a;
+      border: 3px solid #646464;
+      border-radius: 10px;
+
+      .showAllSvgMsg_top {
+        border-radius: 10px 10px 0 0;
+        height: calc(100% - 40px);
+        width: 100%;
+        // background: #fff;
+      }
+
+      .showAllSvgMsg_bot {
+        background: #3a3a3a;
+        border-radius: 0 0 8px 8px;
+        height: 40px;
+        text-align: center;
+
+        span {
+          position: relative;
+          top: 10px;
+          font-weight: bold;
+          color: #fff;
+        }
+      }
+    }
+
+    .alarmIconBox {
+      position: absolute;
+      right: 0;
+      top: 0;
+      cursor: pointer;
+
+      i {
+        font-size: 20px;
+      }
+    }
+  }
+}
+</style>
+<style lang="less">
+.bodyy {
+  .pop-up-main,
+  .paln-box {
+    width: 100%;
+    height: 90vh;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .movableItem {
+    // width: 1920PX !important;
+    // height: 800PX !important;
+
+    .svg {
+      //   width: 100%;
+      //   height: 92%;
+      margin-left: 0;
+      margin-top: 8%;
+    }
+  }
+
+  .el-badge__content.is-fixed.is-dot {
+    right: 0;
+    top: 10px;
+    background: #f25656;
+    animation: twinkle 0.75s infinite;
+    border-color: transparent;
+  }
+
+  @keyframes twinkle {
+    0% {
+      opacity: 0;
+    }
+    50% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+}
+
+.currentShowTitles {
+  width: 100%;
+  position: relative;
+
+  .alarIcon {
+    position: absolute;
+    right: 50px;
+    top: 5;
+    font-size: 20px;
+    cursor: pointer;
+  }
+}
+
+</style>