This commit is contained in:
砂糖
2026-01-09 09:27:51 +08:00
3 changed files with 119 additions and 108 deletions

View File

@@ -56,7 +56,7 @@
<!-- 数据表格 -->
<el-table v-loading="tableLoading" :data="tableData" border style="width: 100%; margin-top: 20px;"
@row-click="handleRowClick" highlight-current-row>
<el-table-column prop="seqid" label="序号" width="80" align="center"></el-table-column>
<el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
<el-table-column prop="timestamp" label="发生时间" width="180" align="center"></el-table-column>
<el-table-column prop="module" label="报警模块" align="center">
<template slot-scope="scope">
@@ -120,7 +120,7 @@ export default {
logtext: '',
status: '',
pageNum: 1,
pageSize: 10
pageSize: 50
},
// 表格数据
tableData: [],

View File

@@ -46,45 +46,60 @@
</div>
</div>
<!-- 按模板渲染可编辑表单 -->
<el-form :model="form" label-position="top" size="mini">
<div class="group-list">
<div v-for="group in groupedItems" :key="group.groupKey" class="group-section">
<div class="group-header">
<span class="group-title">{{ group.groupTitle }}</span>
<span class="group-count">({{ group.items.length }} )</span>
</div>
<!-- 表格形式展示/编辑无下拉分组直接按组+序号排序展示 -->
<el-form :model="form" size="mini">
<el-table
:data="tableItems"
border
stripe
size="mini"
row-key="__rowKey"
height="calc(100vh - 260px)"
:cell-class-name="cellClassName"
class="param-table"
>
<el-table-column prop="groupTitle" label="分组" min-width="90" />
<el-table-column prop="itemNo" label="序号" width="70" />
<el-table-column prop="labelEn" label="参数" min-width="160" show-overflow-tooltip />
<el-table-column prop="paramCode" label="编码" min-width="140" show-overflow-tooltip />
<!-- 每行三个输入框 -->
<el-row :gutter="20">
<el-col :span="8" v-for="item in group.items" :key="item.templateItemId || item.paramCode">
<el-form-item :label="item.labelEn">
<el-input v-model="form[item.paramCode]" :placeholder="getPlaceholder(item)"
:class="{ 'is-changed': isChangedFromLast(item) }" />
<el-table-column label="当前值" min-width="180">
<template slot-scope="{ row }">
<el-input
v-model="form[row.paramCode]"
:placeholder="getPlaceholder(row)"
size="mini"
/>
</template>
</el-table-column>
<!-- 辅助信息上次/默认值常驻不会像 placeholder 一样消失 -->
<div class="field-hint">
<span v-if="getLastValue(item) !== undefined" class="hint-item">
上次成功<b>{{ getLastValue(item) }}</b>
</span>
<span v-if="getDefaultValue(item) !== undefined" class="hint-item">
默认值<b>{{ getDefaultValue(item) }}</b>
</span>
<span v-if="isChangedFromLast(item)" class="hint-item changed">
已修改
</span>
</div>
<el-table-column label="上次成功" min-width="120">
<template slot-scope="{ row }">
<span v-if="getLastValue(row) !== undefined">{{ getLastValue(row) }}</span>
<span v-else class="muted">-</span>
</template>
</el-table-column>
<!-- 编辑点位 -->
<div v-if="editTemplate" class="addr-inline">
<span class="addr-label">点位地址</span>
<el-input v-model="item.address" size="mini" placeholder="ns=2;s=..." />
</div>
</el-form-item>
</el-col>
</el-row>
</div>
</div>
<el-table-column label="默认值" min-width="120">
<template slot-scope="{ row }">
<span v-if="getDefaultValue(row) !== undefined">{{ getDefaultValue(row) }}</span>
<span v-else class="muted">-</span>
</template>
</el-table-column>
<el-table-column label="状态" width="80">
<template slot-scope="{ row }">
<el-tag v-if="isChangedFromLast(row)" type="warning" size="mini">已修改</el-tag>
<span v-else class="muted">-</span>
</template>
</el-table-column>
<el-table-column v-if="editTemplate" label="点位地址" min-width="220">
<template slot-scope="{ row }">
<el-input v-model="row.address" size="mini" placeholder="ns=2;s=..." />
</template>
</el-table-column>
</el-table>
</el-form>
<div v-if="!loading && templateItems.length === 0" class="empty-data">
@@ -139,29 +154,34 @@ export default {
if (String(en) === '0') return false
return true
})
.sort((a, b) => (a.itemNo || 0) - (b.itemNo || 0))
},
// 按 paramCode 前缀分组(如 NOF1 / NOF2 / RTF1 / SF ...
// 表格数据(扁平化所有分组,添加组标题
tableItems() {
return this.templateItems
.map(item => ({
...item,
groupKey: this.getGroupKey(item),
groupTitle: this.getGroupTitle(this.getGroupKey(item)),
__rowKey: `${item.paramCode}_${item.templateItemId || ''}`
}))
.sort((a, b) => {
// 先按组名排序
const groupCompare = String(a.groupKey).localeCompare(
String(b.groupKey),
undefined,
{ numeric: true }
)
if (groupCompare !== 0) return groupCompare
// 同组内按 itemNo 排序
return (a.itemNo || 0) - (b.itemNo || 0)
})
},
// 兼容旧代码,保留但不再使用
groupedItems() {
const groupsMap = new Map()
const items = this.templateItems
items.forEach(it => {
const key = this.getGroupKey(it)
if (!groupsMap.has(key)) groupsMap.set(key, [])
groupsMap.get(key).push(it)
})
// Map -> Array并按组名排序NOF1, NOF2... 这种会自然排序更好)
const groups = Array.from(groupsMap.entries()).map(([groupKey, groupItems]) => ({
groupKey,
groupTitle: this.getGroupTitle(groupKey),
items: groupItems
}))
groups.sort((a, b) => String(a.groupKey).localeCompare(String(b.groupKey), undefined, { numeric: true }))
return groups
return []
}
},
created() {
@@ -169,6 +189,13 @@ export default {
this.reload()
},
methods: {
cellClassName({ row, column }) {
// 高亮:当前值与上次成功不一致时,给“当前值”这一列加底色
if (column && column.label === '当前值' && this.isChangedFromLast(row)) {
return 'cell-changed'
}
return ''
},
pickItemFields(it) {
if (!it) return {}
// 仅挑后端支持保存的字段,避免把多余字段/响应结构带回去
@@ -513,58 +540,21 @@ export default {
font-size: 12px;
}
.group-list {
/* 表格辅助样式 */
.param-table {
margin-top: 8px;
}
.group-section {
padding: 10px 0 6px;
border-top: 1px solid #ebeef5;
.muted {
color: #c0c4cc;
}
.group-section:first-child {
border-top: none;
padding-top: 0;
}
.group-header {
display: flex;
align-items: baseline;
gap: 8px;
margin: 4px 0 10px;
}
.group-title {
font-weight: 600;
}
.group-count {
color: #909399;
font-size: 12px;
margin-left: 6px;
}
/* 字段提示信息 */
.field-hint {
font-size: 12px;
line-height: 1.4;
margin-top: 4px;
color: #909399;
}
.hint-item {
display: inline-block;
margin-right: 10px;
}
.hint-item.changed {
color: #e6a23c;
font-weight: 500;
}
/* 修改过的输入框高亮 */
:deep(.el-input.is-changed .el-input__inner) {
border-color: #e6a23c;
/* 修改过的单元格高亮(当前值列) */
:deep(.el-table .cell-changed) {
background-color: #fdf6ec;
}
:deep(.el-table .cell-changed .el-input__inner) {
border-color: #e6a23c;
}
</style>

View File

@@ -207,12 +207,23 @@ import { listStoppage, updateStoppage, deleteStoppage } from '@/api/l2/stop'; //
export default {
name: 'StoppageManagement',
data() {
// 计算默认时间范围近一个月从本月1号到今天
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1; // getMonth() 返回 0-11需要加1
const day = now.getDate();
// 开始时间本月1号
const startDate = `${year}-${String(month).padStart(2, '0')}-01`;
// 结束时间:今天
const endDate = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
return {
// 查询表单数据
queryForm: {
// 只保留年月日YYYY-mm-dd格式
startDate: '2023-08-13',
endDate: '2025-08-20'
startDate: startDate,
endDate: endDate
},
// 表格数据
tableData: [],
@@ -264,7 +275,17 @@ export default {
// 获取停机记录列表
getStoppageList() {
this.tableLoading = true;
listStoppage(this.queryForm)
// 构建查询参数结束时间设置为当天的23:59:59
const queryParams = {
...this.queryForm
};
if (queryParams.endDate) {
queryParams.endDate = queryParams.endDate + ' 23:59:59';
}
if (queryParams.startDate) {
queryParams.startDate = queryParams.startDate + ' 00:00:00';
}
listStoppage(queryParams)
.then(response => {
this.tableLoading = false;
this.btnLoading = false;