球机操作鼠标按下抬起交互反馈icon交替完善

src/views/realTimeMonitoring/model.vue

@@ -18,35 +18,35 @@
             </div>
             <div class="operation-list">
                 <div class="operation-item">
-                    <img src="@/assets/sub-icon.png" alt="" @mousedown="zoomDecStart" @mouseup="zoomDecStop">
+                    <img :src="zoomSubUrl" alt="" @mousedown="zoomDecStart" @mouseup="zoomDecStop">
                     <span>变倍</span>
-                    <img src="@/assets/add-icon.png" alt="" @mousedown="zoomAddStart" @mouseup="zoomAddStop">
+                    <img :src="zoomAddUrl" alt="" @mousedown="zoomAddStart" @mouseup="zoomAddStop">
                 </div>
                 <div class="operation-item">
-                    <img src="@/assets/sub-icon.png" alt="" @mousedown="focusDecStart" @mouseup="focusDecStop">
+                    <img :src="focusSubUrl" alt="" @mousedown="focusDecStart" @mouseup="focusDecStop">
                     <span>变焦</span>
-                    <img src="@/assets/add-icon.png" alt="" @mousedown="focusAddStart" @mouseup="focusAddStop">
+                    <img :src="focusAddUrl" alt="" @mousedown="focusAddStart" @mouseup="focusAddStop">
                 </div>
                 <div class="operation-item">
-                    <img src="@/assets/sub-icon.png" alt="" @mousedown="irisDecStart" @mouseup="irisDecStop">
+                    <img :src="irisSubUrl" alt="" @mousedown="irisDecStart" @mouseup="irisDecStop">
                     <span>光圈</span>
-                    <img src="@/assets/add-icon.png" alt="" @mousedown="irisAddStart" @mouseup="irisAddStop">
+                    <img :src="irisAddUrl" alt="" @mousedown="irisAddStart" @mouseup="irisAddStop">
                 </div>
             </div>
             <div class="direction-list">
                 <div class="direction-item">
-                    <img src="@/assets/left-top-icon.png" alt="" @mousedown="leftUpStart" @mouseup="leftUpStop">
-                    <img src="@/assets/top-icon.png" alt="" @mousedown="upStart" @mouseup="upStop">
-                    <img src="@/assets/right-top-icon.png" alt="" @mousedown="rightUpStart" @mouseup="rightUpStop">
+                    <img :src="leftUpUrl" alt="" @mousedown="leftUpStart" @mouseup="leftUpStop">
+                    <img :src="upUrl" alt="" @mousedown="upStart" @mouseup="upStop">
+                    <img :src="rightUpUrl" alt="" @mousedown="rightUpStart" @mouseup="rightUpStop">
                 </div>
                 <div class="direction-item">
-                    <img src="@/assets/left-icon.png" alt="" @mousedown="leftStart" @mouseup="leftStop">
-                    <img src="@/assets/right-icon.png" alt="" @mousedown="rightStart" @mouseup="rightStop">
+                    <img :src="leftUrl" alt="" @mousedown="leftStart" @mouseup="leftStop">
+                    <img :src="rightUrl" alt="" @mousedown="rightStart" @mouseup="rightStop">
                 </div>
                 <div class="direction-item">
-                    <img src="@/assets/left-bottom-icon.png" alt="" @mousedown="leftDownStart" @mouseup="leftDownStop">
-                    <img src="@/assets/bottom-icon.png" alt="" @mousedown="downStart" @mouseup="downStop">
-                    <img src="@/assets/right-bottom-icon.png" alt="" @mousedown="rightDownStart" @mouseup="rightDownStop">
+                    <img :src="leftDownUrl" alt="" @mousedown="leftDownStart" @mouseup="leftDownStop">
+                    <img :src="downUrl" alt="" @mousedown="downStart" @mouseup="downStop">
+                    <img :src="rightDownUrl" alt="" @mousedown="rightDownStart" @mouseup="rightDownStop">
                 </div>
             </div>
         </div>
@@ -112,7 +112,21 @@ export default {
             confirmLoading: false,
             form: this.$form.createForm(this, { name: 'dynamic_rule' }),
             id:'',
-            mdata:[]
+            mdata:[],
+            zoomSubUrl:require('@/assets/sub-icon.png'),
+            zoomAddUrl:require('@/assets/add-icon.png'),
+            focusSubUrl:require('@/assets/sub-icon.png'),
+            focusAddUrl:require('@/assets/add-icon.png'),
+            irisSubUrl:require('@/assets/sub-icon.png'),
+            irisAddUrl:require('@/assets/add-icon.png'),
+            leftUpUrl:require('@/assets/left-up-icon.png'),
+            upUrl:require('@/assets/up-icon.png'),
+            rightUpUrl:require('@/assets/right-up-icon.png'),
+            leftUrl:require('@/assets/left-icon.png'),
+            rightUrl:require('@/assets/right-icon.png'),
+            leftDownUrl:require('@/assets/left-down-icon.png'),
+            downUrl:require('@/assets/down-icon.png'),
+            rightDownUrl:require('@/assets/right-down-icon.png'),
         };
     },
     mounted() {
@@ -128,6 +142,7 @@ export default {
         },
         zoomDecStart(){
             console.log('变倍-按下')
+            this.zoomSubUrl=require('@/assets/sub-active-icon.png')
             this.$axios.post('/camera/control/zoomDec/start/'+this.id, {
                 data: {}
             }).then(res => {
@@ -138,6 +153,7 @@ export default {
         },
         zoomDecStop(){
             console.log('变倍-抬起')
+            this.zoomSubUrl=require('@/assets/sub-icon.png')
             this.$axios.post('/camera/control/zoomDec/stop/'+this.id, {
                 data: {}
             }).then(res => {
@@ -148,6 +164,7 @@ export default {
         },
         zoomAddStart(){
             console.log('变倍+按下')
+            this.zoomAddUrl=require('@/assets/add-active-icon.png')
             this.$axios.post('/camera/control/zoomAdd/start/'+this.id, {
                 data: {}
             }).then(res => {
@@ -158,6 +175,7 @@ export default {
         },
         zoomAddStop(){
             console.log('变倍+抬起')
+            this.zoomAddUrl=require('@/assets/add-icon.png')
             this.$axios.post('/camera/control/zoomAdd/stop/'+this.id, {
                 data: {}
             }).then(res => {
@@ -168,6 +186,7 @@ export default {
         },
         focusDecStart(){
             console.log('变焦-按下')
+            this.focusSubUrl=require('@/assets/sub-active-icon.png')
             this.$axios.post('/camera/control/focusDec/start/'+this.id, {
                 data: {}
             }).then(res => {
@@ -178,6 +197,7 @@ export default {
         },
         focusDecStop(){
             console.log('变焦-抬起')
+            this.focusSubUrl=require('@/assets/sub-icon.png')
             this.$axios.post('/camera/control/focusDec/stop/'+this.id, {
                 data: {}
             }).then(res => {
@@ -188,6 +208,7 @@ export default {
         },
         focusAddStart(){
             console.log('变焦+按下')
+            this.focusAddUrl=require('@/assets/add-active-icon.png')
             this.$axios.post('/camera/control/focusAdd/start/'+this.id, {
                 data: {}
             }).then(res => {
@@ -198,6 +219,7 @@ export default {
         },
         focusAddStop(){
             console.log('变焦+抬起')
+            this.focusAddUrl=require('@/assets/add-icon.png')
             this.$axios.post('/camera/control/focusAdd/stop/'+this.id, {
                 data: {}
             }).then(res => {
@@ -208,6 +230,7 @@ export default {
         },
         irisDecStart(){
             console.log('光圈-按下')
+            this.irisSubUrl=require('@/assets/sub-active-icon.png')
             this.$axios.post('/camera/control/irisDec/start/'+this.id, {
                 data: {}
             }).then(res => {
@@ -218,6 +241,7 @@ export default {
         },
         irisDecStop(){
             console.log('光圈-抬起')
+            this.irisSubUrl=require('@/assets/sub-icon.png')
             this.$axios.post('/camera/control/irisDec/stop/'+this.id, {
                 data: {}
             }).then(res => {
@@ -228,6 +252,7 @@ export default {
         },
         irisAddStart(){
             console.log('光圈+按下')
+            this.irisAddUrl=require('@/assets/add-active-icon.png')
             this.$axios.post('/camera/control/irisAdd/start/'+this.id, {
                 data: {}
             }).then(res => {
@@ -238,6 +263,7 @@ export default {
         },
         irisAddStop(){
             console.log('光圈+抬起')
+            this.irisAddUrl=require('@/assets/add-icon.png')
             this.$axios.post('/camera/control/irisAdd/stop/'+this.id, {
                 data: {}
             }).then(res => {
@@ -248,6 +274,7 @@ export default {
         },
         leftUpStart(){
             console.log('左上鼠标按下')
+            this.leftUpUrl=require('@/assets/left-up-active-icon.png')
             this.$axios.post('/camera/control/leftUp/'+this.id, {
                 data: {}
             }).then(res => {
@@ -258,6 +285,7 @@ export default {
         },
         leftUpStop(){
             console.log('左上鼠标抬起')
+            this.leftUpUrl=require('@/assets/left-up-icon.png')
             this.$axios.post('/camera/control/leftUp/stop/'+this.id, {
                 data: {}
             }).then(res => {
@@ -268,6 +296,7 @@ export default {
         },
         upStart(){
             console.log('上鼠标按下')
+            this.upUrl=require('@/assets/up-active-icon.png')
             this.$axios.post('/camera/control/up/'+this.id, {
                 data: {}
             }).then(res => {
@@ -278,6 +307,7 @@ export default {
         },
         upStop(){
             console.log('上鼠标抬起')
+            this.upUrl=require('@/assets/up-icon.png')
             this.$axios.post('/camera/control/up/stop/'+this.id, {
                 data: {}
             }).then(res => {
@@ -288,6 +318,7 @@ export default {
         },
         rightUpStart(){
             console.log('右上鼠标按下')
+            this.rightUpUrl=require('@/assets/right-up-active-icon.png')
             this.$axios.post('/camera/control/rightUp/'+this.id, {
                 data: {}
             }).then(res => {
@@ -298,6 +329,7 @@ export default {
         },
         rightUpStop(){
             console.log('右上鼠标抬起')
+            this.rightUpUrl=require('@/assets/right-up-icon.png')
             this.$axios.post('/camera/control/rightUp/stop/'+this.id, {
                 data: {}
             }).then(res => {
@@ -309,6 +341,7 @@ export default {
         leftStart(){
             // console.log(this.id)
             console.log('左转鼠标按下')
+            this.leftUrl=require('@/assets/left-active-icon.png')
             this.$axios.post('/camera/control/left/'+this.id, {
                 data: {}
             }).then(res => {
@@ -318,6 +351,7 @@ export default {
             })
         },
         leftStop(e){
+            this.leftUrl=require('@/assets/left-icon.png')
             console.log('左转鼠标抬起')
             // e.unbind('mousemove')
             console.log(e)
@@ -331,6 +365,7 @@ export default {
         },
         rightStart(){
             console.log('右转鼠标按下')
+            this.rightUrl=require('@/assets/right-active-icon.png')
             this.$axios.post('/camera/control/right/'+this.id, {
                 data: {}
             }).then(res => {
@@ -341,6 +376,7 @@ export default {
         },
         rightStop(){
             console.log('右转鼠标抬起')
+            this.rightUrl=require('@/assets/right-icon.png')
             this.$axios.post('/camera/control/right/stop/'+this.id, {
                 data: {}
             }).then(res => {
@@ -351,6 +387,7 @@ export default {
         },
         leftDownStart(){
             console.log('左下鼠标按下')
+            this.leftDownUrl=require('@/assets/left-down-active-icon.png')
             this.$axios.post('/camera/control/leftDown/'+this.id, {
                 data: {}
             }).then(res => {
@@ -361,6 +398,7 @@ export default {
         },
         leftDownStop(){
             console.log('左下鼠标抬起')
+            this.leftDownUrl=require('@/assets/left-down-icon.png')
             this.$axios.post('/camera/control/leftDown/stop/'+this.id, {
                 data: {}
             }).then(res => {
@@ -371,6 +409,7 @@ export default {
         },
         downStart(){
             console.log('下鼠标按下')
+            this.downUrl=require('@/assets/down-active-icon.png')
             this.$axios.post('/camera/control/down/'+this.id, {
                 data: {}
             }).then(res => {
@@ -381,6 +420,7 @@ export default {
         },
         downStop(){
             console.log('下鼠标抬起')
+            this.downUrl=require('@/assets/down-icon.png')
             this.$axios.post('/camera/control/down/stop/'+this.id, {
                 data: {}
             }).then(res => {
@@ -391,6 +431,7 @@ export default {
         },
         rightDownStart(){
             console.log('右下鼠标按下')
+            this.rightDownUrl=require('@/assets/right-down-active-icon.png')
             this.$axios.post('/camera/control/rightDown/'+this.id, {
                 data: {}
             }).then(res => {
@@ -401,6 +442,7 @@ export default {
         },
         rightDownStop(){
             console.log('右下鼠标抬起')
+            this.rightDownUrl=require('@/assets/right-down-icon.png')
             this.$axios.post('/camera/control/rightDown/stop/'+this.id, {
                 data: {}
             }).then(res => {