update

src/components/boxes/FanRuntime.vue

@@ -6,7 +6,7 @@
 				<table class="table-1 flex-1 align-start">
 					<thead>
 						<!-- <tr style="font-size: 8px; background: #044a84; opacity: 19%"> -->
-						<tr>
+						<tr class="t-row">
 							<th>序号</th>
 							<th>设备名称</th>
 							<th>运行频率</th>
@@ -38,7 +38,7 @@
 				<div class="vertical-line"></div>
 				<table class="table-2 flex-1 align-start">
 					<thead>
-						<tr>
+						<tr class="t-row">
 							<th>序号</th>
 							<th>设备名称</th>
 							<th>运行频率</th>

src/components/boxes/HistoryTemp.vue

@@ -37,6 +37,6 @@ h3 {
   font-size: adjust(10px);
   letter-spacing: adjust(1px);
   color: #52fff8;
-  margin: 8px 0;
+  margin: adjust(12px) 0;
 }
 </style>

src/components/boxes/TopTemp.vue

@@ -3,9 +3,9 @@
 	<Container usage="Charts">
 		<SubContainer title="窑顶温度" icon="oil" padding="34px">
 			<div class="tables flex" style="height: 100%">
-				<LineChart key="1" id="line-chart-5" class="flex-1" :config="chartConfig" />
+				<LineChart key="1" id="line-chart-5" class="flex-1" :legend="Object.keys(chartOne)" :series="chartOne" />
 				<div class="vertical-line"></div>
-				<LineChart key="2" id="line-chart-6" class="flex-1" :config="chartConfig" />
+				<LineChart key="2" id="line-chart-6" class="flex-1" :legend="Object.keys(chartTwo)" :series="chartTwo" />
 			</div>
 		</SubContainer>
 	</Container>
@@ -18,7 +18,16 @@ import SubContainer from "../layout/SubContainer.vue";
 
 export default {
 	name: "TopTemp",
-	props: {},
+	props: {
+		chartOne: {
+			type: Object,
+			default: () => ({})
+		},
+		chartTwo: {
+			type: Object,
+			default: () => ({})
+		}
+	},
 	components: { Container, SubContainer, LineChart },
 	data() {
 		return {

src/components/charts/BarChart.vue

@@ -76,6 +76,7 @@ export default {
             color: "#ffffff",
             fontSize: adjust(7),
             lineHeight: adjust(1),
+            margin: adjust(8)
           },
         },
         yAxis: {

src/components/charts/LineChart.vue

@@ -1,17 +1,31 @@
 <template>
 	<!-- line chart  -->
-	<div class="line-chart__wrapper">
-		<div class="line-chart__custom-legend flex">
-			<span>产线1 - 产线5</span>
+	<div class="line-chart__wrapper" style="overflow: hidden;">
+		<div class="line-chart__custom-legend flex" v-if="legend.length">
+			<!-- <span>产线1 - 产线5</span> -->
 			<ul style="" class="flex">
-				<li>产线1</li>
-				<li>产线2</li>
-				<li>产线3</li>
-				<li>产线4</li>
-				<li>产线5</li>
+				<li v-for="(v, i) in legend" :key="i">{{ v }}</li>
 			</ul>
 		</div>
 		<div :id="id" style="width: 100%; height: 100%"></div>
+		<div
+			v-show="legend.length === 0"
+			style="
+				position: absolute;
+				top: 0;
+				left: 0;
+				background: #eee0;
+				width: 100%;
+				height: 100%;
+				display: grid;
+				place-items: center;
+				font-size: 24px;
+				color: #eee8;
+				user-select: none;
+			"
+		>
+			无数据
+		</div>
 	</div>
 </template>
 
@@ -56,6 +70,14 @@ export default {
 				title: { text: "default chart" },
 			}),
 		},
+		legend: {
+			type: Array,
+			default: () => [],
+		},
+		series: {
+			type: Object,
+			default: () => ({}),
+		},
 	},
 	data() {
 		return {
@@ -66,7 +88,7 @@ export default {
 				"#F31868",
 				"#30E89A",
 				"#2760FF",
-				"#2f0fff",
+				"#723fff",
 				"#ee3fff",
 				"#800f77",
 				"#f77",
@@ -84,30 +106,18 @@ export default {
 			if (!this.chart)
 				this.chart = echarts.init(document.getElementById(this.id));
 			this.chart.setOption({
-				// title: {
-				// 	text: "ECharts 入门示例",
-				// },
 				grid: {
 					top: adjust(32),
 					left: adjust(32),
 					bottom: adjust(24),
 					right: adjust(12),
 				},
-				// tooltip: {
-				// 	trigger: "axis",
-				// 	axisPointer: {
-				// 		lineStyle: {
-				// 			color: "#eee3",
-				// 		},
-				// 	},
-				// },
 				xAxis: {
-					data: Array(31)
+					data: Array(24)
 						.fill(1)
 						.map((_, index) => index + 1),
 					axisLine: {
 						lineStyle: {
-							// width: 1,
 							color: "#5982b2a0",
 						},
 					},
@@ -118,6 +128,7 @@ export default {
 						color: "#ffffff",
 						fontSize: adjust(6),
 						lineHeight: adjust(1),
+						margin: adjust(8),
 					},
 				},
 				yAxis: {
@@ -126,9 +137,6 @@ export default {
 					nameTextStyle: {
 						color: "#fff9",
 						fontSize: adjust(6),
-						// lineHeight: 6,
-						// height: 6,
-						// padding: 0,
 						align: "right",
 					},
 					axisLine: {
@@ -154,10 +162,34 @@ export default {
 					// data: [100, 200, 300, 400, 500],
 				},
 				color: this.colors,
-				series: Array(5)
+				// 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)
 					.fill(1)
-					.map((_, index) => ({
-						name: Math.random(),
+					.map((lgd, index) => ({
+						name: lgd,
 						type: "line",
 						symbol: "circle",
 						symbolSize: adjust(3),
@@ -165,35 +197,12 @@ export default {
 							width: adjust(1),
 						},
 						areaStyle: {
-							// color: {
-							// 	type: "linear",
-							// 	x: 0,
-							// 	y: 0,
-							// 	x2: 0,
-							// 	y2: 1,
-							// 	colorStops: [
-							// 		{
-							// 			offset: 0,
-							// 			color: this.colors[index]+'66',
-							// 		},
-							// 		// { offset: 0.3, color: this.colors[index]+'aa' },
-							// 		// { offset: 0.35, color: this.colors[index]+'77' },
-							// 		// { offset: 1, color: this.colors[index]+'00' },
-							// 		{ offset: .5, color: 'transparent' },
-							// 	],
-							// },
 							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;
-							}),
+						data: this.series[this.legend],
 					})),
 			});
 		},
@@ -253,30 +262,33 @@ li:nth-child(1)::before {
 	background: #18c7f3;
 }
 li:nth-child(2)::before {
-	background: #f31868;
+	background: #ffd160;
 }
 li:nth-child(3)::before {
-	background: #30e89a;
+	background: #f31868;
 }
 li:nth-child(4)::before {
-	background: #2760ff;
+	background: #30e89a;
 }
 li:nth-child(5)::before {
-	background: #ee3fff;
+	background: #2760ff;
 }
 li:nth-child(6)::before {
-	background: #2f0fff;
+	background: #723fff;
 }
 li:nth-child(7)::before {
-	background: #800f77;
+	background: #ee3fff;
 }
 li:nth-child(8)::before {
-	background: #f77;
+	background: #800f77;
 }
 li:nth-child(9)::before {
-	background: #19f;
+	background: #f77;
 }
 li:nth-child(10)::before {
+	background: #19f;
+}
+li:nth-child(11)::before {
 	background: #98f;
 }
 

src/components/icons/clockSvg.vue

@@ -1,7 +1,7 @@
 <template>
 	<svg
-		width="adjust(64px)"
-		height="adjust(64px)"
+		:width="adjust('64px')"
+		:height="adjust('64px')"
 		viewBox="0 0 95 96"
 		version="1.1"
 		xmlns="http://www.w3.org/2000/svg"
@@ -78,3 +78,13 @@
 		</g>
 	</svg>
 </template>
+
+<script>
+export default {
+	methods: {
+		adjust(v) {
+			return +(v.slice(0, -2)) * 2 + 'px' ;
+		},
+	},
+};
+</script>

src/components/icons/fireSvg.vue

@@ -1,7 +1,7 @@
 <template>
 	<svg
-		width="adjust(64px)"
-		height="adjust(64px)"
+		:width="adjust('64px')"
+		:height="adjust('64px')"
 		viewBox="0 0 94 96"
 		version="1.1"
 		xmlns="http://www.w3.org/2000/svg"
@@ -78,3 +78,13 @@
 		</g>
 	</svg>
 </template>
+
+<script>
+export default {
+	methods: {
+		adjust(v) {
+			return +(v.slice(0, -2)) * 2 + 'px' ;
+		},
+	},
+};
+</script>

src/components/icons/sandSvg.vue

@@ -1,7 +1,7 @@
 <template>
 	<svg
-		width="adjust(64px)"
-		height="adjust(64px)"
+		:width="adjust('64px')"
+		:height="adjust('64px')"
 		viewBox="0 0 95 96"
 		version="1.1"
 		xmlns="http://www.w3.org/2000/svg"
@@ -78,3 +78,13 @@
 		</g>
 	</svg>
 </template>
+
+<script>
+export default {
+	methods: {
+		adjust(v) {
+			return +(v.slice(0, -2)) * 2 + 'px' ;
+		},
+	},
+};
+</script>

src/components/icons/switchSvg.vue

@@ -1,7 +1,7 @@
 <template>
 	<svg
-		width="adjust(64px)"
-		height="adjust(64px)"
+		:width="adjust('64px')"
+		:height="adjust('64px')"
 		viewBox="0 0 122 122"
 		version="1.1"
 		xmlns="http://www.w3.org/2000/svg"
@@ -97,3 +97,13 @@
 		</g>
 	</svg>
 </template>
+
+<script>
+export default {
+	methods: {
+		adjust(v) {
+			return +(v.slice(0, -2)) * 2 + 'px' ;
+		},
+	},
+};
+</script>

src/components/icons/tempSvg.vue

@@ -1,7 +1,7 @@
 <template>
 	<svg
-		width="adjust(64px)"
-		height="adjust(64px)"
+		:width="adjust('64px')"
+		:height="adjust('64px')"
 		viewBox="0 0 94 96"
 		version="1.1"
 		xmlns="http://www.w3.org/2000/svg"
@@ -78,3 +78,12 @@
 		</g>
 	</svg>
 </template>
+<script>
+export default {
+	methods: {
+		adjust(v) {
+			return +(v.slice(0, -2)) * 2 + 'px' ;
+		},
+	},
+};
+</script>

src/components/layout/Main.vue

@@ -47,7 +47,7 @@
 			<GasFlow />
 		</div>
 		<div class="absolute left top-temp">
-			<TopTemp />
+			<TopTemp :chart-one="kilnTop1" :chart-two="kilnTop2" />
 		</div>
 		<div class="absolute left bottom-temp">
 			<BottomTemp />
@@ -77,12 +77,10 @@ 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'
+import { mapMutations, mapState } from "vuex";
 
 import WsClient from "../../utils/wsClass";
 
-const wsc = new WsClient();
-wsc.registerListeners();
-
 export default {
 	name: "Main",
 	components: {
@@ -102,6 +100,34 @@ export default {
 	data() {
 		return {};
 	},
+	computed: mapState([
+		"kilnPressure",
+		"oilTable1",
+		"oilTable2",
+		"gasTable1",
+		"gasTable2",
+		"kilnTop1",
+		"kilnTop2",
+		"kilnBtm1",
+		"kilnBtm2",
+		"xiCao1",
+		"xiCao2",
+		"kilnWaterIn",
+		"kilnWaterOut",
+	]),
+	mounted() {
+		const wsc = new WsClient(this);
+		wsc.registerListeners();
+	},
+	// watch: {
+	//  // works
+	// 	'kilnTop1': val => {
+	// 		console.log('val', val)
+	// 	}
+	// },
+	methods: {
+		...mapMutations(["update"]),
+	},
 };
 </script>
 

src/store/index.js

@@ -5,10 +5,88 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
+    kilnPressure: 999,
+    oilTable1: {},
+    oilTable2: {},
+    gasTable1: {},
+    gasTable2: {},
+    kilnTop1: {},
+    kilnTop2: {},
+    kilnBtm1: {},
+    kilnBtm2: {},
+    xiCao1: {},
+    xiCao2: {},
+    kilnWaterIn: {},
+    kilnWaterOut: {}
   },
   getters: {
   },
   mutations: {
+    update(state, payload) {
+      switch (payload.target) {
+        case 'oil-1': {
+          state.oilTable1 = payload.data
+          console.log('更换' + payload.target + '的数据')
+          break
+        }
+        case 'oil-2': {
+          state.oilTable2 = payload.data
+          console.log('更换' + payload.target + '的数据')
+          break
+        }
+        case 'gas-1': {
+          state.gasTable1 = payload.data
+          console.log('更换' + payload.target + '的数据')
+          break
+        }
+        case 'gas-2': {
+          state.gasTable2 = payload.data
+          console.log('更换' + payload.target + '的数据')
+          break
+        }
+        case 'kiln-top-1': {
+          state.kilnTop1 = payload.data
+          console.log('更换' + payload.target + '的数据')
+          break
+        }
+        case 'kiln-top-2': {
+          state.kilnTop2 = payload.data
+          console.log('更换' + payload.target + '的数据')
+          break
+        }
+        case 'kiln-btm-1': {
+          state.kilnBtm1 = payload.data
+          console.log('更换' + payload.target + '的数据')
+          break
+        }
+        case 'kiln-btm-2': {
+          state.kilnBtm2 = payload.data
+          console.log('更换' + payload.target + '的数据')
+          break
+        }
+        case 'kiln-water-in': {
+          state.kilnWaterIn = payload.data
+          console.log('更换' + payload.target + '的数据')
+          break
+        }
+        case 'kiln-water-out': {
+          state.kilnWaterOut = payload.data
+          console.log('更换' + payload.target + '的数据')
+          break
+        }
+        case 'xicao-1': {
+          state.xiCao1 = payload.data
+          console.log('更换' + payload.target + '的数据')
+          break
+        }
+        case 'xicao-2': {
+          state.xiCao2 = payload.data
+          console.log('更换' + payload.target + '的数据')
+          break
+
+        }
+      }
+    }
   },
   actions: {
   },

src/utils/wsClass.js

@@ -10,8 +10,9 @@ function handleData(e) {
     try {
       const latestData = JSON.parse(e.data)
       console.log('处理数据: ', latestData)
-      for ([value, key] in Object.entries(latestData)) {
-        console.log('k, v', key, value)
+      for (const [key, value] of Object.entries(latestData)) {
+        console.log('kkk', key, WsClient.tableMap[key])
+        this.update({ target: WsClient.tableMap[key], data: value })
       }
     } catch (err) {
       console.log(e)
@@ -36,11 +37,24 @@ export default class WsClient {
   static wsServer = 'ws://192.168.1.12:8080/dz-screen/websocket/1'
   static tableMap = {
     // 窑顶温度
+    'kilnTempTopT1': 'kiln-top-1',
+    'kilnTempTopT2': 'kiln-top-2',
+    'kilnTempBottomT1': 'kiln-btm-1',
+    'kilnTempBottomT2': 'kiln-btm-2',
+    'kilnTempWaterT1': 'kiln-water-in',
+    'kilnTempWaterT2': 'kiln-water-out',
+    'kilnTempTinbathT1': 'kiln-water-in',
+    'kilnTempTinbathT2': 'kiln-water-out',
+    'kilnGasT1': 'gas-1',
+    'kilnGasT2': 'gas-2',
+    'kilnOilT1': 'oil-1',
+    'kilnOilT2': 'oil-2',
   }
   static socket = null
 
-  constructor() {
+  constructor(vm) {
     WsClient.socket = WsClient.createSocket()
+    this.vueInstance = vm
   }
 
   closeSocket() {
@@ -53,7 +67,7 @@ export default class WsClient {
       WsClient.createSocket()
     }
     if (!WsClient.socket.onopen) WsClient.socket.onopen = handleOpen
-    if (!WsClient.socket.onmessage) WsClient.socket.onmessage = handleData
+    if (!WsClient.socket.onmessage) WsClient.socket.onmessage = handleData.bind(this.vueInstance)
     if (!WsClient.socket.onerror) WsClient.socket.onerror = handleError
     if (!WsClient.socket.onclose) WsClient.socket.onclose = handleClose
   }