Merge branch 'zyl' of http://xny.yj-3d.com:3000/zhouyulong/electron-4 into zyl
This commit is contained in:
@ -221,5 +221,9 @@ export default {
|
||||
graph: {
|
||||
title: '军标选择',
|
||||
setting: '默认军标参数设置'
|
||||
},
|
||||
photo: {
|
||||
title: '图标选择',
|
||||
setting: '默认图标参数设置'
|
||||
}
|
||||
}
|
||||
|
||||
1
src/renderer/src/icons/svg/fk.svg
Normal file
1
src/renderer/src/icons/svg/fk.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 622 B |
@ -691,7 +691,7 @@ onMounted(() => {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
::v-deep .el-scrollbar {
|
||||
height: 360px !important;
|
||||
height: 380px !important;
|
||||
overflow: auto;
|
||||
}
|
||||
.el-card {
|
||||
|
||||
@ -84,7 +84,7 @@
|
||||
<el-image
|
||||
style="width: 80px; height: 60px"
|
||||
:src="'http://127.0.0.1:8848' + row.poster"
|
||||
fit="cover"
|
||||
fit="contain"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@ -379,7 +379,7 @@ const allowDrag = (draggingNode: Node) => {
|
||||
//拖拽结束
|
||||
|
||||
//---------------------查看缩略图--------------------
|
||||
var showImageRow:any = null
|
||||
var showImageRow: any = null
|
||||
const showImage = (row: any) => {
|
||||
showImageRow = row
|
||||
eventBus.emit('imagePopDialog', row)
|
||||
@ -701,7 +701,7 @@ onMounted(() => {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
::v-deep .el-scrollbar {
|
||||
height: 360px !important;
|
||||
height: 380px !important;
|
||||
overflow: auto;
|
||||
}
|
||||
.el-card {
|
||||
|
||||
@ -92,32 +92,40 @@
|
||||
<el-table-column type="index" label="序号" width="60" align="center" />
|
||||
<el-table-column prop="iconName" label="名称" />
|
||||
<el-table-column prop="thumbnail" label="缩略图" width="100">
|
||||
<template #default="{ row }" v-if="activeIndex === 2">
|
||||
<template #default="{ row, $index }" v-if="activeIndex === 2">
|
||||
<el-image
|
||||
ref="imageRef"
|
||||
fit="contain"
|
||||
:preview-teleported="true"
|
||||
:preview-src-list="['http://127.0.0.1:8848' + row.data]"
|
||||
:preview-src-list="modelList.map((item) => 'http://127.0.0.1:8848' + item.data)"
|
||||
style="width: 80px; height: 60px"
|
||||
:src="'http://127.0.0.1:8848' + row.data"
|
||||
:initial-index="currentIndex"
|
||||
@click="seeBigPhoto($index)"
|
||||
/>
|
||||
</template>
|
||||
<template #default="{ row }" v-else>
|
||||
<template #default="{ row, $index }" v-else>
|
||||
<el-image
|
||||
ref="imageRef"
|
||||
fit="contain"
|
||||
:preview-teleported="true"
|
||||
:preview-src-list="['http://localhost:55110/' + row.data]"
|
||||
:preview-src-list="modelList.map((item) => 'http://localhost:55110/' + item.data)"
|
||||
style="width: 80px; height: 60px"
|
||||
:src="'http://localhost:55110/' + row.data"
|
||||
:initial-index="currentIndex"
|
||||
@click="seeBigPhoto($index)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" @click="reviewPhoto">预览</el-button>
|
||||
<el-button size="small" @click="editPhotoName(row)">修改名称</el-button>
|
||||
<el-button size="small" @click="handleDelete(row)">删除</el-button>
|
||||
<template #default="{ row, $index }">
|
||||
<el-button size="small" @click="reviewPhoto($index)">预览</el-button>
|
||||
<el-button size="small" v-if="activeIndex === 2" @click="editPhotoName(row)"
|
||||
>修改名称</el-button
|
||||
>
|
||||
<el-button size="small" v-if="activeIndex === 2" @click="handleDelete(row)"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
@ -150,7 +158,13 @@
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<input ref="fileInput" type="file" hidden @change="handleFileChange" accept=".jpg,.jpeg,.png" />
|
||||
<input
|
||||
ref="fileInput"
|
||||
type="file"
|
||||
hidden
|
||||
@change="handleFileChange"
|
||||
accept=".jpg,.jpeg,.png,.gif"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -214,10 +228,14 @@ const typeClick = (index) => {
|
||||
}
|
||||
|
||||
const treeRef = ref()
|
||||
|
||||
const reviewPhoto = () => {
|
||||
var currentIndex = ref(0)
|
||||
const reviewPhoto = (index) => {
|
||||
currentIndex.value = index
|
||||
imageRef.value!.showPreview()
|
||||
}
|
||||
const seeBigPhoto = (index) => {
|
||||
currentIndex.value = index
|
||||
}
|
||||
// @ts-ignore
|
||||
var sortableInstance: any = reactive(null)
|
||||
|
||||
@ -306,7 +324,6 @@ const getModelList = async () => {
|
||||
if (res.code == 0 || res.code == 200) {
|
||||
let data = transformNestedJson(res.data, 'name', 'label')
|
||||
typeTreeData.value = data
|
||||
console.log(typeTreeData.value, 'klklk')
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -438,7 +455,7 @@ const allowDrag = (draggingNode: Node) => {
|
||||
//拖拽结束
|
||||
|
||||
//---------------------查看缩略图--------------------
|
||||
var showImageRow:any = null
|
||||
var showImageRow: any = null
|
||||
const showImage = (row: any) => {
|
||||
showImageRow = row
|
||||
eventBus.emit('imagePopDialog', row)
|
||||
@ -500,7 +517,6 @@ const toggleExpand = (row: any) => {
|
||||
}
|
||||
const getModelListByType = async (id) => {
|
||||
if (activeIndex.value === 0) {
|
||||
await nextTick()
|
||||
modelList.value = threePhoto
|
||||
} else if (activeIndex.value === 1) {
|
||||
modelList.value = ordinaryPhoto
|
||||
@ -551,7 +567,7 @@ const handleMenuCommand = (command: string) => {
|
||||
}
|
||||
}
|
||||
|
||||
var clickTreeNode:any = null
|
||||
var clickTreeNode: any = null
|
||||
const handleTypeClick = (row: any) => {
|
||||
getModelListByType(row.id)
|
||||
currentTypeId.value = row.$treeNodeId
|
||||
@ -603,7 +619,7 @@ const handleRenameType = (row: TypeNode) => {
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
var clickPhotoRow:any = null
|
||||
var clickPhotoRow: any = null
|
||||
const editPhotoName = (row) => {
|
||||
dialogTitle.value = '图标重命名'
|
||||
modelType.value = row.iconName
|
||||
@ -747,8 +763,8 @@ const handleDelete = (row: any) => {
|
||||
.catch(() => {})
|
||||
}
|
||||
//立体图标、普通图标
|
||||
let threePhoto:any = []
|
||||
let ordinaryPhoto:any = []
|
||||
let threePhoto: any = []
|
||||
let ordinaryPhoto: any = []
|
||||
|
||||
const setPhotoList = () => {
|
||||
$sendElectronChanel('requireGEMarkerName', {
|
||||
@ -756,7 +772,6 @@ const setPhotoList = () => {
|
||||
dirName1s: 'GEMarker1s'
|
||||
})
|
||||
$recvElectronChanel('dirFiles', (e, res) => {
|
||||
console.log(res, e, 'resxxxx')
|
||||
res.GEMarker1s.forEach((item) => {
|
||||
let name = item.split('.')[0]
|
||||
name = name.split('/')[1]
|
||||
@ -764,7 +779,6 @@ const setPhotoList = () => {
|
||||
iconName: name,
|
||||
data: item
|
||||
})
|
||||
console.log(threePhoto, 'threePhoto')
|
||||
})
|
||||
res.GEMarker.forEach((item) => {
|
||||
let name = item.split('.')[0]
|
||||
@ -814,7 +828,7 @@ onMounted(() => {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
::v-deep .el-scrollbar {
|
||||
height: 360px !important;
|
||||
height: 380px !important;
|
||||
overflow: auto;
|
||||
}
|
||||
.el-card {
|
||||
|
||||
@ -76,7 +76,7 @@
|
||||
<div class="imgbg">
|
||||
<el-image
|
||||
:src="'http://127.0.0.1:8848' + model.data"
|
||||
fit="cover"
|
||||
fit="contain"
|
||||
class="thumbnail"
|
||||
>
|
||||
<template #error>
|
||||
@ -138,7 +138,19 @@ let observer: IntersectionObserver | null = null
|
||||
|
||||
const treeRef: any = ref('')
|
||||
watch(modelName, (val) => {
|
||||
treeRef.value!.filter(val)
|
||||
if (treeRef.value && treeRef.value !== '') {
|
||||
treeRef.value!.filter(val)
|
||||
}
|
||||
})
|
||||
|
||||
watch(isShowPup, (val) => {
|
||||
if (!val) {
|
||||
modelName.value = ''
|
||||
activeTab.value = '0'
|
||||
treeRef.value = ''
|
||||
activeIndex.value = null
|
||||
categories.value = []
|
||||
}
|
||||
})
|
||||
|
||||
const filterNode: any = (value, data) => {
|
||||
@ -308,7 +320,7 @@ const renderModel = async (model) => {
|
||||
cusUpdateNode({ id: params.id, sourceName: params.name, params: JSON.stringify(params) })
|
||||
})
|
||||
|
||||
let DbOption:any = {
|
||||
let DbOption: any = {
|
||||
params: option,
|
||||
id,
|
||||
sourceName: model.militaryName,
|
||||
@ -653,6 +665,9 @@ defineExpose({
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
@ -662,6 +677,7 @@ defineExpose({
|
||||
.model-item {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
width: 70px;
|
||||
/* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); */
|
||||
}
|
||||
.model-item:hover {
|
||||
|
||||
@ -76,7 +76,7 @@
|
||||
<div class="imgbg">
|
||||
<el-image
|
||||
:src="'http://127.0.0.1:8848' + model.poster"
|
||||
fit="cover"
|
||||
fit="contain"
|
||||
class="thumbnail"
|
||||
>
|
||||
<template #error>
|
||||
@ -136,8 +136,22 @@ const loading = ref(false)
|
||||
let observer: IntersectionObserver | null = null
|
||||
|
||||
const treeRef: any = ref('')
|
||||
|
||||
watch(modelName, (val) => {
|
||||
treeRef.value!.filter(val)
|
||||
if (treeRef.value && treeRef.value !== '') {
|
||||
treeRef.value!.filter(val)
|
||||
}
|
||||
})
|
||||
|
||||
watch(isShowPup, (val) => {
|
||||
if (!val) {
|
||||
modelName.value = ''
|
||||
activeTab.value = '0'
|
||||
treeRef.value = ''
|
||||
activeIndex.value = null
|
||||
addType.value = ''
|
||||
categories.value = []
|
||||
}
|
||||
})
|
||||
|
||||
const filterNode: any = (value, data) => {
|
||||
@ -262,7 +276,11 @@ const modelClick = (index, row) => {
|
||||
// }
|
||||
|
||||
// 轨迹运动选择模型
|
||||
if(selectCallback && typeof selectCallback === 'function' && addType.value === 'trajectoryMotion'){
|
||||
if (
|
||||
selectCallback &&
|
||||
typeof selectCallback === 'function' &&
|
||||
addType.value === 'trajectoryMotion'
|
||||
) {
|
||||
selectCallback('http://127.0.0.1:8848' + row.data)
|
||||
close()
|
||||
return
|
||||
@ -329,7 +347,7 @@ const renderModel = async (data, model) => {
|
||||
}
|
||||
let Model = await new YJ.Obj.Model(window.earth, option)
|
||||
|
||||
let DbOption:any = {
|
||||
let DbOption: any = {
|
||||
params: option,
|
||||
id,
|
||||
sourceName: model.modelName + index,
|
||||
@ -424,7 +442,7 @@ eventBus.on('closeModelSet', (data) => {
|
||||
})
|
||||
|
||||
//查看是否有设置模型设置
|
||||
var isSetting:any = null
|
||||
var isSetting: any = null
|
||||
const getSetting = () => {
|
||||
ModelApi.getModelSetting().then((res) => {
|
||||
if (res.code == 0 || res.code == 200) {
|
||||
@ -446,7 +464,7 @@ const setting = () => {
|
||||
eventBus.emit('openModelSetting', (true, isSetting))
|
||||
}
|
||||
|
||||
let selectCallback:any = null
|
||||
let selectCallback: any = null
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
@ -698,6 +716,9 @@ defineExpose({
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
@ -707,6 +728,7 @@ defineExpose({
|
||||
.model-item {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
width: 70px;
|
||||
/* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); */
|
||||
}
|
||||
.model-item:hover {
|
||||
|
||||
859
src/renderer/src/views/components/propertyBox/photo.vue
Normal file
859
src/renderer/src/views/components/propertyBox/photo.vue
Normal file
@ -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>
|
||||
@ -11,8 +11,14 @@
|
||||
<firstMenu class="absolute zIndex9" ref="firstMenuRef"></firstMenu>
|
||||
<!--底部菜单-->
|
||||
<bottomMenu class="absolute zIndex9" ref="bottomMenuRef"></bottomMenu>
|
||||
<input type="file" id="fileInputlink" style="display: none" multiple accept=".jpeg,.png,.jpg,.mp4,.pdf"
|
||||
@input="uploadFile" />
|
||||
<input
|
||||
type="file"
|
||||
id="fileInputlink"
|
||||
style="display: none"
|
||||
multiple
|
||||
accept=".jpeg,.png,.jpg,.mp4,.pdf"
|
||||
@input="uploadFile"
|
||||
/>
|
||||
|
||||
<!-- 多点视线分析 -->
|
||||
<Visibility ref="visibility"></Visibility>
|
||||
@ -37,6 +43,7 @@
|
||||
<model ref="Model"></model>
|
||||
<graph ref="Graph"></graph>
|
||||
<graphSetting ref="graphsetting"></graphSetting>
|
||||
<photo ref="Photo"></photo>
|
||||
|
||||
<!-- 图标列表 -->
|
||||
<selectImg ref="selectImgRef"></selectImg>
|
||||
@ -112,10 +119,10 @@ import particleEffects from '../components/propertyBox/particleEffects.vue'
|
||||
import flyLine from '../components/propertyBox/flyLine.vue'
|
||||
import explosion from '../components/propertyBox/explosion.vue'
|
||||
|
||||
|
||||
import graphObject from '../components/propertyBox/graphObject.vue'
|
||||
import graph from '../components/propertyBox/graph.vue'
|
||||
import graphSetting from '../components/propertyBox/graphSetting.vue'
|
||||
import photo from '../components/propertyBox/photo.vue'
|
||||
|
||||
import { GisApi } from '@/api/gisApi'
|
||||
|
||||
@ -415,9 +422,9 @@ const getStatus = (time) => {
|
||||
const currentTimestamp = Date.now()
|
||||
|
||||
if (timestamp > currentTimestamp) {
|
||||
; (window as any).checkAuthIsValid = true
|
||||
;(window as any).checkAuthIsValid = true
|
||||
} else {
|
||||
; (window as any).checkAuthIsValid = false
|
||||
;(window as any).checkAuthIsValid = false
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user