From 35924b1f8ef16736e8157924e2c988203d4e6315 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=8F=E5=A4=A7=E8=83=86?= <1101282782@qq.com>
Date: Thu, 25 Sep 2025 16:59:18 +0800
Subject: [PATCH 1/6] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../setPup/components/graphLabelManage.vue    |  2 +-
 .../setPup/components/modelManage.vue         |  4 +--
 .../setPup/components/photoManage.vue         | 34 +++++++++++++------
 3 files changed, 26 insertions(+), 14 deletions(-)

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 e58b969..36040b0 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
@@ -690,7 +690,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 1555390..0e5a800 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
@@ -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 9545327..dad515e 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>
@@ -214,10 +222,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)
 
@@ -813,7 +825,7 @@ onMounted(() => {
   color: var(--el-color-primary);
 }
 ::v-deep .el-scrollbar {
-  height: 360px !important;
+  height: 380px !important;
   overflow: auto;
 }
 .el-card {

From 3dc40a4f53cdd2e6cd8a7d661b09c07ba9fcbf75 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=8F=E5=A4=A7=E8=83=86?= <1101282782@qq.com>
Date: Thu, 25 Sep 2025 17:00:55 +0800
Subject: [PATCH 2/6] =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../setPup/components/photoManage.vue          | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

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 d7a5151..0907289 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
@@ -158,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>
 
@@ -450,7 +456,7 @@ const allowDrag = (draggingNode: Node) => {
 //拖拽结束
 
 //---------------------查看缩略图--------------------
-var showImageRow:any = null
+var showImageRow: any = null
 const showImage = (row: any) => {
   showImageRow = row
   eventBus.emit('imagePopDialog', row)
@@ -563,7 +569,7 @@ const handleMenuCommand = (command: string) => {
   }
 }
 
-var clickTreeNode:any = null
+var clickTreeNode: any = null
 const handleTypeClick = (row: any) => {
   getModelListByType(row.id)
   currentTypeId.value = row.$treeNodeId
@@ -615,7 +621,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
@@ -759,8 +765,8 @@ const handleDelete = (row: any) => {
     .catch(() => {})
 }
 //立体图标、普通图标
-let threePhoto:any = []
-let ordinaryPhoto:any = []
+let threePhoto: any = []
+let ordinaryPhoto: any = []
 
 const setPhotoList = () => {
   $sendElectronChanel('requireGEMarkerName', {

From b2f92d0c590bb954944c116182da4cb9b1508eb7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=8F=E5=A4=A7=E8=83=86?= <1101282782@qq.com>
Date: Thu, 25 Sep 2025 17:01:35 +0800
Subject: [PATCH 3/6] =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../headers/components/setPup/components/photoManage.vue       | 3 ---
 1 file changed, 3 deletions(-)

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 0907289..7b4d1a7 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
@@ -324,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')
     }
   }
 }
@@ -774,7 +773,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]
@@ -782,7 +780,6 @@ const setPhotoList = () => {
         iconName: name,
         data: item
       })
-      console.log(threePhoto, 'threePhoto')
     })
     res.GEMarker.forEach((item) => {
       let name = item.split('.')[0]

From 43e3e3d9afb1b1869c29e839c3f4fe339c772124 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=8F=E5=A4=A7=E8=83=86?= <1101282782@qq.com>
Date: Thu, 25 Sep 2025 18:43:02 +0800
Subject: [PATCH 4/6] =?UTF-8?q?=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/src/I18n/zh-CN.ts                |   4 +
 src/renderer/src/icons/svg/fk.svg             |   1 +
 .../setPup/components/modelManage.vue         |   2 +-
 .../setPup/components/photoManage.vue         |   1 -
 .../views/components/propertyBox/graph.vue    |   8 +-
 .../views/components/propertyBox/model.vue    |  18 +-
 .../views/components/propertyBox/photo.vue    | 859 ++++++++++++++++++
 src/renderer/src/views/home/index.vue         |  17 +-
 8 files changed, 896 insertions(+), 14 deletions(-)
 create mode 100644 src/renderer/src/icons/svg/fk.svg
 create mode 100644 src/renderer/src/views/components/propertyBox/photo.vue

diff --git a/src/renderer/src/I18n/zh-CN.ts b/src/renderer/src/I18n/zh-CN.ts
index 16f5c99..69fba62 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/modelManage.vue b/src/renderer/src/views/components/headers/components/setPup/components/modelManage.vue
index 018cfed..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>
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 7b4d1a7..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
@@ -517,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
diff --git a/src/renderer/src/views/components/propertyBox/graph.vue b/src/renderer/src/views/components/propertyBox/graph.vue
index 88dbd77..7e22939 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>
@@ -308,7 +308,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 +653,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 +665,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..a0173d7 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>
@@ -262,7 +262,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 +333,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 +428,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 +450,7 @@ const setting = () => {
   eventBus.emit('openModelSetting', (true, isSetting))
 }
 
-let selectCallback:any = null
+let selectCallback: any = null
 
 defineExpose({
   open,
@@ -698,6 +702,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 +714,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..0e386ae
--- /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.length !== '') {
+    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 6ae7df8..16637c6 100644
--- a/src/renderer/src/views/home/index.vue
+++ b/src/renderer/src/views/home/index.vue
@@ -10,8 +10,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>
@@ -36,6 +42,7 @@
   <model ref="Model"></model>
   <graph ref="Graph"></graph>
   <graphSetting ref="graphsetting"></graphSetting>
+  <photo ref="Photo"></photo>
 
   <!-- 图标列表 -->
   <selectImg ref="selectImgRef"></selectImg>
@@ -109,10 +116,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'
 
@@ -406,9 +413,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
   }
 }
 

From d00bdcdbbf5cd374c3916c2419a4fc268f1dee84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=8F=E5=A4=A7=E8=83=86?= <1101282782@qq.com>
Date: Thu, 25 Sep 2025 18:44:48 +0800
Subject: [PATCH 5/6] =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/src/views/components/propertyBox/photo.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/src/views/components/propertyBox/photo.vue b/src/renderer/src/views/components/propertyBox/photo.vue
index 0e386ae..49add7e 100644
--- a/src/renderer/src/views/components/propertyBox/photo.vue
+++ b/src/renderer/src/views/components/propertyBox/photo.vue
@@ -190,7 +190,7 @@ let observer: IntersectionObserver | null = null
 
 const treeRef: any = ref('')
 watch(modelName, (val) => {
-  if (treeRef.value && treeRef.value.length !== '') {
+  if (treeRef.value && treeRef.value !== '') {
     treeRef.value?.filter(val)
   }
 })

From 104d3e2c25238f3c4c2c8b05ad3606de2e9128cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=8F=E5=A4=A7=E8=83=86?= <1101282782@qq.com>
Date: Thu, 25 Sep 2025 18:50:57 +0800
Subject: [PATCH 6/6] =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/components/propertyBox/graph.vue   | 14 +++++++++++++-
 .../src/views/components/propertyBox/model.vue   | 16 +++++++++++++++-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/renderer/src/views/components/propertyBox/graph.vue b/src/renderer/src/views/components/propertyBox/graph.vue
index 7e22939..74fac0c 100644
--- a/src/renderer/src/views/components/propertyBox/graph.vue
+++ b/src/renderer/src/views/components/propertyBox/graph.vue
@@ -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) => {
diff --git a/src/renderer/src/views/components/propertyBox/model.vue b/src/renderer/src/views/components/propertyBox/model.vue
index a0173d7..1cf8e22 100644
--- a/src/renderer/src/views/components/propertyBox/model.vue
+++ b/src/renderer/src/views/components/propertyBox/model.vue
@@ -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) => {