|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div class="main-wrap flex flex-col gap-y-2 p-4">
|
|
|
+ <div class="main-wrap p-4 flex flex-col gap-y-2">
|
|
|
<NCard>
|
|
|
<div class="mb-2 flex gap-x-4">
|
|
|
<NForm ref="formRef" :model="form" inline label-placement="left">
|
|
|
@@ -17,7 +17,7 @@
|
|
|
</template>
|
|
|
创建任务
|
|
|
</NButton>
|
|
|
- <NButton type="info" @click="handleQueryClick" :loading="isRequestLoading" :disabled="isRequestLoading">
|
|
|
+ <NButton type="info" :loading="isRequestLoading" :disabled="isRequestLoading" @click="handleQueryClick">
|
|
|
<template #icon>
|
|
|
<span class="i-ph:magnifying-glass" />
|
|
|
</template>
|
|
|
@@ -32,17 +32,18 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <NDataTable ref="dataTableRef" v-model:checked-row-keys="checkedRowKeys" :remote="true" :min-height="166.6"
|
|
|
+ <NDataTable
|
|
|
+ref="dataTableRef" v-model:checked-row-keys="checkedRowKeys" :remote="true" :min-height="166.6"
|
|
|
:max-height="maxHeight" size="small" :columns="tableColumns" :data="tableData" :row-key="tableRowKey"
|
|
|
:loading="isRequestLoading" striped :single-line="false" :row-props="rowProps" />
|
|
|
<div class="mt-3 flex items-end justify-between">
|
|
|
- <div class="flex items-center gap-x-3">
|
|
|
+ <div class="flex gap-x-3 items-center">
|
|
|
<span>已选择 {{ checkedRowKeys.length }} 条</span>
|
|
|
<NButtonGroup size="small" :ghost="true">
|
|
|
- <NButton :disabled="isSelectMultiple" @click="handleDownloadClick" secondary type="info">
|
|
|
+ <NButton :disabled="isSelectMultiple" secondary type="info" @click="handleDownloadClick">
|
|
|
下载
|
|
|
</NButton>
|
|
|
- <NButton :disabled="isSelectMultiple" @click="handleDeleteClick" secondary type="info">
|
|
|
+ <NButton :disabled="isSelectMultiple" secondary type="info" @click="handleDeleteClick">
|
|
|
删除
|
|
|
</NButton>
|
|
|
</NButtonGroup>
|
|
|
@@ -219,22 +220,28 @@ function createColumns(): DataTableColumns<BatchDownloadInfo> {
|
|
|
key: 'sn',
|
|
|
width: 200,
|
|
|
fixed: 'left',
|
|
|
- render(rowData, rowIndex) {
|
|
|
- return h(NEllipsis, {
|
|
|
- lineClamp: 3,
|
|
|
- tooltip: {
|
|
|
- placement: "right-start", // ⬅️ Tooltip 显示在右侧
|
|
|
+ render(rowData) {
|
|
|
+ const text = rowData.sn.join('\n')
|
|
|
+ const summaryNode = h(
|
|
|
+ NEllipsis,
|
|
|
+ { lineClamp: 3, tooltip: false } as EllipsisProps,
|
|
|
+ { default: () => h('span', { style: { whiteSpace: 'pre-line' } }, text) },
|
|
|
+ )
|
|
|
+ return h(
|
|
|
+ NTooltip,
|
|
|
+ {
|
|
|
+ placement: 'right-start',
|
|
|
style: {
|
|
|
- maxHeight: "200px", // ⬅️ 多行时滚动
|
|
|
- overflowY: "auto",
|
|
|
- whiteSpace: "pre-line" // ⬅️ \n 正常换行
|
|
|
- }
|
|
|
- }
|
|
|
- } as EllipsisProps,
|
|
|
+ maxHeight: '200px',
|
|
|
+ overflowY: 'auto',
|
|
|
+ whiteSpace: 'pre-line',
|
|
|
+ },
|
|
|
+ },
|
|
|
{
|
|
|
- default: () =>
|
|
|
- h("span", { style: { whiteSpace: "pre-line" } }, rowData.sn.join("\n"))
|
|
|
- })
|
|
|
+ trigger: () => h('div', { style: { width: '100%' } }, [summaryNode]),
|
|
|
+ default: () => h('span', { style: { whiteSpace: 'pre-line' } }, text),
|
|
|
+ },
|
|
|
+ )
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
@@ -309,7 +316,7 @@ function createColumns(): DataTableColumns<BatchDownloadInfo> {
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
- trigger: () => summaryNode,
|
|
|
+ trigger: () => h('div', { style: { width: '100%' } }, [summaryNode]),
|
|
|
default: () => h('span', { style: { whiteSpace: 'pre-line' } }, detailLines),
|
|
|
},
|
|
|
)
|
|
|
@@ -402,7 +409,7 @@ const tablePagination = reactive<PaginationProps>({
|
|
|
|
|
|
const itemViewInfo = (info: BatchDownloadInfo) => {
|
|
|
const idStr = `ID: ${info.id}`
|
|
|
- const snStr = "SN:\n" + info.sn.map(sn => `\t${sn}`).join("\n")
|
|
|
+ const snStr = `SN:\n${ info.sn.map(sn => `\t${sn}`).join("\n")}`
|
|
|
const descStr = `Description: ${info.description}`
|
|
|
const periodStr = `Period: ${info.timePeriod[0]} - ${info.timePeriod[1]}`
|
|
|
|
|
|
@@ -415,12 +422,12 @@ const itemViewInfo = (info: BatchDownloadInfo) => {
|
|
|
const updateLogStr = `\tUpdate Log: ${info.options.updateLog ? '✔️' : '❌'}`
|
|
|
const settingsStr = `\tSettings: ${info.options.settings ? '✔️' : '❌'}`
|
|
|
|
|
|
- const optionStr = "Options:\n" + powerFlowStr + '\n' + mqttLogsStr + '\n' + eventAlarmStr + '\n' + alarmSnapshotStr + '\n' + emsLogsStr + '\n' + faultRecordStr + '\n' + updateLogStr + '\n' + settingsStr
|
|
|
+ const optionStr = `Options:\n${ powerFlowStr }\n${ mqttLogsStr }\n${ eventAlarmStr }\n${ alarmSnapshotStr }\n${ emsLogsStr }\n${ faultRecordStr }\n${ updateLogStr }\n${ settingsStr}`
|
|
|
const progressStr = `Progress: ${info.progress}`
|
|
|
- const failReasonsStr = "Fail Reasons:\n" + info.failReasons.map(fail => `\t${fail}`).join("\n")
|
|
|
- let contextStr = idStr + "\n" + snStr + "\n" + descStr + "\n" + periodStr + "\n" + optionStr + "\n" + progressStr + "\n" + failReasonsStr
|
|
|
+ const failReasonsStr = `Fail Reasons:\n${ info.failReasons.map(fail => `\t${fail}`).join("\n")}`
|
|
|
+ let contextStr = `${idStr }\n${ snStr }\n${ descStr }\n${ periodStr }\n${ optionStr }\n${ progressStr }\n${ failReasonsStr}`
|
|
|
if (info.owner !== undefined) {
|
|
|
- contextStr = contextStr + "\n" + `[${['admin', ...info.owner].join(', ')}]`
|
|
|
+ contextStr = `${contextStr }\n` + `[${['admin', ...info.owner].join(', ')}]`
|
|
|
}
|
|
|
|
|
|
drawerTitle.value = "任务详情"
|
|
|
@@ -451,7 +458,7 @@ const itemDelete = (id: string) => {
|
|
|
|
|
|
// 批量下载
|
|
|
const handleDownloadClick = () => {
|
|
|
- return
|
|
|
+
|
|
|
}
|
|
|
|
|
|
// 批量删除
|