<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="item_title vertical_middle">{{item.dev_name}}</div>
|
<!-- 按钮组 -->
|
<div class="item_btn_grp">
|
<div class="vertical_middle">
|
<div class="btn_3d" v-btn-confirm="handleConfirm" data-fn="startLoad" data-confirmTxt="启动加减载确认" :param="JSON.stringify(['CONTEXT.list[' + index + ']'])">启动加减载</div>
|
</div>
|
<div class="vertical_middle">
|
<div class="btn_3d" v-btn-confirm="handleConfirm" data-fn="stopLoad" data-confirmTxt="停止加减载确认" :param="JSON.stringify(['CONTEXT.list[' + index + ']'])">停止加减载</div>
|
</div>
|
<div class="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="indicator_row">
|
<div class="label vertical_middle">自动流程</div>
|
<div class="indicator_grp">
|
<div v-for="index of 5" :key="index" class="wrap_indicator vertical_middle" :class="{'status_off': !item['FZ_autostate' + index], 'status_normal': item['FZ_autostate' + index]}"><div><span>{{index}}</span></div></div>
|
</div>
|
</div>
|
<!-- 数据 -->
|
<div class="data_contain">
|
<!-- 是否允许合闸 -->
|
<div class="row">
|
<div class="label vertical_middle">是否允许合闸</div>
|
<div class="data vertical_middle">
|
<div class="nowrap_indicator" :class="{'status_off': !item.allow_close, 'status_normal': item.allow_close}"></div>
|
</div>
|
</div>
|
<div class="row">
|
<div class="label vertical_middle">设定功率</div>
|
<div class="data editable vertical_middle" title="点击修改" @click="setPower(item)">{{item.set_power}} KVA</div>
|
</div>
|
<div class="row">
|
<div class="label vertical_middle">间隔时间</div>
|
<div class="data editable vertical_middle" title="点击修改" @click="setDelay(item)">{{item.interval_time}} (× 0.1s)</div>
|
</div>
|
<div class="row">
|
<div class="label vertical_middle">已输出功率</div>
|
<div class="data vertical_middle">{{item.output_power}} KVA</div>
|
</div>
|
<div class="row">
|
<div class="label vertical_middle">电压</div>
|
<div class="data vertical_middle">{{item.actual_mov}} V</div>
|
</div>
|
<div class="row">
|
<div class="label vertical_middle">电流</div>
|
<div class="data vertical_middle">{{item.actual_curr}} A</div>
|
</div>
|
</div>
|
<!-- 状态 -->
|
<div class="item_status">
|
<div class="column" v-for="index of 2" :key="index">
|
<div class="sub_item" v-for="idx of 6" :key="idx">
|
<div class="cell vertical_middle" v-if="(index - 1) * 6 + idx <= item.FZ_button_num">KM{{(index - 1) * 6 + idx}}</div>
|
<div class="cell vertical_middle" v-else></div>
|
<div class="cell vertical_middle" v-if="(index - 1) * 6 + idx <= item.FZ_button_num">{{item['FZ_b' + ((index - 1) * 6 + idx) + '_power']}}KVA</div>
|
<div class="cell vertical_middle" v-else></div>
|
<div class="cell_indicator vertical_middle" v-if="(index - 1) * 6 + idx <= item.FZ_button_num"><div :class="{'status_off': !item['FZ_fw' + ((index - 1) * 6 + idx)], 'status_normal': item['FZ_fw' + ((index - 1) * 6 + idx)]}"></div></div>
|
<div class="cell_indicator vertical_middle" v-else></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="footer">
|
<div class="btn-grp">
|
<div class="btn_3d" @click="goTo('/load/main')">主画面</div>
|
<div class="btn_3d" @click="goTo('/load/manual')">手动加载</div>
|
<div class="btn_3d">自动加载</div>
|
<div class="btn_3d" @click="goTo('/load/burst')">突加突卸</div>
|
</div>
|
</div>
|
<!-- 弹窗 -->
|
<el-dialog class="el-dialog-center dialog-drag dialog-white" v-cloak title='修改设定功率'
|
:modal="false"
|
v-dialogDrag
|
:visible.sync="updateSetPower.show" width="5.2rem"
|
:close-on-click-modal='false'
|
@closed="updateSetPower.show = false">
|
<flex-layout>
|
<div class="color-black">
|
<el-form class="updateSetPower" ref="updateSetPower" label-position="right" label-width="160px" size="small" :rules="updateSetPower.rules" :model="updateSetPower.data">
|
<el-col :span="24">
|
<el-form-item label="设定功率(KvA 0~750)" prop="set_power">
|
<el-input v-model="updateSetPower.data.set_power"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-form>
|
</div>
|
<div slot="footer" class="color-black dialog-footer">
|
<el-button type="default" size="small" @click="updateSetPower.show = false">取 消</el-button>
|
<el-button type="primary" size="small" @click="editSetPowerOk">确 定</el-button>
|
</div>
|
</flex-layout>
|
</el-dialog>
|
<!-- 时间间隔弹窗 -->
|
<el-dialog class="el-dialog-center dialog-drag dialog-white" v-cloak title='修改时间间隔'
|
:modal="false"
|
v-dialogDrag
|
:visible.sync="updateDelay.show" width="5.2rem"
|
:close-on-click-modal='false'
|
@closed="updateDelay.show = false">
|
<flex-layout>
|
<div class="color-black">
|
<el-form class="updateDelay" ref="updateDelay" label-position="right" size="small" label-width="160px" :rules="updateDelay.rules" :model="updateDelay.data">
|
<el-col :span="24">
|
<el-form-item label="时间间隔(s 20的倍数)" prop="delay">
|
<el-input v-model="updateDelay.data.delay"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-form>
|
</div>
|
<div slot="footer" class="color-black dialog-footer">
|
<el-button type="default" size="small" @click="updateDelay.show = false">取 消</el-button>
|
<el-button type="primary" size="small" @click="updateDelayOk">确 定</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>
|
|
import FlexLayout from '@/components/FlexLayout'
|
export default {
|
name: 'AutoLoad',
|
components: {
|
FlexLayout
|
},
|
data () {
|
return {
|
confirmTxt: '',
|
confirmVisible: false,
|
cbFn: null,
|
cbParam: null,
|
timer: new this.$common.Timeout(),
|
info: [],
|
list: [],
|
updateSetPower: {
|
show: false,
|
data: {
|
set_power: '',
|
dev_id: '',
|
dev_ip: '',
|
num: 0
|
},
|
rules: {
|
set_power: [{
|
validator: (rule, value, callback) => {
|
// console.log(value);
|
if (!('' + value).trim()) {
|
callback(new Error('功率值必填'));
|
}
|
if (/[^0-9]/.test(value)) {
|
callback(new Error('功率值必须为数值'));
|
}
|
if (value < 0 || value > 750) {
|
callback(new Error('功率值应介于0~750之间'));
|
} else {
|
callback()
|
}
|
},
|
trigger: 'blur'
|
}]
|
}
|
},
|
updateDelay: {
|
show: false,
|
data: {
|
delay: '',
|
dev_id: '',
|
dev_ip: '',
|
num: 0
|
},
|
rules: {
|
delay: [{
|
validator: (rule, value, callback) => {
|
// console.log(value);
|
if (!('' + value).trim()) {
|
callback(new Error('时间间隔不能为空'));
|
}
|
if (/[^0-9]/.test(value)) {
|
callback(new Error('时间间隔必须为数值'));
|
}
|
if (value < 0 || value % 20) {
|
callback(new Error('时间间隔必须大于0且为20的倍数'));
|
} else {
|
callback()
|
}
|
},
|
trigger: 'blur'
|
}]
|
}
|
}
|
}
|
},
|
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.getAutoStatus().then((res) => {
|
let re = JSON.parse(res.data.result);
|
let list = [];
|
// console.log(re);
|
if (re.code) {
|
this.info.forEach((v, idx) => {
|
list[idx] = {};
|
for (let i = 0, j = re.data.length; i < j; i++) {
|
if (re.data[i].dev_id == v.dev_id) {
|
list[idx] = re.data[i];
|
list[idx]['dev_ip'] = v.dev_ip;
|
list[idx]['FZ_button_num'] = v.FZ_button_num;
|
break;
|
}
|
}
|
});
|
this.list = list;
|
}
|
});
|
}
|
// 设定功率
|
,setPower (obj) {
|
// console.log(obj);
|
this.updateSetPower.data.set_power = obj.set_power;
|
this.updateSetPower.data.dev_id = obj.dev_id;
|
this.updateSetPower.data.dev_ip = obj.dev_ip;
|
this.updateSetPower.data.num = obj.FZ_button_num;
|
this.updateSetPower.show = true;
|
}
|
// 设定时间间隔
|
,setDelay (obj) {
|
// console.log(obj);
|
this.updateDelay.data.delay = obj.interval_time;
|
this.updateDelay.data.dev_id = obj.dev_id;
|
this.updateDelay.data.dev_ip = obj.dev_ip;
|
this.updateDelay.data.num = obj.FZ_button_num;
|
this.updateDelay.show = true;
|
}
|
,updateDelayOk () {
|
let param = {
|
interval_time: this.updateDelay.data.delay,
|
dev_id: this.updateDelay.data.dev_id,
|
dev_ip: this.updateDelay.data.dev_ip,
|
num: this.updateDelay.data.num
|
};
|
this.$refs.updateDelay.validate((valid) => {
|
// console.log(valid);
|
if (valid) {
|
this.$api.load.updateDelay(param).then((res) => {
|
let re = JSON.parse(res.data.result);
|
// console.log(re, '======re');
|
if (re.code) {
|
this.$message({
|
type: 'success',
|
message: re.msg
|
});
|
this.updateDelay.show = false;
|
} else {
|
this.$message({
|
type: 'success',
|
message: re.msg
|
});
|
}
|
});
|
}
|
});
|
}
|
,editSetPowerOk () {
|
let param = {
|
set_power: this.updateSetPower.data.set_power,
|
dev_id: this.updateSetPower.data.dev_id,
|
dev_ip: this.updateSetPower.data.dev_ip,
|
num: this.updateSetPower.data.num
|
};
|
this.$refs.updateSetPower.validate((valid) => {
|
// console.log(valid);
|
if (valid) {
|
this.$api.load.updateSetPower(param).then((res) => {
|
let re = JSON.parse(res.data.result);
|
// console.log(re, '======re');
|
if (re.code) {
|
this.$message({
|
type: 'success',
|
message: re.msg
|
});
|
this.updateSetPower.show = false;
|
} else {
|
this.$message({
|
type: 'success',
|
message: re.msg
|
});
|
}
|
});
|
}
|
});
|
}
|
// 轮询
|
,loop () {
|
this.timer.start(() => {
|
this.getStatus();
|
this.timer.open();
|
}, 1000);
|
}
|
// 启动加减载
|
,startLoad(item) {
|
/*if (!item.allow_close) {
|
this.$message({
|
type: 'warning',
|
message: '当前机柜不允许合闸'
|
});
|
return false;
|
}*/
|
debugger;
|
// 根据机柜信息构造查询条件
|
let searchParams = {
|
dev_id: item.dev_id,
|
start_auto: 1,
|
dev_ip: item.dev_ip
|
};
|
// 请求后台
|
this.$api.load.autoLoad(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);
|
});
|
}
|
// 停止加减载
|
,stopLoad(item) {
|
// 根据机柜信息构造查询条件
|
let searchParams = {
|
dev_id: item.dev_id,
|
stop_auto: 1,
|
dev_ip: item.dev_ip
|
};
|
// 请求后台
|
this.$api.load.stopLoad(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);
|
});
|
}
|
},
|
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;
|
}
|
/*.trans_center {
|
position: relative;
|
top: 50%;
|
left: 50%;
|
-webkit-transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
}*/
|
.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;
|
}
|
.item_title {
|
text-align: center;
|
border-bottom: 1px #fff solid;
|
flex: auto;
|
}
|
.item_btn_grp {
|
flex: auto;
|
display: -webkit-flex;
|
display: flex;
|
justify-content: space-around;
|
border-bottom: 1px #fff solid;
|
}
|
.item_btn_grp > div {
|
flex: auto;
|
padding: 0 10px;
|
}
|
.indicator_row {
|
flex: 1.5 1.5 auto;
|
border-bottom: 1px #fff solid;
|
display: -webkit-flex;
|
display: flex;
|
/*flex-direction: column;*/
|
}
|
.indicator_row .row {
|
flex: auto;
|
display: -webkit-flex;
|
display: flex;
|
}
|
.indicator_row .label {
|
border-right: 1px #fff solid;
|
width: 80px;
|
flex-shrink: 0;
|
}
|
.indicator_row .data {
|
flex: auto;
|
}
|
.indicator_grp {
|
flex: auto;
|
display: -webkit-flex;
|
display: flex;
|
padding: 0 10px;
|
justify-content: space-around;
|
}
|
.indicator_grp .indicator {
|
/*flex: auto;*/
|
}
|
.indicator_grp .wrap_indicator div {
|
position: relative;
|
/*margin-top: 4px;*/
|
height: 40px;
|
width: 40px;
|
top: 8px;
|
}
|
.nowrap_indicator {
|
width: 40px;
|
height: 40px;
|
}
|
/* .nowrap_indicator.status_normal,
|
.cell_indicator div.status_normal,
|
.indicator_grp .indicator.status_normal div {
|
background: url(~@/assets/images/light_g.png) 50% 50% / 80% auto no-repeat;
|
}
|
.cell_indicator div.status_warn,
|
.indicator_grp .indicator.status_warn div {
|
background: url(~@/assets/images/light_y.png) 50% 50% / 80% auto no-repeat;
|
}
|
.cell_indicator div.status_error,
|
.indicator_grp .indicator.status_error div {
|
background: url(~@/assets/images/light_r.png) 50% 50% / 80% auto no-repeat;
|
}
|
.nowrap_indicator.status_off,
|
.cell_indicator div.status_off,
|
.indicator_grp .indicator.status_off div {
|
background: url(~@/assets/images/light_off.png) 50% 50% / 80% auto no-repeat;
|
} */
|
.cell_indicator {
|
text-align: center;
|
}
|
.cell_indicator div {
|
width: 40px;
|
height: 40px;
|
display: inline-block;
|
}
|
.indicator_grp .wrap_indicator div span {
|
position: absolute;
|
left: 50%;
|
top: 0;
|
-webkit-transform: translate(-50%, -100%);
|
transform: translate(-50%, -100%);
|
}
|
.data_contain {
|
flex: 5 5 auto;
|
display: -webkit-flex;
|
display: flex;
|
flex-direction: column;
|
}
|
.data_contain .row {
|
flex: auto;
|
border-bottom: 1px #fff solid;
|
display: -webkit-flex;
|
display: flex;
|
}
|
.data_contain .data {
|
flex: 2.2;
|
}
|
.data_contain .label {
|
flex: 1;
|
border-right: 1px #fff solid;
|
}
|
.item_status {
|
font-size: .16rem;
|
flex: 5 5 auto;
|
display: -webkit-flex;
|
display: flex;
|
}
|
.item_status .column {
|
flex: 1;
|
display: -webkit-flex;
|
display: flex;
|
flex-direction: column;
|
}
|
.item_status .sub_item {
|
flex: 1;
|
display: -webkit-flex;
|
display: flex;
|
border-bottom: 1px #fff solid;
|
}
|
.item_status .sub_item:last-of-type {
|
border-bottom: 0 none;
|
}
|
.item_status .cell {
|
flex: 1;
|
border-right: 1px #fff solid;
|
}
|
.item_status .cell:nth-of-type(2) {
|
flex: 1.2;
|
}
|
.item_status .cell_indicator {
|
flex: 1;
|
border-right: 1px #fff solid;
|
}
|
.item_status .column:last-of-type .cell_indicator {
|
border: 0 none;
|
}
|
.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;
|
}
|
.updateDelay,
|
.updateSetPower {
|
padding: .1rem;
|
}
|
.dialog-footer {
|
text-align: right;
|
padding: .1rem;
|
}
|
.editable {
|
cursor: pointer;
|
}
|
.editable:hover {
|
text-decoration: underline;
|
font-weight: bolder;
|
}
|
</style>
|
