在运场站页面

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

@@ -21,7 +21,7 @@
             <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;">
+              <div style="display: flex;margin-right: 8%;color: #f9ff00;font-size: 16px">
                 <span v-if="station.type === '风'">主风向：</span>
                 <span v-else>天气：</span>{{ wdSum }}
               </div>
@@ -34,70 +34,146 @@
               <span class="fjModel">{{ item.modelType }}
                 <span class="number" style="margin-left: 4%">{{ item.modelTotal }}</span>台</span>
             </div>
-            <div class="mainContent" v-if="station.type === '风'">
-              <div class="contentBox">
-                <span class="numberBox">{{ item.wsAve.replace(/\.?0+$/, "") }}</span>
-                <span class="textBox">平均风速<div class="numberBox" style="font-size: 14px">(m/s)</div></span>
-              </div>
-              <div class="contentBox">
-                <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">
-                <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.wsAve.replace(/\.?0+$/, "") }}</span>
-                <span class="textBox">平均日照<div class="numberBox" style="font-size: 14px">(W/m²)</div></span>
+            <div>
+              <div class="rightMain"  v-if="station.type === '风'">
+                <div class="contentBox">
+                  <span class="numberBox">{{ item.wsAve.replace(/\.?0+$/, "") }}</span>
+                  <span class="textBox">平均风速<div class="numberBox" style="font-size: 14px">(m/s)</div></span>
+                </div>
+                <div class="tabelTextbg">
+                  <div class="tabelText">
+                    <div>最小风速:</div>
+                    <span>{{ item.wsMax.replace(/\.?0+$/, "") }} (m/s)</span>
+                  </div>
+                  <div class="tabelText">
+                    <div>最大风速:</div>
+                    <span>{{ item.wsMin.replace(/\.?0+$/, "") }}(m/s)</span>
+                  </div>
+                </div>
               </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 class="rightMain" v-else>
+                <div class="contentBox">
+                  <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="tabelTextbg">
+                  <div class="tabelText">
+                    <div>最小日照:</div>
+                    <span>{{ item.wsMax.replace(/\.?0+$/, "") }} (W/m²)</span>
+                  </div>
+                  <div class="tabelText">
+                    <div>最大日照:</div>
+                    <span>{{ item.wsMin.replace(/\.?0+$/, "") }}(W/m²)</span>
+                  </div>
+                </div>
               </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 style="width: 100%;display: flex;justify-content: center">
+              <dv-decoration-10 style="width:80%;height:5px;" />
               </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 class="rightMain">
+                <div class="contentBox">
+                  <span class="numberBox">{{ item.generatingCapacityr.replace(/\.?0+$/, "") }}</span>
+                  <span class="textBox">发电量<div class="numberBox" style="font-size: 14px">(MWh)</div></span>
                 </div>
-                <div class="tabelText">
-                  <div>年累计:</div>
-                  <div>{{ item.generatingCapacity.replace(/\.?0+$/, "") }}</div>
+                <div class="tabelTextbg">
+                  <div class="tabelText">
+                    <div>月发电量:</div>
+                    <span>{{ item.generatingCapacityy.replace(/\.?0+$/, "") }} (MWh)</span>
+                  </div>
+                  <div class="tabelText">
+                    <div>年发电量:</div>
+                    <span>{{ item.generatingCapacityr.replace(/\.?0+$/, "") }}(MWh)</span>
+                  </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 style="width: 100%;display: flex;justify-content: center">
+                <dv-decoration-10 style="width:80%;height:5px;" />
+              </div>
+              <div class="rightMain">
+                <div class="contentBox">
+                  <span class="numberBox">{{ item.realTimeTotalr.replace(/\.?0+$/, "") }}</span>
+                  <span class="textBox">满发小时数<div class="numberBox" style="font-size: 14px">(h)</div></span>
                 </div>
-                <div class="tabelText">
-                  <div>年累计:</div>
-                  <div>{{ item.realTimeTotal.replace(/\.?0+$/, "") }}</div>
+                <div class="tabelTextbg">
+                  <div class="tabelText">
+                    <div>月累计:</div>
+                    <span>{{ item.realTimeTotaly.replace(/\.?0+$/, "") }} (h)</span>
+                  </div>
+                  <div class="tabelText">
+                    <div>年累计:</div>
+                    <span>{{ item.realTimeTotal.replace(/\.?0+$/, "") }}(h)</span>
+                  </div>
                 </div>
               </div>
             </div>
+
+
+            <!--            -->
+<!--            <div class="mainContent" v-if="station.type === '风'">-->
+<!--              <div class="contentBox">-->
+<!--                <span class="numberBox">{{ item.wsAve.replace(/\.?0+$/, "") }}</span>-->
+<!--                <span class="textBox">平均风速<div class="numberBox" style="font-size: 14px">(m/s)</div></span>-->
+<!--              </div>-->
+<!--              <div class="contentBox">-->
+<!--                <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">-->
+<!--                <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.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>-->
+<!--                &lt;!&ndash;              <el-divider></el-divider>&ndash;&gt;-->
+<!--                <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>-->
+<!--                &lt;!&ndash;              <el-divider></el-divider>&ndash;&gt;-->
+<!--                <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>
 
 
@@ -223,14 +299,14 @@ export default {
     },
     getInfo() {
       stationInfo({stationId: this.station.id}).then(res => {
-         console.log(res.data)
+        console.log(res.data)
         let data = res.data
         this.dataInfo = data.modelT
-        if(this.dataInfo){
+        if (this.dataInfo) {
           if (this.dataInfo[0] === undefined) {
-            this.wdSum =  ''
-          }else {
-            this.wdSum =  this.dataInfo[0].wdSum
+            this.wdSum = ''
+          } else {
+            this.wdSum = this.dataInfo[0].wdSum
           }
         }
         if (data.latitude === undefined) {
@@ -261,7 +337,7 @@ export default {
         if (err.msg === 'Index: 0, Size: 0') {
           console.log('此场站没有风机与测风塔')
         } else {
-          console.log('场站信息获取异常：' , err)
+          console.log('场站信息获取异常：', err)
         }
 
       })
@@ -465,11 +541,11 @@ export default {
 }
 
 .tabelTextbg {
-  width: 50%;
-  height: 110px;
+  width: 80%;
+  height: 80px;
   background: url(../../../assets/largeScreenImg/resourcesInfo/heightBg.png) 100% no-repeat;
   background-size: 100% 100%;
-  padding: 3%;
+  padding: 5%;
 }
 
 .tabelText {
@@ -515,7 +591,7 @@ export default {
   align-items: center;
 }
 
-.textBox{
+.textBox {
   display: flex;
   flex-direction: column;
   align-items: center
@@ -531,10 +607,13 @@ export default {
   flex-wrap: wrap;
   justify-content: center;
 }
-
+.rightMain{
+  display: flex;
+  align-items: center;
+}
 .contentBox {
   margin-top: 2%;
-  width: 33%;
+  width: 40%;
   height: 100px;
   background: url(../../../assets/largeScreenImg/index/liubianxingBorder.png) 100% no-repeat;
   background-size: 100% 100%;