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] =?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
   }
 }