|
|
|
|
@ -2,13 +2,19 @@
|
|
|
|
|
<el-row :gutter="20">
|
|
|
|
|
<el-col :span="6" :xs="24">
|
|
|
|
|
<ContentWrap class="h-1/1">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="keyword"
|
|
|
|
|
clearable
|
|
|
|
|
:placeholder="t('DataCollection.DeviceParamAnalysis.treeSearchPlaceholder')"
|
|
|
|
|
class="!w-1/1"
|
|
|
|
|
@input="handleKeywordChange"
|
|
|
|
|
/>
|
|
|
|
|
<div class="device-param-tree-toolbar">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="keyword"
|
|
|
|
|
clearable
|
|
|
|
|
:placeholder="t('DataCollection.DeviceParamAnalysis.treeSearchPlaceholder')"
|
|
|
|
|
class="device-param-tree-toolbar__input"
|
|
|
|
|
@input="handleKeywordChange"
|
|
|
|
|
/>
|
|
|
|
|
<el-button :loading="treeLoading" @click="handleTreeRefresh">
|
|
|
|
|
<Icon icon="ep:refresh" class="mr-5px" />
|
|
|
|
|
{{ t('DataCollection.DeviceParamAnalysis.refreshButtonText') }}
|
|
|
|
|
</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mt-12px">
|
|
|
|
|
<el-tree
|
|
|
|
|
ref="treeRef"
|
|
|
|
|
@ -20,7 +26,14 @@
|
|
|
|
|
show-checkbox
|
|
|
|
|
check-strictly
|
|
|
|
|
@check="handleTreeCheck"
|
|
|
|
|
/>
|
|
|
|
|
>
|
|
|
|
|
<template #default="{ data }">
|
|
|
|
|
<span class="device-param-tree-node">
|
|
|
|
|
<span class="device-param-tree-node__label">{{ data.label }}</span>
|
|
|
|
|
<el-tag v-if="data.tag === 'equipment'" type="success" size="small" effect="plain">设备</el-tag>
|
|
|
|
|
</span>
|
|
|
|
|
</template>
|
|
|
|
|
</el-tree>
|
|
|
|
|
</div>
|
|
|
|
|
</ContentWrap>
|
|
|
|
|
</el-col>
|
|
|
|
|
@ -93,11 +106,13 @@ defineOptions({ name: 'DeviceParamAnalysis' })
|
|
|
|
|
const { t } = useI18n()
|
|
|
|
|
|
|
|
|
|
type TreeNodeType = 'device' | 'param'
|
|
|
|
|
type TreeNodeTag = 'equipment'
|
|
|
|
|
|
|
|
|
|
type DeviceTreeNode = {
|
|
|
|
|
id: string
|
|
|
|
|
label: string
|
|
|
|
|
type: TreeNodeType
|
|
|
|
|
tag?: TreeNodeTag
|
|
|
|
|
children?: DeviceTreeNode[]
|
|
|
|
|
orgClass?: string
|
|
|
|
|
deviceId?: number
|
|
|
|
|
@ -203,6 +218,14 @@ const handleKeywordChange = () => {
|
|
|
|
|
}, 300)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const handleTreeRefresh = async () => {
|
|
|
|
|
if (keywordTimer) {
|
|
|
|
|
window.clearTimeout(keywordTimer)
|
|
|
|
|
keywordTimer = undefined
|
|
|
|
|
}
|
|
|
|
|
await loadTree()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const toFiniteId = (value: any): number | undefined => {
|
|
|
|
|
if (typeof value === 'number') return Number.isFinite(value) ? value : undefined
|
|
|
|
|
if (typeof value === 'string') {
|
|
|
|
|
@ -300,6 +323,7 @@ const buildTreeFromApi = (orgs: ApiTreeOrg[]): DeviceTreeNode[] => {
|
|
|
|
|
id: `equipment-${org.id}-${eq.id}`,
|
|
|
|
|
label: eq?.name ?? String(eq?.id ?? ''),
|
|
|
|
|
type: 'device',
|
|
|
|
|
tag: 'equipment',
|
|
|
|
|
deviceId: toFiniteId(eq.id),
|
|
|
|
|
paramCount: params.length,
|
|
|
|
|
children: paramNodes.length ? paramNodes : undefined,
|
|
|
|
|
@ -695,6 +719,29 @@ onMounted(async () => {
|
|
|
|
|
gap: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.device-param-tree-toolbar {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.device-param-tree-toolbar__input {
|
|
|
|
|
flex: 1;
|
|
|
|
|
min-width: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.device-param-tree-node {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 6px;
|
|
|
|
|
min-width: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.device-param-tree-node__label {
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-tree) {
|
|
|
|
|
max-height: calc(100vh - 280px);
|
|
|
|
|
overflow: auto;
|
|
|
|
|
|