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="addHttpMqttServicePage">
			<CodeMirror
				v-model:code="form.script"
				dark
				:codeStyle="{ width: '100%', height: '200px', fontSize: '16px' }"
				:disabled="false"
				@ready="onReady"
				@change="onChange"
				@focus="onFocus"
				@blur="onBlur"
			/>
		</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 { ref, watch, onMounted, onUnmounted } from "vue";
import CodeMirror from "@/components/CodeMirror/index.vue";
const props = defineProps(["mapInstance"]);
const emits = defineEmits(["hiddenConfim"]);
const form = ref({
	script: ""
});
let map: any = props.mapInstance;
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);
};
onMounted(() => {
	console.log(map, "66666");
});
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: 300px;
	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>