优化页面

This commit is contained in:
guanj
2025-07-18 16:27:39 +08:00
parent aa323c0d9c
commit f1b157ac26
7 changed files with 2235 additions and 322 deletions

View File

@@ -80,6 +80,7 @@ import { mainHeight } from '@/utils/layout'
import { ElMessageBox, ElMessage } from 'element-plus'
import { auditEngineering, updateProject } from '@/api/cs-device-boot/edData'
import { activateUser, deluser, passwordConfirm } from '@/api/user-boot/user'
import tree from '@/assets/map/area.json'
defineOptions({
name: 'govern/manage/engineering'
})
@@ -105,10 +106,12 @@ const rules = ref({
area: [{ required: true, message: '请输入区域', trigger: 'blur' }],
description: [{ required: true, message: '请输入描述', trigger: 'blur' }]
})
const areaTree: any = filterFirstTwoLevels(dictData.state.areaTree)
console.log("🚀 ~ dictData.state.areaTree:", dictData.state)
const areaTree: any = tree
const props = {
label: 'name',
value: 'id',
label: 'text',
value: 'value',
children: 'children',
checkStrictly: true
}
@@ -199,34 +202,7 @@ const save = () => {
}
})
}
/**
* 过滤树结构只保留前2层级
*/
function filterFirstTwoLevels(tree) {
// 处理根节点为数组的情况(如多棵树)
if (Array.isArray(tree)) {
return tree.map(node => filterNode(node, 1)) // 根节点为第1层
} else {
// 处理单个根节点的情况
return filterNode(tree, 1)
}
function filterNode(node, level) {
// 复制当前节点的所有属性(避免修改原始对象)
const filteredNode = { ...node }
// 如果是第1层需要保留其children即第2层但需过滤第2层的children
if (level === 1 && node.children && Array.isArray(node.children)) {
filteredNode.children = node.children.map(child => filterNode(child, 2))
}
// 如果是第2层或更深直接删除children截断层级
else {
delete filteredNode.children
}
return filteredNode
}
}
</script>
<style lang="scss">
.customInput {

View File

@@ -102,7 +102,7 @@
class="ml10"
icon="el-icon-Download"
@click="downLoadQrCode"
v-if="showQrCode"
:disabled="!showQrCode"
>
批量下载二维码
</el-button>
@@ -435,12 +435,11 @@ const tableStore = new TableStore({
4: '正式投运'
},
minWidth: 80
},
{
title: '操作',
align: 'center',
width: '220',
width: 220,
render: 'buttons',
buttons: [
//直连装置注册

View File

@@ -1,15 +1,25 @@
<template>
<div class="default-main">
<TableHeader datePicker ref="refheader" showExport>
<TableHeader datePicker ref="refheader" >
<template v-slot:select>
<el-form-item label="关键字筛选">
<el-input
v-model.trim="tableStore.table.params.name"
placeholder="请输入关键字"
clearable
></el-input>
</el-form-item>
<el-form-item label="流程阶段">
<el-select v-model.trim="tableStore.table.params.process" clearable placeholder="请选择状态">
<el-select v-model.trim="tableStore.table.params.process" clearable placeholder="请选择">
<el-option label="功能调试" :value="2"></el-option>
<el-option label="出厂调试" :value="3"></el-option>
<el-option label="正式投运" :value="4"></el-option>
</el-select>
</el-form-item>
</template>
<template v-slot:operation>
<el-button type="primary" icon="el-icon-Download" @click="exportTab">导出</el-button>
</template>
</TableHeader>
<Table ref="tableRef" />
</div>
@@ -64,10 +74,10 @@ const tableStore = new TableStore({
title: '数据更新时间',
field: 'latestTime',
width: 180,
sortable: true,
formatter: (row: any) => {
return row.cellValue || '/'
}
sortable: true
// formatter: (row: any) => {
// return row.cellValue || '/'
// }
},
{
@@ -83,6 +93,7 @@ const tableStore = new TableStore({
title: '流程阶段',
field: 'process',
width: 100,
fixed: 'right',
render: 'tag',
custom: {
2: 'warning',
@@ -100,6 +111,7 @@ const tableStore = new TableStore({
title: '运行状态',
field: 'operationalStatus',
render: 'tag',
fixed: 'right',
width: 100,
custom: {
停运: 'danger',
@@ -114,6 +126,7 @@ const tableStore = new TableStore({
title: '通讯状态',
field: 'communicationStatus',
width: 100,
fixed: 'right',
render: 'tag',
custom: {
离线: 'danger',
@@ -125,17 +138,60 @@ const tableStore = new TableStore({
}
},
{ title: '在线率(%)', width: 100, field: 'onlineRate', sortable: true },
{ title: '完整性(%)', width: 100, field: 'integrity', sortable: true }
{ title: '在线率(%)', fixed: 'right',width: 100, field: 'onlineRate', sortable: true },
{ title: '完整性(%)', fixed: 'right',width: 100, field: 'integrity', sortable: true }
],
beforeSearchFun: () => {}
beforeSearchFun: () => {},
loadCallback: () => {
let name = tableStore.table.params.name
let data = tableStore.table.copyData.filter(item => {
// 处理latestTime默认值
item.latestTime = item.latestTime || '/'
// 需要检查的字段列表
const fieldsToCheck = ['projectName', 'engineeringName', 'mac', 'devName', 'lineName']
console.log(
'🚀 ~ fieldsToCheck.some(field => item[field]?.includes(name)):',
fieldsToCheck.some(field => item[field]?.includes(name))
)
// 检查任何一个字段包含搜索名称
return fieldsToCheck.some(field => item[field]?.includes(name))
})
tableStore.table.copyData = JSON.parse(JSON.stringify(data))
tableStore.table.total = tableStore.table.copyData.length
if (data.length == 0) {
tableStore.table.data = []
} else {
tableStore.table.data = JSON.parse(
JSON.stringify(
window.XEUtils.chunk(data, tableStore.table.params.pageSize)[tableStore.table.params.pageNum - 1]
)
)
}
}
})
provide('tableStore', tableStore)
tableStore.table.params.process = 4
// "target": [],
// "type": "",
// "userId": ""
tableStore.table.params.name = ''
const tableRef = ref()
const exportTab = () => {
tableRef.value.getRef()?.exportData({
filename: '半月报功能', // 文件名字
sheetName: 'Sheet1',
type: 'xlsx', //导出文件类型 xlsx 和 csv
useStyle: true,
data: tableStore.table.copyData, // 数据源 // 过滤那个字段导出
columnFilterMethod: function (column: any) {
return !(
column.column.title === undefined ||
column.column.title === '序号' ||
column.column.title === '操作'
)
}
})
}
onMounted(() => {})
setTimeout(() => {