update

src/components/boxes/InWater.vue

@@ -49,12 +49,13 @@ export default {
 @import "../../assets/styles/functions";
 
 .in-water {
-	position: absolute;
+	// position: absolute;
-	top: -200px;
+	// top: -200px;
-	left: 27px;
+	// left: 27px;
-	height: 509px;
+	height: 100%;
-	width: 1323px;
+	width: 100%;
-	background: url(../../assets/in-water.png) top 0 left 0 / cover no-repeat;
+	background: url(../../assets/in-water.png) top 0 left 0 / 100% 100% no-repeat;
+	overflow: hidden;
 }
 
 .content {
@@ -62,16 +63,16 @@ export default {
 }
 
 .realtime {
-	width: 530px;
+	width: 620px;
 	// height: 337px;
-	background: url(../../assets/inwater.png) top 90% left 0 / 100% 80% no-repeat,
+	background: url(../../assets/inwater.png) top 88% left 0 / 100% 100% no-repeat,
-		url(../../assets/i-water.png) top 24px right 24px / 40% 70% no-repeat;
+		url(../../assets/i-water.png) top 24px right 24px / 45% 70% no-repeat;
 }
 
 .graph {
 	// background: #0cc3;
-	height: 436px;
+	height: 100%;
-	transform: translate(0, -64px);
+	transform: translate(0, -48px);
 }
 
 .flex-1 {

src/components/boxes/OutWater.vue

@@ -48,12 +48,12 @@ export default {
 @import "../../assets/styles/functions";
 
 .out-water {
-	position: absolute;
+	// position: absolute;
-	top: -200px;
+	// top: -200px;
-	left: 1350px;
+	// left: 1350px;
-	height: 509px;
+	height: 100%;
-	width: 1323px;
+	width: 100%;
-	background: url(../../assets/out-water.png) top 0 left 0 / cover no-repeat;
+	background: url(../../assets/out-water.png) top 0 left 0 / 100% 100% no-repeat;
 }
 
 .content {
@@ -61,16 +61,16 @@ export default {
 }
 
 .realtime {
-	width: 530px;
+	width: 620px;
 	// height: 337px;
-	background: url(../../assets/outwater.png) top 90% left 0 / 100% 80% no-repeat,
+	background: url(../../assets/outwater.png) top 88% left 0 / 100% 100% no-repeat,
 		url(../../assets/o-water.png) top 24px right 24px / 40% 70% no-repeat;
 }
 
 .graph {
 	// background: #0cc3;
-	height: 436px;
+	height: 100%;
-	transform: translate(0, -64px);
+	transform: translate(0, -48px);
 }
 .flex-1 {
 	flex: 1;

src/components/common/SmallBox2.vue

@@ -59,8 +59,8 @@ export default {
 	flex-shrink: 0;
 	padding: 0;
 	user-select: none;
-	width: 744px;
+	width: 750px;
-	height: 366px;
+	height: 340px;
 	display: flex;
 	background: url(../../assets/top-middle.png) no-repeat;
 	background-size: 100% 100%;

src/components/groups/monitor2.vue

@@ -24,14 +24,14 @@ export default {
 @import "../../assets/styles/functions";
 
 section {
-  // background: rgba(47, 203, 255, 0.225);
+  // background: rgba(47, 203, 255, 0.75);
   width: 100%;
   // height: 1178px;
   height: 1469px;
   position: absolute;
   // bottom: 690px;
   // top: 2160px;
-  top: 1570px;
+  // top: 1570px;
   left: 0;
 }
 

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

@@ -1,6 +1,6 @@
 <template>
 	<DragabbleContainer class="isolate-area-1">
-		<div class="data pressure">
+		<!-- <div class="data pressure">
 			<span>压</span>
 			<span>力</span>
 			<span
@@ -10,7 +10,7 @@
 				>{{ press }}</span
 			>
 			<span>Pa</span>
-		</div>
+		</div> -->
 		<SmallBox2
 			class="data-center"
 			v-for="rd in rdata"
@@ -87,6 +87,7 @@ export default {
 @import "../../assets/styles/functions";
 
 .isolate-area-1 {
+	// background: #000c;
 	display: flex;
 	color: $main-color;
 	min-width: 300px;
@@ -94,37 +95,37 @@ export default {
 
 	> *:not(:last-child) {
 		margin: {
-			right: 128px;
+			right: 160px;
 		}
 	}
 
-	> .data {
+	// > .data {
-		flex-shrink: 0;
+	// 	flex-shrink: 0;
-		font-family: zcoolqingkehuangyouti-Regular, sans-serif;
+	// 	font-family: zcoolqingkehuangyouti-Regular, sans-serif;
-		display: flex;
+	// 	display: flex;
-		align-items: flex-end;
+	// 	align-items: flex-end;
-	}
+	// }
 
-	> .data > span:not(.dot) {
+	// > .data > span:not(.dot) {
-		/** 边框 */
+	// 	/** 边框 */
-		background: url("../../assets/digitbox1.png") no-repeat;
+	// 	background: url("../../assets/digitbox1.png") no-repeat;
-		background-size: 100% 100%;
+	// 	background-size: 100% 100%;
-		display: inline-block;
+	// 	display: inline-block;
-		width: 228px;
+	// 	width: 228px;
-		height: 299px;
+	// 	height: 299px;
-		color: #0068ffaa;
+	// 	color: #0068ffaa;
-		font-size: 142px;
+	// 	font-size: 100px;
-		line-height: 328px;
+	// 	line-height: 1;
-		text-align: center;
+	// 	text-align: center;
-		vertical-align: bottom;
+	// 	vertical-align: bottom;
-		user-select: none;
+	// 	user-select: none;
-	}
+	// }
 
-	> .data > span.digit {
+	// > .data > span.digit {
-		/** 数字字体大小 */
+	// 	/** 数字字体大小 */
-		color: #0071ff;
+	// 	color: #0071ff;
-		font-size: 242px;
+	// 	font-size: 242px;
-		line-height: 286px;
+	// 	line-height: 286px;
-	}
+	// }
 }
 </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/Header.vue

@@ -69,29 +69,29 @@ export default {
 
 header {
   width: 100%;
-  height: 628px;
+  height: 380px;
   background: url(../../assets/header.png) no-repeat;
   display: grid;
   place-items: center;
 
   >div {
-    margin-left: 378px;
+    margin-left: 24px;
-    margin-bottom: 72px;
+    margin-bottom: 24px;
     display: flex;
     align-items: center;
 
     .header--logo {
       width: 648px;
-      height: 337px;
+      height: 280px;
-      margin-right: 96px;
+      margin-right: 16px;
       background: url(../../assets/logo.png) center/contain no-repeat;
     }
 
     h1 {
-      font-size: 220px;
+      font-size: 144px;
       line-height: 330px;
       margin: 0;
-      letter-spacing: 36px;
+      letter-spacing: 16px;
       user-select: none;
       font-weight: 600;
       color: $main-color;
@@ -101,25 +101,26 @@ header {
 }
 
 .header--wing {
-  top: 138px;
+  bottom: -88px;
   left: 0;
-  line-height: 130px;
+  line-height: 0.2;
-  font-size: 130px;
+  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 {
-  left: 240px;
+  left: 300px;
   text-align: center;
-  color: lighten($main-color, 8);
+  // color: lighten($main-color, 8);
+  color: #5a6d88;
 }
 
 .datetime {
   left: unset;
-  right: 240px;
+  right: 300px;
-  color: $main-color;
+  color: #5a6d88;
   text-align: center;
-  color: lighten($main-color, 8);
-  font-size: 140px;
 }
 </style>

src/components/layout/Main.vue

@@ -1,18 +1,18 @@
 <template>
 	<main class="relative">
 		<!-- 缺陷分析 -->
-		<FaultAnalysis />
+		<!-- <FaultAnalysis /> -->
 
 		<!-- 环境浓度 -->
-		<Environ />
+		<!-- <Environ /> -->
 
 		<!-- 监控组 2 -->
-		<MonitorGroup2 />
+		<!-- <MonitorGroup2 /> -->
 
 		<!-- 数据组 -->
-		<DataGroup />
+		<!-- <DataGroup /> -->
 
-		<div class="video-crash" v-if="false"></div>
+		<!-- <div class="video-crash" v-if="false"></div> -->
 
 		<div class="eq-main absolute">
 			<div
@@ -95,19 +95,19 @@
 		</div>
 
 		<AreaOne class="area-one" />
-		<Runtime class="runtime" />
+		<!-- <Runtime class="runtime" />
 		<InWater />
-		<OutWater />
+		<OutWater /> -->
 	</main>
 </template>
 
 <script>
-import InWater from "../boxes/InWater.vue";
+// import InWater from "../boxes/InWater.vue";
-import OutWater from "../boxes/OutWater.vue";
+// import OutWater from "../boxes/OutWater.vue";
 import AreaOne from "../isolate-area-1/Area.vue";
 import Runtime from "../isolate-area-1/Runtime.vue";
-import MonitorGroup2 from "../groups/monitor2.vue";
+// import MonitorGroup2 from "../groups/monitor2.vue";
-import DataGroup from "../groups/data.vue";
+// import DataGroup from "../groups/data.vue";
 import FaultAnalysis from "../groups/fault.vue";
 import Environ from "../groups/environ.vue";
 import { mapMutations, mapState } from "vuex";
@@ -118,20 +118,20 @@ export default {
 	name: "Main",
 	components: {
 		Runtime,
-		DataGroup,
+		// DataGroup,
-		MonitorGroup2,
+		// MonitorGroup2,
 		Environ,
 		FaultAnalysis,
 		AreaOne,
-		InWater,
+		// InWater,
-		OutWater,
+		// OutWater,
 	},
 	props: {},
 	data() {
 		return {};
 	},
 	computed: mapState([
-		"kilnPressure",
+		// "kilnPressure",
 		"fireDirection",
 		"topLeftArrowRolling",
 		"topRightArrowRolling",
@@ -165,8 +165,10 @@ main {
 
 .area-one {
 	position: absolute;
-	top: 124px;
+	top: 110px;
-	left: 3910px;
+	left: 1450px;
+	// left: 50%;
+	// transform: translateX(-50%);
 }
 
 .runtime {
@@ -188,22 +190,23 @@ main {
 
 .video-bottom {
 	position: absolute;
-	bottom: 400px;
+	bottom: 212px;
-	left: 268px;
+	right: 85px;
-	transform: scale(1.25, 1.15);
+	transform: scale(0.8) rotateY(180deg)
 }
 
 .video-top {
 	position: absolute;
-	top: 250px;
+	top: 125px;
-	left: 320px;
+	right: 125px;
-	transform: scale(1.25);
+	// height: 200px;
+	transform: scale(0.8);
 }
 
 .arrow {
 	display: inline-block;
-	width: 64px;
+	width: 32px;
-	height: 64px;
+	height: 32px;
 	border-radius: 100%;
 	position: absolute;
 	background: #ff5757;
@@ -214,43 +217,43 @@ main {
 }
 
 .ar-top-right {
-	top: 190px;
+	top: 160px;
-	left: 110px;
+	right: 100px;
 }
 
 .ar-top-left {
-	top: 200px;
+	top: 120px;
-	left: 1480px;
+	right: 960px;
 }
 
 .ar-bottom-left {
-	top: 700px;
+	bottom: 280px;
-	left: 1430px;
+	right: 930px;
 }
 
 .ar-bottom-right {
-	top: 720px;
+	bottom: 290px;
-	left: 40px;
+	right: 54px;
 }
 
 .swd {
 	// background-size: 100% 10px;
-	width: 350px;
+	width: 240px;
-	height: 202px;
+	height: 90px;
 	position: absolute;
-	transform: rotateY(180deg);
+	// transform: rotateY(180deg);
 
 	p {
 		margin: 0;
 		color: #000;
-		margin-top: 16px;
+		margin-top: 8px;
 	}
 
 	.swd-box {
-		margin-left: 54px;
+		margin-left: 32px;
-		margin-top: 44px;
+		margin-top: 10px;
-		font-size: 30px;
+		font-size: 20px;
-		letter-spacing: 2px;
+		// 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,
@@ -258,8 +261,9 @@ main {
 
 		.swd-value {
 			color: #ff2020;
-			margin-top: 12px;
+			margin-top: 0;
-			font-size: 64px;
+			margin-bottom: 12px;
+			font-size: 48px;
 			overflow: hidden;
 			white-space: nowrap;
 			text-overflow: ellipsis;
@@ -270,43 +274,41 @@ main {
 
 .onekb,
 .onesp {
-	background: url(../../assets/tem-bottom.png) top 0 left 0 / 100% no-repeat;
+	background: url(../../assets/tem-bottom.png) 0 0 / 100% no-repeat;
 }
 
 .onekb {
-	top: 760px;
+	top: 520px;
-	left: 1560px;
+	right: 1000px;
 }
 
 .onesp {
-	top: 860px;
+	top: 590px;
-	left: 1100px;
+	right: 690px;
 }
 
 .twokb,
 .twosp {
-	background: url(../../assets/tem-top.png) top 0 left 0 / 100% no-repeat;
+	background: url(../../assets/tem-top.png) right 0 bottom 0 / 100% no-repeat;
 }
 
 .twokb {
-	top: 72px;
+	top: 108px;
-	left: 1580px;
+	right: 1020px;
 }
 
 .twosp {
-	top: -32px;
+	top: 32px;
-	left: 1080px;
+	right: 700px;
 }
 
 .eq-main {
-	width: 9162px;
+	width: 100%;
-	height: 1178px;
+	height: 800px;
 	background: url(../../assets/eq.png) no-repeat;
 	background-size: 100%;
-	top: 256px;
+	top: 320px;
-	left: 2172px;
 	position: relative;
-	transform: rotateY(0.5turn);
 }
 
 .eq-main::before {

src/views/HomeView.vue

@@ -8,33 +8,46 @@
 		<div class="bg-layer"></div>
 		<LeftSide />
 		<section class="center">
-			<BigHeader />
+			<div class="center-top">
-			<Main />
+				<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, LeftSide, RightSide },
+	components: { LeftSide, RightSide, MainContent, MonitorGroup2, DataGroup },
 	props: {},
 	data() {
 		return {
-			value: 100,
+			value: 10,
 		};
 	},
 	computed: {
 		styles() {
 			let v = (this.value / 100).toFixed(2);
 			return {
-				transform: `scale(${v * 24 / 33}, ${v})`,
+				transform: `scale(${v * 24 * 10 / 33}, ${v * 10})`,
 				transformOrigin: "top left",
 			};
 		},
@@ -94,7 +107,7 @@ export default {
 	left: 0;
 	width: 100%;
 	height: 100%;
-	background: #c9cce577;
+	// background: #c9cce577;
 	// background: url(../assets/bg.png) center/cover no-repeat;
 }
 
@@ -103,6 +116,20 @@ export default {
 	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 {
@@ -134,4 +161,18 @@ export default {
 	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

@@ -21,6 +21,6 @@ export default {
 .left-side {
 	// background: rgba(243, 54, 145, 0.166);
 	height: 4320px;
-	width: 3840px;
+	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

@@ -20,7 +20,7 @@ export default {
 
 .right-side {
 	// background: rgba(30, 133, 244, 0.292);
-	height: 4320px;
+	height: 4324px;
 	width: 3840px;
 }
 </style>