图标
This commit is contained in:
@ -159,6 +159,7 @@ export default {
|
||||
device: '设备管理',
|
||||
modelManage: '模型管理',
|
||||
graphLabelManage: '军标管理',
|
||||
photoManage: '图标管理',
|
||||
version: '版本信息'
|
||||
},
|
||||
auths: {
|
||||
@ -175,6 +176,7 @@ export default {
|
||||
theme: '主题换肤',
|
||||
defaultView: '设置',
|
||||
defaultData: '添加',
|
||||
intoBack: '进入',
|
||||
management: '后台管理',
|
||||
showCompass: '导航器',
|
||||
showLatitudeLongitudeNetwork: '经纬网',
|
||||
|
||||
93
src/renderer/src/api/photo/index.ts
Normal file
93
src/renderer/src/api/photo/index.ts
Normal file
@ -0,0 +1,93 @@
|
||||
import request from '@/axios/request'
|
||||
//图标库
|
||||
export const PhotoApi = {
|
||||
//创建图标库
|
||||
createModelDB: async (data: any) => {
|
||||
return await request.post({
|
||||
url: `/iconLibrary/createIconLibrary`,
|
||||
data
|
||||
})
|
||||
},
|
||||
//导入图标库
|
||||
importModelDB: async (data: any) => {
|
||||
return await request.post({
|
||||
url: `/iconLibrary/importIconLibrary`,
|
||||
data
|
||||
})
|
||||
},
|
||||
//删除图标
|
||||
delModel: async (data: any) => {
|
||||
return await request.post({
|
||||
url: `/iconLibrary/deleteIcon`,
|
||||
data,
|
||||
})
|
||||
},
|
||||
//删除图标类型
|
||||
delModelType: async (data: any) => {
|
||||
return await request.post({
|
||||
url: `/iconLibrary/deleteIconType`,
|
||||
data,
|
||||
})
|
||||
},
|
||||
//添加图标类型
|
||||
addModelType: async (data: any) => {
|
||||
return await request.post({
|
||||
url: `/iconLibrary/addIconType`,
|
||||
data
|
||||
})
|
||||
},
|
||||
//修改图标类型名称
|
||||
updateMilitaryTypeName: async (data: any) => {
|
||||
return await request.post({
|
||||
url: `/iconLibrary/updateIconTypeName`,
|
||||
data
|
||||
})
|
||||
},
|
||||
//图标类型列表
|
||||
modelTypeList: async () => {
|
||||
return await request.get({
|
||||
url: `/iconLibrary/iconTypeTree`
|
||||
})
|
||||
},
|
||||
//添加图标文件
|
||||
addGraph: async (data: any) => {
|
||||
return await request.post({
|
||||
url: `/iconLibrary/addIconFile`,
|
||||
data,
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
})
|
||||
},
|
||||
//根据图标类型查看图标列表
|
||||
showModelByType: async (data: any) => {
|
||||
return await request.post({
|
||||
url: `/iconLibrary/iconList`,
|
||||
data,
|
||||
// headers: {
|
||||
// 'content-type': 'application/x-www-form-urlencoded'
|
||||
// }
|
||||
})
|
||||
},
|
||||
//更新图标信息
|
||||
updatePoster: async (data: any) => {
|
||||
return await request.post({
|
||||
url: `/iconLibrary/updateIconInfo`,
|
||||
data
|
||||
})
|
||||
},
|
||||
// //默认图标参数设置
|
||||
// modelSetting: async (data: any) => {
|
||||
// return await request.post({
|
||||
// url: `/businessConfig/addBusinessConfig`,
|
||||
// data,
|
||||
// })
|
||||
// },
|
||||
// //获取默认图标参数设置
|
||||
// getModelSetting: async () => {
|
||||
// return await request.get({
|
||||
// url: `/businessConfig/list`
|
||||
// })
|
||||
// },
|
||||
|
||||
}
|
||||
1
src/renderer/src/icons/svg/addDevice.svg
Normal file
1
src/renderer/src/icons/svg/addDevice.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.5696 8.36808C11.3293 8.3718 11.1356 8.56922 11.1393 8.80947L11.1393 9.91763C11.1393 10.4019 10.7556 10.7967 10.2825 10.7967L1.71933 10.7967C1.24619 10.7967 0.862461 10.4019 0.862461 9.91763L0.862461 2.01156C0.862461 1.52733 1.24619 1.13249 1.71933 1.13249L4.69976 1.13249L5.80624 3.10109C5.89566 3.25754 6.06331 3.33762 6.22909 3.319L10.2806 3.319C10.7538 3.319 11.1375 3.71383 11.1375 4.19807L11.1375 5.29691C11.1375 5.54089 11.3312 5.73831 11.5696 5.73831C11.8081 5.73831 11.9999 5.54089 11.9999 5.29691C11.9999 5.28573 11.9999 5.27456 11.9981 5.26339L11.9981 4.19807C11.9981 3.22774 11.2306 2.43992 10.2843 2.43992L6.42654 2.43992L5.32192 0.478772C5.2232 0.30184 5.08163 0.255279 4.95682 0.259004L4.95496 0.257141L1.71375 0.257141C0.76746 0.257141 0 1.04495 0 2.01529L0 9.899C0 10.8693 0.76746 11.6571 1.71375 11.6571L10.2843 11.6571C11.2306 11.6571 11.9981 10.8693 11.9981 9.899L11.9981 8.843C11.9999 8.83182 11.9999 8.82065 11.9999 8.80947C12.0018 8.694 11.9571 8.58226 11.8751 8.50031C11.795 8.4165 11.6851 8.36994 11.5696 8.36808Z" fill="#FFFFFF" ></path><path d="M5.49522 5.17397C5.4263 5.09948 5.3313 5.05664 5.22885 5.05664C5.12826 5.05664 5.03139 5.09948 4.96247 5.17397L3.3754 6.86321L3.36608 6.87252L3.36422 6.87252L3.3549 6.88183C3.21147 7.04014 3.21147 7.28226 3.3549 7.44057L4.94757 9.13911C5.01463 9.21361 5.10963 9.25459 5.21022 9.25645C5.31081 9.25645 5.40581 9.21547 5.47287 9.14098L5.48032 9.13166C5.62375 8.97336 5.62375 8.73124 5.48032 8.57293L4.521 7.54859L8.87801 7.54859C9.08105 7.54859 9.24683 7.37166 9.24683 7.15561C9.24683 6.93957 9.08105 6.76264 8.87801 6.76264L4.53776 6.76264L5.49522 5.74016C5.64238 5.58185 5.64238 5.33414 5.49522 5.17397Z" fill="#FFFFFF" ></path></svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
1
src/renderer/src/icons/svg/select.svg
Normal file
1
src/renderer/src/icons/svg/select.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="M4.22892 9.16677C4.18757 8.9817 4.01913 8.8497 3.82439 8.8497L0.828 8.8497L0.828 0.804888L9.10193 0.804888L9.10193 4.49953C9.10193 4.67389 9.2134 4.82975 9.3814 4.89062C9.66304 4.99255 9.9626 4.78869 9.96029 4.49649L9.92993 0.499965C9.92993 0.223814 9.69976 3.30921e-07 9.41566 3.30921e-07L0.514265 3.30921e-07C0.230169 -0.00028735 0 0.223525 0 0.499676L0 9.15477C0 9.43092 0.230169 9.65473 0.514265 9.65473L3.82439 9.65473C4.08839 9.65473 4.28501 9.41762 4.22892 9.16677Z" fill="#FFFFFF" ></path><path d="M12 7.36786L4.53597 4.45093L6.20397 12L8.05385 9.22935L10.5496 11.656L11.2768 10.949L8.846 8.58553L12 7.36786Z" fill="#FFFFFF" ></path></svg>
|
||||
|
After Width: | Height: | Size: 798 B |
1
src/renderer/src/icons/svg/sitting.svg
Normal file
1
src/renderer/src/icons/svg/sitting.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="11.339996337890625" viewBox="0 0 12 11.339996337890625" fill="none"><path d="M11.874 4.5C11.8039 4.12944 11.5781 3.888 11.298 3.888L11.292 3.888L11.238 3.888C10.4282 3.888 9.768 3.22794 9.768 2.418C9.768 2.15516 9.894 1.86 9.894 1.86C10.0391 1.53328 9.92896 1.1344 9.636 0.93L9.618 0.918L8.13 0.09L8.112 0.084C8.01504 0.0418499 7.90635 0.018 7.794 0.018C7.56374 0.018 7.33695 0.109354 7.188 0.264C7.02472 0.432533 6.46303 0.912 6.03 0.912C5.59306 0.912 5.02997 0.423654 4.866 0.252C4.71627 0.0941974 4.48658 0 4.254 0C4.14384 0 4.03731 0.019351 3.942 0.06L3.924 0.072L2.382 0.918L2.364 0.93C2.07007 1.13422 1.96101 1.53345 2.106 1.86C2.106 1.86 2.232 2.15317 2.232 2.418C2.232 3.22794 1.57192 3.888 0.762 3.888L0.714 3.888L0.702 3.888C0.422224 3.888 0.196105 4.12938 0.126 4.5C0.126 4.52718 0 5.1721 0 5.676C0 6.17989 0.126 6.82475 0.126 6.852C0.196157 7.22258 0.422037 7.458 0.702 7.458L0.708 7.458L0.762 7.458C1.57192 7.458 2.232 8.11807 2.232 8.928C2.232 9.19116 2.106 9.486 2.106 9.486C1.96098 9.81245 2.07119 10.217 2.364 10.422L2.382 10.434L3.84 11.25L3.858 11.256C3.95492 11.2986 4.06422 11.322 4.176 11.322C4.40951 11.322 4.63345 11.2256 4.782 11.064C4.98939 10.8386 5.55443 10.374 5.97 10.374C6.41996 10.374 6.99749 10.8935 7.164 11.076C7.31288 11.2404 7.54014 11.34 7.776 11.34C7.88559 11.34 7.99258 11.3212 8.088 11.28L8.106 11.268L9.618 10.434L9.636 10.422C9.92943 10.2176 10.0447 9.8178 9.9 9.492C9.9 9.492 9.768 9.18933 9.768 8.928C9.768 8.11807 10.4282 7.458 11.238 7.458L11.286 7.458L11.298 7.458C11.5785 7.458 11.804 7.22232 11.874 6.852C11.874 6.84547 12 6.19252 12 5.676C12 5.1698 11.874 4.52711 11.874 4.5ZM4.182 10.476L2.904 9.762C2.96029 9.61744 3.072 9.27688 3.072 8.928C3.072 7.71648 2.14273 6.71613 0.942 6.624C0.912678 6.45313 0.846 6.01603 0.846 5.676C0.846 5.33644 0.912695 4.899 0.942 4.728C2.14278 4.63594 3.072 3.62959 3.072 2.418C3.072 2.07003 2.96018 1.73462 2.904 1.59L4.266 0.846C4.31499 0.896048 4.51134 1.09113 4.782 1.284C5.22425 1.59925 5.64168 1.758 6.03 1.758C6.41451 1.758 6.83255 1.59915 7.272 1.29C7.54095 1.10082 7.73913 0.913213 7.788 0.864L9.096 1.59C9.03976 1.7346 8.928 2.06956 8.928 2.418C8.928 3.62959 9.85722 4.63594 11.058 4.728C11.0873 4.89926 11.154 5.33747 11.154 5.676C11.154 6.0159 11.0873 6.45308 11.058 6.624C9.85725 6.71604 8.928 7.7164 8.928 8.928C8.928 9.27635 9.03978 9.61144 9.096 9.756L7.77 10.494C7.71276 10.4332 7.52132 10.2305 7.254 10.032C6.80321 9.69724 6.37025 9.528 5.97 9.528C5.57358 9.528 5.14621 9.69753 4.698 10.026C4.43454 10.2191 4.23936 10.4162 4.182 10.476ZM8.1 5.664C8.1 4.49212 7.14787 3.54 5.976 3.54C4.80415 3.54 3.846 4.49212 3.846 5.664C3.846 6.83587 4.80415 7.794 5.976 7.794C7.14789 7.794 8.1 6.83587 8.1 5.664ZM5.976 4.386C6.6829 4.386 7.254 4.95712 7.254 5.664C7.254 6.37092 6.6829 6.948 5.976 6.948C5.26913 6.948 4.692 6.37092 4.692 5.664C4.692 4.9571 5.26913 4.386 5.976 4.386Z" fill="#FFFFFF" ></path></svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
1
src/renderer/src/icons/svg/xaxis.svg
Normal file
1
src/renderer/src/icons/svg/xaxis.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="12" viewBox="0 0 12.00048828125 12" fill="none"><path d="M5.6792 4.65356L5.6792 4.65356L5.6792 4.65356L5.6792 4.65356Z" fill="#FFFFFF" ></path><path d="M2.79079 11.0492L2.79079 12L1.86063 12L1.86063 11.0492L2.79079 11.0492ZM8.3713 7.60639L12.0005 9.65246L8.3713 11.6396L8.3713 10.0984L0.000488281 10.0984L0.000488281 9.14759L8.3713 9.14759L8.3713 7.60639ZM2.79079 7.24602L2.79079 8.1968L1.86063 8.1968L1.86063 7.24602L2.79079 7.24602ZM2.79079 5.34446L2.79079 6.29524L1.86063 6.29524L1.86063 5.34446L2.79079 5.34446ZM6.51107 0.590483L7.90622 2.72975L9.30138 0.590483L10.2314 0.590483L8.3713 3.44282L10.2314 6.29524L9.30138 6.29524L7.90622 4.15597L6.51107 6.29524L5.58099 6.29524L7.44123 3.44282L5.58099 0.590483L6.51107 0.590483ZM2.32571 0L4.2984 3.44282L2.79079 3.44282L2.79079 4.39361L1.86063 4.39361L1.86063 3.44282L0.353018 3.44282L2.32571 0Z" fill="#FFFFFF" ></path></svg>
|
||||
|
After Width: | Height: | Size: 994 B |
1
src/renderer/src/icons/svg/yaxis.svg
Normal file
1
src/renderer/src/icons/svg/yaxis.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="12" viewBox="0 0 12.00048828125 12" fill="none"><path d="M5.68799 4.65503L5.68799 4.65503L5.68799 4.65503L5.68799 4.65503Z" fill="#FFFFFF" ></path><path d="M2.3257 0L4.2984 3.44281L2.79079 3.44281L2.79079 12L1.86063 12L1.86063 3.44282L0.353004 3.44282L2.3257 0ZM8.3713 7.60641L12.0005 9.65248L8.3713 11.6396L8.3713 10.0985L7.44123 10.0985L7.44123 9.14761L8.3713 9.14761L8.3713 7.60641ZM0.930558 9.1476L0.930558 10.0984L0.000488281 10.0984L0.000488281 9.1476L0.930558 9.1476ZM4.65093 9.1476L4.65093 10.0984L3.72086 10.0984L3.72086 9.1476L4.65093 9.1476ZM6.51107 9.1476L6.51107 10.0984L5.581 10.0984L5.581 9.1476L6.51107 9.1476ZM6.51107 0.590488L7.90623 2.73071L9.30137 0.590488L10.2314 0.590488L6.51107 6.29525L5.581 6.29525L7.44123 3.44282L5.581 0.590488L6.51107 0.590488Z" fill="#FFFFFF" ></path></svg>
|
||||
|
After Width: | Height: | Size: 921 B |
@ -7,7 +7,7 @@
|
||||
@click="importModelDB"
|
||||
>
|
||||
<template #icon>
|
||||
<svg-icon name="leading_in" />
|
||||
<svg-icon name="select" />
|
||||
</template>
|
||||
<span>选择军标库</span>
|
||||
</el-button>
|
||||
@ -18,7 +18,7 @@
|
||||
@click="createModelDB"
|
||||
>
|
||||
<template #icon>
|
||||
<svg-icon name="leading_in" />
|
||||
<svg-icon name="addDevice" />
|
||||
</template>
|
||||
<span>创建军标库</span>
|
||||
</el-button>
|
||||
@ -27,6 +27,7 @@
|
||||
<!-- 左侧分类树 -->
|
||||
<el-col :span="6" class="tree">
|
||||
<el-card shadow="hover">
|
||||
<div class="typeList">类型列表</div>
|
||||
<div class="tree-container" @click="handleClick" @contextmenu="divContextMenu">
|
||||
<el-tree
|
||||
style="max-width: 600px"
|
||||
@ -349,7 +350,7 @@ const handleDragEnd = (
|
||||
dropType: NodeDropType,
|
||||
ev: DragEvents
|
||||
) => {
|
||||
console.log('tree drag end:', dropNode && dropNode.label, dropType)
|
||||
console.log('tree drag end:', dropNode, dropType, ev, draggingNode)
|
||||
}
|
||||
const handleDrop = (draggingNode: Node, dropNode: Node, dropType: NodeDropType, ev: DragEvents) => {
|
||||
console.log('tree drop:', dropNode.label, dropType)
|
||||
@ -667,7 +668,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.tree-container {
|
||||
height: 400px;
|
||||
height: 380px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.el-row {
|
||||
@ -816,4 +817,13 @@ onMounted(() => {
|
||||
text-shadow: 0px 0px 9px var(--color-sdk-text-shadow) !important;
|
||||
color: rgba(255, 255, 255, 1) !important;
|
||||
}
|
||||
::v-deep .typeList {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 12px;
|
||||
color: rgba(230, 247, 255, 1) !important;
|
||||
border-bottom: 1px solid rgba(var(--color-sdk-base-rgb), 0.5);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
@click="importModelDB"
|
||||
>
|
||||
<template #icon>
|
||||
<svg-icon name="leading_in" />
|
||||
<svg-icon name="select" />
|
||||
</template>
|
||||
<span>选择模型库</span>
|
||||
</el-button>
|
||||
@ -18,7 +18,7 @@
|
||||
@click="createModelDB"
|
||||
>
|
||||
<template #icon>
|
||||
<svg-icon name="leading_in" />
|
||||
<svg-icon name="addDevice" />
|
||||
</template>
|
||||
<span>创建模型库</span>
|
||||
</el-button>
|
||||
@ -27,6 +27,7 @@
|
||||
<!-- 左侧分类树 -->
|
||||
<el-col :span="6" class="tree">
|
||||
<el-card shadow="hover">
|
||||
<div class="typeList">类型列表</div>
|
||||
<div class="tree-container" @click="handleClick" @contextmenu="divContextMenu">
|
||||
<el-tree
|
||||
style="max-width: 600px"
|
||||
@ -358,7 +359,7 @@ const handleDragEnd = (
|
||||
dropType: NodeDropType,
|
||||
ev: DragEvents
|
||||
) => {
|
||||
console.log('tree drag end:', dropNode && dropNode.label, dropType)
|
||||
console.log('tree drag end:', dropNode, dropType, ev, draggingNode)
|
||||
}
|
||||
const handleDrop = (draggingNode: Node, dropNode: Node, dropType: NodeDropType, ev: DragEvents) => {
|
||||
console.log('tree drop:', dropNode.label, dropType)
|
||||
@ -676,7 +677,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.tree-container {
|
||||
height: 400px;
|
||||
height: 380px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.el-row {
|
||||
@ -825,4 +826,13 @@ onMounted(() => {
|
||||
text-shadow: 0px 0px 9px var(--color-sdk-text-shadow) !important;
|
||||
color: rgba(255, 255, 255, 1) !important;
|
||||
}
|
||||
::v-deep .typeList {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 12px;
|
||||
color: rgba(230, 247, 255, 1) !important;
|
||||
border-bottom: 1px solid rgba(var(--color-sdk-base-rgb), 0.5);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,994 @@
|
||||
<template>
|
||||
<div class="model-management-container">
|
||||
<div class="equipment_title" style="margin-bottom: 10px">
|
||||
<div>
|
||||
<el-button
|
||||
color="#004b4b"
|
||||
style="border: 1px solid rgba(0, 255, 255, 0.5)"
|
||||
@click="importModelDB"
|
||||
>
|
||||
<template #icon>
|
||||
<svg-icon name="select" />
|
||||
</template>
|
||||
<span>选择图标库</span>
|
||||
</el-button>
|
||||
|
||||
<el-button
|
||||
color="#004b4b"
|
||||
style="border: 1px solid rgba(0, 255, 255, 0.5)"
|
||||
@click="createModelDB"
|
||||
>
|
||||
<template #icon>
|
||||
<svg-icon name="addDevice" />
|
||||
</template>
|
||||
<span>创建图标库</span>
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div class="typeBut">
|
||||
<span
|
||||
v-for="(item, index) in butList"
|
||||
:key="index"
|
||||
:class="{ clickButClass: activeIndex == index }"
|
||||
@click="typeClick(index)"
|
||||
>{{ item }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<el-row :gutter="20">
|
||||
<!-- 左侧分类树 -->
|
||||
<el-col :span="6" class="tree">
|
||||
<el-card shadow="hover">
|
||||
<div class="typeList">类型列表</div>
|
||||
<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"
|
||||
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="iconName" label="名称" />
|
||||
<el-table-column prop="thumbnail" label="缩略图" width="100">
|
||||
<template #default="{ row }" v-if="activeIndex === 2">
|
||||
<el-image
|
||||
ref="imageRef"
|
||||
fit="contain"
|
||||
:preview-teleported="true"
|
||||
:preview-src-list="['http://127.0.0.1:8848' + row.data]"
|
||||
style="width: 80px; height: 60px"
|
||||
:src="'http://127.0.0.1:8848' + row.data"
|
||||
/>
|
||||
</template>
|
||||
<template #default="{ row }" v-else>
|
||||
<el-image
|
||||
ref="imageRef"
|
||||
fit="contain"
|
||||
:preview-teleported="true"
|
||||
:preview-src-list="['http://localhost:55110/' + row.data]"
|
||||
style="width: 80px; height: 60px"
|
||||
:src="'http://localhost:55110/' + row.data"
|
||||
/>
|
||||
</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>
|
||||
</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"
|
||||
/>
|
||||
|
||||
<!-- 添加类型弹窗 -->
|
||||
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="30%" :before-close="handleClose">
|
||||
<el-input v-model="modelType" placeholder="请输入名称" />
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="closeDialog">取消</el-button>
|
||||
<el-button type="primary" @click="addType"> 确定 </el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<input ref="fileInput" type="file" hidden @change="handleFileChange" accept=".jpg,.jpeg,.png" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, onMounted, nextTick } 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'
|
||||
import { PhotoApi } from '@/api/photo/index'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import {
|
||||
$sendElectronChanel,
|
||||
$recvElectronChanel,
|
||||
$changeComponentShow
|
||||
} from '@/utils/communication'
|
||||
const fs = require('fs')
|
||||
const eventBus: any = inject('bus')
|
||||
const imageRef: any = ref('')
|
||||
var clickTreeNode: any = reactive({})
|
||||
|
||||
interface TypeNode {
|
||||
id: string
|
||||
label: string
|
||||
parentId: string | null
|
||||
children?: TypeNode[]
|
||||
createdAt?: string | null
|
||||
updatedAt?: string | null
|
||||
}
|
||||
|
||||
interface ModelItem {
|
||||
id: string
|
||||
typeId: string
|
||||
name: string
|
||||
thumbnail: string
|
||||
militaryId: string
|
||||
}
|
||||
|
||||
const typeTreeData = ref<TypeNode[]>([])
|
||||
|
||||
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 }[]
|
||||
})
|
||||
|
||||
//按钮
|
||||
var activeIndex = ref(0)
|
||||
var butList = reactive(['立体图标', '普通图标', '自定义图标'])
|
||||
const typeClick = (index) => {
|
||||
activeIndex.value = index
|
||||
modelList.value = []
|
||||
getModelList()
|
||||
}
|
||||
|
||||
const treeRef = ref()
|
||||
|
||||
const reviewPhoto = () => {
|
||||
imageRef.value!.showPreview()
|
||||
}
|
||||
// @ts-ignore
|
||||
var sortableInstance: any = reactive(null)
|
||||
|
||||
//--------------添加模型类型----------------
|
||||
var dialogVisible: any = ref(false)
|
||||
var dialogTitle: any = ref('添加图标类型')
|
||||
var modelType: any = ref('')
|
||||
|
||||
const handleClose = () => {
|
||||
dialogVisible.value = false
|
||||
}
|
||||
const closeDialog = () => {
|
||||
modelType.value = ''
|
||||
dialogVisible.value = false
|
||||
}
|
||||
const addType = () => {
|
||||
if (!modelType.value) {
|
||||
return ElMessage.warning('请输入图标类型名称')
|
||||
}
|
||||
if (dialogTitle.value == '添加图标类型') {
|
||||
let params = {
|
||||
name: modelType.value,
|
||||
parentId: clickTreeNode && clickTreeNode.id ? clickTreeNode.id : undefined
|
||||
}
|
||||
PhotoApi.addModelType(params).then((res) => {
|
||||
if (res.code == 0 || res.code == 200) {
|
||||
ElMessage.success('添加成功')
|
||||
getModelList()
|
||||
}
|
||||
})
|
||||
} else if (dialogTitle.value == '图标重命名') {
|
||||
let params = {
|
||||
iconName: modelType.value,
|
||||
iconId: clickPhotoRow.id
|
||||
}
|
||||
let formData = new FormData()
|
||||
formData.append('iconName', modelType.value)
|
||||
formData.append('iconId', clickPhotoRow.id)
|
||||
PhotoApi.updatePoster(formData).then((res) => {
|
||||
if (res.code == 0 || res.code == 200) {
|
||||
ElMessage.success('修改成功')
|
||||
// getModelList()
|
||||
getModelListByType(clickTreeNode.id)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
let params = {
|
||||
name: modelType.value,
|
||||
id: clickTreeNode.id
|
||||
}
|
||||
PhotoApi.updateMilitaryTypeName(params).then((res) => {
|
||||
if (res.code == 0 || res.code == 200) {
|
||||
ElMessage.success('修改成功')
|
||||
getModelList()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
modelType.value = ''
|
||||
dialogVisible.value = false
|
||||
}
|
||||
|
||||
//获取模型列表
|
||||
eventBus.on('settingPop', (data) => {
|
||||
if (data) {
|
||||
//关闭弹框时更新模型列表
|
||||
// getModelList()
|
||||
getModelListByType(showImageRow.iconTypeId)
|
||||
showImageRow = null
|
||||
}
|
||||
})
|
||||
|
||||
const getModelList = async () => {
|
||||
if (activeIndex.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
|
||||
console.log(typeTreeData.value, 'klklk')
|
||||
}
|
||||
}
|
||||
}
|
||||
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
|
||||
}
|
||||
|
||||
//------------导入模型--------------
|
||||
const fileInput = ref<HTMLInputElement>()
|
||||
|
||||
const triggerUpload = () => {
|
||||
fileInput.value?.click()
|
||||
}
|
||||
const handleFileChange = (e: Event) => {
|
||||
const files = (e.target as HTMLInputElement).files
|
||||
if (files) {
|
||||
const formData = new FormData()
|
||||
formData.append('files', files[0])
|
||||
formData.append('iconTypeId', clickTreeNode.id)
|
||||
PhotoApi.addGraph(formData).then((res) => {
|
||||
if (res.code == 0 || res.code == 200) {
|
||||
ElMessage.success('导入成功')
|
||||
getModelListByType(clickTreeNode.id)
|
||||
}
|
||||
})
|
||||
// 此处可添加文件验证或预处理逻辑
|
||||
}
|
||||
}
|
||||
//创建模型库
|
||||
const createModelDB = async () => {
|
||||
let option = {
|
||||
title: '创建图标库',
|
||||
filename: 'YJEarth.tubiao',
|
||||
filters: [{ name: '保存库文件', extensions: ['tubiao'] }]
|
||||
}
|
||||
$sendElectronChanel('saveFile', option)
|
||||
$recvElectronChanel('selectedFileItem', (e, path) => {
|
||||
if (path) {
|
||||
let index = path.lastIndexOf('/')
|
||||
let model_lib_path = path.slice(0, index)
|
||||
let model_lib_name = path.slice(index + 1)
|
||||
PhotoApi.createModelDB({ name: model_lib_name, path: model_lib_path }).then((res) => {
|
||||
if (res.code == 0 || res.code == 200) {
|
||||
ElMessage.success('创建成功')
|
||||
getModelList()
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//导入模型库
|
||||
const importModelDB = () => {
|
||||
let option = {
|
||||
properties: ['openFile'],
|
||||
filters: [
|
||||
{
|
||||
name: '图标库', //、底图
|
||||
extensions: ['tubiao']
|
||||
}
|
||||
]
|
||||
}
|
||||
$sendElectronChanel('open-directory-dialog', option)
|
||||
$recvElectronChanel('selectedItem', (e, path) => {
|
||||
if (path.length) addModelDB(path[0])
|
||||
})
|
||||
}
|
||||
|
||||
const addModelDB = (path) => {
|
||||
let formData = new FormData()
|
||||
formData.append('iconPath', path)
|
||||
PhotoApi.importModelDB(formData).then((res) => {
|
||||
if (res.code == 0 || res.code == 200) {
|
||||
ElMessage.success('导入成功')
|
||||
getModelList()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//拖拽
|
||||
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, dropType, ev, draggingNode)
|
||||
}
|
||||
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')
|
||||
}
|
||||
|
||||
//拖拽结束
|
||||
|
||||
//---------------------查看缩略图--------------------
|
||||
var showImageRow = null
|
||||
const showImage = (row: any) => {
|
||||
showImageRow = row
|
||||
eventBus.emit('imagePopDialog', row)
|
||||
eventBus.emit('settingPop', false)
|
||||
}
|
||||
|
||||
const handleContextMenu = (event: MouseEvent, row: TypeNode) => {
|
||||
event.stopPropagation()
|
||||
event.preventDefault()
|
||||
if (activeIndex.value !== 2) {
|
||||
return
|
||||
}
|
||||
|
||||
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' }
|
||||
]
|
||||
}
|
||||
clickTreeNode = row
|
||||
|
||||
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()
|
||||
// getModelListByType(row.data.id)
|
||||
}
|
||||
} else {
|
||||
// getModelListByType(row.data.id)
|
||||
}
|
||||
getModelListByType(row.data.id)
|
||||
currentTypeId.value = row.id
|
||||
clickTreeNode = row.data
|
||||
// loadModelsByType(row.id)
|
||||
contextMenu.visible && (contextMenu.visible = false)
|
||||
}
|
||||
const getModelListByType = async (id) => {
|
||||
if (activeIndex.value === 0) {
|
||||
await nextTick()
|
||||
modelList.value = threePhoto
|
||||
} else if (activeIndex.value === 1) {
|
||||
modelList.value = ordinaryPhoto
|
||||
} else {
|
||||
let formData = new FormData()
|
||||
formData.append('iconTypeId', id)
|
||||
PhotoApi.showModelByType(formData).then((res) => {
|
||||
modelList.value = res.data
|
||||
})
|
||||
}
|
||||
}
|
||||
const divContextMenu = (event: MouseEvent) => {
|
||||
if (activeIndex.value !== 2) {
|
||||
return
|
||||
}
|
||||
event.preventDefault()
|
||||
contextMenu.x = event.clientX
|
||||
contextMenu.y = event.clientY
|
||||
clickTreeNode = null
|
||||
contextMenu.items = [{ command: 'addType', label: '添加类型', icon: 'add' }]
|
||||
|
||||
contextMenu.visible = true
|
||||
}
|
||||
|
||||
const handleMenuCommand = (command: string) => {
|
||||
const row = contextMenu.currentRow
|
||||
if (!row) {
|
||||
//添加类型
|
||||
handleAddType()
|
||||
} else {
|
||||
switch (command) {
|
||||
case 'addType':
|
||||
handleAddType()
|
||||
break
|
||||
case 'add-child':
|
||||
handleAddChildType(row)
|
||||
break
|
||||
case 'import':
|
||||
handleImportModel(row)
|
||||
break
|
||||
case 'rename':
|
||||
handleRenameType(row)
|
||||
break
|
||||
case 'delete':
|
||||
handleDeleteType(row)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var clickTreeNode = null
|
||||
const handleTypeClick = (row: TypeNode) => {
|
||||
getModelListByType(row.id)
|
||||
currentTypeId.value = row.$treeNodeId
|
||||
clickTreeNode = row
|
||||
// // 模拟根据类型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 handleAddType = () => {
|
||||
dialogTitle.value = '添加图标类型'
|
||||
modelType.value = ''
|
||||
dialogVisible.value = true
|
||||
}
|
||||
const handleAddChildType = (row: TypeNode) => {
|
||||
dialogTitle.value = '添加图标类型'
|
||||
modelType.value = ''
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const handleImportModel = (row: TypeNode) => {
|
||||
triggerUpload()
|
||||
}
|
||||
|
||||
const handleRenameType = (row: TypeNode) => {
|
||||
dialogTitle.value = '图标类型重命名'
|
||||
modelType.value = row.label
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
var clickPhotoRow = null
|
||||
const editPhotoName = (row) => {
|
||||
dialogTitle.value = '图标重命名'
|
||||
modelType.value = row.iconName
|
||||
clickPhotoRow = row
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const handleDeleteType = (row: TypeNode) => {
|
||||
ElMessageBox.confirm('是否删除数据?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
let formData = new FormData()
|
||||
formData.append('iconTypeId', row.id)
|
||||
PhotoApi.delModelType(formData).then((res) => {
|
||||
if (res.code == 0 || res.code == 200) {
|
||||
ElMessage.success('删除成功')
|
||||
getModelList()
|
||||
}
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
const handleEdit = (row: ModelItem) => {
|
||||
updatePoster(row)
|
||||
}
|
||||
const updatePoster1 = (row, flag = false, path = '') => {
|
||||
let cb = (c) => {
|
||||
const formData = new FormData()
|
||||
formData.append('militaryId', row.id)
|
||||
formData.append('file', c)
|
||||
PhotoApi.updatePoster(formData).then((res) => {
|
||||
if (res.code == 0 || res.code == 200) {
|
||||
getModelListByType(row.iconTypeId)
|
||||
ElMessage.success('添加成功')
|
||||
}
|
||||
})
|
||||
}
|
||||
if (!flag) {
|
||||
let option = {
|
||||
properties: ['openFile'],
|
||||
filters: [
|
||||
{
|
||||
name: '图标',
|
||||
extensions: ['svg']
|
||||
}
|
||||
]
|
||||
}
|
||||
$sendElectronChanel('open-directory-dialog', option)
|
||||
$recvElectronChanel('selectedItem', (e, paths) => {
|
||||
if (paths.length) {
|
||||
cb(paths[0])
|
||||
}
|
||||
})
|
||||
} else {
|
||||
cb(path)
|
||||
}
|
||||
}
|
||||
|
||||
const updatePoster = (row, flag = false, path = '') => {
|
||||
let that = this
|
||||
let cb = (c) => {
|
||||
const formData = new FormData()
|
||||
formData.append('militaryId', row.id)
|
||||
formData.append('file', c)
|
||||
PhotoApi.updatePoster(formData).then((res) => {
|
||||
if (res.code == 0 || res.code == 200) {
|
||||
getModelListByType(row.iconTypeId)
|
||||
ElMessage.success('添加成功')
|
||||
}
|
||||
})
|
||||
}
|
||||
if (!flag) {
|
||||
let option = {
|
||||
properties: ['openFile'],
|
||||
filters: [
|
||||
{
|
||||
name: '图标',
|
||||
extensions: ['svg']
|
||||
}
|
||||
]
|
||||
}
|
||||
$sendElectronChanel('open-directory-dialog', option)
|
||||
$recvElectronChanel('selectedItem', (e, paths) => {
|
||||
if (paths.length) {
|
||||
// 取出路径中的文件名
|
||||
let name = getNamefromPath(paths[0])
|
||||
// 读取文件
|
||||
fs.readFile(paths[0], (err, data) => {
|
||||
const blob = new Blob([data], {
|
||||
type: 'image/png, image/jpeg, image/jpg'
|
||||
})
|
||||
var file = new File([blob], `${name}` + '.png')
|
||||
cb(file)
|
||||
})
|
||||
// cb(paths[0]);
|
||||
}
|
||||
})
|
||||
} else {
|
||||
cb(path)
|
||||
}
|
||||
}
|
||||
|
||||
const getNamefromPath = (path) => {
|
||||
let index = 1
|
||||
if (path.endsWith('.json')) {
|
||||
index = 2
|
||||
}
|
||||
let arr = path.split('/')
|
||||
let str = arr[arr.length - index]
|
||||
|
||||
let name = str
|
||||
if (!path.endsWith('.json')) {
|
||||
let arr1 = str.split('.')
|
||||
arr1.pop()
|
||||
name = arr1.join('.')
|
||||
}
|
||||
|
||||
return name
|
||||
}
|
||||
|
||||
const handleDelete = (row: ModelItem) => {
|
||||
ElMessageBox.confirm('是否删除数据?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
let formData = new FormData()
|
||||
formData.append('iconId', row.id)
|
||||
PhotoApi.delModel(formData).then((res) => {
|
||||
if (res.code == 0 || res.code == 200) {
|
||||
ElMessage.success('删除成功')
|
||||
getModelListByType(row.iconTypeId)
|
||||
}
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
//立体图标、普通图标
|
||||
let threePhoto = []
|
||||
let ordinaryPhoto = []
|
||||
|
||||
const setPhotoList = () => {
|
||||
$sendElectronChanel('requireGEMarkerName', {
|
||||
dirName: 'GEMarker',
|
||||
dirName1s: 'GEMarker1s'
|
||||
})
|
||||
$recvElectronChanel('dirFiles', (e, res) => {
|
||||
console.log(res, e, 'resxxxx')
|
||||
res.GEMarker1s.forEach((item) => {
|
||||
let name = item.split('.')[0]
|
||||
name = name.split('/')[1]
|
||||
threePhoto.push({
|
||||
iconName: name,
|
||||
data: item
|
||||
})
|
||||
console.log(threePhoto, 'threePhoto')
|
||||
})
|
||||
res.GEMarker.forEach((item) => {
|
||||
let name = item.split('.')[0]
|
||||
name = name.split('/')[1]
|
||||
ordinaryPhoto.push({
|
||||
iconName: name,
|
||||
data: item
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
getModelList()
|
||||
setPhotoList()
|
||||
})
|
||||
</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: 380px;
|
||||
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; */
|
||||
--el-tree-node-hover-bg-color: unset !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;
|
||||
}
|
||||
|
||||
::v-deep .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 !important;
|
||||
--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;
|
||||
}
|
||||
::v-deep .el-dialog__title {
|
||||
text-shadow: 0px 0px 9px var(--color-sdk-text-shadow) !important;
|
||||
color: rgba(255, 255, 255, 1) !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;
|
||||
}
|
||||
span:hover {
|
||||
color: rgba(var(--color-sdk-base-rgb), 1);
|
||||
border: 1px solid rgba(var(--color-sdk-base-rgb), 1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
.equipment_title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
::v-deep .typeList {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 12px;
|
||||
color: rgba(230, 247, 255, 1) !important;
|
||||
border-bottom: 1px solid rgba(var(--color-sdk-base-rgb), 0.5);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.clickButClass {
|
||||
color: rgba(var(--color-sdk-base-rgb), 1);
|
||||
border: 1px solid rgba(var(--color-sdk-base-rgb), 1) !important;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
@ -163,20 +163,30 @@
|
||||
<span class="fankuai"></span>
|
||||
<span class="setting_title">功能设置</span>
|
||||
</div>
|
||||
<div class="seting_content1">
|
||||
<div class="detailSkin1">
|
||||
<div class="seting_switch">
|
||||
<div class="detailSkin2">
|
||||
<span>默认视角：</span>
|
||||
<el-button color="#005c5c" @click="setView">{{
|
||||
t('systemSetting.defaultView')
|
||||
}}</el-button>
|
||||
<el-button color="#005c5c" @click="setView"
|
||||
><svg-icon name="sitting" :size="12" style="margin-right: 5px"></svg-icon>
|
||||
{{ t('systemSetting.defaultView') }}</el-button
|
||||
>
|
||||
</div>
|
||||
<div class="detailSkin1">
|
||||
<div class="detailSkin2">
|
||||
<span>在线数据：</span>
|
||||
<el-button color="#005c5c" @click="setData">{{
|
||||
t('systemSetting.defaultData')
|
||||
}}</el-button>
|
||||
<el-button color="#005c5c" @click="setData"
|
||||
><svg-icon name="add" :size="12" style="margin-right: 5px"></svg-icon
|
||||
>{{ t('systemSetting.defaultData') }}</el-button
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="detailSkin2">
|
||||
<span>后台管理：</span>
|
||||
<el-button color="#005c5c"
|
||||
><svg-icon name="out_login" :size="12" style="margin-right: 5px"></svg-icon
|
||||
>{{ t('systemSetting.intoBack') }}</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="seting_content1">
|
||||
<div class="detailSkin1">
|
||||
<span>{{ t('searchWay.title') }}：</span>
|
||||
<el-select
|
||||
|
||||
@ -1,6 +1,12 @@
|
||||
<template>
|
||||
<div class="set_pup">
|
||||
<el-dialog v-model="isShowPup" :modal="false" draggable :close-on-click-modal='false' :destroy-on-close='true'>
|
||||
<el-dialog
|
||||
v-model="isShowPup"
|
||||
:modal="false"
|
||||
draggable
|
||||
:close-on-click-modal="false"
|
||||
:destroy-on-close="true"
|
||||
>
|
||||
<template #header>
|
||||
<div class="set_pup_header">
|
||||
<div class="system_title">
|
||||
@ -28,6 +34,9 @@
|
||||
<el-tab-pane :label="t('system.graphLabelManage')" name="graphLabelManage">
|
||||
<graphLabelManage></graphLabelManage>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="t('system.photoManage')" name="photoManage">
|
||||
<photoManage></photoManage>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="t('system.version')" name="version">
|
||||
<version></version>
|
||||
</el-tab-pane>
|
||||
@ -45,6 +54,7 @@ import equipment from './components/equipment.vue'
|
||||
import version from './components/version.vue'
|
||||
import modelManage from './components/modelManage.vue'
|
||||
import graphLabelManage from './components/graphLabelManage.vue'
|
||||
import photoManage from './components/photoManage.vue'
|
||||
|
||||
import { useI18n } from 'vue-i18n'
|
||||
const { t } = useI18n()
|
||||
|
||||
@ -183,8 +183,8 @@
|
||||
<use xlink:href="#yj-icon-edit"></use></svg
|
||||
>编辑
|
||||
</button>
|
||||
<button @click="returnX">X轴翻转</button>
|
||||
<button @click="returnY">Y轴翻转</button>
|
||||
<button @click="returnX"><svg-icon name="xaxis" :size="12"></svg-icon> X轴翻转</button>
|
||||
<button @click="returnY"><svg-icon name="yaxis" :size="12"></svg-icon>Y轴翻转</button>
|
||||
<button @click="remove">删除</button>
|
||||
<button @click="confirm">确定</button>
|
||||
<button @click="close">关闭</button>
|
||||
@ -278,48 +278,6 @@ const open = async (id: any, type: any) => {
|
||||
entityOptions.value.textColor = 'rgba(255,255,255,1)'
|
||||
} //点击清空按钮事件回调
|
||||
})
|
||||
let ylinecolorPicker = new window.YJColorPicker({
|
||||
el: labelLineColorRef.value,
|
||||
size: 'mini', //颜色box类型
|
||||
alpha: true, //是否开启透明度
|
||||
defaultColor: entityOptions.value.labelLineColor,
|
||||
disabled: false, //是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity', //打开颜色选择器动画
|
||||
sure: (color) => {
|
||||
entityOptions.value.labelLineColor = color
|
||||
}, //点击确认按钮事件回调
|
||||
clear: () => {
|
||||
entityOptions.value.labelLineColor = 'rgba(255,255,255,1)'
|
||||
} //点击清空按钮事件回调
|
||||
})
|
||||
let bgcolorPicker1 = new window.YJColorPicker({
|
||||
el: labelBackgroundColorStartRef.value,
|
||||
size: 'mini', //颜色box类型
|
||||
alpha: true, //是否开启透明度
|
||||
defaultColor: entityOptions.value.labelBackgroundColorStart,
|
||||
disabled: false, //是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity', //打开颜色选择器动画
|
||||
sure: (color) => {
|
||||
entityOptions.value.labelBackgroundColorStart = color
|
||||
}, //点击确认按钮事件回调
|
||||
clear: () => {
|
||||
entityOptions.value.labelBackgroundColorStart = 'rgba(255,255,255,1)'
|
||||
} //点击清空按钮事件回调
|
||||
})
|
||||
let bgcolorPicker2 = new window.YJColorPicker({
|
||||
el: labelBackgroundColorEndRef.value,
|
||||
size: 'mini', //颜色box类型
|
||||
alpha: true, //是否开启透明度
|
||||
defaultColor: entityOptions.value.labelBackgroundColorEnd,
|
||||
disabled: false, //是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity', //打开颜色选择器动画
|
||||
sure: (color) => {
|
||||
entityOptions.value.labelBackgroundColorEnd = color
|
||||
}, //点击确认按钮事件回调
|
||||
clear: () => {
|
||||
entityOptions.value.labelBackgroundColorEnd = 'rgba(255,255,255,1)'
|
||||
} //点击清空按钮事件回调
|
||||
})
|
||||
}
|
||||
|
||||
const textPosPick = (val) => {
|
||||
|
||||
@ -176,7 +176,7 @@ const save = (e) => {
|
||||
imageData.value && formData.append('file', imageData.value)
|
||||
ModelApi.updatePoster(formData).then((res) => {
|
||||
if (res.code == 0 || res.code == 200) {
|
||||
ElMessage.success('添加成功')
|
||||
ElMessage.success('设置成功')
|
||||
}
|
||||
})
|
||||
baseDialog.value?.close()
|
||||
|
||||
Reference in New Issue
Block a user