|
@@ -0,0 +1,551 @@
|
|
|
+<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">返回 </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.name"
|
|
|
+ :value="item.id">
|
|
|
+ </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="hexagonContent">
|
|
|
+ <div class="contentBox">
|
|
|
+ <span class="numberBox">{{ stationInfo.wd }}</span>
|
|
|
+ <span class="textBox">主风向</span>
|
|
|
+ </div>
|
|
|
+ <div class="contentBox">
|
|
|
+ <span class="numberBox">{{ stationInfo.hour }}<span style="font-size: 14px">h</span></span>
|
|
|
+ <span class="textBox">等效利用小数</span>
|
|
|
+ </div>
|
|
|
+ <div class="contentBox">
|
|
|
+ <span class="numberBox">{{ stationInfo.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="rightTiltleTextBg">
|
|
|
+ <div class="tiltle">
|
|
|
+ <span class="mainTitle">风速与风向</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 内容 -->
|
|
|
+ <div>
|
|
|
+ <ws-and-wd/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mainBg main-top-right">
|
|
|
+ <!-- 标题-->
|
|
|
+ <div class="rightTiltleTextBg">
|
|
|
+ <div class="tiltle">
|
|
|
+ <span class="mainTitle">温度与压强</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 内容 -->
|
|
|
+ <div>
|
|
|
+ <humidity-and-pressure/>
|
|
|
+ </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>
|
|
|
+ <radiation/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mainBg main-bottom-right">
|
|
|
+ <!-- 标题-->
|
|
|
+ <div class="rightTiltleTextBg">
|
|
|
+ <div class="tiltle">
|
|
|
+ <span class="mainTitle">环境与光伏板温度</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 内容 -->
|
|
|
+ <div>
|
|
|
+ <temperature/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bottomPushBtu" @click="pushStationResource()">
|
|
|
+ <span>在运风光场站资源管理</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import wsAndWd from '../pvComponents/wsAndWdChart'
|
|
|
+import humidityAndPressure from '../pvComponents/humidityAndPressure'
|
|
|
+import radiation from '../pvComponents/radiation'
|
|
|
+import temperature from '../pvComponents/temperature'
|
|
|
+import {stationSelect,gStationSelect} from "../../../api/biz/dataQuery/largeScreenPage";
|
|
|
+export default {
|
|
|
+ name: "realPvResourcesInfo",
|
|
|
+ components: {wsAndWd,humidityAndPressure,radiation,temperature},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ time: '',
|
|
|
+ realPvWindTowerInfo: {},
|
|
|
+ stationId: '',
|
|
|
+ stationOption: [],//项目列表
|
|
|
+ cftNo: '',
|
|
|
+ towerOption: [],//塔列表
|
|
|
+ stationInfo:{},
|
|
|
+ }
|
|
|
+ },
|
|
|
+ destroyed() {
|
|
|
+ clearInterval(this.timer)
|
|
|
+ this.timer = null
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.realPvWindTowerInfo = JSON.parse(this.$store.getters.realPvWindTowerInfo)
|
|
|
+ // this.formatTime()
|
|
|
+ this.getStationSelect()
|
|
|
+ // this.timer = setInterval(this.formatTime, 1000 * 60)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getStationSelect() {
|
|
|
+ gStationSelect().then(res => {
|
|
|
+ this.stationOption = res.data
|
|
|
+ if (this.realPvWindTowerInfo !== undefined) {
|
|
|
+ this.stationId = this.realPvWindTowerInfo.stationId
|
|
|
+ let station = this.stationOption.find(w => w.value === this.stationId)
|
|
|
+ this.towerOption = station.weatherStationInfo
|
|
|
+ if (this.realPvWindTowerInfo.equipmentNo !== null && this.realPvWindTowerInfo.equipmentNo !== undefined) {
|
|
|
+ this.cftNo = this.realPvWindTowerInfo.equipmentNo
|
|
|
+ } else {
|
|
|
+ this.cftNo = this.towerOption === null?'':this.towerOption[0].id
|
|
|
+ this.stationInfo = {
|
|
|
+ longitude:this.towerOption[0].longitude,
|
|
|
+ latitude:this.towerOption[0].latitude
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.stationId = this.stationOption[0].value
|
|
|
+ this.towerOption = this.stationOption[0].weatherStationInfo
|
|
|
+ this.cftNo = this.towerOption === null?'':this.towerOption[0].id
|
|
|
+ this.stationInfo = {
|
|
|
+ longitude:this.towerOption[0].longitude,
|
|
|
+ latitude:this.towerOption[0].latitude
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ console.log('获取场站列表失败:' + err)
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 改变场站下拉框
|
|
|
+ changeStation() {
|
|
|
+ let station = this.stationOption.find(w => w.value === this.stationId)
|
|
|
+ this.towerOption = station.weatherStationInfo
|
|
|
+ this.cftNo = this.towerOption === null?'':this.towerOption[0].id
|
|
|
+ this.stationInfo = {
|
|
|
+ longitude:this.towerOption[0].longitude,
|
|
|
+ latitude:this.towerOption[0].latitude
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 改变塔信息下拉框
|
|
|
+ changeTower() {
|
|
|
+ let towerInfo = this.towerOption.find(w => w.id === this.cftNo)
|
|
|
+ this.cftInfo = {equipmentNo: this.cftNo, wdHeights: towerInfo.wdHeight}
|
|
|
+ },
|
|
|
+ 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;
|
|
|
+}
|
|
|
+
|
|
|
+.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 {
|
|
|
+ width: 25%;
|
|
|
+}
|
|
|
+.main-top-center,.main-top-right{
|
|
|
+ width: 35%;
|
|
|
+}
|
|
|
+.main-bottom-left,.main-bottom-right {
|
|
|
+ width: 48.5%;
|
|
|
+}
|
|
|
+
|
|
|
+.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: 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%;
|
|
|
+}
|
|
|
+
|
|
|
+.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>
|