工具库
This commit is contained in:
@ -899,14 +899,14 @@
|
||||
|
||||
.fly-roam>.content .table .tr .th:first-child,
|
||||
.fly-roam>.content .table .tr .td:first-child {
|
||||
flex: 0 0 95px;
|
||||
width: 95px;
|
||||
flex: 0 0 70px;
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
.fly-roam>.content .table .tr .th:nth-child(2),
|
||||
.fly-roam>.content .table .tr .td:nth-child(2) {
|
||||
flex: 0 0 240px;
|
||||
width: 240px;
|
||||
flex: 0 0 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.fly-roam>.content .table .tr .th:last-child,
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
import { title } from "process";
|
||||
|
||||
export default {
|
||||
week: {
|
||||
0: '星期日',
|
||||
@ -164,7 +166,7 @@ export default {
|
||||
authCode: '授权码',
|
||||
upload: '授权导入',
|
||||
authexpire: '授权过期',
|
||||
authTempExpire: '临时授权',
|
||||
authTempExpire: '授权正常',
|
||||
noAuthexpire: '暂未授权',
|
||||
},
|
||||
systemSetting: {
|
||||
@ -208,5 +210,9 @@ export default {
|
||||
versions: {
|
||||
version_code: '版本号',
|
||||
version_update: '检查更新'
|
||||
},
|
||||
model: {
|
||||
title: '模型选择',
|
||||
setting: '默认模型参数设置'
|
||||
}
|
||||
}
|
||||
|
||||
@ -198,7 +198,7 @@ module.exports = {
|
||||
authCode: '授权码',
|
||||
upload: '授权导入',
|
||||
authexpire: '授权过期',
|
||||
authTempExpire: '临时授权',
|
||||
authTempExpire: '授权正常',
|
||||
noAuthexpire: '暂未授权'
|
||||
},
|
||||
service: {
|
||||
|
||||
BIN
src/renderer/src/assets/images/noData.png
Normal file
BIN
src/renderer/src/assets/images/noData.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
1
src/renderer/src/icons/svg/arrow.svg
Normal file
1
src/renderer/src/icons/svg/arrow.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="6" viewBox="0 0 12 6" fill="none"><path d="M0.27 0.27L0 0L12 0L10.67 1.33L6 6L5 5L0.27 0.27Z" fill="#00FFFF" ></path></svg>
|
||||
|
After Width: | Height: | Size: 227 B |
1
src/renderer/src/icons/svg/delModel.svg
Normal file
1
src/renderer/src/icons/svg/delModel.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="11.7431640625" height="12" viewBox="0 0 11.7431640625 12" fill="none"><path d="M11.2307 3.25001L0.512179 3.25001C0.2311 3.25001 0 3.02501 0 2.75C0 2.475 0.2311 2.25 0.512179 2.25L11.2307 2.25C11.5117 2.25 11.7429 2.475 11.7429 2.75C11.7429 3.02501 11.5117 3.25001 11.2307 3.25001Z" fill="#FFFFFF" ></path><path d="M4.52223 2.61251C4.50975 2.53751 4.50349 2.45625 4.50349 2.375C4.50349 1.61876 5.12187 1.00001 5.87766 1.00001C6.63346 1.00001 7.25183 1.61876 7.25183 2.375C7.25183 2.45625 7.24558 2.53125 7.2331 2.61251L8.23873 2.61251C8.24498 2.53751 8.25122 2.45625 8.25122 2.375C8.25122 1.0625 7.18937 0 5.87766 0C4.56596 0 3.50411 1.0625 3.50411 2.375C3.50411 2.45625 3.51035 2.53125 3.5166 2.61251L4.52223 2.61251ZM9.3693 2.73125L9.3693 11L2.37354 11L2.37354 2.73125L1.37415 2.73125L1.37415 11.2188C1.37415 11.65 1.72394 12 2.15493 12L9.58791 12C10.0189 12 10.3687 11.65 10.3687 11.2188L10.3687 2.73125L9.3693 2.73125Z" fill="#FFFFFF" ></path><path d="M4.12862 9.36249L4.11614 9.36249C3.84131 9.36249 3.62268 9.14373 3.62268 8.86873L3.62268 5.35623C3.62268 5.08123 3.84131 4.86249 4.11614 4.86249L4.12862 4.86249C4.40347 4.86249 4.62208 5.08123 4.62208 5.35623L4.62208 8.87499C4.62208 9.14373 4.40347 9.36249 4.12862 9.36249ZM5.87757 9.36249L5.86508 9.36249C5.59024 9.36249 5.37162 9.14373 5.37162 8.86873L5.37162 5.35623C5.37162 5.08123 5.59024 4.86249 5.86508 4.86249L5.87757 4.86249C6.15239 4.86249 6.37102 5.08123 6.37102 5.35623L6.37102 8.87499C6.37102 9.14373 6.15239 9.36249 5.87757 9.36249ZM7.62651 9.36249L7.61401 9.36249C7.33918 9.36249 7.12056 9.14373 7.12056 8.86873L7.12056 5.35623C7.12056 5.08123 7.33918 4.86249 7.61401 4.86249L7.62651 4.86249C7.90134 4.86249 8.11995 5.08123 8.11995 5.35623L8.11995 8.87499C8.11995 9.14373 7.90134 9.36249 7.62651 9.36249Z" fill="#FFFFFF" ></path></svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
1
src/renderer/src/icons/svg/importModel.svg
Normal file
1
src/renderer/src/icons/svg/importModel.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="M11.9143 5.01493L11.9143 0.776121C11.9143 0.417911 11.6164 0.119404 11.259 0.119404L6.85072 0.119404C6.49329 0.119404 6.19544 0.417911 6.19544 0.776121L6.19544 5.01493C6.19544 5.37314 6.49329 5.67166 6.85072 5.67166L11.259 5.67166C11.6164 5.67166 11.9143 5.37314 11.9143 5.01493ZM0.655291 6.32837C0.297862 6.32837 0 6.62687 0 6.98508L0 11.2239C0 11.5821 0.297862 11.8806 0.655291 11.8806L5.06357 11.8806C5.421 11.8806 5.71886 11.5821 5.71886 11.2239L5.71886 6.98508C5.71886 6.62687 5.421 6.32837 5.06357 6.32837L0.655291 6.32837ZM3.09772 3.46269L2.44244 3.46269C2.44244 2.32836 3.39557 1.37314 4.52743 1.37314L4.76572 1.37314C4.94444 1.37314 5.06357 1.25373 5.06357 1.07462L5.06357 0.298513C5.06357 0.119404 4.94444 0 4.76572 0L4.52743 0C2.62115 0 1.07228 1.55225 1.07228 3.46269L0.297862 3.46269C0.178714 3.46269 0.119144 3.58209 0.119144 3.70151C0.119144 3.7612 0.119144 3.7612 0.178714 3.8209L1.48929 5.31345C1.60843 5.43285 1.78714 5.43285 1.90629 5.31345L3.21686 3.8209C3.27643 3.7612 3.27643 3.6418 3.21686 3.58209C3.15729 3.5224 3.15729 3.46269 3.09772 3.46269ZM8.81657 8.47762L9.47185 8.47762C9.47185 9.61196 8.51872 10.5672 7.38686 10.5672L7.14857 10.5672C6.96986 10.5672 6.85072 10.6866 6.85072 10.8657L6.85072 11.7015C6.85072 11.8806 6.96986 12 7.14857 12L7.38686 12C9.29314 12 10.842 10.4478 10.842 8.53733L11.6164 8.53733C11.7356 8.53733 11.7951 8.47762 11.7951 8.35823C11.7951 8.29852 11.7951 8.29852 11.7356 8.23881L10.425 6.74628C10.3059 6.62687 10.1271 6.62687 10.008 6.74628L8.69744 8.23881C8.63786 8.29852 8.63786 8.41792 8.69744 8.47762C8.69744 8.41792 8.757 8.47762 8.81657 8.47762Z" fill="#FFFFFF" ></path></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
1
src/renderer/src/icons/svg/more.svg
Normal file
1
src/renderer/src/icons/svg/more.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="6" height="12" viewBox="0 0 6 12" fill="none"><path d="M0.266672 11.7333L0 12L0 0L1.33334 1.33333L6 6L5 7L0.266672 11.7333ZM1.33334 8.66667L3.93334 6L1.33334 3.33333L1.33334 8.66667Z" fill="#00FFFF" ></path></svg>
|
||||
|
After Width: | Height: | Size: 305 B |
1
src/renderer/src/icons/svg/rename.svg
Normal file
1
src/renderer/src/icons/svg/rename.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12.00048828125" height="11.5714111328125" viewBox="0 0 12.00048828125 11.5714111328125" fill="none"><path d="M3.7409 6.41011C3.73308 6.42006 3.72525 6.43049 3.72175 6.44307L3.11799 8.65004C3.08272 8.77852 3.11886 8.91695 3.2142 9.01459C3.2856 9.08404 3.37962 9.12225 3.47974 9.12225C3.51282 9.12225 3.54591 9.11834 3.57855 9.10964L5.77641 8.51201C5.77991 8.51201 5.78166 8.51504 5.78426 8.51504C5.80949 8.51504 5.83433 8.50593 5.85306 8.48681L11.7302 2.6281C11.9047 2.45386 12.0005 2.21645 12.0005 1.95821C12.0005 1.66547 11.876 1.37296 11.6579 1.15616L11.1029 0.601926C10.8852 0.384481 10.5914 0.260132 10.298 0.260132C10.039 0.260132 9.80087 0.35563 9.62585 0.529435L3.7496 6.3897C3.74353 6.39533 3.74527 6.40359 3.7409 6.41011ZM11.1551 2.05435L10.5713 2.63594L9.62497 1.67742L10.2005 1.10364C10.2915 1.01252 10.4677 1.02576 10.5722 1.13034L11.1276 1.68459C11.1856 1.74232 11.2186 1.81911 11.2186 1.89506C11.2182 1.95736 11.196 2.01379 11.1551 2.05435ZM4.78608 6.50212L9.02687 2.27375L9.97368 3.23292L5.74074 7.45302L4.78608 6.50212ZM4.01341 8.21646L4.31987 7.09497L5.13737 7.91005L4.01341 8.21646Z" fill="#FFFFFF" ></path><path d="M11.5269 4.37595C11.3045 4.37595 11.1221 4.55627 11.1212 4.7811L11.1212 10.2433C11.1212 10.5298 10.8879 10.7624 10.6001 10.7624L1.33239 10.7624C1.04508 10.7624 0.810873 10.5298 0.810873 10.2433L0.810873 1.32787C0.810873 1.04119 1.04508 0.808348 1.33239 0.808348L7.30135 0.808348C7.52508 0.808348 7.70665 0.627163 7.70665 0.404064C7.70665 0.18142 7.52508 0 7.30135 0L1.27058 0C0.570171 0 0.00012207 0.56791 0.00012207 1.26667L0.00012207 10.305C0.00012207 11.0037 0.570171 11.5714 1.27058 11.5714L10.6615 11.5714C11.3624 11.5714 11.9322 11.0037 11.9322 10.305L11.9322 4.77849C11.9313 4.55627 11.7494 4.37595 11.5269 4.37595Z" fill="#FFFFFF" ></path></svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<div
|
||||
v-show="visible"
|
||||
class="context-menu"
|
||||
:style="{ left: x + 'px', top: y + 'px' }"
|
||||
@click.stop
|
||||
@contextmenu.stop
|
||||
>
|
||||
<div
|
||||
v-for="item in menuItems"
|
||||
:key="item.command"
|
||||
class="menu-item"
|
||||
@click="handleClick(item.command)"
|
||||
>
|
||||
<svg-icon
|
||||
:name="item.icon"
|
||||
:size="12"
|
||||
color="rgba(0, 255, 255, 1)"
|
||||
style="margin-right: 5px"
|
||||
></svg-icon>
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
x: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
y: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
menuItems: {
|
||||
type: Array as () => Array<{
|
||||
command: string
|
||||
icon: string
|
||||
label: string
|
||||
disabled?: boolean
|
||||
}>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:visible', 'command'])
|
||||
|
||||
const handleClick = (command: string) => {
|
||||
emit('update:visible', false)
|
||||
emit('command', command)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.context-menu {
|
||||
position: fixed;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
z-index: 9999;
|
||||
border: 1.5px solid;
|
||||
box-sizing: border-box;
|
||||
border-image: linear-gradient(137.95deg, rgba(0, 255, 255, 1) 6.25%, rgba(0, 200, 255, 1) 100%)
|
||||
1.5;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
padding: 8px 20px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
background-color: rgba(var(--color-sdk-base-rgb), 0.2);
|
||||
color: rgba(var(--color-sdk-base-rgb), 1);
|
||||
}
|
||||
</style>
|
||||
@ -23,7 +23,7 @@
|
||||
</el-upload>
|
||||
</div>
|
||||
<div class="fileList">
|
||||
<div class="fileList_nav">
|
||||
<div class="fileList_nav" v-if="routeList.length">
|
||||
<div class="fileList_nav_item" v-for="(item, index) in routeList" :key="index">
|
||||
<div class="item_left">
|
||||
<div class="img">
|
||||
|
||||
@ -0,0 +1,438 @@
|
||||
<template>
|
||||
<div class="model-management-container">
|
||||
<div class="equipment_title" style="margin-bottom: 10px">
|
||||
<el-button color="#004b4b" style="border: 1px solid rgba(0, 255, 255, 0.5)">
|
||||
<template #icon>
|
||||
<svg-icon name="leading_in" />
|
||||
</template>
|
||||
<span>选择模型库</span>
|
||||
</el-button>
|
||||
<el-button color="#004b4b" style="border: 1px solid rgba(0, 255, 255, 0.5)">
|
||||
<template #icon>
|
||||
<svg-icon name="leading_in" />
|
||||
</template>
|
||||
<span>创建模型库</span>
|
||||
</el-button>
|
||||
</div>
|
||||
<el-row :gutter="20">
|
||||
<!-- 左侧分类树 -->
|
||||
<el-col :span="6" class="tree">
|
||||
<el-card shadow="hover">
|
||||
<div class="tree-container" @click="handleClick" @contextmenu="divContextMenu">
|
||||
<el-table
|
||||
:data="typeTreeData"
|
||||
row-key="id"
|
||||
ref="tableRef"
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
@row-contextmenu="handleContextMenu"
|
||||
@row-click="handleTypeClick"
|
||||
>
|
||||
<el-table-column prop="name" label="模型类型" width="180">
|
||||
<template #default="{ row }">
|
||||
<span
|
||||
:class="{
|
||||
'primary-type': !row.parentId,
|
||||
'selected-text': row.id === currentTypeId
|
||||
}"
|
||||
@click.stop="toggleExpand(row)"
|
||||
class="allowDrag"
|
||||
>
|
||||
<svg-icon
|
||||
:name="row._expanded ? 'arrow' : 'more'"
|
||||
:size="12"
|
||||
color="rgba(0, 255, 255, 1)"
|
||||
style="margin-right: 5px"
|
||||
v-if="row.parentId == null"
|
||||
@click.stop="toggleExpand(row)"
|
||||
></svg-icon>
|
||||
{{ row.name }}</span
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!-- 右侧模型列表 -->
|
||||
<el-col :span="18">
|
||||
<el-card shadow="hover">
|
||||
<el-table :data="modelList" border style="width: 100%">
|
||||
<el-table-column type="index" label="序号" width="60" align="center" />
|
||||
<el-table-column prop="name" label="模型名称" />
|
||||
<el-table-column prop="thumbnail" label="缩略图" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-image
|
||||
style="width: 80px; height: 60px"
|
||||
:src="row.thumbnail"
|
||||
:preview-src-list="[row.thumbnail]"
|
||||
fit="cover"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template #default="{ row }">
|
||||
<!-- <el-button size="small" @click="handleEdit(row)">编辑</el-button> -->
|
||||
<el-button size="small" @click="handleEdit(row)">预览</el-button>
|
||||
<el-button size="small" @click="handleEdit(row)">更换缩略图</el-button>
|
||||
<el-button size="small" @click="handleDelete(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<div class="custom-empty">
|
||||
<img src="@/assets/images/noData.png" alt="暂无数据" />
|
||||
<div class="noData">暂无数据</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 右键菜单 -->
|
||||
<contextMenuCom
|
||||
v-model:visible="contextMenu.visible"
|
||||
:x="contextMenu.x"
|
||||
:y="contextMenu.y"
|
||||
:menu-items="contextMenu.items"
|
||||
@command="handleMenuCommand"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, nextTick, onMounted } from 'vue'
|
||||
import type { TableColumnCtx } from 'element-plus'
|
||||
import contextMenuCom from './contentMenu.vue'
|
||||
import Sortable from 'sortablejs'
|
||||
|
||||
interface TypeNode {
|
||||
id: string
|
||||
name: string
|
||||
parentId: string | null
|
||||
children?: TypeNode[]
|
||||
}
|
||||
|
||||
interface ModelItem {
|
||||
id: string
|
||||
typeId: string
|
||||
name: string
|
||||
thumbnail: string
|
||||
}
|
||||
|
||||
const typeTreeData = ref<TypeNode[]>([
|
||||
{
|
||||
id: '1',
|
||||
name: '一级分类1',
|
||||
parentId: null,
|
||||
children: [
|
||||
{ id: '1-1', name: '二级分类1-1', parentId: '1' },
|
||||
{ id: '1-2', name: '二级分类1-2', parentId: '1' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '一级分类2',
|
||||
parentId: null,
|
||||
children: [
|
||||
{ id: '2-1', name: '二级分类2-1', parentId: '2' },
|
||||
{ id: '2-2', name: '二级分类2-2', parentId: '2' }
|
||||
]
|
||||
}
|
||||
])
|
||||
|
||||
const modelList = ref<ModelItem[]>([])
|
||||
const currentTypeId = ref<string>('')
|
||||
|
||||
const contextMenu = reactive({
|
||||
visible: false,
|
||||
x: 0,
|
||||
y: 0,
|
||||
currentRow: null as TypeNode | null,
|
||||
items: [] as { command: string; icon: string; label: string; disabled?: boolean }[]
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
var sortableInstance: any = reactive(null)
|
||||
//拖拽
|
||||
const setSort = () => {
|
||||
nextTick(() => {
|
||||
const tbody = tableRef.value?.$el.querySelector('.el-table__body-wrapper tbody')
|
||||
if (!tbody) {
|
||||
console.warn('tbody 不存在，拖拽初始化失败')
|
||||
return
|
||||
}
|
||||
|
||||
// 销毁旧实例
|
||||
if (sortableInstance) {
|
||||
sortableInstance.destroy()
|
||||
}
|
||||
|
||||
console.log('tbody', tbody)
|
||||
// 创建新的拖拽实例
|
||||
sortableInstance = Sortable.create(tbody, {
|
||||
handle: '.allowDrag', // 指定拖拽区域
|
||||
animation: 150,
|
||||
onEnd: (evt) => {
|
||||
console.log(evt, 'evt')
|
||||
const movedItem = typeTreeData.value.splice(evt.oldIndex, 1)[0]
|
||||
typeTreeData.value.splice(evt.newIndex, 0, movedItem)
|
||||
console.log(typeTreeData, 'typeTreeData')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const handleContextMenu = (row: TypeNode, column: TableColumnCtx<TypeNode>, event: MouseEvent) => {
|
||||
event.stopPropagation()
|
||||
event.preventDefault()
|
||||
|
||||
contextMenu.currentRow = row
|
||||
contextMenu.x = event.clientX
|
||||
contextMenu.y = event.clientY
|
||||
|
||||
if (row.parentId) {
|
||||
// 二级分类菜单
|
||||
contextMenu.items = [
|
||||
{ command: 'import', label: '导入模型', icon: 'importModel' },
|
||||
{ command: 'rename', label: '重命名', icon: 'rename' },
|
||||
{ command: 'delete', label: '删除', icon: 'delModel' }
|
||||
]
|
||||
} else {
|
||||
// 一级分类菜单
|
||||
contextMenu.items = [
|
||||
{ command: 'add-child', label: '添加子类型', icon: 'add' },
|
||||
{ command: 'import', label: '导入模型', icon: 'importModel' },
|
||||
{ command: 'rename', label: '重命名', icon: 'rename' },
|
||||
{ command: 'delete', label: '删除', icon: 'delModel' }
|
||||
]
|
||||
}
|
||||
|
||||
contextMenu.visible = true
|
||||
}
|
||||
const toggleExpand = (row: any) => {
|
||||
if (row.parentId == null) {
|
||||
row._expanded = !row._expanded
|
||||
// 这里需要调用el-table的toggleRowExpansion方法
|
||||
// 需要通过ref获取table实例
|
||||
tableRef.value?.toggleRowExpansion(row, row._expanded)
|
||||
}
|
||||
currentTypeId.value = row.id
|
||||
loadModelsByType(row.id)
|
||||
contextMenu.visible && (contextMenu.visible = false)
|
||||
}
|
||||
const divContextMenu = (event: MouseEvent) => {
|
||||
event.preventDefault()
|
||||
contextMenu.x = event.clientX
|
||||
contextMenu.y = event.clientY
|
||||
console.log('空白右击')
|
||||
|
||||
contextMenu.items = [{ command: 'addType', label: '添加类型', icon: 'add' }]
|
||||
|
||||
contextMenu.visible = true
|
||||
}
|
||||
|
||||
const handleMenuCommand = (command: string) => {
|
||||
const row = contextMenu.currentRow
|
||||
if (!row) return
|
||||
|
||||
switch (command) {
|
||||
case 'add-child':
|
||||
handleAddChildType(row)
|
||||
break
|
||||
case 'import':
|
||||
handleImportModel(row)
|
||||
break
|
||||
case 'rename':
|
||||
handleRenameType(row)
|
||||
break
|
||||
case 'delete':
|
||||
handleDeleteType(row)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
const handleTypeClick = (row: TypeNode) => {
|
||||
// currentTypeId.value = row.id
|
||||
// // 模拟根据类型ID加载模型数据
|
||||
// loadModelsByType(row.id)
|
||||
// contextMenu.visible && (contextMenu.visible = false)
|
||||
}
|
||||
const handleClick = () => {
|
||||
contextMenu.visible && (contextMenu.visible = false)
|
||||
}
|
||||
|
||||
const loadModelsByType = (typeId: string) => {
|
||||
// 模拟数据加载
|
||||
modelList.value = [
|
||||
{
|
||||
id: '1',
|
||||
typeId: typeId,
|
||||
name: `模型_${typeId}_1`,
|
||||
thumbnail: 'https://picsum.photos/200/150?random=1'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
typeId: typeId,
|
||||
name: `模型_${typeId}_2`,
|
||||
thumbnail: 'https://picsum.photos/200/150?random=2'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const handleAddChildType = (row: TypeNode) => {
|
||||
console.log('添加子类型', row)
|
||||
}
|
||||
|
||||
const handleImportModel = (row: TypeNode) => {
|
||||
console.log('导入模型到', row)
|
||||
}
|
||||
|
||||
const handleRenameType = (row: TypeNode) => {
|
||||
console.log('重命名类型', row)
|
||||
}
|
||||
|
||||
const handleDeleteType = (row: TypeNode) => {
|
||||
console.log('删除类型', row)
|
||||
}
|
||||
|
||||
const handleEdit = (row: ModelItem) => {
|
||||
console.log('编辑模型', row)
|
||||
}
|
||||
|
||||
const handleDelete = (row: ModelItem) => {
|
||||
console.log('删除模型', row)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
setSort() //删除，新增都必须再调用一次
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.model-management-container {
|
||||
padding: 20px;
|
||||
height: 100%;
|
||||
}
|
||||
.tree {
|
||||
border-right: 1px solid rgba(var(--color-sdk-base-rgb), 0.5);
|
||||
}
|
||||
|
||||
.tree-container {
|
||||
height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.el-row {
|
||||
border: 1px solid rgba(var(--color-sdk-base-rgb), 0.5);
|
||||
}
|
||||
::v-deep .el-button--small {
|
||||
padding: 5px 7px !important;
|
||||
}
|
||||
.el-button {
|
||||
background-color: rgba(var(--color-sdk-base-rgb), 0.2) !important;
|
||||
--el-button-text-color: rgba(255, 255, 255, 1) !important;
|
||||
--el-button-border-color: rgba(var(--color-sdk-base-rgb), 0.2);
|
||||
--el-button-hover-text-color: rgba(var(--color-sdk-base-rgb), 1) !important;
|
||||
--el-button-hover-border-color: rgba(var(--color-sdk-base-rgb), 1) !important;
|
||||
}
|
||||
|
||||
.primary-type {
|
||||
font-weight: bold;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
::v-deep .el-scrollbar {
|
||||
height: 360px !important;
|
||||
overflow: auto;
|
||||
}
|
||||
.el-card {
|
||||
--el-card-border-color: 1px solid rgba(var(--color-sdk-base-rgb), 0.5);
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.el-table {
|
||||
--el-table-border: 1px solid rgba(var(--color-sdk-base-rgb), 0.5);
|
||||
--el-table-header-bg-color: transparent !important;
|
||||
--el-table-tr-bg-color: transparent !important;
|
||||
--el-table-bg-color: transparent !important;
|
||||
--el-table-current-row-bg-color: transparent !important;
|
||||
--el-table-row-hover-bg-color: transparent !important;
|
||||
--el-table-border-color: transparent !important;
|
||||
--el-table-text-color: rgba(230, 247, 255, 1) !important;
|
||||
--el-table-header-text-color: rgba(230, 247, 255, 1) !important;
|
||||
font-size: 14px !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
/* 一级菜单 */
|
||||
.primary-type {
|
||||
color: rgba(255, 255, 255, 1) !important;
|
||||
font-size: 14px !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
.tree .el-table {
|
||||
--el-table-border: unset !important;
|
||||
--el-table-text-color: rgba(255, 255, 255, 1) !important;
|
||||
--el-table-header-text-color: rgba(255, 255, 255, 1) !important;
|
||||
font-size: 12px !important;
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
|
||||
::v-deep .tree .el-table__header-wrapper {
|
||||
border-bottom: 1px solid rgba(var(--color-sdk-base-rgb), 0.5) !important;
|
||||
}
|
||||
.el-table__body {
|
||||
height: 360px !important;
|
||||
}
|
||||
.el-table td.el-table__cell,
|
||||
.el-table th.el-table__cell.is-leaf {
|
||||
border-bottom: transparent !important;
|
||||
height: 80px;
|
||||
}
|
||||
::v-deep .el-card.is-always-shadow,
|
||||
::v-deep .el-card.is-hover-shadow:focus,
|
||||
::v-deep .el-card.is-hover-shadow:hover {
|
||||
box-shadow: transparent !important;
|
||||
}
|
||||
::v-deep .el-card.is-always-shadow,
|
||||
::v-deep .el-card.is-hover-shadow:focus,
|
||||
::v-deep .el-card.is-hover-shadow:hover {
|
||||
box-shadow: transparent !important;
|
||||
}
|
||||
::v-deep .el-card__body {
|
||||
padding: 0 !important;
|
||||
}
|
||||
::v-deep .el-col,
|
||||
.el-col-6,
|
||||
.is-guttered {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
::v-deep .el-icon svg {
|
||||
color: rgba(var(--color-sdk-base-rgb), 1) !important;
|
||||
}
|
||||
.selected-text {
|
||||
color: rgba(var(--color-sdk-base-rgb), 1) !important; /* Element UI主色，可自定义 */
|
||||
}
|
||||
::v-deep .el-table__expand-icon {
|
||||
display: none !important;
|
||||
}
|
||||
.el-table__empty-text {
|
||||
line-height: 0px !important;
|
||||
}
|
||||
.noData {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.custom-empty {
|
||||
display: flex;
|
||||
justify-content: center; /* 水平居中 */
|
||||
align-items: center; /* 垂直居中 */
|
||||
flex-direction: column;
|
||||
height: 300px;
|
||||
}
|
||||
.custom-empty img {
|
||||
display: block;
|
||||
width: 130px;
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="model_manage">
|
||||
<div class="equipment_title">
|
||||
<div class="model-management-container">
|
||||
<div class="equipment_title" style="margin-bottom: 10px">
|
||||
<el-button color="#004b4b" style="border: 1px solid rgba(0, 255, 255, 0.5)">
|
||||
<template #icon>
|
||||
<svg-icon name="leading_in" />
|
||||
@ -14,14 +14,475 @@
|
||||
<span>创建模型库</span>
|
||||
</el-button>
|
||||
</div>
|
||||
<el-row :gutter="20">
|
||||
<!-- 左侧分类树 -->
|
||||
<el-col :span="6" class="tree">
|
||||
<el-card shadow="hover">
|
||||
<div class="tree-container" @click="handleClick" @contextmenu="divContextMenu">
|
||||
<el-tree
|
||||
style="max-width: 600px"
|
||||
:allow-drop="allowDrop"
|
||||
:allow-drag="allowDrag"
|
||||
:data="typeTreeData"
|
||||
draggable
|
||||
ref="treeRef"
|
||||
default-expand-all
|
||||
node-key="id"
|
||||
@node-click="handleTypeClick"
|
||||
@node-contextmenu="handleContextMenu"
|
||||
@node-drag-start="handleDragStart"
|
||||
@node-drag-enter="handleDragEnter"
|
||||
@node-drag-leave="handleDragLeave"
|
||||
@node-drag-over="handleDragOver"
|
||||
@node-drag-end="handleDragEnd"
|
||||
@node-drop="handleDrop"
|
||||
>
|
||||
<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>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!-- 右侧模型列表 -->
|
||||
<el-col :span="18">
|
||||
<el-card shadow="hover">
|
||||
<el-table :data="modelList" border style="width: 100%">
|
||||
<el-table-column type="index" label="序号" width="60" align="center" />
|
||||
<el-table-column prop="name" label="模型名称" />
|
||||
<el-table-column prop="thumbnail" label="缩略图" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-image
|
||||
style="width: 80px; height: 60px"
|
||||
@click="showImage(row)"
|
||||
:src="row.thumbnail"
|
||||
fit="cover"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template #default="{ row }">
|
||||
<!-- <el-button size="small" @click="handleEdit(row)">编辑</el-button> -->
|
||||
<el-button size="small" @click="handleEdit(row)">预览</el-button>
|
||||
<el-button size="small" @click="handleEdit(row)">更换缩略图</el-button>
|
||||
<el-button size="small" @click="handleDelete(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<div class="custom-empty">
|
||||
<img src="@/assets/images/noData.png" alt="暂无数据" />
|
||||
<div class="noData">暂无数据</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 右键菜单 -->
|
||||
<contextMenuCom
|
||||
v-model:visible="contextMenu.visible"
|
||||
:x="contextMenu.x"
|
||||
:y="contextMenu.y"
|
||||
:menu-items="contextMenu.items"
|
||||
@command="handleMenuCommand"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, nextTick, onMounted } from 'vue'
|
||||
import type { TableColumnCtx } from 'element-plus'
|
||||
import contextMenuCom from './contentMenu.vue'
|
||||
import Sortable from 'sortablejs'
|
||||
import { inject } from 'vue'
|
||||
import type { DragEvents } from 'element-plus/es/components/tree/src/model/useDragNode'
|
||||
import type { AllowDropType, NodeDropType, RenderContentContext } from 'element-plus'
|
||||
|
||||
<style scoped lang="scss">
|
||||
.model_manage {
|
||||
width: 100%;
|
||||
const eventBus: any = inject('bus')
|
||||
|
||||
interface TypeNode {
|
||||
id: string
|
||||
label: string
|
||||
parentId: string | null
|
||||
children?: TypeNode[]
|
||||
}
|
||||
|
||||
interface ModelItem {
|
||||
id: string
|
||||
typeId: string
|
||||
name: string
|
||||
thumbnail: string
|
||||
}
|
||||
|
||||
const typeTreeData = ref<TypeNode[]>([
|
||||
{
|
||||
id: '1',
|
||||
label: '一级分类1',
|
||||
parentId: null,
|
||||
children: [
|
||||
{ id: '1-1', label: '二级分类1-1', parentId: '1' },
|
||||
{ id: '1-2', label: '二级分类1-2', parentId: '1' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
label: '一级分类2',
|
||||
parentId: null,
|
||||
children: [
|
||||
{ id: '2-1', label: '二级分类2-1', parentId: '2' },
|
||||
{ id: '2-2', label: '二级分类2-2', parentId: '2' }
|
||||
]
|
||||
}
|
||||
])
|
||||
|
||||
const modelList = ref<ModelItem[]>([])
|
||||
const currentTypeId = ref<string>('')
|
||||
|
||||
const contextMenu = reactive({
|
||||
visible: false,
|
||||
x: 0,
|
||||
y: 0,
|
||||
currentRow: null as TypeNode | null,
|
||||
items: [] as { command: string; icon: string; label: string; disabled?: boolean }[]
|
||||
})
|
||||
|
||||
const treeRef = ref()
|
||||
var sortableInstance: any = reactive(null)
|
||||
|
||||
//拖拽
|
||||
type Node = RenderContentContext['node']
|
||||
|
||||
const handleDragStart = (node: Node, ev: DragEvents) => {
|
||||
console.log('drag start', node)
|
||||
}
|
||||
const handleDragEnter = (draggingNode: Node, dropNode: Node, ev: DragEvents) => {
|
||||
console.log('tree drag enter:', dropNode.label)
|
||||
}
|
||||
const handleDragLeave = (draggingNode: Node, dropNode: Node, ev: DragEvents) => {
|
||||
console.log('tree drag leave:', dropNode.label)
|
||||
}
|
||||
const handleDragOver = (draggingNode: Node, dropNode: Node, ev: DragEvents) => {
|
||||
console.log('tree drag over:', dropNode.label)
|
||||
}
|
||||
const handleDragEnd = (
|
||||
draggingNode: Node,
|
||||
dropNode: Node,
|
||||
dropType: NodeDropType,
|
||||
ev: DragEvents
|
||||
) => {
|
||||
console.log('tree drag end:', dropNode && dropNode.label, dropType)
|
||||
}
|
||||
const handleDrop = (draggingNode: Node, dropNode: Node, dropType: NodeDropType, ev: DragEvents) => {
|
||||
console.log('tree drop:', dropNode.label, dropType)
|
||||
}
|
||||
const allowDrop = (draggingNode: Node, dropNode: Node, type: AllowDropType) => {
|
||||
if (dropNode.data.label === 'Level two 3-1') {
|
||||
return type !== 'inner'
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
}
|
||||
const allowDrag = (draggingNode: Node) => {
|
||||
return !draggingNode.data.label.includes('Level three 3-1-1')
|
||||
}
|
||||
|
||||
//拖拽结束
|
||||
|
||||
//---------------------查看缩略图--------------------
|
||||
|
||||
const showImage = (row: any) => {
|
||||
console.log(row, 'image')
|
||||
eventBus.emit('imagePopDialog', row)
|
||||
eventBus.emit('settingPop', false)
|
||||
}
|
||||
|
||||
const handleContextMenu = (event: MouseEvent, row: TypeNode) => {
|
||||
event.stopPropagation()
|
||||
event.preventDefault()
|
||||
|
||||
contextMenu.currentRow = row
|
||||
contextMenu.x = event.clientX
|
||||
contextMenu.y = event.clientY
|
||||
|
||||
if (row.parentId) {
|
||||
// 二级分类菜单
|
||||
contextMenu.items = [
|
||||
{ command: 'import', label: '导入模型', icon: 'importModel' },
|
||||
{ command: 'rename', label: '重命名', icon: 'rename' },
|
||||
{ command: 'delete', label: '删除', icon: 'delModel' }
|
||||
]
|
||||
} else {
|
||||
// 一级分类菜单
|
||||
contextMenu.items = [
|
||||
{ command: 'add-child', label: '添加子类型', icon: 'add' },
|
||||
{ command: 'import', label: '导入模型', icon: 'importModel' },
|
||||
{ command: 'rename', label: '重命名', icon: 'rename' },
|
||||
{ command: 'delete', label: '删除', icon: 'delModel' }
|
||||
]
|
||||
}
|
||||
|
||||
contextMenu.visible = true
|
||||
}
|
||||
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()
|
||||
}
|
||||
}
|
||||
currentTypeId.value = row.id
|
||||
loadModelsByType(row.id)
|
||||
contextMenu.visible && (contextMenu.visible = false)
|
||||
}
|
||||
const divContextMenu = (event: MouseEvent) => {
|
||||
event.preventDefault()
|
||||
contextMenu.x = event.clientX
|
||||
contextMenu.y = event.clientY
|
||||
console.log('空白右击')
|
||||
|
||||
contextMenu.items = [{ command: 'addType', label: '添加类型', icon: 'add' }]
|
||||
|
||||
contextMenu.visible = true
|
||||
}
|
||||
|
||||
const handleMenuCommand = (command: string) => {
|
||||
const row = contextMenu.currentRow
|
||||
if (!row) return
|
||||
|
||||
switch (command) {
|
||||
case 'add-child':
|
||||
handleAddChildType(row)
|
||||
break
|
||||
case 'import':
|
||||
handleImportModel(row)
|
||||
break
|
||||
case 'rename':
|
||||
handleRenameType(row)
|
||||
break
|
||||
case 'delete':
|
||||
handleDeleteType(row)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
const handleTypeClick = (row: TypeNode) => {
|
||||
console.log(row)
|
||||
// currentTypeId.value = row.id
|
||||
// // 模拟根据类型ID加载模型数据
|
||||
// loadModelsByType(row.id)
|
||||
// contextMenu.visible && (contextMenu.visible = false)
|
||||
}
|
||||
const handleClick = () => {
|
||||
contextMenu.visible && (contextMenu.visible = false)
|
||||
}
|
||||
|
||||
const loadModelsByType = (typeId: string) => {
|
||||
// 模拟数据加载
|
||||
modelList.value = [
|
||||
{
|
||||
id: '1',
|
||||
typeId: typeId,
|
||||
name: `模型_${typeId}_1`,
|
||||
thumbnail: 'https://picsum.photos/200/150?random=1'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
typeId: typeId,
|
||||
name: `模型_${typeId}_2`,
|
||||
thumbnail: 'https://picsum.photos/200/150?random=2'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const handleAddChildType = (row: TypeNode) => {
|
||||
console.log('添加子类型', row)
|
||||
}
|
||||
|
||||
const handleImportModel = (row: TypeNode) => {
|
||||
console.log('导入模型到', row)
|
||||
}
|
||||
|
||||
const handleRenameType = (row: TypeNode) => {
|
||||
console.log('重命名类型', row)
|
||||
}
|
||||
|
||||
const handleDeleteType = (row: TypeNode) => {
|
||||
console.log('删除类型', row)
|
||||
}
|
||||
|
||||
const handleEdit = (row: ModelItem) => {
|
||||
console.log('编辑模型', row)
|
||||
}
|
||||
|
||||
const handleDelete = (row: ModelItem) => {
|
||||
console.log('删除模型', row)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.model-management-container {
|
||||
padding: 20px;
|
||||
height: 100%;
|
||||
}
|
||||
.tree {
|
||||
border-right: 1px solid rgba(var(--color-sdk-base-rgb), 0.5);
|
||||
}
|
||||
|
||||
.tree-container {
|
||||
height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.el-row {
|
||||
border: 1px solid rgba(var(--color-sdk-base-rgb), 0.5);
|
||||
}
|
||||
::v-deep .el-button--small {
|
||||
padding: 5px 7px !important;
|
||||
}
|
||||
.el-button {
|
||||
background-color: rgba(var(--color-sdk-base-rgb), 0.2) !important;
|
||||
--el-button-text-color: rgba(255, 255, 255, 1) !important;
|
||||
--el-button-border-color: rgba(var(--color-sdk-base-rgb), 0.2);
|
||||
--el-button-hover-text-color: rgba(var(--color-sdk-base-rgb), 1) !important;
|
||||
--el-button-hover-border-color: rgba(var(--color-sdk-base-rgb), 1) !important;
|
||||
}
|
||||
|
||||
.primary-type {
|
||||
font-weight: bold;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
::v-deep .el-scrollbar {
|
||||
height: 360px !important;
|
||||
overflow: auto;
|
||||
}
|
||||
.el-card {
|
||||
--el-card-border-color: 1px solid rgba(var(--color-sdk-base-rgb), 0.5);
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.el-table {
|
||||
--el-table-border: 1px solid rgba(var(--color-sdk-base-rgb), 0.5);
|
||||
--el-table-header-bg-color: transparent !important;
|
||||
--el-table-tr-bg-color: transparent !important;
|
||||
--el-table-bg-color: transparent !important;
|
||||
--el-table-current-row-bg-color: transparent !important;
|
||||
--el-table-row-hover-bg-color: transparent !important;
|
||||
--el-table-border-color: transparent !important;
|
||||
--el-table-text-color: rgba(230, 247, 255, 1) !important;
|
||||
--el-table-header-text-color: rgba(230, 247, 255, 1) !important;
|
||||
font-size: 14px !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
/* 一级菜单 */
|
||||
.primary-type {
|
||||
color: rgba(255, 255, 255, 1) !important;
|
||||
font-size: 12px !important;
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
.tree .el-table {
|
||||
--el-table-border: unset !important;
|
||||
--el-table-text-color: rgba(255, 255, 255, 1) !important;
|
||||
--el-table-header-text-color: rgba(255, 255, 255, 1) !important;
|
||||
font-size: 12px !important;
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
|
||||
::v-deep .tree .el-table__header-wrapper {
|
||||
border-bottom: 1px solid rgba(var(--color-sdk-base-rgb), 0.5) !important;
|
||||
}
|
||||
.el-table__body {
|
||||
height: 360px !important;
|
||||
}
|
||||
.el-table td.el-table__cell,
|
||||
.el-table th.el-table__cell.is-leaf {
|
||||
border-bottom: transparent !important;
|
||||
height: 80px;
|
||||
}
|
||||
::v-deep .el-card.is-always-shadow,
|
||||
::v-deep .el-card.is-hover-shadow:focus,
|
||||
::v-deep .el-card.is-hover-shadow:hover {
|
||||
box-shadow: transparent !important;
|
||||
}
|
||||
::v-deep .el-card.is-always-shadow,
|
||||
::v-deep .el-card.is-hover-shadow:focus,
|
||||
::v-deep .el-card.is-hover-shadow:hover {
|
||||
box-shadow: transparent !important;
|
||||
}
|
||||
::v-deep .el-card__body {
|
||||
padding: 0 !important;
|
||||
}
|
||||
::v-deep .el-col,
|
||||
.el-col-6,
|
||||
.is-guttered {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
::v-deep .el-icon svg {
|
||||
color: rgba(var(--color-sdk-base-rgb), 1) !important;
|
||||
}
|
||||
.selected-text {
|
||||
color: rgba(var(--color-sdk-base-rgb), 1) !important; /* Element UI主色，可自定义 */
|
||||
}
|
||||
::v-deep .el-table__expand-icon {
|
||||
display: none !important;
|
||||
}
|
||||
::v-deep .el-tree-node__expand-icon {
|
||||
display: none !important;
|
||||
}
|
||||
.el-table__empty-text {
|
||||
line-height: 0px !important;
|
||||
}
|
||||
.noData {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.custom-empty {
|
||||
display: flex;
|
||||
justify-content: center; /* 水平居中 */
|
||||
align-items: center; /* 垂直居中 */
|
||||
flex-direction: column;
|
||||
height: 300px;
|
||||
}
|
||||
.custom-empty img {
|
||||
display: block;
|
||||
width: 130px;
|
||||
}
|
||||
.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; */
|
||||
}
|
||||
::v-deep .el-text {
|
||||
color: rgba(255, 255, 255, 1) !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -50,9 +50,13 @@ const isShowPup = ref(false)
|
||||
const open = () => {
|
||||
isShowPup.value = true
|
||||
}
|
||||
const close = () => {
|
||||
isShowPup.value = false
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open
|
||||
open,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
export const uesSetTool = (setPupRef?: any) => {
|
||||
//打开弹窗
|
||||
const setShow = () => {
|
||||
console.log(setPupRef)
|
||||
console.log(setPupRef, 'setPupRef')
|
||||
setPupRef.value.open()
|
||||
}
|
||||
|
||||
|
||||
@ -13,8 +13,14 @@
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="set_item" :title="t('iconTitle.' + item.name)" v-for="(item, i) of setList" :key="item.id"
|
||||
:class="{ 'last-item': i === setList.length - 1 }" @click="item.callback">
|
||||
<div
|
||||
class="set_item"
|
||||
:title="t('iconTitle.' + item.name)"
|
||||
v-for="(item, i) of setList"
|
||||
:key="item.id"
|
||||
:class="{ 'last-item': i === setList.length - 1 }"
|
||||
@click="item.callback"
|
||||
>
|
||||
<svg-icon :name="item.icon" :size="20"></svg-icon>
|
||||
</div>
|
||||
<setPup ref="setPupRef"></setPup>
|
||||
@ -25,15 +31,23 @@
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import setPup from '../setPup/setPup.vue'
|
||||
import { inject } from 'vue'
|
||||
const router = useRouter() // 路由实例
|
||||
const { t } = useI18n()
|
||||
import { uesSetTool } from './hooks'
|
||||
import { LoginApi } from '@renderer/api/login'
|
||||
const setPupRef = ref()
|
||||
const { setShow } = uesSetTool(setPupRef)
|
||||
|
||||
//控制显隐
|
||||
const eventBus: any = inject('bus')
|
||||
eventBus.on('settingPop', (data) => {
|
||||
console.log(setPupRef.value, 'data')
|
||||
data ? setPupRef.value.open() : setPupRef.value.close()
|
||||
})
|
||||
const logout = async () => {
|
||||
let res = await LoginApi.logout()
|
||||
console.log(res);
|
||||
console.log(res)
|
||||
if (res.code === 200) {
|
||||
router.push({ path: '/' })
|
||||
// localStorage.clear()
|
||||
@ -85,7 +99,7 @@ const setList = ref([
|
||||
name: 'logout',
|
||||
className: 'header_public',
|
||||
dbcallback: null,
|
||||
callback: logout,
|
||||
callback: logout
|
||||
}
|
||||
])
|
||||
</script>
|
||||
@ -121,10 +135,12 @@ const setList = ref([
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background: linear-gradient(180deg,
|
||||
rgba(0, 255, 255, 0),
|
||||
rgba(0, 255, 255, 1),
|
||||
rgba(204, 204, 204, 0));
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(0, 255, 255, 0),
|
||||
rgba(0, 255, 255, 1),
|
||||
rgba(204, 204, 204, 0)
|
||||
);
|
||||
}
|
||||
|
||||
.set_item.last-item::after {
|
||||
|
||||
@ -37,6 +37,7 @@ import { useI18n } from 'vue-i18n'
|
||||
|
||||
import { bus } from '@/utils/bus'
|
||||
import leftSideSecond from '@/views/components/leftSide/leftSideSecond.vue'
|
||||
import { ElMessage, ElLoading } from 'element-plus'
|
||||
|
||||
const { t } = useI18n()
|
||||
const eventBus: any = inject('bus')
|
||||
@ -191,6 +192,16 @@ const handleClick = (item: any, e) => {
|
||||
if (item.children.length) {
|
||||
$('.leftSideSecond')[0].style.display = 'block'
|
||||
leftSideSecondRef.value.initList(item)
|
||||
} else if (item.key === 'model') {
|
||||
//模型库
|
||||
if (window.checkAuthIsValid) {
|
||||
eventBus.emit('openModel', true)
|
||||
} else {
|
||||
ElMessage({
|
||||
message: '您没有该功能的权限',
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
const fold = () => {
|
||||
|
||||
109
src/renderer/src/views/components/propertyBox/imagePop.vue
Normal file
109
src/renderer/src/views/components/propertyBox/imagePop.vue
Normal file
@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<Dialog
|
||||
ref="baseDialog"
|
||||
title="模型预览器"
|
||||
class="imagePop"
|
||||
left="180px"
|
||||
top="100px"
|
||||
:closeCallback="closeCallBack"
|
||||
>
|
||||
<template #content>
|
||||
<div class="content">
|
||||
<span class="custom-divider"></span>
|
||||
<div class="imageCon">
|
||||
<img class="image" :src="rowData.thumbnail" alt="" />
|
||||
</div>
|
||||
<div class="inputCon">
|
||||
<span class="label">模型名称</span>
|
||||
<input class="input" maxlength="40" type="text" v-model="newData.name" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div style="position: absolute; left: -400px; display: flex">
|
||||
<button @click="setImage">设置预览图</button>
|
||||
</div>
|
||||
<button @click="save">保存</button>
|
||||
<button @click="close">关闭</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
import Dialog from '@/components/dialog/baseDialog.vue'
|
||||
|
||||
const baseDialog: any = ref(null)
|
||||
const eventBus: any = inject('bus')
|
||||
const viewPointHeight: any = ref(1.8)
|
||||
var rowData: any = reactive([])
|
||||
var newData: any = reactive({
|
||||
name: ''
|
||||
})
|
||||
eventBus.on('imagePopDialog', (data) => {
|
||||
console.log(data, 'data')
|
||||
rowData = data
|
||||
baseDialog.value?.open()
|
||||
})
|
||||
|
||||
const clangeViewPointHeight = () => {}
|
||||
const viewPointHeightInput = () => {
|
||||
let dom: any = document.getElementById('viewPointHeight')
|
||||
if (viewPointHeight.value < dom.min * 1) {
|
||||
viewPointHeight.value = dom.min * 1
|
||||
} else if (viewPointHeight.value > dom.max * 1) {
|
||||
viewPointHeight.value = dom.max * 1
|
||||
}
|
||||
}
|
||||
const closeCallBack = (e) => {
|
||||
//打开系统设置弹框
|
||||
eventBus.emit('settingPop', true)
|
||||
}
|
||||
const setImage = (e) => {
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
const close = (e) => {
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
const save = (e) => {
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.imageCon {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
float: left;
|
||||
}
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.inputCon {
|
||||
width: 180px;
|
||||
float: left;
|
||||
margin-left: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.inputCon span {
|
||||
display: block;
|
||||
width: 60px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
float: left;
|
||||
}
|
||||
.inputCon .input {
|
||||
float: left;
|
||||
width: 120px;
|
||||
}
|
||||
.content {
|
||||
width: 600px;
|
||||
height: 400px;
|
||||
}
|
||||
</style>
|
||||
204
src/renderer/src/views/components/propertyBox/model.vue
Normal file
204
src/renderer/src/views/components/propertyBox/model.vue
Normal file
@ -0,0 +1,204 @@
|
||||
<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('model.title') }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="set_detail"></div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n'
|
||||
const { t } = useI18n()
|
||||
const isShowPup = ref(false)
|
||||
const eventBus: any = inject('bus')
|
||||
|
||||
eventBus.on('openModel', (data) => {
|
||||
isShowPup.value = data
|
||||
})
|
||||
const open = () => {
|
||||
isShowPup.value = true
|
||||
}
|
||||
const close = () => {
|
||||
isShowPup.value = false
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -38,6 +38,8 @@
|
||||
<GoodsSearchCircle ref="goodsSearchCircle"></GoodsSearchCircle>
|
||||
<GoodsSearchPolgon ref="goodsSearchPolgon"></GoodsSearchPolgon>
|
||||
<tufuSelect ref="tufuselect"></tufuSelect>
|
||||
<imagePop ref="imagepop"></imagePop>
|
||||
<model ref="Model"></model>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -83,6 +85,8 @@ import GoodsSearchCircle from '../components/propertyBox/GoodsSearchCircle.vue'
|
||||
import GoodsSearchPolgon from '../components/propertyBox/GoodsSearchPolgon.vue'
|
||||
import flat from '../components/propertyBox/flat.vue'
|
||||
import tufuSelect from '../components/headers/components/tufu_select.vue'
|
||||
import imagePop from '../components/propertyBox/imagePop.vue'
|
||||
import model from '../components/propertyBox/model.vue'
|
||||
|
||||
import { GisApi } from '@/api/gisApi'
|
||||
|
||||
|
||||
Reference in New Issue
Block a user