Mars3D-screen_web/src/views/goverment/largeScreen/components/equipmentAdd.vue

<template>
	<div class="main-content">
		<div class="main-content-title">
			<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="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>

<script lang="ts" setup>
//引入cesium基础库
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
import * as Cesium from "mars3d-cesium";
//导入mars3d主库
import "mars3d/dist/mars3d.css";
import * as mars3d from "mars3d";
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", "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");
};
const onReady = (payload: any) => {
	console.log("ready:", payload);
};
const onChange = (value: string, viewUpdate: any) => {
	console.log("change:", value);
	console.log("change:", viewUpdate);
};
const onFocus = (viewUpdate: any) => {
	console.log("focus:", viewUpdate);
};
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;
});
</script>

<style scoped lang="scss">
@mixin flex {
	display: flex;
	align-items: center;
}
// 菜单弹框出现动画
@keyframes fadeIn {
	0% {
		opacity: 0;
		transform: translate3d(100%, 0, 0);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}
.main-content {
	position: absolute;
	top: 60px;
	right: 10px;
	padding: 0 !important;
	background-image: none !important;
	border: 1px solid #008aff70;
	border-radius: 2px !important;
	background-color: rgba(23, 49, 71, 0.8);
	width: 500px;
	height: 500px;
	box-shadow: 0 4px 15px 1px #02213bb3;
	animation: fadeIn 1s;
	&-title {
		@include flex;
		width: 100%;
		height: 40px;
		padding: 0 5px 0 10px;
		background-image: url("@/assets/images/Mars3DIcon/subClassTitle.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		span {
			font-size: 16px;
			color: #0089fe;
			margin-right: auto;
		}
		:deep() {
			.el-icon {
				cursor: pointer;
			}
		}
	}
	.addHttpMqttServicePage {
		width: 100%;
		height: 100%;
		padding: 20px;
		&-header {
			font-size: 18px;
			font-weight: bold;
		}
		&-body {
			padding-top: 24px;
			width: 50%;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
		}
	}
}
// 图上图形样式
:deep() {
	.marsGreenGradientPnl {
		color: white;
	}
}
// element 组件样式
:deep() {
	.el-input__wrapper {
		background-color: transparent;
	}
	.el-input__inner {
		color: white;
	}
	.el-button {
		background: rgba(51, 89, 181, 0.6);
		border-radius: 6px;
		border: 0;
	}
	.el-select,
	.el-input,
	.el-input__inner {
		border-radius: 10px;
		color: #fff;
		//border: 1px solid green;
		border-radius: 0px;
		border-color: green;
		text-align: center;
	}

	//修改总体选项的样式 最外层
	.el-select__popper.el-popper {
		border: 0;
		background-color: transparent;
		box-shadow: none;
	}
	.el-select-dropdown {
		background: rgba(11, 22, 51, 0.7);
		box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
		opacity: 1;
		border: 1px solid #3b60a7;
		border-radius: 0px;
	}

	//修改单个的选项的样式

	.el-select-dropdown__item {
		background-color: transparent;
		color: #fff;
	}

	//item选项的hover样式

	.el-select-dropdown__item.hover,
	.el-select-dropdown__item:hover {
		color: white;
		background: linear-gradient(90deg, rgba(49, 96, 179, 0) 0%, #3160b3 51%, rgba(49, 96, 179, 0) 100%);
	}
	.el-popper__arrow::before {
		display: none;
	}
}
</style>