图层管理第一次点击不显示调整

src/common/store/widget.ts

@@ -258,7 +258,7 @@ export function useWidget() {
     // 获取widget的当前激活状态
     isActivate: (name: string) => {
       const widget = store.state.widgets.find((item: any) => item.name === name)
-      return widget ? widget.visible : false
+      return widget ? store.state.openAtStart.includes(name) && !!widget.visible : false
     },
     // 激活指定 widget模块
     activate: (option: string | Widget | (string | Widget)[], reload = true) => {

src/components/dockerCont/live-content-dock-jg.vue

@@ -1157,84 +1157,6 @@ defineExpose({
 		z-index: 10;
 	}
 }
-// .fullscreen-container {
-// 	position: fixed;
-// 	top: 0;
-// 	left: 0;
-// 	right: 0;
-// 	bottom: 0;
-// 	display: flex;
-// 	justify-content: center;
-// 	align-items: center;
-// 	z-index: 999999;
-// 	width: 100%;
-//     height: 100%;
-// 	.content {
-// 		width: 100%;
-// 		// height: 871px;
-// 		height: 100%;
-// 		/* src\pages\page-web\daping\img\弹窗.png */
-// 		// background: url(img/icon/bgData.png) no-repeat;
-// 		background-size: cover;
-// 		position: relative;
-// 		// padding: 30px 24px 0;
-// 		.content-top {
-// 			display: flex;
-// 			justify-content: end;
-// 			margin-bottom: 10px;
-// 			> .top-right {
-// 				width: 755px;
-// 				padding-left: 240px;
-// 				display: flex;
-// 				justify-content: space-between;
-// 				align-items: flex-start;
-// 				> .btn-list {
-// 					display: inline-flex;
-// 					color: #fff;
-// 					> .btn {
-// 						width: 90px;
-// 						font-size: 16px;
-// 						margin: 0 10px;
-// 						border: 1px solid #d3d3d3;
-// 						padding: 4px 12px;
-// 						border-radius: 12px;
-// 						text-align: center;
-// 						text-wrap: nowrap;
-// 						&:hover {
-// 							cursor: pointer;
-// 						}
-// 					}
-// 					> .btnActive {
-// 						background-color: #1890ff;
-// 						border: 1px solid #1890ff;
-// 					}
-// 				}
-// 				> .close {
-// 					font-size: 26px;
-// 					color: #fff;
-// 					&:hover {
-// 						cursor: pointer;
-// 					}
-// 				}
-// 			}
-// 		}
-// 		> .player-content {
-// 			width: 100%;
-// 			height: 100%;
-// 			display: flex;
-// 			align-items: center;
-// 			justify-content: center;
-// 			overflow: hidden;
-// 			> .player {
-// 				width: 100%;
-// 				height: 100%;
-// 				display: flex;
-// 				align-items: center;
-// 				justify-content: center;
-// 			}
-// 		}
-// 	}
-// }
 
 .fullscreen-container {
 	position: fixed;
@@ -1245,7 +1167,7 @@ defineExpose({
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	z-index: 999;
+	z-index: 9999;
 	background-color: rgba(0, 0, 0, 0.5);
 	pointer-events: auto;
 	&:fullscreen {

src/components/dockerCont/live-content-jg-wrc.vue

@@ -16,12 +16,12 @@
 				<a-spin size="large" v-if="loading" />
 				<!-- <div id="player" v-else></div> -->
 				<div class="player" :id="'player_' + sn" v-else>
-					<jessibuca 
+					<stream-player
 						ref="jessibucaVideo"
 						style="width: 100%; height: 100%"
 						:videoUrl="flvUrl"
 						:showQu="false"
-					></jessibuca>
+					></stream-player>
 				</div>
 			</div>
 		</div>
@@ -35,7 +35,7 @@ import { message } from 'ant-design-vue';
 import jswebrtc from '/@/vendors/jswebrtc.js';
 import FlvExtend from 'flv-extend';
 import { useUserAuthor } from '/@/hooks/use-g-author';
-import jessibuca from './live/jessibuca.vue';
+import streamPlayer from './live/stream-player.vue';
 import { getAiLive } from '/@/api/daping';
 const { getAiAuthor } = useUserAuthor();
 interface Props {
@@ -289,7 +289,8 @@ const createRtmpVideo = async (url: string) => {
 	// 将video加入到 dom中
 	// remotePlay?.appendChild(link);
 	await nextTick(async () => {
-		await rtmpVideoData(url, 'player_'+props.sn);
+		flvUrl.value = url;
+		await jessibucaVideo.value?.play?.(url);
 	});
 };
 let videoPalyer = null;
@@ -429,16 +430,15 @@ watch(
 	}
 );
 onMounted(() => {
-
 	// console.log('ckckckckk----',props)
 	// onloadCamera();
 	createRtmpVideo(props.flvUrl)
 });
 const emit = defineEmits(['close']);
 const closeVideo = () => {
-	if (!videoPalyer) return;
-	videoPalyer.close();
 	videoPalyer = null;
+	flvUrl.value = '';
+	jessibucaVideo.value?.destroy?.();
 };
 const closeMoadl = () => {
 	closeVideo();

src/components/dockerCont/live/jessibuca.vue

@@ -349,6 +349,11 @@ const pause = () => {
 };
 </script>
 <style lang="scss" scoped>
+#jessibuca {
+  width: 100%;
+  height: 100%;
+}
+
 .buttons-box {
   width: 100%;
   height: 28px;

src/components/dockerCont/live/stream-player.vue

@@ -3,6 +3,7 @@
     <jessibuca
       v-show="!isWebrtcMode"
       ref="flvPlayerRef"
+      style="width: 100%; height: 100%;"
       :currentVedioDatas="currentVedioDatas"
       :videoUrl="videoUrl"
       :error="error"
@@ -393,7 +394,7 @@ defineExpose({
   height: 100%;
   display: block;
   background-color: #000;
-  object-fit: fill;
+  object-fit:cover;
 }
 
 .buttons-box-right {

src/pages/dataGovernanceDashboard/widget-store.ts

@@ -80,13 +80,11 @@ const store: StoreOptions<WidgetState> = {
         component: markRaw(defineAsyncComponent(() => import("@mars/widgets/basic/manage-layers/index.vue"))),
         name: "manage-layers",
         group: "manage",
-        visible:true,
         disableOther: ["roamLine"]
       },
       {
         component: markRaw(defineAsyncComponent(() => import("@mars/widgets/basic/manage-layers1/index.vue"))),
-        name: "manage-layers1",
+        name: "manage-layers1"
-        visible:true,
       },
       {
         component: markRaw(defineAsyncComponent(() => import("@mars/widgets/basic/manage-layers/layer-tree.vue"))),

src/widgets/basic/manage-layers/index.vue

@@ -62,7 +62,7 @@ watch(()=>props.warppers,(data)=>{
 })
 
 onMounted(() => {
-  
+  resetTreeState()
   initTree()
 })
 onUnmounted(() => {
@@ -74,9 +74,7 @@ onUnmounted(() => {
 useLifecycle(mapWork)
 
 currentWidget.onUpdate(() => {
-  treeData.value = []
+  resetTreeState()
-  expandedKeys.value = []
-  checkedKeys.value = []
   initTree()
 })
 
@@ -90,6 +88,17 @@ const layersObj: any = {}
 
 const opacityObj: any = reactive({})
 
+const fatherLayer = []
+
+function resetTreeState() {
+  treeData.value = []
+  expandedKeys.value = []
+  checkedKeys.value = []
+  fatherLayer.length = 0
+  Object.keys(layersObj).forEach((key) => delete layersObj[key])
+  Object.keys(opacityObj).forEach((key) => delete opacityObj[key])
+}
+
 let lastWidget: any
 const checkedChange = (keys: string[], e: any) => {
   const layer = layersObj[e.node.id]
@@ -237,7 +246,6 @@ function flyTo(item: any) {
   }
 }
 
-const fatherLayer = []
 function initTree() {
   const layers = mapWork.getLayers()
   console.log("layers1", JSON.stringify(layers))

src/widgets/basic/manage-layers1/index.vue

@@ -63,7 +63,7 @@ watch(()=>props.warppers,(data)=>{
 })
 
 onMounted(() => {
-  
+  resetTreeState()
   initTree()
 })
 onUnmounted(() => {
@@ -75,9 +75,7 @@ onUnmounted(() => {
 useLifecycle(mapWork)
 
 currentWidget.onUpdate(() => {
-  treeData.value = []
+  resetTreeState()
-  expandedKeys.value = []
-  checkedKeys.value = []
   initTree()
 })
 
@@ -91,6 +89,17 @@ const layersObj: any = {}
 
 const opacityObj: any = reactive({})
 
+const fatherLayer = []
+
+function resetTreeState() {
+  treeData.value = []
+  expandedKeys.value = []
+  checkedKeys.value = []
+  fatherLayer.length = 0
+  Object.keys(layersObj).forEach((key) => delete layersObj[key])
+  Object.keys(opacityObj).forEach((key) => delete opacityObj[key])
+}
+
 let lastWidget: any
 const checkedChange = (keys: string[], e: any) => {
   const layer = layersObj[e.node.id]
@@ -238,7 +247,6 @@ function flyTo(item: any) {
   }
 }
 
-const fatherLayer = []
 function initTree() {
   const layers = mapWork.getLayers()
   console.log("layers1", JSON.stringify(layers))