<script setup>
|
import { nextTick, ref, watch, onMounted } from "vue";
|
import svgDiagram from '@/components/svgDiagram.vue';
|
import info from '@/components/info.vue';
|
import lineChart from '@/components/echarts/line1.vue';
|
import lineChart2 from '@/components/echarts/line2.vue';
|
// import lineChart from '@/components/echarts/BaseChart.vue';
|
// import lineChart from '../bar8.vue';
|
|
|
import {
|
getHalfHourBattDevData,
|
getHalfHourPwrHisAcinData,
|
getHalfHourPwrHisDcoutData,
|
} from "@/api/realtime";
|
|
const props = defineProps({
|
data: {
|
type: Object,
|
default: {},
|
},
|
powerId: {
|
type: [Number, String],
|
},
|
devId: {
|
type: [Number, String],
|
},
|
battgroupId: {
|
type: [Number, String],
|
},
|
});
|
|
const tabIdx0 = ref(0);
|
const tabIdx1 = ref(0);
|
|
const chart0 = ref(null);
|
const chart1 = ref(null);
|
const chart2 = ref(null);
|
|
watch(
|
() => tabIdx0.value,
|
() => {
|
nextTick(() => {
|
tabIdx0Change();
|
});
|
},
|
{ immediate: true }
|
);
|
|
watch(
|
() => tabIdx1.value,
|
() => {
|
nextTick(() => {
|
tabIdx1Change();
|
});
|
},
|
{ immediate: true }
|
);
|
|
watch(
|
() => props.powerId,
|
(n) => {
|
if (!n) return;
|
|
nextTick(() => {
|
getAcinData();
|
getDevData();
|
getDcoutData();
|
});
|
},
|
{ immediate: true }
|
)
|
|
function tabIdx0Change() {
|
// TODO
|
if (chart0.value) {
|
chart0.value.updateChart([1, 2, 3], [100, 200, 300]);
|
}
|
}
|
|
function tabIdx1Change() {
|
// TODO
|
if (chart1.value) {
|
chart1.value.updateChart([1, 2, 3], [100, 200, 300]);
|
}
|
}
|
|
async function getAcinData(granularity = 5) {
|
let { code, data, data2 } = await getHalfHourPwrHisAcinData(props.powerId, granularity);
|
let list = [];
|
if (code && data) {
|
list = data2;
|
}
|
return list;
|
}
|
|
async function getDevData(granularity = 5) {
|
let { code, data, data2 } = await getHalfHourBattDevData(props.battgroupId, granularity);
|
let list = [];
|
if (code && data) {
|
list = data2;
|
}
|
return list;
|
}
|
|
async function getDcoutData(granularity = 5) {
|
let { code, data, data2 } = await getHalfHourPwrHisDcoutData(props.powerId, granularity);
|
let list = [];
|
if (code && data) {
|
list = data2;
|
}
|
return list;
|
}
|
|
onMounted(async () => {
|
// await getAcinData();
|
// await getDevData();
|
// await getDcoutData();
|
|
if (chart2.value) {
|
chart2.value.updateChart(['04:12', '04:13', '04:14'], {
|
'设备温度': [100, 200, 220],
|
'组端电流': [100, 200, 220],
|
'组端电压': [100, 200, 220],
|
'负载电流': [100, 200, 220],
|
});
|
}
|
});
|
</script>
|
|
<template>
|
<div class="tab-content">
|
<div class="row pos-r">
|
<div class="pos-full row-content">
|
<div class="p-left">
|
<div class="p-item">
|
<div class="panel-title">当前核容信息</div>
|
<div class="panel">
|
<div class="panel-row">
|
<div class="label">失败原因</div>
|
<div class="value">无</div>
|
</div>
|
<div class="panel-row">
|
<div class="label">停止原因</div>
|
<div class="value">无</div>
|
</div>
|
</div>
|
</div>
|
<div class="p-item">
|
<div class="panel-title">上次标准核容信息</div>
|
<div class="panel">
|
<div class="panel-row">
|
<div class="label">开始时间</div>
|
<div class="value">无</div>
|
</div>
|
<div class="panel-row">
|
<div class="label">测试容量</div>
|
<div class="value">无</div>
|
</div>
|
<div class="panel-row">
|
<div class="label">测试时长</div>
|
<div class="value">无</div>
|
</div>
|
<div class="panel-row">
|
<div class="label">预估容量</div>
|
<div class="value">无</div>
|
</div>
|
<div class="panel-row">
|
<div class="label">终止原因</div>
|
<div class="value">无</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="p-main">
|
<svg-diagram class="svg-diagram"></svg-diagram>
|
</div>
|
<div class="p-right">
|
<div class="control-contain">
|
<div class="control-title">
|
<svg-icon icon-class="controls"></svg-icon><span>控制管理</span>
|
</div>
|
<div class="control-btn">核容测试</div>
|
<div class="control-btn">停止核容测试</div>
|
</div>
|
<div class="control-contain">
|
<div class="control-title">
|
<svg-icon icon-class="dev"></svg-icon><span>设备管理</span>
|
</div>
|
<div class="control-btn">远程重启</div>
|
<div class="control-btn">系统参数设置</div>
|
<div class="control-btn">告警参数设置</div>
|
</div>
|
<div class="control-contain no-wrap">
|
<div class="control-btn">放电申请</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="row row2">
|
<div class="card-item">
|
<card title="交流输入">
|
<template #tools>
|
<el-radio-group class="tab-idx" v-model="tabIdx0" size="small">
|
<el-radio-button label="电流" :value="0" />
|
<el-radio-button label="电压" :value="1" />
|
</el-radio-group>
|
<svg-icon class-name="btn-setting" icon-class="setting"></svg-icon>
|
</template>
|
<line-chart
|
ref="chart0"
|
:type="['电流', '电压'][tabIdx0]"
|
></line-chart>
|
</card>
|
</div>
|
<div class="card-item">
|
<card title="直流输入">
|
<template #tools>
|
<el-radio-group class="tab-idx" v-model="tabIdx1" size="small">
|
<el-radio-button label="电流" :value="0" />
|
<el-radio-button label="电压" :value="1" />
|
</el-radio-group>
|
<svg-icon class-name="btn-setting" icon-class="setting"></svg-icon>
|
</template>
|
<line-chart
|
ref="chart1"
|
:type="['电流', '电压'][tabIdx1]"
|
></line-chart>
|
</card>
|
</div>
|
<div class="card-item">
|
<card title="核容设备信息">
|
<template #tools>
|
<svg-icon class-name="btn-setting" icon-class="setting"></svg-icon>
|
</template>
|
<line-chart2
|
ref="chart2"
|
:type="['电流', '电压'][tabIdx1]"
|
></line-chart2>
|
</card>
|
</div>
|
<div class="card-item">
|
<card title="蓄电池信息">
|
<div class="batt grid">
|
<info label="最大容量" value="#3 8Ah"></info>
|
<info label="最小容量" value="100"></info>
|
<info label="最高内阻" value="100"></info>
|
<info label="最低内阻" value="100"></info>
|
<info label="最高电压" value="100"></info>
|
<info label="最低电压" value="100"></info>
|
<info label="最高温度" value="100"></info>
|
<info label="最低温度" value="100"></info>
|
</div>
|
</card>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<style scoped lang="less">
|
.tab-content {
|
height: 100%;
|
padding-left: 8px;
|
padding-right: 8px;
|
display: flex;
|
flex-direction: column;
|
|
.row {
|
flex: 1.52;
|
|
.row-content {
|
display: flex;
|
flex-direction: row;
|
height: 100%;
|
}
|
|
.p-left {
|
width: 240px;
|
display: flex;
|
flex-direction: column;
|
|
.p-item {
|
margin: 8px;
|
display: flex;
|
flex-direction: column;
|
|
.panel-title {
|
font-size: 24px;
|
}
|
|
.panel {
|
border: 1px solid #5FA9CF;
|
background: #073451;
|
border-radius: 6px;
|
padding: 10px 6px;
|
margin-top: 6px;
|
margin-bottom: 30px;
|
font-size: 12px;
|
display: flex;
|
flex-direction: column;
|
|
.panel-row {
|
display: flex;
|
flex-direction: row;
|
margin-bottom: 4px;
|
|
.label {
|
flex: 0 0 6em;
|
margin-right: 0.6em;
|
text-align: right;
|
|
&::after {
|
content: ":";
|
}
|
}
|
|
.value {
|
flex: 1;
|
}
|
}
|
}
|
}
|
}
|
|
.p-main {
|
flex: 1;
|
}
|
|
.p-right {
|
width: 160px;
|
margin-left: 20px;
|
margin-right: 6px;
|
padding-top: 20px;
|
display: flex;
|
flex-direction: column;
|
|
.control-contain {
|
display: flex;
|
flex-direction: column;
|
background: #08354F;
|
border-radius: 6px 6px 0 0;
|
margin-top: 6px;
|
margin-bottom: 8px;
|
padding-bottom: 4px;
|
overflow: hidden;
|
font-size: 12px;
|
|
.control-title {
|
background: #0B415D;
|
font-size: 20px;
|
padding: 6px 0;
|
text-align: center;
|
font-weight: 700;
|
margin-bottom: 4px;
|
|
span {
|
margin-left: 0.6em;
|
}
|
}
|
|
.control-btn {
|
margin: 2px 4px;
|
cursor: pointer;
|
border: 1px solid #3D9CC9;
|
box-shadow: inset 0 0 10px 4px #3D9CC9;
|
padding: 6px 0;
|
text-align: center;
|
border-radius: 4px;
|
|
&:hover {
|
color: #FDFE01;
|
border: 1px solid #DF7B26;
|
box-shadow: inset 0 0 10px 4px #DF7B26;
|
}
|
}
|
|
&.no-wrap {
|
background: transparent;
|
|
.control-btn {
|
flex: 1;
|
border: 1px solid #0BF9FE;
|
color: #0bf9fe;
|
font-weight: bold;
|
font-size: 14px;
|
box-shadow: inset 0 0 10px 4px #0BF9FE;
|
|
&:hover {
|
color: #FDFE01;
|
border: 1px solid #DF7B26;
|
box-shadow: inset 0 0 10px 4px #DF7B26;
|
}
|
}
|
}
|
}
|
}
|
|
&.row2 {
|
flex: 1;
|
margin-top: 4px;
|
display: flex;
|
flex-direction: row;
|
|
.card-item {
|
flex: 1;
|
margin: 4px;
|
}
|
}
|
}
|
|
.svg-diagram {}
|
|
.btn-setting {
|
display: inline-block;
|
cursor: pointer;
|
margin-left: 0.4em;
|
transition: all 1.3s ease;
|
|
&:hover {
|
transform: rotate(360deg);
|
color: #FDFE01;
|
}
|
}
|
|
.batt.grid {
|
height: 100%;
|
padding: 4px 6px;
|
display: grid;
|
grid-template-columns: repeat(2, 1fr);
|
// grid-template-rows: repeat(4, 1fr);
|
gap: 12px;
|
place-content: center;
|
}
|
|
.tab-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>
|
