diff --git a/src/renderer/src/I18n/zh-CN.ts b/src/renderer/src/I18n/zh-CN.ts
index a1d57ea..79b84fa 100644
--- a/src/renderer/src/I18n/zh-CN.ts
+++ b/src/renderer/src/I18n/zh-CN.ts
@@ -221,5 +221,9 @@ export default {
   graph: {
     title: '军标选择',
     setting: '默认军标参数设置'
+  },
+  photo: {
+    title: '图标选择',
+    setting: '默认图标参数设置'
   }
 }
diff --git a/src/renderer/src/icons/svg/fk.svg b/src/renderer/src/icons/svg/fk.svg
new file mode 100644
index 0000000..35e3bd0
--- /dev/null
+++ b/src/renderer/src/icons/svg/fk.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M5.99922 11.1518C5.76367 11.1518 5.5375 11.058 5.36992 10.8916L1.10781 6.62949C0.760938 6.28145 0.760938 5.71895 1.10781 5.3709L5.36992 1.10879C5.71797 0.761914 6.28047 0.761914 6.62852 1.10879L10.8906 5.3709C11.057 5.5373 11.1508 5.76348 11.1508 6.0002C11.1508 6.23574 11.057 6.46191 10.8906 6.62949L6.62852 10.8916C6.46094 11.058 6.23477 11.1518 5.99922 11.1518ZM2.99453 6.0002L5.99922 9.00488L9.00391 6.0002L5.99922 2.99551L2.99453 6.0002Z"   fill="#00FFFF" ></path></svg>
\ No newline at end of file
diff --git a/src/renderer/src/views/components/headers/components/setPup/components/graphLabelManage.vue b/src/renderer/src/views/components/headers/components/setPup/components/graphLabelManage.vue
index 1178539..77d3de5 100644
--- a/src/renderer/src/views/components/headers/components/setPup/components/graphLabelManage.vue
+++ b/src/renderer/src/views/components/headers/components/setPup/components/graphLabelManage.vue
@@ -691,7 +691,7 @@ onMounted(() => {
   color: var(--el-color-primary);
 }
 ::v-deep .el-scrollbar {
-  height: 360px !important;
+  height: 380px !important;
   overflow: auto;
 }
 .el-card {
diff --git a/src/renderer/src/views/components/headers/components/setPup/components/modelManage.vue b/src/renderer/src/views/components/headers/components/setPup/components/modelManage.vue
index 71e96bf..ec57aa0 100644
--- a/src/renderer/src/views/components/headers/components/setPup/components/modelManage.vue
+++ b/src/renderer/src/views/components/headers/components/setPup/components/modelManage.vue
@@ -84,7 +84,7 @@
                 <el-image
                   style="width: 80px; height: 60px"
                   :src="'http://127.0.0.1:8848' + row.poster"
-                  fit="cover"
+                  fit="contain"
                 />
               </template>
             </el-table-column>
@@ -379,7 +379,7 @@ const allowDrag = (draggingNode: Node) => {
 //拖拽结束
 
 //---------------------查看缩略图--------------------
-var showImageRow:any = null
+var showImageRow: any = null
 const showImage = (row: any) => {
   showImageRow = row
   eventBus.emit('imagePopDialog', row)
@@ -701,7 +701,7 @@ onMounted(() => {
   color: var(--el-color-primary);
 }
 ::v-deep .el-scrollbar {
-  height: 360px !important;
+  height: 380px !important;
   overflow: auto;
 }
 .el-card {
diff --git a/src/renderer/src/views/components/headers/components/setPup/components/photoManage.vue b/src/renderer/src/views/components/headers/components/setPup/components/photoManage.vue
index 3296008..603cb50 100644
--- a/src/renderer/src/views/components/headers/components/setPup/components/photoManage.vue
+++ b/src/renderer/src/views/components/headers/components/setPup/components/photoManage.vue
@@ -92,32 +92,40 @@
             <el-table-column type="index" label="序号" width="60" align="center" />
             <el-table-column prop="iconName" label="名称" />
             <el-table-column prop="thumbnail" label="缩略图" width="100">
-              <template #default="{ row }" v-if="activeIndex === 2">
+              <template #default="{ row, $index }" v-if="activeIndex === 2">
                 <el-image
                   ref="imageRef"
                   fit="contain"
                   :preview-teleported="true"
-                  :preview-src-list="['http://127.0.0.1:8848' + row.data]"
+                  :preview-src-list="modelList.map((item) => 'http://127.0.0.1:8848' + item.data)"
                   style="width: 80px; height: 60px"
                   :src="'http://127.0.0.1:8848' + row.data"
+                  :initial-index="currentIndex"
+                  @click="seeBigPhoto($index)"
                 />
               </template>
-              <template #default="{ row }" v-else>
+              <template #default="{ row, $index }" v-else>
                 <el-image
                   ref="imageRef"
                   fit="contain"
                   :preview-teleported="true"
-                  :preview-src-list="['http://localhost:55110/' + row.data]"
+                  :preview-src-list="modelList.map((item) => 'http://localhost:55110/' + item.data)"
                   style="width: 80px; height: 60px"
                   :src="'http://localhost:55110/' + row.data"
+                  :initial-index="currentIndex"
+                  @click="seeBigPhoto($index)"
                 />
               </template>
             </el-table-column>
             <el-table-column label="操作">
-              <template #default="{ row }">
-                <el-button size="small" @click="reviewPhoto">预览</el-button>
-                <el-button size="small" @click="editPhotoName(row)">修改名称</el-button>
-                <el-button size="small" @click="handleDelete(row)">删除</el-button>
+              <template #default="{ row, $index }">
+                <el-button size="small" @click="reviewPhoto($index)">预览</el-button>
+                <el-button size="small" v-if="activeIndex === 2" @click="editPhotoName(row)"
+                  >修改名称</el-button
+                >
+                <el-button size="small" v-if="activeIndex === 2" @click="handleDelete(row)"
+                  >删除</el-button
+                >
               </template>
             </el-table-column>
             <template #empty>
@@ -150,7 +158,13 @@
         </span>
       </template>
     </el-dialog>
-    <input ref="fileInput" type="file" hidden @change="handleFileChange" accept=".jpg,.jpeg,.png" />
+    <input
+      ref="fileInput"
+      type="file"
+      hidden
+      @change="handleFileChange"
+      accept=".jpg,.jpeg,.png,.gif"
+    />
   </div>
 </template>
 
@@ -214,10 +228,14 @@ const typeClick = (index) => {
 }
 
 const treeRef = ref()
-
-const reviewPhoto = () => {
+var currentIndex = ref(0)
+const reviewPhoto = (index) => {
+  currentIndex.value = index
   imageRef.value!.showPreview()
 }
+const seeBigPhoto = (index) => {
+  currentIndex.value = index
+}
 // @ts-ignore
 var sortableInstance: any = reactive(null)
 
@@ -306,7 +324,6 @@ const getModelList = async () => {
     if (res.code == 0 || res.code == 200) {
       let data = transformNestedJson(res.data, 'name', 'label')
       typeTreeData.value = data
-      console.log(typeTreeData.value, 'klklk')
     }
   }
 }
@@ -438,7 +455,7 @@ const allowDrag = (draggingNode: Node) => {
 //拖拽结束
 
 //---------------------查看缩略图--------------------
-var showImageRow:any = null
+var showImageRow: any = null
 const showImage = (row: any) => {
   showImageRow = row
   eventBus.emit('imagePopDialog', row)
@@ -500,7 +517,6 @@ const toggleExpand = (row: any) => {
 }
 const getModelListByType = async (id) => {
   if (activeIndex.value === 0) {
-    await nextTick()
     modelList.value = threePhoto
   } else if (activeIndex.value === 1) {
     modelList.value = ordinaryPhoto
@@ -551,7 +567,7 @@ const handleMenuCommand = (command: string) => {
   }
 }
 
-var clickTreeNode:any = null
+var clickTreeNode: any = null
 const handleTypeClick = (row: any) => {
   getModelListByType(row.id)
   currentTypeId.value = row.$treeNodeId
@@ -603,7 +619,7 @@ const handleRenameType = (row: TypeNode) => {
   dialogVisible.value = true
 }
 
-var clickPhotoRow:any = null
+var clickPhotoRow: any = null
 const editPhotoName = (row) => {
   dialogTitle.value = '图标重命名'
   modelType.value = row.iconName
@@ -747,8 +763,8 @@ const handleDelete = (row: any) => {
     .catch(() => {})
 }
 //立体图标、普通图标
-let threePhoto:any = []
-let ordinaryPhoto:any = []
+let threePhoto: any = []
+let ordinaryPhoto: any = []
 
 const setPhotoList = () => {
   $sendElectronChanel('requireGEMarkerName', {
@@ -756,7 +772,6 @@ const setPhotoList = () => {
     dirName1s: 'GEMarker1s'
   })
   $recvElectronChanel('dirFiles', (e, res) => {
-    console.log(res, e, 'resxxxx')
     res.GEMarker1s.forEach((item) => {
       let name = item.split('.')[0]
       name = name.split('/')[1]
@@ -764,7 +779,6 @@ const setPhotoList = () => {
         iconName: name,
         data: item
       })
-      console.log(threePhoto, 'threePhoto')
     })
     res.GEMarker.forEach((item) => {
       let name = item.split('.')[0]
@@ -814,7 +828,7 @@ onMounted(() => {
   color: var(--el-color-primary);
 }
 ::v-deep .el-scrollbar {
-  height: 360px !important;
+  height: 380px !important;
   overflow: auto;
 }
 .el-card {
diff --git a/src/renderer/src/views/components/propertyBox/graph.vue b/src/renderer/src/views/components/propertyBox/graph.vue
index 88dbd77..74fac0c 100644
--- a/src/renderer/src/views/components/propertyBox/graph.vue
+++ b/src/renderer/src/views/components/propertyBox/graph.vue
@@ -76,7 +76,7 @@
                   <div class="imgbg">
                     <el-image
                       :src="'http://127.0.0.1:8848' + model.data"
-                      fit="cover"
+                      fit="contain"
                       class="thumbnail"
                     >
                       <template #error>
@@ -138,7 +138,19 @@ let observer: IntersectionObserver | null = null
 
 const treeRef: any = ref('')
 watch(modelName, (val) => {
-  treeRef.value!.filter(val)
+  if (treeRef.value && treeRef.value !== '') {
+    treeRef.value!.filter(val)
+  }
+})
+
+watch(isShowPup, (val) => {
+  if (!val) {
+    modelName.value = ''
+    activeTab.value = '0'
+    treeRef.value = ''
+    activeIndex.value = null
+    categories.value = []
+  }
 })
 
 const filterNode: any = (value, data) => {
@@ -308,7 +320,7 @@ const renderModel = async (model) => {
         cusUpdateNode({ id: params.id, sourceName: params.name, params: JSON.stringify(params) })
       })
 
-      let DbOption:any = {
+      let DbOption: any = {
         params: option,
         id,
         sourceName: model.militaryName,
@@ -653,6 +665,9 @@ defineExpose({
   height: 30px;
   line-height: 30px;
   text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 
   color: rgba(255, 255, 255, 1);
 }
@@ -662,6 +677,7 @@ defineExpose({
 .model-item {
   border-radius: 8px;
   overflow: hidden;
+  width: 70px;
   /* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); */
 }
 .model-item:hover {
diff --git a/src/renderer/src/views/components/propertyBox/model.vue b/src/renderer/src/views/components/propertyBox/model.vue
index 1d7615c..1cf8e22 100644
--- a/src/renderer/src/views/components/propertyBox/model.vue
+++ b/src/renderer/src/views/components/propertyBox/model.vue
@@ -76,7 +76,7 @@
                   <div class="imgbg">
                     <el-image
                       :src="'http://127.0.0.1:8848' + model.poster"
-                      fit="cover"
+                      fit="contain"
                       class="thumbnail"
                     >
                       <template #error>
@@ -136,8 +136,22 @@ const loading = ref(false)
 let observer: IntersectionObserver | null = null
 
 const treeRef: any = ref('')
+
 watch(modelName, (val) => {
-  treeRef.value!.filter(val)
+  if (treeRef.value && treeRef.value !== '') {
+    treeRef.value!.filter(val)
+  }
+})
+
+watch(isShowPup, (val) => {
+  if (!val) {
+    modelName.value = ''
+    activeTab.value = '0'
+    treeRef.value = ''
+    activeIndex.value = null
+    addType.value = ''
+    categories.value = []
+  }
 })
 
 const filterNode: any = (value, data) => {
@@ -262,7 +276,11 @@ const modelClick = (index, row) => {
   // }
 
   // 轨迹运动选择模型
-  if(selectCallback && typeof selectCallback === 'function' && addType.value === 'trajectoryMotion'){
+  if (
+    selectCallback &&
+    typeof selectCallback === 'function' &&
+    addType.value === 'trajectoryMotion'
+  ) {
     selectCallback('http://127.0.0.1:8848' + row.data)
     close()
     return
@@ -329,7 +347,7 @@ const renderModel = async (data, model) => {
       }
       let Model = await new YJ.Obj.Model(window.earth, option)
 
-      let DbOption:any = {
+      let DbOption: any = {
         params: option,
         id,
         sourceName: model.modelName + index,
@@ -424,7 +442,7 @@ eventBus.on('closeModelSet', (data) => {
 })
 
 //查看是否有设置模型设置
-var isSetting:any = null
+var isSetting: any = null
 const getSetting = () => {
   ModelApi.getModelSetting().then((res) => {
     if (res.code == 0 || res.code == 200) {
@@ -446,7 +464,7 @@ const setting = () => {
   eventBus.emit('openModelSetting', (true, isSetting))
 }
 
-let selectCallback:any = null
+let selectCallback: any = null
 
 defineExpose({
   open,
@@ -698,6 +716,9 @@ defineExpose({
   height: 30px;
   line-height: 30px;
   text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 
   color: rgba(255, 255, 255, 1);
 }
@@ -707,6 +728,7 @@ defineExpose({
 .model-item {
   border-radius: 8px;
   overflow: hidden;
+  width: 70px;
   /* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); */
 }
 .model-item:hover {
diff --git a/src/renderer/src/views/components/propertyBox/photo.vue b/src/renderer/src/views/components/propertyBox/photo.vue
new file mode 100644
index 0000000..49add7e
--- /dev/null
+++ b/src/renderer/src/views/components/propertyBox/photo.vue
@@ -0,0 +1,859 @@
+<template>
+  <div class="set_pup">
+    <el-dialog v-model="isShowPup" :modal="false" draggable>
+      <template #header>
+        <div class="set_pup_header">
+          <div class="system_title">
+            {{ t('photo.title') }}
+          </div>
+        </div>
+      </template>
+      <div class="set_detail">
+        <div class="top">
+          <div>
+            <el-input
+              v-model="modelName"
+              class="w-50 m-2"
+              placeholder="请输入图标名称进行搜索"
+              :suffix-icon="Search"
+            />
+          </div>
+          <div class="typeBut">
+            <span
+              v-for="(item, index) in butList"
+              :key="index"
+              :class="{ clickButClass: butActiveIndex === index }"
+              @click="typeClick(index)"
+              >{{ item }}</span
+            >
+          </div>
+        </div>
+        <div class="content">
+          <!-- 左侧Tab导航 -->
+          <div class="treeCon">
+            <el-tree
+              style="max-width: 600px"
+              :data="typeTreeData"
+              ref="treeRef"
+              node-key="id"
+              @node-click="handleTypeClick"
+              :filter-node-method="filterNode"
+            >
+              <template #default="{ node, data }">
+                <!-- <span> {{ node.label }}</span> -->
+
+                <span
+                  :class="{
+                    'primary-type': !(node.childNodes.length != 0),
+                    'selected-text': node.id === currentTypeId
+                  }"
+                  @click.stop="toggleExpand(node)"
+                  class="allowDrag"
+                >
+                  <svg-icon
+                    :name="node.expanded ? 'arrow' : 'more'"
+                    :size="12"
+                    color="rgba(0, 255, 255, 1)"
+                    style="margin-right: 5px; margin-left: 5px"
+                    v-if="node.childNodes.length != 0"
+                    @click.stop="toggleExpand(node)"
+                  ></svg-icon>
+                  {{ node.label }}</span
+                >
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="model-gallery" ref="galleryRef">
+            <div class="model-section" v-if="butActiveIndex === 2">
+              <!-- <h2 class="section-title">{{ categories[Number(currentTypeId)].name }}</h2> -->
+              <div class="model-grid">
+                <div
+                  v-for="(model, mIndex) in categories"
+                  :key="mIndex"
+                  class="model-item"
+                  @click="modelClick(mIndex, model)"
+                >
+                  <div class="imgbg">
+                    <el-image
+                      :src="'http://127.0.0.1:8848' + model.data"
+                      fit="contain"
+                      class="thumbnail"
+                    >
+                      <template #error>
+                        <div class="image-error">加载失败</div>
+                      </template>
+                    </el-image>
+                  </div>
+
+                  <div
+                    class="model-name"
+                    :class="{ isactive: activeIndex == mIndex }"
+                    :title="model.iconName"
+                  >
+                    {{ model.iconName }}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 基础类型 -->
+            <div class="model-section2" v-else>
+              <!-- <h2 class="section-title">{{ categories[Number(currentTypeId)].name }}</h2> -->
+              <div class="typeTitltName" v-if="categories.length">
+                <svg-icon
+                  name="fk"
+                  :size="16"
+                  color="rgba(0, 255, 255, 1)"
+                  style="margin-right: 5px"
+                ></svg-icon
+                >基本类型
+              </div>
+              <div class="model-grid">
+                <div
+                  v-for="(model, mIndex) in categories"
+                  :key="mIndex"
+                  class="model-item"
+                  @click="modelClick(mIndex, model)"
+                >
+                  <div class="imgbg">
+                    <el-image
+                      :src="'http://localhost:55110/' + model.data"
+                      fit="contain"
+                      class="thumbnail"
+                    >
+                      <template #error>
+                        <div class="image-error">加载失败</div>
+                      </template>
+                    </el-image>
+                  </div>
+
+                  <div
+                    class="model-name"
+                    :class="{ isactive: activeIndex == mIndex }"
+                    :title="model.iconName"
+                  >
+                    {{ model.iconName }}
+                  </div>
+                </div>
+              </div>
+            </div>
+            <!-- <div v-show="loading" class="loading-more">加载中...</div> -->
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { Search } from '@element-plus/icons-vue'
+import { ref, reactive, onMounted, onBeforeUnmount, watch } from 'vue'
+import { PhotoApi } from '@/api/photo/index'
+import type { TabsPaneContext } from 'element-plus'
+import { useTreeNode } from '../tree/hooks/treeNode'
+import { TreeApi } from '@/api/tree'
+import {
+  $sendElectronChanel,
+  $recvElectronChanel,
+  $changeComponentShow
+} from '@/utils/communication'
+const { t } = useI18n()
+const { findParentId, findTreeIndex, cusAddNodes } = useTreeNode()
+const isShowPup = ref(false)
+const eventBus: any = inject('bus')
+const { cusUpdateNode } = useTreeNode()
+var modelName = ref('')
+
+//tab
+interface Model {
+  id: string
+  name: string
+  thumbnail: string
+}
+
+interface Category {
+  id: string
+  militaryName: string
+  poster: string
+  data: string
+}
+
+// 模拟数据
+const categories = ref<any>([])
+
+const activeTab = ref('0')
+const galleryRef = ref<HTMLElement>()
+const loading = ref(false)
+let observer: IntersectionObserver | null = null
+
+const treeRef: any = ref('')
+watch(modelName, (val) => {
+  if (treeRef.value && treeRef.value !== '') {
+    treeRef.value?.filter(val)
+  }
+})
+watch(isShowPup, (val) => {
+  if (!val) {
+    modelName.value = ''
+    treeRef.value = ''
+    activeTab.value = '0'
+    butActiveIndex.value = 0
+    activeIndex.value = null
+    categories.value = []
+  }
+})
+
+const filterNode: any = (value, data) => {
+  if (!value) return true
+  return data.label.includes(value)
+}
+
+//按钮
+var butActiveIndex = ref(0)
+var butList = reactive(['立体图标', '普通图标', '自定义图标'])
+const typeClick = (index) => {
+  butActiveIndex.value = index
+  categories.value = []
+  getModelList()
+}
+
+// 处理Tab点击
+const handleTabClick = (tab: TabsPaneContext) => {
+  const section = document.querySelector(`.model-section[data-category="${tab.index}"]`)
+  section?.scrollIntoView({ behavior: 'smooth' })
+}
+
+// 初始化交叉观察器
+const initObserver = () => {
+  observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          const categoryIndex = parseInt(entry.target.getAttribute('data-category') || '0')
+          activeTab.value = categoryIndex.toString()
+
+          // 加载更多检测
+          if (categoryIndex === categories.value.length - 1 && entry.intersectionRatio > 0.5) {
+            loadMoreData()
+          }
+        }
+      })
+    },
+    {
+      threshold: [0, 0.5, 1]
+    }
+  )
+
+  document.querySelectorAll('.model-section').forEach((section) => {
+    observer?.observe(section)
+  })
+}
+
+// 模拟加载更多数据
+const loadMoreData = () => {
+  if (loading.value) return
+  loading.value = true
+  setTimeout(() => {
+    categories.value.push({
+      id: `${categories.value.length + 1}`,
+      name: `新增分类_${categories.value.length}`,
+      models: Array(10)
+        .fill(0)
+        .map((_, i) => ({
+          id: `n${i}`,
+          name: `新增图标_${i}`,
+          thumbnail: `https://picsum.photos/300/200?random=${i + 100}`
+        }))
+    })
+    loading.value = false
+  }, 1000)
+}
+
+// 滚动时检测可见区域
+const handleScroll = () => {
+  if (!galleryRef.value) return
+
+  const scrollPosition = galleryRef.value.scrollTop + 100
+  const sections = Array.from(document.querySelectorAll('.model-section'))
+
+  sections.forEach((section, index) => {
+    const rect = section.getBoundingClientRect()
+    if (rect.top <= 450 && rect.bottom >= 450) {
+      activeTab.value = index.toString()
+    }
+  })
+}
+
+//-----------tree-----------
+const currentTypeId = ref<string>('')
+var activeIndex: any = ref(null)
+
+interface TypeNode {
+  id: string
+  label: string
+  parentId: string | null
+  children?: TypeNode[]
+}
+
+const typeTreeData = ref<TypeNode[]>([])
+const toggleExpand = (row: any) => {
+  if (row.childNodes.length != 0) {
+    // row._expanded = !row._expanded
+    // 这里需要调用el-table的toggleRowExpansion方法
+    // 需要通过ref获取table实例
+    // tableRef.value?.toggleRowExpansion(row, row._expanded)
+
+    if (row.expanded) {
+      row.collapse()
+    } else {
+      row.expand()
+    }
+  }
+  getModelListByType(row.data.id)
+  currentTypeId.value = row.id
+  // loadModelsByType(row.id)
+}
+
+const handleTypeClick = (row: any) => {
+  getModelListByType(row.id)
+  currentTypeId.value = row.$treeNodeId
+}
+
+let typeArr = {
+  point: '点',
+  line: '线',
+  area: '面'
+}
+
+const modelClick = (index, row) => {
+  activeIndex.value = index
+  isShowPup.value = false
+  console.log(row, '点中了')
+}
+
+const getModelListByType = (id) => {
+  if (butActiveIndex.value === 0) {
+    categories.value = threePhoto
+  } else if (butActiveIndex.value === 1) {
+    categories.value = ordinaryPhoto
+  } else {
+    let formData = new FormData()
+    formData.append('iconTypeId', id)
+    PhotoApi.showModelByType(formData).then((res) => {
+      categories.value = res.data
+    })
+  }
+}
+
+const getModelList = async () => {
+  if (butActiveIndex.value !== 2) {
+    typeTreeData.value = [
+      {
+        id: '1121',
+        label: '基本类型',
+        parentId: null
+      }
+    ]
+  } else {
+    const res: any = await PhotoApi.modelTypeList()
+    if (res.code == 0 || res.code == 200) {
+      let data = transformNestedJson(res.data, 'name', 'label')
+      typeTreeData.value = data
+    }
+  }
+}
+
+const transformNestedJson = (data, oldKey, newKey) => {
+  if (Array.isArray(data)) {
+    return data.map((item) => transformNestedJson(item, oldKey, newKey))
+  } else if (data && typeof data === 'object') {
+    const newObj = {}
+    for (const key in data) {
+      // 替换键名
+      const currentKey = key === oldKey ? newKey : key
+      // 递归处理子元素
+      newObj[currentKey] = transformNestedJson(data[key], oldKey, newKey)
+    }
+    return newObj
+  }
+  return data
+}
+
+onMounted(() => {
+  initObserver()
+})
+
+onBeforeUnmount(() => {
+  observer?.disconnect()
+})
+//end
+
+eventBus.on('openPhoto', (data) => {
+  isShowPup.value = data
+  if (data) {
+    getModelList()
+    getSetting()
+    setPhotoList()
+  }
+})
+eventBus.on('closeModelSet', (data) => {
+  isShowPup.value = data
+  if (data) {
+    getSetting()
+  }
+})
+
+//立体图标、普通图标
+let threePhoto: any = []
+let ordinaryPhoto: any = []
+
+const setPhotoList = () => {
+  $sendElectronChanel('requireGEMarkerName', {
+    dirName: 'GEMarker',
+    dirName1s: 'GEMarker1s'
+  })
+  $recvElectronChanel('dirFiles', (e, res) => {
+    res.GEMarker1s.forEach((item) => {
+      let name = item.split('.')[0]
+      name = name.split('/')[1]
+      threePhoto.push({
+        iconName: name,
+        data: item
+      })
+    })
+    res.GEMarker.forEach((item) => {
+      let name = item.split('.')[0]
+      name = name.split('/')[1]
+      ordinaryPhoto.push({
+        iconName: name,
+        data: item
+      })
+    })
+  })
+}
+
+//查看是否有设置图标设置
+var isSetting = null
+const getSetting = () => {
+  // ModelApi.getModelSetting().then((res) => {
+  //   if (res.code == 0 || res.code == 200) {
+  //     isSetting = res.data[res.data.length - 1]
+  //   }
+  // })
+}
+const open = () => {
+  isShowPup.value = true
+}
+const close = () => {
+  isShowPup.value = false
+}
+const setting = () => {
+  isShowPup.value = false
+  // @ts-ignore
+  eventBus.emit('openGraphSetting', (true, isSetting))
+}
+
+defineExpose({
+  open,
+  close
+})
+</script>
+
+<style lang="scss" scoped>
+.set_pup {
+  width: 40vw;
+  height: 50vh;
+  :deep(.el-dialog) {
+    background:
+      linear-gradient(180deg, rgba(0, 255, 255, 0.2) 0%, rgba(0, 255, 255, 0) 100%),
+      rgba(0, 0, 0, 0.6);
+    border: 1px solid #00c9ff;
+    padding-left: 0 !important;
+  }
+  :deep(.el-dialog__body) {
+    padding: 0 !important;
+  }
+  :deep(.el-dialog__headerbtn) {
+    height: 30px;
+    width: 30px;
+    border-bottom-left-radius: 80%;
+    background-color: #008989;
+    &:hover {
+      background-color: #00ffff;
+      .el-dialog__close {
+        color: rgba(0, 66, 66, 1); // 悬停时改变关闭图标为红色
+      }
+    }
+  }
+  :deep(.el-dialog__headerbtn .el-dialog__close) {
+    color: #fff;
+  }
+  .set_pup_header {
+    width: 100%;
+    height: 100%;
+    // background-color: #00ffff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-bottom: 20px;
+    .system_title {
+      background: url('@/assets/images/titlebg.png') no-repeat;
+      background-size: 100% 100%;
+      width: 229px;
+      height: 34px;
+      line-height: 34px;
+      text-align: center;
+      font-family: 'alimamashuheiti';
+      font-size: 18px;
+      color: #fff;
+      font-weight: 700;
+    }
+  }
+  .set_detail {
+    box-sizing: border-box;
+    // height: 50vh;
+    :deep(
+      .el-tabs--left .el-tabs__active-bar.is-left,
+      .el-tabs--left .el-tabs__active-bar.is-right,
+      .el-tabs--right .el-tabs__active-bar.is-left,
+      .el-tabs--right .el-tabs__active-bar.is-right
+    ) {
+      width: 3px;
+      background: rgba(0, 255, 255, 1);
+      height: 40px !important;
+    }
+
+    :deep(
+      .el-tabs--left .el-tabs__nav-wrap.is-left::after,
+      .el-tabs--left .el-tabs__nav-wrap.is-right::after,
+      .el-tabs--right .el-tabs__nav-wrap.is-left::after,
+      .el-tabs--right .el-tabs__nav-wrap.is-right::after
+    ) {
+      width: 3px;
+    }
+
+    :deep(.el-tabs__nav-wrap::after) {
+      background: rgba(204, 204, 204, 0.5);
+      border-radius: 4px;
+    }
+
+    // .switchmy {
+    //   display: flex;
+    //   flex-wrap: wrap;
+    //   margin-top: 15px;
+
+    //   .center {
+    //     width: 33%;
+    //     margin-bottom: 15px;
+    //   }
+    // }
+    :deep(.el-tabs__content) {
+      height: 50vh;
+      width: 80%;
+      padding: 0 10px;
+      overflow: hidden;
+      overflow-y: scroll;
+      color: #fff;
+    }
+
+    // 美化滚动条
+    :deep(.el-tabs__content::-webkit-scrollbar) {
+      width: 5px;
+      height: 5px;
+    }
+    :deep(.el-tabs__content::-webkit-scrollbar-thumb) {
+      background-color: #0ff;
+      border-radius: 5px;
+    }
+    :deep(.el-tabs__content::-webkit-scrollbar-track) {
+      background-color: rgba(0, 255, 255, 0.2);
+    }
+    :deep(.el-tabs__item) {
+      width: 8vw;
+      color: #fff !important;
+      font-size: 1.1rem;
+      font-family: 黑体;
+      font-weight: 500;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 3px;
+      box-sizing: border-box;
+    }
+    :deep(.el-tabs__item:hover) {
+      background: linear-gradient(
+        90deg,
+        rgba(0, 255, 255, 0) 0%,
+        rgba(0, 255, 255, 0.5) 48.91%,
+        rgba(0, 255, 255, 0) 100%
+      );
+      border: 1px solid;
+      box-sizing: border-box;
+      border-image: linear-gradient(
+          90deg,
+          rgba(0, 255, 255, 0) 0%,
+          rgba(0, 255, 255, 1) 55.55%,
+          rgba(0, 255, 255, 0) 100%
+        )
+        1;
+    }
+    :deep(.el-tabs__item.is-active) {
+      background: linear-gradient(
+        90deg,
+        rgba(0, 255, 255, 0) 0%,
+        rgba(0, 255, 255, 0.5) 48.91%,
+        rgba(0, 255, 255, 0) 100%
+      ) !important;
+      border: 0.1px solid;
+      // box-sizing: border-box;
+      border-image: linear-gradient(
+          90deg,
+          rgba(0, 255, 255, 0) 0%,
+          rgba(0, 255, 255, 1) 55.55%,
+          rgba(0, 255, 255, 0) 100%
+        )
+        1 !important;
+    }
+    :deep(.el-tabs__header) {
+      height: 50vh !important;
+      width: 8vw;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+    :deep(.el-tabs__nav-next, .el-tabs__nav-prev) {
+      color: #fff;
+    }
+  }
+  .el-input {
+    width: 300px;
+    margin-left: 30px;
+
+    --el-input-placeholder-color: rgba(173, 241, 255, 1) !important;
+    --el-input-placeholder-font-size: 14px;
+    --el-input-text-color: #fff;
+    --el-input-border-color: rgba(var(--color-sdk-base-rgb), 0.5) !important;
+    --el-input-hover-border-color: rgba(var(--color-sdk-base-rgb), 0.5) !important;
+    --el-input-focus-border-color: rgba(var(--color-sdk-base-rgb), 0.5) !important;
+  }
+  ::v-deep .el-input__wrapper {
+    background-color: rgba(0, 0, 0, 0.5) !important;
+  }
+  .btn {
+    float: right;
+    height: 32px;
+    line-height: 32px;
+    background: rgba(var(--color-sdk-base-rgb), 0.2) !important;
+    border: 1px solid rgba(var(--color-sdk-base-rgb), 0.5) !important;
+    border-radius: 4px;
+    color: #fff !important;
+    padding: 0 15px;
+  }
+  .btn:hover {
+    color: rgba(var(--color-sdk-base-rgb), 1) !important;
+    border: 1px solid rgba(var(--color-sdk-base-rgb), 1) !important;
+    .setIcon {
+      color: rgba(var(--color-sdk-base-rgb), 1) !important;
+    }
+  }
+
+  .content {
+    margin-top: 20px;
+    height: 400px;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+.model-container {
+  display: flex;
+  height: 100vh;
+}
+.model-tabs {
+  width: 130px;
+  height: 100%;
+  float: left;
+}
+.treeCon {
+  width: 140px;
+  height: 100%;
+  float: left;
+  border-right: 1px solid rgba(204, 204, 204, 0.2);
+}
+.model-gallery {
+  flex: 1;
+  /* padding: 20px; */
+  overflow-y: auto;
+  height: 100%;
+  width: calc(100% - 160px);
+  float: left;
+  margin-left: 10px;
+}
+.model-section {
+  min-height: 10vh;
+  margin-bottom: 40px;
+}
+.model-grid {
+  display: flex;
+  flex-wrap: wrap;
+  /* justify-content: space-around; */
+  gap: 20px;
+}
+.model-name {
+  width: 100%;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  color: rgba(255, 255, 255, 1);
+}
+.isactive {
+  color: rgba(var(--color-sdk-base-rgb), 1) !important;
+}
+.model-item {
+  border-radius: 8px;
+  overflow: hidden;
+  width: 70px;
+  /* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); */
+}
+.model-item:hover {
+  cursor: pointer !important;
+  color: rgba(var(--color-sdk-base-rgb), 1) !important;
+  .model-name {
+    color: rgba(var(--color-sdk-base-rgb), 1) !important;
+  }
+}
+
+.imgbg {
+  width: 70px;
+  height: 70px;
+  background: url('@/assets/images/model-bg.png') no-repeat;
+  background-size: 100% 100%;
+}
+.model-section2 {
+  .imgbg {
+    background: unset;
+  }
+}
+.thumbnail {
+  width: 64px;
+  height: 64px;
+  margin-left: 3px;
+  margin-top: 3px;
+}
+.loading-more {
+  text-align: center;
+  padding: 20px;
+}
+
+::v-deep .el-tabs__content {
+  display: none !important;
+}
+/* 修改滚动条轨道的颜色 */
+::v-deep ::-webkit-scrollbar-track {
+  background: rgba(var(--color-sdk-base-rgb), 0.1) !important;
+}
+/* 修改滚动条滑块的样式 */
+::v-deep ::-webkit-scrollbar-thumb {
+  background: rgba(var(--color-sdk-base-rgb), 1) !important;
+  border-radius: 10px;
+}
+
+/* 当滑块被激活（用户点击或拖动时） */
+::v-deep ::-webkit-scrollbar-thumb:hover {
+  background: rgba(var(--color-sdk-base-rgb), 1) !important;
+}
+</style>
+<style>
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+/* 定义背景颜色和圆角 */
+::-webkit-scrollbar-thumb {
+  border-radius: 1em;
+  background-color: rgba(50, 50, 50, 0.3);
+}
+/* //定义滚动条轨道 内阴影+圆角 */
+::-webkit-scrollbar-track {
+  border-radius: 1em;
+  background-color: rgba(50, 50, 50, 0.1);
+}
+
+/* tree */
+.el-tree-node__content > .el-tree-node__expand-icon {
+  display: none !important;
+}
+.el-tree {
+  background: transparent !important;
+  --el-tree-node-hover-bg-color: rgba(var(--color-sdk-base-rgb), 0.2) !important;
+  color: rgba(255, 255, 255, 1) !important;
+  /* font-size: 12px !important; */
+  width: 130px;
+  float: left;
+  margin-left: 10px;
+}
+::v-deep .el-text {
+  color: rgba(255, 255, 255, 1) !important;
+  font-size: 12px !important;
+}
+.selected-text {
+  color: rgba(var(--color-sdk-base-rgb), 1) !important; /* Element UI主色，可自定义 */
+}
+::v-deep .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+  border-right: 1px solid rgba(var(--color-sdk-base-rgb), 0.2) !important;
+}
+.typeBut {
+  left: 527px;
+  top: 3764px;
+  width: 217px;
+  height: 32px;
+  opacity: 1;
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  span {
+    display: block;
+    width: 90px;
+    height: 32px;
+    opacity: 1;
+    border-radius:
+      0px 4px,
+      4px,
+      0px;
+    background: rgba(0, 255, 255, 0.2);
+    border: 1px solid rgba(0, 255, 255, 0.1);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 4px 5px 4px 5px;
+    font-size: 12px;
+    cursor: pointer;
+    color: #fff;
+  }
+  span:hover {
+    color: rgba(var(--color-sdk-base-rgb), 1);
+    border: 1px solid rgba(var(--color-sdk-base-rgb), 1);
+    border-radius: 4px;
+  }
+}
+.clickButClass {
+  color: rgba(var(--color-sdk-base-rgb), 1);
+  border: 1px solid rgba(var(--color-sdk-base-rgb), 1) !important;
+  border-radius: 4px;
+}
+.top {
+  display: flex;
+  justify-content: space-between;
+}
+.typeTitltName {
+  font-size: 16px;
+  font-weight: 400;
+  letter-spacing: 0px;
+  color: rgba(0, 255, 255, 1);
+}
+</style>
diff --git a/src/renderer/src/views/home/index.vue b/src/renderer/src/views/home/index.vue
index 9bb0f80..f27f8c7 100644
--- a/src/renderer/src/views/home/index.vue
+++ b/src/renderer/src/views/home/index.vue
@@ -11,8 +11,14 @@
   <firstMenu class="absolute zIndex9" ref="firstMenuRef"></firstMenu>
   <!--底部菜单-->
   <bottomMenu class="absolute zIndex9" ref="bottomMenuRef"></bottomMenu>
-  <input type="file" id="fileInputlink" style="display: none" multiple accept=".jpeg,.png,.jpg,.mp4,.pdf"
-    @input="uploadFile" />
+  <input
+    type="file"
+    id="fileInputlink"
+    style="display: none"
+    multiple
+    accept=".jpeg,.png,.jpg,.mp4,.pdf"
+    @input="uploadFile"
+  />
 
   <!-- 多点视线分析 -->
   <Visibility ref="visibility"></Visibility>
@@ -37,6 +43,7 @@
   <model ref="Model"></model>
   <graph ref="Graph"></graph>
   <graphSetting ref="graphsetting"></graphSetting>
+  <photo ref="Photo"></photo>
 
   <!-- 图标列表 -->
   <selectImg ref="selectImgRef"></selectImg>
@@ -112,10 +119,10 @@ import particleEffects from '../components/propertyBox/particleEffects.vue'
 import flyLine from '../components/propertyBox/flyLine.vue'
 import explosion from '../components/propertyBox/explosion.vue'
 
-
 import graphObject from '../components/propertyBox/graphObject.vue'
 import graph from '../components/propertyBox/graph.vue'
 import graphSetting from '../components/propertyBox/graphSetting.vue'
+import photo from '../components/propertyBox/photo.vue'
 
 import { GisApi } from '@/api/gisApi'
 
@@ -415,9 +422,9 @@ const getStatus = (time) => {
   const currentTimestamp = Date.now()
 
   if (timestamp > currentTimestamp) {
-    ; (window as any).checkAuthIsValid = true
+    ;(window as any).checkAuthIsValid = true
   } else {
-    ; (window as any).checkAuthIsValid = false
+    ;(window as any).checkAuthIsValid = false
   }
 }