|
|
@@ -8,47 +8,49 @@ import setupFn from "./TeamChartDayOptions"; |
|
|
|
const store = useWsStore(); |
|
|
|
const chartChart = ref(null); |
|
|
|
const chart = ref(null); |
|
|
|
const showChartDom = ref(false); |
|
|
|
|
|
|
|
const dayData = ref([]); |
|
|
|
store.$subscribe((mutation, state) => { |
|
|
|
console.log("[ChartDay] ===> state: ", state.data2.classTodayProductYield); |
|
|
|
if ( |
|
|
|
state.data2.classTodayProductYield == undefined || |
|
|
|
state.data2.classTodayProductYield?.length == 0 |
|
|
|
) { |
|
|
|
console.log("[ChartDay] ===> 清除状态"); |
|
|
|
dayData.value.splice(0); |
|
|
|
if (chart.value) chart.value.dispose(); |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
for (let i = 0; i < state.data2.classTodayProductYield.length; ++i) { |
|
|
|
if (state.data2.classTodayProductYield[i].teamName == "A组") { |
|
|
|
dayData.value[0] = parseInt(state.data2.classTodayProductYield[i].yield); |
|
|
|
} else if (state.data2.classTodayProductYield[i].teamName == "B组") { |
|
|
|
dayData.value[1] = parseInt(state.data2.classTodayProductYield[i].yield); |
|
|
|
} else if (state.data2.classTodayProductYield[i].teamName == "C组") { |
|
|
|
dayData.value[2] = parseInt(state.data2.classTodayProductYield[i].yield); |
|
|
|
/** 无状态,处理数据 */ |
|
|
|
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); |
|
|
|
} |
|
|
|
} |
|
|
|
console.log("[ChartDay] ===> dayData: ", dayData.value); |
|
|
|
setupChart(); |
|
|
|
}); |
|
|
|
|
|
|
|
// onMounted(() => { |
|
|
|
// nextTick(() => { |
|
|
|
// setupChart(); |
|
|
|
// }) |
|
|
|
// }) |
|
|
|
return result; |
|
|
|
} |
|
|
|
|
|
|
|
function setupChart() { |
|
|
|
function setupChart(chart, dom, data) { |
|
|
|
if (chart.value) chart.value.dispose(); |
|
|
|
nextTick(() => { |
|
|
|
chart.value = echarts.init(chartChart.value); |
|
|
|
setupFn(chart.value, dayData.value); |
|
|
|
chart.value = echarts.init(dom); |
|
|
|
setupFn(chart.value, data); |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
/** 有状态,处理数据 */ |
|
|
|
function __apply(yieldArray) { |
|
|
|
const d = loadData(yieldArray); |
|
|
|
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"); |
|
|
|
}); |
|
|
@@ -56,10 +58,12 @@ onMounted(() => { |
|
|
|
|
|
|
|
<template> |
|
|
|
<Container class="chart" title="本日班组情况" icon="cube"> |
|
|
|
<div ref="chartChart" class="chart-chart" style="{opacity: (dayData && dayData.length > 0) ? 1 : 0}"></div> |
|
|
|
<p v-show="!dayData || dayData.length === 0" class="empty-data-hint"> |
|
|
|
暂无数据 |
|
|
|
</p> |
|
|
|
<div |
|
|
|
ref="chartChart" |
|
|
|
class="chart-chart" |
|
|
|
:style="{ opacity: showChartDom ? 1 : 0 }" |
|
|
|
></div> |
|
|
|
<p v-show="!chart" class="empty-data-hint">暂无数据</p> |
|
|
|
</Container> |
|
|
|
</template> |
|
|
|
|
|
|
|