style:设备运行参数分析-添加设备标识/刷新按钮

main
黄伟杰 7 hours ago
parent 3b7496f19d
commit e348632b5d

@ -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">&#35774;&#22791;</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;

Loading…
Cancel
Save