jn_sis_zhfx/src/views/WindSite/pages/Map.vue

<template>
  <div class="map-1">
    <div class="btn-group-tabs">
      <BtnGroup2
        :btnGroups="btnGroups"
        :rowIndex="rowIndex"
        :index="selectIndex"
        @select="select"
        :wpId="wpId"
      ></BtnGroup2>
    </div>
    <div class="panel-title">
      <div class="panel-title-name">
        <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.djts +
            wpnumMap.yxts +
            wpnumMap.xdts +
            wpnumMap.gzts +
            wpnumMap.whts +
            wpnumMap.lxts
          }}</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>
        </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>
        </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>
        </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>
        </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>
        </div>
        <div class="sub-title-item">
          <img src="../../../assets/map/fan/black.png" />
          <span class="sub-title gray">离线台数{{wpId}}</span>
          <span class="sub-count font-num gray">{{ wpnumMap.lxts }}</span>
        </div>
      </div>
    </div>
    <div class="panel-body">
      <MHSFDC wpId="MHS_FDC" v-if="wpId.indexOf('MHS_FDC') !== -1" />
      <NSSFDC wpId="NSS_FDC" v-if="wpId.indexOf('NSS_FDC') !== -1" />
      <QSFDC wpId="QS_FDC" v-if="wpId.indexOf('QS_FDC') !== -1" />
      <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('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">
            某某风电场总貌<span></span>
          </div>
          <div class="map-popup-panel-date gray">2020年5月10日</div>
          <div class="map-popup-panel-back" @click="popupBack">
            <span class="svg-icon svg-icon-white svg-icon-sm">
              <SvgIcon svgid="svg-arrow-dpwn-1"></SvgIcon>
            </span>
          </div>
        </div> -->
        <div class="map-popup-panel-body">
          <table class="table-form">
            <tr>
              <td class="text white">预测功率</td>
              <td class="value green">{{ wpnumMap.ycgl }}</td>
              <td class="unit white">MW</td>
              <td class="text white">保证功率</td>
              <td class="value green">{{ wpnumMap.bzgl }}</td>
              <td class="unit white">MW</td>
              <td class="text white">应发功率</td>
              <td class="value green">{{ wpnumMap.yfgl }}</td>
              <td class="unit white">MW</td>
            </tr>
            <tr>
              <!-- <td class="text white">实际风速</td>
              <td class="value green">{{ wpnumMap.ssfs }}</td>
              <td class="unit white">m/s</td> -->
              <td class="text white">日性能损失</td>
              <td class="value green">{{ wpInfoMap.rqfssdl }}</td>
              <td class="unit white">万kWh</td>
              <td class="text white">月性能损失</td>
              <td class="value green">{{ wpInfoMap.yqfssdl }}</td>
              <td class="unit white">万kWh</td>
              <td class="text white">年性能损失</td>
              <td class="value green">{{ wpInfoMap.nqfssdl }}</td>
              <td class="unit white">万kWh</td>
            </tr>
            <tr>
              <td class="text white">日故障损失</td>
              <td class="value green">{{ wpInfoMap.rgzssdl }}</td>
              <td class="unit white">万kWh</td>
              <td class="text white">月故障损失</td>
              <td class="value green">{{ wpInfoMap.ygzssdl }}</td>
              <td class="unit white">万kWh</td>
              <td class="text white">年故障损失</td>
              <td class="value green">{{ wpInfoMap.ngzssdl }}</td>
              <td class="unit white">万kWh</td>
            </tr>
            <tr>
              <td class="text white">日检修损失</td>
              <td class="value green">{{ wpInfoMap.rjxssdl }}</td>
              <td class="unit white">万kWh</td>
              <td class="text white">月检修损失</td>
              <td class="value green">{{ wpInfoMap.yjxssdl }}</td>
              <td class="unit white">万kWh</td>
              <td class="text white">年检修损失</td>
              <td class="value green">{{ wpInfoMap.njxssdl }}</td>
              <td class="unit white">万kWh</td>
            </tr>
            <tr>
              <td class="text white">日限电损失</td>
              <td class="value green">{{ wpInfoMap.rxdssdl }}</td>
              <td class="unit white">万kWh</td>
              <td class="text white">月限电损失</td>
              <td class="value green">{{ wpInfoMap.yxdssdl }}</td>
              <td class="unit white">万kWh</td>
              <td class="text white">年限电损失</td>
              <td class="value green">{{ wpInfoMap.nxdssdl }}</td>
              <td class="unit white">万kWh</td>
            </tr>
            <tr>
              <td class="text white">日受累损失</td>
              <td class="value green">{{ wpInfoMap.rslssdl }}</td>
              <td class="unit white">万kWh</td>
              <td class="text white">月受累损失</td>
              <td class="value green">{{ wpInfoMap.yslssdl }}</td>
              <td class="unit white">万kWh</td>
              <td class="text white">年受累损失</td>
              <td class="value green">{{ wpInfoMap.nslssdl }}</td>
              <td class="unit white">万kWh</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="map-tool">
        <div
          class="m-btn"
          :class="{ active: mapToolIndex == 0 }"
          @click="clickMapTool(0)"
        >
          场站详情
        </div>
        <!-- <div
          class="m-btn"
          :class="{ active: mapToolIndex == 1 }"
          @click="clickMapTool(1)"
        >
          巡检路线
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
// import SvgIcon from "@com/coms/icon/svg-icon.vue";
import MHSFDC from "@com/arcgis/MHS_FDC.vue";
import NSSFDC from "@com/arcgis/NSS_FDC.vue";
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 {
  // 名称
  name: "Map",
  // 使用组件
  components: {
    BtnGroup2,
    MHSFDC,
    NSSFDC,
    QSFDC,
    SBQFDC,
    XSFDC,
    PLGDC,
    DWKGDC,
    XHGDC,
    MCHGDC,
    HZJGDC,
  },
  // 数据
  data() {
    return {
      timmer: undefined,
      wpId: undefined,
      wpnumMap: {}, //风机监视数量
      wpInfoMap: {}, //风机详情
      fjmap: [], // 风机名
      selectIndex: 0,
      rowIndex: 0,
      btnGroups: [
        {
          icon: "svg-wind-site",
          btns: [],
        },
        {
          icon: "svg-photovoltaic",
          btns: [],
        },
      ],
      arcgisData: {
        mode: "2D", // 模式 2D 3D
        title: "宁夏地图", // 标题
        center: [107.0391975, 37.31469028], // 初始中心点 106.230909, 38.487193
        height: 654, // 3D地图初始相机高度
        tilt: 65, // 俯视角
        scale: 30000,
        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.wpId = that.$route.params.wpId;
    that.$nextTick(() => {
      that.getWp();
      that.requestData();
    });
  },
  // 函数
  methods: {
    select(res) {
      this.$router.replace({
        path: `/monitor/windsite/map/${res.code}`,
      });
    },
    getWp() {
      let that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "powercompare/windfarmAllAjax",
        success(res) {
          let btnGroup = [
            {
              icon: "svg-wind-site",
              btns: [],
            },
            {
              icon: "svg-photovoltaic",
              btns: [],
            },
          ];

          res.data.forEach((ele, index) => {
            if (ele.id.indexOf("FDC") !== -1) {
              btnGroup[0].btns.push({
                text: ele.name,
                code: ele.id,
              });
            } else {
              btnGroup[1].btns.push({
                text: ele.name,
                code: ele.id,
              });
            }
          });

          that.btnGroups = btnGroup;
          that.renderBtnActiveIndex();
        },
      });
    },
    // 风机状态监视
    requestData() {
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl: "monitor/findGeneralAppearance",
        data: {
          wpId: that.wpId,
        },
        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];
          }
        },
      });
    },
    renderBtnActiveIndex() {
      this.btnGroups.forEach((pEle, pIndex) => {
        pEle.btns.forEach((cEle, cIndex) => {
          if (cEle.code === this.wpId) {
            this.rowIndex = pIndex;
            this.selectIndex = cIndex;
          }
        });
      });
    },
    clickMap: function (info) {
      //   this.showPopup = true;
    },
    clickFan: function (code) {
      let wtId = code.replace("G", "G01_");
      this.$router.push(`/monitor/windsite/info/${this.wpId}/${wtId}`);
      //   this.showPopup = true;
    },
    popupBack: function () {
      this.showPopup = false;
    },
    clickMapTool: function (index) {
      //   this.mapToolIndex = index;
      this.showPopup = !this.showPopup;
    },
  },
  watch: {
    $route(res) {
      this.wpId = res.params.wpId;
      if (res.params.wpId) {
        this.requestData();
        this.renderBtnActiveIndex();
      }
    },
  },
};
</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;
      width: 140px;

      .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 {
            min-width: 60px;
            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>