<template>
|
<div class="p-main">
|
<el-tabs class="tab" type="border-card" @tab-click="tabClick">
|
<el-tab-pane label="交流/直流配电柜">
|
<div class="tab-content content1 flex-r">
|
<panel class="panel left" title="遥测量模拟">
|
<div slot="leftTools" class="btn-grp">
|
<gradient-btn size="xs" @click="selectAll('checkList1_acdc')"
|
>全选</gradient-btn
|
>
|
<gradient-btn
|
size="xs"
|
@click="cancelSelectAll('checkList1_acdc')"
|
>取消全选</gradient-btn
|
>
|
</div>
|
<div slot="tools" class="btn-grp">
|
<gradient-btn
|
size="xs"
|
:disabled="
|
!checkList1_acdc.some((v) => v == true) || !hasPermission
|
"
|
@click="batchYCSet('acdc', 1)"
|
>批量给定</gradient-btn
|
>
|
<gradient-btn
|
size="xs"
|
:disabled="
|
!checkList1_acdc.some((v) => v == true) || !hasPermission
|
"
|
@click="batchYCSet('acdc', 0)"
|
>批量取消</gradient-btn
|
>
|
</div>
|
<div class="content flex-c">
|
<yc-grid
|
class="scroller"
|
:count="param_acdc.length"
|
:config="param_acdc"
|
>
|
<template v-slot="{ data, index }">
|
<card
|
:ref="'acdc_param_' + index"
|
:option="data[index]"
|
:checked.sync="checkList1_acdc[index]"
|
:datas="rtData"
|
></card>
|
</template>
|
</yc-grid>
|
</div>
|
</panel>
|
<panel class="panel right" title="遥信量模拟">
|
<div slot="leftTools" class="btn-grp">
|
<gradient-btn size="xs" @click="selectAll('checkList2_acdc')"
|
>全选</gradient-btn
|
>
|
<gradient-btn
|
size="xs"
|
@click="cancelSelectAll('checkList2_acdc')"
|
>取消全选</gradient-btn
|
>
|
</div>
|
<div slot="tools" class="btn-grp">
|
<gradient-btn
|
size="xs"
|
:disabled="
|
!checkList2_acdc.some((v) => v == true) || !hasPermission
|
"
|
@click="batchYXSet('acdc', 1)"
|
>批量执行</gradient-btn
|
>
|
<gradient-btn
|
size="xs"
|
:disabled="
|
!checkList2_acdc.some((v) => v == true) || !hasPermission
|
"
|
@click="batchYXSet('acdc', 0)"
|
>批量取消</gradient-btn
|
>
|
</div>
|
<div class="content">
|
<yc-grid
|
class="scroller"
|
:count="acdc_alarms.length"
|
:cols="4"
|
:config="acdc_alarms"
|
>
|
<template v-slot="{ data, index }">
|
<card2
|
:ref="'acdc_alarm_' + index"
|
:option="data[index]"
|
:datas="rtData"
|
:checked.sync="checkList2_acdc[index]"
|
></card2>
|
</template>
|
</yc-grid>
|
</div>
|
</panel>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="高频开关整流柜">
|
<div class="tab-content content2 flex-r">
|
<panel class="panel left" title="遥测量模拟">
|
<div slot="leftTools" class="btn-grp">
|
<gradient-btn size="xs" @click="selectAll('checkList1_gp')"
|
>全选</gradient-btn
|
>
|
<gradient-btn size="xs" @click="cancelSelectAll('checkList1_gp')"
|
>取消全选</gradient-btn
|
>
|
</div>
|
<div slot="tools" class="btn-grp">
|
<gradient-btn
|
size="xs"
|
:disabled="
|
!checkList1_gp.some((v) => v == true) || !hasPermission
|
"
|
@click="batchYCSet('gp', 1)"
|
>批量给定</gradient-btn
|
>
|
<gradient-btn
|
size="xs"
|
:disabled="
|
!checkList1_gp.some((v) => v == true) || !hasPermission
|
"
|
@click="batchYCSet('gp', 0)"
|
>批量取消</gradient-btn
|
>
|
</div>
|
<div class="content flex-c">
|
<yc-grid
|
class="scroller"
|
:count="param_gp.length"
|
:cols="3"
|
:config="param_gp"
|
>
|
<template v-slot="{ data, index }">
|
<card
|
:ref="'gp_param_' + index"
|
:option="data[index]"
|
:datas="rtData"
|
:checked.sync="checkList1_gp[index]"
|
></card>
|
</template>
|
</yc-grid>
|
</div>
|
</panel>
|
<panel class="panel right" title="遥信量模拟">
|
<div slot="leftTools" class="btn-grp">
|
<gradient-btn size="xs" @click="selectAll('checkList2_gp')"
|
>全选</gradient-btn
|
>
|
<gradient-btn size="xs" @click="cancelSelectAll('checkList2_gp')"
|
>取消全选</gradient-btn
|
>
|
</div>
|
<div slot="tools" class="btn-grp">
|
<gradient-btn
|
size="xs"
|
:disabled="
|
!checkList2_gp.some((v) => v == true) || !hasPermission
|
"
|
@click="batchYXSet('gp', 1)"
|
>批量执行</gradient-btn
|
>
|
<gradient-btn
|
size="xs"
|
:disabled="
|
!checkList2_gp.some((v) => v == true) || !hasPermission
|
"
|
@click="batchYXSet('gp', 0)"
|
>批量取消</gradient-btn
|
>
|
</div>
|
<div class="content">
|
<yc-grid
|
class="scroller"
|
:count="gp_alarms.length"
|
:cols="4"
|
:config="gp_alarms"
|
>
|
<template v-slot="{ data, index }">
|
<card2
|
:ref="'gp_alarm_' + index"
|
:option="data[index]"
|
:datas="rtData"
|
:checked.sync="checkList2_gp[index]"
|
></card2>
|
</template>
|
</yc-grid>
|
</div>
|
</panel>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="测控电源参数设置">
|
<div class="tab-content content2 flex-r">
|
<panel class="panel param-alarm" title="告警参数">
|
<div class="content flex-c">
|
<param-alarm></param-alarm>
|
</div>
|
</panel>
|
<panel class="panel param-mode" title="模块参数">
|
<div class="content">
|
<param-mode></param-mode>
|
</div>
|
</panel>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="测控电源遥控">
|
<div class="tab-content content2 flex-r">
|
<panel class="panel left" title="模块开关机">
|
<div slot="leftTools" class="btn-grp">
|
<gradient-btn
|
size="xs"
|
@click="selectAll('checkList_module_states')"
|
>全选</gradient-btn
|
>
|
<gradient-btn
|
size="xs"
|
@click="cancelSelectAll('checkList_module_states')"
|
>取消全选</gradient-btn
|
>
|
</div>
|
<div slot="tools" class="btn-grp">
|
<gradient-btn
|
size="xs"
|
:disabled="
|
!checkList_module_states.some((v) => v == true) ||
|
!hasPermission
|
"
|
@click="batchModuleSet"
|
>批量设定</gradient-btn
|
>
|
<gradient-btn
|
size="xs"
|
:disabled="
|
!checkList_module_states.some((v) => v == true) ||
|
!hasPermission
|
"
|
@click="batchModule(0)"
|
>批量开机</gradient-btn
|
>
|
<gradient-btn
|
size="xs"
|
:disabled="
|
!checkList_module_states.some((v) => v == true) ||
|
!hasPermission
|
"
|
@click="batchModule(1)"
|
>批量关机</gradient-btn
|
>
|
</div>
|
<div class="content flex-c">
|
<yc-grid
|
class="scroller"
|
:count="module_states.length"
|
:cols="3"
|
:config="module_states"
|
>
|
<template v-slot="{ data, index }">
|
<card-module
|
notice
|
:ref="'module_states_' + index"
|
:option="data[index]"
|
:datas="rtData"
|
:checked.sync="checkList_module_states[index]"
|
></card-module>
|
</template>
|
</yc-grid>
|
</div>
|
</panel>
|
<panel class="panel other" title="其他控制">
|
<div class="content">
|
<yc-grid
|
class="scroller"
|
:count="other_control.length"
|
:cols="2"
|
:config="other_control"
|
>
|
<template v-slot="{ data, index }">
|
<card-module
|
:option="data[index]"
|
:datas="rtData"
|
:canSelect="false"
|
:checked="true"
|
></card-module>
|
</template>
|
</yc-grid>
|
</div>
|
</panel>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</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 card2 from "./components/card2";
|
import cardModule from "./components/card-module";
|
import IpCard from "./components/ipCard";
|
import paramAlarm from "./components/paramAlarm";
|
import paramMode from "./components/paramMode";
|
|
import props_const from "./js/const_props";
|
const { props1, props2, param_acdc, param_gp } = props_const;
|
|
import createWs from "@/assets/js/websocket/plus";
|
const WSMixin = createWs("ckRtAndSignalAndHr", "ckDevRsAndRtAlm");
|
import { updateYC, updateYX, setModeControl } from "./js/apis";
|
import changeBinaryBits from "@/assets/js/changeBinaryBits";
|
import setBitAtPositions from "@/assets/js/setBitAtPositions";
|
|
const other_control = [
|
{
|
label: "系统均浮充状态",
|
key_r: "junFloatStateReal",
|
key_w: "battChrstate",
|
flag: "battChrstateFlag",
|
option: ["浮充", "均充"],
|
},
|
{
|
label: "监控管理模式",
|
key_r: "monitorMode",
|
key_w: "monitorMode",
|
flag: "monitorModeFlag",
|
option: ["自动", "手动"],
|
},
|
// {
|
// label: "电池组测试",
|
// // key_r: ["m1Off1Real", "m1Off2Real"],
|
// key_w: 'batt1Test',
|
// flag: 'batt1TestFlag',
|
// option: ["充电", "测试"],
|
// },
|
];
|
|
export default {
|
name: "powerCabinetControl",
|
mixins: [WSMixin],
|
components: {
|
Panel,
|
ycGrid,
|
AlarmCard,
|
gradientBtn,
|
card,
|
card2,
|
cardModule,
|
IpCard,
|
paramAlarm,
|
paramMode,
|
},
|
data() {
|
return {
|
other_control,
|
rtData: {
|
isEmpty: true,
|
},
|
// props1,
|
// props2,
|
param_acdc,
|
param_gp,
|
checkList1_acdc: param_acdc.map(() => false),
|
checkList1_gp: param_gp.map(() => false),
|
checkList2_acdc: [],
|
checkList2_gp: [],
|
checkList_module_states: [],
|
};
|
},
|
created() {
|
// 在 created 钩子中初始化数据
|
this.checkList2_acdc = this.acdc_alarms.map(() => false);
|
this.checkList2_gp = this.gp_alarms.map(() => false);
|
this.checkList_module_states = this.module_states.map(() => false);
|
},
|
computed: {
|
hasPermission() {
|
return this.$store.state.user.downloadFlag == 1;
|
},
|
acdc_alarms() {
|
let arr = [];
|
for (let i = 0, j = props1.length; i < j; i++) {
|
let item = props1[i];
|
if (item.childrenCount) {
|
for (let m = 0, n = item.childrenCount; m < n; m++) {
|
let idx = m + 1;
|
let mIdx = Math.floor(m / 25);
|
arr.push({
|
label0: item.label,
|
label: item.label.replace("N", idx),
|
key0: item.key0,
|
key1: item.key1,
|
flag: item.flag,
|
childrenCount: item.childrenCount,
|
tip: item.tip.replace("N", idx),
|
index: m,
|
mainIdx: i + "_" + mIdx,
|
});
|
}
|
} else {
|
arr.push(item);
|
}
|
}
|
return arr;
|
},
|
gp_alarms() {
|
let arr = [];
|
for (let i = 0, j = props2.length; i < j; i++) {
|
let item = props2[i];
|
if (item.childrenCount) {
|
for (let m = 0, n = item.childrenCount; m < n; m++) {
|
let idx = m + 1;
|
let mIdx = Math.floor(m / 25);
|
arr.push({
|
label0: item.label,
|
label: item.label.replace("N", idx),
|
key0: item.key0,
|
key1: item.key1,
|
flag: item.flag,
|
childrenCount: item.childrenCount,
|
tip: item.tip.replace("N", idx),
|
index: m,
|
mainIdx: i + "_" + mIdx,
|
});
|
}
|
} else {
|
arr.push(item);
|
}
|
}
|
return arr;
|
},
|
module_states() {
|
let obj = {
|
label: "模块N开关机状态",
|
key_r: ["m1Off1Real", "m1Off2Real"],
|
key_w: ["m1Close", "m2Close"],
|
flag: ["m1CloseFlag", "m2CloseFlag"],
|
childrenCount: 32,
|
option: ["开机", "关机"],
|
};
|
let arr = [];
|
for (let m = 0, n = obj.childrenCount; m < n; m++) {
|
let idx = m + 1;
|
let mIdx = Math.floor(m / 25);
|
arr.push({
|
label0: obj.label,
|
label: obj.label.replace("N", idx),
|
key_r: obj.key_r,
|
key_w: obj.key_w,
|
flag: obj.flag,
|
childrenCount: n,
|
index: m,
|
option: obj.option,
|
mainIdx: "m_" + mIdx,
|
});
|
}
|
return arr;
|
},
|
},
|
methods: {
|
onWSOpen1() {
|
this.$nextTick(() => {
|
this.sendMessage1();
|
});
|
},
|
sendMessage1() {
|
if (!this.isWSOpen1) {
|
return false;
|
}
|
this.SOCKET1.send("");
|
},
|
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;
|
},
|
tabClick() {},
|
selectAll(list) {
|
this[list] = this[list].map(() => true);
|
},
|
cancelSelectAll(list) {
|
this[list] = this[list].map(() => false);
|
},
|
batchYCSet(type, setFlag) {
|
let title = setFlag ? "确认批量给定?" : "确认批量取消给定?";
|
this.$confirm(title, "提示", {
|
type: "warning",
|
})
|
.then(() => {
|
let loading = this.$layer.loading();
|
let params = { logList: [] };
|
let checkList = this["checkList1_" + type];
|
checkList
|
.map((v, i) => ({ i, v }))
|
.filter((v) => v.v)
|
.forEach((v) => {
|
let refName = type + "_param_" + v.i;
|
let $el = this.$refs[refName];
|
// console.log($el);
|
params[$el.option.key1] = setFlag ? $el.num : undefined;
|
params[$el.option.flag] = setFlag ? 1 : 0;
|
params["logList"].push({
|
param: $el.option.flag,
|
paramCn: $el.title,
|
fake: setFlag ? $el.num : undefined,
|
st: setFlag ? 1 : 0,
|
});
|
});
|
|
updateYC(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(() => {});
|
},
|
batchYXSet(type, setFlag) {
|
let title = setFlag ? "确认批量执行?" : "确认批量取消执行?";
|
this.$confirm(title, "提示", {
|
type: "warning",
|
})
|
.then(() => {
|
let loading = this.$layer.loading();
|
let params = { logList: [] };
|
let checkList = this["checkList2_" + type];
|
// 从被选中(打勾)的序号列表中 把对应同一个字段的合并为一个序号（N个同类型的每25个一个字段) (合并为一个序号取第一个用 并要想办法把合并的这些index保存来用)
|
// 用一个对象来存储是否有同组的已进来
|
let obj = {};
|
// 用一个数组来存储要处得的对象 每个元素{$el, indexs} $el 为组件引用 有同组的引用第一个 有同组的就有indexs 里面记录对应的索引
|
let arr = [];
|
checkList
|
.map((v, i) => ({ i, v }))
|
.filter((v) => v.v)
|
.forEach((v) => {
|
let refName = type + "_alarm_" + v.i;
|
let $el = this.$refs[refName];
|
let {
|
option: { key1, flag, childrenCount, index, mainIdx },
|
} = $el;
|
if (childrenCount) {
|
obj[mainIdx] = obj[mainIdx] || { $el, indexs: [] };
|
obj[mainIdx].indexs.push(index);
|
} else {
|
arr.push({ $el });
|
}
|
});
|
Object.keys(obj).forEach((v) => {
|
arr.push(obj[v]);
|
});
|
arr.forEach((v) => {
|
if (v.indexs) {
|
let {
|
datas,
|
option: { key1, flag, index },
|
} = v.$el;
|
// 需要处理同一个字段的值
|
// 通过index获得它在flag数组中的index
|
let propIdx = Math.floor(index / 25);
|
let prop_key1 = key1[propIdx];
|
let prop_flag = flag[propIdx];
|
let _key1 = datas[prop_key1];
|
let _flag = datas[prop_flag];
|
params[prop_key1] = setBitAtPositions(
|
_key1,
|
v.indexs.map((vv) => vv % 25),
|
setFlag ? 1 : 0
|
);
|
params[prop_flag] = setBitAtPositions(
|
_flag,
|
v.indexs.map((vv) => vv % 25),
|
setFlag ? 1 : 0
|
);
|
v.indexs.forEach((vv) => {
|
params["logList"].push({
|
param: prop_flag + "_" + (vv % 25),
|
paramCn: v.$el.option.label0.replace("N", vv + 1),
|
fake: setFlag ? 1 : undefined,
|
st: setFlag ? 1 : 0,
|
});
|
});
|
} else {
|
params[v.$el.option.key1] = setFlag ? 1 : undefined;
|
params[v.$el.option.flag] = setFlag ? 1 : 0;
|
params["logList"].push({
|
param: v.$el.option.flag,
|
paramCn: v.$el.title,
|
fake: setFlag ? 1 : undefined,
|
st: setFlag ? 1 : 0,
|
});
|
}
|
});
|
|
updateYX(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(() => {});
|
},
|
// 批量设定模块开关机状态
|
batchModuleSet() {
|
let title = "是否批量修改模块开关机状态";
|
this.$confirm(title, "提示", {
|
type: "warning",
|
})
|
.then(() => {
|
let loading = this.$layer.loading();
|
let params = {};
|
let checkList = this["checkList_module_states"];
|
// 从被选中(打勾)的序号列表中 把对应同一个字段的合并为一个序号（N个同类型的每25个一个字段) (合并为一个序号取第一个用 并要想办法把合并的这些index保存来用)
|
// 用一个对象来存储是否有同组的已进来
|
let obj = {};
|
// 用一个数组来存储要处得的对象 每个元素{$el, indexs} $el 为组件引用 有同组的引用第一个 有同组的就有indexs 里面记录对应的索引
|
let arr = [];
|
checkList
|
.map((v, i) => ({ i, v }))
|
.filter((v) => v.v)
|
.forEach((v) => {
|
let refName = "module_states_" + v.i;
|
let $el = this.$refs[refName];
|
let {
|
num,
|
option: { key_r, key_w, flag, index, mainIdx },
|
} = $el;
|
// index[0] 存num为0对应的index, index[1]存num为1对应的index
|
obj[mainIdx] = obj[mainIdx] || { $el, indexs: [[], []] };
|
if (num) {
|
obj[mainIdx].indexs[1].push(index);
|
} else {
|
obj[mainIdx].indexs[0].push(index);
|
}
|
});
|
Object.keys(obj).forEach((v) => {
|
arr.push(obj[v]);
|
});
|
arr.forEach((v) => {
|
let {
|
datas,
|
option: { key_r, key_w, flag, index },
|
} = v.$el;
|
// 需要处理同一个字段的值
|
// 通过index获得它在flag数组中的index
|
let propIdx = Math.floor(index / 25);
|
let prop_key_w = key_w[propIdx];
|
let prop_flag = flag[propIdx];
|
|
let key0 = setBitAtPositions(
|
0,
|
v.indexs[0].map((vv) => vv % 25),
|
0
|
);
|
let key1 = setBitAtPositions(
|
0,
|
v.indexs[1].map((vv) => vv % 25),
|
1
|
);
|
console.log(v.indexs, key0, key1);
|
params[prop_key_w] = key0 | key1;
|
params[prop_flag] = setBitAtPositions(
|
0,
|
[...v.indexs[0], ...v.indexs[1]].map((vv) => vv % 25),
|
1
|
);
|
});
|
console.log("调用结定接口", params);
|
setModeControl(params)
|
.then((res) => {
|
let { code, data, msg } = res.data;
|
if (code && data) {
|
// 提示用户需要手动切换状态
|
this.showNotice();
|
}
|
this.$layer.close(loading);
|
this.$message(msg);
|
})
|
.catch((err) => {
|
console.log(err);
|
this.$layer.close(loading);
|
});
|
})
|
.catch(() => {});
|
},
|
showNotice() {
|
this.$notify({
|
title: "注意",
|
message: "监控管理模式已被置为'手动'模式, 若需要切换需要手动操作",
|
type: 'warning'
|
});
|
},
|
batchModule(state) {
|
let title = "是否批量修改模块开关机状态";
|
this.$confirm(title, "提示", {
|
type: "warning",
|
})
|
.then(() => {
|
let loading = this.$layer.loading();
|
let params = {};
|
let checkList = this["checkList_module_states"];
|
// 从被选中(打勾)的序号列表中 把对应同一个字段的合并为一个序号（N个同类型的每25个一个字段) (合并为一个序号取第一个用 并要想办法把合并的这些index保存来用)
|
// 用一个对象来存储是否有同组的已进来
|
let obj = {};
|
// 用一个数组来存储要处得的对象 每个元素{$el, indexs} $el 为组件引用 有同组的引用第一个 有同组的就有indexs 里面记录对应的索引
|
let arr = [];
|
// let elList = [];
|
checkList
|
.map((v, i) => ({ i, v }))
|
.filter((v) => v.v)
|
.forEach((v) => {
|
let refName = "module_states_" + v.i;
|
let $el = this.$refs[refName];
|
let {
|
option: { key_r, key_w, flag, index, mainIdx },
|
} = $el;
|
// elList.push($el);
|
// console.log($el, '??')
|
$el.setNum(state);
|
obj[mainIdx] = obj[mainIdx] || { $el, indexs: [] };
|
obj[mainIdx].indexs.push(index);
|
});
|
Object.keys(obj).forEach((v) => {
|
arr.push(obj[v]);
|
});
|
arr.forEach((v) => {
|
let {
|
datas,
|
option: { key_r, key_w, flag, index },
|
} = v.$el;
|
// 需要处理同一个字段的值
|
// 通过index获得它在flag数组中的index
|
let propIdx = Math.floor(index / 25);
|
let prop_key_w = key_w[propIdx];
|
let prop_flag = flag[propIdx];
|
|
params[prop_key_w] = setBitAtPositions(
|
0,
|
v.indexs.map((vv) => vv % 25),
|
state
|
);
|
params[prop_flag] = setBitAtPositions(
|
0,
|
v.indexs.map((vv) => vv % 25),
|
1
|
);
|
});
|
console.log("调用结定接口", params);
|
setModeControl(params)
|
.then((res) => {
|
let { code, data, msg } = res.data;
|
if (code && data) {
|
this.showNotice();
|
}
|
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%;
|
.tab {
|
height: 100%;
|
background: transparent;
|
border: 0 none;
|
box-shadow: none;
|
display: flex;
|
flex-direction: column;
|
:deep(.el-tabs__header) {
|
border: 0 none;
|
background-color: transparent;
|
}
|
:deep(.el-tabs__content) {
|
flex: 1;
|
padding: 4px;
|
.el-tab-pane {
|
height: 100%;
|
}
|
}
|
.flex-c {
|
display: flex;
|
flex-direction: column;
|
}
|
.flex-r {
|
display: flex;
|
flex-direction: row;
|
}
|
.tab-content {
|
height: 100%;
|
}
|
:deep(.el-tabs__header) .el-tabs__item {
|
background: #78eef8;
|
color: #000;
|
border-radius: 4px;
|
font-weight: bold;
|
height: 30px;
|
line-height: 30px;
|
font-size: 16px;
|
border: 0 none;
|
& + .el-tabs__item {
|
margin-left: 6px;
|
}
|
&.is-active {
|
color: #fff;
|
background-color: #0081ff;
|
}
|
}
|
}
|
}
|
.panel {
|
color: #fff;
|
// height: 100%;
|
flex: 1;
|
&.right {
|
margin-left: 10px;
|
flex: 1.44;
|
.content {
|
height: 100%;
|
padding: 10px 30px;
|
position: relative;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
}
|
}
|
&.param-alarm {
|
flex: 1.2;
|
}
|
&.other {
|
flex: 0.8;
|
.content {
|
height: 100%;
|
padding: 10px 30px;
|
position: relative;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
}
|
}
|
}
|
.btn-grp {
|
padding: 10px;
|
display: flex;
|
}
|
.tab-content .content {
|
height: 100%;
|
padding: 10px;
|
}
|
.grid1 {
|
height: 240px;
|
margin-bottom: 20px;
|
}
|
.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;
|
}
|
}
|
}
|
}
|
}
|
.scroller {
|
overflow-y: auto;
|
}
|
.el_col:nth-child(n + 3) {
|
margin-top: 20px;
|
}
|
</style>
|
