update bottom

src/components/boxes/BottomTemp.vue

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

src/components/boxes/FanRuntime.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 风机运行情况 -->
   <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="table-wrapper flex-1 align-start">
           <div

src/components/boxes/GasFlow.vue

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

src/components/boxes/OilFlow.vue

@@ -1,25 +1,13 @@
 <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
+				<LineChart key="1" id="line-chart-1" class="flex-1" unit="单位 kg/h" :legend="Object.keys(oilTable1)"
-					key="1"
+					:series="oilTable1" />
-					id="line-chart-1"
-					class="flex-1"
-					unit="单位 kg/h"
-					:legend="Object.keys(oilTable1)"
-					:series="oilTable1"
-				/>
 				<div class="vertical-line"></div>
-				<LineChart
+				<LineChart key="2" id="line-chart-2" class="flex-1" unit="单位 kg/h" :legend="Object.keys(oilTable2)"
-					key="2"
+					:series="oilTable2" />
-					id="line-chart-2"
-					class="flex-1"
-					unit="单位 kg/h"
-					:legend="Object.keys(oilTable2)"
-					:series="oilTable2"
-				/>
 			</div>
 		</SubContainer>
 	</Container>
@@ -57,12 +45,10 @@ export default {
 .vertical-line {
 	margin: 0 adjust(3px);
 	width: adjust(3px);
-	background: radial-gradient(
+	background: radial-gradient(ellipse at center,
-		ellipse at center,
+			#3565ff,
-		#6fe2ff,
+			#3565ff51,
-		#52cbef80,
+			transparent,
-		transparent,
+			transparent);
-		transparent
-	);
 }
 </style>

src/components/boxes/TopTemp.vue

@@ -1,25 +1,13 @@
 <template>
 	<!-- 窑顶温度 -->
 	<Container usage="Charts">
-		<SubContainer title="窑顶温度" icon="ktop" padding="34px">
+		<SubContainer title="窑顶温度" icon="ktop" padding="24px 32px">
 			<div class="tables flex" style="height: 100%">
-				<LineChart
+				<LineChart key="1" id="line-chart-5" class="flex-1" unit="单位/℃" :legend="Object.keys(kilnTop1)"
-					key="1"
+					:series="kilnTop1" />
-					id="line-chart-5"
-					class="flex-1"
-					unit="单位/℃"
-					:legend="Object.keys(kilnTop1)"
-					:series="kilnTop1"
-				/>
 				<div class="vertical-line"></div>
-				<LineChart
+				<LineChart key="2" id="line-chart-6" class="flex-1" unit="单位/℃" :legend="Object.keys(kilnTop2)"
-					key="2"
+					:series="kilnTop2" />
-					id="line-chart-6"
-					class="flex-1"
-					unit="单位/℃"
-					:legend="Object.keys(kilnTop2)"
-					:series="kilnTop2"
-				/>
 			</div>
 		</SubContainer>
 	</Container>
@@ -65,12 +53,10 @@ export default {
 .vertical-line {
 	margin: 0 adjust(3px);
 	width: adjust(3px);
-	background: radial-gradient(
+	background: radial-gradient(ellipse at center,
-		ellipse at center,
+			#3565ff,
-		#6fe2ff,
+			#3565ff51,
-		#52cbef80,
+			transparent,
-		transparent,
+			transparent);
-		transparent
-	);
 }
 </style>

src/components/groups/data.vue

@@ -1,16 +1,32 @@
 <template>
-  <section class="data-group">
+  <section class="data-group absolute">
-
+    <OilFlow />
+    <GasFlow />
+    <TopTemp />
+    <BottomTemp />
+    <OilFlow />
+    <FanRuntime />
   </section>
 </template>
 
 <script>
+import OilFlow from "../boxes/OilFlow.vue";
+import GasFlow from "../boxes/GasFlow.vue";
+import TopTemp from "../boxes/TopTemp.vue";
+import BottomTemp from "../boxes/BottomTemp.vue";
+import FanRuntime from "../boxes/FanRuntime.vue";
 // import { mapState } from "vuex";
 
 export default {
   name: "DataGroup",
   props: {},
-  components: {},
+  components: {
+    FanRuntime,
+    OilFlow,
+    GasFlow,
+    TopTemp,
+    BottomTemp,
+  },
   data() {
     return {};
   },
@@ -24,7 +40,7 @@ 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, #fcc7;
   width: adjust(w(13700px));
   // width: adjust(w(13500px));
   height: adjust(h(960px));
@@ -42,4 +58,10 @@ section::before {
   top: 0;
   left: 0;
 }
+
+.data-group {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
 </style>

src/components/layout/Container.vue

@@ -50,8 +50,8 @@ export default {
 
 .tables {
 	display: inline-block;
-	width: adjust(w(800px));
+	width: adjust(w(1115px));
-	height: adjust(h(528px));
+	height: adjust(h(700px));
 	background: url(../../assets/box-table.png);
 	background-position: 0 0;
 	/** top left */
@@ -60,8 +60,8 @@ export default {
 
 .charts {
 	display: inline-block;
-	width: adjust(w(1580px));
+	width: adjust(w(2440px));
-	height: adjust(h(520px));
+	height: adjust(h(700px));
 	background: url(../../assets/box-chart.png);
 	background-position: 0 0;
 	/** top left */

src/components/layout/SubContainer.vue

@@ -72,28 +72,33 @@ export default {
 }
 
 .icon-oil {
-	background: url(../../assets/oil.png);
+	background: url(../../assets/oil.png) top 15% left 0 / 95% 85% no-repeat;
-	background-size: 100% 100%;
+	margin-right: 6px;
 }
+
 .icon-gas {
-	background: url(../../assets/gas-icon.png);
+	background: url(../../assets/gas-icon.png) top 15% left 0 / 95% 85% no-repeat;
-	background-size: 100% 100%;
+	margin-right: 6px;
 }
+
 .icon-xc {
 	background: url(../../assets/xicao-icon.png);
 	background-size: 100% 100%;
 }
+
 .icon-fan {
-	background: url(../../assets/fan-icon.png);
+	background: url(../../assets/fan-icon.png) top 15% left 0 / 95% 85% 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 15% left 0 / 95% 85% no-repeat;
-	background-size: 100% 100%;
+	margin-right: 6px;
 }
+
 .icon-kiln-bottom {
-	background: url(../../assets/kiln-bottom-icon.png);
+	background: url(../../assets/kiln-bottom-icon.png) top 15% left 0 / 95% 85% no-repeat;
-	background-size: 100% 100%;
+	margin-right: 6px;
 }
 
 .icon-water-in {