update charts

src/assets/menu_icon/Icon3D.vue

@@ -40,7 +40,7 @@ defineProps({
           result="shadowBlurOuter1"
         ></feGaussianBlur>
         <feColorMatrix
-          values="0 0 0 0 0.000727194297   0 0 0 0 0.0682545659   0 0 0 0 0.141870471  0 0 0 1 0"
+          values="0 0 0 0 0.0123   0 0 0 0 0.0123   0 0 0 0 0.0123  0 0 0 1 0"
           type="matrix"
           in="shadowBlurOuter1"
           result="shadowMatrixOuter1"

src/components/HourChart.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch, onMounted } from "vue";
+import { ref, watch, onMounted, nextTick } from "vue";
 import * as echarts from "echarts";
 import Container from "./Base/Container.vue";
 import { useWsStore } from "../store";
@@ -9,46 +9,69 @@ const store = useWsStore();
 const chartChart = ref(null);
 const chart = ref(null);
 // 小时数据
-const hourData = ref(null);
+const hourData = ref([]);
 store.$subscribe((mutation, state) => {
+  console.log("=======>", state.data2.lineHourList?.length);
+  if (
+    state.data2.lineHourList == undefined ||
+    state.data2.lineHourList?.length == 0
+  ) {
+    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) => ({
     id: `${item.lineName}_${index}`,
     hour: item.hour || `${index}`.padStart(2, "0"),
-    data: item.num || Math.random() * 100,
+    data: item.num || Math.floor(Math.random() * 100),
   }));
-  chartSetup(
-    chart.value,
-    hourData.value.map((item) => item.hour),
-    hourData.value.map((item) => item.data)
-  );
+  setupChart();
 });
 
-// watch(hourData, (newVal) => {
-//   if (newVal) {
-//     chartSetup(
-//       chart.value,
-//       newVal.map((item) => item.hour),
-//       newVal.map((item) => item.data)
-//     );
-//   }
-// });
+function setupChart() {
+  if (chart.value) chart.value.dispose();
+  nextTick(() => {
+    chart.value = echarts.init(chartChart.value);
+    chartSetup(
+      chart.value,
+      hourData.value.map((item) => item.hour),
+      hourData.value.map((item) => item.data)
+    );
+  });
+
+  // chart.value.setOption({
+  //   xAxis: {
+  //     type: "category",
+  //     data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+  //   },
+  //   yAxis: {
+  //     type: "value",
+  //   },
+  //   series: [
+  //     {
+  //       data: [150, 230, 224, 218, 135, 147, 260],
+  //       type: "line",
+  //     },
+  //   ],
+  // });
+}
 
 onMounted(() => {
   chartChart.value.classList.add("h-full");
-  chart.value = echarts.init(chartChart.value);
-  chart.value.setOption({})
 });
 </script>
 
 <template>
   <Container class="chart" title="小时数据" icon="cube">
     <div
-      v-show="hourData && hourData.length > 0"
       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>
+    <p v-show="!hourData || hourData.length === 0" class="empty-data-hint">
+      暂无数据
+    </p>
   </Container>
 </template>
 
@@ -58,7 +81,6 @@ onMounted(() => {
 }
 
 .chart-inner {
-  background: #0f0;
 }
 
 .chart-chart {

src/components/HourChartOptions.js

@@ -1,21 +1,22 @@
 export const options = {
   grid: {
-    top: "5%",
-    bottom: "5%",
-    left: "3%",
-    right: "3%",
+    top: "10",
+    bottom: "10",
+    left: "10",
+    right: "10",
     containLabel: true,
   },
   xAxis: {
     type: "category",
-    data: ["00", "11", "22", "33", "44", "55", "66"],
+    data: [],
     axisLabel: {
       fontSize: 16,
+      color: '#fff8'
     },
     axisLine: {
       show: true,
       lineStyle: {
-        color: "#dff1fe",
+        color: "#e6e6e633",
       },
     },
   },
@@ -24,13 +25,21 @@ export const options = {
     axisLine: {
       show: true,
       lineStyle: {
-        color: "#dff1fe",
+        color: "#e6e6e633",
       },
     },
+    splitLine: {
+      lineStyle: {
+        color: '#e6e6e633'
+      }
+    },
     axisLabel: {
       fontSize: 16,
+      color: '#fff8'
     },
     minInterval: 1,
+    max: 100,
+    min: 1
   },
   series: [
     {

src/components/TeamChartDay.vue

@@ -3,43 +3,59 @@ import { ref, onMounted } from "vue";
 import * as echarts from "echarts";
 import Container from "./Base/Container.vue";
 import { useWsStore } from "../store";
-import chartSetup from "./HourChartOptions";
+import setupFn from "./TeamChartDayOptions";
 
 const store = useWsStore();
 const chartChart = ref(null);
 const chart = ref(null);
 
-// 小时数据
-const hourData = ref(null);
+const dayData = ref([]);
 store.$subscribe((mutation, state) => {
-  console.log("lineHourList ===> ", state.data2.lineHourList);
-  hourData.value = (state.data2?.lineHourList ?? []).map((item, index) => ({
-    id: `${item.lineName}_${index}`,
-    hour: item.hour || `${index}`.padStart(2, "0"),
-    data: item.num || Math.random() * 100,
-  }));
-  chartSetup(
-    chart.value,
-    hourData.value.map((item) => item.hour),
-    hourData.value.map((item) => item.data)
+  if (
+    state.data2.classTodayProductYield == undefined ||
+    state.data2.classTodayProductYield?.length == 0
+  ) {
+    dayData.value.splice(0);
+    if (chart.value) chart.value.dispose();
+    return;
+  }
+  console.log(
+    "classTodayProductYield ===> ",
+    state.data2.classTodayProductYield
   );
+  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);
+    } else if (state.data2.classTodayProductYield[i].teamName == "B组") {
+      dayData.value[1] = parseInt(state.data2.classTodayProductYield[i].yield);
+    } else if (state.data2.classTodayProductYield[i].teamName == "C组") {
+      dayData.value[2] = parseInt(state.data2.classTodayProductYield[i].yield);
+    }
+  }
+  setupChart();
 });
 
+function setupChart() {
+  if (chart.value) chart.value.dispose();
+  nextTick(() => {
+    chart.value = echarts.init(chartChart.value);
+    setupFn(chart.value, dayData.value);
+  });
+}
+
 onMounted(() => {
   chartChart.value.classList.add("h-full");
-  chart.value = echarts.init(chartChart.value);
-  chart.value.setOption({});
 });
 </script>
 
 <template>
   <Container class="chart" title="本日班组情况" icon="cube">
     <div
-      v-show="hourData && hourData.length > 0"
       ref="chartChart"
       class="chart-chart"
+      style="{opacity: (dayData && dayData.length > 0) ? 1 : 0}"
     ></div>
-    <p v-show="!hourData || hourData.length === 0" class="empty-data-hint">
+    <p v-show="!dayData || dayData.length === 0" class="empty-data-hint">
       暂无数据
     </p>
   </Container>
@@ -51,7 +67,6 @@ onMounted(() => {
 }
 
 .chart-inner {
-  background: #0f0;
 }
 
 .chart-chart {

src/components/TeamChartDayOptions.js

@@ -1,15 +1,16 @@
 export const options = {
   grid: {
-    top: "10%",
-    bottom: "5%",
-    left: "3%",
-    right: "5%",
+    top: "10",
+    bottom: "10",
+    left: "10",
+    right: "10",
     containLabel: true,
   },
   xAxis: {
     max: 100,
     axisLabel: {
       fontSize: 22,
+      color: "#e5e5e533",
     },
   },
   yAxis: {
@@ -21,6 +22,11 @@ export const options = {
     max: 2, // only the largest 3 bars will be displayed
     axisLabel: {
       fontSize: 22,
+      color: "#e5e5e533",
+    },
+    splitLine: {
+      show: false,
+      color: "#e5e5e533",
     },
   },
   series: [
@@ -34,7 +40,7 @@ export const options = {
         position: "right",
         valueAnimation: true,
         formatter: "{c}%",
-        color: "rgba(255, 255, 255, 1)",
+        color: "#fff8",
         fontWeight: "bold",
         fontSize: 22,
       },

src/components/TeamChartMonth.vue

@@ -3,45 +3,50 @@ import { ref, onMounted } from "vue";
 import * as echarts from "echarts";
 import Container from "./Base/Container.vue";
 import { useWsStore } from "../store";
-import chartSetup from "./HourChartOptions";
+import setupFn from "./TeamChartMonthOptions";
 
 const store = useWsStore();
 const chartChart = ref(null);
 const chart = ref(null);
 
-// 小时数据
-const hourData = ref(null);
+const monthData = ref(null);
 store.$subscribe((mutation, state) => {
-  console.log("lineHourList ===> ", state.data2.lineHourList);
-  hourData.value = (state.data2?.lineHourList ?? []).map((item, index) => ({
-    id: `${item.lineName}_${index}`,
-    hour: item.hour || `${index}`.padStart(2, "0"),
-    data: item.num || Math.random() * 100,
-  }));
-  chartSetup(
-    chart.value,
-    hourData.value.map((item) => item.hour),
-    hourData.value.map((item) => item.data)
-  );
+  if (
+    state.data2.monthlyTarget == undefined ||
+    state.data2.monthlyTarget?.length == 0
+  ) {
+    monthData.value = null;
+    if (chart.value) chart.value.dispose();
+    return;
+  }
+  console.log("monthlyTarget ===> ", state.data2.monthlyTarget);
+  const { targetProduction, nowProduction, targetYield, nowYield } =
+    state.data2.monthlyTarget[0];
+  monthData.value = { targetProduction, nowProduction, targetYield, nowYield };
+  setupChart();
 });
 
+function setupChart() {
+  if (chart.value) chart.value.dispose();
+  nextTick(() => {
+    chart.value = echarts.init(chartChart.value);
+    setupFn(chart.value, monthData.value);
+  });
+}
+
 onMounted(() => {
   chartChart.value.classList.add("h-full");
-  chart.value = echarts.init(chartChart.value);
-  chart.value.setOption({});
 });
 </script>
 
 <template>
   <Container class="chart" title="本月班组情况" icon="cube">
     <div
-      v-show="hourData && hourData.length > 0"
       ref="chartChart"
       class="chart-chart"
+      style="{opacity: (monthData) ? 1 : 0}"
     ></div>
-    <p v-show="!hourData || hourData.length === 0" class="empty-data-hint">
-      暂无数据
-    </p>
+    <p v-show="!monthData" class="empty-data-hint">暂无数据</p>
   </Container>
 </template>
 
@@ -51,7 +56,6 @@ onMounted(() => {
 }
 
 .chart-inner {
-  background: #0f0;
 }
 
 .chart-chart {

src/components/TeamChartMonthOptions.js

@@ -117,7 +117,7 @@ export const options = {
         offsetCenter: [0, "0%"],
         formatter: 0 + "%",
         // formatter: (nowYield / targetYield * 100).toFixed(1) + '%',
-        color: "rgba(255, 255, 255, 1)",
+        color: "#fff8",
       },
       data: [
         {

src/components/Tools.vue

@@ -3,11 +3,15 @@ import { ref, watch, onMounted } from "vue";
 import IconBack from "../assets/menu_icon/IconBack.vue";
 import IconExchange from "../assets/menu_icon/IconExchange.vue";
 import IconSetting from "../assets/menu_icon/IconSetting.vue";
+
+function toHome() {
+  document.location.href = '/1-1'
+}
 </script>
 
 <template>
   <div class="tools">
-    <button><IconBack /></button>
+    <button @click="toHome"><IconBack /></button>
     <button><IconSetting /></button>
     <button><IconExchange /></button>
   </div>

src/pages/AnnouncementPage.vue

@@ -2,6 +2,7 @@
 <script setup>
 import { ref } from "vue";
 import { useWsStore } from "../store";
+import IconBack from "../assets/menu_icon/IconBack.vue";
 const emit = defineEmits(["home"]);
 
 // load 公告
@@ -45,10 +46,18 @@ const handleClose = () => {
     </main>
     <div class="announcement-footer">
       <button
-        style="position: absolute; left: 0; bottom: 10px"
+        style="
+          position: absolute;
+          left: 0;
+          bottom: 10px;
+          appearance: none;
+          background: transparent;
+          border: none;
+          cursor: pointer;
+        "
         @click="handleClose"
       >
-        返回
+        <IconBack />
       </button>
       <ScrollText> {{ horizontal_content }} </ScrollText>
     </div>

vite.config.js

@@ -4,4 +4,8 @@ import vue from '@vitejs/plugin-vue'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  server: {
+    host: '0.0.0.0',
+    port: '5173'
+  }
 })