<template>
|
<div class="p-main">
|
<div class="p-content flex-r">
|
<div class="p-left flex-c">
|
<panel class="panel group" title="遥测量模拟(组端)">
|
<div slot="tools" class="btn-grp">
|
<gradient-btn size="xs" @click="selectAll('checkList1')"
|
>全选</gradient-btn
|
>
|
<gradient-btn
|
size="xs"
|
:disabled="!checkList1.some((v) => v == true) || !hasPermission"
|
@click="batchGroupSet"
|
>批量给定</gradient-btn
|
>
|
</div>
|
<div class="content">
|
<div class="grid1">
|
<yc-grid :count="props1.length" :config="props1">
|
<template v-slot="{ data, index }">
|
<card
|
:ref="'group_' + index"
|
:option="data[index]"
|
:checked.sync="checkList1[index]"
|
:datas="rtData"
|
></card>
|
</template>
|
</yc-grid>
|
</div>
|
</div>
|
</panel>
|
<panel class="panel mon" title="遥测量模拟(单体)">
|
<div slot="tools" class="btn-grp">
|
<el-radio-group
|
v-model="battInfoType"
|
class="radio-grp"
|
size="mini"
|
>
|
<el-radio-button :label="0">电压</el-radio-button>
|
<el-radio-button :label="1">内阻</el-radio-button>
|
<el-radio-button :label="2">温度</el-radio-button>
|
</el-radio-group>
|
</div>
|
<div class="content flex-c">
|
<div class="banner btn-grp" v-show="0 == battInfoType">
|
<gradient-btn size="xs" @click="selectAll('checkListMon', 0)"
|
>全选</gradient-btn
|
>
|
<gradient-btn
|
size="xs"
|
:disabled="
|
!checkListMon[battInfoType].some((v) => v == true) ||
|
!hasPermission
|
"
|
@click="batchMonSet(0)"
|
>批量设定</gradient-btn
|
>
|
</div>
|
<div class="banner btn-grp" v-show="1 == battInfoType">
|
<gradient-btn size="xs" @click="selectAll('checkListMon', 1)"
|
>全选</gradient-btn
|
>
|
<gradient-btn
|
size="xs"
|
:disabled="
|
!checkListMon[battInfoType].some((v) => v == true) ||
|
!hasPermission
|
"
|
@click="batchMonSet(1)"
|
>批量设定</gradient-btn
|
>
|
</div>
|
<div class="banner btn-grp" v-show="2 == battInfoType">
|
<gradient-btn size="xs" @click="selectAll('checkListMon', 2)"
|
>全选</gradient-btn
|
>
|
<gradient-btn
|
size="xs"
|
:disabled="
|
!checkListMon[battInfoType].some((v) => v == true) ||
|
!hasPermission
|
"
|
@click="batchMonSet(2)"
|
>批量设定</gradient-btn
|
>
|
</div>
|
<div class="grid1 scroller" v-show="0 == battInfoType">
|
<yc-grid :count="monCount" :config="monProps[battInfoType]">
|
<template v-slot="{ data, index }">
|
<card-batt
|
:ref="'mon_type0_' + index"
|
:option="data[index]"
|
:checked.sync="checkListMon[battInfoType][index]"
|
:datas="monData"
|
></card-batt>
|
</template>
|
</yc-grid>
|
</div>
|
<div class="grid1 scroller" v-show="1 == battInfoType">
|
<yc-grid :count="monCount" :config="monProps[battInfoType]">
|
<template v-slot="{ data, index }">
|
<card-batt
|
:ref="'mon_type1_' + index"
|
:option="data[index]"
|
:checked.sync="checkListMon[battInfoType][index]"
|
:datas="monData"
|
></card-batt>
|
</template>
|
</yc-grid>
|
</div>
|
<div class="grid1 scroller" v-show="2 == battInfoType">
|
<yc-grid :count="monCount" :config="monProps[battInfoType]">
|
<template v-slot="{ data, index }">
|
<card-batt
|
:ref="'mon_type2_' + index"
|
:option="data[index]"
|
:checked.sync="checkListMon[battInfoType][index]"
|
:datas="monData"
|
></card-batt>
|
</template>
|
</yc-grid>
|
</div>
|
</div>
|
</panel>
|
</div>
|
<panel class="panel right" title="遥控量模拟">
|
<div class="content">
|
<el-row class="el_row" :gutter="20">
|
<el-col class="el_col" :span="12">
|
<div class="card3">
|
<div class="card-title">蓄电池放电模拟</div>
|
<div class="card-content">
|
<div class="item-row">
|
<div class="label">蓄电池实时状态:</div>
|
<div class="value">{{ battState }}</div>
|
</div>
|
<div class="item-row">
|
<div class="label">蓄电池放电模拟:</div>
|
<div class="btn-grp">
|
<gradient-btn
|
size="sm"
|
:disabled="!hasPermission"
|
@click="setParam"
|
>开始放电</gradient-btn
|
>
|
<gradient-btn
|
active
|
size="sm"
|
:disabled="!hasPermission || !canStopDis"
|
@click="control(0)"
|
>停止放电</gradient-btn
|
>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col class="el_col" :span="12">
|
<div class="card3">
|
<div class="card-title">蓄电池内阻模拟</div>
|
<div class="card-content">
|
<div class="item-row">
|
<div class="label">蓄电池实时状态:</div>
|
<div class="value">{{ battState }}</div>
|
</div>
|
<div class="item-row">
|
<div class="label">内阻测试模拟:</div>
|
<div class="btn-grp">
|
<gradient-btn
|
size="sm"
|
:disabled="!hasPermission || !canStart"
|
@click="control(1)"
|
>启动内阻测试</gradient-btn
|
>
|
<gradient-btn
|
active
|
size="sm"
|
:disabled="!hasPermission || !canStopRes"
|
@click="control(2)"
|
>停止内阻测试</gradient-btn
|
>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col class="el_col" :span="12">
|
<div class="card3">
|
<div class="card-title">核容装置K1/D1测试模拟</div>
|
<div class="card-content">
|
<div class="item-row">
|
<div class="label">核容装置状态:</div>
|
<div class="value">{{ hrState }}</div>
|
</div>
|
<div class="item-row">
|
<div class="label">K1/D1测试模拟:</div>
|
<div class="btn-grp">
|
<gradient-btn
|
size="sm"
|
:disabled="!hasPermission || !canStart"
|
@click="control(3)"
|
>启动K1/D1测试</gradient-btn
|
>
|
<gradient-btn
|
active
|
size="sm"
|
:disabled="!hasPermission || !canStopKD"
|
@click="control(4)"
|
>停止K1/D1测试</gradient-btn
|
>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col class="el_col" :span="12">
|
<div class="card3">
|
<div class="card-title">核容装置重启模拟</div>
|
<div class="card-content">
|
<div class="item-row">
|
<div class="label">核容装置状态:</div>
|
<div class="value">{{ hrState }}</div>
|
</div>
|
<div class="item-row">
|
<div class="label">装置重启模拟:</div>
|
<div class="btn-grp">
|
<gradient-btn
|
size="sm"
|
:disabled="!hasPermission || !canStart"
|
@click="control(5)"
|
>重启核容装置</gradient-btn
|
>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-col>
|
<!-- <el-col class="el_col" :span="12">
|
<div class="card3">
|
<div class="card-title">核容装置IP配置</div>
|
<div class="card-content">
|
<div class="item-row">
|
<div class="label">核容装置IP地址:</div>
|
<div class="value">192.168.10.112</div>
|
</div>
|
<div class="item-row">
|
<div class="label">核容装置IP网关:</div>
|
<div class="value">192.168.10.1</div>
|
</div>
|
<div class="item-row">
|
<div class="label">核容装置子网掩码:</div>
|
<div class="value">255.255.255.0</div>
|
</div>
|
<div class="item-row">
|
<div class="label">核容装置配置IP地址:</div>
|
<div class="value">192.168.10.112</div>
|
</div>
|
<div class="item-row">
|
<div class="label">核容装置配置IP网关:</div>
|
<div class="value">192.168.10.1</div>
|
</div>
|
<div class="item-row">
|
<div class="label">核容装置配置子网掩码:</div>
|
<div class="value">255.255.255.0</div>
|
</div>
|
<div class="item-row">
|
<div class="label">装置重启模拟:</div>
|
<div class="btn-grp">
|
<gradient-btn size="sm" :disabled="!hasPermission"
|
>暂时配置生效</gradient-btn
|
>
|
<gradient-btn active size="sm" :disabled="!hasPermission"
|
>永久配置生效</gradient-btn
|
>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-col> -->
|
</el-row>
|
</div>
|
</panel>
|
</div>
|
<el-dialog
|
title="设置充放电参数"
|
:visible.sync="paramVisible"
|
top="100px"
|
:close-on-click-modal="false"
|
class="dialog-center"
|
width="800px"
|
center
|
>
|
<discharge-params :can-start="canStart"></discharge-params>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import Panel from "@/components/panel.vue";
|
import ycGrid from "@/components/ycGrid.vue";
|
import AlarmCard from "@/components/alarmCard.vue";
|
import gradientBtn from "@/components/gradientBtn.vue";
|
import card from "./components/card";
|
import cardBatt from "./components/cardBatt";
|
import IpCard from "./components/ipCard";
|
import dischargeParams from "./components/dischargeParams";
|
|
import props_const from "./js/const_props";
|
const { props1, props2, getPropList } = props_const;
|
|
import createWs from "@/assets/js/websocket/plus";
|
const WSMixin = createWs("ckRtAndSignalAndHr", "ckDevRsAndRtAlm");
|
import { updateGroup, updateMon, control } from "./js/apis";
|
import changeBinaryBits from "@/assets/js/changeBinaryBits";
|
import setBitAtPositions from "@/assets/js/setBitAtPositions";
|
|
export default {
|
name: "hrControl",
|
mixins: [WSMixin],
|
components: {
|
Panel,
|
ycGrid,
|
AlarmCard,
|
gradientBtn,
|
card,
|
cardBatt,
|
IpCard,
|
dischargeParams,
|
},
|
data() {
|
return {
|
paramVisible: false,
|
battInfoType: 0,
|
monData: [],
|
rtData: {
|
isEmpty: true,
|
},
|
props1,
|
props2,
|
checkListMon: [[], [], []],
|
// checkList1_acdc: param_acdc.map(() => false),
|
checkList1: props1.map(() => false),
|
// checkList2_acdc: [],
|
// checkList2_gp: [],
|
};
|
},
|
created() {
|
// 在 created 钩子中初始化数据
|
// this.checkList2_acdc = this.acdc_alarms.map(() => false);
|
// this.checkList2_gp = this.gp_alarms.map(() => false);
|
},
|
computed: {
|
hasPermission() {
|
return this.$store.state.user.downloadFlag == 1;
|
},
|
monCount() {
|
return this.monData.length;
|
},
|
canStopDis() {
|
return this.rtData.devWorkStateReal == 2;
|
},
|
canStart() {
|
return this.rtData.devWorkStateReal == 0;
|
},
|
canStopRes() {
|
return this.rtData.devWorkStateReal == 4;
|
},
|
canStopKD() {
|
return this.rtData.devWorkStateReal == 5;
|
},
|
monProps() {
|
return getPropList(this.monCount);
|
},
|
battState() {
|
return ["浮充", "放电", "充电"][this.rtData.battState] || "未知";
|
},
|
hrState() {
|
return (
|
[
|
"在线浮充",
|
"预充电(限流充电)",
|
"核容测试",
|
"停电放电",
|
"内阻测试",
|
"K1/D1 测试",
|
][this.rtData.devWorkStateReal] || "未知"
|
);
|
},
|
// checkListMon() {
|
// let arr = [];
|
// for (let i = 0, j = this.monCount; i < j; i++) {
|
// arr.push(false);
|
// }
|
// return [[...arr], [...arr], [...arr]];
|
// },
|
},
|
watch: {
|
monCount(n, o) {
|
if (n && n != o) {
|
this.checkListMon = (() => {
|
let arr = [];
|
for (let i = 0, j = n; i < j; i++) {
|
arr.push(false);
|
}
|
return [[...arr], [...arr], [...arr]];
|
})();
|
}
|
},
|
},
|
methods: {
|
control(type) {
|
let title = "";
|
let opCmd = 0;
|
let { stopDis, startRes, stopRes, startK1, stopK1, restart } = this.cmd;
|
switch (type) {
|
// 停止放电
|
case 0:
|
title = "是否停止放电?";
|
opCmd = stopDis;
|
break;
|
|
// 启动内阻
|
case 1:
|
title = "是否启动内阻测试?";
|
opCmd = startRes;
|
break;
|
// 停止内阻
|
case 2:
|
title = "是否停止内阻测试?";
|
opCmd = stopRes;
|
break;
|
// 启动KD
|
case 3:
|
title = "是否启动K1/D1测试?";
|
opCmd = startK1;
|
break;
|
|
// 停止KD
|
case 4:
|
title = "是否停止K1/D1测试?";
|
opCmd = stopK1;
|
break;
|
// 重启
|
case 5:
|
title = "是否重启核容装置?";
|
opCmd = restart;
|
break;
|
}
|
this.$confirm(title, "提示", {
|
type: "warning",
|
})
|
.then(() => {
|
let loading = this.$layer.loading();
|
control(opCmd)
|
.then((res) => {
|
let { code, data, msg } = res.data;
|
if (code && data) {
|
this.$message.success(msg);
|
} else {
|
this.$message.error(msg);
|
}
|
this.$layer.close(loading);
|
})
|
.catch((err) => {
|
console.log(err);
|
this.$layer.close(loading);
|
});
|
})
|
.catch(() => {});
|
},
|
setParam() {
|
this.paramVisible = true;
|
},
|
onWSMessage1(res) {
|
let { data, data2, data3, data4 } = JSON.parse(res.data);
|
// console.log(data, "=====data??", data2);
|
// this.paramsAlram(data);
|
this.rtData = {
|
...data,
|
...data2,
|
...data3,
|
};
|
this.monData = data4;
|
},
|
selectAll(list, idx) {
|
if (idx == undefined) {
|
this[list] = this[list].map(() => true);
|
} else {
|
let arr = this[list][idx].map(() => true);
|
this.$set(this[list], idx, arr);
|
// this[list][idx] = this[list][idx].map(() => true);
|
}
|
},
|
batchGroupSet(type) {
|
this.$confirm("确认批量给定?", "提示", {
|
type: "warning",
|
})
|
.then(() => {
|
let loading = this.$layer.loading();
|
let params = { logList: [] };
|
let checkList = this.checkList1;
|
checkList
|
.map((v, i) => ({ i, v }))
|
.filter((v) => v.v)
|
.forEach((v) => {
|
let refName = "group_" + v.i;
|
let $el = this.$refs[refName];
|
// console.log($el);
|
params["battIndex"] = 0;
|
params[$el.option.key1] = $el.num;
|
params[$el.option.flag] = 1;
|
params["logList"].push({
|
param: $el.option.flag,
|
paramCn: $el.title,
|
value: $el.num,
|
st: 1,
|
});
|
});
|
|
updateGroup(params)
|
.then((res) => {
|
let { code, data, msg } = res.data;
|
this.$layer.close(loading);
|
this.$message(msg);
|
})
|
.catch((err) => {
|
console.log(err);
|
this.$layer.close(loading);
|
});
|
})
|
.catch(() => {});
|
},
|
batchMonSet(type) {
|
this.$confirm("确认批量执行?", "提示", {
|
type: "warning",
|
})
|
.then(() => {
|
let loading = this.$layer.loading();
|
let params = { logList: [], dataSetList: [] };
|
let checkList = this["checkListMon"][type];
|
|
checkList
|
.map((v, i) => ({ i, v }))
|
.filter((v) => v.v)
|
.forEach((v) => {
|
let refName = `mon_type${type}_` + v.i;
|
let $el = this.$refs[refName];
|
|
let params2 = {};
|
params2[$el.option.key1] = $el.num;
|
params2[$el.option.flag] = 1;
|
params2["battIndex"] = 0;
|
params2["monNum"] = $el.option.monNum;
|
|
params["dataSetList"].push(params2);
|
params["logList"].push({
|
param: $el.option.flag,
|
paramCn: $el.title,
|
value: $el.num,
|
st: 1,
|
monNum: $el.option.monNum,
|
battIndex: 0,
|
});
|
});
|
|
updateMon(params)
|
.then((res) => {
|
let { code, data, msg } = res.data;
|
this.$layer.close(loading);
|
this.$message(msg);
|
})
|
.catch((err) => {
|
console.log(err);
|
this.$layer.close(loading);
|
});
|
})
|
.catch(() => {});
|
},
|
changeIp(ip) {
|
console.log(ip, "hhhhhh");
|
},
|
},
|
|
mounted() {},
|
};
|
</script>
|
|
<style scoped lang="less">
|
.p-main {
|
height: 100%;
|
}
|
.panel {
|
color: #fff;
|
// height: 100%;
|
// flex: 1;
|
&.right {
|
margin-left: 10px;
|
flex: 1.24;
|
.content {
|
height: 100%;
|
padding: 10px 30px;
|
position: relative;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
}
|
}
|
}
|
.p-left {
|
flex: 1;
|
.group {
|
// flex: 1;
|
height: 300px;
|
}
|
.mon {
|
flex: 1.6;
|
margin-top: 10px;
|
}
|
}
|
.btn-grp {
|
padding: 10px;
|
display: flex;
|
}
|
.p-content {
|
height: 100%;
|
.content {
|
height: 100%;
|
padding: 10px;
|
}
|
}
|
.card3 {
|
height: 100%;
|
border: 1px solid #3e8d9d;
|
border-radius: 4px;
|
color: #fff;
|
overflow: hidden;
|
.card-title {
|
background: #0c4d77;
|
height: 30px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding-left: 6px;
|
}
|
.card-content {
|
flex: 1;
|
background: #011f39;
|
display: flex;
|
flex-direction: column;
|
padding: 6px;
|
|
.item-row {
|
display: flex;
|
align-items: center;
|
.label {
|
width: 12em;
|
line-height: 30px;
|
}
|
.value {
|
color: #78eef8;
|
}
|
.btn-grp {
|
padding-left: 0;
|
flex: 1;
|
display: flex;
|
justify-content: space-between;
|
:deep(.gradient-btn) {
|
min-width: 110px;
|
}
|
}
|
}
|
}
|
}
|
.banner {
|
display: flex;
|
justify-content: flex-end;
|
margin: -10px -10px 0 0;
|
}
|
.grid1 {
|
flex: 1;
|
}
|
.scroller {
|
overflow-y: auto;
|
}
|
.el_col:nth-child(n + 3) {
|
margin-top: 20px;
|
}
|
</style>
|
