From 99ba08140014d5d5f26aa43dfe0a955f64de2331 Mon Sep 17 00:00:00 2001 From: kun <1422840143@qq.com> Date: Tue, 21 Nov 2023 18:25:11 +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 --- .env.development | 4 +- package-lock.json | 11 ++ package.json | 1 + src/utils/file-util.ts | 4 +- .../largeScreen/components/equipmentAdd.vue | 122 +++++++++++++++++- .../largeScreen/components/query-popup.vue | 1 + .../largeScreen/components/textPopup.vue | 0 src/views/goverment/largeScreen/index.vue | 15 +-- 8 files changed, 142 insertions(+), 16 deletions(-) create mode 100644 src/views/goverment/largeScreen/components/textPopup.vue diff --git a/.env.development b/.env.development index 54f5fa3..cb8d67d 100644 --- a/.env.development +++ b/.env.development @@ -2,8 +2,8 @@ NODE_ENV = 'development' # 本地环境接口地址(/api/index.ts文件中使用) -VITE_API_URL = 'http://192.168.34.155:6677' -# VITE_API_URL = 'http://jxjzw.zhgdyun.com:6677' +# VITE_API_URL = 'http://192.168.34.155:6677' +VITE_API_URL = 'http://jxjzw.zhgdyun.com:6677' VITE_WPAPI_URL = "http://182.90.224.147:8081" # VITE_API_URL = "http://182.90.224.147:6688" diff --git a/package-lock.json b/package-lock.json index 6616356..d18262e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -55,6 +55,7 @@ "vue-router": "^4.1.6", "vue3-scale-box": "^0.1.9", "vue3-seamless-scroll": "^1.2.0", + "vue3-sfc-loader": "^0.8.4", "vuedraggable": "^4.1.0" }, "devDependencies": { @@ -16057,6 +16058,11 @@ "throttle-debounce": "^3.0.1" } }, + "node_modules/vue3-sfc-loader": { + "version": "0.8.4", + "resolved": "https://registry.npmmirror.com/vue3-sfc-loader/-/vue3-sfc-loader-0.8.4.tgz", + "integrity": "sha512-eziaIrk/N9f9OCpyFEkR6vMsZUHcF5mQslXjffwcb5Iq6EuU74QrlpBeJqA04MvAGT7f5O8la2v9k3NtQnJb3Q==" + }, "node_modules/vuedraggable": { "version": "4.1.0", "resolved": "https://registry.npmmirror.com/vuedraggable/-/vuedraggable-4.1.0.tgz", @@ -29149,6 +29155,11 @@ "throttle-debounce": "^3.0.1" } }, + "vue3-sfc-loader": { + "version": "0.8.4", + "resolved": "https://registry.npmmirror.com/vue3-sfc-loader/-/vue3-sfc-loader-0.8.4.tgz", + "integrity": "sha512-eziaIrk/N9f9OCpyFEkR6vMsZUHcF5mQslXjffwcb5Iq6EuU74QrlpBeJqA04MvAGT7f5O8la2v9k3NtQnJb3Q==" + }, "vuedraggable": { "version": "4.1.0", "resolved": "https://registry.npmmirror.com/vuedraggable/-/vuedraggable-4.1.0.tgz", diff --git a/package.json b/package.json index f20fa4e..66c8ffc 100644 --- a/package.json +++ b/package.json @@ -67,6 +67,7 @@ "vue-router": "^4.1.6", "vue3-scale-box": "^0.1.9", "vue3-seamless-scroll": "^1.2.0", + "vue3-sfc-loader": "^0.8.4", "vuedraggable": "^4.1.0" }, "devDependencies": { diff --git a/src/utils/file-util.ts b/src/utils/file-util.ts index 028f69b..7e1ca0d 100644 --- a/src/utils/file-util.ts +++ b/src/utils/file-util.ts @@ -1,4 +1,4 @@ -import { createApp } from "vue"; +import { createApp, getCurrentInstance } from "vue"; /** * Vue3组件示例化为Popup的DOM * @@ -9,8 +9,8 @@ import { createApp } from "vue"; export function initVue3Popup(comp: any, para: any) { const vNodeDom = document.createElement("div"); document.body.appendChild(vNodeDom); - const vNode = createApp(comp, { ...para }); // vue2中可使用extend vNode.mount(vNodeDom); + console.log(vNode._container); return vNode._container; } diff --git a/src/views/goverment/largeScreen/components/equipmentAdd.vue b/src/views/goverment/largeScreen/components/equipmentAdd.vue index 8e09d99..e1e10c3 100644 --- a/src/views/goverment/largeScreen/components/equipmentAdd.vue +++ b/src/views/goverment/largeScreen/components/equipmentAdd.vue @@ -4,17 +4,35 @@ 设备添加 +
+ 点 +
+
@@ -26,14 +44,85 @@ import * as Cesium from "mars3d-cesium"; //导入mars3d主库 import "mars3d/dist/mars3d.css"; import * as mars3d from "mars3d"; -import { ref, watch, onMounted, onUnmounted } from "vue"; +import { defineAsyncComponent, ref, shallowRef, watch, onMounted, onUnmounted } from "vue"; +import * as Vue from "vue"; +// import { Codemirror } from "vue-codemirror"; +import { javascript } from "@codemirror/lang-javascript"; +import { vue } from "@codemirror/lang-vue"; +import { oneDark } from "@codemirror/theme-one-dark"; +import { loadModule } from "vue3-sfc-loader"; +import { initVue3Popup } from "@/utils/file-util"; +import QueryPopup from "./query-popup.vue"; +import OutsidePopup from "http://jxjzw.zhgdyun.com:9001/wisdomsitezw/655c756d12b3a489008940c9.vue"; +const code = ref(""); +const previewComp = shallowRef(); +const extensions = [vue(), oneDark]; import CodeMirror from "@/components/CodeMirror/index.vue"; -const props = defineProps(["mapInstance"]); +const props = defineProps(["mapInstance", "graphicInstance"]); const emits = defineEmits(["hiddenConfim"]); const form = ref({ script: "" }); let map: any = props.mapInstance; +let graphicLayer: any = props.graphicInstance; +const addRandomGraphicByCount = () => { + const graphicImg = new mars3d.graphic.DivGraphic({ + // position: [117.077462, 31.657745, 60], + position: [113.933005, 22.518904, 60], + style: { + html: `
+ +
+
+
+ `, + offsetX: -16, + distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 100000) + } + // popup: `${code.value}`, + // popupOptions: { + // offsetY: -170, // 显示Popup的偏移值,是DivGraphic本身的像素高度值 + // template: `
+ //
{content}
+ // × + //
`, + // horizontalOrigin: Cesium.HorizontalOrigin.LEFT, + // verticalOrigin: Cesium.VerticalOrigin.CENTER + // } + }); + // const comp = () => import("http://jxjzw.zhgdyun.com:9001/wisdomsitezw/655c756d12b3a489008940c9.vue"); + // console.log(comp); + graphicImg.bindPopup((event: any) => { + const attr = event.graphic.attr || {}; + if (!attr) { + return; + } + const dom = initVue3Popup(OutsidePopup, attr); + return dom; + }); + graphicLayer.addGraphic(graphicImg); +}; +// 绘制点 +const drawPoint = () => { + graphicLayer.startDraw({ + type: "point", + style: { + pixelSize: 12, + color: "#3388ff", + label: { + // 不需要文字时，去掉label配置即可 + text: "可以同时支持文字", + font_size: 20, + color: "#ffffff", + outline: true, + outlineColor: "#000000", + pixelOffsetY: -20 + } + } + }); +}; const closeDiv = () => { emits("hiddenConfim"); }; @@ -49,9 +138,34 @@ const onFocus = (viewUpdate: any) => { }; const onBlur = (viewUpdate: any) => { console.log("blur:", viewUpdate); + console.log(code.value, "6666666666777777777"); + try { + const options = { + moduleCache: { + vue: Vue + }, + async getFile() { + return code.value; + }, + 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); + previewComp.value = comp; + addRandomGraphicByCount(); + } catch (err) { + console.error(err); + } }; onMounted(() => { console.log(map, "66666"); + console.log(QueryPopup, "777888"); }); onUnmounted(() => { map = null; @@ -83,7 +197,7 @@ onUnmounted(() => { border: 1px solid #008aff70; border-radius: 2px !important; background-color: rgba(23, 49, 71, 0.8); - width: 300px; + width: 500px; height: 500px; box-shadow: 0 4px 15px 1px #02213bb3; animation: fadeIn 1s; diff --git a/src/views/goverment/largeScreen/components/query-popup.vue b/src/views/goverment/largeScreen/components/query-popup.vue index 74a91bf..3970fff 100644 --- a/src/views/goverment/largeScreen/components/query-popup.vue +++ b/src/views/goverment/largeScreen/components/query-popup.vue @@ -3,6 +3,7 @@ ×
+
sss123456
{{ props.name }}
diff --git a/src/views/goverment/largeScreen/components/textPopup.vue b/src/views/goverment/largeScreen/components/textPopup.vue new file mode 100644 index 0000000..e69de29 diff --git a/src/views/goverment/largeScreen/index.vue b/src/views/goverment/largeScreen/index.vue index dfdda2c..c6f3a5b 100644 --- a/src/views/goverment/largeScreen/index.vue +++ b/src/views/goverment/largeScreen/index.vue @@ -127,7 +127,7 @@
- + @@ -975,10 +975,7 @@ const initMars3d = (option: any) => { }); map.on(mars3d.EventType.cameraChanged, cameraChanged); // 创建覆盖物数据图层 - graphicLayer = new mars3d.layer.GraphicLayer({ - name: "POI查询", - pid: 99 // 图层父级ID，一般图层管理中使用 - }); + graphicLayer = new mars3d.layer.GraphicLayer(); graphicLayer.bindPopup((event: any) => { const attr = event.graphic.attr || {}; if (!attr) { @@ -994,7 +991,7 @@ const initMars3d = (option: any) => { getPointPosition(); // 查询配置线效果 getLineEffect(); - addRandomGraphicByCount(); + // addRandomGraphicByCount(); }; // 取区域内的随机点 const randomPoint = (position: any) => { @@ -1173,8 +1170,10 @@ const addRandomGraphicByCount = () => { const graphicImg = new mars3d.graphic.DivGraphic({ position: [117.077462, 31.657745, 60], style: { - html: `
- + html: `
+