|
|
@@ -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) {
|
