<script setup name="Power">
|
import { ref, reactive, computed, nextTick, watch, onMounted } from "vue";
|
import bar from '@/components/echarts/bar2.vue';
|
import bar1 from '@/components/echarts/bar3.vue';
|
import bar2 from '@/components/echarts/bar1.vue';
|
import bar4 from '@/components/echarts/bar4.vue';
|
import gauge from '@/components/echarts/gauge1.vue';
|
import water from '@/components/echarts/water.vue';
|
import ycTag from '@/components/ycTag.vue';
|
|
import getBinaryDigits from '@/utils/getBinaryDigits.js';
|
|
const lineIdx = ref(0);
|
const chart0 = ref(null);
|
const chart1 = ref(null);
|
const chart2 = ref(null);
|
const chart3 = ref(null);
|
const chart4 = ref(null);
|
const chart5 = ref(null);
|
const chart6 = ref(null);
|
|
const props = defineProps({
|
data: {
|
type: Object,
|
default: {},
|
},
|
});
|
|
// 整流器列表 最多16个
|
const modelList = computed(() => {
|
return props.data.powerInf && props.data.powerInf.modelCfg ? getBinaryDigits(props.data.powerInf.modelCfg).map((v, i) => ({ value: v, label: i + 1 })).filter(vv => vv.value).map(v => v.label) : [];
|
});
|
|
const state = computed(() => {
|
let rtData = props.data.pwrdevAcdcdata;
|
return modelList.value.map((item) => !rtData[`isAcdcmod${item}Off`]);
|
});
|
|
const volList = computed(() => {
|
let rtData = props.data.pwrdevAcdcdata;
|
return modelList.value.map((item) => rtData[`m${item}OutVol`]);
|
});
|
|
watch(
|
() => props.data,
|
() => {
|
nextTick(() => {
|
updateRt();
|
});
|
},
|
{ immediate: true, deep: true }
|
);
|
|
function updateAcin() {
|
let rtData = props.data.pwrdevAcdcdata;
|
let line = lineIdx.value + 1;
|
if (chart0.value) {
|
chart0.value.updateChart(['A', 'B', 'C'], [rtData[`acin${line}Vola`], rtData[`acin${line}Volb`], rtData[`acin${line}Volc`]]);
|
}
|
if (chart1.value) {
|
chart1.value.updateChart(['A', 'B', 'C'], [rtData[`acin${line}Curra`], rtData[`acin${line}Currb`], rtData[`acin${line}Currc`]]);
|
}
|
}
|
|
function updateRt() {
|
let rtData = props.data.pwrdevAcdcdata;
|
updateAcin();
|
if (chart2.value) {
|
chart2.value.updateChart(['A', 'B', 'C'], [rtData[`acoutVola`], rtData[`acoutVolb`], rtData[`acoutVolc`]]);
|
}
|
if (chart3.value) {
|
chart3.value.updateChart(rtData.dcoutVol);
|
}
|
if (chart4.value) {
|
chart4.value.updateChart(rtData.dcoutCurr);
|
}
|
if (chart5.value) {
|
chart5.value.updateChart(modelList.value.map((item) => `${item}#`), volList.value);
|
}
|
if (chart6.value) {
|
chart6.value.updateChart(modelList.value.map((item) => `${item}#`), volList.value);
|
}
|
}
|
|
onMounted(() => {
|
|
});
|
</script>
|
|
<template>
|
<div class="tab-content">
|
<div class="p-left">
|
<div class="p-item">
|
<card title="交流输入">
|
<template #tools>
|
<el-radio-group class="line-idx" v-model="lineIdx" @change="updateAcin" size="small">
|
<el-radio-button label="一路" :value="0" />
|
<el-radio-button label="二路" :value="1" />
|
</el-radio-group>
|
</template>
|
<div class="wrap">
|
<div class="g-vol">
|
<bar ref="chart0"></bar>
|
</div>
|
<div class="g-curr">
|
<bar1 ref="chart1"></bar1>
|
</div>
|
</div>
|
</card>
|
</div>
|
<div class="p-item">
|
<card title="交流母线电压">
|
<div class="wrap2">
|
<div class="g-vol">
|
<bar2 :barW="40" ref="chart2"></bar2>
|
</div>
|
<div class="g-vol">
|
<gauge ref="chart3"></gauge>
|
</div>
|
<div class="g-vol">
|
<water ref="chart4"></water>
|
</div>
|
</div>
|
</card>
|
</div>
|
</div>
|
<div class="p-right">
|
<div class="p-item">
|
<card title="整流器开关状态">
|
<div class="wrap scroll">
|
<div class="grid">
|
<div class="item" v-for="(i, idx) in modelList" :key="'list_' + idx">
|
<yc-tag>
|
<div class="item-content">
|
<div class="idx">{{ i }}#</div>
|
<el-switch
|
v-model="state[idx]"
|
class="opacity1"
|
disabled
|
inline-prompt
|
active-text="开机"
|
inactive-text="关机"
|
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
|
/>
|
</div>
|
</yc-tag>
|
</div>
|
</div>
|
</div>
|
</card>
|
</div>
|
<div class="p-item large">
|
<card title="整流器输出电压">
|
<div class="wrap">
|
<div class="g-vol g-item">
|
<bar4 ref="chart5"></bar4>
|
</div>
|
<div class="panel-title">整流器输出电流</div>
|
<div class="g-curr g-item">
|
<bar4 ref="chart6"></bar4>
|
</div>
|
</div>
|
</card>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<style scoped lang="less">
|
.tab-content {
|
display: flex;
|
flex-direction: row;
|
height: 100%;
|
|
.p-left {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
|
.p-item {
|
flex: 1;
|
margin: 8px;
|
|
.wrap {
|
height: 100%;
|
display: flex;
|
.g-vol {
|
flex: 1;
|
}
|
.g-curr {
|
flex: 1;
|
}
|
}
|
.wrap2 {
|
height: 100%;
|
display: flex;
|
.g-vol {
|
flex: 1;
|
&~.g-vol {
|
margin-left: 18px;
|
}
|
}
|
}
|
}
|
}
|
|
.p-right {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
|
.p-item {
|
flex: 1;
|
margin: 8px;
|
.wrap.scroll {
|
height: 100%;
|
overflow-y: auto;
|
}
|
.grid {
|
// height: 100%;
|
padding: 10px;
|
display: grid;
|
grid-template-columns: repeat(6, 1fr);
|
// grid-template-rows: repeat(2, 1fr);
|
grid-gap: 10px 6px;
|
place-content: stretch;
|
// place-items: center stretch;
|
// justify-items: stretch;
|
// align-items: stretch;
|
.item-content {
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
.idx {
|
background: #0ff;
|
color: #000;
|
font-weight: 700;
|
padding: 2px 6px;
|
border-radius: 10px;
|
margin-right: 10px;
|
font-size: 17px;
|
}
|
}
|
}
|
|
&.large {
|
flex: 2;
|
.wrap {
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
.g-item {
|
flex: 1;
|
}
|
}
|
}
|
}
|
}
|
|
.line-idx {
|
|
:deep(.el-radio-button:first-child .el-radio-button__inner) {
|
border-left: 1px solid #4D81BA;
|
border-radius: 0;
|
box-shadow: none !important;
|
}
|
// .el-radio-button--small .el-radio-button__inner {
|
// border-radius: 0;
|
// font-size: 12px;
|
// padding: 5px 11px;
|
// }
|
:deep(.el-radio-button__inner) {
|
background: #183A55;
|
border: 1px solid #4D81BA;
|
border-left: 0;
|
border-radius: 0;
|
color: #fff;
|
font-weight: 500;
|
padding: 4px 10px;
|
}
|
:deep(.el-radio-button.is-active .el-radio-button__original-radio:not(:disabled)+.el-radio-button__inner) {
|
background: linear-gradient(69deg, #6EABE4, #6EABE4 25%, #0A3E77 75%, #0A3E77);
|
// border: 0 none;
|
box-shadow: none;
|
color: #fff;
|
}
|
}
|
}
|
</style>
|
