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

<template>
  <div class="page projectInfoPage">
    <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="pushProjectEvolve()">
        <span class="btuText">进展情况</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" @click="pushInfo()">{{ projectName }}</span>
            </div>
          </div>
          <div class="rightTextMain">

            <div class="branckTitleBg">
              <img
                class="tiltleLeftSign"
                referrerpolicy="no-referrer"
                src="../../../assets/largeScreenImg/index/tiltleLeftSign.png"
              />
              <span class="branckTitle">项目概述</span>
            </div>
            <div class="mainContent">
              <span class="content">{{ projectOverview }}</span>
            </div>
            <div class="branckTitleBg">
              <img
                class="tiltleLeftSign"
                referrerpolicy="no-referrer"
                src="../../../assets/largeScreenImg/index/tiltleLeftSign.png"
              />
              <span class="branckTitle">项目风力资源概况</span>
            </div>
            <div class="mainContent">
              <span class="content">{{ resourcesOverview }}</span>
            </div>

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

      <div class="mapBtuBg">
        <div id="mapBtuOne" class="mapBtu mapBtuBefore" @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 mapBtuAfter" @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 :mapValue="mapValue"/>
    </div>
    <div v-if="mapMark === 'mapBtuThree'">
      <bige-heat-map :mapValue="mapValue"/>
    </div>
    <div v-if="mapMark === 'mapBtuFive'">
      <bige-heat-sun-map :mapValue="mapValue"/>
    </div>
    <div class="bottomPushBtu" @click="pushPreProjectResource()">
      <span>前期项目资源信息</span>
    </div>
  </div>
</template>

<script>
import {projectMapInfo,getPointMap} 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: "projectInfo",
  components: {
    bigeMap, bigeHeatMap,bigeHeatSunMap
  },
  data() {
    return {
      timer: null,
      time: '',
      project: {},
      projectName: '',
      coordinates:[],//中心点坐标
      // projectOverview: '依兰县位于黑龙江省中南部。 黑龙江华电哈尔滨依兰鸡冠山四期200MW风电项目中心位于黑龙江省哈尔滨市依兰县东侧15km的鸡冠砬子山上，整个场址为低山丘陵区，场区实际可利用面积约63km2。',
      projectOverview: '',
      // resourcesOverview: '根据风能资源推测120m数据分析，年平均风速为8.007m/s，平均风功率密度为567W/m²，属于3级风场。主风向为WSW，次风向为W，空气密度为1.2kg/m³。'
      resourcesOverview: '',
      mapMark: 'mapBtuOne',
      //地图传值
      mapValue: {
        level: null,//地图层级
        center: [],//中心坐标
        allStationInfo: null,//场站坐标
        projectInfo: null,//项目坐标
        allPointInfo:null,//所有点位信息
      },
      allPointInfo:[]
    }
  },
  destroyed() {
    clearInterval(this.timer)
    this.timer = null
  },
  mounted() {
    this.getPointMap()
    this.formatTime()
    this.timer = setInterval(this.formatTime, 1000 * 60)
  },
  methods: {
    /*所有风机、塔、拐点坐标信息*/
    getPointMap(){
      if(this.$store.getters.allPointInfo.length>0){
        this.allPointInfo = JSON.parse(this.$store.getters.allPointInfo).info
        this.getInfo()
      }else {
        getPointMap().then(res=>{
          // console.log(res.data)
          this.allPointInfo = res.data
          this.getInfo()
          sessionStorage.setItem("allPointInfo", JSON.stringify({info:this.allPointInfo}))
          this.$store.dispatch('equipmentInfo/allPointInfo', JSON.stringify({info:this.allPointInfo}))
        }).catch(err=>{
          console.log('所有点位坐标：'+err)
        })
      }
    },
    getInfo() {
      this.project = JSON.parse(this.$store.getters.projectInfo)
      let name = this.project.projectSort
      if (name.indexOf('黑龙江华电哈尔滨') != -1) {
        name = name.replace("黑龙江华电哈尔滨", "")
      } else if (name.indexOf('黑龙江华电齐齐哈尔') != -1) {
        name = name.replace("黑龙江华电齐齐哈尔", "")
      } else if (name.indexOf('黑龙江华电佳木斯') != -1) {
        name = name.replace("黑龙江华电佳木斯", "")
      } else {
        name = name.replace("黑龙江华电", "")
      }
      this.projectName = name
      this.getProjectInfo(this.project.id)
    },
    // 获取项目信息
    getProjectInfo(projectId) {
      projectMapInfo({projectId:projectId}).then(res=>{
        let data = res.data
        this.projectOverview = data.projectOverview
        this.resourcesOverview = data.resourcesOverview
        this.coordinates = [Number(data.latitude),Number(data.longitude)]
        this.mapValue ={
          params: new Date(),
          level: 12,//地图层级
          center: this.coordinates,//中心坐标
          allStationInfo: null,//场站坐标
          projectInfo: null,//项目坐标
          allPointInfo:this.allPointInfo,//所有点位信息
        }
      }).catch(err=>{
        console.log('单个项目信获取异常：'+err)
      })
    },
    push() {
      this.$router.push({path: "/dataQuery/windTowerStatusInfo"})
    },
    pushProjectEvolve() {
      this.$router.push({path: "/homepage/projectEvolve"})
    },
    pushInfo() {
      let project = {projectId:this.project.id,equipmentNo:null}
      sessionStorage.setItem("emailWindTowerInfo", JSON.stringify(project))
      this.$store.dispatch('equipmentInfo/emailWindTowerInfo', JSON.stringify(project))
      this.$router.push({path: "/homepage/emailResourcesInfo"})
    },
    back() {
      this.$router.push({path: "/homepage/preProjectResources"})
    },
    pushPreProjectResource() {
      this.$router.push({path: "/homepage/preProjectResources"})
    },
    clickBtu(id) {
      this.mapValue ={
        params: new Date(),
        level: 12,//地图层级
        center: this.coordinates,//中心坐标
        allStationInfo: null,//场站坐标
        projectInfo: null,//项目坐标
        allPointInfo:this.allPointInfo,//所有点位信息
      }
      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>
.projectInfoPage {
  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: 20%;
  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: 100000;
}

.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%;
}


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


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

.branckTitleBg {
  display: flex;
  align-items: center;
  margin-top: 4%;
}

.mainContent {
  margin-left: 6%;
}

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


</style>