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

<template>
  <div class="map-1">
    <div class="btn-group-tabs">
      <BtnGroup2 :btnGroups="btnGroups" :rowIndex="0" :index="1" @select="select"></BtnGroup2>
    </div>
    <div class="panel-title">
      <div class="panel-title-name">
        <span class="svg-icon svg-icon-green svg-icon-sm">
          <SvgIcon svgid="svg-wind-site"></SvgIcon>
        </span>
        <span class="green">某某某风电场</span>
        <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">256</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">56</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">256</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">3</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">5</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">20</span>
        </div>
        <div class="sub-title-item">
          <img src="../../../assets/map/fan/white.png" />
          <span class="sub-title white">受累台数</span>
          <span class="sub-count font-num white">256</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">2</span>
        </div>
      </div>
    </div>
    <div class="panel-body">
      <arcgis @when="when" ref="arcgis" :data="arcgisData" @clickMap="clickMap"></arcgis>
      <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">49.5</td>
              <td class="unit white">M/W</td>
              <td class="text white">装机台数</td>
              <td class="value green">33</td>
              <td class="unit white">台</td>
              <td class="text white">风机型号</td>
              <td class="value green" colspan="2">UP82/77-1500</td>
            </tr>
            <tr>
              <td class="text white">实时功率</td>
              <td class="value green">50.81</td>
              <td class="unit white">M/W</td>
              <td class="text white">平均风速</td>
              <td class="value green">14.66</td>
              <td class="unit white">m/s</td>
              <td class="text white">运行台数</td>
              <td class="value green">33</td>
              <td class="unit white">台</td>
            </tr>
            <tr>
              <td class="text white">待机台数</td>
              <td class="value green">0</td>
              <td class="unit white">台</td>
              <td class="text white">故障台数</td>
              <td class="value green">0</td>
              <td class="unit white">台</td>
              <td class="text white">维护台数</td>
              <td class="value green">0</td>
              <td class="unit white">台</td>
            </tr>
            <tr>
              <td class="text white">离线台数</td>
              <td class="value green">0</td>
              <td class="unit white">台</td>
              <td class="text white"></td>
              <td class="value green"></td>
              <td class="unit white"></td>
              <td class="text white"></td>
              <td class="value green"></td>
              <td class="unit white"></td>
            </tr>
            <tr>
              <td class="text white">日发电量</td>
              <td class="value green">49.5</td>
              <td class="unit white">万kWh</td>
              <td class="text white">月发电量</td>
              <td class="value green">49.5</td>
              <td class="unit white">万kWh</td>
              <td class="text white"></td>
              <td class="value green"></td>
              <td class="unit white"></td>
            </tr>
            <tr>
              <td class="text white">年发电量</td>
              <td class="value green">49.5</td>
              <td class="unit white">万kWh</td>
              <td class="text white">总发电量</td>
              <td class="value green">49.5</td>
              <td class="unit white">万kWh</td>
              <td class="text white"></td>
              <td class="value green"></td>
              <td class="unit white"></td>
            </tr>
          </table>
        </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 arcgis from "@com/arcgis/arcgis.vue";
import dataService from "@/helper/data.js";

export default {
  // 名称
  name: "Map",
  // 使用组件
  components: {
    BtnGroup2,
    SvgIcon,
    arcgis,
  },
  // 数据
  data() {
    return {
      btnGroups: [
        {
          icon: "svg-wind-site",
          btns: [
            {
              text: "某某风场",
              code: "mmfdc1",
            },
            {
              text: "某某风场",
              code: "mhsfc",
            },
            {
              text: "某某风场",
              code: "mmfdc2",
            },
            {
              text: "某某风场",
              code: "mmfdc3",
            },
            {
              text: "某某风场",
              code: "mmfdc4",
            },
          ],
        },
        {
          icon: "svg-photovoltaic",
          btns: [
            {
              text: "某某风场",
              code: "mmgf1",
            },
            {
              text: "某某风场",
              code: "mmgf2",
            },
            {
              text: "某某风场",
              code: "mmgf3",
            },
            {
              text: "某某风场",
              code: "mmgf4",
            },
          ],
        },
      ],
      arcgisData: {
        mode: "2D", // 模式 2D 3D
        title: "宁夏地图", // 标题
        center: [106.47423505799998, 37.767080068999974], // 初始中心点 106.230909, 38.487193
        height: 654, // 3D地图初始相机高度
        tilt: 65, // 俯视角
        scale: 15000,
      },
      showPopup: false,
    };
  },
  // 函数
  methods: {
    when: function() {
      let jsonObj = dataService.get("arcgis-nx-fc1");
      jsonObj.forEach(item => {
        item.attributes.state = "dj";
      });
      let lineJsonObj = dataService.get("arcgis-nx-fc1-line");
      this.$refs.arcgis.addFanByJson(jsonObj, lineJsonObj);
    },
    clickMap: function(info) {
      console.log(info);
      this.showPopup = true;
    },
    popupBack: function() {
      this.showPopup = false;
    },
  },
  // 生命周期钩子
  beforeCreate() {
    // 创建前
  },
  created() {
    // 创建后
  },
  beforeMount() {
    // 渲染前
  },
  mounted() {
    // 渲染后
  },
  beforeUpdate() {
    // 数据更新前
  },
  updated() {
    // 数据更新后
  },
};
</script>

<style lang="less" scoped>
@titleHeight: 3.704vh;

.map-1 {
  width: 100%;
  height: calc(100vh - 90px);
  display: flex;
  flex-direction: column;

  .btn-group-tabs {
    display: flex;
    flex-direction: row;
  }

  .panel-title {
    width: 100%;
    background-color: fade(@darkgray, 40%);
    margin-top: 1.481vh;
    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 1.481vh;
        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: 0.741vh;
    overflow: auto;
    position: relative;

    .map-popup-panel {
      width: 679px;
      position: absolute;
      left: 71px;
      top: 22px;

      .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;
          }
        }
      }
    }
  }
}
</style>