1
This commit is contained in:
DESKTOP-FUDKNA8\znjsz
parent
2276c1f9dd
commit
22f4b99ab1
@ -9,46 +9,44 @@ const store = useWsStore();
|
||||
const chartChart = ref(null);
|
||||
const chart = ref(null);
|
||||
|
||||
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);
|
||||
/** 无状态，处理数据 */
|
||||
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) chart.dispose();
|
||||
nextTick(() => {
|
||||
chart = echarts.init(dom);
|
||||
setupFn(chart, data);
|
||||
});
|
||||
}
|
||||
|
||||
/** 有状态，处理数据 */
|
||||
function __apply(yieldArray) {
|
||||
const d = loadData(yieldArray);
|
||||
if (!d) {
|
||||
if (chart.value) chart.value.dispose();
|
||||
return;
|
||||
}
|
||||
setupChart(chart.value, chartChart.value, d);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
console.log("[ChartDay] ===> dayData: ", dayData.value);
|
||||
setupChart();
|
||||
// 订阅
|
||||
store.$subscribe((mutation, state) => {
|
||||
__apply(state.data2.classTodayProductYield);
|
||||
});
|
||||
|
||||
// onMounted(() => {
|
||||
// nextTick(() => {
|
||||
// setupChart();
|
||||
// })
|
||||
// })
|
||||
|
||||
function setupChart() {
|
||||
if (chart.value) chart.value.dispose();
|
||||
nextTick(() => {
|
||||
chart.value = echarts.init(chartChart.value);
|
||||
setupFn(chart.value, dayData.value);
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
chartChart.value.classList.add("h-full");
|
||||
});
|
||||
@ -56,8 +54,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">
|
||||
<div
|
||||
ref="chartChart"
|
||||
class="chart-chart"
|
||||
:style="{ opacity: dayData && dayData.length > 0 ? 1 : 0 }"
|
||||
></div>
|
||||
<p v-show="!chart" class="empty-data-hint">
|
||||
暂无数据
|
||||
</p>
|
||||
</Container>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
export const options = {
|
||||
color: ['#ffd601', '#72340b', '#a4c9d1'],
|
||||
color: ['#a4c9d1', '#72340b', '#ffd601' ],
|
||||
grid: {
|
||||
top: 10,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
top: 8,
|
||||
bottom: 20,
|
||||
left: 42,
|
||||
right: 28,
|
||||
},
|
||||
legend: {
|
||||
@ -39,7 +39,7 @@ export const options = {
|
||||
series: [
|
||||
{
|
||||
type: "bar",
|
||||
data: [],
|
||||
data: [34, 2, 23],
|
||||
label: {
|
||||
show: true,
|
||||
position: "right",
|
||||
|
||||
@ -34,8 +34,6 @@ store.$subscribe((mutation, state) => {
|
||||
// 绿色：24FF5E
|
||||
// 黄色：FFB524
|
||||
// 红色：FF3737
|
||||
|
||||
|
||||
function setupChart() {
|
||||
if (chart.value) chart.value.dispose();
|
||||
nextTick(() => {
|
||||
@ -47,15 +45,12 @@ function setupChart() {
|
||||
|
||||
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>
|
||||
<div ref="chartChart" class="chart-chart" :style="{opacity: (monthData) ? 1 : 0}"></div>
|
||||
<p v-show="!monthData" class="empty-data-hint">暂无数据</p>
|
||||
</Container>
|
||||
</template>
|
||||
|
||||
@ -7,7 +7,7 @@ export const options = {
|
||||
},
|
||||
title: [
|
||||
{
|
||||
text: "当前产量：" + 100 + " 片",
|
||||
text: "当前产量：" + 118 + " 片",
|
||||
left: "27%",
|
||||
textAlign: "center",
|
||||
top: "70%",
|
||||
@ -17,7 +17,7 @@ export const options = {
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "目标产量：" + 100 + " 片",
|
||||
text: "目标产量：" + 213 + " 片",
|
||||
left: "27%",
|
||||
textAlign: "center",
|
||||
top: "85%",
|
||||
@ -27,7 +27,7 @@ export const options = {
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "当前成品率：" + 22 + "%",
|
||||
text: "当前成品率：" + 78 + "%",
|
||||
left: "72%",
|
||||
textAlign: "center",
|
||||
top: "70%",
|
||||
@ -37,7 +37,7 @@ export const options = {
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "目标成品率：" + 22 + "%",
|
||||
text: "目标成品率：" + 90 + "%",
|
||||
left: "72%",
|
||||
textAlign: "center",
|
||||
top: "85%",
|
||||
@ -85,7 +85,7 @@ export const options = {
|
||||
data: [
|
||||
{
|
||||
// value: (nowProduction / targetProduction * 100).toFixed(1),
|
||||
value: 100,
|
||||
value: 89.78,
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -128,7 +128,7 @@ export const options = {
|
||||
data: [
|
||||
{
|
||||
// value: targetYield,
|
||||
value: 100,
|
||||
value: 78,
|
||||
name: "Perfect",
|
||||
title: {
|
||||
show: false,
|
||||
@ -140,8 +140,7 @@ export const options = {
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 100,
|
||||
// value: nowYield,
|
||||
value: 90,
|
||||
name: "Good",
|
||||
title: {
|
||||
show: false,
|
||||
@ -150,6 +149,7 @@ export const options = {
|
||||
show: false,
|
||||
valueAnimation: true,
|
||||
offsetCenter: ["0%", "10%"],
|
||||
formatter: '99.23%'
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -164,13 +164,13 @@ export const options = {
|
||||
};
|
||||
export default function setup(echartInstance, data) {
|
||||
const new_options = { ...options };
|
||||
new_options.title[0].text = "当前产量：" + data.nowProduction + " 片";
|
||||
new_options.title[1].text = "目标产量：" + data.targetProduction + " 片";
|
||||
new_options.title[2].text = "当前成品率：" + data.nowYield + "%";
|
||||
new_options.title[3].text = "目标成品率：" + data.targetYield + "%";
|
||||
new_options.series[0].data[0].value = (data.nowProduction / data.targetProduction * 100).toFixed(1)
|
||||
new_options.series[1].data[0].value = data.targetYield
|
||||
new_options.series[1].data[1].value = data.nowYield
|
||||
new_options.series[1].detail.formatter = (data.nowYield / data.targetYield * 100).toFixed(2) + '%',
|
||||
// new_options.title[0].text = "当前产量：" + data.nowProduction + " 片";
|
||||
// new_options.title[1].text = "目标产量：" + data.targetProduction + " 片";
|
||||
// new_options.title[2].text = "当前成品率：" + data.nowYield + "%";
|
||||
// new_options.title[3].text = "目标成品率：" + data.targetYield + "%";
|
||||
// new_options.series[0].data[0].value = (data.nowProduction / data.targetProduction * 100).toFixed(1)
|
||||
// new_options.series[1].data[0].value = data.targetYield
|
||||
// new_options.series[1].data[1].value = data.nowYield
|
||||
// new_options.series[1].detail.formatter = (data.nowYield / data.targetYield * 100).toFixed(2) + '%',
|
||||
echartInstance.setOption(new_options);
|
||||
}
|
||||
|
||||
@ -21,7 +21,7 @@ const props = defineProps({
|
||||
</div>
|
||||
<div class="data-list">
|
||||
<HourChart />
|
||||
<!-- <TeamChartDay /> -->
|
||||
<TeamChartDay />
|
||||
<TeamChartMonth />
|
||||
</div>
|
||||
</div>
|
||||
@ -40,15 +40,14 @@ const props = defineProps({
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 32px;
|
||||
|
||||
gap: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
:fullscreen .data-list {
|
||||
width: 35%;
|
||||
gap: 32px;
|
||||
gap: 12px;
|
||||
padding: 32px 0;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user