74 lines
1.7 KiB
Vue
74 lines
1.7 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 "./LineTodayOptions";
|
||
|
||
const store = useWsStore();
|
||
const chartChart = ref(null);
|
||
const chart = ref(null);
|
||
|
||
const monthData = ref(null);
|
||
store.$subscribe((mutation, state) => {
|
||
console.log("[ChartMonth] ===> state: ", state.data2.monthlyTarget);
|
||
if (
|
||
state.data2.monthlyTarget == undefined ||
|
||
state.data2.monthlyTarget?.length == 0
|
||
) {
|
||
console.log("[ChartMonth] ===> 清除状态");
|
||
monthData.value = null;
|
||
if (chart.value) chart.value.dispose();
|
||
return;
|
||
}
|
||
|
||
if (!state.data2.monthlyTarget[0]) return;
|
||
const { targetProduction, nowProduction, targetYield, nowYield } =
|
||
state.data2.monthlyTarget[0];
|
||
monthData.value = { targetProduction, nowProduction, targetYield, nowYield };
|
||
setupChart();
|
||
});
|
||
|
||
|
||
|
||
// 绿色：24FF5E
|
||
// 黄色：FFB524
|
||
// 红色：FF3737
|
||
|
||
|
||
function setupChart() {
|
||
if (chart.value) chart.value.dispose();
|
||
nextTick(() => {
|
||
console.log("[ChartMonth] ===> 初始化表格: ", monthData.value);
|
||
chart.value = echarts.init(chartChart.value);
|
||
setupFn(chart.value, monthData.value);
|
||
});
|
||
}
|
||
|
||
onMounted(() => {
|
||
chartChart.value.classList.add("h-full");
|
||
// nextTick(() => {
|
||
// setupChart();
|
||
// })
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<Container class="chart" title="本月班组情况" icon="cube">
|
||
<div ref="chartChart" class="chart-chart" style="{opacity: (monthData) ? 1 : 0}"></div>
|
||
<p v-show="!monthData" class="empty-data-hint">暂无数据</p>
|
||
</Container>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.chart {
|
||
height: 300px;
|
||
}
|
||
|
||
.chart-inner {}
|
||
|
||
.chart-chart {
|
||
height: 100%;
|
||
}
|
||
</style>
|