|
|
@@ -0,0 +1,383 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="d-tt">AVC信息图</div>
|
|
|
+ <div class="d-subtt">电压无功自动控制(AVC)系统</div>
|
|
|
+ <div class="d-pn">
|
|
|
+ <div class="d-pn-tb" style="display: flex; justify-content: space-between;padding: 0 10px;">
|
|
|
+ <div style="width: 100%">
|
|
|
+ <div class="pn-tt">AVC功能投退控制区</div>
|
|
|
+ <div style="display:flex; padding:0 10px;justify-content: space-between;">
|
|
|
+ <div style="background: #159afa;margin-right: 10px;border-radius: 6px; padding: 4px;height: 90px;">
|
|
|
+ <div style="border-bottom:1px solid white;">有功自动控制(AVC)系统</div>
|
|
|
+ <div style="display:flex;">
|
|
|
+ <div style="margin-right: 10px;margin-top: 6px;">
|
|
|
+ <div style="margin-left: 10px;width: 60px;height: 16px;border: 2px solid rgb(41, 238, 14);position:relative">
|
|
|
+ <div style="width: 10px;height: 2px;background: rgb(41, 238, 14);position:absolute;top: 6px;left: -10px;"></div>
|
|
|
+ <div style="width: 10px;height: 2px;background: rgb(41, 238, 14);position:absolute;top: 6px;right: -10px;"></div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 8px;">AVC总复归</div>
|
|
|
+ </div>
|
|
|
+ <div style="background: transparent; height: 60px; width: 80px;">
|
|
|
+ <img :src="yfjd" width="80" height="60" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div style="margin-bottom: 20px;text-align: right;">AVC总投退软压板</div>
|
|
|
+ <div style="white-space: nowrap;margin-bottom: 20px; text-align: right;">1#高侧母线投退软压板</div>
|
|
|
+ <div style="white-space: nowrap;text-align: right;">人工设定电压目标值软压板</div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 10px;">
|
|
|
+ <div style="background: rgb(41, 238, 14); height: 20px; width: 40px;margin-bottom: 20px;"></div>
|
|
|
+ <div style="background: rgb(41, 238, 14); height: 20px; width: 40px;margin-bottom: 20px;"></div>
|
|
|
+ <div style="background: rgb(41, 238, 14); height: 20px; width: 40px"></div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div style="margin-bottom: 20px;text-align: right;">无功电压切换模式</div>
|
|
|
+ <div style="white-space: nowrap;text-align: right;">AVC实时控制软压板</div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 10px;">
|
|
|
+ <div style="background: rgb(41, 238, 14); height: 20px; width: 40px;margin-bottom: 20px;"></div>
|
|
|
+ <div style="background: rgb(41, 238, 14); height: 20px; width: 40px"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="padding: 0 10px;display: flex;justify-content: space-between;align-items:center;margin-top: 30px;">
|
|
|
+ <div>
|
|
|
+ <div style="height: 40px;line-height:40px;text-align:center;background:lightgrey;color:black; width:180px;">远方设置有功目标值</div>
|
|
|
+ <div style="color:yellow;margin: 10px 0;">(电压模式设置0, 无功模式设置1)</div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;">
|
|
|
+ <div>电压控制模式</div>
|
|
|
+ <div style="width: 20px; height: 20px; border-radius:50%;background: rgb(41, 238, 14);margin-left: 20px;"></div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;">
|
|
|
+ <div>无功控制模式</div>
|
|
|
+ <div style="width: 20px; height: 20px; border-radius:50%;background: rgb(41, 238, 14);margin-left: 20px;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="d-pn-tb">
|
|
|
+ <div class="pn-tt">母线运行区域</div>
|
|
|
+ <div style="margin-bottom:10px;display: flex;margin: 0 10px;justify-content: space-around;border-bottom: 2px solid white;">
|
|
|
+ <div>电压单位: kV</div>
|
|
|
+ <div>电压实时值: {{ dataObj.dyssz }}</div>
|
|
|
+ <div>无功单位: kVar</div>
|
|
|
+ <div>无功实时值: {{ dataObj.wgssz }}</div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;align-items: center;justify-content: space-between;padding: 0 10px;">
|
|
|
+ <div style="width: 30%;display:flex;flex-direction:column;align-items: center; text-align:right;">
|
|
|
+ <div style="width: 100%;margin-top: 10px;display:flex;justify-content: space-between;">
|
|
|
+ <span style="width:50%;">电压上限值</span>
|
|
|
+ <span>{{ dataObj.dysxz }}</span>
|
|
|
+ </div>
|
|
|
+ <div style="width: 100%;margin-top: 10px;display:flex;justify-content: space-between;">
|
|
|
+ <span style="width:50%;">电压告警上限值</span>
|
|
|
+ <span>{{ dataObj.dygjsxz }}</span>
|
|
|
+ </div>
|
|
|
+ <div style="width: 100%;margin-top: 10px;display:flex;justify-content: space-between;">
|
|
|
+ <span style="width:50%;">电压告警下限值</span>
|
|
|
+ <span>{{ dataObj.dygjxxz }}</span>
|
|
|
+ </div>
|
|
|
+ <div style="width: 100%;margin-top: 10px;display:flex;justify-content: space-between;">
|
|
|
+ <span style="width:50%;">电压下限值</span>
|
|
|
+ <span>{{ dataObj.dyxxz }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="width: 64%">
|
|
|
+ <table style="width:100%;">
|
|
|
+ <tr>
|
|
|
+ <th width="30%">Q+/COS-目标上限值</th>
|
|
|
+ <th></th>
|
|
|
+ <th width="30%">Q-/COS-目标下限值</th>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td style="background: rgb(41, 238, 14)"></td>
|
|
|
+ <td style="background: rgb(41, 238, 14)"></td>
|
|
|
+ <td style="background: rgb(41, 238, 14)"></td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td style="background: rgb(41, 238, 14)"></td>
|
|
|
+ <td style="background: rgb(41, 238, 14)"></td>
|
|
|
+ <td style="background: rgb(41, 238, 14)"></td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td style="background: rgb(41, 238, 14)"></td>
|
|
|
+ <td style="background: rgb(41, 238, 14)"></td>
|
|
|
+ <td style="background: rgb(41, 238, 14)"></td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td style="background: rgb(41, 238, 14)"></td>
|
|
|
+ <td style="background: rgb(41, 238, 14)"></td>
|
|
|
+ <td style="background: rgb(41, 238, 14)"></td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>0.00</td>
|
|
|
+ <td></td>
|
|
|
+ <td>0.00</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="d-pn-tb">
|
|
|
+ <div class="pn-tt">
|
|
|
+ 遥测运行信息区
|
|
|
+ </div>
|
|
|
+ <div class="flex">
|
|
|
+ <table>
|
|
|
+ <tr v-for="item in dotArr1" :key="item.id">
|
|
|
+ <td width="50%">{{ item.name }}</td>
|
|
|
+ <td width="25%">{{ item.num }}</td>
|
|
|
+ <td width="25%">{{ item.unit }}</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="d-pn-tb">
|
|
|
+ <div class="pn-tt">
|
|
|
+ 闭锁与遥信信息
|
|
|
+ </div>
|
|
|
+ <div class="flex pn-rb" style="align-items:center;">
|
|
|
+ <div style="width: 40%">
|
|
|
+ <div style="height: 40px;line-height:40px;text-align:center;background:lightgrey;color:black; width:180px;">人工设定1#高侧母线无功值</div>
|
|
|
+ <div style="color:yellow;margin: 10px 0;">(若设置母线无功为3kVar, 则设定为3)</div>
|
|
|
+ </div>
|
|
|
+ <div style="width: 40%">
|
|
|
+ <div style="height: 40px;line-height:40px;text-align:center;background:lightgrey;color:black; width:180px;">远方设定1#高侧母线无功值</div>
|
|
|
+ <div style="color:yellow;margin: 10px 0;">(若设置母线无功为3kVar, 则设定为3)</div>
|
|
|
+ </div>
|
|
|
+ <div style="width: 40%">
|
|
|
+ <div style="height: 40px;line-height:40px;text-align:center;background:lightgrey;color:black; width:180px;">人工设定1#高侧母线电压值</div>
|
|
|
+ <div style="color:yellow;margin: 10px 0;">(若设置母线电压为3.5kV, 则设定为3.5)</div>
|
|
|
+ </div>
|
|
|
+ <div style="width: 40%">
|
|
|
+ <div style="height: 40px;line-height:40px;text-align:center;background:lightgrey;color:black; width:180px;">远方设定1#高侧母线电压值</div>
|
|
|
+ <div style="color:yellow;margin: 10px 0;">(若设置母线电压为3.5kV, 则设定为3.5)</div>
|
|
|
+ </div>
|
|
|
+ <div class="pn-rb-it">
|
|
|
+ <div>(AGC/AVC告警)1#高侧母线无功增闭锁</div>
|
|
|
+ </div>
|
|
|
+ <div class="pn-rb-it">
|
|
|
+ <div>(AVC告警)1#高侧母线电压调节指令方式异常</div>
|
|
|
+ </div>
|
|
|
+ <div class="pn-rb-it">
|
|
|
+ <div>(AVC告警)1#高侧母线无功减闭锁</div>
|
|
|
+ </div>
|
|
|
+ <div class="pn-rb-it">
|
|
|
+ <div>(AVC告警)1#高侧母线无功调节指令方式异常</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import yfjd from '@/assets/png/yfjd.png'
|
|
|
+export default {
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ yfjd: yfjd,
|
|
|
+ dotArr1: [
|
|
|
+ {
|
|
|
+ name: '35kV母线电压目标值',
|
|
|
+ num: 0,
|
|
|
+ unit: 'kV'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '35kV母线电压实时值',
|
|
|
+ num: 0,
|
|
|
+ unit: 'kV'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '35kV母线无功目标值',
|
|
|
+ num: 0,
|
|
|
+ unit: 'kVar'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '35kV母线无功实时值',
|
|
|
+ num: 0,
|
|
|
+ unit: 'kVar'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '人工设定电压目标值',
|
|
|
+ num: 0,
|
|
|
+ unit: 'kV'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '远方设定电压目标值',
|
|
|
+ num: 0,
|
|
|
+ unit: 'kV'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '35kV母线可增无功值',
|
|
|
+ num: 0,
|
|
|
+ unit: 'kVar'
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ dataObj: {
|
|
|
+ dyssz: 0,
|
|
|
+ wgssz: 0,
|
|
|
+ dysxz: 0,
|
|
|
+ dygjsxz: 0,
|
|
|
+ dygjxxz: 0,
|
|
|
+ dyxxz: 0
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ props:{
|
|
|
+ datas: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ datas(val){
|
|
|
+ this.funSetDot(val)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ funSetDot(obj){
|
|
|
+ this.dataObj = {
|
|
|
+ dyssz: obj.akavcai001,
|
|
|
+ wgssz: obj.akavcai002,
|
|
|
+ dysxz: obj.akavcai003,
|
|
|
+ dygjsxz: obj.akavcai004,
|
|
|
+ dygjxxz: obj.akavcai005,
|
|
|
+ dyxxz: obj.akavcai006
|
|
|
+ }
|
|
|
+ this.dotArr1[0].num = obj.akavcai007
|
|
|
+ this.dotArr1[1].num = obj.akavcai008
|
|
|
+ this.dotArr1[2].num = obj.akavcai009
|
|
|
+ this.dotArr1[3].num = obj.akavcai010
|
|
|
+ this.dotArr1[4].num = obj.akavcai011
|
|
|
+ this.dotArr1[5].num = obj.akavcai012
|
|
|
+ // this.dotArr1[6].num = obj.akavcai013
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+ this.funSetDot(this.datas)
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.d-tt {
|
|
|
+ font-size: 24px;
|
|
|
+ color: white;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.d-subtt {
|
|
|
+ font-size: 20px;
|
|
|
+ color: white;
|
|
|
+ height: 24px;
|
|
|
+ line-height: 24px;
|
|
|
+ padding-left: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.d-pn {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 10px;
|
|
|
+ padding-top: 10px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ color: white;
|
|
|
+ border: 2px solid rgba(255, 255, 255, 0.6);
|
|
|
+
|
|
|
+ // height: 467px;
|
|
|
+ .d-pn-tb {
|
|
|
+ width: calc(50% - 40px);
|
|
|
+ margin-bottom: 10px;
|
|
|
+ margin-right: 20px;
|
|
|
+ margin-left: 20px;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.6);
|
|
|
+
|
|
|
+ .flex {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pn-tt {
|
|
|
+ color: white;
|
|
|
+ text-align: center;
|
|
|
+ padding: 10px 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pn-rb {
|
|
|
+ justify-content: space-around;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pn-rb-it {
|
|
|
+ width: 40%;
|
|
|
+ height: 30px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ color: black;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 26px;
|
|
|
+ border: 2px solid white;
|
|
|
+ background: rgb(41, 238, 14);
|
|
|
+ }
|
|
|
+
|
|
|
+ table {
|
|
|
+ width: 100%;
|
|
|
+ border-collapse: collapse;
|
|
|
+ }
|
|
|
+
|
|
|
+ td {
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.6);
|
|
|
+ text-align: center;
|
|
|
+ padding-right: 10px;
|
|
|
+ height: 36px;
|
|
|
+ color: rgba(255, 255, 255, 0.75);
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(2) {
|
|
|
+ color: rgb(41, 238, 14);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .d-pn-ul {
|
|
|
+ width: 100%;
|
|
|
+ padding: 20px 30px 0 20px;
|
|
|
+ border-left: 2px solid rgba(255, 255, 255, 0.6);
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-items: flex-start;
|
|
|
+ align-content: flex-start;
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+
|
|
|
+ .d-pn-ul-li {
|
|
|
+ width: 44%;
|
|
|
+ height: 40px;
|
|
|
+ // line-height: 40px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ background-image: linear-gradient(to bottom, rgb(145, 145, 240), rgb(245, 245, 245), rgb(145, 145, 233));
|
|
|
+ color: rgb(0, 0, 179);
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 6px;
|
|
|
+ margin-right: 10px;
|
|
|
+ display: flex;
|
|
|
+ font-size: 14px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ &[data-active='true'] {
|
|
|
+ background-image: linear-gradient(to bottom, red, rgb(243, 136, 128), red);
|
|
|
+ color: rgb(255, 196, 0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}</style>
|
