<script setup name="home">
|
import { ref, onMounted } from "vue";
|
import ycCard from "@/components/ycCard.vue";
|
import groupBar from "@/components/echarts/groupBar.vue";
|
import pie from "@/components/echarts/pie.vue";
|
import bar from "@/components/echarts/bar.vue";
|
import lineChart from "@/components/echarts/lineChart.vue";
|
import mapChart from "@/components/echarts/mapChart.vue";
|
import ledNum from "@/components/ledNum.vue";
|
|
const devBar = ref();
|
const alarmPie = ref();
|
const testBar = ref();
|
const jhTestBar = ref();
|
const testLine = ref();
|
const alarmType = ref(0);
|
const devType = ref(0);
|
const jhTestType = ref(0);
|
const ytjTestType = ref(0);
|
|
onMounted(() => {
|
setTimeout(() => {
|
devBar.value.updateChart(
|
["充放电一体机", "锂电池均衡仪"],
|
[
|
{ name: "在线", data: [50, 3] },
|
{ name: "离线", data: [60, 8] },
|
]
|
);
|
alarmPie.value.updateChart([
|
{
|
name: "充放电一体机",
|
value: 100,
|
},
|
{
|
name: "锂电池均衡仪",
|
value: 103,
|
},
|
]);
|
testBar.value.updateChart(["放电测试", "充电测试"], [243, 120]);
|
jhTestBar.value.updateChart(
|
["放电测试", "充电测试", "循环测试"],
|
[243, 50, 120]
|
);
|
|
testLine.value.updateChart(
|
[
|
"2024-08-15",
|
"2024-08-16",
|
"2024-08-17",
|
"2024-08-18",
|
"2024-08-19",
|
"2024-08-20",
|
"2024-08-21",
|
],
|
[
|
{ name: "充电测试", data: [50, 0, 24, 5, 13, 22, 45] },
|
{ name: "放电测试", data: [60, 20, 55, 0, 75, 12, 8] },
|
]
|
);
|
}, 500);
|
});
|
</script>
|
|
<template>
|
<div class="page-home grid">
|
<yc-card class="item" title="设备状态统计">
|
<group-bar ref="devBar" unit="台"></group-bar>
|
</yc-card>
|
<yc-card class="item">
|
<div class="card-content">
|
<div class="info">
|
<div class="info-item">
|
<div class="label">充放电一体机</div>
|
<div class="value">
|
<led-num :bits="4"></led-num>
|
</div>
|
<div class="unit">台</div>
|
</div>
|
<div class="info-item">
|
<div class="label">锂电池均衡仪</div>
|
<div class="value">
|
<led-num :bits="4"></led-num>
|
</div>
|
<div class="unit">台</div>
|
</div>
|
</div>
|
<div class="wrap-chart">
|
<map-chart></map-chart>
|
</div>
|
</div>
|
</yc-card>
|
<yc-card class="item" title="设备历史告警统计">
|
<template #tools>
|
<el-radio-group v-model="alarmType" size="small" is-button>
|
<el-radio-button :value="0">本月</el-radio-button>
|
<el-radio-button :value="1">本年</el-radio-button>
|
</el-radio-group>
|
</template>
|
<pie ref="alarmPie"></pie>
|
</yc-card>
|
<yc-card class="item" title="充放电一体机测试统计">
|
<template #tools>
|
<el-radio-group v-model="ytjTestType" size="small" is-button>
|
<el-radio-button :value="0">本月</el-radio-button>
|
<el-radio-button :value="1">本年</el-radio-button>
|
</el-radio-group>
|
</template>
|
<bar ref="testBar" unit="次"></bar>
|
</yc-card>
|
<yc-card class="item" title="近一周电池测试趋势统计">
|
<template #tools>
|
<el-radio-group v-model="devType" size="small" is-button>
|
<el-radio-button :value="0">充放电一体机</el-radio-button>
|
<el-radio-button :value="1">锂电均衡仪</el-radio-button>
|
</el-radio-group>
|
</template>
|
<line-chart ref="testLine" unit="次"></line-chart>
|
</yc-card>
|
<yc-card class="item" title="锂电均衡仪测试统计">
|
<template #tools>
|
<el-radio-group v-model="jhTestType" size="small" is-button>
|
<el-radio-button :value="0">本月</el-radio-button>
|
<el-radio-button :value="1">本年</el-radio-button>
|
</el-radio-group>
|
</template>
|
<bar ref="jhTestBar" unit="次"></bar>
|
</yc-card>
|
</div>
|
</template>
|
|
<style scoped lang="less">
|
.page-home {
|
height: 100%;
|
padding: 6px;
|
}
|
.grid {
|
display: grid;
|
grid-template-rows: 1fr 1fr;
|
grid-template-columns: 1fr 1.6fr 1fr;
|
gap: 6px;
|
.item {
|
// background: gray;
|
}
|
}
|
.card-content {
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
.info {
|
padding-top: 8px;
|
display: flex;
|
.info-item {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
.label {
|
color: #0ff;
|
font-size: 16px;
|
margin-right: 0.4em;
|
&::after {
|
content: ":";
|
}
|
}
|
.value {
|
height: 38px;
|
}
|
.unit {
|
font-size: 14px;
|
align-self: flex-end;
|
margin-left: 0.6em;
|
}
|
}
|
}
|
.wrap-chart {
|
flex: 1;
|
// position: relative;
|
}
|
}
|
</style>
|
