wrdep/wrdep-ui/src/views/largeScreenPage/Subpage/emailResourcesInfo.vue

<template>
  <div class="page emailResourcesInfoPage">
    <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="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="projectId" placeholder="请选择" size="small"
                               :popper-append-to-body="false"
                               @change="changeProject"
                               style="width: 100%">
                      <el-option
                        v-for="(item,index) in projectOption"
                        :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>经度：{{ projectInfo.longitude }}</span><span
                    style="margin-left: 3%">纬度：{{ projectInfo.latitude }}</span></div>
                  <div>数据起止时间：{{ projectInfo.time }}</div>
                  <div>理论发电机型：{{ projectInfo.model }}</div>
                </div>

              </div>

              <div class="hexagonContent">
                <div class="contentBox">
                  <span class="numberBox">{{ projectInfo.wd }}</span>
                  <span class="textBox">主风向</span>
                </div>
                <div class="contentBox">
                  <span class="numberBox">{{ projectInfo.hour }}<span style="font-size: 14px">h</span></span>
                  <span class="textBox">等效利用小时数</span>
                </div>
                <div class="contentBox">
                  <span class="numberBox">{{ projectInfo.power }}</span>
                  <span class="textBox">发电量</span>
                  <span class="numberBox" style="font-size: 14px">MWh</span>
                </div>
              </div>
            </div>
          </div>
          <div class="mainBg main-top-center">
            <!--  标题-->
            <div class="centerTiltleTextBg">
              <div class="centerTitle tiltle">
                <span class="mainTitle">平均风速对比</span>
              </div>
            </div>
            <!-- 内容  -->
            <div>
              <ws-charts :cftInfo="cftInfo"/>
            </div>
          </div>
          <div class="mainBg main-top-right">
            <!--  标题-->
            <div class="rightTiltleTextBg">
              <div class="tiltle">
                <span class="mainTitle">风功率密度</span>
              </div>
            </div>
            <!-- 内容  -->
            <div>
              <ws-and-w-power-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="pushPreProjectResource()">-->
<!--      <span>前期项目资源信息</span>-->
<!--    </div>-->
  </div>
</template>

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

export default {
  name: "emailResourcesInfo",
  components: {WsCharts, wdCharts, wdPowerCharts, wsAndWPowerCharts},
  data() {
    return {
      timer: null,
      time: '',
      emailWindTowerInfo: {},
      // cftInfo:{equipmentNo:'006171',wdHeights:'120,80,10'},
      cftInfo: {},
      height: '140',
      wdHeight: '',
      projectId: '1',
      projectOption: [],//项目列表
      cftNo: '006171',
      towerOption: [],//塔列表
      projectInfo: {
        time: '2021-07-18 — 2022-12-27',
        latitude: '43.34',
        longitude: '132.61',
        model: 'WH6.25N-182',
        wd: 'SSW',
        hour: '3096',
        power: '619208'
      },
      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.emailWindTowerInfo = JSON.parse(this.$store.getters.emailWindTowerInfo)
    this.formatTime()
    this.getProjectSelect()
    this.timer = setInterval(this.formatTime, 1000 * 60)
  },
  methods: {
    // 获取项目信息
    getProjectSelect() {
      projectSelect().then(res => {
        this.projectOption = res.data
          this.projectId = this.projectOption[0].value
          this.towerOption = this.projectOption[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() {
      selectTForAir({equipmentId: this.cftNo, month: ''}).then(res => {
        // console.log(res.data)
        let data = res.data
        this.height = res.data.height
        this.projectInfo = {
          time: data.dataTime,
          model: 'WH6.25N-182',
          latitude: data.latitude,
          longitude: data.longitude,
          wd: data.wdSum,
          hour: data.hour,
          power: data.battery
        }
        this.environmentInfo = {
          airDensity: data.air,
          t: data.t,
          pa: data.pa,
          turbulent: data.turbulence,
          windShear: data.windShear
        }
      }).catch(err => {
        console.log('获取测风塔基本信息：' + err)
      })
    },

    // 改变项目下拉框
    changeProject() {
      let project = this.projectOption.find(w => w.value === this.projectId)
      this.towerOption = project.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/projectInfo"})
    },
    pushPreProjectResource() {
      this.$router.push({path: "/homepage/preProjectResources"})
    },

    /*时间格式化*/
    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;
}

.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-top-right, .main-bottom-right {
  width: 25%;
}

.main-top-center, .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%;
}

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

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