bugfix

src/components/HourChart.vue

@@ -10,11 +10,11 @@ const chartChart = ref(null);
 const chart = ref(null);
 // 小时数据
 const hourData = ref([
-  // { lineName: '001', hour: '00:00', num: 10 },
+  // { lineName: "001", hour: "00:00", num: 10 },
-  // { lineName: '002', hour: '00:20', num: 20 },
+  // { lineName: "002", hour: "00:20", num: 20 },
-  // { lineName: '003', hour: '00:30', num: 30 },
+  // { lineName: "003", hour: "00:30", num: 30 },
-  // { lineName: '004', hour: '00:40', num: 14 },
+  // { lineName: "004", hour: "00:40", num: 14 },
-  // { lineName: '005', hour: '00:50', num: 50 }
+  // { lineName: "005", hour: "00:50", num: 50 },
 ]);
 store.$subscribe((mutation, state) => {
   // console.log("[HourChart] =======>", state.data2.lineHourList?.length);
@@ -50,7 +50,7 @@ function setupChart() {
     chartSetup(
       chart.value,
       hourData.value.map((item) => item.hour),
-      hourData.value.map((item) => item.data)
+      hourData.value.map((item) => item.num)
     );
   });
 
@@ -73,12 +73,17 @@ function setupChart() {
 
 onMounted(() => {
   chartChart.value.classList.add("h-full");
+  // setupChart();
 });
 </script>
 
 <template>
   <Container class="chart" title="小时数据" icon="cube">
-    <div ref="chartChart" class="chart-chart" style="{opacity: (hourData && hourData.length > 0) ? 1 : 0}"></div>
+    <div
+      ref="chartChart"
+      class="chart-chart"
+      style="{opacity: (hourData && hourData.length > 0) ? 1 : 0}"
+    ></div>
     <p v-show="!hourData || hourData.length === 0" class="empty-data-hint">
       暂无数据
     </p>

src/components/HourChartOptions.js

@@ -1,4 +1,5 @@
 export const options = {
+  color: ["#FFD160", "#99D66C", "#5B9BFF", "#2760FF", "#8167F6", "#FF00B2"],
   grid: {
     top: 10,
     bottom: 0,
@@ -37,9 +38,12 @@ export const options = {
       fontSize: 16,
       color: '#fff8'
     },
-    minInterval: 1,
+    // minInterval: 1,
-    max: 100,
+    // max: 100,
-    min: 1
+    // min: 1,
+    max: function(value) {
+      return value.max + Math.floor(value.max / 5)
+    }
   },
   series: [
     {
@@ -48,6 +52,16 @@ export const options = {
       type: "bar",
       // barWidth: 20,
       showBackground: true,
+      label: {
+        show: true,
+        distance: 20,
+        rotate: 90,
+        color: '#fff',
+        fontSize: 16,
+        verticalAlign: "middle",
+        position: 'top',
+        formatter: "{c}"
+      },
       backgroundStyle: {
         color: "rgba(180, 180, 180, 0.2)",
       },

src/components/RealtimeChart.vue

@@ -41,7 +41,7 @@ const options = {
     axisLabel: { show: false },
     axisTick: { show: false },
     splitLine: { show: false },
-    data: ["废片", "阶段成品"],
+    data: ["阶段成品", "废片"],
     axisLabel: {
       fontSize: 24,
       color: "#fff",

src/components/TeamChartDay.vue

@@ -37,6 +37,11 @@ function setupChart(chart, dom, data) {
 /** 有状态，处理数据 */
 function __apply(yieldArray) {
   const d = loadData(yieldArray);
+  // const d = loadData([
+  //   { teamName: "A组", yield: 11 },
+  //   { teamName: "B组", yield: 23 },
+  //   { teamName: "C组", yield: 14 },
+  // ]);
   if (!d) {
     showChartDom.value = false;
     if (chart.value) chart.value.dispose();
@@ -53,6 +58,7 @@ store.$subscribe((mutation, state) => {
 
 onMounted(() => {
   chartChart.value.classList.add("h-full");
+  // __apply();
 });
 </script>
 

src/components/TeamChartMonth.vue

@@ -16,6 +16,14 @@ const store = useWsStore();
 onMounted(() => {
   chartContainer.value.classList.add("h-full");
   const d = loadData(store.data2.monthlyTarget);
+  // const d = loadData([
+  //   {
+  //     targetProduction: 100,
+  //     nowProduction: 66,
+  //     targetYield: 13,
+  //     nowYield: 3,
+  //   },
+  // ]);
   if (!d) {
     show.value = false;
     if (chartInstance.value) {

src/components/TeamChartMonthOptions.js

@@ -1,4 +1,5 @@
 export const options = {
+  color: ["#99D66C", "#5B9BFF", "#8167F6", "#FF00B2"],
   grid: {
     top: 0,
     left: 0,

src/components/datapage/HourChart.vue

@@ -9,7 +9,16 @@ const store = useWsStore();
 const chartChart = ref(null);
 const chart = ref(null);
 // 小时数据
-const hourData = ref([]);
+const hourData = ref([
+  // { hour: "0:1", data: 10 },
+  // { hour: "0:2", data: 13 },
+  // { hour: "0:3", data: 20 },
+  // { hour: "0:4", data: 12 },
+  // { hour: "0:5", data: 12 },
+  // { hour: "0:6", data: 11 },
+  // { hour: "0:7", data: 10 },
+  // { hour: "0:8", data: 1 },
+]);
 store.$subscribe((mutation, state) => {
   if (
     state.data2.lineHourList == undefined ||
@@ -41,6 +50,7 @@ function setupChart() {
 
 onMounted(() => {
   chartChart.value.classList.add("h-full");
+  // setupChart();
 });
 </script>
 

src/components/datapage/HourChartOptions.js

@@ -1,4 +1,5 @@
 export const options = {
+  color: ["#FFD160", "#99D66C", "#5B9BFF", "#2760FF", "#8167F6", "#FF00B2"],
   grid: {
     top: 10,
     bottom: 0,
@@ -11,7 +12,7 @@ export const options = {
     data: [],
     axisLabel: {
       fontSize: 16,
-      color: '#fff8'
+      color: "#fff8",
     },
     axisLine: {
       show: true,
@@ -30,16 +31,19 @@ export const options = {
     },
     splitLine: {
       lineStyle: {
-        color: '#e6e6e633'
+        color: "#e6e6e633",
-      }
+      },
     },
     axisLabel: {
       fontSize: 16,
-      color: '#fff8'
+      color: "#fff8",
     },
     minInterval: 1,
-    max: 100,
+    // max: 100,
-    min: 1
+    // min: 1
+    max: function(value) {
+      return value.max + Math.floor(value.max / 4)
+    }
   },
   series: [
     {
@@ -48,6 +52,16 @@ export const options = {
       type: "bar",
       // barWidth: 20,
       showBackground: true,
+      label: {
+        show: true,
+        distance: 20,
+        rotate: 90,
+        color: '#fff',
+        fontSize: 16,
+        verticalAlign: "middle",
+        position: 'top',
+        formatter: "{c}"
+      },
       backgroundStyle: {
         color: "rgba(180, 180, 180, 0.2)",
       },

src/components/datapage/LatestWeekYieldOptions.js

@@ -42,7 +42,50 @@ export const options = {
     },
     minInterval: 1,
   },
-  series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
+  series: [
+    {
+      type: "bar",
+      label: {
+        show: true,
+        distance: 20,
+        rotate: 90,
+        color: "#fff",
+        verticalAlign: "middle",
+        position: 'top',
+        formatter: (params) => {
+          return params.data[1];
+        },
+      },
+    },
+    {
+      type: "bar",
+      label: {
+        show: true,
+        distance: 20,
+        rotate: 90,
+        color: "#fff",
+        verticalAlign: "middle",
+        position: 'top',
+        formatter: (params) => {
+          return params.data[2];
+        },
+      },
+    },
+    {
+      type: "bar",
+      label: {
+        show: true,
+        distance: 20,
+        rotate: 90,
+        color: "#fff",
+        verticalAlign: "middle",
+        position: 'top',
+        formatter: (params) => {
+          return params.data[3];
+        },
+      },
+    },
+  ],
 };
 
 export default function setup(

src/components/datapage/LineMonth.vue

@@ -10,9 +10,6 @@ const chartContainer = ref(null);
 const chartInstance = ref(null);
 const store = useWsStore();
 
-// 绿色：24FF5E
-// 黄色：FFB524
-// 红色：FF3737
 onMounted(() => {
   chartContainer.value.classList.add("h-full");
   const d = loadData(store.data2.monthlyTarget);

src/components/datapage/LineMonthOptions.js

@@ -1,4 +1,5 @@
 export const options = {
+  color: ["#99D66C", "#5B9BFF", "#8167F6", "#FF00B2"],
   grid: {
     top: 0,
     left: 0,
@@ -13,7 +14,7 @@ export const options = {
       top: "70%",
       textStyle: {
         fontSize: 16,
-        color: '#fffa'
+        color: '#fffd'
       },
     },
     {
@@ -23,7 +24,7 @@ export const options = {
       top: "85%",
       textStyle: {
         fontSize: 16,
-        color: '#fffa'
+        color: '#fffd'
       },
     },
     {
@@ -33,7 +34,7 @@ export const options = {
       top: "70%",
       textStyle: {
         fontSize: 16,
-        color: '#fffa'
+        color: '#fffd'
       },
     },
     {
@@ -43,7 +44,7 @@ export const options = {
       top: "85%",
       textStyle: {
         fontSize: 16,
-        color: '#fffa'
+        color: '#fffd'
       },
     },
   ],

src/components/datapage/LineToday.vue

@@ -10,9 +10,6 @@ const chartContainer = ref(null);
 const chartInstance = ref(null);
 const store = useWsStore();
 
-// 绿色：24FF5E
-// 黄色：FFB524
-// 红色：FF3737
 onMounted(() => {
   chartContainer.value.classList.add("h-full");
   const d = loadData(store.data2.dailyTarget);

src/components/datapage/LineTodayOptions.js

@@ -1,4 +1,5 @@
 export const options = {
+  color: ["#99D66C", "#5B9BFF", "#8167F6", "#FF00B2"],
   grid: {
     top: 0,
     left: 0,
@@ -13,7 +14,7 @@ export const options = {
       top: "70%",
       textStyle: {
         fontSize: 16,
-        color: "#fffa",
+        color: "#fffd",
       },
     },
     {
@@ -23,7 +24,7 @@ export const options = {
       top: "85%",
       textStyle: {
         fontSize: 16,
-        color: "#fffa",
+        color: "#fffd",
       },
     },
     {
@@ -33,7 +34,7 @@ export const options = {
       top: "70%",
       textStyle: {
         fontSize: 16,
-        color: "#fffa",
+        color: "#fffd",
       },
     },
     {
@@ -43,7 +44,7 @@ export const options = {
       top: "85%",
       textStyle: {
         fontSize: 16,
-        color: "#fffa",
+        color: "#fffd",
       },
     },
   ],

src/components/datapage/TeamChartDay.vue

@@ -37,6 +37,11 @@ function setupChart(chart, dom, data) {
 /** 有状态，处理数据 */
 function __apply(yieldArray) {
   const d = loadData(yieldArray);
+  // const d = loadData([
+  //   { teamName: "A组", yield: 11 },
+  //   { teamName: "B组", yield: 23 },
+  //   { teamName: "C组", yield: 14 },
+  // ]);
   if (!d) {
     showChartDom.value = false;
     if (chart.value) chart.value.dispose();
@@ -53,6 +58,7 @@ store.$subscribe((mutation, state) => {
 
 onMounted(() => {
   chartChart.value.classList.add("h-full");
+  // __apply();
 });
 </script>
 

src/components/datapage/TeamChartMonth.vue

@@ -37,6 +37,11 @@ function setupChart(chart, dom, data) {
 /** 有状态，处理数据 */
 function __apply(yieldArray) {
   const d = loadData(yieldArray);
+  // const d = loadData([
+  //   { teamName: "A组", yield: 11 },
+  //   { teamName: "B组", yield: 23 },
+  //   { teamName: "C组", yield: 14 },
+  // ]);
   if (!d) {
     showChartDom.value = false;
     if (chart.value) chart.value.dispose();
@@ -53,6 +58,7 @@ store.$subscribe((mutation, state) => {
 
 onMounted(() => {
   chartChart.value.classList.add("h-full");
+  // __apply();
 });
 </script>