|
|
@@ -5,68 +5,100 @@ 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(); |
|
|
|
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 |
|
|
|
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; |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
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); |
|
|
|
}); |
|
|
|
} |
|
|
|
// utils |
|
|
|
function loadData(monthlyTarget) { |
|
|
|
if ( |
|
|
|
monthlyTarget == undefined || |
|
|
|
// monthlyTarget?.length == 0 || |
|
|
|
!monthlyTarget[0] |
|
|
|
) { |
|
|
|
return null; |
|
|
|
} |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
chartChart.value.classList.add("h-full"); |
|
|
|
// nextTick(() => { |
|
|
|
// setupChart(); |
|
|
|
// }) |
|
|
|
}); |
|
|
|
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="chartChart" class="chart-chart" style="{opacity: (monthData) ? 1 : 0}"></div> |
|
|
|
<p v-show="!monthData" class="empty-data-hint">暂无数据</p> |
|
|
|
<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-inner {} |
|
|
|
|
|
|
|
.chart-chart { |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|