hb_sis_zhfx/src/components/arcgis/SBQ_FDC.vue

<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>
</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.4515667, 37.60171667], // 初始中心点 106.230909, 38.487193
        height: 654, // 3D地图初始相机高度
        tilt: 65, // 俯视角
        scale: 120000,
        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];
          }
        },
      });
    },
    when: function () {
      let jsonObj = dataService.get("arcgis-sbq");
      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-sbq-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;
        }
      }
    }
  }
}
</style>