基本完成

src/components/boxes/InWater.vue

@@ -1,28 +1,28 @@
 <template>
-	<!-- 窑炉进口水温 -->
-	<Container usage="NumberAndChart">
-		<SubContainer title="窑炉进口水温" icon="inWater" padding="17px">
-			<div class="pic" style=""></div>
-			<div class="content flex flex-col">
-				<div class="realtime">
-					<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">
-					<HistoryTrend />
-				</div>
-			</div>
-		</SubContainer>
-	</Container>
+  <!-- 窑炉进口水温 -->
+  <Container usage="NumberAndChart">
+    <SubContainer title="窑炉进口水温" icon="inWater" padding="17px">
+      <div class="pic" style=""></div>
+      <div class="content flex flex-col">
+        <div class="realtime">
+          <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">
+          <HistoryTrend />
+        </div>
+      </div>
+    </SubContainer>
+  </Container>
 </template>
 
 <script>
@@ -30,17 +30,17 @@ import LineChart from "../charts/LineChart.vue";
 import Container from "../layout/Container.vue";
 import SubContainer from "../layout/SubContainer.vue";
 import DigitalBox from "../common/DigitalBox.vue";
-import HistoryTrend from './HistoryTemp.vue'
+import HistoryTrend from "./HistoryTemp.vue";
 
 export default {
-	name: "XicaoTemp",
-	props: {},
-	components: { Container, SubContainer, LineChart, DigitalBox, HistoryTrend },
-	data() {
-		return {
-			chartConfig: {},
-		};
-	},
+  name: "XicaoTemp",
+  props: {},
+  components: { Container, SubContainer, LineChart, DigitalBox, HistoryTrend },
+  data() {
+    return {
+      chartConfig: {},
+    };
+  },
 };
 </script>
 
@@ -48,85 +48,85 @@ export default {
 @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);
+  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);
 }
 
 .content {
-	height: 100%;
+  height: 100%;
 }
 
 .wave {
-	transform: translateX(-16px);
-	width: w(793px);
-	height: h(72px);
-	background: url(../../assets/inwater.png) no-repeat;
-	background-size: 100% 100%;
+  transform: translateX(-16px);
+  width: w(793px);
+  height: h(72px);
+  background: url(../../assets/inwater.png) no-repeat;
+  background-size: 100% 100%;
 }
 
 .graph {
-	// background: #ccc3;
+  // background: #ccc3;
 }
 
 .flex-1 {
-	flex: 1;
-	// background: #eee;
+  flex: 1;
+  // background: #eee;
 }
 
 .time {
-	// background: #eee;
-	margin: 12px 0;
-	padding-left: 14px;
+  // background: #eee;
+  margin: 12px 0;
+  padding-left: 14px;
 }
 
 .time--item:not(:last-child) {
-	margin-right: 5px;
+  margin-right: 5px;
 }
 
 .unit {
-	font-family: Ubuntu, monospace, sans-serif !important;
-	font-size: 20px;
-	letter-spacing: 1px;
-	align-self: flex-end;
+  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;
+  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,
-		#52cbef30,
-		#52cbef00,
-		transparent
-	);
+  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,
+    #52cbef30,
+    #52cbef00,
+    transparent
+  );
 }
 </style>

src/components/boxes/OutWater.vue

@@ -0,0 +1,132 @@
+<template>
+  <!-- 窑炉出口水温 -->
+  <Container usage="NumberAndChart">
+    <SubContainer title="窑炉出口水温" icon="inWater" padding="17px">
+      <div class="pic" style=""></div>
+      <div class="content flex flex-col">
+        <div class="realtime">
+          <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">
+          <HistoryTrend />
+        </div>
+      </div>
+    </SubContainer>
+  </Container>
+</template>
+
+<script>
+import LineChart from "../charts/LineChart.vue";
+import Container from "../layout/Container.vue";
+import SubContainer from "../layout/SubContainer.vue";
+import DigitalBox from "../common/DigitalBox.vue";
+import HistoryTrend from "./HistoryTemp.vue";
+
+export default {
+  name: "XicaoTemp",
+  props: {},
+  components: { Container, SubContainer, LineChart, DigitalBox, HistoryTrend },
+  data() {
+    return {
+      chartConfig: {},
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../assets/styles/functions";
+
+.pic {
+  background: url(../../assets/out-water.png) no-repeat;
+  background-size: 100% 100%;
+  background-position: center;
+  position: absolute;
+  top: 24px;
+  right: 0;
+  width: w(386px);
+  height: h(364px);
+}
+
+.content {
+  height: 100%;
+}
+
+.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;
+}
+
+.time {
+  // background: #eee;
+  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,
+    #52cbef30,
+    #52cbef00,
+    transparent
+  );
+}
+</style>

src/components/charts/BarChart.vue

@@ -1,6 +1,6 @@
 <template>
-	<!-- bar chart  -->
-	<div class="bar-chart" :id="id"></div>
+  <!-- bar chart  -->
+  <div class="bar-chart" :id="id"></div>
 </template>
 
 <script>
@@ -8,9 +8,9 @@ import * as echarts from "echarts/core";
 import { BarChart } from "echarts/charts";
 
 import {
-	TitleComponent,
-	TooltipComponent,
-	GridComponent,
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
 } from "echarts/components";
 
 import { LabelLayout, UniversalTransition } from "echarts/features";
@@ -18,110 +18,127 @@ import { LabelLayout, UniversalTransition } from "echarts/features";
 import { CanvasRenderer } from "echarts/renderers";
 
 echarts.use([
-	TitleComponent,
-	TooltipComponent,
-	GridComponent,
-	BarChart,
-	LabelLayout,
-	UniversalTransition,
-	CanvasRenderer,
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  BarChart,
+  LabelLayout,
+  UniversalTransition,
+  CanvasRenderer,
 ]);
 
 export default {
-	name: "BarChart",
-	props: {
-		config: {
-			type: Object,
-			default: () => ({}),
-		},
-	},
-	data() {
-		return {
-			id: Math.random().toString(),
-			chart: null,
-			config: {},
-		};
-	},
-	mounted() {
-		this.init();
-	},
-	methods: {
-		init() {
-			if (!this.chart)
-				this.chart = echarts.init(document.getElementById(this.id));
-			this.chart.setOption({
-				grid: {
-					top: 28,
-					left: 28,
-					bottom: 18,
-					right: 12,
-				},
-				xAxis: {
-					type: 'category',
-					data: Array(31)
-						.fill(1)
-						.map((_, index) => index + 1),
-					axisLine: {
-						lineStyle: {
-							// width: 1,
-							color: "#5982b2a0",
-						},
-					},
-					axisTick: {
-						show: false,
-					},
-					axisLabel: {
-						color: "#ffffff",
-						fontSize: 7,
-						lineHeight: 1,
-					},
-				},
-				yAxis: {
-					type: "value",
-					name: "单位/℃",
-					nameTextStyle: {
-						color: "#fff9",
-						fontSize: 8,
-						align: "right",
-					},
-					axisLine: {
-						show: true,
-						lineStyle: {
-							color: "#5982b2a0",
-						},
-					},
-					axisTick: {
-						show: false,
-					},
-					axisLabel: {
-						formatter: '{value} ℃',
-						color: "#fff9",
-						fontSize: 7,
-						lineHeight: 1,
-					},
-					splitLine: {
-						lineStyle: {
-							color: "#5982b2a0",
-						},
-					},
-					// data: [100, 200, 300, 400, 500],
-				},
-				series: [
-					{
-						data: Array(31).fill(1).map(() => Math.ceil(Math.random() * 100)),
-						type: 'bar',
-						label: {
-							show: true,
-							fontSize: 6,
-							color: '#eee8',
-							position: 'top',
-						}
-					}
-				]
-			});
-		},
-		initData() {},
-	},
+  name: "BarChart",
+  props: {
+    config: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      id: Math.random().toString(),
+      chart: null,
+      config: {},
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      if (!this.chart)
+        this.chart = echarts.init(document.getElementById(this.id));
+      this.chart.setOption({
+        grid: {
+          top: 28,
+          left: 28,
+          bottom: 18,
+          right: 12,
+        },
+        xAxis: {
+          type: "category",
+          data: Array(31)
+            .fill(1)
+            .map((_, index) => index + 1),
+          axisLine: {
+            lineStyle: {
+              // width: 1,
+              color: "#5982b2a0",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            color: "#ffffff",
+            fontSize: 7,
+            lineHeight: 1,
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位/℃",
+          nameTextStyle: {
+            color: "#fff9",
+            fontSize: 8,
+            align: "right",
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#5982b2a0",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            formatter: "{value} ℃",
+            color: "#fff9",
+            fontSize: 7,
+            lineHeight: 1,
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#5982b2a0",
+            },
+          },
+          // data: [100, 200, 300, 400, 500],
+        },
+        series: [
+          {
+            data: Array(31)
+              .fill(1)
+              .map(() => {
+                let v = Math.ceil(Math.random() * 100);
+                while (v < 60) {
+                  v = Math.ceil(Math.random() * 100);
+                }
+                return v;
+              }),
+            type: "bar",
+            barWidth: 4,
+            label: {
+              show: true,
+              fontSize: 6,
+              color: "#eee8",
+              position: "top",
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "#A0FF49" },
+                { offset: 0.35, color: "#49FF9A" },
+                { offset: 0.7, color: "#49F2FF" },
+                { offset: 1, color: "#0D6FFF" },
+              ]),
+            },
+          },
+        ],
+      });
+    },
+    initData() {},
+  },
 };
 </script>
 

src/components/layout/Main.vue

@@ -1,35 +1,40 @@
 <template>
-	<main class="">
-		<AreaOne style="position: absolute; top: 160px; left: 1588px" />
+  <main class="">
+    <div class="eq-main absolute"></div>
 
-		<div class="absolute left kiln-runtime">
-			<KilnRuntime />
-		</div>
-		<div class="absolute left kiln-pressure">
-			<KilnPressure />
-		</div>
-		<div class="absolute left fan-runtime">
-			<FanRuntime />
-		</div>
-		<div class="absolute left oil-flow">
-			<OilFlow />
-		</div>
-		<div class="absolute left gas-flow">
-			<GasFlow />
-		</div>
-		<div class="absolute left top-temp">
-			<TopTemp />
-		</div>
-		<div class="absolute left bottom-temp">
-			<BottomTemp />
-		</div>
-		<div class="absolute left ou-temp">
-			<XicaoTemp />
-		</div>
-		<div class="absolute in-water">
-			<InWater />
-		</div>
-	</main>
+    <AreaOne style="position: absolute; top: 160px; left: 1588px" />
+
+    <div class="absolute left kiln-runtime">
+      <KilnRuntime />
+    </div>
+    <div class="absolute left kiln-pressure">
+      <KilnPressure />
+    </div>
+    <div class="absolute left fan-runtime">
+      <FanRuntime />
+    </div>
+    <div class="absolute left oil-flow">
+      <OilFlow />
+    </div>
+    <div class="absolute left gas-flow">
+      <GasFlow />
+    </div>
+    <div class="absolute left top-temp">
+      <TopTemp />
+    </div>
+    <div class="absolute left bottom-temp">
+      <BottomTemp />
+    </div>
+    <div class="absolute left ou-temp">
+      <XicaoTemp />
+    </div>
+    <div class="absolute in-water">
+      <InWater />
+    </div>
+    <div class="absolute out-water">
+      <OutWater />
+    </div>
+  </main>
 </template>
 
 <script>
@@ -41,28 +46,30 @@ 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 OutWater from "../boxes/OutWater.vue";
 import FanRuntime from "../boxes/FanRuntime.vue";
 import AreaOne from "../isolate-area-1/Area.vue";
 // import Container from './Container.vue'
 
 export default {
-	name: "Main",
-	components: {
-		AreaOne,
-		KilnRuntime,
-		KilnPressure,
-		FanRuntime,
-		OilFlow,
-		GasFlow,
-		TopTemp,
-		BottomTemp,
-		XicaoTemp,
-		InWater,
-	},
-	props: {},
-	data() {
-		return {};
-	},
+  name: "Main",
+  components: {
+    AreaOne,
+    KilnRuntime,
+    KilnPressure,
+    FanRuntime,
+    OilFlow,
+    GasFlow,
+    TopTemp,
+    BottomTemp,
+    XicaoTemp,
+    InWater,
+    OutWater,
+  },
+  props: {},
+  data() {
+    return {};
+  },
 };
 </script>
 
@@ -70,51 +77,79 @@ export default {
 @import "../../assets/styles/functions";
 
 main {
-	height: 1px;
-	flex: 1;
-	// background: #eee2;
+  height: 1px;
+  flex: 1;
+  // background: #eee2;
+}
+
+.eq-main {
+  width: w(7150px);
+  height: h(960px);
+  background: url(../../assets/eq.png) no-repeat;
+  background-size: 100%;
+  top: 170px;
+  left: 380px;
+  position: relative;
+}
+
+.eq-main::after {
+	content: '';
+	position: absolute;
+	right: 1000px;
+	top: 164px;
+	width: 150px;
+	height: 150px;
+	background: url(../../assets/mirror.png) no-repeat;
+	background-size: 100% 100%;
 }
 
 .kiln-runtime {
-	top: h(200px);
-	left: w(60px);
+  top: h(200px);
+  left: w(60px);
 }
 
 .kiln-pressure {
-	top: h(610px);
-	left: w(60px);
+  top: h(610px);
+  left: w(60px);
 }
 
 .fan-runtime {
-	top: h(1020px);
-	left: w(60px);
+  top: h(1020px);
+  left: w(60px);
 }
 
 .oil-flow {
-	top: h(1588px);
-	left: w(60px);
+  top: h(1588px);
+  left: w(60px);
 }
 
 .gas-flow {
-	top: h(1588px);
-	left: w(1660px);
+  top: h(1588px);
+  left: w(1660px);
 }
 .top-temp {
-	top: h(1588px);
-	left: w(3260px);
+  top: h(1588px);
+  left: w(3260px);
 }
 .bottom-temp {
-	top: h(1588px);
-	left: w(4860px);
+  top: h(1588px);
+  left: w(4860px);
 }
 .ou-temp {
-	top: h(1588px);
-	left: w(6460px);
+  top: h(1588px);
+  left: w(6460px);
 }
 .in-water {
-	top: h(200px);
-	// left: w(8096px);
-	left: w(5096px);
-	z-index: 100;
+  top: h(200px);
+  left: w(8096px);
+  //   left: w(5096px);
+  z-index: 100;
+}
+
+.out-water {
+  top: h(1177px);
+  left: w(8096px);
+  //   left: w(5096px);
+  z-index: 100;
 }
 </style>

vue.config.js

@@ -1,8 +1,8 @@
-const { defineConfig } = require('@vue/cli-service')
+const { defineConfig } = require("@vue/cli-service");
 module.exports = defineConfig({
   transpileDependencies: true,
   devServer: {
-    host: '127.0.0.1',
-    port: 8000
-  }
-})
+    host: "127.0.0.1",
+    port: 8000,
+  },
+});