update

src/App.vue

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

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

src/components/boxes/FanRuntime.vue

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

src/components/boxes/GasFlow.vue

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

src/components/boxes/HistoryTemp.vue

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

src/components/boxes/InWater.vue

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

src/components/boxes/KilnRuntime.vue

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

src/components/boxes/OilFlow.vue

@@ -1,7 +1,7 @@
 <template>
 	<!-- 油流量 -->
 	<Container usage="Charts">
-		<SubContainer title="油流量" icon="oil" padding="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,6 +39,49 @@ export default {
 	data() {
 		return {
 			chartConfig: {},
+			// oilTable1: {
+			// 	FT111: Array(24)
+			// 		.fill(1)
+			// 		.map((_) => randomInt()),
+			// 	FT112: Array(24)
+			// 		.fill(1)
+			// 		.map((_) => randomInt()),
+			// 	FT113: Array(24)
+			// 		.fill(1)
+			// 		.map((_) => randomInt()),
+			// 	FT114: Array(24)
+			// 		.fill(1)
+			// 		.map((_) => randomInt()),
+			// 	FT115: Array(24)
+			// 		.fill(1)
+			// 		.map((_) => randomInt()),
+			// },
+			// oilTable2: {
+			// 	OT001: Array(24)
+			// 		.fill(1)
+			// 		.map((_) => randomInt()),
+			// 	OT002: Array(24)
+			// 		.fill(1)
+			// 		.map((_) => randomInt()),
+			// 	OT004: Array(24)
+			// 		.fill(1)
+			// 		.map((_) => randomInt()),
+			// 	OT003: Array(24)
+			// 		.fill(1)
+			// 		.map((_) => randomInt()),
+			// 	OT005: Array(24)
+			// 		.fill(1)
+			// 		.map((_) => randomInt()),
+			// 	OT006: Array(24)
+			// 		.fill(1)
+			// 		.map((_) => randomInt()),
+			// 	OT007: Array(24)
+			// 		.fill(1)
+			// 		.map((_) => randomInt()),
+			// 	OT008: Array(24)
+			// 		.fill(1)
+			// 		.map((_) => randomInt()),
+			// },
 		};
 	},
 	computed: {
@@ -55,12 +99,12 @@ export default {
 }
 
 .vertical-line {
-	margin: 0 adjust(3px);
+	margin: 0 6px;
-	width: adjust(3px);
+	width: 6px;
 	background: radial-gradient(
 		ellipse at center,
-		#6fe2ff,
+		#3565ff,
-		#52cbef80,
+		#3565ff51,
 		transparent,
 		transparent
 	);

src/components/boxes/OutWater.vue

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

src/components/boxes/TopTemp.vue

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

src/components/boxes/XicaoTemp.vue

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

src/components/boxes/subcomponents/TableStatus.vue

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

src/components/charts/BarChart.vue

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

src/components/charts/LineChart.vue

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

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: 750px;
-	// height: adjust(h(200px));
+	height: 340px;
-	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: 48px;
-		height: adjust(h(128px));
+		margin-left: 48px;
+		width: 172px;
+		height: 172px;
 	}
-
+	
 	.info {
+		margin-top: 56px;
+		flex: 1 auto;
 		font-family: "微软雅黑", sans-serif;
-
+		padding-left: 12px;
 		h2 {
-			font-size: adjust(16px);
+			font-size: 54px;
+			line-height: 48px;
 			opacity: 0.7;
-			// line-height: adjust(12px);
+			letter-spacing: 2px;
-			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: 96px;
-			line-height: adjust(29px);
+			line-height: 98px;
 		}
 	}
 }

src/components/groups/data.vue

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

src/components/groups/environ.vue

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

src/components/groups/fault.vue

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

src/components/groups/monitor.vue

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

src/components/groups/monitor2.vue

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

src/components/groups/monitor3.vue

@@ -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/clockSvg.vue

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

src/components/icons/fireSvg.vue

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

src/components/icons/sandSvg.vue

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

src/components/icons/switchSvg.vue

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

src/components/icons/tempSvg.vue

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

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

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

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

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

src/components/layout/BottomBar.vue

@@ -0,0 +1,154 @@
+<template>
+    <div class="bottom-bar">
+        <section class="realtime-water-temp-in">
+            <InWater />
+        </section>
+        <section class="realtime-water-temp-out">
+            <OutWater />
+        </section>
+        <section class="dynamic-data">
+            <div class="top">
+                <div class="data pressure">
+                    <span>压</span>
+                    <span>力</span>
+                    <span v-for="(press, index) in pressure" :key="index"
+                        :class="{ digit: true, dot: press == '.' ? true : false }">{{ press }}</span>
+                    <span>Pa</span>
+                </div>
+            </div>
+            <div class="bottom">
+                <div class="data runtime">
+                    <span>运</span>
+                    <span>行</span>
+                    <span v-for="val, index in runtime" :key="index"
+                        :class="{ 'digit': true, 'dot': val == '.' ? true : false }">{{ val }}</span>
+                    <span>天</span>
+                </div>
+            </div>
+        </section>
+    </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+import InWater from "../boxes/InWater.vue";
+import OutWater from "../boxes/OutWater.vue";
+
+export default {
+    name: 'BottomBar',
+    components: { InWater, OutWater },
+    data() {
+        return {
+            pressure: "10.1".split(""),
+            runtime: "0012".split(""),
+        }
+    },
+    mounted() {
+		this.getRuntime();
+		setInterval(this.getRuntime, 1000 * 60 * 30);
+	},
+    watch: {
+        fireDirection: function (val) {
+            this.$set(this.rdata[0], "value", val);
+        },
+        fireChangeTime: function (val) {
+            this.$set(this.rdata[1], "value", val);
+        },
+        lastFireChangeTime: function (val) {
+            let [_, min, sec] = /(\d+)分(\d+)秒/.exec(val || "0分0秒");
+            if (timeFun) clearInterval(timeFun);
+            timeFun = setInterval(() => {
+                if (sec > 0) sec -= 1;
+                else {
+                    if (min > 0) {
+                        sec = 59;
+                        min -= 1;
+                    } else {
+                        if (timeFun) clearInterval(timeFun);
+                    }
+                }
+                this.$set(this.rdata[2], "value", `${min}分${sec}秒`);
+            }, 1000);
+        },
+        kilnPressure: function (val) {
+            this.pressure = val.split("")
+        }
+    },
+    computed: {
+        ...mapState(["fireDirection", "lastFireChangeTime", "fireChangeTime", "kilnPressure"]),
+    },
+    methods: {
+        getRuntime() {
+			const diff = Date.now() - new Date("2023-5-7 8:00:00");
+			const days = parseInt(diff / 1000 / 60 / 60 / 24);
+			const hours = parseInt(
+				(diff - days * 24 * 60 * 60 * 1000) / 1000 / 60 / 60
+			);
+			console.log("days", days);
+			this.runtime = (days + "").padStart(4, "0");
+		},
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.bottom-bar {
+    height: 600px;
+    // background: #0003;
+    display: flex;
+    justify-content: space-between;
+
+    >section {
+        flex: 1;
+    }
+}
+
+.realtime-water-temp-in,
+.realtime-water-temp-out {
+    padding-right: 20px;
+}
+
+.dynamic-data {
+    display: flex;
+    flex-direction: column;
+
+    .top {
+        // margin: 12px 0;
+        // background: #f001;
+    }
+
+    .bottom {
+        // margin: 12px 0;
+        // background: #0f01;
+    }
+
+    .data {
+        flex-shrink: 0;
+        font-family: zcoolqingkehuangyouti-Regular, sans-serif;
+        display: flex;
+        align-items: flex-end;
+    }
+
+    .data>span:not(.dot) {
+        /** 边框 */
+        background: url("../../assets/digitbox1.png") no-repeat;
+        background-size: 100% 100%;
+        display: inline-block;
+        width: 228px;
+        height: 280px;
+        color: #0068ffaa;
+        font-size: 144px;
+        line-height: 2.35;
+        text-align: center;
+        vertical-align: bottom;
+        user-select: none;
+    }
+
+    .data>span.digit {
+        /** 数字字体大小 */
+        color: #0071ff;
+        font-size: 240px;
+        line-height: 1.25;
+    }
+}
+</style>

src/components/layout/Container.vue

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

src/components/layout/Header.vue

@@ -6,9 +6,11 @@
       </span>
       <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;{{ moment(today).format('HH:mm:ss') }}
     </span>
   </header>
 </template>
@@ -66,60 +68,59 @@ export default {
 @import "../../assets/styles/variables";
 
 header {
-  background: url(../../assets/header.png) center/contain no-repeat;
+  width: 100%;
-  background-size: 100%;
+  height: 380px;
-  height: adjust(h(280px));
+  background: url(../../assets/header.png) no-repeat;
-  width: adjust($actual_width);
   display: grid;
   place-items: center;
 
-  > div {
+  >div {
+    margin-left: 24px;
+    margin-bottom: 24px;
     display: flex;
     align-items: center;
-    margin-bottom: adjust(10px);
 
     .header--logo {
-      width: adjust(102px);
+      width: 648px;
-      height: adjust(56px);
+      height: 280px;
+      margin-right: 16px;
       background: url(../../assets/logo.png) center/contain no-repeat;
     }
 
     h1 {
-      margin-left: adjust(20px);
+      font-size: 144px;
-      font-size: adjust(35px);
+      line-height: 330px;
-      // line-height: adjust(100px);
+      margin: 0;
-      // background: #eee;
+      letter-spacing: 16px;
       user-select: none;
-      letter-spacing: adjust(8px);
       font-weight: 600;
-      // color: #6bf2ff;
       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 {
+  bottom: -88px;
   left: 0;
-  bottom: adjust(10px);
+  line-height: 0.2;
-  height: adjust(h(78px));
+  font-size: 108px;
+  font-weight: bold;
+  // font-weight: bold;
+  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: adjust(w(1460px));
+  left: 300px;
-  width: adjust(w(1320px));
+  text-align: center;
-  height: adjust(h(48px));
+  // color: lighten($main-color, 8);
-  background: url("../../assets/company.png") center/cover no-repeat;
+  color: #5a6d88;
 }
 
 .datetime {
-  color: $main-color;
+  left: unset;
-  font-size: adjust(26px);
+  right: 300px;
+  color: #5a6d88;
   text-align: center;
-  // display: inline-block;
-  margin-left: adjust(w(6150px));
-  width: adjust(w(1320px));
-  height: adjust(h(48px));
-  background: url("../../assets/date.png") center/cover no-repeat;
 }
 </style>

src/components/layout/Main.vue

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

src/components/layout/SubContainer.vue

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

src/directives/title.js

@@ -0,0 +1,30 @@
+export default {
+
+  inserted: function (el, binding) {
+    const value = binding.value
+    console.log('[v-title] value', value)
+
+    el.addEventListener('mouseover', function (event) {
+      console.log('[v-title] mouseover', event)
+    })
+    // find mouse pointer's location
+
+    // find element with id 'tooltip'
+    let tooltip = document.getElementById('tooltip')
+    if (!tooltip) {
+      const tooltipDiv = document.createElement('div')
+      tooltipDiv.id = 'tooltip'
+      tooltipDiv.style.position = 'absolute';
+      tooltipDiv.style.padding = '24px 32px';
+      tooltipDiv.style.visibility = 'hidden';
+      document.body.appendChild(tooltipDiv)
+      tooltip = tooltipDiv
+    }
+    
+    // fit tooltip content with value
+    tooltip.innerText = value
+
+    // show tooltip with location of mouse pointer
+
+  }
+}

src/main.js

@@ -2,12 +2,15 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import title from './directives/title'
 
 import 'normalize.css'
 import './style.css'
 
 Vue.config.productionTip = false
 
+Vue.directive('title', title)
+
 new Vue({
   router,
   store,

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/slider.vue

@@ -0,0 +1,45 @@
+<template>
+	<div class="fixed-slider">
+		<h1>{{ value }}</h1>
+		<input type="range" :value="value" @input="$emit('change', +$event.target.value)">
+	</div>
+</template>
+
+<script>
+export default {
+	name: "FixedSlider",
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+	props: {
+		value: {
+			type: Number,
+			default: 0,
+		},
+	},
+	data() {
+		return {
+			// value: 0
+		};
+	},
+};
+</script>
+
+<style scoped>
+.fixed-slider {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	height: 10vh;
+	width: 100vw;
+	background: #0002;
+	color: #fff;
+	z-index: 100000;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 100px 0;
+}
+</style>

src/views/HomeView.vue

@@ -1,39 +1,178 @@
 <template>
-	<div class="home-view">
+	<!-- transform: 'scale(0.18182, 0.25)', -->
-		<BigHeader />
+	<!-- :style="{
-		<Main />
+			transform: 'scale(0.72727, 1)',
+			transformOrigin: 'top left',
+		}" -->
+	<div class="home-view" :style="styles">
+		<div class="bg-layer"></div>
+		<LeftSide />
+		<section class="center">
+			<div class="center-top">
+				<div class="screen-container top-left"></div>
+				<MainContent />
+				<div class="screen-container top-right"></div>
+			</div>
+			<div class="center-bottom">
+				<!-- 监控组 2 -->
+				<MonitorGroup2 />
+
+				<!-- 数据组 -->
+				<DataGroup />
+			</div>
+		</section>
+		<RightSide />
 	</div>
 </template>
 
 <script>
-import BigHeader from '../components/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 MainContent from './MainContent.vue';
+import MonitorGroup2 from "@/components/groups/monitor2.vue";
+import DataGroup from "@/components/groups/data.vue";
 
 export default {
 	name: "HomeView",
-	components: { BigHeader, Main },
+	components: { LeftSide, RightSide, MainContent, MonitorGroup2, DataGroup },
 	props: {},
 	data() {
-		return {};
+		return {
+			value: 10,
+		};
+	},
+	computed: {
+		styles() {
+			let v = (this.value / 100).toFixed(2);
+			return {
+				transform: `scale(${v * 24 * 10 / 33}, ${v * 10})`,
+				transformOrigin: "top left",
+			};
+		},
+	},
+	mounted() {
+		const slider = document.createElement("div");
+		slider.id = "slider";
+		slider.classList.add("slider");
+		const ranger = document.createElement("input");
+		ranger.type = "range";
+		ranger.value = 100;
+		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);
+		},
 	},
-	created() {},
-	mounted() {},
-	methods: {},
 };
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
-@import '../assets/styles/functions';
+@import "../assets/styles/functions";
 
 .home-view {
-	// width: 100vw;
+	height: 4320px;
-	// height: 100vh;
+	width: 21120px;
-	height: adjust($actual_height);
-	width: adjust($actual_width);
 	overflow: hidden;
-	background: url(../assets/bg.png) center/cover no-repeat ;
+	// background: #C9CCE5;
+	background: url(../assets/bg.png) center/cover no-repeat;
 	color: white;
 	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 {
+	width: 13515px;
+	height: 4320px;
+	display: flex;
+	flex-direction: column;
+	// position: relative;
+}
+
+.center-top {
+	height: 2168px;
+	// background: #0b58ff33;
+	display: flex;
+}
+
+.center-bottom {
+	flex: 1;
+	height: 1px;
+	background: #ccc1;
+	position: relative;
+}
+
+.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;
+	bottom: 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;
+}
+
+.screen-container {
+	// background: #09df2233;
+	display: inline-block;
+	width: 3854px;
+	height: 2168px;
+}
+
+// .main-container__content {
+// 	flex: 1;
+// 	background: #38012311;
+// }
+
+.top-left {}
 </style>

src/views/LeftSide.vue

@@ -0,0 +1,26 @@
+<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: rgba(243, 54, 145, 0.166);
+	height: 4320px;
+	width: 3816px;
+}
+</style>

src/views/MainContent.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="main-content">
+        <AHeader />
+        <Main />
+        <BottomBar />
+    </div>
+</template>
+
+<script>
+import AHeader from "../components/layout/Header.vue";
+import Main from "../components/layout/Main.vue";
+import BottomBar from "../components/layout/BottomBar.vue";
+
+export default {
+    name: 'MainContent',
+    components: { AHeader, Main, BottomBar },
+    data() {
+        return {
+
+        }
+    }
+}
+</script>
+
+<style scoped>
+.main-content {
+    width: 1px;
+    flex: 1;
+    /* background: #f001; */
+    display: flex;
+    flex-direction: column;
+}
+</style>

src/views/RightSide.vue

@@ -0,0 +1,26 @@
+<template>
+	<div class="right-side"></div>
+</template>
+
+<script>
+export default {
+	name: "RightSide",
+	props: {},
+	data() {
+		return {};
+	},
+	created() {},
+	mounted() {},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+// import
+
+.right-side {
+	// background: rgba(30, 133, 244, 0.292);
+	height: 4324px;
+	width: 3840px;
+}
+</style>

vue.config.js

@@ -2,7 +2,8 @@ const { defineConfig } = require("@vue/cli-service");
 module.exports = defineConfig({
   transpileDependencies: true,
   devServer: {
-    host: "127.0.0.1",
+    host: '0.0.0.0',
+    // host: "127.0.0.1",
     port: 8000,
   },
   publicPath: './'