Merge remote-tracking branch 'remotes/origin/mw'

src/components/arcgis/DWK_GDC.vue

@@ -0,0 +1,679 @@
+<template>
+  <div class="map-1" style="width: 100%; height: 100%">
+    <arcgis @when="when" ref="arcgis" :data="arcgisData" @clickMap="clickMap">
+      <template v-slot:content>
+        <div class="panel-box">
+          <div
+            class="panel-item"
+            :class="panel.line"
+            v-for="(panel, index) of panels"
+            :key="index"
+          >
+            <svg
+              v-show="panel.type != 'none' && panel.type != 'syz'"
+              viewBox="0 0 800 800"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+              xml:space="preserve"
+            >
+              <defs>
+                <rect
+                  id="fill-rect"
+                  x="5"
+                  y="5"
+                  rx="8"
+                  ry="8"
+                  width="90"
+                  height="340"
+                  fill="#303B6F"
+                />
+                <rect
+                  id="none-rect"
+                  x="5"
+                  y="5"
+                  rx="8"
+                  ry="8"
+                  width="90"
+                  height="120"
+                  fill="#303B6F"
+                />
+                <g id="panel-deepblue">
+                  <polygon
+                    fill="#FFFFFF"
+                    points="300 13.73 60.07 13.73 60.07 13.73 22.48 13.73 0 109.84 0 109.84 0 109.84 0 109.84 0 109.84 22.48 205.95 272.88 205.95 272.88 205.61 300 205.61 300 13.73"
+                  />
+                  <polygon
+                    fill="#5C9BAF"
+                    points="250.4 109.84 3.26 109.84 29 0 276.14 0 250.4 109.84"
+                  />
+                  <polygon
+                    fill="#00486B"
+                    points="29 219.68 276.14 219.68 250.4 109.84 3.26 109.84 29 219.68"
+                  />
+                </g>
+                <g id="panel-blue">
+                  <polygon
+                    fill="#FFFFFF"
+                    points="300 13.73 60.07 13.73 60.07 13.73 22.48 13.73 0 109.84 0 109.84 0 109.84 0 109.84 0 109.84 22.48 205.95 272.88 205.95 272.88 205.61 300 205.61 300 13.73"
+                  />
+                  <polygon
+                    fill="#23ABFF"
+                    points="250.4 109.84 3.26 109.84 29 0 276.14 0 250.4 109.84"
+                  />
+                  <polygon
+                    fill="#0E6BBB"
+                    points="29 219.68 276.14 219.68 250.4 109.84 3.26 109.84 29 219.68"
+                  />
+                </g>
+                <g id="panel-red">
+                  <polygon
+                    fill="#FFFFFF"
+                    points="290 13.27 58.07 13.27 58.07 13.27 21.73 13.27 0 106.18 0 106.18 0 106.18 0 106.18 0 106.18 21.73 199.09 263.79 199.09 263.79 198.75 290 198.75 290 13.27"
+                  />
+                  <polygon
+                    fill="#EC1208"
+                    points="242.05 106.18 3.15 106.18 28.04 0 266.94 0 242.05 106.18"
+                  />
+                  <polygon
+                    fill="#AA0607"
+                    points="28.04 212.36 266.94 212.36 242.05 106.18 3.15 106.18 28.04 212.36"
+                  />
+                </g>
+              </defs>
+              <!-- 底图 左右两列矩形 -->
+              <g>
+                <use xlink:href="#fill-rect" x="50" y="50" />
+                <use xlink:href="#fill-rect" x="150" y="50" />
+                <use xlink:href="#fill-rect" x="550" y="50" />
+                <use xlink:href="#fill-rect" x="650" y="50" />
+                <use xlink:href="#fill-rect" x="50" y="400" />
+                <use xlink:href="#fill-rect" x="150" y="400" />
+                <use xlink:href="#fill-rect" x="550" y="400" />
+                <use xlink:href="#fill-rect" x="650" y="400" />
+              </g>
+
+              <!-- 中间上矩形 全部 -->
+              <g
+                :style="
+                  'display: ' +
+                  (panel.type == 'fill' || panel.type == 'bottom'
+                    ? 'block'
+                    : 'none')
+                "
+              >
+                <use xlink:href="#fill-rect" x="250" y="50" />
+                <use xlink:href="#fill-rect" x="350" y="50" />
+                <use xlink:href="#fill-rect" x="450" y="50" />
+              </g>
+
+              <!-- 中间上矩形 一半 -->
+              <g
+                :style="'display: ' + (panel.type == 'top' ? 'block' : 'none')"
+              >
+                <use xlink:href="#none-rect" x="250" y="270" />
+                <use xlink:href="#none-rect" x="350" y="270" />
+                <use xlink:href="#none-rect" x="450" y="270" />
+              </g>
+
+              <!-- 中间上逆变器 深蓝色 -->
+              <g
+                :style="
+                  'display: ' +
+                  (panel.type == 'top' && panel.state == 'deepblue'
+                    ? 'block'
+                    : 'none')
+                "
+                class="can-click esri-component"
+                @click.prevent="clickEl(panel)"
+              >
+                <use xlink:href="#panel-deepblue" x="250" y="50" />
+              </g>
+
+              <!-- 中间上逆变器 蓝色 -->
+              <g
+                :style="
+                  'display: ' +
+                  (panel.type == 'top' && panel.state == 'blue'
+                    ? 'block'
+                    : 'none')
+                "
+                class="can-click esri-component"
+                @click.prevent="clickEl(panel)"
+              >
+                <use xlink:href="#panel-blue" x="250" y="50" />
+              </g>
+
+              <!-- 中间上逆变器 红色 -->
+              <g
+                :style="
+                  'display: ' +
+                  (panel.type == 'top' && panel.state == 'red'
+                    ? 'block'
+                    : 'none')
+                "
+                class="can-click esri-component"
+                @click.prevent="clickEl(panel)"
+              >
+                <use xlink:href="#panel-red" x="250" y="50" />
+              </g>
+
+              <!-- 中间上文字 -->
+              <g
+                :style="'display: ' + (panel.type == 'top' ? 'block' : 'none')"
+                class="can-click esri-component"
+                @click.prevent="clickEl(panel)"
+              >
+                <text
+                  x="365"
+                  y="220"
+                  fill="#ffffff"
+                  font-size="150"
+                  text-anchor="middle"
+                >
+                  {{ panel.code }}
+                </text>
+              </g>
+
+              <!-- 中间下矩形 全部 -->
+              <g
+                :style="
+                  'display: ' +
+                  (panel.type == 'fill' || panel.type == 'top'
+                    ? 'block'
+                    : 'none')
+                "
+              >
+                <use xlink:href="#fill-rect" x="250" y="400" />
+                <use xlink:href="#fill-rect" x="350" y="400" />
+                <use xlink:href="#fill-rect" x="450" y="400" />
+              </g>
+
+              <!-- 中间下矩形 一半 -->
+              <g
+                :style="
+                  'display: ' + (panel.type == 'bottom' ? 'block' : 'none')
+                "
+              >
+                <use xlink:href="#none-rect" x="250" y="400" />
+                <use xlink:href="#none-rect" x="350" y="400" />
+                <use xlink:href="#none-rect" x="450" y="400" />
+              </g>
+
+              <!-- 中间下逆变器 深蓝色 -->
+              <g
+                :style="
+                  'display: ' +
+                  (panel.type == 'bottom' && panel.state == 'deepblue'
+                    ? 'block'
+                    : 'none')
+                "
+                class="can-click esri-component"
+                @click.prevent="clickEl(panel)"
+              >
+                <use xlink:href="#panel-deepblue" x="250" y="530" />
+              </g>
+
+              <!-- 中间下逆变器 蓝色 -->
+              <g
+                :style="
+                  'display: ' +
+                  (panel.type == 'bottom' && panel.state == 'blue'
+                    ? 'block'
+                    : 'none')
+                "
+                class="can-click esri-component"
+                @click.prevent="clickEl(panel)"
+              >
+                <use xlink:href="#panel-blue" x="250" y="530" />
+              </g>
+
+              <!-- 中间下逆变器 红色 -->
+              <g
+                :style="
+                  'display: ' +
+                  (panel.type == 'bottom' && panel.state == 'red'
+                    ? 'block'
+                    : 'none')
+                "
+                class="can-click esri-component"
+                @click.prevent="clickEl(panel)"
+              >
+                <use xlink:href="#panel-red" x="250" y="530" />
+              </g>
+
+              <!-- 中间下文字 -->
+              <g
+                :style="
+                  'display: ' + (panel.type == 'bottom' ? 'block' : 'none')
+                "
+                class="can-click"
+                @click.prevent="clickEl(panel)"
+              >
+                <text
+                  x="460"
+                  y="740"
+                  fill="#ffffff"
+                  font-size="150"
+                  text-anchor="middle"
+                >
+                  {{ panel.code }}
+                </text>
+              </g>
+            </svg>
+            <div v-show="panel.type == 'syz'" class="panel-syz">
+              <img :src="syzImg" class="syz-img" />
+              <div class="syz-text">升压站</div>
+            </div>
+          </div>
+          <!-- <img :src="tempImg" style="width: 800px; height: 700px;"> -->
+        </div>
+      </template>
+    </arcgis>
+  </div>
+</template>
+
+<script>
+import arcgis from "./arcgis.vue";
+import dataService from "@/helper/data.js";
+
+export default {
+  // 名称
+  name: "Map",
+  // 使用组件
+  components: {
+    arcgis,
+  },
+  props: {
+    wpId: {
+      type: String,
+      default: "",
+    },
+  },
+  // 数据
+  data() {
+    return {
+      wpnumMap: {}, //风机监视数量
+      wpInfoMap: {}, //风机详情
+      fjmap: [], // 风机名
+      sourceId: "",
+      arcgisData: {
+        mode: "2D", // 模式 2D 3D
+        title: "宁夏地图", // 标题
+        center: [106.2953, 38.58533], // 初始中心点
+        height: 654, // 3D地图初始相机高度
+        tilt: 65, // 俯视角
+        scale: 15000,
+        rotation: 180,
+      },
+      tempImg: require("@assets/temp1.png"),
+      syzImg: require("@assets/png/booster-station.png"),
+      showPopup: true,
+      panels: 
+	  [{"id":"00","type":"top","code":1,"state":"deepblue","line":"top left"},
+	  {"id":"01","type":"top","code":2,"state":"deepblue","line":"top right"},
+	  {"id":"02","type":"top","code":3,"state":"deepblue","line":"top"},
+	  {"id":"03","type":"top","code":4,"state":"deepblue","line":"top right"},
+	  {"id":"04","type":"top","code":5,"state":"deepblue","line":"top"},
+	  {"id":"05","type":"top","code":6,"state":"deepblue","line":"top right"},
+	  {"id":"06","type":"top","code":7,"state":"deepblue","line":"top"},
+	  {"id":"07","type":"top","code":8,"state":"deepblue","line":"top right"},
+	  {"id":"08","type":"top","code":9,"state":"deepblue","line":"top"},
+	  {"id":"09","type":"top","code":10,"state":"deepblue","line":"top right"},
+	  {"id":"10","type":"top","code":11,"state":"deepblue","line":"top left"},
+	  {"id":"11","type":"top","code":12,"state":"deepblue","line":"top right"},
+	  {"id":"12","type":"top","code":13,"state":"deepblue","line":"top"},
+	  {"id":"13","type":"top","code":14,"state":"deepblue","line":"top right"},
+	  {"id":"14","type":"top","code":15,"state":"deepblue","line":"top"},
+	  {"id":"15","type":"top","code":16,"state":"deepblue","line":"top right"},
+	  {"id":"16","type":"top","code":17,"state":"deepblue","line":"top"},
+	  {"id":"17","type":"top","code":18,"state":"deepblue","line":"top right"},
+	  {"id":"18","type":"top","code":19,"state":"deepblue","line":"top"},
+	  {"id":"19","type":"top","code":20,"state":"deepblue","line":"top right"}]
+    };
+  },
+  created() {
+    let that = this;
+    that.sourceId = this.wpId;
+    that.$nextTick(() => {});
+  },
+  // 函数
+  methods: {
+    when: function () {
+      this.$refs.arcgis.addHtmlPoint(
+        [106.48638888888888, 38.924166666666665],
+        "content",
+        400,
+        350
+      );
+    },
+    clickMap: function (info) {
+      console.log(info);
+    },
+    clickEl: function (item) {
+		let wpId = this.$route.path.split('/').pop(),
+			wtId = wpId.split('_')[0] +'01_'+ item.id;
+		this.$router.push({
+		  path: `/monitor/windsite/inverter-info/`+wpId+`/`+wtId,
+		});
+    },
+  },
+  watch: {
+    wpId(res) {
+      this.sourceId = res;
+    },
+  },
+};
+</script>
+
+<style lang="less">
+@titleHeight: 40px;
+
+.map-1 {
+  width: 100%;
+  height: calc(100vh - 90px);
+  display: flex;
+  flex-direction: column;
+
+  .btn-group-tabs {
+    display: flex;
+    flex-direction: row;
+  }
+
+    .panel-box {
+        width: 840px;
+        padding: 20px;
+        display: flex;
+        flex-wrap: wrap;
+        background: #536268B8;
+
+        .panel-item {
+            width: 80px;
+            height: 80px;
+            position: relative;
+            
+            // margin-top: -20px;
+            // margin-left: -20px;
+
+            &.top {
+                &::after {
+                    top: -3px;
+                    opacity: 1;
+                }
+            }
+
+            &.bottom {
+                &::after {
+                    bottom: -3px;
+                    opacity: 1;
+                }
+            }
+
+            &.left {
+                &::before {
+                    left: -3px;
+                    opacity: 1;
+                }
+            }
+
+            &.right {
+                &::before {
+                    right: -3px;
+                    opacity: 1;
+                }
+            }
+
+            &::after {
+                content: '';
+                width: 100%;
+                height: 6px;
+                position: absolute;
+                left: 0;
+                background: @green;
+                opacity: 0;
+            }
+
+            &::before {
+                content: '';
+                width: 6px;
+                height: 100%;
+                position: absolute;
+                top: 0;
+                background: @green;
+                opacity: 0;
+            }
+
+            svg {
+                width: 80px;
+                height: 80px;
+            }
+
+            .panel-syz {
+                width: 100%;
+                height: 100%;
+                position: relative;
+
+                .syz-img {
+                    position: absolute;
+                    height: 70px;
+                    top: -35px;
+                    left: -10px;
+                }
+
+                .syz-text {
+                    position: absolute;
+                    color: @green;
+                    font-size: @fontsize-l;
+                    width: 100%;
+                    text-align: center;
+                    left: 0;
+                    top: -55px;
+                    font-weight: bold;
+                }
+            }
+        }
+
+    }
+
+  .can-click {
+    cursor: pointer;
+  }
+
+  .syz-img {
+    width: 65px;
+    height: 47px;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .panel-title {
+    width: 100%;
+    background-color: fade(@darkgray, 40%);
+    margin-top: 16px;
+    padding: 6px;
+    display: flex;
+    align-items: center;
+
+    .panel-title-name {
+      color: @green;
+      display: flex;
+      align-items: center;
+      line-height: 0;
+      font-size: 0;
+
+      i,
+      span {
+        margin: 0 0 0 16px;
+        line-height: 0;
+        font-size: 13px;
+      }
+    }
+
+    .sub-title-item {
+      display: flex;
+      align-items: center;
+      margin-left: 16px;
+
+      .sub-title {
+        font-size: 13px;
+        margin-left: 6px;
+      }
+
+      .sub-count {
+        font-size: 13px;
+        font-weight: 500;
+      }
+
+      img {
+        height: 31px;
+      }
+    }
+  }
+
+  .panel-body {
+    flex-grow: 1;
+    background-color: fade(@darkgray, 20%);
+    padding: 8px;
+    overflow: auto;
+    position: relative;
+
+    .arcgis-layer {
+      z-index: 1;
+    }
+
+    .map-popup-panel {
+      width: 760px;
+      position: absolute;
+      left: 71px;
+      top: 22px;
+      z-index: 2;
+
+      .map-popup-panel-header {
+        width: 100%;
+        background: fade(#152221, 90%);
+        display: flex;
+
+        .map-popup-panel-title {
+          padding: 17px 24px;
+          font-size: @fontsize-s;
+          position: relative;
+
+          &::before,
+          &::after {
+            position: absolute;
+            width: calc(50% - 6px);
+            bottom: 0;
+            border-bottom: 2px solid @green;
+          }
+
+          &::before {
+            content: "";
+            left: 0;
+          }
+
+          &::after {
+            content: "";
+            right: 0;
+          }
+
+          span {
+            position: absolute;
+            width: 11.3px;
+            height: 11.3px;
+            border-left: 2px solid @green;
+            border-top: 2px solid @green;
+            left: calc(50% - 5.65px);
+            bottom: -3px;
+            transform: rotate(45deg);
+          }
+        }
+
+        .map-popup-panel-date {
+          flex-grow: 1;
+          padding: 17px 24px;
+          font-size: @fontsize-s;
+          text-align: right;
+          border-bottom: 2px solid @green;
+        }
+
+        .map-popup-panel-back {
+          margin-left: auto;
+          width: 54px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          position: relative;
+          cursor: pointer;
+
+          &::after {
+            content: "";
+            position: absolute;
+            left: 0;
+            height: 50%;
+            border-left: 1px solid @gray;
+            top: 25%;
+          }
+        }
+      }
+
+      .map-popup-panel-body {
+        background: fade(#152221, 75%);
+        border: 1px solid fade(@darkgray, 40);
+        border-top: 0px;
+
+        .table-form {
+          .text,
+          .unit {
+            font-weight: 400;
+          }
+
+          .unit {
+            min-width: auto;
+          }
+
+          .value,
+          .unit {
+            text-align: left;
+          }
+        }
+      }
+    }
+
+    .map-tool {
+      position: absolute;
+      right: 22px;
+      top: 22px;
+      z-index: 2;
+      background: #152221af;
+      padding: 18px 14px;
+
+      .m-btn {
+        width: 124px;
+        height: 44px;
+        background: #152221bf;
+        border: 1px solid #152221bf;
+        color: #ffffff;
+        transition: all 0.3s;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+
+        &:hover,
+        &.active {
+          background: #05bb4c33;
+          border: 1px solid #05bb4c;
+          color: #05bb4c;
+        }
+
+        + .m-btn {
+          margin-top: 16px;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/arcgis/NSS_FDC.vue

@@ -247,7 +247,6 @@ export default {
             item.attributes.dur = 8;
             break;
         }
-		console.log(item.geometry.x)
         this.$refs.arcgis.addHtmlPoint(
           [item.geometry.x, item.geometry.y],
           item.attributes.code,

src/components/arcgis/PL_GDC.vue

@@ -165,12 +165,11 @@
                 @click.prevent="clickEl(panel)"
               >
                 <text
-                  x="420"
+                  x="365"
                   y="220"
                   fill="#ffffff"
                   font-size="150"
                   text-anchor="middle"
-                  transform="rotate(-90 400 180)"
                 >
                   {{ panel.code }}
                 </text>
@@ -257,7 +256,6 @@
                   fill="#ffffff"
                   font-size="150"
                   text-anchor="middle"
-                  transform="rotate(-90 400 700)"
                 >
                   {{ panel.code }}
                 </text>
@@ -302,7 +300,7 @@ export default {
       arcgisData: {
         mode: "2D", // 模式 2D 3D
         title: "宁夏地图", // 标题
-        center: [106.48638888888888, 38.924166666666665], // 初始中心点
+        center: [106.2850, 38.5528], // 初始中心点
         height: 654, // 3D地图初始相机高度
         tilt: 65, // 俯视角
         scale: 15000,
@@ -311,192 +309,26 @@ export default {
       tempImg: require("@assets/temp1.png"),
       syzImg: require("@assets/png/booster-station.png"),
       showPopup: true,
-      panels: [
-        // fill top bottom none syz // red blue deepblue
-        { id: "00", type: "fill", code: "", state: "", line: "" },
-        { id: "01", type: "fill", code: "", state: "", line: "" },
-        { id: "02", type: "fill", code: "", state: "", line: "" },
-        { id: "03", type: "fill", code: "", state: "", line: "" },
-        { id: "04", type: "fill", code: "", state: "", line: "" },
-        { id: "05", type: "fill", code: "", state: "", line: "" },
-        {
-          id: "06",
-          type: "bottom",
-          code: "12",
-          state: "deepblue",
-          line: "bottom",
-        },
-        { id: "07", type: "none", code: "", state: "", line: "bottom" },
-        { id: "08", type: "fill", code: "", state: "", line: "" },
-        { id: "09", type: "fill", code: "", state: "", line: "" },
-
-        {
-          id: "10",
-          type: "top",
-          code: "36",
-          state: "deepblue",
-          line: "top left",
-        },
-        {
-          id: "11",
-          type: "top",
-          code: "32",
-          state: "deepblue",
-          line: "top left",
-        },
-        { id: "12", type: "top", code: "28", state: "deepblue", line: "top" },
-        { id: "13", type: "top", code: "24", state: "deepblue", line: "top" },
-        { id: "14", type: "top", code: "20", state: "deepblue", line: "top" },
-        {
-          id: "15",
-          type: "top",
-          code: "16",
-          state: "deepblue",
-          line: "top right",
-        },
-        { id: "16", type: "fill", code: "", state: "", line: "bottom right" },
-        { id: "17", type: "syz", code: "", state: "", line: "bottom right" },
-        { id: "18", type: "top", code: "5", state: "deepblue", line: "top" },
-        {
-          id: "19",
-          type: "top",
-          code: "4",
-          state: "deepblue",
-          line: "top right",
-        },
-
-        {
-          id: "20",
-          type: "bottom",
-          code: "37",
-          state: "deepblue",
-          line: "bottom left",
-        },
-        { id: "21", type: "fill", code: "", state: "deepblue", line: "left" },
-        { id: "22", type: "fill", code: "", state: "deepblue", line: "" },
-        { id: "23", type: "fill", code: "", state: "deepblue", line: "" },
-        { id: "24", type: "fill", code: "", state: "deepblue", line: "" },
-        { id: "25", type: "fill", code: "", state: "deepblue", line: "" },
-        {
-          id: "26",
-          type: "bottom",
-          code: "13",
-          state: "deepblue",
-          line: "bottom",
-        },
-        { id: "27", type: "fill", code: "", state: "", line: "" },
-        { id: "28", type: "fill", code: "", state: "deepblue", line: "" },
-        { id: "29", type: "fill", code: "", state: "deepblue", line: "right" },
-
-        { id: "30", type: "none", code: "", state: "", line: "" },
-        { id: "31", type: "top", code: "33", state: "deepblue", line: "top" },
-        { id: "32", type: "top", code: "29", state: "deepblue", line: "top" },
-        { id: "33", type: "top", code: "25", state: "deepblue", line: "top" },
-        { id: "34", type: "top", code: "21", state: "deepblue", line: "top" },
-        {
-          id: "35",
-          type: "top",
-          code: "17",
-          state: "deepblue",
-          line: "top right",
-        },
-        { id: "36", type: "fill", code: "", state: "deepblue", line: "" },
-        { id: "37", type: "top", code: "1", state: "deepblue", line: "top" },
-        { id: "38", type: "top", code: "2", state: "deepblue", line: "top" },
-        { id: "39", type: "top", code: "3", state: "deepblue", line: "top" },
-
-        { id: "40", type: "none", code: "", state: "", line: "" },
-        { id: "41", type: "fill", code: "", state: "", line: "" },
-        { id: "42", type: "fill", code: "", state: "", line: "" },
-        { id: "43", type: "fill", code: "", state: "", line: "" },
-        { id: "44", type: "fill", code: "", state: "", line: "" },
-        { id: "45", type: "fill", code: "", state: "", line: "" },
-        {
-          id: "46",
-          type: "bottom",
-          code: "14",
-          state: "deepblue",
-          line: "bottom left",
-        },
-        {
-          id: "47",
-          type: "bottom",
-          code: "10",
-          state: "deepblue",
-          line: "bottom",
-        },
-        {
-          id: "48",
-          type: "bottom",
-          code: "8",
-          state: "deepblue",
-          line: "bottom",
-        },
-        {
-          id: "49",
-          type: "bottom",
-          code: "6",
-          state: "deepblue",
-          line: "bottom",
-        },
-
-        { id: "50", type: "none", code: "", state: "", line: "" },
-        { id: "51", type: "top", code: "34", state: "red", line: "top left" },
-        { id: "52", type: "top", code: "30", state: "deepblue", line: "top" },
-        { id: "53", type: "top", code: "26", state: "deepblue", line: "top" },
-        { id: "54", type: "top", code: "22", state: "deepblue", line: "top" },
-        { id: "55", type: "top", code: "18", state: "deepblue", line: "top" },
-        { id: "56", type: "fill", code: "", state: "", line: "" },
-        { id: "57", type: "fill", code: "", state: "", line: "" },
-        { id: "58", type: "fill", code: "", state: "", line: "" },
-        { id: "59", type: "fill", code: "", state: "", line: "right" },
-
-        { id: "60", type: "none", code: "", state: "", line: "" },
-        { id: "61", type: "fill", code: "", state: "", line: "left" },
-        { id: "62", type: "fill", code: "", state: "", line: "" },
-        { id: "63", type: "fill", code: "", state: "", line: "" },
-        { id: "64", type: "fill", code: "", state: "", line: "" },
-        { id: "65", type: "fill", code: "", state: "", line: "" },
-        {
-          id: "66",
-          type: "bottom",
-          code: "15",
-          state: "deepblue",
-          line: "bottom",
-        },
-        {
-          id: "67",
-          type: "bottom",
-          code: "11",
-          state: "deepblue",
-          line: "bottom",
-        },
-        {
-          id: "68",
-          type: "bottom",
-          code: "9",
-          state: "deepblue",
-          line: "bottom",
-        },
-        {
-          id: "69",
-          type: "bottom",
-          code: "7",
-          state: "deepblue",
-          line: "bottom right",
-        },
-
-        { id: "70", type: "none", code: "", state: "", line: "" },
-        { id: "71", type: "top", code: "35", state: "blue", line: "top" },
-        { id: "72", type: "top", code: "31", state: "deepblue", line: "top" },
-        { id: "73", type: "top", code: "27", state: "deepblue", line: "top" },
-        { id: "74", type: "top", code: "23", state: "deepblue", line: "top" },
-        { id: "75", type: "top", code: "19", state: "deepblue", line: "top" },
-        { id: "76", type: "fill", code: "", state: "", line: "" },
-        { id: "77", type: "fill", code: "", state: "", line: "" },
-        { id: "78", type: "fill", code: "", state: "", line: "" },
-        { id: "79", type: "fill", code: "", state: "", line: "" },
-      ],
+      panels: 
+	  [{"id":"00","type":"top","code":1,"state":"deepblue","line":"top left"},
+	  {"id":"01","type":"top","code":2,"state":"deepblue","line":"top right"},
+	  {"id":"02","type":"top","code":3,"state":"deepblue","line":"top"},
+	  {"id":"03","type":"top","code":4,"state":"deepblue","line":"top right"},
+	  {"id":"04","type":"top","code":5,"state":"deepblue","line":"top"},
+	  {"id":"05","type":"top","code":6,"state":"deepblue","line":"top right"},
+	  {"id":"06","type":"top","code":7,"state":"deepblue","line":"top"},
+	  {"id":"07","type":"top","code":8,"state":"deepblue","line":"top right"},
+	  {"id":"08","type":"top","code":9,"state":"deepblue","line":"top"},
+	  {"id":"09","type":"top","code":10,"state":"deepblue","line":"top right"},
+	  {"id":"10","type":"top","code":11,"state":"deepblue","line":"top left"},
+	  {"id":"11","type":"top","code":12,"state":"deepblue","line":"top right"},
+	  {"id":"12","type":"top","code":13,"state":"deepblue","line":"top"},
+	  {"id":"13","type":"top","code":14,"state":"deepblue","line":"top right"},
+	  {"id":"14","type":"top","code":15,"state":"deepblue","line":"top"},
+	  {"id":"15","type":"top","code":16,"state":"deepblue","line":"top right"},
+	  {"id":"16","type":"top","code":17,"state":"deepblue","line":"top"},
+	  {"id":"17","type":"top","code":18,"state":"deepblue","line":"top right"},
+	  {"id":"18","type":"top","code":19,"state":"deepblue","line":"top right"}]
     };
   },
   created() {
@@ -517,12 +349,12 @@ export default {
     clickMap: function (info) {
       console.log(info);
     },
-    popupBack: function () {
-      this.showPopup = false;
-    },
     clickEl: function (item) {
-      console.log(item);
-      this.showPopup = true;
+		let wpId = this.$route.path.split('/').pop(),
+			wtId = wpId.split('_')[0] +'01_'+ item.id;
+		this.$router.push({
+		  path: `/monitor/windsite/inverter-info/`+wpId+`/`+wtId,
+		});
     },
   },
   watch: {

src/components/arcgis/QS_FDC.vue

@@ -1,444 +1,502 @@
 <template>
-	<div style="width: 100%; height: 100%">
-		<arcgis class="arcgis-layer" @when="when" ref="arcgis" :data="arcgisData" @clickMap="clickMap">
-			<template v-for="(fan, index) of fans" :key="index" v-slot:[fan.attributes.code]>
-				<svg v-if="fan.attributes.code != '升压站'" @click="clickFan(fan.attributes.code)"
-					class="can-click esri-component" version="1.1" xmlns="http://www.w3.org/2000/svg"
-					xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 240" enable-background="new 0 0 200 240"
-					xml:space="preserve" width="66" height="66">
-					<!-- 底座 -->
-					<g>
-						<path fill-rule="evenodd" clip-rule="evenodd" :fill="colors[fan.attributes.state][2]"
-							d="M100.681,156.137c24.579,0,44.505,8.548,44.505,19.094
-                            c0,10.545-19.926,19.093-44.505,19.093c-24.577,0-42.878-8.548-42.878-19.093C57.803,164.685,76.104,156.137,100.681,156.137z" />
-					</g>
-					<!-- 后面的脑袋 -->
-					<g>
-						<path fill-rule="evenodd" clip-rule="evenodd" :fill="colors[fan.attributes.state][0]" d="M92.875,76.372l27.897-18.417c0,0,4.108-0.096,7.891,2.681
-                                c4.305,3.156,1.86,9.235,1.86,9.235l-24.374,23.292L92.875,76.372z" />
-					</g>
-					<!-- 柱 -->
-					<g>
-						<path fill-rule="evenodd" clip-rule="evenodd" :fill="colors[fan.attributes.state][0]"
-							d="M92.152,175.229h18.689l-4.876-94.254H97.84L92.152,175.229z" />
-					</g>
-					<!-- 风扇 -->
-					<g>
-						<path fill-rule="evenodd" clip-rule="evenodd" :fill="colors[fan.attributes.state][1]"
-							d="M109.007,85.525l-16.061,0.268l7.396-83.773L109.007,85.525z" />
-						<path fill-rule="evenodd" clip-rule="evenodd" :fill="colors[fan.attributes.state][1]" d="M95.219,75.597l8.265,13.771l-76.25,35.483L95.219,75.597z
-                            M99.108,89.634l7.795-14.04l68.854,48.291L99.108,89.634z" />
-						<animateTransform v-if="fan.attributes.rotate" attributeName="transform" attributeType="XML"
-							type="rotate" from="0 100 82" to="359 100 82" :dur="fan.attributes.dur + 's'"
-							repeatCount="indefinite" />
-					</g>
-					<!-- 前面的尖 -->
-					<g>
-						<path fill-rule="evenodd" clip-rule="evenodd" :fill="colors[fan.attributes.state][2]" d="M92.863,72.903c0,0,13.912-0.343,17.098,4.352
-                            c2.984,4.397-2.58,15.473-2.58,15.473l-24.376,0.436L92.863,72.903z" />
-					</g>
-					<!-- 文字 -->
-					<g>
-						<text x="100" y="240" fill="#ffffff" font-size="40" text-anchor="middle"
-							alignment-baseline="baseline">
-							{{ fan.attributes.code }}
-						</text>
-					</g>
-				</svg>
-				<div v-if="fan.attributes.code == '升压站'">
-					<div class="syz-img">
-						<img :src="syzImg" />
-					</div>
-					<div class="white font-sm mr-t-8" style="text-align: center">
-						{{ fan.attributes.code }}
-					</div>
-				</div>
-			</template>
-		</arcgis>
-	</div>
+  <div style="width: 100%; height: 100%">
+    <arcgis
+      class="arcgis-layer"
+      @when="when"
+      ref="arcgis"
+      :data="arcgisData"
+      @clickMap="clickMap"
+    >
+      <template
+        v-for="(fan, index) of fans"
+        :key="index"
+        v-slot:[fan.attributes.code]
+      >
+        <svg
+          v-if="fan.attributes.code != '升压站'"
+          @click="clickFan(fan.attributes.code)"
+          class="can-click esri-component"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          viewBox="0 0 200 240"
+          enable-background="new 0 0 200 240"
+          xml:space="preserve"
+          width="66"
+          height="66"
+        >
+          <!-- 底座 -->
+          <g>
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              :fill="colors[fan.attributes.state][2]"
+              d="M100.681,156.137c24.579,0,44.505,8.548,44.505,19.094
+                            c0,10.545-19.926,19.093-44.505,19.093c-24.577,0-42.878-8.548-42.878-19.093C57.803,164.685,76.104,156.137,100.681,156.137z"
+            />
+          </g>
+          <!-- 后面的脑袋 -->
+          <g>
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              :fill="colors[fan.attributes.state][0]"
+              d="M92.875,76.372l27.897-18.417c0,0,4.108-0.096,7.891,2.681
+                                c4.305,3.156,1.86,9.235,1.86,9.235l-24.374,23.292L92.875,76.372z"
+            />
+          </g>
+          <!-- 柱 -->
+          <g>
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              :fill="colors[fan.attributes.state][0]"
+              d="M92.152,175.229h18.689l-4.876-94.254H97.84L92.152,175.229z"
+            />
+          </g>
+          <!-- 风扇 -->
+          <g>
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              :fill="colors[fan.attributes.state][1]"
+              d="M109.007,85.525l-16.061,0.268l7.396-83.773L109.007,85.525z"
+            />
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              :fill="colors[fan.attributes.state][1]"
+              d="M95.219,75.597l8.265,13.771l-76.25,35.483L95.219,75.597z
+                            M99.108,89.634l7.795-14.04l68.854,48.291L99.108,89.634z"
+            />
+            <animateTransform
+              v-if="fan.attributes.rotate"
+              attributeName="transform"
+              attributeType="XML"
+              type="rotate"
+              from="0 100 82"
+              to="359 100 82"
+              :dur="fan.attributes.dur + 's'"
+              repeatCount="indefinite"
+            />
+          </g>
+          <!-- 前面的尖 -->
+          <g>
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              :fill="colors[fan.attributes.state][2]"
+              d="M92.863,72.903c0,0,13.912-0.343,17.098,4.352
+                            c2.984,4.397-2.58,15.473-2.58,15.473l-24.376,0.436L92.863,72.903z"
+            />
+          </g>
+          <!-- 文字 -->
+          <g>
+            <text
+              x="100"
+              y="240"
+              fill="#ffffff"
+              font-size="40"
+              text-anchor="middle"
+              alignment-baseline="baseline"
+            >
+              {{ fan.attributes.code }}
+            </text>
+          </g>
+        </svg>
+        <div v-if="fan.attributes.code == '升压站'">
+          <div class="syz-img">
+            <img :src="syzImg" />
+          </div>
+          <div class="white font-sm mr-t-8" style="text-align: center">
+            {{ fan.attributes.code }}
+          </div>
+        </div>
+      </template>
+    </arcgis>
+  </div>
 </template>
 
 <script>
-	import arcgis from "./arcgis.vue";
-	import dataService from "@/helper/data.js";
-
-	export default {
-		// 名称
-		name: "Map",
-		// 使用组件
-		components: {
-			arcgis,
-		},
-		props: {
-			wpId: {
-				type: String,
-				default: "",
-			},
-		},
-		// 数据
-		data() {
-			return {
-				wpnumMap: {}, //风机监视数量
-				wpInfoMap: {}, //风机详情
-				fjmap: [], // 风机名
-				sourceId: "",
-				arcgisData: {
-					mode: "2D", // 模式 2D 3D
-					title: "宁夏地图", // 标题
-					center: [107.217636108398, 37.5134917819943], // 初始中心点 106.230909, 38.487193
-					height: 654, // 3D地图初始相机高度
-					tilt: 65, // 俯视角
-					scale: 55000,
-					rotation: -45,
-					ox: -600,
-					oy: -50,
-				},
-				showPopup: false,
-				mapToolIndex: 0,
-				fans: [],
-				colors: {
-					0: ["#05bb4c", "#4ad476", "#9fedb2"],
-					1: ["#4b55ae", "#959dc7", "#d3d6e0"],
-					2: ["#BA3237", "#d4807d", "#eddad8"],
-					3: ["#606769", "#757575", "#AFAFAF"],
-					4: ["#e17e23", "#fabf78", "#ffebcc"],
-					5: ["#c531c7", "#e080dc", "#fadef7"],
-					6: ["#c531c7", "#e080dc", "#fadef7"],
-				},
-				syzImg: require("@assets/png/booster-station.png"),
-			};
-		},
-		created() {
-			let that = this;
-			that.sourceId = this.wpId;
-			that.$nextTick(() => {
-				that.requestData();
-			});
-		},
-		// 函数
-		methods: {
-			select(res) {
-				this.$router.replace({
-					path: `/monitor/windsite/map/${res.code}`,
-				});
-			},
-			// 风机状态监视
-			requestData() {
-				let that = this;
-				that.API.requestData({
-					method: "POST",
-					subUrl: "monitor/findGeneralAppearance",
-					data: {
-						wpId: that.wpId,
-					},
-					success(res) {
-						if (res.code == 200) {
-							that.wpnumMap = res.data.fczbmap.jczbmap;
-							that.wpInfoMap = res.data.wxssmap;
-							that.fjmap = res.data.fjmap[0];
-							that.when();
-						}
-					},
-				});
-			},
-			when: function() {
-				let jsonObj = dataService.get("arcgis-qs");
-				this.fans = jsonObj;
-				jsonObj.forEach((item) => {
-					let obj = this.fjmap.find((t) => {
-						let wtid = t.wtId.replace("01_", "");
-						if (wtid == item.attributes.code) return t;
-					});
-					if (obj) {
-						item.attributes.state = String(obj.fjzt);
-					} else {
-						item.attributes.state = "4";
-					}
-					switch (item.attributes.state) {
-						case "0": //待机
-							item.attributes.rotate = false; // 转
-							item.attributes.dur = 8; // 转一圈时间
-							break;
-						case "1": //运行
-							item.attributes.rotate = true; // 转
-							item.attributes.dur = 2; // 转一圈时间
-							break;
-						case "2": //故障
-							item.attributes.rotate = false; // 不转
-							item.attributes.dur = 8;
-							break;
-						case "3": //中断
-							item.attributes.rotate = false; // 不转
-							item.attributes.dur = 8;
-							break;
-						case "4": //维护
-							item.attributes.rotate = false; // 不转
-							item.attributes.dur = 8;
-							break;
-						case "5": //限电
-							item.attributes.rotate = true; // 转
-							item.attributes.dur = 6;
-							break;
-						case "6": //停机
-							item.attributes.rotate = false; // 不转
-							item.attributes.dur = 8;
-							break;
-						default:
-							item.attributes.rotate = false;
-							item.attributes.dur = 8;
-							break;
-					}
-					this.$refs.arcgis.addHtmlPoint(
-						[item.geometry.x, item.geometry.y],
-						item.attributes.code,
-						33,
-						50,
-						false
-					);
-				});
-				let lineJsonObj = dataService.get("arcgis-qs-line");
-				this.$refs.arcgis.addFanByJson(jsonObj, lineJsonObj);
-			},
-			clickMap: function(info) {
-				console.log(info);
-			},
-			clickFan: function(code) {
-				let wtId = code.replace("G", "G01_");
-				this.$router.push(`/monitor/windsite/info/${this.wpId}/${wtId}`);
-			},
-			popupBack: function() {
-				this.showPopup = false;
-			},
-			clickMapTool: function(index) {
-				//   this.mapToolIndex = index;
-				this.showPopup = !this.showPopup;
-			},
-		},
-		watch: {
-			wpId(res) {
-				this.sourceId = res;
-				if (res) {
-					this.requestData();
-				}
-			},
-		},
-	};
+import arcgis from "./arcgis.vue";
+import dataService from "@/helper/data.js";
+
+export default {
+  // 名称
+  name: "Map",
+  // 使用组件
+  components: {
+    arcgis,
+  },
+  props: {
+    wpId: {
+      type: String,
+      default: "",
+    },
+  },
+  // 数据
+  data() {
+    return {
+      wpnumMap: {}, //风机监视数量
+      wpInfoMap: {}, //风机详情
+      fjmap: [], // 风机名
+      sourceId: "",
+      arcgisData: {
+        mode: "2D", // 模式 2D 3D
+        title: "宁夏地图", // 标题
+        center: [107.217636108398, 37.5134917819943], // 初始中心点 106.230909, 38.487193
+        height: 654, // 3D地图初始相机高度
+        tilt: 65, // 俯视角
+        scale: 55000,
+        rotation: -45,
+        ox: -600,
+        oy: -50,
+      },
+      showPopup: false,
+      mapToolIndex: 0,
+      fans: [],
+      colors: {
+        0: ["#05bb4c", "#4ad476", "#9fedb2"],
+        1: ["#4b55ae", "#959dc7", "#d3d6e0"],
+        2: ["#BA3237", "#d4807d", "#eddad8"],
+        3: ["#606769", "#757575", "#AFAFAF"],
+        4: ["#e17e23", "#fabf78", "#ffebcc"],
+        5: ["#c531c7", "#e080dc", "#fadef7"],
+        6: ["#c531c7", "#e080dc", "#fadef7"],
+      },
+      syzImg: require("@assets/png/booster-station.png"),
+    };
+  },
+  created() {
+    let that = this;
+    that.sourceId = this.wpId;
+    that.$nextTick(() => {
+      that.requestData();
+    });
+  },
+  // 函数
+  methods: {
+    select(res) {
+      this.$router.replace({
+        path: `/monitor/windsite/map/${res.code}`,
+      });
+    },
+    // 风机状态监视
+    requestData() {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "monitor/findGeneralAppearance",
+        data: {
+          wpId: that.wpId,
+        },
+        success(res) {
+          if (res.code == 200) {
+            that.wpnumMap = res.data.fczbmap.jczbmap;
+            that.wpInfoMap = res.data.wxssmap;
+            that.fjmap = res.data.fjmap[0];
+			that.when();
+          }
+        },
+      });
+    },
+    when: function () {
+      let jsonObj = dataService.get("arcgis-qs");
+      this.fans = jsonObj;
+      jsonObj.forEach((item) => {
+        let obj = this.fjmap.find((t) => {
+          let wtid = t.wtId.replace("01_", "");
+          if (wtid == item.attributes.code) return t;
+        });
+        if (obj) {
+          item.attributes.state = String(obj.fjzt);
+        } else {
+          item.attributes.state = "4";
+        }
+        switch (item.attributes.state) {
+          case "0": //待机
+            item.attributes.rotate = false; // 转
+            item.attributes.dur = 8; // 转一圈时间
+            break;
+          case "1": //运行
+            item.attributes.rotate = true; // 转
+            item.attributes.dur = 2; // 转一圈时间
+            break;
+          case "2": //故障
+            item.attributes.rotate = false; // 不转
+            item.attributes.dur = 8;
+            break;
+          case "3": //中断
+            item.attributes.rotate = false; // 不转
+            item.attributes.dur = 8;
+            break;
+          case "4": //维护
+            item.attributes.rotate = false; // 不转
+            item.attributes.dur = 8;
+            break;
+          case "5": //限电
+            item.attributes.rotate = true; // 转
+            item.attributes.dur = 6;
+            break;
+          case "6": //停机
+            item.attributes.rotate = false; // 不转
+            item.attributes.dur = 8;
+            break;
+          default:
+            item.attributes.rotate = false;
+            item.attributes.dur = 8;
+            break;
+        }
+        this.$refs.arcgis.addHtmlPoint(
+          [item.geometry.x, item.geometry.y],
+          item.attributes.code,
+          33,
+          50,
+          false
+        );
+      });
+      let lineJsonObj = dataService.get("arcgis-qs-line");
+      this.$refs.arcgis.addFanByJson(jsonObj, lineJsonObj);
+    },
+    clickMap: function (info) {
+      console.log(info);
+    },
+    clickFan: function (code) {
+      let wtId = code.replace("G", "G01_");
+      this.$router.push(`/monitor/windsite/info/${this.wpId}/${wtId}`);
+    },
+    popupBack: function () {
+      this.showPopup = false;
+    },
+    clickMapTool: function (index) {
+      //   this.mapToolIndex = index;
+      this.showPopup = !this.showPopup;
+    },
+  },
+  watch: {
+    wpId(res) {
+      this.sourceId = res;
+      if (res) {
+        this.requestData();
+      }
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
-	@titleHeight: 40px;
-
-	.map-1 {
-		width: 100%;
-		height: calc(100vh - 90px);
-		display: flex;
-		flex-direction: column;
-
-		.btn-group-tabs {
-			display: flex;
-			flex-direction: row;
-		}
-
-		.can-click {
-			cursor: pointer;
-		}
-
-		.syz-img {
-			width: 65px;
-			height: 47px;
-
-			img {
-				width: 100%;
-				height: 100%;
-			}
-		}
-
-		.panel-title {
-			width: 100%;
-			background-color: fade(@darkgray, 40%);
-			margin-top: 16px;
-			padding: 6px;
-			display: flex;
-			align-items: center;
-
-			.panel-title-name {
-				color: @green;
-				display: flex;
-				align-items: center;
-				line-height: 0;
-				font-size: 0;
-
-				i,
-				span {
-					margin: 0 0 0 16px;
-					line-height: 0;
-					font-size: 13px;
-				}
-			}
-
-			.sub-title-item {
-				display: flex;
-				align-items: center;
-				margin-left: 16px;
-
-				.sub-title {
-					font-size: 13px;
-					margin-left: 6px;
-				}
-
-				.sub-count {
-					font-size: 13px;
-					font-weight: 500;
-				}
-
-				img {
-					height: 31px;
-				}
-			}
-		}
-
-		.panel-body {
-			flex-grow: 1;
-			background-color: fade(@darkgray, 20%);
-			padding: 8px;
-			overflow: auto;
-			position: relative;
-
-			.arcgis-layer {
-				z-index: 1;
-			}
-
-			.map-popup-panel {
-				width: 760px;
-				position: absolute;
-				left: 71px;
-				top: 22px;
-				z-index: 2;
-
-				.map-popup-panel-header {
-					width: 100%;
-					background: fade(#152221, 90%);
-					display: flex;
-
-					.map-popup-panel-title {
-						padding: 17px 24px;
-						font-size: @fontsize-s;
-						position: relative;
-
-						&::before,
-						&::after {
-							position: absolute;
-							width: calc(50% - 6px);
-							bottom: 0;
-							border-bottom: 2px solid @green;
-						}
-
-						&::before {
-							content: "";
-							left: 0;
-						}
-
-						&::after {
-							content: "";
-							right: 0;
-						}
-
-						span {
-							position: absolute;
-							width: 11.3px;
-							height: 11.3px;
-							border-left: 2px solid @green;
-							border-top: 2px solid @green;
-							left: calc(50% - 5.65px);
-							bottom: -3px;
-							transform: rotate(45deg);
-						}
-					}
-
-					.map-popup-panel-date {
-						flex-grow: 1;
-						padding: 17px 24px;
-						font-size: @fontsize-s;
-						text-align: right;
-						border-bottom: 2px solid @green;
-					}
-
-					.map-popup-panel-back {
-						margin-left: auto;
-						width: 54px;
-						display: flex;
-						align-items: center;
-						justify-content: center;
-						position: relative;
-						cursor: pointer;
-
-						&::after {
-							content: "";
-							position: absolute;
-							left: 0;
-							height: 50%;
-							border-left: 1px solid @gray;
-							top: 25%;
-						}
-					}
-				}
-
-				.map-popup-panel-body {
-					background: fade(#152221, 75%);
-					border: 1px solid fade(@darkgray, 40);
-					border-top: 0px;
-
-					.table-form {
-
-						.text,
-						.unit {
-							font-weight: 400;
-						}
-
-						.unit {
-							min-width: auto;
-						}
-
-						.value,
-						.unit {
-							text-align: left;
-						}
-					}
-				}
-			}
-
-			.map-tool {
-				position: absolute;
-				right: 22px;
-				top: 22px;
-				z-index: 2;
-				background: #152221af;
-				padding: 18px 14px;
-
-				.m-btn {
-					width: 124px;
-					height: 44px;
-					background: #152221bf;
-					border: 1px solid #152221bf;
-					color: #ffffff;
-					transition: all 0.3s;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					cursor: pointer;
-
-					&:hover,
-					&.active {
-						background: #05bb4c33;
-						border: 1px solid #05bb4c;
-						color: #05bb4c;
-					}
-
-					+.m-btn {
-						margin-top: 16px;
-					}
-				}
-			}
-		}
-	}
+@titleHeight: 40px;
+
+.map-1 {
+  width: 100%;
+  height: calc(100vh - 90px);
+  display: flex;
+  flex-direction: column;
+
+  .btn-group-tabs {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .can-click {
+    cursor: pointer;
+  }
+
+  .syz-img {
+    width: 65px;
+    height: 47px;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .panel-title {
+    width: 100%;
+    background-color: fade(@darkgray, 40%);
+    margin-top: 16px;
+    padding: 6px;
+    display: flex;
+    align-items: center;
+
+    .panel-title-name {
+      color: @green;
+      display: flex;
+      align-items: center;
+      line-height: 0;
+      font-size: 0;
+
+      i,
+      span {
+        margin: 0 0 0 16px;
+        line-height: 0;
+        font-size: 13px;
+      }
+    }
+
+    .sub-title-item {
+      display: flex;
+      align-items: center;
+      margin-left: 16px;
+
+      .sub-title {
+        font-size: 13px;
+        margin-left: 6px;
+      }
+
+      .sub-count {
+        font-size: 13px;
+        font-weight: 500;
+      }
+
+      img {
+        height: 31px;
+      }
+    }
+  }
+
+  .panel-body {
+    flex-grow: 1;
+    background-color: fade(@darkgray, 20%);
+    padding: 8px;
+    overflow: auto;
+    position: relative;
+
+    .arcgis-layer {
+      z-index: 1;
+    }
+
+    .map-popup-panel {
+      width: 760px;
+      position: absolute;
+      left: 71px;
+      top: 22px;
+      z-index: 2;
+
+      .map-popup-panel-header {
+        width: 100%;
+        background: fade(#152221, 90%);
+        display: flex;
+
+        .map-popup-panel-title {
+          padding: 17px 24px;
+          font-size: @fontsize-s;
+          position: relative;
+
+          &::before,
+          &::after {
+            position: absolute;
+            width: calc(50% - 6px);
+            bottom: 0;
+            border-bottom: 2px solid @green;
+          }
+
+          &::before {
+            content: "";
+            left: 0;
+          }
+
+          &::after {
+            content: "";
+            right: 0;
+          }
+
+          span {
+            position: absolute;
+            width: 11.3px;
+            height: 11.3px;
+            border-left: 2px solid @green;
+            border-top: 2px solid @green;
+            left: calc(50% - 5.65px);
+            bottom: -3px;
+            transform: rotate(45deg);
+          }
+        }
+
+        .map-popup-panel-date {
+          flex-grow: 1;
+          padding: 17px 24px;
+          font-size: @fontsize-s;
+          text-align: right;
+          border-bottom: 2px solid @green;
+        }
+
+        .map-popup-panel-back {
+          margin-left: auto;
+          width: 54px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          position: relative;
+          cursor: pointer;
+
+          &::after {
+            content: "";
+            position: absolute;
+            left: 0;
+            height: 50%;
+            border-left: 1px solid @gray;
+            top: 25%;
+          }
+        }
+      }
+
+      .map-popup-panel-body {
+        background: fade(#152221, 75%);
+        border: 1px solid fade(@darkgray, 40);
+        border-top: 0px;
+
+        .table-form {
+          .text,
+          .unit {
+            font-weight: 400;
+          }
+
+          .unit {
+            min-width: auto;
+          }
+
+          .value,
+          .unit {
+            text-align: left;
+          }
+        }
+      }
+    }
+
+    .map-tool {
+      position: absolute;
+      right: 22px;
+      top: 22px;
+      z-index: 2;
+      background: #152221af;
+      padding: 18px 14px;
+
+      .m-btn {
+        width: 124px;
+        height: 44px;
+        background: #152221bf;
+        border: 1px solid #152221bf;
+        color: #ffffff;
+        transition: all 0.3s;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+
+        &:hover,
+        &.active {
+          background: #05bb4c33;
+          border: 1px solid #05bb4c;
+          color: #05bb4c;
+        }
+
+        + .m-btn {
+          margin-top: 16px;
+        }
+      }
+    }
+  }
+}
 </style>

src/router/index.js

@@ -416,18 +416,6 @@ const routes = [{
 		import( /* webpackChunkName: "malfunctionStatistics" */ "../views/malfunctionRecall/index.vue"),
 },
 {
-	path: "/health/gzzd/gzfl", // 故障分类
-	name: "gzfl",
-	component: () =>
-		import( /* webpackChunkName: "malfunctionStatistics" */ "../views/malfunctionDiagnose/gzfl.vue"),
-},
-{
-	path: "/health/gzzd/yjfl", // 预警分类
-	name: "yjfl",
-	component: () =>
-		import( /* webpackChunkName: "malfunctionStatistics" */ "../views/malfunctionDiagnose/yjfl.vue"),
-},
-{
 	path: "/health/frist",
 	name: "health",
 	component: () =>

src/views/NewPages/alarm-center-1.vue

@@ -63,6 +63,7 @@
         <div class="query-actions">
           <button class="btn green" @click="searchData">搜索</button>
           <button class="btn green" @click="searchTree">筛选</button>
+		  <button class="btn green" @click="fx">分析</button>
         </div>
       </div>
     </div>
@@ -138,6 +139,9 @@
         :showLegend="true"
       />
     </el-dialog>
+	<el-dialog :title="dialogTitleFX" v-model="dialogVisibleFX" width="70%" top="10vh" custom-class="modal" :close-on-click-modal="false" :destroy-on-close='true'>
+	  <FX :date='startdate' :wpid='wpvalue'/>
+	</el-dialog>
   </div>
 </template>
 
@@ -145,11 +149,14 @@
 import Panel3 from "../../components/coms/panel/panel3.vue";
 import Table3 from "../../components/coms/table/table3.vue";
 import MultipleYLineChartNormal from "./multiple-y-line-chart-normal.vue";
+import FX from "./alarm-center-yjfx.vue";
 import BASE from '@tools/basicTool.js';
 export default {
-  components: { Panel3, Table3, MultipleYLineChartNormal },
+  components: { Panel3, Table3, MultipleYLineChartNormal,FX },
   data() {
     return {
+		dialogTitleFX: "",
+		dialogVisibleFX: false,
       dialogTitle: "",
       chooseStatus: false,
       dialogVisible: false,
@@ -666,6 +673,11 @@ export default {
       }
       this.cascaderOptions = cascaderOptions;
     },
+	fx(){
+		this.startdate=new Date(this.startdate).formatDate("yyyy-MM-dd");
+		this.dialogTitleFX= "预警分析";
+		this.dialogVisibleFX= true;
+	}
   },
 };
 </script>

src/views/NewPages/alarm-center-2.vue

@@ -30,7 +30,8 @@
         </div>
         <div class="query-actions">
           <button class="btn green" @click="searchData">搜索</button>
-          <button class="btn green">导出</button>
+          <!-- <button class="btn green">导出</button> -->
+		  <button class="btn green" @click="fx">分析</button>
         </div>
       </div>
     </div>
@@ -62,16 +63,22 @@
         </template>
       </table-2>
     </panel-3>
+	<el-dialog :title="dialogTitleFX" v-model="dialogVisibleFX" width="70%" top="10vh" custom-class="modal" :close-on-click-modal="false" :destroy-on-close='true'>
+	  <FX :date='startdate' :wpid='wpvalue'/>
+	</el-dialog>
   </div>
 </template>
 
 <script>
 import Panel3 from "../../components/coms/panel/panel3.vue";
 import Table2 from "../../components/coms/table/table2.vue";
+import FX from "./alarm-center-gzfx.vue";
 export default {
-  components: { Panel3, Table2 },
+  components: { Panel3, Table2,FX },
   data () {
     return {
+		dialogTitleFX: "",
+		dialogVisibleFX: false,
       wpvalue: "",
       wpoptions: "",
       options: [],
@@ -237,6 +244,11 @@ export default {
       this.tableData.column = column;
       this.tableData.data = dataAll;
     },
+	fx(){
+		this.startdate=new Date(this.startdate).formatDate("yyyy-MM-dd");
+		this.dialogTitleFX= "预警分析";
+		this.dialogVisibleFX= true;
+	}
   },
 };
 </script>

src/views/malfunctionDiagnose/gzfl.vue

@@ -1,30 +1,5 @@
 <template>
 	<div>
-		<div class="action-bar">
-			<div class="query mg-b-16">
-				<div class="query-items">
-					<div class="query-item">
-						<div class="lable">风场：</div>
-						<div class="search-input">
-							<el-select v-model="wpvalue" clearable placeholder="请选择" popper-class="select">
-								<el-option v-for="item in ChangZhan" :key="item.id" :label="item.name" :value="item.id">
-								</el-option>
-							</el-select>
-						</div>
-					</div>
-					<div class="query-item">
-						<div class="lable">日期：</div>
-						<div class="search-input">
-							<el-date-picker v-model="myDate" type="date" placeholder="开始日期" popper-class="date-select"
-					   value-format="YYYY-MM-DD"></el-date-picker>
-						</div>
-					</div>
-				</div>
-				<div class="query-actions">
-					<button class="btn green" @click="searchData">搜索</button>
-				</div>
-			</div>
-		</div>
 		<el-row>
 			<el-col :span="14">
 				<panel :title="'日雷达图'" class="radar-panel" :icon="'svg-wind-site'">
@@ -65,6 +40,16 @@
 			panel,
 			RadarChart
 		},
+		props:{
+			date: {
+			  type: String,
+			  default: "2021-06-06",
+			},
+			wpid: {
+			  type: String,
+			  default: "MHS_FDC",
+			},
+		},
 		data() {
 			return {
 				rzdfsData: {
@@ -79,25 +64,10 @@
 					indicator: ["N0", "N1", "N2", "N3", "N4", "N5"],
 					data: [{value: [44200, 14200, 20000, 35000, 50000, 38000],name: "",}, ],
 				},
-				ChangZhan: [],
-				wpvalue: '',
-				myDate: ""
 			}
 		},
 		created() {
-			var that = this;
-			that.API.requestData({
-				method: "GET",
-				baseURL: "http://10.155.32.4:9001/",
-				subUrl: "benchmarking/wplist",
-				success(res) {
-					that.ChangZhan = res.data;
-					that.wpvalue = res.data[0].id;
-					let end = new Date();
-					that.myDate = end.formatDate("yyyy-MM-dd");
-					that.searchData();
-				},
-			});
+			this.searchData();
 		},
 		methods: {
 			searchData(){
@@ -105,22 +75,24 @@
 				that.API.requestData({
 					method: "GET",
 					subUrl: "radar/gzfx",
+					showLoading:true,
 					data:{
-						stId:that.wpvalue,
-						Date:that.myDate
+						stId:that.wpid,
+						Date:that.date
 					},
 					success(res) {
-						that.rzdfsData = {
-							indicator:Object.keys(res.data[0].year),
-							data:[{value:Object.values(res.data[0].year)}]
+						let key = ['变桨','变频器','齿轮箱','发电机','风机其它','滑环','机舱加热','控制','冷却','偏航','液压','主轴'];
+						that.nzdfsData = {
+							indicator:key,
+							data:[{value:Object.values(res.data[0][0])}]
 						}
 						that.yzdfsData = {
-							indicator:Object.keys(res.data[1].month),
-							data:[{value:Object.values(res.data[1].month)}]
+							indicator:key,
+							data:[{value:Object.values(res.data[1][0])}]
 						}
-						that.nzdfsData = {
-							indicator:Object.keys(res.data[2].day),
-							data:[{value:Object.values(res.data[2].day)}]
+						that.rzdfsData = {
+							indicator:key,
+							data:[{value:Object.values(res.data[2][0])}]
 						}
 					},
 				});

src/views/malfunctionDiagnose/yjfl.vue

@@ -1,30 +1,5 @@
 <template>
 	<div>
-		<div class="action-bar">
-			<div class="query mg-b-16">
-				<div class="query-items">
-					<div class="query-item">
-						<div class="lable">风场：</div>
-						<div class="search-input">
-							<el-select v-model="wpvalue" clearable placeholder="请选择" popper-class="select">
-								<el-option v-for="item in ChangZhan" :key="item.id" :label="item.name" :value="item.id">
-								</el-option>
-							</el-select>
-						</div>
-					</div>
-					<div class="query-item">
-						<div class="lable">日期：</div>
-						<div class="search-input">
-							<el-date-picker v-model="myDate" type="date" placeholder="开始日期" popper-class="date-select"
-					   value-format="YYYY-MM-DD"></el-date-picker>
-						</div>
-					</div>
-				</div>
-				<div class="query-actions">
-					<button class="btn green" @click="searchData">搜索</button>
-				</div>
-			</div>
-		</div>
 		<el-row>
 			<el-col :span="14">
 				<panel :title="'日雷达图'" class="radar-panel" :icon="'svg-wind-site'">
@@ -65,6 +40,16 @@
 			panel,
 			RadarChart
 		},
+		props:{
+			date: {
+			  type: String,
+			  default: "2021-06-06",
+			},
+			wpid: {
+			  type: String,
+			  default: "MHS_FDC",
+			},
+		},
 		data() {
 			return {
 				rzdfsData: {
@@ -79,25 +64,10 @@
 					indicator: ["N0", "N1", "N2", "N3", "N4", "N5"],
 					data: [{value: [44200, 14200, 20000, 35000, 50000, 38000],name: "",}, ],
 				},
-				ChangZhan: [],
-				wpvalue: '',
-				myDate: ""
 			}
 		},
 		created() {
-			var that = this;
-			that.API.requestData({
-				method: "GET",
-				baseURL: "http://10.155.32.4:9001/",
-				subUrl: "benchmarking/wplist",
-				success(res) {
-					that.ChangZhan = res.data;
-					that.wpvalue = res.data[0].id;
-					let end = new Date();
-					that.myDate = end.formatDate("yyyy-MM-dd");
-					that.searchData();
-				},
-			});
+			this.searchData();
 		},
 		methods: {
 			searchData(){
@@ -105,28 +75,29 @@
 				that.API.requestData({
 					method: "GET",
 					subUrl: "radar/yjfx",
+					showLoading:true,
 					data:{
-						stationid:that.wpvalue,
-						date:that.myDate
+						stationid:that.wpid,
+						date:that.date
 					},
 					success(res) {
-						that.rzdfsData = {
-							indicator:Object.keys(res.data[0].year),
-							data:[{value:Object.values(res.data[0].year)}]
+						let key = ['测风系统','传动链','发电机','变桨系统','齿轮箱','液压系统','偏航系统','机舱','其它','塔底柜'];
+						that.nzdfsData = {
+							indicator:key,
+							data:[{value:Object.values(res.data[0][0])}]
 						}
 						that.yzdfsData = {
-							indicator:Object.keys(res.data[1].month),
-							data:[{value:Object.values(res.data[1].month)}]
+							indicator:key,
+							data:[{value:Object.values(res.data[1][0])}]
 						}
-						that.nzdfsData = {
-							indicator:Object.keys(res.data[2].day),
-							data:[{value:Object.values(res.data[2].day)}]
+						that.rzdfsData = {
+							indicator:key,
+							data:[{value:Object.values(res.data[2][0])}]
 						}
 					},
 				});
 			}
 		},
-
 	};
 </script>
 

src/views/WindSite/components/boosterstation/sbq.vue

@@ -1312,16 +1312,14 @@
 								<rect x="389.108" y="450.067" opacity="0.9" fill="#162320" enable-background="new    " width="108.761" height="18.486"/>
 								<rect x="389.108" y="470.563" opacity="0.9" fill="#162320" enable-background="new    " width="108.761" height="18.489"/>
 								<g>
-									<text transform="matrix(1 0 0 1 391.9287 461.8799)" fill="#96A0A1" font-family="'MicrosoftYaHei'" font-size="11.3899"> P(MVar): </text>
+									<text transform="matrix(1 0 0 1 407.9287 461.8799)" fill="#96A0A1" font-family="'MicrosoftYaHei'" font-size="11.3899"> la(A): </text>
 								</g>
 								<g>
-									<text transform="matrix(1 0 0 1 392.9043 484.1641)" fill="#96A0A1" font-family="'MicrosoftYaHei'" font-size="11.3899"> Q(MVar): </text>
+									<text transform="matrix(1 0 0 1 392.9043 484.1641)" fill="#96A0A1" font-family="'MicrosoftYaHei'" font-size="11.3899"> (MVar): </text>
 								</g>
 								<rect x="389.108" y="490.298" opacity="0.9" fill="#162320" enable-background="new    " width="108.761" height="18.485"/>
 								<g>
-									<text transform="matrix(1 0 0 1 407.8306 504.248)" fill="#96A0A1" font-family="'MicrosoftYaHei'" font-size="11.3899"> la </text>
-									<text transform="matrix(1 0 0 1 417.1577 504.248)" fill="#96A0A1" font-family="'MicrosoftYaHei'" font-size="9.6234"> (A) </text>
-									<text transform="matrix(1 0 0 1 430.3569 504.248)" fill="#96A0A1" font-family="'MicrosoftYaHei'" font-size="11.3899"> : </text>
+									<text transform="matrix(1 0 0 1 392.8306 504.248)" fill="#96A0A1" font-family="'MicrosoftYaHei'" font-size="11.3899"> Q(MVar): </text>
 								</g>
 								<rect x="389.108" y="509.783" opacity="0.9" fill="#162320" enable-background="new    " width="108.761" height="18.487"/>
 								<g>
@@ -3942,15 +3940,15 @@
 								<g>
 									<text transform="matrix(1 0 0 1 443.1121 461.8801)" fill="#217E3A"
 										font-family="'MicrosoftYaHei'" font-size="9.463">
-										{{ ajaxData.sbqpkwmx1 }}
+										{{ ajaxData.sbqlaamx1 }}
 									</text>
 									<text transform="matrix(1 0 0 1 443.1121 482.5481)" fill="#217E3A"
 										font-family="'MicrosoftYaHei'" font-size="9.463">
-										{{ ajaxData.sbqqkvarmx1 }}
+										{{ ajaxData.sbqpkwmx1 }}
 									</text>
 									<text transform="matrix(1 0 0 1 443.1145 503.9133)" fill="#217E3A"
 										font-family="'MicrosoftYaHei'" font-size="9.463">
-										{{ ajaxData.sbqlaamx1 }}
+										{{ ajaxData.sbqqkvarmx1 }}
 									</text>
 									<text transform="matrix(1 0 0 1 443.1145 523.4016)" fill="#217E3A"
 										font-family="'MicrosoftYaHei'" font-size="9.463">

src/views/WindSite/components/generalappearance/pl2.vue

@@ -1881,6 +1881,7 @@
 		methods: {
 			// 渲染每个机箱的表格参数
 			renderData(data = {}) {
+				console.log(data)
 				// 取出开关的 DOM
 				const switchDom = $("#data").find("rect");
 				// 遍历数据，首先取出开关单独写逻辑渲染颜色，除了开关以外的就是每个机箱的数据

src/views/WindSite/pages/GeneralAppearance.vue

@@ -54,8 +54,8 @@
 			<XS class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'XS_FDC'" />
 			<XH class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'XH_GDC'" />
 			<DWK class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'DWK_GDC'" />
-			<PL1 class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'PL01_GC'" />
-			<PL2 class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'PL02_GC'" />
+			<PL1 class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'PL_GDC'" />
+			<PL2 class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'PL2_GDC'" />
 			<MCH class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'MCH_GDC'" />
 			<HZJ class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'HZJ_GDC'" />
 		</div>
@@ -154,13 +154,16 @@
 									code: ele.id,
 								});
 							} else {
-								if (ele.id == "PL_GDC") {
-									ele.id = 'PL01_GC';
-								}
 								btnGroup[1].btns.push({
 									text: ele.name,
 									code: ele.id,
 								});
+								// if(ele.id == 'PL_GDC'){
+								// 	btnGroup[1].btns.push({
+								// 	  text: '平罗二期光伏电站',
+								// 	  code: 'PL2_GDC',
+								// 	});
+								// }
 							}
 						});
 

src/views/WindSite/pages/Map.vue

@@ -54,8 +54,11 @@
 	  <SBQFDC wpId="SBQ_FDC" v-if="wpId.indexOf('SBQ_FDC') !== -1" />
 	  <XSFDC wpId="XS_FDC" v-if="wpId.indexOf('XS_FDC') !== -1" />
 	  
-	  
-      <PLGDC wpId="PL_GDC" v-if="wpId.indexOf('GDC') !== -1" />
+      <PLGDC wpId="PL_GDC" v-if="wpId.indexOf('PL_GDC') !== -1" />
+	  <DWKGDC wpId="DWK_GDC" v-if="wpId.indexOf('DWK_GDC') !== -1" />
+	  <XHGDC wpId="XH_GDC" v-if="wpId.indexOf('XH_GDC') !== -1" />
+	  <MCHGDC wpId="MCH_GDC" v-if="wpId.indexOf('MCH_GDC') !== -1" />
+	  <HZJGDC wpId="HZJ_GDC" v-if="wpId.indexOf('HZJ_GDC') !== -1" />
       <div class="map-popup-panel" v-show="showPopup">
         <!-- <div class="map-popup-panel-header">
           <div class="map-popup-panel-title green">
@@ -171,6 +174,10 @@ import QSFDC from "@com/arcgis/QS_FDC.vue";
 import SBQFDC from "@com/arcgis/SBQ_FDC.vue";
 import XSFDC from "@com/arcgis/XS_FDC.vue";
 import PLGDC from "@com/arcgis/PL_GDC.vue";
+import DWKGDC from "@com/arcgis/DWK_GDC.vue";
+import XHGDC from "@com/arcgis/XH_GDC.vue";
+import MCHGDC from "@com/arcgis/MCH_GDC.vue";
+import HZJGDC from "@com/arcgis/HZJ_GDC.vue";
 import dataService from "@/helper/data.js";
 
 export default {
@@ -184,7 +191,11 @@ export default {
 	QSFDC,
 	SBQFDC,
 	XSFDC,
-    PLGDC
+    PLGDC,
+	DWKGDC,
+	XHGDC,
+	MCHGDC,
+	HZJGDC
   },
   // 数据
   data() {
@@ -294,6 +305,7 @@ export default {
         },
         success(res) {
           if (res.code == 200) {
+			  console.log(res)
             that.wpnumMap = res.data.fczbmap.jczbmap;
             that.wpInfoMap = res.data.wxssmap;
             that.fjmap = res.data.fjmap[0];
@@ -311,65 +323,7 @@ export default {
         });
       });
     },
-    when: function () {
-		console.log(this.wpId.toLowerCase())
-      let jsonObj = dataService.get("arcgis-mhs");
-      this.fans = jsonObj;
-      jsonObj.forEach((item) => {
-        let obj = this.fjmap.find((t) => {
-          let wtid = t.wtId.replace("01_","");
-          if (wtid == item.attributes.code) return t
-        });
-        if (obj) {
-          item.attributes.state = String(obj.fjzt);
-        } else {
-          item.attributes.state = "4";
-        }
-        switch (item.attributes.state) {
-          case "0":  //待机
-            item.attributes.rotate = false; // 转
-            item.attributes.dur = 8; // 转一圈时间
-            break;
-          case "1":  //运行
-            item.attributes.rotate = true; // 转
-            item.attributes.dur = 2; // 转一圈时间
-            break;
-          case "2":  //故障
-            item.attributes.rotate = false; // 不转
-            item.attributes.dur = 8;
-            break;
-          case "3":  //中断
-            item.attributes.rotate = false; // 不转
-            item.attributes.dur = 8;
-            break;  
-          case "4":  //维护
-            item.attributes.rotate = false; // 不转
-            item.attributes.dur = 8;
-            break;  
-          case "5":  //限电
-            item.attributes.rotate = true; // 转
-            item.attributes.dur = 6;
-            break; 
-          case "6":  //停机
-            item.attributes.rotate = false; // 不转
-            item.attributes.dur = 8;
-            break;      
-          default:
-            item.attributes.rotate = false;
-            item.attributes.dur = 8;
-            break;
-        }
-        this.$refs.arcgis.addHtmlPoint(
-          [item.geometry.x, item.geometry.y],
-          item.attributes.code,
-          33,
-          50,
-          false
-        );
-      });
-      let lineJsonObj = dataService.get("arcgis-mhs-line");
-      this.$refs.arcgis.addFanByJson(jsonObj, lineJsonObj);
-    },
+    
     clickMap: function (info) {
       console.log(info);
       //   this.showPopup = true;

src/views/layout/Menu.vue

@@ -414,16 +414,6 @@ export default {
                   icon: "svg-wind-site",
                   path: "/health/gzzd/malfunctionRecall",
                 },
-                // {
-                //   text: "故障分类",
-                //   icon: "svg-wind-site",
-                //   path: "/health/gzzd/gzfl",
-                // },
-                // {
-                //   text: "预警分类",
-                //   icon: "svg-wind-site",
-                //   path: "/health/gzzd/yjfl",
-                // },
               ],
             },
             {

src/views/warn/gfgj.vue

@@ -33,6 +33,7 @@
 				<div class="query-actions">
 					<button class="btn green" @click="getTable()">查询</button>
 					<button class="btn green" @click="exportExcel()">导出</button>
+					<button class="btn green" @click="fx">分析</button>
 				</div>
 			</div>
 		</div>
@@ -42,18 +43,40 @@
 				@pageClick="pageClick" height="68vh" v-loading="tableLoading" element-loading-text="拼命加载中.."
 				element-loading-background="rgba(0, 0, 0, 0.8)"></ComTable>
 		</div>
+		<el-dialog title="报警等级占比图" v-model="dialogVisible" width="750px" top="10vh" custom-class="modal" :close-on-click-modal="false" :destroy-on-close='true'>
+			<el-row type="flex" justify="end">
+				<div class="query">
+					<div class="query-items">
+						<div class="query-actions">
+							<button class="btn green" @click="exportPDF">导出为PDF</button>
+						</div>
+					</div>
+				</div>
+			</el-row>
+			<el-row>
+				<div class="pdfDom">
+					<dual-pie-chart height="40vh" width='700px' :innerData="innerAnalyis" :outerData="outerAnalyis" />
+				</div>
+			</el-row>
+		</el-dialog>
 	</div>
 </template>
 <script>
 	import ComTable from "@/components/coms/table/table.vue";
-
+	import DualPieChart from "@/components/chart/pie/dual-pie-chart.vue";
+	import Get_PDF from "@tools/htmlToPdf";
 	export default {
 		components: {
-			ComTable
+			ComTable,
+			DualPieChart,
+			Get_PDF
 		},
 		data() {
 			let that = this;
 			return {
+				innerAnalyis: [],
+				outerAnalyis: [],
+				dialogVisible: false,
 				waitAjax:true,//等待执行完了再加载table
 				ChangZhan: [],
 				wpId: "",
@@ -90,7 +113,7 @@
 						},
 						{
 							name: "报警等级",
-							field: "messageType",
+							field: "rank",
 							is_num: false,
 							is_light: false,
 							sortable: true,
@@ -144,10 +167,10 @@
 					},
 					success(res) {
 						if (res.data) {
-							let messageType = ['低','中低','中','中高','高'];
+							let rank = ['低','中低','中','中高','高'];
 							let data = res.data.records;
 							data.forEach(ele=>{
-								ele.messageType = messageType[parseInt(ele.messageType) - 1];
+								ele.rank = rank[parseInt(ele.rank) - 1];
 								ele.category1 == 'GF' ? ele.category1 = '光伏': ele.category1 = '升压站';
 							})
 							that.tableData.data = data;
@@ -169,6 +192,50 @@
 				let excelData = this.BASE.deepCopy(this.tableData);
 				this.BASE.exportExcel(excelData, "光伏告警");
 			},
+			fx(){
+				var that = this;
+				that.API.requestData({
+					method: "GET",
+					timeout: 30000,
+					showLoading:true,
+					subUrl: "photovoltaic/query",
+					data: {
+						category1: "GF",
+						stationid: this.wpId,
+						starttime: this.startDate,
+						endtime: this.endDate,
+						keyword: this.alarmDesc,
+						pagenum: this.pageIndex,
+						pagesize: this.pageSize,
+					},
+					success(res) {
+						var analyis = [];
+						let data = res.data[1],
+							rank = ['低','中低','中','中高','高'],
+							val = Object.values(data);
+						val.pop();
+						val.forEach((ele,index) =>{
+							analyis.push({
+							  name: rank[index],
+							  value: ele
+							})
+						})
+						that.innerAnalyis = analyis;
+						that.outerAnalyis = analyis;
+						that.dialogVisible= true;
+					},
+				});
+			},
+			exportPDF(name) {
+			  this.BASE.showMsg({
+			    type: "success",
+			    msg: "正在导出...请稍后...",
+			  });
+			  Get_PDF.downloadPDF(
+			    document.querySelector(".pdfDom"),
+			    "报警等级占比图"
+			  );
+			},
 		},
 	};
 </script>
@@ -178,4 +245,9 @@
 		margin-bottom: 8px;
 		padding: 1vh;
 	}
+	.pdfDom{
+		padding-top: 5vh;
+		background-color: #111C1B;
+		height: 50vh;
+	}
 </style>