更正前端内容
This commit is contained in:
@@ -56,7 +56,7 @@
|
|||||||
<!-- 数据表格 -->
|
<!-- 数据表格 -->
|
||||||
<el-table v-loading="tableLoading" :data="tableData" border style="width: 100%; margin-top: 20px;"
|
<el-table v-loading="tableLoading" :data="tableData" border style="width: 100%; margin-top: 20px;"
|
||||||
@row-click="handleRowClick" highlight-current-row>
|
@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="timestamp" label="发生时间" width="180" align="center"></el-table-column>
|
||||||
<el-table-column prop="module" label="报警模块" align="center">
|
<el-table-column prop="module" label="报警模块" align="center">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
@@ -120,7 +120,7 @@ export default {
|
|||||||
logtext: '',
|
logtext: '',
|
||||||
status: '',
|
status: '',
|
||||||
pageNum: 1,
|
pageNum: 1,
|
||||||
pageSize: 10
|
pageSize: 50
|
||||||
},
|
},
|
||||||
// 表格数据
|
// 表格数据
|
||||||
tableData: [],
|
tableData: [],
|
||||||
|
|||||||
@@ -46,45 +46,60 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 按模板渲染可编辑表单 -->
|
<!-- 表格形式展示/编辑(无下拉分组,直接按组+序号排序展示) -->
|
||||||
<el-form :model="form" label-position="top" size="mini">
|
<el-form :model="form" size="mini">
|
||||||
<div class="group-list">
|
<el-table
|
||||||
<div v-for="group in groupedItems" :key="group.groupKey" class="group-section">
|
:data="tableItems"
|
||||||
<div class="group-header">
|
border
|
||||||
<span class="group-title">{{ group.groupTitle }}</span>
|
stripe
|
||||||
<span class="group-count">({{ group.items.length }} 项)</span>
|
size="mini"
|
||||||
</div>
|
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-table-column label="当前值" min-width="180">
|
||||||
<el-row :gutter="20">
|
<template slot-scope="{ row }">
|
||||||
<el-col :span="8" v-for="item in group.items" :key="item.templateItemId || item.paramCode">
|
<el-input
|
||||||
<el-form-item :label="item.labelEn">
|
v-model="form[row.paramCode]"
|
||||||
<el-input v-model="form[item.paramCode]" :placeholder="getPlaceholder(item)"
|
:placeholder="getPlaceholder(row)"
|
||||||
:class="{ 'is-changed': isChangedFromLast(item) }" />
|
size="mini"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
<!-- 辅助信息:上次/默认值(常驻,不会像 placeholder 一样消失) -->
|
<el-table-column label="上次成功" min-width="120">
|
||||||
<div class="field-hint">
|
<template slot-scope="{ row }">
|
||||||
<span v-if="getLastValue(item) !== undefined" class="hint-item">
|
<span v-if="getLastValue(row) !== undefined">{{ getLastValue(row) }}</span>
|
||||||
上次成功:<b>{{ getLastValue(item) }}</b>
|
<span v-else class="muted">-</span>
|
||||||
</span>
|
</template>
|
||||||
<span v-if="getDefaultValue(item) !== undefined" class="hint-item">
|
</el-table-column>
|
||||||
默认值:<b>{{ getDefaultValue(item) }}</b>
|
|
||||||
</span>
|
|
||||||
<span v-if="isChangedFromLast(item)" class="hint-item changed">
|
|
||||||
已修改
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 编辑点位 -->
|
<el-table-column label="默认值" min-width="120">
|
||||||
<div v-if="editTemplate" class="addr-inline">
|
<template slot-scope="{ row }">
|
||||||
<span class="addr-label">点位地址:</span>
|
<span v-if="getDefaultValue(row) !== undefined">{{ getDefaultValue(row) }}</span>
|
||||||
<el-input v-model="item.address" size="mini" placeholder="ns=2;s=..." />
|
<span v-else class="muted">-</span>
|
||||||
</div>
|
</template>
|
||||||
</el-form-item>
|
</el-table-column>
|
||||||
</el-col>
|
|
||||||
</el-row>
|
<el-table-column label="状态" width="80">
|
||||||
</div>
|
<template slot-scope="{ row }">
|
||||||
</div>
|
<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>
|
</el-form>
|
||||||
|
|
||||||
<div v-if="!loading && templateItems.length === 0" class="empty-data">
|
<div v-if="!loading && templateItems.length === 0" class="empty-data">
|
||||||
@@ -139,29 +154,34 @@ export default {
|
|||||||
if (String(en) === '0') return false
|
if (String(en) === '0') return false
|
||||||
return true
|
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() {
|
groupedItems() {
|
||||||
const groupsMap = new Map()
|
return []
|
||||||
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
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
@@ -169,6 +189,13 @@ export default {
|
|||||||
this.reload()
|
this.reload()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
cellClassName({ row, column }) {
|
||||||
|
// 高亮:当前值与上次成功不一致时,给“当前值”这一列加底色
|
||||||
|
if (column && column.label === '当前值' && this.isChangedFromLast(row)) {
|
||||||
|
return 'cell-changed'
|
||||||
|
}
|
||||||
|
return ''
|
||||||
|
},
|
||||||
pickItemFields(it) {
|
pickItemFields(it) {
|
||||||
if (!it) return {}
|
if (!it) return {}
|
||||||
// 仅挑后端支持保存的字段,避免把多余字段/响应结构带回去
|
// 仅挑后端支持保存的字段,避免把多余字段/响应结构带回去
|
||||||
@@ -513,58 +540,21 @@ export default {
|
|||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-list {
|
/* 表格辅助样式 */
|
||||||
|
.param-table {
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-section {
|
.muted {
|
||||||
padding: 10px 0 6px;
|
color: #c0c4cc;
|
||||||
border-top: 1px solid #ebeef5;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-section:first-child {
|
/* 修改过的单元格高亮(当前值列) */
|
||||||
border-top: none;
|
:deep(.el-table .cell-changed) {
|
||||||
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;
|
|
||||||
background-color: #fdf6ec;
|
background-color: #fdf6ec;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:deep(.el-table .cell-changed .el-input__inner) {
|
||||||
|
border-color: #e6a23c;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -207,12 +207,23 @@ import { listStoppage, updateStoppage, deleteStoppage } from '@/api/l2/stop'; //
|
|||||||
export default {
|
export default {
|
||||||
name: 'StoppageManagement',
|
name: 'StoppageManagement',
|
||||||
data() {
|
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 {
|
return {
|
||||||
// 查询表单数据
|
// 查询表单数据
|
||||||
queryForm: {
|
queryForm: {
|
||||||
// 只保留年月日YYYY-mm-dd格式
|
// 只保留年月日YYYY-mm-dd格式
|
||||||
startDate: '2023-08-13',
|
startDate: startDate,
|
||||||
endDate: '2025-08-20'
|
endDate: endDate
|
||||||
},
|
},
|
||||||
// 表格数据
|
// 表格数据
|
||||||
tableData: [],
|
tableData: [],
|
||||||
@@ -264,7 +275,17 @@ export default {
|
|||||||
// 获取停机记录列表
|
// 获取停机记录列表
|
||||||
getStoppageList() {
|
getStoppageList() {
|
||||||
this.tableLoading = true;
|
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 => {
|
.then(response => {
|
||||||
this.tableLoading = false;
|
this.tableLoading = false;
|
||||||
this.btnLoading = false;
|
this.btnLoading = false;
|
||||||
|
|||||||
Reference in New Issue
Block a user