303 lines
7.4 KiB
Vue
303 lines
7.4 KiB
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>
|