From e45757b8168b7f92c0f50e9cc008a7517febaba2 Mon Sep 17 00:00:00 2001 From: kun <1422840143@qq.com> Date: Wed, 6 Dec 2023 17:41:01 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E7=89=A9=E8=81=94=E7=BD=91=E8=AE=BE?= =?UTF-8?q?=E5=A4=87=E9=85=8D=E7=BD=AE=E5=8A=9F=E8=83=BD=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E4=BB=A5=E5=8F=8ABUG=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/testMap/index.vue | 43 ++-- .../goverment/frontLargeScreen/index.vue | 207 ++++++---------- .../largeScreen/components/equipmentAdd.vue | 226 ++++++++++++------ ...pmentAddTest.vue => equipmentAddTest1.vue} | 62 +---- src/views/goverment/largeScreen/index.vue | 187 +++++++-------- 5 files changed, 356 insertions(+), 369 deletions(-) rename src/views/goverment/largeScreen/components/{equipmentAddTest.vue => equipmentAddTest1.vue} (91%) diff --git a/src/components/testMap/index.vue b/src/components/testMap/index.vue index 42bd03d..3cd6bfd 100644 --- a/src/components/testMap/index.vue +++ b/src/components/testMap/index.vue @@ -329,7 +329,7 @@ const deleteSelected = (type: any, index: any) => { } }; // 处理构件着色的方法 -const handleCheckChange = (e: any, obj: AnyColumn) => { +const handleCheckChange = (e: any, obj: any) => { console.log(e); console.log(obj); if (selectedFormData.value.type == 1) { @@ -337,19 +337,30 @@ const handleCheckChange = (e: any, obj: AnyColumn) => { console.log(selectedHideList.value.length); } else { if (obj.checkedKeys.length > 0) { + let selectedIndex = -1; if (e.children) { e.children.map(item => { - if (obj.checkedKeys.includes(item.eleid)) { + selectedIndex = selectedColorList.value.findIndex(item2 => item2.name == item.eleid); + if (obj.checkedKeys.includes(item.eleid) && selectedIndex == -1) { selectedColorList.value.push({ name: item.eleid, color: selectedFormData.value.color }); + } else if (!obj.checkedKeys.includes(e.eleid) && selectedIndex != -1) { + selectedColorList.value.splice(selectedIndex, 1); } }); } else { - if (obj.checkedKeys.includes(e.eleid)) { + selectedIndex = selectedColorList.value.findIndex(item2 => item2.name == e.eleid); + console.log(selectedIndex); + if (obj.checkedKeys.includes(e.eleid) && selectedIndex == -1) { selectedColorList.value.push({ name: e.eleid, color: selectedFormData.value.color }); + } else if (!obj.checkedKeys.includes(e.eleid) && selectedIndex != -1) { + selectedColorList.value.splice(selectedIndex, 1); } } - // obj.checkedKeys.map(item => { - // selectedColorList.value.push({ name: e.eleid, color: selectedFormData.value.color }); + // selectedColorList.value = selectedColorList.value.filter((item: any, index: any, arr: any) => { + // let eleIndex = obj.checkedKeys.findIndex((item2: any) => { + // return item.name === item2; + // }); + // return eleIndex != -1; // }); } else { selectedColorList.value = []; @@ -410,7 +421,9 @@ const operateComponentStatus = () => { dataArr.unshift(["${id} ==='" + item + "'", "rgba(255, 255, 255,0)"]); }); selectedColorList.value.map(item => { - dataArr.unshift(["${id} ==='" + item.name + "'", `${item.color}`]); + if (item.color) { + dataArr.unshift(["${id} ==='" + item.name + "'", `${item.color}`]); + } }); tiles3dLayer.style = { color: { @@ -662,15 +675,15 @@ const getAlbugineaInfo = async () => { map.addLayer(tiles3dLayer); getAlbugineaTreeData(result.url); operateComponentStatus(); - if (selectedFormData.value.type == 1) { - modelComponentTree.value.setCheckedKeys(selectedHideList.value); - } else { - let checkArr: any = []; - selectedColorList.value.map(item => { - checkArr.push(item.name); - }); - modelComponentTree.value.setCheckedKeys(checkArr); - } + // if (selectedFormData.value.type == 1) { + // modelComponentTree.value.setCheckedKeys(selectedHideList.value); + // } else { + // let checkArr: any = []; + // selectedColorList.value.map(item => { + // checkArr.push(item.name); + // }); + // modelComponentTree.value.setCheckedKeys(checkArr); + // } // configJson.value.layers = [ // { // id: result.id, diff --git a/src/views/goverment/frontLargeScreen/index.vue b/src/views/goverment/frontLargeScreen/index.vue index d9c9797..0340923 100644 --- a/src/views/goverment/frontLargeScreen/index.vue +++ b/src/views/goverment/frontLargeScreen/index.vue @@ -276,8 +276,6 @@ import * as Cesium from "mars3d-cesium"; import "mars3d/dist/mars3d.css"; import * as mars3d from "mars3d"; import ConfigJson from "@/views/goverment/largeScreen/config.json"; -import BridgeControlJson from "./bridge.json"; -import BridgeJson from "./bridgeFace.json"; import layoutFrontTop from "@/components/layoutFrontTop/index.vue"; import { ElMessage } from "element-plus"; import { datas } from "@/enums/company/SetpsEnum"; @@ -307,7 +305,6 @@ import { import { getDicList } from "@/api/modules/jxjview"; import * as Vue from "vue"; import { loadModule } from "vue3-sfc-loader"; -const controlJson = ref([] as any); const modelLineList = ref([]); const isViewStart = ref(true); interface FormState { @@ -421,22 +418,6 @@ onMounted(async () => { // console.log(data); // initMars3d(data.map3d); // }); - controlJson.value = BridgeJson.bridge; - BridgeControlJson.control.map(item => { - if ( - item.name == "面层" || - item.name == "路床" || - item.name == "基层" || - item.name == "底基层" || - item.name == "盖梁" || - item.name == "桩基" || - item.name == "桩基系梁" - ) { - item.children.map(item2 => { - controlJson.value.push(item2.id); - }); - } - }); for (let i = 0; i < 6; i++) { const img = await getCanvas(i + 1); imgArr.push(img); @@ -526,34 +507,20 @@ onMounted(async () => { // await initTree(); // await getConfig(); await getPlusConfig(); - await loadModel(); await getEquipTypeList(); + // 查询配置的白膜 + const resAlbuginea: any = await albugineaMapList({}); + if (resAlbuginea.result && resAlbuginea.result.length > 0) { + resAlbuginea.result.map((item: any) => { + if (item.name == "桥梁") { + loadModel(item); + } + }); + } }); -// 根据不同类型设置样式 -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 popupStyle = async (id: any) => { - const res = await equipmentStyleGet({ category: id }); // 获取设备样式 +const pointStyle = async (id: any) => { + const res = await equipmentStyleGet({ category: id, type: 1 }); // 获取设备样式 if (!res.result) { return; } @@ -574,11 +541,37 @@ const popupStyle = async (id: any) => { }; const comp = defineAsyncComponent(() => loadModule("textPopup.vue", options)); console.log(comp, "返回的组件···········"); - return comp; + return { codeValue: comp, offsetX: res.result.offsetX, offsetY: res.result.offsetY }; +}; +// 设备类型下的设备绑定的弹窗样式 +const popupStyle = async (id: any) => { + const res = await equipmentStyleGet({ category: id, type: 1 }); // 获取设备样式 + if (!res.result) { + return; + } + const options = { + moduleCache: { + vue: Vue + }, + async getFile() { + return res.result.style; + }, + addStyle(textContent: any) { + const style = Object.assign(document.createElement("style"), { + textContent + }); + const ref = document.head.getElementsByTagName("style")[0] || null; + document.head.insertBefore(style, ref); + } + }; + const comp = defineAsyncComponent(() => loadModule("textPopup.vue", options)); + console.log(comp, "返回的组件···········"); + return { codeValue: comp, offsetX: res.result.offsetX, offsetY: res.result.offsetY }; }; // 获取设备类型下的设备列表 const getEquipmentList = async (id: any) => { const res = await equipmentList({ category: id }); + const resPointStyle = await pointStyle(id); const resStyle = await popupStyle(id); if (res.result && res.result.length > 0) { let arr: any = res.result; @@ -587,14 +580,12 @@ const getEquipmentList = async (id: any) => { id: item.monitorId, position: [+item.lng, +item.lat, +item.alt], style: { - html: `
- ${item.name} -
-
-
- `, - offsetX: -51, - offsetY: 4, + html: () => { + const dom = initVue3Popup(resPointStyle?.codeValue, { name: item.name }); + return dom; + }, + offsetX: +resPointStyle?.offsetX, + offsetY: +resPointStyle?.offsetY, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 100000) } }); @@ -605,12 +596,12 @@ const getEquipmentList = async (id: any) => { if (!attr) { return; } - const dom = initVue3Popup(resStyle, { name: "你好啊" }); + const dom = initVue3Popup(resStyle?.codeValue, { name: "你好啊" }); // return mars3d.Util.getTemplateHtml({ title: "矢量图层", template: dom, attr: attr }); console.log(dom); return dom; }, - { offsetY: -170, offsetX: 50 } + { offsetY: +resStyle?.offsetX, offsetX: +resStyle?.offsetY } ); }); } @@ -626,82 +617,33 @@ const getEquipTypeList = async () => { }); } }; -// 根据控件id隐藏控件 -const checkModelId = (boolean: any) => { - let ids = BridgeJson.bridge; - new Cesium.Cesium3DTileStyle({ - show: { - evaluate: function (feature: any) { - console.log(feature, "id集合-----------"); - let ishow = boolean; - ids.includes(feature._batchId) ? (ishow = ishow) : (ishow = !ishow); - return ishow; - } - } - }); -}; // 设置特定模型 -const loadModel = async () => { +const loadModel = async (obj: any) => { + console.log(obj); const tiles3dLayer = new mars3d.layer.TilesetLayer({ id: "bridge-model", - name: "桥梁", - url: "http://jxjzw.zhgdyun.com:6080/model/tileset.json", - position: { lat: 23.808356, lng: 106.858628, alt: -30 }, + name: obj.name, + url: obj.url, + position: { lat: +obj.lat, lng: +obj.lng, alt: +obj.alt }, maximumScreenSpaceError: 1, popup: "all" }); map.addLayer(tiles3dLayer); - // let ids = BridgeJson.bridge; - let ids = controlJson.value; - console.log(controlJson.value); - console.log(controlJson.value.length); - // tiles3dLayer.style = new Cesium.Cesium3DTileStyle({ - // ...tiles3dLayer.style, - // color: { - // evaluateColor: function (feature: any, result: any) { - // console.log(feature, result, "66666666666688888888888889999999999999"); - // // return Cesium.Color.clone(Cesium.Color.WHITE, result); - // } - // }, - // show: { - // evaluate: function (id: any) { - // console.log(id, "id集合-----------"); - // // let ishow = false; - // // ids.includes(feature._batchId) ? (ishow = ishow) : (ishow = !ishow); - // // console.log(ishow); - // return false; - // } - // } - // }); - // tiles3dLayer.style = { - // // color : ids.includes("${id}") ? "false" : "true" - // color: { - // conditions: [ - // ["${id} ==='c6c924912dcb486982ebdec467c98808'", "rgb(255, 255, 255)"], - // ["true", "rgba(255, 200, 200,0)"] - // ] - // } - // // show: ids.includes("${id}") - // // show: { - // // conditions: [ - // // [ids.includes("${id}"), "false"], - // // ["true", "true"] - // // ] - // // } - // // show: ids.includes("${id}") ? "false" : "true" - // // show: { - // // conditions: [ - // // ["${id} == 'c6c924912dcb486982ebdec467c98808'", "false"], - // // ["true", "true"] - // // ] - // // } - // }; setTimeout(function () { // tiles3dLayer.bindPopup("all"); let dataArr: any = []; - ids.map(item => { - dataArr.unshift(["${id} ==='" + item + "'", "rgba(255, 255, 255,0)"]); - }); + if (JSON.parse(obj.hiddenComponentId)) { + JSON.parse(obj.hiddenComponentId).map(item => { + dataArr.unshift(["${id} ==='" + item + "'", "rgba(255, 255, 255,0)"]); + }); + } + if (JSON.parse(obj.componentColorJson)) { + JSON.parse(obj.componentColorJson).map(item => { + if (item.color) { + dataArr.unshift(["${id} ==='" + item.name + "'", `${item.color}`]); + } + }); + } tiles3dLayer.style = { color: { conditions: dataArr @@ -714,18 +656,19 @@ const loadModel = async () => { }; const { result } = await getSystemConfig(requestData); console.log(result, "视点飞行6666666"); - console.log(JSON.parse(result.configValue), "视点飞行6666666"); - let responseArr = JSON.parse(result.configValue); - let viewPoints: any = []; - // 创建视点，duration参数调节每个步骤时长 - responseArr.map(item => { - viewPoints.unshift({ ...item.center, duration: 8, stop: 0 }); - }); + if (result) { + console.log(JSON.parse(result.configValue), "视点飞行6666666"); + let responseArr = JSON.parse(result.configValue); + let viewPoints: any = []; + // 创建视点，duration参数调节每个步骤时长 + responseArr.map(item => { + viewPoints.unshift({ ...item.center, duration: 8, stop: 0 }); + }); - // 视角切换（分步执行） - viewerChange(viewPoints); - flyOperateShow.value = true; - // checkModelId(false); + // 视角切换（分步执行） + viewerChange(viewPoints); + flyOperateShow.value = true; + } }; // 视点飞行视角切换 const viewerChange = (points: any) => { diff --git a/src/views/goverment/largeScreen/components/equipmentAdd.vue b/src/views/goverment/largeScreen/components/equipmentAdd.vue index c854bb4..80e0060 100644 --- a/src/views/goverment/largeScreen/components/equipmentAdd.vue +++ b/src/views/goverment/largeScreen/components/equipmentAdd.vue @@ -5,20 +5,54 @@
-
基础配置
-
设备列表
+
点位配置
+
弹窗配置
+
设备列表
- +
+ 竖向偏移量： + +
+
+
+ 点位样式： + +
+
+ 保存 +
+ +
+
+
+ 横向偏移量： + +
+
+ 竖向偏移量： + +
+
弹窗样式： -->
-
-
+
+ ([]); const baseUrl = import.meta.env.VITE_API_URL; const formData = ref({ - enable: false, - showType: 1 + enable: false }); const operateIndex = ref(0); -const code = ref(); +const pointConfig: any = ref({ + pointCode: "", + offsetX: 0, + offsetY: 0 +}); +const pointPreviewComp = shallowRef(); const previewComp = shallowRef(); const extensions = [vue(), oneDark]; import CodeMirror from "@/components/CodeMirror/index.vue"; @@ -127,8 +169,10 @@ let parentGraphicLayer = props.graphicInstance; const getRelativeData = (index: any) => { operateIndex.value = index; if (index == 0) { - getStyle(); + getPointStyle(); } else if (index == 1) { + getStyle(); + } else if (index == 2) { getEquipList(); } }; @@ -140,11 +184,31 @@ const getEquipList = async () => { } console.log(res); }; +// 保存点位样式 +const savePointStyle = async () => { + let requestData: any = { + style: pointConfig.value.pointCode, + offsetX: pointConfig.value.offsetX, + offsetY: pointConfig.value.offsetY, + category: props.equipTypeDictLabel, + type: 1 + }; + if (pointConfig.value.id) { + requestData.id = pointConfig.value.id; + } + const res = await equipmentStyleEdit(requestData); + if (res) { + ElMessage.success("保存成功"); + } +}; // 保存基础配置 const saveStyle = async () => { let requestData: any = { - style: code.value, - category: props.equipTypeDictLabel + style: basicConfig.value.popupCode, + offsetX: basicConfig.value.offsetX, + offsetY: basicConfig.value.offsetY, + category: props.equipTypeDictLabel, + type: 2 }; if (basicConfig.value.id) { requestData.id = basicConfig.value.id; @@ -154,12 +218,21 @@ const saveStyle = async () => { ElMessage.success("保存成功"); } }; +// 获取点位配置 +const getPointStyle = async () => { + const res = await equipmentStyleGet({ category: props.equipTypeDictLabel, type: 1 }); // 获取点位样式 + if (res.result) { + pointConfig.value = { ...res.result }; + pointConfig.value.pointCode = res.result.style; + onPointBlur(); + } +}; // 获取基础配置 const getStyle = async () => { - const res = await equipmentStyleGet({ category: props.equipTypeDictLabel }); // 获取设备样式 + const res = await equipmentStyleGet({ category: props.equipTypeDictLabel, type: 2 }); // 获取弹窗样式 if (res.result) { basicConfig.value = { ...res.result }; - code.value = res.result.style; + basicConfig.value.popupCode = res.result.style; onBlur(); } }; @@ -179,12 +252,16 @@ const saveEdit = async (row: any) => { } console.log(graphic, "父图像"); graphic.setStyle({ - html: `
- ${row.name} -
-
-
- ` + html: () => { + const dom = initVue3Popup(pointPreviewComp.value, { + name: row.name + }); + // return mars3d.Util.getTemplateHtml({ title: "矢量图层", template: dom, attr: attr }); + return dom; + }, + offsetX: +pointConfig.value.offsetX, + offsetY: +pointConfig.value.offsetY, + distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 100000) }); } row.isEdit = false; @@ -215,30 +292,20 @@ const newPoint = () => { } }); }; -// 根据不同类型获取图片 -const getTypeImage = () => { - let img: any; - if (formData.value.showType == 1) { - img = new URL("@/assets/images/Mars3DImg/icon/camera.svg", import.meta.url).href; - } else if (formData.value.showType == 2) { - img = new URL("@/assets/images/Mars3DImg/icon/fire.png", import.meta.url).href; - } - return img; -}; // 根据不同类型设置样式 const getTypeStyle = (num: any) => { let borderSty: any; let borderLeftSty: any; let bgSty: any; - if (formData.value.showType == 1) { - borderSty = "mars3d-camera-style1"; - borderLeftSty = "mars3d-borderLeft1"; - bgSty = "mars3d-bg1"; - } else if (formData.value.showType == 2) { - borderSty = "mars3d-camera-style2"; - borderLeftSty = "mars3d-borderLeft2"; - bgSty = "mars3d-bg2"; - } + // if (formData.value.showType == 1) { + // borderSty = "mars3d-camera-style1"; + // borderLeftSty = "mars3d-borderLeft1"; + // bgSty = "mars3d-bg1"; + // } else if (formData.value.showType == 2) { + // borderSty = "mars3d-camera-style2"; + // borderLeftSty = "mars3d-borderLeft2"; + // bgSty = "mars3d-bg2"; + // } if (num == 1) { return borderSty; } else if (num == 2) { @@ -252,14 +319,13 @@ const addRandomGraphicByCount = async (point: any) => { const graphicImg = new mars3d.graphic.DivGraphic({ position: [point.lng, point.lat, point.alt], style: { - html: `
- -
-
-
- `, - offsetX: -51, - offsetY: 4, + html: () => { + const dom = initVue3Popup(pointPreviewComp.value, { name: "你好啊" }); + // return mars3d.Util.getTemplateHtml({ title: "矢量图层", template: dom, attr: attr }); + return dom; + }, + offsetX: +pointConfig.value.offsetX, + offsetY: +pointConfig.value.offsetY, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 100000) } // popup: `${code.value}`, @@ -273,9 +339,6 @@ const addRandomGraphicByCount = async (point: any) => { // verticalOrigin: Cesium.VerticalOrigin.CENTER // } }); - // const comp = () => import("http://jxjzw.zhgdyun.com:9001/wisdomsitezw/655c756d12b3a489008940c9.vue"); - // console.log(comp); - // graphicImg.bindPopup("all"); graphicImg.bindPopup( (event: any) => { const attr = event.graphic.attr || {}; @@ -286,14 +349,13 @@ const addRandomGraphicByCount = async (point: any) => { // return mars3d.Util.getTemplateHtml({ title: "矢量图层", template: dom, attr: attr }); return dom; }, - { offsetY: -170, offsetX: 50 } + { offsetY: +basicConfig.value.offsetY, offsetX: +basicConfig.value.offsetX } ); graphicLayer.addGraphic(graphicImg); console.log(graphicImg); const obj = { monitorId: graphicImg.id, name: graphicImg.name, - type: formData.value.showType, lng: point.lng, lat: point.lat, alt: point.alt, @@ -303,7 +365,6 @@ const addRandomGraphicByCount = async (point: any) => { name: obj.name, monitorId: obj.monitorId, category: props.equipTypeDictLabel, - type: formData.value.showType, lng: point.lng, lat: point.lat, alt: point.alt @@ -335,15 +396,38 @@ const onChange = (value: string, viewUpdate: any) => { const onFocus = (viewUpdate: any) => { console.log("focus:", viewUpdate); }; -const onBlur = () => { - console.log(code.value, "6666666666777777777"); +const onPointBlur = () => { try { const options = { moduleCache: { vue: Vue }, async getFile() { - return code.value; + return pointConfig.value.pointCode; + }, + addStyle(textContent) { + const style = Object.assign(document.createElement("style"), { + textContent + }); + const ref = document.head.getElementsByTagName("style")[0] || null; + document.head.insertBefore(style, ref); + } + }; + const comp = defineAsyncComponent(() => loadModule("textPopup.vue", options)); + console.log(comp); + pointPreviewComp.value = comp; + } catch (err) { + console.error(err); + } +}; +const onBlur = () => { + try { + const options = { + moduleCache: { + vue: Vue + }, + async getFile() { + return basicConfig.value.popupCode; }, addStyle(textContent) { const style = Object.assign(document.createElement("style"), { @@ -371,7 +455,7 @@ onMounted(async () => { console.log("创建完成", e); addRandomGraphicByCount(e.graphic.point); }); - await getStyle(); + await getPointStyle(); }); onUnmounted(() => { map = null; @@ -428,7 +512,7 @@ onUnmounted(() => { } .operate-btn { @include flex; - justify-content: center; + justify-content: space-around; margin: 0 15px; margin-top: 10px; border-bottom: 1px solid #50a4e4; @@ -439,9 +523,9 @@ onUnmounted(() => { border-bottom: 2px solid transparent; cursor: pointer; } - div:nth-child(1) { - margin-right: 40px; - } + // div:nth-child(1) { + // margin-right: 40px; + // } .active-btn { color: #4f88e5; border-color: #4f88e5; @@ -453,7 +537,7 @@ onUnmounted(() => { padding: 15px 20px; .switch-content { display: flex; - flex-direction: column; + justify-content: space-between; margin: 0 5px; > div { @include flex; @@ -461,9 +545,6 @@ onUnmounted(() => { color: white; font-size: 14px; } - span:last-child { - margin-left: 5px; - } } } .popup-style { @@ -617,5 +698,10 @@ onUnmounted(() => { .el-popper__arrow::before { display: none; } + .el-input-number__increase, + .el-input-number__decrease { + background-color: transparent; + color: white; + } } diff --git a/src/views/goverment/largeScreen/components/equipmentAddTest.vue b/src/views/goverment/largeScreen/components/equipmentAddTest1.vue similarity index 91% rename from src/views/goverment/largeScreen/components/equipmentAddTest.vue rename to src/views/goverment/largeScreen/components/equipmentAddTest1.vue index 6e8f332..c854bb4 100644 --- a/src/views/goverment/largeScreen/components/equipmentAddTest.vue +++ b/src/views/goverment/largeScreen/components/equipmentAddTest1.vue @@ -5,40 +5,10 @@
-
点位配置
-
弹窗配置
-
设备列表
+
基础配置
+
设备列表
-
-
- 横向偏移量： - -
-
- 竖向偏移量： - -
-
-
- 点位样式： - -
-
- 保存 -
-
-
-
+
选择类型： @@ -144,11 +114,6 @@ const formData = ref({ showType: 1 }); const operateIndex = ref(0); -const pointConfig = ref({ - pointCode: "", - offsetX: 0, - offsetY: 0 -}); const code = ref(); const previewComp = shallowRef(); const extensions = [vue(), oneDark]; @@ -162,9 +127,8 @@ let parentGraphicLayer = props.graphicInstance; const getRelativeData = (index: any) => { operateIndex.value = index; if (index == 0) { - } else if (index == 1) { getStyle(); - } else if (index == 2) { + } else if (index == 1) { getEquipList(); } }; @@ -464,7 +428,7 @@ onUnmounted(() => { } .operate-btn { @include flex; - justify-content: space-around; + justify-content: center; margin: 0 15px; margin-top: 10px; border-bottom: 1px solid #50a4e4; @@ -475,9 +439,9 @@ onUnmounted(() => { border-bottom: 2px solid transparent; cursor: pointer; } - // div:nth-child(1) { - // margin-right: 40px; - // } + div:nth-child(1) { + margin-right: 40px; + } .active-btn { color: #4f88e5; border-color: #4f88e5; @@ -489,7 +453,7 @@ onUnmounted(() => { padding: 15px 20px; .switch-content { display: flex; - justify-content: space-between; + flex-direction: column; margin: 0 5px; > div { @include flex; @@ -497,6 +461,9 @@ onUnmounted(() => { color: white; font-size: 14px; } + span:last-child { + margin-left: 5px; + } } } .popup-style { @@ -650,10 +617,5 @@ onUnmounted(() => { .el-popper__arrow::before { display: none; } - .el-input-number__increase, - .el-input-number__decrease { - background-color: transparent; - color: white; - } } diff --git a/src/views/goverment/largeScreen/index.vue b/src/views/goverment/largeScreen/index.vue index 335b8e9..d0bf179 100644 --- a/src/views/goverment/largeScreen/index.vue +++ b/src/views/goverment/largeScreen/index.vue @@ -430,8 +430,8 @@ onMounted(async () => { configKey: "mapConfig" }; const { result } = await getSystemConfig(requestData); - console.log(JSON.parse(result.configValue), "地图配置"); if (result) { + console.log(JSON.parse(result.configValue), "地图配置"); configJson.value = JSON.parse(result.configValue); } else { configJson.value = ConfigJson.map3d; @@ -513,31 +513,9 @@ 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 popupStyle = async (id: any) => { - const res = await equipmentStyleGet({ category: id }); // 获取设备样式 +const pointStyle = async (id: any) => { + const res = await equipmentStyleGet({ category: id, type: 1 }); // 获取设备样式 if (!res.result) { return; } @@ -558,11 +536,37 @@ const popupStyle = async (id: any) => { }; const comp = defineAsyncComponent(() => loadModule("textPopup.vue", options)); console.log(comp, "返回的组件···········"); - return comp; + return { codeValue: comp, offsetX: res.result.offsetX, offsetY: res.result.offsetY }; +}; +// 设备类型下的设备绑定的弹窗样式 +const popupStyle = async (id: any) => { + const res = await equipmentStyleGet({ category: id, type: 1 }); // 获取设备样式 + if (!res.result) { + return; + } + const options = { + moduleCache: { + vue: Vue + }, + async getFile() { + return res.result.style; + }, + addStyle(textContent: any) { + const style = Object.assign(document.createElement("style"), { + textContent + }); + const ref = document.head.getElementsByTagName("style")[0] || null; + document.head.insertBefore(style, ref); + } + }; + const comp = defineAsyncComponent(() => loadModule("textPopup.vue", options)); + console.log(comp, "返回的组件···········"); + return { codeValue: comp, offsetX: res.result.offsetX, offsetY: res.result.offsetY }; }; // 获取设备类型下的设备列表 const getEquipmentList = async (id: any) => { const res = await equipmentList({ category: id }); + const resPointStyle = await pointStyle(id); const resStyle = await popupStyle(id); if (res.result && res.result.length > 0) { let arr: any = res.result; @@ -571,14 +575,12 @@ const getEquipmentList = async (id: any) => { id: item.monitorId, position: [+item.lng, +item.lat, +item.alt], style: { - html: `
- ${item.name} -
-
-
- `, - offsetX: -51, - offsetY: 4, + html: () => { + const dom = initVue3Popup(resPointStyle?.codeValue, { name: item.name }); + return dom; + }, + offsetX: +resPointStyle?.offsetX, + offsetY: +resPointStyle?.offsetY, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 100000) } }); @@ -589,12 +591,12 @@ const getEquipmentList = async (id: any) => { if (!attr) { return; } - const dom = initVue3Popup(resStyle, { name: "你好啊" }); + const dom = initVue3Popup(resStyle?.codeValue, { name: "你好啊" }); // return mars3d.Util.getTemplateHtml({ title: "矢量图层", template: dom, attr: attr }); console.log(dom); return dom; }, - { offsetY: -170, offsetX: 50 } + { offsetY: +resStyle?.offsetX, offsetX: +resStyle?.offsetY } ); }); } @@ -2394,72 +2396,53 @@ 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; - height: 30px; - // animation: cameraMove 1s linear infinite alternate; - // -webkit-animation: cameraMove 1s linear infinite alternate; - } - .mars3d-camera-text { - color: white; - font-size: 20px; - } - @keyframes cameraMove { - from { - margin-top: 20px; - } - to { - margin-top: 0px; - } - } - @-webkit-keyframes cameraMove { - from { - margin-top: 20px; - } - to { - margin-top: 0px; - } - } - .mars3d-camera-line { - height: 120px; - width: 5px; - margin-top: 10px; - // border-left: 3px dashed #5b8fee; - margin-left: calc(50% - 1px); - } - .mars3d-camera-point { - border-radius: 50%; - width: 8px; - height: 8px; - margin-left: calc(50% - 3px); - // background-color: #5b8fee; - } + // .mars3d-camera-content { + // width: 100px; + // height: 30px; + // display: flex; + // align-items: center; + // justify-content: center; + // } + // .mars3d-camera-img { + // width: 30px; + // height: 30px; + // // animation: cameraMove 1s linear infinite alternate; + // // -webkit-animation: cameraMove 1s linear infinite alternate; + // } + // .mars3d-camera-text { + // color: white; + // font-size: 20px; + // } + // @keyframes cameraMove { + // from { + // margin-top: 20px; + // } + // to { + // margin-top: 0px; + // } + // } + // @-webkit-keyframes cameraMove { + // from { + // margin-top: 20px; + // } + // to { + // margin-top: 0px; + // } + // } + // .mars3d-camera-line { + // height: 120px; + // width: 5px; + // margin-top: 10px; + // // border-left: 3px dashed #5b8fee; + // margin-left: calc(50% - 1px); + // } + // .mars3d-camera-point { + // border-radius: 50%; + // width: 8px; + // height: 8px; + // margin-left: calc(50% - 3px); + // // background-color: #5b8fee; + // } // .animation-spaceInDown { // animation-duration: 1s; // animation-fill-mode: both;