Merge branch 'ft' into 'main_dev'

feat(src/packages): 优化三维模型拖动时，webgl上下文丢失问题

See merge request yunteng/thingskit-view!134

@@ -111,7 +111,7 @@ export const getVideoUrl = (id: string) =>
   })
 
 //获取行政区域
-export const getGeoJsonMap = (code: number, level: string) =>
+export const getGeoJsonMap = (code: number | string, level: string) =>
   defHttp.get({
     url: `${Api.GEOJSONURL}${code}/${level}`
   })

@@ -14,6 +14,26 @@ export const enum areaEnum {
   TOWN = 'TOWN' //镇
 }
 
+//父级地区编码和级别接口
+export interface HistoryParentType {
+  adcode: string | number
+  level: string
+}
+
+//数据源接口
+export interface dataPointI {
+  name: string
+  value: number[]
+  adcode: number
+  height: number
+  itemStyle: {
+    color: string
+    opacity: number
+    borderWidth: number
+    borderColor: string
+  }
+}
+
 export const includes = []
 
 export const option = {
@@ -41,6 +61,9 @@ export const option = {
     emphasis: {
       label: {
         show: true,
+        formatter: function (params: Recordable) {
+          return params.data.name ? params.data.name : ' '
+        },
         textStyle: {
           color: '#000',
           fontSize: 14
@@ -59,6 +82,9 @@ export const option = {
       regionHeight: 3,
       label: {
         show: true,
+        formatter: function (params: Recordable) {
+          return params.data.name ? params.data.name : ' '
+        },
         textStyle: {
           color: '#fff',
           fontSize: 14

@@ -12,7 +12,7 @@ import { onMounted, ref, nextTick, PropType, toRefs, watch, reactive } from 'vue
 import * as echarts from 'echarts'
 import { registerMap } from 'echarts/core'
 import 'echarts-gl'
-import config, { areaEnum } from './config'
+import config, { areaEnum, dataPointI, HistoryParentType } from './config'
 import { getGeoJsonMap } from '@/api/external/common'
 import dataMaps from './data.json'
 
@@ -73,28 +73,26 @@ props.chartConfig.option = {
 
 //地图点击返回
 const watchAdcode = async () => {
+  stopWatch()
   if (props.chartConfig.option.drillingIn) {
     //如果是从右边配置里设置的，比如点击四川省，然后点击返回
     const savePopParent = saveHistoryParent.value.pop()
-    let saveAdcode: any = savePopParent?.adcode
-    saveLevelStr.level = savePopParent?.level as string
+    let saveAdcode = savePopParent?.adcode as string | number
+    saveLevelStr.level = savePopParent?.level
     if (!savePopParent) {
       saveAdcode = getParentAdcode(props.chartConfig.option.mapRegion.adcode)
-      saveLevelStr.level = (regionMapParentArea as any)[props.chartConfig.option.mapRegion.saveSelect.levelStr]
+      saveLevelStr.level = (regionMapParentArea as Recordable)[props.chartConfig.option.mapRegion.saveSelect.levelStr]
     }
     if (saveAdcode === 0) {
       saveAdcode = 'china'
       saveLevelStr.level = 'COUNTRY'
     }
-    await getGeojson(saveAdcode)
+    const exist = await getGeojson(saveAdcode)
     const adcode = saveAdcode === 100000 ? 'china' : saveAdcode
-    props.chartConfig.option.geo3D.map = adcode
-    props.chartConfig.option.series.forEach((item: any) => {
-      if (item.type === 'map3D') item.map = adcode
-      item.data = props.chartConfig.option.dataset
-    })
-    handleSetOption(chartInstance.value, props.chartConfig.option)
-    handleDataPoint(adcode)
+    if (exist) {
+      //fix解决点击下钻返回后页面为空问题
+      props.chartConfig.option.mapRegion.adcode = adcode
+    }
   }
 }
 
@@ -106,46 +104,40 @@ const regionMapParentArea = {
 }
 
 //地图点击
-const handleMap3DClick = async (params: any) => {
+const handleMap3DClick = async (params: Recordable) => {
   if (props.chartConfig.option.drillingIn) {
     const { name } = params
-    saveGeojson.value?.features.forEach((item: any) => {
+    saveGeojson.value?.features.forEach((item: Recordable) => {
       if (item.properties.name === name) {
         const level = item.properties.level.toUpperCase()
         const adcode = item.properties.adcode
         if (level === 'DISTRICT') return
-        if(String(adcode).startsWith('15') && level===areaEnum.CITY) return
+        if (String(adcode).startsWith('15') && level === areaEnum.CITY) return
         props.chartConfig.option.mapRegion.adcode = adcode
         saveLevelStr.level = level
         handleDataPoint(adcode)
         saveHistoryParent.value.push({
           adcode: item.properties.parent.adcode,
-          level: (regionMapParentArea as any)[level]
+          level: (regionMapParentArea as Recordable)[level]
         })
       }
     })
   }
 }
 
-const saveGeojson: any = ref({}) // 保存geojson
+const saveGeojson: Recordable = ref({}) // 保存geojson
 
 const chinaDefaultRegionId = ref(100000) //如果是china则adcode为100000
 
-const saveLevelStr = reactive({
-   // 地区级别
-   level: ''
+// 保存地区级别
+const saveLevelStr = reactive<{ level: string | undefined }>({
+  level: ''
 })
 
-//父级地区编码和级别接口
-interface HistoryParentType {
-  adcode: number
-  level: string
-}
-
 const saveHistoryParent = ref<HistoryParentType[]>([])
 
 //动态注册地图
-const getGeojson = (regionId: any) => {
+const getGeojson = (regionId: number | string) => {
   try {
     return new Promise<boolean>(resolve => {
       const { levelStr } = props.chartConfig.option.mapRegion.saveSelect //右侧配置项获取的行政级别
@@ -171,11 +163,10 @@ const getGeojson = (regionId: any) => {
   }
 }
 
-
 //传adcode 获取上级
 const getParentAdcode = (adcode: number) => {
   let adcodeNum = 100000
-  saveGeojson.value?.features.forEach((item: any) => {
+  saveGeojson.value?.features.forEach((item: Recordable) => {
     if (item.properties.adcode === adcode) {
       adcodeNum = item.properties.parent.adcode
     }
@@ -200,13 +191,13 @@ const initMap = async () => {
   await nextTick().then(() => {
     handleSetOption(chartInstance.value, props.chartConfig.option)
   })
-  chartInstance.value.on('click', (e: any) => {
+  chartInstance.value.on('click', (e: Recordable) => {
     handleMap3DClick(e)
   })
 }
 
 // 手动触发渲染
-const handleSetOption = (instance: any, option: any) => {
+const handleSetOption = (instance: any, option: Recordable) => {
   if (!instance) return
   try {
     instance.clear()
@@ -221,22 +212,22 @@ onMounted(() => {
 })
 
 //处理数据标点
-const handleDataPoint = (newData: any) => {
+const handleDataPoint = (newData: string | number) => {
   if (newData === 'china') {
     props.chartConfig.option.dataset = dataMaps
   } else {
-    props.chartConfig.option.dataset = dataMaps.filter((item: any) => item.adcode === newData)
+    props.chartConfig.option.dataset = dataMaps.filter((item: dataPointI) => item.adcode === newData)
   }
 }
 
 //监听地图展示区域发生变化
 watch(
   () => `${props.chartConfig.option.mapRegion.adcode}`,
-  async (newData: any) => {
+  async (newData: string | number) => {
     try {
       await getGeojson(newData)
       props.chartConfig.option.geo3D.map = newData
-      props.chartConfig.option.series.forEach((item: any) => {
+      props.chartConfig.option.series.forEach((item: Recordable) => {
         if (item.type === 'map3D') {
           item.map = newData
           item.data = props.chartConfig.option.dataset
@@ -254,7 +245,7 @@ watch(
 )
 
 // 监听地图右侧配置项变化
-watch(
+const stopWatch = watch(
   props.chartConfig.option,
   async newData => {
     try {
@@ -273,7 +264,7 @@ watch(
   () => props.chartConfig.option.dataset,
   newData => {
     try {
-      props.chartConfig.option.series.forEach((item: any) => {
+      props.chartConfig.option.series.forEach((item: Recordable) => {
         if (item.type === 'map3D') {
           item.data = newData
         }

@@ -129,7 +129,7 @@ const loadList = async () => {
 }
 
 const handleSubmit = () => {
-  searchParams.deviceProfileIds = [searchParams.deviceProfileIds] as any
+  // searchParams.deviceProfileIds = [searchParams.deviceProfileIds] as any
   emit('searchParams', searchPage, searchParams)
   handleCancel()
 }

@@ -88,10 +88,11 @@ export const option = {
     amapLon: 104.108689,
     amapLat: 30.66176,
     amapZindex: 11,
-    typeMarker: '',
+    iconMarker: '1.png',
     mpBorderConfig: {
-      value: 'Border01',
+      value: 'Border01'
     },
+    bgColor: 'rgba(255, 255, 255, 0.1)',
     marker: {
       fillColor: '#E98984FF',
       fillOpacity: 0.5,

@@ -81,8 +81,8 @@
           size="small"
           placeholder="请选择您要使用的图标"
           style="width: 250px"
-          :value="typeMarkerValue"
-          :options="typeMarkerOptions"
+          :value="iconMarkerValue"
+          :options="iconMarkerOptions"
           :render-label="renderOption"
           clearable
           filterable
@@ -92,16 +92,6 @@
     </setting-item-box>
     <setting-item-box name="弹窗选择" v-if="optionData.mapOptions.mapMarkerType === MarkerEnum.MARKER">
       <setting-item name="弹窗选择">
-        <!-- <NSelect
-          size="small"
-          placeholder="请选择您要使用的弹窗"
-          style="width: 250px"
-          :value="mapSelectBorderValue"
-          :options="mapSelectBorderOption.option"
-          @update:value="mapSelectBorderHandle"
-          clearable
-          filterable
-        /> -->
         <NSelect
           size="small"
           placeholder="请选择您要使用的弹窗"
@@ -115,11 +105,16 @@
         />
       </setting-item>
     </setting-item-box>
+    <setting-item-box name="弹窗背景" v-if="optionData.mapOptions.mapMarkerType === MarkerEnum.MARKER">
+      <div style="width: 10vw">
+        <n-color-picker :modes="['rgb']" v-model:value="optionData.mapOptions.bgColor" size="small"></n-color-picker>
+      </div>
+    </setting-item-box>
   </collapse-item>
 </template>
 
 <script setup lang="ts">
-import { PropType, ref, computed, h, onMounted, reactive } from 'vue'
+import { PropType, ref, computed, h, onMounted } from 'vue'
 import { option, MarkerEnum, ThemeEnum, LangEnum, ViewModeEnum, FeaturesEnum } from './config'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { NEllipsis, NImage, NSelect, NSpace, SelectOption } from 'naive-ui'
@@ -234,7 +229,7 @@ const featuresOptions = [
 const MarkerOptions = [
   // {
   //   value: MarkerEnum.CIRCLE_MARKER,
-  //   label: '圆形标点'
+  //   label: '圆形标点' //在地图里点击无效，所以注释，有需要自行打开即可
   // },
   {
     value: MarkerEnum.MARKER,
@@ -246,17 +241,7 @@ const MarkerOptions = [
   }
 ]
 
-onMounted(() => {
-  props.optionData.mapOptions.typeMarker = getMarkerImagePath(props.optionData.mapOptions.typeMarker || 'position1.png')
-  typeMarkerValue.value = props.optionData.mapOptions.typeMarker || 'position1.png'
-  mapSelectBorderValue.value =
-    `${props.optionData.mapOptions.mpBorderConfig.value.toLocaleLowerCase()}.png` || 'border01.png'
-})
-
-const typeMarkerValue = ref<string | null>('position1.png')
-
-const mapSelectBorderValue = ref<string | null>('border01.png')
-
+/**通用函数封装 */
 const isHref = (url: string) => {
   try {
     new URL(url)
@@ -265,81 +250,86 @@ const isHref = (url: string) => {
     return false
   }
 }
+const renderCommonOption = (option: SelectOption, src: string) => {
+  return h(NSpace, { justify: 'space-between', style: 'padding: 0 15px; height: 28px; line-height: 28px;' }, () => [
+    h(NImage, {
+      width: 25,
+      src,
+      previewDisabled: true,
+      style: { height: '25px' }
+    } as Recordable),
+    h(NEllipsis, null, () => option.label)
+  ])
+}
+const getImagePath = (path: string, name: string) => {
+  return isHref(name) ? name : new URL(`${path}/${name}`, import.meta.url).href
+}
+/** */
+
+/** 图标选择 */
+const iconMarkerValue = ref<string | null>('1.png')
 
-// import.meta.glob 这个不能封装，必须是字符串，不能通过传值传进去
-const typeMarkerOptions = computed(() => {
+// import.meta.glob 这里没有封装，不能通过传值传进去
+const iconMarkerOptions = computed(() => {
   const pathList = import.meta.glob('./images/marker/*')
   return Object.keys(pathList).map(item => {
     const imgName = item.split('/').at(-1)
     return {
       label: imgName,
       value: imgName
-    } as SelectOption
+    }
   })
 })
 //
 
-const getMarkerImagePath = (name: string) => {
-  return isHref(name) ? name : new URL(`./images/marker/${name}`, import.meta.url).href
-}
+const getMarkerImagePath = (name: string) => getImagePath('./images/marker', name)
 
-const renderOption = (option: SelectOption) => {
-  return h(NSpace, { justify: 'space-between', style: 'padding: 0 15px; height: 28px; line-height: 28px;' }, () => [
-    h(NImage, {
-      width: 25,
-      src: getMarkerImagePath(option.value as string),
-      previewDisabled: true,
-      style: { height: '25px' }
-    } as Recordable),
-    h(NEllipsis, null, () => option.label)
-  ])
-}
+const renderOption = (option: SelectOption) => renderCommonOption(option, getMarkerImagePath(option.value as string))
 
 const selectHandle = (value: string) => {
-  typeMarkerValue.value = value
-  props.optionData.mapOptions.typeMarker = getMarkerImagePath(value)
+  iconMarkerValue.value = value
+  props.optionData.mapOptions.iconMarker = getMarkerImagePath(value)
 }
+/** */
+
+/** 弹窗选择 */
+const mapSelectBorderValue = ref<string | null>('border01.png')
 
 const needBorder = ['border01.png', 'border02.png', 'border03.png', 'border05.png', 'border07.png']
 
-// import.meta.glob 这个不能封装，必须是字符串，不能通过传值传进去
+// import.meta.glob 这里没有封装，不能通过传值传进去
 const mapBorderOptions = computed(() => {
   const pathList = import.meta.glob('../../../../../../assets/images/chart/decorates/*')
   return Object.keys(pathList)
     .map(item => {
       const imgName = item.split('/').at(-1) as string
-      if (needBorder.includes(imgName)) {
-        return {
-          label: imgName,
-          value: imgName
-        } as SelectOption
-      }
+      if (!needBorder.includes(imgName)) return
+      return {
+        label: imgName,
+        value: imgName
+      } as SelectOption
     })
     .filter(Boolean) as SelectOption[]
 })
 //
 
-const getMapBorderImagePath = (name: string) => {
-  return isHref(name) ? name : new URL(`../../../../../../assets/images/chart/decorates/${name}`, import.meta.url).href
-}
+const getMapBorderImagePath = (name: string) => getImagePath('../../../../../../assets/images/chart/decorates', name)
 
-const renderMapBorderOption = (option: SelectOption) => {
-  return h(NSpace, { justify: 'space-between', style: 'padding: 0 15px; height: 28px; line-height: 28px;' }, () => [
-    h(NImage, {
-      width: 25,
-      src: getMapBorderImagePath(option.value as string),
-      previewDisabled: true,
-      style: { height: '25px' }
-    } as Recordable),
-    h(NEllipsis, null, () => option.label)
-  ])
-}
+const renderMapBorderOption = (option: SelectOption) =>
+  renderCommonOption(option, getMapBorderImagePath(option.value as string))
 
 const selectMapBorderHandle = (value: string) => {
   mapSelectBorderValue.value = value
   const toLowerValue = value.toLocaleLowerCase()
   ;(props.optionData.mapOptions.mpBorderConfig as BaseSelectBorderIF) = {
-    value: toLowerValue[0]?.toUpperCase() + toLowerValue?.substr(1)?.split('.')[0]
-  }
+    value: toLowerValue[0]?.toUpperCase() + toLowerValue?.substring(1)?.split('.')[0]
+  } //这里首字母转大写，动态引入时匹配对应目录也是大写字母开头，即components\Decorates\Borders\Border01
 }
+/** */
+
+onMounted(() => {
+  iconMarkerValue.value = props.optionData.mapOptions.iconMarker?.split('/')?.at(-1) as string
+  props.optionData.mapOptions.iconMarker = getMarkerImagePath(iconMarkerValue.value)
+  mapSelectBorderValue.value = `${props.optionData.mapOptions.mpBorderConfig.value?.toLocaleLowerCase()}.png`
+})
 </script>

 <template>
   <div @mouseenter="handleMouseenter" @mouseleave="handleMouseleave" class="chart-amap" ref="vChartRef">
-    <div v-show="showSearchBox" @click.stop="handleOpenSearchBox" class="search-box"></div>
-    <search-box :modelShow="modelShow" @searchParams="handleSearchParams" @closeDrawer="handleCloseDrawer"></search-box>
+    <!-- <div v-show="showSearchBox" @click.stop="handleOpenSearchBox" class="search-box"></div>
+    <search-box :modelShow="modelShow" @searchParams="handleSearchParams" @closeDrawer="handleCloseDrawer"></search-box> -->
   </div>
 </template>
 
@@ -16,7 +16,7 @@ import { isArray } from '@/utils'
 import djh from './images/djh.png'
 import online from './images/online.png'
 import lx1 from './images/lx1.png'
-import positionImg from './images/marker/position1.png'
+import onLineImg from './images/marker/3.png'
 import { getDeviceActiveTime, getDeviceList } from '@/api/external/common/index'
 import dayjs from 'dayjs'
 import SearchBox from './components/SearchBox.vue'
@@ -32,7 +32,7 @@ const modelShow = ref(false)
 
 const showSearchBox = ref(false)
 
-let {
+const {
   amapKey,
   amapStyleKey,
   amapLon,
@@ -46,8 +46,9 @@ let {
   pitch,
   skyColor,
   marker,
-  typeMarker,
-  mpBorderConfig
+  iconMarker,
+  mpBorderConfig,
+  bgColor
 } = toRefs(props.chartConfig.option.mapOptions)
 
 //官方没有高德地图api的ts，所以类型全用的any
@@ -104,7 +105,7 @@ const createInfoWindow = async (extraInfo: dataExtraInfoType) => {
     const res = await getDeviceActiveTime(tbDeviceId) //查询设备最后离线时间
     let { lastUpdateTs } = res[0]
     const lastUpdateFormatTs = dayjs(lastUpdateTs).format('YYYY-MM-DD HH:mm:ss')
-    //render方式渲染小组件里的边框组件
+    //以render方式渲染小组件里的边框组件
     const BorderInstance = await import(`../../../../Decorates/Borders/${mpBorderConfig.value.value}/index.vue`)
     const config = await import(`../../../../Decorates/Borders/${mpBorderConfig.value.value}/config.ts`)
     const BorderConfigInstance = new config.default()
@@ -132,7 +133,7 @@ const createInfoWindow = async (extraInfo: dataExtraInfoType) => {
           </div>
           <div style="color:white;">所属组织：${organizationDTO.name}</div>
           <div style="margin-top:6px;color:white">接入协议：${deviceProfile.transportType}</div>
-          <div style="margin-top:6px;color:white">
+          <div style="margin-top:6px;color:white;width:15vw;text-overflow: ellipsis;overflow: hidden; word-break: break-all;white-space: nowrap;">
             设备位置：${!deviceInfo.address ? '该设备暂无地理位置' : deviceInfo.address}
           </div>
           <div style="margin-top:6px;color:white">
@@ -158,10 +159,15 @@ const handleCloseDrawer = () => (modelShow.value = false)
 
 const handleSearchParams = async (searchPage: any, params: any) => {
   try {
+    Object.keys(params).forEach(item => {
+      if (!params[item]) Reflect.deleteProperty(params, item)
+    })
     const { items } = await getDeviceList(searchPage, params)
     const values = filterDevice(items)
     if (!values) return
-    dataHandle(values)
+    setTimeout(() => {
+      dataHandle(values)
+    }, 1000)
   } finally {
     handleCloseDrawer()
   }
@@ -198,10 +204,11 @@ const dataHandle = (newData: dataJsonType) => {
     // 记录新标记
     if (mapMarkerType.value === MarkerEnum.MARKER) {
       newData.markers.forEach((markerItem: dataJsonMarkersType) => {
+        const { deviceState } = markerItem.extraInfo
         const markerInstance = new AMapIns.Marker({
           position: [markerItem.position[0], markerItem.position[1]],
           offset: new AMapIns.Pixel(-13, -30),
-          icon: typeMarker.value || positionImg
+          icon: deviceState === 'ONLINE' ? onLineImg : iconMarker.value
         })
         // markers.push(markerInstance) 原作者这种方式添加，属于JS API 1.4.8版本的
         // markerInstance.setMap(mapIns)
@@ -255,7 +262,9 @@ watch(
 // 预览
 useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
   stopWatch()
-  dataHandle(newData)
+  setTimeout(() => {
+    dataHandle(newData)
+  }, 1000)
 })
 </script>
 
@@ -271,15 +280,9 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
 }
 .amap-info-content .go-border-box {
   position: absolute;
-  transform: scale(0.7);
+  transform: scale(0.68);
   top: -10px;
-  /* opacity: 0,8; */
-  /* background-color: rgba(0, 0, 0, 0.1); */
-  background-color:rgba(255,255,255,0.1)
-}
-.amap-info-content .go-border-box svg {
-  /* background-color: rgba(0, 0, 0, 0.1); */
-  /* background-color: rgba(255, 255, 255, 0.8); */
+  background-color: v-bind(bgColor);
 }
 </style>
 <style lang="scss" scoped>

@@ -5,7 +5,7 @@ import cloneDeep from 'lodash/cloneDeep'
 import { chartInitConfig } from '@/settings/designSetting'
 
 export const option = {
-  dataset: [new URL('/src/assets/external/three/test.obj', import.meta.url).href],//三维数据源
+  dataset: [new URL('/src/assets/external/three/test.obj', import.meta.url).href], //三维数据源
   backgroundColor: '', //场景背景色
   backgroundAlpha: 0, //场景透明度
   enableDamping: false, //是否启用阻尼
@@ -18,7 +18,9 @@ export const option = {
    */
   outputEncoding: 'liner',
   clearScene: false, //是否清空场景内容
-  lights: [//灯光为数组，type 为 环境光(AmbientLight) | 方向光(DirectionalLight) | 点光(PointLight) | 半球光(HemisphereLight)
+  lightInput: 1,
+  lights: [
+    //灯光为数组，type 为 环境光(AmbientLight) | 方向光(DirectionalLight) | 点光(PointLight) | 半球光(HemisphereLight)
     {
       type: 'AmbientLight',
       label: '环境光(只有颜色)',
@@ -54,38 +56,41 @@ export const option = {
     size: 1,
     show: false
   },
-  position: [//模型位置
+  position: [
+    //模型位置
     {
       x: 0,
       y: 0,
       z: 0
     }
   ],
-  rotation: [//模型旋转
+  rotation: [
+    //模型旋转
     {
       x: 0,
       y: 0,
       z: 0
     }
   ],
-  showFps:false,//是否显示fps
-  labels:[ //添加图片/文字标签，暂且支持文字
+  showFps: false, //是否显示fps
+  labels: [
+    //添加图片/文字标签，暂且支持文字
     {
-      image: "",
-      text: "",
+      image: '',
+      text: '',
       textStyle: {
-        fontFamily: "Arial",
+        fontFamily: 'Arial',
         fontSize: 18,
-        fontWeight: "normal",
+        fontWeight: 'normal',
         lineHeight: 1,
-        color: "#ffffff",
+        color: '#ffffff',
         borderWidth: 8,
         borderRadius: 4,
-        borderColor: "rgba(0,0,0,1)",
-        backgroundColor: "rgba(0, 0, 0, 1)"
+        borderColor: 'rgba(0,0,0,1)',
+        backgroundColor: 'rgba(0, 0, 0, 1)'
       },
-      position: {x:0, y:0, z:0},
-      scale:{x:1, y:1, z:0},
+      position: { x: 0, y: 0, z: 0 },
+      scale: { x: 1, y: 1, z: 0 },
       sid: null
     }
   ]

@@ -11,15 +11,15 @@
         <n-input-number :min="0" v-model:value="optionData.borderConfig.size" size="small" />
       </setting-item>
     </setting-item-box>
-    <setting-item-box  name="上传文件">
+    <setting-item-box name="上传文件">
       <setting-item>
         <FileUpload
-        :max="100"
-        :fileList="optionData.dataset"
-        :threeSupportFileFormat="threeSupportFileFormat"
-        :singleFileType="singleFileTypeNotMtl"
-        @fileStaticUri="handleFileStaticUri"
-      />
+          :max="100"
+          :fileList="optionData.dataset"
+          :threeSupportFileFormat="threeSupportFileFormat"
+          :singleFileType="singleFileTypeNotMtl"
+          @fileStaticUri="handleFileStaticUri"
+        />
       </setting-item>
     </setting-item-box>
     <setting-item-box :alone="true">
@@ -78,8 +78,13 @@
         </template>
       </setting-item>
     </setting-item-box>
+    <setting-item-box name="灯光选择">
+      <setting-item name="灯光选择((0,环境光),(1,方向光),(2,点光),(3,半球光))">
+        <n-input-number :min="0" :max="3" v-model:value="optionData.lightInput" size="small" />
+      </setting-item>
+    </setting-item-box>
     <setting-item-box name="灯光配置">
-      <setting-item v-for="(item, index) in optionData.lights" :name="item.label" :key="index">
+      <setting-item v-for="(item, index) in [optionData.lights[optionData.lightInput]]" :name="item.label" :key="index">
         <n-color-picker
           v-if="!includeHemisphereLight.includes(item.type)"
           size="small"
@@ -180,15 +185,9 @@
       <SettingItem v-if="optionData.enableDamping" name="阻尼值">
         <n-input-number v-model:value="optionData.dampingFactor" :min="0" :max="1" size="small"></n-input-number>
       </SettingItem>
-      <SettingItem name="启用动画">
-        <n-switch v-model:value="optionData.autoPlay" size="small" />
-      </SettingItem>
-      <SettingItem name="输出编码">
+      <SettingItem name="输出编码，可取值为 liner 或 sRGB。linear 是 LinearEncoding 线性编码, sRGB 即 sRGBEncoding rgb 模式编码（sRGBEncoding 能更好的还原材质颜色）">
         <n-select v-model:value="optionData.outputEncoding" size="small" :options="encodinghList"></n-select>
       </SettingItem>
-      <SettingItem name="是否清空场景">
-        <n-switch @change="handleChange" v-model:value="optionData.clearScene" size="small" />
-      </SettingItem>
     </setting-item-box>
   </collapse-item>
 </template>
@@ -253,10 +252,6 @@ const encodinghList = [
   { label: 'sRGB ', value: 'sRGB ' }
 ]
 
-const handleChange = (e: boolean) => {
-  if (e) props.optionData.dataset = ['']
-}
-
 const handleFileStaticUri = (value: UploadFileInfo[]) => {
   props.optionData.dataset = value.map(item => item?.url)?.filter(Boolean) as any
   if (Array.isArray(props.optionData.dataset) && props.optionData.dataset.length === 0) {

 <template>
-  <div class="go-content-box" :style="{ border: !borderConfig.show ? 'none' : ''}">
-    <div v-if="useDetectWebGLContext()">
+  <div class="go-content-box" :style="{ border: !borderConfig.show ? 'none' : '' }">
+    <div>
       <vue3dLoader
         ref="vue3dLoaderRef"
         :webGLRendererOptions="webGLRendererOptions"
@@ -20,7 +20,7 @@
         @load="onLoad"
         :position="position"
         :rotation="rotation"
-        :lights="lights"
+        :lights="[lights[lightInput]]"
         :showFps="showFps"
         :labels="labels"
       />
@@ -29,15 +29,13 @@
         <n-progress type="line" :color="themeColor" :percentage="process" :indicator-placement="'inside'" processing />
       </div>
     </div>
-    <div v-else>您的浏览器不支持WebGL!</div>
   </div>
 </template>
 <script setup lang="ts">
-import { PropType, toRefs, ref, nextTick, computed, watch } from 'vue'
+import { PropType, toRefs, ref, nextTick, computed } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { vue3dLoader } from 'vue-3d-loader'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
-import { useDetectWebGLContext } from '@/utils/external/useSupportWebGL'
 
 const designStore = useDesignStore()
 
@@ -54,7 +52,6 @@ const themeColor = computed(() => {
 
 const vue3dLoaderRef = ref(null)
 
-//threejs配置
 const webGLRendererOptions = {
   alpha: true, // 透明
   antialias: true, // 抗锯齿
@@ -96,13 +93,9 @@ const {
   rotation,
   lights,
   showFps,
-  labels
-} = toRefs(props.chartConfig.option) as any
-
-watch(dataset, (newData: string) => {
-  //dateset为空则清除场景
-  if(!newData) clearScene.value=true
-})
+  labels,
+  lightInput
+} = toRefs(props.chartConfig.option)  as any
 </script>
 
 <style lang="scss" scoped>

 <template>
   <div>
     <n-tree
+      ref="nTreeRef"
       :accordion="treeConfig.accordion"
       :checkable="treeConfig.checkable"
       :default-expand-all="treeConfig.defaultExpandAll"
@@ -11,17 +12,20 @@
       label-field="name"
       children-field="children"
       @update:selected-keys="onClick"
+      @update:checked-keys="onClick"
+      :checked-keys="checkedKeys"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-import { PropType, toRefs } from 'vue'
+import { PropType, toRefs, ref } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartInteract } from '@/hooks/external/useChartSelectInteract.hook'
 import { InteractEventOn } from '@/enums/eventEnum'
 import { ComponentInteractParamsEnum } from './interact'
+import { NTree } from 'naive-ui'
 
 const props = defineProps({
   chartConfig: {
@@ -32,7 +36,16 @@ const props = defineProps({
 
 const { dataset, treeConfig } = toRefs(props.chartConfig.option)
 
+const nTreeRef = ref<null | InstanceType<typeof NTree>>(null)
+
+const checkedKeys = ref([])
+
 const onClick = (v: string[]) => {
+  // nTreeRef.value?.selectedKeys(v)
+  console.log(nTreeRef.value)
+  console.log(v)
+  // nTreeRef.value?.onUpdateCheckedKeys(v)
+  if (Array.isArray(v) && v.length == 0) return
   useChartInteract(
     props.chartConfig,
     useChartEditStore,