在运场站页面

neim-biz/src/main/java/com/jiayue/biz/service/impl/HomePageServiceImpl.java

@@ -1064,12 +1064,18 @@ public class HomePageServiceImpl extends ServiceImpl<WindTowerDataParentTableMap
                 map.put("modelTotal", size);
                 //平均风速
                 map.put("wsAve", fanModelData.getWsAve());
+                map.put("wsMax", fanModelData.getWsMax());
+                map.put("wsMin", fanModelData.getWsMin());
                 //主风向
                 map.put("wdSum", fanModelData.getWdSum());
                 //发电量
                 map.put("generatingCapacity", fanModelData.getGeneratingCapacity());
+                map.put("generatingCapacityr", fanModelData.getGeneratingCapacityr());
+                map.put("generatingCapacityy", fanModelData.getGeneratingCapacityy());
                 //等效小时数
                 map.put("realTimeTotal", size == 0 ? 0 : fanModelData.getRealTimeTotal());
+                map.put("realTimeTotalr", size == 0 ? 0 : fanModelData.getRealTimeTotalr());
+                map.put("realTimeTotaly", size == 0 ? 0 : fanModelData.getRealTimeTotaly());
                 arrayList.add(map);
 
             }

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

@@ -1,7 +1,8 @@
 <template>
   <div class="page stationInfoPage">
     <div class="timeBox">{{ time }}</div>
-    <div class="kaiguanBox"><img src="../../../../public/largeScreenImg/kaiguan.png" style="width: 30px;height: 30px" @click="pushZaiXian()"/></div>
+    <div class="kaiguanBox"><img src="../../../../public/largeScreenImg/kaiguan.png" style="width: 30px;height: 30px"
+                                 @click="pushZaiXian()"/></div>
     <div class="topTiltle">
       <span class="title">在运风光场站信息</span>
     </div>
@@ -17,52 +18,106 @@
       <div class="rightTextBg">
         <div class="rightBg topBox">
           <div class="rightTiltleTextBg">
-            <div class="rightMainTitle">
+            <div class="rightMainTitle" style="display: flex;justify-content: space-between;width: 100%">
+
               <span class="mainTitle" @click="pushInfo()">{{ station.stationName }}</span>
+              <div style="display: flex;margin-right: 8%;color: #f9ff00;">
+                <span v-if="station.type === '风'">主风向：</span>
+                <span v-else>天气：</span>{{ wdSum }}
+              </div>
+
             </div>
           </div>
+
           <div class="rightTopContent" v-for="item in dataInfo">
             <div class="branckTitleBg">
-<!--              <span class="fjName">{{item.category}}<span class="number">{{item.fjNum}}</span>台</span>-->
-              <span class="fjModel">{{item.modelType}}<span class="number" style="margin-left: 4%">{{item.modelTotal}}</span>台</span>
-
+              <span class="fjModel">{{ item.modelType }}
+                <span class="number" style="margin-left: 4%">{{ item.modelTotal }}</span>台</span>
             </div>
-            <div class="mainContent">
-              <div class="contentBox" v-if="station.type === '风'">
+            <div class="mainContent" v-if="station.type === '风'">
+              <div class="contentBox">
                 <span class="numberBox">{{ item.wsAve.replace(/\.?0+$/, "") }}</span>
-                <span class="textBox">平均风速<span class="numberBox" style="font-size: 14px">(m/s)</span></span>
+                <span class="textBox">平均风速<div class="numberBox" style="font-size: 14px">(m/s)</div></span>
               </div>
               <div class="contentBox">
-                <span class="numberBox">{{item.generatingCapacity.replace(/\.?0+$/, "")}}</span>
-                <span class="textBox">发电量<span class="numberBox" style="font-size: 14px">(MWh)</span></span>
-
+                <span class="numberBox">{{ item.wsMax.replace(/\.?0+$/, "") }}</span>
+                <span class="textBox">最大风速<div class="numberBox" style="font-size: 14px">(m/s)</div></span>
               </div>
-              <div class="contentBox" v-if="station.type === '风'">
-                <span class="numberBox">{{ item.wdSum }}</span>
-                <span class="textBox">主风向</span>
+              <div class="contentBox">
+                <span class="numberBox">{{ item.wsMin }}</span>
+                <span class="textBox">最小风速<div class="numberBox" style="font-size: 14px">(m/s)</div></span>
               </div>
+            </div>
+            <div class="mainContent" v-else>
               <div class="contentBox">
-                <span class="numberBox">{{ item.realTimeTotal.replace(/\.?0+$/, "") }}</span>
-                <span class="textBox">等效小时数<span class="numberBox" style="font-size: 14px">(h)</span></span>
+                <span class="numberBox">{{ item.wsAve.replace(/\.?0+$/, "") }}</span>
+                <span class="textBox">平均日照<div class="numberBox" style="font-size: 14px">(W/m²)</div></span>
+              </div>
+              <div class="contentBox">
+                <span class="numberBox">{{ item.wsMax.replace(/\.?0+$/, "") }}</span>
+                <span class="textBox">最大日照<div class="numberBox" style="font-size: 14px">(W/m²)</div></span>
+              </div>
+              <div class="contentBox">
+                <span class="numberBox">{{ item.wsMin }}</span>
+                <span class="textBox">最小日照<div class="numberBox" style="font-size: 14px">(W/m²)</div></span>
+              </div>
+            </div>
+            <div style="display: flex;flex-wrap: wrap;justify-content: space-around;">
+              <div class="tabelTextbg">
+                <div style="width: 100%;text-align: center;margin-bottom: 1%">发电量 (MWh)</div>
+                <div class="split-line"></div>
+                <!--              <el-divider></el-divider>-->
+                <div class="tabelText" style="padding-top: 2%;">
+                  <div>日累计:</div>
+                  <div>{{ item.generatingCapacityr.replace(/\.?0+$/, "") }}</div>
+                </div>
+                <div class="tabelText">
+                  <div>月累计:</div>
+                  <div>{{ item.generatingCapacityy.replace(/\.?0+$/, "") }}</div>
+                </div>
+                <div class="tabelText">
+                  <div>年累计:</div>
+                  <div>{{ item.generatingCapacity.replace(/\.?0+$/, "") }}</div>
+                </div>
+              </div>
+              <div class="tabelTextbg">
+                <div style="width: 100%;text-align: center;margin-bottom: 1%">等效小时数 (h)</div>
+                <div class="split-line"></div>
+                <!--              <el-divider></el-divider>-->
+                <div class="tabelText" style="padding-top: 2%;">
+                  <div>日累计:</div>
+                  <div>{{ item.realTimeTotalr.replace(/\.?0+$/, "") }}</div>
+                </div>
+                <div class="tabelText">
+                  <div>月累计:</div>
+                  <div>{{ item.realTimeTotaly.replace(/\.?0+$/, "") }}</div>
+                </div>
+                <div class="tabelText">
+                  <div>年累计:</div>
+                  <div>{{ item.realTimeTotal.replace(/\.?0+$/, "") }}</div>
+                </div>
               </div>
             </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="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="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>
@@ -110,19 +165,19 @@ import bigeMap3D from "@/views/largeScreenPage/components/3DbigeMap";
 export default {
   name: "stationInfo",
   components: {
-    bigeMap, bigeHeatMap,bigeHeatSunMap,zaiXianBigeMap, bigeMap3D
+    bigeMap, bigeHeatMap, bigeHeatSunMap, zaiXianBigeMap, bigeMap3D
   },
   data() {
     return {
       timer: null,
       time: '',
-      station: {},
-      dataInfo:[
+      station: {stationName: "XXX风电场", type: "风"},
+      dataInfo: [
         // {category:'一期',fjNum:'20',model:'恩德1.3MW机型',avgWs:'4.5',power:'39650',wd:'西南',hour:'1525'},
         // {category:'二期',fjNum:'30',model:'华锐1.5MW机型',avgWs:'4.7',power:'73125',wd:'西',hour:'1625'},
       ],
-      modelT:[],
-      coordinates:[],
+      modelT: [],
+      coordinates: [],
       mapMark: 'mapBtuOne',
       //地图传值
       mapValue: {
@@ -130,10 +185,11 @@ export default {
         center: [],//中心坐标
         allStationInfo: null,//场站坐标
         projectInfo: null,//项目坐标
-        allPointInfo:null,//所有点位信息
+        allPointInfo: null,//所有点位信息
       },
-      allPointInfo:[],
-      dialogVisible:false
+      allPointInfo: [],
+      dialogVisible: false,
+      wdSum: ''
     }
   },
   destroyed() {
@@ -149,56 +205,57 @@ export default {
   },
   methods: {
     /*所有风机、塔、拐点坐标信息*/
-    getPointMap(){
-      if(this.$store.getters.allPointInfo.length>0){
+    getPointMap() {
+      if (this.$store.getters.allPointInfo.length > 0) {
         this.allPointInfo = JSON.parse(this.$store.getters.allPointInfo).info
         this.getInfo()
-      }else {
-        getPointMap().then(res=>{
+      } 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)
+          sessionStorage.setItem("allPointInfo", JSON.stringify({info: this.allPointInfo}))
+          this.$store.dispatch('equipmentInfo/allPointInfo', JSON.stringify({info: this.allPointInfo}))
+        }).catch(err => {
+          console.log('所有点位坐标：' + err)
         })
       }
     },
-    getInfo(){
-      stationInfo({stationId:this.station.id}).then(res=>{
+    getInfo() {
+      stationInfo({stationId: this.station.id}).then(res => {
         // console.log(res.data)
         let data = res.data
         this.dataInfo = data.modelT
-        if(data.latitude === undefined ){
+        this.wdSum = this.dataInfo ? this.dataInfo[0].wdSum : ''
+        if (data.latitude === undefined) {
           this.coordinates = []
-        }else{
-          this.coordinates = [Number(data.latitude),Number(data.longitude)]
+        } else {
+          this.coordinates = [Number(data.latitude), Number(data.longitude)]
         }
 
-        this.mapValue ={
+        this.mapValue = {
           params: new Date(),
           level: 12,//地图层级
           center: this.coordinates,//中心坐标
           allStationInfo: null,//场站坐标
           projectInfo: null,//项目坐标
-          id:this.station.id,
-          allPointInfo:this.allPointInfo,//所有点位信息
+          id: this.station.id,
+          allPointInfo: this.allPointInfo,//所有点位信息
         }
-      }).catch(err=>{
-        this.mapValue ={
+      }).catch(err => {
+        this.mapValue = {
           params: new Date(),
           level: 6,//地图层级
           center: [],//中心坐标
           allStationInfo: null,//场站坐标
           projectInfo: null,//项目坐标
-          id:this.station.id,
-          allPointInfo:null,//所有点位信息
+          id: this.station.id,
+          allPointInfo: null,//所有点位信息
         }
-        if(err.msg === 'Index: 0, Size: 0'){
+        if (err.msg === 'Index: 0, Size: 0') {
           console.log('此场站没有风机与测风塔')
-        }else{
-          console.log('场站信息获取异常：'+err.msg)
+        } else {
+          console.log('场站信息获取异常：' + err.msg)
         }
 
       })
@@ -207,12 +264,12 @@ export default {
       this.$router.push({path: "/dataQuery/windTowerStatusInfo"})
     },
     pushInfo() {
-      let station = {stationId:this.station.id,equipmentNo:null}
-      if(this.station.type === '风'){
+      let station = {stationId: this.station.id, equipmentNo: null}
+      if (this.station.type === '风') {
         sessionStorage.setItem("realWindTowerInfo", JSON.stringify(station))
         this.$store.dispatch('equipmentInfo/realWindTowerInfo', JSON.stringify(station))
         this.$router.push({path: "/homepage/realResourcesInfo"})
-      }else{
+      } else {
         sessionStorage.setItem("realPvWindTowerInfo", JSON.stringify(station))
         this.$store.dispatch('equipmentInfo/realPvWindTowerInfo', JSON.stringify(station))
         this.$router.push({path: "/homepage/realPvResourcesInfo"})
@@ -225,50 +282,50 @@ export default {
     pushStationResource() {
       this.$router.push({path: "/homepage/stationResources"})
     },
-    pushZaiXian(){
-      if(this.mapMark === 'mapBtuOne'){
+    pushZaiXian() {
+      if (this.mapMark === 'mapBtuOne') {
         let center = this.$refs.childMethod.center
         let level = this.$refs.childMethod.level
-        this.mapValue ={
+        this.mapValue = {
           params: new Date(),
-          level: level === ''?null:level,//地图层级
-          center: center.length === 0?[]:[center.lat,center.lng],//中心坐标
+          level: level === '' ? null : level,//地图层级
+          center: center.length === 0 ? [] : [center.lat, center.lng],//中心坐标
           allStationInfo: null,//场站坐标
           projectInfo: null,//项目坐标
-          id:this.station.id,
-          allPointInfo:this.allPointInfo,//所有点位信息
+          id: this.station.id,
+          allPointInfo: this.allPointInfo,//所有点位信息
         }
         this.mapMark = 'mapBtu'
       }
     },
-    dialog3DMap(){
+    dialog3DMap() {
       let center = this.$refs.childMethod.center
       let level = this.$refs.childMethod.level
-      this.mapValue ={
+      this.mapValue = {
         params: new Date(),
-        level: level === ''?null:level,//地图层级
-        center: center.length === 0?[]:[center.lat,center.lng],//中心坐标
+        level: level === '' ? null : level,//地图层级
+        center: center.length === 0 ? [] : [center.lat, center.lng],//中心坐标
         allStationInfo: null,//场站坐标
         projectInfo: null,//项目坐标
-        id:this.station.id,
-        allPointInfo:this.allPointInfo,//所有点位信息
+        id: this.station.id,
+        allPointInfo: this.allPointInfo,//所有点位信息
       }
       this.dialogVisible = true
     },
-    handleClose(){
+    handleClose() {
       this.dialogVisible = false
     },
     clickBtu(id) {
       let center = this.$refs.childMethod.center
       let level = this.$refs.childMethod.level
-      this.mapValue ={
+      this.mapValue = {
         params: new Date(),
-        level: level === ''?null:level,//地图层级
-        center: center.length === 0?[]:[center.lat,center.lng],//中心坐标
+        level: level === '' ? null : level,//地图层级
+        center: center.length === 0 ? [] : [center.lat, center.lng],//中心坐标
         allStationInfo: null,//场站坐标
         projectInfo: null,//项目坐标
-        id:this.station.id,
-        allPointInfo:this.allPointInfo,//所有点位信息
+        id: this.station.id,
+        allPointInfo: this.allPointInfo,//所有点位信息
       }
       this.mapMark = id
       let clickItem = document.getElementById(id)
@@ -385,9 +442,10 @@ export default {
 }
 
 .rightTextBg {
+  height: calc(90vh);
   position: absolute;
   right: 2%;
-  top: 8%;
+  top: 5%;
   width: 20%;
   display: flex;
   flex-direction: column;
@@ -400,6 +458,21 @@ export default {
   padding: 5%;
 }
 
+.tabelTextbg {
+  width: 50%;
+  height: 110px;
+  background: url(../../../assets/largeScreenImg/resourcesInfo/heightBg.png) 100% no-repeat;
+  background-size: 100% 100%;
+  padding: 3%;
+}
+
+.tabelText {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
 .mapBtuBg {
   position: absolute;
   right: 22%;
@@ -410,7 +483,7 @@ export default {
 
 .rightTiltleTextBg {
   height: 32px;
-  background: url(../../../assets/largeScreenImg/index/rightTiltleTextBg.png) 100% no-repeat;
+  background: url(../../../assets/largeScreenImg/zaiyunAndqianqi/rightTitleBg.png) 100% no-repeat;
   background-size: 100% 100%;
 }
 
@@ -427,29 +500,36 @@ export default {
 .rightTopContent {
   margin-top: 4%;
 }
-.branckTitleBg{
+
+.branckTitleBg {
   background: url(../../../assets/largeScreenImg/zaiyunAndqianqi/branckTitleBg.png) 100% no-repeat;
   background-size: 100% 100%;
   height: 32px;
   display: flex;
   align-items: center;
 }
-.fjName{
-  margin-left: 2%;
+
+.textBox{
+  display: flex;
+  flex-direction: column;
+  align-items: center
 }
-.fjModel{
+
+.fjModel {
   width: 100%;
   margin-left: 2%;
 }
-.mainContent{
+
+.mainContent {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
 }
+
 .contentBox {
-  margin-top: 5%;
-  width: 38%;
-  height: 125px;
+  margin-top: 2%;
+  width: 33%;
+  height: 100px;
   background: url(../../../assets/largeScreenImg/index/liubianxingBorder.png) 100% no-repeat;
   background-size: 100% 100%;
   display: flex;
@@ -457,7 +537,8 @@ export default {
   justify-content: center;
   align-items: center;
 }
-.number{
+
+.number {
   font-weight: 700;
   background-image: linear-gradient(
     rgba(255, 255, 255, 1) 0,
@@ -468,6 +549,7 @@ export default {
   background-clip: text;
   color: transparent;
 }
+
 .numberBox {
   font-size: 24px;
   font-weight: 700;
@@ -516,21 +598,81 @@ export default {
   right: 0;
   bottom: 0;
 }
-.kaiguanBox{
+
+.kaiguanBox {
   cursor: pointer;
   position: absolute;
   left: 22%;
   top: .5%;
 }
-.map3D /deep/ .el-dialog__header, .map3D /deep/ .el-dialog__body  {
+
+.map3D /deep/ .el-dialog__header, .map3D /deep/ .el-dialog__body {
   padding: 0;
 }
+
 .map3D /deep/ .el-dialog__headerbtn {
   z-index: 100;
   top: 10px;
   right: 10px;
 }
+
 .map3D /deep/ .el-dialog__headerbtn .el-dialog__close {
   color: #ffffff;
 }
 </style>
+<style scoped>
+
+.split-line {
+  position: relative;
+  height: 2px; /* 分割线的高度 */
+  background-color: #f0f0f0; /* 分割线的背景色 */
+  overflow: hidden; /* 避免伪元素溢出容器 */
+  border-radius: 10%;
+}
+
+.split-line::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(45deg, #5ffffa, #7bfafe, #5fcfff); /* 创建渐变效果 */
+  background-size: 300%; /* 渐变区域比容器大，以便创造重复的效果 */
+  animation: slide 5s linear infinite; /* 使用关键帧动画 */
+}
+
+@keyframes slide {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 300% 0;
+  }
+}
+
+/* 设置滚动条样式 */
+/* 设置scrollbar-thumb之前要设置scrollbar的width和height */
+::-webkit-scrollbar-track {
+  border-radius: 0;
+  background-color: #f2f3f8;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 0;
+  border-radius: 5px;
+  background-image: -webkit-linear-gradient(0deg, rgba(202, 214, 220, 0.5) 0, #737179 100%);
+  -webkit-transition: all .2s;
+  transition: all .2s;
+}
+
+::-webkit-scrollbar-corner {
+  background-color: #f2f3f8;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+</style>