update charts

src/App.vue

@@ -7,11 +7,11 @@ import { useWsStore } from "./store";
 const store = useWsStore();
 
 // use websocket
-let urlPath = document.location.pathname;
-if (urlPath === "/") {
-  urlPath = "/1-1";
+let urlPath = ref(document.location.pathname);
+if (urlPath.value === "/") {
+  urlPath.value = "/1-1";
 }
-useWebsocket(store, urlPath);
+useWebsocket(store, urlPath.value);
 
 // size setting
 const size = ref(80);
@@ -23,7 +23,6 @@ onMounted(() => {
 const styles = ref({});
 function setSize(value) {
   const v = (value / 100).toFixed(2);
-  console.log("size change", value);
   styles.value = {
     transform: `scale(${v})`,
     // transform: `scale(${v * 24 / 33}, ${v})`,
@@ -34,7 +33,7 @@ function setSize(value) {
 
 <template>
   <div id="app-container">
-    <MainPage :style="styles" />
+    <MainPage :style="styles" :path="urlPath" />
     <Slider :size="size" @size-change="setSize" />
   </div>
 </template>

src/MainPage.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import Tools from "./components/Tools.vue";
 import NavMenu from "./components/NavMenu.vue";
 import AnnoucementPage from "./pages/AnnouncementPage.vue";
@@ -10,10 +10,25 @@ import DataPage from "./pages/DataPage.vue";
 import DatetimeTool from "./components/HeadTime.vue";
 import TriplePage from "./pages/3D.vue";
 
+const props = defineProps(["path"]);
+const pathMap = {
+  '/1-1': 1,
+  '/1-2': 2,
+  '/1-3': 3,
+  '/1-4': 4,
+  '/2-1': 5,
+  '/2-2': 6,
+  '/2-3': 7,
+  '/2-4': 8,
+  '/3-1': 9,
+  '/3-2': 10,
+  '/3-3': 11,
+  '/3-4': 12
+}
+
 const currentPage = ref("3d");
 const handlePageChange = (page) => {
   currentPage.value = page;
-  console.log(currentPage.value);
 };
 </script>
 
@@ -29,7 +44,7 @@ const handlePageChange = (page) => {
     />
     <div v-else class="pages-wrapper">
       <NavMenu @change="handlePageChange" />
-      <TriplePage v-if="currentPage === '3d'" line="8" />
+      <TriplePage v-if="currentPage === '3d'" :line="pathMap[path] ?? '1'" />
       <DataPage v-if="currentPage === 'data'" />
       <AlertListPage v-if="currentPage === 'alert'" />
       <RealtimePage v-if="currentPage === 'realtime'" />

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,47 +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) => {
-//   console.log("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>
 
@@ -59,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/3D.vue

@@ -380,6 +380,106 @@ const props = defineProps({
   top: 80px;
 }
 
+/* info 9  */
+.info-9 .info:nth-child(1) {
+  left: 400px;
+  bottom: 250px;
+}
+.info-9 .info:nth-child(2) {
+  left: 1100px;
+  bottom: 220px;
+}
+.info-9 .info:nth-child(3) {
+  left: 496px;
+  bottom: 570px;
+}
+.info-9 .info:nth-child(4) {
+  left: 1100px;
+  bottom: 490px;
+}
+.info-9 .info:nth-child(5) {
+  left: 670px;
+  top: 144px;
+}
+.info-9 .info:nth-child(6) {
+  left: 1100px;
+  top: 155px;
+}
+
+/* info 10  */
+.info-10 .info:nth-child(1) {
+  left: 620px;
+  bottom: 450px;
+}
+.info-10 .info:nth-child(2) {
+  left: 1000px;
+  bottom: 320px;
+}
+.info-10 .info:nth-child(3) {
+  left: 736px;
+  top: 270px;
+}
+.info-10 .info:nth-child(4) {
+  left: 1200px;
+  top: 330px;
+}
+.info-10 .info:nth-child(5) {
+  left: 870px;
+  top: 144px;
+}
+.info-10 .info:nth-child(6) {
+  left: 1100px;
+  top: 195px;
+}
+.info-10 .info:nth-child(7) {
+  left: 900px;
+  top: 55px;
+}
+.info-10 .info:nth-child(8) {
+  left: 1200px;
+  top: 68px;
+}
+
+/* info 11  */
+.info-11 .info:nth-child(1) {
+  left: 570px;
+  bottom: 450px;
+}
+.info-11 .info:nth-child(2) {
+  left: 1100px;
+  bottom: 410px;
+}
+.info-11 .info:nth-child(3) {
+  left: 436px;
+  bottom: 170px;
+}
+.info-11 .info:nth-child(4) {
+  left: 1036px;
+  bottom: 170px;
+}
+.info-11 .info:nth-child(5) {
+  left: 890px;
+  top: 94px;
+}
+
+/* info 12  */
+.info-12 .info:nth-child(1) {
+  left: 570px;
+  bottom: 250px;
+}
+.info-12 .info:nth-child(2) {
+  left: 800px;
+  bottom: 80px;
+}
+.info-12 .info:nth-child(3) {
+  left: 1136px;
+  bottom: 670px;
+}
+.info-12 .info:nth-child(4) {
+  left: 836px;
+  top: 70px;
+}
+
 /* other  */
 .line-1 {
   background: url(../assets/model/F1.png) no-repeat;

src/pages/AlertListPage.vue

@@ -25,6 +25,10 @@ store.$subscribe((mutation, state) => {
     position: `${item.productLine} - ${item.segment}`,
   }));
 });
+
+function handleIgnore(){
+  alarmList.value.splice(0)
+}
 </script>
 
 <template>
@@ -61,7 +65,7 @@ store.$subscribe((mutation, state) => {
           <el-table-column prop="position" label="定位"></el-table-column>
         </el-table>
       </div>
-      <button class="alert-btn">忽略</button>
+      <button @click="handleIgnore" class="alert-btn">忽略</button>
     </Container>
   </div>
 </template>

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>

src/store/index.js

@@ -8,7 +8,6 @@ export const useWsStore = defineStore("wsData", () => {
   const data3 = ref({});
 
   function updateData(category, data) {
-    console.log('update', data)
     switch (category) {
       case "1":
         data1.value = data;

src/utils/useWebsocket.js

@@ -15,19 +15,15 @@ function connectPath(store, path) {
     (message) => {
       try {
         const data = JSON.parse(message.data);
-        console.log("message", JSON.parse(message.data));
 
         if ("specificationChanges" in data) {
-          console.log("[*] setting data1");
           // 分屏推送1数据
           store.updateData("1", data);
         } else if ("deliveryNotification" in data) {
           // 分屏推送3数据
-          console.log("[*] setting data3");
           store.updateData("3", data);
         } else {
           // 分屏推送2数据
-          console.log("[*] setting data2");
           store.updateData("2", data);
         }
       } catch (err) {

src/utils/ws.js

@@ -35,7 +35,6 @@ export default class XClient {
   heartbeat() {
     if (this.hb) clearInterval(this.hb);
     return setInterval(() => {
-      console.log(`${this.name} ping...`);
       if (this.ws.readyState == WebSocket.OPEN) {
         this.ws.send("ping");
       } else {

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'
+  }
 })