diff --git a/src/components/HeadTime.vue b/src/components/HeadTime.vue
index e7813c0..9af505f 100644
--- a/src/components/HeadTime.vue
+++ b/src/components/HeadTime.vue
@@ -24,13 +24,7 @@ onMounted(() => {
top: 50px;
right: 420px;
font-size: 24px;
- color: #69B4FF;
+ color: #69b4ff;
line-height: 1;
}
-
-:fullscreen .datetime {
- /* right: 620px;
- top: 56px; */
- color: red;
-}
diff --git a/src/components/datapage/TeamChartMonth.vue b/src/components/datapage/TeamChartMonth.vue
index be2de0e..46088ca 100644
--- a/src/components/datapage/TeamChartMonth.vue
+++ b/src/components/datapage/TeamChartMonth.vue
@@ -8,55 +8,62 @@ import setupFn from "./TeamChartMonthOptions";
const store = useWsStore();
const chartChart = ref(null);
const chart = ref(null);
+const showChartDom = ref(false);
-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;
+/** 无状态,处理数据 */
+function loadData(yieldArray) {
+ if (yieldArray == undefined || yieldArray?.length == 0) return null;
+ const result = [];
+ 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;
+}
- 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() {
+function setupChart(chart, dom, data) {
if (chart.value) chart.value.dispose();
nextTick(() => {
- console.log("[ChartMonth] ===> 初始化表格: ", monthData.value);
- chart.value = echarts.init(chartChart.value);
- setupFn(chart.value, monthData.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.lineTeamMonthYieldList);
+});
+
onMounted(() => {
chartChart.value.classList.add("h-full");
- // nextTick(() => {
- // setupChart();
- // })
});
-
- 暂无数据
+
+ 暂无数据
@@ -65,8 +72,6 @@ onMounted(() => {
/* height: 300px; */
}
-.chart-inner {}
-
.chart-chart {
height: 100%;
}
diff --git a/src/components/datapage/TeamChartMonthOptions.js b/src/components/datapage/TeamChartMonthOptions.js
index 3aa26fc..18a4820 100644
--- a/src/components/datapage/TeamChartMonthOptions.js
+++ b/src/components/datapage/TeamChartMonthOptions.js
@@ -1,176 +1,59 @@
export const options = {
+ color: ['#a4c9d1', '#72340b', '#ffd601' ],
grid: {
- top: 0,
- left: 0,
- right: 0,
- bottom: 0
+ top: 8,
+ bottom: 20,
+ left: 42,
+ right: 28,
+ },
+ legend: {
+ show: false,
},
- title: [
- {
- text: "当前产量:" + 100 + " 片",
- left: "27%",
- textAlign: "center",
- top: "70%",
- textStyle: {
- fontSize: 16,
- color: '#fffa'
+ xAxis: {
+ max: 100,
+ splitLine: {
+ lineStyle: {
+ color: "#fff2",
},
},
- {
- text: "目标产量:" + 100 + " 片",
- left: "27%",
- textAlign: "center",
- top: "85%",
- textStyle: {
- fontSize: 16,
- color: '#fffa'
+ axisLabel: {
+ fontSize: 16,
+ color: "#e5e5e5a3",
+ },
+ },
+ yAxis: {
+ type: "category",
+ data: ["A组", "B组", "C组"],
+ inverse: true,
+ max: 2, // only the largest 3 bars will be displayed
+ axisLabel: {
+ fontSize: 16,
+ color: "#e5e5e5a3",
+ },
+ splitLine: {
+ lineStyle: {
+ color: "#e5e5e5",
},
},
- {
- text: "当前成品率:" + 22 + "%",
- left: "72%",
- textAlign: "center",
- top: "70%",
- textStyle: {
- fontSize: 16,
- color: '#fffa'
- },
- },
- {
- text: "目标成品率:" + 22 + "%",
- left: "72%",
- textAlign: "center",
- top: "85%",
- textStyle: {
- fontSize: 16,
- color: '#fffa'
- },
- },
- ],
+ },
series: [
{
- type: "gauge",
- startAngle: 90,
- center: ["27%", "35%"],
- endAngle: -270,
- radius: "55%",
- progress: {
+ type: "bar",
+ data: [34, 2, 23],
+ label: {
show: true,
- width: 12,
- },
- axisLine: {
- lineStyle: {
- width: 12,
- },
- },
- pointer: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- splitLine: {
- show: false,
- },
- axisLabel: {
- show: false,
- },
- detail: {
- valueAnimation: true,
- fontSize: 16,
- offsetCenter: [0, "0%"],
- formatter: "{value}%",
- color: "rgba(255, 255, 255, 1)",
- },
- data: [
- {
- // value: (nowProduction / targetProduction * 100).toFixed(1),
- value: 100,
- },
- ],
- },
- {
- type: "gauge",
- startAngle: 90,
- center: ["73%", "35%"],
- endAngle: -270,
- radius: "55%",
- progress: {
- show: true,
- width: 12,
- },
- axisLine: {
- lineStyle: {
- width: 12,
- },
- },
- pointer: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- splitLine: {
- show: false,
- },
- axisLabel: {
- show: false,
- },
- detail: {
- show: true,
- valueAnimation: true,
- fontSize: 16,
- offsetCenter: [0, "0%"],
- // formatter: 0 + "%",
- // formatter: (nowYield / targetYield * 100).toFixed(1) + '%',
+ position: "right",
+ formatter: "{c}%",
color: "#fff",
+ fontSize: 16,
},
- data: [
- {
- // value: targetYield,
- value: 100,
- name: "Perfect",
- title: {
- show: false,
- },
- detail: {
- show: false,
- valueAnimation: true,
- offsetCenter: ["0%", "-20%"],
- },
- },
- {
- value: 100,
- // value: nowYield,
- name: "Good",
- title: {
- show: false,
- },
- detail: {
- show: false,
- valueAnimation: true,
- offsetCenter: ["0%", "10%"],
- },
- },
- {
- value: 0,
- detail: {
- show: true,
- },
- },
- ],
},
],
+
};
-export default function setup(echartInstance, data) {
+
+export default function setup(echartInstance, dataArr) {
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.series[0].data = dataArr;
echartInstance.setOption(new_options);
}
diff --git a/src/pages/DataPage.vue b/src/pages/DataPage.vue
index f8b7b67..b43e950 100644
--- a/src/pages/DataPage.vue
+++ b/src/pages/DataPage.vue
@@ -22,7 +22,7 @@ import LineMonth from '../components/datapage/LineMonth.vue';
-
+