修改页面表格样式

This commit is contained in:
guanj
2026-06-17 13:30:31 +08:00
parent 2330b50147
commit 13f11596e4
17 changed files with 74 additions and 56 deletions

View File

@@ -129,11 +129,11 @@ const tableStore: any = new TableStore({
{ {
title: '监测点名称', title: '监测点名称',
field: 'lineName', field: 'lineName',
minWidth: 120 minWidth: 150
}, },
{ title: '设备名称', field: 'devName', minWidth: 130, align: 'center', }, { title: '设备名称', field: 'devName', minWidth: 150, align: 'center', },
{ title: '项目名称', field: 'projectName', minWidth: 130, align: 'center' }, { title: '项目名称', field: 'projectName', minWidth: 150, align: 'center' },
{ title: '工程名称', field: 'engineeringName', minWidth: 130, align: 'center' }, { title: '工程名称', field: 'engineeringName', minWidth: 150, align: 'center' },
{ {
title: '越限占比(%)', title: '越限占比(%)',
children: [ children: [

View File

@@ -83,7 +83,7 @@ const tableStore: any = new TableStore({
{ {
title: '监测点名称', title: '监测点名称',
field: 'lineName', field: 'lineName',
width: '120' width: '150'
}, },
{ {
title: '长时闪变越限(分钟)', title: '长时闪变越限(分钟)',

View File

@@ -83,13 +83,13 @@ const tableStore: any = new TableStore({
{ {
title: '监测点名称', title: '监测点名称',
field: 'lineName', field: 'lineName',
minWidth: 120, minWidth: 150,
}, },
{ title: '设备名称', field: 'devName', minWidth: 130, align: 'center' }, { title: '设备名称', field: 'devName', minWidth: 150, align: 'center' },
{ title: '项目名称', field: 'projectName', minWidth: 130, align: 'center' }, { title: '项目名称', field: 'projectName', minWidth: 150, align: 'center' },
{ title: '工程名称', field: 'engineeringName', minWidth: 130, align: 'center' }, { title: '工程名称', field: 'engineeringName', minWidth: 150, align: 'center' },
{ {
title: '监测对象类型', title: '监测对象类型',
field: 'objType', field: 'objType',

View File

@@ -107,15 +107,15 @@ const tableStore: any = new TableStore({
{ {
title: '监测点名称', title: '监测点名称',
field: 'lineName', field: 'lineName',
minWidth: 120, minWidth: 150,
render: 'customTemplate', render: 'customTemplate',
customTemplate: (row: any) => { customTemplate: (row: any) => {
return `<span style='cursor: pointer;text-decoration: underline;'>${row.lineName}</span>` return `<span style='cursor: pointer;text-decoration: underline;'>${row.lineName}</span>`
} }
}, },
{ title: '设备名称', field: 'devName', minWidth: 130, align: 'center' }, { title: '设备名称', field: 'devName', minWidth: 150, align: 'center' },
{ title: '项目名称', field: 'projectName', minWidth: 130, align: 'center' }, { title: '项目名称', field: 'projectName', minWidth: 150, align: 'center' },
{ title: '工程名称', field: 'engineeringName', minWidth: 130, align: 'center' }, { title: '工程名称', field: 'engineeringName', minWidth: 150, align: 'center' },
// { // {
// title: '监测类型', // title: '监测类型',
// field: 'position', // field: 'position',

View File

@@ -144,11 +144,11 @@ const tableStore: any = new TableStore({
{ {
title: '监测点名称', title: '监测点名称',
field: 'lineName', field: 'lineName',
minWidth: 120 minWidth: 150
}, },
{ title: '设备名称', field: 'devName', minWidth: 130, align: 'center' }, { title: '设备名称', field: 'devName', minWidth: 150, align: 'center' },
{ title: '项目名称', field: 'projectName', minWidth: 130, align: 'center' }, { title: '项目名称', field: 'projectName', minWidth: 150, align: 'center' },
{ title: '工程名称', field: 'engineeringName', minWidth: 130, align: 'center' }, { title: '工程名称', field: 'engineeringName', minWidth: 150, align: 'center' },
{ {
title: '越限占比(%)', title: '越限占比(%)',
children: [ children: [

View File

@@ -95,11 +95,11 @@ const tableStore: any = new TableStore({
align: 'center', align: 'center',
formatter: (row: any) => EventTypeList.find((item: any) => item.id == row.cellValue)?.name || '其他' formatter: (row: any) => EventTypeList.find((item: any) => item.id == row.cellValue)?.name || '其他'
}, },
{ title: '监测点名称', field: 'lineName', minWidth: 130, align: 'center' }, { title: '监测点名称', field: 'lineName', minWidth: 150, align: 'center' },
{ title: '电压等级(kV)', field: 'lineVoltage', minWidth: 120, align: 'center', sortable: true }, { title: '电压等级(kV)', field: 'lineVoltage', minWidth: 120, align: 'center', sortable: true },
{ title: '设备名称', field: 'equipmentName', minWidth: 130, align: 'center' }, { title: '设备名称', field: 'equipmentName', minWidth: 150, align: 'center' },
{ title: '项目名称', field: 'projectName', minWidth: 130, align: 'center' }, { title: '项目名称', field: 'projectName', minWidth: 150, align: 'center' },
{ title: '工程名称', field: 'engineeringName', minWidth: 130, align: 'center' }, { title: '工程名称', field: 'engineeringName', minWidth: 150, align: 'center' },
{ {
title: '发生位置', title: '发生位置',
field: 'sagSource', field: 'sagSource',

View File

@@ -166,20 +166,20 @@ const tableStore: any = new TableStore({
{ {
title: '监测点名称', title: '监测点名称',
field: 'name', field: 'name',
minWidth: 120 minWidth: 150
}, },
{ {
title: '设备名称', field: 'devName', minWidth: 130, align: 'center', formatter: (row: any) => { title: '设备名称', field: 'devName', minWidth: 150, align: 'center', formatter: (row: any) => {
return row.cellValue || '/' return row.cellValue || '/'
} }
}, },
{ {
title: '项目名称', field: 'projectName', minWidth: 130, align: 'center', formatter: (row: any) => { title: '项目名称', field: 'projectName', minWidth: 150, align: 'center', formatter: (row: any) => {
return row.cellValue || '/' return row.cellValue || '/'
} }
}, },
{ {
title: '工程名称', field: 'engineeringName', minWidth: 130, align: 'center', formatter: (row: any) => { title: '工程名称', field: 'engineeringName', minWidth: 150, align: 'center', formatter: (row: any) => {
return row.cellValue || '/' return row.cellValue || '/'
} }
}, },

View File

@@ -100,13 +100,13 @@ const tableStore = new TableStore({
}, },
{ title: '发生时刻', field: 'startTime', align: 'center', minWidth: 180, sortable: true }, { title: '发生时刻', field: 'startTime', align: 'center', minWidth: 180, sortable: true },
{ {
title: '监测点名称', field: 'lineName', minWidth: 130, align: 'center', formatter: (row: any) => { title: '监测点名称', field: 'lineName', minWidth: 150, align: 'center', formatter: (row: any) => {
return row.cellValue ? row.cellValue : '/' return row.cellValue ? row.cellValue : '/'
} }
}, },
{ title: '设备名称', field: 'equipmentName', align: 'center', minWidth: 130 }, { title: '设备名称', field: 'equipmentName', align: 'center', minWidth: 150 },
{ title: '项目名称', field: 'projectName', align: 'center', minWidth: 130 }, { title: '项目名称', field: 'projectName', align: 'center', minWidth: 150 },
{ title: '工程名称', field: 'engineeringName', align: 'center', minWidth: 130 }, { title: '工程名称', field: 'engineeringName', align: 'center', minWidth: 150 },
// { title: '监测点名称', field: 'lineName', align: 'center', minWidth: 120 }, // { title: '监测点名称', field: 'lineName', align: 'center', minWidth: 120 },

View File

@@ -80,12 +80,12 @@ const tableStore = new TableStore({
} }
}, },
{ title: '发生时刻', field: 'startTime', align: 'center', sortable: true, minWidth: 180, }, { title: '发生时刻', field: 'startTime', align: 'center', sortable: true, minWidth: 180, },
{ title: '监测点名称', field: 'lineName', align: 'center', minWidth: 120,formatter: (row: any) => { { title: '监测点名称', field: 'lineName', align: 'center', minWidth: 150,formatter: (row: any) => {
return row.cellValue ? row.cellValue : '/' return row.cellValue ? row.cellValue : '/'
} }, } },
{ title: '设备名称', field: 'equipmentName', align: 'center', minWidth: 120, }, { title: '设备名称', field: 'equipmentName', align: 'center', minWidth: 150, },
{ title: '项目名称', field: 'projectName', align: 'center', minWidth: 120, }, { title: '项目名称', field: 'projectName', align: 'center', minWidth: 150, },
{ title: '工程名称', field: 'engineeringName', align: 'center', minWidth: 120, }, { title: '工程名称', field: 'engineeringName', align: 'center', minWidth: 150, },
{ title: '事件描述', field: 'showName', align: 'center', minWidth: 250, } { title: '事件描述', field: 'showName', align: 'center', minWidth: 250, }

View File

@@ -102,11 +102,11 @@ const tableStore = new TableStore({
return EventTypeList.find((item: any) => item.id == row.cellValue)?.name || '其他' return EventTypeList.find((item: any) => item.id == row.cellValue)?.name || '其他'
} }
}, },
{ title: '监测点名称', field: 'lineName', minWidth: 130, align: 'center' }, { title: '监测点名称', field: 'lineName', minWidth: 150, align: 'center' },
{ title: '电压等级(kV)', field: 'lineVoltage', minWidth: 120, align: 'center', sortable: true, }, { title: '电压等级(kV)', field: 'lineVoltage', minWidth: 120, align: 'center', sortable: true, },
{ title: '设备名称', field: 'equipmentName', minWidth: 130, align: 'center' }, { title: '设备名称', field: 'equipmentName', minWidth: 150, align: 'center' },
{ title: '项目名称', field: 'projectName', minWidth: 130, align: 'center' }, { title: '项目名称', field: 'projectName', minWidth: 150, align: 'center' },
{ title: '工程名称', field: 'engineeringName', minWidth: 130, align: 'center' }, { title: '工程名称', field: 'engineeringName', minWidth: 150, align: 'center' },
{ {
title: '发生位置', field: 'sagSource', minWidth: 120, align: 'center', formatter: (row: any) => { title: '发生位置', field: 'sagSource', minWidth: 120, align: 'center', formatter: (row: any) => {
return row.cellValue == 1 ? '上游' : row.cellValue == 2 ? '下游' : '未知' return row.cellValue == 1 ? '上游' : row.cellValue == 2 ? '下游' : '未知'

View File

@@ -125,13 +125,13 @@
</div> </div>
<div style="width: 370px"> <div style="width: 370px">
<div class="custom-table-header"> <div class="custom-table-header">
<div class="title">监测点绑定</div> <div class="title">绑定测点</div>
<el-button :icon="Select" type="primary" @click="saveIndicator" class="ml10" :loading="loading"> <el-button :icon="Select" type="primary" @click="saveIndicator" class="ml10" :loading="loading">
保存 保存
</el-button> </el-button>
</div> </div>
<!-- <steadyStateTree /> --> <!-- <steadyStateTree /> -->
<Tree class="borderBox" ref="treeRef" show-checkbox :showBut="false" width="370px" :height="260" <Tree class="borderBox" ref="treeRef" show-checkbox :showBut="false" width="370px" :height="250"
:data="menuTree" :checkStrictly="checkStrictly"></Tree> :data="menuTree" :checkStrictly="checkStrictly"></Tree>
</div> </div>
<!-- 新增/编辑弹框 --> <!-- 新增/编辑弹框 -->

View File

@@ -116,11 +116,11 @@ const tableStore = new TableStore({
{ title: '监测点名称', field: 'lineName', minWidth: 130, align: 'center' }, { title: '监测点名称', field: 'lineName', minWidth: 150, align: 'center' },
{ title: '电压等级(kV)', field: 'lineVoltage', minWidth: 120, align: 'center', sortable: true, }, { title: '电压等级(kV)', field: 'lineVoltage', minWidth: 120, align: 'center', sortable: true, },
{ title: '设备名称', field: 'equipmentName', minWidth: 130, align: 'center' }, { title: '设备名称', field: 'equipmentName', minWidth: 150, align: 'center' },
{ title: '项目名称', field: 'projectName', minWidth: 130, align: 'center' }, { title: '项目名称', field: 'projectName', minWidth: 150, align: 'center' },
{ title: '工程名称', field: 'engineeringName', minWidth: 130, align: 'center' }, { title: '工程名称', field: 'engineeringName', minWidth: 150, align: 'center' },
{ {
title: '发生位置', field: 'sagSource', minWidth: 120, align: 'center', formatter: (row: any) => { title: '发生位置', field: 'sagSource', minWidth: 120, align: 'center', formatter: (row: any) => {
return row.cellValue == 1 ? '上游' : row.cellValue == 2 ? '下游' : '未知' return row.cellValue == 1 ? '上游' : row.cellValue == 2 ? '下游' : '未知'

View File

@@ -118,9 +118,9 @@ const tableStore = new TableStore({
return EventTypeList.find((item: any) => item.id == row.cellValue)?.name || '其他' return EventTypeList.find((item: any) => item.id == row.cellValue)?.name || '其他'
} }
}, },
{ title: '监测点名称', field: 'lineName', minWidth: 120, align: 'center' }, { title: '监测点名称', field: 'lineName', minWidth: 150, align: 'center' },
{ title: '电压等级(kV)', field: 'lineVoltage', minWidth: 120, align: 'center', sortable: true, }, { title: '电压等级(kV)', field: 'lineVoltage', minWidth: 120, align: 'center', sortable: true, },
{ title: '设备名称', field: 'devName', minWidth: 120, align: 'center' }, { title: '设备名称', field: 'devName', minWidth: 150, align: 'center' },
{ {
title: '发生位置', field: 'sagSource', minWidth: 120, align: 'center', formatter: (row: any) => { title: '发生位置', field: 'sagSource', minWidth: 120, align: 'center', formatter: (row: any) => {

View File

@@ -62,9 +62,9 @@ const tableStore = new TableStore({
} }
}, },
{ title: '工程名称', field: 'engineeringName', minWidth: 150 }, { title: '工程名称', field: 'engineeringName', minWidth: 150 },
{ title: '项目名称', field: 'projectName', minWidth: 130 }, { title: '项目名称', field: 'projectName', minWidth: 150 },
{ title: '设备名称', field: 'devName', minWidth: 130 }, { title: '设备名称', field: 'devName', minWidth: 150 },
{ title: '监测点名称', field: 'lineName', minWidth: 130 }, { title: '监测点名称', field: 'lineName', minWidth: 150 },
{ {
title: '投运时间', title: '投运时间',
field: 'operationalTime', field: 'operationalTime',

View File

@@ -66,7 +66,7 @@ const tableStore: any = new TableStore({
{ {
field: 'lineName', field: 'lineName',
title: '监测点名称', title: '监测点名称',
width: 100, width: 150,
formatter: row => { formatter: row => {
return row.cellValue ? row.cellValue : '/' return row.cellValue ? row.cellValue : '/'
} }

View File

@@ -8,7 +8,7 @@
<el-form-item label="治理类型" prop="governType"> <el-form-item label="治理类型" prop="governType">
<el-select v-model="form.governType" placeholder="请选择治理类型" style="width: 100%"> <el-select v-model="form.governType" placeholder="请选择治理类型" style="width: 100%">
<el-option label="稳态" value="harmonic" /> <el-option label="稳态" value="harmonic" />
<el-option label="暂态" value="transient" /> <el-option label="暂态" value="event" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="治理方法" prop="governMethod"> <el-form-item label="治理方法" prop="governMethod">
@@ -67,6 +67,9 @@ const dialogVisible = ref(false)
const title = ref('新增') const title = ref('新增')
const lineTreeData = ref<any[]>([]) const lineTreeData = ref<any[]>([])
const filterNode = createTreeFilterNode() const filterNode = createTreeFilterNode()
/** 打开弹窗时传入的治理前/后监测点 id未变更时不做绑定冲突校验 */
const originalGovernBefore = ref<any>(null)
const originalGovernAfter = ref<any>(null)
const treeProps = { const treeProps = {
value: 'id', value: 'id',
@@ -88,6 +91,11 @@ const form = reactive<any>({
const isEmptyPoint = (val: any) => val === '' || val === null || val === undefined const isEmptyPoint = (val: any) => val === '' || val === null || val === undefined
const isSamePointId = (current: any, original: any) => {
if (isEmptyPoint(current) && isEmptyPoint(original)) return true
return String(current) === String(original)
}
const getGovernPointError = (): string => { const getGovernPointError = (): string => {
const beforeEmpty = isEmptyPoint(form.governBefore) const beforeEmpty = isEmptyPoint(form.governBefore)
const afterEmpty = isEmptyPoint(form.governAfter) const afterEmpty = isEmptyPoint(form.governAfter)
@@ -136,13 +144,19 @@ const isPointBoundConflict = (node: any) => {
const getBoundPointError = (): string => { const getBoundPointError = (): string => {
const messages: string[] = [] const messages: string[] = []
if (!isEmptyPoint(form.governBefore)) { if (
!isEmptyPoint(form.governBefore) &&
!isSamePointId(form.governBefore, originalGovernBefore.value)
) {
const node = findTreeNodeById(lineTreeData.value, form.governBefore) const node = findTreeNodeById(lineTreeData.value, form.governBefore)
if (node && isPointBoundConflict(node)) { if (node && isPointBoundConflict(node)) {
messages.push(`治理前监测点「${node.name}${getBoundSuffix(node)}`) messages.push(`治理前监测点「${node.name}${getBoundSuffix(node)}`)
} }
} }
if (!isEmptyPoint(form.governAfter)) { if (
!isEmptyPoint(form.governAfter) &&
!isSamePointId(form.governAfter, originalGovernAfter.value)
) {
const node = findTreeNodeById(lineTreeData.value, form.governAfter) const node = findTreeNodeById(lineTreeData.value, form.governAfter)
if (node && isPointBoundConflict(node)) { if (node && isPointBoundConflict(node)) {
messages.push(`治理后监测点「${node.name}${getBoundSuffix(node)}`) messages.push(`治理后监测点「${node.name}${getBoundSuffix(node)}`)
@@ -178,6 +192,8 @@ const resetForm = () => {
form.governBefore = '' form.governBefore = ''
form.governAfter = '' form.governAfter = ''
form.sort = 100 form.sort = 100
originalGovernBefore.value = null
originalGovernAfter.value = null
} }
const open = (text: string, data?: anyObj) => { const open = (text: string, data?: anyObj) => {
@@ -194,6 +210,8 @@ const open = (text: string, data?: anyObj) => {
form.governBefore = data.governBeforeId ?? data.governBefore ?? '' form.governBefore = data.governBeforeId ?? data.governBefore ?? ''
form.governAfter = data.governAfterId ?? data.governAfter ?? '' form.governAfter = data.governAfterId ?? data.governAfter ?? ''
form.sort = data.sort ?? 100 form.sort = data.sort ?? 100
originalGovernBefore.value = form.governBefore
originalGovernAfter.value = form.governAfter
} }
} }

View File

@@ -52,11 +52,11 @@ const tableStore = new TableStore({
url: '/device-boot/runManage/getLineLedger', url: '/device-boot/runManage/getLineLedger',
method: 'POST', method: 'POST',
column: [ column: [
{ field: 'areaName', title: '省公司', width: 120 }, { field: 'areaName', title: '省公司', width: 150 },
{ field: 'gdName', title: '市公司', width: 120 }, { field: 'gdName', title: '市公司', width: 150 },
{ field: 'scale', title: '监测点电压等级', width: 150 }, { field: 'scale', title: '监测点电压等级', width: 150 },
{ field: 'lineName', title: '监测点名称', width: 120 }, { field: 'lineName', title: '监测点名称', width: 150 },
{ field: 'bdName', title: '所属变电站', width: 120 }, { field: 'bdName', title: '所属变电站', width: 150 },
{ field: 'loadType', title: '干扰源类型', width: 120 }, { field: 'loadType', title: '干扰源类型', width: 120 },
{ field: 'objName', title: '监测对象名称', width: 180 }, { field: 'objName', title: '监测对象名称', width: 180 },
{ field: 'shortCapacity', title: '最小短路容量(MVA)', width: 190 }, { field: 'shortCapacity', title: '最小短路容量(MVA)', width: 190 },