fix: BUG修改

.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://192.168.34.155:6677'
-# VITE_API_URL = 'http://jxjzw.zhgdyun.com: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"
 

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",

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": {

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;
 }

src/views/goverment/largeScreen/components/equipmentAdd.vue

@@ -4,17 +4,35 @@
 			<span>设备添加</span>
 			<el-icon size="16" color="#fff" @click="closeDiv"><Close /></el-icon>
 		</div>
+		<div class="operate-btn">
+			<el-button type="primary" @click="drawPoint">点</el-button>
+		</div>
 		<div class="addHttpMqttServicePage">
 			<CodeMirror
-				v-model:code="form.script"
+				v-model:code="code"
 				dark
 				:codeStyle="{ width: '100%', height: '200px', fontSize: '16px' }"
 				:disabled="false"
+				:extensions="extensions"
 				@ready="onReady"
 				@change="onChange"
 				@focus="onFocus"
 				@blur="onBlur"
 			/>
+			<!-- <codemirror
+				v-model="code"
+				placeholder="Code goes here..."
+				:style="{ height: '400px' }"
+				:autofocus="true"
+				:indent-with-tab="true"
+				:tab-size="2"
+				:extensions="extensions"
+				@ready="onReady"
+				@change="onChange"
+				@focus="onFocus"
+				@blur="onBlur"
+			/>
+			<component :is="previewComp"></component> -->
 		</div>
 	</div>
 </template>
@@ -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: ` <div class="mars3d-camera-content"> 
+                      <img class="mars3d-camera-img" src="${
+												new URL("@/assets/images/Mars3DImg/icon/camera.svg", import.meta.url).href
+											}" >
+                    </div>
+                    <div class="mars3d-camera-line" ></div>
+                    <div class="mars3d-camera-point"></div>
+                  `,
+			offsetX: -16,
+			distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 100000)
+		}
+		// popup: `${code.value}`,
+		// popupOptions: {
+		// 	offsetY: -170, // 显示Popup的偏移值,是DivGraphic本身的像素高度值
+		// 	template: `<div class="marsBlackPanel animation-spaceInDown">
+		//                 <div class="marsBlackPanel-text">{content}</div>
+		//                 <span class="mars3d-popup-close-button closeButton" >×</span>
+		//               </div>`,
+		// 	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;

src/views/goverment/largeScreen/components/query-popup.vue

@@ -3,6 +3,7 @@
 		<span class="mars3d-popup-close-button mars3d-popup-color closeButton" @click="closePopup"> × </span>
 
 		<div class="mars3d-popup-content-wrapper mars3d-popup-background">
+			<div style="color: white">sss123456</div>
 			<div class="mars3d-template-titile">
 				<a :href="'https://www.amap.com/detail/' + props.id" target="_black">{{ props.name }}</a>
 			</div>

src/views/goverment/largeScreen/index.vue

@@ -127,7 +127,7 @@
 			</div>
 		</div>
 		<!-- 设备添加弹框 -->
-		<EquipmentAdd :mapInstance="map" v-if="equipmentShow" @hiddenConfim="equipmentShow = false" />
+		<EquipmentAdd :mapInstance="map" :graphicInstance="graphicLayer" v-if="equipmentShow" @hiddenConfim="equipmentShow = false" />
 		<!-- 图上量算弹框 -->
 		<MapMeasurement :mapInstance="map" v-if="measurementShow" @hiddenConfim="measurementShow = false" />
 		<!-- 空间分析弹框 -->
@@ -975,10 +975,7 @@ const initMars3d = (option: any) => {
 	});
 	map.on(mars3d.EventType.cameraChanged, cameraChanged);
 	// 创建覆盖物数据图层
-	graphicLayer = new mars3d.layer.GraphicLayer({
+	graphicLayer = new mars3d.layer.GraphicLayer();
-		name: "POI查询",
-		pid: 99 // 图层父级ID，一般图层管理中使用
-	});
 	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) => {
@@ -1174,7 +1171,9 @@ const addRandomGraphicByCount = () => {
 		position: [117.077462, 31.657745, 60],
 		style: {
 			html: ` <div class="mars3d-camera-content"> 
-                      <img class="mars3d-camera-img" src="@/assets/images/Mars3DImg/icon/camera.svg" >
+                      <img class="mars3d-camera-img" src="${
+												new URL("@/assets/images/Mars3DImg/icon/camera.svg", import.meta.url).href
+											}" >
                     </div>
                     <div class="mars3d-camera-line" ></div>
                     <div class="mars3d-camera-point"></div>