<template>
|
<div class="main">
|
<!-- <div class="title vertical_middle">负载柜手动加载画面</div> -->
|
<div class="flex_contain">
|
<div class="item" v-for="(item, index) in list" :key="index">
|
<!-- 主开关 -->
|
<div class="btn_main">
|
<div class="lay_label vertical_middle">{{item.dev_name}}</div>
|
<div class="lay_content vertical_middle">
|
<div class="btn_3d" v-btn-confirm="handleConfirm" data-fn="switchOff" data-confirmTxt="全部分闸确认" :param="JSON.stringify(['CONTEXT.list[' + index + ']'])">全部分闸</div>
|
</div>
|
</div>
|
<!-- 是否允许合闸 -->
|
<div class="info_voltage">
|
<div class="lay_label vertical_middle">
|
是否允许合闸
|
</div>
|
<div class="lay_content vertical_middle">
|
<div class="nowrap_indicator" :class="{'status_off': !item.allow_close, 'status_normal': item.allow_close}"></div>
|
</div>
|
</div>
|
<!-- 电压 -->
|
<div class="info_voltage">
|
<div class="lay_label vertical_middle">
|
电压
|
</div>
|
<div class="lay_content vertical_middle">
|
{{item.actual_mov}} V
|
</div>
|
</div>
|
<!-- 电流 -->
|
<div class="info_electricity">
|
<div class="lay_label vertical_middle">
|
电流
|
</div>
|
<div class="lay_content vertical_middle">
|
{{item.actual_curr}} A
|
</div>
|
</div>
|
<!-- 已输出功率 -->
|
<div class="info_power">
|
<div class="lay_label vertical_middle">
|
已输出功率
|
</div>
|
<div class="lay_content vertical_middle">
|
{{item.output_power}} kVA
|
</div>
|
</div>
|
<!-- 状态 -->
|
<div class="btn_sub_grp">
|
<div class="row" v-for="idx of max_button_num" :key="idx">
|
<div class="lay_label vertical_middle" v-if="idx <= item.FZ_button_num">KM{{idx}} ({{item['FZ_b' + idx + '_power']}}kVA)</div>
|
<div class="lay_label vertical_middle" v-else></div>
|
<div class="lay_content">
|
<div class="vertical_middle">
|
<div class="switch_3D" v-if="idx <= item.FZ_button_num">
|
<span></span>
|
<label class="checkbox">
|
<input type="checkbox"
|
@click="switch3DHandle(item, idx)"
|
v-model="item['FZ_b' + idx]" value="1" class="control" />
|
</label>
|
</div>
|
</div>
|
<div class="vertical_middle">
|
<div class="indicator" v-if="idx <= item.FZ_button_num" :class="{'status_off': !item['FZ_fw' + idx], 'status_normal': item['FZ_fw' + idx]}"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 无数据 -->
|
<div class="data_empty vertical_middle" v-if="!list.length">暂无数据</div>
|
</div>
|
<div class="footer">
|
<div class="btn-grp">
|
<div class="btn_3d" @click="goTo('/load/main')">主画面</div>
|
<div class="btn_3d">手动加载</div>
|
<div class="btn_3d" @click="goTo('/load/auto')">自动加载</div>
|
<div class="btn_3d" @click="goTo('/load/burst')">突加突卸</div>
|
</div>
|
</div>
|
<!-- 弹窗 -->
|
<el-dialog class="el-dialog-center" top="0vh" v-cloak title='操作失败'
|
:visible.sync="confirm.show" width="5.2rem"
|
:close-on-click-modal='false'
|
:close-on-press-escape='true'
|
:show-close='false'
|
@closed="confirm.show = false">
|
<flex-layout>
|
<div class="color-black">
|
<div class="dialog_content">{{confirm.txt}}操作失败, 点击确认后撤销操作</div>
|
</div>
|
<div slot="footer" class="color-black dialog-footer">
|
<el-button type="primary" size="small" @click="confirmOk">确定</el-button>
|
</div>
|
</flex-layout>
|
</el-dialog>
|
<!-- 按钮二次确认 -->
|
<el-dialog
|
:title="confirmTxt"
|
:visible.sync="confirmVisible"
|
width="300px">
|
<!-- <span>{{}}</span> -->
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="confirmVisible = false">取 消</el-button>
|
<el-button type="primary" @click="callBack">确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
|
export default {
|
name: 'ManualLoad',
|
data () {
|
return {
|
confirmTxt: '',
|
confirmVisible: false,
|
cbFn: null,
|
cbParam: null,
|
max_button_num: 0,
|
timer: new this.$common.Timeout(),
|
info: [],
|
list: [],
|
FzBList: {},
|
FzBIgnore: {},
|
confirm: {
|
btnList: {
|
a: {name: 'KM' + 1,
|
dev_id: 1,
|
FzB: 'FzB11'}
|
},
|
curBtnList: {},
|
show: false,
|
txt: ''
|
}
|
}
|
},
|
methods: {
|
goTo (path) {
|
this.$router.push({path});
|
}
|
,callBack () {
|
this.confirmVisible = false;
|
let cbParam = [];
|
this.cbParam.forEach((v) => {
|
if ('string' == typeof v && v.indexOf('CONTEXT') > -1) {
|
let arr = v.split('.');
|
if (arr.length > 2) {
|
console.warn('目前不支持深层属性参数');
|
}
|
let _param = arr[1];
|
if (_param.indexOf('[') > -1) {
|
const reg = /\[|\]/;
|
let _arr = _param.split(reg);
|
cbParam.push(this[_arr[0]][_arr[1]]);
|
} else {
|
cbParam.push(this[_param]);
|
}
|
console.log(this[arr[1]], 99);
|
} else {
|
cbParam.push(v);
|
}
|
});
|
|
this[this.cbFn](...cbParam);
|
}
|
,handleConfirm (obj) {
|
// console.log(obj, 9090);
|
this.confirmTxt = obj.confirmTxt;
|
this.cbFn = obj.cbFn;
|
this.cbParam = obj.cbParam;
|
this.confirmVisible = true;
|
}
|
,getInfo () {
|
return this.$api.load.getInfo().then((res) => {
|
res = JSON.parse(res.data.result);
|
if (res.code) {
|
this.info = res.data;
|
}
|
});
|
}
|
// 全部分闸
|
,switchOff (obj) {
|
// 根据机柜信息构造查询条件
|
let searchParams = {
|
all_open: '1',
|
dev_id: obj.dev_id,
|
dev_ip: obj.dev_ip
|
};
|
// 查询后台
|
this.$api.load.allBtnControl(searchParams).then(res=>{
|
res = JSON.parse(res.data.result);
|
if(res.code) {
|
this.$message({
|
type: 'success',
|
message: res.msg
|
});
|
}else {
|
this.$message({
|
type: 'error',
|
message: res.msg
|
});
|
}
|
}).catch(error=>{
|
console.warn(error);
|
});
|
}
|
// 查询显示数据
|
,getStatus () {
|
this.$api.load.getManualStatus().then((res) => {
|
let re = JSON.parse(res.data.result);
|
let list = [];
|
// console.log(re, 999999);
|
if (re.code) {
|
this.info.forEach((v, idx) => {
|
list[idx] = {};
|
this.max_button_num = this.max_button_num > v.FZ_button_num ? this.max_button_num : v.FZ_button_num;
|
|
for (let i = 0, j = re.data.length; i < j; i++) {
|
if (re.data[i].dev_id == v.dev_id) {
|
let data = re.data[i];
|
|
// 更改 FZ_b 的值 2,0 => false 1 => true
|
let reg = /^FZ_b\d+$/;
|
Object.keys(data).forEach((val) => {
|
if (reg.test(val)) {
|
if (this.checkFzBIgnore(data.dev_id, val)) {
|
// 赋值
|
data[val] = this.FzBIgnore[val + data.dev_id].value;
|
// 倒计时减1
|
this.FzBIgnore[val + data.dev_id].time--;
|
// 如果计数器为0 则清除项
|
if (0 == this.FzBIgnore[val + data.dev_id].time) {
|
delete this.FzBIgnore[val + data.dev_id];
|
}
|
} else if (this.checkFzBIsChange(data.dev_id, val)) {
|
data[val] = data[val] == 1;
|
} else {
|
data[val] = this.FzBList[val+data.dev_id];
|
}
|
}
|
});
|
|
list[idx] = data;
|
list[idx]['dev_ip'] = v.dev_ip;
|
// list[idx]['FZ_button_num'] = v.FZ_button_num;
|
break;
|
}
|
}
|
});
|
this.list = list;
|
}
|
});
|
}
|
// 轮询
|
,loop () {
|
this.timer.start(() => {
|
this.getStatus();
|
this.timer.open();
|
}, 1000);
|
}
|
,checkFzBIsChange(dev_id, val) {
|
let change = true;
|
// 遍历FzBList
|
Object.keys(this.FzBList).forEach(key=>{
|
if(key == val+dev_id) {
|
change = false;
|
}
|
});
|
return change;
|
}
|
// 查询忽略
|
,checkFzBIgnore (dev_id, val) {
|
let flag = false;
|
Object.keys(this.FzBIgnore).forEach((key) => {
|
if (key == val + dev_id) {
|
flag = true;
|
}
|
});
|
return flag;
|
}
|
// KM开关切换
|
,switch3DHandle(item, index) {
|
// 根据机柜信息和点击的按钮的编号构造查询条件
|
let searchParams = {
|
dev_id: item.dev_id,
|
num: index,
|
dev_ip: item.dev_ip
|
};
|
// 设置FZ_b的值
|
let FzB = 'FZ_b'+index;
|
// console.log(item[FzB], '===状态');
|
/*if (!FzB && !item.allow_close) {
|
this.$message({
|
type: 'warning',
|
message: '当前机柜不允许合闸'
|
});
|
return false;
|
}*/
|
|
// 设置FzB的值
|
searchParams[FzB] = item[FzB]?2:1;
|
// 设置等待的按钮
|
this.$set(this.FzBList, FzB+item.dev_id, searchParams[FzB]==1?1:0);
|
|
// 请求后台
|
this.$api.load.btnControl(searchParams).then(res=>{
|
res = JSON.parse(res.data.result);
|
if(res.code) {
|
this.$message({
|
type: 'success',
|
message: res.msg
|
});
|
// 删除等待指定的等待按钮
|
delete this.FzBList[FzB+item.dev_id];
|
// 加状态 延时轮询 5秒内的查询忽略此条
|
this.$set(this.FzBIgnore, FzB+item.dev_id, {time: 5, value: searchParams[FzB] == 1});
|
}else {
|
this.$message({
|
type: 'error',
|
message: res.msg
|
});
|
// 如果当前提示窗已开 正在处理 则放入btnList;
|
// 否则 直接弹窗处理
|
this.confirm.btnList[FzB + item.dev_id] = {
|
name: 'KM' + index,
|
dev_id: item.dev_id,
|
FzB: FzB + item.dev_id
|
};
|
if (!this.confirm.show) {
|
let txt = '';
|
Object.keys(this.confirm.btnList).forEach((v) => {
|
txt += (txt != '' ? '、' : '') + '机柜' + this.confirm.btnList[v].dev_id + ': ' + this.confirm.btnList[v].name;
|
this.confirm.curBtnList[v] = this.confirm.btnList[v];
|
});
|
|
this.confirm.txt = txt;
|
this.confirm.show = true;
|
}
|
}
|
}).catch(error=>{
|
console.warn(error);
|
})
|
}
|
,confirmOk () {
|
//
|
Object.keys(this.confirm.curBtnList).forEach((v) => {
|
let item = this.confirm.curBtnList[v];
|
delete this.FzBList[item.FzB];
|
delete this.confirm.btnList[v];
|
});
|
|
this.confirm.curBtnList = {};
|
|
this.confirm.show = false;
|
// 检查btnList 如果元素个数不为空 则再弹窗 200ms后
|
if (Object.keys(this.confirm.btnList).length) {
|
setTimeout(() => {
|
if (!this.confirm.show) {
|
let txt = '';
|
Object.keys(this.confirm.btnList).forEach((v) => {
|
txt += '机柜' + this.confirm.btnList[v].dev_id + ': ' + this.confirm.btnList[v].name;
|
this.confirm.curBtnList[v] = this.confirm.btnList[v];
|
});
|
|
this.confirm.txt = txt;
|
this.confirm.show = true;
|
}
|
}, 100);
|
}
|
}
|
},
|
mounted () {
|
this.getInfo().then(() => {
|
this.loop();
|
});
|
},
|
destroyed () {
|
this.timer.stop();
|
}
|
|
}
|
</script>
|
<style scoped>
|
.main {
|
margin: 0;
|
padding: 0 0 26px 0;
|
width: 100%;
|
height: 100%;
|
display: -webkit-flex;
|
display: flex;
|
flex-direction: column;
|
|
/* background: radial-gradient(circle, rgba(0, 0, 20, .1) 30%,transparent 0) 0 0, radial-gradient(circle, rgba(0, 0, 200, .1) 30%,transparent 0) 10px 10px;
|
background-size: 20px 20px;*/
|
}
|
.title {
|
height: 60px;
|
flex-shrink: 0;
|
text-align: center;
|
}
|
.flex_contain {
|
flex: auto;
|
display: -webkit-flex;
|
display: flex;
|
padding: 0 10px;
|
}
|
.vertical_middle {
|
display: -webkit-flex;
|
display: flex;
|
/*flex-direction: column;*/
|
justify-content: center;
|
align-items: center;
|
}
|
.data_empty {
|
flex: auto;
|
background: rgba(0, 0, 0, .5);
|
}
|
.item {
|
flex: auto;
|
margin: 10px;
|
border: 2px #fff solid;
|
display: -webkit-flex;
|
display: flex;
|
/*color: #6963bd;*/
|
flex-direction: column;
|
text-align: center;
|
font-size: .16rem;
|
}
|
|
|
.lay_label {
|
flex: 1;
|
border-right: 1px #fff solid;
|
}
|
.lay_content {
|
flex: 1.6;
|
}
|
.btn_sub_grp .row,
|
.info_power,
|
.info_electricity,
|
.info_voltage,
|
.btn_main {
|
border-bottom: 1px #fff solid;
|
}
|
.btn_sub_grp .row:last-of-type {
|
border: 0 none;
|
}
|
.btn_sub_grp .row .lay_content {
|
flex: 1.6;
|
display: -webkit-flex;
|
display: flex;
|
}
|
.btn_sub_grp .row .lay_content > div {
|
flex: 1;
|
}
|
.btn_sub_grp .row .lay_content > div:first-of-type {
|
border-right: 1px #fff solid;
|
}
|
|
.btn_main {
|
flex: 1;
|
display: -webkit-flex;
|
display: flex;
|
}
|
.info_voltage {
|
flex: 1;
|
display: -webkit-flex;
|
display: flex;
|
}
|
.info_electricity {
|
flex: 1;
|
display: -webkit-flex;
|
display: flex;
|
}
|
.info_power {
|
flex: 1;
|
display: -webkit-flex;
|
display: flex;
|
}
|
.btn_sub_grp {
|
flex: 12;
|
display: -webkit-flex;
|
display: flex;
|
flex-direction: column;
|
}
|
.btn_sub_grp .row {
|
flex: 1;
|
display: -webkit-flex;
|
display: flex;
|
}
|
.indicator,
|
.nowrap_indicator {
|
width: 40px;
|
height: 40px;
|
}
|
|
/* .nowrap_indicator.status_normal,
|
.cell_indicator div.status_normal,
|
.indicator.status_normal {
|
background: url(~@/assets/images/light_g.png) 50% 50% / 80% auto no-repeat;
|
}
|
.nowrap_indicator.status_warn,
|
.cell_indicator div.status_warn,
|
.indicator.status_warn {
|
background: url(~@/assets/images/light_y.png) 50% 50% / 80% auto no-repeat;
|
}
|
.nowrap_indicator.status_error,
|
.cell_indicator div.status_error,
|
.indicator.status_error {
|
background: url(~@/assets/images/light_r.png) 50% 50% / 80% auto no-repeat;
|
}
|
.nowrap_indicator.status_off,
|
.cell_indicator div.status_off,
|
.indicator.status_off {
|
background: url(~@/assets/images/light_off.png) 50% 50% / 80% auto no-repeat;
|
} */
|
.footer {
|
height: 58px;
|
/*background: rgba(0, 0, 0, .3);*/
|
flex-shrink: 0;
|
display: -webkit-flex;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
}
|
.footer .btn-grp {
|
display: -webkit-flex;
|
display: flex;
|
|
justify-content: space-around;
|
padding: 0 18%;
|
}
|
|
|
.btn_3d {
|
position: relative;
|
/*text-decoration: none;*/
|
background-color: #25a5c2;
|
/*font-family: 'Yanone Kaffeesatz';*/
|
font-size: .14rem;
|
color: #fff;
|
font-weight: 700;
|
/*font-size: 3em;*/
|
display: block;
|
padding: 4px 6px;
|
-webkit-border-radius: 8px;
|
-moz-border-radius: 8px;
|
border-radius: 8px;
|
-webkit-box-shadow: 0px 9px 0px rgba(0,126,152,1), 0px 9px 25px rgba(0,0,0,.7);
|
-moz-box-shadow: 0px 9px 0px rgba(0,126,152,1), 0px 9px 25px rgba(0,0,0,.7);
|
box-shadow: 0px 9px 0px rgba(0,126,152,1), 0px 9px 25px rgba(0,0,0,.7);
|
/*margin: 100px auto;*/
|
/*width: 160px;*/
|
text-align: center;
|
|
-webkit-transition: all .1s ease;
|
-moz-transition: all .1s ease;
|
-ms-transition: all .1s ease;
|
-o-transition: all .1s ease;
|
transition: all .1s ease;
|
top: -4px;
|
}
|
.btn_3d:active {
|
-webkit-box-shadow: 0px 3px 0px rgba(0,126,152,1), 0px 3px 6px rgba(0,0,0,.9);
|
-moz-box-shadow: 0px 3px 0px rgba(0,126,152,1), 0px 3px 6px rgba(0,0,0,.9);
|
box-shadow: 0px 3px 0px rgba(0,126,152,1), 0px 3px 6px rgba(0,0,0,.9);
|
position: relative;
|
top: 2px;
|
}
|
.footer .btn-grp .btn_3d {
|
padding: 6px 16px;
|
}
|
.dialog_content {
|
color: #333;
|
padding: .1rem;
|
}
|
.dialog-footer {
|
padding: .1rem;
|
text-align: right;
|
}
|
|
/*3d switch*/
|
.switch_3D {
|
height: 30px;
|
width: 64px;
|
position: relative;
|
/*top: 50%;
|
left: 50%;*/
|
|
-webkit-border-radius: 15px;
|
border-radius: 15px;
|
background-color: #d1d1d1;
|
|
background-image: -webkit-linear-gradient(top, #d1d1d1 0%, #fefbf7 100%);
|
background-image: linear-gradient(to bottom, #d1d1d1 0%, #fefbf7 100%);
|
}
|
.switch_3D:after {
|
height: 26px;
|
width: 60px;
|
position: absolute;
|
top: 2px;
|
left: 2px;
|
content: '';
|
z-index: 2;
|
-webkit-border-radius: 15px;
|
border-radius: 15px;
|
background-color: #a5a5a5;
|
background-image: -webkit-linear-gradient(top, #a5a5a5 0%, #e8d7be 100%);
|
background-image: linear-gradient(to bottom, #a5a5a5 0%, #e8d7be 100%);
|
}
|
|
.switch_3D .checkbox {
|
height: 22px;
|
width: 56px;
|
position: absolute;
|
top: 4px;
|
left: 4px;
|
z-index: 100;
|
-webkit-border-radius: 11px;
|
border-radius: 11px;
|
-webkit-box-shadow: inset 0px 9px 15px rgba(0, 0, 0, 0.53), inset 0 -8px 10px rgba(0, 0, 0, 0.14);
|
box-shadow: inset 0px 9px 15px rgba(0, 0, 0, 0.53), inset 0 -8px 10px rgba(0, 0, 0, 0.14);
|
background-color: #f28a00;
|
background-image: -webkit-linear-gradient(top, #f28a00 0%, #fb2522 67%, #fb1010 100%);
|
background-image: linear-gradient(to bottom, #f28a00 0%, #fb2522 67%, #fb1010 100%);
|
}
|
.switch_3D .checkbox:after {
|
height: 22px;
|
width: 28px;
|
position: absolute;
|
top: 0;
|
left: 0;
|
content: '';
|
z-index: 99;
|
-webkit-border-radius: 11px;
|
border-radius: 11px 0 0 11px;
|
-webkit-box-shadow: inset 0px 9px 15px rgba(0, 0, 0, 0.53), inset 0 -8px 10px rgba(0, 0, 0, 0.14);
|
box-shadow: inset 0px 9px 15px rgba(0, 0, 0, 0.53), inset 0 -8px 10px rgba(0, 0, 0, 0.14);
|
background-color: #b1dd00;
|
background-image: -webkit-linear-gradient(top, #b1dd00 0%, #07b85e 67%, #07b85e 100%);
|
background-image: linear-gradient(to bottom, #b1dd00 0%, #07b85e 67%, #07b85e 100%);
|
}
|
|
.switch_3D .control {
|
height: 24px;
|
width: 36px;
|
outline: 0;
|
position: absolute;
|
top: -4px;
|
left: -4px;
|
z-index: 101;
|
-webkit-appearance: none;
|
-webkit-border-radius: 12px;
|
border-radius: 12px;
|
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3), 0 5px 15px rgba(0, 0, 0, 0.55), inset 0 2px 0 #fafafa, inset 0 -2px 0 #ada39d;
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3), 0 5px 15px rgba(0, 0, 0, 0.55), inset 0 2px 0 #fafafa, inset 0 -2px 0 #ada39d;
|
background-color: #efefef;
|
background-image: -webkit-linear-gradient(top, #efefef 32%, #bcb9b8 100%);
|
background-image: linear-gradient(to bottom, #efefef 32%, #bcb9b8 100%);
|
-webkit-transition: transform 0.2s ease-in-out;
|
transition: transform 0.2s ease-in-out;
|
}
|
.switch_3D .control:checked {
|
-webkit-transform: translateX(20px);
|
transform: translateX(20px);
|
/*left: 91px;*/
|
}
|
.switch_3D .control:after {
|
height: 12px;
|
width: 12px;
|
position: absolute;
|
right: 4px;
|
top: 6px;
|
content: '';
|
z-index: 101;
|
-webkit-border-radius: 50%;
|
border-radius: 50%;
|
background-color: #c2c0be;
|
background-image: -webkit-linear-gradient(top, #c2c0be 0%, #d7d7d7 72%);
|
background-image: linear-gradient(to bottom, #c2c0be 0%, #d7d7d7 72%);
|
}
|
.btn_wait:before,
|
.btn_wait::before {
|
content: '';
|
position: absolute;
|
left: 0;
|
right: 0;
|
top: 0;
|
bottom: 0;
|
z-index: 199;
|
-webkit-border-radius: 15px;
|
border-radius: 15px;
|
border: 2px solid #15e3f3;
|
animation: borderAround 1.5s infinite linear;
|
}
|
.switch_3D span {
|
display: none;
|
}
|
.btn_wait span {
|
display: block;
|
position: absolute;
|
left: 0;
|
right: 0;
|
top: 0;
|
bottom: 0;
|
z-index: 109;
|
-webkit-border-radius: 15px;
|
border-radius: 15px;
|
background: rgba(0, 0, 0, .2);
|
}
|
@-webkit-keyframes borderAround {
|
0%, 100% {
|
clip: rect(0 64px 4px 0);
|
}
|
33.2% {
|
clip: rect(0 64px 30px 60px);
|
}
|
49.8% {
|
clip: rect(26px 64px 30px 0);
|
}
|
83% {
|
clip: rect(0 4px 64px 0);
|
}
|
}
|
@keyframes borderAround {
|
0%, 100% {
|
clip: rect(0 64px 4px 0);
|
}
|
33.2% {
|
clip: rect(0 64px 30px 60px);
|
}
|
49.8% {
|
clip: rect(26px 64px 30px 0);
|
}
|
83% {
|
clip: rect(0 4px 64px 0);
|
}
|
}
|
|
</style>
|
