新增电计量页面，修改曲线偏差率弹窗接口，首页光伏图片更新

src/api/wisdomOverhaul/energy/index.js

@@ -1,4 +1,4 @@
-import request from "../../../tools/request";
+import request from "@/tools/request";
 
 
 const yawGetPassRate = (data) => {

src/components/alarm-badge/index.vue

@@ -11,11 +11,16 @@
       :value="warnLength"
       :class="{ active: warnLength && !displayAlarms ? false : true }"
     >
-      <div class="alarmDeligo" @click="displayAlarm" v-if="warnLength">
+      <div class="alarmDeligo" @click="displayAlarm" v-if="warnLength" >
         <img src="@assets/imgs/ygj.png" class="trans" />
         <img src="@assets/imgs/ygj1.png" />
       </div>
-      <div class="alarmDeligo" @dblclick="setting" v-if="!warnLength">
+      <div
+        class="alarmDeligo"
+        @dblclick="setting"
+        v-if="!warnLength"
+        title="双击打开配置"
+      >
         <img src="@assets/imgs/wgj.png" class="trans" />
         <img src="@assets/imgs/wgj1.png" />
       </div>
@@ -502,17 +507,17 @@ export default {
       let x = event.clientX - this.currentX;
       let y = event.clientY - this.currentY;
       this.x += x;
-      if (this.x < 60) {
-        this.x = 60;
-      } else if (this.x > window.innerWidth - 20) {
-        this.x = window.innerWidth - 82;
-      }
+      //   if (this.x < 60) {
+      //     this.x = 60;
+      //   } else if (this.x > window.innerWidth - 20) {
+      //     this.x = window.innerWidth - 82;
+      //   }
       this.y += y;
-      if (this.y > window.innerHeight - 20) {
-        this.y = window.innerHeight - 32;
-      } else if (this.y < 0) {
-        this.y = 0;
-      }
+      //   if (this.y > window.innerHeight - 20) {
+      //     this.y = window.innerHeight - 32;
+      //   } else if (this.y < 0) {
+      //     this.y = 0;
+      //   }
     },
     //开关列表
     displayAlarm(val) {

src/components/coms/table/table-qc.vue

@@ -173,34 +173,34 @@ export default {
       let method = "GET";
       if ("deviationRate2" == col.field) {
         data.type = "sjbz";
-      } else if ("deviationRate1" == col.field) {
-        data.type = "sjzy";
-      } else if ("deviationRate3" == col.field) {
-        data.type = "zybz";
-      } else if ("monthDeviationRate" == col.field) {
+        subUrl = curIndex
+          ? "/leaderboard/getCurvechatAjax"
+          : "/leaderboard/curveMonthchatAjax";
+      }
+      //   else if ("deviationRate1" == col.field) {
+      //     data.type = "sjzy";
+      //   } else if ("deviationRate3" == col.field) {
+      //     data.type = "zybz";
+      //   }
+      else if ("monthDeviationRate" == col.field) {
         data.type = "hb";
+        subUrl = curIndex
+          ? "/leaderboard/curvechatAjaxhb"
+          : "/leaderboard/curveMonthchatAjaxhb";
       } else if ("yearDeviationRate" == col.field) {
         data.type = "tb";
+        subUrl = curIndex
+          ? "/leaderboard/curvechatAjaxtb"
+          : "/leaderboard/curveMonthchatAjaxtb";
       } else if ("standardDeviationRate" == col.field) {
         data.type = "bg";
+        subUrl = curIndex
+          ? "/leaderboard/curvechatAjaxbg"
+          : "/leaderboard/curveMonthchatAjaxbg";
       } else {
         return 0;
       }
 
-      if (curIndex) {
-        if (data.type.length < 2) {
-          subUrl = "/leaderboard/getCurvechatAjax";
-        } else {
-          subUrl = "/leaderboard/curvechatAjaxhb";
-        }
-      } else {
-        if (data.type.length < 2) {
-          subUrl = "/leaderboard/curveMonthchatAjax";
-        } else {
-          subUrl = "/leaderboard/curveMonthchatAjaxtb";
-        }
-      }
-
       this.dialogShow = true;
       this.dialogTitle = "曲线偏差率排行";
 

src/components/windDetail/index.vue

@@ -285,6 +285,8 @@
                   {{
                     item.name.includes("状态")
                       ? item.value
+                      : item.name == "总发电量"
+                      ? (item.value / 10000).toFixed(2)
                       : Number(item.value).toFixed(2)
                   }}
                   <div v-if="item.valueUnit != 'NULL'" class="unit">
@@ -603,7 +605,6 @@ export default {
           }
           this.partDInfos = partDInfo;
           this.partAInfos = partAInfo;
-          console.log(this.partAInfos);
         })
         .catch((e) => {
           // 失败的时候则返回最先被reject失败状态的值

src/router/index.js

@@ -71,6 +71,7 @@ export const asyncRoutes = [
               permissions: ["jn_fdcz_sjzb"],
             },
           },
+
           {
             path: "matrixMonitor",
             component: () =>
@@ -111,6 +112,19 @@ export const asyncRoutes = [
             },
           },
           {
+            path: "millivolt",
+            component: () =>
+              import(
+                "@/views/stateMonitor/factoryMonitor/windPowerPlant/millivolt"
+              ),
+            name: "millivolt",
+            meta: {
+              title: "电计量",
+              icon: "svg-djl",
+              permissions: ["jn_fdcz_syz"],
+            },
+          },
+          {
             path: "windPower",
             component: () =>
               import(
@@ -230,6 +244,19 @@ export const asyncRoutes = [
             },
           },
           {
+            path: "lightMillivolt",
+            component: () =>
+              import(
+                "@/views/stateMonitor/factoryMonitor/photovoltaic/lightMillivolt"
+              ),
+            name: "lightMillivolt",
+            meta: {
+              title: "电计量",
+              icon: "svg-djl",
+              permissions: ["jn_fdcz_syz"],
+            },
+          },
+          {
             path: "lightGeomorphologicMap",
             component: () =>
               import(
@@ -244,6 +271,16 @@ export const asyncRoutes = [
           },
         ],
       },
+      //   {
+      //     path: "agc",
+      //     component: () => import("@/views/stateMonitor/Agc/Agc.vue"),
+      //     name: "agc",
+      //     meta: {
+      //       title: "agc",
+      //       icon: "svg-s指标列表",
+      //       permissions: ["jn_fdcz_sjzb"],
+      //     },
+      //   },
       {
         path: "lightmatrix", // 基础矩阵
         name: "LightMatrix",
@@ -297,230 +334,230 @@ export const asyncRoutes = [
           permissions: ["jn_zhzb"],
         },
       },
-      {
-        path: "factoryMonitor",
-        redirect: "factoryMonitor/windPowerPlant",
-        component: () => import("@/views/stateMonitor/factoryMonitor"),
-        name: "factoryMonitor",
-        meta: {
-          title: "厂站监视",
-          icon: "svg-single-station-surveillance",
-          permissions: ["jn_czjs"],
-        },
-        hidden: true,
-        children: [
-          {
-            path: "windPowerPlant",
-            redirect: { name: "windhome" },
-            component: () =>
-              import("@/views/stateMonitor/factoryMonitor/windPowerPlant"),
-            name: "windPowerPlant",
-            meta: {
-              title: "风电场站",
-              icon: "",
-              permissions: ["jn_fdcz"],
-            },
-            children: [
-              {
-                path: "windhome",
-                component: () =>
-                  import(
-                    "@/views/stateMonitor/factoryMonitor/windPowerPlant/windhome"
-                  ),
-                name: "windhome",
-                meta: {
-                  title: "场站监视",
-                  icon: "svg-station-surveillance",
-                  permissions: ["jn_fdcz_czjs"],
-                },
-              },
-              {
-                path: "DataTarget",
-                component: () =>
-                  import(
-                    "@/views/stateMonitor/factoryMonitor/windPowerPlant/DataTarget"
-                  ),
-                name: "DataTarget",
-                meta: {
-                  title: "数据指标",
-                  icon: "svg-s指标列表",
-                  permissions: ["jn_fdcz_sjzb"],
-                },
-              },
-              {
-                path: "matrixMonitor",
-                component: () =>
-                  import(
-                    "@/views/stateMonitor/factoryMonitor/windPowerPlant/matrixMonitor"
-                  ),
-                name: "matrixMonitor",
-                meta: {
-                  title: "矩阵监视",
-                  icon: "svg-matrix",
-                  permissions: ["jn_fdcz_jzjs"],
-                },
-              },
-              {
-                path: "draughtFan",
-                component: () =>
-                  import(
-                    "@/views/stateMonitor/factoryMonitor/windPowerPlant/draughtFan"
-                  ),
-                name: "draughtFan",
-                meta: {
-                  title: "风机设备",
-                  icon: "svg-wind-site",
-                  permissions: ["jn_fdcz_fjsb"],
-                },
-              },
-              {
-                path: "boosterStation",
-                component: () =>
-                  import(
-                    "@/views/stateMonitor/factoryMonitor/windPowerPlant/boosterStation"
-                  ),
-                name: "boosterStation",
-                meta: {
-                  title: "升压站",
-                  icon: "svg-s升压站",
-                  permissions: ["jn_fdcz_syz"],
-                },
-              },
-              {
-                path: "windPower",
-                component: () =>
-                  import(
-                    "@/views/stateMonitor/factoryMonitor/windPowerPlant/windPower"
-                  ),
-                name: "windPower",
-                meta: {
-                  title: "测风塔",
-                  permissions: ["jn_fdcz_cft"],
-                  icon: "svg-s测风塔",
-                },
-              },
-              {
-                path: "geomorphologicMap",
-                component: () =>
-                  import(
-                    "@/views/stateMonitor/factoryMonitor/windPowerPlant/geomorphologicMap"
-                  ),
-                name: "geomorphologicMap",
-                meta: {
-                  title: "地貌图",
-                  permissions: ["jn_fdcz_dmt"],
-                  icon: "svg-s地图",
-                },
-              },
-            ],
-          },
-          {
-            path: "photovoltaic",
-            redirect: { name: "lighthome" },
-            component: () =>
-              import("@/views/stateMonitor/factoryMonitor/photovoltaic"),
-            name: "photovoltaic",
-            meta: {
-              title: "光伏场站",
-              icon: "",
-              permissions: ["jn_gfcz"],
-            },
-            children: [
-              {
-                path: "lighthome",
-                component: () =>
-                  import(
-                    "@/views/stateMonitor/factoryMonitor/photovoltaic/lighthome"
-                  ),
-                name: "lighthome",
-                meta: {
-                  title: "场站监视",
-                  icon: "svg-station-surveillance",
-                  permissions: ["jn_gfcz_czjs"],
-                },
-              },
-              {
-                path: "lightDataTarget",
-                component: () =>
-                  import(
-                    "@/views/stateMonitor/factoryMonitor/photovoltaic/lightDataTarget"
-                  ),
-                name: "lightDataTarget",
-                meta: {
-                  title: "数据指标",
-                  permissions: ["jn_gfcz_sjzb"],
-                  icon: "svg-s指标列表",
-                },
-              },
-              {
-                path: "lightMatrixMonitor",
-                component: () =>
-                  import(
-                    "@/views/stateMonitor/factoryMonitor/photovoltaic/lightMatrixMonitor"
-                  ),
-                name: "lightMatrixMonitor",
-                meta: {
-                  title: "矩阵监视",
-                  permissions: ["jn_gfcz_jzjs"],
-                  icon: "svg-matrix",
-                },
-              },
-              {
-                path: "lightMatrix",
-                component: () =>
-                  import(
-                    "@/views/stateMonitor/factoryMonitor/photovoltaic/lightMatrix"
-                  ),
-                name: "lightMatrix",
-                meta: {
-                  title: "分类矩阵",
-                  permissions: ["jn_gfcz_fljz"],
-                  icon: "svg-fljz",
-                },
-              },
-              {
-                path: "photovoltaicFacility",
-                component: () =>
-                  import(
-                    "@/views/stateMonitor/factoryMonitor/photovoltaic/photovoltaicFacility"
-                  ),
-                name: "photovoltaicFacility",
-                meta: {
-                  title: "光伏设备",
-                  permissions: ["jn_gfcz_gfsb"],
-                  icon: "svg-photovoltaic",
-                },
-              },
-              {
-                path: "lightBoosterStation",
-                component: () =>
-                  import(
-                    "@/views/stateMonitor/factoryMonitor/photovoltaic/lightBoosterStation"
-                  ),
-                name: "lightBoosterStation",
-                meta: {
-                  title: "升压站",
-                  permissions: ["jn_gfcz_syz"],
-                  icon: "svg-s升压站",
-                },
-              },
-              {
-                path: "lightGeomorphologicMap",
-                component: () =>
-                  import(
-                    "@/views/stateMonitor/factoryMonitor/photovoltaic/lightGeomorphologicMap"
-                  ),
-                name: "lightGeomorphologicMap",
-                meta: {
-                  title: "地貌图",
-                  permissions: ["jn_gfcz_dmt"],
-                  icon: "svg-s地图",
-                },
-              },
-            ],
-          },
-        ],
-      },
+      //   {
+      //     path: "factoryMonitor",
+      //     redirect: "factoryMonitor/windPowerPlant",
+      //     component: () => import("@/views/stateMonitor/factoryMonitor"),
+      //     name: "factoryMonitor",
+      //     meta: {
+      //       title: "厂站监视",
+      //       icon: "svg-single-station-surveillance",
+      //       permissions: ["jn_czjs"],
+      //     },
+      //     hidden: true,
+      //     children: [
+      //       {
+      //         path: "windPowerPlant",
+      //         redirect: { name: "windhome" },
+      //         component: () =>
+      //           import("@/views/stateMonitor/factoryMonitor/windPowerPlant"),
+      //         name: "windPowerPlant",
+      //         meta: {
+      //           title: "风电场站",
+      //           icon: "",
+      //           permissions: ["jn_fdcz"],
+      //         },
+      //         children: [
+      //           {
+      //             path: "windhome",
+      //             component: () =>
+      //               import(
+      //                 "@/views/stateMonitor/factoryMonitor/windPowerPlant/windhome"
+      //               ),
+      //             name: "windhome",
+      //             meta: {
+      //               title: "场站监视",
+      //               icon: "svg-station-surveillance",
+      //               permissions: ["jn_fdcz_czjs"],
+      //             },
+      //           },
+      //           {
+      //             path: "DataTarget",
+      //             component: () =>
+      //               import(
+      //                 "@/views/stateMonitor/factoryMonitor/windPowerPlant/DataTarget"
+      //               ),
+      //             name: "DataTarget",
+      //             meta: {
+      //               title: "数据指标",
+      //               icon: "svg-s指标列表",
+      //               permissions: ["jn_fdcz_sjzb"],
+      //             },
+      //           },
+      //           {
+      //             path: "matrixMonitor",
+      //             component: () =>
+      //               import(
+      //                 "@/views/stateMonitor/factoryMonitor/windPowerPlant/matrixMonitor"
+      //               ),
+      //             name: "matrixMonitor",
+      //             meta: {
+      //               title: "矩阵监视",
+      //               icon: "svg-matrix",
+      //               permissions: ["jn_fdcz_jzjs"],
+      //             },
+      //           },
+      //           {
+      //             path: "draughtFan",
+      //             component: () =>
+      //               import(
+      //                 "@/views/stateMonitor/factoryMonitor/windPowerPlant/draughtFan"
+      //               ),
+      //             name: "draughtFan",
+      //             meta: {
+      //               title: "风机设备",
+      //               icon: "svg-wind-site",
+      //               permissions: ["jn_fdcz_fjsb"],
+      //             },
+      //           },
+      //           {
+      //             path: "boosterStation",
+      //             component: () =>
+      //               import(
+      //                 "@/views/stateMonitor/factoryMonitor/windPowerPlant/boosterStation"
+      //               ),
+      //             name: "boosterStation",
+      //             meta: {
+      //               title: "升压站",
+      //               icon: "svg-s升压站",
+      //               permissions: ["jn_fdcz_syz"],
+      //             },
+      //           },
+      //           {
+      //             path: "windPower",
+      //             component: () =>
+      //               import(
+      //                 "@/views/stateMonitor/factoryMonitor/windPowerPlant/windPower"
+      //               ),
+      //             name: "windPower",
+      //             meta: {
+      //               title: "测风塔",
+      //               permissions: ["jn_fdcz_cft"],
+      //               icon: "svg-s测风塔",
+      //             },
+      //           },
+      //           {
+      //             path: "geomorphologicMap",
+      //             component: () =>
+      //               import(
+      //                 "@/views/stateMonitor/factoryMonitor/windPowerPlant/geomorphologicMap"
+      //               ),
+      //             name: "geomorphologicMap",
+      //             meta: {
+      //               title: "地貌图",
+      //               permissions: ["jn_fdcz_dmt"],
+      //               icon: "svg-s地图",
+      //             },
+      //           },
+      //         ],
+      //       },
+      //       {
+      //         path: "photovoltaic",
+      //         redirect: { name: "lighthome" },
+      //         component: () =>
+      //           import("@/views/stateMonitor/factoryMonitor/photovoltaic"),
+      //         name: "photovoltaic",
+      //         meta: {
+      //           title: "光伏场站",
+      //           icon: "",
+      //           permissions: ["jn_gfcz"],
+      //         },
+      //         children: [
+      //           {
+      //             path: "lighthome",
+      //             component: () =>
+      //               import(
+      //                 "@/views/stateMonitor/factoryMonitor/photovoltaic/lighthome"
+      //               ),
+      //             name: "lighthome",
+      //             meta: {
+      //               title: "场站监视",
+      //               icon: "svg-station-surveillance",
+      //               permissions: ["jn_gfcz_czjs"],
+      //             },
+      //           },
+      //           {
+      //             path: "lightDataTarget",
+      //             component: () =>
+      //               import(
+      //                 "@/views/stateMonitor/factoryMonitor/photovoltaic/lightDataTarget"
+      //               ),
+      //             name: "lightDataTarget",
+      //             meta: {
+      //               title: "数据指标",
+      //               permissions: ["jn_gfcz_sjzb"],
+      //               icon: "svg-s指标列表",
+      //             },
+      //           },
+      //           {
+      //             path: "lightMatrixMonitor",
+      //             component: () =>
+      //               import(
+      //                 "@/views/stateMonitor/factoryMonitor/photovoltaic/lightMatrixMonitor"
+      //               ),
+      //             name: "lightMatrixMonitor",
+      //             meta: {
+      //               title: "矩阵监视",
+      //               permissions: ["jn_gfcz_jzjs"],
+      //               icon: "svg-matrix",
+      //             },
+      //           },
+      //           {
+      //             path: "lightMatrix",
+      //             component: () =>
+      //               import(
+      //                 "@/views/stateMonitor/factoryMonitor/photovoltaic/lightMatrix"
+      //               ),
+      //             name: "lightMatrix",
+      //             meta: {
+      //               title: "分类矩阵",
+      //               permissions: ["jn_gfcz_fljz"],
+      //               icon: "svg-fljz",
+      //             },
+      //           },
+      //           {
+      //             path: "photovoltaicFacility",
+      //             component: () =>
+      //               import(
+      //                 "@/views/stateMonitor/factoryMonitor/photovoltaic/photovoltaicFacility"
+      //               ),
+      //             name: "photovoltaicFacility",
+      //             meta: {
+      //               title: "光伏设备",
+      //               permissions: ["jn_gfcz_gfsb"],
+      //               icon: "svg-photovoltaic",
+      //             },
+      //           },
+      //           {
+      //             path: "lightBoosterStation",
+      //             component: () =>
+      //               import(
+      //                 "@/views/stateMonitor/factoryMonitor/photovoltaic/lightBoosterStation"
+      //               ),
+      //             name: "lightBoosterStation",
+      //             meta: {
+      //               title: "升压站",
+      //               permissions: ["jn_gfcz_syz"],
+      //               icon: "svg-s升压站",
+      //             },
+      //           },
+      //           {
+      //             path: "lightGeomorphologicMap",
+      //             component: () =>
+      //               import(
+      //                 "@/views/stateMonitor/factoryMonitor/photovoltaic/lightGeomorphologicMap"
+      //               ),
+      //             name: "lightGeomorphologicMap",
+      //             meta: {
+      //               title: "地貌图",
+      //               permissions: ["jn_gfcz_dmt"],
+      //               icon: "svg-s地图",
+      //             },
+      //           },
+      //         ],
+      //       },
+      //     ],
+      //   },
       {
         path: "alarmCenter", // 报警列表
         name: "alarmCenter",
@@ -544,6 +581,7 @@ export const asyncRoutes = [
       }*/
     ],
   },
+  //综合报警
   {
     path: "/integratedAlarm",
     component: () => import("@/views/IntegratedAlarm"),

src/views/Home/components/map.vue

@@ -966,7 +966,7 @@
               <div class="titles">
                 <div class="amount">
                   <div class="icon fengji-icon svg-icon svg-icon-white"></div>
-                  <img class="amount-image" src="@/assets/png/sun.png" alt="" />
+                  <img class="amount-image" src="@/assets/png/sy-sun.png" alt="" />
                   <div class="amount-nums">
                     <text class="num-item">{{
                       Number(

src/views/layout/Menu.vue

@@ -245,7 +245,7 @@ export default {
           data: [],
         },
         {
-          id: "others",
+          id: "report",
           text: "智能报表",
           data: [],
         },

src/views/stateMonitor/factoryMonitor/photovoltaic/index.vue

@@ -1,8 +1,18 @@
 <template>
-  <div class="loghtPowerContent">
-    <router-view />
+  <div
+    style="
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: space-between;
+      padding: 0 20px;
+    "
+  >
+    <div class="loghtPowerContent">
+      <router-view />
+    </div>
+    <saliderBar :routerData="routerData" />
   </div>
-  <saliderBar :routerData="routerData" />
 </template>
 
 <script>
@@ -23,11 +33,11 @@ export default {
       stateRoutes.forEach((route) => {
         if (route.path == "/stateMonitor") {
           route.children.forEach((croute) => {
-            if (croute.path == "factoryMonitor") {
-              let a = croute.children.find(
-                (item) => item.path == "photovoltaic"
-              );
-              a.children.forEach((child) => {
+            if (croute.name == "photovoltaic") {
+              //   let a = croute.children.find(
+              //     (item) => item.path == "photovoltaic"
+              //   );
+              croute.children.forEach((child) => {
                 currData.push({
                   icon: child.meta.icon,
                   title: child.meta.title,

src/views/stateMonitor/factoryMonitor/photovoltaic/lightMillivolt/components/previewPicture.vue

@@ -0,0 +1,726 @@
+<template>
+  <div class="pop-up-main">
+    <div class="paln-box">
+      <div
+        class="movableItem"
+        :style="{ width: '100%', 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: "1600px",
+      height: "0",
+      // 可缩小倍数,为空则可无限缩小
+      minification: 3,
+      // 可放大倍数 为空则可无限放大
+      magnification: "",
+      bigMaxWidth: 1100,
+      bigMaxHeight: 1200,
+
+      // 小图标信息
+      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;
+        let parentLeft = oEvent.clientX;
+        let parentTop = oEvent.clientY;
+        // 比例 = （点击位置距离可视窗口位置 - 父元素距离可视窗口位置 - 相对定位的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;
+          let width = e.offsetX;
+          let height = e.offsetY;
+          // 这里判断第一次获取不到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: 100%;
+  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/views/stateMonitor/factoryMonitor/photovoltaic/lightMillivolt/index.vue

@@ -0,0 +1,295 @@
+<template>
+  <headerButton
+    :type="stationType"
+    @renderData="renderData"
+    @alarm="handleAlarm"
+  />
+  <div style="height: calc(100% - 77px)">
+    <!-- 光伏 *************** -->
+
+    <!-- 繁峙均然 -->
+    <GFfanshijunran
+      class="booster-station-body"
+      v-if="wpId === 'SXJ_KGDL_JR_GDC_STA'"
+    />
+    <!-- 方山孙家山 -->
+    <GFfangshansunjiashan
+      class="booster-station-body"
+      v-if="wpId === 'SXJ_KGDL_FS_GDC_STA'"
+    />
+    <!-- 屯留吾元 -->
+    <GFtunliuwuyuan
+      class="booster-station-body"
+      v-if="wpId === 'SXJ_KGDL_TL_GDC_STA'"
+    />
+    <!-- 山阴荣新 -->
+    <GFshanyinrongxin
+      class="booster-station-body"
+      v-if="wpId === 'SXJ_KGDL_SY_GDC_STA'"
+    />
+    <!-- 阳高蔚家堡 -->
+    <GFyanggaoweijiabao
+      class="booster-station-body"
+      v-if="wpId === 'SXJ_KGDL_YG_GDC_STA'"
+    />
+    <!-- 应县晶辉 -->
+    <GFyingxianjinghui
+      class="booster-station-body"
+      v-if="wpId === 'SXJ_KGDL_YX_GDC_STA'"
+    />
+
+    <!-- 怀仁初晨 -->
+    <GFhuairenchuchen
+      class="booster-station-body"
+      v-if="wpId === 'SXJ_KGDL_HR_GDC_STA'"
+    />
+    <!-- 右玉右卫 -->
+    <GFyouyuyouwei
+      class="booster-station-body"
+      v-if="wpId === 'SXJ_KGDL_YY_GDC_STA'"
+    />
+    <!-- 平鲁阻虎 -->
+    <!-- <GFpingluzuhu
+      class="booster-station-body"
+      v-if="wpId === 'SXJ_KGDL_PL_GDC_STA'"
+    /> -->
+    <!-- 天镇旭升 -->
+    <GFtianzhenxusheng
+      class="booster-station-body"
+      v-if="wpId === 'SXJ_KGDL_TZ_GDC_STA'"
+    />
+  </div>
+  <el-drawer
+    class="custom-drawer"
+    v-model="drawer"
+    :title="title + '报警列表'"
+    direction="rtl"
+    size="55%"
+    :before-close="handleClose"
+  >
+    <div class="drawer-form">
+      <div class="select-item">
+        开始日期：
+        <el-date-picker
+          v-model="begin"
+          type="datetime"
+          :disabled-date="disabledDate"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          placeholder="选择日期"
+          size="mini"
+          popper-class="date-select"
+        >
+        </el-date-picker>
+      </div>
+      <div class="select-item">
+        结束日期：
+        <el-date-picker
+          v-model="end"
+          type="datetime"
+          :disabled-date="disabledDate2"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          placeholder="选择日期"
+          size="mini"
+          popper-class="date-select"
+        >
+        </el-date-picker>
+      </div>
+      <div class="btns">
+        <el-button round size="mini" class="buttons" @click="getAlarm(true)"
+          >搜 索</el-button
+        >
+      </div>
+    </div>
+    <div class="table-wrapper">
+      <el-table height="100%" :data="drawerList">
+        <el-table-column
+          v-for="(item, index) in tableHeader"
+          :key="index"
+          sortable
+          :prop="item.code"
+          :label="item.title"
+          align="center"
+          :width="item.width"
+          show-overflow-tooltip
+        >
+          <template #default="{ row }">
+            <span v-if="item.code == 'rank'">{{ getRank(row.rank) }}</span>
+            <span
+              v-else-if="item.code == 'closeTime' && item.title == '是否解除'"
+              >{{ row.closeTime ? "已解除" : "未解除" }}</span
+            >
+            <span v-else-if="item.code == 'closeTime'">{{
+              row.closeTime ? getTime(row.closeTime) : "--"
+            }}</span>
+            <span v-else>{{ row[item.code] }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        style="display: flex; justify-content: flex-end; align-items: center"
+        @current-change="handleCurrentChange"
+        :current-page="page.currentPage"
+        :page-size="page.pagesize"
+        layout="total, prev, pager, next, jumper"
+        :total="page.total"
+      >
+      </el-pagination>
+    </div>
+  </el-drawer>
+</template>
+<script>
+import headerButton from "@/views/stateMonitor/factoryMonitor/components/headerButton.vue";
+import GFshanyinrongxin from "./components/shanyinrongxin.vue";
+import GFfangshansunjiashan from "./components/fangshansunjiashan.vue";
+import GFfanshijunran from "./components/fanshijunran.vue";
+import GFhuairenchuchen from "./components/huairenchuchen.vue";
+import GFpingluzuhu from "./components/pingluzuhu.vue";
+import GFtianzhenxusheng from "./components/tianzhenxusheng.vue";
+import GFtunliuwuyuan from "./components/tunliuwuyuan.vue";
+import GFyanggaoweijiabao from "./components/yanggaoweijiabao.vue";
+import GFyingxianjinghui from "./components/yingxianjinghui.vue";
+import GFyouyuyouwei from "./components/youyuyouwei.vue";
+import { GetDeviceTableData } from "@/api/zhbj/index.js";
+import dayjs from "dayjs";
+import { ElMessageBox } from "element-plus";
+export default {
+  name: "lightMillivolt",
+  components: {
+    headerButton,
+    GFshanyinrongxin,
+    GFfangshansunjiashan,
+    GFfanshijunran,
+    GFhuairenchuchen,
+    GFpingluzuhu,
+    GFtianzhenxusheng,
+    GFtunliuwuyuan,
+    GFyanggaoweijiabao,
+    GFyingxianjinghui,
+    GFyouyuyouwei,
+  },
+  data() {
+    return {
+      stationType: "-2",
+      wpId: "",
+      drawer: false,
+      title: "",
+      drawerList: [],
+      description: "",
+      sub: "",
+      begin: "",
+      end: "",
+      page: { currentPage: 1, pagesize: 22, total: 0 },
+      tableHeader: [
+        { title: "时间", code: "lastUpdateTime", width: "160" },
+        { title: "场站名称", code: "stationName", width: "150" },
+        { title: "报警描述", code: "description" },
+        { title: "是否解除", code: "closeTime", width: "110" },
+        // { title: "解除时间", code: "closeTime", width: "160" },
+        { title: "是否确认", code: "confirmed", width: "110" },
+      ],
+    };
+  },
+  watch: {
+    "$store.state.drawer": {
+      handler(val) {
+        this.drawer = val;
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    getTime(closeTime) {
+      return dayjs(closeTime).format("YYYY-MM-DD HH:mm:ss");
+    },
+    // 时间选择器第一个禁用
+    disabledDate(time) {
+      if (this.end) {
+        return time.getTime() > Date.parse(this.end);
+      } else {
+        return null;
+      }
+    },
+    // 时间选择器第二个禁用
+    disabledDate2(time) {
+      if (this.begin) {
+        return time.getTime() < Date.parse(this.begin);
+      } else {
+        return null;
+      }
+    },
+    getRank(rank) {
+      if (rank === 1) {
+        return "低级";
+      } else if (rank === 2) {
+        return "低中级";
+      } else if (rank === 3) {
+        return "中级";
+      } else if (rank === 4) {
+        return "中高级";
+      } else if (rank === 5) {
+        return "高级";
+      }
+    },
+    renderData(company, wpId) {
+      this.wpId = wpId;
+    },
+    handleAlarm(id, name) {
+      this.sub = id;
+      this.title = name;
+      this.begin = "";
+      this.end = "";
+      this.getAlarm(true);
+    },
+    getAlarm(flag) {
+      if (flag) {
+        this.page.currentPage = 1;
+      }
+      let params = {
+        begin: this.begin,
+        end: this.end,
+        alarmType: "booststation",
+        stationid: this.sub,
+        description: this.description,
+        pageNum: this.page.currentPage,
+        pageSize: this.page.pagesize,
+        isclose: false,
+      };
+      GetDeviceTableData(params).then(({ data }) => {
+        if (data.records.length) {
+          this.drawerList = data.records.map((item) => {
+            return {
+              ...item,
+              confirmed: item.confirmed ? "是" : "否",
+              lastUpdateTime: dayjs(item.lastUpdateTime).format(
+                "YYYY-MM-DD HH:mm:ss"
+              ),
+            };
+          });
+          this.page.total = data.total;
+        } else {
+          this.drawerList = [];
+          this.page.total = 0;
+        }
+        if (!this.drawer) {
+          this.$store.commit("changeBoosterAlarm", data.total);
+        }
+      });
+    },
+    handleCurrentChange(val) {
+      this.page.currentPage = val;
+      this.getAlarm();
+    },
+    handleClose() {
+      ElMessageBox.confirm("你确定要关闭吗?")
+        .then(() => {
+          this.drawer = false;
+          this.$store.commit("changeDrawer", this.drawer);
+        })
+        .catch(() => {
+          // catch error
+        });
+    },
+  },
+};
+</script>
+<style></style>

src/views/stateMonitor/factoryMonitor/windPowerPlant/index.vue

@@ -1,8 +1,18 @@
 <template>
-  <div class="windPowerContent">
-    <router-view :flag="flag" @alarmFlag="handleAlarm"/>
+  <div
+    style="
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: space-between;
+      padding: 0 20px;
+    "
+  >
+    <div class="windPowerContent">
+      <router-view :flag="flag" @alarmFlag="handleAlarm" />
+    </div>
+    <saliderBar :routerData="routerData" />
   </div>
-  <saliderBar :routerData="routerData" />
 </template>
 
 <script>
@@ -13,11 +23,9 @@ export default {
     saliderBar,
   },
   data() {
-    return {  };
-  },
-  methods: {
-    
+    return {};
   },
+  methods: {},
   computed: {
     routerData() {
       let currData = [];
@@ -25,11 +33,11 @@ export default {
       stateRoutes.forEach((route) => {
         if (route.path == "/stateMonitor") {
           route.children.forEach((croute) => {
-            if (croute.path == "factoryMonitor") {
-              let a = croute.children.find(
-                (item) => item.path == "windPowerPlant"
-              );
-              a.children.forEach((child) => {
+            if (croute.name == "windPowerPlant") {
+              //   let a = croute.children.find(
+              //     (item) => item.path == "windPowerPlant"
+              //   );
+              croute.children.forEach((child) => {
                 currData.push({
                   icon: child.meta.icon,
                   title: child.meta.title,

src/views/stateMonitor/factoryMonitor/windPowerPlant/millivolt/components/previewPicture.vue

@@ -0,0 +1,726 @@
+<template>
+  <div class="pop-up-main">
+    <div class="paln-box">
+      <div
+        class="movableItem"
+        :style="{ width: '100%', 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: "1600px",
+      height: "0",
+      // 可缩小倍数,为空则可无限缩小
+      minification: 3,
+      // 可放大倍数 为空则可无限放大
+      magnification: "",
+      bigMaxWidth: 1100,
+      bigMaxHeight: 1200,
+
+      // 小图标信息
+      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;
+        let parentLeft = oEvent.clientX;
+        let parentTop = oEvent.clientY;
+        // 比例 = （点击位置距离可视窗口位置 - 父元素距离可视窗口位置 - 相对定位的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;
+          let width = e.offsetX;
+          let height = e.offsetY;
+          // 这里判断第一次获取不到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: 100%;
+  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/views/stateMonitor/factoryMonitor/windPowerPlant/millivolt/index.vue

@@ -0,0 +1,291 @@
+<template>
+  <headerButton
+    :type="stationType"
+    @renderData="renderData"
+    @alarm="handleAlarm"
+  />
+  <div style="height: calc(100% - 57px)">
+    <!-- 风场 *************** -->
+    <!-- 高家堰 -->
+    <GJY class="booster-station-body" v-if="wpId === 'SXJ_KGDL_GJY_FDC_STA'" />
+    <!-- 败虎堡 -->
+    <BHB class="booster-station-body" v-if="wpId === 'SXJ_KGDL_BHB_FDC_STA'" />
+    <!-- 败虎堡三期 -->
+    <BHBSQ
+      class="booster-station-body"
+      v-if="wpId === 'SXJ_KGDL_BHB3_FDC_STA'"
+    />
+    <!-- 丁家窑 -->
+    <DJY class="booster-station-body" v-if="wpId === 'SXJ_KGDL_DJY_FDC_STA'" />
+    <!-- 红石峁Vue组件-2022-10-20 11_55_20 -->
+    <HSM class="booster-station-body" v-if="wpId === 'SXJ_KGDL_HSM_FDC_STA'" />
+    <!-- 牛家岭Vue组件 -->
+    <NJL class="booster-station-body" v-if="wpId === 'SXJ_KGDL_NJL_FDC_STA'" />
+    <!-- 盘道梁Vue组件-2022-10-20 11_59_46 -->
+    <PDL class="booster-station-body" v-if="wpId === 'SXJ_KGDL_PDL_FDC_STA'" />
+    <!-- 平头镇Vue组件-2022-10-20 11_42_23 -->
+    <PTZ class="booster-station-body" v-if="wpId === 'SXJ_KGDL_PTZ_FDC_STA'" />
+    <!-- 小五台Vue组件-2022-09-26 17_35_39 -->
+    <XWT class="booster-station-body" v-if="wpId === 'SXJ_KGDL_XWT_FDC_STA'" />
+    <!-- 羊头崖Vue组件-2022-10-20 12_03_02 -->
+    <YTY class="booster-station-body" v-if="wpId === 'SXJ_KGDL_YTY_FDC_STA'" />
+    <!-- 尹灵芝Vue组件 -->
+    <YLZ class="booster-station-body" v-if="wpId === 'SXJ_KGDL_YLZ_FDC_STA'" />
+    <!-- 禹丰Vue组件 -->
+    <YF class="booster-station-body" v-if="wpId === 'SXJ_KGDL_YF_FDC_STA'" />
+    <!-- 朱坑-2022-10-24 16_45_46 -->
+    <ZK class="booster-station-body" v-if="wpId === 'SXJ_KGDL_ZK_FDC_STA'" />
+    <!-- 米粮局Vue组件-2022-10-24 16_45_46 -->
+    <MLJ class="booster-station-body" v-if="wpId === 'NMM_KGDL_MLJ_FDC_STA'" />
+  </div>
+  <!-- <sbsAlarm /> -->
+  <el-drawer
+    class="custom-drawer"
+    v-model="drawer"
+    :title="title + '报警列表'"
+    direction="rtl"
+    size="55%"
+    :before-close="handleClose"
+  >
+    <div class="drawer-form">
+      <div class="select-item">
+        开始日期：
+        <el-date-picker
+          v-model="begin"
+          type="datetime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          :disabled-date="disabledDate"
+          placeholder="选择日期"
+          size="mini"
+          popper-class="date-select"
+        >
+        </el-date-picker>
+      </div>
+      <div class="select-item">
+        结束日期：
+        <el-date-picker
+          v-model="end"
+          type="datetime"
+          :disabled-date="disabledDate2"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          placeholder="选择日期"
+          size="mini"
+          popper-class="date-select"
+        >
+        </el-date-picker>
+      </div>
+      <div class="btns">
+        <el-button round size="mini" class="buttons" @click="getAlarm"
+          >搜 索</el-button
+        >
+      </div>
+    </div>
+    <div class="table-wrapper">
+      <el-table height="100%" :data="drawerList">
+        <el-table-column
+          v-for="(item, index) in tableHeader"
+          :key="index"
+          sortable
+          :prop="item.code"
+          :label="item.title"
+          align="center"
+          :width="item.width"
+          show-overflow-tooltip
+        >
+          <template #default="{ row }">
+            <span v-if="item.code == 'rank'">{{ getRank(row.rank) }}</span>
+            <span
+              v-else-if="item.code == 'closeTime' && item.title == '是否解除'"
+              >{{ row.closeTime ? "已解除" : "未解除" }}</span
+            >
+            <span v-else>{{ row[item.code] }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        style="display: flex; justify-content: flex-end; align-items: center"
+        @current-change="handleCurrentChange"
+        :current-page="page.currentPage"
+        :page-size="page.pagesize"
+        layout="total, prev, pager, next, jumper"
+        :total="page.total"
+      >
+      </el-pagination>
+    </div>
+  </el-drawer>
+</template>
+<script>
+import headerButton from "@/views/stateMonitor/factoryMonitor/components/headerButton.vue";
+// import sbsAlarm from "@/components/sbsAlarm/index.vue";
+import { ElMessageBox } from "element-plus";
+// 风场
+import GJY from "./components/GJY.vue";
+import BHB from "./components/BHB.vue";
+import BHBSQ from "./components/BHBSQ.vue";
+import DJY from "./components/DJY.vue";
+import HSM from "./components/HSM.vue";
+import NJL from "./components/NJL.vue";
+import PDL from "./components/PDL.vue";
+import PTZ from "./components/PTZ.vue";
+import XWT from "./components/XWT.vue";
+import YTY from "./components/YTY.vue";
+import YLZ from "./components/YLZ.vue";
+import YF from "./components/YF.vue";
+import ZK from "./components/ZK.vue";
+import MLJ from "./components/MLJ.vue";
+import { GetDeviceTableData } from "@/api/zhbj/index.js";
+import dayjs from "dayjs";
+export default {
+  name: "millivolt",
+  components: {
+    headerButton,
+    // sbsAlarm,
+    GJY,
+    BHB,
+    BHBSQ,
+    MLJ,
+    PDL,
+    PTZ,
+    XWT,
+    YTY,
+    YLZ,
+    YF,
+    ZK,
+    NJL,
+    HSM,
+    DJY,
+  },
+  data() {
+    return {
+      stationType: "-1",
+      wpId: "",
+      drawer: false,
+      title: "",
+      drawerList: [],
+      description: "",
+      sub: "",
+      begin: "",
+      end: "",
+      page: { currentPage: 1, pagesize: 22, total: 0 },
+      tableHeader: [
+        { title: "时间", code: "lastUpdateTime", width: "160" },
+        { title: "场站名称", code: "stationName", width: "150" },
+        { title: "报警描述", code: "description" },
+        { title: "是否解除", code: "closeTime", width: "110" },
+        { title: "是否确认", code: "confirmed", width: "110" },
+      ],
+    };
+  },
+  watch: {
+    "$store.state.drawer": {
+      handler(val) {
+        this.drawer = val;
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    getTime(closeTime) {
+      return dayjs(closeTime).format("YYYY-MM-DD HH:mm:ss");
+    },
+    // 时间选择器第一个禁用
+    disabledDate(time) {
+      if (this.end) {
+        return time.getTime() > Date.parse(this.end);
+      } else {
+        return null;
+      }
+    },
+    // 时间选择器第二个禁用
+    disabledDate2(time) {
+      if (this.begin) {
+        return time.getTime() < Date.parse(this.begin);
+      } else {
+        return null;
+      }
+    },
+    getRank(rank) {
+      if (rank === 1) {
+        return "低级";
+      } else if (rank === 2) {
+        return "低中级";
+      } else if (rank === 3) {
+        return "中级";
+      } else if (rank === 4) {
+        return "中高级";
+      } else if (rank === 5) {
+        return "高级";
+      }
+    },
+    renderData(company, wpId) {
+      this.wpId = wpId;
+    },
+    handleAlarm(id, name) {
+      this.sub = id;
+      this.title = name;
+      this.begin = "";
+      this.end = "";
+      this.getAlarm();
+    },
+    getAlarm() {
+      let params = {
+        begin: this.begin,
+        end: this.end,
+        alarmType: "booststation",
+        stationid: this.sub,
+        description: this.description,
+        pageNum: this.page.currentPage,
+        pageSize: this.page.pagesize,
+        isclose: false,
+      };
+      GetDeviceTableData(params).then(({ data }) => {
+        if (data.records.length) {
+          this.drawerList = data.records.map((item) => {
+            return {
+              ...item,
+              confirmed: item.confirmed ? "是" : "否",
+              lastUpdateTime: dayjs(item.lastUpdateTime).format(
+                "YYYY-MM-DD HH:mm:ss"
+              ),
+            };
+          });
+          this.page.total = data.total;
+        } else {
+          this.drawerList = [];
+          this.page.total = 0;
+        }
+        // this.drawerList = [
+        //   {
+        //     ts: "2020-09-03 11:55:55",
+        //     stationname: "高家堰鹰嵩",
+        //     rank: 1,
+        //     confirmed: true,
+        //   },
+        // ];
+        if (!this.drawer) {
+          this.$store.commit("changeBoosterAlarm", data.total);
+        }
+      });
+    },
+    handleCurrentChange(val) {
+      this.page.currentPage = val;
+      this.getAlarm();
+    },
+    handleClose() {
+      ElMessageBox.confirm("你确定要关闭吗?")
+        .then(() => {
+          this.drawer = false;
+          this.$store.commit("changeDrawer", this.drawer);
+        })
+        .catch(() => {
+          // catch error
+        });
+    },
+  },
+};
+</script>
+<style lang="less">
+.booster-station-body {
+  height: 100%;
+}
+</style>

src/views/stateMonitor/factoryMonitor/windPowerPlant/windhome/index.vue

@@ -83,6 +83,7 @@
               unit="MW"
               height="100%"
               :showTitle="false"
+              :id="'power'"
             />
           </div>
         </div>