neim/neim-ui/src/views/largeScreenPage/Subpage/preProjectResources.vue

<template>
  <div class="page preProjectResourcesPage">
    <div class="timeBox">{{ time }}</div>
    <div class="topTiltle">
      <span class="title">前期项目资源信息</span>
    </div>
    <div class="btuGroup">
      <div class="topBtu topLeftBtu" @click="back()">
        <span class="btuText">返回&nbsp;</span>
      </div>
      <div class="topBtu topRightBtu" @click="push()">
        <span class="btuText">后台管理</span>
      </div>
    </div>
    <div class="myMain-container">
      <div class="rightTextBg">
        <div class="rightBg topBox">
          <div class="rightTiltleTextBg">
            <div class="rightMainTitle">
              <span class="mainTitle">前期项目信息</span>
            </div>
            <div class="textBtu rightTextBtu" @click="dialogShow = true">
              <span>项目列表</span>
            </div>
          </div>
          <div class="rightTopContent">
            <div class="contentBox">
              <span class="numberBox">{{ pInfo.initiatedNum }}</span>
              <span class="textBox">已发起的项目</span>
            </div>
            <div class="contentBox">
              <span class="numberBox">{{ pInfo.approvalNum }}</span>
              <span class="textBox">完成核准项目</span>
            </div>
            <div class="contentBox">
              <span class="numberBox">{{ pInfo.buildNum }}</span>
              <span class="textBox">正实施建设</span>
            </div>
            <div class="contentBox">
              <span class="numberBox">{{ pInfo.electricNum }}</span>
              <span class="textBox">投产发电</span>
            </div>
          </div>
        </div>
      </div>

      <div class="mapBtuBg">
        <div id="mapBtuOne" class="mapBtu mapBtuAfter" @click="clickBtu('mapBtuOne')">
          <span class="mapBtuText">地形图</span>
        </div>
        <!--        <div id="mapBtuTwo" class="mapBtu mapBtuAfter" @click="clickBtu('mapBtuTwo')">-->
        <!--          <span class="mapBtuText">风场气象图</span>-->
        <!--        </div>-->
        <div id="mapBtuThree" class="mapBtu mapBtuBefore" @click="clickBtu('mapBtuThree')">
          <span class="mapBtuText">风资源分布图</span>
        </div>
        <!--        <div id="mapBtuFour" class="mapBtu mapBtuAfter" @click="clickBtu('mapBtuFour')">-->
        <!--          <span class="mapBtuText">光辐射气象图</span>-->
        <!--        </div>-->
        <div id="mapBtuFive" class="mapBtu mapBtuAfter" @click="clickBtu('mapBtuFive')">
          <span class="mapBtuText">光资源分布图</span>
        </div>
      </div>
    </div>
    <div v-if="mapMark === 'mapBtuOne'">
      <bige-map  ref="childMethod" :mapValue="mapValue"/>
    </div>
    <div v-if="mapMark === 'mapBtuThree'">
      <bige-heat-map  ref="childMethod" :mapValue="mapValue"/>
    </div>
    <div v-if="mapMark === 'mapBtuFive'">
      <bige-heat-sun-map  ref="childMethod" :mapValue="mapValue"/>
    </div>
    <div class="bottomPushBtu" @click="pushStationResource()">
      <span>在运风光场站资源管理</span>
    </div>
    <!--    弹窗  -->
    <div class="dialogInfoBg" v-if="dialogShow">
      <div class="rightTiltleTextBg">
        <div class="rightMainTitle">
          <span class="mainTitle">前期项目</span>
        </div>
        <div class="textBtu dialogRightTextBtu" @click="dialogShow = false">
          <span>返回</span>
        </div>
      </div>
      <div class="dialogMainInfoBg">
        <div class="projectInfoBox">
            <span class="dialogInfoTitle">
              <img
                class="tiltleLeftSign"
                referrerpolicy="no-referrer"
                src="../../../assets/largeScreenImg/index/tiltleLeftSign.png"
              />
              一类项目
            </span>
          <div class="dialogInfo">
            <p class="pInfo" v-for="item in projectOne" @click="projectNameClick(item)">{{ item.projectSort }}</p>
          </div>
        </div>
        <div class="projectInfoBox">
            <span class="dialogInfoTitle">
              <img
                class="tiltleLeftSign"
                referrerpolicy="no-referrer"
                src="../../../assets/largeScreenImg/index/tiltleLeftSign.png"
              />
              二类项目
            </span>
          <div class="dialogInfo">
            <p class="pInfo" v-for="item in projectTwo" @click="projectNameClick(item)">{{ item.projectSort }}</p>
          </div>
        </div>

        <div class="projectInfoBox">
            <span class="dialogInfoTitle">
              <img
                class="tiltleLeftSign"
                referrerpolicy="no-referrer"
                src="../../../assets/largeScreenImg/index/tiltleLeftSign.png"
              />
              三类备选
            </span>
          <div class="dialogInfo">
            <p class="pInfo" v-for="item in projectThree" @click="projectNameClick(item)">{{ item.projectSort }}</p>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {projectInfo, getProjectSeat} from "@/api/biz/dataQuery/largeScreenPage";
import bigeMap from "@/views/largeScreenPage/components/bigeMap";
import bigeHeatMap from "@/views/largeScreenPage/components/bigeHeatMap";
import bigeHeatSunMap from "@/views/largeScreenPage/components/bigeHeatSunMap";

export default {
  name: "preProjectResources",
  components: {
    bigeMap, bigeHeatMap,bigeHeatSunMap
  },
  data() {
    return {
      timer: null,
      time: '',
      dialogShow: false,
      pInfo: {
        initiatedNum: '31',//已发起项目数目
        approvalNum: '5',//已完成核准项目数目
        buildNum: '4',//正在实施项目数目
        electricNum: '1',//投产发电项目数目
      },

      //一类项目列表
      projectOne: [
        // {name: '黑龙江华电哈尔滨依兰鸡冠山四期200MW风电项目', value: '1'},
        // {name: '黑龙江华电哈尔滨巴彦二期100MW风电项目', value: '2'},
        // {name: '黑龙江华电哈尔滨呼兰风电二期200MW风电项目', value: '3'}
      ],
      // 二类项目列表
      projectTwo: [
        // {name: '黑龙江华电哈尔滨呼兰风电三期300MW项目', value: '4'},
        // {name: '黑龙江华电齐齐哈尔富拉尔基200MW风电项目', value: '5'},
        // {name: '黑龙江华电宁安风水山200MW风电项目', value: '6'},
        // {name: '黑龙江华电泰来胜利100MW风电项目', value: '7'},
        // {name: '黑龙江华电哈尔滨方正100MW风电项目', value: '8'}
      ],
      // 三类项目列表
      projectThree: [
        // {name: '黑龙江华电佳木斯汤原100MW风电项目', value: '9'},
        // {name: '黑龙江华电哈尔滨巴彦三期300MW风电项目', value: '10'},
        // {name: '黑龙江华电依兰五期200MW风电项目', value: '11'},
        // {name: '黑龙江华电甘南巨宝200MW风电项目', value: '12'},
        // {name: '黑龙江华电种马场20MW风电项目', value: '13'},
        // {name: '黑龙江华电富拉尔基灰场100MW光伏项目', value: '14'},
        // {name: '黑龙江华电佳木斯灰场50MW光伏项目', value: '15'},
        // {name: '黑龙江华电哈三灰场100MW光伏项目', value: '16'}
      ],
      mapMark: 'mapBtuThree',
      //地图传值
      mapValue: {
        level: null,//地图层级
        center: [],//中心坐标
        allStationInfo: null,//场站坐标
        projectInfo: null,//项目坐标
      },
      projectSeat:[],// 项目位置
    }
  },
  destroyed() {
    clearInterval(this.timer)
    this.timer = null
  },
  mounted() {
    this.formatTime()
    this.getInfo()
    this.timer = setInterval(this.formatTime, 1000 * 60)
  },
  methods: {
    getInfo() {
      getProjectSeat().then(res => {
        this.projectSeat = res.data
        this.mapValue = {
          params: new Date(),
          level: null,//地图层级
          center: [],//中心坐标
          allStationInfo: null,//场站坐标
          projectInfo: res.data
        }
      }).catch(err => {
        console.log('项目信息异常:' + err)
      })
      projectInfo().then(res => {
        let data = res.data
        this.pInfo = data.pInfo
        this.projectOne = data.one
        this.projectTwo = data.tow
        this.projectThree = data.three
      }).catch(err => {
        console.log('项目信息异常:' + err)
      })
    },
    //项目列表点击名称事件
    projectNameClick(project) {
      sessionStorage.setItem("projectInfo", JSON.stringify(project))
      this.$store.dispatch('equipmentInfo/projectInfo', JSON.stringify(project))
      this.$router.push({path: "/homepage/projectInfo"})
    },
    push() {
      this.$router.push({path: "/dataQuery/windTowerStatusInfo"})
    },
    back() {
      this.$router.push({path: "/homepage/provincialEnergyStations"})
    },
    pushStationResource() {
      this.$router.push({path: "/homepage/stationResources"})
    },
    clickBtu(id) {
      console.log(this.$refs.childMethod)
      let center = this.$refs.childMethod.center
      let level = this.$refs.childMethod.level
      this.mapValue = {
        params: new Date(),
        level: level === ''?null:level,//地图层级
        center: center.length === 0?[]:[center.lat,center.lng],//中心坐标
        allStationInfo: null,//场站坐标
        projectInfo: this.projectSeat
      }
      this.mapMark = id
      let clickItem = document.getElementById(id)
      let activeItem = document.querySelector('.mapBtuBefore')
      activeItem.classList.remove('mapBtuBefore')
      activeItem.classList.add('mapBtuAfter')
      clickItem.classList.remove('mapBtuAfter')
      clickItem.classList.add('mapBtuBefore')
    },
    /*时间格式化*/
    formatTime() {
      this.time = ''
      let date = new Date()
      let year = date.getFullYear();                // 年
      let month = date.getMonth() + 1;        // 月
      let day = date.getDate();
      let hour = date.getHours();                   // 获取当前小时数(0-23)
      let minutes = date.getMinutes();
      if (month < 10) month = "0" + month;
      if (day < 10) day = "0" + day;
      if (minutes < 10) minutes = "0" + minutes;
      this.time = year + "-" + month + "-" + day + " " + hour + ' : ' + minutes;
    }
  }
}
</script>

<style scoped>
.preProjectResourcesPage {
  width: 100%;
  height: calc(100vh);
  background: url(../../../assets/largeScreenImg/backBg.png) no-repeat;
  background-size: 100% 100%;
  color: white;
}

.timeBox {
  position: absolute;
  left: 2%;
  top: 0;
  font-size: 20px;
  line-height: 40px;
  font-family: timeFont !important;
}

.page {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
  box-shadow: inset -1px -20px 550px 200px rgb(12 25 69  / 80%);
}

.topTiltle {
  width: 100%;
  height: 5.5%;
  background: url(../../../assets/largeScreenImg/index/topTitleBg.png) -2px -1px no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
}

.title {
  width: 17%;
  height: 100%;
  text-align: center;
  margin-top: .2%;
  font-size: 30px;
  font-weight: 800;
  background-image: linear-gradient(
    360deg,
    rgba(178, 204, 252, 1) 0,
    rgba(178, 204, 252, 1) 0,
    rgba(255, 255, 255, 1) 100%,
    rgba(255, 255, 255, 1) 100%
  );
  background-clip: text;
  color: transparent;
}

.btuGroup {
  position: absolute;
  right: 0;
  top: 0;
  color: white;
  width: 15%;
  height: 5.5%;
  display: flex;
  justify-content: flex-end;
  font-size: 18px;
}

.topBtu {
  height: 100%;
  margin-top: -1.5%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.topRightBtu {
  background: url(../../../assets/largeScreenImg/index/topRightBtuBg.png) 100% no-repeat;
  background-size: 100% 100%;
  width: 50%;
}

.topLeftBtu {
  background: url(../../../assets/largeScreenImg/index/topLeftBtuBg.png) 100% no-repeat;
  background-size: 100% 100%;
  width: 35%;
}

.rightTextBg {
  position: absolute;
  right: 2%;
  top: 8%;
  width: 20%;
  display: flex;
  flex-direction: column;
  z-index: 10000;
}

.rightBg {
  background: url(../../../assets/largeScreenImg/index/leftTextBg.png) 100% no-repeat;
  background-size: 100% 100%;
  padding: 5%;
}

.mapBtuBg {
  position: absolute;
  right: 22%;
  top: 7%;
  width: 10%;
  z-index: 100000;
}

.rightTiltleTextBg {
  height: 32px;
  background: url(../../../assets/largeScreenImg/zaiyunAndqianqi/rightTitleBg.png) 100% no-repeat;
  background-size: 100% 100%;
}

.textBtu {
  background: url(../../../assets/largeScreenImg/index/topRightBtuBg.png) 100% no-repeat;
  background-size: 100% 100%;
  width: 40%;
  cursor: pointer;
  line-height: 60px;
  text-align: center;
}

.rightTextBtu {
  position: absolute;
  right: 2%;
  top: -.5%;
}

.rightMainTitle {
  color: rgba(183, 243, 252, 1);
  font-size: 20px;
  font-weight: 550;
  margin-left: 8%;
  position: relative;
  top: -25%;
}

.rightTopContent {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.contentBox {
  margin-top: 5%;
  width: 35%;
  height: 125px;
  background: url(../../../assets/largeScreenImg/index/liubianxingBorder.png) 100% no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.numberBox {
  font-size: 24px;
  font-weight: 700;
  background-image: linear-gradient(
    rgba(255, 255, 255, 1) 0,
    rgba(255, 255, 255, 1) 0,
    rgba(70, 255, 222, 1) 98.730469%,
    rgba(70, 255, 222, 1) 100%
  );
  background-clip: text;
  color: transparent;
}

.mapBtu {
  height: 50px;
  width: 200px;
}

.mapBtuAfter {
  background: url(../../../assets/largeScreenImg/index/mapBtuClickAfter.png) 100% no-repeat;
  background-size: 100% 100%;
}

.mapBtuBefore {
  background: url(../../../assets/largeScreenImg/index/mapBtuClickBefore.png) 100% no-repeat;
  background-size: 100% 100%;
  margin-top: 9px;
}

.mapBtuText {
  line-height: 50px;
  font-size: 16px;
  display: flex;
  align-items: center;
  margin-left: 20%;
}

.bottomPushBtu {
  background: url(../../../assets/largeScreenImg/index/topLeftBtuBg.png) 100% no-repeat;
  background-size: 100% 100%;
  line-height: 60px;
  width: 12%;
  cursor: pointer;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 0;
}

.dialogInfoBg {
  background: url(../../../assets/largeScreenImg/zaiyunAndqianqi/dialogBg.png) 100% no-repeat;
  background-size: 100% 100%;
  padding: 1%;
  width: 30%;
  position: absolute;
  top: 10%;
  left: 30%;
}

.dialogRightTextBtu {
  position: absolute;
  top: 0;
  right: 1%;
  width: 20%;
}

.tiltleLeftSign {
  width: 12px;
  height: 30px;
  margin-top: 1%;
  margin-right: 2%;
}

.dialogInfoTitle {
  display: flex;
  align-items: center;
}

.projectInfoBox {
  margin-top: 2%;
}

.dialogInfo {
  margin-left: 5%;
  font-size: 14px;
}

.pInfo {
  line-height: 15px;
  cursor: pointer;
}
</style>