diff --git a/index.html b/index.html index f75d9c4..a94b4bf 100644 --- a/index.html +++ b/index.html @@ -249,7 +249,6 @@ } } - diff --git a/index.html b/index.html index f75d9c4..a94b4bf 100644 --- a/index.html +++ b/index.html @@ -249,7 +249,6 @@ } } - diff --git a/public/static/DH/videoPlayer.js b/public/static/DH/videoPlayer.js index 5f9af4c..54eb233 100644 --- a/public/static/DH/videoPlayer.js +++ b/public/static/DH/videoPlayer.js @@ -1382,7 +1382,7 @@ this.onbeforeunloadBind = this.onbeforeunload.myBind(this) this.visibilitychangeBind = this.setVisible.myBind(this) var that = this - this.setLanguage() // 设置语言 + this.setLanguage('zh')// 设置语言 this.destroy().then(() => { this.send( { diff --git a/index.html b/index.html index f75d9c4..a94b4bf 100644 --- a/index.html +++ b/index.html @@ -249,7 +249,6 @@ } } - diff --git a/public/static/DH/videoPlayer.js b/public/static/DH/videoPlayer.js index 5f9af4c..54eb233 100644 --- a/public/static/DH/videoPlayer.js +++ b/public/static/DH/videoPlayer.js @@ -1382,7 +1382,7 @@ this.onbeforeunloadBind = this.onbeforeunload.myBind(this) this.visibilitychangeBind = this.setVisible.myBind(this) var that = this - this.setLanguage() // 设置语言 + this.setLanguage('zh')// 设置语言 this.destroy().then(() => { this.send( { diff --git a/src/assets/styles/WaterAssets.scss b/src/assets/styles/WaterAssets.scss index 8366383..db5e61d 100644 --- a/src/assets/styles/WaterAssets.scss +++ b/src/assets/styles/WaterAssets.scss @@ -243,7 +243,7 @@ .videoitem { display: flex; - height: 18%; + height: 80px; align-items: center; padding: 0 20px; background: url('@/assets/images/shuiwuzichan/video-bg.png') no-repeat; @@ -266,6 +266,9 @@ font-size: 14px; color: #ffffff; line-height: 32px; + overflow: hidden; + white-space: nowrap; /* 防止文字换行 */ + text-overflow: ellipsis; /* 超出部分显示省略号 */ } .value { @@ -275,7 +278,11 @@ } &.two_item { - margin-left: 80px; + margin-left: 50px; + } + + &.one_item { + width: 110px !important; } } diff --git a/index.html b/index.html index f75d9c4..a94b4bf 100644 --- a/index.html +++ b/index.html @@ -249,7 +249,6 @@ } } - diff --git a/public/static/DH/videoPlayer.js b/public/static/DH/videoPlayer.js index 5f9af4c..54eb233 100644 --- a/public/static/DH/videoPlayer.js +++ b/public/static/DH/videoPlayer.js @@ -1382,7 +1382,7 @@ this.onbeforeunloadBind = this.onbeforeunload.myBind(this) this.visibilitychangeBind = this.setVisible.myBind(this) var that = this - this.setLanguage() // 设置语言 + this.setLanguage('zh')// 设置语言 this.destroy().then(() => { this.send( { diff --git a/src/assets/styles/WaterAssets.scss b/src/assets/styles/WaterAssets.scss index 8366383..db5e61d 100644 --- a/src/assets/styles/WaterAssets.scss +++ b/src/assets/styles/WaterAssets.scss @@ -243,7 +243,7 @@ .videoitem { display: flex; - height: 18%; + height: 80px; align-items: center; padding: 0 20px; background: url('@/assets/images/shuiwuzichan/video-bg.png') no-repeat; @@ -266,6 +266,9 @@ font-size: 14px; color: #ffffff; line-height: 32px; + overflow: hidden; + white-space: nowrap; /* 防止文字换行 */ + text-overflow: ellipsis; /* 超出部分显示省略号 */ } .value { @@ -275,7 +278,11 @@ } &.two_item { - margin-left: 80px; + margin-left: 50px; + } + + &.one_item { + width: 110px !important; } } diff --git a/src/components/Map/MapBox.vue b/src/components/Map/MapBox.vue index 3a6d7b1..55be958 100644 --- a/src/components/Map/MapBox.vue +++ b/src/components/Map/MapBox.vue @@ -345,6 +345,7 @@ )()); function areaToMap(properties) { + bus.emit('set_area_parent',{name:properties.p_name}); let isYS = properties.type == "YS"; clearRouteMethod(); districtMask(properties); @@ -737,6 +738,7 @@ let prevObj = null; const panelDataToMap = (obj) => { + debugger; let isUp = Object.keys(obj).includes("isUp") ? obj.isUp : true; //是否触发地图点击事件 默认触发 const { setLayerVisible, setHighlight } = events_params; // if (prevObj != null) busEmit(setLayerVisible.key, { layername: prevObj.type, isCheck: false }); @@ -744,10 +746,9 @@ // busEmit(setLayerVisible.key, { layername: obj.type, isCheck: true }); // debugger; let features = ["point", "linestring", "polygon", "hb_wh_dhgx_psfq_geometrys", "hb_wh_dhgx_merge",'ps_watch_area_geometrys'].map((key) => newfiberMap.map.getSource(key)._options.data.features.filter((i) => (i.properties.name || "").includes(obj.name) || (obj.id ? obj.id == i.properties.pid : false))).flat(); - let feature = obj.watchAreaName || obj.stName?features.filter((i) => i.properties.name == obj.name || i.properties.id == obj.id)[0]:features.filter((i) => i.properties.p_type)[0] || features.filter((i) => i.properties.name == obj.name && i.properties.id == obj.id)[0] || features[_.random(0, features.length - 1)]; - console.log("feature.properties.p_type&&isUp", feature.properties.p_type && isUp); - if (feature.properties.p_type && isUp) return mapClickEvt(undefined, feature.properties, "排水分区"); + let feature = obj.watchAreaName || obj.stName?features.filter((i) => i.properties.name == obj.name && i.properties.id == obj.id)[0]:features.filter((i) => i.properties.p_type)[0] || features.filter((i) => i.properties.name == obj.name && i.properties.id == obj.id)[0] || features[_.random(0, features.length - 1)]; if (!feature) return; + if (feature.properties.p_type && isUp) return mapClickEvt(undefined, feature.properties, "排水分区"); busEmit(setHighlight.key, [feature]); mapCenterByData(turf.bbox(feature)); }; diff --git a/index.html b/index.html index f75d9c4..a94b4bf 100644 --- a/index.html +++ b/index.html @@ -249,7 +249,6 @@ } } - diff --git a/public/static/DH/videoPlayer.js b/public/static/DH/videoPlayer.js index 5f9af4c..54eb233 100644 --- a/public/static/DH/videoPlayer.js +++ b/public/static/DH/videoPlayer.js @@ -1382,7 +1382,7 @@ this.onbeforeunloadBind = this.onbeforeunload.myBind(this) this.visibilitychangeBind = this.setVisible.myBind(this) var that = this - this.setLanguage() // 设置语言 + this.setLanguage('zh')// 设置语言 this.destroy().then(() => { this.send( { diff --git a/src/assets/styles/WaterAssets.scss b/src/assets/styles/WaterAssets.scss index 8366383..db5e61d 100644 --- a/src/assets/styles/WaterAssets.scss +++ b/src/assets/styles/WaterAssets.scss @@ -243,7 +243,7 @@ .videoitem { display: flex; - height: 18%; + height: 80px; align-items: center; padding: 0 20px; background: url('@/assets/images/shuiwuzichan/video-bg.png') no-repeat; @@ -266,6 +266,9 @@ font-size: 14px; color: #ffffff; line-height: 32px; + overflow: hidden; + white-space: nowrap; /* 防止文字换行 */ + text-overflow: ellipsis; /* 超出部分显示省略号 */ } .value { @@ -275,7 +278,11 @@ } &.two_item { - margin-left: 80px; + margin-left: 50px; + } + + &.one_item { + width: 110px !important; } } diff --git a/src/components/Map/MapBox.vue b/src/components/Map/MapBox.vue index 3a6d7b1..55be958 100644 --- a/src/components/Map/MapBox.vue +++ b/src/components/Map/MapBox.vue @@ -345,6 +345,7 @@ )()); function areaToMap(properties) { + bus.emit('set_area_parent',{name:properties.p_name}); let isYS = properties.type == "YS"; clearRouteMethod(); districtMask(properties); @@ -737,6 +738,7 @@ let prevObj = null; const panelDataToMap = (obj) => { + debugger; let isUp = Object.keys(obj).includes("isUp") ? obj.isUp : true; //是否触发地图点击事件 默认触发 const { setLayerVisible, setHighlight } = events_params; // if (prevObj != null) busEmit(setLayerVisible.key, { layername: prevObj.type, isCheck: false }); @@ -744,10 +746,9 @@ // busEmit(setLayerVisible.key, { layername: obj.type, isCheck: true }); // debugger; let features = ["point", "linestring", "polygon", "hb_wh_dhgx_psfq_geometrys", "hb_wh_dhgx_merge",'ps_watch_area_geometrys'].map((key) => newfiberMap.map.getSource(key)._options.data.features.filter((i) => (i.properties.name || "").includes(obj.name) || (obj.id ? obj.id == i.properties.pid : false))).flat(); - let feature = obj.watchAreaName || obj.stName?features.filter((i) => i.properties.name == obj.name || i.properties.id == obj.id)[0]:features.filter((i) => i.properties.p_type)[0] || features.filter((i) => i.properties.name == obj.name && i.properties.id == obj.id)[0] || features[_.random(0, features.length - 1)]; - console.log("feature.properties.p_type&&isUp", feature.properties.p_type && isUp); - if (feature.properties.p_type && isUp) return mapClickEvt(undefined, feature.properties, "排水分区"); + let feature = obj.watchAreaName || obj.stName?features.filter((i) => i.properties.name == obj.name && i.properties.id == obj.id)[0]:features.filter((i) => i.properties.p_type)[0] || features.filter((i) => i.properties.name == obj.name && i.properties.id == obj.id)[0] || features[_.random(0, features.length - 1)]; if (!feature) return; + if (feature.properties.p_type && isUp) return mapClickEvt(undefined, feature.properties, "排水分区"); busEmit(setHighlight.key, [feature]); mapCenterByData(turf.bbox(feature)); }; diff --git a/src/components/videoDHone/index.vue b/src/components/videoDHone/index.vue index a48e4fe..7d4d823 100644 --- a/src/components/videoDHone/index.vue +++ b/src/components/videoDHone/index.vue @@ -10,11 +10,17 @@ const { proxy } = getCurrentInstance(); const { dh_video_config } = proxy.useDict('dh_video_config'); +const emit = defineEmits(['ckNumber']) + const props = defineProps({ // 内网、公网 4个配置 channelId: { + type: Array, + default: () => [], + }, + layout: { type: String, - default: () => '', + default: () => '1', }, }); @@ -22,7 +28,7 @@ const AllData = reactive({ Getchajian: null, URL: null, - channelId: null, + channelId: [], myVideoPlayer: null, pluginLoginInfo: { // 传入 icc 平台的登录信息 @@ -46,7 +52,7 @@ val => { if (props.channelId) { console.log('初始化视频', props.channelId); - AllData.channelId = props.channelId.trim(); + AllData.channelId = props.channelId; if (AllData.Getchajian) { startReal(); } else { @@ -83,7 +89,7 @@ windowType: 0, // 播放器类型，必传， 0 - 实时预览，3 - 录像回放，7- 录像回放（支持倒放） usePluginLogin: true, // 采用登录 (请默认传true，插件内部自动拉流) pluginLoginInfo: AllData.pluginLoginInfo, - division: 1, // 默认展示的窗口数量， 必传 + division: props.layout, // 默认展示的窗口数量， 必传 draggable: false, // 窗口拖拽 【暂不支持】 showBar: true, // 底部操作栏， 选传，【true - 显示, false - 隐藏】 shieldClass: ['shield-class', 'select'], // 如果DOM元素被插件挡住了，把DOM元素的类名传入。 @@ -95,6 +101,7 @@ createSuccess: versionInfo => { // 该回调触发后，我们可以进行实时预览/录像回放等操作 // desc.value = '创建成功!!!' + versionInfo.message; + // debugger AllData.Getchajian = 1; startReal(); }, @@ -102,6 +109,7 @@ createError: err => { // 有错误码，可打印查看错误信息 // desc.value = '创建失败!!!' + JSON.stringify(err); + // debugger AllData.Getchajian = null; GetchajianUrl(); }, @@ -149,7 +157,9 @@ // 鼠标双击窗口回调 dbClickWindow: snum => {}, // 播放器窗口的数量回调 - changeDivision: division => {}, + changeDivision: division => { + emit('ckNumber',division) + }, // rtsp 流下载录像成功回调 downloadRecordSuccess: info => {}, // rtsp 流下载录像失败回调 @@ -176,19 +186,21 @@ // 实时预览 function startReal() { - console.log('开始实时预览', AllData.channelId); - AllData.myVideoPlayer.startReal([ - // 通道id规则说明： 1000131(设备编码) + $1$0$(拼接字符串(固定)) + 0(通道编码)
可在ICC平台设备管理页面查看到通道id - { - channelId: AllData.channelId, // 通道id 【必传】 + let array=[] + AllData.channelId.forEach((e,i)=>{ + let obj={ + channelId: e, // 通道id 【必传】 channelName: '通道名称', // 通道名称 (用于本地录像下载) - snum: 0, // 即将要播放的窗口序号，从0开始 【必传】 + snum: i, // 即将要播放的窗口序号，从0开始 【必传】 streamType: 1, // 1-主码流 2-辅码流 (可不传，默认主码流) deviceType: 5, // 设备类别 (插件对讲时，需要配置该参数，否则无法对讲) cameraType: '1', // 摄像头类型 (用于云台) capability: '00000000000000000000000000000001', // 能力集 (用于云台) - }, - ]); + } + array.push(obj) + }) + console.log('开始实时预览', AllData.channelId); + AllData.myVideoPlayer.startReal(array); } // 录像回放 diff --git a/index.html b/index.html index f75d9c4..a94b4bf 100644 --- a/index.html +++ b/index.html @@ -249,7 +249,6 @@ } } - diff --git a/public/static/DH/videoPlayer.js b/public/static/DH/videoPlayer.js index 5f9af4c..54eb233 100644 --- a/public/static/DH/videoPlayer.js +++ b/public/static/DH/videoPlayer.js @@ -1382,7 +1382,7 @@ this.onbeforeunloadBind = this.onbeforeunload.myBind(this) this.visibilitychangeBind = this.setVisible.myBind(this) var that = this - this.setLanguage() // 设置语言 + this.setLanguage('zh')// 设置语言 this.destroy().then(() => { this.send( { diff --git a/src/assets/styles/WaterAssets.scss b/src/assets/styles/WaterAssets.scss index 8366383..db5e61d 100644 --- a/src/assets/styles/WaterAssets.scss +++ b/src/assets/styles/WaterAssets.scss @@ -243,7 +243,7 @@ .videoitem { display: flex; - height: 18%; + height: 80px; align-items: center; padding: 0 20px; background: url('@/assets/images/shuiwuzichan/video-bg.png') no-repeat; @@ -266,6 +266,9 @@ font-size: 14px; color: #ffffff; line-height: 32px; + overflow: hidden; + white-space: nowrap; /* 防止文字换行 */ + text-overflow: ellipsis; /* 超出部分显示省略号 */ } .value { @@ -275,7 +278,11 @@ } &.two_item { - margin-left: 80px; + margin-left: 50px; + } + + &.one_item { + width: 110px !important; } } diff --git a/src/components/Map/MapBox.vue b/src/components/Map/MapBox.vue index 3a6d7b1..55be958 100644 --- a/src/components/Map/MapBox.vue +++ b/src/components/Map/MapBox.vue @@ -345,6 +345,7 @@ )()); function areaToMap(properties) { + bus.emit('set_area_parent',{name:properties.p_name}); let isYS = properties.type == "YS"; clearRouteMethod(); districtMask(properties); @@ -737,6 +738,7 @@ let prevObj = null; const panelDataToMap = (obj) => { + debugger; let isUp = Object.keys(obj).includes("isUp") ? obj.isUp : true; //是否触发地图点击事件 默认触发 const { setLayerVisible, setHighlight } = events_params; // if (prevObj != null) busEmit(setLayerVisible.key, { layername: prevObj.type, isCheck: false }); @@ -744,10 +746,9 @@ // busEmit(setLayerVisible.key, { layername: obj.type, isCheck: true }); // debugger; let features = ["point", "linestring", "polygon", "hb_wh_dhgx_psfq_geometrys", "hb_wh_dhgx_merge",'ps_watch_area_geometrys'].map((key) => newfiberMap.map.getSource(key)._options.data.features.filter((i) => (i.properties.name || "").includes(obj.name) || (obj.id ? obj.id == i.properties.pid : false))).flat(); - let feature = obj.watchAreaName || obj.stName?features.filter((i) => i.properties.name == obj.name || i.properties.id == obj.id)[0]:features.filter((i) => i.properties.p_type)[0] || features.filter((i) => i.properties.name == obj.name && i.properties.id == obj.id)[0] || features[_.random(0, features.length - 1)]; - console.log("feature.properties.p_type&&isUp", feature.properties.p_type && isUp); - if (feature.properties.p_type && isUp) return mapClickEvt(undefined, feature.properties, "排水分区"); + let feature = obj.watchAreaName || obj.stName?features.filter((i) => i.properties.name == obj.name && i.properties.id == obj.id)[0]:features.filter((i) => i.properties.p_type)[0] || features.filter((i) => i.properties.name == obj.name && i.properties.id == obj.id)[0] || features[_.random(0, features.length - 1)]; if (!feature) return; + if (feature.properties.p_type && isUp) return mapClickEvt(undefined, feature.properties, "排水分区"); busEmit(setHighlight.key, [feature]); mapCenterByData(turf.bbox(feature)); }; diff --git a/src/components/videoDHone/index.vue b/src/components/videoDHone/index.vue index a48e4fe..7d4d823 100644 --- a/src/components/videoDHone/index.vue +++ b/src/components/videoDHone/index.vue @@ -10,11 +10,17 @@ const { proxy } = getCurrentInstance(); const { dh_video_config } = proxy.useDict('dh_video_config'); +const emit = defineEmits(['ckNumber']) + const props = defineProps({ // 内网、公网 4个配置 channelId: { + type: Array, + default: () => [], + }, + layout: { type: String, - default: () => '', + default: () => '1', }, }); @@ -22,7 +28,7 @@ const AllData = reactive({ Getchajian: null, URL: null, - channelId: null, + channelId: [], myVideoPlayer: null, pluginLoginInfo: { // 传入 icc 平台的登录信息 @@ -46,7 +52,7 @@ val => { if (props.channelId) { console.log('初始化视频', props.channelId); - AllData.channelId = props.channelId.trim(); + AllData.channelId = props.channelId; if (AllData.Getchajian) { startReal(); } else { @@ -83,7 +89,7 @@ windowType: 0, // 播放器类型，必传， 0 - 实时预览，3 - 录像回放，7- 录像回放（支持倒放） usePluginLogin: true, // 采用登录 (请默认传true，插件内部自动拉流) pluginLoginInfo: AllData.pluginLoginInfo, - division: 1, // 默认展示的窗口数量， 必传 + division: props.layout, // 默认展示的窗口数量， 必传 draggable: false, // 窗口拖拽 【暂不支持】 showBar: true, // 底部操作栏， 选传，【true - 显示, false - 隐藏】 shieldClass: ['shield-class', 'select'], // 如果DOM元素被插件挡住了，把DOM元素的类名传入。 @@ -95,6 +101,7 @@ createSuccess: versionInfo => { // 该回调触发后，我们可以进行实时预览/录像回放等操作 // desc.value = '创建成功!!!' + versionInfo.message; + // debugger AllData.Getchajian = 1; startReal(); }, @@ -102,6 +109,7 @@ createError: err => { // 有错误码，可打印查看错误信息 // desc.value = '创建失败!!!' + JSON.stringify(err); + // debugger AllData.Getchajian = null; GetchajianUrl(); }, @@ -149,7 +157,9 @@ // 鼠标双击窗口回调 dbClickWindow: snum => {}, // 播放器窗口的数量回调 - changeDivision: division => {}, + changeDivision: division => { + emit('ckNumber',division) + }, // rtsp 流下载录像成功回调 downloadRecordSuccess: info => {}, // rtsp 流下载录像失败回调 @@ -176,19 +186,21 @@ // 实时预览 function startReal() { - console.log('开始实时预览', AllData.channelId); - AllData.myVideoPlayer.startReal([ - // 通道id规则说明： 1000131(设备编码) + $1$0$(拼接字符串(固定)) + 0(通道编码)
可在ICC平台设备管理页面查看到通道id - { - channelId: AllData.channelId, // 通道id 【必传】 + let array=[] + AllData.channelId.forEach((e,i)=>{ + let obj={ + channelId: e, // 通道id 【必传】 channelName: '通道名称', // 通道名称 (用于本地录像下载) - snum: 0, // 即将要播放的窗口序号，从0开始 【必传】 + snum: i, // 即将要播放的窗口序号，从0开始 【必传】 streamType: 1, // 1-主码流 2-辅码流 (可不传，默认主码流) deviceType: 5, // 设备类别 (插件对讲时，需要配置该参数，否则无法对讲) cameraType: '1', // 摄像头类型 (用于云台) capability: '00000000000000000000000000000001', // 能力集 (用于云台) - }, - ]); + } + array.push(obj) + }) + console.log('开始实时预览', AllData.channelId); + AllData.myVideoPlayer.startReal(array); } // 录像回放 diff --git a/src/views/pictureOnMap/LayerControl.vue b/src/views/pictureOnMap/LayerControl.vue index a476434..e1af227 100644 --- a/src/views/pictureOnMap/LayerControl.vue +++ b/src/views/pictureOnMap/LayerControl.vue @@ -4,7 +4,7 @@ class="layericon" @click="allData.showControlBox = !allData.showControlBox" > - +
返回
恢复默认
+
@@ -35,10 +36,11 @@ const appStore = useUserStore(); import { getImageUrl } from "@/utils/ruoyi"; -import { nextTick } from "vue"; +import { nextTick,computed } from "vue"; const { proxy } = getCurrentInstance(); const Show = ref(true); const selectList = ref([]); +const backObj = ref(null); const TXtYPE = ref(""); const dataSource = ref([ { @@ -235,6 +237,14 @@ showControlBox: false, //控制图层控制是否展示和隐藏 }); +function areaBack() { + backObj.value.name == '1'? (bus.emit("clearTemporaryData"),bus.emit(mapInitBusName),backObj.value = null) : bus.emit("panelDataToMap", backObj.value); +} + +const isShowBack = computed(()=>{ + return !proxy.$route.fullPath.includes('DrainageSystem') && backObj.value != null; +}) + // 这个方法会出现当前已勾选节点，或者半节点的状态 function check(data, node) { setLayerVisible([], selectList.value); @@ -316,10 +326,13 @@ Show.value = true; } }); + + bus.on("set_area_parent", (val) => backObj.value=val) }); onBeforeUnmount(() => { bus.off("YQ_head"); + bus.off("set_area_parent"); }); function reset() { @@ -439,6 +452,20 @@ background: url("@/assets/images/NewLayercontrol/layerIcon.png") no-repeat; background-size: 100% 100%; } +.layericon-back { + z-index: 0; + position: absolute; + cursor: pointer; + width: 35px; + height: 35px; + left: 487px; + top: 168px; + background: rgba(29, 175, 255, 1); + display: flex; + justify-content: center; + align-items: center; + border-radius: 4px; +} ::v-deep .LayerControlBox { z-index: 0; diff --git a/index.html b/index.html index f75d9c4..a94b4bf 100644 --- a/index.html +++ b/index.html @@ -249,7 +249,6 @@ } } - diff --git a/public/static/DH/videoPlayer.js b/public/static/DH/videoPlayer.js index 5f9af4c..54eb233 100644 --- a/public/static/DH/videoPlayer.js +++ b/public/static/DH/videoPlayer.js @@ -1382,7 +1382,7 @@ this.onbeforeunloadBind = this.onbeforeunload.myBind(this) this.visibilitychangeBind = this.setVisible.myBind(this) var that = this - this.setLanguage() // 设置语言 + this.setLanguage('zh')// 设置语言 this.destroy().then(() => { this.send( { diff --git a/src/assets/styles/WaterAssets.scss b/src/assets/styles/WaterAssets.scss index 8366383..db5e61d 100644 --- a/src/assets/styles/WaterAssets.scss +++ b/src/assets/styles/WaterAssets.scss @@ -243,7 +243,7 @@ .videoitem { display: flex; - height: 18%; + height: 80px; align-items: center; padding: 0 20px; background: url('@/assets/images/shuiwuzichan/video-bg.png') no-repeat; @@ -266,6 +266,9 @@ font-size: 14px; color: #ffffff; line-height: 32px; + overflow: hidden; + white-space: nowrap; /* 防止文字换行 */ + text-overflow: ellipsis; /* 超出部分显示省略号 */ } .value { @@ -275,7 +278,11 @@ } &.two_item { - margin-left: 80px; + margin-left: 50px; + } + + &.one_item { + width: 110px !important; } } diff --git a/src/components/Map/MapBox.vue b/src/components/Map/MapBox.vue index 3a6d7b1..55be958 100644 --- a/src/components/Map/MapBox.vue +++ b/src/components/Map/MapBox.vue @@ -345,6 +345,7 @@ )()); function areaToMap(properties) { + bus.emit('set_area_parent',{name:properties.p_name}); let isYS = properties.type == "YS"; clearRouteMethod(); districtMask(properties); @@ -737,6 +738,7 @@ let prevObj = null; const panelDataToMap = (obj) => { + debugger; let isUp = Object.keys(obj).includes("isUp") ? obj.isUp : true; //是否触发地图点击事件 默认触发 const { setLayerVisible, setHighlight } = events_params; // if (prevObj != null) busEmit(setLayerVisible.key, { layername: prevObj.type, isCheck: false }); @@ -744,10 +746,9 @@ // busEmit(setLayerVisible.key, { layername: obj.type, isCheck: true }); // debugger; let features = ["point", "linestring", "polygon", "hb_wh_dhgx_psfq_geometrys", "hb_wh_dhgx_merge",'ps_watch_area_geometrys'].map((key) => newfiberMap.map.getSource(key)._options.data.features.filter((i) => (i.properties.name || "").includes(obj.name) || (obj.id ? obj.id == i.properties.pid : false))).flat(); - let feature = obj.watchAreaName || obj.stName?features.filter((i) => i.properties.name == obj.name || i.properties.id == obj.id)[0]:features.filter((i) => i.properties.p_type)[0] || features.filter((i) => i.properties.name == obj.name && i.properties.id == obj.id)[0] || features[_.random(0, features.length - 1)]; - console.log("feature.properties.p_type&&isUp", feature.properties.p_type && isUp); - if (feature.properties.p_type && isUp) return mapClickEvt(undefined, feature.properties, "排水分区"); + let feature = obj.watchAreaName || obj.stName?features.filter((i) => i.properties.name == obj.name && i.properties.id == obj.id)[0]:features.filter((i) => i.properties.p_type)[0] || features.filter((i) => i.properties.name == obj.name && i.properties.id == obj.id)[0] || features[_.random(0, features.length - 1)]; if (!feature) return; + if (feature.properties.p_type && isUp) return mapClickEvt(undefined, feature.properties, "排水分区"); busEmit(setHighlight.key, [feature]); mapCenterByData(turf.bbox(feature)); }; diff --git a/src/components/videoDHone/index.vue b/src/components/videoDHone/index.vue index a48e4fe..7d4d823 100644 --- a/src/components/videoDHone/index.vue +++ b/src/components/videoDHone/index.vue @@ -10,11 +10,17 @@ const { proxy } = getCurrentInstance(); const { dh_video_config } = proxy.useDict('dh_video_config'); +const emit = defineEmits(['ckNumber']) + const props = defineProps({ // 内网、公网 4个配置 channelId: { + type: Array, + default: () => [], + }, + layout: { type: String, - default: () => '', + default: () => '1', }, }); @@ -22,7 +28,7 @@ const AllData = reactive({ Getchajian: null, URL: null, - channelId: null, + channelId: [], myVideoPlayer: null, pluginLoginInfo: { // 传入 icc 平台的登录信息 @@ -46,7 +52,7 @@ val => { if (props.channelId) { console.log('初始化视频', props.channelId); - AllData.channelId = props.channelId.trim(); + AllData.channelId = props.channelId; if (AllData.Getchajian) { startReal(); } else { @@ -83,7 +89,7 @@ windowType: 0, // 播放器类型，必传， 0 - 实时预览，3 - 录像回放，7- 录像回放（支持倒放） usePluginLogin: true, // 采用登录 (请默认传true，插件内部自动拉流) pluginLoginInfo: AllData.pluginLoginInfo, - division: 1, // 默认展示的窗口数量， 必传 + division: props.layout, // 默认展示的窗口数量， 必传 draggable: false, // 窗口拖拽 【暂不支持】 showBar: true, // 底部操作栏， 选传，【true - 显示, false - 隐藏】 shieldClass: ['shield-class', 'select'], // 如果DOM元素被插件挡住了，把DOM元素的类名传入。 @@ -95,6 +101,7 @@ createSuccess: versionInfo => { // 该回调触发后，我们可以进行实时预览/录像回放等操作 // desc.value = '创建成功!!!' + versionInfo.message; + // debugger AllData.Getchajian = 1; startReal(); }, @@ -102,6 +109,7 @@ createError: err => { // 有错误码，可打印查看错误信息 // desc.value = '创建失败!!!' + JSON.stringify(err); + // debugger AllData.Getchajian = null; GetchajianUrl(); }, @@ -149,7 +157,9 @@ // 鼠标双击窗口回调 dbClickWindow: snum => {}, // 播放器窗口的数量回调 - changeDivision: division => {}, + changeDivision: division => { + emit('ckNumber',division) + }, // rtsp 流下载录像成功回调 downloadRecordSuccess: info => {}, // rtsp 流下载录像失败回调 @@ -176,19 +186,21 @@ // 实时预览 function startReal() { - console.log('开始实时预览', AllData.channelId); - AllData.myVideoPlayer.startReal([ - // 通道id规则说明： 1000131(设备编码) + $1$0$(拼接字符串(固定)) + 0(通道编码)
可在ICC平台设备管理页面查看到通道id - { - channelId: AllData.channelId, // 通道id 【必传】 + let array=[] + AllData.channelId.forEach((e,i)=>{ + let obj={ + channelId: e, // 通道id 【必传】 channelName: '通道名称', // 通道名称 (用于本地录像下载) - snum: 0, // 即将要播放的窗口序号，从0开始 【必传】 + snum: i, // 即将要播放的窗口序号，从0开始 【必传】 streamType: 1, // 1-主码流 2-辅码流 (可不传，默认主码流) deviceType: 5, // 设备类别 (插件对讲时，需要配置该参数，否则无法对讲) cameraType: '1', // 摄像头类型 (用于云台) capability: '00000000000000000000000000000001', // 能力集 (用于云台) - }, - ]); + } + array.push(obj) + }) + console.log('开始实时预览', AllData.channelId); + AllData.myVideoPlayer.startReal(array); } // 录像回放 diff --git a/src/views/pictureOnMap/LayerControl.vue b/src/views/pictureOnMap/LayerControl.vue index a476434..e1af227 100644 --- a/src/views/pictureOnMap/LayerControl.vue +++ b/src/views/pictureOnMap/LayerControl.vue @@ -4,7 +4,7 @@ class="layericon" @click="allData.showControlBox = !allData.showControlBox" > - +
返回
恢复默认
+
@@ -35,10 +36,11 @@ const appStore = useUserStore(); import { getImageUrl } from "@/utils/ruoyi"; -import { nextTick } from "vue"; +import { nextTick,computed } from "vue"; const { proxy } = getCurrentInstance(); const Show = ref(true); const selectList = ref([]); +const backObj = ref(null); const TXtYPE = ref(""); const dataSource = ref([ { @@ -235,6 +237,14 @@ showControlBox: false, //控制图层控制是否展示和隐藏 }); +function areaBack() { + backObj.value.name == '1'? (bus.emit("clearTemporaryData"),bus.emit(mapInitBusName),backObj.value = null) : bus.emit("panelDataToMap", backObj.value); +} + +const isShowBack = computed(()=>{ + return !proxy.$route.fullPath.includes('DrainageSystem') && backObj.value != null; +}) + // 这个方法会出现当前已勾选节点，或者半节点的状态 function check(data, node) { setLayerVisible([], selectList.value); @@ -316,10 +326,13 @@ Show.value = true; } }); + + bus.on("set_area_parent", (val) => backObj.value=val) }); onBeforeUnmount(() => { bus.off("YQ_head"); + bus.off("set_area_parent"); }); function reset() { @@ -439,6 +452,20 @@ background: url("@/assets/images/NewLayercontrol/layerIcon.png") no-repeat; background-size: 100% 100%; } +.layericon-back { + z-index: 0; + position: absolute; + cursor: pointer; + width: 35px; + height: 35px; + left: 487px; + top: 168px; + background: rgba(29, 175, 255, 1); + display: flex; + justify-content: center; + align-items: center; + border-radius: 4px; +} ::v-deep .LayerControlBox { z-index: 0; diff --git a/src/views/pictureOnMap/TopTab/index.vue b/src/views/pictureOnMap/TopTab/index.vue index da0d4ac..6f2babf 100644 --- a/src/views/pictureOnMap/TopTab/index.vue +++ b/src/views/pictureOnMap/TopTab/index.vue @@ -118,6 +118,7 @@ appStore.Set_TiXiType(""); newfiberMap.map.easeTo(newfiberMap.config_.params.init); bus.emit("clearTemporaryData"); + bus.emit('set_area_parent',null); if (item.link == "/WaterAssets") { lastActived.value = activeName.value; } diff --git a/index.html b/index.html index f75d9c4..a94b4bf 100644 --- a/index.html +++ b/index.html @@ -249,7 +249,6 @@ } } - diff --git a/public/static/DH/videoPlayer.js b/public/static/DH/videoPlayer.js index 5f9af4c..54eb233 100644 --- a/public/static/DH/videoPlayer.js +++ b/public/static/DH/videoPlayer.js @@ -1382,7 +1382,7 @@ this.onbeforeunloadBind = this.onbeforeunload.myBind(this) this.visibilitychangeBind = this.setVisible.myBind(this) var that = this - this.setLanguage() // 设置语言 + this.setLanguage('zh')// 设置语言 this.destroy().then(() => { this.send( { diff --git a/src/assets/styles/WaterAssets.scss b/src/assets/styles/WaterAssets.scss index 8366383..db5e61d 100644 --- a/src/assets/styles/WaterAssets.scss +++ b/src/assets/styles/WaterAssets.scss @@ -243,7 +243,7 @@ .videoitem { display: flex; - height: 18%; + height: 80px; align-items: center; padding: 0 20px; background: url('@/assets/images/shuiwuzichan/video-bg.png') no-repeat; @@ -266,6 +266,9 @@ font-size: 14px; color: #ffffff; line-height: 32px; + overflow: hidden; + white-space: nowrap; /* 防止文字换行 */ + text-overflow: ellipsis; /* 超出部分显示省略号 */ } .value { @@ -275,7 +278,11 @@ } &.two_item { - margin-left: 80px; + margin-left: 50px; + } + + &.one_item { + width: 110px !important; } } diff --git a/src/components/Map/MapBox.vue b/src/components/Map/MapBox.vue index 3a6d7b1..55be958 100644 --- a/src/components/Map/MapBox.vue +++ b/src/components/Map/MapBox.vue @@ -345,6 +345,7 @@ )()); function areaToMap(properties) { + bus.emit('set_area_parent',{name:properties.p_name}); let isYS = properties.type == "YS"; clearRouteMethod(); districtMask(properties); @@ -737,6 +738,7 @@ let prevObj = null; const panelDataToMap = (obj) => { + debugger; let isUp = Object.keys(obj).includes("isUp") ? obj.isUp : true; //是否触发地图点击事件 默认触发 const { setLayerVisible, setHighlight } = events_params; // if (prevObj != null) busEmit(setLayerVisible.key, { layername: prevObj.type, isCheck: false }); @@ -744,10 +746,9 @@ // busEmit(setLayerVisible.key, { layername: obj.type, isCheck: true }); // debugger; let features = ["point", "linestring", "polygon", "hb_wh_dhgx_psfq_geometrys", "hb_wh_dhgx_merge",'ps_watch_area_geometrys'].map((key) => newfiberMap.map.getSource(key)._options.data.features.filter((i) => (i.properties.name || "").includes(obj.name) || (obj.id ? obj.id == i.properties.pid : false))).flat(); - let feature = obj.watchAreaName || obj.stName?features.filter((i) => i.properties.name == obj.name || i.properties.id == obj.id)[0]:features.filter((i) => i.properties.p_type)[0] || features.filter((i) => i.properties.name == obj.name && i.properties.id == obj.id)[0] || features[_.random(0, features.length - 1)]; - console.log("feature.properties.p_type&&isUp", feature.properties.p_type && isUp); - if (feature.properties.p_type && isUp) return mapClickEvt(undefined, feature.properties, "排水分区"); + let feature = obj.watchAreaName || obj.stName?features.filter((i) => i.properties.name == obj.name && i.properties.id == obj.id)[0]:features.filter((i) => i.properties.p_type)[0] || features.filter((i) => i.properties.name == obj.name && i.properties.id == obj.id)[0] || features[_.random(0, features.length - 1)]; if (!feature) return; + if (feature.properties.p_type && isUp) return mapClickEvt(undefined, feature.properties, "排水分区"); busEmit(setHighlight.key, [feature]); mapCenterByData(turf.bbox(feature)); }; diff --git a/src/components/videoDHone/index.vue b/src/components/videoDHone/index.vue index a48e4fe..7d4d823 100644 --- a/src/components/videoDHone/index.vue +++ b/src/components/videoDHone/index.vue @@ -10,11 +10,17 @@ const { proxy } = getCurrentInstance(); const { dh_video_config } = proxy.useDict('dh_video_config'); +const emit = defineEmits(['ckNumber']) + const props = defineProps({ // 内网、公网 4个配置 channelId: { + type: Array, + default: () => [], + }, + layout: { type: String, - default: () => '', + default: () => '1', }, }); @@ -22,7 +28,7 @@ const AllData = reactive({ Getchajian: null, URL: null, - channelId: null, + channelId: [], myVideoPlayer: null, pluginLoginInfo: { // 传入 icc 平台的登录信息 @@ -46,7 +52,7 @@ val => { if (props.channelId) { console.log('初始化视频', props.channelId); - AllData.channelId = props.channelId.trim(); + AllData.channelId = props.channelId; if (AllData.Getchajian) { startReal(); } else { @@ -83,7 +89,7 @@ windowType: 0, // 播放器类型，必传， 0 - 实时预览，3 - 录像回放，7- 录像回放（支持倒放） usePluginLogin: true, // 采用登录 (请默认传true，插件内部自动拉流) pluginLoginInfo: AllData.pluginLoginInfo, - division: 1, // 默认展示的窗口数量， 必传 + division: props.layout, // 默认展示的窗口数量， 必传 draggable: false, // 窗口拖拽 【暂不支持】 showBar: true, // 底部操作栏， 选传，【true - 显示, false - 隐藏】 shieldClass: ['shield-class', 'select'], // 如果DOM元素被插件挡住了，把DOM元素的类名传入。 @@ -95,6 +101,7 @@ createSuccess: versionInfo => { // 该回调触发后，我们可以进行实时预览/录像回放等操作 // desc.value = '创建成功!!!' + versionInfo.message; + // debugger AllData.Getchajian = 1; startReal(); }, @@ -102,6 +109,7 @@ createError: err => { // 有错误码，可打印查看错误信息 // desc.value = '创建失败!!!' + JSON.stringify(err); + // debugger AllData.Getchajian = null; GetchajianUrl(); }, @@ -149,7 +157,9 @@ // 鼠标双击窗口回调 dbClickWindow: snum => {}, // 播放器窗口的数量回调 - changeDivision: division => {}, + changeDivision: division => { + emit('ckNumber',division) + }, // rtsp 流下载录像成功回调 downloadRecordSuccess: info => {}, // rtsp 流下载录像失败回调 @@ -176,19 +186,21 @@ // 实时预览 function startReal() { - console.log('开始实时预览', AllData.channelId); - AllData.myVideoPlayer.startReal([ - // 通道id规则说明： 1000131(设备编码) + $1$0$(拼接字符串(固定)) + 0(通道编码)
可在ICC平台设备管理页面查看到通道id - { - channelId: AllData.channelId, // 通道id 【必传】 + let array=[] + AllData.channelId.forEach((e,i)=>{ + let obj={ + channelId: e, // 通道id 【必传】 channelName: '通道名称', // 通道名称 (用于本地录像下载) - snum: 0, // 即将要播放的窗口序号，从0开始 【必传】 + snum: i, // 即将要播放的窗口序号，从0开始 【必传】 streamType: 1, // 1-主码流 2-辅码流 (可不传，默认主码流) deviceType: 5, // 设备类别 (插件对讲时，需要配置该参数，否则无法对讲) cameraType: '1', // 摄像头类型 (用于云台) capability: '00000000000000000000000000000001', // 能力集 (用于云台) - }, - ]); + } + array.push(obj) + }) + console.log('开始实时预览', AllData.channelId); + AllData.myVideoPlayer.startReal(array); } // 录像回放 diff --git a/src/views/pictureOnMap/LayerControl.vue b/src/views/pictureOnMap/LayerControl.vue index a476434..e1af227 100644 --- a/src/views/pictureOnMap/LayerControl.vue +++ b/src/views/pictureOnMap/LayerControl.vue @@ -4,7 +4,7 @@ class="layericon" @click="allData.showControlBox = !allData.showControlBox" > - +
返回
恢复默认
+
@@ -35,10 +36,11 @@ const appStore = useUserStore(); import { getImageUrl } from "@/utils/ruoyi"; -import { nextTick } from "vue"; +import { nextTick,computed } from "vue"; const { proxy } = getCurrentInstance(); const Show = ref(true); const selectList = ref([]); +const backObj = ref(null); const TXtYPE = ref(""); const dataSource = ref([ { @@ -235,6 +237,14 @@ showControlBox: false, //控制图层控制是否展示和隐藏 }); +function areaBack() { + backObj.value.name == '1'? (bus.emit("clearTemporaryData"),bus.emit(mapInitBusName),backObj.value = null) : bus.emit("panelDataToMap", backObj.value); +} + +const isShowBack = computed(()=>{ + return !proxy.$route.fullPath.includes('DrainageSystem') && backObj.value != null; +}) + // 这个方法会出现当前已勾选节点，或者半节点的状态 function check(data, node) { setLayerVisible([], selectList.value); @@ -316,10 +326,13 @@ Show.value = true; } }); + + bus.on("set_area_parent", (val) => backObj.value=val) }); onBeforeUnmount(() => { bus.off("YQ_head"); + bus.off("set_area_parent"); }); function reset() { @@ -439,6 +452,20 @@ background: url("@/assets/images/NewLayercontrol/layerIcon.png") no-repeat; background-size: 100% 100%; } +.layericon-back { + z-index: 0; + position: absolute; + cursor: pointer; + width: 35px; + height: 35px; + left: 487px; + top: 168px; + background: rgba(29, 175, 255, 1); + display: flex; + justify-content: center; + align-items: center; + border-radius: 4px; +} ::v-deep .LayerControlBox { z-index: 0; diff --git a/src/views/pictureOnMap/TopTab/index.vue b/src/views/pictureOnMap/TopTab/index.vue index da0d4ac..6f2babf 100644 --- a/src/views/pictureOnMap/TopTab/index.vue +++ b/src/views/pictureOnMap/TopTab/index.vue @@ -118,6 +118,7 @@ appStore.Set_TiXiType(""); newfiberMap.map.easeTo(newfiberMap.config_.params.init); bus.emit("clearTemporaryData"); + bus.emit('set_area_parent',null); if (item.link == "/WaterAssets") { lastActived.value = activeName.value; } diff --git a/src/views/pictureOnMap/index.vue b/src/views/pictureOnMap/index.vue index 1e93142..24e71ff 100644 --- a/src/views/pictureOnMap/index.vue +++ b/src/views/pictureOnMap/index.vue @@ -101,10 +101,8 @@ 'gateStation', //闸门 'pump_water_level', //泵站液位 'outlet_water_level_city', //排口流量 - "plcSewagePumpStation",//plc污水泵站 - "plcRainPumpStation",//plc雨水泵站 - - + 'plcSewagePumpStation', //plc污水泵站 + 'plcRainPumpStation', //plc雨水泵站 ]); // 基本数据 const arrid = ref([ @@ -236,11 +234,11 @@ }, { name: 'dp_bzgq', //泵站工情 - value: "plcSewagePumpStation",//plc污水泵站 + value: 'plcSewagePumpStation', //plc污水泵站 }, { name: 'dp_bzgq', //泵站工情 - value: "plcRainPumpStation",//plc雨水泵站 + value: 'plcRainPumpStation', //plc雨水泵站 }, { diff --git a/index.html b/index.html index f75d9c4..a94b4bf 100644 --- a/index.html +++ b/index.html @@ -249,7 +249,6 @@ } } - diff --git a/public/static/DH/videoPlayer.js b/public/static/DH/videoPlayer.js index 5f9af4c..54eb233 100644 --- a/public/static/DH/videoPlayer.js +++ b/public/static/DH/videoPlayer.js @@ -1382,7 +1382,7 @@ this.onbeforeunloadBind = this.onbeforeunload.myBind(this) this.visibilitychangeBind = this.setVisible.myBind(this) var that = this - this.setLanguage() // 设置语言 + this.setLanguage('zh')// 设置语言 this.destroy().then(() => { this.send( { diff --git a/src/assets/styles/WaterAssets.scss b/src/assets/styles/WaterAssets.scss index 8366383..db5e61d 100644 --- a/src/assets/styles/WaterAssets.scss +++ b/src/assets/styles/WaterAssets.scss @@ -243,7 +243,7 @@ .videoitem { display: flex; - height: 18%; + height: 80px; align-items: center; padding: 0 20px; background: url('@/assets/images/shuiwuzichan/video-bg.png') no-repeat; @@ -266,6 +266,9 @@ font-size: 14px; color: #ffffff; line-height: 32px; + overflow: hidden; + white-space: nowrap; /* 防止文字换行 */ + text-overflow: ellipsis; /* 超出部分显示省略号 */ } .value { @@ -275,7 +278,11 @@ } &.two_item { - margin-left: 80px; + margin-left: 50px; + } + + &.one_item { + width: 110px !important; } } diff --git a/src/components/Map/MapBox.vue b/src/components/Map/MapBox.vue index 3a6d7b1..55be958 100644 --- a/src/components/Map/MapBox.vue +++ b/src/components/Map/MapBox.vue @@ -345,6 +345,7 @@ )()); function areaToMap(properties) { + bus.emit('set_area_parent',{name:properties.p_name}); let isYS = properties.type == "YS"; clearRouteMethod(); districtMask(properties); @@ -737,6 +738,7 @@ let prevObj = null; const panelDataToMap = (obj) => { + debugger; let isUp = Object.keys(obj).includes("isUp") ? obj.isUp : true; //是否触发地图点击事件 默认触发 const { setLayerVisible, setHighlight } = events_params; // if (prevObj != null) busEmit(setLayerVisible.key, { layername: prevObj.type, isCheck: false }); @@ -744,10 +746,9 @@ // busEmit(setLayerVisible.key, { layername: obj.type, isCheck: true }); // debugger; let features = ["point", "linestring", "polygon", "hb_wh_dhgx_psfq_geometrys", "hb_wh_dhgx_merge",'ps_watch_area_geometrys'].map((key) => newfiberMap.map.getSource(key)._options.data.features.filter((i) => (i.properties.name || "").includes(obj.name) || (obj.id ? obj.id == i.properties.pid : false))).flat(); - let feature = obj.watchAreaName || obj.stName?features.filter((i) => i.properties.name == obj.name || i.properties.id == obj.id)[0]:features.filter((i) => i.properties.p_type)[0] || features.filter((i) => i.properties.name == obj.name && i.properties.id == obj.id)[0] || features[_.random(0, features.length - 1)]; - console.log("feature.properties.p_type&&isUp", feature.properties.p_type && isUp); - if (feature.properties.p_type && isUp) return mapClickEvt(undefined, feature.properties, "排水分区"); + let feature = obj.watchAreaName || obj.stName?features.filter((i) => i.properties.name == obj.name && i.properties.id == obj.id)[0]:features.filter((i) => i.properties.p_type)[0] || features.filter((i) => i.properties.name == obj.name && i.properties.id == obj.id)[0] || features[_.random(0, features.length - 1)]; if (!feature) return; + if (feature.properties.p_type && isUp) return mapClickEvt(undefined, feature.properties, "排水分区"); busEmit(setHighlight.key, [feature]); mapCenterByData(turf.bbox(feature)); }; diff --git a/src/components/videoDHone/index.vue b/src/components/videoDHone/index.vue index a48e4fe..7d4d823 100644 --- a/src/components/videoDHone/index.vue +++ b/src/components/videoDHone/index.vue @@ -10,11 +10,17 @@ const { proxy } = getCurrentInstance(); const { dh_video_config } = proxy.useDict('dh_video_config'); +const emit = defineEmits(['ckNumber']) + const props = defineProps({ // 内网、公网 4个配置 channelId: { + type: Array, + default: () => [], + }, + layout: { type: String, - default: () => '', + default: () => '1', }, }); @@ -22,7 +28,7 @@ const AllData = reactive({ Getchajian: null, URL: null, - channelId: null, + channelId: [], myVideoPlayer: null, pluginLoginInfo: { // 传入 icc 平台的登录信息 @@ -46,7 +52,7 @@ val => { if (props.channelId) { console.log('初始化视频', props.channelId); - AllData.channelId = props.channelId.trim(); + AllData.channelId = props.channelId; if (AllData.Getchajian) { startReal(); } else { @@ -83,7 +89,7 @@ windowType: 0, // 播放器类型，必传， 0 - 实时预览，3 - 录像回放，7- 录像回放（支持倒放） usePluginLogin: true, // 采用登录 (请默认传true，插件内部自动拉流) pluginLoginInfo: AllData.pluginLoginInfo, - division: 1, // 默认展示的窗口数量， 必传 + division: props.layout, // 默认展示的窗口数量， 必传 draggable: false, // 窗口拖拽 【暂不支持】 showBar: true, // 底部操作栏， 选传，【true - 显示, false - 隐藏】 shieldClass: ['shield-class', 'select'], // 如果DOM元素被插件挡住了，把DOM元素的类名传入。 @@ -95,6 +101,7 @@ createSuccess: versionInfo => { // 该回调触发后，我们可以进行实时预览/录像回放等操作 // desc.value = '创建成功!!!' + versionInfo.message; + // debugger AllData.Getchajian = 1; startReal(); }, @@ -102,6 +109,7 @@ createError: err => { // 有错误码，可打印查看错误信息 // desc.value = '创建失败!!!' + JSON.stringify(err); + // debugger AllData.Getchajian = null; GetchajianUrl(); }, @@ -149,7 +157,9 @@ // 鼠标双击窗口回调 dbClickWindow: snum => {}, // 播放器窗口的数量回调 - changeDivision: division => {}, + changeDivision: division => { + emit('ckNumber',division) + }, // rtsp 流下载录像成功回调 downloadRecordSuccess: info => {}, // rtsp 流下载录像失败回调 @@ -176,19 +186,21 @@ // 实时预览 function startReal() { - console.log('开始实时预览', AllData.channelId); - AllData.myVideoPlayer.startReal([ - // 通道id规则说明： 1000131(设备编码) + $1$0$(拼接字符串(固定)) + 0(通道编码)
可在ICC平台设备管理页面查看到通道id - { - channelId: AllData.channelId, // 通道id 【必传】 + let array=[] + AllData.channelId.forEach((e,i)=>{ + let obj={ + channelId: e, // 通道id 【必传】 channelName: '通道名称', // 通道名称 (用于本地录像下载) - snum: 0, // 即将要播放的窗口序号，从0开始 【必传】 + snum: i, // 即将要播放的窗口序号，从0开始 【必传】 streamType: 1, // 1-主码流 2-辅码流 (可不传，默认主码流) deviceType: 5, // 设备类别 (插件对讲时，需要配置该参数，否则无法对讲) cameraType: '1', // 摄像头类型 (用于云台) capability: '00000000000000000000000000000001', // 能力集 (用于云台) - }, - ]); + } + array.push(obj) + }) + console.log('开始实时预览', AllData.channelId); + AllData.myVideoPlayer.startReal(array); } // 录像回放 diff --git a/src/views/pictureOnMap/LayerControl.vue b/src/views/pictureOnMap/LayerControl.vue index a476434..e1af227 100644 --- a/src/views/pictureOnMap/LayerControl.vue +++ b/src/views/pictureOnMap/LayerControl.vue @@ -4,7 +4,7 @@ class="layericon" @click="allData.showControlBox = !allData.showControlBox" > - +
返回
恢复默认
+
@@ -35,10 +36,11 @@ const appStore = useUserStore(); import { getImageUrl } from "@/utils/ruoyi"; -import { nextTick } from "vue"; +import { nextTick,computed } from "vue"; const { proxy } = getCurrentInstance(); const Show = ref(true); const selectList = ref([]); +const backObj = ref(null); const TXtYPE = ref(""); const dataSource = ref([ { @@ -235,6 +237,14 @@ showControlBox: false, //控制图层控制是否展示和隐藏 }); +function areaBack() { + backObj.value.name == '1'? (bus.emit("clearTemporaryData"),bus.emit(mapInitBusName),backObj.value = null) : bus.emit("panelDataToMap", backObj.value); +} + +const isShowBack = computed(()=>{ + return !proxy.$route.fullPath.includes('DrainageSystem') && backObj.value != null; +}) + // 这个方法会出现当前已勾选节点，或者半节点的状态 function check(data, node) { setLayerVisible([], selectList.value); @@ -316,10 +326,13 @@ Show.value = true; } }); + + bus.on("set_area_parent", (val) => backObj.value=val) }); onBeforeUnmount(() => { bus.off("YQ_head"); + bus.off("set_area_parent"); }); function reset() { @@ -439,6 +452,20 @@ background: url("@/assets/images/NewLayercontrol/layerIcon.png") no-repeat; background-size: 100% 100%; } +.layericon-back { + z-index: 0; + position: absolute; + cursor: pointer; + width: 35px; + height: 35px; + left: 487px; + top: 168px; + background: rgba(29, 175, 255, 1); + display: flex; + justify-content: center; + align-items: center; + border-radius: 4px; +} ::v-deep .LayerControlBox { z-index: 0; diff --git a/src/views/pictureOnMap/TopTab/index.vue b/src/views/pictureOnMap/TopTab/index.vue index da0d4ac..6f2babf 100644 --- a/src/views/pictureOnMap/TopTab/index.vue +++ b/src/views/pictureOnMap/TopTab/index.vue @@ -118,6 +118,7 @@ appStore.Set_TiXiType(""); newfiberMap.map.easeTo(newfiberMap.config_.params.init); bus.emit("clearTemporaryData"); + bus.emit('set_area_parent',null); if (item.link == "/WaterAssets") { lastActived.value = activeName.value; } diff --git a/src/views/pictureOnMap/index.vue b/src/views/pictureOnMap/index.vue index 1e93142..24e71ff 100644 --- a/src/views/pictureOnMap/index.vue +++ b/src/views/pictureOnMap/index.vue @@ -101,10 +101,8 @@ 'gateStation', //闸门 'pump_water_level', //泵站液位 'outlet_water_level_city', //排口流量 - "plcSewagePumpStation",//plc污水泵站 - "plcRainPumpStation",//plc雨水泵站 - - + 'plcSewagePumpStation', //plc污水泵站 + 'plcRainPumpStation', //plc雨水泵站 ]); // 基本数据 const arrid = ref([ @@ -236,11 +234,11 @@ }, { name: 'dp_bzgq', //泵站工情 - value: "plcSewagePumpStation",//plc污水泵站 + value: 'plcSewagePumpStation', //plc污水泵站 }, { name: 'dp_bzgq', //泵站工情 - value: "plcRainPumpStation",//plc雨水泵站 + value: 'plcRainPumpStation', //plc雨水泵站 }, { diff --git a/src/views/pictureOnMap/page/FloodControlAndDrainage/index.vue b/src/views/pictureOnMap/page/FloodControlAndDrainage/index.vue index 804d7d9..8f6c043 100644 --- a/src/views/pictureOnMap/page/FloodControlAndDrainage/index.vue +++ b/src/views/pictureOnMap/page/FloodControlAndDrainage/index.vue @@ -34,6 +34,7 @@ value: "Jianceyujin", keys: [ { key: "waterlogging", visible: true }, + { key: "雨水分区", visible: true }, { key: "lake_water_level", visible: false }, { key: "rainPumpStation", visible: false }, { key: "dirtyPumpStation", visible: false }, @@ -45,6 +46,7 @@ value: "Fuzhujuece", keys: [ { key: "雨水系统流向", visible: true }, + { key: "雨水分区", visible: true }, { key: "雨水系统流向1", visible: true }, { key: "waterlog_community", visible: false }, { key: "rain_water_pump_station_info", visible: true }, @@ -55,6 +57,7 @@ label: "排涝调度", value: "Pailaodiaodu", keys: [ + { key: "雨水分区", visible: true }, { key: "waterlogging", visible: false }, { key: "泵车离线", visible: true }, { key: "泵车在线", visible: true }, @@ -65,6 +68,7 @@ label: "排涝回顾", value: "Pailaohuigu", keys: [ + { key: "雨水分区", visible: true }, { key: "雨水系统流向", visible: true }, { key: "雨水系统流向1", visible: true }, { key: "waterlogging", visible: true }, @@ -83,6 +87,7 @@ }; const TabClick = (item) => { const { setLayerVisible } = events_params; + newfiberMap.map.easeTo(newfiberMap.config_.params.init); activeSublevel.value = item.value; closeAllLayer(); item.keys && @@ -101,7 +106,9 @@ bus.emit(setHighlight.key, []); }; onMounted(() => { - bus.on(mapInitBusName,()=> TabClick(tabArr.value.filter(i => i.value == activeSublevel.value)[0])); + const init = ()=> TabClick(tabArr.value.filter(i => i.value == activeSublevel.value)[0]); + init(); + bus.on(mapInitBusName,init); }); onBeforeUnmount(() => { closeAllLayer(); diff --git a/index.html b/index.html index f75d9c4..a94b4bf 100644 --- a/index.html +++ b/index.html @@ -249,7 +249,6 @@ } } - diff --git a/public/static/DH/videoPlayer.js b/public/static/DH/videoPlayer.js index 5f9af4c..54eb233 100644 --- a/public/static/DH/videoPlayer.js +++ b/public/static/DH/videoPlayer.js @@ -1382,7 +1382,7 @@ this.onbeforeunloadBind = this.onbeforeunload.myBind(this) this.visibilitychangeBind = this.setVisible.myBind(this) var that = this - this.setLanguage() // 设置语言 + this.setLanguage('zh')// 设置语言 this.destroy().then(() => { this.send( { diff --git a/src/assets/styles/WaterAssets.scss b/src/assets/styles/WaterAssets.scss index 8366383..db5e61d 100644 --- a/src/assets/styles/WaterAssets.scss +++ b/src/assets/styles/WaterAssets.scss @@ -243,7 +243,7 @@ .videoitem { display: flex; - height: 18%; + height: 80px; align-items: center; padding: 0 20px; background: url('@/assets/images/shuiwuzichan/video-bg.png') no-repeat; @@ -266,6 +266,9 @@ font-size: 14px; color: #ffffff; line-height: 32px; + overflow: hidden; + white-space: nowrap; /* 防止文字换行 */ + text-overflow: ellipsis; /* 超出部分显示省略号 */ } .value { @@ -275,7 +278,11 @@ } &.two_item { - margin-left: 80px; + margin-left: 50px; + } + + &.one_item { + width: 110px !important; } } diff --git a/src/components/Map/MapBox.vue b/src/components/Map/MapBox.vue index 3a6d7b1..55be958 100644 --- a/src/components/Map/MapBox.vue +++ b/src/components/Map/MapBox.vue @@ -345,6 +345,7 @@ )()); function areaToMap(properties) { + bus.emit('set_area_parent',{name:properties.p_name}); let isYS = properties.type == "YS"; clearRouteMethod(); districtMask(properties); @@ -737,6 +738,7 @@ let prevObj = null; const panelDataToMap = (obj) => { + debugger; let isUp = Object.keys(obj).includes("isUp") ? obj.isUp : true; //是否触发地图点击事件 默认触发 const { setLayerVisible, setHighlight } = events_params; // if (prevObj != null) busEmit(setLayerVisible.key, { layername: prevObj.type, isCheck: false }); @@ -744,10 +746,9 @@ // busEmit(setLayerVisible.key, { layername: obj.type, isCheck: true }); // debugger; let features = ["point", "linestring", "polygon", "hb_wh_dhgx_psfq_geometrys", "hb_wh_dhgx_merge",'ps_watch_area_geometrys'].map((key) => newfiberMap.map.getSource(key)._options.data.features.filter((i) => (i.properties.name || "").includes(obj.name) || (obj.id ? obj.id == i.properties.pid : false))).flat(); - let feature = obj.watchAreaName || obj.stName?features.filter((i) => i.properties.name == obj.name || i.properties.id == obj.id)[0]:features.filter((i) => i.properties.p_type)[0] || features.filter((i) => i.properties.name == obj.name && i.properties.id == obj.id)[0] || features[_.random(0, features.length - 1)]; - console.log("feature.properties.p_type&&isUp", feature.properties.p_type && isUp); - if (feature.properties.p_type && isUp) return mapClickEvt(undefined, feature.properties, "排水分区"); + let feature = obj.watchAreaName || obj.stName?features.filter((i) => i.properties.name == obj.name && i.properties.id == obj.id)[0]:features.filter((i) => i.properties.p_type)[0] || features.filter((i) => i.properties.name == obj.name && i.properties.id == obj.id)[0] || features[_.random(0, features.length - 1)]; if (!feature) return; + if (feature.properties.p_type && isUp) return mapClickEvt(undefined, feature.properties, "排水分区"); busEmit(setHighlight.key, [feature]); mapCenterByData(turf.bbox(feature)); }; diff --git a/src/components/videoDHone/index.vue b/src/components/videoDHone/index.vue index a48e4fe..7d4d823 100644 --- a/src/components/videoDHone/index.vue +++ b/src/components/videoDHone/index.vue @@ -10,11 +10,17 @@ const { proxy } = getCurrentInstance(); const { dh_video_config } = proxy.useDict('dh_video_config'); +const emit = defineEmits(['ckNumber']) + const props = defineProps({ // 内网、公网 4个配置 channelId: { + type: Array, + default: () => [], + }, + layout: { type: String, - default: () => '', + default: () => '1', }, }); @@ -22,7 +28,7 @@ const AllData = reactive({ Getchajian: null, URL: null, - channelId: null, + channelId: [], myVideoPlayer: null, pluginLoginInfo: { // 传入 icc 平台的登录信息 @@ -46,7 +52,7 @@ val => { if (props.channelId) { console.log('初始化视频', props.channelId); - AllData.channelId = props.channelId.trim(); + AllData.channelId = props.channelId; if (AllData.Getchajian) { startReal(); } else { @@ -83,7 +89,7 @@ windowType: 0, // 播放器类型，必传， 0 - 实时预览，3 - 录像回放，7- 录像回放（支持倒放） usePluginLogin: true, // 采用登录 (请默认传true，插件内部自动拉流) pluginLoginInfo: AllData.pluginLoginInfo, - division: 1, // 默认展示的窗口数量， 必传 + division: props.layout, // 默认展示的窗口数量， 必传 draggable: false, // 窗口拖拽 【暂不支持】 showBar: true, // 底部操作栏， 选传，【true - 显示, false - 隐藏】 shieldClass: ['shield-class', 'select'], // 如果DOM元素被插件挡住了，把DOM元素的类名传入。 @@ -95,6 +101,7 @@ createSuccess: versionInfo => { // 该回调触发后，我们可以进行实时预览/录像回放等操作 // desc.value = '创建成功!!!' + versionInfo.message; + // debugger AllData.Getchajian = 1; startReal(); }, @@ -102,6 +109,7 @@ createError: err => { // 有错误码，可打印查看错误信息 // desc.value = '创建失败!!!' + JSON.stringify(err); + // debugger AllData.Getchajian = null; GetchajianUrl(); }, @@ -149,7 +157,9 @@ // 鼠标双击窗口回调 dbClickWindow: snum => {}, // 播放器窗口的数量回调 - changeDivision: division => {}, + changeDivision: division => { + emit('ckNumber',division) + }, // rtsp 流下载录像成功回调 downloadRecordSuccess: info => {}, // rtsp 流下载录像失败回调 @@ -176,19 +186,21 @@ // 实时预览 function startReal() { - console.log('开始实时预览', AllData.channelId); - AllData.myVideoPlayer.startReal([ - // 通道id规则说明： 1000131(设备编码) + $1$0$(拼接字符串(固定)) + 0(通道编码)
可在ICC平台设备管理页面查看到通道id - { - channelId: AllData.channelId, // 通道id 【必传】 + let array=[] + AllData.channelId.forEach((e,i)=>{ + let obj={ + channelId: e, // 通道id 【必传】 channelName: '通道名称', // 通道名称 (用于本地录像下载) - snum: 0, // 即将要播放的窗口序号，从0开始 【必传】 + snum: i, // 即将要播放的窗口序号，从0开始 【必传】 streamType: 1, // 1-主码流 2-辅码流 (可不传，默认主码流) deviceType: 5, // 设备类别 (插件对讲时，需要配置该参数，否则无法对讲) cameraType: '1', // 摄像头类型 (用于云台) capability: '00000000000000000000000000000001', // 能力集 (用于云台) - }, - ]); + } + array.push(obj) + }) + console.log('开始实时预览', AllData.channelId); + AllData.myVideoPlayer.startReal(array); } // 录像回放 diff --git a/src/views/pictureOnMap/LayerControl.vue b/src/views/pictureOnMap/LayerControl.vue index a476434..e1af227 100644 --- a/src/views/pictureOnMap/LayerControl.vue +++ b/src/views/pictureOnMap/LayerControl.vue @@ -4,7 +4,7 @@ class="layericon" @click="allData.showControlBox = !allData.showControlBox" > - +
返回
恢复默认
+
@@ -35,10 +36,11 @@ const appStore = useUserStore(); import { getImageUrl } from "@/utils/ruoyi"; -import { nextTick } from "vue"; +import { nextTick,computed } from "vue"; const { proxy } = getCurrentInstance(); const Show = ref(true); const selectList = ref([]); +const backObj = ref(null); const TXtYPE = ref(""); const dataSource = ref([ { @@ -235,6 +237,14 @@ showControlBox: false, //控制图层控制是否展示和隐藏 }); +function areaBack() { + backObj.value.name == '1'? (bus.emit("clearTemporaryData"),bus.emit(mapInitBusName),backObj.value = null) : bus.emit("panelDataToMap", backObj.value); +} + +const isShowBack = computed(()=>{ + return !proxy.$route.fullPath.includes('DrainageSystem') && backObj.value != null; +}) + // 这个方法会出现当前已勾选节点，或者半节点的状态 function check(data, node) { setLayerVisible([], selectList.value); @@ -316,10 +326,13 @@ Show.value = true; } }); + + bus.on("set_area_parent", (val) => backObj.value=val) }); onBeforeUnmount(() => { bus.off("YQ_head"); + bus.off("set_area_parent"); }); function reset() { @@ -439,6 +452,20 @@ background: url("@/assets/images/NewLayercontrol/layerIcon.png") no-repeat; background-size: 100% 100%; } +.layericon-back { + z-index: 0; + position: absolute; + cursor: pointer; + width: 35px; + height: 35px; + left: 487px; + top: 168px; + background: rgba(29, 175, 255, 1); + display: flex; + justify-content: center; + align-items: center; + border-radius: 4px; +} ::v-deep .LayerControlBox { z-index: 0; diff --git a/src/views/pictureOnMap/TopTab/index.vue b/src/views/pictureOnMap/TopTab/index.vue index da0d4ac..6f2babf 100644 --- a/src/views/pictureOnMap/TopTab/index.vue +++ b/src/views/pictureOnMap/TopTab/index.vue @@ -118,6 +118,7 @@ appStore.Set_TiXiType(""); newfiberMap.map.easeTo(newfiberMap.config_.params.init); bus.emit("clearTemporaryData"); + bus.emit('set_area_parent',null); if (item.link == "/WaterAssets") { lastActived.value = activeName.value; } diff --git a/src/views/pictureOnMap/index.vue b/src/views/pictureOnMap/index.vue index 1e93142..24e71ff 100644 --- a/src/views/pictureOnMap/index.vue +++ b/src/views/pictureOnMap/index.vue @@ -101,10 +101,8 @@ 'gateStation', //闸门 'pump_water_level', //泵站液位 'outlet_water_level_city', //排口流量 - "plcSewagePumpStation",//plc污水泵站 - "plcRainPumpStation",//plc雨水泵站 - - + 'plcSewagePumpStation', //plc污水泵站 + 'plcRainPumpStation', //plc雨水泵站 ]); // 基本数据 const arrid = ref([ @@ -236,11 +234,11 @@ }, { name: 'dp_bzgq', //泵站工情 - value: "plcSewagePumpStation",//plc污水泵站 + value: 'plcSewagePumpStation', //plc污水泵站 }, { name: 'dp_bzgq', //泵站工情 - value: "plcRainPumpStation",//plc雨水泵站 + value: 'plcRainPumpStation', //plc雨水泵站 }, { diff --git a/src/views/pictureOnMap/page/FloodControlAndDrainage/index.vue b/src/views/pictureOnMap/page/FloodControlAndDrainage/index.vue index 804d7d9..8f6c043 100644 --- a/src/views/pictureOnMap/page/FloodControlAndDrainage/index.vue +++ b/src/views/pictureOnMap/page/FloodControlAndDrainage/index.vue @@ -34,6 +34,7 @@ value: "Jianceyujin", keys: [ { key: "waterlogging", visible: true }, + { key: "雨水分区", visible: true }, { key: "lake_water_level", visible: false }, { key: "rainPumpStation", visible: false }, { key: "dirtyPumpStation", visible: false }, @@ -45,6 +46,7 @@ value: "Fuzhujuece", keys: [ { key: "雨水系统流向", visible: true }, + { key: "雨水分区", visible: true }, { key: "雨水系统流向1", visible: true }, { key: "waterlog_community", visible: false }, { key: "rain_water_pump_station_info", visible: true }, @@ -55,6 +57,7 @@ label: "排涝调度", value: "Pailaodiaodu", keys: [ + { key: "雨水分区", visible: true }, { key: "waterlogging", visible: false }, { key: "泵车离线", visible: true }, { key: "泵车在线", visible: true }, @@ -65,6 +68,7 @@ label: "排涝回顾", value: "Pailaohuigu", keys: [ + { key: "雨水分区", visible: true }, { key: "雨水系统流向", visible: true }, { key: "雨水系统流向1", visible: true }, { key: "waterlogging", visible: true }, @@ -83,6 +87,7 @@ }; const TabClick = (item) => { const { setLayerVisible } = events_params; + newfiberMap.map.easeTo(newfiberMap.config_.params.init); activeSublevel.value = item.value; closeAllLayer(); item.keys && @@ -101,7 +106,9 @@ bus.emit(setHighlight.key, []); }; onMounted(() => { - bus.on(mapInitBusName,()=> TabClick(tabArr.value.filter(i => i.value == activeSublevel.value)[0])); + const init = ()=> TabClick(tabArr.value.filter(i => i.value == activeSublevel.value)[0]); + init(); + bus.on(mapInitBusName,init); }); onBeforeUnmount(() => { closeAllLayer(); diff --git a/src/views/pictureOnMap/page/WaterAssets/MonitoringAssetsRight/index.vue b/src/views/pictureOnMap/page/WaterAssets/MonitoringAssetsRight/index.vue index c0439e7..8c8f7cb 100644 --- a/src/views/pictureOnMap/page/WaterAssets/MonitoringAssetsRight/index.vue +++ b/src/views/pictureOnMap/page/WaterAssets/MonitoringAssetsRight/index.vue @@ -38,7 +38,7 @@
-
+
{{ p.name }}
{{ p.total }}
@@ -61,7 +61,7 @@ import neilaojishuidianEcharts from '@/views/pictureOnMap/page/WaterAssets/MonitoringAssetsRight/neilaojishuidianEcharts.vue'; import guanwangjianceEchart from '@/views/pictureOnMap/page/WaterAssets/MonitoringAssetsRight/guanwangjianceEchart.vue'; import { getWaterMonitorCount, getWaterLoggingCount, getPipeMonitorCount, getCameraCount } from '@/api/WaterAssets'; -import { replaceArrName,getImageUrl } from '@/utils/ruoyi'; +import { replaceArrName, getImageUrl } from '@/utils/ruoyi'; const chartInfo3 = ref({ refresh: 1, @@ -222,5 +222,7 @@ display: flex; flex-direction: column; justify-content: space-around; + overflow: hidden; + overflow-y: auto; } diff --git a/index.html b/index.html index f75d9c4..a94b4bf 100644 --- a/index.html +++ b/index.html @@ -249,7 +249,6 @@ } } - diff --git a/public/static/DH/videoPlayer.js b/public/static/DH/videoPlayer.js index 5f9af4c..54eb233 100644 --- a/public/static/DH/videoPlayer.js +++ b/public/static/DH/videoPlayer.js @@ -1382,7 +1382,7 @@ this.onbeforeunloadBind = this.onbeforeunload.myBind(this) this.visibilitychangeBind = this.setVisible.myBind(this) var that = this - this.setLanguage() // 设置语言 + this.setLanguage('zh')// 设置语言 this.destroy().then(() => { this.send( { diff --git a/src/assets/styles/WaterAssets.scss b/src/assets/styles/WaterAssets.scss index 8366383..db5e61d 100644 --- a/src/assets/styles/WaterAssets.scss +++ b/src/assets/styles/WaterAssets.scss @@ -243,7 +243,7 @@ .videoitem { display: flex; - height: 18%; + height: 80px; align-items: center; padding: 0 20px; background: url('@/assets/images/shuiwuzichan/video-bg.png') no-repeat; @@ -266,6 +266,9 @@ font-size: 14px; color: #ffffff; line-height: 32px; + overflow: hidden; + white-space: nowrap; /* 防止文字换行 */ + text-overflow: ellipsis; /* 超出部分显示省略号 */ } .value { @@ -275,7 +278,11 @@ } &.two_item { - margin-left: 80px; + margin-left: 50px; + } + + &.one_item { + width: 110px !important; } } diff --git a/src/components/Map/MapBox.vue b/src/components/Map/MapBox.vue index 3a6d7b1..55be958 100644 --- a/src/components/Map/MapBox.vue +++ b/src/components/Map/MapBox.vue @@ -345,6 +345,7 @@ )()); function areaToMap(properties) { + bus.emit('set_area_parent',{name:properties.p_name}); let isYS = properties.type == "YS"; clearRouteMethod(); districtMask(properties); @@ -737,6 +738,7 @@ let prevObj = null; const panelDataToMap = (obj) => { + debugger; let isUp = Object.keys(obj).includes("isUp") ? obj.isUp : true; //是否触发地图点击事件 默认触发 const { setLayerVisible, setHighlight } = events_params; // if (prevObj != null) busEmit(setLayerVisible.key, { layername: prevObj.type, isCheck: false }); @@ -744,10 +746,9 @@ // busEmit(setLayerVisible.key, { layername: obj.type, isCheck: true }); // debugger; let features = ["point", "linestring", "polygon", "hb_wh_dhgx_psfq_geometrys", "hb_wh_dhgx_merge",'ps_watch_area_geometrys'].map((key) => newfiberMap.map.getSource(key)._options.data.features.filter((i) => (i.properties.name || "").includes(obj.name) || (obj.id ? obj.id == i.properties.pid : false))).flat(); - let feature = obj.watchAreaName || obj.stName?features.filter((i) => i.properties.name == obj.name || i.properties.id == obj.id)[0]:features.filter((i) => i.properties.p_type)[0] || features.filter((i) => i.properties.name == obj.name && i.properties.id == obj.id)[0] || features[_.random(0, features.length - 1)]; - console.log("feature.properties.p_type&&isUp", feature.properties.p_type && isUp); - if (feature.properties.p_type && isUp) return mapClickEvt(undefined, feature.properties, "排水分区"); + let feature = obj.watchAreaName || obj.stName?features.filter((i) => i.properties.name == obj.name && i.properties.id == obj.id)[0]:features.filter((i) => i.properties.p_type)[0] || features.filter((i) => i.properties.name == obj.name && i.properties.id == obj.id)[0] || features[_.random(0, features.length - 1)]; if (!feature) return; + if (feature.properties.p_type && isUp) return mapClickEvt(undefined, feature.properties, "排水分区"); busEmit(setHighlight.key, [feature]); mapCenterByData(turf.bbox(feature)); }; diff --git a/src/components/videoDHone/index.vue b/src/components/videoDHone/index.vue index a48e4fe..7d4d823 100644 --- a/src/components/videoDHone/index.vue +++ b/src/components/videoDHone/index.vue @@ -10,11 +10,17 @@ const { proxy } = getCurrentInstance(); const { dh_video_config } = proxy.useDict('dh_video_config'); +const emit = defineEmits(['ckNumber']) + const props = defineProps({ // 内网、公网 4个配置 channelId: { + type: Array, + default: () => [], + }, + layout: { type: String, - default: () => '', + default: () => '1', }, }); @@ -22,7 +28,7 @@ const AllData = reactive({ Getchajian: null, URL: null, - channelId: null, + channelId: [], myVideoPlayer: null, pluginLoginInfo: { // 传入 icc 平台的登录信息 @@ -46,7 +52,7 @@ val => { if (props.channelId) { console.log('初始化视频', props.channelId); - AllData.channelId = props.channelId.trim(); + AllData.channelId = props.channelId; if (AllData.Getchajian) { startReal(); } else { @@ -83,7 +89,7 @@ windowType: 0, // 播放器类型，必传， 0 - 实时预览，3 - 录像回放，7- 录像回放（支持倒放） usePluginLogin: true, // 采用登录 (请默认传true，插件内部自动拉流) pluginLoginInfo: AllData.pluginLoginInfo, - division: 1, // 默认展示的窗口数量， 必传 + division: props.layout, // 默认展示的窗口数量， 必传 draggable: false, // 窗口拖拽 【暂不支持】 showBar: true, // 底部操作栏， 选传，【true - 显示, false - 隐藏】 shieldClass: ['shield-class', 'select'], // 如果DOM元素被插件挡住了，把DOM元素的类名传入。 @@ -95,6 +101,7 @@ createSuccess: versionInfo => { // 该回调触发后，我们可以进行实时预览/录像回放等操作 // desc.value = '创建成功!!!' + versionInfo.message; + // debugger AllData.Getchajian = 1; startReal(); }, @@ -102,6 +109,7 @@ createError: err => { // 有错误码，可打印查看错误信息 // desc.value = '创建失败!!!' + JSON.stringify(err); + // debugger AllData.Getchajian = null; GetchajianUrl(); }, @@ -149,7 +157,9 @@ // 鼠标双击窗口回调 dbClickWindow: snum => {}, // 播放器窗口的数量回调 - changeDivision: division => {}, + changeDivision: division => { + emit('ckNumber',division) + }, // rtsp 流下载录像成功回调 downloadRecordSuccess: info => {}, // rtsp 流下载录像失败回调 @@ -176,19 +186,21 @@ // 实时预览 function startReal() { - console.log('开始实时预览', AllData.channelId); - AllData.myVideoPlayer.startReal([ - // 通道id规则说明： 1000131(设备编码) + $1$0$(拼接字符串(固定)) + 0(通道编码)
可在ICC平台设备管理页面查看到通道id - { - channelId: AllData.channelId, // 通道id 【必传】 + let array=[] + AllData.channelId.forEach((e,i)=>{ + let obj={ + channelId: e, // 通道id 【必传】 channelName: '通道名称', // 通道名称 (用于本地录像下载) - snum: 0, // 即将要播放的窗口序号，从0开始 【必传】 + snum: i, // 即将要播放的窗口序号，从0开始 【必传】 streamType: 1, // 1-主码流 2-辅码流 (可不传，默认主码流) deviceType: 5, // 设备类别 (插件对讲时，需要配置该参数，否则无法对讲) cameraType: '1', // 摄像头类型 (用于云台) capability: '00000000000000000000000000000001', // 能力集 (用于云台) - }, - ]); + } + array.push(obj) + }) + console.log('开始实时预览', AllData.channelId); + AllData.myVideoPlayer.startReal(array); } // 录像回放 diff --git a/src/views/pictureOnMap/LayerControl.vue b/src/views/pictureOnMap/LayerControl.vue index a476434..e1af227 100644 --- a/src/views/pictureOnMap/LayerControl.vue +++ b/src/views/pictureOnMap/LayerControl.vue @@ -4,7 +4,7 @@ class="layericon" @click="allData.showControlBox = !allData.showControlBox" >
- +
返回
恢复默认
+
@@ -35,10 +36,11 @@ const appStore = useUserStore(); import { getImageUrl } from "@/utils/ruoyi"; -import { nextTick } from "vue"; +import { nextTick,computed } from "vue"; const { proxy } = getCurrentInstance(); const Show = ref(true); const selectList = ref([]); +const backObj = ref(null); const TXtYPE = ref(""); const dataSource = ref([ { @@ -235,6 +237,14 @@ showControlBox: false, //控制图层控制是否展示和隐藏 }); +function areaBack() { + backObj.value.name == '1'? (bus.emit("clearTemporaryData"),bus.emit(mapInitBusName),backObj.value = null) : bus.emit("panelDataToMap", backObj.value); +} + +const isShowBack = computed(()=>{ + return !proxy.$route.fullPath.includes('DrainageSystem') && backObj.value != null; +}) + // 这个方法会出现当前已勾选节点，或者半节点的状态 function check(data, node) { setLayerVisible([], selectList.value); @@ -316,10 +326,13 @@ Show.value = true; } }); + + bus.on("set_area_parent", (val) => backObj.value=val) }); onBeforeUnmount(() => { bus.off("YQ_head"); + bus.off("set_area_parent"); }); function reset() { @@ -439,6 +452,20 @@ background: url("@/assets/images/NewLayercontrol/layerIcon.png") no-repeat; background-size: 100% 100%; } +.layericon-back { + z-index: 0; + position: absolute; + cursor: pointer; + width: 35px; + height: 35px; + left: 487px; + top: 168px; + background: rgba(29, 175, 255, 1); + display: flex; + justify-content: center; + align-items: center; + border-radius: 4px; +} ::v-deep .LayerControlBox { z-index: 0; diff --git a/src/views/pictureOnMap/TopTab/index.vue b/src/views/pictureOnMap/TopTab/index.vue index da0d4ac..6f2babf 100644 --- a/src/views/pictureOnMap/TopTab/index.vue +++ b/src/views/pictureOnMap/TopTab/index.vue @@ -118,6 +118,7 @@ appStore.Set_TiXiType(""); newfiberMap.map.easeTo(newfiberMap.config_.params.init); bus.emit("clearTemporaryData"); + bus.emit('set_area_parent',null); if (item.link == "/WaterAssets") { lastActived.value = activeName.value; } diff --git a/src/views/pictureOnMap/index.vue b/src/views/pictureOnMap/index.vue index 1e93142..24e71ff 100644 --- a/src/views/pictureOnMap/index.vue +++ b/src/views/pictureOnMap/index.vue @@ -101,10 +101,8 @@ 'gateStation', //闸门 'pump_water_level', //泵站液位 'outlet_water_level_city', //排口流量 - "plcSewagePumpStation",//plc污水泵站 - "plcRainPumpStation",//plc雨水泵站 - - + 'plcSewagePumpStation', //plc污水泵站 + 'plcRainPumpStation', //plc雨水泵站 ]); // 基本数据 const arrid = ref([ @@ -236,11 +234,11 @@ }, { name: 'dp_bzgq', //泵站工情 - value: "plcSewagePumpStation",//plc污水泵站 + value: 'plcSewagePumpStation', //plc污水泵站 }, { name: 'dp_bzgq', //泵站工情 - value: "plcRainPumpStation",//plc雨水泵站 + value: 'plcRainPumpStation', //plc雨水泵站 }, { diff --git a/src/views/pictureOnMap/page/FloodControlAndDrainage/index.vue b/src/views/pictureOnMap/page/FloodControlAndDrainage/index.vue index 804d7d9..8f6c043 100644 --- a/src/views/pictureOnMap/page/FloodControlAndDrainage/index.vue +++ b/src/views/pictureOnMap/page/FloodControlAndDrainage/index.vue @@ -34,6 +34,7 @@ value: "Jianceyujin", keys: [ { key: "waterlogging", visible: true }, + { key: "雨水分区", visible: true }, { key: "lake_water_level", visible: false }, { key: "rainPumpStation", visible: false }, { key: "dirtyPumpStation", visible: false }, @@ -45,6 +46,7 @@ value: "Fuzhujuece", keys: [ { key: "雨水系统流向", visible: true }, + { key: "雨水分区", visible: true }, { key: "雨水系统流向1", visible: true }, { key: "waterlog_community", visible: false }, { key: "rain_water_pump_station_info", visible: true }, @@ -55,6 +57,7 @@ label: "排涝调度", value: "Pailaodiaodu", keys: [ + { key: "雨水分区", visible: true }, { key: "waterlogging", visible: false }, { key: "泵车离线", visible: true }, { key: "泵车在线", visible: true }, @@ -65,6 +68,7 @@ label: "排涝回顾", value: "Pailaohuigu", keys: [ + { key: "雨水分区", visible: true }, { key: "雨水系统流向", visible: true }, { key: "雨水系统流向1", visible: true }, { key: "waterlogging", visible: true }, @@ -83,6 +87,7 @@ }; const TabClick = (item) => { const { setLayerVisible } = events_params; + newfiberMap.map.easeTo(newfiberMap.config_.params.init); activeSublevel.value = item.value; closeAllLayer(); item.keys && @@ -101,7 +106,9 @@ bus.emit(setHighlight.key, []); }; onMounted(() => { - bus.on(mapInitBusName,()=> TabClick(tabArr.value.filter(i => i.value == activeSublevel.value)[0])); + const init = ()=> TabClick(tabArr.value.filter(i => i.value == activeSublevel.value)[0]); + init(); + bus.on(mapInitBusName,init); }); onBeforeUnmount(() => { closeAllLayer(); diff --git a/src/views/pictureOnMap/page/WaterAssets/MonitoringAssetsRight/index.vue b/src/views/pictureOnMap/page/WaterAssets/MonitoringAssetsRight/index.vue index c0439e7..8c8f7cb 100644 --- a/src/views/pictureOnMap/page/WaterAssets/MonitoringAssetsRight/index.vue +++ b/src/views/pictureOnMap/page/WaterAssets/MonitoringAssetsRight/index.vue @@ -38,7 +38,7 @@
-
+
{{ p.name }}
{{ p.total }}
@@ -61,7 +61,7 @@ import neilaojishuidianEcharts from '@/views/pictureOnMap/page/WaterAssets/MonitoringAssetsRight/neilaojishuidianEcharts.vue'; import guanwangjianceEchart from '@/views/pictureOnMap/page/WaterAssets/MonitoringAssetsRight/guanwangjianceEchart.vue'; import { getWaterMonitorCount, getWaterLoggingCount, getPipeMonitorCount, getCameraCount } from '@/api/WaterAssets'; -import { replaceArrName,getImageUrl } from '@/utils/ruoyi'; +import { replaceArrName, getImageUrl } from '@/utils/ruoyi'; const chartInfo3 = ref({ refresh: 1, @@ -222,5 +222,7 @@ display: flex; flex-direction: column; justify-content: space-around; + overflow: hidden; + overflow-y: auto; } diff --git a/src/views/pictureOnMap/page/components/DialogTabs/component/ShiPingJianKong.vue b/src/views/pictureOnMap/page/components/DialogTabs/component/ShiPingJianKong.vue index 567acf1..718cfc2 100644 --- a/src/views/pictureOnMap/page/components/DialogTabs/component/ShiPingJianKong.vue +++ b/src/views/pictureOnMap/page/components/DialogTabs/component/ShiPingJianKong.vue @@ -29,7 +29,7 @@ @@ -65,7 +65,7 @@
-->
- +
@@ -116,12 +116,8 @@ }, cameraStatus:'全部', - cameraIndexCode: '', - layout: '1x1', - defaultList: [ - // { cameraIndexCode: "f8b48c890c054ac190c124bb190a7007", wndId: 7 }, - // { cameraIndexCode: "09aa2a2694744cb8b188442b0b2af9b7", wndId: 6 }, - ], + cameraIndexCode: [], + layout: '1', }); const { serchParms,cameraStatus,tabsArray} = toRefs(AllData) @@ -129,6 +125,10 @@ const accessType=[ { + label:'全部', + value:null, + }, + { label:'自建', value:'owner', }, @@ -142,7 +142,7 @@ const leftList = ref([]); const cameraList = ref([]); const state = ref([]); -const tableActive = ref(''); +const tableActive = ref([]); function getOneLevel(){ groupList({cameraUserId:serchParms.value.cameraUserId}).then(res=>{ @@ -153,9 +153,9 @@ } // 左侧点击 -function leftclick(item) { - AllData.cameraIndexCode = item.cameraId; -} +// function leftclick(item) { +// AllData.cameraIndexCode = [item.cameraId]; +// } // 获取监控视频列表 function GetcameraList() { @@ -165,7 +165,8 @@ console.log('props.videoList', props.videoList); // 如果是单独视频站点的类型 就没有多个 不用查询 直接赋值点击地图获取到的stcode if (props.videoList.includes(props.dataCode)) { - AllData.cameraIndexCode = props.dataID; + AllData.cameraIndexCode = [props.dataID]; + tableActive.value=[props.dataCode] return; } @@ -191,7 +192,8 @@ console.log('res', res); leftList.value = res.data; // leftclick(res.data[0]); - AllData.cameraIndexCode = res.data[0].cameraId; + AllData.cameraIndexCode = [res.data[0].cameraId]; + tableActive.value=[res.data[0].id] }); } function pageCamera(){ @@ -228,6 +230,15 @@ }) } +function ckNumber(num){ + AllData.layout=num + if(AllData.cameraIndexCode.length>num){ + AllData.cameraIndexCode=AllData.cameraIndexCode.slice(1,num) + tableActive.value=tableActive.value.slice(1,num) + } + // debugger +} + onMounted(() => { console.log('搞什么啊', props, props.dataId); getOneLevel() @@ -235,7 +246,13 @@ }); function tableSelect(row){ - AllData.cameraIndexCode=row.indexCode + if(AllData.cameraIndexCode.length == AllData.layout){ + AllData.cameraIndexCode=AllData.cameraIndexCode.slice(1,AllData.cameraIndexCode.length-1) + tableActive.value=tableActive.value.slice(1,tableActive.value.length-1) + } + AllData.cameraIndexCode.push(row.indexCode) + tableActive.value.push(row.id) + // debugger } onBeforeUnmount(() => { diff --git a/index.html b/index.html index f75d9c4..a94b4bf 100644 --- a/index.html +++ b/index.html @@ -249,7 +249,6 @@ } } - diff --git a/public/static/DH/videoPlayer.js b/public/static/DH/videoPlayer.js index 5f9af4c..54eb233 100644 --- a/public/static/DH/videoPlayer.js +++ b/public/static/DH/videoPlayer.js @@ -1382,7 +1382,7 @@ this.onbeforeunloadBind = this.onbeforeunload.myBind(this) this.visibilitychangeBind = this.setVisible.myBind(this) var that = this - this.setLanguage() // 设置语言 + this.setLanguage('zh')// 设置语言 this.destroy().then(() => { this.send( { diff --git a/src/assets/styles/WaterAssets.scss b/src/assets/styles/WaterAssets.scss index 8366383..db5e61d 100644 --- a/src/assets/styles/WaterAssets.scss +++ b/src/assets/styles/WaterAssets.scss @@ -243,7 +243,7 @@ .videoitem { display: flex; - height: 18%; + height: 80px; align-items: center; padding: 0 20px; background: url('@/assets/images/shuiwuzichan/video-bg.png') no-repeat; @@ -266,6 +266,9 @@ font-size: 14px; color: #ffffff; line-height: 32px; + overflow: hidden; + white-space: nowrap; /* 防止文字换行 */ + text-overflow: ellipsis; /* 超出部分显示省略号 */ } .value { @@ -275,7 +278,11 @@ } &.two_item { - margin-left: 80px; + margin-left: 50px; + } + + &.one_item { + width: 110px !important; } } diff --git a/src/components/Map/MapBox.vue b/src/components/Map/MapBox.vue index 3a6d7b1..55be958 100644 --- a/src/components/Map/MapBox.vue +++ b/src/components/Map/MapBox.vue @@ -345,6 +345,7 @@ )()); function areaToMap(properties) { + bus.emit('set_area_parent',{name:properties.p_name}); let isYS = properties.type == "YS"; clearRouteMethod(); districtMask(properties); @@ -737,6 +738,7 @@ let prevObj = null; const panelDataToMap = (obj) => { + debugger; let isUp = Object.keys(obj).includes("isUp") ? obj.isUp : true; //是否触发地图点击事件 默认触发 const { setLayerVisible, setHighlight } = events_params; // if (prevObj != null) busEmit(setLayerVisible.key, { layername: prevObj.type, isCheck: false }); @@ -744,10 +746,9 @@ // busEmit(setLayerVisible.key, { layername: obj.type, isCheck: true }); // debugger; let features = ["point", "linestring", "polygon", "hb_wh_dhgx_psfq_geometrys", "hb_wh_dhgx_merge",'ps_watch_area_geometrys'].map((key) => newfiberMap.map.getSource(key)._options.data.features.filter((i) => (i.properties.name || "").includes(obj.name) || (obj.id ? obj.id == i.properties.pid : false))).flat(); - let feature = obj.watchAreaName || obj.stName?features.filter((i) => i.properties.name == obj.name || i.properties.id == obj.id)[0]:features.filter((i) => i.properties.p_type)[0] || features.filter((i) => i.properties.name == obj.name && i.properties.id == obj.id)[0] || features[_.random(0, features.length - 1)]; - console.log("feature.properties.p_type&&isUp", feature.properties.p_type && isUp); - if (feature.properties.p_type && isUp) return mapClickEvt(undefined, feature.properties, "排水分区"); + let feature = obj.watchAreaName || obj.stName?features.filter((i) => i.properties.name == obj.name && i.properties.id == obj.id)[0]:features.filter((i) => i.properties.p_type)[0] || features.filter((i) => i.properties.name == obj.name && i.properties.id == obj.id)[0] || features[_.random(0, features.length - 1)]; if (!feature) return; + if (feature.properties.p_type && isUp) return mapClickEvt(undefined, feature.properties, "排水分区"); busEmit(setHighlight.key, [feature]); mapCenterByData(turf.bbox(feature)); }; diff --git a/src/components/videoDHone/index.vue b/src/components/videoDHone/index.vue index a48e4fe..7d4d823 100644 --- a/src/components/videoDHone/index.vue +++ b/src/components/videoDHone/index.vue @@ -10,11 +10,17 @@ const { proxy } = getCurrentInstance(); const { dh_video_config } = proxy.useDict('dh_video_config'); +const emit = defineEmits(['ckNumber']) + const props = defineProps({ // 内网、公网 4个配置 channelId: { + type: Array, + default: () => [], + }, + layout: { type: String, - default: () => '', + default: () => '1', }, }); @@ -22,7 +28,7 @@ const AllData = reactive({ Getchajian: null, URL: null, - channelId: null, + channelId: [], myVideoPlayer: null, pluginLoginInfo: { // 传入 icc 平台的登录信息 @@ -46,7 +52,7 @@ val => { if (props.channelId) { console.log('初始化视频', props.channelId); - AllData.channelId = props.channelId.trim(); + AllData.channelId = props.channelId; if (AllData.Getchajian) { startReal(); } else { @@ -83,7 +89,7 @@ windowType: 0, // 播放器类型，必传， 0 - 实时预览，3 - 录像回放，7- 录像回放（支持倒放） usePluginLogin: true, // 采用登录 (请默认传true，插件内部自动拉流) pluginLoginInfo: AllData.pluginLoginInfo, - division: 1, // 默认展示的窗口数量， 必传 + division: props.layout, // 默认展示的窗口数量， 必传 draggable: false, // 窗口拖拽 【暂不支持】 showBar: true, // 底部操作栏， 选传，【true - 显示, false - 隐藏】 shieldClass: ['shield-class', 'select'], // 如果DOM元素被插件挡住了，把DOM元素的类名传入。 @@ -95,6 +101,7 @@ createSuccess: versionInfo => { // 该回调触发后，我们可以进行实时预览/录像回放等操作 // desc.value = '创建成功!!!' + versionInfo.message; + // debugger AllData.Getchajian = 1; startReal(); }, @@ -102,6 +109,7 @@ createError: err => { // 有错误码，可打印查看错误信息 // desc.value = '创建失败!!!' + JSON.stringify(err); + // debugger AllData.Getchajian = null; GetchajianUrl(); }, @@ -149,7 +157,9 @@ // 鼠标双击窗口回调 dbClickWindow: snum => {}, // 播放器窗口的数量回调 - changeDivision: division => {}, + changeDivision: division => { + emit('ckNumber',division) + }, // rtsp 流下载录像成功回调 downloadRecordSuccess: info => {}, // rtsp 流下载录像失败回调 @@ -176,19 +186,21 @@ // 实时预览 function startReal() { - console.log('开始实时预览', AllData.channelId); - AllData.myVideoPlayer.startReal([ - // 通道id规则说明： 1000131(设备编码) + $1$0$(拼接字符串(固定)) + 0(通道编码)
可在ICC平台设备管理页面查看到通道id - { - channelId: AllData.channelId, // 通道id 【必传】 + let array=[] + AllData.channelId.forEach((e,i)=>{ + let obj={ + channelId: e, // 通道id 【必传】 channelName: '通道名称', // 通道名称 (用于本地录像下载) - snum: 0, // 即将要播放的窗口序号，从0开始 【必传】 + snum: i, // 即将要播放的窗口序号，从0开始 【必传】 streamType: 1, // 1-主码流 2-辅码流 (可不传，默认主码流) deviceType: 5, // 设备类别 (插件对讲时，需要配置该参数，否则无法对讲) cameraType: '1', // 摄像头类型 (用于云台) capability: '00000000000000000000000000000001', // 能力集 (用于云台) - }, - ]); + } + array.push(obj) + }) + console.log('开始实时预览', AllData.channelId); + AllData.myVideoPlayer.startReal(array); } // 录像回放 diff --git a/src/views/pictureOnMap/LayerControl.vue b/src/views/pictureOnMap/LayerControl.vue index a476434..e1af227 100644 --- a/src/views/pictureOnMap/LayerControl.vue +++ b/src/views/pictureOnMap/LayerControl.vue @@ -4,7 +4,7 @@ class="layericon" @click="allData.showControlBox = !allData.showControlBox" >
- +
返回
恢复默认
+
@@ -35,10 +36,11 @@ const appStore = useUserStore(); import { getImageUrl } from "@/utils/ruoyi"; -import { nextTick } from "vue"; +import { nextTick,computed } from "vue"; const { proxy } = getCurrentInstance(); const Show = ref(true); const selectList = ref([]); +const backObj = ref(null); const TXtYPE = ref(""); const dataSource = ref([ { @@ -235,6 +237,14 @@ showControlBox: false, //控制图层控制是否展示和隐藏 }); +function areaBack() { + backObj.value.name == '1'? (bus.emit("clearTemporaryData"),bus.emit(mapInitBusName),backObj.value = null) : bus.emit("panelDataToMap", backObj.value); +} + +const isShowBack = computed(()=>{ + return !proxy.$route.fullPath.includes('DrainageSystem') && backObj.value != null; +}) + // 这个方法会出现当前已勾选节点，或者半节点的状态 function check(data, node) { setLayerVisible([], selectList.value); @@ -316,10 +326,13 @@ Show.value = true; } }); + + bus.on("set_area_parent", (val) => backObj.value=val) }); onBeforeUnmount(() => { bus.off("YQ_head"); + bus.off("set_area_parent"); }); function reset() { @@ -439,6 +452,20 @@ background: url("@/assets/images/NewLayercontrol/layerIcon.png") no-repeat; background-size: 100% 100%; } +.layericon-back { + z-index: 0; + position: absolute; + cursor: pointer; + width: 35px; + height: 35px; + left: 487px; + top: 168px; + background: rgba(29, 175, 255, 1); + display: flex; + justify-content: center; + align-items: center; + border-radius: 4px; +} ::v-deep .LayerControlBox { z-index: 0; diff --git a/src/views/pictureOnMap/TopTab/index.vue b/src/views/pictureOnMap/TopTab/index.vue index da0d4ac..6f2babf 100644 --- a/src/views/pictureOnMap/TopTab/index.vue +++ b/src/views/pictureOnMap/TopTab/index.vue @@ -118,6 +118,7 @@ appStore.Set_TiXiType(""); newfiberMap.map.easeTo(newfiberMap.config_.params.init); bus.emit("clearTemporaryData"); + bus.emit('set_area_parent',null); if (item.link == "/WaterAssets") { lastActived.value = activeName.value; } diff --git a/src/views/pictureOnMap/index.vue b/src/views/pictureOnMap/index.vue index 1e93142..24e71ff 100644 --- a/src/views/pictureOnMap/index.vue +++ b/src/views/pictureOnMap/index.vue @@ -101,10 +101,8 @@ 'gateStation', //闸门 'pump_water_level', //泵站液位 'outlet_water_level_city', //排口流量 - "plcSewagePumpStation",//plc污水泵站 - "plcRainPumpStation",//plc雨水泵站 - - + 'plcSewagePumpStation', //plc污水泵站 + 'plcRainPumpStation', //plc雨水泵站 ]); // 基本数据 const arrid = ref([ @@ -236,11 +234,11 @@ }, { name: 'dp_bzgq', //泵站工情 - value: "plcSewagePumpStation",//plc污水泵站 + value: 'plcSewagePumpStation', //plc污水泵站 }, { name: 'dp_bzgq', //泵站工情 - value: "plcRainPumpStation",//plc雨水泵站 + value: 'plcRainPumpStation', //plc雨水泵站 }, { diff --git a/src/views/pictureOnMap/page/FloodControlAndDrainage/index.vue b/src/views/pictureOnMap/page/FloodControlAndDrainage/index.vue index 804d7d9..8f6c043 100644 --- a/src/views/pictureOnMap/page/FloodControlAndDrainage/index.vue +++ b/src/views/pictureOnMap/page/FloodControlAndDrainage/index.vue @@ -34,6 +34,7 @@ value: "Jianceyujin", keys: [ { key: "waterlogging", visible: true }, + { key: "雨水分区", visible: true }, { key: "lake_water_level", visible: false }, { key: "rainPumpStation", visible: false }, { key: "dirtyPumpStation", visible: false }, @@ -45,6 +46,7 @@ value: "Fuzhujuece", keys: [ { key: "雨水系统流向", visible: true }, + { key: "雨水分区", visible: true }, { key: "雨水系统流向1", visible: true }, { key: "waterlog_community", visible: false }, { key: "rain_water_pump_station_info", visible: true }, @@ -55,6 +57,7 @@ label: "排涝调度", value: "Pailaodiaodu", keys: [ + { key: "雨水分区", visible: true }, { key: "waterlogging", visible: false }, { key: "泵车离线", visible: true }, { key: "泵车在线", visible: true }, @@ -65,6 +68,7 @@ label: "排涝回顾", value: "Pailaohuigu", keys: [ + { key: "雨水分区", visible: true }, { key: "雨水系统流向", visible: true }, { key: "雨水系统流向1", visible: true }, { key: "waterlogging", visible: true }, @@ -83,6 +87,7 @@ }; const TabClick = (item) => { const { setLayerVisible } = events_params; + newfiberMap.map.easeTo(newfiberMap.config_.params.init); activeSublevel.value = item.value; closeAllLayer(); item.keys && @@ -101,7 +106,9 @@ bus.emit(setHighlight.key, []); }; onMounted(() => { - bus.on(mapInitBusName,()=> TabClick(tabArr.value.filter(i => i.value == activeSublevel.value)[0])); + const init = ()=> TabClick(tabArr.value.filter(i => i.value == activeSublevel.value)[0]); + init(); + bus.on(mapInitBusName,init); }); onBeforeUnmount(() => { closeAllLayer(); diff --git a/src/views/pictureOnMap/page/WaterAssets/MonitoringAssetsRight/index.vue b/src/views/pictureOnMap/page/WaterAssets/MonitoringAssetsRight/index.vue index c0439e7..8c8f7cb 100644 --- a/src/views/pictureOnMap/page/WaterAssets/MonitoringAssetsRight/index.vue +++ b/src/views/pictureOnMap/page/WaterAssets/MonitoringAssetsRight/index.vue @@ -38,7 +38,7 @@
-
+
{{ p.name }}
{{ p.total }}
@@ -61,7 +61,7 @@ import neilaojishuidianEcharts from '@/views/pictureOnMap/page/WaterAssets/MonitoringAssetsRight/neilaojishuidianEcharts.vue'; import guanwangjianceEchart from '@/views/pictureOnMap/page/WaterAssets/MonitoringAssetsRight/guanwangjianceEchart.vue'; import { getWaterMonitorCount, getWaterLoggingCount, getPipeMonitorCount, getCameraCount } from '@/api/WaterAssets'; -import { replaceArrName,getImageUrl } from '@/utils/ruoyi'; +import { replaceArrName, getImageUrl } from '@/utils/ruoyi'; const chartInfo3 = ref({ refresh: 1, @@ -222,5 +222,7 @@ display: flex; flex-direction: column; justify-content: space-around; + overflow: hidden; + overflow-y: auto; } diff --git a/src/views/pictureOnMap/page/components/DialogTabs/component/ShiPingJianKong.vue b/src/views/pictureOnMap/page/components/DialogTabs/component/ShiPingJianKong.vue index 567acf1..718cfc2 100644 --- a/src/views/pictureOnMap/page/components/DialogTabs/component/ShiPingJianKong.vue +++ b/src/views/pictureOnMap/page/components/DialogTabs/component/ShiPingJianKong.vue @@ -29,7 +29,7 @@ @@ -65,7 +65,7 @@
-->
- +
@@ -116,12 +116,8 @@ }, cameraStatus:'全部', - cameraIndexCode: '', - layout: '1x1', - defaultList: [ - // { cameraIndexCode: "f8b48c890c054ac190c124bb190a7007", wndId: 7 }, - // { cameraIndexCode: "09aa2a2694744cb8b188442b0b2af9b7", wndId: 6 }, - ], + cameraIndexCode: [], + layout: '1', }); const { serchParms,cameraStatus,tabsArray} = toRefs(AllData) @@ -129,6 +125,10 @@ const accessType=[ { + label:'全部', + value:null, + }, + { label:'自建', value:'owner', }, @@ -142,7 +142,7 @@ const leftList = ref([]); const cameraList = ref([]); const state = ref([]); -const tableActive = ref(''); +const tableActive = ref([]); function getOneLevel(){ groupList({cameraUserId:serchParms.value.cameraUserId}).then(res=>{ @@ -153,9 +153,9 @@ } // 左侧点击 -function leftclick(item) { - AllData.cameraIndexCode = item.cameraId; -} +// function leftclick(item) { +// AllData.cameraIndexCode = [item.cameraId]; +// } // 获取监控视频列表 function GetcameraList() { @@ -165,7 +165,8 @@ console.log('props.videoList', props.videoList); // 如果是单独视频站点的类型 就没有多个 不用查询 直接赋值点击地图获取到的stcode if (props.videoList.includes(props.dataCode)) { - AllData.cameraIndexCode = props.dataID; + AllData.cameraIndexCode = [props.dataID]; + tableActive.value=[props.dataCode] return; } @@ -191,7 +192,8 @@ console.log('res', res); leftList.value = res.data; // leftclick(res.data[0]); - AllData.cameraIndexCode = res.data[0].cameraId; + AllData.cameraIndexCode = [res.data[0].cameraId]; + tableActive.value=[res.data[0].id] }); } function pageCamera(){ @@ -228,6 +230,15 @@ }) } +function ckNumber(num){ + AllData.layout=num + if(AllData.cameraIndexCode.length>num){ + AllData.cameraIndexCode=AllData.cameraIndexCode.slice(1,num) + tableActive.value=tableActive.value.slice(1,num) + } + // debugger +} + onMounted(() => { console.log('搞什么啊', props, props.dataId); getOneLevel() @@ -235,7 +246,13 @@ }); function tableSelect(row){ - AllData.cameraIndexCode=row.indexCode + if(AllData.cameraIndexCode.length == AllData.layout){ + AllData.cameraIndexCode=AllData.cameraIndexCode.slice(1,AllData.cameraIndexCode.length-1) + tableActive.value=tableActive.value.slice(1,tableActive.value.length-1) + } + AllData.cameraIndexCode.push(row.indexCode) + tableActive.value.push(row.id) + // debugger } onBeforeUnmount(() => { diff --git a/vite.config.js b/vite.config.js index 65ccb59..2190341 100644 --- a/vite.config.js +++ b/vite.config.js @@ -5,9 +5,9 @@ import autoprefixer from 'autoprefixer'; const Timestamp = new Date().getTime(); //随机时间戳 -let ipLink = 'https://server1.wh-nf.cn:8201/prod-api'; +// let ipLink = 'https://server1.wh-nf.cn:8201/prod-api'; // let ipLink = 'http://192.168.16.135:9100'; -// let ipLink = 'https://dhgx.wh-nf.cn:8201/prod-api'; +let ipLink = 'https://dhgx.wh-nf.cn:8201/prod-api'; // let ipLink = 'http://192.168.16.124:9100'; // let ipLink = 'http://192.168.20.43:9100'; // 刘总 // let ipLink = 'http://192.168.16.43:9100';