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

Write Preview
Loading…
Cancel
Save