ssssss

ui/src/views/largeScreen/index.vue

@@ -10,56 +10,59 @@
         <div id="fline" style="float:left;width: 100%;height: 100%"></div>
       </div>
       <div class="data" style="height: 100%;width: 50%;left: 50%;top:0;display: inline-block;position: absolute">
-            <div class="boxall" style="position: absolute;height: 10%;width: 100%;top: 10%" >
-              <div class="alltitle">实时区</div>
-              <el-form ref="rtForm" :model="rtForm" label-width="250px" size="small">
-                <el-row>
-                  <el-col :span="10">
-                    <el-form-item label="实时频率(Hz)">
-                      <p class="rtFmFront">{{rtForm.fm}}</p>
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="6">
-                    <el-form-item label="实时有功(MW)">
-                      <p class="rtActFront">{{rtForm.act}}</p>
-                    </el-form-item>
-                  </el-col>
-                </el-row>
-              </el-form>
-            </div>
-
-            <div style="position: absolute;height: 20%;width: 100%;top:20%">
-              <div class="alltitle">定值区</div>
-              <div class="top-list">
-                <ul>
-                  <li>死区上限值：{{dzForm.dbMax}}</li>
-                  <li>死区下限值：{{dzForm.dbMin}}</li>
-                  <li>调差率上扰值：{{dzForm.epMin}}</li>
-                  <li>调差率下扰值：{{dzForm.epMax}}</li>
-                  <li>功率上调限幅值：{{dzForm.limitMax}}</li>
-                  <li>功率下调限幅值：{{dzForm.limitMin}}</li>
-                </ul>
-              </div>
-            </div>
-
-            <div style="position: absolute;height: 20%;width: 100%;top:50%">
-              <div >信号区</div>
-              <table>
-                <tr style="border:0px;">
-                  <td style="border:0px;"><div id="yctptr" class="breathe-yc"></div></td>
-                  <td style="border:0px;"><div id="agctx" class="breathe-yc"></div></td>
-                  <td style="border:0px;"><div id="ydtx" class="breathe-yc"></div></td>
-                  <td style="border:0px;"><div id="emstx" class="breathe-yc"></div></td>
-                </tr>
-                <tr style="border:0px;">
-                  <td style="border:0px;">一次调频投入</td>
-                  <td style="border:0px;">AGC通讯</td>
-                  <td style="border:0px;">远动通讯</td>
-                  <td style="border:0px;">能管通讯</td>
-                </tr>
-              </table>
-
-            </div>
+        <div class="box" style="top: 3%;width: 90%;left:5%;">
+          <div class="tit">实时区</div>
+          <div class="boxnav" style="height: 100%">
+            <el-form ref="rtForm" :model="rtForm" label-width="40%"  size="small">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="实时频率(Hz)">
+                    <p class="rtFmFront">{{rtForm.fm}}</p>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="实时有功(MW)">
+                    <p class="rtActFront">{{rtForm.act}}</p>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </div>
+        </div>
+
+        <div class="box" style="top: 4%;width: 90%;left:5%">
+          <div class="tit">定值区</div>
+          <div class="boxnav" style="height: 100%">
+            <ul class="gnlb">
+              <li><span>频率死区上限：<em>119351</em></span></li>
+              <li><span>频率死区下限：<em>119351</em></span></li>
+              <li><span>调差率上扰值：<em>119351</em></span></li>
+              <li><span>调差率下扰值：<em>119351</em></span></li>
+              <li><span>上调功率限幅：<em>119351</em></span></li>
+              <li><span>下调功率限幅：<em>119351</em></span></li>
+            </ul>
+          </div>
+        </div>
+
+        <div class="box" style="top: 5%;width: 90%;left:5%">
+          <div class="tit">信号区</div>
+          <div class="boxnav" style="height: 100%">
+            <table>
+              <tr style="border:0px;">
+                <td style="border:0px;"><div id="yctptr" class="breathe-yc"></div></td>
+                <td style="border:0px;"><div id="agctx" class="breathe-yc"></div></td>
+                <td style="border:0px;"><div id="ydtx" class="breathe-yc"></div></td>
+                <td style="border:0px;"><div id="emstx" class="breathe-yc"></div></td>
+              </tr>
+              <tr style="border:0px;">
+                <td style="border:0px;">一次调频投入</td>
+                <td style="border:0px;">AGC通讯</td>
+                <td style="border:0px;">远动通讯</td>
+                <td style="border:0px;">能管通讯</td>
+              </tr>
+            </table>
+          </div>
+        </div>
 
       </div>
   </div>
@@ -102,7 +105,8 @@ export default {
         epMax:'',
         limitMax:'',
         limitMin:''
-      }
+      },
+      capacity:0
     }
   },
   // computed: {
@@ -121,15 +125,18 @@ export default {
   //     }
   //   }
   // },
-  mounted() {
-    this.init()
-    window.addEventListener("resize", this.handleResize);
-  },
+
   created() {
-    // //页面刚进入时开启长连接
-    this.initWebSocket();
+    // 获取装机容量
+    this.getCapacity()
     this.getDzForm()
   },
+  mounted() {
+    // this.chartInit();
+    //页面刚进入时开启长连接
+
+    window.addEventListener("resize", this.handleResize);
+  },
   destroyed() {
     //页面销毁时关闭长连接
     clearTimeout(this.timeoutObj);
@@ -139,15 +146,28 @@ export default {
     this.chart.clear()
   },
   methods: {
+    getCapacity(){
+      console.log(123)
+      this.$axios.get('/electricField/').then((res) => {
+        console.log(res.data.capacity)
+        this.capacity = res.data.capacity
+        this.chartInit()
+        this.initWebSocket();
+      }).catch((error) => {
+        this.loading = false;
+      })
+      console.log(456)
+    },
     getDzForm(){
       this.$axios.get('/dashboardController/getDzForm/').then((res) => {
-        console.log(res.data)
         this.dzForm = res.data
       }).catch((error) => {
         this.loading = false;
       })
     },
-    init(){
+    chartInit(){
+      console.log('初始容量：'+this.capacity)
+
       let chartDom = document.getElementById('fline');
       this.chart = this.$echarts.init(chartDom);
       // this.datas=[["2021-01-04 08:14:42",150], ["2021-01-04 08:14:56.200",230], ["2021-01-04 08:14:56.600",224], ["2021-01-04 08:15:34",218], ["2021-01-04 08:15:50",135], ["2021-01-04 08:16:12",147], ["2021-01-04 08:17:17",260]];
@@ -223,7 +243,7 @@ export default {
             position: 'left',
             name: '功率',
             min: 0,
-            max: [],
+            max: this.capacity,
 
             axisLabel: {
               formatter: '{value} MW'
@@ -346,33 +366,13 @@ export default {
         this.activePower.push({name: tempFm[i].time, value: [tempFm[i].time, tempFm[i].activePower]})
       }
 
-      // console.log('接收后端===============')
-      // console.log(tempFm)
-      // if (tempFm.f==-99){
-      //   tempFm.f=null
-      // }
-      // if (tempFm.activePower==-99){
-      //   tempFm.activePower=null
-      // }
-      // 存入频率数组
-      // this.fms.push({name: tempFm[i].time, value: [tempFm[i].time, tempFm[i].f]})
-      // this.activePower.push({name: tempFm.time, value: [tempFm.time, tempFm.activePower]})
-
-      // if (this.fms.length>604){
-      //   this.fms.shift()
-      //   this.activePower.shift()
-      // }
-
-      // 对时间轴最大最小时间更新
-
-
       this.fmMaxTime=tempFm[tempFm.length-1].time
       let tempTime=new Date(tempFm[tempFm.length-1].time)
       this.fmMinTime=new Date(tempTime.valueOf()-1000*60*2)
 
       this.fmOption.xAxis.min=this.fmMinTime
       this.fmOption.xAxis.max=this.fmMaxTime
-      this.fmOption.yAxis[0].max=tempFm[tempFm.length-1].capacity
+      // this.fmOption.yAxis[0].max=tempFm[tempFm.length-1].capacity
       this.fmOption.series[0].data=this.activePower
       this.fmOption.series[1].data=this.fms
       this.chart.setOption(this.fmOption,true)
@@ -495,7 +495,7 @@ export default {
 .boxall:after{ position:absolute; width: .1rem; height: .1rem; content: "";  border-top: 2px solid #02a6b5; top: 0;}
 .boxall:before,.boxfoot:before{border-left: 2px solid #02a6b5;left: 0;}
 .boxall:after,.boxfoot:after{border-right: 2px solid #02a6b5; right: 0;}
-.alltitle{ font-size:28px; color:#fff; text-align: center; line-height: 30px; border-bottom:1px solid rgba(255,255,255,.2)}
+.alltitle{ font-size:22px; color:#fff; text-align: center; line-height: 45px; border-bottom:1px solid rgba(255,255,255,.2)}
 
 .rtFmFront{
   color: #00fe3b;
@@ -527,5 +527,22 @@ export default {
   animation:ease-in-out breathe 100ms infinite alternate;
 }
 
-
+.box{ border:1px solid rgba(7,118,181,.5); box-shadow:inset 0 0 10px rgba(7,118,181,.4); margin-bottom: 12px; position: relative;}
+.tit{ padding: 10px 10px 10px 25px;border-bottom:1px solid rgba(7,118,181,.7);font-size: 16px; font-weight: 500; position: relative;}
+.tit:before,.tit01:before{position: absolute; content: ""; width: 6px; height: 6px; background: rgba(22,214,255,.9);box-shadow: 0 0 5px rgba(22,214,255,.9); border-radius: 10px; left: 10px; top: 18px;}
+.tit:after,.box:before{ width: 100%; height: 1px; content: ""; position: absolute; left: 0; bottom:-1px; background:linear-gradient(to right,#076ead,#4ba6e0,#076ead); box-shadow: 0 0 5px rgba(131,189,227,1); opacity: .6}
+.box:before{top: -1px;}
+.boxnav{padding: 10px;}
+
+.gnlb {text-align: center;}
+.gnlb li{position: relative; display: inline-block; width: 48%; border: 1px solid #3e6ec0; margin:6px 0;}
+.gnlb li span{display:block; padding: 6px 0; text-align: center; font-size: 15px; color: rgba(255,255,255,1);}
+.gnlb li span em{font-size: 18px; color: #FFDB6C; font-style: normal;font-family:electronicFont;}
+.gnlb li:before,
+.gnlb li:after{ position:absolute; width:10px; height:5px; content: "";  border-top: 2px solid #1a8bc2; top: -2px;border-radius: 2px;}
+.gnlb li:before,.gnlb li span:before{border-left: 2px solid #1a8bc2;left: -2px;}
+.gnlb li:after,.gnlb li span:after{border-right: 2px solid #1a8bc2; right: -2px;}
+.gnlb li span{ position:relative;}
+.gnlb li span:before,
+.gnlb li span:after{ position:absolute; width:10px; height:5px;  content: "";border-bottom: 2px solid #1a8bc2; bottom:-2px;border-radius: 2px;}
 </style>