<script setup name="chartView">
|
// 年度已放电 未放电数量统计页面右侧图表
|
import { ref, onMounted, } from "vue";
|
import pie from "@/components/echarts/pie3d0.vue";
|
import bar from '@/components/echarts/bar1.vue';
|
|
// import {
|
// getDischr5Chart,
|
// } from "@/api/statistic";
|
|
const props = defineProps({
|
battData: {
|
type: Array,
|
},
|
teamData: {
|
type: Array,
|
}
|
});
|
|
const chart0 = ref(null);
|
const chart1 = ref(null);
|
|
// async function getInfo() {
|
// let {code, data, data2, data3} = await getDischr5Chart();
|
// let list0 = [];
|
// let list1 = [];
|
// if (code && data) {
|
// list0 = Object.keys(data3).map((key) => ({name: key, value: data3[key]}));
|
// list1 = Object.keys(data2).map((key) => ({name: key, ...data2[key]}));
|
// }
|
// return {list0, list1};
|
// }
|
|
|
|
onMounted(async () => {
|
// let {list0, list1} = await getInfo();
|
let _teamData = props.teamData;
|
if (chart0.value) {
|
chart0.value.updateChart(props.battData);
|
}
|
if (chart1.value) {
|
chart1.value.updateChart(_teamData.map(v => v.name), _teamData.map(v => v.value));
|
}
|
});
|
|
</script>
|
|
<template>
|
<div class="chart-view">
|
<div class="top" v-if="battData">
|
<card title="电池性能统计">
|
<pie ref="chart0"></pie>
|
</card>
|
</div>
|
<div class="bottom">
|
<card :title="battData ? '班组已放电统计' : '班组未放电统计'">
|
<bar ref="chart1"></bar>
|
</card>
|
</div>
|
</div>
|
</template>
|
|
<style scoped lang="less">
|
.chart-view {
|
|
height: 420px;
|
background: #000;
|
padding: 10px;
|
display: flex;
|
// flex-direction: column;
|
.top {
|
flex: 1;
|
// width: 400px;
|
margin-right: 20px;
|
}
|
.bottom {
|
flex: 1;
|
// width: 400px;
|
}
|
}
|
</style>
|
