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

<template>
  <div class="page emailResourcesInfoPage">
    <div class="timeBox">{{ time }}</div>
    <div class="topTiltle">
<!--      <span class="title">在  运  资  源  信  息</span>-->
      <img
        class="titleImg"
        referrerpolicy="no-referrer"
        src="../../../assets/largeScreenImg/textImg/realResourcesInfoPage.png"
      />
    </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="main-content">
        <!--  主体上半部分      -->
        <div class="main-top">
          <div class="mainBg main-top-left">
            <!--  标题-->
            <div class="leftTiltleTextBg">
              <div class="tiltle" style="margin-left: 2%;top: -53%;">
                <div class="rSelect">
                  <div class="projectSelect">
                    <el-select class="choiceSelect" v-model="stationId" placeholder="请选择" size="small"
                               :popper-append-to-body="false"
                               @change="changeStation"
                               style="width: 100%">
                      <el-option
                        v-for="(item,index) in stationOption"
                        :key="index"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </div>
                  <div class="towerSelect">
                    <el-select class="choiceSelect" v-model="cftNo" placeholder="请选择" size="small"
                               :popper-append-to-body="false"
                               @change="changeTower"
                               style="width: 100%">
                      <el-option
                        v-for="(item,index) in towerOption"
                        :key="index"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </div>
                </div>

              </div>
            </div>
            <!-- 内容  -->
            <div class="infoContent">
              <div class="textInfo">
                <span class="textInfoTitle">测风塔基础信息</span>
                <div class="textInfoContent">
                  <div><span>经度：{{ stationInfo.longitude }}</span><span
                    style="margin-left: 3%">纬度：{{ stationInfo.latitude }}</span></div>
                </div>
              </div>
              <div class="textInfo" style="margin-top: 1%">
                <span class="textInfoTitle">场站发电信息</span>
                <div class="textInfoContent">
                  <div><span>主风向：{{ stationInfo.wd }}</span></div>
                  <div><span>平均风速：{{ stationInfo.wsAve }} m/s</span></div>
                  <div><span>等效利用小数：{{ stationInfo.hour }} h</span></div>
                </div>
              </div>
              <div class="hexagonContent">
                <div class="contentBox" style="margin-top: .5%">
                  <span class="numberBox">{{ stationInfo.batteryDay }}</span>
                  <span class="textBox">昨日发电量</span>
                  <span class="numberBox" style="font-size: 14px">MWh</span>

                </div>
                <div class="contentBox" style="margin-top: .5%">
                  <span class="numberBox">{{ stationInfo.batteryMonth }}</span>
                  <span class="textBox">月发电量</span>
                  <span class="numberBox" style="font-size: 14px">MWh</span>
                </div>

                <div class="contentBox" style="margin-top: .5%">
                  <span class="numberBox">{{ stationInfo.power }}</span>
                  <span class="textBox">年发电量</span>
                  <span class="numberBox" style="font-size: 14px">MWh</span>
                </div>
                <!--                <div class="contentBox">-->
                <!--                  <span class="numberBox">{{ stationInfo.hour }}<span style="font-size: 14px">h</span></span>-->
                <!--                  <span class="textBox">等效利用小数</span>-->
                <!--                </div>-->
              </div>
            </div>
          </div>
          <div class="mainBg main-top-center">
            <!--  标题-->
            <div class="topCenterTiltleTextBg">
              <div class="topCenterTitle tiltle">
                <span class="mainTitle">平均风速对比</span>
              </div>
            </div>
            <!-- 内容  -->
            <div>
              <ws-charts :cftInfo="cftInfo"/>
            </div>
          </div>
        </div>
        <!-- 主体下半部分       -->
        <div class="main-bottom">
          <div class="mainBg main-bottom-left">
            <!--  标题-->
            <div class="rightTiltleTextBg">
              <div class="tiltle">
                <span class="mainTitle">环境数据</span>
              </div>
            </div>
            <!-- 内容  -->
            <div class="infoContent">
              <div class="hexagonContent">
                <div class="contentBox">
                  <span class="numberBox">{{ environmentInfo.airDensity }}</span>
                  <span class="textBox">空气密度</span>
                </div>
                <div class="contentBox">
                  <span class="numberBox">{{ environmentInfo.t }}</span>
                  <span class="textBox">温度(℃)</span>
                </div>
                <div class="contentBox">
                  <span class="numberBox">{{ environmentInfo.pa }}</span>
                  <span class="textBox">压强(hPa)</span>
                </div>
              </div>
              <div class="infoContentBottom">
                <div style="display: flex;">
                  <div style="width: 55%">
                    <img
                      class="tiltleLeftSign"
                      referrerpolicy="no-referrer"
                      src="../../../assets/largeScreenImg/index/tiltleLeftSign.png"
                    />
                    {{ height }}m 湍流
                  </div>
                  <div>
                    <img
                      class="tiltleLeftSign"
                      referrerpolicy="no-referrer"
                      src="../../../assets/largeScreenImg/index/tiltleLeftSign.png"
                    />
                    综合风切变
                  </div>
                </div>
                <div class="windDataBox">
                  <div class="windDataBg">

                    <img
                      class="windSign"
                      referrerpolicy="no-referrer"
                      src="../../../assets/largeScreenImg/resourcesInfo/windSign.png"
                    />
                    <div class="dataBox">
                      <span class="dataContent">{{ environmentInfo.turbulent }}</span>
                      <span>湍流</span>
                    </div>

                  </div>
                  <div class="windDataBg">
                    <img
                      class="windSign"
                      referrerpolicy="no-referrer"
                      src="../../../assets/largeScreenImg/resourcesInfo/windSign.png"
                    />
                    <div class="dataBox">
                      <span class="dataContent">{{ environmentInfo.windShear }}</span>
                      <span>风切变</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="mainBg main-bottom-center">
            <!--  标题-->
            <div class="centerTiltleTextBg">
              <div class="centerTitle tiltle">
                <span class="mainTitle">风向玫瑰图</span>
              </div>
            </div>
            <!-- 内容  -->
            <div>
              <wd-charts :cftInfo="cftInfo"/>
            </div>
          </div>
          <div class="mainBg main-bottom-right">
            <!--  标题-->
            <div class="rightTiltleTextBg">
              <div class="tiltle">
                <span class="mainTitle">风能玫瑰图</span>
              </div>
            </div>
            <!-- 内容  -->
            <div>
              <wd-power-charts :cftInfo="cftInfo"/>
            </div>
          </div>
        </div>

      </div>
    </div>
    <div class="bottomPushBtu" @click="pushStationResource()">
      <span>在运风光场站资源管理</span>
    </div>
  </div>
</template>

<script>
import {selectStationTForAir} from "@/api/biz/dataQuery/homePage";
import {stationSelect} from "@/api/biz/dataQuery/largeScreenPage";
import wdCharts from '../components/wdCharts'
import wdPowerCharts from '../components/wdPowerCharts'
import WsCharts from "@/views/largeScreenPage/components/wsCharts";

export default {
  name: "realResourcesInfo",
  components: {WsCharts, wdCharts, wdPowerCharts},
  data() {
    return {
      timer: null,
      time: '',
      realWindTowerInfo: {},
      cftInfo: {equipmentNo: '006171', wdHeights: '120,80,10'},
      height: '140',
      wdHeight: '',
      stationId: '1',
      stationOption: [{id: '1', stationName: '穆棱风电场'}],//项目列表
      cftNo: '8009',
      towerOption: [{value: '8009', label: '穆棱8009'}],//塔列表
      stationInfo: {
        latitude: '46.24',
        longitude: '129.8',
        wd: 'SSW',
        hour: '2.98',
        power: '229.9'
      },
      environmentInfo: {
        airDensity: '1.27',
        t: '21.56',
        pa: '1003.25',
        turbulent: '0.09',
        windShear: '0.42'
      }
    }
  },
  destroyed() {
    clearInterval(this.timer)
    this.timer = null
  },
  mounted() {
    this.realWindTowerInfo = JSON.parse(this.$store.getters.realWindTowerInfo)
    this.formatTime()
    this.getStationSelect()
    this.timer = setInterval(this.formatTime, 1000 * 60)
  },
  methods: {
    getStationSelect() {
      stationSelect().then(res => {
        console.log(res.data)
        this.stationOption = res.data
        if (this.realWindTowerInfo !== undefined) {
          this.stationId = this.realWindTowerInfo.stationId
          let station = this.stationOption.find(w => w.value === this.stationId)
          this.towerOption = station.equipmentDto
          if (this.realWindTowerInfo.equipmentNo !== null && this.realWindTowerInfo.equipmentNo !== undefined) {
            this.cftNo = this.realWindTowerInfo.equipmentNo
            let towerInfo = this.towerOption.find(w => w.value === this.cftNo)
            this.wdHeight = towerInfo.wdHeight
          } else {
            this.cftNo = this.towerOption[0].value
            this.wdHeight = this.towerOption[0].wdHeight
          }
        } else {
          this.stationId = this.stationOption[0].value
          this.towerOption = this.stationOption[0].equipmentDto
          this.cftNo = this.towerOption[0].value
          this.wdHeight = this.towerOption[0].wdHeight
        }
        this.cftInfo = {equipmentNo: this.cftNo, wdHeights: this.wdHeight}
        this.getTowerInfo()
      }).catch(err => {
        console.log('获取场站列表失败：' + err)
      })
    },
    getTowerInfo() {
      selectStationTForAir({stationId: this.stationId, equipmentId: this.cftNo, month: ''}).then(res => {
        // console.log(res.data)
        let data = res.data
        this.stationInfo = {
          latitude: data.latitude,
          longitude: data.longitude,
          wd: data.wdSum,
          hour: data.hour,
          power: data.battery.replace(/\.?0+$/, ""),// 去掉尾部的0
          wsAve: data.wsAve.replace(/\.?0+$/, ""),
          batteryDay: data.batteryDay.replace(/\.?0+$/, ""),
          batteryMonth: data.batteryMonth.replace(/\.?0+$/, "")
        }
        this.environmentInfo = {
          airDensity: data.air,
          t: data.t,
          pa: data.pa,
          turbulent: data.turbulence,
          windShear: data.windShear
        }
      }).catch(err => {
        console.log('获取测风塔基本信息：' + err)
      })
    },

    // 改变场站下拉框
    changeStation() {
      let station = this.stationOption.find(w => w.value === this.stationId)
      this.towerOption = station.equipmentDto
      this.cftNo = this.towerOption[0].value
      this.wdHeight = this.towerOption[0].wdHeight
      this.cftInfo = {equipmentNo: this.cftNo, wdHeights: this.wdHeight}
      this.getTowerInfo()
    },
    // 改变塔信息下拉框
    changeTower() {
      let towerInfo = this.towerOption.find(w => w.value === this.cftNo)
      this.cftInfo = {equipmentNo: this.cftNo, wdHeights: towerInfo.wdHeight}
      this.getTowerInfo()
    },
    push() {
      this.$router.push({path: "/dataQuery/windTowerStatusInfo"})
    },
    back() {
      this.$router.push({path: "/homepage/stationInfo"})
    },
    pushStationResource() {
      this.$router.push({path: "/homepage/stationResources"})
    },

    /*时间格式化*/
    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>
.emailResourcesInfoPage {
  width: 100%;
  height: calc(100vh);
  /*background: url(../../../assets/largeScreenImg/backBg.png) no-repeat;*/
  /*background-size: 100% 100%;*/
  background: #030F1A;
  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;
}
.titleImg {
  width: 11%;
  height: 60%;
  margin-top: .5%;
}
.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%;
}

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

.main-content {
  width: 100%;
  height: calc(91vh);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.main-top, .main-bottom {
  height: 46%;
  display: flex;
  justify-content: space-evenly;
}

.main-top-left, .main-bottom-left {
  width: 25%;
}

.main-bottom-right {
  width: 25%;
}

.main-top-center {
  width: 71.5%
}

.main-bottom-center {
  width: 45%;
}

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

.leftTiltleTextBg {
  margin-top: 7px;
  height: 25px;
  background: url(../../../assets/largeScreenImg/resourcesInfo/leftTitleBg.png) 100% no-repeat;
  background-size: 100% 100%;
}

.centerTiltleTextBg {
  height: 32px;
  background: url(../../../assets/largeScreenImg/resourcesInfo/centerTitleBg.png) 100% no-repeat;
  background-size: 100% 100%;
}

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

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

.rSelect {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.projectSelect {
  height: 34px;
  width: 200px;
  background: url(../../../assets/largeScreenImg/resourcesInfo/projectBg.png) 100% no-repeat;
  background-size: 100% 100%;
}

.towerSelect {
  height: 30px;
  width: 200px;
  background: url(../../../assets/largeScreenImg/resourcesInfo/towerBg.png) 100% no-repeat;
  background-size: 100% 100%;
}

.rSelect /deep/ .el-input--small .el-input__inner {
  background: transparent;
  border: 0;
  color: white;
  font-size: 16px;
}

.projectSelect /deep/ .el-input--small .el-input__inner {
  margin-left: 5%;
  margin-top: 1%;
}

.rSelect /deep/ .el-select .el-input .el-select__caret {
  color: #ffffff;
}

.centerTitle {
  margin-left: 5%;
}

.topCenterTitle {
  margin-left: 2.5%;
}

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

.infoContentBottom {
  margin-top: 2%;
}

.textInfo {
  color: #00FFDE;
  line-height: 30px;
  font-size: 18px;
  margin-top: 3%;
}

.textInfoTitle {
  color: white;
  padding: 1% 1% 1% 3%;
  background: url(../../../assets/largeScreenImg/resourcesInfo/titleBg.png) 100% no-repeat;
  background-size: 100% 100%;
}

.textInfoContent {
  margin-left: 3%;
}

.contentBox {
  margin-top: 5%;
  width: 30%;
  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;
}

.tiltleLeftSign {
  width: 10px;
  height: 15px;
}

.windDataBox {
  display: flex;
  justify-content: space-between;
  margin-top: 2%;
}

.windDataBg {
  height: 130px;
  width: 45%;
  background: url(../../../assets/largeScreenImg/resourcesInfo/envirBg.png) 100% no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.windSign {
  width: 79px;
  height: 72px;
}

.dataBox {
  width: 45%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.dataContent {
  font-size: 28px;
  font-family: timeFont !important;
  background: linear-gradient(0deg, #9CF472 0%, #FFFFFF 99.12109375%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

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