update websocket and store

src/AlertListScreen.vue

@@ -6,6 +6,7 @@ import Container from "./components/Base/Container.vue";
 import DatetimeTool from "./components/HeadTime.vue";
 import AppHeader from "./components/Base/Header.vue";
 import Tools from "./components/Tools.vue";
+import FullEqList from "./FullEqList.vue";
 
 const mainContainer = ref(null);
 const props = defineProps({
@@ -47,24 +48,14 @@ function handleResolutionChange(width, height) {
 
 <template>
   <div id="main-container" ref="mainContainer" class="main-container">
-    <div id="main-container__fulleq"></div>
+    <div id="main-container__fulleq">
+      <FullEqList />
+    </div>
     <DatetimeTool />
     <Tools @change-resolution="handleResolutionChange" />
     <AppHeader />
 
     <div class="alert-list-page">
-      <div
-        style="
-          position: absolute;
-          top: 0;
-          left: -279px;
-          width: calc(100% + 279px);
-          height: 100%;
-          background: #ccc3;
-        "
-      >
-        <!-- <ThreeD :line="line ?? '1'" /> -->
-      </div>
       <Container class="alert-list" title="报警列表" icon="cube">
         <div class="alert-list__table" style="">
           <el-table

src/FullEqList.vue

@@ -0,0 +1,119 @@
+<!-- 
+    filename: FullEqList.vue
+    author: liubin
+    date: 2024-03-05 14:13:06
+    description: 
+-->
+<script setup>
+import "./full-eq-list.css";
+</script>
+
+<template>
+  <div class="absolute v-1 tag-container">
+    <span class="name-tag">M7上片</span>
+    <span class="name-tag">M6上片</span>
+    <span class="name-tag">M5上片</span>
+    <span class="name-tag">M4上片</span>
+    <span class="name-tag">M3上片</span>
+    <span class="name-tag">M2上片</span>
+    <span class="name-tag">M1上片</span>
+  </div>
+  <div class="absolute v-2 tag-container">
+    <span class="name-tag">M7磨边机</span>
+    <span class="name-tag">M6磨边机</span>
+    <span class="name-tag">M5磨边机</span>
+    <span class="name-tag">M4磨边机</span>
+    <span class="name-tag">M3磨边机</span>
+    <span class="name-tag">M2磨边机</span>
+    <span class="name-tag">M1磨边机</span>
+  </div>
+  <div class="absolute v-3 tag-container">
+    <span class="name-tag">M7清洗机</span>
+    <span class="name-tag">M6清洗机</span>
+    <span class="name-tag">M5清洗机</span>
+    <span class="name-tag">M4清洗机</span>
+    <span class="name-tag">M3清洗机</span>
+    <span class="name-tag">M2清洗机</span>
+    <span class="name-tag">M1清洗机</span>
+  </div>
+  <div class="absolute z-1 v-4 tag-container">
+    <span class="name-tag">Z7钻孔机</span>
+    <span class="name-tag">Z6钻孔机</span>
+    <span class="name-tag">Z5钻孔机</span>
+    <span class="name-tag">Z4钻孔机</span>
+    <span class="name-tag">Z3钻孔机</span>
+    <span class="name-tag">Z2钻孔机</span>
+    <span class="name-tag">Z1钻孔机</span>
+  </div>
+  <div class="absolute z-1 v-5 tag-container">
+    <span class="name-tag">S7清洗机</span>
+    <span class="name-tag">S6清洗机</span>
+    <span class="name-tag">S5清洗机</span>
+    <span class="name-tag">S4清洗机</span>
+    <span class="name-tag">S3清洗机</span>
+    <span class="name-tag">S2清洗机</span>
+    <span class="name-tag">S1清洗机</span>
+  </div>
+  <div class="absolute z-1 v-6 tag-container">
+    <span class="name-tag">S7前储片台</span>
+    <span class="name-tag">S6前储片台</span>
+    <span class="name-tag">S5前储片台</span>
+    <span class="name-tag">S4前储片台</span>
+    <span class="name-tag">S3前储片台</span>
+    <span class="name-tag">S2前储片台</span>
+    <span class="name-tag">S1前储片台</span>
+  </div>
+  <div class="absolute z-2 v-7 tag-container">
+    <span class="name-tag">S7丝印机</span>
+    <span class="name-tag">S6丝印机</span>
+    <span class="name-tag">S5丝印机</span>
+    <span class="name-tag">S4丝印机</span>
+    <span class="name-tag">S3丝印机</span>
+    <span class="name-tag">S2丝印机</span>
+    <span class="name-tag">S1丝印机</span>
+  </div>
+  <div class="absolute z-2 v-8 tag-container">
+    <span class="name-tag">S7固化炉</span>
+    <span class="name-tag">S6固化炉</span>
+    <span class="name-tag">S5固化炉</span>
+    <span class="name-tag">S4固化炉</span>
+    <span class="name-tag">S3固化炉</span>
+    <span class="name-tag">S2固化炉</span>
+    <span class="name-tag">S1固化炉</span>
+  </div>
+  <div class="absolute z-1 v-10 tag-container">
+    <span class="name-tag">D2镀膜机</span>
+    <span class="name-tag">D1镀膜机</span>
+  </div>
+  <div class="absolute z-1 v-9 tag-container">
+    <span class="name-tag">S7后储片台</span>
+    <span class="name-tag">S6后储片台</span>
+    <span class="name-tag">S5后储片台</span>
+    <span class="name-tag">S4后储片台</span>
+    <span class="name-tag">S3后储片台</span>
+    <span class="name-tag">S2后储片台</span>
+    <span class="name-tag">S1后储片台</span>
+  </div>
+  <div class="absolute z-3 tag-container">
+    <span class="name-tag">B3前储片台</span>
+    <span class="name-tag">B2前储片台</span>
+    <span class="name-tag">B1前储片台</span>
+  </div>
+  <div class="absolute z-3 b-1 tag-container">
+    <span class="name-tag">B3清洗机</span>
+    <span class="name-tag">B2清洗机</span>
+    <span class="name-tag">B1清洗机</span>
+  </div>
+  <div class="absolute z-3 b-2 tag-container">
+    <span class="name-tag">B3下片</span>
+    <span class="name-tag">B2下片</span>
+    <span class="name-tag">B1下片</span>
+  </div>
+  <div class="absolute z-3 b-3 tag-container">
+    <span class="name-tag">B3后储片台</span>
+    <span class="name-tag">B2后储片台</span>
+    <span class="name-tag">B1后储片台</span>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>

src/MainScreen.vue

@@ -9,6 +9,8 @@ import TodayYield from "./components/mainscreen/TodayYield.vue";
 import SumYield from "./components/mainscreen/SumYield.vue";
 import TodayRate from "./components/mainscreen/TodayRate.vue";
 import SumRate from "./components/mainscreen/SumRate.vue";
+import FullEqList from "./FullEqList.vue";
+import { connect0 } from "./utils/useWebsocket";
 
 const mainContainer = ref(null);
 const props = defineProps({
@@ -18,6 +20,9 @@ const props = defineProps({
   },
 });
 const store = useWsStore();
+
+connect0(store);
+
 const alarmList = ref(
   (store.data1.alarmArrList || []).map((item, index) => ({
     id: item.id,
@@ -50,7 +55,9 @@ function handleResolutionChange(width, height) {
 
 <template>
   <div id="main-container" ref="mainContainer" class="main-container">
-    <div id="main-container__fulleq"></div>
+    <div id="main-container__fulleq">
+      <FullEqList />
+    </div>
     <DatetimeTool />
     <Tools @change-resolution="handleResolutionChange" />
     <AppHeader />
@@ -166,15 +173,6 @@ function handleResolutionChange(width, height) {
   background: url(./assets/bg.png) 100% / cover no-repeat;
 }
 
-#main-container__fulleq {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: url(./assets/full-lines.png) 100% / cover no-repeat;
-}
-
 .pages-wrapper {
   flex: 1;
   display: flex;

src/components/mainscreen/SumRate.vue

@@ -1,10 +1,152 @@
 <script setup>
 import { ref, onMounted, nextTick } from "vue";
+import * as echarts from "echarts";
 import Container from "../Base/Container.vue";
+import { useWsStore } from "../../store";
+
+const setupFn = (chart, datalist = [0.0, 0.0, 0.0]) => {
+  const option = {
+    color: ["#F3908B"],
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+      },
+    },
+    grid: {
+      top: "5%",
+      bottom: "5%",
+      left: "3%",
+      right: "5%",
+      containLabel: true,
+    },
+    yAxis: {
+      type: "value",
+      axisLabel: {
+        fontSize: 14,
+        color: "#fff",
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "#ccc6",
+        },
+      },
+    },
+    xAxis: {
+      type: "category",
+      data: ["钢1线", "钢2线", "钢3线"],
+      axisLabel: {
+        fontSize: 14,
+        color: "#fff",
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "#ccc6",
+        },
+      },
+    },
+    series: [
+      {
+        type: "line",
+        data: datalist,
+        label: {
+          show: true,
+          position: "top",
+          // formatter: (params) => {
+          //   console.log("params", datalist[params.dataIndex]);
+          // },
+          formatter: "{c}%",
+          color: "#fff",
+          fontSize: 14,
+        },
+      },
+    ],
+  };
+
+  chart.setOption(option);
+};
+
+const store = useWsStore();
+const chartChart = ref(null);
+const chart = ref(null);
+const showChartDom = ref(false);
+
+/** 无状态，处理数据 */
+function loadData(yieldArray) {
+  // lineSumProductYield
+  const result = [];
+  if (yieldArray == undefined || yieldArray?.length == 0) return null;
+  for (let i = 0; i < yieldArray.length; ++i) {
+    if (yieldArray[i].name == "钢1线") {
+      result[0] = parseFloat(yieldArray[i].data);
+    } else if (yieldArray[i].name == "钢2线") {
+      result[1] = parseFloat(yieldArray[i].data);
+    } else if (yieldArray[i].name == "钢3线") {
+      result[2] = parseFloat(yieldArray[i].data);
+    }
+  }
+  return result;
+}
+
+function setupChart(chart, dom, data) {
+  if (chart.value) chart.value.dispose();
+  nextTick(() => {
+    chart.value = echarts.init(dom);
+    setupFn(chart.value, data);
+  });
+}
+
+/** 有状态，处理数据 */
+function __apply(yieldArray) {
+  const d = loadData(yieldArray);
+  if (!d) {
+    showChartDom.value = false;
+    if (chart.value) chart.value.dispose();
+    return;
+  }
+  showChartDom.value = true;
+  setupChart(chart, chartChart.value, d);
+}
+
+// 订阅
+store.$subscribe((mutation, state) => {
+  __apply(state.mainDataChart.lineSumProductYield);
+  // __apply([
+  //   { name: "钢1线", data: 0.32 },
+  //   { name: "钢2线", data: 0.91 },
+  //   { name: "钢3线", data: 0.54 },
+  // ]);
+});
+
+onMounted(() => {
+  chartChart.value.classList.add("h-full");
+  __apply([
+    { name: "钢1线", data: "0%" },
+    { name: "钢2线", data: "0%" },
+    { name: "钢3线", data: "0%" },
+  ]);
+});
 </script>
 
 <template>
   <Container class="chart" title="累计生产线成品率" icon="cube">
-    <p class="empty-data-hint">暂无数据</p>
+    <div
+      ref="chartChart"
+      class="chart-chart"
+      :style="{ opacity: showChartDom ? 1 : 0 }"
+    ></div>
+    <p v-show="!chart" class="empty-data-hint">暂无数据</p>
   </Container>
 </template>
+
+<style scoped>
+.chart {
+  /* height: 300px; */
+}
+
+.chart-chart {
+  height: 100%;
+}
+</style>

src/components/mainscreen/SumYield.vue

@@ -3,7 +3,70 @@ import { ref, onMounted, nextTick } from "vue";
 import * as echarts from "echarts";
 import Container from "../Base/Container.vue";
 import { useWsStore } from "../../store";
-import setupFn from "./TeamChartDayOptions";
+
+
+const setupFn = (chart, datalist = [0.0, 0.0, 0.0, 0.0]) => {
+  console.log("datalist", datalist);
+  const option = {
+    color: ["#3398FB"],
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+      },
+    },
+    grid: {
+      top: "5%",
+      bottom: "5%",
+      left: "3%",
+      right: "5%",
+      containLabel: true,
+    },
+    xAxis: {
+      type: "value",
+      boundaryGap: [0, 0.01],
+      axisLabel: {
+        fontSize: 14,
+        color: "#fff",
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "#ccc6",
+        },
+      },
+    },
+    yAxis: {
+      type: "category",
+      data: ["钢1线", "钢2线", "钢3线", "合计"],
+      axisLabel: {
+        fontSize: 14,
+        color: "#fff",
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "#ccc6",
+        },
+      },
+    },
+    series: [
+      {
+        type: "bar",
+        data: datalist,
+        label: {
+          show: true,
+          position: "right",
+          formatter: "{c}",
+          color: "#fff",
+          fontSize: 14,
+        },
+      },
+    ],
+  };
+
+  chart.setOption(option);
+};
 
 const store = useWsStore();
 const chartChart = ref(null);
@@ -15,12 +78,15 @@ function loadData(yieldArray) {
   const result = [];
   if (yieldArray == undefined || yieldArray?.length == 0) return null;
   for (let i = 0; i < yieldArray.length; ++i) {
-    if (yieldArray[i].teamName == "A组") {
+    if (yieldArray[i].name == "钢1线") {
-      result[0] = parseInt(yieldArray[i].yield);
+      result[0] = parseInt(yieldArray[i].data);
-    } else if (yieldArray[i].teamName == "B组") {
+    } else if (yieldArray[i].name == "钢2线") {
-      result[1] = parseInt(yieldArray[i].yield);
+      result[1] = parseInt(yieldArray[i].data);
-    } else if (yieldArray[i].teamName == "C组") {
+    } else if (yieldArray[i].name == "钢3线") {
-      result[2] = parseInt(yieldArray[i].yield);
+      result[2] = parseInt(yieldArray[i].data);
+    } else {
+      // 合计
+      result[3] = parseInt(yieldArray[i].data);
     }
   }
   return result;
@@ -37,11 +103,6 @@ function setupChart(chart, dom, data) {
 /** 有状态，处理数据 */
 function __apply(yieldArray) {
   const d = loadData(yieldArray);
-  // const d = loadData([
-  //   { teamName: "A组", yield: 11 },
-  //   { teamName: "B组", yield: 23 },
-  //   { teamName: "C组", yield: 14 },
-  // ]);
   if (!d) {
     showChartDom.value = false;
     if (chart.value) chart.value.dispose();
@@ -53,12 +114,23 @@ function __apply(yieldArray) {
 
 // 订阅
 store.$subscribe((mutation, state) => {
-  __apply(state.data2.classTodayProductYield);
+  __apply(state.mainDataChart.lineSumProductData);
+  // __apply([
+  //   { name: "钢1线", data: 11 },
+  //   { name: "钢2线", data: 22 },
+  //   { name: "钢3线", data: 33 },
+  //   { name: "合计", data: 66 },
+  // ]);
 });
 
 onMounted(() => {
   chartChart.value.classList.add("h-full");
-  // __apply();
+  __apply([
+    { name: "钢1线", data: 0 },
+    { name: "钢2线", data: 0 },
+    { name: "钢3线", data: 0 },
+    { name: "合计", data: 0 },
+  ]);
 });
 </script>
 

src/components/mainscreen/TeamChartDayOptions.js

@@ -1,59 +0,0 @@
-export const options = {
-  color: ['#a4c9d1', '#72340b', '#ffd601' ],
-  grid: {
-    top: 8,
-    bottom: 20,
-    left: 42,
-    right: 28,
-  },  
-  legend: {
-    show: false,
-  },
-  xAxis: {
-    max: 100,
-    splitLine: {
-      lineStyle: {
-        color: "#fff2",
-      },
-    },
-    axisLabel: {
-      fontSize: 16,
-      color: "#e5e5e5a3",
-    },
-  },
-  yAxis: {
-    type: "category",
-    data: ["A组", "B组", "C组"],
-    inverse: true,
-    max: 2, // only the largest 3 bars will be displayed
-    axisLabel: {
-      fontSize: 16,
-      color: "#e5e5e5a3",
-    },
-    splitLine: {
-      lineStyle: {
-        color: "#e5e5e5",
-      },
-    },
-  },
-  series: [
-    {
-      type: "bar",
-      data: [34, 2, 23],
-      label: {
-        show: true,
-        position: "right",
-        formatter: "{c}%",
-        color: "#fff",
-        fontSize: 16,
-      },
-    },
-  ],
-
-};
-
-export default function setup(echartInstance, dataArr) {
-  const new_options = { ...options };
-  new_options.series[0].data = dataArr;
-  echartInstance.setOption(new_options);
-}

src/components/mainscreen/TodayRate.vue

@@ -1,10 +1,153 @@
 <script setup>
 import { ref, onMounted, nextTick } from "vue";
+import * as echarts from "echarts";
 import Container from "../Base/Container.vue";
+import { useWsStore } from "../../store";
+
+const setupFn = (chart, datalist = [0.0, 0.0, 0.0]) => {
+  const option = {
+    color: ["#F3908B"],
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+      },
+    },
+    grid: {
+      top: "5%",
+      bottom: "5%",
+      left: "3%",
+      right: "5%",
+      containLabel: true,
+    },
+    yAxis: {
+      type: "value",
+      axisLabel: {
+        fontSize: 14,
+        color: "#fff",
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "#ccc6",
+        },
+      },
+    },
+    xAxis: {
+      type: "category",
+      data: ["钢1线", "钢2线", "钢3线"],
+      axisLabel: {
+        fontSize: 14,
+        color: "#fff",
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "#ccc6",
+        },
+      },
+    },
+    series: [
+      {
+        type: "line",
+        data: datalist,
+        // data: datalist.map((item) => item * 100),
+        label: {
+          show: true,
+          position: "top",
+          // formatter: (params) => {
+          //   console.log("params", datalist[params.dataIndex]);
+          // },
+          formatter: "{c}%",
+          color: "#fff",
+          fontSize: 14,
+        },
+      },
+    ],
+  };
+
+  chart.setOption(option);
+};
+
+const store = useWsStore();
+const chartChart = ref(null);
+const chart = ref(null);
+const showChartDom = ref(false);
+
+/** 无状态，处理数据 */
+function loadData(yieldArray) {
+  // lineTodayProductYield
+  const result = [];
+  if (yieldArray == undefined || yieldArray?.length == 0) return null;
+  for (let i = 0; i < yieldArray.length; ++i) {
+    if (yieldArray[i].name == "钢1线") {
+      result[0] = parseFloat(yieldArray[i].data) || 0.0;
+    } else if (yieldArray[i].name == "钢2线") {
+      result[1] = parseFloat(yieldArray[i].data) || 0.0;
+    } else if (yieldArray[i].name == "钢3线") {
+      result[2] = parseFloat(yieldArray[i].data) || 0.0;
+    }
+  }
+  return result;
+}
+
+function setupChart(chart, dom, data) {
+  if (chart.value) chart.value.dispose();
+  nextTick(() => {
+    chart.value = echarts.init(dom);
+    setupFn(chart.value, data);
+  });
+}
+
+/** 有状态，处理数据 */
+function __apply(yieldArray) {
+  const d = loadData(yieldArray);
+  if (!d) {
+    showChartDom.value = false;
+    if (chart.value) chart.value.dispose();
+    return;
+  }
+  showChartDom.value = true;
+  setupChart(chart, chartChart.value, d);
+}
+
+// 订阅
+store.$subscribe((mutation, state) => {
+  __apply(state.mainDataChart.lineTodayProductYield);
+  // __apply([
+  //   { name: "钢1线", data: 0.32 },
+  //   { name: "钢2线", data: 0.91 },
+  //   { name: "钢3线", data: 0.54 },
+  // ]);
+});
+
+onMounted(() => {
+  chartChart.value.classList.add("h-full");
+  __apply([
+    { name: "钢1线", data: "0%" },
+    { name: "钢2线", data: "0%" },
+    { name: "钢3线", data: "0%" },
+  ]);
+});
 </script>
 
 <template>
   <Container class="chart" title="今日生产线成品率" icon="cube">
-    <p class="empty-data-hint">暂无数据</p>
+    <div
+      ref="chartChart"
+      class="chart-chart"
+      :style="{ opacity: showChartDom ? 1 : 0 }"
+    ></div>
+    <p v-show="!chart" class="empty-data-hint">暂无数据</p>
   </Container>
 </template>
+
+<style scoped>
+.chart {
+  /* height: 300px; */
+}
+
+.chart-chart {
+  height: 100%;
+}
+</style>

src/components/mainscreen/TodayYield.vue

@@ -3,7 +3,69 @@ import { ref, onMounted, nextTick } from "vue";
 import * as echarts from "echarts";
 import Container from "../Base/Container.vue";
 import { useWsStore } from "../../store";
-import setupFn from "./TeamChartDayOptions";
+
+const setupFn = (chart, datalist = [0.0, 0.0, 0.0, 0.0]) => {
+  console.log("datalist", datalist);
+  const option = {
+    color: ["#3398FB"],
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+      },
+    },
+    grid: {
+      top: "5%",
+      bottom: "5%",
+      left: "3%",
+      right: "5%",
+      containLabel: true,
+    },
+    xAxis: {
+      type: "value",
+      boundaryGap: [0, 0.01],
+      axisLabel: {
+        fontSize: 14,
+        color: "#fff",
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "#ccc6",
+        },
+      },
+    },
+    yAxis: {
+      type: "category",
+      data: ["钢1线", "钢2线", "钢3线", "合计"],
+      axisLabel: {
+        fontSize: 14,
+        color: "#fff",
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "#ccc6",
+        },
+      },
+    },
+    series: [
+      {
+        type: "bar",
+        data: datalist,
+        label: {
+          show: true,
+          position: "right",
+          formatter: "{c}",
+          color: "#fff",
+          fontSize: 14,
+        },
+      },
+    ],
+  };
+
+  chart.setOption(option);
+};
 
 const store = useWsStore();
 const chartChart = ref(null);
@@ -12,15 +74,19 @@ const showChartDom = ref(false);
 
 /** 无状态，处理数据 */
 function loadData(yieldArray) {
+  // lineTodayProductData
   const result = [];
   if (yieldArray == undefined || yieldArray?.length == 0) return null;
   for (let i = 0; i < yieldArray.length; ++i) {
-    if (yieldArray[i].teamName == "A组") {
+    if (yieldArray[i].name == "钢1线") {
-      result[0] = parseInt(yieldArray[i].yield);
+      result[0] = parseInt(yieldArray[i].data);
-    } else if (yieldArray[i].teamName == "B组") {
+    } else if (yieldArray[i].name == "钢2线") {
-      result[1] = parseInt(yieldArray[i].yield);
+      result[1] = parseInt(yieldArray[i].data);
-    } else if (yieldArray[i].teamName == "C组") {
+    } else if (yieldArray[i].name == "钢3线") {
-      result[2] = parseInt(yieldArray[i].yield);
+      result[2] = parseInt(yieldArray[i].data);
+    } else {
+      // 合计
+      result[3] = parseInt(yieldArray[i].data);
     }
   }
   return result;
@@ -37,11 +103,6 @@ function setupChart(chart, dom, data) {
 /** 有状态，处理数据 */
 function __apply(yieldArray) {
   const d = loadData(yieldArray);
-  // const d = loadData([
-  //   { teamName: "A组", yield: 11 },
-  //   { teamName: "B组", yield: 23 },
-  //   { teamName: "C组", yield: 14 },
-  // ]);
   if (!d) {
     showChartDom.value = false;
     if (chart.value) chart.value.dispose();
@@ -53,12 +114,23 @@ function __apply(yieldArray) {
 
 // 订阅
 store.$subscribe((mutation, state) => {
-  __apply(state.data2.classTodayProductYield);
+  __apply(state.mainDataChart.lineTodayProductData);
+  // __apply([
+  //   { name: "钢1线", data: 11 },
+  //   { name: "钢2线", data: 22 },
+  //   { name: "钢3线", data: 33 },
+  //   { name: "合计", data: 66 },
+  // ]);
 });
 
 onMounted(() => {
   chartChart.value.classList.add("h-full");
-  // __apply();
+  __apply([
+    { name: "钢1线", data: 0 },
+    { name: "钢2线", data: 0 },
+    { name: "钢3线", data: 0 },
+    { name: "合计", data: 0 },
+  ]);
 });
 </script>
 

src/full-eq-list.css

@@ -0,0 +1,179 @@
+#main-container__fulleq {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: url(./assets/full-lines.png) 100% / cover no-repeat;
+}
+
+.name-tag {
+  padding: 5px;
+  border-radius: 5px;
+  background: #ccc3;
+  backdrop-filter: blur(3px);
+  color: #000a;
+  font-size: 12px;
+  /* font-weight: 600; */
+  transition: background 0.1s ease-out;
+  user-select: none;
+  width: 72px;
+  text-align: center;
+  position: absolute;
+  /* cursor: pointer; */
+  /* transform: rotate(-45deg); */
+  box-shadow: 0 0 5px 2px #0003;
+}
+
+/* .name-tag:hover {
+    background: #666c;
+  } */
+
+.tag-container > .name-tag:first-child {
+  bottom: 214px;
+  left: -128px;
+}
+.tag-container > .name-tag:nth-child(2) {
+  bottom: 182px;
+  left: -100px;
+}
+.tag-container > .name-tag:nth-child(3) {
+  bottom: 150px;
+  left: -88px;
+}
+.tag-container > .name-tag:nth-child(4) {
+  bottom: 118px;
+  left: -68px;
+}
+.tag-container > .name-tag:nth-child(5) {
+  bottom: 86px;
+  left: -52px;
+}
+.tag-container > .name-tag:nth-child(6) {
+  bottom: 32px;
+  left: -20px;
+}
+.tag-container > .name-tag:nth-child(7) {
+  top: 0;
+  left: 0;
+}
+
+.absolute {
+  position: absolute;
+  padding: 8px;
+}
+
+.v-1 {
+  bottom: 160px;
+  left: 430px;
+}
+
+.v-2 {
+  bottom: 200px;
+  left: 480px;
+}
+
+.v-3 {
+  bottom: 250px;
+  left: 620px;
+}
+
+.z-1 > .name-tag:first-child {
+  bottom: 205px;
+  left: -155px;
+}
+.z-1 > .name-tag:nth-child(2) {
+  bottom: 180px;
+  left: -130px;
+}
+.v-4 {
+  bottom: 300px;
+  left: 730px;
+}
+
+.v-5 {
+  bottom: 340px;
+  left: 780px;
+}
+
+.v-6 {
+  bottom: 360px;
+  left: 840px;
+}
+
+.z-2 > .name-tag:first-child {
+  bottom: 205px;
+  left: -140px;
+}
+.z-2 > .name-tag:nth-child(2) {
+  bottom: 180px;
+  left: -110px;
+}
+.z-2 > .name-tag:nth-child(3) {
+  bottom: 152px;
+  left: -70px;
+}
+.z-2 > .name-tag:nth-child(4) {
+  bottom: 128px;
+  left: -50px;
+}
+.z-2 > .name-tag:nth-child(5) {
+  bottom: 100px;
+  left: -36px;
+}
+
+.v-7 {
+  bottom: 380px;
+  left: 880px;
+}
+
+.v-8 {
+  bottom: 410px;
+  left: 930px;
+}
+
+.v-9 {
+  bottom: 440px;
+  left: 1020px;
+}
+
+.v-10 {
+  bottom: 260px;
+  left: 1100px;
+}
+
+.z-3 {
+  bottom: 550px;
+  left: 1400px;
+  /* background: #c003; */
+}
+
+.z-3 > .name-tag:first-child {
+  bottom: 235px;
+  left: -155px;
+}
+
+.z-3 > .name-tag:nth-child(2) {
+  bottom: 188px;
+  left: -85px;
+}
+
+.z-3 > .name-tag:nth-child(3) {
+  bottom: 120px;
+  left: 35px;
+}
+
+.b-1 {
+  bottom: 570px;
+  left: 1440px;
+}
+
+.b-2 {
+  bottom: 600px;
+  left: 1490px;
+}
+
+.b-3 {
+  bottom: 620px;
+  left: 1530px;
+}

src/store/index.js

@@ -2,9 +2,11 @@ import { defineStore } from "pinia";
 import { ref } from "vue";
 
 export const useWsStore = defineStore("wsData", () => {
-  const data1 = ref({ test: "hello world" });
+  const data1 = ref({});
   const data2 = ref({});
   const data3 = ref({});
+  const mainDataChart = ref({});
+  const mainDataAlarm = ref({});
 
   function updateData(category, data) {
     switch (category) {
@@ -16,12 +18,19 @@ export const useWsStore = defineStore("wsData", () => {
         break;
       case "3":
         data3.value = { ...data3.value, ...data };
+        break;
+      case "main-chart":
+        mainDataChart.value = { ...mainDataChart.value, ...data };
+        break;
+      case "main-alarm":
+        mainDataAlarm.value = { ...mainDataAlarm.value, ...data };
+        break;
       default:
         break;
     }
   }
 
-  return { data1, data2, data3, updateData };
+  return { data1, data2, data3, mainDataChart, mainDataAlarm, updateData };
 });
 // export const useWsStore = defineStore('wsData', {
 //     state: () => ({

src/utils/useWebsocket.js

@@ -6,7 +6,8 @@ export default function useWebsocket(store, path, excludePaths = []) {
   connectPath(store, path);
 }
 
-const url = "ws://192.168.1.101:8082/QbMonitoring/websocket";
+// const url = "ws://192.168.1.101:8082/QbMonitoring/websocket";
+const url = "ws://192.168.0.33:8082/QbMonitoring/websocket";
 function connectPath(store, path) {
   new Client(
     {
@@ -34,7 +35,8 @@ function connectPath(store, path) {
   );
 }
 
-function connect0(store) {
+export function connect0(store) {
+  console.log("[*] Connecting main screen........");
   new Client(
     {
       url: url + "/0",
@@ -44,6 +46,14 @@ function connect0(store) {
       try {
         const data = JSON.parse(message.data);
         console.log("message --- 0 ---> ", JSON.parse(message.data));
+
+        if ("lineSumProductYield" in data) {
+          // 主屏推送 图表数据
+          store.updateData("main-chart", data);
+        } else {
+          // 主屏推送 报警数据
+          store.updateData("main-alarm", data);
+        }
       } catch (err) {
         console.log("[x] 未解析的ws数据: ", err);
       }