基本完成

src/components/boxes/InWater.vue

@@ -30,7 +30,7 @@ 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",

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

@@ -57,7 +57,7 @@ export default {
           right: 12,
         },
         xAxis: {
-					type: 'category',
+          type: "category",
           data: Array(31)
             .fill(1)
             .map((_, index) => index + 1),
@@ -94,7 +94,7 @@ export default {
             show: false,
           },
           axisLabel: {
-						formatter: '{value} ℃',
+            formatter: "{value} ℃",
             color: "#fff9",
             fontSize: 7,
             lineHeight: 1,
@@ -108,16 +108,33 @@ export default {
         },
         series: [
           {
-						data: Array(31).fill(1).map(() => Math.ceil(Math.random() * 100)),
+            data: Array(31)
-						type: 'bar',
+              .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',
+              color: "#eee8",
-							position: 'top',
+              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() {},

src/components/layout/Main.vue

@@ -1,5 +1,7 @@
 <template>
   <main class="">
+    <div class="eq-main absolute"></div>
+
     <AreaOne style="position: absolute; top: 160px; left: 1588px" />
 
     <div class="absolute left kiln-runtime">
@@ -29,6 +31,9 @@
     <div class="absolute in-water">
       <InWater />
     </div>
+    <div class="absolute out-water">
+      <OutWater />
+    </div>
   </main>
 </template>
 
@@ -41,6 +46,7 @@ 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'
@@ -58,6 +64,7 @@ export default {
     BottomTemp,
     XicaoTemp,
     InWater,
+    OutWater,
   },
   props: {},
   data() {
@@ -75,6 +82,27 @@ main {
   // 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);
@@ -113,8 +141,15 @@ main {
 }
 .in-water {
   top: h(200px);
-	// left: w(8096px);
+  left: w(8096px);
-	left: w(5096px);
+  //   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',
+    host: "127.0.0.1",
-    port: 8000
+    port: 8000,
-  }
+  },
-})
+});