信号源可以拖到指定位置，但仍有bug

package.json

@@ -57,6 +57,7 @@
     "express": "^4.17.1",
     "mux.js": "^5.6.2",
     "pubsub-js": "^1.7.0",
+    "sortable": "^2.0.0",
     "video.js": "^7.7.6",
     "videojs-flash": "^2.2.1",
     "vue": "^2.5.16",

src/renderer/assets/less/splitscreen.less

@@ -4,7 +4,7 @@
   position: absolute;
   width: 100%;
   height: 70%;
-  background-color: #000000;
+  background-color: #0b0b0b;
   box-sizing: border-box;
   overflow: hidden;
   color:#ffffff;
@@ -14,8 +14,8 @@
   .sitem {
     border: 1px solid #000000;
     color:#fff;
-    position: relative;
     background-color: #717171;
+    position: relative;
 
     // 关闭信号源开窗按钮
     .closeBtn {
@@ -35,7 +35,6 @@
 
   /*分屏项(栅格)*/
   .sitem2 {
-    float: left;
     color:#000;
     border: 1px solid #3b3b3b;
     background-color: #0b0b0b;
@@ -58,6 +57,8 @@
   grid-template-rows: repeat(2,50%);
 }
 
+
+
 /*9分屏*/
 .split_screen_nine {
   display: grid;

src/renderer/components/BigShow.vue

@@ -7,10 +7,10 @@
                 element="div"
                 :class="['split_screen', splitScreenStatus === 0 ? 'split_screen_one' : splitScreenStatus === 1 ? 'split_screen_four' : splitScreenStatus === 2 ? 'split_screen_nine' : 'split_screen_sixteen']"
                 v-model="signalPreList"
+                handle=".handle"
                 :options="dragOptions2"
                 :move="onMove"
-                @start="isDragging=true"
-                @end="isDragging=false"
+                @change="log"
                 ref="bigscreen"
                 :style="{
                     width:item.Width*bigScale + 'px',
@@ -26,13 +26,12 @@
                     :w="item.Width*bigScale/itemV.splitScreenStatus" :h="item.Height*bigScale/itemV.splitScreenStatus"
                     @dragstop="dragStop"
                     @resizestop="(obj) => reSizeSignal(obj,itemV)"
+                    :style="{gridArea: gridPosition(itemV.splitScreenStatus,itemV.newIndex)}"
             >
-                <div
-                    ref="signal"
-                >
+                <div ref="signal">
                     {{itemV.deviceID}}
-                    <!--<div class="closeBtn" @click.stop="closeSignal(itemV)">×</div>
-                    <video-player
+                    <div class="closeBtn" @click.stop="closeSignal(itemV)">×</div>
+                    <!--<video-player
                             ref="videoPlayer"
                             :options="playerOptions"
                             :playsinline="true"
@@ -44,30 +43,6 @@
             <div v-for="itemD in bindList" :key="itemD" class="sitem2">
                 {{itemD}}
             </div>
-
-            <!--<div v-for="item in [...signalPreList,...bindList]">
-                <VueDragResize
-                        v-if="item.deviceID" :key="item.Id" class="sitem"
-                        :w="item.Width*bigScale/item.splitScreenStatus" :h="item.Height*bigScale/item.splitScreenStatus"
-                        @dragstop="dragStop"
-                        @resizestop="(obj) => reSizeSignal(obj,item)"
-                >
-                    <div ref="signal">
-                        <div class="closeBtn" @click.stop="closeSignal(item)">×</div>
-                        <video-player
-                                ref="videoPlayer"
-                                :options="playerOptions"
-                                :playsinline="true"
-                        >
-                        </video-player>
-                    </div>
-                </VueDragResize>
-
-                <div v-else :key="item" class="sitem2">
-                    {{item}}
-                </div>
-            </div>-->
-
         </draggable>
     </div>
 </template>
@@ -133,6 +108,17 @@
                 )
             },
 
+            // 改变信号源
+            log(value) {
+                const signalList = this.$store.state.signalPreList
+                const currentElement = signalList.filter(item => item.sourceId === value.added.element.sourceId)
+                const otherElement = signalList.filter(item => item.sourceId !== value.added.element.sourceId)
+                console.log(value.added)
+                currentElement[currentElement.length-1].newIndex = value.added.newIndex
+                this.$store.dispatch('updateSignalPreList', [...otherElement,...currentElement])
+                console.log([...otherElement,...currentElement])
+            },
+
             // 大屏开窗接口提交
             reqRefreshBigScreen(arr) {
                 const streamWindows = []
@@ -162,7 +148,6 @@
                         this.streamWindows = streamWindows
                         // 调用大屏开窗接口
                         await reqRefreshView(data)
-                        this.$store.dispatch('updateSignalPreList', streamWindows)
                     }
                 })
             },
@@ -193,6 +178,81 @@
                 const signalPreList = this.$store.state.signalPreList
                 const newSignalPreList = signalPreList.filter(item => item.Id !== signal.Id)
                 this.$store.dispatch('updateSignalPreList',newSignalPreList)
+            },
+
+            // 获取栅格位置
+            gridPosition(splitStatus,count) {
+                if(splitStatus === 2){
+                    // 四分屏
+                    switch (count) {
+                        case 1:
+                            return '1/1/2/2'
+                        case 2:
+                            return '1/2/2/3'
+                        case 3:
+                            return '2/1/3/2'
+                        case 4:
+                            return '2/2/3/3'
+                    }
+                }else if(splitStatus === 3){
+                    // 九分屏
+                    switch (count) {
+                        case 1:
+                            return '1/1/2/2'
+                        case 2:
+                            return '1/2/2/3'
+                        case 3:
+                            return '1/3/2/4'
+                        case 4:
+                            return '2/1/3/2'
+                        case 5:
+                            return '2/2/3/3'
+                        case 6:
+                            return '2/3/3/4'
+                        case 7:
+                            return '3/1/4/2'
+                        case 8:
+                            return '3/2/4/3'
+                        case 9:
+                            return '3/3/4/4'
+                    }
+                }else if(splitStatus === 4){
+                    // 十六分屏
+                    switch (count) {
+                        case 1:
+                            return '1/1/2/2'
+                        case 2:
+                            return '1/2/2/3'
+                        case 3:
+                            return '1/3/2/4'
+                        case 4:
+                            return '1/4/2/5'
+                        case 5:
+                            return '2/1/3/2'
+                        case 6:
+                            return '2/2/3/3'
+                        case 7:
+                            return '2/3/3/4'
+                        case 8:
+                            return '2/4/3/5'
+                        case 9:
+                            return '3/1/4/2'
+                        case 10:
+                            return '3/2/4/3'
+                        case 11:
+                            return '3/3/4/4'
+                        case 12:
+                            return '3/4/4/5'
+                        case 13:
+                            return '4/1/5/2'
+                        case 14:
+                            return '4/2/5/3'
+                        case 15:
+                            return '4/3/5/4'
+                        case 16:
+                            return '4/4/5/5'
+                    }
+                }
             }
         },
 
@@ -218,9 +278,9 @@
                             item.widthScale = item.width / (this.currentBigshow[0].Width * this.$store.state.bigScale)
                             item.heightScale = item.height / (this.currentBigshow[0].Height * this.$store.state.bigScale)
                         })
-                        this.reqRefreshBigScreen(arr2)
+                        this.$store.dispatch('updateSignalPreList', arr2)
                     }else {
-                        this.reqRefreshBigScreen(arr)
+                        this.$store.dispatch('updateSignalPreList', arr)
                     }
                 }
             },
@@ -240,6 +300,7 @@
                 return {
                     animation: 0,
                     group: "description",
+                    disabled:false,
                 }
             },
 
@@ -250,9 +311,10 @@
 
         watch: {
             // 监视大屏中的信号源，只要变动，就调用回调函数
-           /* signalPreList: function (arr) {
+            signalPreList: function (arr) {
+                // this.$store.dispatch('splitScreen',-1)
                 this.reqRefreshBigScreen(arr)
-            },*/
+            },
 
             // 监视分屏的状态
             splitScreenStatus: function(num) {

src/utils/tools.js

@@ -53,3 +53,27 @@ export function guId() {
     });
 }
 
+// 根据给定的位置计算出栅格位置
+export function gridPosition(count) {
+    switch (count) {
+        case 1:
+            return '1/1/1/1'
+        case 2:
+            return '1/2/2/3'
+        case 3:
+            return '1/3/2/4'
+        case 4:
+            return '2/1/3/2'
+        case 5:
+            return '2/2/3/3'
+        case 6:
+            return '2/3/3/4'
+        case 7:
+            return '3/1/4/2'
+        case 8:
+            return '3/2/4/3'
+        case 9:
+            return '3/3/4/4'
+    }
+}
+

yarn.lock

@@ -1730,6 +1730,11 @@ brorand@^1.0.1:
   resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
   integrity sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=
 
+browser-split@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/browser-split/-/browser-split-0.0.0.tgz#41419caef769755929dd518967d3eec0a6262771"
+  integrity sha1-QUGcrvdpdVkp3VGJZ9PuwKYmJ3E=
+
 browserify-aes@^1.0.0, browserify-aes@^1.0.4:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.2.0.tgz#326734642f403dabc3003209853bb70ad428ef48"
@@ -2152,6 +2157,13 @@ clap@^1.0.9:
   dependencies:
     chalk "^1.1.3"
 
+class-list@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/class-list/-/class-list-0.1.1.tgz#9b9745192c4179b5da0a0d7633658e3c70d796cb"
+  integrity sha1-m5dFGSxBebXaCg12M2WOPHDXlss=
+  dependencies:
+    indexof "0.0.1"
+
 class-utils@^0.3.5:
   version "0.3.6"
   resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
@@ -4500,6 +4512,14 @@ humanize-plus@^1.8.1:
   resolved "https://registry.yarnpkg.com/humanize-plus/-/humanize-plus-1.8.2.tgz#a65b34459ad6367adbb3707a82a3c9f916167030"
   integrity sha1-pls0RZrWNnrbs3B6gqPJ+RYWcDA=
 
+hyperscript@~1.0.1:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/hyperscript/-/hyperscript-1.0.7.tgz#d88ed3c51934c6d6fa35b2abfd7c00f100820f65"
+  integrity sha1-2I7TxRk0xtb6NbKr/XwA8QCCD2U=
+  dependencies:
+    browser-split "0.0.0"
+    class-list "~0.1.0"
+
 iconv-lite@0.4.24, iconv-lite@^0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -4569,6 +4589,11 @@ indexes-of@^1.0.1:
   resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
   integrity sha1-8w9xbI4r00bHtn0985FVZqfAVgc=
 
+indexof@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
+  integrity sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10=
+
 individual@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/individual/-/individual-2.0.0.tgz#833b097dad23294e76117a98fb38e0d9ad61bb97"
@@ -4979,6 +5004,11 @@ isstream@~0.1.2:
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
   integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
 
+jquery-browserify@~1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/jquery-browserify/-/jquery-browserify-1.8.1.tgz#0dea9d741a4f4115ae1980c4531b22502991a015"
+  integrity sha1-DeqddBpPQRWuGYDEUxsiUCmRoBU=
+
 js-base64@^2.1.9:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.2.tgz#313b6274dda718f714d00b3330bbae6e38e90209"
@@ -6144,6 +6174,11 @@ object.pick@^1.3.0:
   dependencies:
     isobject "^3.0.1"
 
+observable@~1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/observable/-/observable-1.3.1.tgz#3d2a203b1430daf6a4d6d36f236cc13e6ed5bb4e"
+  integrity sha1-PSogOxQw2vak1tNvI2zBPm7Vu04=
+
 obuf@^1.0.0, obuf@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
@@ -7834,6 +7869,15 @@ sort-keys@^1.0.0:
   dependencies:
     is-plain-obj "^1.0.0"
 
+sortable@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/sortable/-/sortable-2.0.0.tgz#34b3542b42904c59b8454f55148a0f4f60186943"
+  integrity sha1-NLNUK0KQTFm4RU9VFIoPT2AYaUM=
+  dependencies:
+    hyperscript "~1.0.1"
+    jquery-browserify "~1.8.1"
+    observable "~1.3.1"
+
 sortablejs@^1.10.1:
   version "1.10.2"
   resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.10.2.tgz#6e40364d913f98b85a14f6678f92b5c1221f5290"