src/App.vue

@@ -7,11 +7,11 @@ import { useWsStore } from "./store";
 const store = useWsStore();
 
 // use websocket
-let urlPath = ref(document.location.pathname);
+let urlPath = document.location.pathname;
-if (urlPath.value === "/") {
+if (urlPath === "/") {
-  urlPath.value = "/1-1";
+  urlPath = "/1-1";
 }
-useWebsocket(store, urlPath.value);
+useWebsocket(store, urlPath);
 
 // size setting
 const size = ref(80);
@@ -23,6 +23,7 @@ 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})`,
@@ -33,7 +34,7 @@ function setSize(value) {
 
 <template>
   <div id="app-container">
-    <MainPage :style="styles" :path="urlPath" />
+    <MainPage :style="styles" />
     <Slider :size="size" @size-change="setSize" />
   </div>
 </template>

src/MainPage.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch } from "vue";
+import { ref } from "vue";
 import Tools from "./components/Tools.vue";
 import NavMenu from "./components/NavMenu.vue";
 import AnnoucementPage from "./pages/AnnouncementPage.vue";
@@ -10,25 +10,10 @@ 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>
 
@@ -44,7 +29,7 @@ const handlePageChange = (page) => {
     />
     <div v-else class="pages-wrapper">
       <NavMenu @change="handlePageChange" />
-      <TriplePage v-if="currentPage === '3d'" :line="pathMap[path] ?? '1'" />
+      <TriplePage v-if="currentPage === '3d'" line="8" />
       <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.0123   0 0 0 0 0.0123   0 0 0 0 0.0123  0 0 0 1 0"
+          values="0 0 0 0 0.000727194297   0 0 0 0 0.0682545659   0 0 0 0 0.141870471  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, nextTick } from "vue";
+import { ref, watch, onMounted } from "vue";
 import * as echarts from "echarts";
 import Container from "./Base/Container.vue";
 import { useWsStore } from "../store";
@@ -9,69 +9,47 @@ const store = useWsStore();
 const chartChart = ref(null);
 const chart = ref(null);
 // 小时数据
-const hourData = ref([]);
+const hourData = ref(null);
 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.floor(Math.random() * 100),
+    data: item.num || Math.random() * 100,
   }));
-  setupChart();
+  chartSetup(
+    chart.value,
+    hourData.value.map((item) => item.hour),
+    hourData.value.map((item) => item.data)
+  );
 });
 
-function setupChart() {
+// watch(hourData, (newVal) => {
-  if (chart.value) chart.value.dispose();
+//   console.log("hourData", newVal);
-  nextTick(() => {
+//   if (newVal) {
-    chart.value = echarts.init(chartChart.value);
+//     chartSetup(
-    chartSetup(
+//       chart.value,
-      chart.value,
+//       newVal.map((item) => item.hour),
-      hourData.value.map((item) => item.hour),
+//       newVal.map((item) => item.data)
-      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 v-show="!hourData || hourData.length === 0" class="empty-data-hint">暂无数据</p>
-      暂无数据
-    </p>
   </Container>
 </template>
 
@@ -81,6 +59,7 @@ onMounted(() => {
 }
 
 .chart-inner {
+  background: #0f0;
 }
 
 .chart-chart {

src/components/HourChartOptions.js

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

src/components/TeamChartDay.vue

@@ -3,59 +3,43 @@ import { ref, onMounted } from "vue";
 import * as echarts from "echarts";
 import Container from "./Base/Container.vue";
 import { useWsStore } from "../store";
-import setupFn from "./TeamChartDayOptions";
+import chartSetup from "./HourChartOptions";
 
 const store = useWsStore();
 const chartChart = ref(null);
 const chart = ref(null);
 
-const dayData = ref([]);
+// 小时数据
+const hourData = ref(null);
 store.$subscribe((mutation, state) => {
-  if (
+  console.log("lineHourList ===> ", state.data2.lineHourList);
-    state.data2.classTodayProductYield == undefined ||
+  hourData.value = (state.data2?.lineHourList ?? []).map((item, index) => ({
-    state.data2.classTodayProductYield?.length == 0
+    id: `${item.lineName}_${index}`,
-  ) {
+    hour: item.hour || `${index}`.padStart(2, "0"),
-    dayData.value.splice(0);
+    data: item.num || Math.random() * 100,
-    if (chart.value) chart.value.dispose();
+  }));
-    return;
+  chartSetup(
-  }
+    chart.value,
-  console.log(
+    hourData.value.map((item) => item.hour),
-    "classTodayProductYield ===> ",
+    hourData.value.map((item) => item.data)
-    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="!dayData || dayData.length === 0" class="empty-data-hint">
+    <p v-show="!hourData || hourData.length === 0" class="empty-data-hint">
       暂无数据
     </p>
   </Container>
@@ -67,6 +51,7 @@ onMounted(() => {
 }
 
 .chart-inner {
+  background: #0f0;
 }
 
 .chart-chart {

src/components/TeamChartDayOptions.js

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

src/components/TeamChartMonth.vue

@@ -3,50 +3,45 @@ import { ref, onMounted } from "vue";
 import * as echarts from "echarts";
 import Container from "./Base/Container.vue";
 import { useWsStore } from "../store";
-import setupFn from "./TeamChartMonthOptions";
+import chartSetup from "./HourChartOptions";
 
 const store = useWsStore();
 const chartChart = ref(null);
 const chart = ref(null);
 
-const monthData = ref(null);
+// 小时数据
+const hourData = ref(null);
 store.$subscribe((mutation, state) => {
-  if (
+  console.log("lineHourList ===> ", state.data2.lineHourList);
-    state.data2.monthlyTarget == undefined ||
+  hourData.value = (state.data2?.lineHourList ?? []).map((item, index) => ({
-    state.data2.monthlyTarget?.length == 0
+    id: `${item.lineName}_${index}`,
-  ) {
+    hour: item.hour || `${index}`.padStart(2, "0"),
-    monthData.value = null;
+    data: item.num || Math.random() * 100,
-    if (chart.value) chart.value.dispose();
+  }));
-    return;
+  chartSetup(
-  }
+    chart.value,
-  console.log("monthlyTarget ===> ", state.data2.monthlyTarget);
+    hourData.value.map((item) => item.hour),
-  const { targetProduction, nowProduction, targetYield, nowYield } =
+    hourData.value.map((item) => item.data)
-    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="!monthData" class="empty-data-hint">暂无数据</p>
+    <p v-show="!hourData || hourData.length === 0" class="empty-data-hint">
+      暂无数据
+    </p>
   </Container>
 </template>
 
@@ -56,6 +51,7 @@ 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: "#fff8",
+        color: "rgba(255, 255, 255, 1)",
       },
       data: [
         {

src/components/Tools.vue

@@ -3,15 +3,11 @@ 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 @click="toHome"><IconBack /></button>
+    <button><IconBack /></button>
     <button><IconSetting /></button>
     <button><IconExchange /></button>
   </div>

src/pages/3D.vue

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

src/pages/AnnouncementPage.vue

@@ -2,7 +2,6 @@
 <script setup>
 import { ref } from "vue";
 import { useWsStore } from "../store";
-import IconBack from "../assets/menu_icon/IconBack.vue";
 const emit = defineEmits(["home"]);
 
 // load 公告
@@ -46,18 +45,10 @@ const handleClose = () => {
     </main>
     <div class="announcement-footer">
       <button
-        style="
+        style="position: absolute; left: 0; bottom: 10px"
-          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,6 +8,7 @@ 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,15 +15,19 @@ 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,6 +35,7 @@ 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,8 +4,4 @@ import vue from '@vitejs/plugin-vue'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
-  server: {
-    host: '0.0.0.0',
-    port: '5173'
-  }
 })