85 lines
2.0 KiB
Vue
85 lines
2.0 KiB
Vue
<script setup>
|
|
import { ref, onMounted, nextTick } from "vue";
|
|
import * as echarts from "echarts";
|
|
import Container from "../Base/Container.vue";
|
|
import { useWsStore } from "../../store";
|
|
import setupFn from "./TeamChartDayOptions";
|
|
|
|
const store = useWsStore();
|
|
const chartChart = ref(null);
|
|
const chart = ref(null);
|
|
const showChartDom = ref(false);
|
|
|
|
/** 无状态，处理数据 */
|
|
function loadData(yieldArray) {
|
|
const result = [];
|
|
if (yieldArray == undefined || yieldArray?.length == 0) return null;
|
|
for (let i = 0; i < yieldArray.length; ++i) {
|
|
if (yieldArray[i].teamName == "A组") {
|
|
result[0] = parseInt(yieldArray[i].yield);
|
|
} else if (yieldArray[i].teamName == "B组") {
|
|
result[1] = parseInt(yieldArray[i].yield);
|
|
} else if (yieldArray[i].teamName == "C组") {
|
|
result[2] = parseInt(yieldArray[i].yield);
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function setupChart(chart, dom, data) {
|
|
if (chart.value) chart.value.dispose();
|
|
nextTick(() => {
|
|
chart.value = echarts.init(dom);
|
|
setupFn(chart.value, data);
|
|
});
|
|
}
|
|
|
|
/** 有状态，处理数据 */
|
|
function __apply(yieldArray) {
|
|
const d = loadData(yieldArray);
|
|
// const d = loadData([
|
|
// { teamName: "A组", yield: 11 },
|
|
// { teamName: "B组", yield: 23 },
|
|
// { teamName: "C组", yield: 14 },
|
|
// ]);
|
|
if (!d) {
|
|
showChartDom.value = false;
|
|
if (chart.value) chart.value.dispose();
|
|
return;
|
|
}
|
|
showChartDom.value = true;
|
|
setupChart(chart, chartChart.value, d);
|
|
}
|
|
|
|
// 订阅
|
|
store.$subscribe((mutation, state) => {
|
|
__apply(state.data2.classTodayProductYield);
|
|
});
|
|
|
|
onMounted(() => {
|
|
chartChart.value.classList.add("h-full");
|
|
// __apply();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Container class="chart" title="本日班组情况" icon="cube">
|
|
<div
|
|
ref="chartChart"
|
|
class="chart-chart"
|
|
:style="{ opacity: showChartDom ? 1 : 0 }"
|
|
></div>
|
|
<p v-show="!chart" class="empty-data-hint">暂无数据</p>
|
|
</Container>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.chart {
|
|
/* height: 300px; */
|
|
}
|
|
|
|
.chart-chart {
|
|
height: 100%;
|
|
}
|
|
</style>
|