add 进口水温

src/components/boxes/InWater.vue

@@ -1,11 +1,23 @@
 <template>
 	<!-- 窑炉进口水温 -->
-	<Container usage="Charts">
+	<Container usage="NumberAndChart">
-		<SubContainer title="窑炉进口水温" icon="oil" padding="17px">
+		<SubContainer title="窑炉进口水温" icon="inWater" padding="17px">
-			<div class="tables flex" style="height: 100%">
+			<div class="pic" style=""></div>
-				<LineChart key="1" id="line-chart-9" class="flex-1" :config="chartConfig" />
+			<div class="flex flex-col">
-				<div class="vertical-line"></div>
+				<div class="realtime">
-				<LineChart key="2" id="line-chart-10" class="flex-1" :config="chartConfig" />
+					<div class="time flex flex-center">
+						<DigitalBox
+							class="time--item"
+							v-for="(item, index) in '999'.split('')"
+							:key="index"
+							:value="item"
+						/>
+						<span class="unit">℃</span>
+					</div>
+					<div class="text">进口实时水温</div>
+				</div>
+				<div class="wave"></div>
+				<div class="graph flex-1"></div>
 			</div>
 		</SubContainer>
 	</Container>
@@ -15,11 +27,12 @@
 import LineChart from "../charts/LineChart.vue";
 import Container from "../layout/Container.vue";
 import SubContainer from "../layout/SubContainer.vue";
+import DigitalBox from "../common/DigitalBox.vue";
 
 export default {
 	name: "XicaoTemp",
 	props: {},
-	components: { Container, SubContainer, LineChart },
+	components: { Container, SubContainer, LineChart, DigitalBox },
 	data() {
 		return {
 			chartConfig: {},
@@ -31,19 +44,81 @@ export default {
 <style scoped lang="scss">
 @import "../../assets/styles/functions";
 
+.pic {
+	background: url(../../assets/in-water.png) no-repeat;
+	background-size: 100% 100%;
+	background-position: center;
+	position: absolute;
+	top: 24px;
+	right: 0;
+	width: w(386px);
+	height: h(364px);
+}
+
+.wave {
+	transform: translateX(-16px);
+	width: w(793px);
+	height: h(72px);
+	background: url(../../assets/inwater.png) no-repeat;
+	background-size: 100% 100%;
+}
+
+.graph {
+	background: #ccc3;
+}
+
 .flex-1 {
 	flex: 1;
 	// background: #eee;
 }
 
-.vertical-line {
+.time {
-	margin: 0 3px;
+	// background: #eee;
-	width: 3px;
+	margin: 12px 0;
+	padding-left: 14px;
+}
+
+.time--item:not(:last-child) {
+	margin-right: 5px;
+}
+
+.unit {
+	font-family: Ubuntu, monospace, sans-serif !important;
+	font-size: 20px;
+	letter-spacing: 1px;
+	align-self: flex-end;
+}
+
+.text {
+	display: inline-block;
+	margin-left: 24px;
+	margin-bottom: 10px;
+	padding: 12px 0;
+	text-align: center;
+	font-size: 22px;
+	letter-spacing: 1px;
+	position: relative;
+	z-index: 10;
+	user-select: none;
+}
+
+.text::after {
+	content: "";
+	display: block;
+	position: absolute;
+	z-index: 0;
+	left: 0;
+	bottom: 10px;
+	height: 4px;
+	width: 100%;
+	/* 渐变色 */
 	background: radial-gradient(
 		ellipse at center,
 		#6fe2ff,
+		#6fe2ffc0,
 		#52cbef80,
-		transparent,
+		#52cbef30,
+		#52cbef00,
 		transparent
 	);
 }

src/components/layout/Main.vue

@@ -26,7 +26,9 @@
 		<div class="absolute left ou-temp">
 			<XicaoTemp />
 		</div>
-		<div class="right absolute"></div>
+		<div class="absolute in-water">
+			<InWater />
+		</div>
 	</main>
 </template>
 
@@ -38,6 +40,7 @@ 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 FanRuntime from "../boxes/FanRuntime.vue";
 import AreaOne from "../isolate-area-1/Area.vue";
 // import Container from './Container.vue'
@@ -54,6 +57,7 @@ export default {
 		TopTemp,
 		BottomTemp,
 		XicaoTemp,
+		InWater,
 	},
 	props: {},
 	data() {
@@ -107,4 +111,10 @@ main {
 	top: h(1588px);
 	left: w(6460px);
 }
+.in-water {
+	top: h(200px);
+	// left: w(8096px);
+	left: w(5096px);
+	z-index: 100;
+}
 </style>

src/components/layout/SubContainer.vue

@@ -33,7 +33,8 @@ export default {
 			iconClass: {
 				clock: 'icon-clock',
 				docs: 'icon-docs',
-				oil: 'icon-oil'
+				oil: 'icon-oil',
+				inWater: 'icon-water-in'
 			}
 		};
 	}
@@ -68,6 +69,11 @@ export default {
 	background-size: 100% 100%;
 }
 
+.icon-water-in {
+	background: url(../../assets/water-temp.png);
+	background-size: 100% 100%;
+}
+
 .title {
   /* margin: 12px 0; */
 	margin-bottom: 12px;