895 lines
24 KiB
Vue
895 lines
24 KiB
Vue
<template>
|
||
<div class="set_pup">
|
||
<el-dialog v-model="isShowPup" :modal="true" draggable>
|
||
<template #header>
|
||
<div class="set_pup_header">
|
||
<div class="system_title">
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||
width="229"
|
||
height="35"
|
||
viewBox="0 0 229 35"
|
||
fill="none"
|
||
preserveAspectRatio="none"
|
||
>
|
||
<path
|
||
d="M74 34L85 34L99.5 6L88.5 6L74 34ZM92 34L103 34L117.5 6L106.5 6L92 34ZM111 34L122 34L136.5 6L125.5 6L111 34ZM140 34L129 34L143.5 6L154.5 6L140 34ZM148 34L159 34L173.5 6L162.5 6L148 34ZM177 34L166 34L180.5 6L191.5 6L177 34ZM185 34L196 34L210.5 6L199.5 6L185 34ZM214 34L203 34L217.5 6L228.5 6L214 34ZM0 34L11 34L25.5 6.5L14.5 6.5L0 34ZM18 34L29 34L43.5 6.5L32.5 6.5L18 34ZM37 34L48 34L62.5 6.5L51.5 6.5L37 34ZM66 34L55 34L69.5 6.5L80.5 6.5L66 34Z"
|
||
fill-rule="evenodd"
|
||
fill="url(#linear_fill_2442_1053)"
|
||
/>
|
||
<rect x="0" y="0" width="229" height="34" fill="url(#linear_fill_2442_1054)" />
|
||
<g clip-path="url(#clip-path-2442_1055)">
|
||
<path
|
||
d="M10.3993 32.7333L10.666 33L10.666 21L9.33267 22.3333L4.66602 27L5.66602 28L10.3993 32.7333ZM9.33267 29.6667L6.73267 27L9.33267 24.3333L9.33267 29.6667Z"
|
||
fill="rgb(var(--color-base1))"
|
||
/>
|
||
<g opacity="0.5">
|
||
<path
|
||
d="M7.39934 32.7333L7.66602 33L7.66602 21L6.33267 22.3333L1.66602 27L2.66602 28L7.39934 32.7333ZM6.33267 29.6667L3.73267 27L6.33267 24.3333L6.33267 29.6667Z"
|
||
fill="rgb(var(--color-base1))"
|
||
/>
|
||
</g>
|
||
</g>
|
||
<g clip-path="url(#clip-path-2442_1059)">
|
||
<path
|
||
d="M218.601 32.7333L218.334 33L218.334 21L219.667 22.3333L224.334 27L223.334 28L218.601 32.7333ZM219.667 29.6667L222.267 27L219.667 24.3333L219.667 29.6667Z"
|
||
fill="rgb(var(--color-base1))"
|
||
/>
|
||
<g opacity="0.5">
|
||
<path
|
||
d="M221.601 32.7333L221.334 33L221.334 21L222.667 22.3333L227.334 27L226.334 28L221.601 32.7333ZM222.667 29.6667L225.267 27L222.667 24.3333L222.667 29.6667Z"
|
||
fill="rgb(var(--color-base1))"
|
||
/>
|
||
</g>
|
||
</g>
|
||
<defs>
|
||
<linearGradient
|
||
id="linear_fill_2442_1053"
|
||
x1="119.1239013671875"
|
||
y1="33.99998474121094"
|
||
x2="119.1231689453125"
|
||
y2="6"
|
||
gradientUnits="userSpaceOnUse"
|
||
>
|
||
<stop offset="0" stop-color="rgb(var(--color-base1))" stop-opacity="0.2" />
|
||
<stop offset="1" stop-color="rgb(var(--color-base1))" stop-opacity="0" />
|
||
</linearGradient>
|
||
<linearGradient
|
||
id="linear_fill_2442_1054"
|
||
x1="0"
|
||
y1="17"
|
||
x2="229"
|
||
y2="17"
|
||
gradientUnits="userSpaceOnUse"
|
||
>
|
||
<stop offset="0" stop-color="rgb(var(--color-base1))" stop-opacity="0" />
|
||
<stop offset="0.4891" stop-color="rgb(var(--color-base1))" stop-opacity="0.4" />
|
||
<stop offset="1" stop-color="rgb(var(--color-base1))" stop-opacity="0" />
|
||
</linearGradient>
|
||
<clipPath id="clip-path-2442_1055">
|
||
<path d="M0 19L0 35L16 35L16 19L0 19Z" fill="white" />
|
||
</clipPath>
|
||
<clipPath id="clip-path-2442_1059">
|
||
<path d="M229 19L229 35L213 35L213 19L229 19Z" fill="white" />
|
||
</clipPath>
|
||
</defs>
|
||
</svg>
|
||
{{ t('graph.title') }}
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<div class="set_detail">
|
||
<div class="top">
|
||
<el-input
|
||
v-model="modelName"
|
||
class="w-50 m-2"
|
||
placeholder="请输入军标名称进行搜索"
|
||
:suffix-icon="Search"
|
||
/>
|
||
<button @click="setting" class="btn">
|
||
<svg-icon
|
||
name="sys_set"
|
||
class="setIcon"
|
||
:size="12"
|
||
color="rgba(255,255,255, 1)"
|
||
style="margin-right: 5px"
|
||
></svg-icon
|
||
>默认军标参数设置
|
||
</button>
|
||
</div>
|
||
<div class="content">
|
||
<!-- 左侧Tab导航 -->
|
||
<div class="treeCon">
|
||
<el-tree
|
||
style="max-width: 600px"
|
||
:data="typeTreeData"
|
||
ref="treeRef"
|
||
node-key="id"
|
||
empty-text=""
|
||
@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"
|
||
style="width: 100%; text-overflow: ellipsis; overflow: hidden"
|
||
:title="node.label"
|
||
>
|
||
<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" @scroll="handleScroll">
|
||
<div class="model-section" v-if="categories.length != 0">
|
||
<!-- <h2 class="section-title">{{ categories[Number(currentTypeId)].name }}</h2> -->
|
||
<div class="model-grid">
|
||
<div
|
||
v-for="(model, mIndex) in currModelList"
|
||
:key="mIndex"
|
||
class="model-item"
|
||
@click="modelClick(mIndex, model)"
|
||
>
|
||
<div class="imgbg">
|
||
<el-image
|
||
:src="service + model.militaryDataUrl"
|
||
fit="contain"
|
||
class="thumbnail"
|
||
>
|
||
<template #error>
|
||
<div class="image-error">加载失败</div>
|
||
</template>
|
||
</el-image>
|
||
</div>
|
||
|
||
<div class="model-name" :class="{ isactive: activeIndex == mIndex }">
|
||
{{ model.militaryName }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="categories.length == 0">
|
||
<div class="custom-empty">
|
||
<img src="@/assets/images/noData.png" alt="暂无数据" />
|
||
<div class="noData">暂无数据</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
//@ts-nocheck
|
||
import { useI18n } from 'vue-i18n'
|
||
import { Search } from '@element-plus/icons-vue'
|
||
import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
|
||
import { GraphApi } from '@/api/graphLabel/index'
|
||
import type { TabsPaneContext } from 'element-plus'
|
||
import { useTreeNode } from '../tree/hooks/treeNode'
|
||
import { TreeApi } from '@/api/tree'
|
||
const { t } = useI18n()
|
||
const { findParentId, findTreeIndex, cusAddNodes } = useTreeNode()
|
||
const isShowPup = ref(false)
|
||
const eventBus: any = inject('bus')
|
||
const { cusUpdateNode } = useTreeNode()
|
||
var modelName = ref('')
|
||
const service = ref(localStorage.getItem('ip'))
|
||
|
||
//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 = ''
|
||
activeTab.value = '0'
|
||
treeRef.value = ''
|
||
activeIndex.value = null
|
||
categories.value = []
|
||
}
|
||
})
|
||
|
||
const filterNode: any = (value, data) => {
|
||
if (!value) return true
|
||
return data.label.includes(value)
|
||
}
|
||
|
||
// 处理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)
|
||
})
|
||
}
|
||
|
||
//滚动加载
|
||
var currModelList: any = ref([])
|
||
|
||
let page = 1
|
||
// 模拟加载更多数据
|
||
const loadMoreData = () => {
|
||
// if (loading.value) return
|
||
// loading.value = true
|
||
setTimeout(() => {
|
||
const start = (page - 1) * 24
|
||
const end = start + 24
|
||
currModelList.value = categories.value.slice(0, end)
|
||
page++
|
||
// 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
|
||
// let selectedNode = window.treeObj.getSelectedNodes()[0]
|
||
// if(!selectedNode){
|
||
// ElMessage.warning('请选择需要添加的文件夹')
|
||
// return
|
||
// }
|
||
|
||
// if (!isSetting) {
|
||
// ElMessage.warning('请先设置军标默认参数')
|
||
// return
|
||
// }
|
||
|
||
isShowPup.value = false
|
||
let id = new YJ.Tools().randomString()
|
||
renderModel(row)
|
||
}
|
||
|
||
const renderModel = async (model) => {
|
||
let selectedNode = window.treeObj.getSelectedNodes()[0]
|
||
// if (data.positions.length > 0) {
|
||
// data.positions.forEach(async (position, index) => {
|
||
// let source_id = this.$md5(new Date().getTime() + model.model_name+index);
|
||
let id = new YJ.Tools().randomString()
|
||
|
||
let Draw = new YJ.Draw.DrawPoint(window.earth)
|
||
Draw.start((a, positions) => {
|
||
let option = {
|
||
id: id,
|
||
name: model.militaryName,
|
||
url: service.value + model.militaryDataUrl,
|
||
position: positions
|
||
}
|
||
|
||
let GroundSvg = new YJ.Obj.GroundSvg(window.earth, option)
|
||
|
||
GroundSvg.load(() => {
|
||
GroundSvg.drag(true, null, (data) => {
|
||
let params = data
|
||
delete params.attributeType
|
||
delete params.attribute.ISC
|
||
delete params.attribute.camera
|
||
delete params.attribute.goods
|
||
delete params.attribute.vr
|
||
|
||
let params2 = {
|
||
id: params.id,
|
||
sourceName: params.name,
|
||
params: params,
|
||
isShow: params.show ? 1 : 0
|
||
}
|
||
TreeApi.updateDirectoryInfo(params2)
|
||
cusUpdateNode({ id: params.id, sourceName: params.name, params: JSON.stringify(params) })
|
||
})
|
||
|
||
let DbOption: any = {
|
||
params: option,
|
||
id,
|
||
sourceName: model.militaryName,
|
||
sourceType: 'military',
|
||
parentId: selectedNode
|
||
? selectedNode.sourceType == 'directory'
|
||
? selectedNode.id
|
||
: selectedNode.parentId
|
||
: undefined
|
||
}
|
||
TreeApi.addOtherSource(DbOption)
|
||
DbOption.isShow = true
|
||
DbOption.params = JSON.stringify(DbOption.params)
|
||
cusAddNodes(window.treeObj, DbOption.parentId, [DbOption])
|
||
|
||
if (GroundSvg.options.id) {
|
||
;(window as any)._entityMap.set(GroundSvg.options.id, GroundSvg)
|
||
}
|
||
})
|
||
})
|
||
}
|
||
|
||
const getModelListByType = (id) => {
|
||
let formData = new FormData()
|
||
formData.append('militaryTypeId', id)
|
||
GraphApi.showModelByType(formData).then((res) => {
|
||
categories.value = res.data
|
||
|
||
currModelList.value = []
|
||
page = 1
|
||
loadMoreData()
|
||
})
|
||
}
|
||
|
||
const getModelList = async () => {
|
||
const res: any = await GraphApi.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('openGraph', (data) => {
|
||
isShowPup.value = data
|
||
if (data) {
|
||
getModelList()
|
||
getSetting()
|
||
}
|
||
})
|
||
eventBus.on('closeModelSetGraph', (data) => {
|
||
isShowPup.value = data
|
||
if (data) {
|
||
getSetting()
|
||
}
|
||
})
|
||
|
||
//查看是否有设置军标设置
|
||
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(var(--color-base1), 0.2) 0%,
|
||
rgba(var(--color-base1), 0) 100%
|
||
),
|
||
rgba(0, 0, 0, 0.6);
|
||
border: 1px solid var(--color-border1);
|
||
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: rgba(var(--color-base1), 0.5);
|
||
&:hover {
|
||
background-color: rgba(var(--color-base1), 1);
|
||
.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: rgba(var(--color-base1), 1);
|
||
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;
|
||
position: relative;
|
||
z-index: 1;
|
||
|
||
> svg {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: -1;
|
||
}
|
||
}
|
||
}
|
||
.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(var(--color-base1), 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: rgba(var(--color-base1), 1);
|
||
border-radius: 5px;
|
||
}
|
||
:deep(.el-tabs__content::-webkit-scrollbar-track) {
|
||
background-color: rgba(var(--color-base1), 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(var(--color-base1), 0) 0%,
|
||
rgba(var(--color-base1), 0.5) 48.91%,
|
||
rgba(var(--color-base1), 0) 100%
|
||
);
|
||
border: 1px solid;
|
||
box-sizing: border-box;
|
||
border-image: linear-gradient(
|
||
90deg,
|
||
rgba(var(--color-base1), 0) 0%,
|
||
rgba(var(--color-base1), 1) 55.55%,
|
||
rgba(var(--color-base1), 0) 100%
|
||
)
|
||
1;
|
||
}
|
||
:deep(.el-tabs__item.is-active) {
|
||
background: linear-gradient(
|
||
90deg,
|
||
rgba(var(--color-base1), 0) 0%,
|
||
rgba(var(--color-base1), 0.5) 48.91%,
|
||
rgba(var(--color-base1), 0) 100%
|
||
) !important;
|
||
border: 0.1px solid;
|
||
// box-sizing: border-box;
|
||
border-image: linear-gradient(
|
||
90deg,
|
||
rgba(var(--color-base1), 0) 0%,
|
||
rgba(var(--color-base1), 1) 55.55%,
|
||
rgba(var(--color-base1), 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(204, 204, 204, 1) !important;
|
||
--el-input-placeholder-font-size: 14px;
|
||
--el-input-text-color: #fff;
|
||
--el-input-border-color: rgba(var(--color-base), 0.5) !important;
|
||
--el-input-hover-border-color: rgba(var(--color-base1), 0.5) !important;
|
||
--el-input-focus-border-color: rgba(var(--color-base1), 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-base1), 0.2) !important;
|
||
border: 1px solid rgba(var(--color-base1), 0.5) !important;
|
||
border-radius: 4px;
|
||
color: #fff !important;
|
||
padding: 0 15px;
|
||
}
|
||
.btn:hover {
|
||
color: rgba(var(--color-base1), 1) !important;
|
||
border: 1px solid rgba(var(--color-base1), 1) !important;
|
||
.setIcon {
|
||
color: rgba(var(--color-base1), 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);
|
||
overflow-x: hidden;
|
||
}
|
||
.model-gallery {
|
||
flex: 1;
|
||
/* padding: 20px; */
|
||
overflow-y: auto;
|
||
height: 100%;
|
||
width: calc(100% - 160px);
|
||
float: left;
|
||
margin-left: 10px;
|
||
|
||
.custom-empty {
|
||
display: flex;
|
||
justify-content: center; /* 水平居中 */
|
||
align-items: center; /* 垂直居中 */
|
||
flex-direction: column;
|
||
height: 300px;
|
||
}
|
||
.custom-empty img {
|
||
display: block;
|
||
width: 130px;
|
||
}
|
||
}
|
||
.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-base1), 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-base1), 1) !important;
|
||
.model-name {
|
||
color: rgba(var(--color-base1), 1) !important;
|
||
}
|
||
}
|
||
|
||
.imgbg {
|
||
width: 70px;
|
||
height: 70px;
|
||
// background: url('@/assets/images/model-bg.png') no-repeat;
|
||
// background-size: 100% 100%;
|
||
}
|
||
.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-base1), 0.1) !important;
|
||
}
|
||
/* 修改滚动条滑块的样式 */
|
||
::v-deep ::-webkit-scrollbar-thumb {
|
||
background: rgba(var(--color-base1), 1) !important;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
/* 当滑块被激活（用户点击或拖动时） */
|
||
::v-deep ::-webkit-scrollbar-thumb:hover {
|
||
background: rgba(var(--color-base1), 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-base1), 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-base1), 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-base1), 0.2) !important;
|
||
}
|
||
::v-deep .allowDrag {
|
||
width: 100% !important;
|
||
overflow: hidden !important;
|
||
text-overflow: ellipsis !important;
|
||
}
|
||
</style>
|