From 8d30507f1b5987dbe49d8993ba4e9fb84b5e6de1 Mon Sep 17 00:00:00 2001
From: "DESKTOP-FUDKNA8\\znjsz" <tonystark@starkindustries.mil>
Date: Wed, 28 Feb 2024 17:02:33 +0800
Subject: [PATCH] update

---
 src/AlertListScreen.vue                       | 227 ++++++++++++++++-
 src/MainScreen.vue                            | 235 +++++++++++++++++-
 src/components/mainscreen/SumRate.vue         |  10 +
 src/components/mainscreen/SumYield.vue        |  84 +++++++
 .../mainscreen/TeamChartDayOptions.js         |  59 +++++
 src/components/mainscreen/TodayRate.vue       |  10 +
 src/components/mainscreen/TodayYield.vue      |  84 +++++++
 7 files changed, 689 insertions(+), 20 deletions(-)
 create mode 100644 src/components/mainscreen/SumRate.vue
 create mode 100644 src/components/mainscreen/SumYield.vue
 create mode 100644 src/components/mainscreen/TeamChartDayOptions.js
 create mode 100644 src/components/mainscreen/TodayRate.vue
 create mode 100644 src/components/mainscreen/TodayYield.vue

diff --git a/src/AlertListScreen.vue b/src/AlertListScreen.vue
index cdb87ae..118de01 100644
--- a/src/AlertListScreen.vue
+++ b/src/AlertListScreen.vue
@@ -1,18 +1,225 @@
+<!-- 报警列表页面 -->
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref } from "vue";
+import { useWsStore } from "./store";
+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";
+
+const mainContainer = ref(null);
+const props = defineProps({
+  line: {
+    type: Number,
+    default: 1,
+  },
+});
+const store = useWsStore();
+const alarmList = ref(
+  (store.data1.alarmArrList || []).map((item, index) => ({
+    id: item.id,
+    eqName: item.equipmentName,
+    eqIndex: index + 1,
+    alarmGrade: item.alarmLevel,
+    alarmDetail: item.alarmDetails,
+    position: `${item.productLine} - ${item.segment}`,
+  }))
+);
+// store.$subscribe((mutation, state) => {
+//   alarmList.value = state.data1.alarmArrList.map((item, index) => ({
+//     id: item.id,
+//     eqName: item.equipmentName,
+//     eqIndex: index + 1,
+//     alarmGrade: item.alarmLevel,
+//     alarmDetail: item.alarmDetails,
+//     position: `${item.productLine} - ${item.segment}`,
+//   }));
+// });
+
+// function handleIgnore() {
+//   alarmList.value.splice(0)
+// }
+
+function handleResolutionChange(width, height) {
+  mainContainer.value && changeScale(mainContainer.value, width, height);
+}
 </script>
 
 <template>
-  <main class="alertlist-screen">
-    <h1 style="color: red">alert list</h1>
-  </main>
+  <div id="main-container" ref="mainContainer" class="main-container">
+    <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
+            class="dark-table"
+            :data="alarmList"
+            :show-overflow-tooltip="true"
+            row-class-name="dark-row"
+            header-row-class-name="dark-header"
+          >
+            <el-table-column
+              prop="eqName"
+              label="设备名"
+              width="80"
+            ></el-table-column>
+            <el-table-column
+              prop="eqIndex"
+              label="序号"
+              width="60"
+            ></el-table-column>
+            <el-table-column
+              prop="alarmGrade"
+              label="报警等级"
+              width="100"
+            ></el-table-column>
+            <el-table-column
+              prop="alarmDetail"
+              label="报警细节"
+              width="144"
+            ></el-table-column>
+            <el-table-column prop="position" label="定位"></el-table-column>
+          </el-table>
+        </div>
+        <!-- <button @click="handleIgnore" class="alert-btn">忽略</button> -->
+      </Container>
+    </div>
+  </div>
 </template>
 
-<style scoped>
-.alertlist-screen {
-  background: #e6e6e6;
-  height: 100vh;
-  width: 100vw;
-  display: inline-block;
+<style>
+.dark-table {
+  height: 100%;
+  background: transparent;
+  user-select: none;
+}
+
+.dark-row {
+  color: #fff;
+  background: #006acd32 !important;
+  user-select: none;
+}
+
+.dark-row:nth-child(odd) {
+  background: #020d2d32 !important;
+}
+
+.dark-row > td.el-table__cell {
+  border: none;
+  font-size: 16px;
+}
+
+.dark-row > td.el-table__cell:not(:last-child) {
+  border-right: 1px solid #0003;
+}
+
+.dark-row:hover > td.el-table__cell {
+  background-color: #fff1 !important;
+}
+
+.dark-header {
+  background-color: transparent !important;
+  color: #fff;
+}
+
+.dark-header > th.el-table__cell.is-leaf {
+  border-bottom: none;
+  background-color: #006acd32 !important;
+  font-weight: 400;
+  letter-spacing: 1px;
+}
+
+.dark-header > th.el-table__cell {
+  font-size: 16px;
+}
+
+.dark-header > th.el-table__cell:not(:last-child) {
+  border-right: 1px solid #0003;
+}
+</style>
+
+<style scoped>
+.main-container {
+  width: 1920px;
+  height: 1080px;
+  background: #000;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background: url(./assets/bg.png) 100% / cover no-repeat;
+}
+
+.pages-wrapper {
+  flex: 1;
+  display: flex;
+  position: relative;
+}
+
+.alert-list-page {
+  flex: 1;
+  position: relative;
+}
+
+.alert-list {
+  height: calc(100% - 56px);
+  width: 520px;
+
+  position: absolute;
+  top: 15px;
+  right: 32px;
+
+  display: flex;
+  flex-direction: column;
+}
+
+:fullscreen .alert-list {
+  width: 35%;
+  top: 32px;
+  height: calc(100% - 64px);
+}
+
+.alert-list__table {
+  height: calc(100% - 72px);
+}
+
+.alert-list__table >>> .el-table__inner-wrapper::before {
+  background: transparent;
+}
+
+button {
+  appearance: none;
+  outline: none;
+  border: none;
+  cursor: pointer;
+}
+
+.alert-btn {
+  width: 100%;
+  height: 72px;
+  background: #0f04;
+  color: #fff;
+  font-size: 32px;
+  line-height: 1;
+  letter-spacing: 2px;
+  transition: all 0.2s ease-out;
+}
+
+.alert-btn:hover {
+  background: #0f08;
 }
 </style>
diff --git a/src/MainScreen.vue b/src/MainScreen.vue
index 38f2bf9..53def8e 100644
--- a/src/MainScreen.vue
+++ b/src/MainScreen.vue
@@ -1,18 +1,233 @@
+<!-- 报警列表页面 -->
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref } from "vue";
+import { useWsStore } from "./store";
+import DatetimeTool from "./components/HeadTime.vue";
+import AppHeader from "./components/Base/Header.vue";
+import Tools from "./components/Tools.vue";
+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";
+
+const mainContainer = ref(null);
+const props = defineProps({
+  line: {
+    type: Number,
+    default: 1,
+  },
+});
+const store = useWsStore();
+const alarmList = ref(
+  (store.data1.alarmArrList || []).map((item, index) => ({
+    id: item.id,
+    eqName: item.equipmentName,
+    eqIndex: index + 1,
+    alarmGrade: item.alarmLevel,
+    alarmDetail: item.alarmDetails,
+    position: `${item.productLine} - ${item.segment}`,
+  }))
+);
+// store.$subscribe((mutation, state) => {
+//   alarmList.value = state.data1.alarmArrList.map((item, index) => ({
+//     id: item.id,
+//     eqName: item.equipmentName,
+//     eqIndex: index + 1,
+//     alarmGrade: item.alarmLevel,
+//     alarmDetail: item.alarmDetails,
+//     position: `${item.productLine} - ${item.segment}`,
+//   }));
+// });
+
+// function handleIgnore() {
+//   alarmList.value.splice(0)
+// }
+
+function handleResolutionChange(width, height) {
+  mainContainer.value && changeScale(mainContainer.value, width, height);
+}
 </script>
 
 <template>
-  <main class="main-screen">
-    <h1>main screen</h1>
-  </main>
+  <div id="main-container" ref="mainContainer" class="main-container">
+    <DatetimeTool />
+    <Tools @change-resolution="handleResolutionChange" />
+    <AppHeader />
+
+    <div class="main-screen">
+      <!-- <div
+        style="
+          position: absolute;
+          top: 0;
+          left: -279px;
+          width: calc(100% + 279px);
+          height: 100%;
+          background: #ccc3;
+        "
+      >
+        <ThreeD :line="line ?? '1'" />
+      </div> -->
+
+      <TodayYield class=" " />
+      <SumYield class=" " />
+      <TodayRate class=" " />
+      <SumRate class=" " />
+    </div>
+  </div>
 </template>
 
-<style scoped>
-.main-screen {
-  background: #e6e6e6;
-  height: 100vh;
-  width: 100vw;
-  display: inline-block;
+<style>
+.dark-table {
+  height: 100%;
+  background: transparent;
+  user-select: none;
+}
+
+.dark-row {
+  color: #fff;
+  background: #006acd32 !important;
+  user-select: none;
+}
+
+.dark-row:nth-child(odd) {
+  background: #020d2d32 !important;
+}
+
+.dark-row > td.el-table__cell {
+  border: none;
+  font-size: 16px;
+}
+
+.dark-row > td.el-table__cell:not(:last-child) {
+  border-right: 1px solid #0003;
+}
+
+.dark-row:hover > td.el-table__cell {
+  background-color: #fff1 !important;
+}
+
+.dark-header {
+  background-color: transparent !important;
+  color: #fff;
+}
+
+.dark-header > th.el-table__cell.is-leaf {
+  border-bottom: none;
+  background-color: #006acd32 !important;
+  font-weight: 400;
+  letter-spacing: 1px;
+}
+
+.dark-header > th.el-table__cell {
+  font-size: 16px;
+}
+
+.dark-header > th.el-table__cell:not(:last-child) {
+  border-right: 1px solid #0003;
+}
+</style>
+
+<style scoped>
+.ccontainer {
+  width: 420px;
+  height: 420px;
+  background: #ccc3;
+  /* position: absolute; */
+}
+
+.left-top {
+  top: 32px;
+  left: 32px;
+}
+
+.left-bottom {
+  bottom: 32px;
+  left: 32px;
+}
+
+.right-top {
+  top: 32px;
+  right: 32px;
+}
+
+.right-bottom {
+  bottom: 32px;
+  right: 32px;
+}
+
+.main-container {
+  width: 1920px;
+  height: 1080px;
+  background: #000;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background: url(./assets/bg.png) 100% / cover no-repeat;
+}
+
+.pages-wrapper {
+  flex: 1;
+  display: flex;
+  position: relative;
+}
+
+.main-screen {
+  flex: 1;
+  position: relative;
+  display: grid;
+  grid-template-rows: repeat(2, 400px);
+  grid-template-columns: repeat(2, 400px);
+  justify-content: center;
+  /* align-content: center; */
+  /* place-content: center; */
+  gap: 15% 55%;
+}
+
+.alert-list {
+  height: calc(100% - 56px);
+  width: 520px;
+
+  position: absolute;
+  top: 15px;
+  right: 32px;
+
+  display: flex;
+  flex-direction: column;
+}
+
+:fullscreen .alert-list {
+  width: 35%;
+  top: 32px;
+  height: calc(100% - 64px);
+}
+
+.alert-list__table {
+  height: calc(100% - 72px);
+}
+
+.alert-list__table >>> .el-table__inner-wrapper::before {
+  background: transparent;
+}
+
+button {
+  appearance: none;
+  outline: none;
+  border: none;
+  cursor: pointer;
+}
+
+.alert-btn {
+  width: 100%;
+  height: 72px;
+  background: #0f04;
+  color: #fff;
+  font-size: 32px;
+  line-height: 1;
+  letter-spacing: 2px;
+  transition: all 0.2s ease-out;
+}
+
+.alert-btn:hover {
+  background: #0f08;
 }
 </style>
diff --git a/src/components/mainscreen/SumRate.vue b/src/components/mainscreen/SumRate.vue
new file mode 100644
index 0000000..5eb7af0
--- /dev/null
+++ b/src/components/mainscreen/SumRate.vue
@@ -0,0 +1,10 @@
+<script setup>
+import { ref, onMounted, nextTick } from "vue";
+import Container from "../Base/Container.vue";
+</script>
+
+<template>
+  <Container class="chart" title="累计生产线成品率" icon="cube">
+    <p class="empty-data-hint">暂无数据</p>
+  </Container>
+</template>
diff --git a/src/components/mainscreen/SumYield.vue b/src/components/mainscreen/SumYield.vue
new file mode 100644
index 0000000..06c345f
--- /dev/null
+++ b/src/components/mainscreen/SumYield.vue
@@ -0,0 +1,84 @@
+<script setup>
+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 store = useWsStore();
+const chartChart = ref(null);
+const chart = ref(null);
+const showChartDom = ref(false);
+
+/** 无状态，处理数据 */
+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组") {
+      result[0] = parseInt(yieldArray[i].yield);
+    } else if (yieldArray[i].teamName == "B组") {
+      result[1] = parseInt(yieldArray[i].yield);
+    } else if (yieldArray[i].teamName == "C组") {
+      result[2] = parseInt(yieldArray[i].yield);
+    }
+  }
+  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);
+  // 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();
+    return;
+  }
+  showChartDom.value = true;
+  setupChart(chart, chartChart.value, d);
+}
+
+// 订阅
+store.$subscribe((mutation, state) => {
+  __apply(state.data2.classTodayProductYield);
+});
+
+onMounted(() => {
+  chartChart.value.classList.add("h-full");
+  // __apply();
+});
+</script>
+
+<template>
+  <Container class="chart" title="累计生产线产量" icon="cube">
+    <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>
diff --git a/src/components/mainscreen/TeamChartDayOptions.js b/src/components/mainscreen/TeamChartDayOptions.js
new file mode 100644
index 0000000..18a4820
--- /dev/null
+++ b/src/components/mainscreen/TeamChartDayOptions.js
@@ -0,0 +1,59 @@
+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);
+}
diff --git a/src/components/mainscreen/TodayRate.vue b/src/components/mainscreen/TodayRate.vue
new file mode 100644
index 0000000..6a895ab
--- /dev/null
+++ b/src/components/mainscreen/TodayRate.vue
@@ -0,0 +1,10 @@
+<script setup>
+import { ref, onMounted, nextTick } from "vue";
+import Container from "../Base/Container.vue";
+</script>
+
+<template>
+  <Container class="chart" title="今日生产线成品率" icon="cube">
+    <p class="empty-data-hint">暂无数据</p>
+  </Container>
+</template>
diff --git a/src/components/mainscreen/TodayYield.vue b/src/components/mainscreen/TodayYield.vue
new file mode 100644
index 0000000..d1bc826
--- /dev/null
+++ b/src/components/mainscreen/TodayYield.vue
@@ -0,0 +1,84 @@
+<script setup>
+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 store = useWsStore();
+const chartChart = ref(null);
+const chart = ref(null);
+const showChartDom = ref(false);
+
+/** 无状态，处理数据 */
+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组") {
+      result[0] = parseInt(yieldArray[i].yield);
+    } else if (yieldArray[i].teamName == "B组") {
+      result[1] = parseInt(yieldArray[i].yield);
+    } else if (yieldArray[i].teamName == "C组") {
+      result[2] = parseInt(yieldArray[i].yield);
+    }
+  }
+  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);
+  // 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();
+    return;
+  }
+  showChartDom.value = true;
+  setupChart(chart, chartChart.value, d);
+}
+
+// 订阅
+store.$subscribe((mutation, state) => {
+  __apply(state.data2.classTodayProductYield);
+});
+
+onMounted(() => {
+  chartChart.value.classList.add("h-full");
+  // __apply();
+});
+</script>
+
+<template>
+  <Container class="chart" title="今日生产线产量" icon="cube">
+    <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>