wikiboss/chengduzhongchuliang
1
0
派生 0
代码 工单 合并请求 Actions 软件包 项目 版本发布 百科 动态

fix(testing): 移除检测参数表格固定列并规范列顺序，彻底解决左侧检测项目滑动不同步问题

浏览代码
这个提交包含在：
wikiboss
2026-11-02 13:54:33 +08:00
父节点 a06d23a632
当前提交 ad89b44b4e
共有 1 个文件被更改，包括 170 次插入 和 26 次删除
下载 Patch 文件 下载 Diff 文件 展开所有文件 折叠所有文件

196
application/admin/view/testing/index.html
查看文件

@@ -45,10 +45,130 @@
padding-left: 8px;
padding-right: 8px;
}
.quality-editor-dialog .el-dialog__body {
padding: 10px 18px 0;
background: #f5f7fa;
}
.quality-editor-dialog .el-dialog__header {
padding: 16px 20px 12px;
border-bottom: 1px solid #ebeef5;
}
.quality-editor-dialog .el-dialog__footer {
position: sticky;
bottom: 0;
z-index: 3;
padding: 12px 20px;
background: #fff;
border-top: 1px solid #ebeef5;
box-shadow: 0 -4px 14px rgba(31, 45, 61, .06);
}
.quality-editor-card {
padding: 14px 16px 4px;
border: 1px solid #e4e7ed;
border-radius: 8px;
background: #fff;
}
.quality-editor-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 12px;
padding: 10px 12px;
border-radius: 6px;
background: #f0f9ff;
color: #5f6b7a;
font-size: 13px;
line-height: 1.6;
}
.quality-editor-toolbar strong {
color: #303133;
}
.quality-legend {
display: flex;
flex-wrap: wrap;
gap: 8px;
white-space: nowrap;
}
.quality-legend span {
padding: 1px 7px;
border-radius: 10px;
font-size: 12px;
}
.quality-legend .good { color: #16844a; background: #e8f8ef; }
.quality-legend .warn { color: #946200; background: #fff7df; }
.quality-legend .bad { color: #c0392b; background: #fff0ee; }
.quality-editor-table .el-table__header th {
padding: 8px 0;
background: #f8fafc;
color: #475467;
font-weight: 600;
}
.quality-editor-table .el-table__body td {
padding: 4px 0;
}
.quality-editor-table .cell {
line-height: 20px;
}
.quality-editor-table .el-input--small .el-input__inner {
height: 28px;
line-height: 28px;
}
.quality-editor-table .el-input__count {
display: none;
}
.quality-editor-table .el-table__body-wrapper {
max-height: min(58vh, 680px);
overflow-y: auto;
}
.quality-rule-ranges {
display: flex;
flex-wrap: wrap;
gap: 3px 9px;
margin-top: 5px;
font-size: 12px;
line-height: 18px;
}
.quality-rule-ranges span {
white-space: nowrap;
}
.quality-direction-help {
margin-top: 6px;
color: #8492a6;
font-size: 12px;
}
@media (max-width: 1100px) {
.quality-editor-toolbar { align-items: flex-start; flex-direction: column; gap: 4px; }
.quality-editor-dialog .el-dialog__body { padding-left: 10px; padding-right: 10px; }
}
</style>
<div id="vue" v-cloak>
<div class="screen-container">
<div class="screen-container-show">
<div class="screen-container-right display-flex" style="margin-right: 12px">
<el-select v-model="search.site" @change="siteChanged" clearable size="small" placeholder="全部库区" aria-label="筛选库区" style="width: 150px">
<el-option v-for="site in siteOptions" :key="site.id" :value="site.id" :label="site.name"></el-option>
</el-select>
</div>
<el-button style="margin-top: 14px;" size="small" @click="refreshPage" icon="el-icon-refresh" circle
type="primary"></el-button>
<div class="screen-container-left display-flex">
@@ -78,7 +198,7 @@
<el-option
v-for="item in granaryList"
:key="item.id"
:label="item.name"
:label="granaryLabel(item)"
:value="item.id">
</el-option>
</el-select>
@@ -150,6 +270,7 @@
<el-input @blur="handleSort(scope.row)" v-model="scope.row.sort" size="mini" placeholder="排序"></el-input>
</template>
</el-table-column>
<el-table-column label="数据来源" width="120" align="center"><template slot-scope="s"><el-tag :type="Number(s.row.is_demo) === 1 ? 'warning' : 'info'" size="small">{{Number(s.row.is_demo) === 1 ? 'DEMO 演示' : '后台录入'}}</el-tag></template></el-table-column>
<el-table-column prop="create_time" width="160" :formatter="dateFormat" label="创建时间" show-overflow-tooltip
align="center"></el-table-column>
<el-table-column align="center" width="320" fixed="right" label="操作">
@@ -186,17 +307,23 @@
:close-on-click-modal="false"
:title="title"
:visible.sync="addDialog"
width="98%"
custom-class="quality-editor-dialog"
width="96%"
>
<div class="form">
<el-form ref="form" :rules="rules" :model="formData" label-width="110px">
<el-form-item label="所属仓库：" prop="gid">
<el-form-item label="所属库区：" required>
<el-select v-model="formSite" @change="formSiteChanged" placeholder="请选择库区" style="width: 330px">
<el-option v-for="site in siteOptions" :key="site.id" :value="site.id" :label="site.name"></el-option>
</el-select>
</el-form-item>
<el-form-item label="所属仓库：" prop="gid">
<el-select @change="handleGranaryChange" style="width: 330px;" v-model="formData.gid" filterable clearable
placeholder="请您选择所属仓库">
<el-option
v-for="item in granaryList"
v-for="item in siteGranaries"
:key="item.id"
:label="item.name"
:label="granaryLabel(item)"
:value="item.id">
</el-option>
</el-select>
@@ -224,41 +351,56 @@
<el-input type="number" placeholder="排序" style="width: 330px;" v-model="formData.sort"></el-input>
</el-form-item>
<el-form-item label="检测参数：" prop="content">
<p>数值指标请选择“越大越好”或“越小越好”。绿色为达标、黄色为预警、红色为警告；等于阈值时归入较低一级，保存后对大屏生效。</p>
<el-table :data="typeList[formData.type]['content']" border highlight-current-row>
<div class="quality-editor-card">
<div class="quality-editor-toolbar">
<div><strong>录入提示：</strong>先填实测值、预警值和警告值，再选择指标偏好。等于阈值时归入较低一级。</div>
<div class="quality-legend" aria-label="颜色规则">
<span class="good">绿 · 达标</span>
<span class="warn">黄 · 预警</span>
<span class="bad">红 · 警告</span>
</div>
</div>
<el-table class="quality-editor-table" size="small" :data="typeList[formData.type]['content']" border highlight-current-row>
<el-table-column prop="num" width="60" label="序号" show-overflow-tooltip
align="center"></el-table-column>
<el-table-column prop="name" label="检测项目" show-overflow-tooltip
<el-table-column prop="name" min-width="150" label="检测项目" show-overflow-tooltip
align="center"></el-table-column>
<el-table-column prop="unit" width="110" label="单位" show-overflow-tooltip
align="center">
<template scope="scope">
<el-input style="width: 85px;" placeholder="单位" size="small" maxlength="15" show-word-limit
<el-input style="width: 85px;" placeholder="单位" size="small" maxlength="15"
v-model="typeList[formData.type]['content'][scope.$index].unit"></el-input>
</template>
</el-table-column>
<el-table-column prop="val" width="130" label="值" show-overflow-tooltip
align="center">
<template scope="scope">
<el-input style="width: 110px;" placeholder="请您输入值" size="small" maxlength="50" show-word-limit
<el-input style="width: 110px;" placeholder="请您输入值" size="small" maxlength="50"
v-model="typeList[formData.type]['content'][scope.$index].val"></el-input>
</template>
</el-table-column>
<el-table-column prop="warning" width="140" label="预警值" show-overflow-tooltip
align="center">
<template scope="scope">
<el-input style="width: 120px;" placeholder="请您输入预警值" size="small" maxlength="50" show-word-limit
<el-input style="width: 120px;" placeholder="请您输入预警值" size="small" maxlength="50"
v-model="typeList[formData.type]['content'][scope.$index].warning"></el-input>
</template>
</el-table-column>
<el-table-column prop="alert" width="140" label="警告值" show-overflow-tooltip
align="center">
<template scope="scope">
<el-input style="width: 120px;" placeholder="请您输入警告值" size="small" maxlength="50" show-word-limit
<el-input style="width: 120px;" placeholder="请您输入警告值" size="small" maxlength="50"
v-model="typeList[formData.type]['content'][scope.$index].alert"></el-input>
</template>
</el-table-column>
<el-table-column width="270" fixed="right" label="指标偏好与颜色规则" align="left">
<el-table-column prop="is_number" width="100" label="图表" show-overflow-tooltip
align="center">
<template scope="scope">
<el-button @click="handelIsNumber(scope.$index, 2)" size="mini" v-if="scope.row.is_number == 1" type="success" icon="el-icon-check">是</el-button>
<el-button @click="handelIsNumber(scope.$index, 1)" size="mini" v-else type="warning" icon="el-icon-close">否</el-button>
</template>
</el-table-column>
<el-table-column width="270" label="指标偏好与颜色规则" align="left">
<template scope="scope">
<template v-if="isNumericRule(scope.row)">
<el-button-group class="quality-direction-toggle" :aria-label="'选择' + scope.row.name + '的指标偏好'">
@@ -272,23 +414,19 @@
@click="setRuleDirection(scope.row, 'upper')">越小越好</el-button>
</el-button-group>
<div v-if="ruleError(scope.row)" style="color: #c0392b; margin-top: 6px;">{{ruleError(scope.row)}}</div>
<div v-else style="font-size: 12px; line-height: 22px; margin-top: 6px;">
<div style="color: #16844a;">绿 · {{ruleRanges(scope.row)[0]}}</div>
<div style="color: #946200;">黄 · {{ruleRanges(scope.row)[1]}}</div>
<div style="color: #c0392b;">红 · {{ruleRanges(scope.row)[2]}}</div>
<div v-else class="quality-rule-ranges">
<span style="color: #16844a;">绿 {{ruleRanges(scope.row)[0]}}</span>
<span style="color: #946200;">黄 {{ruleRanges(scope.row)[1]}}</span>
<span style="color: #c0392b;">红 {{ruleRanges(scope.row)[2]}}</span>
</div>
</template>
<span v-else-if="ruleError(scope.row)" style="color: #c0392b;">{{ruleError(scope.row)}}</span>
<span v-else>文字指标，按检测结果判定</span>
</template>
</el-table-column>
<el-table-column prop="alert" width="100" label="图表" show-overflow-tooltip
align="center">
<template scope="scope">
<el-button @click="handelIsNumber(scope.$index, 2)" size="mini" v-if="scope.row.is_number == 1" type="success" icon="el-icon-check">是</el-button>
<el-button @click="handelIsNumber(scope.$index, 1)" size="mini" v-else type="warning" icon="el-icon-close">否</el-button>
</template>
</el-table-column>
</el-table>
</el-table>
<div class="quality-direction-help">“越大越好”：低于预警值会触发风险；“越小越好”：高于预警值会触发风险。文字指标按检测结果判定。</div>
</div>
</el-form-item>
</el-form>
</div>
@@ -309,7 +447,12 @@
>
<div class="form">
<el-form ref="detailForm" :model="formData" label-width="110px">
<el-form-item label="所属仓库：" prop="gid">
<el-form-item label="所属库区：" required>
<el-select v-model="formSite" @change="formSiteChanged" placeholder="请选择库区" style="width: 330px">
<el-option v-for="site in siteOptions" :key="site.id" :value="site.id" :label="site.name"></el-option>
</el-select>
</el-form-item>
<el-form-item label="所属仓库：" prop="gid">
<div>{{detail.granary.name}}</div>
</el-form-item>
<el-form-item label="类型：" prop="type">
@@ -353,6 +496,7 @@
<div style="color: #946200;">黄 · {{ruleRanges(scope.row)[1]}}</div>
<div style="color: #c0392b;">红 · {{ruleRanges(scope.row)[2]}}</div>
</template>
<span v-else-if="ruleError(scope.row)" style="color: #c0392b;">{{ruleError(scope.row)}}</span>
<span v-else>文字指标，按检测结果判定</span>
</template>
</el-table-column>