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;
 }
 
+// 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(
+		ellipse at center,
 		#3565ff,
 		#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(
+		ellipse at center,
 		#3565ff,
 		#3565ff51,
 		transparent,
-			transparent);
+		transparent
+	);
 }
 </style>

src/components/charts/LineChart.vue

@@ -1,9 +1,13 @@
 <template>
 	<!-- line chart  -->
 	<div class="line-chart__wrapper">
-    <div class="line-chart__custom-legend flex" v-if="legend.length">
+		<div
+			class="line-chart__custom-legend flex"
+			v-if="legend.length"
+			:style="legendWidth"
+		>
 			<!-- <span>产线1 - 产线5</span> -->
-      <ul style="" class="">
+			<ul :style="gridColumn" class="">
 				<li v-for="(v, i) in legend" :key="i">{{ v }}</li>
 			</ul>
 		</div>
@@ -19,9 +23,9 @@
 				height: 100%;
 				display: grid;
 				place-items: center;
-        font-size: 18px;
+				font-size: 56px;
 				letter-spacing: 2px;
-        color: #3C4E8B;
+				color: #3c4e8b88;
 				user-select: none;
 			"
 		>
@@ -118,6 +122,31 @@ export default {
 	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,
@@ -128,6 +157,16 @@ export default {
 		},
 	},
 	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
+    },
+
 		updateXAxis() {
 			const hour = +new Date().getHours();
 			return Array(24)
@@ -145,10 +184,10 @@ export default {
 				this.chart = echarts.init(document.getElementById(this.id));
 			this.chart.setOption({
 				grid: {
-          top: adjust(22),
+					top: 56,
-          left: adjust(22),
+					left: 80,
-          bottom: adjust(20),
+					bottom: 64,
-          right: adjust(8),
+					right: 56,
 				},
 				tooltip: {},
 				xAxis: {
@@ -159,13 +198,18 @@ export default {
 						},
 					},
 					axisTick: {
-            show: false,
+						show: true,
+						length: 8,
+						alignWithLabel: true,
+						lineStyle: {
+							width: 3,
+						},
 					},
 					axisLabel: {
 						color: "#3C4E8Baa",
-            fontSize: adjust(6),
+						fontSize: 20,
-            lineHeight: adjust(0),
+						lineHeight: 0,
-            margin: adjust(4),
+						margin: 18,
 						rotate: 45,
 					},
 				},
@@ -174,8 +218,8 @@ export default {
 					name: this.unit,
 					nameTextStyle: {
 						color: "#3C4E8Baa",
-            fontSize: adjust(8),
+						fontSize: 20,
-            lineHeight: adjust(12),
+						lineHeight: 32,
 						align: "center",
 					},
 					axisLine: {
@@ -190,41 +234,16 @@ export default {
 					},
 					axisLabel: {
 						color: "#3C4E8Baa",
-            fontSize: adjust(7),
+						fontSize: 18,
-            lineHeight: adjust(0),
+						lineHeight: 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) => {
@@ -257,7 +276,6 @@ export default {
 @import "../../assets/styles/functions";
 
 ::-webkit-scrollbar {
-  // display: none;
 	height: adjust(2px);
 }
 
@@ -267,62 +285,70 @@ export default {
 	background: #ccc3;
 }
 
-// ::-webkit-scrollbar-track {
+.line-chart__wrapper {
-// height: adjust(1px);
+	position: relative;
-// background: blue;
+	background: #3564ff0f;
-// }
+	border-radius: 12px;
+	backdrop-filter: 2px;
+	box-shadow: inset 0 0 12px 4px rgba($color: #fff, $alpha: 0.1);
+	height: 96%;
+	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: adjust(20px);
+	min-width: 20px;
 }
 
 ul {
 	// background: #0005;
 	width: 100%;
-  height: adjust(14px);
+	height: 32px;
+	line-height: 32px;
 	white-space: pre-wrap;
 	padding-bottom: 0;
-  padding-left: adjust(6px);
+	padding-left: 12px;
 	display: grid;
 	grid-template-columns: repeat(5, 1fr);
-  column-gap: 6px;
+	column-gap: 12px;
 	// column-span: none;
 	justify-items: end;
 	align-items: end;
 }
 
 li {
-  padding-left: adjust(1px);
+	padding-left: 12px;
 	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);
+	top: 4px;
-  left: adjust(-5px);
+	left: -20px;
-  width: adjust(5px);
+	width: 24px;
-  height: adjust(5px);
+	height: 24px;
-  border-radius: adjust(1px);
+	border-radius: 4px;
 	background: #eee6;
 }
 
@@ -342,13 +368,13 @@ li:nth-child(5)::before {
 	background: #2760ff;
 }
 li:nth-child(6)::before {
-  background: #7138FF;
+	background: #7138ff;
 }
 li:nth-child(7)::before {
-  background: #F318D8;
+	background: #f318d8;
 }
 li:nth-child(8)::before {
-  background: #C0F318;
+	background: #c0f318;
 }
 li:nth-child(9)::before {
 	background: #f77;
@@ -362,14 +388,4 @@ li:nth-child(11)::before {
 li:nth-child(12)::before {
 	background: #38f;
 }
-
-.line-chart__wrapper {
-  position: relative;
-  background: #3564ff0f;
-  border-radius: adjust(4px);
-  backdrop-filter: blur(adjust(2px));
-  box-shadow: inset 0 0 adjust(10px) adjust(2px) rgba($color: #fff, $alpha: 0.1);
-  height: 100%;
-  width: adjust(1px);
-}
 </style>

src/components/groups/data.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="data-group absolute">
+	<section class="data-group">
 		<OilFlow />
 		<GasFlow />
 		<TopTemp />
@@ -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));
-  // height: adjust(h(960px));
 	position: absolute;
-  top: adjust(h(3390px));
+  bottom: 0;
-  // 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,9 +27,9 @@ export default {
 			cls: {
 				// 'NumberOrDate': {},
 				NumberOrDate: "number-or-date",
-				Table: 'tables',
+				Table: "tables",
-				Charts: 'charts',
+				Charts: "charts",
-				NumberAndChart: 'number-and-chart',
+				NumberAndChart: "number-and-chart",
 			},
 		};
 	},
@@ -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%;
 }
 

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;
 }
 
@@ -127,7 +128,6 @@ export default {
 
 .content {
 	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>