perf(external/Composes): 三维模型新增可以自定义上传

-import { defHttp } from "@/utils/external/http/axios";
-import { DictItem, UploadResponse } from "./model";
+import { defHttp } from '@/utils/external/http/axios'
+import { DictItem, UploadResponse } from './model'
 
 enum Api {
   GET_DICT = '/dict_item',
-  UPLOAD = '/oss/upload'
+  UPLOAD = '/oss/upload',
+  DOWNLOAD = '/oss/download_file/'
 }
 
 export const getDictItemByCode = (value: string) => {
@@ -21,3 +22,7 @@ export const upload = (file: FormData) => {
     params: file
   })
 }
+
+export const downloadFile = (fileName: string) => {
+  return defHttp.get({ url: `${Api.DOWNLOAD}${fileName}` })
+}

@@ -6,7 +6,7 @@ import { chartInitConfig } from '@/settings/designSetting'
 
 export const option = {
   //vue3dLoader支持数组或字符串，暂且绑定字符串，这个插件可以加载多个模型
-  dataset: 'src/assets/external/models/fbx/宿舍楼.fbx',
+  dataset: '',
   backgroundColor: '', //场景背景色
   backgroundAlpha: 0, //场景透明度
   enableDamping: false, //是否启用阻尼

 <template>
-  <collapse-item name="三维静态路径" :expanded="true">
-    <setting-item-box>
-      <setting-item name="路径">
+  <collapse-item name="三维配置" :expanded="true">
+    <setting-item-box name="文件上传" :alone="true">
+      <setting-item :name="fileSizeMsg">
+        <n-upload
+          :max="1"
+          :customRequest="customRequest"
+          :onBeforeUpload="beforeUploadHandle"
+          :default-file-list="defaultFileList"
+        >
+          <n-button> 上传文件</n-button>
+        </n-upload>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="静态路径">
+      <setting-item>
         <n-select
           @change="handlePathChange"
           style="width: 12vw"
@@ -12,9 +24,7 @@
         ></n-select>
       </setting-item>
     </setting-item-box>
-  </collapse-item>
-  <collapse-item name="三维配置属性" :expanded="true">
-    <setting-item-box>
+    <setting-item-box name="属性配置">
       <setting-item name="场景色(需要这种格式HEX #000000，否则失效)">
         <n-color-picker size="small" :show-alpha="false" v-model:value="optionData.backgroundColor"></n-color-picker>
       </setting-item>
@@ -24,19 +34,6 @@
       <SettingItem name="启用阻尼">
         <n-switch v-model:value="optionData.enableDamping" size="small" />
       </SettingItem>
-      <!-- <SettingItem name="选择灯光">
-        <setting-item name="灯光">
-          <n-select
-            @change="handleLightChange"
-            v-model:value="selectLight"
-            size="small"
-            :options="lightList"
-          ></n-select>
-        </setting-item>
-        <setting-item name="灯光颜色选择">
-          <n-color-picker size="small" :show-alpha="false" v-model:value="lightColor"></n-color-picker>
-        </setting-item>
-      </SettingItem> -->
       <SettingItem v-if="optionData.enableDamping" name="阻尼值">
         <n-input-number v-model:value="optionData.dampingFactor" :min="0" :max="1" size="small"></n-input-number>
       </SettingItem>
@@ -54,10 +51,13 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, h, ref, watch } from 'vue'
+import { PropType, h, ref, nextTick } from 'vue'
 import { option } from './config'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
-import { NEllipsis, NInputNumber, NSelect, NSpace, SelectOption } from 'naive-ui'
+import { NEllipsis, NInputNumber, NSelect, NSpace, SelectOption, NCard } from 'naive-ui'
+import { uploadFile } from '@/api/external/contentSave/content'
+import { downloadFile } from '@/api/external/common'
+import { UploadCustomRequestOptions } from 'naive-ui'
 
 const props = defineProps({
   optionData: {
@@ -66,6 +66,11 @@ const props = defineProps({
   }
 })
 
+const defaultFileList = ref([])
+
+//文件限制大小
+const fileSizeConst = ref(15)
+
 const handleChange = (e: boolean) => {
   if (e) props.optionData.dataset = ''
 }
@@ -79,44 +84,6 @@ const encodinghList = [
   { label: 'sRGB ', value: 'sRGB ' }
 ]
 
-/**
-环境光(AmbientLight) | 方向光(DirectionalLight) | 点光(PointLight) | 半球光(HemisphereLight)
-暂且支持 环境光
- */
-const lightList = [
-  {
-    type: 'AmbientLight',
-    value: 'AmbientLight',
-    label: '环境光'
-  }
-]
-
-const selectLight = ref('')
-
-const lightColor = ref('')
-
-const lightChange = (type: string, color: string) => {
-  props.optionData.lights = [
-    {
-      type,
-      color
-    }
-  ] as any
-}
-
-const handleLightChange = (e: string) => {
-  selectLight.value = e
-  lightChange(e, lightColor.value)
-}
-
-watch(
-  () => lightColor.value,
-  newValue => {
-    lightChange(selectLight.value, newValue)
-  }
-)
-
-//TODO:三维静态路径地址，无法通过import.meta.globEager来引入，要报错，待优化
 const pathList = [
   {
     label: '猫模型',
@@ -167,4 +134,55 @@ const renderOption = (option: SelectOption) => {
     h(NEllipsis, null, () => option.label)
   ])
 }
+
+const fileSizeMsg = ref(`文件需小于 ${fileSizeConst.value}M ，格式为${threeSupportFileFormat.join(',')}的文件`)
+
+const extname = (filename: string) => {
+  if (!filename || typeof filename != 'string') {
+    return false
+  }
+  let a = filename.split('').reverse().join('')
+  let b = a.substring(0, a.search(/\./)).split('').reverse().join('')
+  return b
+}
+
+// 上传图片前置处理
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-ignore
+const beforeUploadHandle = async ({ file }) => {
+  defaultFileList.value = []
+  const type = extname(file.file.name) as string
+  const size = file.file.size
+  if (size / (1024 * 1024) > fileSizeConst.value) {
+    window['$message'].warning(`文件超出 ${fileSizeConst.value}M限制，请重新上传！`)
+    return false
+  }
+  if (!threeSupportFileFormat.includes(type)) {
+    window['$message'].warning('文件格式不符合，请重新上传！')
+    return false
+  }
+  return true
+}
+
+// 自定义上传操作
+const customRequest = (options: UploadCustomRequestOptions) => {
+  const { file } = options
+  nextTick(async () => {
+    if (file.file) {
+      const formData = new FormData()
+      formData.append('file', file.file)
+      const uploadRes = await uploadFile(formData)
+      if (uploadRes) {
+        props.optionData.dataset = uploadRes?.fileStaticUri
+        const res = await downloadFile(uploadRes?.fileName)
+        console.log(res)
+        window['$message'].success('上传文件成功！')
+      }
+    } else {
+      window['$message'].error('上传文件失败，请稍后重试！')
+    }
+  })
+}
 </script>
+
+<style lang="scss" scoped></style>

 <template>
   <div class="go-content-box">
-    <!-- fix: 预览三维图像需加上preserveDrawingBuffer: true -->
     <div v-if="supportWebGL">
       <vue3dLoader
         ref="vue3dLoaderRef"
@@ -15,7 +14,7 @@
         :outputEncoding="outputEncoding"
         :clearScene="clearScene"
         :dampingFactor="dampingFactor"
-        :labels="labels"
+        :intersectRecursive="true"
         @process="onProcess"
         @load="onLoad"
         @click="onClick"
@@ -54,48 +53,10 @@ const vue3dLoaderRef = ref(null)
 const webGLRendererOptions = {
   alpha: true, // 透明
   antialias: true, // 抗锯齿
+  // fix: 预览三维图像需加上preserveDrawingBuffer: true
   preserveDrawingBuffer: true //缩略图生效需开启
 }
 
-//标注示例可以多个支持图片和文字
-const labels = ref()
-labels.value = [
-  {
-    text: 'co2浓度：44',
-    position: { x: 0, y: 18, z: 0 },
-    scale: { x: 11.5, y: 10.8, z: 30.5 },
-    textStyle: {
-      fontFamily: 'Arial',
-      fontSize: 12,
-      fontWeight: 600,
-      lineHeight: 1,
-      color: '#ffffff',
-      borderWidth: 8,
-      borderRadius: 0,
-      borderColor: '#000000',
-      backgroundColor: 'rgba(0,0,0,1)'
-    },
-    sid: 3 // 自定义标识，可有可无
-  },
-  {
-    text: '氧气浓度：100',
-    position: { x: 10, y: 18, z: 0 },
-    scale: { x: 11.5, y: 10.8, z: 30.5 },
-    textStyle: {
-      fontFamily: 'Arial',
-      fontSize: 12,
-      fontWeight: 600,
-      lineHeight: 1,
-      color: '#ffffff',
-      borderWidth: 8,
-      borderRadius: 0,
-      borderColor: '#000000',
-      backgroundColor: 'rgba(0,0,0,1)'
-    },
-    sid: 4 // 自定义标识，可有可无
-  }
-]
-
 //三维模型加载
 const show = ref(true)
 
@@ -109,7 +70,7 @@ const onLoad = async () => {
 const process = ref(0)
 
 const onProcess = (event: any) => {
-  process.value= Math.floor((event.loaded / event.total) * 100)
+  process.value = Math.floor((event.loaded / event.total) * 100)
 }
 
 const onClick = (event: any) => {