106 lines
2.3 KiB
Vue
106 lines
2.3 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 "./LineMonthOptions";
|
||
|
||
const show = ref(false);
|
||
const chartContainer = ref(null);
|
||
const chartInstance = ref(null);
|
||
const store = useWsStore();
|
||
|
||
// 绿色：24FF5E
|
||
// 黄色：FFB524
|
||
// 红色：FF3737
|
||
onMounted(() => {
|
||
chartContainer.value.classList.add("h-full");
|
||
const d = loadData(store.data2.monthlyTarget);
|
||
// const d = loadData([
|
||
// {
|
||
// targetProduction: 100,
|
||
// nowProduction: 66,
|
||
// targetYield: 13,
|
||
// nowYield: 3,
|
||
// },
|
||
// ]);
|
||
if (!d) {
|
||
show.value = false;
|
||
if (chartInstance.value) {
|
||
chartInstance.value.dispose();
|
||
chartInstance.value = null;
|
||
}
|
||
} else {
|
||
if (!chartInstance.value)
|
||
chartInstance.value = echarts.init(chartContainer.value);
|
||
setupFn(chartInstance.value, d);
|
||
show.value = true;
|
||
}
|
||
});
|
||
|
||
// 订阅
|
||
store.$subscribe((mutation, state) => {
|
||
const d = loadData(state.data2.monthlyTarget);
|
||
// const d = loadData([
|
||
// {
|
||
// targetProduction: 100,
|
||
// nowProduction: 66,
|
||
// targetYield: 13,
|
||
// nowYield: 3,
|
||
// },
|
||
// ]);
|
||
if (!d) {
|
||
show.value = false;
|
||
if (chartInstance.value) {
|
||
chartInstance.value.dispose();
|
||
chartInstance.value = null;
|
||
}
|
||
} else {
|
||
if (!chartInstance.value)
|
||
chartInstance.value = echarts.init(chartContainer.value);
|
||
setupFn(chartInstance.value, d);
|
||
show.value = true;
|
||
}
|
||
});
|
||
|
||
// utils
|
||
function loadData(monthlyTarget) {
|
||
if (
|
||
monthlyTarget == undefined ||
|
||
// monthlyTarget?.length == 0 ||
|
||
!monthlyTarget[0]
|
||
) {
|
||
return null;
|
||
}
|
||
|
||
return {
|
||
targetProduction: monthlyTarget[0].targetProduction,
|
||
nowProduction: monthlyTarget[0].nowProduction,
|
||
targetYield: monthlyTarget[0].targetYield,
|
||
nowYield: monthlyTarget[0].nowYield,
|
||
};
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<Container class="chart" title="本月生产线情况" icon="cube">
|
||
<div
|
||
ref="chartContainer"
|
||
class="chart-chart"
|
||
:style="{ opacity: show ? 1 : 0 }"
|
||
></div>
|
||
<p v-show="!show" class="empty-data-hint">暂无数据</p>
|
||
</Container>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.chart {
|
||
/* height: 300px; */
|
||
height: auto;
|
||
}
|
||
|
||
.chart-chart {
|
||
height: 100%;
|
||
}
|
||
</style>
|