mt-fe-group/chenzhou
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

done 本日生产线情况

Browse Source
This commit is contained in:
DESKTOP-FUDKNA8\znjsz 2024-01-31 10:49:56 +08:00
parent e0da16c903
commit 7eab7ddebb
5 changed files with 132 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/TeamChartMonth.vue
View File

@ -51,7 +51,7 @@ store.$subscribe((mutation, state) => {
function loadData(monthlyTarget) { function loadData(monthlyTarget) {
if ( if (
monthlyTarget == undefined || monthlyTarget == undefined ||
monthlyTarget?.length == 0 || // monthlyTarget?.length == 0 ||
!monthlyTarget[0] !monthlyTarget[0]
) { ) {
return null; return null;

29
src/components/TeamChartMonthOptions.js
View File

@ -3,7 +3,7 @@ export const options = {
top: 0, top: 0,
left: 0, left: 0,
right: 0, right: 0,
bottom: 0 bottom: 0,
}, },
title: [ title: [
{ {
@ -13,7 +13,7 @@ export const options = {
top: "70%", top: "70%",
textStyle: { textStyle: {
fontSize: 16, fontSize: 16,
color: '#fffa' color: "#fffa",
}, },
}, },
{ {
@ -23,7 +23,7 @@ export const options = {
top: "85%", top: "85%",
textStyle: { textStyle: {
fontSize: 16, fontSize: 16,
color: '#fffa' color: "#fffa",
}, },
}, },
{ {
@ -33,7 +33,7 @@ export const options = {
top: "70%", top: "70%",
textStyle: { textStyle: {
fontSize: 16, fontSize: 16,
color: '#fffa' color: "#fffa",
}, },
}, },
{ {
@ -43,7 +43,7 @@ export const options = {
top: "85%", top: "85%",
textStyle: { textStyle: {
fontSize: 16, fontSize: 16,
color: '#fffa' color: "#fffa",
}, },
}, },
], ],
@ -149,7 +149,7 @@ export const options = {
show: false, show: false,
valueAnimation: true, valueAnimation: true,
offsetCenter: ["0%", "10%"], offsetCenter: ["0%", "10%"],
formatter: '99.23%' formatter: "99.23%",
}, },
}, },
{ {
@ -168,14 +168,21 @@ export default function setup(echartInstance, data) {
new_options.title[1].text = "目标产量：" + data.targetProduction + " 片"; new_options.title[1].text = "目标产量：" + data.targetProduction + " 片";
new_options.title[2].text = "当前成品率：" + data.nowYield + "%"; new_options.title[2].text = "当前成品率：" + data.nowYield + "%";
new_options.title[3].text = "目标成品率：" + data.targetYield + "%"; new_options.title[3].text = "目标成品率：" + data.targetYield + "%";
new_options.series[0].data[0].value = (data.nowProduction / data.targetProduction * 100).toFixed(1) new_options.series[0].data[0].value =
new_options.series[1].data[0].value = data.targetYield data.nowProduction != null &&
new_options.series[1].data[1].value = data.nowYield data.targetProduction != null &&
new_options.series[1].detail.formatter = (data.nowYield / data.targetYield * 100).toFixed(2) + '%', data.targetProduction != 0
? ((data.nowProduction / data.targetProduction) * 100).toFixed(1)
: 0;
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 != null && data.targetYield != null && data.targetYield != 0
? ((data.nowYield / data.targetYield) * 100).toFixed(2) + "%"
: "0%";
echartInstance.setOption(new_options); echartInstance.setOption(new_options);
} }
// { // {
// "targetProduction": 99, // "targetProduction": 99,
// "nowProduction": 58, // "nowProduction": 58,

116
src/components/datapage/LineToday.vue
View File

@ -5,68 +5,100 @@ import Container from "../Base/Container.vue";
import { useWsStore } from "../../store"; import { useWsStore } from "../../store";
import setupFn from "./LineTodayOptions"; import setupFn from "./LineTodayOptions";
const show = ref(false);
const chartContainer = ref(null);
const chartInstance = ref(null);
const store = useWsStore(); 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 // 绿色：24FF5E
// 黄色：FFB524 // 黄色：FFB524
// 红色：FF3737 // 红色：FF3737
onMounted(() => {
chartContainer.value.classList.add("h-full");
function setupChart() { const d = loadData(store.data2.dailyTarget);
if (chart.value) chart.value.dispose(); // const d = loadData([
nextTick(() => { // {
console.log("[ChartMonth] ===> 初始化表格: ", monthData.value); // targetProduction: 100,
chart.value = echarts.init(chartChart.value); // nowProduction: 66,
setupFn(chart.value, monthData.value); // 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.dailyTarget);
// 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(dailyTarget) {
if (
dailyTarget == undefined ||
// dailyTarget?.length == 0 ||
!dailyTarget[0]
) {
return null;
} }
onMounted(() => { return {
chartChart.value.classList.add("h-full"); targetProduction: dailyTarget[0].targetProduction,
// nextTick(() => { nowProduction: dailyTarget[0].nowProduction,
// setupChart(); targetYield: dailyTarget[0].targetYield,
// }) nowYield: dailyTarget[0].nowYield,
}); };
}
</script> </script>
<template> <template>
<Container class="chart" title="本日生产线情况" icon="cube"> <Container class="chart" title="本日生产线情况" icon="cube">
<div ref="chartChart" class="chart-chart" style="{opacity: (monthData) ? 1 : 0}"></div> <div
<p v-show="!monthData" class="empty-data-hint">暂无数据</p> ref="chartContainer"
class="chart-chart"
:style="{ opacity: show ? 1 : 0 }"
></div>
<p v-show="!show" class="empty-data-hint">暂无数据</p>
</Container> </Container>
</template> </template>
<style scoped> <style scoped>
.chart { .chart {
/* height: 300px; */ /* height: 300px; */
height: auto;
} }
.chart-inner {}
.chart-chart { .chart-chart {
height: 100%; height: 100%;
} }

57
src/components/datapage/LineTodayOptions.js
View File

@ -3,47 +3,47 @@ export const options = {
top: 0, top: 0,
left: 0, left: 0,
right: 0, right: 0,
bottom: 0 bottom: 0,
}, },
title: [ title: [
{ {
text: "当前产量：" + 100 + " 片", text: "当前产量：" + 118 + " 片",
left: "27%", left: "27%",
textAlign: "center", textAlign: "center",
top: "70%", top: "70%",
textStyle: { textStyle: {
fontSize: 16, fontSize: 16,
color: '#fffa' color: "#fffa",
}, },
}, },
{ {
text: "目标产量：" + 100 + " 片", text: "目标产量：" + 213 + " 片",
left: "27%", left: "27%",
textAlign: "center", textAlign: "center",
top: "85%", top: "85%",
textStyle: { textStyle: {
fontSize: 16, fontSize: 16,
color: '#fffa' color: "#fffa",
}, },
}, },
{ {
text: "当前成品率：" + 22 + "%", text: "当前成品率：" + 78 + "%",
left: "72%", left: "72%",
textAlign: "center", textAlign: "center",
top: "70%", top: "70%",
textStyle: { textStyle: {
fontSize: 16, fontSize: 16,
color: '#fffa' color: "#fffa",
}, },
}, },
{ {
text: "目标成品率：" + 22 + "%", text: "目标成品率：" + 90 + "%",
left: "72%", left: "72%",
textAlign: "center", textAlign: "center",
top: "85%", top: "85%",
textStyle: { textStyle: {
fontSize: 16, fontSize: 16,
color: '#fffa' color: "#fffa",
}, },
}, },
], ],
@ -56,11 +56,11 @@ export const options = {
radius: "55%", radius: "55%",
progress: { progress: {
show: true, show: true,
width: 12, width: 24,
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
width: 12, width: 24,
}, },
}, },
pointer: { pointer: {
@ -85,7 +85,7 @@ export const options = {
data: [ data: [
{ {
// value: (nowProduction / targetProduction * 100).toFixed(1), // value: (nowProduction / targetProduction * 100).toFixed(1),
value: 100, value: 89.78,
}, },
], ],
}, },
@ -97,11 +97,11 @@ export const options = {
radius: "55%", radius: "55%",
progress: { progress: {
show: true, show: true,
width: 12, width: 24,
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
width: 12, width: 24,
}, },
}, },
pointer: { pointer: {
@ -128,7 +128,7 @@ export const options = {
data: [ data: [
{ {
// value: targetYield, // value: targetYield,
value: 100, value: 78,
name: "Perfect", name: "Perfect",
title: { title: {
show: false, show: false,
@ -140,8 +140,7 @@ export const options = {
}, },
}, },
{ {
value: 100, value: 90,
// value: nowYield,
name: "Good", name: "Good",
title: { title: {
show: false, show: false,
@ -150,6 +149,7 @@ export const options = {
show: false, show: false,
valueAnimation: true, valueAnimation: true,
offsetCenter: ["0%", "10%"], offsetCenter: ["0%", "10%"],
formatter: "99.23%",
}, },
}, },
{ {
@ -168,9 +168,24 @@ export default function setup(echartInstance, data) {
new_options.title[1].text = "目标产量：" + data.targetProduction + " 片"; new_options.title[1].text = "目标产量：" + data.targetProduction + " 片";
new_options.title[2].text = "当前成品率：" + data.nowYield + "%"; new_options.title[2].text = "当前成品率：" + data.nowYield + "%";
new_options.title[3].text = "目标成品率：" + data.targetYield + "%"; new_options.title[3].text = "目标成品率：" + data.targetYield + "%";
new_options.series[0].data[0].value = (data.nowProduction / data.targetProduction * 100).toFixed(1) new_options.series[0].data[0].value =
new_options.series[1].data[0].value = data.targetYield data.nowProduction != null &&
new_options.series[1].data[1].value = data.nowYield data.targetProduction != null &&
new_options.series[1].detail.formatter = (data.nowYield / data.targetYield * 100).toFixed(2) + '%', data.targetProduction != 0
? ((data.nowProduction / data.targetProduction) * 100).toFixed(1)
: 0;
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 != null && data.targetYield != null && data.targetYield != 0
? ((data.nowYield / data.targetYield) * 100).toFixed(2) + "%"
: "0%";
echartInstance.setOption(new_options); echartInstance.setOption(new_options);
} }
// {
// "targetProduction": 99,
// "nowProduction": 58,
// "targetYield": 12,
// "nowYield": 9
// }

2
src/pages/DataPage.vue
View File

@ -16,7 +16,7 @@ import LineMonth from '../components/datapage/LineMonth.vue';
<!-- 近7日产量 --> <!-- 近7日产量 -->
<LatestWeekYield /> <LatestWeekYield />
<!-- 本日生产线情况 --> <!-- 本日生产线情况 -->
<!-- <LineToday /> --> <LineToday />
<!-- 本月生产线情况 --> <!-- 本月生产线情况 -->
<!-- <LineMonth /> --> <!-- <LineMonth /> -->
<!-- 本日班组情况 --> <!-- 本日班组情况 -->