almost done

src/components/boxes/FanRuntime.vue

@@ -4,9 +4,7 @@
     <SubContainer title="风机运行情况" icon="fan" padding="24px 32px">
       <div class="tables flex" style="height: 100%">
         <div class="table-wrapper flex-1 align-start">
-          <div
-            v-if="tableData1 && tableData1.length === 0"
-            style="
+          <div v-if="tableData1 && tableData1.length === 0" style="
               position: absolute;
               top: 0;
               left: 0;
@@ -15,13 +13,12 @@
               background: #eee1;
               display: grid;
               place-items: center;
-              font-size: 24px;
-              color: #eee9;
-            "
-          >无数据</div>
+              font-size: 18px;
+              letter-spacing: 2px;
+              color: #eee;
+            ">无数据</div>
           <table class="table-1">
             <thead>
-              <!-- <tr style="font-size: 8px; background: #044a84; opacity: 19%"> -->
               <tr class="t-row">
                 <th>序号</th>
                 <th>设备名称</th>
@@ -29,18 +26,8 @@
                 <th>设备状态</th>
               </tr>
             </thead>
-            <!-- <tbody> -->
-            <!-- <tr
-							v-for="(row, index) in tableData1"
-							:key="index"
-							style="font-size: 7px; background: #0b5499; opacity: 35%"
-						> -->
             <transition-group name="fan-list" tag="tbody" mode="out-in">
-              <tr
-                class="t-row"
-                v-for="row in tableData1"
-                :key="row && 'length' in row ? row[0] : Math.random()"
-              >
+              <tr class="t-row" v-for="row in tableData1" :key="row && 'length' in row ? row[0] : Math.random()">
                 <td v-for="(d, idx) in row" :key="idx">
                   <template v-if="idx === 2">
                     <FrequentComp :value="d" />
@@ -188,22 +175,10 @@ export default {
   flex: 1;
 }
 
-.vertical-line {
-  margin: 0 adjust(3px);
-  width: adjust(3px);
-  background: radial-gradient(
-    ellipse at center,
-    #6fe2ff,
-    #52cbef80,
-    transparent,
-    transparent
-  );
-}
 .table-wrapper {
-  // padding-right: 6px;
   height: 400px;
-  // overflow-y: auto;
   overflow: hidden;
+  // background: #f001;
 }
 
 table {
@@ -211,6 +186,10 @@ table {
   border-spacing: adjust(1px);
 }
 
+// .table-1 {
+//   background: #00f3;
+// }
+
 // tr, td, th {
 // 	max-height: 13.88px !important;
 // }
@@ -219,7 +198,11 @@ table {
   height: adjust(14px);
 }
 
-.tables > table {
+.tables {
+  overflow: hidden;
+}
+
+.tables>table {
   overflow-y: auto;
 }
 
@@ -227,32 +210,35 @@ table {
   align-self: flex-start;
 }
 
-thead > tr th:first-child {
+thead>tr th:first-child {
   text-align: center;
 }
 
-thead > tr th {
-  font-size: adjust(10px);
-  line-height: 1.5;
+thead>tr th {
+  font-size: adjust(8px);
+  line-height: 1.2;
+  letter-spacing: 1px;
   padding: adjust(3px) adjust(8px);
-  font-weight: 400;
-  background: #044a8446;
+  font-weight: 600;
+  background: #4288df23;
+  color: #000;
   text-align: left;
 }
 
-tbody > tr:nth-child(odd) {
-  background: #0b549960;
+tbody>tr:nth-child(even) {
+  background: #4288df13;
 }
 
-tbody > tr td {
-  font-size: adjust(10px);
-  line-height: 1.25;
+tbody>tr td {
+  color: #000;
+  font-size: adjust(8px);
+  line-height: 1.2;
   padding: adjust(2px) adjust(8px);
   font-weight: 400;
   background: inherit;
 }
 
-tbody > tr td:first-child {
+tbody>tr td:first-child {
   text-align: center;
 }
 </style>

src/components/charts/LineChart.vue

@@ -19,8 +19,9 @@
         height: 100%;
         display: grid;
         place-items: center;
-        font-size: 24px;
-        color: #eee8;
+        font-size: 18px;
+        letter-spacing: 2px;
+        color: #eee;
         user-select: none;
       "
     >
@@ -142,10 +143,10 @@ export default {
         this.chart = echarts.init(document.getElementById(this.id));
       this.chart.setOption({
         grid: {
-          top: adjust(32),
-          left: adjust(32),
-          bottom: adjust(24),
-          right: adjust(12),
+          top: adjust(14),
+          left: adjust(18),
+          bottom: adjust(14),
+          right: adjust(8),
         },
         xAxis: {
           data: this.updateXAxis(),
@@ -158,10 +159,10 @@ export default {
             show: false,
           },
           axisLabel: {
-            color: "#fff9",
-            fontSize: adjust(8),
-            lineHeight: adjust(1),
-            margin: adjust(8),
+            color: "#fffd",
+            fontSize: adjust(6),
+            lineHeight: adjust(0),
+            margin: adjust(4),
             rotate: 30,
           },
         },
@@ -169,9 +170,10 @@ export default {
           type: "value",
           name: this.unit,
           nameTextStyle: {
-            color: "#fff9",
-            fontSize: adjust(9),
-            align: "",
+            color: "#fffd",
+            fontSize: adjust(6),
+            lineHeight: 1,
+            align: "center",
           },
           axisLine: {
             show: true,
@@ -185,8 +187,8 @@ export default {
           },
           axisLabel: {
             color: "#fff9",
-            fontSize: adjust(8),
-            lineHeight: adjust(1),
+            fontSize: adjust(6),
+            lineHeight: adjust(0),
           },
           splitLine: {
             lineStyle: {
@@ -229,7 +231,7 @@ export default {
               name: lgd,
               type: "line",
               symbol: "circle",
-              symbolSize: adjust(3),
+              symbolSize: adjust(2),
               lineStyle: {
                 width: adjust(1),
               },
@@ -282,8 +284,6 @@ ul {
   justify-content: flex-end;
   align-items: center;
   height: adjust(28px);
-  // background: #eeec;
-  // overflow-x: hidden;
   white-space: pre-wrap;
   padding-bottom: adjust(2px);
 }
@@ -360,8 +360,8 @@ li:nth-child(11)::before {
 
 .line-chart__wrapper {
   position: relative;
-  background: #7771;
-  border-radius: adjust(3px);
+  background: #3565ff10;
+  border-radius: adjust(4px);
   backdrop-filter: blur(adjust(2px));
   box-shadow: inset 0 0 adjust(10px) adjust(2px) rgba($color: #fff, $alpha: 0.1);
   height: 100%;

src/components/groups/data.vue

@@ -40,12 +40,14 @@ export default {
 @import "../../assets/styles/functions";
 
 section {
-  background: url('../../assets/middle-under.png') left 110px top 4px / 380px 22px no-repeat, #fcc7;
+  background: url('../../assets/middle-under.png') left 110px top 4px / 380px 22px no-repeat;
   width: adjust(w(13700px));
+  height: adjust(h(830px));
   // width: adjust(w(13500px));
-  height: adjust(h(960px));
+  // height: adjust(h(960px));
   position: absolute;
-  top: adjust(h(3265px));
+  top: adjust(h(3390px));
+  // top: adjust(h(3265px));
   left: adjust(w(3700px));
 }
 

src/components/groups/monitor2.vue

@@ -26,8 +26,9 @@ export default {
 section {
   background: url('../../assets/middle1.png') left 144px top 4px / 97% 420px no-repeat, #fcc7;
   width: adjust(w(13700px));
+  height: adjust(h(1600px));
   // width: adjust(w(13500px));
-  height: adjust(h(1470px));
+  // height: adjust(h(1470px));
   position: absolute;
   top: adjust(h(1740px));
   left: adjust(w(3700px));

src/components/layout/Container.vue

@@ -50,7 +50,8 @@ export default {
 
 .tables {
 	display: inline-block;
-	width: adjust(w(1115px));
+	// width: adjust(w(1115px));
+	width: adjust(w(1400px));
 	height: adjust(h(700px));
 	background: url(../../assets/box-table.png);
 	background-position: 0 0;

src/components/layout/Main.vue

@@ -63,11 +63,12 @@
 				</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="130"
 					muted
 					autoplay
 					loop
@@ -76,19 +77,19 @@
 				></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="130"
 					muted
 					autoplay
 					loop
 					disablepictureinpicture
 					src="../../assets/videos/fire-to-bottom.mp4"
 				></video>
-			</div> -->
+			</div>
 		</div>
 
 		<AreaOne class="area-one" />
@@ -225,9 +226,9 @@ main {
 
 .video-bottom {
 	position: absolute;
-	bottom: adjust(200.5px);
-	left: adjust(48px);
-	transform: scale(0.9);
+	bottom: adjust(207px);
+	left: adjust(29px);
+	transform: scale(0.95);
 }
 
 .video-top {
@@ -345,12 +346,11 @@ main {
 .eq-main::before {
 	content: "";
 	position: absolute;
-	//   right: adjust(1200px);
 	opacity: 0;
-	top: adjust(105px);
-	width: adjust(150px);
-	height: adjust(150px);
-	// background: url(../../assets/mirror.png) no-repeat;
+	top: adjust(55px);
+	width: adjust(75px);
+	height: adjust(75px);
+	background: url(../../assets/mirror.png) no-repeat;
 	background-size: 100% 100%;
 	animation: 10s linear 0.3s infinite mirror-to-left-2;
 }
@@ -358,20 +358,18 @@ main {
 .eq-main::after {
 	content: "";
 	position: absolute;
-	//   right: adjust(1200px);
 	opacity: 0;
-	top: adjust(105px);
-	// top: adjust(125px);
-	width: adjust(150px);
-	height: adjust(150px);
-	// background: url(../../assets/mirror.png) no-repeat;
+	top: adjust(55px);
+	width: adjust(75px);
+	height: adjust(75px);
+	background: url(../../assets/mirror.png) no-repeat;
 	background-size: 100% 100%;
 	animation: 10s linear 5s infinite mirror-to-left;
 }
 
 @keyframes mirror-to-left {
 	0% {
-		right: adjust(1200px);
+		right: adjust(700px);
 		opacity: 1;
 	}
 
@@ -380,13 +378,13 @@ main {
 	}
 
 	100% {
-		right: adjust(60px);
+		right: adjust(30px);
 	}
 }
 
 @keyframes mirror-to-left-2 {
 	0% {
-		right: adjust(1200px);
+		right: adjust(700px);
 		opacity: 1;
 	}
 
@@ -395,7 +393,7 @@ main {
 	}
 
 	100% {
-		right: adjust(60px);
+		right: adjust(30px);
 	}
 }