update

src/MainPage.vue

@@ -43,18 +43,21 @@ watch(() => settings.carouselTime, val => {
 })
 
 const pathMap = {
-  '/1-1': 1,
-  '/1-2': 2,
-  '/1-3': 3,
-  '/1-4': 4,
+  // 钢三线
+  '/3-1': 1,
+  '/3-2': 2,
+  '/3-3': 11, // 3,
+  '/3-4': 12,
+  // 钢二线
   '/2-1': 5,
   '/2-2': 6,
   '/2-3': 7,
-  '/2-4': 8,
-  '/3-1': 9,
-  '/3-2': 10,
-  '/3-3': 11,
-  '/3-4': 12
+  '/2-4': 4,
+  // 钢一线
+  '/1-1': 9,
+  '/1-2': 10,
+  '/1-3': 3,
+  '/1-4': 8
 }
 </script>
 

src/components/HourChart.vue

@@ -9,19 +9,32 @@ const store = useWsStore();
 const chartChart = ref(null);
 const chart = ref(null);
 // 小时数据
-const hourData = ref([]);
+const hourData = ref([
+  { lineName: '001', hour: '00:00', num: 10 },
+  { lineName: '002', hour: '00:20', num: 20 },
+  { lineName: '003', hour: '00:30', num: 30 },
+  { lineName: '004', hour: '00:40', num: 14 },
+  { lineName: '005', hour: '00:50', num: 50 }
+]);
 store.$subscribe((mutation, state) => {
-  console.log("=======>", state.data2.lineHourList?.length);
+  // console.log("[HourChart] =======>", state.data2.lineHourList?.length);
   if (
     state.data2.lineHourList == undefined ||
     state.data2.lineHourList?.length == 0
   ) {
+    // console.log("[HourChart] 清除数据");
     hourData.value.splice(0);
     if (chart.value) chart.value.dispose();
     return;
   }
-  console.log("lineHourList ===> ", state.data2.lineHourList);
-  hourData.value = (state.data2?.lineHourList ?? []).map((item, index) => ({
+  // console.log("[HourChart]  ===> 有数据: ", state.data2.lineHourList);
+  hourData.value = (state.data2?.lineHourList ?? [
+    { lineName: '001', hour: '00:00', num: 10 },
+    { lineName: '002', hour: '00:20', num: 20 },
+    { lineName: '003', hour: '00:30', num: 30 },
+    { lineName: '004', hour: '00:40', num: 14 },
+    { lineName: '005', hour: '00:50', num: 50 },
+  ]).map((item, index) => ({
     id: `${item.lineName}_${index}`,
     hour: item.hour || `${index}`.padStart(2, "0"),
     data: item.num || Math.floor(Math.random() * 100),
@@ -33,6 +46,7 @@ function setupChart() {
   if (chart.value) chart.value.dispose();
   nextTick(() => {
     chart.value = echarts.init(chartChart.value);
+    // console.log("[HourChart]  ===> 设置chart: ", chart.value, hourData.value.map((item) => item.hour), hourData.value.map((item) => item.data));
     chartSetup(
       chart.value,
       hourData.value.map((item) => item.hour),
@@ -64,11 +78,7 @@ onMounted(() => {
 
 <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>
@@ -80,8 +90,7 @@ onMounted(() => {
   height: 300px;
 }
 
-.chart-inner {
-}
+.chart-inner {}
 
 .chart-chart {
   height: 100%;

src/components/HourChartOptions.js

@@ -1,9 +1,9 @@
 export const options = {
   grid: {
-    top: "10",
-    bottom: "10",
-    left: "10",
-    right: "10",
+    top: 10,
+    bottom: 0,
+    left: 12,
+    right: 10,
     containLabel: true,
   },
   xAxis: {
@@ -43,8 +43,10 @@ export const options = {
   },
   series: [
     {
-      data: Array.from({ length: 7 }, () => Math.random() * 100),
+      data: [],
+      // data: Array.from({ length: 7 }, () => Math.random() * 100),
       type: "bar",
+      // barWidth: 20,
       showBackground: true,
       backgroundStyle: {
         color: "rgba(180, 180, 180, 0.2)",

src/components/TeamChartDay.vue

@@ -9,20 +9,23 @@ const store = useWsStore();
 const chartChart = ref(null);
 const chart = ref(null);
 
-const dayData = ref([]);
+const dayData = ref([10,12,13]);
 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);
     if (chart.value) chart.value.dispose();
     return;
   }
-  console.log(
-    "classTodayProductYield ===> ",
-    state.data2.classTodayProductYield
-  );
+  classTodayProductYield = [
+    {yieldName: 'A', yield: 10},
+    {yieldName: 'C', yield: 20},
+    {yieldName: 'B', yield: 20},
+  ]
   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);
@@ -32,6 +35,7 @@ store.$subscribe((mutation, state) => {
       dayData.value[2] = parseInt(state.data2.classTodayProductYield[i].yield);
     }
   }
+  console.log("[ChartDay]  ===>  dayData: ", dayData.value);
   setupChart();
 });
 
@@ -50,11 +54,7 @@ onMounted(() => {
 
 <template>
   <Container class="chart" title="本日班组情况" icon="cube">
-    <div
-      ref="chartChart"
-      class="chart-chart"
-      style="{opacity: (dayData && dayData.length > 0) ? 1 : 0}"
-    ></div>
+    <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">
       暂无数据
     </p>
@@ -66,8 +66,7 @@ onMounted(() => {
   height: 300px;
 }
 
-.chart-inner {
-}
+.chart-inner {}
 
 .chart-chart {
   height: 100%;

src/components/TeamChartDayOptions.js

@@ -1,9 +1,9 @@
 export const options = {
   grid: {
-    top: "10",
-    bottom: "10",
-    left: "10",
-    right: "10",
+    top: 10,
+    bottom: 0,
+    left: 12,
+    right: 10,
     containLabel: true,
   },
   xAxis: {
@@ -56,6 +56,7 @@ export const options = {
 };
 
 export default function setup(echartInstance, dataArr) {
+  debugger;
   const new_options = { ...options };
   new_options.series[0].data = dataArr;
   echartInstance.setOption(new_options);

src/pages/AlertListPage.vue

@@ -30,9 +30,9 @@ alarmList.value = (store.data1.alarmArrList ?? [
 //   }));
 // });
 
-function handleIgnore() {
-  alarmList.value.splice(0)
-}
+// function handleIgnore() {
+//   alarmList.value.splice(0)
+// }
 </script>
 
 <template>

src/pages/DataPage.vue

@@ -10,7 +10,7 @@ import TeamChartMonth from "../components/TeamChartMonth.vue";
     <div class="data-list">
       <HourChart />
       <TeamChartDay />
-      <TeamChartMonth />
+      <!-- <TeamChartMonth /> -->
     </div>
   </div>
 </template>

src/store/index.js

@@ -9,13 +9,13 @@ export const useWsStore = defineStore("wsData", () => {
   function updateData(category, data) {
     switch (category) {
       case "1":
-        data1.value = data;
+        data1.value = { ...data1.value, ...data };
         break;
       case "2":
-        data2.value = data;
+        data2.value = { ...data2.value, ...data };
         break;
       case "3":
-        data3.value = data;
+        data3.value = { ...data3.value, ...data };
       default:
         break;
     }

src/store/settings.js

@@ -10,7 +10,7 @@ export const useSettings = defineStore("settings", () => {
     carousel: false,
     carouselTime: 10000, // s
     fullscreen: false,
-    eqStatus: false,
+    eqStatus: true,
   });
 
   function changeScale(width, height) {