From 3473c294ca5a71eab7df46e22b7e9ddda5d9ce5a Mon Sep 17 00:00:00 2001 From: kun <1422840143@qq.com> Date: Thu, 30 Nov 2023 14:06:01 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20BUG=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/modules/mapCommon.ts | 20 +++ .../goverment/frontLargeScreen/index.vue | 96 +++++++++++- .../largeScreen/components/equipmentAdd.vue | 139 +++++++++++++++--- src/views/goverment/largeScreen/index.vue | 115 ++++++++++++--- 4 files changed, 322 insertions(+), 48 deletions(-) diff --git a/src/api/modules/mapCommon.ts b/src/api/modules/mapCommon.ts index c053d99..bda5f3d 100644 --- a/src/api/modules/mapCommon.ts +++ b/src/api/modules/mapCommon.ts @@ -152,3 +152,23 @@ export const equipmentStyleGet = (params: any) => { export const equipmentStyleEdit = (params: any) => { return http.post(BASEURL + `/base/deviceConfig/edit`, params); }; + +// 设备列表 +export const equipmentList = (params: any) => { + return http.post(BASEURL + `/base/monitorDev/list`, params); +}; + +// 设备新增 +export const equipmentAdd = (params: any) => { + return http.post(BASEURL + `/base/monitorDev/add`, params); +}; + +// 设备编辑 +export const equipmentEdit = (params: any) => { + return http.post(BASEURL + `/base/monitorDev/edit`, params); +}; + +// 设备删除 +export const equipmentDelete = (params: any) => { + return http.post(BASEURL + `/base/monitorDev/delete`, params); +}; diff --git a/src/views/goverment/frontLargeScreen/index.vue b/src/views/goverment/frontLargeScreen/index.vue index c9a8c3f..3422c51 100644 --- a/src/views/goverment/frontLargeScreen/index.vue +++ b/src/views/goverment/frontLargeScreen/index.vue @@ -298,8 +298,10 @@ import { diffuseWallList, polylineCombineList, gltfModelList, - updateSystemConfig + updateSystemConfig, + equipmentList } from "@/api/modules/mapCommon"; +import { getDicList } from "@/api/modules/jxjview"; const isViewStart = ref(true); interface FormState { isStart: boolean; @@ -502,7 +504,66 @@ onMounted(async () => { // await getConfig(); await getPlusConfig(); await loadModel(); + await getEquipTypeList(); }); +// 根据不同类型设置样式 +const getTypeStyle = (num: any, type: any) => { + let borderSty: any; + let borderLeftSty: any; + let bgSty: any; + if (type == 1) { + borderSty = "mars3d-camera-style1"; + borderLeftSty = "mars3d-borderLeft1"; + bgSty = "mars3d-bg1"; + } else if (type == 2) { + borderSty = "mars3d-camera-style2"; + borderLeftSty = "mars3d-borderLeft2"; + bgSty = "mars3d-bg2"; + } + if (num == 1) { + return borderSty; + } else if (num == 2) { + return borderLeftSty; + } else if (num == 3) { + return bgSty; + } +}; +// 获取设备类型下的设备列表 +const getEquipmentList = async (id: any) => { + const res = await equipmentList({ category: id }); + if (res.result && res.result.length > 0) { + let arr: any = res.result; + arr.map(item => { + const graphicImg = new mars3d.graphic.DivGraphic({ + id: item.monitorId, + position: [+item.lng, +item.lat, +item.alt], + style: { + html: `
+ ${item.name} +
+
+
+ `, + offsetX: -51, + offsetY: 4, + distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 100000) + } + }); + graphicLayer.addGraphic(graphicImg); + }); + } + console.log(res); +}; +// 获取配置的设备类型数据 +const getEquipTypeList = async () => { + const { result } = await getDicList({ dictType: "device_style" }); + console.log(result, "设备列表......."); + if (result.length > 0) { + result.map((item: any) => { + getEquipmentList(item.dictLabel); + }); + } +}; // 设置特定模型 const loadModel = async () => { const tiles3dLayer = new mars3d.layer.TilesetLayer({ @@ -2032,11 +2093,34 @@ onUnmounted(() => { .mars3d-camera-content { height: 30px; } + .mars3d-camera-style1 { + border: 3px solid #5b8fee; + } + .mars3d-camera-style2 { + border: 3px solid #ff6564; + } + .mars3d-borderLeft1 { + border-left: 3px dashed #5b8fee; + } + + .mars3d-borderLeft2 { + border-left: 3px dashed #ff6564; + } + .mars3d-bg1 { + background-color: #5b8fee; + } + .mars3d-bg2 { + background-color: #ff6564; + } .mars3d-camera-img { width: 30px; height: 30px; - animation: cameraMove 1s linear infinite alternate; - -webkit-animation: cameraMove 1s linear infinite alternate; + // animation: cameraMove 1s linear infinite alternate; + // -webkit-animation: cameraMove 1s linear infinite alternate; + } + .mars3d-camera-text { + color: white; + font-size: 20px; } @keyframes cameraMove { from { @@ -2057,8 +2141,8 @@ onUnmounted(() => { .mars3d-camera-line { height: 120px; width: 5px; - margin-top: 20px; - border-left: 3px dashed #5b8fee; + margin-top: 10px; + // border-left: 3px dashed #5b8fee; margin-left: calc(50% - 1px); } .mars3d-camera-point { @@ -2066,7 +2150,7 @@ onUnmounted(() => { width: 8px; height: 8px; margin-left: calc(50% - 3px); - background-color: #5b8fee; + // background-color: #5b8fee; } .animation-spaceInDown { animation-duration: 1s; diff --git a/src/views/goverment/largeScreen/components/equipmentAdd.vue b/src/views/goverment/largeScreen/components/equipmentAdd.vue index 28d9022..0c27942 100644 --- a/src/views/goverment/largeScreen/components/equipmentAdd.vue +++ b/src/views/goverment/largeScreen/components/equipmentAdd.vue @@ -5,8 +5,8 @@
-
基础配置
-
设备列表
+
基础配置
+
设备列表
- + @@ -311,7 +318,8 @@ import { diffuseWallList, polylineCombineList, gltfModelList, - updateSystemConfig + updateSystemConfig, + equipmentList } from "@/api/modules/mapCommon"; import { getDicList } from "@/api/modules/jxjview"; const equipTypeDictLabel = ref(); @@ -504,6 +512,54 @@ onMounted(async () => { await getConfig(); await getEquipTypeList(); }); +// 根据不同类型设置样式 +const getTypeStyle = (num: any, type: any) => { + let borderSty: any; + let borderLeftSty: any; + let bgSty: any; + if (type == 1) { + borderSty = "mars3d-camera-style1"; + borderLeftSty = "mars3d-borderLeft1"; + bgSty = "mars3d-bg1"; + } else if (type == 2) { + borderSty = "mars3d-camera-style2"; + borderLeftSty = "mars3d-borderLeft2"; + bgSty = "mars3d-bg2"; + } + if (num == 1) { + return borderSty; + } else if (num == 2) { + return borderLeftSty; + } else if (num == 3) { + return bgSty; + } +}; +// 获取设备类型下的设备列表 +const getEquipmentList = async (id: any) => { + const res = await equipmentList({ category: id }); + if (res.result && res.result.length > 0) { + let arr: any = res.result; + arr.map(item => { + const graphicImg = new mars3d.graphic.DivGraphic({ + id: item.monitorId, + position: [+item.lng, +item.lat, +item.alt], + style: { + html: `
+ ${item.name} +
+
+
+ `, + offsetX: -51, + offsetY: 4, + distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 100000) + } + }); + graphicLayer.addGraphic(graphicImg); + }); + } + console.log(res); +}; // 获取配置的设备类型数据 const getEquipTypeList = async () => { const { result } = await getDicList({ dictType: "device_style" }); @@ -511,6 +567,9 @@ const getEquipTypeList = async () => { if (result.length > 0) { equipTypeList.value.length = 0; equipTypeList.value.push(...result); + equipTypeList.value.map((item: any) => { + getEquipmentList(item.dictLabel); + }); } }; // 展示保存的地图标绘配置 @@ -830,7 +889,7 @@ const showWidget = (name: string) => { // 点击物联网设备菜单 const clickEquipMenu = async (obj: any) => { console.log(obj, "111222333"); - equipTypeDictLabel.value = obj.dictLabel + equipTypeDictLabel.value = obj.dictLabel; equipmentShow.value = true; equipListShow.value = false; }; @@ -1064,14 +1123,14 @@ const initMars3d = (option: any) => { map.on(mars3d.EventType.cameraChanged, cameraChanged); // 创建覆盖物数据图层 graphicLayer = new mars3d.layer.GraphicLayer(); - graphicLayer.bindPopup((event: any) => { - const attr = event.graphic.attr || {}; - if (!attr) { - return; - } - const dom = initVue3Popup(QueryPopup, attr); - return dom; - }); + // graphicLayer.bindPopup((event: any) => { + // const attr = event.graphic.attr || {}; + // if (!attr) { + // return; + // } + // const dom = initVue3Popup(QueryPopup, attr); + // return dom; + // }); map.addLayer(graphicLayer); // 获取配置文件底图数据 getBasicMaps(); @@ -2220,7 +2279,30 @@ onUnmounted(() => { // 视频监控点位样式 :deep() { .mars3d-camera-content { + width: 100px; height: 30px; + display: flex; + align-items: center; + justify-content: center; + } + .mars3d-camera-style1 { + border: 3px solid #5b8fee; + } + .mars3d-camera-style2 { + border: 3px solid #ff6564; + } + .mars3d-borderLeft1 { + border-left: 3px dashed #5b8fee; + } + + .mars3d-borderLeft2 { + border-left: 3px dashed #ff6564; + } + .mars3d-bg1 { + background-color: #5b8fee; + } + .mars3d-bg2 { + background-color: #ff6564; } .mars3d-camera-img { width: 30px; @@ -2229,11 +2311,8 @@ onUnmounted(() => { // -webkit-animation: cameraMove 1s linear infinite alternate; } .mars3d-camera-text { - display: inline-block; - width: 30px; - height: 30px; color: white; - font-size: 24px; + font-size: 20px; } @keyframes cameraMove { from { @@ -2254,8 +2333,8 @@ onUnmounted(() => { .mars3d-camera-line { height: 120px; width: 5px; - margin-top: 20px; - border-left: 3px dashed #5b8fee; + margin-top: 10px; + // border-left: 3px dashed #5b8fee; margin-left: calc(50% - 1px); } .mars3d-camera-point { @@ -2263,7 +2342,7 @@ onUnmounted(() => { width: 8px; height: 8px; margin-left: calc(50% - 3px); - background-color: #5b8fee; + // background-color: #5b8fee; } // .animation-spaceInDown { // animation-duration: 1s;