Merge branch 'zyl' of http://xny.yj-3d.com:3000/zhouyulong/electron-4 into zyl

src/renderer/src/I18n/zh-CN.ts

@@ -221,5 +221,9 @@ export default {
   graph: {
     title: '军标选择',
     setting: '默认军标参数设置'
+  },
+  photo: {
+    title: '图标选择',
+    setting: '默认图标参数设置'
   }
 }

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>

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 {

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>
@@ -701,7 +701,7 @@ onMounted(() => {
   color: var(--el-color-primary);
 }
 ::v-deep .el-scrollbar {
-  height: 360px !important;
+  height: 380px !important;
   overflow: auto;
 }
 .el-card {

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 }">
+              <template #default="{ row, $index }">
-                <el-button size="small" @click="reviewPhoto">预览</el-button>
+                <el-button size="small" @click="reviewPhoto($index)">预览</el-button>
-                <el-button size="small" @click="editPhotoName(row)">修改名称</el-button>
+                <el-button size="small" v-if="activeIndex === 2" @click="editPhotoName(row)"
-                <el-button size="small" @click="handleDelete(row)">删除</el-button>
+                  >修改名称</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()
-
+var currentIndex = ref(0)
-const reviewPhoto = () => {
+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')
     }
   }
 }
@@ -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
@@ -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 {

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) => {
+  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) => {
@@ -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 {

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) => {
+  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
@@ -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 {

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>

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
-    @input="uploadFile" />
+    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'