总貌模块宣和tab完成

src/views/WindSite/components/generalappearance/xh/previewPicture.vue

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

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

@@ -427,84 +427,6 @@
                 </g>
               </g>
               <g id="fan">
-                <g id="_x23_7">
-                  <g>
-                    <path
-                      fill="#E1E1E0"
-                      d="M328.219,380.086l-1.383,28.884c0,0,1.097,0.432,2.071,0.437c0.998,0.006,2.153-0.421,2.153-0.421
-				l-1.142-28.891L328.219,380.086L328.219,380.086z"
-                    ></path>
-                  </g>
-                  <g>
-                    <g transform="rotate(104.279 329 380.082)">
-                      <g>
-                        <path
-                          fill="#F00"
-                          d="M327.918,379.03l2.21,0.856c0,0,5.864-12.208,6.29-18.828
-						C332.088,366.301,327.918,379.03,327.918,379.03"
-                        ></path>
-                        <path
-                          fill="#05AA3D"
-                          d="M330.016,379.887l-1.824,1.512c0,0,7.8,11.071,13.372,14.673
-						C339.098,389.736,330.016,379.887,330.016,379.887"
-                        ></path>
-                        <path
-                          fill="#05AA3D"
-                          d="M328.09,381.471l0.024-2.37c0,0-13.494-1.198-19.84,0.729
-						C314.706,382.039,328.09,381.471,328.09,381.471"
-                        ></path>
-                      </g>
-                      <g>
-                        <path
-                          fill="#E1E1E0"
-                          d="M330.022,379.602l6.401-18.79c0,0-0.066,1.152-0.114,1.535c-0.039,0.322-0.169,0.959-0.236,1.276
-						c-0.059,0.26-0.246,1.039-0.246,1.039s-0.34,1.348-0.473,1.79c-0.451,1.471-1.445,4.38-1.998,5.813
-						c-0.468,1.215-1.465,3.622-1.994,4.813c-0.287,0.65-1.173,2.58-1.173,2.58"
-                        ></path>
-                        <path
-                          fill="#E1E1E0"
-                          d="M328.491,381.442l13.288,14.748c0,0-0.976-0.613-1.285-0.845c-0.26-0.193-0.756-0.614-1-0.829
-						c-0.199-0.178-0.785-0.721-0.785-0.721s-1.014-0.953-1.335-1.286c-1.064-1.107-3.115-3.396-4.104-4.576
-						c-0.829-1.001-2.446-3.046-3.23-4.087c-0.428-0.563-1.683-2.282-1.683-2.282"
-                        ></path>
-                        <path
-                          fill="#E1E1E0"
-                          d="M327.881,379.3l-19.836,0.615c0,0,1.099-0.349,1.475-0.437c0.317-0.072,0.956-0.182,1.276-0.227
-						c0.264-0.038,1.063-0.135,1.063-0.135s1.378-0.156,1.844-0.186c1.53-0.099,4.6-0.188,6.142-0.177
-						c1.302,0.012,3.904,0.1,5.204,0.173c0.709,0.041,2.829,0.194,2.829,0.194"
-                        ></path>
-                      </g>
-                      <animateTransform
-                        type="rotate"
-                        fill="remove"
-                        attributeType="XML"
-                        repeatCount="indefinite"
-                        to="359 329 380.082"
-                        from="0 329 380.082"
-                        attributeName="transform"
-                        calcMode="linear"
-                        additive="replace"
-                        accumulate="none"
-                        restart="always"
-                        dur="8"
-                      ></animateTransform>
-                    </g>
-                    <g>
-                      <path
-                        fill="#69BFDA"
-                        d="M326.337,380.078c-0.004,1.439,1.206,2.616,2.709,2.622s2.723-1.163,2.727-2.6
-					c0.005-1.442-1.208-2.616-2.708-2.624C327.561,377.475,326.339,378.638,326.337,380.078"
-                      ></path>
-                    </g>
-                    <g>
-                      <path
-                        fill="#C0E4EF"
-                        d="M327.322,380.082c-0.004,0.897,0.771,1.63,1.726,1.633c0.958,0.005,1.737-0.722,1.742-1.62
-					c0.002-0.895-0.773-1.627-1.73-1.63C328.108,378.459,327.325,379.186,327.322,380.082"
-                      ></path>
-                    </g>
-                  </g>
-                </g>
                 <g id="_x23_1">
                   <g>
                     <path
@@ -979,6 +901,84 @@
                     </g>
                   </g>
                 </g>
+                <g id="_x23_7">
+                  <g>
+                    <path
+                      fill="#E1E1E0"
+                      d="M328.219,380.086l-1.383,28.884c0,0,1.097,0.432,2.071,0.437c0.998,0.006,2.153-0.421,2.153-0.421
+				l-1.142-28.891L328.219,380.086L328.219,380.086z"
+                    ></path>
+                  </g>
+                  <g>
+                    <g transform="rotate(104.279 329 380.082)">
+                      <g>
+                        <path
+                          fill="#F00"
+                          d="M327.918,379.03l2.21,0.856c0,0,5.864-12.208,6.29-18.828
+						C332.088,366.301,327.918,379.03,327.918,379.03"
+                        ></path>
+                        <path
+                          fill="#05AA3D"
+                          d="M330.016,379.887l-1.824,1.512c0,0,7.8,11.071,13.372,14.673
+						C339.098,389.736,330.016,379.887,330.016,379.887"
+                        ></path>
+                        <path
+                          fill="#05AA3D"
+                          d="M328.09,381.471l0.024-2.37c0,0-13.494-1.198-19.84,0.729
+						C314.706,382.039,328.09,381.471,328.09,381.471"
+                        ></path>
+                      </g>
+                      <g>
+                        <path
+                          fill="#E1E1E0"
+                          d="M330.022,379.602l6.401-18.79c0,0-0.066,1.152-0.114,1.535c-0.039,0.322-0.169,0.959-0.236,1.276
+						c-0.059,0.26-0.246,1.039-0.246,1.039s-0.34,1.348-0.473,1.79c-0.451,1.471-1.445,4.38-1.998,5.813
+						c-0.468,1.215-1.465,3.622-1.994,4.813c-0.287,0.65-1.173,2.58-1.173,2.58"
+                        ></path>
+                        <path
+                          fill="#E1E1E0"
+                          d="M328.491,381.442l13.288,14.748c0,0-0.976-0.613-1.285-0.845c-0.26-0.193-0.756-0.614-1-0.829
+						c-0.199-0.178-0.785-0.721-0.785-0.721s-1.014-0.953-1.335-1.286c-1.064-1.107-3.115-3.396-4.104-4.576
+						c-0.829-1.001-2.446-3.046-3.23-4.087c-0.428-0.563-1.683-2.282-1.683-2.282"
+                        ></path>
+                        <path
+                          fill="#E1E1E0"
+                          d="M327.881,379.3l-19.836,0.615c0,0,1.099-0.349,1.475-0.437c0.317-0.072,0.956-0.182,1.276-0.227
+						c0.264-0.038,1.063-0.135,1.063-0.135s1.378-0.156,1.844-0.186c1.53-0.099,4.6-0.188,6.142-0.177
+						c1.302,0.012,3.904,0.1,5.204,0.173c0.709,0.041,2.829,0.194,2.829,0.194"
+                        ></path>
+                      </g>
+                      <animateTransform
+                        type="rotate"
+                        fill="remove"
+                        attributeType="XML"
+                        repeatCount="indefinite"
+                        to="359 329 380.082"
+                        from="0 329 380.082"
+                        attributeName="transform"
+                        calcMode="linear"
+                        additive="replace"
+                        accumulate="none"
+                        restart="always"
+                        dur="8"
+                      ></animateTransform>
+                    </g>
+                    <g>
+                      <path
+                        fill="#69BFDA"
+                        d="M326.337,380.078c-0.004,1.439,1.206,2.616,2.709,2.622s2.723-1.163,2.727-2.6
+					c0.005-1.442-1.208-2.616-2.708-2.624C327.561,377.475,326.339,378.638,326.337,380.078"
+                      ></path>
+                    </g>
+                    <g>
+                      <path
+                        fill="#C0E4EF"
+                        d="M327.322,380.082c-0.004,0.897,0.771,1.63,1.726,1.633c0.958,0.005,1.737-0.722,1.742-1.62
+					c0.002-0.895-0.773-1.627-1.73-1.63C328.108,378.459,327.325,379.186,327.322,380.082"
+                      ></path>
+                    </g>
+                  </g>
+                </g>
                 <g id="_x23_8">
                   <g>
                     <path

src/views/WindSite/pages/GeneralAppearance.vue

@@ -17,44 +17,44 @@
         <div class="sub-title-item">
           <img src="../../../assets/map/fan/black.png" />
           <span class="sub-title gray">接入台数</span>
-          <span class="sub-count font-num white">{{wpnumMap.jrts}}</span>
-          
+          <span class="sub-count font-num white">{{ wpnumMap.jrts }}</span>
         </div>
         <div class="sub-title-item">
           <img src="../../../assets/map/fan/green.png" />
           <span class="sub-title green">待机台数</span>
-          <span class="sub-count font-num green">{{wpnumMap.djts}}</span>
+          <span class="sub-count font-num green">{{ wpnumMap.djts }}</span>
         </div>
         <div class="sub-title-item">
           <img src="../../../assets/map/fan/blue.png" />
           <span class="sub-title blue">并网台数</span>
-          <span class="sub-count font-num blue">{{wpnumMap.yxts}}</span>
+          <span class="sub-count font-num blue">{{ wpnumMap.yxts }}</span>
         </div>
         <div class="sub-title-item">
           <img src="../../../assets/map/fan/purple.png" />
           <span class="sub-title pink">限电台数</span>
-          <span class="sub-count font-num pink">{{wpnumMap.xdts}}</span>
+          <span class="sub-count font-num pink">{{ wpnumMap.xdts }}</span>
         </div>
         <div class="sub-title-item">
           <img src="../../../assets/map/fan/red.png" />
           <span class="sub-title red">故障台数</span>
-          <span class="sub-count font-num red">{{wpnumMap.gzts}}</span>
+          <span class="sub-count font-num red">{{ wpnumMap.gzts }}</span>
         </div>
         <div class="sub-title-item">
           <img src="../../../assets/map/fan/orange.png" />
           <span class="sub-title orange">检修台数</span>
-          <span class="sub-count font-num orange">{{wpnumMap.whts}}</span>
+          <span class="sub-count font-num orange">{{ wpnumMap.whts }}</span>
         </div>
         <div class="sub-title-item">
           <img src="../../../assets/map/fan/black.png" />
           <span class="sub-title gray">离线台数</span>
-          <span class="sub-count font-num gray">{{wpnumMap.lxts}}</span>
+          <span class="sub-count font-num gray">{{ wpnumMap.lxts }}</span>
         </div>
       </div>
     </div>
     <!-- <gax6 class="general-appearance-body"></gax6> -->
     <div>
-      <AppearanceXs class="general-appearance-body" :data="fjmap" :zmmap="zmmap"/>
+      <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'" />
     </div>
   </div>
 </template>
@@ -62,7 +62,8 @@
 <script>
 import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
 // import gax6 from "../components/gax6.vue";
-import AppearanceXs from "../components/generalappearance/xs/xs.vue";
+import XS from "../components/generalappearance/xs/xs.vue";
+import XH from "../components/generalappearance/xh/xh.vue";
 export default {
   // 名称
   name: "GeneralAppearance",
@@ -70,7 +71,8 @@ export default {
   components: {
     // gax6,
     BtnGroup2,
-    AppearanceXs
+    XS,
+    XH
   },
   // 数据
   data() {