update arrows

src/components/layout/Main.vue

@@ -3,6 +3,23 @@
 		<div class="video-crash" v-if="false"></div>
 
 		<div class="eq-main absolute">
+			<div
+				class="arrow ar-top-left"
+				:class="topLeftArrowRolling ? 'ar-running' : ''"
+			></div>
+			<div
+				class="arrow ar-top-right"
+				:class="topRightArrowRolling ? 'ar-running' : ''"
+			></div>
+			<div
+				class="arrow ar-bottom-left"
+				:class="bottomLeftArrowRolling ? 'ar-running' : ''"
+			></div>
+			<div
+				class="arrow ar-bottom-right"
+				:class="bottomRightArrowRolling ? 'ar-running' : ''"
+			></div>
+
 			<div class="video-bottom" v-show="fireDirection === '北火'" style="">
 				<video
 					id="1"
@@ -102,11 +119,19 @@ export default {
 	data() {
 		return {};
 	},
-	computed: mapState(["kilnPressure", "fireDirection"]),
+	computed: mapState([
+		"kilnPressure",
+		"fireDirection",
+		"topLeftArrowRolling",
+		"topRightArrowRolling",
+		"bottomLeftArrowRolling",
+		"bottomRightArrowRolling",
+	]),
 	mounted() {
 		const wsc = new WsClient(this);
 		wsc.registerListeners();
-		// this.$store.commit("update", { target: "fire-direction", data: "北火" });
+		// this.$store.commit("update", { target: "fire-direction", data: "南火" });
+		this.$store.commit("update", { target: "bottom-left-arrow", data: true });
 	},
 	methods: {
 		...mapMutations(["update"]),
@@ -142,18 +167,81 @@ main {
 
 .video-bottom {
 	position: absolute;
-	bottom: adjust(176.3px);
+	bottom: adjust(200.5px);
-	left: adjust(38px);
+	left: adjust(48px);
 	transform: scale(0.9);
 }
 
 .video-top {
 	position: absolute;
-	top: adjust(48px);
+	top: adjust(35px);
-	left: adjust(33px);
+	left: adjust(38px);
 	transform: scale(0.95, 0.9);
 }
 
+.arrow {
+	width: adjust(30px);
+	height: adjust(30px);
+	display: inline-block;
+	position: absolute;
+}
+
+.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;
+	left: 56px;
+}
+.ar-top-left {
+	top: 175px;
+	left: 980px;
+}
+.ar-bottom-left {
+	top: 425px;
+	left: 955px;
+}
+.ar-bottom-right {
+	top: 492px;
+	left: 20px;
+}
+
+@keyframes clock-direction {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}
+@keyframes reverse-clock-direction {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(-360deg);
+	}
+}
+
 .eq-main {
 	width: adjust(w(7150px));
 	height: adjust(h(960px));
@@ -170,7 +258,7 @@ main {
 	position: absolute;
 	//   right: adjust(1200px);
 	opacity: 0;
-	top: adjust(125px);
+	top: adjust(105px);
 	width: adjust(150px);
 	height: adjust(150px);
 	background: url(../../assets/mirror.png) no-repeat;
@@ -183,7 +271,8 @@ main {
 	position: absolute;
 	//   right: adjust(1200px);
 	opacity: 0;
-	top: adjust(125px);
+	top: adjust(105px);
+	// top: adjust(125px);
 	width: adjust(150px);
 	height: adjust(150px);
 	background: url(../../assets/mirror.png) no-repeat;

src/store/index.js

@@ -5,6 +5,10 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
+    topLeftArrowRolling: false,
+    topRightArrowRolling: false,
+    bottomLeftArrowRolling: false,
+    bottomRightArrowRolling: false,
     kilnPressure: 999,
     oilTable1: {},
     oilTable2: {},
@@ -31,6 +35,18 @@ export default new Vuex.Store({
   mutations: {
     update(state, payload) {
       switch (payload.target) {
+        case 'top-right-arrow': {
+          state.topRightArrowRolling = payload.data
+        }
+        case 'top-left-arrow': {
+          state.topLeftArrowRolling = payload.data
+        }
+        case 'bottom-right-arrow': {
+          state.bottomRightArrowRolling = payload.data
+        }
+        case 'bottom-left-arrow': {
+          state.bottomLeftArrowRolling = payload.data
+        }
         case 'oil-1': {
           state.oilTable1 = payload.data
           //console.log('更换' + payload.target + '的数据' + payload.data)

src/utils/wsClass.js

@@ -56,7 +56,11 @@ export default class WsClient {
     'kilnPressure': 'kiln-pressure',
     'fireChangeTime': 'fire-change-time',
     'waterInTemp': 'water-in-temp',
-    'waterOutTemp': 'water-out-temp'
+    'waterOutTemp': 'water-out-temp',
+    'southtouliaoji': 'top-right-arrow',
+    'northtouliaoji': 'bottom-right-arrow',
+    'shuipingJBQ2': 'top-left-arrow',
+    'shuipingJBQ1': 'bottom-left-arrow',
   }
   static socket = null