fix: BUG修改
This commit is contained in:
kun
parent
99af9b1224
commit
fda7ebccb0
828
package-lock.json
generated
828
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -23,6 +23,8 @@
|
||||
"dependencies": {
|
||||
"@amap/amap-jsapi-loader": "^1.0.1",
|
||||
"@amap/amap-jsapi-types": "^0.0.13",
|
||||
"@codemirror/lang-vue": "^0.1.2",
|
||||
"@codemirror/theme-one-dark": "^6.1.2",
|
||||
"@element-plus/icons-vue": "^2.0.10",
|
||||
"@turf/turf": "^6.5.0",
|
||||
"@vueup/vue-quill": "^1.0.0-alpha.40",
|
||||
@ -32,6 +34,7 @@
|
||||
"amfe-flexible": "^2.2.1",
|
||||
"axios": "^1.2.1",
|
||||
"base-64": "^1.0.0",
|
||||
"codemirror": "^6.0.1",
|
||||
"date-fns": "^2.29.3",
|
||||
"driver.js": "^0.9.8",
|
||||
"echarts": "^5.3.0",
|
||||
@ -43,6 +46,8 @@
|
||||
"js-base64": "^3.7.5",
|
||||
"js-md5": "^0.7.3",
|
||||
"jszip": "^3.10.1",
|
||||
"less": "^4.2.0",
|
||||
"less-loader": "^11.1.3",
|
||||
"mars3d": "^3.6.9",
|
||||
"mars3d-cesium": "^1.110.0",
|
||||
"mitt": "^3.0.0",
|
||||
@ -57,6 +62,7 @@
|
||||
"sortablejs": "^1.15.0",
|
||||
"vite-plugin-style-import": "^2.0.0",
|
||||
"vue": "^3.2.47",
|
||||
"vue-codemirror": "^6.1.1",
|
||||
"vue-i18n": "^9.1.9",
|
||||
"vue-router": "^4.1.6",
|
||||
"vue3-scale-box": "^0.1.9",
|
||||
|
||||
77
src/components/CodeMirror/index.vue
Normal file
77
src/components/CodeMirror/index.vue
Normal file
@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<div>
|
||||
<Codemirror
|
||||
v-model="codeValue"
|
||||
:style="codeStyle"
|
||||
:extensions="extensions"
|
||||
v-bind="$attrs"
|
||||
@ready="handleReady"
|
||||
@change="onChange"
|
||||
@focus="onFocus"
|
||||
@blur="onBlur"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import type { CSSProperties } from "vue";
|
||||
import { ref } from "vue";
|
||||
import { Codemirror } from "vue-codemirror";
|
||||
import { vue } from "@codemirror/lang-vue";
|
||||
import { oneDark } from "@codemirror/theme-one-dark";
|
||||
|
||||
interface Props {
|
||||
codeStyle?: CSSProperties; // 代码样式
|
||||
dark?: boolean; // 是否暗黑主题
|
||||
code?: string; // 代码字符串
|
||||
// placeholder?: string // 占位文本
|
||||
// autofocus?: boolean // 自动聚焦
|
||||
// disabled?: boolean // 禁用输入行为和更改状态
|
||||
// indentWithTab?: boolean // 启用tab按键
|
||||
// tabSize?: number // tab按键缩进空格数
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
// placeholder: 'Code goes here...',
|
||||
codeStyle: () => {
|
||||
return {};
|
||||
},
|
||||
dark: false,
|
||||
code: ""
|
||||
// autofocus: false,
|
||||
// disabled: false,
|
||||
// indentWithTab: true,
|
||||
// tabSize: 2
|
||||
});
|
||||
const extensions = props.dark ? [vue(), oneDark] : [vue()];
|
||||
const codeValue = ref(props.code);
|
||||
const emits = defineEmits(["update:code", "ready", "change", "focus", "blur"]);
|
||||
function handleReady(payload: any) {
|
||||
// console.log('ready')
|
||||
emits("ready", payload);
|
||||
}
|
||||
function onChange(value: string, viewUpdate: any) {
|
||||
emits("change", value, viewUpdate);
|
||||
emits("update:code", value);
|
||||
}
|
||||
function onFocus(viewUpdate: any) {
|
||||
emits("focus", viewUpdate);
|
||||
}
|
||||
function onBlur(viewUpdate: any) {
|
||||
emits("blur", viewUpdate);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep() {
|
||||
.cm-editor {
|
||||
border-radius: 8px;
|
||||
outline: none;
|
||||
border: 1px solid transparent;
|
||||
.cm-scroller {
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
.cm-focused {
|
||||
border: 1px solid fade(#000, 48%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -13,11 +13,9 @@
|
||||
<img class="angel" src="@/assets/images/Mars3DIcon/Rectangle.png" alt="" />
|
||||
<div class="header-menu">
|
||||
<div @click="toCenter" :class="route.path == '/largeScreen' ? 'selected-class' : ''">
|
||||
<!-- <img src="@/assets/images/icon/fire.png" alt="" srcset="" /> -->
|
||||
<span>首页</span>
|
||||
</div>
|
||||
<div @click="router.push('/config')" :class="route.path != '/largeScreen' ? 'selected-class' : ''">
|
||||
<!-- <img src="@/assets/images/icon/fire.png" alt="" srcset="" /> -->
|
||||
<span>信息展示</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -14,11 +14,9 @@
|
||||
<img class="angel" src="@/assets/images/Mars3DIcon/Rectangle.png" alt="" />
|
||||
<div class="header-menu">
|
||||
<div @click="router.push('/largeScreen')" :class="route.path == '/largeScreen' ? 'selected-class' : ''">
|
||||
<!-- <img src="@/assets/images/icon/fire.png" alt="" srcset="" /> -->
|
||||
<span>首页</span>
|
||||
</div>
|
||||
<div @click="router.push('/config')" :class="route.path != '/largeScreen' ? 'selected-class' : ''">
|
||||
<!-- <img src="@/assets/images/icon/fire.png" alt="" srcset="" /> -->
|
||||
<span>信息展示</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -358,6 +358,7 @@ const closeDiv = () => {
|
||||
};
|
||||
onUnmounted(() => {
|
||||
map = null;
|
||||
routeLayer.remove();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -976,7 +976,7 @@ onUnmounted(() => {
|
||||
measure = null;
|
||||
measureVolume = null;
|
||||
shadows = null;
|
||||
graphicLayer = null;
|
||||
graphicLayer.remove();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -1184,7 +1184,7 @@ const addRandomGraphicByCount = (graphicLayer: any, position: any) => {
|
||||
position: position,
|
||||
style: {
|
||||
html: ` <div class="mars3d-camera-content">
|
||||
<img class="mars3d-camera-img" src="@/assets/images/icon/camera.svg" >
|
||||
<img class="mars3d-camera-img" src="@/assets/images/Mars3DImg/icon/camera.svg" >
|
||||
</div>
|
||||
<div class="mars3d-camera-line" ></div>
|
||||
<div class="mars3d-camera-point"></div>
|
||||
@ -1970,7 +1970,7 @@ onUnmounted(() => {
|
||||
position: absolute;
|
||||
bottom: -39px;
|
||||
left: -22px;
|
||||
background: url("@/assets/images/icon/popupLbl.png") 0px 0px no-repeat;
|
||||
background: url("@/assets/images/Mars3DImg/icon/popupLbl.png") 0px 0px no-repeat;
|
||||
background-position: 0px 0px;
|
||||
}
|
||||
|
||||
@ -2089,7 +2089,9 @@ onUnmounted(() => {
|
||||
left: 0;
|
||||
right: 40px;
|
||||
width: auto;
|
||||
height: 300px;
|
||||
z-index: 9999;
|
||||
top: -300px;
|
||||
}
|
||||
|
||||
.cesium-geocoder-searchButton {
|
||||
|
||||
188
src/views/goverment/largeScreen/components/equipmentAdd.vue
Normal file
188
src/views/goverment/largeScreen/components/equipmentAdd.vue
Normal file
@ -0,0 +1,188 @@
|
||||
<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>
|
||||
@ -358,6 +358,7 @@ const closeDiv = () => {
|
||||
};
|
||||
onUnmounted(() => {
|
||||
map = null;
|
||||
routeLayer.remove();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -976,7 +976,7 @@ onUnmounted(() => {
|
||||
measure = null;
|
||||
measureVolume = null;
|
||||
shadows = null;
|
||||
graphicLayer = null;
|
||||
graphicLayer.remove();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -126,6 +126,8 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 设备添加弹框 -->
|
||||
<EquipmentAdd :mapInstance="map" v-if="equipmentShow" @hiddenConfim="equipmentShow = false" />
|
||||
<!-- 图上量算弹框 -->
|
||||
<MapMeasurement :mapInstance="map" v-if="measurementShow" @hiddenConfim="measurementShow = false" />
|
||||
<!-- 空间分析弹框 -->
|
||||
@ -267,6 +269,7 @@ import layoutTop from "@/components/layoutTop/index.vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { initVue3Popup } from "@/utils/file-util";
|
||||
import QueryPopup from "./components/query-popup.vue";
|
||||
import EquipmentAdd from "./components/equipmentAdd.vue";
|
||||
import MapMeasurement from "./components/mapMeasurement.vue";
|
||||
import SpaceAnalysis from "./components/spaceAnalysis.vue";
|
||||
import CoordinatePicking from "./components/coordinatePicking.vue";
|
||||
@ -291,6 +294,7 @@ const configJson = ref<any>({});
|
||||
const layerJsonArr = ref<any>([]);
|
||||
const layerId = ref<any>(null);
|
||||
const screenComparisonShow = ref(false); // 分屏对比弹框
|
||||
const equipmentShow = ref(false); // 设备添加弹框
|
||||
const leftRollerList = ref<any>([]);
|
||||
const rightRollerList = ref<any>([]);
|
||||
const rollerVal = ref({
|
||||
@ -639,7 +643,8 @@ const data = [
|
||||
{ name: "图上标绘", icon: new URL("@/assets/images/Mars3DIcon/tsbh.png", import.meta.url).href },
|
||||
{ name: "路线导航", icon: new URL("@/assets/images/Mars3DIcon/lxdh.png", import.meta.url).href },
|
||||
{ name: "卷帘对比", icon: new URL("@/assets/images/Mars3DIcon/jldb.png", import.meta.url).href },
|
||||
{ name: "分屏对比", icon: new URL("@/assets/images/Mars3DIcon/fpdb.png", import.meta.url).href }
|
||||
{ name: "分屏对比", icon: new URL("@/assets/images/Mars3DIcon/fpdb.png", import.meta.url).href },
|
||||
{ name: "设备添加", icon: new URL("@/assets/images/Mars3DIcon/fpdb.png", import.meta.url).href }
|
||||
]
|
||||
}
|
||||
];
|
||||
@ -785,6 +790,8 @@ const clickMenu = (name: any) => {
|
||||
screenComparison();
|
||||
// 初始化树
|
||||
initSplitScreenTree();
|
||||
} else if (name == "设备添加") {
|
||||
equipmentShow.value = true;
|
||||
}
|
||||
toolListShow.value = false;
|
||||
};
|
||||
@ -987,6 +994,7 @@ const initMars3d = (option: any) => {
|
||||
getPointPosition();
|
||||
// 查询配置线效果
|
||||
getLineEffect();
|
||||
addRandomGraphicByCount();
|
||||
};
|
||||
// 取区域内的随机点
|
||||
const randomPoint = (position: any) => {
|
||||
@ -1161,12 +1169,12 @@ const getBasicMaps = async () => {
|
||||
}
|
||||
chkHasTerrain.value = layers.hasTerrain || false;
|
||||
};
|
||||
const addRandomGraphicByCount = (graphicLayer: any, position: any) => {
|
||||
const addRandomGraphicByCount = () => {
|
||||
const graphicImg = new mars3d.graphic.DivGraphic({
|
||||
position: position,
|
||||
position: [117.077462, 31.657745, 60],
|
||||
style: {
|
||||
html: ` <div class="mars3d-camera-content">
|
||||
<img class="mars3d-camera-img" src="@/assets/images/icon/camera.svg" >
|
||||
<img class="mars3d-camera-img" src="@/assets/images/Mars3DImg/icon/camera.svg" >
|
||||
</div>
|
||||
<div class="mars3d-camera-line" ></div>
|
||||
<div class="mars3d-camera-point"></div>
|
||||
@ -1953,7 +1961,7 @@ onUnmounted(() => {
|
||||
position: absolute;
|
||||
bottom: -39px;
|
||||
left: -22px;
|
||||
background: url("@/assets/images/icon/popupLbl.png") 0px 0px no-repeat;
|
||||
background: url("@/assets/images/Mars3DImg/icon/popupLbl.png") 0px 0px no-repeat;
|
||||
background-position: 0px 0px;
|
||||
}
|
||||
|
||||
@ -2072,7 +2080,9 @@ onUnmounted(() => {
|
||||
left: 0;
|
||||
right: 40px;
|
||||
width: auto;
|
||||
height: 300px;
|
||||
z-index: 9999;
|
||||
top: -300px;
|
||||
}
|
||||
|
||||
.cesium-geocoder-searchButton {
|
||||
|
||||
@ -32,7 +32,8 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
|
||||
preprocessorOptions: {
|
||||
scss: {
|
||||
additionalData: `@import "@/styles/var.scss";`
|
||||
}
|
||||
},
|
||||
less: {}
|
||||
}
|
||||
},
|
||||
server: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user