调整首页布局

ui/src/views/largeScreen/index.vue

@@ -5,51 +5,78 @@
       <div class="btuGroup"><span class="topRightBtuBg topRightBtu" style="cursor: pointer;" @click="push()">后台管理</span>
       </div>
     </div>
-    <div id="fline" style="float:left;width: 900px;height: 800px"></div>
-    <div style="float:right;top:50px;width: 900px;height: 450px">
-      <div class="boxall" style="height: 100px">
-        <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 style="width: 100%;height: 92%;position: absolute;top: 7%">
+      <div class="chart" style="height: 100%;width: 50%;left: 0;top:0;display: inline-block">
+        <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="boxall" style="height: 100px">
-        <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>
+  </div>
   </div>
 </template>
 
 <script>
+import resize from '../../components/Charts/mixins/resize'
+
 
 export default {
+  mixins: [resize],
   name: "index",
   data() {
     return {
-      fmMinTime:null,
-      fmMaxTime:null,
+      fmMinTime:new Date().toTimeString(),
+      fmMaxTime:new Date().toTimeString(),
       fms:[],
       activePower:[],
       datas:[],
@@ -96,6 +123,7 @@ export default {
   // },
   mounted() {
     this.init()
+    window.addEventListener("resize", this.handleResize);
   },
   created() {
     // //页面刚进入时开启长连接
@@ -167,10 +195,10 @@ export default {
         // },
         xAxis: {
           type: 'time',
-            min: this.fmMinTime,
-            max: this.fmMaxTime,
-            interval: 1000*20,
-            axisLine: {
+          min: this.fmMinTime,
+          max: this.fmMaxTime,
+          interval: 1000 * 20,
+          axisLine: {
             lineStyle: {
               color: "#fff",
             }
@@ -240,6 +268,7 @@ export default {
 
       // this.fmOption.yAxis[0].max=300
       this.chart.setOption(this.fmOption,true)
+      window.onresize = this.chart.resize()
     },
     push() {
       this.$router.push({path: "/"})
@@ -357,6 +386,7 @@ export default {
     },
   }
 }
+
 </script>
 
 <style scoped>
@@ -376,6 +406,7 @@ export default {
   background-size: 100% 100%;
   display: flex;
   justify-content: center;
+  position: absolute;
 }
 
 .largescreentitle {
@@ -385,23 +416,14 @@ export default {
   margin-top: .2%;
   font-size: 30px;
   font-weight: 800;
-  background-image: linear-gradient(
-    360deg,
-    rgb(144, 226, 255) 0,
-    rgb(144, 226, 255) 0,
-    rgba(255, 255, 255, 1) 100%,
-    rgba(255, 255, 255, 1) 100%
-  );
-  background-clip: text;
-  color: transparent;
 }
 
 .btuGroup {
   position: absolute;
   right: 0;
-  top: -.6%;
+  top: 0;
   width: 30%;
-  height: 5.5%;
+  height: 100%;
   display: flex;
   justify-content: flex-end;
   font-size: 20px;
@@ -410,8 +432,11 @@ export default {
 .topRightBtuBg {
   background: url(../../assets/largeScreen/topRightBtuBg.png) 100% no-repeat;
   background-size: 100% 100%;
+  position: absolute;
+  top:2%;
+  right: 10%;
   width: 30%;
-  height: 50px;
+  height: 80%;
 }
 
 .topRightBtu {
@@ -470,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:.7rem; color:#fff; text-align: center; line-height: .6rem; border-bottom:1px solid rgba(255,255,255,.2)}
+.alltitle{ font-size:28px; color:#fff; text-align: center; line-height: 30px; border-bottom:1px solid rgba(255,255,255,.2)}
 
 .rtFmFront{
   color: #00fe3b;
@@ -491,4 +516,16 @@ export default {
   padding: .3rem;
 }
 
+.breathe-yc{ position:relative; width:20px; height:20px; margin:10px auto; line-height:40px; border:1px solid #008000; border-radius:10px; color:#fff; font-size:20px; text-align:center; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.3); overflow:hidden;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#FF0000));
+  background-image: -moz-linear-gradient(#FF0000,#FF0000);
+  -webkit-animation-timing-function: ease-in-out;
+  -webkit-animation-name: breathe;
+  -webkit-animation-duration: 1000ms;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-direction: alternate;
+  animation:ease-in-out breathe 100ms infinite alternate;
+}
+
+
 </style>