|
@@ -10,21 +10,29 @@
|
|
|
<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="box" style="top: 3%;width: 90%;left:5%;">
|
|
|
+ <div class="box" style="top: 3%;width: 90%;left:5%;height: 14%">
|
|
|
<div class="tit">实时区</div>
|
|
|
- <div class="boxnav" style="height: 100%">
|
|
|
+ <div >
|
|
|
<el-form ref="rtForm" :model="rtForm" label-width="40%" size="small">
|
|
|
- <el-row>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="实时频率(Hz)">
|
|
|
+ <el-row height="1px">
|
|
|
+ <el-col :span="8">
|
|
|
+ <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)">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="实时有功(MW)" >
|
|
|
<p class="rtActFront">{{rtForm.act}}</p>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="服务端系统时间" >
|
|
|
+ <div class="datac">
|
|
|
+ <p class="timec" id="timeid">00:00:00</p>
|
|
|
+ <p id="dateid"></p>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
</el-row>
|
|
|
</el-form>
|
|
|
</div>
|
|
@@ -34,12 +42,12 @@
|
|
|
<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>
|
|
|
+ <li><span>频率死区上限:<em class="dzFront">{{this.dzForm.dbMax}}</em></span></li>
|
|
|
+ <li><span>频率死区下限:<em class="dzFront">{{this.dzForm.dbMin}}</em></span></li>
|
|
|
+ <li><span>调差率上扰值:<em class="dzFront">{{this.dzForm.epMin}}</em></span></li>
|
|
|
+ <li><span>调差率下扰值:<em class="dzFront">{{this.dzForm.epMax}}</em></span></li>
|
|
|
+ <li><span>上调功率限幅:<em class="dzFront">{{this.dzForm.limitMin}}</em></span></li>
|
|
|
+ <li><span>下调功率限幅:<em class="dzFront">{{this.dzForm.limitMax}}</em></span></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -47,20 +55,37 @@
|
|
|
<div class="box" style="top: 5%;width: 90%;left:5%">
|
|
|
<div class="tit">信号区</div>
|
|
|
<div class="boxnav" style="height: 100%">
|
|
|
- <table>
|
|
|
+ <table class="table3" style="border:0px; width:96%">
|
|
|
<tr style="border:0px;">
|
|
|
<td style="border:0px;"><div id="yctptr" class="breathe-yc"></div></td>
|
|
|
+ <td style="border:0px;"><div id="cpzztx" 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;">测频装置</td>
|
|
|
<td style="border:0px;">AGC通讯</td>
|
|
|
<td style="border:0px;">远动通讯</td>
|
|
|
- <td style="border:0px;">能管通讯</td>
|
|
|
+ <td style="border:0px;">EMS通讯</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
+
|
|
|
+<!-- <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>
|
|
|
|
|
@@ -96,7 +121,8 @@ export default {
|
|
|
fmOption:null,
|
|
|
rtForm:{
|
|
|
fm: '',
|
|
|
- act: ''
|
|
|
+ act: '',
|
|
|
+ sysTime:''
|
|
|
},
|
|
|
dzForm:{
|
|
|
dbMax:'',
|
|
@@ -132,9 +158,7 @@ export default {
|
|
|
this.getDzForm()
|
|
|
},
|
|
|
mounted() {
|
|
|
- // this.chartInit();
|
|
|
//页面刚进入时开启长连接
|
|
|
-
|
|
|
window.addEventListener("resize", this.handleResize);
|
|
|
},
|
|
|
destroyed() {
|
|
@@ -146,19 +170,55 @@ export default {
|
|
|
this.chart.clear()
|
|
|
},
|
|
|
methods: {
|
|
|
+ fnW(str) {
|
|
|
+ var num;
|
|
|
+ str >= 10 ? num = str : num = "0" + str;
|
|
|
+ return num;
|
|
|
+ },
|
|
|
+ getMyDay(date){
|
|
|
+ var week;
|
|
|
+ if(date.getDay()==0) week="周日"
|
|
|
+ if(date.getDay()==1) week="周一"
|
|
|
+ if(date.getDay()==2) week="周二"
|
|
|
+ if(date.getDay()==3) week="周三"
|
|
|
+ if(date.getDay()==4) week="周四"
|
|
|
+ if(date.getDay()==5) week="周五"
|
|
|
+ if(date.getDay()==6) week="周六"
|
|
|
+ return week;
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+//获取当前时间
|
|
|
+ createDate(timeStr) {
|
|
|
+ var date = new Date(timeStr);
|
|
|
+ var year = date.getFullYear(); //当前年份
|
|
|
+ var month = date.getMonth(); //当前月份
|
|
|
+ var data = date.getDate(); //天
|
|
|
+ var hours = date.getHours(); //小时
|
|
|
+ var minute = date.getMinutes(); //分
|
|
|
+ var second = date.getSeconds(); //秒
|
|
|
+ // var day = date.getDay(); //获取当前星期几
|
|
|
+ // var ampm = hours < 12 ? 'am' : 'pm';
|
|
|
+ document.getElementById('timeid').innerHTML = this.fnW(hours) + ":" + this.fnW(minute) + ":" + this.fnW(second);
|
|
|
+ document.getElementById('dateid').innerHTML = '<span>' + year + '/' + (month + 1) + '/' + data +' '+ '</span><span>' + this.getMyDay(date) + '</span>'
|
|
|
+
|
|
|
+ // $('#time').html(this.fnW(hours) + ":" + this.fnW(minute) + ":" + this.fnW(second));
|
|
|
+ // $('#date').html('<span>' + year + '/' + (month + 1) + '/' + data + '</span><span>' + this.getMyDay(date) + '</span>')
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
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) => {
|
|
|
this.dzForm = res.data
|
|
|
}).catch((error) => {
|
|
@@ -166,8 +226,6 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
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]];
|
|
@@ -350,9 +408,16 @@ export default {
|
|
|
//接收服务器推送的信息
|
|
|
//打印收到服务器的内容
|
|
|
// console.log("收到服务器信息",event.data);
|
|
|
- let data=event.data
|
|
|
- var tempFm = JSON.parse(data)
|
|
|
-
|
|
|
+ let data=JSON.parse(event.data)
|
|
|
+ this.drawChart(data.dashboardFmMapCache)
|
|
|
+ this.changeCommunicationStatus(data.communicationStatusDto)
|
|
|
+ },
|
|
|
+ websocketsend(msg) {
|
|
|
+ //向服务器发送信息
|
|
|
+ this.websock.send(msg);
|
|
|
+ },
|
|
|
+ // 绘制图表
|
|
|
+ drawChart(tempFm){
|
|
|
this.fms=[]
|
|
|
this.activePower=[]
|
|
|
for (let i=0;i<tempFm.length;i++) {
|
|
@@ -365,9 +430,14 @@ export default {
|
|
|
this.fms.push({name: tempFm[i].time, value: [tempFm[i].time, tempFm[i].f]})
|
|
|
this.activePower.push({name: tempFm[i].time, value: [tempFm[i].time, tempFm[i].activePower]})
|
|
|
}
|
|
|
+ let lastObj = tempFm[tempFm.length-1]
|
|
|
+ this.rtForm.fm = lastObj.f.toFixed(3);
|
|
|
+ this.rtForm.act = lastObj.activePower.toFixed(3);
|
|
|
|
|
|
- this.fmMaxTime=tempFm[tempFm.length-1].time
|
|
|
- let tempTime=new Date(tempFm[tempFm.length-1].time)
|
|
|
+ this.createDate(lastObj.time)
|
|
|
+
|
|
|
+ this.fmMaxTime=lastObj.time
|
|
|
+ let tempTime=new Date(lastObj.time)
|
|
|
this.fmMinTime=new Date(tempTime.valueOf()-1000*60*2)
|
|
|
|
|
|
this.fmOption.xAxis.min=this.fmMinTime
|
|
@@ -376,14 +446,21 @@ export default {
|
|
|
this.fmOption.series[0].data=this.activePower
|
|
|
this.fmOption.series[1].data=this.fms
|
|
|
this.chart.setOption(this.fmOption,true)
|
|
|
-
|
|
|
- this.rtForm.fm = tempFm[tempFm.length-1].f
|
|
|
- this.rtForm.act = tempFm[tempFm.length-1].activePower
|
|
|
- },
|
|
|
- websocketsend(msg) {
|
|
|
- //向服务器发送信息
|
|
|
- this.websock.send(msg);
|
|
|
},
|
|
|
+ // 改变通信状态
|
|
|
+ changeCommunicationStatus(communicationStatusDto){
|
|
|
+ let yctptr = communicationStatusDto.yctptr
|
|
|
+ if (yctptr){
|
|
|
+ //breathe-zc 绿灯;breathe-yc 红灯
|
|
|
+ document.getElementById("yctptr").classList="";
|
|
|
+ document.getElementById("yctptr").classList = "breathe-zc";
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ document.getElementById("yctptr").classList="";
|
|
|
+ document.getElementById("yctptr").classList = "breathe-yc";
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -490,12 +567,12 @@ export default {
|
|
|
src: url('../../assets/font/Digiface Regular.ttf')
|
|
|
}
|
|
|
|
|
|
-.boxall{ border: 1px solid rgba(25,186,139,.17); padding:0 .3rem .3rem .3rem; background: rgba(255,255,255,.04) ; background-size: 100% auto; position: relative; margin-bottom: .1rem; z-index: 20;}
|
|
|
-.boxall:before,
|
|
|
-.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:22px; color:#fff; text-align: center; line-height: 45px; border-bottom:1px solid rgba(255,255,255,.2)}
|
|
|
+.dzFront{
|
|
|
+ color: #00fe3b;
|
|
|
+ text-shadow: 0 0 25px #00fe3b;
|
|
|
+ font-size: 28px;
|
|
|
+ font-weight: bolder;
|
|
|
+}
|
|
|
|
|
|
.rtFmFront{
|
|
|
color: #00fe3b;
|
|
@@ -516,9 +593,26 @@ export default {
|
|
|
padding: .3rem;
|
|
|
}
|
|
|
|
|
|
+.breathe-zc{ 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(#00FF00), to(#00FF00));
|
|
|
+ -webkit-animation-timing-function: ease-in-out;
|
|
|
+ -webkit-animation-name: breathe;
|
|
|
+ -webkit-animation-duration: 500ms;
|
|
|
+ -webkit-animation-iteration-count: infinite;
|
|
|
+ -webkit-animation-direction: alternate;
|
|
|
+ animation:ease-in-out breathe 500ms infinite alternate;
|
|
|
+}
|
|
|
+@keyframes breathe{
|
|
|
+ 0% { opacity: .2; box-shadow:0 1px 2px rgba(255,255,255,0.1);}
|
|
|
+ 100% { opacity: 1; border:1px solid rgba(59,235,235,1); box-shadow:0 1px 30px rgba(59,255,255,1);}
|
|
|
+}
|
|
|
+@-webkit-keyframes breathe {
|
|
|
+ 0% { opacity: .2; box-shadow:0 1px 2px rgba(255,255,255,0.1);}
|
|
|
+ 100% { opacity: 1; border:1px solid rgba(59,235,235,1); box-shadow:0 1px 30px rgba(59,255,255,1);}
|
|
|
+}
|
|
|
+
|
|
|
.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;
|
|
@@ -527,6 +621,48 @@ export default {
|
|
|
animation:ease-in-out breathe 100ms infinite alternate;
|
|
|
}
|
|
|
|
|
|
+
|
|
|
+
|
|
|
+.table3 thead tr {
|
|
|
+ background: rgba(14, 148, 234, 0.4);
|
|
|
+}
|
|
|
+
|
|
|
+.table3 tr.bg-color {
|
|
|
+ background: rgba(14, 148, 234, 0.2);
|
|
|
+}
|
|
|
+
|
|
|
+.table3 tr td:nth-child(2n+1),
|
|
|
+.table3 tr td:nth-child(2n+1)>p {
|
|
|
+ width: 3rem;
|
|
|
+}
|
|
|
+
|
|
|
+.table3 tr td:nth-child(2n),
|
|
|
+.table3 tr td:nth-child(2n)>p {
|
|
|
+ width: 1.8rem;
|
|
|
+}
|
|
|
+
|
|
|
+.table3 tr td,
|
|
|
+.table3 tr th {
|
|
|
+ border-right: 1px solid #0e94ea;
|
|
|
+ height: 0.4rem;
|
|
|
+ line-height: 0.4rem;
|
|
|
+ color: #cdddf7;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.table3 tr td p {
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ color: #cdddf7;
|
|
|
+}
|
|
|
+
|
|
|
+.table3 thead tr th {
|
|
|
+ border-right: none;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
.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;}
|
|
@@ -545,4 +681,24 @@ export default {
|
|
|
.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;}
|
|
|
+
|
|
|
+.datac>p {
|
|
|
+ font-size: 10px;
|
|
|
+ margin: 0 5px;
|
|
|
+ color: rgba(255,255,255,1);
|
|
|
+ text-align: center;
|
|
|
+ margin: 0;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.datac>p>span {
|
|
|
+ margin: 0 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.datac>p.timec {
|
|
|
+ font-size: 25px;
|
|
|
+ height: 25px;
|
|
|
+ line-height: 25px;
|
|
|
+}
|
|
|
+
|
|
|
</style>
|