'卡脖搅拌温度，运行状态呈现形式修改'

src/components/layout/Main.vue

@@ -5,21 +5,46 @@
 		<div class="eq-main absolute">
 			<div
 				class="arrow ar-top-left"
-				:class="topLeftArrowRolling ? 'ar-running' : ''"
+				:class="topLeftArrowRolling === '运行' ? 'ar-running' : ''"
 			></div>
 			<div
 				class="arrow ar-top-right"
-				:class="topRightArrowRolling ? 'ar-running' : ''"
+				:class="topRightArrowRolling === '运行' ? 'ar-running' : ''"
 			></div>
 			<div
 				class="arrow ar-bottom-left"
-				:class="bottomLeftArrowRolling ? 'ar-running' : ''"
+				:class="bottomLeftArrowRolling === '运行' ? 'ar-running' : ''"
 			></div>
 			<div
 				class="arrow ar-bottom-right"
-				:class="bottomRightArrowRolling ? 'ar-running' : ''"
+				:class="bottomRightArrowRolling === '运行' ? 'ar-running' : ''"
 			></div>
 
+			<div class="swd onekb">
+				<div class="swd-box">
+					<p>1#卡脖</p>
+					<p class="swd-value">{{Number(onekb).toFixed(1)}}℃</p>
+				</div>
+			</div>
+			<div class="swd onesp">
+				<div class="swd-box">
+					<p>1#搅拌</p>
+					<p class="swd-value">{{Number(onesp).toFixed(1)}}℃</p>
+				</div>
+			</div>
+			<div class="swd twokb">
+				<div class="swd-box">
+					<p>2#卡脖</p>
+					<p class="swd-value">{{Number(twokb).toFixed(1)}}℃</p>
+				</div>
+			</div>
+			<div class="swd twosp">
+				<div class="swd-box">
+					<p>2#搅拌</p>
+					<p class="swd-value">{{Number(twosp).toFixed(1)}}℃</p>
+				</div>
+			</div>
+
 			<div class="video-bottom" v-show="fireDirection === '北火'" style="">
 				<video
 					id="1"
@@ -126,12 +151,16 @@ export default {
 		"topRightArrowRolling",
 		"bottomLeftArrowRolling",
 		"bottomRightArrowRolling",
+		"onekb",
+		"twokb",
+		"onesp",
+		"twosp"
 	]),
 	mounted() {
 		const wsc = new WsClient(this);
 		wsc.registerListeners();
 		// this.$store.commit("update", { target: "fire-direction", data: "南火" });
-		this.$store.commit("update", { target: "bottom-left-arrow", data: true });
+		// this.$store.commit("update", { target: "bottom-left-arrow", data: true });
 	},
 	methods: {
 		...mapMutations(["update"]),
@@ -180,66 +209,119 @@ main {
 }
 
 .arrow {
-	width: adjust(30px);
+	width: adjust(20px);
-	height: adjust(30px);
+	height: adjust(20px);
 	display: inline-block;
 	position: absolute;
+	background: #ff5757;
+	border-radius: adjust(10px);
 }
 
-.ar-top-left.arrow,
+.arrow.ar-running {
-.ar-top-right.arrow {
+	background: #1bff3a;
-	animation: none;
-	background: url(../../assets/arrow-disabled.png) 100% 100% / contain no-repeat;
-}
-.ar-bottom-left.arrow,
-.ar-bottom-right.arrow {
-	animation: none;
-	background: url(../../assets/arrow-r-disabled.png) 100% 100% / contain
-		no-repeat;
-}
-.ar-top-left.arrow.ar-running,
-.ar-top-right.arrow.ar-running {
-	background: url(../../assets/arrow.png) 100% 100% / contain no-repeat;
-	animation: clock-direction 1.15s linear infinite forwards;
-}
-.ar-bottom-left.arrow.ar-running,
-.ar-bottom-right.arrow.ar-running {
-	background: url(../../assets/arrow-r.png) 100% 100% / contain no-repeat;
-	animation: reverse-clock-direction 1.15s linear infinite forwards;
 }
 
+// .ar-top-left.arrow,
+// .ar-top-right.arrow {
+// 	animation: none;
+// 	background: url(../../assets/arrow-disabled.png) 100% 100% / contain no-repeat;
+// }
+// .ar-bottom-left.arrow,
+// .ar-bottom-right.arrow {
+// 	animation: none;
+// 	background: url(../../assets/arrow-r-disabled.png) 100% 100% / contain
+// 		no-repeat;
+// }
+// .ar-top-left.arrow.ar-running,
+// .ar-top-right.arrow.ar-running {
+// 	background: url(../../assets/arrow.png) 100% 100% / contain no-repeat;
+// 	animation: clock-direction 1.15s linear infinite forwards;
+// }
+// .ar-bottom-left.arrow.ar-running,
+// .ar-bottom-right.arrow.ar-running {
+// 	background: url(../../assets/arrow-r.png) 100% 100% / contain no-repeat;
+// 	animation: reverse-clock-direction 1.15s linear infinite forwards;
+// }
+
 .ar-top-right {
-	top: 112px;
+	top: 145px;
-	left: 56px;
+	left: 65px;
 }
 .ar-top-left {
 	top: 175px;
-	left: 980px;
+	left: 985px;
 }
 .ar-bottom-left {
-	top: 425px;
+	top: 445px;
-	left: 955px;
+	left: 960px;
 }
 .ar-bottom-right {
-	top: 492px;
+	top: 460px;
 	left: 20px;
 }
 
-@keyframes clock-direction {
+// @keyframes clock-direction {
-	0% {
+// 	0% {
-		transform: rotate(0deg);
+// 		transform: rotate(0deg);
+// 	}
+// 	100% {
+// 		transform: rotate(360deg);
+// 	}
+// }
+// @keyframes reverse-clock-direction {
+// 	0% {
+// 		transform: rotate(0deg);
+// 	}
+// 	100% {
+// 		transform: rotate(-360deg);
+// 	}
+// }
+
+.swd {
+	background-size: 100%;
+	width: adjust(w(276px));
+	height: adjust(h(156px));
+	position: absolute;
+	transform: rotateY(180deg);
+	p {
+		margin: 0;
+		margin-top: adjust(12px);
+	}
+	.swd-box {
+		margin-left: adjust(21px);
+		font-size: adjust(15px);
+		.swd-value {
+			color: #00f4ff;
+			margin-top: adjust(6px);
+			font-size: adjust(26px);
+			overflow: hidden;  /*超出部分隐藏*/
+    		white-space: nowrap;  /*禁止换行*/
+    		text-overflow: ellipsis; /*省略号*/
 		}
-	100% {
-		transform: rotate(360deg);
 	}
 }
-@keyframes reverse-clock-direction {
+
-	0% {
+.onekb, .onesp{
-		transform: rotate(0deg);
+	background: url(../../assets/tem-bottom.png) no-repeat;
-	}
+}
-	100% {
+.onekb {
-		transform: rotate(-360deg);
+	top: adjust(300px);
-	}
+	left: adjust(350px)
+}
+.onesp {
+	top: adjust(270px);
+	left: adjust(520px)
+}
+.twokb, .twosp{
+	background: url(../../assets/tem-top.png) no-repeat;
+}
+.twokb {
+	top: adjust(-20px);
+	left: adjust(370px)
+}
+.twosp {
+	top: adjust(10px);
+	left: adjust(540px)
 }
 
 .eq-main {

src/store/index.js

@@ -9,6 +9,10 @@ export default new Vuex.Store({
     topRightArrowRolling: false,
     bottomLeftArrowRolling: false,
     bottomRightArrowRolling: false,
+    onekb: 0,
+    twokb: 0,
+    onesp: 0,
+    twosp: 0,
     kilnPressure: 999,
     oilTable1: {},
     oilTable2: {},
@@ -37,15 +41,35 @@ export default new Vuex.Store({
       switch (payload.target) {
         case 'top-right-arrow': {
           state.topRightArrowRolling = payload.data
+          break
         }
         case 'top-left-arrow': {
           state.topLeftArrowRolling = payload.data
+          break
         }
         case 'bottom-right-arrow': {
           state.bottomRightArrowRolling = payload.data
+          break
         }
         case 'bottom-left-arrow': {
           state.bottomLeftArrowRolling = payload.data
+          break
+        }
+        case 'onekb': {
+          state.onekb = payload.data
+          break
+        }
+        case 'twokb': {
+          state.twokb = payload.data
+          break
+        }
+        case 'onesp': {
+          state.onesp = payload.data
+          break
+        }
+        case 'twosp': {
+          state.twosp = payload.data
+          break
         }
         case 'oil-1': {
           state.oilTable1 = payload.data

src/utils/wsClass.js

@@ -65,6 +65,10 @@ export default class WsClient {
     'northtouliaoji': 'bottom-right-arrow',
     'shuipingJBQ2': 'top-left-arrow',
     'shuipingJBQ1': 'bottom-left-arrow',
+    'SPJBQWDU1': 'onesp',
+    'SPJBQWDU2': 'twosp',
+    'KBSCSB1': 'onekb',
+    'KBSCSB2': 'twokb',
   }
   static socket = null