lcd清屏操作连通接口发送请求

src/renderer/components/BigShow.vue

@@ -22,7 +22,8 @@
                 :id="item.ID"
         >
             <VueDragResize
-                    v-for="itemV in bigScreenObj[item.ID] ? bigScreenObj[item.ID].signalArr : []" :key="itemV.Id" class="sitem"
+                    v-for="itemV in bigScreenObj[item.ID] ? bigScreenObj[item.ID].signalArr : []" :key="itemV.Id"
+                    class="sitem"
                     :w="itemV.width" :h="itemV.height" :parentLimitation="false"
                     :x="itemV.left" :y="itemV.top"
                     @dragstop="(position) => dragStop(position,itemV,bigScreenObj,curOpeBigscreenId)"
@@ -30,10 +31,10 @@
             >
                 <div ref="signal" :id="itemV.ID" style="width:100%;height:100%;overflow: hidden">
                     <VideoPlayer
-                        ref="videoPlayer"
-                        :options="videoPlayObj[itemV.sourceId]"
-                        :playsinline="true"
-                        :style="scaleFun(itemV)"
+                            ref="videoPlayer"
+                            :options="videoPlayObj[itemV.sourceId]"
+                            :playsinline="true"
+                            :style="scaleFun(itemV)"
                     />
                     <div class="closeBtn" @click.stop="closeSignal(itemV)">×</div>
                 </div>
@@ -56,12 +57,13 @@
     import {elePosition, getElementLeft, getElementTop, getStaticFile, guId} from "../../utils/tools"
     import {reqPreviewSourceList, reqRefreshView} from "../api"
     import VideoPlayer from "./player.vue"
+    import {CLEAR_SCREEN} from "../../utils/constant"
 
     export default {
         data() {
             return {
-                streamWindows:[], // 传递出去的信号源位置信息
-                currentBigshow:[], // 当前显示的大屏
+                streamWindows: [], // 传递出去的信号源位置信息
+                currentBigshow: [], // 当前显示的大屏
                 playerOptions: { // rtmp视频流配置
                     sources: [
                         {
@@ -76,14 +78,14 @@
                     techOrder: ['flash'],
                     autoplay: true,
                     controls: false,
-                    fluid:true,
+                    fluid: true,
                     preload: 'auto',
                     notSupportedMessage: '此视频暂无法播放，请稍后再试',
                 },
-                screenPosition:{}, // 大屏在视口中的位置
-                videoPlayObj:{}, // 视频播放配置对象
-                savePreWh:{}, // 保存旧的开窗宽高
-                window:this.$attrs.window
+                screenPosition: {}, // 大屏在视口中的位置
+                videoPlayObj: {}, // 视频播放配置对象
+                savePreWh: {}, // 保存旧的开窗宽高
+                window: this.$attrs.window
             }
         },
 
@@ -102,52 +104,52 @@
             this.currentBigshow.forEach(item => {
                 const screenDiv = document.getElementById(item.ID)
                 this.screenPosition[item.ID] = {
-                    top:getElementTop(screenDiv),
-                    left:getElementLeft(screenDiv)
+                    top: getElementTop(screenDiv),
+                    left: getElementLeft(screenDiv)
                 }
             })
         },
-        
+
         beforeDestroy() {
-          PubSub.unsubscribe(this.update_screenobj)  
+            PubSub.unsubscribe(this.update_screenobj)
         },
 
         methods: {
             // 大屏开窗接口提交
-            async refreshBigScreen(obj,Id) {
-                if(Id){
+            async refreshBigScreen(obj, Id) {
+                if (Id) {
                     const signals = obj[Id].signalArr
-                    const streamWindows = signals.map((item,index) => ({
-                        left:item.left,
-                        top:item.top,
-                        width:item.width,
-                        height:item.height,
-                        id:index,
-                        sourceId:item.sourceId,
-                        widthScale:item.widthScale,
-                        heightScale:item.heightScale,
-                        orginRect:{}
+                    const streamWindows = signals.map((item, index) => ({
+                        left: item.left,
+                        top: item.top,
+                        width: item.width,
+                        height: item.height,
+                        id: index,
+                        sourceId: item.sourceId,
+                        widthScale: item.widthScale,
+                        heightScale: item.heightScale,
+                        orginRect: {}
                     }))
                     await reqRefreshView({
-                        bigScreenId:Id,
+                        bigScreenId: Id,
                         streamWindows
                     })
                 }
             },
 
             // 拖动结束
-            dragStop(positon,item,obj,Id) {
+            dragStop(positon, item, obj, Id) {
                 // 深度克隆对象
                 const newObj = JSON.parse(JSON.stringify(obj))
                 item.left = positon.left
                 item.top = positon.top
                 const arr = newObj[Id].signalArr.filter(s => s.Id !== item.Id)
-                newObj[Id].signalArr = [...arr,item]
-                this.refreshBigScreen(newObj,Id)
+                newObj[Id].signalArr = [...arr, item]
+                this.refreshBigScreen(newObj, Id)
             },
 
             // 缩放结束
-            resizeSignal(size,item,obj,Id) {
+            resizeSignal(size, item, obj, Id) {
                 const bigScale = this.$store.state.bigScale
                 // 深度克隆对象
                 const newObj = JSON.parse(JSON.stringify(obj))
@@ -155,11 +157,11 @@
                 item.height = size.height
                 item.left = size.left
                 item.top = size.top
-                item.widthScale = item.width/(newObj[Id].width*bigScale)
-                item.heightScale = item.height/(newObj[Id].height*bigScale)
+                item.widthScale = item.width / (newObj[Id].width * bigScale)
+                item.heightScale = item.height / (newObj[Id].height * bigScale)
                 const arr = newObj[Id].signalArr.filter(s => s.Id !== item.Id)
-                newObj[Id].signalArr = [...arr,item]
-                this.refreshBigScreen(newObj,Id)
+                newObj[Id].signalArr = [...arr, item]
+                this.refreshBigScreen(newObj, Id)
             },
 
             // 关闭信号源
@@ -170,17 +172,17 @@
                 const newSignalPreList = this.bigScreenObj[bigscreenId].signalArr.filter(item => item.Id !== signal.Id)
                 // 2.重新赋值
                 bigScreenObj[bigscreenId].signalArr = newSignalPreList
-                this.refreshBigScreen(bigScreenObj,bigscreenId)
+                this.refreshBigScreen(bigScreenObj, bigscreenId)
             },
 
             // 设置视频变形
-            scaleFun:function (itemV) {
+            scaleFun: function (itemV) {
                 // 1.算出当前视频的高度
-                let videoHeight = itemV.width*9/16
+                let videoHeight = itemV.width * 9 / 16
 
                 // 2.如果盒子的高度大于视频的高度，则视频的高度需要拉伸
-                if(itemV.height>videoHeight){
-                    return `transform-origin: 0px 0px;transform:scaleY(${(itemV.height-videoHeight)/videoHeight+1})`
+                if (itemV.height > videoHeight) {
+                    return `transform-origin: 0px 0px;transform:scaleY(${(itemV.height - videoHeight) / videoHeight + 1})`
                 }
             },
 
@@ -190,31 +192,31 @@
                 const bigScreenJson = await getStaticFile('EnityBigScreen.Data')
                 // 过滤出显示的大屏
                 this.currentBigshow = bigScreenJson.filter(item => item.WindowID === this.window.ID)
-                if(this.currentBigshow.length){
+                if (this.currentBigshow.length) {
                     // 给大屏对象进行初始化显示
                     const obj = {}
                     bigScreenJson.forEach(item => {
                         obj[item.ID] = {
-                            bindList:[],
-                            splitStatus:0,
-                            signalArr:[],
-                            width:item.Width,
-                            height:item.Height
+                            bindList: [],
+                            splitStatus: 0,
+                            signalArr: [],
+                            width: item.Width,
+                            height: item.Height
                         }
                         const num = item.BindList.filter(item => item.DeviceID).length
                         // 拼接屏数量
-                        for(let i=0;i<num;i++){
-                            obj[item.ID].bindList.push(i+1)
+                        for (let i = 0; i < num; i++) {
+                            obj[item.ID].bindList.push(i + 1)
                         }
                         // 根据拼接屏数量得到分屏状态
-                        obj[item.ID].splitStatus = Math.floor(Math.sqrt(num)-1)
+                        obj[item.ID].splitStatus = Math.floor(Math.sqrt(num) - 1)
                     })
-                    this.$store.dispatch('updateBigscreenObj',obj)
+                    this.$store.dispatch('updateBigscreenObj', obj)
 
                     // 获取视频播放的配置对象
                     const preSingleList = await reqPreviewSourceList()
                     const videoPlayObj = {}
-                    for(const item of preSingleList){
+                    for (const item of preSingleList) {
                         videoPlayObj[item.sourceId] = {
                             sources: [
                                 {
@@ -225,7 +227,7 @@
                             techOrder: ['flash'],
                             autoplay: true,
                             controls: false,
-                            fluid:true,
+                            fluid: true,
                             preload: 'auto',
                             notSupportedMessage: '此视频暂无法播放，请稍后再试',
                         }
@@ -236,8 +238,8 @@
         },
 
         computed: {
-            ...mapState(['splitScreenStatus', 'bigScale','positionNum','curOpeBigscreenId','bigScreenObj','signalListJson','bigshowJson']),
-            
+            ...mapState(['splitScreenStatus', 'bigScale', 'positionNum', 'curOpeBigscreenId', 'bigScreenObj', 'signalListJson', 'bigshowJson']),
+
             // 当前变动的信号源数组监控
             signalPreList: {
                 get() {
@@ -250,7 +252,7 @@
                         const bigScreenObj = this.$store.state.bigScreenObj
                         const bigScale = this.$store.state.bigScale
                         const positionNum = this.$store.state.positionNum
-                        
+
                         const arr2 = []
                         arr.forEach(item => {
                             arr2.push(JSON.parse(JSON.stringify(item)))
@@ -260,22 +262,22 @@
                         const otherSignals = arr2.filter(item => item.Id)
                         newObj[0].Id = guId()
                         newObj[0].bigscreenId = bigscreenId
-                        if(bigScreenObj[bigscreenId]){
+                        if (bigScreenObj[bigscreenId]) {
                             newObj[0].splitScreenStatus = bigScreenObj[bigscreenId].splitStatus + 1
                             newObj[0].width = bigScreenObj[bigscreenId].width * bigScale / newObj[0].splitScreenStatus
                             newObj[0].height = bigScreenObj[bigscreenId].height * bigScale / newObj[0].splitScreenStatus
                             newObj[0].widthScale = newObj[0].width / (bigScreenObj[bigscreenId].width * bigScale)
                             newObj[0].heightScale = newObj[0].height / (bigScreenObj[bigscreenId].height * bigScale)
-                            const positionInfo = elePosition(newObj[0].width,newObj[0].height,positionNum,this.screenPosition[bigscreenId].top,this.screenPosition[bigscreenId].left,bigScreenObj[bigscreenId].splitStatus+1)
+                            const positionInfo = elePosition(newObj[0].width, newObj[0].height, positionNum, this.screenPosition[bigscreenId].top, this.screenPosition[bigscreenId].left, bigScreenObj[bigscreenId].splitStatus + 1)
                             newObj[0].top = positionInfo.top - this.screenPosition[bigscreenId].top
                             newObj[0].left = positionInfo.left - this.screenPosition[bigscreenId].left
-                            bigScreenObj[bigscreenId].signalArr = [...otherSignals,...newObj]
-                            this.refreshBigScreen(bigScreenObj,bigscreenId)
+                            bigScreenObj[bigscreenId].signalArr = [...otherSignals, ...newObj]
+                            this.refreshBigScreen(bigScreenObj, bigscreenId)
                         }
                     })
                 }
             },
-            
+
             // 拖拽选项配置
             dragOptions1() {
                 return {
@@ -292,8 +294,8 @@
                 return {
                     animation: 0,
                     group: "description",
-                    disabled:false,
-                    sort:false,
+                    disabled: false,
+                    sort: false,
                 }
             },
 
@@ -304,13 +306,13 @@
 
         watch: {
             window: {
-                handler (newV, oldV) {
-                    if(newV.ID !== oldV){
+                handler(newV, oldV) {
+                    if (newV.ID !== oldV) {
                         // 更新大屏对象
                         this.initBigScreen()
                     }
                 },
-                deep:true
+                deep: true
             }
         }
     }

src/renderer/components/Button.vue

@@ -32,7 +32,8 @@
     import {mapState} from 'vuex'
     import PubSub from 'pubsub-js'
     import {getStaticFile} from "../../utils/tools"
-    import {OPEN_WINDOWS, UPDATE_SCREENOBJ} from "../../utils/constant"
+    import {CLEAR_SCREEN, OPEN_WINDOWS} from "../../utils/constant"
+    import {reqRefreshView} from "../api"
 
     export default {
         data() {
@@ -103,23 +104,29 @@
             },
 
             // 鼠标松开事件
-            mouseUp(e) {
+            async mouseUp(e) {
                 if(e.ButtonType === 0){
                     this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.BackIcon}`) + ')'
 
                     // 分屏和清屏按钮控制
                     for(const item of e.MouseDownActionList){
+                        // 获取大屏对象
+                        const bigscreenObj = this.$store.state.bigScreenObj
+                        // 获取当前大屏Id
+                        let Id = item.SourceID
                         if(item.ActionType === 9 && item.Condition === 'SetSplit'){
-                            // 获取大屏对象
-                            const bigscreenObj = this.$store.state.bigScreenObj
-                            // 获取当前大屏Id
-                            let Id = item.SourceID
                             bigscreenObj[Id].splitStatus = item.Parameter[0]-1
                             bigscreenObj[Id].bindList = []
                             for(let i =0;i<(item.Parameter[0])**2;i++){
                                 bigscreenObj[Id].bindList.push(i+1)
                             }
                             this.$store.dispatch('updateBigscreenObj',bigscreenObj)
+                        }else if(item.Parameter === '清屏'){
+                            bigscreenObj[Id].signalArr = []
+                            await reqRefreshView({
+                                bigScreenId: Id,
+                                streamWindows:[]
+                            })
                         }
                     }
                 }