done 本日生产线情况
This commit is contained in:
		| @@ -51,7 +51,7 @@ store.$subscribe((mutation, state) => { | ||||
| function loadData(monthlyTarget) { | ||||
|   if ( | ||||
|     monthlyTarget == undefined || | ||||
|     monthlyTarget?.length == 0 || | ||||
|     // monthlyTarget?.length == 0 || | ||||
|     !monthlyTarget[0] | ||||
|   ) { | ||||
|     return null; | ||||
|   | ||||
| @@ -3,7 +3,7 @@ export const options = { | ||||
|     top: 0, | ||||
|     left: 0, | ||||
|     right: 0, | ||||
|     bottom: 0 | ||||
|     bottom: 0, | ||||
|   }, | ||||
|   title: [ | ||||
|     { | ||||
| @@ -13,7 +13,7 @@ export const options = { | ||||
|       top: "70%", | ||||
|       textStyle: { | ||||
|         fontSize: 16, | ||||
|         color: '#fffa' | ||||
|         color: "#fffa", | ||||
|       }, | ||||
|     }, | ||||
|     { | ||||
| @@ -23,7 +23,7 @@ export const options = { | ||||
|       top: "85%", | ||||
|       textStyle: { | ||||
|         fontSize: 16, | ||||
|         color: '#fffa' | ||||
|         color: "#fffa", | ||||
|       }, | ||||
|     }, | ||||
|     { | ||||
| @@ -33,7 +33,7 @@ export const options = { | ||||
|       top: "70%", | ||||
|       textStyle: { | ||||
|         fontSize: 16, | ||||
|         color: '#fffa' | ||||
|         color: "#fffa", | ||||
|       }, | ||||
|     }, | ||||
|     { | ||||
| @@ -43,7 +43,7 @@ export const options = { | ||||
|       top: "85%", | ||||
|       textStyle: { | ||||
|         fontSize: 16, | ||||
|         color: '#fffa' | ||||
|         color: "#fffa", | ||||
|       }, | ||||
|     }, | ||||
|   ], | ||||
| @@ -149,7 +149,7 @@ export const options = { | ||||
|             show: false, | ||||
|             valueAnimation: true, | ||||
|             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[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.series[0].data[0].value = | ||||
|     data.nowProduction != null && | ||||
|     data.targetProduction != null && | ||||
|     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); | ||||
| } | ||||
|  | ||||
|  | ||||
| // { | ||||
| //   "targetProduction": 99, | ||||
| //   "nowProduction": 58, | ||||
|   | ||||
| @@ -5,68 +5,100 @@ import Container from "../Base/Container.vue"; | ||||
| import { useWsStore } from "../../store"; | ||||
| import setupFn from "./LineTodayOptions"; | ||||
|  | ||||
| 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 | ||||
|  | ||||
|  | ||||
| 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); | ||||
| onMounted(() => { | ||||
|   chartContainer.value.classList.add("h-full"); | ||||
|   const d = loadData(store.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; | ||||
|   } | ||||
| }); | ||||
|  | ||||
| // 订阅 | ||||
| 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(() => { | ||||
|   chartChart.value.classList.add("h-full"); | ||||
|   // nextTick(() => { | ||||
|   //   setupChart(); | ||||
|   // }) | ||||
| }); | ||||
|   return { | ||||
|     targetProduction: dailyTarget[0].targetProduction, | ||||
|     nowProduction: dailyTarget[0].nowProduction, | ||||
|     targetYield: dailyTarget[0].targetYield, | ||||
|     nowYield: dailyTarget[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%; | ||||
| } | ||||
|   | ||||
| @@ -3,47 +3,47 @@ export const options = { | ||||
|     top: 0, | ||||
|     left: 0, | ||||
|     right: 0, | ||||
|     bottom: 0 | ||||
|     bottom: 0, | ||||
|   }, | ||||
|   title: [ | ||||
|     { | ||||
|       text: "当前产量:" + 100 + " 片", | ||||
|       text: "当前产量:" + 118 + " 片", | ||||
|       left: "27%", | ||||
|       textAlign: "center", | ||||
|       top: "70%", | ||||
|       textStyle: { | ||||
|         fontSize: 16, | ||||
|         color: '#fffa' | ||||
|         color: "#fffa", | ||||
|       }, | ||||
|     }, | ||||
|     { | ||||
|       text: "目标产量:" + 100 + " 片", | ||||
|       text: "目标产量:" + 213 + " 片", | ||||
|       left: "27%", | ||||
|       textAlign: "center", | ||||
|       top: "85%", | ||||
|       textStyle: { | ||||
|         fontSize: 16, | ||||
|         color: '#fffa' | ||||
|         color: "#fffa", | ||||
|       }, | ||||
|     }, | ||||
|     { | ||||
|       text: "当前成品率:" + 22 + "%", | ||||
|       text: "当前成品率:" + 78 + "%", | ||||
|       left: "72%", | ||||
|       textAlign: "center", | ||||
|       top: "70%", | ||||
|       textStyle: { | ||||
|         fontSize: 16, | ||||
|         color: '#fffa' | ||||
|         color: "#fffa", | ||||
|       }, | ||||
|     }, | ||||
|     { | ||||
|       text: "目标成品率:" + 22 + "%", | ||||
|       text: "目标成品率:" + 90 + "%", | ||||
|       left: "72%", | ||||
|       textAlign: "center", | ||||
|       top: "85%", | ||||
|       textStyle: { | ||||
|         fontSize: 16, | ||||
|         color: '#fffa' | ||||
|         color: "#fffa", | ||||
|       }, | ||||
|     }, | ||||
|   ], | ||||
| @@ -56,11 +56,11 @@ export const options = { | ||||
|       radius: "55%", | ||||
|       progress: { | ||||
|         show: true, | ||||
|         width: 12, | ||||
|         width: 24, | ||||
|       }, | ||||
|       axisLine: { | ||||
|         lineStyle: { | ||||
|           width: 12, | ||||
|           width: 24, | ||||
|         }, | ||||
|       }, | ||||
|       pointer: { | ||||
| @@ -85,7 +85,7 @@ export const options = { | ||||
|       data: [ | ||||
|         { | ||||
|           // value: (nowProduction / targetProduction * 100).toFixed(1), | ||||
|           value: 100, | ||||
|           value: 89.78, | ||||
|         }, | ||||
|       ], | ||||
|     }, | ||||
| @@ -97,11 +97,11 @@ export const options = { | ||||
|       radius: "55%", | ||||
|       progress: { | ||||
|         show: true, | ||||
|         width: 12, | ||||
|         width: 24, | ||||
|       }, | ||||
|       axisLine: { | ||||
|         lineStyle: { | ||||
|           width: 12, | ||||
|           width: 24, | ||||
|         }, | ||||
|       }, | ||||
|       pointer: { | ||||
| @@ -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%", | ||||
|           }, | ||||
|         }, | ||||
|         { | ||||
| @@ -168,9 +168,24 @@ export default function setup(echartInstance, data) { | ||||
|   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.series[0].data[0].value = | ||||
|     data.nowProduction != null && | ||||
|     data.targetProduction != null && | ||||
|     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); | ||||
| } | ||||
|  | ||||
| // { | ||||
| //   "targetProduction": 99, | ||||
| //   "nowProduction": 58, | ||||
| //   "targetYield": 12, | ||||
| //   "nowYield": 9 | ||||
| // } | ||||
|   | ||||
| @@ -16,7 +16,7 @@ import LineMonth from '../components/datapage/LineMonth.vue'; | ||||
|     <!-- 近7日产量 --> | ||||
|     <LatestWeekYield /> | ||||
|     <!-- 本日生产线情况 --> | ||||
|     <!-- <LineToday /> --> | ||||
|     <LineToday /> | ||||
|     <!-- 本月生产线情况 --> | ||||
|     <!-- <LineMonth /> --> | ||||
|     <!-- 本日班组情况 --> | ||||
|   | ||||
		Referens i nytt ärende
	
	Block a user