update header

package-lock.json

@@ -17,16 +17,13 @@
         "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": {
@@ -2347,10 +2344,11 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "20.6.0",
+      "version": "20.1.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.6.0.tgz",
+      "resolved": "https://registry.npmmirror.com/@types/node/-/node-20.1.0.tgz",
-      "integrity": "sha512-najjVq5KN2vsH2U/xyh2opaSEz6cZMR2SetLIlxlj08nOcmPOemJmUK2o4kUzfLqfrWE0PIrNeE16XhYDd3nqg==",
+      "integrity": "sha512-O+z53uwx64xY7D6roOi4+jApDGFg0qn6WHcxe5QeqjMaTezBO/mxdfFXIVAVVyNWKx84OmPB3L8kbVYOTeN34A==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@types/normalize-package-data": {
       "version": "2.4.1",
@@ -2437,10 +2435,11 @@
       }
     },
     "node_modules/@types/ws": {
-      "version": "8.5.5",
+      "version": "8.5.4",
-      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.5.tgz",
+      "resolved": "https://registry.npmmirror.com/@types/ws/-/ws-8.5.4.tgz",
-      "integrity": "sha512-lwhs8hktwxSjf9UaZ9tG5M03PGogvFaH8gUgLNbN9HKIg0dvv6q+gkSuJ8HN4/VbyxkuLzCjlN7GquQ0gUJfIg==",
+      "integrity": "sha512-zdQDHKUgcX/zBc4GrwsE/7dVdAD8JR4EuiAXiiUhhfyIJXXb2+PrGshFyeXWQPMmmZ2XxgaqclgpIC7eTXc1mg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@types/node": "*"
       }
@@ -10109,27 +10108,6 @@
         "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",
@@ -10378,6 +10356,28 @@
         "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,16 +10498,17 @@
       "license": "ISC"
     },
     "node_modules/ws": {
-      "version": "8.14.1",
+      "version": "7.5.9",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.14.1.tgz",
+      "resolved": "https://registry.npmmirror.com/ws/-/ws-7.5.9.tgz",
-      "integrity": "sha512-4OOseMUq8AzRBI/7SLMUwO+FEDnguetSk7KMb1sHwvF2w2Wv5Hoj0nlifx8vtGsftE/jWHojPy8sMMzYLJ2G/A==",
+      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
       "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=10.0.0"
+        "node": ">=8.3.0"
       },
       "peerDependencies": {
         "bufferutil": "^4.0.1",
-        "utf-8-validate": ">=5.0.2"
+        "utf-8-validate": "^5.0.2"
       },
       "peerDependenciesMeta": {
         "bufferutil": {
@@ -12176,9 +12177,9 @@
       "dev": true
     },
     "@types/node": {
-      "version": "20.6.0",
+      "version": "20.1.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.6.0.tgz",
+      "resolved": "https://registry.npmmirror.com/@types/node/-/node-20.1.0.tgz",
-      "integrity": "sha512-najjVq5KN2vsH2U/xyh2opaSEz6cZMR2SetLIlxlj08nOcmPOemJmUK2o4kUzfLqfrWE0PIrNeE16XhYDd3nqg==",
+      "integrity": "sha512-O+z53uwx64xY7D6roOi4+jApDGFg0qn6WHcxe5QeqjMaTezBO/mxdfFXIVAVVyNWKx84OmPB3L8kbVYOTeN34A==",
       "dev": true
     },
     "@types/normalize-package-data": {
@@ -12258,9 +12259,9 @@
       }
     },
     "@types/ws": {
-      "version": "8.5.5",
+      "version": "8.5.4",
-      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.5.tgz",
+      "resolved": "https://registry.npmmirror.com/@types/ws/-/ws-8.5.4.tgz",
-      "integrity": "sha512-lwhs8hktwxSjf9UaZ9tG5M03PGogvFaH8gUgLNbN9HKIg0dvv6q+gkSuJ8HN4/VbyxkuLzCjlN7GquQ0gUJfIg==",
+      "integrity": "sha512-zdQDHKUgcX/zBc4GrwsE/7dVdAD8JR4EuiAXiiUhhfyIJXXb2+PrGshFyeXWQPMmmZ2XxgaqclgpIC7eTXc1mg==",
       "dev": true,
       "requires": {
         "@types/node": "*"
@@ -17478,15 +17479,6 @@
         "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": {
@@ -17647,6 +17639,13 @@
             "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": {}
         }
       }
     },
@@ -17738,9 +17737,9 @@
       "dev": true
     },
     "ws": {
-      "version": "8.14.1",
+      "version": "7.5.9",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.14.1.tgz",
+      "resolved": "https://registry.npmmirror.com/ws/-/ws-7.5.9.tgz",
-      "integrity": "sha512-4OOseMUq8AzRBI/7SLMUwO+FEDnguetSk7KMb1sHwvF2w2Wv5Hoj0nlifx8vtGsftE/jWHojPy8sMMzYLJ2G/A==",
+      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
       "dev": true,
       "requires": {}
     },

package.json

@@ -4,8 +4,7 @@
   "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",
@@ -17,17 +16,12 @@
     "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",
-    "ts-node": "^10.9.1",
+    "vue-template-compiler": "^2.6.14"
-    "typescript": "^5.2.2",
-    "vue-template-compiler": "^2.6.14",
-    "ws": "^8.14.1"
   }
-}
+}

src/App.vue

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

src/assets/styles/variables.scss

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

src/components/boxes/BottomTemp.vue

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

src/components/boxes/FanRuntime.vue

@@ -1,63 +1,63 @@
 <template>
-  <!-- 风机运行情况 -->
+	<!-- 风机运行情况 -->
-  <Container usage="Table">
+	<Container usage="Table">
-    <SubContainer title="风机运行情况" icon="fan" padding="34px">
+		<SubContainer title="风机运行情况" icon="fan" padding="24px 32px">
-      <div class="tables flex" style="height: 100%">
+			<div class="tables flex relative" 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;
-              top: 0;
+							width: 100%;
-              left: 0;
+							height: 100%;
-              width: 100%;
+							background: #eee1;
-              height: 100%;
+							font-size: 18px;
-              background: #eee1;
+							letter-spacing: 2px;
-              display: grid;
+							color: #3c4e8b;
-              place-items: center;
+							display: grid;
-              font-size: 24px;
+							place-items: center;
-              color: #eee9;
+							user-select: none;
-            "
+						"
-          >无数据</div>
+					>
-          <table class="table-1">
+						无数据
-            <thead>
+					</div>
-              <!-- <tr style="font-size: 8px; background: #044a84; opacity: 19%"> -->
+					<table class="table-1">
-              <tr class="t-row">
+						<thead>
-                <th>序号</th>
+							<tr class="t-row">
-                <th>设备名称</th>
+								<th style="width: 90px">序号</th>
-                <th>运行频率</th>
+								<!-- <th style="width: 180px">设备名称</th>
-                <th>设备状态</th>
+								<th style="width: 180px">运行频率</th>
-              </tr>
+								<th style="width: 180px">设备状态</th> -->
-            </thead>
+								<th style="width: 220px">设备名称</th>
-            <!-- <tbody> -->
+								<th style="width: 160px">运行频率</th>
-            <!-- <tr
+								<th style="width: 160px">设备状态</th>
-							v-for="(row, index) in tableData1"
+							</tr>
-							:key="index"
+						</thead>
-							style="font-size: 7px; background: #0b5499; opacity: 35%"
+						<transition-group name="fan-list" tag="tbody" mode="out-in">
-						> -->
+							<tr
-            <transition-group name="fan-list" tag="tbody" mode="out-in">
+								class="t-row"
-              <tr
+								v-for="row in tableData1"
-                class="t-row"
+								:key="row && 'length' in row ? row[0] : Math.random()"
-                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">
-                <td v-for="(d, idx) in row" :key="idx">
+										<FrequentComp :value="d" />
-                  <template v-if="idx === 2">
+									</template>
-                    <FrequentComp :value="d" />
+									<template v-else-if="idx === 3">
-                  </template>
+										<StatusComp :value="d" />
-                  <template v-else-if="idx === 3">
+									</template>
-                    <StatusComp :value="d" />
+									<template v-else>
-                  </template>
+										<!-- <el-tooltip effect="light" :content="d" placement="top"> -->
-                  <template v-else>
+											<span>{{ d }}</span>
-                    {{ d }}
+										<!-- </el-tooltip> -->
-                  </template>
+									</template>
-                </td>
+								</td>
-              </tr>
+							</tr>
-            </transition-group>
+						</transition-group>
-            <!-- </tbody> -->
+						<!-- </tbody> -->
-          </table>
+					</table>
-        </div>
+				</div>
-        <!-- 
+				<!-- 
 				<div class="vertical-line"></div>
 				<table class="table-2 flex-1 align-start">
 					<thead>
@@ -84,9 +84,9 @@
 						</tr>
 					</tbody>
 				</table> -->
-      </div>
+			</div>
-    </SubContainer>
+		</SubContainer>
-  </Container>
+	</Container>
 </template>
 
 <script>
@@ -97,61 +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*/],
-      ],
+			],
-    };
+		};
-  },
+	},
-  computed: {
+	computed: {
-    ...mapState(["fan"]),
+		// ...mapState(["fan"]),
-  },
+	},
-  watch: {
+	watch: {
-    fan: {
+		// fan: {
-      handler: function (data) {
+		// 	handler: function (data) {
-        if (!data) return;
+		// 		if (!data) return;
-        let idx = 0;
+		// 		let idx = 0;
-        this.tableData1 = data.slice(0, 10).map((item, index) => {
+		// 		this.tableData1 = data.slice(0, 10).map((item, index) => {
-          idx += 1;
+		// 			idx += 1;
-          return [idx, ...item];
+		// 			return [idx, ...item];
-        });
+		// 		});
-        this.tableCache = data
+		// 		this.tableCache = data
-          .slice(10)
+		// 			.slice(10)
-          .map((item, index) => [index + 1 + idx, ...item]);
+		// 			.map((item, index) => [index + 1 + idx, ...item]);
-      },
+		// 	},
-      deep: true,
+		// 	deep: true,
-      immediate: true,
+		// 	immediate: true,
-    },
+		// },
-  },
+	},
-  mounted() {
+	mounted() {
-    setInterval(() => {
+		setInterval(() => {
-      const inData = this.tableCache.shift();
+			const inData = this.tableCache.shift();
-      const outData = this.tableData1.shift();
+			const outData = this.tableData1.shift();
-      setTimeout(() => {
+			setTimeout(() => {
-        if (inData) this.tableData1.splice(this.tableData1.length, 0, inData);
+				if (inData) this.tableData1.splice(this.tableData1.length, 0, inData);
-      }, 200);
+			}, 200);
-      if (outData) this.tableCache.push(outData);
+			if (outData) this.tableCache.push(outData);
-    }, 3000);
+		}, 3000);
-  },
+	},
 };
 </script>
 
@@ -159,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 {
@@ -180,79 +180,86 @@ 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 {
-  // padding-right: 6px;
+	height: 400px;
-  height: 400px;
+	overflow: hidden;
-  // overflow-y: auto;
+	// background: #f001;
-  overflow: hidden;
 }
 
 table {
-  width: 100%;
+	width: 100%;
-  border-spacing: adjust(1px);
+	border-spacing: adjust(1px);
 }
 
+// .table-1 {
+//   background: #00f3;
+// }
+
 // tr, td, th {
 // 	max-height: 13.88px !important;
 // }
 
 .t-row {
-  height: adjust(14px);
+	height: adjust(14px);
+}
+
+.tables {
+	overflow: hidden;
 }
 
 .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: adjust(10px);
+	font-size: adjust(8px);
-  line-height: 1.5;
+	font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC,
-  padding: adjust(3px) adjust(8px);
+		Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei,
-  font-weight: 400;
+		"微软雅黑", Arial, Helvetica, sans-serif;
-  background: #044a8446;
+	line-height: 1.25;
-  text-align: left;
+	letter-spacing: 1px;
+	padding: adjust(3px) adjust(8px);
+	font-weight: 600;
+	background: #4288df23;
+	color: #030609d6;
+	text-align: left;
 }
 
-tbody > tr:nth-child(odd) {
+tbody > tr:nth-child(even) {
-  background: #0b549960;
+  background: #4288df13;
 }
 
 tbody > tr td {
-  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: adjust(8px);
+	height: adjust(8px * 1.2);
+	line-height: 1.2;
+	padding: adjust(2px) adjust(8px);
+	font-weight: 400;
+  overflow: hidden;
+	background: inherit;
 }
 
 tbody > tr td:first-child {
-  text-align: center;
+	text-align: center;
 }
 </style>

src/components/boxes/GasFlow.vue

@@ -1,25 +1,13 @@
 <template>
 	<!-- 天然气流量 -->
 	<Container usage="Charts">
-		<SubContainer title="天然气流量" icon="gas" padding="34px">
+		<SubContainer title="天然气流量" icon="gas" padding="24px 32px">
 			<div class="tables flex" style="height: 100%">
-				<LineChart
+				<LineChart key="1" id="line-chart-3" class="flex-1" unit="单位 m³/h" :legend="Object.keys(gasTable1)"
-					key="1"
+					:series="gasTable1" />
-					id="line-chart-3"
-					class="flex-1"
-					unit="单位 m³/h"
-					:legend="Object.keys(gasTable1)"
-					:series="gasTable1"
-				/>
 				<div class="vertical-line"></div>
-				<LineChart
+				<LineChart key="2" id="line-chart-4" class="flex-1" unit="单位 m³/h" :legend="Object.keys(gasTable2)"
-					key="2"
+					:series="gasTable2" />
-					id="line-chart-4"
-					class="flex-1"
-					unit="单位 m³/h"
-					:legend="Object.keys(gasTable2)"
-					:series="gasTable2"
-				/>
 			</div>
 		</SubContainer>
 	</Container>
@@ -57,12 +45,10 @@ export default {
 .vertical-line {
 	margin: 0 adjust(3px);
 	width: adjust(3px);
-	background: radial-gradient(
+	background: radial-gradient(ellipse at center,
-		ellipse at center,
+			#3565ff,
-		#6fe2ff,
+			#3565ff51,
-		#52cbef80,
+			transparent,
-		transparent,
+			transparent);
-		transparent
-	);
 }
 </style>

src/components/boxes/HistoryTemp.vue

@@ -7,13 +7,13 @@
       style="
         position: absolute;
         top: 8px;
-        left: -30px;
+        left: -20px;
         width: 110%;
         height: 105%;
         background: #eee1;
         display: grid;
         place-items: center;
-        font-size: 24px;
+        font-size: 12px;
         color: #eee9;
       "
     >
@@ -62,9 +62,9 @@ h3 {
   margin: 0;
   font-family: sans-serif;
   font-weight: 400;
-  font-size: adjust(14px);
+  font-size: adjust(h(20px));
-  letter-spacing: adjust(1px);
+  letter-spacing: 1px;
-  color: #52fff8;
+  color: #0c71ff;
-  margin: adjust(12px) 0;
+  margin: adjust(h(12px)) 0;
 }
 </style>

src/components/boxes/InWater.vue

@@ -1,44 +1,18 @@
 <template>
   <!-- 窑炉进口水温 -->
-  <Container usage="NumberAndChart">
+  <Container class="in-water" usage="NumberAndChart">
-    <SubContainer title="窑炉进口水温" icon="inWater" padding="34px">
+    <SubContainer title="进口实时水温" icon="inWater">
       <div class="pic" style=""></div>
       <div class="content flex flex-col">
         <div class="realtime">
           <div class="time flex flex-center">
-            <template v-for="(item, index) in waterInTemp.split('')">
+            <span class="temp-data">{{ waterInTemp }}</span>
-              <DigitalBox
-                v-if="item !== '.'"
-                class="time--item"
-                :key="index"
-                :value="item"
-                :wider="true"
-              />
-              <span
-                :key="index"
-                v-else
-                style="
-                  background: #fff;
-                  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
+          <HistoryTrend key="water-in" title="窑炉进口水温历史" :series="kilnWaterIn" />
-            key="water-in"
-            title="窑炉进口水温历史"
-            :series="kilnWaterIn"
-          />
         </div>
       </div>
     </SubContainer>
@@ -71,12 +45,18 @@ export default {
 <style scoped lang="scss">
 @import "../../assets/styles/functions";
 
-.pic {
+.in-water {
-  background: url(../../assets/in-water.png) no-repeat;
-  background-size: 100% 100%;
-  background-position: center;
   position: absolute;
-  top: adjust(24px);
+  top: adjust(h(430px));
+  left: adjust(w(5630px));
+  height: adjust(h(620px));
+  width: adjust(w(880px));
+}
+
+.pic {
+  background: url(../../assets/in-water.png) top 0 left 0 / 90% no-repeat;
+  position: absolute;
+  top: adjust(10px);
   right: 0;
   width: adjust(w(440px));
   height: adjust(h(380px));
@@ -87,8 +67,8 @@ export default {
 }
 
 .wave {
-  transform: translateX(adjust(-16px));
+  transform: translateX(adjust(-8px));
-  width: adjust(w(793px));
+  width: adjust(w(852px));
   height: adjust(h(76px));
   background: url(../../assets/inwater.png) no-repeat;
   background-size: 100% 100%;
@@ -103,9 +83,10 @@ export default {
   // background: #eee;
 }
 
+
 .time {
   // background: #eee;
-  margin: adjust(12px) 0;
+  margin: adjust(6px) 0 0;
   padding-left: adjust(14px);
 }
 
@@ -113,44 +94,20 @@ export default {
   margin-right: adjust(5px);
 }
 
+.temp-data {
+  color: #0068ff;
+  font-size: adjust(h(88px));
+  letter-spacing: 1px;
+}
+
 .unit {
-  font-family: Ubuntu, monospace, sans-serif !important;
+  font-family: sans-serif !important;
-  font-size: adjust(20px);
+  font-size: adjust(h(48px));
-  letter-spacing: adjust(1px);
+  font-weight: 400;
+  letter-spacing: 1px;
   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/OilFlow.vue

@@ -1,7 +1,7 @@
 <template>
 	<!-- 油流量 -->
 	<Container usage="Charts">
-		<SubContainer title="油流量" icon="oil" padding="34px">
+		<SubContainer title="油流量" icon="oil" padding="24px 32px">
 			<div class="tables flex" style="height: 100%">
 				<LineChart
 					key="1"
@@ -30,6 +30,7 @@ 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",
@@ -38,10 +39,62 @@ 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()),
+				OT009: Array(24)
+					.fill(1)
+					.map((_) => randomInt()),
+				OT000: Array(24)
+					.fill(1)
+					.map((_) => randomInt()),
+				OT011: Array(24)
+					.fill(1)
+					.map((_) => randomInt()),
+			},
 		};
 	},
 	computed: {
-		...mapState(["oilTable1", "oilTable2"]),
+		// ...mapState(["oilTable1", "oilTable2"]),
 	},
 };
 </script>
@@ -59,8 +112,8 @@ export default {
 	width: adjust(3px);
 	background: radial-gradient(
 		ellipse at center,
-		#6fe2ff,
+		#3565ff,
-		#52cbef80,
+		#3565ff51,
 		transparent,
 		transparent
 	);

src/components/boxes/OutWater.vue

@@ -1,44 +1,18 @@
 <template>
   <!-- 窑炉出口水温 -->
-  <Container usage="NumberAndChart">
+  <Container class="out-water" usage="NumberAndChart">
-    <SubContainer title="窑炉出口水温" icon="inWater" padding="34px">
+    <SubContainer title="出口实时水温" icon="inWater">
       <div class="pic" style=""></div>
       <div class="content flex flex-col">
         <div class="realtime">
           <div class="time flex flex-center">
-            <template v-for="(item, index) in waterOutTemp.split('')">
+            <span class="temp-data">{{ waterOutTemp }}</span>
-              <DigitalBox
-                v-if="item !== '.'"
-                class="time--item"
-                :key="index"
-                :value="item"
-                :wider="true"
-              />
-              <span
-                :key="index"
-                v-else
-                style="
-                  background: #fff;
-                  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
+          <HistoryTrend key="water-out" title="窑炉出口水温历史" :series="kilnWaterOut" />
-            key="water-out"
-            title="窑炉出口水温历史"
-            :series="kilnWaterOut"
-          />
         </div>
       </div>
     </SubContainer>
@@ -67,16 +41,21 @@ export default {
   },
 };
 </script>
-
 <style scoped lang="scss">
 @import "../../assets/styles/functions";
 
-.pic {
+.out-water {
-  background: url(../../assets/out-water.png) no-repeat;
-  background-size: 100% 100%;
-  background-position: center;
   position: absolute;
-  top: adjust(24px);
+  top: adjust(h(1065px));
+  left: adjust(w(5630px));
+  height: adjust(h(620px));
+  width: adjust(w(880px));
+}
+
+.pic {
+  background: url(../../assets/out-water.png) top 0 left 0 / 90% no-repeat;
+  position: absolute;
+  top: adjust(10px);
   right: 0;
   width: adjust(w(440px));
   height: adjust(h(380px));
@@ -87,10 +66,10 @@ export default {
 }
 
 .wave {
-  transform: translateX(adjust(-16px)) rotateY(0.5turn);
+  transform: translateX(adjust(-8px));
-  width: adjust(w(793px));
+  width: adjust(w(852px));
   height: adjust(h(76px));
-  background: url(../../assets/inwater.png) no-repeat;
+  background: url(../../assets/outwater.png) no-repeat;
   background-size: 100% 100%;
 }
 
@@ -103,9 +82,10 @@ export default {
   // background: #eee;
 }
 
+
 .time {
   // background: #eee;
-  margin: adjust(12px) 0;
+  margin: adjust(4px) 0 0;
   padding-left: adjust(14px);
 }
 
@@ -113,44 +93,20 @@ export default {
   margin-right: adjust(5px);
 }
 
+.temp-data {
+  color: #0068ff;
+  font-size: adjust(h(88px));
+  letter-spacing: 1px;
+}
+
 .unit {
-  font-family: Ubuntu, monospace, sans-serif !important;
+  font-family: sans-serif !important;
-  font-size: adjust(20px);
+  font-size: adjust(h(48px));
-  letter-spacing: adjust(1px);
+  font-weight: 400;
+  letter-spacing: 1px;
   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,25 +1,13 @@
 <template>
 	<!-- 窑顶温度 -->
 	<Container usage="Charts">
-		<SubContainer title="窑顶温度" icon="ktop" padding="34px">
+		<SubContainer title="窑顶温度" icon="ktop" padding="24px 32px">
 			<div class="tables flex" style="height: 100%">
-				<LineChart
+				<LineChart key="1" id="line-chart-5" class="flex-1" unit="单位/℃" :legend="Object.keys(kilnTop1)"
-					key="1"
+					:series="kilnTop1" />
-					id="line-chart-5"
-					class="flex-1"
-					unit="单位/℃"
-					:legend="Object.keys(kilnTop1)"
-					:series="kilnTop1"
-				/>
 				<div class="vertical-line"></div>
-				<LineChart
+				<LineChart key="2" id="line-chart-6" class="flex-1" unit="单位/℃" :legend="Object.keys(kilnTop2)"
-					key="2"
+					:series="kilnTop2" />
-					id="line-chart-6"
-					class="flex-1"
-					unit="单位/℃"
-					:legend="Object.keys(kilnTop2)"
-					:series="kilnTop2"
-				/>
 			</div>
 		</SubContainer>
 	</Container>
@@ -65,12 +53,10 @@ export default {
 .vertical-line {
 	margin: 0 adjust(3px);
 	width: adjust(3px);
-	background: radial-gradient(
+	background: radial-gradient(ellipse at center,
-		ellipse at center,
+			#3565ff,
-		#6fe2ff,
+			#3565ff51,
-		#52cbef80,
+			transparent,
-		transparent,
+			transparent);
-		transparent
-	);
 }
 </style>

src/components/charts/BarChart.vue

@@ -75,27 +75,27 @@ export default {
         this.chart = echarts.init(document.getElementById(this.id));
       this.chart.setOption({
         grid: {
-          top: adjust(20),
+          top: adjust(0),
-          left: adjust(28),
+          left: adjust(10),
-          bottom: adjust(18),
+          bottom: adjust(10),
-          right: adjust(12),
+          right: adjust(0),
         },
         xAxis: {
           type: "category",
           data: this.updateXAxis(),
           axisLine: {
             lineStyle: {
-              color: "#5982b2a0",
+              color: '#0068ff33'
             },
           },
           axisTick: {
             show: false,
           },
           axisLabel: {
-            color: "#fff9",
+            color: "#3C4E8B",
-            fontSize: adjust(8),
+            fontSize: adjust(4),
-            lineHeight: adjust(1),
+            lineHeight: adjust(0),
-            margin: adjust(6),
+            margin: adjust(4),
             rotate: 30,
           },
         },
@@ -110,7 +110,7 @@ export default {
           axisLine: {
             show: true,
             lineStyle: {
-              color: "#5982b2a0",
+              color: '#0068ff33'
             },
           },
           axisTick: {
@@ -118,13 +118,13 @@ export default {
           },
           axisLabel: {
             formatter: "{value} ℃",
-            color: "#fff9",
+            color: "#3C4E8B",
-            fontSize: adjust(8),
+            fontSize: adjust(4),
-            lineHeight: adjust(1),
+            lineHeight: adjust(0),
           },
           splitLine: {
             lineStyle: {
-              color: "#5982b2a0",
+            color: '#0068ff33'
             },
           },
           // data: [100, 200, 300, 400, 500],

src/components/charts/LineChart.vue

@@ -3,7 +3,7 @@
   <div class="line-chart__wrapper">
     <div class="line-chart__custom-legend flex" v-if="legend.length">
       <!-- <span>产线1 - 产线5</span> -->
-      <ul style="" class="flex">
+      <ul style="" class="">
         <li v-for="(v, i) in legend" :key="i">{{ v }}</li>
       </ul>
     </div>
@@ -19,8 +19,9 @@
         height: 100%;
         display: grid;
         place-items: center;
-        font-size: 24px;
+        font-size: 18px;
-        color: #eee8;
+        letter-spacing: 2px;
+        color: #3C4E8B;
         user-select: none;
       "
     >
@@ -95,9 +96,11 @@ export default {
         "#7138FF",
         "#F318D8",
         "#C0F318",
-        "#f77",
+        "#ff7777",
-        "#19f",
+        "#1199ff",
-        "#98f",
+        "#9988ff",
+        "#3388ff",
+        "#337788",
       ],
       data: [],
       legendtext: [
@@ -142,11 +145,12 @@ export default {
         this.chart = echarts.init(document.getElementById(this.id));
       this.chart.setOption({
         grid: {
-          top: adjust(32),
+          top: adjust(22),
-          left: adjust(32),
+          left: adjust(22),
-          bottom: adjust(24),
+          bottom: adjust(20),
-          right: adjust(12),
+          right: adjust(8),
         },
+        tooltip: {},
         xAxis: {
           data: this.updateXAxis(),
           axisLine: {
@@ -158,20 +162,21 @@ export default {
             show: false,
           },
           axisLabel: {
-            color: "#fff9",
+            color: "#3C4E8Baa",
-            fontSize: adjust(8),
+            fontSize: adjust(6),
-            lineHeight: adjust(1),
+            lineHeight: adjust(0),
-            margin: adjust(8),
+            margin: adjust(4),
-            rotate: 30,
+            rotate: 45,
           },
         },
         yAxis: {
           type: "value",
           name: this.unit,
           nameTextStyle: {
-            color: "#fff9",
+            color: "#3C4E8Baa",
-            fontSize: adjust(9),
+            fontSize: adjust(8),
-            align: "",
+            lineHeight: adjust(12),
+            align: "center",
           },
           axisLine: {
             show: true,
@@ -184,9 +189,9 @@ export default {
             show: false,
           },
           axisLabel: {
-            color: "#fff9",
+            color: "#3C4E8Baa",
-            fontSize: adjust(8),
+            fontSize: adjust(7),
-            lineHeight: adjust(1),
+            lineHeight: adjust(0),
           },
           splitLine: {
             lineStyle: {
@@ -229,7 +234,7 @@ export default {
               name: lgd,
               type: "line",
               symbol: "circle",
-              symbolSize: adjust(3),
+              symbolSize: adjust(2),
               lineStyle: {
                 width: adjust(1),
               },
@@ -276,50 +281,47 @@ li {
 }
 
 ul {
-  // padding: 0 adjust(8px);
+  // background: #0005;
-  display: flex;
+  width: 100%;
-  flex-wrap: wrap;
+  height: adjust(14px);
-  justify-content: flex-end;
-  align-items: center;
-  height: adjust(28px);
-  // background: #eeec;
-  // overflow-x: hidden;
   white-space: pre-wrap;
-  padding-bottom: adjust(2px);
+  padding-bottom: 0;
+  padding-left: adjust(6px);
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  column-gap: 6px;
+  // column-span: none;
+  justify-items: end;
+  align-items: end;
 }
 
 li {
-  text-align: right;
+  padding-left: adjust(1px);
   position: relative;
-  min-width: 40px;
+  // background: #f003;
-  margin-right: adjust(9px);
+  user-select: none;
-  padding: 0 adjust(2px);
-}
-
-li:not(:last-child) {
-  // margin-right: adjust(16px);
 }
 
 .line-chart__custom-legend {
   position: absolute;
-  top: adjust(-32px);
+  top: adjust(-20px);
   right: 0;
-  font-size: adjust(9px);
+  font-size: adjust(5px);
   font-family: Ubuntu, sans-serif;
   padding: 0;
   // max-width: 100%;
-  width: 65%;
+  width: 75%;
-  align-items: flex-start;
+  align-items: flex-end;
   justify-content: flex-end;
 }
 
 li::before {
   content: "";
   position: absolute;
-  top: adjust(2px);
+  top: adjust(.5px);
-  left: adjust(-8px);
+  left: adjust(-5px);
-  width: adjust(8px);
+  width: adjust(5px);
-  height: adjust(8px);
+  height: adjust(5px);
   border-radius: adjust(1px);
   background: #eee6;
 }
@@ -357,11 +359,14 @@ li:nth-child(10)::before {
 li:nth-child(11)::before {
   background: #98f;
 }
+li:nth-child(12)::before {
+  background: #38f;
+}
 
 .line-chart__wrapper {
   position: relative;
-  background: #7771;
+  background: #3564ff0f;
-  border-radius: adjust(3px);
+  border-radius: adjust(4px);
   backdrop-filter: blur(adjust(2px));
   box-shadow: inset 0 0 adjust(10px) adjust(2px) rgba($color: #fff, $alpha: 0.1);
   height: 100%;

src/components/common/SmallBox2.vue

@@ -56,39 +56,41 @@ export default {
 @import "../../assets/styles/functions";
 
 .small-box-2 {
-	padding: adjust(14px);
+	flex-shrink: 0;
-	// border: 1px solid gray;
+	padding: 0;
-	// 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: adjust(w(465px));
+	width: adjust(w(820px));
-	// height: adjust(h(200px));
+	height: adjust(h(350px));
-	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 {
-		width: adjust(h(128px));
+		margin-top: adjust(h(56px));
-		height: adjust(h(128px));
+		margin-left: adjust(w(24px));
+		width: adjust(h(172px));
+		height: adjust(h(172px));
 	}
-
+	
 	.info {
+		margin-top: adjust(h(56px));
+		flex: 1 auto;
 		font-family: "微软雅黑", sans-serif;
+		padding-left: adjust(5px);
 
 		h2 {
-			font-size: adjust(16px);
+			font-size: adjust(12px);
 			opacity: 0.7;
-			// line-height: adjust(12px);
 			letter-spacing: adjust(1px);
 			font-weight: 400;
-			color: hsla(0, 0%, 100%, 0.9);
+			color: hsla(0, 0%, 0%, 0.9);
 		}
 
 		.value {
-			color: #fff;
+			color: #030609;
-			font-size: adjust(30px);
+			font-size: adjust(18px);
-			line-height: adjust(29px);
+			line-height: adjust(22px);
 		}
 	}
 }

src/components/groups/data.vue

@@ -0,0 +1,71 @@
+<template>
+  <section class="data-group absolute">
+    <OilFlow />
+    <GasFlow />
+    <TopTemp />
+    <BottomTemp />
+    <OilFlow />
+    <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 { mapState } from "vuex";
+
+export default {
+  name: "DataGroup",
+  props: {},
+  components: {
+    FanRuntime,
+    OilFlow,
+    GasFlow,
+    TopTemp,
+    BottomTemp,
+  },
+  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;
+  width: adjust(w(13700px));
+  height: adjust(h(830px));
+  // width: adjust(w(13500px));
+  // height: adjust(h(960px));
+  position: absolute;
+  top: adjust(h(3390px));
+  // top: adjust(h(3265px));
+  left: adjust(w(3700px));
+}
+
+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: adjust(h(64px));
+  font-weight: 400;
+  letter-spacing: 1px;
+  position: absolute;
+  color: $main-color;
+  top: 0;
+  left: 0;
+}
+
+.data-group {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+</style>

src/components/groups/environ.vue

@@ -0,0 +1,47 @@
+<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 {
+  background: url('../../assets/fault-analysis.png') left 144px top 4px / 79% 54% no-repeat, #ccc7;
+  width: adjust(w(1900px));
+  height: adjust(h(1260px));
+  position: absolute;
+  top: adjust(h(430px));
+  // left: adjust(w(15300px));
+  left: adjust(w(15500px));
+}
+
+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: adjust(h(64px));
+  font-weight: 400;
+  letter-spacing: 1px;
+  position: absolute;
+  color: $main-color;
+  top: 0;
+  left: 0;
+}
+</style>

src/components/groups/fault.vue

@@ -0,0 +1,46 @@
+<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 {
+  background: url('../../assets/fault-analysis.png') left 144px top 4px / 79% 54% no-repeat, #ccc7;
+  width: adjust(w(1900px));
+  height: adjust(h(1260px));
+  position: absolute;
+  top: adjust(h(430px));
+  left: adjust(w(3700px));
+}
+
+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: adjust(h(64px));
+  font-weight: 400;
+  letter-spacing: 1px;
+  position: absolute;
+  color: $main-color;
+  top: 0;
+  left: 0;
+}
+</style>

src/components/groups/monitor.vue

@@ -0,0 +1,46 @@
+<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';
+  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

@@ -0,0 +1,48 @@
+<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: url('../../assets/middle1.png') left 144px top 4px / 97% 420px no-repeat, #ccc7;
+  width: adjust(w(13700px));
+  height: adjust(h(1600px));
+  // width: adjust(w(13500px));
+  // height: adjust(h(1470px));
+  position: absolute;
+  top: adjust(h(1740px));
+  left: adjust(w(3700px));
+}
+
+section::before {
+  content: '监控组 2';
+  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

@@ -0,0 +1,47 @@
+<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/fireSvg.vue

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

src/components/icons/switchSvg.vue

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

src/components/icons/tempSvg.vue

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

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

@@ -1,12 +1,20 @@
 <template>
   <DragabbleContainer class="isolate-area-1">
-    <SmallBox2
+    <div class="data pressure">
-      v-for="rd in rdata"
+      <span>压</span>
-      :key="rd.icon"
+      <span>力</span>
-      :icon="rd.icon"
+      <span v-for="press, index in pressure" :key="index"
-      :title="rd.title"
+        :class="{ 'digit': true, 'dot': press == '.' ? true : false }">{{ press
-      :value="rd.value"
+        }}</span>
-    ></SmallBox2>
+      <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>
 
@@ -22,22 +30,24 @@ export default {
   components: { DragabbleContainer, SmallBox2 },
   data() {
     return {
+      pressure: '10.1'.split(''),
+      runtime: '0012'.split(''),
       rdata: [
         // { icon: "temp", title: "车间温度", value: "27℃" },
         { icon: "fire", title: "当前火向", value: "" },
         { icon: "clock", title: "换火时间", value: "20分" },
-        { icon: "sand", title: "剩余时间", value: "0" },
+        { icon: "sand", title: "剩余时间", value: "19分20秒" },
       ],
     };
   },
   watch: {
-    fireDirection: function(val) {
+    fireDirection: function (val) {
       this.$set(this.rdata[0], 'value', val)
     },
-    fireChangeTime: function(val) {
+    fireChangeTime: function (val) {
       this.$set(this.rdata[1], 'value', val)
     },
-    lastFireChangeTime: function(val) {
+    lastFireChangeTime: function (val) {
       let [_, min, sec] = /(\d+)分(\d+)秒/.exec(val || '0分0秒')
       if (timeFun) clearInterval(timeFun)
       timeFun = setInterval(() => {
@@ -56,25 +66,6 @@ export default {
   },
   computed: {
     ...mapState(["fireDirection", "lastFireChangeTime", "fireChangeTime"]),
-    // rdata() {
-    //   let [_, min, sec] = /(\d+)分(\d+)秒/.exec(this.lastFireChangeTime)
-    //   min = +min 
-    //   sec = +sec 
-    //   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>
@@ -84,11 +75,42 @@ export default {
 
 .isolate-area-1 {
   display: flex;
+  color: $main-color; 
+  min-width: 300px;
+  align-items: center;
 
-  > .small-box-2:not(:last-child) {
+  > *:not(:last-child) {
     margin: {
-      right: adjust(15px);
+      right: adjust(10px);
     }
   }
+
+  > .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: adjust(w(220px));
+    height: adjust(h(260px));
+    color: #0068ffaa;
+    font-size: h(200px);
+    line-height: h(600px);
+    text-align: center;
+    vertical-align: bottom;
+  }
+  
+  > .data > span.digit {
+    /** 数字字体大小 */
+    color: #0071ff;
+    font-size: h(360px);
+    line-height: h(540px);
+  }
 }
 </style>

src/components/layout/Container.vue

@@ -33,8 +33,8 @@ export default {
 			},
 		};
 	},
-	created() {},
+	created() { },
-	mounted() {},
+	mounted() { },
 	methods: {},
 };
 </script>
@@ -44,39 +44,35 @@ export default {
 @import "../../assets/styles/variables";
 
 .number-or-date {
-  display: inline-block;
+	display: inline-block;
-  width: adjust(w(800px));
+	// background: url(../../assets/box-number.png) 0 0 / 100% 100% no-repeat;
-  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: adjust(w(800px));
+	// width: adjust(w(1115px));
-  height: adjust(h(528px));
+	width: adjust(w(1400px));
-  background: url(../../assets/box-table.png);
+	height: adjust(h(700px));
-  background-position: 0 0; /** top left */
+	background: url(../../assets/box-table.png);
-  background-size: 100% 100%;
+	background-position: 0 0;
+	/** top left */
+	background-size: 100% 100%;
 }
 
 .charts {
-  display: inline-block;
+	display: inline-block;
-  width: adjust(w(1580px));
+	width: adjust(w(2440px));
-  height: adjust(h(520px));
+	height: adjust(h(700px));
-  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%;
+	/** top left */
+	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);
+	background: url(../../assets/box-right.png) 0 0 / 100% 100% no-repeat;
-  background-position: 0 0; /** top left */
-  background-size: 100% 100%;
 }
-
 </style>

src/components/layout/Header.vue

@@ -1,27 +1,31 @@
 <template>
-  <header class="header">
+  <header class="header relative">
     <div>
       <span class="header--logo">
         <!-- <img src="../../assets/logo.png" alt="logo"> -->
       </span>
-      <h1>宜兴三期生产线大数据指挥中心</h1>
+      <h1>凯盛晶华玻璃有限公司800t/d特种玻璃生产线大数据指挥中心</h1>
     </div>
-    <span class="header--wing absolute company"></span>
+    <span class="header--wing absolute company">
+      设计单位: 中建材智能自动化研究院
+    </span>
     <span class="header--wing absolute datetime">
-      {{ moment(today).format("YYYY.M.D dddd HH:mm:ss") }}
+      {{ moment(today).format('YYYY.M.D dddd') }}
+      &nbsp;&nbsp;
+      {{ moment(today).format('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: {
@@ -41,10 +45,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);
   },
@@ -66,65 +70,69 @@ export default {
 @import "../../assets/styles/variables";
 
 header {
-  position: absolute;
+  background: url(../../assets/header.png) center / 65% 100% no-repeat;
-  width: 100%;
+  // background-size: 100% 100%;
-  top: 0;
+  // background-size: 13515px 634px;
-  left: 0;
+  // background-position: bottom;
-  z-index: 10000;
+  height: adjust(h(580px));
-  background: url(../../assets/header.png) no-repeat;
+  width: adjust(w(21120px));
-  background-position: center;
-  background-size: contain;
-  // background-size: 100%;
-  height: 146px;
   display: grid;
-  place-content: center;
+  place-items: center;
+  // padding-bottom: adjust(2px);
 
-  > div {
+  >div {
     display: flex;
     align-items: center;
-    margin-bottom: 0;
+    margin-bottom: adjust(10px);
+    margin-left: adjust(64px);
 
     .header--logo {
-      margin-top: 12px;
+      width: adjust(128px);
-      width: 64px;
+      height: adjust(h(337px));
-      height: 94px;
       background: url(../../assets/logo.png) center/contain no-repeat;
     }
 
     h1 {
-      margin-left: 36px;
+      margin-left: adjust(20px);
-      font-size: 72px;
+      font-size: adjust(42px);
       user-select: none;
-      letter-spacing: 14px;
+      letter-spacing: adjust(6px);
-      font-weight: 400;
+      font-weight: 600;
       color: $main-color;
-      font-family: "微软雅黑", sans-serif;
+      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;
     }
   }
 }
 
 .header--wing {
+  top: adjust(h(128px));
   left: 0;
-  bottom: -20px;
+  bottom: adjust(10px);
-  height: 72px;
+  height: adjust(h(130px));
+  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 {
-  margin-left: 1458px;
+  margin-left: adjust(w(4035px));
-  width: 768px;
+  height: adjust(h(130px));
-  height: 67px;
+  // font-weight: 600;
-  background: url("../../assets/company.png") center/cover no-repeat;
+  text-align: center;
+  color: lighten($main-color, 8);
+  font-size: adjust(h(90px));
+  letter-spacing: unset;
+  // background: red;
+  // width: adjust(w(1320px));
+  // background: url("../../assets/company.png") center/cover no-repeat;
 }
 
 .datetime {
   color: $main-color;
-  font-size: 48px;
+  font-size: adjust(h(90px));
   text-align: center;
-  // display: inline-block;
+  margin-left: adjust(w(15420px));
-  left: unset;
+  color: lighten($main-color, 8);
-  right: 1573px;
+  height: adjust(h(130px));
-  width: 646px;
+  // width: adjust(w(1764px));
-  height: 67px;
+  // background: url("../../assets/date.png") center/cover no-repeat;
-  background: url("../../assets/date.png") center/cover no-repeat;
 }
 </style>

src/components/layout/Main.vue

@@ -1,81 +1,70 @@
 <template>
 	<main class="">
+		<!-- 监控组 -->
+		<MonitorGroup />
+
+		<!-- 缺陷分析 -->
+		<FaultAnalysis />
+
+		<!-- 环境浓度 -->
+		<Environ />
+
+		<!-- 监控组 2 -->
+		<MonitorGroup2 />
+
+		<!-- 监控组 3 -->
+		<MonitorGroup3 />
+
+		<!-- 数据组 -->
+		<DataGroup />
+
 		<div class="video-crash" v-if="false"></div>
 
 		<div class="eq-main absolute">
-			<div
+			<div class="arrow ar-top-left" :class="topLeftArrowRolling === '运行' ? 'ar-running' : ''"></div>
-				class="arrow ar-top-left"
+			<div class="arrow ar-top-right" :class="topRightArrowRolling === '运行' ? 'ar-running' : ''"></div>
-				:class="topLeftArrowRolling === '运行' ? 'ar-running' : ''"
+			<div class="arrow ar-bottom-left" :class="bottomLeftArrowRolling === '运行' ? 'ar-running' : ''"></div>
-			></div>
+			<div class="arrow ar-bottom-right" :class="bottomRightArrowRolling === '运行' ? 'ar-running' : ''"></div>
-			<div
-				class="arrow ar-top-right"
-				:class="topRightArrowRolling === '运行' ? 'ar-running' : ''"
-			></div>
-			<div
-				class="arrow ar-bottom-left"
-				:class="bottomLeftArrowRolling === '运行' ? 'ar-running' : ''"
-			></div>
-			<div
-				class="arrow ar-bottom-right"
-				:class="bottomRightArrowRolling === '运行' ? 'ar-running' : ''"
-			></div>
 
 			<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 class="video-bottom" v-show="fireDirection === '北火'" style="">
+			<div class="video-bottom--wrapper" v-show="true || fireDirection === '北火'" style="">
-				<video
+				<video class="video-bottom" id="1" preload="auto" height="130" muted autoplay loop disablepictureinpicture
-					id="1"
+					src="../../assets/videos/fire-to-top.mp4"></video>
-					preload="auto"
-					height="260"
-					muted
-					autoplay
-					loop
-					disablepictureinpicture
-					src="../../assets/videos/fire-to-top.mp4"
-				></video>
 			</div>
 
-			<div class="video-top" v-show="fireDirection === '南火'" style="">
+			<div class="video-top--wrapper" v-show="true || fireDirection === '南火'" style="">
-				<video
+				<video id="2" class="video-top" preload="auto" height="130" muted autoplay loop disablepictureinpicture
-					id="2"
+					src="../../assets/videos/fire-to-bottom.mp4"></video>
-					class="video-top"
-					preload="auto"
-					height="260"
-					muted
-					autoplay
-					loop
-					disablepictureinpicture
-					src="../../assets/videos/fire-to-bottom.mp4"
-				></video>
 			</div>
 		</div>
 
 		<AreaOne class="area-one" />
 
-		<div class="absolute left kiln-runtime">
+		<!-- <div class="absolute left kiln-runtime">
 			<KilnRuntime />
 		</div>
 		<div class="absolute left kiln-pressure">
@@ -98,28 +87,33 @@
 		</div>
 		<div class="absolute left ou-temp">
 			<XicaoTemp />
-		</div>
+		</div> -->
-		<div class="absolute in-water">
+
-			<InWater />
+
-		</div>
+		<InWater />
-		<div class="absolute out-water">
+		<OutWater />
-			<OutWater />
+
-		</div>
 	</main>
 </template>
 
 <script>
-import KilnRuntime from "../boxes/KilnRuntime.vue";
+// import KilnRuntime from "../boxes/KilnRuntime.vue";
-import KilnPressure from "../boxes/KilnPressure.vue";
+// import KilnPressure from "../boxes/KilnPressure.vue";
-import OilFlow from "../boxes/OilFlow.vue";
+// import OilFlow from "../boxes/OilFlow.vue";
-import GasFlow from "../boxes/GasFlow.vue";
+// import GasFlow from "../boxes/GasFlow.vue";
-import TopTemp from "../boxes/TopTemp.vue";
+// import TopTemp from "../boxes/TopTemp.vue";
-import BottomTemp from "../boxes/BottomTemp.vue";
+// import BottomTemp from "../boxes/BottomTemp.vue";
-import XicaoTemp from "../boxes/XicaoTemp.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 FanRuntime from "../boxes/FanRuntime.vue";
 import AreaOne from "../isolate-area-1/Area.vue";
+import MonitorGroup from '../groups/monitor.vue'
+import MonitorGroup2 from '../groups/monitor2.vue'
+import MonitorGroup3 from '../groups/monitor3.vue'
+import DataGroup from '../groups/data.vue'
+import FaultAnalysis from '../groups/fault.vue'
+import Environ from '../groups/environ.vue'
 // import Container from './Container.vue'
 import { mapMutations, mapState } from "vuex";
 
@@ -128,15 +122,21 @@ import WsClient from "../../utils/wsClass";
 export default {
 	name: "Main",
 	components: {
+		DataGroup,
+		MonitorGroup,
+		MonitorGroup2,
+		MonitorGroup3,
+		Environ,
+		FaultAnalysis,
 		AreaOne,
-		KilnRuntime,
+		// KilnRuntime,
-		KilnPressure,
+		// KilnPressure,
-		FanRuntime,
+		// FanRuntime,
-		OilFlow,
+		// OilFlow,
-		GasFlow,
+		// GasFlow,
-		TopTemp,
+		// TopTemp,
-		BottomTemp,
+		// BottomTemp,
-		XicaoTemp,
+		// XicaoTemp,
 		InWater,
 		OutWater,
 	},
@@ -174,19 +174,19 @@ export default {
 main {
 	height: 1px;
 	flex: 1;
-	// background: #eee2;
+	// background: #f2e2;
 }
 
 .area-one {
 	position: absolute;
-	top: adjust(160px);
+	top: adjust(150px);
-	left: adjust(1588px);
+	left: adjust(1310px);
 }
 
 .video-crash {
 	height: adjust(h(424px));
 	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;
@@ -196,9 +196,9 @@ main {
 
 .video-bottom {
 	position: absolute;
-	bottom: adjust(200.5px);
+	bottom: adjust(207px);
-	left: adjust(48px);
+	left: adjust(29px);
-	transform: scale(0.9);
+	transform: scale(0.95);
 }
 
 .video-top {
@@ -209,8 +209,8 @@ main {
 }
 
 .arrow {
-	width: adjust(20px);
+	width: adjust(12px);
-	height: adjust(20px);
+	height: adjust(12px);
 	display: inline-block;
 	position: absolute;
 	background: #ff5757;
@@ -221,116 +221,95 @@ main {
 	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: 145px;
+	top: 66px;
-	left: 65px;
+	left: 38px;
-}
-.ar-top-left {
-	top: 175px;
-	left: 985px;
-}
-.ar-bottom-left {
-	top: 445px;
-	left: 960px;
-}
-.ar-bottom-right {
-	top: 460px;
-	left: 20px;
 }
 
-// @keyframes clock-direction {
+.ar-top-left {
-// 	0% {
+	top: 88px;
-// 		transform: rotate(0deg);
+	left: 515px;
-// 	}
+}
-// 	100% {
+
-// 		transform: rotate(360deg);
+.ar-bottom-left {
-// 	}
+	top: 232px;
-// }
+	left: 500px;
-// @keyframes reverse-clock-direction {
+}
-// 	0% {
+
-// 		transform: rotate(0deg);
+.ar-bottom-right {
-// 	}
+	top: 258px;
-// 	100% {
+	left: 14px;
-// 		transform: rotate(-360deg);
+}
-// 	}
-// }
 
 .swd {
-	background-size: 100%;
+	// background-size: 100% 10px;
-	width: adjust(w(276px));
+	width: adjust(w(376px));
-	height: adjust(h(156px));
+	height: adjust(h(218px));
 	position: absolute;
 	transform: rotateY(180deg);
+
 	p {
 		margin: 0;
-		margin-top: adjust(12px);
+		color: #0008;
+		margin-top: adjust(8px);
 	}
+
 	.swd-box {
-		margin-left: adjust(21px);
+		margin-left: adjust(8px);
-		font-size: adjust(15px);
+		font-size: adjust(8px);
+		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: #00f4ff;
+			color: #ff2020;
-			margin-top: adjust(6px);
+			margin-top: adjust(3px);
-			font-size: adjust(26px);
+			font-size: adjust(14px);
-			overflow: hidden;  /*超出部分隐藏*/
+			overflow: hidden;
-    		white-space: nowrap;  /*禁止换行*/
+			/*超出部分隐藏*/
-    		text-overflow: ellipsis; /*省略号*/
+			white-space: nowrap;
+			/*禁止换行*/
+			text-overflow: ellipsis;
+			/*省略号*/
 		}
 	}
 }
 
-.onekb, .onesp{
+.onekb,
-	background: url(../../assets/tem-bottom.png) no-repeat;
-}
-.onekb {
-	top: adjust(300px);
-	left: adjust(350px)
-}
 .onesp {
-	top: adjust(270px);
+	background: url(../../assets/tem-bottom.png) top 0 left 0 / 100% no-repeat;
-	left: adjust(520px)
 }
-.twokb, .twosp{
+
-	background: url(../../assets/tem-top.png) no-repeat;
+.onekb {
+	top: adjust(158px);
+	left: adjust(180px)
 }
-.twokb {
+
-	top: adjust(-20px);
+.onesp {
-	left: adjust(370px)
+	top: adjust(135px);
+	left: adjust(275px)
 }
+
+.twokb,
 .twosp {
-	top: adjust(10px);
+	background: url(../../assets/tem-top.png) top 0 left 0 / 100% no-repeat;
-	left: adjust(540px)
+}
+
+.twokb {
+	top: adjust(-10px);
+	left: adjust(188px)
+}
+
+.twosp {
+	top: adjust(6px);
+	left: adjust(275px)
 }
 
 .eq-main {
-	width: adjust(w(7150px));
+	width: adjust(w(8800px));
-	height: adjust(h(960px));
+	height: adjust(h(1400px));
 	background: url(../../assets/eq.png) no-repeat;
 	background-size: 100%;
-	top: adjust(170px);
+	top: adjust(h(220px));
-	left: adjust(380px);
+	left: adjust(w(6600px));
 	position: relative;
 	transform: rotateY(0.5turn);
 }
@@ -338,53 +317,54 @@ main {
 .eq-main::before {
 	content: "";
 	position: absolute;
-	//   right: adjust(1200px);
 	opacity: 0;
-	top: adjust(105px);
+	top: adjust(55px);
-	width: adjust(150px);
+	width: adjust(75px);
-	height: adjust(150px);
+	height: adjust(75px);
 	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: adjust(105px);
+	top: adjust(55px);
-	// top: adjust(125px);
+	width: adjust(75px);
-	width: adjust(150px);
+	height: adjust(75px);
-	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: adjust(1200px);
+		right: adjust(700px);
 		opacity: 1;
 	}
+
 	90% {
 		opacity: 1;
 	}
+
 	100% {
-		right: adjust(60px);
+		right: adjust(30px);
 	}
 }
 
 @keyframes mirror-to-left-2 {
 	0% {
-		right: adjust(1200px);
+		right: adjust(700px);
 		opacity: 1;
 	}
+
 	90% {
 		opacity: 1;
 	}
+
 	100% {
-		right: adjust(60px);
+		right: adjust(30px);
 	}
 }
 
@@ -436,20 +416,4 @@ main {
 	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>{{ title }}</span>
+			<span class="title_text">{{ title }}</span>
 		</div>
 		<div class="content">
 			<slot />
@@ -25,7 +25,7 @@ export default {
 		},
 		padding: {
 			type: String,
-			default: "10px",
+			default: "20px",
 		},
 	},
 	data() {
@@ -57,8 +57,8 @@ export default {
 
 .icon {
 	height: adjust(17px);
-	width: adjust(17px);
+	width: adjust(16px);
-	margin-right: adjust(8px);
+	margin-right: 0;
 }
 
 .icon-clock {
@@ -72,46 +72,59 @@ export default {
 }
 
 .icon-oil {
-	background: url(../../assets/oil.png);
+	background: url(../../assets/oil.png) top 0 left 0 / 90% 75% no-repeat;
-	background-size: 100% 100%;
+	margin-right: 6px;
 }
+
 .icon-gas {
-	background: url(../../assets/gas-icon.png);
+	background: url(../../assets/gas-icon.png) top 0 left 0 / 90% 75% no-repeat;
-	background-size: 100% 100%;
+	margin-right: 6px;
 }
+
 .icon-xc {
 	background: url(../../assets/xicao-icon.png);
 	background-size: 100% 100%;
 }
+
 .icon-fan {
-	background: url(../../assets/fan-icon.png);
+	background: url(../../assets/fan-icon.png) top 0 left 0 / 90% 75% no-repeat;
-	background-size: 100% 100%;
+	margin-right: 6px;
 }
+
 .icon-kiln-top {
-	background: url(../../assets/kiln-top-icon.png);
+	background: url(../../assets/kiln-top-icon.png) top 0 left 0 / 90% 75% no-repeat;
-	background-size: 100% 100%;
+	margin-right: 6px;
 }
+
 .icon-kiln-bottom {
-	background: url(../../assets/kiln-bottom-icon.png);
+	background: url(../../assets/kiln-bottom-icon.png) top 0 left 0 / 90% 75% no-repeat;
-	background-size: 100% 100%;
+	margin-right: 6px;
 }
 
 .icon-water-in {
-	background: url(../../assets/water-temp.png);
+	background: url(../../assets/water-temp.png) top 24% left 0 / 80% 75% no-repeat;
-	background-size: 100% 100%;
 }
 
 .title {
-	/* margin: 12px 0; */
+	font-size: adjust(h(40px));
-	margin-bottom: adjust(12px);
+	letter-spacing: 1px;
-	font-size: adjust(17px);
+	color: #3565ff;
-	color: #72f2ff;
 	font-family: sans-serif;
 	user-select: none;
 	display: flex;
 	align-items: center;
 }
 
+.title_text {
+	line-height: 0;
+	margin-bottom: 10px;
+}
+
+.out-water .title,
+.in-water .title {
+	font-size: adjust(h(40px));
+}
+
 .content {
 	height: 1px;
 	/* background: #eee; */

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

@@ -1,169 +0,0 @@
-<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

@@ -1,70 +0,0 @@
-<!-- 
-    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

@@ -1,364 +0,0 @@
-<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

@@ -1,32 +0,0 @@
-<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

@@ -1,53 +0,0 @@
-<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

@@ -1,100 +0,0 @@
-<!-- 
-    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

@@ -1,237 +0,0 @@
-<!-- 
-    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

@@ -1,130 +0,0 @@
-<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

@@ -1,952 +0,0 @@
-{
-    "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

@@ -1,67 +0,0 @@
-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

@@ -1,109 +0,0 @@
-{
-  "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

@@ -1,101 +0,0 @@
-<!-- 
-    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

@@ -1,41 +0,0 @@
-<!-- 
-    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

@@ -1,65 +0,0 @@
-<!-- 
-    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

@@ -1,38 +0,0 @@
-<!-- 
-    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>

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

@@ -1,65 +0,0 @@
-<!-- 
-    filename: index.vue
-    author: liubin
-    date: 2023-09-08 16:13:14
-    description: 
--->
-
-<template>
-  <div class="yx-dark-runtime-info">
-    <template v-for="ch in pressInfo">
-      <YxDarkRuntimeContainer
-        v-if="!isDot(ch)"
-        :key="ch"
-        :value="ch"
-        :class="{ digit: isDigit(ch) }"
-      />
-      <span class="dot" v-else>.</span>
-    </template>
-  </div>
-</template>
-
-<script>
-import YxDarkRuntimeContainer from "./runtimeContainer.vue";
-export default {
-  name: "YxDarkRuntimeInfo",
-  components: { YxDarkRuntimeContainer },
-  props: {},
-  data() {
-    return {
-      days: 122,
-    };
-  },
-  computed: {
-    pressInfo() {
-      return ["运", "行", ...(this.days + ""), "天"];
-    },
-  },
-  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-runtime-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/runtimeInfo/runtimeContainer.vue

@@ -1,38 +0,0 @@
-<!-- 
-    filename: pressContainer.vue
-    author: liubin
-    date: 2023-09-08 16:10:43
-    description: 
--->
-
-<template>
-  <div class="yx-dark-runtime-container">
-    {{ value }}
-  </div>
-</template>
-
-<script>
-export default {
-  name: "YxDarkRuntimeContainer",
-  components: {},
-  props: ["value"],
-  data() {
-    return {};
-  },
-  computed: {},
-  methods: {},
-};
-</script>
-
-<style scoped lang="scss">
-.yx-dark-runtime-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>

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

@@ -1,73 +0,0 @@
-<!-- 
-    filename: WaterTemp.vue
-    author: liubin
-    date: 2023-09-08 10:00:10
-    description: 进出口水温
--->
-
-<template>
-  <div class="water-temp">
-    <div class="in">
-      <span class="value"> {{ inValue }}<small>℃</small> </span>
-      <span class="title">进口实时水温</span>
-    </div>
-    <div class="out">
-      <span class="value"> {{ outValue }}<small>℃</small> </span>
-      <span class="title">出口实时水温</span>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "WaterTemp",
-  components: {},
-  props: {},
-  data() {
-    return {
-      inValue: 22.3,
-      outValue: 23.4,
-    };
-  },
-  computed: {},
-  methods: {},
-};
-</script>
-
-<style lang="scss" scoped>
-.water-temp {
-  margin-left: 12px;
-  margin-top: 24px;
-  width: 500px;
-  // height: 120px;
-//   background: #cccc;
-  display: flex;
-  justify-content: space-between;
-}
-
-.in,
-.out {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-}
-
-.title {
-  font-size: 24px;
-  line-height: 32px;
-  color: #eff0f5;
-  margin-top: 8px;
-  letter-spacing: .5px;
-}
-
-.value {
-  font-size: 54px;
-  line-height: 48px;
-  color: #eff0f5;
-  letter-spacing: 1px;
-}
-
-.value > small {
-    font-size: 32px;
-}
-</style>

src/store/index.js

@@ -31,7 +31,7 @@ export default new Vuex.Store({
     kilnPressure: '00',
     fireChangeTime: '00:00:00',
     lastFireChangeTime: '0分0秒',
-    waterInTemp: '000',
+    waterInTemp: '00.0',
     waterOutTemp: '000'
   },
   getters: {

src/utils/index.js

@@ -0,0 +1,11 @@
+export function randomInt(min, max, closeRight = false) {
+  min = min ?? 0
+  max = max ?? 100
+  if (min >= max) { min = max - 100 > 0 ? max - 100 : 0 }
+  const fn = closeRight ? Math.ceil : Math.floor
+  let val = fn(Math.random() * max)
+  while (val < min) {
+    val = fn(Math.random() * max)
+  }
+  return val
+}

src/utils/wsClass.js

@@ -39,8 +39,7 @@ function handleClose(data) {
 
 
 export default class WsClient {
-  // static wsServer = 'ws://172.16.1.112:8081/dz-screen/websocket/1'
+  static wsServer = 'ws://172.16.1.112:8081/dz-screen/websocket/1'
-  static wsServer = 'ws://127.0.0.1:9800'
   // static wsServer = 'ws://m306416y13.yicp.fun:48978/dz-screen/websocket/1'
   static tableMap = {
     // 窑顶温度

src/views/HomeView.vue

@@ -1,151 +1,37 @@
 <template>
-  <!-- transform: 'scale(0.18182, 0.25)', -->
+	<div class="home-view">
-  <!-- :style="{
+		<BigHeader />
-			transform: 'scale(0.72727, 1)',
+		<Main />
-			transformOrigin: 'top left',
+	</div>
-		}" -->
-  <div class="home-view" :style="styles">
-    <!-- <div class="bg-layer"></div> -->
-    <LeftSide />
-    <section class="center">
-      <BigHeader />
-      <MainPanel style="height: 1px; flex: 1" />
-      <!-- <Main /> -->
-    </section>
-    <RightSide />
-  </div>
 </template>
 
 <script>
-import BigHeader from "../components/yx-dark/layout/Header.vue";
+import BigHeader from '../components/layout/Header.vue'
-import Main from "../components/layout/Main.vue";
+import Main from '../components/layout/Main.vue'
-import LeftSide from "./LeftSide.vue";
-import RightSide from "./RightSide.vue";
-import MainPanel from "./MainPanel.vue";
-
-import WsClient from "../utils/wsClass";
 
 export default {
-  name: "HomeView",
+	name: "HomeView",
-  components: { BigHeader, Main, LeftSide, RightSide, MainPanel },
+	components: { BigHeader, Main },
-  props: {},
+	props: {},
-  data() {
+	data() {
-    return {
+		return {};
-      value: 20,
+	},
-    };
+	created() {},
-  },
+	mounted() {},
-  computed: {
+	methods: {},
-    styles() {
-      let v = (this.value / 100).toFixed(2);
-      return {
-        // transform: `scale(${(v * 24) / 33}, ${v})`,
-        transform: `scale(${v}, ${v})`,
-        transformOrigin: "top left",
-      };
-    },
-  },
-  created() {
-    // const wsc = new WsClient(this);
-    // wsc.registerListeners();
-  },
-  mounted() {
-    const slider = document.createElement("div");
-    slider.id = "slider";
-    slider.classList.add("slider");
-    const ranger = document.createElement("input");
-    ranger.type = "range";
-    ranger.value = this.value;
-    ranger.addEventListener("input", this.handleSlide);
-    slider.appendChild(ranger);
-    document.body.appendChild(slider);
-
-    // this.$watch('value', val => {
-    // 	ranger.value = val
-    // })
-
-    document.addEventListener("keydown", (e) => {
-      if (e.shiftKey && e.key === "L") {
-        document.getElementById("slider").classList.toggle("show");
-      }
-    });
-    document.getElementById("slider").addEventListener("mouseleave", () => {
-      setTimeout(() => {
-        document.getElementById("slider").classList.remove("show");
-      }, 200);
-    });
-  },
-  methods: {
-    handleSlide(e) {
-      this.value = e.target.value;
-      window.scroll(0, 0);
-    },
-  },
 };
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
-@import "../assets/styles/functions";
+@import '../assets/styles/functions';
-
-* {
-  user-select: none;
-}
 
 .home-view {
-  height: 1080px;
+	height: adjust($actual_height);
-  width: 8640px;
+	width: adjust($actual_width);
-  overflow: hidden;
+	overflow: hidden;
-  // background: #C9CCE5;
+	background: url(../assets/bg.png) center/cover no-repeat, #E0E3F6;
-  background: url(../assets/bg.png) center/cover no-repeat;
+	color: white;
-  color: white;
+	display: flex;
-  display: flex;
+	flex-direction: column;
-  position: relative;
-}
-
-.bg-layer {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: #c9cce577;
-  // background: url(../assets/bg.png) center/cover no-repeat;
-}
-
-.center {
-  position: relative;
-  width: 6592px;
-  //   flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-.slider {
-  height: 5vh;
-  width: 20vw;
-  border-radius: 88px;
-  box-shadow: 0 0 68px 8px rgba($color: #000000, $alpha: 0.3);
-  padding: 32px;
-  display: grid;
-  place-items: center;
-  background: #fff;
-  position: fixed;
-  // bottom: 64px;
-  top: 0;
-  opacity: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  transition: opacity 0.3s ease-out, bottom 0.3s ease-out;
-
-  input {
-    width: 100%;
-    transform: translateY(-7px);
-    color: #0b58ff;
-    background: #fcc;
-  }
-}
-
-.slider.show {
-  opacity: 1;
-  bottom: 64px;
 }
 </style>

src/views/LeftSide.vue

@@ -1,26 +0,0 @@
-<template>
-	<div class="left-side"></div>
-</template>
-
-<script>
-export default {
-	name: "LeftSide",
-	props: {},
-	data() {
-		return {};
-	},
-	created() {},
-	mounted() {},
-	methods: {},
-};
-</script>
-
-<style scoped lang="scss">
-// import
-
-.left-side {
-	background: #000;
-	height: 1080px;
-	width: 1024px;
-}
-</style>