update 底部

src/components/boxes/BottomTemp.vue

@@ -55,8 +55,8 @@ export default {
 }
 
 .vertical-line {
-	margin: 0 adjust(3px);
+	margin: 0 6px;
-	width: adjust(3px);
+	width: 6px;
 	background: radial-gradient(
 		ellipse at center,
 		#3565ff,

src/components/boxes/FanRuntime.vue

@@ -24,13 +24,13 @@
 					<table class="table-1">
 						<thead>
 							<tr class="t-row">
-								<th style="width: 90px">序号</th>
+								<th style="width: 160px">序号</th>
 								<!-- <th style="width: 180px">设备名称</th>
 								<th style="width: 180px">运行频率</th>
 								<th style="width: 180px">设备状态</th> -->
-								<th style="width: 220px">设备名称</th>
+								<th style="width: 240px">设备名称</th>
-								<th style="width: 160px">运行频率</th>
+								<th style="width: 200px">运行频率</th>
-								<th style="width: 160px">设备状态</th>
+								<th style="width: 200px">设备状态</th>
 							</tr>
 						</thead>
 						<transition-group name="fan-list" tag="tbody" mode="out-in">
@@ -39,7 +39,14 @@
 								v-for="row in tableData1"
 								:key="row && 'length' in row ? row[0] : Math.random()"
 							>
-								<td v-for="(d, idx) in row" :key="idx">
+								<td
+									v-for="(d, idx) in row"
+									:key="idx"
+									:data-title="idx == 1 ? d : null"
+								>
+									<!-- :data-cx="cursorX"
+									:data-cy="cursorY"
+									@mouseover="handleMouseOver" -->
 									<template v-if="idx === 2">
 										<FrequentComp :value="d" />
 									</template>
@@ -48,7 +55,9 @@
 									</template>
 									<template v-else>
 										<!-- <el-tooltip effect="light" :content="d" placement="top"> -->
-											<span>{{ d }}</span>
+										<span :class="idx == 1 ? 'eqName' : 'sequence'">{{
+											d
+										}}</span>
 										<!-- </el-tooltip> -->
 									</template>
 								</td>
@@ -120,6 +129,8 @@ export default {
 				[9, "风机9", "未运行", "正常" /**or 0,1*/],
 				[10, "风机10", "86423Hz", "正常" /**or 0,1*/],
 			],
+			cursorX: 0,
+			cursorY: 0
 		};
 	},
 	computed: {
@@ -150,7 +161,17 @@ export default {
 				if (inData) this.tableData1.splice(this.tableData1.length, 0, inData);
 			}, 200);
 			if (outData) this.tableCache.push(outData);
-		}, 3000);
+		}, 1000 * 60 * 2);
+	},
+	methods: {
+		// handleMouseOver(e) {
+		// 	if (e.target.dataset.title) {
+		// 		// 获取鼠标位置
+		// 		console.log("handleMouseOver", e.clientX, e.pageX, e.layorX, e.offsetX); //  e.target.dataset.title);
+		// 		this.cursorX = e.offsetX + 10
+		// 		this.cursorY = e.offsetY + 10
+		// 	}
+		// },
 	},
 };
 </script>
@@ -189,30 +210,24 @@ export default {
 }
 
 .table-wrapper {
-	height: 400px;
+	height: 420px;
 	overflow: hidden;
 	// background: #f001;
 }
 
 table {
+	table-layout: fixed;
 	width: 100%;
-	border-spacing: adjust(1px);
+	border-spacing: 2px;
 }
 
-// .table-1 {
-//   background: #00f3;
-// }
-
-// tr, td, th {
-// 	max-height: 13.88px !important;
-// }
-
 .t-row {
-	height: adjust(14px);
+	height: 50px;
 }
 
 .tables {
 	overflow: hidden;
+	padding: 12px 32px 32px;
 }
 
 .tables > table {
@@ -228,38 +243,67 @@ thead > tr th:first-child {
 }
 
 thead > tr th {
-	font-size: adjust(8px);
+	font-size: 36px;
 	font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC,
 		Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei,
 		"微软雅黑", Arial, Helvetica, sans-serif;
-	line-height: 1.25;
+	line-height: 1;
 	letter-spacing: 1px;
-	padding: adjust(3px) adjust(8px);
+	padding: 8px 48px;
 	font-weight: 600;
 	background: #4288df23;
 	color: #030609d6;
 	text-align: left;
+	user-select: none;
 }
 
 tbody > tr:nth-child(even) {
-  background: #4288df13;
+	background: #4288df13;
 }
 
+// tbody > tr td:not(:nth-child(2)) {
 tbody > tr td {
+	user-select: none;
 	font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC,
 		Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei,
 		"微软雅黑", Arial, Helvetica, sans-serif;
 	color: #030609d6;
-	font-size: adjust(8px);
+	font-size: 32px;
-	height: adjust(8px * 1.2);
+	line-height: 1;
-	line-height: 1.2;
-	padding: adjust(2px) adjust(8px);
-	font-weight: 400;
-  overflow: hidden;
 	background: inherit;
+	padding: 0 48px;
 }
 
-tbody > tr td:first-child {
+tbody > tr td > span.eqName {
-	text-align: center;
+	display: inline-block;
+	width: 100%;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
+[data-title] {
+	position: relative;
+}
+
+[data-title]::after {
+	content: attr(data-title);
+	position: absolute;
+	padding: 12px 24px;
+	background: #000;
+	color: #fff;
+	border-radius: 12px;
+	left: 70%;
+	top: 100%;
+	white-space: nowrap;
+	opacity: 0;
+	transition: all 0.3s ease-out;
+	z-index: 9999;
+	visibility: hidden;
+}
+
+[data-title]:hover::after {
+	visibility: visible;
+	opacity: 1;
 }
 </style>

src/components/boxes/GasFlow.vue

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

src/components/boxes/OilFlow.vue

@@ -81,15 +81,6 @@ export default {
 				OT008: Array(24)
 					.fill(1)
 					.map((_) => randomInt()),
-				OT009: Array(24)
-					.fill(1)
-					.map((_) => randomInt()),
-				OT000: Array(24)
-					.fill(1)
-					.map((_) => randomInt()),
-				OT011: Array(24)
-					.fill(1)
-					.map((_) => randomInt()),
 			},
 		};
 	},
@@ -108,8 +99,8 @@ export default {
 }
 
 .vertical-line {
-	margin: 0 adjust(3px);
+	margin: 0 6px;
-	width: adjust(3px);
+	width: 6px;
 	background: radial-gradient(
 		ellipse at center,
 		#3565ff,

src/components/boxes/TopTemp.vue

@@ -3,11 +3,23 @@
 	<Container usage="Charts">
 		<SubContainer title="窑顶温度" icon="ktop" padding="24px 32px">
 			<div class="tables flex" style="height: 100%">
-				<LineChart key="1" id="line-chart-5" class="flex-1" unit="单位/℃" :legend="Object.keys(kilnTop1)"
+				<LineChart
-					:series="kilnTop1" />
+					key="1"
+					id="line-chart-5"
+					class="flex-1"
+					unit="单位/℃"
+					:legend="Object.keys(kilnTop1)"
+					:series="kilnTop1"
+				/>
 				<div class="vertical-line"></div>
-				<LineChart key="2" id="line-chart-6" class="flex-1" unit="单位/℃" :legend="Object.keys(kilnTop2)"
+				<LineChart
-					:series="kilnTop2" />
+					key="2"
+					id="line-chart-6"
+					class="flex-1"
+					unit="单位/℃"
+					:legend="Object.keys(kilnTop2)"
+					:series="kilnTop2"
+				/>
 			</div>
 		</SubContainer>
 	</Container>
@@ -31,8 +43,8 @@ export default {
 	computed: {
 		...mapState(["kilnTop1", "kilnTop2"]),
 		legend_1() {
-			return Object.keys(this.kilnTop1)
+			return Object.keys(this.kilnTop1);
-		}
+		},
 	},
 	watch: {
 		kilnTop1(val) {
@@ -51,12 +63,14 @@ export default {
 }
 
 .vertical-line {
-	margin: 0 adjust(3px);
+	margin: 0 6px;
-	width: adjust(3px);
+	width: 6px;
-	background: radial-gradient(ellipse at center,
+	background: radial-gradient(
-			#3565ff,
+		ellipse at center,
-			#3565ff51,
+		#3565ff,
-			transparent,
+		#3565ff51,
-			transparent);
+		transparent,
+		transparent
+	);
 }
 </style>

src/components/charts/LineChart.vue

@@ -1,33 +1,37 @@
 <template>
-  <!-- line chart  -->
+	<!-- line chart  -->
-  <div class="line-chart__wrapper">
+	<div class="line-chart__wrapper">
-    <div class="line-chart__custom-legend flex" v-if="legend.length">
+		<div
-      <!-- <span>产线1 - 产线5</span> -->
+			class="line-chart__custom-legend flex"
-      <ul style="" class="">
+			v-if="legend.length"
-        <li v-for="(v, i) in legend" :key="i">{{ v }}</li>
+			:style="legendWidth"
-      </ul>
+		>
-    </div>
+			<!-- <span>产线1 - 产线5</span> -->
-    <div :id="id" style="width: 100%; height: 100%"></div>
+			<ul :style="gridColumn" class="">
-    <div
+				<li v-for="(v, i) in legend" :key="i">{{ v }}</li>
-      v-show="legend.length === 0"
+			</ul>
-      style="
+		</div>
-        position: absolute;
+		<div :id="id" style="width: 100%; height: 100%"></div>
-        top: 0;
+		<div
-        left: 0;
+			v-show="legend.length === 0"
-        background: #eee0;
+			style="
-        width: 100%;
+				position: absolute;
-        height: 100%;
+				top: 0;
-        display: grid;
+				left: 0;
-        place-items: center;
+				background: #eee0;
-        font-size: 18px;
+				width: 100%;
-        letter-spacing: 2px;
+				height: 100%;
-        color: #3C4E8B;
+				display: grid;
-        user-select: none;
+				place-items: center;
-      "
+				font-size: 56px;
-    >
+				letter-spacing: 2px;
-      无数据
+				color: #3c4e8b88;
-    </div>
+				user-select: none;
-  </div>
+			"
+		>
+			无数据
+		</div>
+	</div>
 </template>
 
 <script>
@@ -35,9 +39,9 @@ import * as echarts from "echarts/core";
 import { LineChart } from "echarts/charts";
 
 import {
-  TitleComponent,
+	TitleComponent,
-  TooltipComponent,
+	TooltipComponent,
-  GridComponent,
+	GridComponent,
 } from "echarts/components";
 
 import { LabelLayout, UniversalTransition } from "echarts/features";
@@ -45,211 +49,226 @@ import { LabelLayout, UniversalTransition } from "echarts/features";
 import { CanvasRenderer } from "echarts/renderers";
 
 echarts.use([
-  TitleComponent,
+	TitleComponent,
-  TooltipComponent,
+	TooltipComponent,
-  GridComponent,
+	GridComponent,
-  LineChart,
+	LineChart,
-  LabelLayout,
+	LabelLayout,
-  UniversalTransition,
+	UniversalTransition,
-  CanvasRenderer,
+	CanvasRenderer,
 ]);
 
 function adjust(v) {
-  return v * 2;
+	return v * 2;
 }
 
 export default {
-  name: "LineChart",
+	name: "LineChart",
-  props: {
+	props: {
-    id: {
+		id: {
-      type: String,
+			type: String,
-      default: "line-chart",
+			default: "line-chart",
+		},
+		config: {
+			type: Object,
+			default: () => ({
+				title: { text: "default chart" },
+			}),
+		},
+		unit: {
+			type: String,
+			default: "单位/m³",
+		},
+		legend: {
+			type: Array,
+			default: () => [],
+		},
+		series: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+	data() {
+		return {
+			chart: null,
+			colors: [
+				"#18c7f3",
+				"#FFD160",
+				"#F31868",
+				"#30E89A",
+				"#2760FF",
+				"#7138FF",
+				"#F318D8",
+				"#C0F318",
+				"#ff7777",
+				"#1199ff",
+				"#9988ff",
+				"#3388ff",
+				"#337788",
+			],
+			data: [],
+			legendtext: [
+				"asdfsadf",
+				"asdfsadf",
+				"asdfsadf",
+				"asdfsadf",
+				"asdfsadf",
+				"asdfsadf",
+				"asdfsadf",
+				"asdfsadf",
+			],
+		};
+	},
+	mounted() {
+		this.init();
+	},
+	computed: {
+		legendWidth() {
+			let w = null;
+
+      switch (this.doMath()) {
+        case 1: w = '55%'; break;
+        // case 2: w = '75%'; break;
+        case 2: w = '50%'; break;
+        // case 3: w = '100%'; break;
+      }
+
+			if (!w) return {};
+			return {
+				width: w,
+        top: w == '50%' ? '-72px' : '-42px' 
+			};
+		},
+    gridColumn() {
+      switch(this.doMath()) {
+        // case 2: return { 'grid-template-columns': 'repeat(6, 1fr)'}
+        case 2: return { 'grid-template-columns': 'repeat(4, 1fr)'}
+        case 3: return { 'grid-template-columns': 'repeat(8, 1fr)'}
+      }
+    }
+	},
+	watch: {
+		series: {
+			deep: true,
+			handler: function () {
+				console.log("LineChart: series changed!");
+				this.init();
+			},
+		},
+	},
+	methods: {
+    doMath() {
+      if (this.legend && Array.isArray(this.legend) && this.legend.length > 0) {
+        const len = this.legend.length 
+        if (len > 0 && len <= 5) return 1
+        else if (len > 5 && len <= 10) return 2
+        else return 3
+      }
+      return 0
     },
-    config: {
+
-      type: Object,
+		updateXAxis() {
-      default: () => ({
+			const hour = +new Date().getHours();
-        title: { text: "default chart" },
+			return Array(24)
-      }),
+				.fill(1)
-    },
+				.map((_, index) => {
-    unit: {
+					if (hour - index < 0) {
-      type: String,
+						return 24 + hour - index + ":00";
-      default: "单位/m³",
+					}
-    },
+					return hour - index + ":00";
-    legend: {
+				})
-      type: Array,
+				.reverse();
-      default: () => [],
+		},
-    },
+		init() {
-    series: {
+			if (!this.chart)
-      type: Object,
+				this.chart = echarts.init(document.getElementById(this.id));
-      default: () => ({}),
+			this.chart.setOption({
-    },
+				grid: {
-  },
+					top: 56,
-  data() {
+					left: 80,
-    return {
+					bottom: 64,
-      chart: null,
+					right: 56,
-      colors: [
+				},
-        "#18c7f3",
+				tooltip: {},
-        "#FFD160",
+				xAxis: {
-        "#F31868",
+					data: this.updateXAxis(),
-        "#30E89A",
+					axisLine: {
-        "#2760FF",
+						lineStyle: {
-        "#7138FF",
+							color: "#5982b2a0",
-        "#F318D8",
+						},
-        "#C0F318",
+					},
-        "#ff7777",
+					axisTick: {
-        "#1199ff",
+						show: true,
-        "#9988ff",
+						length: 8,
-        "#3388ff",
+						alignWithLabel: true,
-        "#337788",
+						lineStyle: {
-      ],
+							width: 3,
-      data: [],
+						},
-      legendtext: [
+					},
-        "asdfsadf",
+					axisLabel: {
-        "asdfsadf",
+						color: "#3C4E8Baa",
-        "asdfsadf",
+						fontSize: 20,
-        "asdfsadf",
+						lineHeight: 0,
-        "asdfsadf",
+						margin: 18,
-        "asdfsadf",
+						rotate: 45,
-        "asdfsadf",
+					},
-        "asdfsadf",
+				},
-      ],
+				yAxis: {
-    };
+					type: "value",
-  },
+					name: this.unit,
-  mounted() {
+					nameTextStyle: {
-    this.init();
+						color: "#3C4E8Baa",
-  },
+						fontSize: 20,
-  watch: {
+						lineHeight: 32,
-    series: {
+						align: "center",
-      deep: true,
+					},
-      handler: function () {
+					axisLine: {
-        console.log("LineChart: series changed!");
+						show: true,
-        this.init();
+						lineStyle: {
-      },
+							// width: 1,
-    },
+							color: "#5982b2a0",
-  },
+						},
-  methods: {
+					},
-    updateXAxis() {
+					axisTick: {
-      const hour = +new Date().getHours();
+						show: false,
-      return Array(24)
+					},
-        .fill(1)
+					axisLabel: {
-        .map((_, index) => {
+						color: "#3C4E8Baa",
-          if (hour - index < 0) {
+						fontSize: 18,
-            return 24 + hour - index + ":00";
+						lineHeight: 0,
-          }
+					},
-          return hour - index + ":00";
+					splitLine: {
-        })
+						lineStyle: {
-        .reverse();
+							color: "#5982b2a0",
-    },
+						},
-    init() {
+					},
-      if (!this.chart)
+				},
-        this.chart = echarts.init(document.getElementById(this.id));
+				color: this.colors,
-      this.chart.setOption({
+				series: Array(this.legend.length)
-        grid: {
+					.fill(1)
-          top: adjust(22),
+					.map((_, index) => {
-          left: adjust(22),
+						let lgd = this.legend[index];
-          bottom: adjust(20),
+						// console.log("series: ", lgd, index, this.series[lgd]);
-          right: adjust(8),
+						return {
-        },
+							name: lgd,
-        tooltip: {},
+							type: "line",
-        xAxis: {
+							symbol: "circle",
-          data: this.updateXAxis(),
+							symbolSize: adjust(2),
-          axisLine: {
+							lineStyle: {
-            lineStyle: {
+								width: adjust(1),
-              color: "#5982b2a0",
+							},
-            },
+							areaStyle: {
-          },
+								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          axisTick: {
+									{ offset: 0, color: this.colors[index] + "33" },
-            show: false,
+									{ offset: 1, color: "transparent" },
-          },
+								]),
-          axisLabel: {
+							},
-            color: "#3C4E8Baa",
+							data: this.series[lgd],
-            fontSize: adjust(6),
+						};
-            lineHeight: adjust(0),
+					}),
-            margin: adjust(4),
+			});
-            rotate: 45,
+		},
-          },
+	},
-        },
-        yAxis: {
-          type: "value",
-          name: this.unit,
-          nameTextStyle: {
-            color: "#3C4E8Baa",
-            fontSize: adjust(8),
-            lineHeight: adjust(12),
-            align: "center",
-          },
-          axisLine: {
-            show: true,
-            lineStyle: {
-              // width: 1,
-              color: "#5982b2a0",
-            },
-          },
-          axisTick: {
-            show: false,
-          },
-          axisLabel: {
-            color: "#3C4E8Baa",
-            fontSize: adjust(7),
-            lineHeight: adjust(0),
-          },
-          splitLine: {
-            lineStyle: {
-              color: "#5982b2a0",
-            },
-          },
-          // data: [100, 200, 300, 400, 500],
-        },
-        color: this.colors,
-        // series: Array(5)
-        // 	.fill(1)
-        // 	.map((_, index) => ({
-        // 		name: Math.random(),
-        // 		type: "line",
-        // 		symbol: "circle",
-        // 		symbolSize: adjust(3),
-        // 		lineStyle: {
-        // 			width: adjust(1),
-        // 		},
-        // 		areaStyle: {
-        // 			color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-        // 				{ offset: 0, color: this.colors[index] + "33" },
-        // 				{ offset: 1, color: "transparent" },
-        // 			]),
-        // 		},
-        // 		data: Array(31)
-        // 			.fill(1)
-        // 			.map(() => {
-        // 				let v = Math.floor(Math.random() * 5000);
-        // 				while (v < 3000) v = Math.floor(Math.random() * 5000);
-        // 				return v;
-        // 			}),
-        // 	})),
-        series: Array(this.legend.length)
-          .fill(1)
-          .map((_, index) => {
-            let lgd = this.legend[index];
-            // console.log("series: ", lgd, index, this.series[lgd]);
-            return {
-              name: lgd,
-              type: "line",
-              symbol: "circle",
-              symbolSize: adjust(2),
-              lineStyle: {
-                width: adjust(1),
-              },
-              areaStyle: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  { offset: 0, color: this.colors[index] + "33" },
-                  { offset: 1, color: "transparent" },
-                ]),
-              },
-              data: this.series[lgd],
-            };
-          }),
-      });
-    },
-  },
 };
 </script>
 
@@ -257,119 +276,116 @@ export default {
 @import "../../assets/styles/functions";
 
 ::-webkit-scrollbar {
-  // display: none;
+	height: adjust(2px);
-  height: adjust(2px);
 }
 
 ::-webkit-scrollbar-thumb {
-  height: adjust(2px);
+	height: adjust(2px);
-  border-radius: adjust(2px);
+	border-radius: adjust(2px);
-  background: #ccc3;
+	background: #ccc3;
-}
-
-// ::-webkit-scrollbar-track {
-// height: adjust(1px);
-// background: blue;
-// }
-
-ul,
-li {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  min-width: adjust(20px);
-}
-
-ul {
-  // background: #0005;
-  width: 100%;
-  height: adjust(14px);
-  white-space: pre-wrap;
-  padding-bottom: 0;
-  padding-left: adjust(6px);
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  column-gap: 6px;
-  // column-span: none;
-  justify-items: end;
-  align-items: end;
-}
-
-li {
-  padding-left: adjust(1px);
-  position: relative;
-  // background: #f003;
-  user-select: none;
-}
-
-.line-chart__custom-legend {
-  position: absolute;
-  top: adjust(-20px);
-  right: 0;
-  font-size: adjust(5px);
-  font-family: Ubuntu, sans-serif;
-  padding: 0;
-  // max-width: 100%;
-  width: 75%;
-  align-items: flex-end;
-  justify-content: flex-end;
-}
-
-li::before {
-  content: "";
-  position: absolute;
-  top: adjust(.5px);
-  left: adjust(-5px);
-  width: adjust(5px);
-  height: adjust(5px);
-  border-radius: adjust(1px);
-  background: #eee6;
-}
-
-li:nth-child(1)::before {
-  background: #18c7f3;
-}
-li:nth-child(2)::before {
-  background: #ffd160;
-}
-li:nth-child(3)::before {
-  background: #f31868;
-}
-li:nth-child(4)::before {
-  background: #30e89a;
-}
-li:nth-child(5)::before {
-  background: #2760ff;
-}
-li:nth-child(6)::before {
-  background: #7138FF;
-}
-li:nth-child(7)::before {
-  background: #F318D8;
-}
-li:nth-child(8)::before {
-  background: #C0F318;
-}
-li:nth-child(9)::before {
-  background: #f77;
-}
-li:nth-child(10)::before {
-  background: #19f;
-}
-li:nth-child(11)::before {
-  background: #98f;
-}
-li:nth-child(12)::before {
-  background: #38f;
 }
 
 .line-chart__wrapper {
-  position: relative;
+	position: relative;
-  background: #3564ff0f;
+	background: #3564ff0f;
-  border-radius: adjust(4px);
+	border-radius: 12px;
-  backdrop-filter: blur(adjust(2px));
+	backdrop-filter: 2px;
-  box-shadow: inset 0 0 adjust(10px) adjust(2px) rgba($color: #fff, $alpha: 0.1);
+	box-shadow: inset 0 0 12px 4px rgba($color: #fff, $alpha: 0.1);
-  height: 100%;
+	height: 96%;
-  width: adjust(1px);
+	width: 1px;
+}
+
+.line-chart__custom-legend {
+	position: absolute;
+	top: -42px;
+	right: 18px;
+	font-family: Ubuntu, sans-serif;
+	font-size: 28px;
+	line-height: 1;
+	padding: 0;
+	color: #3b4d87;
+	// width: 75%;
+	width: 55%;
+	align-items: flex-end;
+	justify-content: flex-end;
+}
+
+ul,
+li {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	min-width: 20px;
+}
+
+ul {
+	// background: #0005;
+	width: 100%;
+	height: 32px;
+	line-height: 32px;
+	white-space: pre-wrap;
+	padding-bottom: 0;
+	padding-left: 12px;
+	display: grid;
+	grid-template-columns: repeat(5, 1fr);
+	column-gap: 12px;
+	// column-span: none;
+	justify-items: end;
+	align-items: end;
+}
+
+li {
+	padding-left: 12px;
+	position: relative;
+	// background: #f003;
+	user-select: none;
+}
+
+li::before {
+	content: "";
+	position: absolute;
+	top: 4px;
+	left: -20px;
+	width: 24px;
+	height: 24px;
+	border-radius: 4px;
+	background: #eee6;
+}
+
+li:nth-child(1)::before {
+	background: #18c7f3;
+}
+li:nth-child(2)::before {
+	background: #ffd160;
+}
+li:nth-child(3)::before {
+	background: #f31868;
+}
+li:nth-child(4)::before {
+	background: #30e89a;
+}
+li:nth-child(5)::before {
+	background: #2760ff;
+}
+li:nth-child(6)::before {
+	background: #7138ff;
+}
+li:nth-child(7)::before {
+	background: #f318d8;
+}
+li:nth-child(8)::before {
+	background: #c0f318;
+}
+li:nth-child(9)::before {
+	background: #f77;
+}
+li:nth-child(10)::before {
+	background: #19f;
+}
+li:nth-child(11)::before {
+	background: #98f;
+}
+li:nth-child(12)::before {
+	background: #38f;
 }
 </style>

src/components/groups/data.vue

@@ -1,12 +1,12 @@
 <template>
-  <section class="data-group absolute">
+	<section class="data-group">
-    <OilFlow />
+		<OilFlow />
-    <GasFlow />
+		<GasFlow />
-    <TopTemp />
+		<TopTemp />
-    <BottomTemp />
+		<BottomTemp />
-    <OilFlow />
+		<OilFlow />
-    <FanRuntime />
+		<FanRuntime />
-  </section>
+	</section>
 </template>
 
 <script>
@@ -18,21 +18,21 @@ import FanRuntime from "../boxes/FanRuntime.vue";
 // import { mapState } from "vuex";
 
 export default {
-  name: "DataGroup",
+	name: "DataGroup",
-  props: {},
+	props: {},
-  components: {
+	components: {
-    FanRuntime,
+		FanRuntime,
-    OilFlow,
+		OilFlow,
-    GasFlow,
+		GasFlow,
-    TopTemp,
+		TopTemp,
-    BottomTemp,
+		BottomTemp,
-  },
+	},
-  data() {
+	data() {
-    return {};
+		return {};
-  },
+	},
-  computed: {
+	computed: {
-    // ...mapState(["kilnWaterIn", "waterInTemp"]),
+		// ...mapState(["kilnWaterIn", "waterInTemp"]),
-  },
+	},
 };
 </script>
 
@@ -40,32 +40,30 @@ export default {
 @import "../../assets/styles/functions";
 
 section {
-  background: url('../../assets/middle-under.png') left 110px top 4px / 380px 22px no-repeat;
+	// background: url('../../assets/middle-under.png') left 110px top 4px / 380px 22px no-repeat;
-  width: adjust(w(13700px));
+	background: rgba(124, 63, 238, 0.722);
-  height: adjust(h(830px));
+	width: 100%;
-  // width: adjust(w(13500px));
+	position: absolute;
-  // height: adjust(h(960px));
+  bottom: 0;
-  position: absolute;
-  top: adjust(h(3390px));
-  // top: adjust(h(3265px));
-  left: adjust(w(3700px));
-}
-
-section::before {
-  content: '数据组';
-  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, "微软雅黑", Arial, Helvetica, sans-serif;
-  font-size: adjust(h(64px));
-  font-weight: 400;
-  letter-spacing: 1px;
-  position: absolute;
-  color: $main-color;
-  top: 0;
   left: 0;
+	display: flex;
+	justify-content: space-around;
+	align-items: flex-end;
+  padding: 24px;
 }
 
-.data-group {
+// section::before {
-  display: flex;
+// 	// content: "数据组";
-  justify-content: space-between;
+// 	content: "";
-  align-items: flex-end;
+// 	font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC,
-}
+// 		Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei,
+// 		"微软雅黑", Arial, Helvetica, sans-serif;
+// 	font-size: adjust(h(64px));
+// 	font-weight: 400;
+// 	letter-spacing: 1px;
+// 	position: absolute;
+// 	color: $main-color;
+// 	top: 0;
+// 	left: 0;
+// }
 </style>

src/components/groups/monitor2.vue

@@ -24,25 +24,24 @@ export default {
 @import "../../assets/styles/functions";
 
 section {
-  background: url('../../assets/middle1.png') left 144px top 4px / 97% 420px no-repeat, #ccc7;
+  background: rgba(47, 203, 255, 0.225);
-  width: adjust(w(13700px));
+  width: 100%;
-  height: adjust(h(1600px));
+  height: 1178px;
-  // width: adjust(w(13500px));
-  // height: adjust(h(1470px));
   position: absolute;
-  top: adjust(h(1740px));
+  bottom: 720px;
-  left: adjust(w(3700px));
-}
-
-section::before {
-  content: '监控组 2';
-  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, "微软雅黑", Arial, Helvetica, sans-serif;
-  font-size: adjust(h(64px));
-  font-weight: 400;
-  letter-spacing: 1px;
-  position: absolute;
-  color: $main-color;
-  top: 0;
   left: 0;
 }
+
+// section::before {
+//   // content: '监控组 2';
+//   content: '';
+//   font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, "微软雅黑", Arial, Helvetica, sans-serif;
+//   font-size: adjust(h(64px));
+//   font-weight: 400;
+//   letter-spacing: 1px;
+//   position: absolute;
+//   color: $main-color;
+//   top: 0;
+//   left: 0;
+// }
 </style>

src/components/layout/Container.vue

@@ -27,14 +27,14 @@ export default {
 			cls: {
 				// 'NumberOrDate': {},
 				NumberOrDate: "number-or-date",
-				Table: 'tables',
+				Table: "tables",
-				Charts: 'charts',
+				Charts: "charts",
-				NumberAndChart: 'number-and-chart',
+				NumberAndChart: "number-and-chart",
 			},
 		};
 	},
-	created() { },
+	created() {},
-	mounted() { },
+	mounted() {},
 	methods: {},
 };
 </script>
@@ -50,22 +50,20 @@ export default {
 
 .tables {
 	display: inline-block;
-	// width: adjust(w(1115px));
+	width: 1145px;
-	width: adjust(w(1400px));
+	height: 618px;
-	height: adjust(h(700px));
 	background: url(../../assets/box-table.png);
 	background-position: 0 0;
-	/** top left */
 	background-size: 100% 100%;
 }
 
 .charts {
 	display: inline-block;
-	width: adjust(w(2440px));
+	height: 618px;
-	height: adjust(h(700px));
+	width: 2452px;
+	// width: 2400px;
 	background: url(../../assets/box-chart.png);
 	background-position: 0 0;
-	/** top left */
 	background-size: 100% 100%;
 }
 
@@ -75,4 +73,4 @@ export default {
 	height: adjust(h(931px));
 	background: url(../../assets/box-right.png) 0 0 / 100% 100% no-repeat;
 }
-</style>
+</style>

src/components/layout/Main.vue

@@ -1,8 +1,5 @@
 <template>
-	<main class="">
+	<main class="relative">
-		<!-- 监控组 -->
-		<MonitorGroup />
-
 		<!-- 缺陷分析 -->
 		<FaultAnalysis />
 
@@ -12,9 +9,6 @@
 		<!-- 监控组 2 -->
 		<MonitorGroup2 />
 
-		<!-- 监控组 3 -->
-		<MonitorGroup3 />
-
 		<!-- 数据组 -->
 		<DataGroup />
 
@@ -63,33 +57,6 @@
 		</div>
 
 		<AreaOne class="area-one" />
-
-		<!-- <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> -->
-
-
 		<InWater />
 		<OutWater />
 
@@ -97,24 +64,13 @@
 </template>
 
 <script>
-// import KilnRuntime from "../boxes/KilnRuntime.vue";
-// import KilnPressure from "../boxes/KilnPressure.vue";
-// 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 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 MonitorGroup from '../groups/monitor.vue'
 import MonitorGroup2 from '../groups/monitor2.vue'
-import MonitorGroup3 from '../groups/monitor3.vue'
 import DataGroup from '../groups/data.vue'
 import FaultAnalysis from '../groups/fault.vue'
 import Environ from '../groups/environ.vue'
-// import Container from './Container.vue'
 import { mapMutations, mapState } from "vuex";
 
 import WsClient from "../../utils/wsClass";
@@ -123,20 +79,10 @@ export default {
 	name: "Main",
 	components: {
 		DataGroup,
-		MonitorGroup,
 		MonitorGroup2,
-		MonitorGroup3,
 		Environ,
 		FaultAnalysis,
 		AreaOne,
-		// KilnRuntime,
-		// KilnPressure,
-		// FanRuntime,
-		// OilFlow,
-		// GasFlow,
-		// TopTemp,
-		// BottomTemp,
-		// XicaoTemp,
 		InWater,
 		OutWater,
 	},

src/components/layout/SubContainer.vue

@@ -56,8 +56,8 @@ export default {
 }
 
 .icon {
-	height: adjust(17px);
+	height: 64px;
-	width: adjust(16px);
+	width: 60px;
 	margin-right: 0;
 }
 
@@ -106,17 +106,18 @@ export default {
 }
 
 .title {
-	font-size: adjust(h(40px));
+	padding: 24px 0 0 32px;
-	letter-spacing: 1px;
-	color: #3565ff;
-	font-family: sans-serif;
 	user-select: none;
 	display: flex;
 	align-items: center;
 }
 
 .title_text {
-	line-height: 0;
+	font-size: 42px;
+	letter-spacing: 1px;
+	color: #3565ff;
+	font-family: sans-serif;
+	line-height: 52px;
 	margin-bottom: 10px;
 }
 
@@ -126,8 +127,7 @@ export default {
 }
 
 .content {
-	height: 1px;
+	height: 1px; 
-	/* background: #eee; */
 	flex: 1;
 }
 </style>

src/directives/title.js

@@ -0,0 +1,30 @@
+export default {
+
+  inserted: function (el, binding) {
+    const value = binding.value
+    console.log('[v-title] value', value)
+
+    el.addEventListener('mouseover', function (event) {
+      console.log('[v-title] mouseover', event)
+    })
+    // find mouse pointer's location
+
+    // find element with id 'tooltip'
+    let tooltip = document.getElementById('tooltip')
+    if (!tooltip) {
+      const tooltipDiv = document.createElement('div')
+      tooltipDiv.id = 'tooltip'
+      tooltipDiv.style.position = 'absolute';
+      tooltipDiv.style.padding = '24px 32px';
+      tooltipDiv.style.visibility = 'hidden';
+      document.body.appendChild(tooltipDiv)
+      tooltip = tooltipDiv
+    }
+    
+    // fit tooltip content with value
+    tooltip.innerText = value
+
+    // show tooltip with location of mouse pointer
+
+  }
+}

src/main.js

@@ -2,12 +2,15 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import title from './directives/title'
 
 import 'normalize.css'
 import './style.css'
 
 Vue.config.productionTip = false
 
+Vue.directive('title', title)
+
 new Vue({
   router,
   store,

src/views/HomeView.vue

@@ -25,7 +25,7 @@ export default {
 	props: {},
 	data() {
 		return {
-			value: 40,
+			value: 100,
 		};
 	},
 	computed: {
@@ -57,6 +57,7 @@ export default {
 .center {
 	width: 13515px;
 	height: 4320px;
-	background: #1bb8bb91;
+	display: flex;
+	flex-direction: column;
 }
 </style>