229 行
9.6 KiB
HTML
229 行
9.6 KiB
HTML
<link rel="stylesheet" href="__CDN__/assets/element-ui-2.15.14/css/index.css">
|
|
<link href="/assets/css/sweetalert.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="__CDN__/assets/css/vvv.css">
|
|
<style>
|
|
.quality-detail-page {
|
|
padding: 16px;
|
|
background: #f4f6f9;
|
|
min-height: calc(100vh - 40px);
|
|
}
|
|
.page-header-card {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: #fff;
|
|
padding: 14px 20px;
|
|
border-radius: 6px;
|
|
box-shadow: 0 1px 4px rgba(0,21,41,.08);
|
|
margin-bottom: 16px;
|
|
}
|
|
.page-header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.page-header-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #1f2d3d;
|
|
}
|
|
.page-body-card {
|
|
background: #fff;
|
|
padding: 24px;
|
|
border-radius: 6px;
|
|
box-shadow: 0 1px 4px rgba(0,21,41,.08);
|
|
margin-bottom: 16px;
|
|
}
|
|
.info-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
gap: 16px;
|
|
padding: 14px 18px;
|
|
background: #fafafa;
|
|
border: 1px solid #ebeef5;
|
|
border-radius: 6px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.info-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
.info-label {
|
|
font-size: 12px;
|
|
color: #909399;
|
|
}
|
|
.info-value {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #303133;
|
|
}
|
|
.quality-rule-ranges {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
font-size: 12px;
|
|
}
|
|
</style>
|
|
|
|
<div id="vue" v-cloak class="quality-detail-page">
|
|
<div class="page-header-card">
|
|
<div class="page-header-left">
|
|
<el-button size="small" icon="el-icon-back" @click="goBack">返回列表</el-button>
|
|
<span class="page-header-title">质检报告详情</span>
|
|
</div>
|
|
<div>
|
|
<el-button size="small" type="primary" icon="el-icon-edit" @click="toEdit">编辑此报告</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="page-body-card">
|
|
<div class="info-grid">
|
|
<div class="info-item">
|
|
<span class="info-label">所属库区</span>
|
|
<span class="info-value">{{ granarySiteName }}</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">所属仓库</span>
|
|
<span class="info-value">{{ item.granary ? item.granary.name : '-' }}</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">品种类型</span>
|
|
<span class="info-value">
|
|
<span v-if="item.type == 'rapeseed'">菜籽油</span>
|
|
<span v-else-if="item.type == 'bean'">大豆油</span>
|
|
<span v-else-if="item.type == 'wheat'">小麦</span>
|
|
<span v-else-if="item.type == 'paddy'">稻谷</span>
|
|
<span v-else-if="item.type == 'corn'">玉米</span>
|
|
<span v-else>{{ item.type }}</span>
|
|
</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">记录日期</span>
|
|
<span class="info-value">{{ item.year }}-{{ item.month < 10 ? '0' + parseInt(item.month) : item.month }}</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">季节</span>
|
|
<span class="info-value">
|
|
<el-tag size="small" type="info">{{ item.season == 1 ? '春季' : item.season == 2 ? '秋季' : '满仓' }}</el-tag>
|
|
</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">排序</span>
|
|
<span class="info-value">{{ item.sort }}</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">数据来源</span>
|
|
<span class="info-value">
|
|
<el-tag :type="Number(item.is_demo) === 1 ? 'warning' : 'success'" size="small">
|
|
{{ Number(item.is_demo) === 1 ? 'DEMO 演示' : '后台录入' }}
|
|
</el-tag>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h4 style="margin: 20px 0 12px 0; color: #303133;">检测参数清单</h4>
|
|
<el-table :data="item.testing_params" border highlight-current-row style="width: 100%;">
|
|
<el-table-column prop="num" width="60" label="序号" align="center"></el-table-column>
|
|
<el-table-column prop="name" min-width="150" label="检测项目" align="center"></el-table-column>
|
|
<el-table-column prop="unit" width="120" label="单位" align="center"></el-table-column>
|
|
<el-table-column prop="val" width="150" label="实测值" align="center">
|
|
<template scope="scope">
|
|
<strong>{{ scope.row.val }}</strong>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="warning" width="140" label="预警值" align="center"></el-table-column>
|
|
<el-table-column prop="alert" width="140" label="警告值" align="center"></el-table-column>
|
|
<el-table-column prop="is_number" width="110" label="大屏显示" align="center">
|
|
<template scope="scope">
|
|
<el-tag size="mini" v-if="scope.row.is_number == 1" type="success">显示</el-tag>
|
|
<el-tag size="mini" v-else type="info">隐藏</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column min-width="260" label="指标偏好与颜色规则" align="left">
|
|
<template scope="scope">
|
|
<template v-if="isNumericRule(scope.row)">
|
|
<div style="font-weight: 500; margin-bottom: 4px;">{{ ruleDirection(scope.row) === 'lower' ? '● 越大越好' : '● 越小越好' }}</div>
|
|
<div 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 style="color: #909399;">文字指标，按检测结果判定</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="__CDN__/assets/element-ui-2.15.14/js/vue.js"></script>
|
|
<script src="__CDN__/assets/element-ui-2.15.14/js/index.js"></script>
|
|
<script src="__CDN__/assets/js/jquery-2.1.1.min.js"></script>
|
|
|
|
<script>
|
|
var SERVER_DATA = {
|
|
item: {:json_encode($item, JSON_UNESCAPED_UNICODE)},
|
|
siteOptions: {:json_encode($siteOptions, JSON_UNESCAPED_UNICODE)}
|
|
};
|
|
|
|
new Vue({
|
|
el: '#vue',
|
|
data: function () {
|
|
return {
|
|
item: SERVER_DATA.item || {},
|
|
siteOptions: SERVER_DATA.siteOptions || []
|
|
};
|
|
},
|
|
computed: {
|
|
granarySiteName: function () {
|
|
var siteId = this.item && this.item.granary ? this.item.granary.site : '';
|
|
var found = this.siteOptions.find(function (s) { return s.id === siteId; });
|
|
return found ? found.name : (siteId || '-');
|
|
}
|
|
},
|
|
methods: {
|
|
isRuleNumber: function (val) {
|
|
return (typeof val === 'string' || typeof val === 'number')
|
|
&& /^[+-]?(?:\d+\.?\d*|\.\d+)(?:[eE][+-]?\d+)?$/.test(String(val).trim())
|
|
&& Number.isFinite(Number(val));
|
|
},
|
|
isNumericRule: function (item) {
|
|
return this.isRuleNumber(item.warning) && this.isRuleNumber(item.alert);
|
|
},
|
|
ruleDirection: function (item) {
|
|
if (item.direction === 'upper' || item.direction === 'lower') return item.direction;
|
|
return (this.isNumericRule(item) && Number(item.warning) > Number(item.alert)) ? 'lower' : 'upper';
|
|
},
|
|
ruleRanges: function (item) {
|
|
var w = item.warning, a = item.alert;
|
|
return this.ruleDirection(item) === 'upper'
|
|
? ['当前值 ≤ ' + w, w + ' < 当前值 ≤ ' + a, '当前值 > ' + a]
|
|
: ['当前值 ≥ ' + w, a + ' ≤ 当前值 < ' + w, '当前值 < ' + a];
|
|
},
|
|
goBack: function () {
|
|
if (typeof top !== 'undefined' && top && top.Backend && top.Backend.api && top.Backend.api.closetabs) {
|
|
var currentNav = top.$("#nav ul.nav-tabs li.active");
|
|
if (currentNav.length > 0) {
|
|
currentNav.find(".close-tab").trigger("click");
|
|
return;
|
|
}
|
|
}
|
|
if (window.history.length > 1) {
|
|
window.history.back();
|
|
} else {
|
|
window.location.href = 'testing/index';
|
|
}
|
|
},
|
|
toEdit: function () {
|
|
var url = 'testing/edit?ids=' + this.item.id;
|
|
var title = '编辑检测报告';
|
|
if (typeof top !== 'undefined' && top && top.Backend && top.Backend.api && typeof top.Backend.api.addtabs === 'function') {
|
|
top.Backend.api.addtabs(url, title);
|
|
} else {
|
|
window.location.href = url;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script> |