src/App.vue

@@ -1,25 +1,46 @@
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref, watch, computed } from "vue";
 import MainPage from "./MainPage.vue";
 import Slider from "./components/Slider.vue";
-import useWebsocket from "./utils/useWebsocket";
+import Client from "./utils/ws";
 import { useWsStore } from "./store";
+
 const store = useWsStore();
  
-// use websocket
+const url = "ws://192.168.1.101:8082/QbMonitoring/websocket";
 let urlPath = document.location.pathname;
 if (urlPath === "/") {
   urlPath = "/1-1";
 }
-useWebsocket(store, urlPath);
+new Client(
+  {
+    url: url + urlPath,
+    name: urlPath,
+  },
+  (message) => {
+    try {
+      const data = JSON.parse(message.data);
+      console.log("message", JSON.parse(message.data));
 
-// size setting
+      if ("specificationChanges" in data) {
-const size = ref(80);
+        console.log("[*] setting data1");
-onMounted(() => {
+        // 分屏推送1数据
-  setSize(size.value);
+        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) {
+      console.log("[x] 未解析的ws数据: ", err);
+    }
+  }
+);
 
-// style update
 const styles = ref({});
 function setSize(value) {
   const v = (value / 100).toFixed(2);
@@ -35,7 +56,7 @@ function setSize(value) {
 <template>
   <div id="app-container">
     <MainPage :style="styles" />
-    <Slider :size="size" @size-change="setSize" />
+    <Slider @size-change="setSize" />
   </div>
 </template>
 

src/components/Base/Container.vue

@@ -106,8 +106,8 @@ const props = defineProps({
 }
 
 .container-body {
-  background: #ffffff11;
+  background: #ffffff33;
-  backdrop-filter: blur(2px);
+  backdrop-filter: blur(1px);
   flex: 1;
   padding: 20px;
 }

src/components/HourChart.vue

@@ -1,13 +1,10 @@
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref, onMounted } from 'vue';
-import * as echarts from "echarts";
+import * as echarts from 'echarts';
-import Container from "./Base/Container.vue";
+import Container from './Base/Container.vue';
-import { useWsStore } from "../store";
+import { useWsStore } from '../store'
-import charSetup from "./HourChartOptions";
-
 const store = useWsStore();
 const chartChart = ref(null);
-const chart = ref(null);
 // 小时数据
 const hourData = ref([]);
 // store.$subscribe((mutation, state) => {
@@ -22,8 +19,28 @@ const hourData = ref([]);
 // });
 
 onMounted(() => {
-  chartChart.value.classList.add("h-full");
+  chartChart.value.classList.add('h-full');
-  chart.value = echarts.init(chartChart.value);
+  const mc = echarts.init(chartChart.value);
+  mc.setOption({
+    grid: {
+      top: 24,
+      bottom: 24,
+      left: 24,
+      right: 24,
+    },
+    tooltip: {},
+    xAxis: {
+      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
+    },
+    yAxis: {},
+    series: [
+      {
+        name: '销量',
+        type: 'bar',
+        data: [5, 20, 36, 10, 10, 20],
+      },
+    ],
+  });
 });
 </script>
 

src/components/HourChartOptions.js

@@ -1,40 +0,0 @@
-export const options = {
-  grid: {
-    top: "5%",
-    bottom: "5%",
-    left: "3%",
-    right: "3%",
-    containLabel: true,
-  },
-  xAxis: {
-    type: "category",
-    data: [],
-    axisLabel: {
-      fontSize: 24,
-    },
-  },
-  yAxis: {
-    type: "value",
-    axisLabel: {
-      fontSize: 24,
-    },
-    minInterval: 1,
-  },
-  series: [
-    {
-      data: [],
-      type: "bar",
-      showBackground: true,
-      backgroundStyle: {
-        color: "rgba(180, 180, 180, 0.2)",
-      },
-    },
-  ],
-};
-
-export default function setup(echartInstance, timeArr, dataArr) {
-  const options = { ...options };
-  options.xAxis.data = timeArr;
-  options.series[0].data = dataArr;
-  echartInstance.setOption(options);
-}

src/components/RealtimeChart.vue

@@ -1,115 +1,35 @@
-<!-- 实时数据图表 -->
+<!-- 货物情况 -->
+
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref, onMounted } from 'vue';
-import * as echarts from "echarts";
+import * as echarts from 'echarts';
-import Container from "./Base/Container.vue";
+import Container from './Base/Container.vue';
-import { useWsStore } from "../store";
+
 const cargoChart = ref(null);
-const chart = ref(null);
-const options = {
-  color: ["#99D66C", "#5B9BFF"],
-  grid: {
-    top: 72,
-    bottom: 72,
-    left: 112,
-    right: 88,
-  },
-  tooltip: {
-    trigger: "axis",
-    axisPointer: {
-      type: "shadow",
-    },
-  },
-  xAxis: {
-    type: "value",
-    position: "top",
-    splitLine: {
-      lineStyle: {
-        type: "dashed",
-        color: "#ccc8",
-      },
-    },
-    axisLabel: {
-      fontSize: 24,
-      color: "#fff",
-    },
-    minInterval: 1,
-  },
-  yAxis: {
-    type: "category",
-    axisLine: { show: false },
-    axisLabel: { show: false },
-    axisTick: { show: false },
-    splitLine: { show: false },
-    data: ["废片", "阶段成品"],
-    axisLabel: {
-      fontSize: 24,
-      color: "#fff",
-    },
-  },
-  title: [
-    {
-      text: 0 + "片",
-      left: "50%",
-      textAlign: "center",
-      top: "82%",
-      textStyle: {
-        fontSize: 32,
-        color: "#fff",
-      },
-    },
-    {
-      text: 0 + "片",
-      left: "50%",
-      textAlign: "center",
-      top: "44%",
-      textStyle: {
-        fontSize: 32,
-        color: "#fff",
-      },
-    },
-  ],
-  series: [
-    {
-      name: "数量",
-      type: "bar",
-      stack: "Total",
-      showBackground: true,
-      barWidth: "32",
-      colorBy: "data",
-      data: [
-        { value: 0, label: { fontSize: 28 } },
-        { value: 0, label: { fontSize: 28 } },
-      ],
-    },
-  ],
-};
-
-function updateChartOption(product, scrap) {
-  if (!chart.value) chart.value = echarts.init(cargoChart.value);
-  else {
-    chart.value.dispose();
-    chart.value = echarts.init(cargoChart.value);
-  }
-  options.title[0].text = product + "片";
-  options.title[1].text = scrap + "片";
-  options.series[0].data[0].value = product;
-  options.series[0].data[1].value = scrap;
-  chart.value.setOption(options);
-}
-
-const productAmount = ref(0);
-const scrapAmount = ref(0);
-const store = useWsStore();
-store.$subscribe((mutation, state) => {
-  productAmount.value = state.data1.realTimeData?.product || 0;
-  scrapAmount.value = state.data1.realTimeData?.scrap || 0;
-  updateChartOption(productAmount.value, scrapAmount.value);
-});
 
 onMounted(() => {
-  cargoChart.value.classList.add("h-full");
+  cargoChart.value.classList.add('h-full');
-  updateChartOption(productAmount.value, scrapAmount.value);
+  const mc = echarts.init(cargoChart.value);
+  mc.setOption({
+    grid: {
+      top: 24,
+      bottom: 24,
+      left: 24,
+      right: 24,
+    },
+    tooltip: {},
+    xAxis: {
+      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
+    },
+    yAxis: {},
+    series: [
+      {
+        name: '销量',
+        type: 'bar',
+        data: [5, 20, 36, 10, 10, 20],
+      },
+    ],
+  });
 });
 </script>
 
@@ -126,6 +46,10 @@ onMounted(() => {
   align-self: self-end;
 }
 
+.cargo-inner {
+  background: #0f0;
+}
+
 .cargo-chart {
   height: 100%;
 }

src/components/RealtimeTable.vue

@@ -1,42 +1,44 @@
 <!-- 实时数据表格 -->
 <script setup>
-import { ref } from "vue";
+import { ref } from 'vue';
-import { useWsStore } from "../store";
+import { useWsStore } from '../store';
 
 const listData = ref([]);
 const store = useWsStore();
 store.$subscribe((mutation, state) => {
-  listData.value = (state.data2.lineDetailData || Array(3).fill({})).map(
+    listData.value = state.data2.lineDetailData.map((item, index) => ({
-    (item, index) => ({
+        productLine: item.productLine,
-      productLine: item.productLine || "---",
+        mbt: item.edgingInput,
-      mbt: item.edgingInput || "---",
+        mbb: item.edgingOutput,
-      mbb: item.edgingOutput || "---",
+        dkt: item.drillingInput,
-      dkt: item.drillingInput || "---",
+        dkb: item.drillingOutput,
-      dkb: item.drillingOutput || "---",
+        dmt: item.coatingInput,
-      dmt: item.coatingInput || "---",
+        dmb: item.coatingOutput,
-      dmb: item.coatingOutput || "---",
+        syt: item.silkInput,
-      syt: item.silkInput || "---",
+        syb: item.silkOutput,
-      syb: item.silkOutput || "---",
+        ght: item.solidificationInput,
-      ght: item.solidificationInput || "---",
+        ghb: item.solidificationOutput,
-      ghb: item.solidificationOutput || "---",
+        gh1: item.temperingInput,
-      gh1: item.temperingInput || "---",
+        gh2: item.temperingOutput,
-      gh2: item.temperingOutput || "---",
+        bzt: item.finalInput,
-      bzt: item.finalInput || "---",
+        bzb: item.finalOutput,
-      bzb: item.finalOutput || "---",
+    }));
-    })
-  );
 });
+
+const tableData = [
+    { productLine: '00A', mbt: '---', mbb: '---', dkt: '---', dkb: '---', dmt: '---', dmb: '---', syt: '---', syb: '---', ght: '---', ghb: '---', gh1: '---', gh2: '---', bzt: '---', bzb: '---' },
+    { productLine: '00B', mbt: '---', mbb: '---', dkt: '---', dkb: '---', dmt: '---', dmb: '---', syt: '---', syb: '---', ght: '---', ghb: '---', gh1: '---', gh2: '---', bzt: '---', bzb: '---' },
+    { productLine: '00C', mbt: '---', mbb: '---', dkt: '---', dkb: '---', dmt: '---', dmb: '---', syt: '---', syb: '---', ght: '---', ghb: '---', gh1: '---', gh2: '---', bzt: '---', bzb: '---' },
+    { productLine: '00D', mbt: '---', mbb: '---', dkt: '---', dkb: '---', dmt: '---', dmb: '---', syt: '---', syb: '---', ght: '---', ghb: '---', gh1: '---', gh2: '---', bzt: '---', bzb: '---' },
+    { productLine: '00E', mbt: '---', mbb: '---', dkt: '---', dkb: '---', dmt: '---', dmb: '---', syt: '---', syb: '---', ght: '---', ghb: '---', gh1: '---', gh2: '---', bzt: '---', bzb: '---' },
+    { productLine: '00F', mbt: '---', mbb: '---', dkt: '---', dkb: '---', dmt: '---', dmb: '---', syt: '---', syb: '---', ght: '---', ghb: '---', gh1: '---', gh2: '---', bzt: '---', bzb: '---' },
+]
 </script>
 
 <template>
     <div class="realtime-table">
-    <el-table
+        <el-table class="dark-table" :data="listData" :show-overflow-tooltip="true" row-class-name="dark-row"
-      class="dark-table"
+            header-row-class-name="dark-header">
-      :data="listData"
-      :show-overflow-tooltip="true"
-      row-class-name="dark-row"
-      header-row-class-name="dark-header"
-    >
             <el-table-column prop="productLine" label="产线"></el-table-column>
             <el-table-column prop="mbt" label="磨边上"></el-table-column>
             <el-table-column prop="mbb" label="磨边下"></el-table-column>
@@ -57,18 +59,15 @@ store.$subscribe((mutation, state) => {
 </template>
 
 <style scoped> 
+
 .realtime-table {
      background: #00f3;
-  height: 160px;
+     height: 240px;
      width: 80%;
      align-self: self-start;
-}
+ }
 
-.dark-table {
+ .dark-table {
     height: 100%;
-}
+ }
-
-.dark-table >>> .el-table__inner-wrapper::before {
-  background-color: transparent !important;
-}
 </style>

src/components/Slider.vue

@@ -1,42 +1,34 @@
 <script setup>
-import { ref, watch, computed, onMounted } from "vue";
+import { ref, watch, onMounted } from 'vue';
-const props = defineProps({
-  size: {
-    type: Number,
-    default: 60,
-  },
-});
-const emit = defineEmits(["size-change"]);
 
+const emit = defineEmits(['size-change']);
+const size = ref(100);
 const slider = ref(null);
-const innerSize = ref(props.size);
 
-// watch
+// watchers
-watch(
+watch(size, (value) => {
-  () => innerSize.value,
+  if (value == null) return;
-  (value) => {
+  emit('size-change', value);
-    emit("size-change", value);
+});
-  }
-);
 
 // handlers
 function keydownHandler(e) {
-  if (e.shiftKey && e.key === "L") {
+  if (e.shiftKey && e.key === 'L') {
     if (slider.value) {
-      slider.value.classList.toggle("show");
+      slider.value.classList.toggle('show');
     }
   }
 }
 
 // hooks
 onMounted(() => {
-  document.addEventListener("keydown", keydownHandler);
+  document.addEventListener('keydown', keydownHandler);
 });
 </script>
 
 <template>
   <div ref="slider" class="slider">
-    <input type="range" min="0" max="100" v-model="innerSize" />
+    <input type="range" min="0" max="100" v-model="size" />
   </div>
 </template>
 

src/pages/AnnouncementPage.vue

@@ -1,28 +1,11 @@
 <!-- 公告页面 -->
 <script setup>
-import { ref } from "vue";
+import { ref } from 'vue';
-import { useWsStore } from "../store";
+const emit = defineEmits(['home']);
-const emit = defineEmits(["home"]);
+const content = ref('公告加载中...');
 
-// load 公告
-const vertical_content = ref("公告加载中...");
-const horizontal_content = ref("公告加载中...");
-const store = useWsStore();
-store.$subscribe((mutation, state) => {
-  vertical_content.value =
-    (state.data3.deliveryNotification || [])
-      .map((item) => item.deliveryContent || "")
-      .join("")
-      .replaceAll(/<br(\s?)\/>/g, "") || "暂无公告";
-  horizontal_content.value =
-    (state.data2.deliveryMsg || [])
-      .map((item) => item.deliveryContent || "")
-      .join("\t") || "暂无公告";
-});
-
-// handlers
 const handleClose = () => {
-  emit("home");
+  emit('home');
 };
 </script>
 
@@ -31,7 +14,7 @@ const handleClose = () => {
     <h1 class="announcement-title">公告栏</h1>
     <main class="announcement-content">
       <ScrollText :vertical="true" :duration="10" :pause-on-hover="true">
-        <div v-html="vertical_content"></div>
+        {{ content }}
       </ScrollText>
     </main>
     <div class="announcement-footer">
@@ -41,7 +24,7 @@ const handleClose = () => {
       >
         返回
       </button>
-      <ScrollText> {{ horizontal_content }} </ScrollText>
+      <ScrollText> 数据加载异常 </ScrollText>
     </div>
   </div>
 </template>
@@ -71,8 +54,6 @@ const handleClose = () => {
   padding: 8px 80px;
   font-size: 72px;
   font-family: serif;
-  overflow: hidden;
-  user-select: none;
 }
 
 .announcement-footer {
@@ -83,6 +64,5 @@ const handleClose = () => {
   line-height: 128px;
   font-family: sans-serif;
   position: relative;
-  user-select: none;
 }
 </style>

src/utils/useWebsocket.js

@@ -1,55 +0,0 @@
-import Client from "./ws";
-
-export default function useWebsocket(store, path) {
-  connect0(store);
-  connectPath(store, path);
-}
-
-const url = "ws://192.168.1.101:8082/QbMonitoring/websocket";
-function connectPath(store, path) {
-  new Client(
-    {
-      url: url + path,
-      name: 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) {
-        console.log("[x] 未解析的ws数据: ", err);
-      }
-    }
-  );
-}
-
-function connect0(store) {
-  new Client(
-    {
-      url: url + "/0",
-      name: "/0",
-    },
-    (message) => {
-      try {
-        const data = JSON.parse(message.data);
-        console.log("message --- 0 ---> ", JSON.parse(message.data));
-      } catch (err) {
-        console.log("[x] 未解析的ws数据: ", err);
-      }
-    }
-  );
-}