From e660abd8722df82abd09fd142de61d541f0a5dec Mon Sep 17 00:00:00 2001
From: DIAMOND <276397553@qq.com>
Date: Thu, 4 Jan 2024 08:53:50 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=9D=E8=AF=95=E6=9B=B4=E6=8D=A2=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6EarthMapModal=20-=E3=80=8B<EarthComp=20/>?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../scene/model/sceneInfo/SenceInfo.vue       | 473 ++++++++++--------
 1 file changed, 255 insertions(+), 218 deletions(-)

diff --git a/src/views/military/modules/earthMap/scene/model/sceneInfo/SenceInfo.vue b/src/views/military/modules/earthMap/scene/model/sceneInfo/SenceInfo.vue
index 2e934de..6505bbf 100644
--- a/src/views/military/modules/earthMap/scene/model/sceneInfo/SenceInfo.vue
+++ b/src/views/military/modules/earthMap/scene/model/sceneInfo/SenceInfo.vue
@@ -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>