|
@@ -7,54 +7,42 @@
|
|
|
</div>
|
|
|
<div id="fline" style="float:left;width: 900px;height: 800px"></div>
|
|
|
<div style="float:right;top:50px;width: 900px;height: 450px">
|
|
|
- <div>
|
|
|
- <el-form ref="testform" :model="rtForm" label-width="250px" size="small">
|
|
|
- <fieldset>
|
|
|
- <legend>实时区</legend>
|
|
|
+ <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)">
|
|
|
- <el-input v-model="rtForm.fm" style="width: 240px" readonly></el-input>
|
|
|
+ <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)">
|
|
|
- <el-input v-model="rtForm.act" style="width: 240px" readonly></el-input>
|
|
|
+ <el-form-item label="实时有功(MW)">
|
|
|
+ <p class="rtActFront">{{rtForm.act}}</p>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
-<!-- <el-form-item label="当前频率">-->
|
|
|
-<!-- <el-input v-model="rtForm.fm" style="width: 240px" readonly></el-input>-->
|
|
|
-<!-- </el-form-item>-->
|
|
|
-<!-- <el-form-item label="当前有功">-->
|
|
|
-<!-- <el-input v-model="rtForm.act" style="width: 240px" readonly></el-input>-->
|
|
|
-<!-- </el-form-item>-->
|
|
|
- </fieldset>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
- <el-form ref="testform" :model="testform" label-width="250px" size="small">
|
|
|
- <fieldset>
|
|
|
- <legend>调试设定值</legend>
|
|
|
- <el-form-item label="模拟频率">
|
|
|
- <el-input v-model="testform.fm" style="width: 240px"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="模拟有功">
|
|
|
- <el-input v-model="testform.act" style="width: 240px"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button type="primary" @click="testSubmit">保存</el-button>
|
|
|
- </el-form-item>
|
|
|
- </fieldset>
|
|
|
- </el-form>
|
|
|
+
|
|
|
+ <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>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-// import electricityBar from './components/electricityBar'
|
|
|
-
|
|
|
-import {debounce} from "lodash";
|
|
|
-import store from "@/store";
|
|
|
|
|
|
export default {
|
|
|
name: "index",
|
|
@@ -76,23 +64,43 @@ export default {
|
|
|
serverTimeoutObj: null, //心跳倒计时
|
|
|
timeoutnum: null, //断开 重连倒计时
|
|
|
fmOption:null,
|
|
|
- testform: {
|
|
|
- fm: '',
|
|
|
- act: ''
|
|
|
- },
|
|
|
rtForm:{
|
|
|
fm: '',
|
|
|
act: ''
|
|
|
+ },
|
|
|
+ dzForm:{
|
|
|
+ dbMax:'',
|
|
|
+ dbMin:'',
|
|
|
+ epMin:'',
|
|
|
+ epMax:'',
|
|
|
+ limitMax:'',
|
|
|
+ limitMin:''
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
+ // computed: {
|
|
|
+ // fmOption(){
|
|
|
+ // return {
|
|
|
+ // color: ['#FF0000', '#00fe3b'],
|
|
|
+ // tooltip: {
|
|
|
+ // trigger: 'axis',
|
|
|
+ // axisPointer: {
|
|
|
+ // type: 'cross',
|
|
|
+ // crossStyle: {
|
|
|
+ // color: '#999'
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
mounted() {
|
|
|
this.init()
|
|
|
},
|
|
|
created() {
|
|
|
// //页面刚进入时开启长连接
|
|
|
this.initWebSocket();
|
|
|
-
|
|
|
+ this.getDzForm()
|
|
|
},
|
|
|
destroyed() {
|
|
|
//页面销毁时关闭长连接
|
|
@@ -103,24 +111,32 @@ export default {
|
|
|
this.chart.clear()
|
|
|
},
|
|
|
methods: {
|
|
|
+ getDzForm(){
|
|
|
+ this.$axios.get('/dashboardController/getDzForm/').then((res) => {
|
|
|
+ console.log(res.data)
|
|
|
+ this.dzForm = res.data
|
|
|
+ }).catch((error) => {
|
|
|
+ this.loading = false;
|
|
|
+ })
|
|
|
+ },
|
|
|
init(){
|
|
|
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]];
|
|
|
// this.fms=[50, 49.8 ,50.1,50, 50,50, 50];
|
|
|
// this.fms=[[]]
|
|
|
- var fmColors= ['#FF0000', '#00FF00']
|
|
|
+ var fmColors= ['#FF0000', '#00fe3b']
|
|
|
let _this = this
|
|
|
this.fmOption= {
|
|
|
color: fmColors,
|
|
|
- title: {
|
|
|
+ title: {
|
|
|
text: '有功➖频率实时图',
|
|
|
- textStyle: {
|
|
|
- fontSize: 16,
|
|
|
- color:"#fff"
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 19,
|
|
|
+ color:"#fff"
|
|
|
},
|
|
|
- top: 10,
|
|
|
- left: 10
|
|
|
+ top: 24,
|
|
|
+ left: 10
|
|
|
},
|
|
|
legend: {
|
|
|
icon:'roundRect',
|
|
@@ -129,6 +145,7 @@ export default {
|
|
|
color: "#fff",
|
|
|
},
|
|
|
selectedMode:false,
|
|
|
+ padding: [60, 0, 0, 0]
|
|
|
},
|
|
|
grid: {
|
|
|
top: '17%',
|
|
@@ -177,7 +194,7 @@ export default {
|
|
|
},
|
|
|
position: 'left',
|
|
|
name: '功率',
|
|
|
- min: -1,
|
|
|
+ min: 0,
|
|
|
max: [],
|
|
|
|
|
|
axisLabel: {
|
|
@@ -331,8 +348,6 @@ export default {
|
|
|
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
|
|
|
},
|
|
@@ -340,21 +355,6 @@ export default {
|
|
|
//向服务器发送信息
|
|
|
this.websock.send(msg);
|
|
|
},
|
|
|
- testSubmit: debounce(async function () {
|
|
|
- this.$refs["testform"].validate(async valid => {
|
|
|
- if (valid) {
|
|
|
- const param = {
|
|
|
- fm: this.testform.fm,
|
|
|
- act: this.testform.act
|
|
|
- }
|
|
|
- this.$axios.post('/frequencyController/testFmAct', this.$qs.stringify(param)).then((res) => {
|
|
|
- this.$message.success('调试设定成功')
|
|
|
- }).catch((error) => {
|
|
|
-
|
|
|
- })
|
|
|
- }
|
|
|
- });
|
|
|
- }, 1000)
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
@@ -460,11 +460,35 @@ export default {
|
|
|
margin-top: 1.5%;
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
@font-face {
|
|
|
font-family: timeFont;
|
|
|
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:.7rem; color:#fff; text-align: center; line-height: .6rem; border-bottom:1px solid rgba(255,255,255,.2)}
|
|
|
+
|
|
|
+.rtFmFront{
|
|
|
+ color: #00fe3b;
|
|
|
+ text-shadow: 0 0 25px #00fe3b;
|
|
|
+ font-size: 28px;
|
|
|
+ font-weight: bolder;
|
|
|
+}
|
|
|
+.rtActFront{
|
|
|
+ color: #fe0000;
|
|
|
+ text-shadow: 0 0 25px #fe0000;
|
|
|
+ font-size: 28px;
|
|
|
+ font-weight: bolder;
|
|
|
+}
|
|
|
+
|
|
|
+.top-list p{
|
|
|
+ font-size: .18rem;
|
|
|
+ color: #029698;
|
|
|
+ padding: .3rem;
|
|
|
+}
|
|
|
+
|
|
|
</style>
|