update oil flow

src/components/boxes/OilFlow.vue

@@ -3,11 +3,23 @@
 	<Container usage="Charts">
 		<SubContainer title="油流量" icon="oil" padding="24px 32px">
 			<div class="tables flex" style="height: 100%">
-				<LineChart key="1" id="line-chart-1" class="flex-1" unit="单位 kg/h" :legend="Object.keys(oilTable1)"
+				<LineChart
-					:series="oilTable1" />
+					key="1"
+					id="line-chart-1"
+					class="flex-1"
+					unit="单位 kg/h"
+					:legend="Object.keys(oilTable1)"
+					:series="oilTable1"
+				/>
 				<div class="vertical-line"></div>
-				<LineChart key="2" id="line-chart-2" class="flex-1" unit="单位 kg/h" :legend="Object.keys(oilTable2)"
+				<LineChart
-					:series="oilTable2" />
+					key="2"
+					id="line-chart-2"
+					class="flex-1"
+					unit="单位 kg/h"
+					:legend="Object.keys(oilTable2)"
+					:series="oilTable2"
+				/>
 			</div>
 		</SubContainer>
 	</Container>
@@ -18,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",
@@ -26,10 +39,50 @@ 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()),
+			},
 		};
 	},
 	computed: {
-		...mapState(["oilTable1", "oilTable2"]),
+		// ...mapState(["oilTable1", "oilTable2"]),
 	},
 };
 </script>
@@ -45,10 +98,12 @@ export default {
 .vertical-line {
 	margin: 0 adjust(3px);
 	width: adjust(3px);
-	background: radial-gradient(ellipse at center,
+	background: radial-gradient(
-			#3565ff,
+		ellipse at center,
-			#3565ff51,
+		#3565ff,
-			transparent,
+		#3565ff51,
-			transparent);
+		transparent,
+		transparent
+	);
 }
 </style>

src/components/charts/LineChart.vue

@@ -143,9 +143,9 @@ export default {
         this.chart = echarts.init(document.getElementById(this.id));
       this.chart.setOption({
         grid: {
-          top: adjust(16),
+          top: adjust(22),
-          left: adjust(20),
+          left: adjust(22),
-          bottom: adjust(16),
+          bottom: adjust(20),
           right: adjust(8),
         },
         xAxis: {
@@ -160,10 +160,10 @@ export default {
           },
           axisLabel: {
             color: "#3C4E8Baa",
-            fontSize: adjust(7),
+            fontSize: adjust(6),
             lineHeight: adjust(0),
-            margin: adjust(5),
+            margin: adjust(4),
-            rotate: 30,
+            rotate: 45,
           },
         },
         yAxis: {
@@ -172,7 +172,7 @@ export default {
           nameTextStyle: {
             color: "#3C4E8Baa",
             fontSize: adjust(8),
-            lineHeight: 1,
+            lineHeight: adjust(12),
             align: "center",
           },
           axisLine: {
@@ -278,48 +278,45 @@ li {
 }
 
 ul {
-  // padding: 0 adjust(8px);
+  width: 100%;
   display: flex;
   flex-wrap: wrap;
-  justify-content: flex-end;
+  justify-content: space-between;
-  align-items: center;
+  align-items: flex-end;
-  height: adjust(28px);
+  height: adjust(14px);
   white-space: pre-wrap;
-  padding-bottom: adjust(2px);
+  padding-bottom: 0;
+  padding-left: adjust(6px);
+  background: #0005;
 }
 
 li {
   text-align: right;
   position: relative;
   min-width: 40px;
-  margin-right: adjust(9px);
+  background: #f003;
-  padding: 0 adjust(2px);
-}
-
-li:not(:last-child) {
-  // margin-right: adjust(16px);
 }
 
 .line-chart__custom-legend {
   position: absolute;
-  top: adjust(-32px);
+  top: adjust(-20px);
   right: 0;
-  font-size: adjust(9px);
+  font-size: adjust(6px);
   font-family: Ubuntu, sans-serif;
   padding: 0;
   // max-width: 100%;
-  width: 65%;
+  width: 75%;
-  align-items: flex-start;
+  align-items: flex-end;
   justify-content: flex-end;
 }
 
 li::before {
   content: "";
   position: absolute;
-  top: adjust(2px);
+  top: adjust(0px);
-  left: adjust(-8px);
+  left: adjust(-6px);
-  width: adjust(8px);
+  width: adjust(6px);
-  height: adjust(8px);
+  height: adjust(6px);
   border-radius: adjust(1px);
   background: #eee6;
 }

src/components/common/SmallBox2.vue

@@ -59,7 +59,7 @@ export default {
 	flex-shrink: 0;
 	padding: 0;
 	user-select: none;
-	width: adjust(w(744px));
+	width: adjust(w(820px));
 	height: adjust(h(350px));
 	display: flex;
 	background: url(../../assets/top-middle.png) no-repeat;
@@ -89,8 +89,8 @@ export default {
 
 		.value {
 			color: #030609;
-			font-size: adjust(22px);
+			font-size: adjust(18px);
-			line-height: adjust(23px);
+			line-height: adjust(22px);
 		}
 	}
 }

src/components/groups/monitor2.vue

@@ -8,7 +8,7 @@
 // import { mapState } from "vuex";
 
 export default {
-  name: "MonitorGroup#2",
+  name: "MonitorGroup-2",
   props: {},
   components: {},
   data() {

src/components/groups/monitor3.vue

@@ -8,7 +8,7 @@
 // import { mapState } from "vuex";
 
 export default {
-  name: "MonitorGroup#3",
+  name: "MonitorGroup-3",
   props: {},
   components: {},
   data() {

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

@@ -36,7 +36,7 @@ export default {
         // { icon: "temp", title: "车间温度", value: "27℃" },
         { icon: "fire", title: "当前火向", value: "" },
         { icon: "clock", title: "换火时间", value: "20分" },
-        { icon: "sand", title: "剩余时间", value: "0" },
+        { icon: "sand", title: "剩余时间", value: "19分20秒" },
       ],
     };
   },

src/components/layout/Main.vue

@@ -180,7 +180,7 @@ main {
 .area-one {
 	position: absolute;
 	top: adjust(150px);
-	left: adjust(1340px);
+	left: adjust(1310px);
 }
 
 .video-crash {

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
+}