Fuyuu
/
dt-admin-pc-v2
3
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

尝试更换组件EarthMapModal -》<EarthComp />

master
DIAMOND 12 months ago
parent
5f86f2f740
commit
e660abd872
1 changed files with 255 additions and 218 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 473
      src/views/military/modules/earthMap/scene/model/sceneInfo/SenceInfo.vue

473
src/views/military/modules/earthMap/scene/model/sceneInfo/SenceInfo.vue
View File

@ -10,11 +10,13 @@
</a-col>
<a-col :span="11" :offset="1">
<div>区域名称:</div>
<a-input class="inputWidthCss1" v-model:value="subObject.sceneName" placeholder="请输入区域编号名称" :disabled="disable"></a-input>
<a-input class="inputWidthCss1" v-model:value="subObject.sceneName" placeholder="请输入区域编号名称"
:disabled="disable"></a-input>
</a-col>
<a-col :span="11" :offset="1">
<div>区域视距:</div>
<a-input-number class="inputWidthCss1" v-model:value="subObject.viewDistance" :disabled="disable" :min="0.5" :step="0.0001"></a-input-number>
<a-input-number class="inputWidthCss1" v-model:value="subObject.viewDistance" :disabled="disable" :min="0.5"
:step="0.0001"></a-input-number>
</a-col>
<a-col :span="11" :offset="1">
<div>区域类型:</div>
@ -48,41 +50,59 @@
<div class="centerText">旋转<img :src="locationPng" class="dwImg" @click="mapShow" /></div>
</a-col> -->
<a-col :span="11" :offset="1">
<div> <div>中心经度:</div><a-input-number class="inputWidthCss1" v-model:value="subObject.lon" :disabled="disable" /> </div>
<div> <div>中心纬度:</div><a-input-number class="inputWidthCss1" v-model:value="subObject.lat" :disabled="disable" /> </div>
<div> <div>中心高度:</div><a-input-number class="inputWidthCss1" v-model:value="subObject.altitude" :disabled="disable" /> </div>
<div>
<div>中心经度:</div><a-input-number class="inputWidthCss1" v-model:value="subObject.lon" :disabled="disable" />
</div>
<div>
<div>中心纬度:</div><a-input-number class="inputWidthCss1" v-model:value="subObject.lat" :disabled="disable" />
</div>
<div>
<div>中心高度:</div><a-input-number class="inputWidthCss1" v-model:value="subObject.altitude" :disabled="disable" />
</div>
</a-col>
<a-col :span="11" :offset="1">
<div> <div>相机经度:</div><a-input-number class="inputWidthCss1" v-model:value="subObject.cameraLon" :disabled="disable" /> </div>
<div> <div>相机纬度:</div><a-input-number class="inputWidthCss1" v-model:value="subObject.cameraLat" :disabled="disable" /> </div>
<div> <div>相机高度:</div><a-input-number class="inputWidthCss1" v-model:value="subObject.cameraAltitude" :disabled="disable" /> </div>
<div>
<div>相机经度:</div><a-input-number class="inputWidthCss1" v-model:value="subObject.cameraLon"
:disabled="disable" />
</div>
<div>
<div>相机纬度:</div><a-input-number class="inputWidthCss1" v-model:value="subObject.cameraLat"
:disabled="disable" />
</div>
<div>
<div>相机高度:</div><a-input-number class="inputWidthCss1" v-model:value="subObject.cameraAltitude"
:disabled="disable" />
</div>
</a-col>
<a-col :span="11" :offset="1">
<div>区域图标:</div>
<a-upload
name="avatar"
list-type="picture-card"
class="avatar-uploader"
:show-upload-list="false"
:customRequest="preViewOk"
:before-upload="preBeforeUpload"
:accept="previewType.toString()"
:disabled="disable"
>
<img v-if="preViewUrl" :src="subObject.icon" alt="avatar" class="preViewImg" style="width: 102px; height: 102px; object-fit: contain" />
<a-upload name="avatar" list-type="picture-card" class="avatar-uploader" :show-upload-list="false"
:customRequest="preViewOk" :before-upload="preBeforeUpload" :accept="previewType.toString()"
:disabled="disable">
<img v-if="preViewUrl" :src="subObject.icon" alt="avatar" class="preViewImg"
style="width: 102px; height: 102px; object-fit: contain" />
<div v-else>
<div class="ant-upload-text">上传图标</div>
</div>
</a-upload>
</a-col>
<a-col :span="11" :offset="1">
<div> <div>相机偏航角:</div><a-input-number class="inputWidthCss1" v-model:value="subObject.rotationX" :disabled="disable" /> </div>
<div> <div>相机俯仰角:</div><a-input-number class="inputWidthCss1" v-model:value="subObject.rotationY" :disabled="disable" /> </div>
<div> <div>相机翻转角:</div><a-input-number class="inputWidthCss1" v-model:value="subObject.rotationZ" :disabled="disable" /> </div>
<div>
<div>相机偏航角:</div><a-input-number class="inputWidthCss1" v-model:value="subObject.rotationX"
:disabled="disable" />
</div>
<div>
<div>相机俯仰角:</div><a-input-number class="inputWidthCss1" v-model:value="subObject.rotationY"
:disabled="disable" />
</div>
<div>
<div>相机翻转角:</div><a-input-number class="inputWidthCss1" v-model:value="subObject.rotationZ"
:disabled="disable" />
</div>
</a-col>
</a-row>
<EarthMapModal
<!-- <EarthMapModal
:visible="mapVisible"
:enableTile="false"
:enablePointer="true"
@ -94,220 +114,237 @@
@checkPosition="checkPosition"
:hasMoveMethod="subObject && subObject.id ? true : false"
@moveChinaPosition="moveChinaPosition"
></EarthMapModal>
></EarthMapModal> -->
<a-modal
title="拾取中心坐标和相机数据"
:visible="mapVisible"
@ok="handleOk"
@cancel="()=> mapVisible = false"
width="60vw"
:destroyOnClose="true"
wrapClassName="EarthMap">
<a-row>
<a-col :span="24">
<EarthComp />
</a-col>
</a-row>
</a-modal>
</div>
</template>
<script setup>
import { toRefs, ref, watch, computed, onMounted } from 'vue';
import locationPng from '@/assets/images/getLocation.png';
import EarthMapModal from '../MapModel/EarthMapModal.vue';
import { defHttp } from '@/utils/http/axios';
import { message } from 'ant-design-vue';
import { EditOutlined } from '@ant-design/icons-vue';
import { toRefs, ref, watch, computed, onMounted } from 'vue';
import locationPng from '@/assets/images/getLocation.png';
import EarthMapModal from '../MapModel/EarthMapModal.vue';
import { defHttp } from '@/utils/http/axios';
import { message } from 'ant-design-vue';
import { EditOutlined } from '@ant-design/icons-vue';
import EarthComp from '@/views/earthMap/edit/EarthComp.vue';
// 新增场景
const addScene = (params) => {
return defHttp.post({ url: '/military/msMapScene/add', params: params }, { isTransformResponse: false });
};
// 编辑场景
const editScene = (params) => {
return defHttp.put({ url: '/military/msMapScene/edit', params: params }, { isTransformResponse: false });
};
// 获取场景类型字典
const getSceneType = () => {
return defHttp.get({ url: '/sys/dict/getDictItems/SceneType' }, { isTransformResponse: false });
};
// 上传图片
const fileUpload = (file) => {
return defHttp.post({ url: '/sys/common/upload', params: file }, { isTransformResponse: false });
};
// 属性
const props = defineProps(['subObject', 'parentCodeArr', 'nextNodeIndex', 'parentNodeCode', 'disable']);
// 包装ref
const { parentCodeArr, nextNodeIndex, parentNodeCode, subObject, disable } = toRefs(props);
const emit = defineEmits(['closeWin', 'updateDataSource']);
const sceneTypes = ref([]);
// 创建编码
const createCode = function () {
if (!nextNodeIndex.value) {
return;
}
const nextNodeIndexStr = nextNodeIndex.value.toString();
const nextNodeIndexLen = nextNodeIndexStr.length;
let currentCode = '';
for (let i = 0; i < 5 - nextNodeIndexLen; i++) {
currentCode += '0';
}
currentCode += nextNodeIndexStr;
let sceneId = null;
if (parentNodeCode.value.length > 0) {
sceneId = parentNodeCode.value + '-' + currentCode;
} else {
sceneId = currentCode;
}
return sceneId;
};
// 提交
const handleOk = function () {
if (!subObject.value.sceneName || subObject.value.sceneName.length <= 0) {
message.warn('区域名称不能为空!');
return;
}
let submitUrl = '';
if (subObject.value.id) {
// 更新
return editScene(subObject.value).then((res) => {
if (res.code == 200) {
emit('updateDataSource', true);
return subObject;
}
});
} else {
// 新增
return addScene(subObject.value).then((res) => {
if (res.code == 200) {
emit('updateDataSource', true);
}
});
}
};
// 挂载后获取场景类型
onMounted(async () => {
sceneTypes.value = await getSceneType().then((response) => {
if (response.success) {
return response.result;
// 新增场景
const addScene = (params) => {
return defHttp.post({ url: '/military/msMapScene/add', params: params }, { isTransformResponse: false });
};
// 编辑场景
const editScene = (params) => {
return defHttp.put({ url: '/military/msMapScene/edit', params: params }, { isTransformResponse: false });
};
// 获取场景类型字典
const getSceneType = () => {
return defHttp.get({ url: '/sys/dict/getDictItems/SceneType' }, { isTransformResponse: false });
};
// 上传图片
const fileUpload = (file) => {
return defHttp.post({ url: '/sys/common/upload', params: file }, { isTransformResponse: false });
};
// 属性
const props = defineProps(['subObject', 'parentCodeArr', 'nextNodeIndex', 'parentNodeCode', 'disable']);
// 包装ref
const { parentCodeArr, nextNodeIndex, parentNodeCode, subObject, disable } = toRefs(props);
const emit = defineEmits(['closeWin', 'updateDataSource']);
const sceneTypes = ref([]);
// 创建编码
const createCode = function () {
if (!nextNodeIndex.value) {
return;
}
const nextNodeIndexStr = nextNodeIndex.value.toString();
const nextNodeIndexLen = nextNodeIndexStr.length;
let currentCode = '';
for (let i = 0; i < 5 - nextNodeIndexLen; i++) {
currentCode += '0';
}
currentCode += nextNodeIndexStr;
let sceneId = null;
if (parentNodeCode.value.length > 0) {
sceneId = parentNodeCode.value + '-' + currentCode;
} else {
sceneId = currentCode;
}
return sceneId;
};
// 提交
const handleOk = function () {
if (!subObject.value.sceneName || subObject.value.sceneName.length <= 0) {
message.warn('区域名称不能为空!');
return;
}
let submitUrl = '';
if (subObject.value.id) {
// 更新
return editScene(subObject.value).then((res) => {
if (res.code == 200) {
emit('updateDataSource', true);
return subObject;
}
});
} else {
// 新增
return addScene(subObject.value).then((res) => {
if (res.code == 200) {
emit('updateDataSource', true);
}
});
}
};
// 挂载后获取场景类型
onMounted(async () => {
sceneTypes.value = await getSceneType().then((response) => {
if (response.success) {
return response.result;
}
});
// 打开地图时飞入到指定位置
const moveChinaPosition = function () {
// console.log('moveChinaPosition',subObject.value);
window.earth.camera.fov = subObject.value.viewDistance;
// window.earth.camera.position = [subObject.value.lon, subObject.value.lat, subObject.value.altitude];
//飞入应为相机位置
window.earth.camera.position = [subObject.value.cameraLon, subObject.value.cameraLat, subObject.value.cameraAltitude];
window.earth.camera.rotation = [subObject.value.rotationX, subObject.value.rotationY, subObject.value.rotationZ];
};
});
// 打开地图时飞入到指定位置
const moveChinaPosition = function () {
// console.log('moveChinaPosition',subObject.value);
window.earth.camera.fov = subObject.value.viewDistance;
// window.earth.camera.position = [subObject.value.lon, subObject.value.lat, subObject.value.altitude];
//飞入应为相机位置
window.earth.camera.position = [subObject.value.cameraLon, subObject.value.cameraLat, subObject.value.cameraAltitude];
window.earth.camera.rotation = [subObject.value.rotationX, subObject.value.rotationY, subObject.value.rotationZ];
};
// const stop = watch(
// visible, (value, oldValue) => {
// if (value) {
// initMap()
// stop();
// }
// }
// )
// const stop = watch(
// visible, (value, oldValue) => {
// if (value) {
// initMap()
// stop();
// }
// }
// )
// 弹窗地图框属性
const mapVisible = ref(false);
const mapShow = function () {
mapVisible.value = true;
};
// 关闭地图时设置，视角位置，视距信息
const checkPosition = function (position, cameraPosition, rotation, fov) {
subObject.value.lon = position[0];
subObject.value.lat = position[1];
subObject.value.altitude = position[2];
// 弹窗地图框属性
const mapVisible = ref(false);
const mapShow = function () {
mapVisible.value = true;
};
// 关闭地图时设置，视角位置，视距信息
const checkPosition = function (position, cameraPosition, rotation, fov) {
subObject.value.lon = position[0];
subObject.value.lat = position[1];
subObject.value.altitude = position[2];
subObject.value.cameraLon = cameraPosition[0];
subObject.value.cameraLat = cameraPosition[1];
subObject.value.cameraAltitude = cameraPosition[2];
subObject.value.cameraLon = cameraPosition[0];
subObject.value.cameraLat = cameraPosition[1];
subObject.value.cameraAltitude = cameraPosition[2];
subObject.value.rotationX = rotation[0];
subObject.value.rotationY = rotation[1];
subObject.value.rotationZ = rotation[2];
subObject.value.rotationX = rotation[0];
subObject.value.rotationY = rotation[1];
subObject.value.rotationZ = rotation[2];
subObject.value.viewDistance = fov;
};
// 图片预览的计算属性
const preViewUrl = computed({
get: () => {
return subObject.value.icon;
},
set: (value) => {
if (value) {
if (value.indexOf('/dt/sys/common/static/') > -1) {
subObject.value.icon = value;
} else {
subObject.value.icon = '/dt/sys/common/static/' + value;
}
subObject.value.viewDistance = fov;
};
// 图片预览的计算属性
const preViewUrl = computed({
get: () => {
return subObject.value.icon;
},
set: (value) => {
if (value) {
if (value.indexOf('/dt/sys/common/static/') > -1) {
subObject.value.icon = value;
} else {
subObject.value.icon = null;
}
},
});
// 上传图片
const preViewOk = function (fileInfo) {
const file = fileInfo.file;
let formData = new FormData();
formData.append('file', file);
formData.append('biz', 'models/preView');
const requestCallBack = (response) => {
if (!response.success) {
return;
}
const msg = response.message;
if ('上传失败！' == msg) {
message.error('上传失败!');
preViewUrl.value = null;
} else {
preViewUrl.value = msg;
message.info('上传成功!');
}
};
fileUpload(formData)
.then(requestCallBack)
.catch(() => {
message.error('上传失败!');
});
};
// 上传图片的检查类型
const previewType = ref(['.jpg', '.png', '.icon']);
// 上传之前检查类型
const preBeforeUpload = function (file) {
const fileName = file.name;
const fileType = fileName.substring(fileName.lastIndexOf('.'), fileName.length).toLowerCase();
let isFileType = false;
for (let type of previewType.value) {
if (type == fileType) {
isFileType = true;
break;
subObject.value.icon = '/dt/sys/common/static/' + value;
}
} else {
subObject.value.icon = null;
}
},
});
// 上传图片
const preViewOk = function (fileInfo) {
const file = fileInfo.file;
let formData = new FormData();
formData.append('file', file);
formData.append('biz', 'models/preView');
const requestCallBack = (response) => {
if (!response.success) {
return;
}
if (!isFileType) {
message.error('上传文件类型异常');
const msg = response.message;
if ('上传失败！' == msg) {
message.error('上传失败!');
preViewUrl.value = null;
} else {
preViewUrl.value = msg;
message.info('上传成功!');
}
return isFileType;
};
// 向父元素抛出的方法和属性
defineExpose({
preViewUrl,
handleOk,
createCode,
});
fileUpload(formData)
.then(requestCallBack)
.catch(() => {
message.error('上传失败!');
});
};
// 上传图片的检查类型
const previewType = ref(['.jpg', '.png', '.icon']);
// 上传之前检查类型
const preBeforeUpload = function (file) {
const fileName = file.name;
const fileType = fileName.substring(fileName.lastIndexOf('.'), fileName.length).toLowerCase();
let isFileType = false;
for (let type of previewType.value) {
if (type == fileType) {
isFileType = true;
break;
}
}
if (!isFileType) {
message.error('上传文件类型异常');
}
return isFileType;
};
// 向父元素抛出的方法和属性
defineExpose({
preViewUrl,
handleOk,
createCode,
});
</script>
<style scoped>
.inputWidthCss1 {
width: 90%;
}
.inputWidthCss1 {
width: 90%;
}
.centerText {
width: 100%;
font-weight: bold;
line-height: 1.8rem;
display: flex;
justify-content: center;
align-items: center;
}
.centerText {
width: 100%;
font-weight: bold;
line-height: 1.8rem;
display: flex;
justify-content: center;
align-items: center;
}
.dwImg {
width: 10%;
height: 10%;
margin-left: 3%;
cursor: pointer !important;
}
.dwImg {
width: 10%;
height: 10%;
margin-left: 3%;
cursor: pointer !important;
}
:deep(.ant-select) {
width: 90%;
}
</style>
:deep(.ant-select) {
width: 90%;
}</style>

Write Preview
Loading…
Cancel
Save