nerpemde/nerpemde-ui/src/views/largeScreenPage/Subpage/provincialEnergyStations.vue

<template>
  <div class="ppage">
    <div class="page provincialEnergyStationsPage">
      <div class="timeBox">{{ time }}</div>
      <div class="kaiguanBox"><img src="../../../../public/largeScreenImg/kaiguan.png" style="width: 30px;height: 30px"/></div>
      <div class="topTiltle">
        <span class="title">全省新能源场站概况</span>
      </div>
      <div class="btuGroup">
        <div class="topBtu topRightBtu" @click="pushPreProject()">
          <span class="btuText">前期项目</span>
        </div>
        <div class="topBtu topRightBtu" @click="pushStationResource()">
          <span class="btuText">在运场站</span>
        </div>
        <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>
            <div class="rightTopContent">
              <div class="contentBox">
                <span class="numberBox">{{ provinceInfo.fnum }}</span>
                <span class="textBox">风电场个数</span>
              </div>
              <div class="contentBox">
                <span class="numberBox">{{ provinceInfo.fhours }}</span>
                <span class="textBox">等效小时数</span>
              </div>
              <div class="contentBox">
                <span class="numberBox">{{ provinceInfo.gnum }}</span>
                <span class="textBox">光伏站个数</span>
              </div>
              <div class="contentBox">
                <span class="numberBox">{{ provinceInfo.ghours }}</span>
                <span class="textBox">等效小时数</span>
              </div>
            </div>
          </div>
          <div class="rightBg bottomBox">
            <div class="rightTiltleTextBg">
              <div class="rightMainTitle">
                <span class="mainTitle">某集团新能源信息</span>
              </div>
            </div>

            <div class="rightTopContent">
              <div class="contentBox">
                <span class="numberBox">{{ hdInfo.fnum }}</span>
                <span class="textBox">风电场个数</span>
              </div>
              <div class="contentBox">
                <span class="numberBox">{{ hdInfo.fhours }}</span>
                <span class="textBox">{{ hdInfo.fename }}</span>
              </div>
              <div class="contentBox">
                <span class="numberBox">{{ hdInfo.gnum }}</span>
                <span class="textBox">光伏站个数</span>
              </div>
              <div class="contentBox">
                <span class="numberBox">{{ hdInfo.ghours }}</span>
                <span class="textBox">{{ hdInfo.gename }}</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 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 v-if="mapMark === 'mapBtu'">
<!--          <zai-xian-bige-map ref="childMethod" :mapValue="mapValue"/>-->
        </div>

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

<script>
import {getStationSeat, hauFuInfo} from "@/api/biz/dataQuery/largeScreenPage";
import defaultData from "../../../utils/tpMockData/data";
import bigeMap from "@/views/largeScreenPage/components/bigeMap";
import bigeHeatMap from "@/views/largeScreenPage/components/bigeHeatMap";
import bigeHeatSunMap from "@/views/largeScreenPage/components/bigeHeatSunMap";
import zaiXianBigeMap from "@/views/largeScreenPage/components/zaiXianBigeMap";
export default {
  name: "provincialEnergyStations",
  components: {
    bigeMap,bigeHeatMap,bigeHeatSunMap,zaiXianBigeMap
  },
  data() {
    return {
      timer: null,
      time: '',
      mapMark:'mapBtuOne',
      provinceInfo: {//全省信息
        fnum:'100',
        fhours:'2496h',
        gnum:'41',
        ghours:'1620h'
      },
      hdInfo: { //华电信息
        fnum:'10',
        fename:'某风电场',//风场站名称
        fhours:'3256h',
        gnum:'4',
        gename:'某光伏场站',//光伏站名称
        ghours:'1636h'
      },
      //地图传值
      mapValue: {
        level: null,//地图层级
        center: [],//中心坐标
        allStationInfo: null,//场站坐标
      },
      allStationSeat:[],//场站位置
    }
  },
  destroyed() {
    clearInterval(this.timer)
    this.timer = null
  },
  mounted() {
    this.formatTime()
    this.getInfo()
    this.timer = setInterval(this.formatTime, 1000 * 60)
  },
  methods: {
    getInfo() {
      this.allStationSeat = defaultData.allStationSeat
      this.mapValue = {
        params:new Date(),
        level: null,//地图层级
        center: [],//中心坐标
        allStationInfo: this.allStationSeat,//场站坐标
      }
      // getStationSeat().then(res=>{
      //   // console.log(res.data)
      //   this.allStationSeat = res.data
      //   this.mapValue = {
      //     params:new Date(),
      //     level: null,//地图层级
      //     center: [],//中心坐标
      //     allStationInfo: res.data,//场站坐标
      //   }
      // }).catch(err=>{
      //   console.log('所有场站位置查询异常' + err)
      // })
      // hauFuInfo().then(res => {
      //   this.provinceInfo = res.data.provinceInfo
      //   this.hdInfo = res.data.hdInfo
      // }).catch(err => {
      //   console.log('华富总体信息查询异常' + err)
      // })
    },
    push() {
      this.$router.push({path: "/dataQuery/windTowerStatusInfo"})
    },
    back() {
      this.$router.push({path: "/"})
    },
    pushPreProject() {
      this.$router.push({path: "/homepage/preProjectResources"})
    },
    pushStationResource() {
      this.$router.push({path: "/homepage/stationResources"})
    },
    pushZaiXian(){
      if(this.mapMark === 'mapBtuOne'){
        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: this.allStationSeat,//场站坐标
        }
        this.mapMark = 'mapBtu'
      }
    },
    clickBtu(id) {
      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: this.allStationSeat,//场站坐标
      }
      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>
.ppage {
  width: 100%;
  height: calc(100vh);
  background: url(../../../assets/largeScreenImg/backBg.png) no-repeat;
  background-size: 100% 100%;
}

.provincialEnergyStationsPage {
  width: 100%;
  height: calc(100vh);
  /*background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/ps6g1swu667otdfgvidaizwk7p5p4on7b9azu9yxgzdr9vygb97c721c8b-8de6-4c17-9b4d-952d26ecb72e) -202px -3px 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: .3%;
  color: white;
  width: 30%;
  height: 5.5%;
  display: flex;
  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: 40%;
}

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

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

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

.bottomBox {
  margin-top: 2%;
}

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

.rightTiltleTextBg {
  height: 32px;
  background: url(../../../assets/largeScreenImg/index/rightTiltleTextBg.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%;
}

.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%;
}
.kaiguanBox{
  cursor: pointer;
  position: absolute;
  left: 22%;
  top: .5%;
}
</style>