update 进出口实时水温

src/components/boxes/HistoryTemp.vue

@@ -1,52 +1,50 @@
 <template>
-  <div class="history-temp flex flex-col" style="height: 100%; position: relative;">
+	<div
-    <h3>{{ title }}</h3>
+		class="history-temp flex flex-col"
-    <BarChart class="flex-1" :series="series" />
+		style="height: 100%; position: relative"
-    <div
+	>
-      v-if="series && series.length === 0"
+		<h3>{{ title }}</h3>
-      style="
+		<BarChart class="flex-1" :series="series" />
-        position: absolute;
+		<div
-        top: 8px;
+			v-if="series && series.length === 0"
-        left: -20px;
+			style="
-        width: 110%;
+				position: absolute;
-        height: 105%;
+				top: 8px;
-        background: #eee1;
+				left: -20px;
-        display: grid;
+				width: 110%;
-        place-items: center;
+				height: 105%;
-        font-size: 12px;
+				background: #eee1;
-        color: #eee9;
+				display: grid;
-      "
+				place-items: center;
-    >
+				font-size: 32px;
-      无数据
+				letter-spacing: 6px;
-    </div>
+				color: #777;
-  </div>
+			"
+		>
+			无数据
+		</div>
+	</div>
 </template>
 
 <script>
 import BarChart from "../charts/BarChart.vue";
-import { mapState } from "vuex";
 
 export default {
-  name: "HistoryTemp",
+	name: "HistoryTemp",
-  components: { BarChart },
+	components: { BarChart },
-  props: {
+	props: {
-    series: {
+		series: {
-      type: Array,
+			type: Array,
-      default: () => [],
+			default: () => [],
-    },
+		},
-    title: {
+		title: {
-      type: String,
+			type: String,
-      default: "窑炉历史温度趋势",
+			default: "窑炉历史温度趋势",
-    },
+		},
-  },
+	},
-  data() {
+	data() {
-    return {};
+		return {};
-  },
+	},
-  computed: {
-    ...mapState(["kilnWaterIn", "kilnWaterOut"]),
-  },
-  mounted() {},
-  methods: {},
 };
 </script>
 
@@ -54,17 +52,22 @@ export default {
 @import "../../assets/styles/functions";
 
 .flex-1 {
-  flex: 1;
+	flex: 1;
-  // background: #eee;
+	// background: #eee;
+}
+
+.history-temp {
+	// background: #f003;
 }
 
 h3 {
-  margin: 0;
+	margin: 0;
-  font-family: sans-serif;
+	font-family: sans-serif;
-  font-weight: 400;
+	font-weight: 400;
-  font-size: adjust(h(20px));
+	font-size: 30px;
-  letter-spacing: 1px;
+	line-height: 34px;
-  color: #0c71ff;
+	letter-spacing: 2px;
-  margin: adjust(h(12px)) 0;
+	color: #0c71ff;
+	margin: 0;
 }
 </style>

src/components/boxes/InWater.vue

@@ -54,8 +54,7 @@ export default {
 	left: 27px;
 	height: 509px;
 	width: 1323px;
-	background: url(../../assets/in-water.png) top 0 left 0 / cover no-repeat,
+	background: url(../../assets/in-water.png) top 0 left 0 / cover no-repeat;
-		#0068ff33;
 }
 
 .content {
@@ -70,7 +69,9 @@ export default {
 }
 
 .graph {
-	// background: #ccc3;
+	// background: #0cc3;
+	height: 436px;
+	transform: translate(0, -64px);
 }
 
 .flex-1 {

src/components/boxes/OutWater.vue

@@ -15,6 +15,7 @@
 						title="窑炉出口水温历史"
 						:series="kilnWaterOut"
 					/>
+					<!-- :series="[11, 22, 33, 44, 55, 66, 77, 88, 99, 100, 32, 99, 88, 31]" -->
 				</div>
 			</div>
 		</SubContainer>
@@ -52,8 +53,7 @@ export default {
 	left: 1350px;
 	height: 509px;
 	width: 1323px;
-	background: url(../../assets/out-water.png) top 0 left 0 / cover no-repeat,
+	background: url(../../assets/out-water.png) top 0 left 0 / cover no-repeat;
-		#ff68ff33;
 }
 
 .content {
@@ -68,9 +68,10 @@ export default {
 }
 
 .graph {
-	// background: #ccc3;
+	// background: #0cc3;
+	height: 436px;
+	transform: translate(0, -64px);
 }
-
 .flex-1 {
 	flex: 1;
 	// background: #eee;

src/components/charts/BarChart.vue

@@ -75,10 +75,10 @@ export default {
         this.chart = echarts.init(document.getElementById(this.id));
       this.chart.setOption({
         grid: {
-          top: adjust(0),
+          top: 32,
-          left: adjust(10),
+          left: 64,
-          bottom: adjust(10),
+          bottom: 64,
-          right: adjust(0),
+          right: 32,
         },
         xAxis: {
           type: "category",
@@ -93,10 +93,10 @@ export default {
           },
           axisLabel: {
             color: "#3C4E8B",
-            fontSize: adjust(4),
+            fontSize: 16,
-            lineHeight: adjust(0),
+            lineHeight: 0,
-            margin: adjust(4),
+            margin: 16,
-            rotate: 30,
+            rotate: 45,
           },
         },
         yAxis: {
@@ -119,8 +119,8 @@ export default {
           axisLabel: {
             formatter: "{value} ℃",
             color: "#3C4E8B",
-            fontSize: adjust(4),
+            fontSize: 16,
-            lineHeight: adjust(0),
+            lineHeight: 0,
           },
           splitLine: {
             lineStyle: {
@@ -132,20 +132,11 @@ export default {
         series: [
           {
             data: this.series,
-            //   Array(24)
-            //     .fill(1)
-            //     .map(() => {
-            //       let v = Math.ceil(Math.random() * 100);
-            //       while (v < 60) {
-            //         v = Math.ceil(Math.random() * 100);
-            //       }
-            //       return v;
-            //     }),
             type: "bar",
-            barWidth: adjust(4),
+            barWidth: 12,
             label: {
               show: true,
-              fontSize: adjust(7),
+              fontSize: 18,
               color: "#eee8",
               position: "topRight",
               rotate: 90,
@@ -153,11 +144,16 @@ export default {
             },
             itemStyle: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: "#A0FF49" },
+                { offset: 0, color: "#996ef9" },
-                { offset: 0.35, color: "#49FF9A" },
+                { offset: 0.7, color: "#187aff" },
-                { offset: 0.7, color: "#49F2FF" },
                 { offset: 1, color: "#0D6FFF" },
               ]),
+              // 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" },
+              // ]),
             },
           },
         ],

src/components/groups/data.vue

@@ -41,7 +41,7 @@ export default {
 
 section {
 	// background: url('../../assets/middle-under.png') left 110px top 4px / 380px 22px no-repeat;
-	background: rgba(124, 63, 238, 0.722);
+	// background: rgba(124, 63, 238, 0.722);
 	width: 100%;
 	position: absolute;
   bottom: 0;