update

package-lock.json

@@ -17,13 +17,16 @@
         "vuex": "^3.6.2"
       },
       "devDependencies": {
+        "@types/node": "^20.6.0",
+        "@types/ws": "^8.5.5",
         "@vue/cli-plugin-babel": "~5.0.0",
         "@vue/cli-plugin-router": "~5.0.0",
         "@vue/cli-plugin-vuex": "~5.0.0",
         "@vue/cli-service": "~5.0.0",
         "sass": "^1.32.7",
         "sass-loader": "^12.0.0",
-        "vue-template-compiler": "^2.6.14"
+        "vue-template-compiler": "^2.6.14",
+        "ws": "^8.14.1"
       }
     },
     "node_modules/@achrinza/node-ipc": {
@@ -2344,11 +2347,10 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "20.1.0",
+      "version": "20.6.0",
-      "resolved": "https://registry.npmmirror.com/@types/node/-/node-20.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.6.0.tgz",
-      "integrity": "sha512-O+z53uwx64xY7D6roOi4+jApDGFg0qn6WHcxe5QeqjMaTezBO/mxdfFXIVAVVyNWKx84OmPB3L8kbVYOTeN34A==",
+      "integrity": "sha512-najjVq5KN2vsH2U/xyh2opaSEz6cZMR2SetLIlxlj08nOcmPOemJmUK2o4kUzfLqfrWE0PIrNeE16XhYDd3nqg==",
-      "dev": true,
+      "dev": true
-      "license": "MIT"
     },
     "node_modules/@types/normalize-package-data": {
       "version": "2.4.1",
@@ -2435,11 +2437,10 @@
       }
     },
     "node_modules/@types/ws": {
-      "version": "8.5.4",
+      "version": "8.5.5",
-      "resolved": "https://registry.npmmirror.com/@types/ws/-/ws-8.5.4.tgz",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.5.tgz",
-      "integrity": "sha512-zdQDHKUgcX/zBc4GrwsE/7dVdAD8JR4EuiAXiiUhhfyIJXXb2+PrGshFyeXWQPMmmZ2XxgaqclgpIC7eTXc1mg==",
+      "integrity": "sha512-lwhs8hktwxSjf9UaZ9tG5M03PGogvFaH8gUgLNbN9HKIg0dvv6q+gkSuJ8HN4/VbyxkuLzCjlN7GquQ0gUJfIg==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@types/node": "*"
       }
@@ -10108,6 +10109,27 @@
         "node": ">= 10.13.0"
       }
     },
+    "node_modules/webpack-bundle-analyzer/node_modules/ws": {
+      "version": "7.5.9",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
+      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.3.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/webpack-chain": {
       "version": "6.5.1",
       "resolved": "https://registry.npmmirror.com/webpack-chain/-/webpack-chain-6.5.1.tgz",
@@ -10356,28 +10378,6 @@
         "url": "https://opencollective.com/webpack"
       }
     },
-    "node_modules/webpack-dev-server/node_modules/ws": {
-      "version": "8.13.0",
-      "resolved": "https://registry.npmmirror.com/ws/-/ws-8.13.0.tgz",
-      "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=10.0.0"
-      },
-      "peerDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": ">=5.0.2"
-      },
-      "peerDependenciesMeta": {
-        "bufferutil": {
-          "optional": true
-        },
-        "utf-8-validate": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/webpack-merge": {
       "version": "5.8.0",
       "resolved": "https://registry.npmmirror.com/webpack-merge/-/webpack-merge-5.8.0.tgz",
@@ -10498,17 +10498,16 @@
       "license": "ISC"
     },
     "node_modules/ws": {
-      "version": "7.5.9",
+      "version": "8.14.1",
-      "resolved": "https://registry.npmmirror.com/ws/-/ws-7.5.9.tgz",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.14.1.tgz",
-      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+      "integrity": "sha512-4OOseMUq8AzRBI/7SLMUwO+FEDnguetSk7KMb1sHwvF2w2Wv5Hoj0nlifx8vtGsftE/jWHojPy8sMMzYLJ2G/A==",
       "dev": true,
-      "license": "MIT",
       "engines": {
-        "node": ">=8.3.0"
+        "node": ">=10.0.0"
       },
       "peerDependencies": {
         "bufferutil": "^4.0.1",
-        "utf-8-validate": "^5.0.2"
+        "utf-8-validate": ">=5.0.2"
       },
       "peerDependenciesMeta": {
         "bufferutil": {
@@ -12177,9 +12176,9 @@
       "dev": true
     },
     "@types/node": {
-      "version": "20.1.0",
+      "version": "20.6.0",
-      "resolved": "https://registry.npmmirror.com/@types/node/-/node-20.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.6.0.tgz",
-      "integrity": "sha512-O+z53uwx64xY7D6roOi4+jApDGFg0qn6WHcxe5QeqjMaTezBO/mxdfFXIVAVVyNWKx84OmPB3L8kbVYOTeN34A==",
+      "integrity": "sha512-najjVq5KN2vsH2U/xyh2opaSEz6cZMR2SetLIlxlj08nOcmPOemJmUK2o4kUzfLqfrWE0PIrNeE16XhYDd3nqg==",
       "dev": true
     },
     "@types/normalize-package-data": {
@@ -12259,9 +12258,9 @@
       }
     },
     "@types/ws": {
-      "version": "8.5.4",
+      "version": "8.5.5",
-      "resolved": "https://registry.npmmirror.com/@types/ws/-/ws-8.5.4.tgz",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.5.tgz",
-      "integrity": "sha512-zdQDHKUgcX/zBc4GrwsE/7dVdAD8JR4EuiAXiiUhhfyIJXXb2+PrGshFyeXWQPMmmZ2XxgaqclgpIC7eTXc1mg==",
+      "integrity": "sha512-lwhs8hktwxSjf9UaZ9tG5M03PGogvFaH8gUgLNbN9HKIg0dvv6q+gkSuJ8HN4/VbyxkuLzCjlN7GquQ0gUJfIg==",
       "dev": true,
       "requires": {
         "@types/node": "*"
@@ -17479,6 +17478,15 @@
         "opener": "^1.5.2",
         "sirv": "^1.0.7",
         "ws": "^7.3.1"
+      },
+      "dependencies": {
+        "ws": {
+          "version": "7.5.9",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
+          "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+          "dev": true,
+          "requires": {}
+        }
       }
     },
     "webpack-chain": {
@@ -17639,13 +17647,6 @@
             "ajv-formats": "^2.1.1",
             "ajv-keywords": "^5.1.0"
           }
-        },
-        "ws": {
-          "version": "8.13.0",
-          "resolved": "https://registry.npmmirror.com/ws/-/ws-8.13.0.tgz",
-          "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
-          "dev": true,
-          "requires": {}
         }
       }
     },
@@ -17737,9 +17738,9 @@
       "dev": true
     },
     "ws": {
-      "version": "7.5.9",
+      "version": "8.14.1",
-      "resolved": "https://registry.npmmirror.com/ws/-/ws-7.5.9.tgz",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.14.1.tgz",
-      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+      "integrity": "sha512-4OOseMUq8AzRBI/7SLMUwO+FEDnguetSk7KMb1sHwvF2w2Wv5Hoj0nlifx8vtGsftE/jWHojPy8sMMzYLJ2G/A==",
       "dev": true,
       "requires": {}
     },

package.json

@@ -4,7 +4,8 @@
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build"
+    "build": "vue-cli-service build",
+    "server": "ts-node ./src/components/yx-dark/socket-server/index.ts"
   },
   "dependencies": {
     "core-js": "^3.8.3",
@@ -16,12 +17,17 @@
     "vuex": "^3.6.2"
   },
   "devDependencies": {
+    "@types/node": "^20.6.0",
+    "@types/ws": "^8.5.5",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-router": "~5.0.0",
     "@vue/cli-plugin-vuex": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
     "sass": "^1.32.7",
     "sass-loader": "^12.0.0",
-    "vue-template-compiler": "^2.6.14"
+    "ts-node": "^10.9.1",
+    "typescript": "^5.2.2",
+    "vue-template-compiler": "^2.6.14",
+    "ws": "^8.14.1"
   }
 }

src/App.vue

@@ -1,9 +1,15 @@
 <template>
 	<div id="app">
+		<!-- <nav>
+			<router-link to="/">Home</router-link> |
+			<router-link to="/about">About</router-link>
+		</nav> -->
 		<router-view />
 	</div>
 </template>
 
 <script></script>
 
-<style lang="scss"></style>
+<style lang="scss">
+
+</style>

src/assets/styles/variables.scss

@@ -1,17 +1,14 @@
 // variables 
 
-// $design_width: 4480px
+// $design_width: 4480px;
-$design_width: 21120px;
+$design_width: 8960px;
-$design_height: 4320px;
+$design_height: 2160px;
 $actual_width: 3840px;
 $actual_height: 1080px;
 
-// 纵/4  横/5.5
-// 字体按照纵向调整
-
 $height: 1080px;
 $default_ratio: 0.875;
 
 
 // colors
-$main-color: #3565FF;
+$main-color: #6bf2ff;

src/components/boxes/BottomTemp.vue

@@ -1,7 +1,7 @@
 <template>
 	<!-- 窑底温度 -->
 	<Container usage="Charts">
-		<SubContainer title="窑底温度" icon="kbtm" padding="24px 32px">
+		<SubContainer title="窑底温度" icon="kbtm" padding="34px">
 			<div class="tables flex" style="height: 100%">
 				<LineChart
 					key="1"
@@ -55,12 +55,12 @@ export default {
 }
 
 .vertical-line {
-	margin: 0 6px;
+	margin: 0 adjust(3px);
-	width: 6px;
+	width: adjust(3px);
 	background: radial-gradient(
 		ellipse at center,
-		#3565ff,
+		#6fe2ff,
-		#3565ff51,
+		#52cbef80,
 		transparent,
 		transparent
 	);

src/components/boxes/FanRuntime.vue

@@ -1,72 +1,63 @@
 <template>
-	<!-- 风机运行情况 -->
+  <!-- 风机运行情况 -->
-	<Container usage="Table">
+  <Container usage="Table">
-		<SubContainer title="风机运行情况" icon="fan" padding="24px 32px">
+    <SubContainer title="风机运行情况" icon="fan" padding="34px">
-			<div class="tables flex relative" style="height: 100%">
+      <div class="tables flex" style="height: 100%">
-				<div class="table-wrapper flex-1 align-start">
+        <div class="table-wrapper flex-1 align-start">
-					<div
+          <div
-						v-if="tableData1 && tableData1.length === 0"
+            v-if="tableData1 && tableData1.length === 0"
-						style="
+            style="
-							position: absolute;
+              position: absolute;
-							width: 100%;
+              top: 0;
-							height: 100%;
+              left: 0;
-							background: #eee1;
+              width: 100%;
-							font-size: 18px;
+              height: 100%;
-							letter-spacing: 2px;
+              background: #eee1;
-							color: #3c4e8b;
+              display: grid;
-							display: grid;
+              place-items: center;
-							place-items: center;
+              font-size: 24px;
-							user-select: none;
+              color: #eee9;
-						"
+            "
-					>
+          >无数据</div>
-						无数据
+          <table class="table-1">
-					</div>
+            <thead>
-					<table class="table-1">
+              <!-- <tr style="font-size: 8px; background: #044a84; opacity: 19%"> -->
-						<thead>
+              <tr class="t-row">
-							<tr class="t-row">
+                <th>序号</th>
-								<th style="width: 160px">序号</th>
+                <th>设备名称</th>
-								<!-- <th style="width: 180px">设备名称</th>
+                <th>运行频率</th>
-								<th style="width: 180px">运行频率</th>
+                <th>设备状态</th>
-								<th style="width: 180px">设备状态</th> -->
+              </tr>
-								<th style="width: 240px">设备名称</th>
+            </thead>
-								<th style="width: 200px">运行频率</th>
+            <!-- <tbody> -->
-								<th style="width: 200px">设备状态</th>
+            <!-- <tr
-							</tr>
+							v-for="(row, index) in tableData1"
-						</thead>
+							:key="index"
-						<transition-group name="fan-list" tag="tbody" mode="out-in">
+							style="font-size: 7px; background: #0b5499; opacity: 35%"
-							<tr
+						> -->
-								class="t-row"
+            <transition-group name="fan-list" tag="tbody" mode="out-in">
-								v-for="row in tableData1"
+              <tr
-								:key="row && 'length' in row ? row[0] : Math.random()"
+                class="t-row"
-							>
+                v-for="row in tableData1"
-								<td
+                :key="row && 'length' in row ? row[0] : Math.random()"
-									v-for="(d, idx) in row"
+              >
-									:key="idx"
+                <td v-for="(d, idx) in row" :key="idx">
-									:data-title="idx == 1 ? d : null"
+                  <template v-if="idx === 2">
-								>
+                    <FrequentComp :value="d" />
-									<!-- :data-cx="cursorX"
+                  </template>
-									:data-cy="cursorY"
+                  <template v-else-if="idx === 3">
-									@mouseover="handleMouseOver" -->
+                    <StatusComp :value="d" />
-									<template v-if="idx === 2">
+                  </template>
-										<FrequentComp :value="d" />
+                  <template v-else>
-									</template>
+                    {{ d }}
-									<template v-else-if="idx === 3">
+                  </template>
-										<StatusComp :value="d" />
+                </td>
-									</template>
+              </tr>
-									<template v-else>
+            </transition-group>
-										<!-- <el-tooltip effect="light" :content="d" placement="top"> -->
+            <!-- </tbody> -->
-										<span :class="idx == 1 ? 'eqName' : 'sequence'">{{
+          </table>
-											d
+        </div>
-										}}</span>
+        <!-- 
-										<!-- </el-tooltip> -->
-									</template>
-								</td>
-							</tr>
-						</transition-group>
-						<!-- </tbody> -->
-					</table>
-				</div>
-				<!-- 
 				<div class="vertical-line"></div>
 				<table class="table-2 flex-1 align-start">
 					<thead>
@@ -93,9 +84,9 @@
 						</tr>
 					</tbody>
 				</table> -->
-			</div>
+      </div>
-		</SubContainer>
+    </SubContainer>
-	</Container>
+  </Container>
 </template>
 
 <script>
@@ -106,73 +97,61 @@ import StatusComp from "./subcomponents/TableStatus.vue";
 import { mapState } from "vuex";
 
 export default {
-	name: "KilnPressure",
+  name: "KilnPressure",
-	props: {},
+  props: {},
-	components: { Container, SubContainer, FrequentComp, StatusComp },
+  components: { Container, SubContainer, FrequentComp, StatusComp },
-	data() {
+  data() {
-		return {
+    return {
-			tableHead: ["序号", "设备名称", "运行频率", "设备状态"],
+      tableHead: ["序号", "设备名称", "运行频率", "设备状态"],
-			tableCache: [
+      tableCache: [
-				// [11, "风机11", "未运行", "正常" /**or 0,1*/],
+        // [11, "风机11", "未运行", "正常" /**or 0,1*/],
-				// [12, "风机12", "未运行", "正常" /**or 0,1*/],
+        // [12, "风机12", "未运行", "正常" /**or 0,1*/],
-				// [13, "风机13", "73Hz", "正常" /**or 0,1*/],
+        // [13, "风机13", "73Hz", "正常" /**or 0,1*/],
-			],
+      ],
-			tableData1: [
+      tableData1: [
-				// [1, "风机1", "2332Hz", "正常" /**or 0,1*/],
+        // [1, "风机1", "2332Hz", "正常" /**or 0,1*/],
-				// [2, "2#风机水电费款经典款", "未运行", "故障" /**or 0,1*/],
+        // [2, "风机2", "未运行", "故障" /**or 0,1*/],
-				// [3, "风机3", "333Hz", "正常" /**or 0,1*/],
+        // [3, "风机3", "333Hz", "正常" /**or 0,1*/],
-				// [4, "风机4", "100Hz", "正常" /**or 0,1*/],
+        // [4, "风机4", "100Hz", "正常" /**or 0,1*/],
-				// [5, "风机5", "未运行", "正常" /**or 0,1*/],
+        // [5, "风机5", "未运行", "正常" /**or 0,1*/],
-				// [6, "风机6", "未运行", "故障" /**or 0,1*/],
+        // [6, "风机6", "未运行", "故障" /**or 0,1*/],
-				// [7, "风机7", "3000Hz", "正常" /**or 0,1*/],
+        // [7, "风机7", "3000Hz", "正常" /**or 0,1*/],
-				// [8, "风机8", "未运行", "正常" /**or 0,1*/],
+        // [8, "风机8", "未运行", "正常" /**or 0,1*/],
-				// [9, "风机9", "未运行", "正常" /**or 0,1*/],
+        // [9, "风机9", "未运行", "正常" /**or 0,1*/],
-				// [10, "风机10", "86423Hz", "正常" /**or 0,1*/],
+        // [10, "风机10", "86423Hz", "正常" /**or 0,1*/],
-			],
+      ],
-			cursorX: 0,
+    };
-			cursorY: 0
+  },
-		};
+  computed: {
-	},
+    ...mapState(["fan"]),
-	computed: {
+  },
-		...mapState(["fan"]),
+  watch: {
-	},
+    fan: {
-	watch: {
+      handler: function (data) {
-		fan: {
+        if (!data) return;
-			handler: function (data) {
+        let idx = 0;
-				if (!data) return;
+        this.tableData1 = data.slice(0, 10).map((item, index) => {
-				let idx = 0;
+          idx += 1;
-				this.tableData1 = data.slice(0, 10).map((item, index) => {
+          return [idx, ...item];
-					idx += 1;
+        });
-					return [idx, ...item];
+        this.tableCache = data
-				});
+          .slice(10)
-				this.tableCache = data
+          .map((item, index) => [index + 1 + idx, ...item]);
-					.slice(10)
+      },
-					.map((item, index) => [index + 1 + idx, ...item]);
+      deep: true,
-			},
+      immediate: true,
-			deep: true,
+    },
-			immediate: true,
+  },
-		},
+  mounted() {
-	},
+    setInterval(() => {
-	mounted() {
+      const inData = this.tableCache.shift();
-		setInterval(() => {
+      const outData = this.tableData1.shift();
-			const inData = this.tableCache.shift();
+      setTimeout(() => {
-			const outData = this.tableData1.shift();
+        if (inData) this.tableData1.splice(this.tableData1.length, 0, inData);
-			setTimeout(() => {
+      }, 200);
-				if (inData) this.tableData1.splice(this.tableData1.length, 0, inData);
+      if (outData) this.tableCache.push(outData);
-			}, 200);
+    }, 3000);
-			if (outData) this.tableCache.push(outData);
+  },
-		}, 1000 * 3);
-	},
-	methods: {
-		// handleMouseOver(e) {
-		// 	if (e.target.dataset.title) {
-		// 		// 获取鼠标位置
-		// 		console.log("handleMouseOver", e.clientX, e.pageX, e.layorX, e.offsetX); //  e.target.dataset.title);
-		// 		this.cursorX = e.offsetX + 10
-		// 		this.cursorY = e.offsetY + 10
-		// 	}
-		// },
-	},
 };
 </script>
 
@@ -180,19 +159,19 @@ export default {
 @import "../../assets/styles/functions";
 
 ::-webkit-scrollbar {
-	width: 6px;
+  width: 6px;
-	background: #eee1;
+  background: #eee1;
 }
 
 ::-webkit-scrollbar-thumb {
-	width: 6px;
+  width: 6px;
-	border-radius: 8px;
+  border-radius: 8px;
-	background: #eee3;
+  background: #eee3;
 }
 
 .fan-list-enter-active,
 .fan-list-leave-active {
-	transition: all 0.5s;
+  transition: all 0.5s;
 }
 
 // .fan-list-leave-move {
@@ -201,109 +180,79 @@ export default {
 
 .fan-list-enter,
 .fan-list-leave-to {
-	opacity: 0;
+  opacity: 0;
-	transform: scaleY(0);
+  transform: scaleY(0);
 }
 
 .flex-1 {
-	flex: 1;
+  flex: 1;
 }
 
+.vertical-line {
+  margin: 0 adjust(3px);
+  width: adjust(3px);
+  background: radial-gradient(
+    ellipse at center,
+    #6fe2ff,
+    #52cbef80,
+    transparent,
+    transparent
+  );
+}
 .table-wrapper {
-	height: 420px;
+  // padding-right: 6px;
-	overflow: hidden;
+  height: 400px;
-	// background: #f001;
+  // overflow-y: auto;
+  overflow: hidden;
 }
 
 table {
-	table-layout: fixed;
+  width: 100%;
-	width: 100%;
+  border-spacing: adjust(1px);
-	border-spacing: 2px;
 }
 
+// tr, td, th {
+// 	max-height: 13.88px !important;
+// }
+
 .t-row {
-	height: 50px;
+  height: adjust(14px);
-}
-
-.tables {
-	overflow: hidden;
-	padding: 12px 32px 32px;
 }
 
 .tables > table {
-	overflow-y: auto;
+  overflow-y: auto;
 }
 
 .align-start {
-	align-self: flex-start;
+  align-self: flex-start;
 }
 
 thead > tr th:first-child {
-	text-align: center;
+  text-align: center;
 }
 
 thead > tr th {
-	font-size: 36px;
+  font-size: adjust(10px);
-	font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC,
+  line-height: 1.5;
-		Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei,
+  padding: adjust(3px) adjust(8px);
-		"微软雅黑", Arial, Helvetica, sans-serif;
+  font-weight: 400;
-	line-height: 1;
+  background: #044a8446;
-	letter-spacing: 1px;
+  text-align: left;
-	padding: 8px 48px;
-	font-weight: 600;
-	background: #4288df23;
-	color: #030609d6;
-	text-align: left;
-	user-select: none;
 }
 
-tbody > tr:nth-child(even) {
+tbody > tr:nth-child(odd) {
-	background: #4288df13;
+  background: #0b549960;
 }
 
-// tbody > tr td:not(:nth-child(2)) {
 tbody > tr td {
-	user-select: none;
+  font-size: adjust(10px);
-	font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC,
+  line-height: 1.25;
-		Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei,
+  padding: adjust(2px) adjust(8px);
-		"微软雅黑", Arial, Helvetica, sans-serif;
+  font-weight: 400;
-	color: #030609d6;
+  background: inherit;
-	font-size: 32px;
-	line-height: 1;
-	background: inherit;
-	padding: 0 48px;
 }
 
-tbody > tr td > span.eqName {
+tbody > tr td:first-child {
-	display: inline-block;
+  text-align: center;
-	width: 100%;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	overflow: hidden;
-}
-
-[data-title] {
-	position: relative;
-}
-
-[data-title]::after {
-	content: attr(data-title);
-	position: absolute;
-	padding: 12px 24px;
-	background: #000;
-	color: #fff;
-	border-radius: 12px;
-	left: 70%;
-	top: 100%;
-	white-space: nowrap;
-	opacity: 0;
-	transition: all 0.3s ease-out;
-	z-index: 9999;
-	visibility: hidden;
-}
-
-[data-title]:hover::after {
-	visibility: visible;
-	opacity: 1;
 }
 </style>

src/components/boxes/GasFlow.vue

@@ -1,7 +1,7 @@
 <template>
 	<!-- 天然气流量 -->
 	<Container usage="Charts">
-		<SubContainer title="天然气流量" icon="gas" padding="24px 32px">
+		<SubContainer title="天然气流量" icon="gas" padding="34px">
 			<div class="tables flex" style="height: 100%">
 				<LineChart
 					key="1"
@@ -55,12 +55,12 @@ export default {
 }
 
 .vertical-line {
-	margin: 0 6px;
+	margin: 0 adjust(3px);
-	width: 6px;
+	width: adjust(3px);
 	background: radial-gradient(
 		ellipse at center,
-		#3565ff,
+		#6fe2ff,
-		#3565ff51,
+		#52cbef80,
 		transparent,
 		transparent
 	);

src/components/boxes/HistoryTemp.vue

@@ -1,50 +1,52 @@
 <template>
-	<div
+  <div class="history-temp flex flex-col" style="height: 100%; position: relative;">
-		class="history-temp flex flex-col"
+    <h3>{{ title }}</h3>
-		style="height: 100%; position: relative"
+    <BarChart class="flex-1" :series="series" />
-	>
+    <div
-		<h3>{{ title }}</h3>
+      v-if="series && series.length === 0"
-		<BarChart class="flex-1" :series="series" />
+      style="
-		<div
+        position: absolute;
-			v-if="series && series.length === 0"
+        top: 8px;
-			style="
+        left: -30px;
-				position: absolute;
+        width: 110%;
-				top: 8px;
+        height: 105%;
-				left: -20px;
+        background: #eee1;
-				width: 110%;
+        display: grid;
-				height: 105%;
+        place-items: center;
-				background: #eee1;
+        font-size: 24px;
-				display: grid;
+        color: #eee9;
-				place-items: center;
+      "
-				font-size: 32px;
+    >
-				letter-spacing: 6px;
+      无数据
-				color: #777;
+    </div>
-			"
+  </div>
-		>
-			无数据
-		</div>
-	</div>
 </template>
 
 <script>
 import BarChart from "../charts/BarChart.vue";
+import { mapState } from "vuex";
 
 export default {
-	name: "HistoryTemp",
+  name: "HistoryTemp",
-	components: { BarChart },
+  components: { BarChart },
-	props: {
+  props: {
-		series: {
+    series: {
-			type: Array,
+      type: Array,
-			default: () => [],
+      default: () => [],
-		},
+    },
-		title: {
+    title: {
-			type: String,
+      type: String,
-			default: "窑炉历史温度趋势",
+      default: "窑炉历史温度趋势",
-		},
+    },
-	},
+  },
-	data() {
+  data() {
-		return {};
+    return {};
-	},
+  },
+  computed: {
+    ...mapState(["kilnWaterIn", "kilnWaterOut"]),
+  },
+  mounted() {},
+  methods: {},
 };
 </script>
 
@@ -52,22 +54,17 @@ export default {
 @import "../../assets/styles/functions";
 
 .flex-1 {
-	flex: 1;
+  flex: 1;
-	// background: #eee;
+  // background: #eee;
-}
-
-.history-temp {
-	// background: #f003;
 }
 
 h3 {
-	margin: 0;
+  margin: 0;
-	font-family: sans-serif;
+  font-family: sans-serif;
-	font-weight: 400;
+  font-weight: 400;
-	font-size: 30px;
+  font-size: adjust(14px);
-	line-height: 34px;
+  letter-spacing: adjust(1px);
-	letter-spacing: 2px;
+  color: #52fff8;
-	color: #0c71ff;
+  margin: adjust(12px) 0;
-	margin: 0;
 }
 </style>

src/components/boxes/InWater.vue

@@ -1,25 +1,48 @@
 <template>
-	<!-- 窑炉进口水温 -->
+  <!-- 窑炉进口水温 -->
-	<Container class="in-water" usage="NumberAndChart">
+  <Container usage="NumberAndChart">
-		<SubContainer title="进口实时水温" icon="inWater">
+    <SubContainer title="窑炉进口水温" icon="inWater" padding="34px">
-			<!-- <div class="pic" style=""></div> -->
+      <div class="pic" style=""></div>
-			<div class="content flex">
+      <div class="content flex flex-col">
-				<div class="realtime">
+        <div class="realtime">
-					<div class="time flex flex-center">
+          <div class="time flex flex-center">
-						<span class="temp-data">{{ waterInTemp }}</span>
+            <template v-for="(item, index) in waterInTemp.split('')">
-						<span class="unit">℃</span>
+              <DigitalBox
-					</div>
+                v-if="item !== '.'"
-				</div>
+                class="time--item"
-				<div class="graph flex-1">
+                :key="index"
-					<HistoryTrend
+                :value="item"
-						key="water-in"
+                :wider="true"
-						title="窑炉进口水温历史"
+              />
-						:series="kilnWaterIn"
+              <span
-					/>
+                :key="index"
-				</div>
+                v-else
-			</div>
+                style="
-		</SubContainer>
+                  background: #fff;
-	</Container>
+                  width: 10px;
+                  height: 10px;
+                  align-self: flex-end;
+                  margin-bottom: 9px;
+                  margin-right: 8px;
+                "
+              ></span>
+              <!-- <span :key="index" v-else style="background: red; margin-right: 8px; line-height: 1; font-size: 88px; font-family: 'zcoolqingkehuangyouti-Regular'"></span> -->
+            </template>
+            <span class="unit">℃</span>
+          </div>
+          <div class="text">进口实时水温</div>
+        </div>
+        <div class="wave"></div>
+        <div class="graph flex-1">
+          <HistoryTrend
+            key="water-in"
+            title="窑炉进口水温历史"
+            :series="kilnWaterIn"
+          />
+        </div>
+      </div>
+    </SubContainer>
+  </Container>
 </template>
 
 <script>
@@ -31,77 +54,103 @@ import HistoryTrend from "./HistoryTemp.vue";
 import { mapState } from "vuex";
 
 export default {
-	name: "InWater",
+  name: "InWater",
-	props: {},
+  props: {},
-	components: { Container, SubContainer, LineChart, DigitalBox, HistoryTrend },
+  components: { Container, SubContainer, LineChart, DigitalBox, HistoryTrend },
-	data() {
+  data() {
-		return {
+    return {
-			chartConfig: {},
+      chartConfig: {},
-		};
+    };
-	},
+  },
-	computed: {
+  computed: {
-		...mapState(["kilnWaterIn", "waterInTemp"]),
+    ...mapState(["kilnWaterIn", "waterInTemp"]),
-	},
+  },
 };
 </script>
 
 <style scoped lang="scss">
 @import "../../assets/styles/functions";
 
-.in-water {
+.pic {
-	position: absolute;
+  background: url(../../assets/in-water.png) no-repeat;
-	top: -200px;
+  background-size: 100% 100%;
-	left: 27px;
+  background-position: center;
-	height: 509px;
+  position: absolute;
-	width: 1323px;
+  top: adjust(24px);
-	background: url(../../assets/in-water.png) top 0 left 0 / cover no-repeat;
+  right: 0;
+  width: adjust(w(440px));
+  height: adjust(h(380px));
 }
 
 .content {
-	height: 100%;
+  height: 100%;
 }
 
-.realtime {
+.wave {
-	width: 530px;
+  transform: translateX(adjust(-16px));
-	// height: 337px;
+  width: adjust(w(793px));
-	background: url(../../assets/inwater.png) top 90% left 0 / 100% 80% no-repeat,
+  height: adjust(h(76px));
-		url(../../assets/i-water.png) top 24px right 24px / 40% 70% no-repeat;
+  background: url(../../assets/inwater.png) no-repeat;
+  background-size: 100% 100%;
 }
 
 .graph {
-	// background: #0cc3;
+  // background: #ccc3;
-	height: 436px;
-	transform: translate(0, -64px);
 }
 
 .flex-1 {
-	flex: 1;
+  flex: 1;
-	// background: #eee;
+  // background: #eee;
 }
 
 .time {
-	transform: translate(56px, 80px);
+  // background: #eee;
-	// background: #eee;
+  margin: adjust(12px) 0;
+  padding-left: adjust(14px);
 }
 
 .time--item:not(:last-child) {
-	margin-right: adjust(5px);
+  margin-right: adjust(5px);
-}
-
-.temp-data {
-	color: #0068ff;
-	font-size: 80px;
-	letter-spacing: 2px;
 }
 
 .unit {
-	font-family: sans-serif !important;
+  font-family: Ubuntu, monospace, sans-serif !important;
-	font-size: 48px;
+  font-size: adjust(20px);
-	font-weight: 400;
+  letter-spacing: adjust(1px);
-	letter-spacing: 1px;
+  align-self: flex-end;
-	align-self: flex-end;
+}
-	margin-bottom: 4px;
+
-	margin-left: 4px;
+.text {
-	color: #0068ff;
+  display: inline-block;
+  margin-left: adjust(24px);
+  margin-bottom: adjust(10px);
+  padding: adjust(12px) 0;
+  text-align: center;
+  font-size: adjust(22px);
+  letter-spacing: adjust(1px);
+  position: relative;
+  z-index: 10;
+  user-select: none;
+}
+
+.text::after {
+  content: "";
+  display: block;
+  position: absolute;
+  z-index: 0;
+  left: 0;
+  bottom: adjust(10px);
+  height: adjust(4px);
+  width: 100%;
+  /* 渐变色 */
+  background: radial-gradient(
+    ellipse at center,
+    #6fe2ff,
+    #6fe2ffc0,
+    #52cbef80,
+    #52cbef30,
+    #52cbef00,
+    transparent
+  );
 }
 </style>

src/components/boxes/KilnRuntime.vue

@@ -1,20 +1,20 @@
 <template>
-	<!-- 窑炉运行时间 -->
+  <!-- 窑炉运行时间 -->
-	<Container usage="NumberOrDate">
+  <Container usage="NumberOrDate">
-		<SubContainer title="窑炉运行时间" icon="clock" padding="34px">
+    <SubContainer title="窑炉运行时间" icon="clock" padding="34px">
-			<div class="flex flex-col">
+      <div class="flex flex-col">
-				<div class="time flex flex-center">
+        <div class="time flex flex-center">
-					<DigitalBox
+          <DigitalBox
-						class="time--item"
+            class="time--item"
-						v-for="(item, index) in time"
+            v-for="(item, index) in time"
-						:key="index"
+            :key="index"
-						:value="item"
+            :value="item"
-					/>
+          />
-				</div>
+        </div>
-				<div class="text">窑炉运行时间</div>
+        <div class="text">窑炉运行时间</div>
-			</div>
+      </div>
-		</SubContainer>
+    </SubContainer>
-	</Container>
+  </Container>
 </template>
 
 <script>
@@ -23,28 +23,28 @@ import SubContainer from "../layout/SubContainer.vue";
 import DigitalBox from "../common/DigitalBox.vue";
 
 export default {
-	name: "KilnRuntime",
+  name: "KilnRuntime",
-	components: { Container, SubContainer, DigitalBox },
+  components: { Container, SubContainer, DigitalBox },
-	props: {},
+  props: {},
-	data() {
+  data() {
-		return {
+    return {
-			time: "   天",
+      time: "   天",
-		};
+    };
-	},
+  },
-	mounted() {
+  mounted() {
-		this.getRuntime();
+	this.getRuntime()
-		setInterval(this.getRuntime, 1000 * 60 * 60);
+    setInterval(this.getRuntime, 1000 * 60 * 60);
-	},
+  },
-	methods: {
+  methods: {
-		getRuntime() {
+    getRuntime() {
-			const diff = Date.now() - new Date("2023-5-7 8:00:00");
+      const diff = Date.now() - new Date("2023-5-7 8:00:00");
-			const days = parseInt(diff / 1000 / 60 / 60 / 24);
+      const days = parseInt(diff / 1000 / 60 / 60 / 24);
-			const hours = parseInt(
+      const hours = parseInt(
-				(diff - days * 24 * 60 * 60 * 1000) / 1000 / 60 / 60
+        (diff - days * 24 * 60 * 60 * 1000) / 1000 / 60 / 60
-			);
+      );
-			this.time = `${days}天`;
+      this.time = `${days}天`;
-		},
+    },
-	},
+  },
 };
 </script>
 
@@ -52,47 +52,47 @@ export default {
 @import "../../assets/styles/functions";
 
 .time {
-	// background: #eee;
+  // background: #eee;
-	margin: adjust(12px) 0;
+  margin: adjust(12px) 0;
 }
 
 .flex-center {
-	justify-content: center;
+  justify-content: center;
-	align-items: center;
+  align-items: center;
 }
 
 .time--item:not(:last-child) {
-	margin-right: adjust(8px);
+  margin-right: adjust(8px);
 }
 
 .text {
-	padding: adjust(12px) 0;
+  padding: adjust(12px) 0;
-	text-align: center;
+  text-align: center;
-	font-size: adjust(23px);
+  font-size: adjust(23px);
-	letter-spacing: adjust(4px);
+  letter-spacing: adjust(4px);
-	position: relative;
+  position: relative;
-	z-index: 10;
+  z-index: 10;
-	user-select: none;
+  user-select: none;
 }
 
 .text::after {
-	content: "";
+  content: "";
-	display: block;
+  display: block;
-	position: absolute;
+  position: absolute;
-	z-index: 0;
+  z-index: 0;
-	left: 12%;
+  left: 12%;
-	bottom: adjust(10px);
+  bottom: adjust(10px);
-	height: adjust(4px);
+  height: adjust(4px);
-	width: 76%;
+  width: 76%;
-	/* 渐变色 */
+  /* 渐变色 */
-	background: radial-gradient(
+  background: radial-gradient(
-		ellipse at center,
+    ellipse at center,
-		#6fe2ff,
+    #6fe2ff,
-		#6fe2ffc0,
+    #6fe2ffc0,
-		#52cbef80,
+    #52cbef80,
-		#52cbef30,
+    #52cbef30,
-		#52cbef00,
+    #52cbef00,
-		transparent
+    transparent
-	);
+  );
 }
 </style>

src/components/boxes/OilFlow.vue

@@ -1,7 +1,7 @@
 <template>
 	<!-- 油流量 -->
 	<Container usage="Charts">
-		<SubContainer title="油流量" icon="oil" padding="24px 32px">
+		<SubContainer title="油流量" icon="oil" padding="34px">
 			<div class="tables flex" style="height: 100%">
 				<LineChart
 					key="1"
@@ -30,7 +30,6 @@ import LineChart from "../charts/LineChart.vue";
 import Container from "../layout/Container.vue";
 import SubContainer from "../layout/SubContainer.vue";
 import { mapState } from "vuex";
-import { randomInt } from "@/utils";
 
 export default {
 	name: "OilFlow",
@@ -39,49 +38,6 @@ export default {
 	data() {
 		return {
 			chartConfig: {},
-			// oilTable1: {
-			// 	FT111: Array(24)
-			// 		.fill(1)
-			// 		.map((_) => randomInt()),
-			// 	FT112: Array(24)
-			// 		.fill(1)
-			// 		.map((_) => randomInt()),
-			// 	FT113: Array(24)
-			// 		.fill(1)
-			// 		.map((_) => randomInt()),
-			// 	FT114: Array(24)
-			// 		.fill(1)
-			// 		.map((_) => randomInt()),
-			// 	FT115: Array(24)
-			// 		.fill(1)
-			// 		.map((_) => randomInt()),
-			// },
-			// oilTable2: {
-			// 	OT001: Array(24)
-			// 		.fill(1)
-			// 		.map((_) => randomInt()),
-			// 	OT002: Array(24)
-			// 		.fill(1)
-			// 		.map((_) => randomInt()),
-			// 	OT004: Array(24)
-			// 		.fill(1)
-			// 		.map((_) => randomInt()),
-			// 	OT003: Array(24)
-			// 		.fill(1)
-			// 		.map((_) => randomInt()),
-			// 	OT005: Array(24)
-			// 		.fill(1)
-			// 		.map((_) => randomInt()),
-			// 	OT006: Array(24)
-			// 		.fill(1)
-			// 		.map((_) => randomInt()),
-			// 	OT007: Array(24)
-			// 		.fill(1)
-			// 		.map((_) => randomInt()),
-			// 	OT008: Array(24)
-			// 		.fill(1)
-			// 		.map((_) => randomInt()),
-			// },
 		};
 	},
 	computed: {
@@ -99,12 +55,12 @@ export default {
 }
 
 .vertical-line {
-	margin: 0 6px;
+	margin: 0 adjust(3px);
-	width: 6px;
+	width: adjust(3px);
 	background: radial-gradient(
 		ellipse at center,
-		#3565ff,
+		#6fe2ff,
-		#3565ff51,
+		#52cbef80,
 		transparent,
 		transparent
 	);

src/components/boxes/OutWater.vue

@@ -1,25 +1,48 @@
 <template>
-	<!-- 窑炉出口水温 -->
+  <!-- 窑炉出口水温 -->
-	<Container class="out-water" usage="NumberAndChart">
+  <Container usage="NumberAndChart">
-		<SubContainer title="出口实时水温" icon="inWater">
+    <SubContainer title="窑炉出口水温" icon="inWater" padding="34px">
-			<div class="content flex">
+      <div class="pic" style=""></div>
-				<div class="realtime">
+      <div class="content flex flex-col">
-					<div class="time flex flex-center">
+        <div class="realtime">
-						<span class="temp-data">{{ waterOutTemp }}</span>
+          <div class="time flex flex-center">
-						<span class="unit">℃</span>
+            <template v-for="(item, index) in waterOutTemp.split('')">
-					</div>
+              <DigitalBox
-				</div>
+                v-if="item !== '.'"
-				<div class="graph flex-1">
+                class="time--item"
-					<HistoryTrend
+                :key="index"
-						key="water-out"
+                :value="item"
-						title="窑炉出口水温历史"
+                :wider="true"
-						:series="kilnWaterOut"
+              />
-					/>
+              <span
-					<!-- :series="[11, 22, 33, 44, 55, 66, 77, 88, 99, 100, 32, 99, 88, 31]" -->
+                :key="index"
-				</div>
+                v-else
-			</div>
+                style="
-		</SubContainer>
+                  background: #fff;
-	</Container>
+                  width: 10px;
+                  height: 10px;
+                  align-self: flex-end;
+                  margin-bottom: 9px;
+                  margin-right: 8px;
+                "
+              ></span>
+              <!-- <span :key="index" v-else style="background: red; margin-right: 8px; line-height: 1; font-size: 88px; font-family: 'zcoolqingkehuangyouti-Regular'"></span> -->
+            </template>
+            <span class="unit">℃</span>
+          </div>
+          <div class="text">出口实时水温</div>
+        </div>
+        <div class="wave"></div>
+        <div class="graph flex-1">
+          <HistoryTrend
+            key="water-out"
+            title="窑炉出口水温历史"
+            :series="kilnWaterOut"
+          />
+        </div>
+      </div>
+    </SubContainer>
+  </Container>
 </template>
 
 <script>
@@ -31,74 +54,103 @@ import HistoryTrend from "./HistoryTemp.vue";
 import { mapState } from "vuex";
 
 export default {
-	name: "OutWater",
+  name: "OutWater",
-	props: {},
+  props: {},
-	components: { Container, SubContainer, LineChart, DigitalBox, HistoryTrend },
+  components: { Container, SubContainer, LineChart, DigitalBox, HistoryTrend },
-	data() {
+  data() {
-		return {
+    return {
-			chartConfig: {},
+      chartConfig: {},
-		};
+    };
-	},
+  },
-	computed: {
+  computed: {
-		...mapState(["kilnWaterOut", "waterOutTemp"]),
+    ...mapState(["kilnWaterOut", "waterOutTemp"]),
-	},
+  },
 };
 </script>
+
 <style scoped lang="scss">
 @import "../../assets/styles/functions";
 
-.out-water {
+.pic {
-	position: absolute;
+  background: url(../../assets/out-water.png) no-repeat;
-	top: -200px;
+  background-size: 100% 100%;
-	left: 1350px;
+  background-position: center;
-	height: 509px;
+  position: absolute;
-	width: 1323px;
+  top: adjust(24px);
-	background: url(../../assets/out-water.png) top 0 left 0 / cover no-repeat;
+  right: 0;
+  width: adjust(w(440px));
+  height: adjust(h(380px));
 }
 
 .content {
-	height: 100%;
+  height: 100%;
 }
 
-.realtime {
+.wave {
-	width: 530px;
+  transform: translateX(adjust(-16px)) rotateY(0.5turn);
-	// height: 337px;
+  width: adjust(w(793px));
-	background: url(../../assets/outwater.png) top 90% left 0 / 100% 80% no-repeat,
+  height: adjust(h(76px));
-		url(../../assets/o-water.png) top 24px right 24px / 40% 70% no-repeat;
+  background: url(../../assets/inwater.png) no-repeat;
+  background-size: 100% 100%;
 }
 
 .graph {
-	// background: #0cc3;
+  // background: #ccc3;
-	height: 436px;
-	transform: translate(0, -64px);
 }
+
 .flex-1 {
-	flex: 1;
+  flex: 1;
-	// background: #eee;
+  // background: #eee;
 }
 
 .time {
-	transform: translate(56px, 80px);
+  // background: #eee;
+  margin: adjust(12px) 0;
+  padding-left: adjust(14px);
 }
 
 .time--item:not(:last-child) {
-	margin-right: adjust(5px);
+  margin-right: adjust(5px);
-}
-
-.temp-data {
-	color: #0068ff;
-	font-size: 80px;
-	letter-spacing: 2px;
 }
 
 .unit {
-	font-family: sans-serif !important;
+  font-family: Ubuntu, monospace, sans-serif !important;
-	font-size: 48px;
+  font-size: adjust(20px);
-	font-weight: 400;
+  letter-spacing: adjust(1px);
-	letter-spacing: 1px;
+  align-self: flex-end;
-	align-self: flex-end;
+}
-	margin-bottom: 4px;
+
-	margin-left: 4px;
+.text {
-	color: #0068ff;
+  display: inline-block;
+  margin-left: adjust(24px);
+  margin-bottom: adjust(10px);
+  padding: adjust(12px) 0;
+  text-align: center;
+  font-size: adjust(22px);
+  letter-spacing: adjust(1px);
+  position: relative;
+  z-index: 10;
+  user-select: none;
+}
+
+.text::after {
+  content: "";
+  display: block;
+  position: absolute;
+  z-index: 0;
+  left: 0;
+  bottom: adjust(10px);
+  height: adjust(4px);
+  width: 100%;
+  /* 渐变色 */
+  background: radial-gradient(
+    ellipse at center,
+    #6fe2ff,
+    #6fe2ffc0,
+    #52cbef80,
+    #52cbef30,
+    #52cbef00,
+    transparent
+  );
 }
 </style>

src/components/boxes/TopTemp.vue

@@ -1,7 +1,7 @@
 <template>
 	<!-- 窑顶温度 -->
 	<Container usage="Charts">
-		<SubContainer title="窑顶温度" icon="ktop" padding="24px 32px">
+		<SubContainer title="窑顶温度" icon="ktop" padding="34px">
 			<div class="tables flex" style="height: 100%">
 				<LineChart
 					key="1"
@@ -43,8 +43,8 @@ export default {
 	computed: {
 		...mapState(["kilnTop1", "kilnTop2"]),
 		legend_1() {
-			return Object.keys(this.kilnTop1);
+			return Object.keys(this.kilnTop1)
-		},
+		}
 	},
 	watch: {
 		kilnTop1(val) {
@@ -63,12 +63,12 @@ export default {
 }
 
 .vertical-line {
-	margin: 0 6px;
+	margin: 0 adjust(3px);
-	width: 6px;
+	width: adjust(3px);
 	background: radial-gradient(
 		ellipse at center,
-		#3565ff,
+		#6fe2ff,
-		#3565ff51,
+		#52cbef80,
 		transparent,
 		transparent
 	);

src/components/boxes/XicaoTemp.vue

@@ -55,12 +55,12 @@ export default {
 }
 
 .vertical-line {
-	margin: 0 6px;
+	margin: 0 adjust(3px);
-	width: 6px;
+	width: adjust(3px);
 	background: radial-gradient(
 		ellipse at center,
-		#3565ff,
+		#6fe2ff,
-		#3565ff51,
+		#52cbef80,
 		transparent,
 		transparent
 	);

src/components/boxes/subcomponents/TableStatus.vue

@@ -27,21 +27,21 @@ export default {
 .table-status {
 	/* font-family: Ubuntu, sans-serif !important; */
 	color: #3984ff;
-	padding-left: 24px;
+	padding-left: adjust(10px);
 	position: relative;
 }
 
 .table-status::after {
 	content: "";
 	position: absolute;
-	left: 2px;
+	left: adjust(1px);
-	top: 8px;
+	top: adjust(2px);
 	display: inline-block;
-	width: 12px;
+	width: adjust(4px);
-	height: 12px;
+	height: adjust(4px);
-	border-radius: 100px;
+	border-radius: adjust(100px);
 	background: #3984ff;
-	box-shadow: 0px 0px 4px 4px rgba(39, 96, 255, 0.5);
+	box-shadow: 0px 0px adjust(2px) adjust(2px) rgba(39, 96, 255, 0.5);
 }
 
 .invalid {
@@ -50,6 +50,6 @@ export default {
 
 .invalid::after {
 	background: #ff0c0c;
-	box-shadow: 0px 0px 4px 4px rgba(255, 39, 39, 0.5);
+	box-shadow: 0px 0px adjust(2px) adjust(2px) rgba(255, 39, 39, 0.5);
 }
 </style>

src/components/charts/BarChart.vue

@@ -75,28 +75,28 @@ export default {
         this.chart = echarts.init(document.getElementById(this.id));
       this.chart.setOption({
         grid: {
-          top: 32,
+          top: adjust(20),
-          left: 64,
+          left: adjust(28),
-          bottom: 64,
+          bottom: adjust(18),
-          right: 32,
+          right: adjust(12),
         },
         xAxis: {
           type: "category",
           data: this.updateXAxis(),
           axisLine: {
             lineStyle: {
-              color: '#0068ff33'
+              color: "#5982b2a0",
             },
           },
           axisTick: {
             show: false,
           },
           axisLabel: {
-            color: "#3C4E8B",
+            color: "#fff9",
-            fontSize: 16,
+            fontSize: adjust(8),
-            lineHeight: 0,
+            lineHeight: adjust(1),
-            margin: 16,
+            margin: adjust(6),
-            rotate: 45,
+            rotate: 30,
           },
         },
         yAxis: {
@@ -110,7 +110,7 @@ export default {
           axisLine: {
             show: true,
             lineStyle: {
-              color: '#0068ff33'
+              color: "#5982b2a0",
             },
           },
           axisTick: {
@@ -118,13 +118,13 @@ export default {
           },
           axisLabel: {
             formatter: "{value} ℃",
-            color: "#3C4E8B",
+            color: "#fff9",
-            fontSize: 16,
+            fontSize: adjust(8),
-            lineHeight: 0,
+            lineHeight: adjust(1),
           },
           splitLine: {
             lineStyle: {
-            color: '#0068ff33'
+              color: "#5982b2a0",
             },
           },
           // data: [100, 200, 300, 400, 500],
@@ -132,11 +132,20 @@ export default {
         series: [
           {
             data: this.series,
+            //   Array(24)
+            //     .fill(1)
+            //     .map(() => {
+            //       let v = Math.ceil(Math.random() * 100);
+            //       while (v < 60) {
+            //         v = Math.ceil(Math.random() * 100);
+            //       }
+            //       return v;
+            //     }),
             type: "bar",
-            barWidth: 12,
+            barWidth: adjust(4),
             label: {
               show: true,
-              fontSize: 18,
+              fontSize: adjust(7),
               color: "#eee8",
               position: "topRight",
               rotate: 90,
@@ -144,16 +153,11 @@ export default {
             },
             itemStyle: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: "#996ef9" },
+                { offset: 0, color: "#A0FF49" },
-                { offset: 0.7, color: "#187aff" },
+                { offset: 0.35, color: "#49FF9A" },
+                { offset: 0.7, color: "#49F2FF" },
                 { offset: 1, color: "#0D6FFF" },
               ]),
-              // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              //   { offset: 0, color: "#A0FF49" },
-              //   { offset: 0.35, color: "#49FF9A" },
-              //   { offset: 0.7, color: "#49F2FF" },
-              //   { offset: 1, color: "#0D6FFF" },
-              // ]),
             },
           },
         ],

src/components/charts/LineChart.vue

@@ -1,37 +1,32 @@
 <template>
-	<!-- line chart  -->
+  <!-- line chart  -->
-	<div class="line-chart__wrapper">
+  <div class="line-chart__wrapper">
-		<div
+    <div class="line-chart__custom-legend flex" v-if="legend.length">
-			class="line-chart__custom-legend flex"
+      <!-- <span>产线1 - 产线5</span> -->
-			v-if="legend.length"
+      <ul style="" class="flex">
-			:style="legendWidth"
+        <li v-for="(v, i) in legend" :key="i">{{ v }}</li>
-		>
+      </ul>
-			<!-- <span>产线1 - 产线5</span> -->
+    </div>
-			<ul :style="gridColumn" class="">
+    <div :id="id" style="width: 100%; height: 100%"></div>
-				<li v-for="(v, i) in legend" :key="i">{{ v }}</li>
+    <div
-			</ul>
+      v-show="legend.length === 0"
-		</div>
+      style="
-		<div :id="id" style="width: 100%; height: 100%"></div>
+        position: absolute;
-		<div
+        top: 0;
-			v-show="legend.length === 0"
+        left: 0;
-			style="
+        background: #eee0;
-				position: absolute;
+        width: 100%;
-				top: 0;
+        height: 100%;
-				left: 0;
+        display: grid;
-				background: #eee0;
+        place-items: center;
-				width: 100%;
+        font-size: 24px;
-				height: 100%;
+        color: #eee8;
-				display: grid;
+        user-select: none;
-				place-items: center;
+      "
-				font-size: 56px;
+    >
-				letter-spacing: 2px;
+      无数据
-				color: #3c4e8b88;
+    </div>
-				user-select: none;
+  </div>
-			"
-		>
-			无数据
-		</div>
-	</div>
 </template>
 
 <script>
@@ -39,9 +34,9 @@ import * as echarts from "echarts/core";
 import { LineChart } from "echarts/charts";
 
 import {
-	TitleComponent,
+  TitleComponent,
-	TooltipComponent,
+  TooltipComponent,
-	GridComponent,
+  GridComponent,
 } from "echarts/components";
 
 import { LabelLayout, UniversalTransition } from "echarts/features";
@@ -49,226 +44,207 @@ import { LabelLayout, UniversalTransition } from "echarts/features";
 import { CanvasRenderer } from "echarts/renderers";
 
 echarts.use([
-	TitleComponent,
+  TitleComponent,
-	TooltipComponent,
+  TooltipComponent,
-	GridComponent,
+  GridComponent,
-	LineChart,
+  LineChart,
-	LabelLayout,
+  LabelLayout,
-	UniversalTransition,
+  UniversalTransition,
-	CanvasRenderer,
+  CanvasRenderer,
 ]);
 
 function adjust(v) {
-	return v * 2;
+  return v * 2;
 }
 
 export default {
-	name: "LineChart",
+  name: "LineChart",
-	props: {
+  props: {
-		id: {
+    id: {
-			type: String,
+      type: String,
-			default: "line-chart",
+      default: "line-chart",
-		},
-		config: {
-			type: Object,
-			default: () => ({
-				title: { text: "default chart" },
-			}),
-		},
-		unit: {
-			type: String,
-			default: "单位/m³",
-		},
-		legend: {
-			type: Array,
-			default: () => [],
-		},
-		series: {
-			type: Object,
-			default: () => ({}),
-		},
-	},
-	data() {
-		return {
-			chart: null,
-			colors: [
-				"#18c7f3",
-				"#FFD160",
-				"#F31868",
-				"#30E89A",
-				"#2760FF",
-				"#7138FF",
-				"#F318D8",
-				"#C0F318",
-				"#ff7777",
-				"#1199ff",
-				"#9988ff",
-				"#3388ff",
-				"#337788",
-			],
-			data: [],
-			legendtext: [
-				"asdfsadf",
-				"asdfsadf",
-				"asdfsadf",
-				"asdfsadf",
-				"asdfsadf",
-				"asdfsadf",
-				"asdfsadf",
-				"asdfsadf",
-			],
-		};
-	},
-	mounted() {
-		this.init();
-	},
-	computed: {
-		legendWidth() {
-			let w = null;
-
-      switch (this.doMath()) {
-        case 1: w = '55%'; break;
-        // case 2: w = '75%'; break;
-        case 2: w = '50%'; break;
-        // case 3: w = '100%'; break;
-      }
-
-			if (!w) return {};
-			return {
-				width: w,
-        top: w == '50%' ? '-72px' : '-42px' 
-			};
-		},
-    gridColumn() {
-      switch(this.doMath()) {
-        // case 2: return { 'grid-template-columns': 'repeat(6, 1fr)'}
-        case 2: return { 'grid-template-columns': 'repeat(4, 1fr)'}
-        case 3: return { 'grid-template-columns': 'repeat(8, 1fr)'}
-      }
-    }
-	},
-	watch: {
-		series: {
-			deep: true,
-			handler: function () {
-				console.log("LineChart: series changed!");
-				this.init();
-			},
-		},
-	},
-	methods: {
-    doMath() {
-      if (this.legend && Array.isArray(this.legend) && this.legend.length > 0) {
-        const len = this.legend.length 
-        if (len > 0 && len <= 5) return 1
-        else if (len > 5 && len <= 10) return 2
-        else return 3
-      }
-      return 0
     },
-
+    config: {
-		updateXAxis() {
+      type: Object,
-			const hour = +new Date().getHours();
+      default: () => ({
-			return Array(24)
+        title: { text: "default chart" },
-				.fill(1)
+      }),
-				.map((_, index) => {
+    },
-					if (hour - index < 0) {
+    unit: {
-						return 24 + hour - index + ":00";
+      type: String,
-					}
+      default: "单位/m³",
-					return hour - index + ":00";
+    },
-				})
+    legend: {
-				.reverse();
+      type: Array,
-		},
+      default: () => [],
-		init() {
+    },
-			if (!this.chart)
+    series: {
-				this.chart = echarts.init(document.getElementById(this.id));
+      type: Object,
-			this.chart.setOption({
+      default: () => ({}),
-				grid: {
+    },
-					top: 56,
+  },
-					left: 80,
+  data() {
-					bottom: 64,
+    return {
-					right: 56,
+      chart: null,
-				},
+      colors: [
-				tooltip: {},
+        "#18c7f3",
-				xAxis: {
+        "#FFD160",
-					data: this.updateXAxis(),
+        "#F31868",
-					axisLine: {
+        "#30E89A",
-						lineStyle: {
+        "#2760FF",
-							color: "#5982b2a0",
+        "#7138FF",
-						},
+        "#F318D8",
-					},
+        "#C0F318",
-					axisTick: {
+        "#f77",
-						show: true,
+        "#19f",
-						length: 8,
+        "#98f",
-						alignWithLabel: true,
+      ],
-						lineStyle: {
+      data: [],
-							width: 3,
+      legendtext: [
-						},
+        "asdfsadf",
-					},
+        "asdfsadf",
-					axisLabel: {
+        "asdfsadf",
-						color: "#3C4E8Baa",
+        "asdfsadf",
-						fontSize: 20,
+        "asdfsadf",
-						lineHeight: 0,
+        "asdfsadf",
-						margin: 18,
+        "asdfsadf",
-						rotate: 45,
+        "asdfsadf",
-					},
+      ],
-				},
+    };
-				yAxis: {
+  },
-					type: "value",
+  mounted() {
-					name: this.unit,
+    this.init();
-					nameTextStyle: {
+  },
-						color: "#3C4E8Baa",
+  watch: {
-						fontSize: 20,
+    series: {
-						lineHeight: 32,
+      deep: true,
-						align: "center",
+      handler: function () {
-					},
+        console.log("LineChart: series changed!");
-					axisLine: {
+        this.init();
-						show: true,
+      },
-						lineStyle: {
+    },
-							// width: 1,
+  },
-							color: "#5982b2a0",
+  methods: {
-						},
+    updateXAxis() {
-					},
+      const hour = +new Date().getHours();
-					axisTick: {
+      return Array(24)
-						show: false,
+        .fill(1)
-					},
+        .map((_, index) => {
-					axisLabel: {
+          if (hour - index < 0) {
-						color: "#3C4E8Baa",
+            return 24 + hour - index + ":00";
-						fontSize: 18,
+          }
-						lineHeight: 0,
+          return hour - index + ":00";
-					},
+        })
-					splitLine: {
+        .reverse();
-						lineStyle: {
+    },
-							color: "#5982b2a0",
+    init() {
-						},
+      if (!this.chart)
-					},
+        this.chart = echarts.init(document.getElementById(this.id));
-				},
+      this.chart.setOption({
-				color: this.colors,
+        grid: {
-				series: Array(this.legend.length)
+          top: adjust(32),
-					.fill(1)
+          left: adjust(32),
-					.map((_, index) => {
+          bottom: adjust(24),
-						let lgd = this.legend[index];
+          right: adjust(12),
-						// console.log("series: ", lgd, index, this.series[lgd]);
+        },
-						return {
+        xAxis: {
-							name: lgd,
+          data: this.updateXAxis(),
-							type: "line",
+          axisLine: {
-							symbol: "circle",
+            lineStyle: {
-							symbolSize: adjust(2),
+              color: "#5982b2a0",
-							lineStyle: {
+            },
-								width: adjust(1),
+          },
-							},
+          axisTick: {
-							areaStyle: {
+            show: false,
-								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          },
-									{ offset: 0, color: this.colors[index] + "33" },
+          axisLabel: {
-									{ offset: 1, color: "transparent" },
+            color: "#fff9",
-								]),
+            fontSize: adjust(8),
-							},
+            lineHeight: adjust(1),
-							data: this.series[lgd],
+            margin: adjust(8),
-						};
+            rotate: 30,
-					}),
+          },
-			});
+        },
-		},
+        yAxis: {
-	},
+          type: "value",
+          name: this.unit,
+          nameTextStyle: {
+            color: "#fff9",
+            fontSize: adjust(9),
+            align: "",
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              // width: 1,
+              color: "#5982b2a0",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            color: "#fff9",
+            fontSize: adjust(8),
+            lineHeight: adjust(1),
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#5982b2a0",
+            },
+          },
+          // data: [100, 200, 300, 400, 500],
+        },
+        color: this.colors,
+        // series: Array(5)
+        // 	.fill(1)
+        // 	.map((_, index) => ({
+        // 		name: Math.random(),
+        // 		type: "line",
+        // 		symbol: "circle",
+        // 		symbolSize: adjust(3),
+        // 		lineStyle: {
+        // 			width: adjust(1),
+        // 		},
+        // 		areaStyle: {
+        // 			color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        // 				{ offset: 0, color: this.colors[index] + "33" },
+        // 				{ offset: 1, color: "transparent" },
+        // 			]),
+        // 		},
+        // 		data: Array(31)
+        // 			.fill(1)
+        // 			.map(() => {
+        // 				let v = Math.floor(Math.random() * 5000);
+        // 				while (v < 3000) v = Math.floor(Math.random() * 5000);
+        // 				return v;
+        // 			}),
+        // 	})),
+        series: Array(this.legend.length)
+          .fill(1)
+          .map((_, index) => {
+            let lgd = this.legend[index];
+            // console.log("series: ", lgd, index, this.series[lgd]);
+            return {
+              name: lgd,
+              type: "line",
+              symbol: "circle",
+              symbolSize: adjust(3),
+              lineStyle: {
+                width: adjust(1),
+              },
+              areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: this.colors[index] + "33" },
+                  { offset: 1, color: "transparent" },
+                ]),
+              },
+              data: this.series[lgd],
+            };
+          }),
+      });
+    },
+  },
 };
 </script>
 
@@ -276,116 +252,119 @@ export default {
 @import "../../assets/styles/functions";
 
 ::-webkit-scrollbar {
-	height: adjust(2px);
+  // display: none;
+  height: adjust(2px);
 }
 
 ::-webkit-scrollbar-thumb {
-	height: adjust(2px);
+  height: adjust(2px);
-	border-radius: adjust(2px);
+  border-radius: adjust(2px);
-	background: #ccc3;
+  background: #ccc3;
 }
 
-.line-chart__wrapper {
+// ::-webkit-scrollbar-track {
-	position: relative;
+// height: adjust(1px);
-	background: #3564ff0f;
+// background: blue;
-	border-radius: 12px;
+// }
-	backdrop-filter: 2px;
-	box-shadow: inset 0 0 12px 4px rgba($color: #fff, $alpha: 0.1);
-	height: 96%;
-	width: 1px;
-}
-
-.line-chart__custom-legend {
-	position: absolute;
-	top: -42px;
-	right: 18px;
-	font-family: Ubuntu, sans-serif;
-	font-size: 28px;
-	line-height: 1;
-	padding: 0;
-	color: #3b4d87;
-	// width: 75%;
-	width: 55%;
-	align-items: flex-end;
-	justify-content: flex-end;
-}
 
 ul,
 li {
-	margin: 0;
+  margin: 0;
-	padding: 0;
+  padding: 0;
-	list-style: none;
+  list-style: none;
-	min-width: 20px;
+  min-width: adjust(20px);
 }
 
 ul {
-	// background: #0005;
+  // padding: 0 adjust(8px);
-	width: 100%;
+  display: flex;
-	height: 32px;
+  flex-wrap: wrap;
-	line-height: 32px;
+  justify-content: flex-end;
-	white-space: pre-wrap;
+  align-items: center;
-	padding-bottom: 0;
+  height: adjust(28px);
-	padding-left: 12px;
+  // background: #eeec;
-	display: grid;
+  // overflow-x: hidden;
-	grid-template-columns: repeat(5, 1fr);
+  white-space: pre-wrap;
-	column-gap: 12px;
+  padding-bottom: adjust(2px);
-	// column-span: none;
-	justify-items: end;
-	align-items: end;
 }
 
 li {
-	padding-left: 12px;
+  text-align: right;
-	position: relative;
+  position: relative;
-	// background: #f003;
+  min-width: 40px;
-	user-select: none;
+  margin-right: adjust(9px);
+  padding: 0 adjust(2px);
+}
+
+li:not(:last-child) {
+  // margin-right: adjust(16px);
+}
+
+.line-chart__custom-legend {
+  position: absolute;
+  top: adjust(-32px);
+  right: 0;
+  font-size: adjust(9px);
+  font-family: Ubuntu, sans-serif;
+  padding: 0;
+  // max-width: 100%;
+  width: 65%;
+  align-items: flex-start;
+  justify-content: flex-end;
 }
 
 li::before {
-	content: "";
+  content: "";
-	position: absolute;
+  position: absolute;
-	top: 4px;
+  top: adjust(2px);
-	left: -20px;
+  left: adjust(-8px);
-	width: 24px;
+  width: adjust(8px);
-	height: 24px;
+  height: adjust(8px);
-	border-radius: 4px;
+  border-radius: adjust(1px);
-	background: #eee6;
+  background: #eee6;
 }
 
 li:nth-child(1)::before {
-	background: #18c7f3;
+  background: #18c7f3;
 }
 li:nth-child(2)::before {
-	background: #ffd160;
+  background: #ffd160;
 }
 li:nth-child(3)::before {
-	background: #f31868;
+  background: #f31868;
 }
 li:nth-child(4)::before {
-	background: #30e89a;
+  background: #30e89a;
 }
 li:nth-child(5)::before {
-	background: #2760ff;
+  background: #2760ff;
 }
 li:nth-child(6)::before {
-	background: #7138ff;
+  background: #7138FF;
 }
 li:nth-child(7)::before {
-	background: #f318d8;
+  background: #F318D8;
 }
 li:nth-child(8)::before {
-	background: #c0f318;
+  background: #C0F318;
 }
 li:nth-child(9)::before {
-	background: #f77;
+  background: #f77;
 }
 li:nth-child(10)::before {
-	background: #19f;
+  background: #19f;
 }
 li:nth-child(11)::before {
-	background: #98f;
+  background: #98f;
 }
-li:nth-child(12)::before {
+
-	background: #38f;
+.line-chart__wrapper {
+  position: relative;
+  background: #7771;
+  border-radius: adjust(3px);
+  backdrop-filter: blur(adjust(2px));
+  box-shadow: inset 0 0 adjust(10px) adjust(2px) rgba($color: #fff, $alpha: 0.1);
+  height: 100%;
+  width: adjust(1px);
 }
 </style>

src/components/common/SmallBox2.vue

@@ -56,41 +56,39 @@ export default {
 @import "../../assets/styles/functions";
 
 .small-box-2 {
-	flex-shrink: 0;
+	padding: adjust(14px);
-	padding: 0;
+	// border: 1px solid gray;
+	// box-shadow: inset 0 0 15px rgba($color: #fff, $alpha: 0.285);
+	box-shadow: inset 0 0 30px rgba($color: #fff, $alpha: 0.285);
+	border-radius: adjust(6px);
 	user-select: none;
-	width: 744px;
+	// width: adjust(w(465px));
-	height: 366px;
+	// height: adjust(h(200px));
+	width: adjust(w(528px));
+	height: adjust(h(240px));
 	display: flex;
-	background: url(../../assets/top-middle.png) no-repeat;
-	background-size: 100% 100%;
-	background-position: bottom;
 
 	.icon {
-		margin-top: 48px;
+		width: adjust(h(128px));
-		margin-left: 48px;
+		height: adjust(h(128px));
-		width: 172px;
-		height: 172px;
 	}
 
 	.info {
-		margin-top: 56px;
-		flex: 1 auto;
 		font-family: "微软雅黑", sans-serif;
-		padding-left: 12px;
+
 		h2 {
-			font-size: 54px;
+			font-size: adjust(16px);
-			line-height: 48px;
 			opacity: 0.7;
-			letter-spacing: 2px;
+			// line-height: adjust(12px);
+			letter-spacing: adjust(1px);
 			font-weight: 400;
-			color: hsla(0, 0%, 0%, 0.9);
+			color: hsla(0, 0%, 100%, 0.9);
 		}
 
 		.value {
-			color: #030609;
+			color: #fff;
-			font-size: 96px;
+			font-size: adjust(30px);
-			line-height: 98px;
+			line-height: adjust(29px);
 		}
 	}
 }

src/components/groups/data.vue

@@ -1,71 +0,0 @@
-<template>
-	<section class="data-group">
-		<OilFlow />
-		<GasFlow />
-		<TopTemp />
-		<BottomTemp />
-		<XicaoTemp />
-		<FanRuntime />
-	</section>
-</template>
-
-<script>
-import OilFlow from "../boxes/OilFlow.vue";
-import GasFlow from "../boxes/GasFlow.vue";
-import TopTemp from "../boxes/TopTemp.vue";
-import BottomTemp from "../boxes/BottomTemp.vue";
-import FanRuntime from "../boxes/FanRuntime.vue";
-import XicaoTemp from '../boxes/XicaoTemp.vue';
-// import { mapState } from "vuex";
-
-export default {
-	name: "DataGroup",
-	props: {},
-	components: {
-		FanRuntime,
-		OilFlow,
-		GasFlow,
-		TopTemp,
-		BottomTemp,
-		XicaoTemp
-	},
-	data() {
-		return {};
-	},
-	computed: {
-		// ...mapState(["kilnWaterIn", "waterInTemp"]),
-	},
-};
-</script>
-
-<style scoped lang="scss">
-@import "../../assets/styles/functions";
-
-section {
-	// background: url('../../assets/middle-under.png') left 110px top 4px / 380px 22px no-repeat;
-	// background: rgba(124, 63, 238, 0.722);
-	width: 100%;
-	position: absolute;
-  bottom: 0;
-  left: 0;
-	display: flex;
-	justify-content: space-around;
-	align-items: flex-end;
-  padding: 24px;
-}
-
-// section::before {
-// 	// content: "数据组";
-// 	content: "";
-// 	font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC,
-// 		Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei,
-// 		"微软雅黑", Arial, Helvetica, sans-serif;
-// 	font-size: adjust(h(64px));
-// 	font-weight: 400;
-// 	letter-spacing: 1px;
-// 	position: absolute;
-// 	color: $main-color;
-// 	top: 0;
-// 	left: 0;
-// }
-</style>

src/components/groups/environ.vue

@@ -1,59 +0,0 @@
-<template>
-	<section class="environ-analysis"></section>
-</template>
-
-<script>
-// import { mapState } from "vuex";
-
-export default {
-	name: "EnviroAnalysis",
-	props: {},
-	components: {},
-	data() {
-		return {};
-	},
-	computed: {
-		// ...mapState(["kilnWaterIn", "waterInTemp"]),
-	},
-};
-</script>
-
-<style scoped lang="scss">
-@import "../../assets/styles/functions";
-
-section {
-	width: 1920px;
-	height: 1080px;
-	position: absolute;
-	top: 490px;
-	right: 0;
-  background: #ccc3;
-}
-
-section::before {
-	content: "环境浓度";
-	font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC,
-		Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei,
-		"微软雅黑", Arial, Helvetica, sans-serif;
-	font-size: 80px;
-	font-weight: 400;
-	letter-spacing: 2px;
-	position: absolute;
-	color: $main-color;
-	top: -128px;
-	left: 0;
-}
-
-section::after {
-	content: "";
-	display: inline-block;
-	width: 100%;
-	height: 100%;
-	background: url("../../assets/fault-analysis.png") left 360px top 18px / 90%
-		no-repeat;
-	position: absolute;
-	color: $main-color;
-	top: -128px;
-	left: 0;
-}
-</style>

src/components/groups/fault.vue

@@ -1,60 +0,0 @@
-<template>
-	<section class="fault-analysis"></section>
-</template>
-
-<script>
-// import { mapState } from "vuex";
-
-export default {
-	name: "FaultAnalysis",
-	props: {},
-	components: {},
-	data() {
-		return {};
-	},
-	computed: {
-		// ...mapState(["kilnWaterIn", "waterInTemp"]),
-	},
-};
-</script>
-
-<style scoped lang="scss">
-@import "../../assets/styles/functions";
-
-section {
-	width: 1920px;
-	height: 1080px;
-	position: absolute;
-	// top: 452px;
-	top: 490px;
-	left: 0;
-  background: #ccc3;
-}
-
-section::before {
-	content: "缺陷分析";
-	font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC,
-		Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei,
-		"微软雅黑", Arial, Helvetica, sans-serif;
-	font-size: 80px;
-	font-weight: 400;
-	letter-spacing: 1px;
-	color: $main-color;
-	position: absolute;
-	top: -128px;
-	left: 0;
-}
-
-section::after {
-	content: "";
-  display: inline-block;
-  width: 110%;
-  height: 100%;
-	position: absolute;
-	top: -128px;
-	left: 0;
-	background: url("../../assets/fault-analysis.png") no-repeat;
-  background-position: 356px 20px;
-  background-size: 78%;
-}
-</style>

src/components/groups/monitor.vue

@@ -1,47 +0,0 @@
-<template>
-  <section class="monitor-group">
-
-  </section>
-</template>
-
-<script>
-// import { mapState } from "vuex";
-
-export default {
-  name: "MonitorGroup",
-  props: {},
-  components: {},
-  data() {
-    return {};
-  },
-  computed: {
-    // ...mapState(["kilnWaterIn", "waterInTemp"]),
-  },
-};
-</script>
-
-<style scoped lang="scss">
-@import "../../assets/styles/functions";
-
-section {
-  // background: url('../../assets/monitor-group.png') left 144px top 4px / 1152px 80% no-repeat, #ccc7;
-  width: adjust(w(3570px));
-  height: adjust(h(3790px));
-  position: absolute;
-  top: adjust(h(430px));
-  left: adjust(w(80px));
-}
-
-section::before {
-  // content: '监控组 1';
-  content: '';
-  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, "微软雅黑", Arial, Helvetica, sans-serif;
-  font-size: adjust(h(64px));
-  font-weight: 400;
-  letter-spacing: 1px;
-  position: absolute;
-  color: $main-color;
-  top: 0;
-  left: 0;
-}
-</style>

src/components/groups/monitor2.vue

@@ -1,50 +0,0 @@
-<template>
-  <section class="monitor-group-2">
-
-  </section>
-</template>
-
-<script>
-// import { mapState } from "vuex";
-
-export default {
-  name: "MonitorGroup-2",
-  props: {},
-  components: {},
-  data() {
-    return {};
-  },
-  computed: {
-    // ...mapState(["kilnWaterIn", "waterInTemp"]),
-  },
-};
-</script>
-
-<style scoped lang="scss">
-@import "../../assets/styles/functions";
-
-section {
-  // background: rgba(47, 203, 255, 0.225);
-  width: 100%;
-  // height: 1178px;
-  height: 1469px;
-  position: absolute;
-  // bottom: 690px;
-  // top: 2160px;
-  top: 1570px;
-  left: 0;
-}
-
-// section::before {
-//   // content: '监控组 2';
-//   content: '';
-//   font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, "微软雅黑", Arial, Helvetica, sans-serif;
-//   font-size: adjust(h(64px));
-//   font-weight: 400;
-//   letter-spacing: 1px;
-//   position: absolute;
-//   color: $main-color;
-//   top: 0;
-//   left: 0;
-// }
-</style>

src/components/groups/monitor3.vue

@@ -1,47 +0,0 @@
-<template>
-  <section class="monitor-group">
-
-  </section>
-</template>
-
-<script>
-// import { mapState } from "vuex";
-
-export default {
-  name: "MonitorGroup-3",
-  props: {},
-  components: {},
-  data() {
-    return {};
-  },
-  computed: {
-    // ...mapState(["kilnWaterIn", "waterInTemp"]),
-  },
-};
-</script>
-
-<style scoped lang="scss">
-@import "../../assets/styles/functions";
-
-section {
-  background: url('../../assets/monitor-group.png') left 144px top 4px / 1152px 80% no-repeat, #ccc7;
-  width: adjust(w(3570px));
-  height: adjust(h(3790px));
-  position: absolute;
-  top: adjust(h(430px));
-  // left: adjust(w(17264px));
-  left: adjust(w(17464px));
-}
-
-section::before {
-  content: '监控组 3';
-  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, "微软雅黑", Arial, Helvetica, sans-serif;
-  font-size: adjust(h(64px));
-  font-weight: 400;
-  letter-spacing: 1px;
-  position: absolute;
-  color: $main-color;
-  top: 0;
-  left: 0;
-}
-</style>

src/components/icons/clockSvg.vue

@@ -1,5 +1,7 @@
 <template>
 	<svg
+		:width="adjust('64px')"
+		:height="adjust('64px')"
 		viewBox="0 0 95 96"
 		version="1.1"
 		xmlns="http://www.w3.org/2000/svg"

src/components/icons/fireSvg.vue

@@ -1,6 +1,8 @@
 <template>
 	<svg
-		viewBox="0 0 96 96"
+		:width="adjust('64px')"
+		:height="adjust('64px')"
+		viewBox="0 0 94 96"
 		version="1.1"
 		xmlns="http://www.w3.org/2000/svg"
 		xmlns:xlink="http://www.w3.org/1999/xlink"

src/components/icons/sandSvg.vue

@@ -1,5 +1,7 @@
 <template>
 	<svg
+		:width="adjust('64px')"
+		:height="adjust('64px')"
 		viewBox="0 0 95 96"
 		version="1.1"
 		xmlns="http://www.w3.org/2000/svg"

src/components/icons/switchSvg.vue

@@ -1,5 +1,7 @@
 <template>
 	<svg
+		:width="adjust('64px')"
+		:height="adjust('64px')"
 		viewBox="0 0 122 122"
 		version="1.1"
 		xmlns="http://www.w3.org/2000/svg"

src/components/icons/tempSvg.vue

@@ -1,5 +1,7 @@
 <template>
 	<svg
+		:width="adjust('64px')"
+		:height="adjust('64px')"
 		viewBox="0 0 94 96"
 		version="1.1"
 		xmlns="http://www.w3.org/2000/svg"

src/components/isolate-area-1/Area.vue

@@ -1,31 +1,13 @@
 <template>
-	<DragabbleContainer class="isolate-area-1">
+  <DragabbleContainer class="isolate-area-1">
-		<div class="data pressure">
+    <SmallBox2
-			<span>压</span>
+      v-for="rd in rdata"
-			<span>力</span>
+      :key="rd.icon"
-			<span
+      :icon="rd.icon"
-				v-for="(press, index) in pressure"
+      :title="rd.title"
-				:key="index"
+      :value="rd.value"
-				:class="{ digit: true, dot: press == '.' ? true : false }"
+    ></SmallBox2>
-				>{{ press }}</span
+  </DragabbleContainer>
-			>
-			<span>Pa</span>
-		</div>
-		<SmallBox2
-			class="data-center"
-			v-for="rd in rdata"
-			:key="rd.icon"
-			:icon="rd.icon"
-			:title="rd.title"
-			:value="rd.value"
-		></SmallBox2>
-		<!-- <div class="data runtime">
-      <span>运</span>
-      <span>行</span>
-      <span v-for="val, index in runtime" :key="index" :class="{ 'digit': true, 'dot': press == '.' ? true : false }">{{ val }}</span>
-      <span>天</span>
-    </div> -->
-	</DragabbleContainer>
 </template>
 
 <script>
@@ -33,53 +15,67 @@ import DragabbleContainer from "../layout/DragableContainer.vue";
 import SmallBox2 from "../common/SmallBox2.vue";
 import { mapState } from "vuex";
 
-let timeFun = null;
+let timeFun = null
 
 export default {
-	name: "IsolateArea--1",
+  name: "IsolateArea--1",
-	components: { DragabbleContainer, SmallBox2 },
+  components: { DragabbleContainer, SmallBox2 },
-	data() {
+  data() {
-		return {
+    return {
-			pressure: "10.1".split(""),
+      rdata: [
-			runtime: "0012".split(""),
+        // { icon: "temp", title: "车间温度", value: "27℃" },
-			rdata: [
+        { icon: "fire", title: "当前火向", value: "" },
-				// { icon: "temp", title: "车间温度", value: "27℃" },
+        { icon: "clock", title: "换火时间", value: "20分" },
-				{ icon: "fire", title: "当前火向", value: "" },
+        { icon: "sand", title: "剩余时间", value: "0" },
-				{ icon: "clock", title: "换火时间", value: "20分" },
+      ],
-				{ icon: "sand", title: "剩余时间", value: "19分20秒" },
+    };
-			],
+  },
-		};
+  watch: {
-	},
+    fireDirection: function(val) {
-	watch: {
+      this.$set(this.rdata[0], 'value', val)
-		fireDirection: function (val) {
+    },
-			this.$set(this.rdata[0], "value", val);
+    fireChangeTime: function(val) {
-		},
+      this.$set(this.rdata[1], 'value', val)
-		fireChangeTime: function (val) {
+    },
-			this.$set(this.rdata[1], "value", val);
+    lastFireChangeTime: function(val) {
-		},
+      let [_, min, sec] = /(\d+)分(\d+)秒/.exec(val || '0分0秒')
-		lastFireChangeTime: function (val) {
+      if (timeFun) clearInterval(timeFun)
-			let [_, min, sec] = /(\d+)分(\d+)秒/.exec(val || "0分0秒");
+      timeFun = setInterval(() => {
-			if (timeFun) clearInterval(timeFun);
+        if (sec > 0) sec -= 1
-			timeFun = setInterval(() => {
+        else {
-				if (sec > 0) sec -= 1;
+          if (min > 0) {
-				else {
+            sec = 59
-					if (min > 0) {
+            min -= 1
-						sec = 59;
+          } else {
-						min -= 1;
+            if (timeFun) clearInterval(timeFun)
-					} else {
+          }
-						if (timeFun) clearInterval(timeFun);
+        }
-					}
+        this.$set(this.rdata[2], 'value', `${min}分${sec}秒`)
-				}
+      }, 1000)
-				this.$set(this.rdata[2], "value", `${min}分${sec}秒`);
+    },
-			}, 1000);
+  },
-		},
+  computed: {
-		kilnPressure: function(val) {
+    ...mapState(["fireDirection", "lastFireChangeTime", "fireChangeTime"]),
-			this.pressure = val.split("")
+    // rdata() {
-		}
+    //   let [_, min, sec] = /(\d+)分(\d+)秒/.exec(this.lastFireChangeTime)
-	},
+    //   min = +min 
-	computed: {
+    //   sec = +sec 
-		...mapState(["fireDirection", "lastFireChangeTime", "fireChangeTime", "kilnPressure"]),
+    //   let interTime = `${min}分${sec}秒`
-	},
+    //   let timer = setInterval(() => {
+    //     if (sec) sec -= 1
+    //     else {
+    //       sec = 59
+    //       min -= 1
+    //     }
+    //   }, 1000);
+    //   return [
+    //     // { icon: "temp", title: "车间温度", value: "27℃" },
+    //     { icon: "fire", title: "当前火向", value: this.fireDirection },
+    //     { icon: "clock", title: "换火时间", value: this.fireChangeTime },
+    //     { icon: "sand", title: "剩余时间", value: interTime },
+    //   ];
+    // },
+  },
 };
 </script>
 
@@ -87,44 +83,12 @@ export default {
 @import "../../assets/styles/functions";
 
 .isolate-area-1 {
-	display: flex;
+  display: flex;
-	color: $main-color;
-	min-width: 300px;
-	align-items: flex-end;
 
-	> *:not(:last-child) {
+  > .small-box-2:not(:last-child) {
-		margin: {
+    margin: {
-			right: 128px;
+      right: adjust(15px);
-		}
+    }
-	}
+  }
-
-	> .data {
-		flex-shrink: 0;
-		font-family: zcoolqingkehuangyouti-Regular, sans-serif;
-		display: flex;
-		align-items: flex-end;
-	}
-
-	> .data > span:not(.dot) {
-		/** 边框 */
-		background: url("../../assets/digitbox1.png") no-repeat;
-		background-size: 100% 100%;
-		display: inline-block;
-		width: 228px;
-		height: 299px;
-		color: #0068ffaa;
-		font-size: 142px;
-		line-height: 328px;
-		text-align: center;
-		vertical-align: bottom;
-		user-select: none;
-	}
-
-	> .data > span.digit {
-		/** 数字字体大小 */
-		color: #0071ff;
-		font-size: 242px;
-		line-height: 286px;
-	}
 }
 </style>

src/components/isolate-area-1/Runtime.vue

@@ -1,78 +0,0 @@
-<template>
-	<div class="data runtime">
-		<span>运</span>
-		<span>行</span>
-		<span
-			v-for="(val, index) in runtime"
-			:key="index"
-			:class="{ digit: true, dot: val == '.' ? true : false }"
-			>{{ val }}</span
-		>
-		<span>天</span>
-	</div>
-</template>
-
-<script>
-export default {
-	name: "RuntimeComp",
-	props: {},
-	data() {
-		return {
-			runtime: "0012".split(""),
-		};
-	},
-	mounted() {
-		this.getRuntime();
-		setInterval(this.getRuntime, 1000 * 60 * 60);
-	},
-	methods: {
-		getRuntime() {
-			const diff = Date.now() - new Date("2023-5-7 8:00:00");
-			const days = parseInt(diff / 1000 / 60 / 60 / 24);
-			const hours = parseInt(
-				(diff - days * 24 * 60 * 60 * 1000) / 1000 / 60 / 60
-			);
-			console.log("days", days);
-			this.runtime = (days + "").padStart(4, "0");
-		},
-	},
-};
-</script>
-
-<style scoped lang="scss">
-@import "../../assets/styles/functions";
-
-.runtime {
-	width: 1920px;
-}
-
-.data {
-	padding: 0 32px;
-	font-family: zcoolqingkehuangyouti-Regular, sans-serif;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-}
-
-.data > span:not(.dot) {
-	/** 边框 */
-	background: url("../../assets/digitbox1.png") no-repeat;
-	background-size: 100% 100%;
-	display: inline-block;
-	width: 280px;
-	height: 360px;
-	color: #0068ffaa;
-	font-size: 160px;
-	line-height: 380px;
-	text-align: center;
-	vertical-align: bottom;
-	user-select: none;
-}
-
-.data > span.digit {
-	/** 数字字体大小 */
-	color: #0071ff;
-	font-size: 280px;
-	line-height: 350px;
-}
-</style>

src/components/layout/Container.vue

@@ -27,9 +27,9 @@ export default {
 			cls: {
 				// 'NumberOrDate': {},
 				NumberOrDate: "number-or-date",
-				Table: "tables",
+				Table: 'tables',
-				Charts: "charts",
+				Charts: 'charts',
-				NumberAndChart: "number-and-chart",
+				NumberAndChart: 'number-and-chart',
 			},
 		};
 	},
@@ -44,33 +44,39 @@ export default {
 @import "../../assets/styles/variables";
 
 .number-or-date {
-	display: inline-block;
+  display: inline-block;
-	// background: url(../../assets/box-number.png) 0 0 / 100% 100% no-repeat;
+  width: adjust(w(800px));
+  height: adjust(h(375px));
+  background: url(../../assets/box-number.png);
+  background-position: 0 0; /** top left */
+  background-size: 100% 100%;
 }
 
 .tables {
-	display: inline-block;
+  display: inline-block;
-	width: 1145px;
+  width: adjust(w(800px));
-	height: 618px;
+  height: adjust(h(528px));
-	background: url(../../assets/box-table.png);
+  background: url(../../assets/box-table.png);
-	background-position: 0 0;
+  background-position: 0 0; /** top left */
-	background-size: 100% 100%;
+  background-size: 100% 100%;
 }
 
 .charts {
-	display: inline-block;
+  display: inline-block;
-	height: 618px;
+  width: adjust(w(1580px));
-	width: 2452px;
+  height: adjust(h(520px));
-	// width: 2400px;
+  background: url(../../assets/box-chart.png);
-	background: url(../../assets/box-chart.png);
+  background-position: 0 0; /** top left */
-	background-position: 0 0;
+  background-size: 100% 100%;
-	background-size: 100% 100%;
 }
 
 .number-and-chart {
-	display: inline-block;
+  display: inline-block;
-	width: adjust(w(800px));
+  width: adjust(w(800px));
-	height: adjust(h(931px));
+  height: adjust(h(931px));
-	background: url(../../assets/box-right.png) 0 0 / 100% 100% no-repeat;
+  background: url(../../assets/box-right.png);
+  background-position: 0 0; /** top left */
+  background-size: 100% 100%;
 }
+
 </style>

src/components/layout/Header.vue

@@ -1,29 +1,27 @@
 <template>
-  <header class="header relative">
+  <header class="header">
     <div>
       <span class="header--logo">
         <!-- <img src="../../assets/logo.png" alt="logo"> -->
       </span>
-      <h1>凯盛晶华玻璃有限公司800t/d特种玻璃生产线大数据指挥中心</h1>
+      <h1>宜兴三期生产线大数据指挥中心</h1>
     </div>
-    <span class="header--wing absolute company">
+    <span class="header--wing absolute company"></span>
-      设计单位: 中建材智能自动化研究院
-    </span>
     <span class="header--wing absolute datetime">
-      {{ moment(today).format('YYYY.M.D dddd') }}&nbsp;{{ moment(today).format('HH:mm:ss') }}
+      {{ moment(today).format("YYYY.M.D dddd HH:mm:ss") }}
     </span>
   </header>
 </template>
 
 <script>
-import moment from 'moment'
+import moment from "moment";
 export default {
   name: "Header",
   data() {
     return {
       today: new Date(),
       time: "00:00:00",
-      moment
+      moment,
     };
   },
   computed: {
@@ -43,10 +41,10 @@ export default {
     },
   },
   mounted() {
-    moment.locale('zh-cn')
+    moment.locale("zh-cn");
     // this.time = this.getTime().join(":");
     setInterval(() => {
-      this.today = new Date()
+      this.today = new Date();
       // this.time = this.getTime().join(":");
     }, 1000);
   },
@@ -68,58 +66,65 @@ export default {
 @import "../../assets/styles/variables";
 
 header {
+  position: absolute;
   width: 100%;
-  height: 628px;
+  top: 0;
+  left: 0;
+  z-index: 10000;
   background: url(../../assets/header.png) no-repeat;
+  background-position: center;
+  background-size: contain;
+  // background-size: 100%;
+  height: 146px;
   display: grid;
-  place-items: center;
+  place-content: center;
 
-  >div {
+  > div {
-    margin-left: 378px;
-    margin-bottom: 72px;
     display: flex;
     align-items: center;
+    margin-bottom: 0;
 
     .header--logo {
-      width: 648px;
+      margin-top: 12px;
-      height: 337px;
+      width: 64px;
-      margin-right: 96px;
+      height: 94px;
       background: url(../../assets/logo.png) center/contain no-repeat;
     }
 
     h1 {
-      font-size: 220px;
+      margin-left: 36px;
-      line-height: 330px;
+      font-size: 72px;
-      margin: 0;
-      letter-spacing: 36px;
       user-select: none;
-      font-weight: 600;
+      letter-spacing: 14px;
+      font-weight: 400;
       color: $main-color;
-      font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, "微软雅黑", Arial, Helvetica, sans-serif;
+      font-family: "微软雅黑", sans-serif;
     }
   }
 }
 
 .header--wing {
-  top: 138px;
   left: 0;
-  line-height: 130px;
+  bottom: -20px;
-  font-size: 130px;
+  height: 72px;
-  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, "微软雅黑", Arial, Helvetica, sans-serif;
 }
 
 .company {
-  left: 240px;
+  margin-left: 1458px;
-  text-align: center;
+  width: 768px;
-  color: lighten($main-color, 8);
+  height: 67px;
+  background: url("../../assets/company.png") center/cover no-repeat;
 }
 
 .datetime {
-  left: unset;
-  right: 240px;
   color: $main-color;
+  font-size: 48px;
   text-align: center;
-  color: lighten($main-color, 8);
+  // display: inline-block;
-  font-size: 140px;
+  left: unset;
+  right: 1573px;
+  width: 646px;
+  height: 67px;
+  background: url("../../assets/date.png") center/cover no-repeat;
 }
 </style>

src/components/layout/Main.vue

@@ -1,23 +1,11 @@
 <template>
-	<main class="relative">
+	<main class="">
-		<!-- 缺陷分析 -->
-		<FaultAnalysis />
-
-		<!-- 环境浓度 -->
-		<Environ />
-
-		<!-- 监控组 2 -->
-		<MonitorGroup2 />
-
-		<!-- 数据组 -->
-		<DataGroup />
-
 		<div class="video-crash" v-if="false"></div>
 
 		<div class="eq-main absolute">
 			<div
 				class="arrow ar-top-left"
-				:class="bottomLeftArrowRolling === '运行' ? 'ar-running' : ''"
+				:class="topLeftArrowRolling === '运行' ? 'ar-running' : ''"
 			></div>
 			<div
 				class="arrow ar-top-right"
@@ -35,38 +23,33 @@
 			<div class="swd onekb">
 				<div class="swd-box">
 					<p>1#卡脖</p>
-					<p class="swd-value">{{ Number(onekb).toFixed(1) }}℃</p>
+					<p class="swd-value">{{Number(onekb).toFixed(1)}}℃</p>
 				</div>
 			</div>
 			<div class="swd onesp">
 				<div class="swd-box">
 					<p>1#搅拌</p>
-					<p class="swd-value">{{ Number(onesp).toFixed(1) }}℃</p>
+					<p class="swd-value">{{Number(onesp).toFixed(1)}}℃</p>
 				</div>
 			</div>
 			<div class="swd twokb">
 				<div class="swd-box">
 					<p>2#卡脖</p>
-					<p class="swd-value">{{ Number(twokb).toFixed(1) }}℃</p>
+					<p class="swd-value">{{Number(twokb).toFixed(1)}}℃</p>
 				</div>
 			</div>
 			<div class="swd twosp">
 				<div class="swd-box">
 					<p>2#搅拌</p>
-					<p class="swd-value">{{ Number(twosp).toFixed(1) }}℃</p>
+					<p class="swd-value">{{Number(twosp).toFixed(1)}}℃</p>
 				</div>
 			</div>
 
-			<div
+			<div class="video-bottom" v-show="fireDirection === '北火'" style="">
-				class="video-bottom--wrapper"
-				v-show="fireDirection === '北火'"
-				style=""
-			>
 				<video
-					class="video-bottom"
 					id="1"
 					preload="auto"
-					height=""
+					height="260"
 					muted
 					autoplay
 					loop
@@ -75,16 +58,12 @@
 				></video>
 			</div>
 
-			<div
+			<div class="video-top" v-show="fireDirection === '南火'" style="">
-				class="video-top--wrapper"
-				v-show="fireDirection === '南火'"
-				style=""
-			>
 				<video
 					id="2"
 					class="video-top"
 					preload="auto"
-					height=""
+					height="260"
 					muted
 					autoplay
 					loop
@@ -95,21 +74,53 @@
 		</div>
 
 		<AreaOne class="area-one" />
-		<Runtime class="runtime" />
+
-		<InWater />
+		<div class="absolute left kiln-runtime">
-		<OutWater />
+			<KilnRuntime />
+		</div>
+		<div class="absolute left kiln-pressure">
+			<KilnPressure />
+		</div>
+		<div class="absolute left fan-runtime">
+			<FanRuntime />
+		</div>
+		<div class="absolute left oil-flow">
+			<OilFlow />
+		</div>
+		<div class="absolute left gas-flow">
+			<GasFlow />
+		</div>
+		<div class="absolute left top-temp">
+			<TopTemp />
+		</div>
+		<div class="absolute left bottom-temp">
+			<BottomTemp />
+		</div>
+		<div class="absolute left ou-temp">
+			<XicaoTemp />
+		</div>
+		<div class="absolute in-water">
+			<InWater />
+		</div>
+		<div class="absolute out-water">
+			<OutWater />
+		</div>
 	</main>
 </template>
 
 <script>
+import KilnRuntime from "../boxes/KilnRuntime.vue";
+import KilnPressure from "../boxes/KilnPressure.vue";
+import OilFlow from "../boxes/OilFlow.vue";
+import GasFlow from "../boxes/GasFlow.vue";
+import TopTemp from "../boxes/TopTemp.vue";
+import BottomTemp from "../boxes/BottomTemp.vue";
+import XicaoTemp from "../boxes/XicaoTemp.vue";
 import InWater from "../boxes/InWater.vue";
 import OutWater from "../boxes/OutWater.vue";
+import FanRuntime from "../boxes/FanRuntime.vue";
 import AreaOne from "../isolate-area-1/Area.vue";
-import Runtime from "../isolate-area-1/Runtime.vue";
+// import Container from './Container.vue'
-import MonitorGroup2 from "../groups/monitor2.vue";
-import DataGroup from "../groups/data.vue";
-import FaultAnalysis from "../groups/fault.vue";
-import Environ from "../groups/environ.vue";
 import { mapMutations, mapState } from "vuex";
 
 import WsClient from "../../utils/wsClass";
@@ -117,12 +128,15 @@ import WsClient from "../../utils/wsClass";
 export default {
 	name: "Main",
 	components: {
-		Runtime,
-		DataGroup,
-		MonitorGroup2,
-		Environ,
-		FaultAnalysis,
 		AreaOne,
+		KilnRuntime,
+		KilnPressure,
+		FanRuntime,
+		OilFlow,
+		GasFlow,
+		TopTemp,
+		BottomTemp,
+		XicaoTemp,
 		InWater,
 		OutWater,
 	},
@@ -140,7 +154,7 @@ export default {
 		"onekb",
 		"twokb",
 		"onesp",
-		"twosp",
+		"twosp"
 	]),
 	mounted() {
 		const wsc = new WsClient(this);
@@ -160,25 +174,19 @@ export default {
 main {
 	height: 1px;
 	flex: 1;
-	// background: #f2e2;
+	// background: #eee2;
 }
 
 .area-one {
 	position: absolute;
-	top: 124px;
+	top: adjust(160px);
-	left: 3910px;
+	left: adjust(1588px);
-}
-
-.runtime {
-	position: absolute;
-	top: 0;
-	right: 0;
 }
 
 .video-crash {
-	height: 640px;
+	height: adjust(h(424px));
-	background: #fcc2;
+	width: adjust(w(800px));
-	// background: url(../../assets/tv.png) no-repeat;
+	background: url(../../assets/tv.png) no-repeat;
 	background-size: 100%;
 	display: inline-block;
 	position: absolute;
@@ -188,123 +196,141 @@ main {
 
 .video-bottom {
 	position: absolute;
-	bottom: 400px;
+	bottom: adjust(200.5px);
-	left: 268px;
+	left: adjust(48px);
-	transform: scale(1.25, 1.15);
+	transform: scale(0.9);
 }
 
 .video-top {
 	position: absolute;
-	top: 250px;
+	top: adjust(35px);
-	left: 320px;
+	left: adjust(38px);
-	transform: scale(1.25);
+	transform: scale(0.95, 0.9);
 }
 
 .arrow {
+	width: adjust(20px);
+	height: adjust(20px);
 	display: inline-block;
-	width: 64px;
-	height: 64px;
-	border-radius: 100%;
 	position: absolute;
 	background: #ff5757;
+	border-radius: adjust(10px);
 }
 
 .arrow.ar-running {
 	background: #1bff3a;
 }
 
+// .ar-top-left.arrow,
+// .ar-top-right.arrow {
+// 	animation: none;
+// 	background: url(../../assets/arrow-disabled.png) 100% 100% / contain no-repeat;
+// }
+// .ar-bottom-left.arrow,
+// .ar-bottom-right.arrow {
+// 	animation: none;
+// 	background: url(../../assets/arrow-r-disabled.png) 100% 100% / contain
+// 		no-repeat;
+// }
+// .ar-top-left.arrow.ar-running,
+// .ar-top-right.arrow.ar-running {
+// 	background: url(../../assets/arrow.png) 100% 100% / contain no-repeat;
+// 	animation: clock-direction 1.15s linear infinite forwards;
+// }
+// .ar-bottom-left.arrow.ar-running,
+// .ar-bottom-right.arrow.ar-running {
+// 	background: url(../../assets/arrow-r.png) 100% 100% / contain no-repeat;
+// 	animation: reverse-clock-direction 1.15s linear infinite forwards;
+// }
+
 .ar-top-right {
-	top: 190px;
+	top: 145px;
-	left: 110px;
+	left: 65px;
 }
-
 .ar-top-left {
-	top: 200px;
+	top: 175px;
-	left: 1480px;
+	left: 985px;
 }
-
 .ar-bottom-left {
-	top: 700px;
+	top: 445px;
-	left: 1430px;
+	left: 960px;
+}
+.ar-bottom-right {
+	top: 460px;
+	left: 20px;
 }
 
-.ar-bottom-right {
+// @keyframes clock-direction {
-	top: 720px;
+// 	0% {
-	left: 40px;
+// 		transform: rotate(0deg);
-}
+// 	}
+// 	100% {
+// 		transform: rotate(360deg);
+// 	}
+// }
+// @keyframes reverse-clock-direction {
+// 	0% {
+// 		transform: rotate(0deg);
+// 	}
+// 	100% {
+// 		transform: rotate(-360deg);
+// 	}
+// }
 
 .swd {
-	// background-size: 100% 10px;
+	background-size: 100%;
-	width: 350px;
+	width: adjust(w(276px));
-	height: 202px;
+	height: adjust(h(156px));
 	position: absolute;
 	transform: rotateY(180deg);
-
 	p {
 		margin: 0;
-		color: #000;
+		margin-top: adjust(12px);
-		margin-top: 16px;
 	}
-
 	.swd-box {
-		margin-left: 54px;
+		margin-left: adjust(21px);
-		margin-top: 44px;
+		font-size: adjust(15px);
-		font-size: 30px;
-		letter-spacing: 2px;
-		color: #000;
-		font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC,
-			Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei,
-			"微软雅黑", Arial, Helvetica, sans-serif;
-
 		.swd-value {
-			color: #ff2020;
+			color: #00f4ff;
-			margin-top: 12px;
+			margin-top: adjust(6px);
-			font-size: 64px;
+			font-size: adjust(26px);
-			overflow: hidden;
+			overflow: hidden;  /*超出部分隐藏*/
-			white-space: nowrap;
+    		white-space: nowrap;  /*禁止换行*/
-			text-overflow: ellipsis;
+    		text-overflow: ellipsis; /*省略号*/
-			font-weight: 700;
 		}
 	}
 }
 
-.onekb,
+.onekb, .onesp{
-.onesp {
+	background: url(../../assets/tem-bottom.png) no-repeat;
-	background: url(../../assets/tem-bottom.png) top 0 left 0 / 100% no-repeat;
 }
-
 .onekb {
-	top: 760px;
+	top: adjust(300px);
-	left: 1560px;
+	left: adjust(350px)
 }
-
 .onesp {
-	top: 860px;
+	top: adjust(270px);
-	left: 1100px;
+	left: adjust(520px)
 }
-
+.twokb, .twosp{
-.twokb,
+	background: url(../../assets/tem-top.png) no-repeat;
-.twosp {
-	background: url(../../assets/tem-top.png) top 0 left 0 / 100% no-repeat;
 }
-
 .twokb {
-	top: 72px;
+	top: adjust(-20px);
-	left: 1580px;
+	left: adjust(370px)
 }
-
 .twosp {
-	top: -32px;
+	top: adjust(10px);
-	left: 1080px;
+	left: adjust(540px)
 }
 
 .eq-main {
-	width: 9162px;
+	width: adjust(w(7150px));
-	height: 1178px;
+	height: adjust(h(960px));
 	background: url(../../assets/eq.png) no-repeat;
 	background-size: 100%;
-	top: 256px;
+	top: adjust(170px);
-	left: 2172px;
+	left: adjust(380px);
 	position: relative;
 	transform: rotateY(0.5turn);
 }
@@ -312,54 +338,118 @@ main {
 .eq-main::before {
 	content: "";
 	position: absolute;
+	//   right: adjust(1200px);
 	opacity: 0;
-	top: 56px;
+	top: adjust(105px);
-	width: 72px;
+	width: adjust(150px);
-	height: 72px;
+	height: adjust(150px);
 	background: url(../../assets/mirror.png) no-repeat;
 	background-size: 100% 100%;
-	// animation: 10s linear 0.3s infinite mirror-to-left-2;
+	animation: 10s linear 0.3s infinite mirror-to-left-2;
 }
 
 .eq-main::after {
 	content: "";
 	position: absolute;
+	//   right: adjust(1200px);
 	opacity: 0;
-	top: 56px;
+	top: adjust(105px);
-	width: 72px;
+	// top: adjust(125px);
-	height: 72px;
+	width: adjust(150px);
+	height: adjust(150px);
 	background: url(../../assets/mirror.png) no-repeat;
 	background-size: 100% 100%;
-	// animation: 10s linear 5s infinite mirror-to-left;
+	animation: 10s linear 5s infinite mirror-to-left;
 }
 
 @keyframes mirror-to-left {
 	0% {
-		right: 700px;
+		right: adjust(1200px);
 		opacity: 1;
 	}
-
 	90% {
 		opacity: 1;
 	}
-
 	100% {
-		right: 32px;
+		right: adjust(60px);
 	}
 }
 
 @keyframes mirror-to-left-2 {
 	0% {
-		right: 700px;
+		right: adjust(1200px);
 		opacity: 1;
 	}
-
 	90% {
 		opacity: 1;
 	}
-
 	100% {
-		right: 32px;
+		right: adjust(60px);
 	}
 }
+
+.kiln-runtime {
+	top: adjust(h(200px));
+	// left: adjust(w(60px));
+	left: adjust(w(8110px));
+}
+
+.kiln-pressure {
+	top: adjust(h(610px));
+	// left: adjust(w(60px));
+	left: adjust(w(8110px));
+}
+
+.fan-runtime {
+	top: adjust(h(1020px));
+	// left: adjust(w(60px));
+	left: adjust(w(8110px));
+}
+
+.oil-flow {
+	top: adjust(h(1588px));
+	// left: adjust(w(60px));
+	// left: adjust(w(460px));
+	left: adjust(w(880px));
+}
+
+.gas-flow {
+	top: adjust(h(1588px));
+	// left: adjust(w(1660px));
+	left: adjust(w(2500px));
+}
+
+.top-temp {
+	top: adjust(h(1588px));
+	// left: adjust(w(3260px));
+	left: adjust(w(4110px));
+}
+
+.bottom-temp {
+	top: adjust(h(1588px));
+	// left: adjust(w(4860px));
+	left: adjust(w(5720px));
+}
+
+.ou-temp {
+	top: adjust(h(1588px));
+	left: adjust(w(7330px));
+	// left: adjust(w(6460px));
+}
+
+.in-water {
+	top: adjust(h(200px));
+	left: adjust(w(40px));
+	// left: adjust(w(8096px));
+	// //   left: w(5096px);
+	z-index: 100;
+}
+
+.out-water {
+	top: adjust(h(1177px));
+	left: adjust(w(40px));
+	// left: adjust(w(8096px));
+	//   left: w(5096px);
+	z-index: 100;
+}
 </style>

src/components/layout/SubContainer.vue

@@ -3,7 +3,7 @@
 	<div class="sub-container" :style="{ padding }">
 		<div class="title">
 			<span class="icon" :class="iconClass[icon]"></span>
-			<span class="title_text">{{ title }}</span>
+			<span>{{ title }}</span>
 		</div>
 		<div class="content">
 			<slot />
@@ -25,7 +25,7 @@ export default {
 		},
 		padding: {
 			type: String,
-			default: "20px",
+			default: "10px",
 		},
 	},
 	data() {
@@ -37,9 +37,9 @@ export default {
 				gas: "icon-gas",
 				xicao: "icon-xc",
 				inWater: "icon-water-in",
-				fan: "icon-fan",
+				fan: 'icon-fan',
-				ktop: "icon-kiln-top",
+				ktop: 'icon-kiln-top',
-				kbtm: "icon-kiln-bottom",
+				kbtm: 'icon-kiln-bottom',
 			},
 		};
 	},
@@ -56,9 +56,9 @@ export default {
 }
 
 .icon {
-	height: 64px;
+	height: adjust(17px);
-	width: 60px;
+	width: adjust(17px);
-	margin-right: 0;
+	margin-right: adjust(8px);
 }
 
 .icon-clock {
@@ -72,65 +72,49 @@ export default {
 }
 
 .icon-oil {
-	background: url(../../assets/oil.png) top 0 left 0 / 90% 75% no-repeat;
+	background: url(../../assets/oil.png);
-	margin-right: 6px;
+	background-size: 100% 100%;
 }
-
 .icon-gas {
-	background: url(../../assets/gas-icon.png) top 0 left 0 / 90% 75% no-repeat;
+	background: url(../../assets/gas-icon.png);
-	margin-right: 6px;
+	background-size: 100% 100%;
 }
-
 .icon-xc {
-	background: url(../../assets/xicao-icon.png) top 0 left 0 / 90% 75% no-repeat;
+	background: url(../../assets/xicao-icon.png);
-	margin-right: 6px;
+	background-size: 100% 100%;
 }
-
 .icon-fan {
-	background: url(../../assets/fan-icon.png) top 0 left 0 / 90% 75% no-repeat;
+	background: url(../../assets/fan-icon.png);
-	margin-right: 6px;
+	background-size: 100% 100%;
 }
-
 .icon-kiln-top {
-	background: url(../../assets/kiln-top-icon.png) top 0 left 0 / 90% 75%
+	background: url(../../assets/kiln-top-icon.png);
-		no-repeat;
+	background-size: 100% 100%;
-	margin-right: 6px;
 }
-
 .icon-kiln-bottom {
-	background: url(../../assets/kiln-bottom-icon.png) top 0 left 0 / 90% 75%
+	background: url(../../assets/kiln-bottom-icon.png);
-		no-repeat;
+	background-size: 100% 100%;
-	margin-right: 6px;
 }
 
 .icon-water-in {
-	background: url(../../assets/water-temp.png) top 24% left 0 / 80% 75%
+	background: url(../../assets/water-temp.png);
-		no-repeat;
+	background-size: 100% 100%;
 }
 
 .title {
-	padding: 24px 0 0 32px;
+	/* margin: 12px 0; */
+	margin-bottom: adjust(12px);
+	font-size: adjust(17px);
+	color: #72f2ff;
+	font-family: sans-serif;
 	user-select: none;
 	display: flex;
 	align-items: center;
 }
 
-.title_text {
-	font-size: 42px;
-	letter-spacing: 1px;
-	color: #3565ff;
-	font-family: sans-serif;
-	line-height: 52px;
-	margin-bottom: 10px;
-}
-
-.out-water .title,
-.in-water .title {
-	font-size: adjust(h(40px));
-}
-
 .content {
 	height: 1px;
+	/* background: #eee; */
 	flex: 1;
 }
 </style>

src/components/yx-dark/chart/gradientChart.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="bar-chart" :id="id"></div>
+</template>
+
+<script>
+import * as echarts from "echarts/core";
+import { BarChart } from "echarts/charts";
+
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+} from "echarts/components";
+
+import { LabelLayout, UniversalTransition } from "echarts/features";
+
+import { CanvasRenderer } from "echarts/renderers";
+
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  BarChart,
+  LabelLayout,
+  UniversalTransition,
+  CanvasRenderer,
+]);
+
+export default {
+  name: "GradientChart",
+  props: {
+    series: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      id: Math.random().toString(),
+      chart: null,
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  watch: {
+    series: {
+      deep: true,
+      handler: function () {
+        console.log("BarChart: series changed!");
+        this.init();
+      },
+    },
+  },
+  methods: {
+    updateXAxis() {
+      const hour = +new Date().getHours();
+      return Array(24)
+        .fill(1)
+        .map((_, index) => {
+          if (hour - index < 0) {
+            return 24 + hour - index + ":00";
+          }
+          return hour - index + ":00";
+        })
+        .reverse();
+    },
+    init() {
+      if (!this.chart)
+        this.chart = echarts.init(document.getElementById(this.id));
+      this.chart.setOption({
+        grid: {
+          top: 32,
+          left: 56,
+          bottom: 36,
+          right: 20,
+        },
+        xAxis: {
+          type: "category",
+          data: this.updateXAxis(),
+          axisLine: {
+            lineStyle: {
+              color: "#5982b2a0",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            color: "#fff9",
+            fontSize: 16,
+            lineHeight: 2,
+            margin: 12,
+            rotate: 30,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // name: "单位/℃",
+          // nameTextStyle: {
+          // 	color: "#fff9",
+          // 	fontSize: adjust(8),
+          // 	align: "right",
+          // },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#5982b2a0",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            formatter: "{value} ℃",
+            color: "#fff9",
+            fontSize: 16,
+            lineHeight: 2,
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#5982b2a0",
+            },
+          },
+          // data: [100, 200, 300, 400, 500],
+        },
+        series: [
+          {
+            // data: this.series,
+            data: Array(24)
+              .fill(1)
+              .map(() => {
+                let v = Math.ceil(Math.random() * 100);
+                while (v < 60) {
+                  v = Math.ceil(Math.random() * 100);
+                }
+                return v;
+              }),
+            type: "bar",
+            barWidth: 8,
+            label: {
+              show: true,
+              fontSize: 14,
+              color: "#eee8",
+              position: "topRight",
+              rotate: 90,
+              offset: [5, 0],
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "#A0FF49" },
+                { offset: 0.35, color: "#49FF9A" },
+                { offset: 0.7, color: "#49F2FF" },
+                { offset: 1, color: "#0D6FFF" },
+              ]),
+            },
+          },
+        ],
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.bar-chart {
+  height: 100%;
+}
+</style>

src/components/yx-dark/containers/chart.vue

@@ -0,0 +1,70 @@
+<!-- 
+    filename: chart.vue
+    author: liubin
+    date: 2023-09-08 13:53:04
+    description: 
+-->
+
+<template>
+  <div class="yx-dark-chart">
+    <LineChart
+      key="1"
+      id="line-chart-1"
+      class="flex-1"
+      unit="单位 kg/h"
+      :legend="Object.keys(oilTable1)"
+      :series="oilTable1"
+    />
+    <div class="vertical-line"></div>
+    <LineChart
+      key="2"
+      id="line-chart-2"
+      class="flex-1"
+      unit="单位 kg/h"
+      :legend="Object.keys(oilTable2)"
+      :series="oilTable2"
+    />
+  </div>
+</template>
+
+<script>
+import LineChart from "./components/LineChart.vue";
+import { mapState } from "vuex";
+
+export default {
+  name: "YxDarkChart",
+  components: { LineChart },
+  props: ["data-source"],
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState(["oilTable1", "oilTable2"]),
+  },
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.yx-dark-chart {
+  height: 100%;
+  display: flex;
+}
+
+.flex-1 {
+  width: 1px;
+  flex: 1;
+}
+
+.vertical-line {
+  margin: 0 6px;
+  width: 6px;
+  background: radial-gradient(
+    ellipse at center,
+    #6fe2ff,
+    #52cbef80,
+    transparent,
+    transparent
+  );
+}
+</style>

src/components/yx-dark/containers/components/LineChart.vue

@@ -0,0 +1,364 @@
+<template>
+  <!-- line chart  -->
+  <div class="line-chart__wrapper">
+    <div class="line-chart__custom-legend flex" v-if="legend.length">
+      <!-- <span>产线1 - 产线5</span> -->
+      <ul style="" class="flex">
+        <li v-for="(v, i) in legend" :key="i">{{ v }}</li>
+      </ul>
+    </div>
+    <div :id="id" style="width: 100%; height: 100%"></div>
+    <div
+      v-show="legend.length === 0"
+      style="
+        position: absolute;
+        top: 0;
+        left: 0;
+        background: #eee0;
+        width: 100%;
+        height: 100%;
+        display: grid;
+        place-items: center;
+        font-size: 24px;
+        color: #eee8;
+        user-select: none;
+      "
+    >
+      无数据
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts/core";
+import { LineChart } from "echarts/charts";
+
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+} from "echarts/components";
+
+import { LabelLayout, UniversalTransition } from "echarts/features";
+
+import { CanvasRenderer } from "echarts/renderers";
+
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  LineChart,
+  LabelLayout,
+  UniversalTransition,
+  CanvasRenderer,
+]);
+
+export default {
+  name: "LineChart",
+  props: {
+    id: {
+      type: String,
+      default: "line-chart",
+    },
+    config: {
+      type: Object,
+      default: () => ({
+        title: { text: "default chart" },
+      }),
+    },
+    unit: {
+      type: String,
+      default: "单位/m³",
+    },
+    legend: {
+      type: Array,
+      default: () => [],
+    },
+    series: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      colors: [
+        "#18c7f3",
+        "#FFD160",
+        "#F31868",
+        "#30E89A",
+        "#2760FF",
+        "#7138FF",
+        "#F318D8",
+        "#C0F318",
+        "#f77",
+        "#19f",
+        "#98f",
+      ],
+      data: [],
+      legendtext: [
+        "asdfsadf",
+        "asdfsadf",
+        "asdfsadf",
+        "asdfsadf",
+        "asdfsadf",
+        "asdfsadf",
+        "asdfsadf",
+        "asdfsadf",
+      ],
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  watch: {
+    series: {
+      deep: true,
+      handler: function () {
+        console.log("LineChart: series changed!");
+        this.init();
+      },
+    },
+  },
+  methods: {
+    updateXAxis() {
+      const hour = +new Date().getHours();
+      return Array(24)
+        .fill(1)
+        .map((_, index) => {
+          if (hour - index < 0) {
+            return 24 + hour - index + ":00";
+          }
+          return hour - index + ":00";
+        })
+        .reverse();
+    },
+    init() {
+      if (!this.chart)
+        this.chart = echarts.init(document.getElementById(this.id));
+      this.chart.setOption({
+        grid: {
+          top: 54,
+          left: 54,
+          bottom: 48,
+          right: 24,
+        },
+        xAxis: {
+          data: this.updateXAxis(),
+          axisLine: {
+            lineStyle: {
+              color: "#5982b2a0",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            color: "#fff9",
+            fontSize: 14,
+            lineHeight: 2,
+            margin: 16,
+            rotate: 30,
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: this.unit,
+          nameTextStyle: {
+            color: "#fff9",
+            fontSize: 18,
+            align: "",
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              // width: 1,
+              color: "#5982b2a0",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            color: "#fff9",
+            fontSize: 16,
+            lineHeight: 2,
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#5982b2a0",
+            },
+          },
+          // data: [100, 200, 300, 400, 500],
+        },
+        color: this.colors,
+        // series: Array(5)
+        // 	.fill(1)
+        // 	.map((_, index) => ({
+        // 		name: Math.random(),
+        // 		type: "line",
+        // 		symbol: "circle",
+        // 		symbolSize: adjust(3),
+        // 		lineStyle: {
+        // 			width: adjust(1),
+        // 		},
+        // 		areaStyle: {
+        // 			color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        // 				{ offset: 0, color: this.colors[index] + "33" },
+        // 				{ offset: 1, color: "transparent" },
+        // 			]),
+        // 		},
+        // 		data: Array(31)
+        // 			.fill(1)
+        // 			.map(() => {
+        // 				let v = Math.floor(Math.random() * 5000);
+        // 				while (v < 3000) v = Math.floor(Math.random() * 5000);
+        // 				return v;
+        // 			}),
+        // 	})),
+        series: Array(this.legend.length)
+          .fill(1)
+          .map((_, index) => {
+            let lgd = this.legend[index];
+            // console.log("series: ", lgd, index, this.series[lgd]);
+            return {
+              name: lgd,
+              type: "line",
+              symbol: "circle",
+              symbolSize: 6,
+              lineStyle: {
+                width: 2,
+              },
+              areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: this.colors[index] + "33" },
+                  { offset: 1, color: "transparent" },
+                ]),
+              },
+              data: this.series[lgd],
+            };
+          }),
+      });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+::-webkit-scrollbar {
+  // display: none;
+  height: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  height: 4px;
+  border-radius: 4px;
+  background: #ccc3;
+}
+
+// ::-webkit-scrollbar-track {
+// height: adjust(1px);
+// background: blue;
+// }
+
+ul,
+li {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  min-width: 40px;
+}
+
+ul {
+  // padding: 0 16px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+  height: 56px;
+  // background: #eeec;
+  // overflow-x: hidden;
+  white-space: pre-wrap;
+  padding-bottom: 4px;
+}
+
+li {
+  text-align: right;
+  position: relative;
+  min-width: 40px;
+  margin-right: 18px;
+  padding: 0 4px;
+}
+
+li:not(:last-child) {
+  // margin-right: adjust(16px);
+}
+
+.line-chart__custom-legend {
+  position: absolute;
+  top: -64px;
+  right: 0;
+  font-size: 18px;
+  font-family: Ubuntu, sans-serif;
+  padding: 0;
+  // max-width: 100%;
+  width: 65%;
+  align-items: flex-start;
+  justify-content: flex-end;
+}
+
+li::before {
+  content: "";
+  position: absolute;
+  top: 4px;
+  left: -16px;
+  width: 16px;
+  height: 16px;
+  border-radius: 2px;
+  background: #eee6;
+}
+
+li:nth-child(1)::before {
+  background: #18c7f3;
+}
+li:nth-child(2)::before {
+  background: #ffd160;
+}
+li:nth-child(3)::before {
+  background: #f31868;
+}
+li:nth-child(4)::before {
+  background: #30e89a;
+}
+li:nth-child(5)::before {
+  background: #2760ff;
+}
+li:nth-child(6)::before {
+  background: #7138ff;
+}
+li:nth-child(7)::before {
+  background: #f318d8;
+}
+li:nth-child(8)::before {
+  background: #c0f318;
+}
+li:nth-child(9)::before {
+  background: #f77;
+}
+li:nth-child(10)::before {
+  background: #19f;
+}
+li:nth-child(11)::before {
+  background: #98f;
+}
+
+.line-chart__wrapper {
+  position: relative;
+  background: #7771;
+  border-radius: 6px;
+  backdrop-filter: blur(4px);
+  box-shadow: inset 0 0 20px 4px rgba($color: #fff, $alpha: 0.1);
+  height: 100%;
+  width: 2px;
+}
+</style>

src/components/yx-dark/containers/components/TableFrequence.vue

@@ -0,0 +1,32 @@
+<template>
+	<div class="table-frequence" :class="cls">{{ value }}</div>
+</template>
+
+<script>
+export default {
+	name: "TableFrequence",
+	props: {
+    value: {
+      type: String,
+      default: '未运行'
+    }
+  },
+	data() {
+		return {
+      cls: {
+        'valid': this.value !== '未运行'
+      }
+    };
+	}
+};
+</script>
+
+<style scoped>
+.table-frequence {
+  font-family: Ubuntu, sans-serif !important;
+}
+
+.valid {
+  color: #30e89a;
+}
+</style>

src/components/yx-dark/containers/components/TableStatus.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="table-status" :class="cls">{{ value }}</div>
+</template>
+
+<script>
+export default {
+  name: "TableFrequence",
+  props: {
+    value: {
+      type: String,
+      default: "正常",
+    },
+  },
+  data() {
+    return {
+      cls: {
+        invalid: this.value !== "正常",
+      },
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.table-status {
+  /* font-family: Ubuntu, sans-serif !important; */
+  color: #3984ff;
+  padding-left: 20px;
+  position: relative;
+}
+
+.table-status::after {
+  content: "";
+  position: absolute;
+  left: 2px;
+  top: 4px;
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 200px;
+  background: #3984ff;
+  box-shadow: 0px 0px 4px 4px rgba(39, 96, 255, 0.5);
+}
+
+.invalid {
+  color: #ff0c0c;
+}
+
+.invalid::after {
+  background: #ff0c0c;
+  box-shadow: 0px 0px 4px 4px rgba(255, 39, 39, 0.5);
+}
+</style>

src/components/yx-dark/containers/rect.vue

@@ -0,0 +1,100 @@
+<!-- 
+    filename: rect.vue
+    author: liubin
+    date: 2023-09-08 10:02:48
+    description: 
+-->
+
+<template>
+  <div class="rect-container">
+    <section class="title" v-if="title">
+      <span class="icon" v-if="icon" :class="icon"></span>
+      <span class="title__value">{{ title }}</span>
+    </section>
+    <section class="content">
+      <slot />
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "RectContainer",
+  components: {},
+  props: ["icon", "title"],
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+span {
+  display: inline-block;
+}
+
+.rect-container {
+  // background: url(../../../assets/rect-bg.png) no-repeat 100% / contain; // rgba(45, 230, 196, 0.8);
+  padding: 24px;
+  // width: 624px;
+  // height: 304px;
+  display: flex;
+  flex-direction: column;
+}
+
+section.title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.title__value {
+  font-size: 24px;
+  letter-spacing: 1px;
+  line-height: 1;
+  color: #7ffff5;
+}
+
+section.content {
+  height: 1px;
+  flex: 1;
+  overflow: visible;
+}
+
+.icon {
+  width: 28px;
+  height: 28px;
+  margin-right: 8px;
+}
+
+.icon-left-middle {
+  background: url(../../../assets/icon-left-middle.png) no-repeat 100% / contain;
+}
+
+.icon-left-bottom {
+  background: url(../../../assets/icon-left-bottom.png) no-repeat 100% / contain;
+}
+
+.icon-gas {
+  background: url(../../../assets/icon-gas.png) no-repeat 100% / contain;
+}
+
+.icon-kiln-top {
+  background: url(../../../assets/icon-kiln-top.png) no-repeat 100% / contain;
+}
+
+.icon-kiln-bottom {
+  background: url(../../../assets/icon-kiln-bottom.png) no-repeat 100% / contain;
+}
+
+.icon-right-bottom {
+  background: url(../../../assets/icon-right-bottom.png) no-repeat 100% /
+    contain;
+}
+
+.icon-right-top {
+  background: url(../../../assets/icon-right-top.png) no-repeat 100% / contain;
+}
+</style>

src/components/yx-dark/containers/table.vue

@@ -0,0 +1,237 @@
+<!-- 
+    filename: table.vue
+    author: liubin
+    date: 2023-09-08 13:52:12
+    description: 
+-->
+
+<template>
+  <div class="yx-dark-tables">
+    <div class="tables flex" style="height: 100%">
+      <div class="table-wrapper flex-1 align-start">
+        <div
+          v-if="tableData1 && tableData1.length === 0"
+          style="
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: #eee1;
+            display: grid;
+            place-items: center;
+            font-size: 24px;
+            color: #eee9;
+          "
+        >
+          无数据
+        </div>
+        <table class="table-1">
+          <thead>
+            <tr class="t-row">
+              <th>序号</th>
+              <th>设备名称</th>
+              <th>运行频率</th>
+              <th>设备状态</th>
+            </tr>
+          </thead>
+          <transition-group name="fan-list" tag="tbody" mode="out-in">
+            <tr
+              class="t-row"
+              v-for="row in tableData1"
+              :key="row && 'length' in row ? row[0] : Math.random()"
+            >
+              <td v-for="(d, idx) in row" :key="idx">
+                <template v-if="idx === 2">
+                  <FrequentComp :value="d" />
+                </template>
+                <template v-else-if="idx === 3">
+                  <StatusComp :value="d" />
+                </template>
+                <template v-else>
+                  {{ d }}
+                </template>
+              </td>
+            </tr>
+          </transition-group>
+          <!-- </tbody> -->
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import FrequentComp from "./components/TableFrequence.vue";
+import StatusComp from "./components/TableStatus.vue";
+import { mapState } from "vuex";
+
+export default {
+  name: "YxDarkTables",
+
+  components: { FrequentComp, StatusComp },
+  data() {
+    return {
+      tableHead: ["序号", "设备名称", "运行频率", "设备状态"],
+      tableCache: [
+        [16, "风机16", "未运行", "正常" /**or 0,1*/],
+        [17, "风机17", "未运行", "正常" /**or 0,1*/],
+        [17, "风机18", "73Hz", "正常" /**or 0,1*/],
+      ],
+      tableData1: [
+        [1, "风机1", "2332Hz", "正常" /**or 0,1*/],
+        [2, "风机2", "未运行", "故障" /**or 0,1*/],
+        [3, "风机3", "333Hz", "正常" /**or 0,1*/],
+        [4, "风机4", "100Hz", "正常" /**or 0,1*/],
+        [5, "风机5", "未运行", "正常" /**or 0,1*/],
+        [6, "风机6", "未运行", "故障" /**or 0,1*/],
+        [7, "风机7", "3000Hz", "正常" /**or 0,1*/],
+        [8, "风机8", "未运行", "正常" /**or 0,1*/],
+        [9, "风机9", "未运行", "正常" /**or 0,1*/],
+        [10, "风机10", "86423Hz", "正常" /**or 0,1*/],
+        [11, "风机11", "未运行", "正常" /**or 0,1*/],
+        [12, "风机12", "未运行", "正常" /**or 0,1*/],
+        [13, "风机13", "73Hz", "正常" /**or 0,1*/],
+        [14, "风机14", "未运行", "正常" /**or 0,1*/],
+        [15, "风机15", "未运行", "正常" /**or 0,1*/], 
+      ],
+    };
+  },
+  computed: {
+    ...mapState(["fan"]),
+  },
+  watch: {
+    // fan: {
+    //   handler: function (data) {
+    //     if (!data) return;
+    //     let idx = 0;
+    //     this.tableData1 = data.slice(0, 10).map((item, index) => {
+    //       idx += 1;
+    //       return [idx, ...item];
+    //     });
+    //     this.tableCache = data
+    //       .slice(10)
+    //       .map((item, index) => [index + 1 + idx, ...item]);
+    //   },
+    //   deep: true,
+    //   immediate: true,
+    // },
+  },
+  mounted() {
+    setInterval(() => {
+      const inData = this.tableCache.shift();
+      const outData = this.tableData1.shift();
+      setTimeout(() => {
+        if (inData) this.tableData1.splice(this.tableData1.length, 0, inData);
+      }, 200);
+      if (outData) this.tableCache.push(outData);
+    }, 3000);
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.yx-dark-tables {
+  height: 100%;
+  // background: #fff3;
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  background: #eee1;
+}
+
+::-webkit-scrollbar-thumb {
+  width: 6px;
+  border-radius: 8px;
+  background: #eee3;
+}
+
+.fan-list-enter-active,
+.fan-list-leave-active {
+  transition: all 0.5s;
+}
+
+// .fan-list-leave-move {
+//   transition: all 1s;
+// }
+
+.fan-list-enter,
+.fan-list-leave-to {
+  opacity: 0;
+  transform: scaleY(0);
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+.vertical-line {
+  margin: 0 6px;
+  width: 6px;
+  background: radial-gradient(
+    ellipse at center,
+    #6fe2ff,
+    #52cbef80,
+    transparent,
+    transparent
+  );
+}
+.table-wrapper {
+  // padding-right: 6px;
+  // height: 480px;
+  height: 100%;
+  // overflow-y: auto;
+  overflow: hidden;
+}
+
+table {
+  width: 100%;
+  border-spacing: 2px;
+}
+
+// tr, td, th {
+// 	max-height: 13.88px !important;
+// }
+
+.t-row {
+  height: 28px;
+}
+
+.tables > table {
+  overflow-y: auto;
+}
+
+.align-start {
+  align-self: flex-start;
+}
+
+thead > tr th:first-child {
+  text-align: center;
+}
+
+thead > tr th {
+  font-size: 20px;
+  line-height: 1.5;
+  padding: 6px 16px;
+  font-weight: 400;
+  background: #044a8446;
+  text-align: left;
+}
+
+tbody > tr:nth-child(odd) {
+  background: #0b549960;
+}
+
+tbody > tr td {
+  font-size: 20px;
+  line-height: 1.25;
+  padding: 4px 16px;
+  font-weight: 400;
+  background: inherit;
+}
+
+tbody > tr td:first-child {
+  text-align: center;
+}
+</style>

src/components/yx-dark/layout/Header.vue

@@ -0,0 +1,130 @@
+<template>
+  <header class="header">
+    <div>
+      <span class="header--logo">
+        <!-- <img src="../../assets/logo.png" alt="logo"> -->
+      </span>
+      <h1>宜兴三期生产线大数据指挥中心</h1>
+    </div>
+    <span class="header--wing absolute company"></span>
+    <span class="header--wing absolute datetime">
+      {{ moment(today).format("YYYY.M.D dddd HH:mm:ss") }}
+    </span>
+  </header>
+</template>
+
+<script>
+import moment from "moment";
+export default {
+  name: "Header",
+  data() {
+    return {
+      today: new Date(),
+      time: "00:00:00",
+      moment,
+    };
+  },
+  computed: {
+    date() {
+      return this.today.toLocaleDateString().replaceAll("/", ".");
+    },
+    week() {
+      return [
+        "星期日",
+        "星期一",
+        "星期二",
+        "星期三",
+        "星期四",
+        "星期五",
+        "星期六",
+      ][this.today.getDay()];
+    },
+  },
+  mounted() {
+    moment.locale("zh-cn");
+    // this.time = this.getTime().join(":");
+    setInterval(() => {
+      this.today = new Date();
+      // this.time = this.getTime().join(":");
+    }, 1000);
+  },
+  methods: {
+    getTime() {
+      const now = new Date();
+      return [
+        now.getHours() < 10 ? "0" + now.getHours() : now.getHours() + "",
+        now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes() + "",
+        now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds() + "",
+      ];
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../../assets/styles/functions";
+@import "../../../assets/styles/variables";
+
+header {
+  position: absolute;
+  width: 100%;
+  top: 0;
+  left: 0;
+  z-index: 10000;
+  background: url(../../../assets/header.png) no-repeat;
+  background-position: center;
+  background-size: contain;
+  // background-size: 100%;
+  height: 146px;
+  display: grid;
+  place-content: center;
+
+  > div {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0;
+
+    .header--logo {
+      margin-top: 12px;
+      width: 64px;
+      height: 94px;
+      background: url(../../../assets/logo.png) center/contain no-repeat;
+    }
+
+    h1 {
+      margin-left: 36px;
+      font-size: 72px;
+      user-select: none;
+      letter-spacing: 14px;
+      font-weight: 400;
+      color: $main-color;
+      font-family: "微软雅黑", sans-serif;
+    }
+  }
+}
+
+.header--wing {
+  left: 0;
+  bottom: -20px;
+  height: 72px;
+}
+
+.company {
+  margin-left: 1458px;
+  width: 768px;
+  height: 67px;
+  background: url("../../../assets/company.png") center/cover no-repeat;
+}
+
+.datetime {
+  color: $main-color;
+  font-size: 48px;
+  text-align: center;
+  // display: inline-block;
+  left: unset;
+  right: 1573px;
+  width: 646px;
+  height: 67px;
+  background: url("../../../assets/date.png") center/cover no-repeat;
+}
+</style>

src/components/yx-dark/socket-server/demo.json

@@ -0,0 +1,952 @@
+{
+    "baseInfo": {
+        "fireChangeTime": "20分钟",
+        "waterInTemp": "75.0",
+        "lastFireChangeTime": "10分15秒",
+        "kilnPressure": "94.0",
+        "fireDirection": "南火",
+        "waterOutTemp": "26.0"
+    },
+    "fan": [
+        [
+            "8#压延冷却风机",
+            "4373Hz",
+            "正常"
+        ],
+        [
+            "7#压延冷却风机",
+            "4772Hz",
+            "正常"
+        ],
+        [
+            "6#压延冷却风机",
+            "1704Hz",
+            "正常"
+        ],
+        [
+            "5#压延冷却风机",
+            "3109Hz",
+            "正常"
+        ],
+        [
+            "4#压延冷却风机",
+            "2595Hz",
+            "正常"
+        ],
+        [
+            "3#压延冷却风机",
+            "8903Hz",
+            "正常"
+        ],
+        [
+            "2#压延冷却风机",
+            "3741Hz",
+            "正常"
+        ],
+        [
+            "1#压延冷却风机",
+            "9035Hz",
+            "正常"
+        ],
+        [
+            "4#熔化部风机",
+            "5223Hz",
+            "正常"
+        ],
+        [
+            "3#熔化部风机",
+            "9722Hz",
+            "正常"
+        ],
+        [
+            "2#熔化部风机",
+            "9617Hz",
+            "正常"
+        ],
+        [
+            "1#熔化部风机",
+            "7135Hz",
+            "正常"
+        ],
+        [
+            "4#澄清部风机",
+            "1699Hz",
+            "正常"
+        ],
+        [
+            "3#澄清部风机",
+            "2511Hz",
+            "正常"
+        ],
+        [
+            "2#澄清部风机",
+            "9780Hz",
+            "正常"
+        ],
+        [
+            "1#澄清部风机",
+            "3809Hz",
+            "正常"
+        ],
+        [
+            "2#助燃风机",
+            "435Hz",
+            "正常"
+        ],
+        [
+            "1#助燃风机",
+            "6270Hz",
+            "正常"
+        ],
+        [
+            "2#L吊墙风机",
+            "8181Hz",
+            "正常"
+        ],
+        [
+            "1#L吊墙风机",
+            "5587Hz",
+            "正常"
+        ],
+        [
+            "2#钢碹碴池壁风机",
+            "6652Hz",
+            "正常"
+        ],
+        [
+            "1#钢碹碴池壁风机",
+            "2000Hz",
+            "正常"
+        ],
+        [
+            "2#池壁拐角风机",
+            "1972Hz",
+            "正常"
+        ],
+        [
+            "1#池壁拐角风机",
+            "7730Hz",
+            "正常"
+        ]
+    ],
+    "gas": {
+        "kilnGasT1": {
+            "FE111R": [
+                53.02,
+                69.84,
+                99.33,
+                17.21,
+                1.17,
+                27.84,
+                95.44,
+                30.72,
+                32.24,
+                64.16,
+                59.65,
+                14.59,
+                78.58,
+                99.15,
+                58.91,
+                34.13,
+                99.62,
+                2.23,
+                28.31,
+                91.17,
+                97.15,
+                60.62,
+                94.12,
+                23.24
+            ],
+            "FE113R": [
+                22.04,
+                40.78,
+                75.62,
+                61.01,
+                72.7,
+                48.46,
+                32.44,
+                42.51,
+                59.61,
+                22.86,
+                32.95,
+                21.32,
+                23.59,
+                84.16,
+                55.14,
+                55.71,
+                10.81,
+                56.53,
+                75.51,
+                2.85,
+                27.77,
+                52.42,
+                43.34,
+                22.04
+            ],
+            "FE112R": [
+                77.02,
+                13.83,
+                1.71,
+                53.99,
+                4.03,
+                1,
+                22.17,
+                61.73,
+                11.25,
+                31.69,
+                90.31,
+                69.26,
+                68.72,
+                80.79,
+                3.08,
+                39.17,
+                12.6,
+                35.31,
+                97.2,
+                38.77,
+                27.5,
+                11.78,
+                72.32,
+                23.13
+            ],
+            "FE115R": [
+                28.31,
+                10.16,
+                13.22,
+                41.44,
+                97.19,
+                60.08,
+                34.13,
+                16.75,
+                92.7,
+                79.48,
+                3.08,
+                14.71,
+                4.4,
+                0.88,
+                77.6,
+                57,
+                31,
+                86.14,
+                44.31,
+                45.7,
+                6.85,
+                65.62,
+                77.97,
+                49.2
+            ],
+            "FE114R": [
+                17.72,
+                32.45,
+                1.42,
+                24.51,
+                68.57,
+                61.48,
+                2.08,
+                3.1,
+                38.27,
+                20.07,
+                25.71,
+                85.58,
+                48.31,
+                78.14,
+                22.43,
+                87.47,
+                83.78,
+                17.66,
+                72.36,
+                19,
+                20.69,
+                33.92,
+                25.66,
+                91.28
+            ],
+            "FE117R": [
+                47.8,
+                62.27,
+                90.23,
+                28.31,
+                73.09,
+                34.04,
+                9.03,
+                44.69,
+                32.62,
+                25.78,
+                27.79,
+                25.42,
+                28.96,
+                56.52,
+                75.43,
+                50.56,
+                90.22,
+                11.85,
+                4.56,
+                39.9,
+                9.83,
+                65.98,
+                91.22,
+                92.43
+            ],
+            "FE116R": [
+                64.79,
+                46.14,
+                58.67,
+                54.46,
+                15.67,
+                72.02,
+                15.06,
+                5.88,
+                38.19,
+                66.98,
+                89.24,
+                33.13,
+                87.57,
+                43.95,
+                55.06,
+                93.26,
+                96.91,
+                56.5,
+                20.75,
+                83.76,
+                60.88,
+                62.04,
+                22.34,
+                82.43
+            ],
+            "FE118R": [
+                94.32,
+                86.26,
+                5.13,
+                47.33,
+                40.01,
+                34.97,
+                18.69,
+                81.81,
+                87.37,
+                96.47,
+                16.04,
+                23.33,
+                0.66,
+                16.86,
+                13.19,
+                67.32,
+                37.63,
+                13.74,
+                22.85,
+                78.89,
+                9.52,
+                75.46,
+                0.2,
+                1.51
+            ]
+        },
+        "kilnGasT2": {
+            "FE124R": [
+                53.02,
+                69.84,
+                99.33,
+                17.21,
+                1.17,
+                27.84,
+                95.44,
+                30.72,
+                32.24,
+                64.16,
+                59.65,
+                14.59,
+                78.58,
+                99.15,
+                58.91,
+                34.13,
+                99.62,
+                2.23,
+                28.31,
+                91.17,
+                97.15,
+                60.62,
+                94.12,
+                23.24
+            ],
+            "FE123aR": [
+                17.72,
+                32.45,
+                1.42,
+                24.51,
+                68.57,
+                61.48,
+                2.08,
+                3.1,
+                38.27,
+                20.07,
+                25.71,
+                85.58,
+                48.31,
+                78.14,
+                22.43,
+                87.47,
+                83.78,
+                17.66,
+                72.36,
+                19,
+                20.69,
+                33.92,
+                25.66,
+                91.28
+            ],
+            "FE123R": [
+                77.02,
+                13.83,
+                1.71,
+                53.99,
+                4.03,
+                1,
+                22.17,
+                61.73,
+                11.25,
+                31.69,
+                90.31,
+                69.26,
+                68.72,
+                80.79,
+                3.08,
+                39.17,
+                12.6,
+                35.31,
+                97.2,
+                38.77,
+                27.5,
+                11.78,
+                72.32,
+                23.13
+            ],
+            "FE124aR": [
+                22.04,
+                40.78,
+                75.62,
+                61.01,
+                72.7,
+                48.46,
+                32.44,
+                42.51,
+                59.61,
+                22.86,
+                32.95,
+                21.32,
+                23.59,
+                84.16,
+                55.14,
+                55.71,
+                10.81,
+                56.53,
+                75.51,
+                2.85,
+                27.77,
+                52.42,
+                43.34,
+                22.04
+            ],
+            "FE126R": [
+                64.79,
+                46.14,
+                58.67,
+                54.46,
+                15.67,
+                72.02,
+                15.06,
+                5.88,
+                38.19,
+                66.98,
+                89.24,
+                33.13,
+                87.57,
+                43.95,
+                55.06,
+                93.26,
+                96.91,
+                56.5,
+                20.75,
+                83.76,
+                60.88,
+                62.04,
+                22.34,
+                82.43
+            ],
+            "FE125aR": [
+                47.8,
+                62.27,
+                90.23,
+                28.31,
+                73.09,
+                34.04,
+                9.03,
+                44.69,
+                32.62,
+                25.78,
+                27.79,
+                25.42,
+                28.96,
+                56.52,
+                75.43,
+                50.56,
+                90.22,
+                11.85,
+                4.56,
+                39.9,
+                9.83,
+                65.98,
+                91.22,
+                92.43
+            ],
+            "FE125R": [
+                28.31,
+                10.16,
+                13.22,
+                41.44,
+                97.19,
+                60.08,
+                34.13,
+                16.75,
+                92.7,
+                79.48,
+                3.08,
+                14.71,
+                4.4,
+                0.88,
+                77.6,
+                57,
+                31,
+                86.14,
+                44.31,
+                45.7,
+                6.85,
+                65.62,
+                77.97,
+                49.2
+            ],
+            "FE126aR": [
+                94.32,
+                86.26,
+                5.13,
+                47.33,
+                40.01,
+                34.97,
+                18.69,
+                81.81,
+                87.37,
+                96.47,
+                16.04,
+                23.33,
+                0.66,
+                16.86,
+                13.19,
+                67.32,
+                37.63,
+                13.74,
+                22.85,
+                78.89,
+                9.52,
+                75.46,
+                0.2,
+                1.51
+            ]
+        }
+    },
+    "kilnBottom": {
+        "kilnTempBottomT1": {
+            "TE316": [
+                44,
+                49,
+                20,
+                29,
+                96,
+                76,
+                20,
+                82,
+                28,
+                86,
+                69,
+                18,
+                23,
+                58,
+                83,
+                84,
+                94,
+                99,
+                36,
+                51,
+                32
+            ],
+            "TE315": [
+                84,
+                61,
+                87,
+                82,
+                33,
+                9,
+                20,
+                23,
+                81,
+                0,
+                16,
+                81,
+                9,
+                78,
+                30,
+                16,
+                49,
+                16,
+                95,
+                53,
+                19
+            ],
+            "TE314": [
+                45,
+                93,
+                11,
+                47,
+                27,
+                69,
+                91,
+                17,
+                0,
+                67,
+                60,
+                15,
+                84,
+                36,
+                89,
+                30,
+                36,
+                90,
+                38,
+                94,
+                87
+            ],
+            "TE313": [
+                60,
+                9,
+                59,
+                15,
+                43,
+                41,
+                83,
+                93,
+                99,
+                91,
+                29,
+                47,
+                2,
+                40,
+                65,
+                39,
+                12,
+                20,
+                57,
+                64,
+                95
+            ],
+            "TE312": [
+                22,
+                46,
+                93,
+                69,
+                44,
+                3,
+                62,
+                49,
+                4,
+                18,
+                87,
+                76,
+                36,
+                16,
+                50,
+                36,
+                54,
+                90,
+                1,
+                66,
+                68
+            ]
+        },
+        "kilnTempBottomT2": {
+            "TE319": [
+                48,
+                56,
+                40,
+                44,
+                31,
+                82,
+                35,
+                36,
+                0,
+                84,
+                49,
+                38,
+                28,
+                34,
+                98,
+                60,
+                4,
+                69,
+                15,
+                86,
+                19
+            ],
+            "TE318": [
+                7,
+                30,
+                57,
+                78,
+                47,
+                99,
+                1,
+                98,
+                47,
+                86,
+                55,
+                10,
+                98,
+                27,
+                97,
+                85,
+                54,
+                41,
+                27,
+                85,
+                44
+            ],
+            "TE317": [
+                72,
+                13,
+                7,
+                69,
+                77,
+                36,
+                6,
+                34,
+                97,
+                48,
+                75,
+                29,
+                75,
+                4,
+                70,
+                80,
+                31,
+                10,
+                39,
+                86,
+                52
+            ],
+            "TE321": [
+                6,
+                60,
+                32,
+                19,
+                79,
+                99,
+                98,
+                81,
+                82,
+                68,
+                3,
+                94,
+                7,
+                29,
+                48,
+                52,
+                36,
+                59,
+                28,
+                77,
+                17
+            ],
+            "TE320": [
+                23,
+                47,
+                4,
+                15,
+                7,
+                74,
+                75,
+                60,
+                78,
+                89,
+                15,
+                95,
+                74,
+                85,
+                20,
+                48,
+                79,
+                51,
+                63,
+                82,
+                68
+            ]
+        }
+    },
+    "kilnTop": {
+        "kilnTempTopT2": {
+            "TE215": [
+                81,
+                12,
+                86,
+                55,
+                50,
+                59,
+                20,
+                67,
+                66,
+                29,
+                17,
+                74,
+                11,
+                12,
+                63,
+                23,
+                34,
+                86,
+                9,
+                38,
+                99,
+                3,
+                33,
+                77
+            ],
+            "TE214": [
+                51,
+                12,
+                49,
+                60,
+                3,
+                67,
+                95,
+                62,
+                22,
+                89,
+                69,
+                14,
+                41,
+                79,
+                77,
+                27,
+                26,
+                34,
+                69,
+                44,
+                89,
+                86,
+                92,
+                1
+            ],
+            "TE213": [
+                76,
+                14,
+                35,
+                1,
+                36,
+                67,
+                40,
+                5,
+                53,
+                98,
+                46,
+                29,
+                71,
+                12,
+                43,
+                42,
+                53,
+                56,
+                9,
+                17,
+                34,
+                42,
+                82,
+                73
+            ]
+        },
+        "kilnTempTopT1": {
+            "TE209": [
+                51,
+                12,
+                49,
+                60,
+                3,
+                67,
+                95,
+                62,
+                22,
+                89,
+                69,
+                14,
+                41,
+                79,
+                77,
+                27,
+                26,
+                34,
+                69,
+                44,
+                89,
+                86,
+                92,
+                1
+            ],
+            "TE208": [
+                76,
+                14,
+                35,
+                1,
+                36,
+                67,
+                40,
+                5,
+                53,
+                98,
+                46,
+                29,
+                71,
+                12,
+                43,
+                42,
+                53,
+                56,
+                9,
+                17,
+                34,
+                42,
+                82,
+                73
+            ],
+            "TE210": [
+                81,
+                12,
+                86,
+                55,
+                50,
+                59,
+                20,
+                67,
+                66,
+                29,
+                17,
+                74,
+                11,
+                12,
+                63,
+                23,
+                34,
+                86,
+                9,
+                38,
+                99,
+                3,
+                33,
+                77
+            ]
+        }
+    }
+}

src/components/yx-dark/socket-server/index.ts

@@ -0,0 +1,67 @@
+import { WebSocket, WebSocketServer } from "ws";
+import demoData from "./demo.json";
+
+const wss = new WebSocketServer({ port: 9800 });
+const frequency = 3; // seconds
+wss.on("connection", function (ws, req) {
+  // console.log("ws", ws);
+  console.log(
+    "Client in: ",
+    req.socket.remoteAddress,
+    "current users:",
+    wss.clients.size
+  );
+  // ws.on("error", console.error);
+  // ws.emit("message", "connected");
+  ws.on("open", function () {
+    console.log("connected");
+    ws.send("connected");
+  });
+  ws.on("message", function (msg) {
+    console.log("message from client", msg);
+    ws.send("echo " + msg.toString());
+  });
+  ws.on("error", console.error);
+
+  const timer = setInterval(() => {
+    sendMsg(ws, "base-info");
+    sendMsg(ws, "fan");
+    sendMsg(ws, "gas");
+    sendMsg(ws, "kiln-top");
+    sendMsg(ws, "kiln-bottom");
+  }, frequency * 1000);
+
+  ws.on("close", function () {
+    console.log("停止监听");
+    clearInterval(timer);
+  });
+});
+
+type MsgType = "base-info" | "fan" | "gas" | "kiln-top" | "kiln-bottom";
+
+function sendMsg(ws: WebSocket, type: MsgType) {
+  let data: any;
+  switch (type) {
+    case "base-info":
+      data = demoData.baseInfo;
+      break;
+    case "fan":
+      data = demoData.fan;
+      break;
+    case "gas":
+      data = demoData.gas;
+      break;
+    case "kiln-top":
+      data = demoData.kilnTop;
+      break;
+    case "kiln-bottom":
+      data = demoData.kilnBottom;
+      break;
+    default:
+      data = "You are connected!";
+      break;
+  }
+  // console.log("sendMsg: ", ws);
+  // ws.emit("message", JSON.stringify(data));
+  ws.send(JSON.stringify(data));
+}

src/components/yx-dark/socket-server/tsconfig.json

@@ -0,0 +1,109 @@
+{
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig to read more about this file */
+
+    /* Projects */
+    // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
+    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
+    // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
+    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
+    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
+    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
+
+    /* Language and Environment */
+    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+    // "jsx": "preserve",                                /* Specify what JSX code is generated. */
+    // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
+    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
+    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
+    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
+    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
+    // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
+    // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
+    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
+    // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
+
+    /* Modules */
+    "module": "commonjs",                                /* Specify what module code is generated. */
+    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
+    // "moduleResolution": "node10",                     /* Specify how TypeScript looks up a file from a given module specifier. */
+    // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
+    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
+    // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
+    // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
+    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
+    // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
+    // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
+    // "allowImportingTsExtensions": true,               /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
+    // "resolvePackageJsonExports": true,                /* Use the package.json 'exports' field when resolving package imports. */
+    // "resolvePackageJsonImports": true,                /* Use the package.json 'imports' field when resolving imports. */
+    // "customConditions": [],                           /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
+    "resolveJsonModule": true,                        /* Enable importing .json files. */
+    // "allowArbitraryExtensions": true,                 /* Enable importing files with any extension, provided a declaration file is present. */
+    // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
+
+    /* JavaScript Support */
+    // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
+    // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
+    // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
+
+    /* Emit */
+    // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+    // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
+    // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
+    // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
+    // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
+    // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
+    // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
+    // "removeComments": true,                           /* Disable emitting comments. */
+    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
+    // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
+    // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
+    // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
+    // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
+    // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
+    // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
+    // "newLine": "crlf",                                /* Set the newline character for emitting files. */
+    // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
+    // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
+    // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
+    // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
+    // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
+    // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
+
+    /* Interop Constraints */
+    // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
+    // "verbatimModuleSyntax": true,                     /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
+    // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
+    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
+    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
+    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
+
+    /* Type Checking */
+    "strict": true,                                      /* Enable all strict type-checking options. */
+    // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
+    // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
+    // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
+    // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
+    // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
+    // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
+    // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
+    // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
+    // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
+    // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
+    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
+    // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
+    // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
+    // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
+    // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
+    // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
+    // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
+
+    /* Completeness */
+    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
+    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
+  }
+}

src/components/yx-dark/widget/baseInfo/baseInfoContainer.vue

@@ -0,0 +1,101 @@
+<!-- 
+    filename: widgetContainer.vue
+    author: liubin
+    date: 2023-09-08 13:31:18
+    description: 
+-->
+
+<template>
+  <div class="yx-dark-widget-container">
+    <div class="icon" :class="iconClass"></div>
+    <div class="content">
+      <div class="title">{{ title }}</div>
+      <div class="value">{{ value }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "YxDarkWidgetContainer",
+  components: {},
+  props: ["title", "value", "icon"],
+  data() {
+    return {};
+  },
+  computed: {
+    iconClass() {
+      switch (this.icon) {
+        case "1":
+          return "icon-1";
+        case "2":
+          return "icon-2";
+        case "3":
+          return "icon-3";
+        case "4":
+          return "icon-4";
+      }
+    },
+  },
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.yx-dark-widget-container {
+  width: 200px;
+  height: 98px;
+  border-radius: 4px;
+  box-shadow: inset 0 0 17px 0 #fff8;
+  // background: url(../../../assets/) 100% / contain no-repeat;
+  display: flex;
+  padding: 4px;
+  align-items: flex-start;
+}
+
+.icon {
+  width: 58px;
+  height: 58px;
+  background: #cfcfff;
+  // background: url(../../../assets/) 100% / contain no-repeat;
+}
+
+.content {
+//   padding-left: 12px;
+  display: flex;
+  flex-direction: column;
+//   justify-content: center;
+  align-items: flex-start;
+  height: 100%;
+}
+
+.title {
+    padding-top: 14px;
+    font-size: 14px;
+    line-height: 1;
+    color: #fffa;
+}
+
+.value {
+    padding-top: 10px;
+    font-size: 32px;
+    line-height: 34px;
+    color: #fff;
+}
+
+.icon-1 {
+  background: url(../../../../assets/icon-1.png) 100% / contain no-repeat;
+}
+
+.icon-2 {
+  background: url(../../../../assets/icon-2.png) 100% / contain no-repeat;
+}
+
+.icon-3 {
+  background: url(../../../../assets/icon-3.png) 100% / contain no-repeat;
+}
+
+.icon-4 {
+  background: url(../../../../assets/icon-4.png) 100% / contain no-repeat;
+}
+</style>

src/components/yx-dark/widget/baseInfo/index.vue

@@ -0,0 +1,41 @@
+<!-- 
+    filename: index.vue
+    author: liubin
+    date: 2023-09-08 13:30:13
+    description: 放在这中间的小组件
+-->
+
+<template>
+  <div class="base-info">
+    <BaseInfoContainer icon="1" title="车间温度" value="27℃" />
+    <BaseInfoContainer icon="2" title="当前火向" value="东火" />
+    <BaseInfoContainer icon="3" title="换火时间" value="12:23:33" />
+    <BaseInfoContainer icon="4" title="剩余时间" value="6h" />
+  </div>
+</template>
+
+<script>
+import BaseInfoContainer from "@/components/yx-dark/widget/baseInfo/baseInfoContainer.vue";
+
+export default {
+  name: "BaseInfo",
+  components: { BaseInfoContainer },
+  props: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.base-info {
+  display: flex;
+  gap: 16px;
+  // position: absolute;
+  // top: 80px;
+  // left: 50%;
+  // transform: translateX(-50%);
+}
+</style>

src/components/yx-dark/widget/pressInfo/index.vue

@@ -0,0 +1,65 @@
+<!-- 
+    filename: index.vue
+    author: liubin
+    date: 2023-09-08 16:13:14
+    description: 
+-->
+
+<template>
+  <div class="yx-dark-press-info">
+    <template v-for="ch in pressInfo">
+      <YxDarkPressContainer
+        v-if="!isDot(ch)"
+        :key="ch"
+        :value="ch"
+        :class="{ digit: isDigit(ch) }"
+      />
+      <span class="dot" v-else>.</span>
+    </template>
+  </div>
+</template>
+
+<script>
+import YxDarkPressContainer from "./pressContainer.vue";
+export default {
+  name: "YxDarkPressInfo",
+  components: { YxDarkPressContainer },
+  props: {},
+  data() {
+    return {
+      press: 12.2,
+    };
+  },
+  computed: {
+    pressInfo() {
+      return ["压", "力", ...(this.press + ""), "Pa"];
+    },
+  },
+  methods: {
+    isDigit(ch) {
+      return ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"].includes(ch);
+    },
+    isDot(ch) {
+      return ch === ".";
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.yx-dark-press-info {
+  display: flex;
+  gap: 8px;
+}
+
+.dot {
+  font-size: 72px;
+  line-height: 90px;
+  font-family: "zcoolqingkehuangyouti-Regular", sans-serif;
+}
+
+.digit {
+  font-size: 80px;
+  line-height: 80px;
+}
+</style>

src/components/yx-dark/widget/pressInfo/pressContainer.vue

@@ -0,0 +1,38 @@
+<!-- 
+    filename: pressContainer.vue
+    author: liubin
+    date: 2023-09-08 16:10:43
+    description: 
+-->
+
+<template>
+  <div class="yx-dark-press-container">
+    {{ value }}
+  </div>
+</template>
+
+<script>
+export default {
+  name: "YxDarkPressContainer",
+  components: {},
+  props: ["value"],
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.yx-dark-press-container {
+  width: 60px;
+  height: 80px;
+  text-align: center;
+  padding-left: 6px;
+  font-size: 48px;
+  line-height: 90px;
+  font-family: "zcoolqingkehuangyouti-Regular", sans-serif;
+  background: url(../../../../assets/digit-bg.png) 100% / contain no-repeat;
+}
+</style>