|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<avue-crud :option="option" :table-loading="loading" :data="data" v-model="form" v-model:page="page" ref="crud"
|
|
|
|
|
@row-del="rowDel" @search-change="searchChange" @search-reset="searchReset"
|
|
|
|
|
@selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
|
|
|
|
|
@refresh-change="refreshChange" @on-load="onLoad" :before-open="beforeOpen">
|
|
|
|
|
<template #menu-left>
|
|
|
|
|
<el-button type="primary" icon="el-icon-data-line" @click="handleLine">生成报告
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button type="danger" icon="el-icon-delete" @click="handleDelete">删 除
|
|
|
|
|
</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
<template #menu="scope">
|
|
|
|
|
<el-button type="text" @click="handleView(scope.row)">详情</el-button>
|
|
|
|
|
<el-button type="text" @click="rowDel(scope.row)">删除</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
</avue-crud>
|
|
|
|
|
<el-dialog title="检验报告" append-to-body v-model="lineBox" width="70%">
|
|
|
|
|
<el-form :inline="true" v-model="lineForm" label-width="80px">
|
|
|
|
|
<el-form-item label="槽号" prop="slotNo">
|
|
|
|
|
<el-select v-model="lineForm.slotNo" placeholder="请选择" style="width: 240px;">
|
|
|
|
|
<el-option v-for="item in slotData" :key="item.value" :label="item.label"
|
|
|
|
|
:value="item.value"></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="槽液信息" prop="tank">
|
|
|
|
|
<el-select v-model="lineForm.tank" placeholder="请选择" style="width: 240px;">
|
|
|
|
|
<el-option v-for="item in tankData" :key="item.value" :label="item.label"
|
|
|
|
|
:value="item.value"></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="时间范围" prop="timeRange">
|
|
|
|
|
<el-date-picker v-model="lineForm.timeRange" type="daterange" format="YYYY-MM-DD"
|
|
|
|
|
value-format="YYYY-MM-DD" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
|
|
|
|
|
</el-date-picker>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button type="primary" @click="createLine">生成报告</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<div style="height: 600px;">
|
|
|
|
|
<el-form :inline="true" v-model="nameForm" label-width="80px" v-if="isShowBox">
|
|
|
|
|
<el-form-item label="报告名称">
|
|
|
|
|
<el-input placeholder="请输入" v-model="nameForm.name" style="width: 240px;"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button type="primary">保存报告</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<!-- <div v-if="isShowBox" style="width: 100%;height: 520px;" ref="lineChart"></div> -->
|
|
|
|
|
<avue-crud :option="addoption" :table-loading="loading" :data="data" v-model="form" v-model:page="page"
|
|
|
|
|
ref="crud" @row-del="rowDel" @search-change="searchChange" @search-reset="searchReset"
|
|
|
|
|
@selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
|
|
|
|
|
@refresh-change="refreshChange" @on-load="onLoad" :before-open="beforeOpen">
|
|
|
|
|
|
|
|
|
|
</avue-crud>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</el-dialog>
|
|
|
|
|
<el-dialog title="详情" append-to-body v-model="detailBox" width="70%">
|
|
|
|
|
<div style="padding: 10px 0 30px;border-bottom:1px solid #eee;">
|
|
|
|
|
<div style="margin: 20px 0;">曲线信息</div>
|
|
|
|
|
<div style="display: flex;flex-wrap: wrap;">
|
|
|
|
|
<div style="width: 33%;margin-bottom: 15px;">作业中心：{{ detailForm.wcName }}</div>
|
|
|
|
|
<div style="width: 33%;margin-bottom: 15px;">槽号：{{ detailForm.slotNo }}</div>
|
|
|
|
|
<div style="width: 33%;margin-bottom: 15px;">检测成分：{{ detailForm.testName }}</div>
|
|
|
|
|
<div style="width: 33%;">曲线时间范围：{{ detailForm.lineTime }}</div>
|
|
|
|
|
<div style="width: 33%;">操作人：{{ detailForm.createTime }}</div>
|
|
|
|
|
<div style="width: 33%;">曲线生产时间：{{ detailForm.createUser }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin: 20px 0;">
|
|
|
|
|
检测曲线
|
|
|
|
|
</div>
|
|
|
|
|
<div style="width: 100%;height: 520px;" ref="lineChart"></div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { detail } from '@/api/flow/flow'
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
data: [],
|
|
|
|
|
form: {},
|
|
|
|
|
query: {},
|
|
|
|
|
lineForm: {},
|
|
|
|
|
nameForm: {},
|
|
|
|
|
detailBox: false,
|
|
|
|
|
detailForm: {},
|
|
|
|
|
slotData: [
|
|
|
|
|
{ value: '#21', label: '21#氰化镀铜槽' },
|
|
|
|
|
{ value: '#22', label: '22#氰化镀铜槽' },
|
|
|
|
|
{ value: '#23', label: '23#氰化镀铜槽' },
|
|
|
|
|
{ value: '#24', label: '24#氰化镀铜槽' },
|
|
|
|
|
],
|
|
|
|
|
tankData: [
|
|
|
|
|
{ value: '20250821001', value: '20250821001' },
|
|
|
|
|
{ value: '20250821002', value: '20250821002' },
|
|
|
|
|
],
|
|
|
|
|
lineBox: false,
|
|
|
|
|
page: {
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
currentPage: 1,
|
|
|
|
|
total: 0,
|
|
|
|
|
},
|
|
|
|
|
loading: false,
|
|
|
|
|
option: {
|
|
|
|
|
tip: false,
|
|
|
|
|
size: 'medium',
|
|
|
|
|
height: 'auto',
|
|
|
|
|
align: 'center',
|
|
|
|
|
calcHeight: 32,
|
|
|
|
|
// simplePage: true,
|
|
|
|
|
columnSort: true,
|
|
|
|
|
searchShow: true,
|
|
|
|
|
searchMenuSpan: 6,
|
|
|
|
|
searchIcon: true,
|
|
|
|
|
searchIndex: 3,
|
|
|
|
|
tree: false,
|
|
|
|
|
border: true,
|
|
|
|
|
index: true,
|
|
|
|
|
selection: true,
|
|
|
|
|
viewBtn: false,
|
|
|
|
|
delBtn: false,
|
|
|
|
|
addBtn: false,
|
|
|
|
|
editBtn: false,
|
|
|
|
|
editBtnText: '修改',
|
|
|
|
|
viewBtnText: '详情',
|
|
|
|
|
labelWidth: 120,
|
|
|
|
|
// menuWidth: 200,
|
|
|
|
|
dialogWidth: 1200,
|
|
|
|
|
dialogClickModal: false,
|
|
|
|
|
searchEnter: true,
|
|
|
|
|
excelBtn: false,
|
|
|
|
|
filterBtn: true,
|
|
|
|
|
searchShowBtn: false,
|
|
|
|
|
excelBtn: true,
|
|
|
|
|
viewBtnIcon: ' ',
|
|
|
|
|
delBtnIcon: ' ',
|
|
|
|
|
editBtnIcon: ' ',
|
|
|
|
|
index: false,
|
|
|
|
|
showOverflowTooltip: true,
|
|
|
|
|
searchLabelPosition:'left',
|
|
|
|
|
searchLabelPosition:'left',
|
|
|
|
|
searchGutter:24,
|
|
|
|
|
searchSpan:6,
|
|
|
|
|
menuAlign: 'left',
|
|
|
|
|
gridBtn:false,
|
|
|
|
|
searchMenuPosition:'right',
|
|
|
|
|
column: [
|
|
|
|
|
{
|
|
|
|
|
label: '曲线名称',
|
|
|
|
|
prop: 'lineName',
|
|
|
|
|
sortable: true,
|
|
|
|
|
filter: true,
|
|
|
|
|
span: 8,
|
|
|
|
|
search: false,
|
|
|
|
|
rules: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请输入作业中心',
|
|
|
|
|
trigger: 'blur',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '作业中心',
|
|
|
|
|
prop: 'wcName',
|
|
|
|
|
sortable: true,
|
|
|
|
|
filter: true,
|
|
|
|
|
span: 8,
|
|
|
|
|
search: false,
|
|
|
|
|
rules: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请输入作业中心',
|
|
|
|
|
trigger: 'blur',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '槽号',
|
|
|
|
|
prop: 'slotNo',
|
|
|
|
|
search: true,
|
|
|
|
|
type: 'select',
|
|
|
|
|
sortable: true,
|
|
|
|
|
filter: true,
|
|
|
|
|
addDisplay: false,
|
|
|
|
|
editDisplay: false,
|
|
|
|
|
viewDisplay: false,
|
|
|
|
|
span: 24,
|
|
|
|
|
rules: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请输入槽号',
|
|
|
|
|
trigger: 'blur',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
dicData: [
|
|
|
|
|
{
|
|
|
|
|
label: '#21',
|
|
|
|
|
value: '#21'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '#22',
|
|
|
|
|
value: '#22'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '#23',
|
|
|
|
|
value: '#23'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '#24',
|
|
|
|
|
value: '#24'
|
|
|
|
|
}, {
|
|
|
|
|
label: '#25',
|
|
|
|
|
value: '#25'
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '检测成分',
|
|
|
|
|
prop: 'testName',
|
|
|
|
|
sortable: true,
|
|
|
|
|
filter: true,
|
|
|
|
|
span: 8,
|
|
|
|
|
search: false,
|
|
|
|
|
rules: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请输入检测成分',
|
|
|
|
|
trigger: 'blur',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '曲线时间范围',
|
|
|
|
|
prop: 'lineTime',
|
|
|
|
|
sortable: true,
|
|
|
|
|
filter: true,
|
|
|
|
|
span: 8,
|
|
|
|
|
search: false,
|
|
|
|
|
width: 240,
|
|
|
|
|
rules: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请输入曲线时间范围',
|
|
|
|
|
trigger: 'blur',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '曲线生成时间',
|
|
|
|
|
prop: 'createTime',
|
|
|
|
|
sortable: true,
|
|
|
|
|
filter: true,
|
|
|
|
|
span: 8,
|
|
|
|
|
search: false,
|
|
|
|
|
rules: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请输入曲线生成时间',
|
|
|
|
|
trigger: 'blur',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '操作人',
|
|
|
|
|
prop: 'createUser',
|
|
|
|
|
sortable: true,
|
|
|
|
|
filter: true,
|
|
|
|
|
span: 8,
|
|
|
|
|
search: false,
|
|
|
|
|
rules: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请输入操作人',
|
|
|
|
|
trigger: 'blur',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
testData: [],
|
|
|
|
|
maxData: [],
|
|
|
|
|
minData: [],
|
|
|
|
|
xData: [],
|
|
|
|
|
lineTitle: '',
|
|
|
|
|
isShowBox: false,
|
|
|
|
|
selectionList: [],
|
|
|
|
|
page: {
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
currentPage: 1,
|
|
|
|
|
total: 0,
|
|
|
|
|
},
|
|
|
|
|
loading: false,
|
|
|
|
|
addoption: {
|
|
|
|
|
addRowBtn: true,
|
|
|
|
|
tip: false,
|
|
|
|
|
size: 'medium',
|
|
|
|
|
// height: 'auto',
|
|
|
|
|
align: 'center',
|
|
|
|
|
calcHeight: 32,
|
|
|
|
|
// simplePage: true,
|
|
|
|
|
columnSort: true,
|
|
|
|
|
searchShow: true,
|
|
|
|
|
searchMenuSpan: 6,
|
|
|
|
|
searchIcon: true,
|
|
|
|
|
searchIndex: 3,
|
|
|
|
|
tree: false,
|
|
|
|
|
border: true,
|
|
|
|
|
index: true,
|
|
|
|
|
selection: false,
|
|
|
|
|
viewBtn: false,
|
|
|
|
|
delBtn: false,
|
|
|
|
|
addBtn: false,
|
|
|
|
|
editBtn: false,
|
|
|
|
|
editBtnText: '修改',
|
|
|
|
|
viewBtnText: '详情',
|
|
|
|
|
labelWidth: 120,
|
|
|
|
|
// menuWidth: 200,
|
|
|
|
|
dialogWidth: 1200,
|
|
|
|
|
dialogClickModal: false,
|
|
|
|
|
searchEnter: true,
|
|
|
|
|
excelBtn: false,
|
|
|
|
|
filterBtn: true,
|
|
|
|
|
searchShowBtn: false,
|
|
|
|
|
excelBtn: true,
|
|
|
|
|
viewBtnIcon: ' ',
|
|
|
|
|
delBtnIcon: ' ',
|
|
|
|
|
editBtnIcon: ' ',
|
|
|
|
|
index: false,
|
|
|
|
|
showOverflowTooltip: true,
|
|
|
|
|
menu:false,
|
|
|
|
|
header:false,
|
|
|
|
|
searchLabelPosition:'left',
|
|
|
|
|
searchLabelPosition:'left',
|
|
|
|
|
searchGutter:24,
|
|
|
|
|
searchSpan:6,
|
|
|
|
|
menuAlign: 'left',
|
|
|
|
|
gridBtn:false,
|
|
|
|
|
searchMenuPosition:'right',
|
|
|
|
|
column: [
|
|
|
|
|
{
|
|
|
|
|
label: '取样时间',
|
|
|
|
|
prop: 'lineName',
|
|
|
|
|
sortable: true,
|
|
|
|
|
filter: true,
|
|
|
|
|
span: 8,
|
|
|
|
|
search: false,
|
|
|
|
|
width:120,
|
|
|
|
|
cell: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '温度(℃)',
|
|
|
|
|
prop: 'wcName',
|
|
|
|
|
sortable: true,
|
|
|
|
|
filter: true,
|
|
|
|
|
span: 8,
|
|
|
|
|
search: false,
|
|
|
|
|
width:120,
|
|
|
|
|
cell: true,
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '槽号',
|
|
|
|
|
prop: 'slotNo',
|
|
|
|
|
search: false,
|
|
|
|
|
type: 'select',
|
|
|
|
|
sortable: true,
|
|
|
|
|
filter: true,
|
|
|
|
|
addDisplay: false,
|
|
|
|
|
editDisplay: false,
|
|
|
|
|
viewDisplay: false,
|
|
|
|
|
span: 24,
|
|
|
|
|
cell: true,
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '体积(L)',
|
|
|
|
|
prop: 'testName',
|
|
|
|
|
sortable: true,
|
|
|
|
|
filter: true,
|
|
|
|
|
span: 8,
|
|
|
|
|
search: false,
|
|
|
|
|
width:120,
|
|
|
|
|
cell: true,
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '分析项目',
|
|
|
|
|
prop: 'lineTime',
|
|
|
|
|
sortable: true,
|
|
|
|
|
filter: true,
|
|
|
|
|
span: 8,
|
|
|
|
|
search: false,
|
|
|
|
|
width:140,
|
|
|
|
|
cell: true,
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '规范下限(g/L)',
|
|
|
|
|
prop: 'createTime',
|
|
|
|
|
sortable: true,
|
|
|
|
|
filter: true,
|
|
|
|
|
span: 8,
|
|
|
|
|
search: false,
|
|
|
|
|
width:140,
|
|
|
|
|
cell: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '目标下限(g/L)',
|
|
|
|
|
prop: 'createUser',
|
|
|
|
|
sortable: true,
|
|
|
|
|
filter: true,
|
|
|
|
|
span: 8,
|
|
|
|
|
search: false,
|
|
|
|
|
width:140,
|
|
|
|
|
cell: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '添加点(g/L)',
|
|
|
|
|
prop: 'createUser',
|
|
|
|
|
sortable: true,
|
|
|
|
|
filter: true,
|
|
|
|
|
span: 8,
|
|
|
|
|
search: false,
|
|
|
|
|
width:140,
|
|
|
|
|
cell: true,
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '目标值(g/L)',
|
|
|
|
|
prop: 'createUser',
|
|
|
|
|
sortable: true,
|
|
|
|
|
filter: true,
|
|
|
|
|
span: 8,
|
|
|
|
|
search: false,
|
|
|
|
|
width:140,
|
|
|
|
|
cell: true,
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '目标上限(g/L)',
|
|
|
|
|
prop: 'createUser',
|
|
|
|
|
sortable: true,
|
|
|
|
|
filter: true,
|
|
|
|
|
span: 8,
|
|
|
|
|
search: false,
|
|
|
|
|
width:140,
|
|
|
|
|
cell: true,
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '规范上限(g/L)',
|
|
|
|
|
prop: 'createUser',
|
|
|
|
|
sortable: true,
|
|
|
|
|
filter: true,
|
|
|
|
|
span: 8,
|
|
|
|
|
search: false,
|
|
|
|
|
|
|
|
|
|
width:140,
|
|
|
|
|
cell: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '化验频率',
|
|
|
|
|
prop: 'createUser',
|
|
|
|
|
sortable: true,
|
|
|
|
|
filter: true,
|
|
|
|
|
span: 8,
|
|
|
|
|
search: false,
|
|
|
|
|
width:140,
|
|
|
|
|
cell: true,
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '化验值(g/L)',
|
|
|
|
|
prop: 'createUser',
|
|
|
|
|
sortable: true,
|
|
|
|
|
filter: true,
|
|
|
|
|
span: 8,
|
|
|
|
|
search: false,
|
|
|
|
|
width:140,
|
|
|
|
|
cell: true,
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '药品计算公式',
|
|
|
|
|
prop: 'createUser',
|
|
|
|
|
sortable: true,
|
|
|
|
|
filter: true,
|
|
|
|
|
span: 8,
|
|
|
|
|
search: false,
|
|
|
|
|
width:140,
|
|
|
|
|
cell: true,
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '药品添加量',
|
|
|
|
|
prop: 'createUser',
|
|
|
|
|
sortable: true,
|
|
|
|
|
filter: true,
|
|
|
|
|
span: 8,
|
|
|
|
|
search: false,
|
|
|
|
|
width:140,
|
|
|
|
|
cell: true,
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '药品批次号',
|
|
|
|
|
prop: 'createUser',
|
|
|
|
|
sortable: true,
|
|
|
|
|
filter: true,
|
|
|
|
|
span: 8,
|
|
|
|
|
search: false,
|
|
|
|
|
width:140,
|
|
|
|
|
cell: true,
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '药品监督员签名',
|
|
|
|
|
prop: 'createUser',
|
|
|
|
|
sortable: true,
|
|
|
|
|
filter: true,
|
|
|
|
|
span: 8,
|
|
|
|
|
search: false,
|
|
|
|
|
width:160,
|
|
|
|
|
cell: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '药品添加人签名',
|
|
|
|
|
prop: 'createUser',
|
|
|
|
|
sortable: true,
|
|
|
|
|
filter: true,
|
|
|
|
|
span: 8,
|
|
|
|
|
search: false,
|
|
|
|
|
width:160,
|
|
|
|
|
cell: true,
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '调整后化验值(g/L)',
|
|
|
|
|
prop: 'createUser',
|
|
|
|
|
sortable: true,
|
|
|
|
|
filter: true,
|
|
|
|
|
span: 8,
|
|
|
|
|
search: false,
|
|
|
|
|
width:170,
|
|
|
|
|
cell: true,
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '是否合格',
|
|
|
|
|
prop: 'createUser',
|
|
|
|
|
sortable: true,
|
|
|
|
|
filter: true,
|
|
|
|
|
span: 8,
|
|
|
|
|
search: false,
|
|
|
|
|
width:140,
|
|
|
|
|
cell: true,
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '有效期',
|
|
|
|
|
prop: 'createUser',
|
|
|
|
|
sortable: true,
|
|
|
|
|
filter: true,
|
|
|
|
|
span: 8,
|
|
|
|
|
search: false,
|
|
|
|
|
width:140,
|
|
|
|
|
cell: true,
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '超出规范极限调整后的结果',
|
|
|
|
|
prop: 'createUser',
|
|
|
|
|
sortable: true,
|
|
|
|
|
filter: true,
|
|
|
|
|
span: 8,
|
|
|
|
|
search: false,
|
|
|
|
|
width:240,
|
|
|
|
|
cell: true,
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '槽液清理记录',
|
|
|
|
|
prop: 'createUser',
|
|
|
|
|
sortable: true,
|
|
|
|
|
filter: true,
|
|
|
|
|
span: 8,
|
|
|
|
|
search: false,
|
|
|
|
|
width:140,
|
|
|
|
|
cell: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '控制规范',
|
|
|
|
|
prop: 'createUser',
|
|
|
|
|
sortable: true,
|
|
|
|
|
filter: true,
|
|
|
|
|
span: 8,
|
|
|
|
|
search: false,
|
|
|
|
|
width:140,
|
|
|
|
|
cell: true,
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
handleLine() {
|
|
|
|
|
this.lineBox = true
|
|
|
|
|
},
|
|
|
|
|
createLine() {
|
|
|
|
|
if (!this.lineForm.slotNo && !this.lineForm.tank && !this.lineForm.timeRange) {
|
|
|
|
|
this.$message.error('请填写完整信息')
|
|
|
|
|
} else {
|
|
|
|
|
console.log('lineForm------------------------', this.lineForm)
|
|
|
|
|
let tmp = this.slotData.find(item => item.value == this.lineForm.slotNo)
|
|
|
|
|
this.lineTitle = '槽号：' + tmp.label + ' 检测成分：氰化铜'
|
|
|
|
|
//调用方法
|
|
|
|
|
let days = this.getDateCount(this.lineForm.timeRange[0], this.lineForm.timeRange[1]);
|
|
|
|
|
console.log(days);
|
|
|
|
|
this.xData = days.dates
|
|
|
|
|
this.testData = []
|
|
|
|
|
this.maxData = []
|
|
|
|
|
this.minData = []
|
|
|
|
|
for (let i = 0; i < days.totalDays; i++) {
|
|
|
|
|
// 生成一个介于0到99之间的随机整数（包括0和99）
|
|
|
|
|
let randomInteger = Math.floor(Math.random() * 30);
|
|
|
|
|
// 将随机整数添加到数组中
|
|
|
|
|
this.testData.push(randomInteger);
|
|
|
|
|
this.minData.push(5);
|
|
|
|
|
this.maxData.push(30);
|
|
|
|
|
}
|
|
|
|
|
this.isShowBox = true
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.createBarChart()
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
//计算方法
|
|
|
|
|
getDateCount(sDate, eDate) {
|
|
|
|
|
// 定义起始日期和结束日期
|
|
|
|
|
let startDate = new Date(sDate); // 例如：2023年1月1日
|
|
|
|
|
let endDate = new Date(eDate); // 例如：2023年1月10日
|
|
|
|
|
|
|
|
|
|
// 确保起始日期小于等于结束日期
|
|
|
|
|
if (startDate > endDate) {
|
|
|
|
|
[startDate, endDate] = [endDate, startDate];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 存储所有日期的数组
|
|
|
|
|
let allDates = [];
|
|
|
|
|
let currentDate = new Date(startDate);
|
|
|
|
|
let totalDays = 0;
|
|
|
|
|
|
|
|
|
|
// 循环遍历每一天
|
|
|
|
|
while (currentDate <= endDate) {
|
|
|
|
|
allDates.push(new Date(currentDate)); // 添加当前日期到数组
|
|
|
|
|
totalDays++; // 增加天数计数
|
|
|
|
|
currentDate.setDate(currentDate.getDate() + 1); // 移动到下一天
|
|
|
|
|
}
|
|
|
|
|
return {
|
|
|
|
|
dates: allDates.map(date => date.toISOString().slice(0, 10)), totalDays
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
beforeOpen(done, type) {
|
|
|
|
|
if (['add', 'edit'].includes(type)) {
|
|
|
|
|
this.initData();
|
|
|
|
|
}
|
|
|
|
|
if (['edit', 'view'].includes(type)) {
|
|
|
|
|
getMenu(this.form.id).then(res => {
|
|
|
|
|
this.form = Object.assign(res.data.data, {
|
|
|
|
|
hasChildren: this.form.hasChildren,
|
|
|
|
|
});
|
|
|
|
|
if (this.form.parentId === '0') {
|
|
|
|
|
this.form.parentId = '';
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
done();
|
|
|
|
|
},
|
|
|
|
|
handleView(row) {
|
|
|
|
|
console.log('row-------------------', row)
|
|
|
|
|
this.detailForm = row
|
|
|
|
|
let data = row.lineTime.split(' ~ ')
|
|
|
|
|
console.log('data------------------', data)
|
|
|
|
|
this.detailBox = true
|
|
|
|
|
this.lineTitle = '槽号：' + row.slotNo + ' 检测成分：氰化铜'
|
|
|
|
|
//调用方法
|
|
|
|
|
let days = this.getDateCount(data[0], data[1]);
|
|
|
|
|
console.log(days);
|
|
|
|
|
this.xData = days.dates
|
|
|
|
|
this.testData = []
|
|
|
|
|
this.maxData = []
|
|
|
|
|
this.minData = []
|
|
|
|
|
for (let i = 0; i < days.totalDays; i++) {
|
|
|
|
|
// 生成一个介于0到99之间的随机整数（包括0和99）
|
|
|
|
|
let randomInteger = Math.floor(Math.random() * 30);
|
|
|
|
|
// 将随机整数添加到数组中
|
|
|
|
|
this.testData.push(randomInteger);
|
|
|
|
|
this.minData.push(5);
|
|
|
|
|
this.maxData.push(30);
|
|
|
|
|
}
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.createBarChart()
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
createBarChart() {
|
|
|
|
|
const mapBoxEchart = this.$echarts.init(this.$refs.lineChart);
|
|
|
|
|
const option = {
|
|
|
|
|
title: {
|
|
|
|
|
text: this.lineTitle,
|
|
|
|
|
left: "center",
|
|
|
|
|
},
|
|
|
|
|
legend: {
|
|
|
|
|
show: true,
|
|
|
|
|
orient: "vertical",
|
|
|
|
|
right: 'right'
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
containLabel: true,
|
|
|
|
|
left: 20,
|
|
|
|
|
right: 20,
|
|
|
|
|
bottom: '1%',
|
|
|
|
|
top: '15%'
|
|
|
|
|
},
|
|
|
|
|
tooltip: {
|
|
|
|
|
// 提示框组件
|
|
|
|
|
trigger: 'axis', // 触发类型 柱状图
|
|
|
|
|
axisPointer: { type: 'shadow' } // 触发效果 移动上去 背景效果
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
axisLabel: {
|
|
|
|
|
color: '#000',
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
interval: 0
|
|
|
|
|
},
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: true
|
|
|
|
|
},
|
|
|
|
|
data: this.xData,
|
|
|
|
|
type: 'category'
|
|
|
|
|
},
|
|
|
|
|
yAxis: {
|
|
|
|
|
axisLabel: {
|
|
|
|
|
color: '#000',
|
|
|
|
|
fontSize: 14
|
|
|
|
|
},
|
|
|
|
|
max: this.maxData[0] + 10,
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: true
|
|
|
|
|
},
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: true
|
|
|
|
|
},
|
|
|
|
|
name: ''
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: '上限', // 名称
|
|
|
|
|
data: this.maxData,
|
|
|
|
|
type: 'line',
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: '#6480e1'
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
show: false,
|
|
|
|
|
position: 'top',
|
|
|
|
|
color: '#000'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '下限', // 名称
|
|
|
|
|
data: this.minData,
|
|
|
|
|
type: 'line',
|
|
|
|
|
smooth: true,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: '#c0db50'
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
show: false,
|
|
|
|
|
color: '#fff'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '检测值', // 名称
|
|
|
|
|
data: this.testData,
|
|
|
|
|
type: 'line',
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: '#6a6d87'
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
show: false,
|
|
|
|
|
color: '#fff'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 使用制定的配置项和数据显示图表
|
|
|
|
|
mapBoxEchart.setOption(option, true);
|
|
|
|
|
// // 窗口大小改变时，重新渲染图表
|
|
|
|
|
window.addEventListener('resize', function () {
|
|
|
|
|
mapBoxEchart.resize();
|
|
|
|
|
}, 200);
|
|
|
|
|
},
|
|
|
|
|
// 多选
|
|
|
|
|
selectionChange(list) {
|
|
|
|
|
this.selectionList = list;
|
|
|
|
|
},
|
|
|
|
|
selectionClear() {
|
|
|
|
|
this.selectionList = [];
|
|
|
|
|
this.$refs.crud.toggleSelection();
|
|
|
|
|
},
|
|
|
|
|
rowUpdate(row, index, done, loading) {
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
rowSave(row, done, loading) {
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
searchReset() {
|
|
|
|
|
this.query = {};
|
|
|
|
|
this.onLoad(this.page);
|
|
|
|
|
},
|
|
|
|
|
searchChange(params, done) {
|
|
|
|
|
this.query = params;
|
|
|
|
|
this.page.currentPage = 1;
|
|
|
|
|
this.onLoad(this.page, params);
|
|
|
|
|
done();
|
|
|
|
|
},
|
|
|
|
|
rowDel(row, index, done) {
|
|
|
|
|
this.$confirm('确定将选择数据删除?', {
|
|
|
|
|
confirmButtonText: '确定',
|
|
|
|
|
cancelButtonText: '取消',
|
|
|
|
|
type: 'warning',
|
|
|
|
|
}).then(() => {
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
handleDelete() {
|
|
|
|
|
if (this.selectionList.length === 0) {
|
|
|
|
|
this.$message.warning('请选择至少一条数据');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
this.$confirm('确定将选择数据删除?', {
|
|
|
|
|
confirmButtonText: '确定',
|
|
|
|
|
cancelButtonText: '取消',
|
|
|
|
|
type: 'warning',
|
|
|
|
|
}).then(() => {
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
currentChange(currentPage) {
|
|
|
|
|
this.page.currentPage = currentPage;
|
|
|
|
|
},
|
|
|
|
|
sizeChange(pageSize) {
|
|
|
|
|
this.page.pageSize = pageSize;
|
|
|
|
|
},
|
|
|
|
|
refreshChange() {
|
|
|
|
|
this.onLoad(this.page, this.query);
|
|
|
|
|
},
|
|
|
|
|
onLoad() {
|
|
|
|
|
this.loading = true
|
|
|
|
|
this.data = [
|
|
|
|
|
{$cellEdit: true, id: '1', lineName: '氰化钠', wcName: '化学镀镍作业中心', slotNo: '#21', testName: '氰化钠', lineTime: '2016-10-15 ~ 2016-10-21', createTime: '2016-09-21 08:50:08', createUser: '张三' },
|
|
|
|
|
{$cellEdit: true, id: '2', lineName: '氰化钠', wcName: '化学镀镍作业中心', slotNo: '#21', testName: '氰化钠', lineTime: '2016-10-15 ~ 2016-10-21', createTime: '2016-09-21 08:50:08', createUser: '张三' },
|
|
|
|
|
{$cellEdit: true, id: '3', lineName: '氰化钠', wcName: '化学镀镍作业中心', slotNo: '#21', testName: '氰化钠', lineTime: '2016-10-10 ~ 2016-10-21', createTime: '2016-09-21 08:50:08', createUser: '张三' },
|
|
|
|
|
{$cellEdit: true, id: '4', lineName: '氰化钠', wcName: '化学镀镍作业中心', slotNo: '#21', testName: '氰化钠', lineTime: '2016-10-18 ~ 2016-10-21', createTime: '2016-09-21 08:50:08', createUser: '张三' },
|
|
|
|
|
]
|
|
|
|
|
this.page.total = this.data.length
|
|
|
|
|
this.loading = false
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.selectionClear()
|
|
|
|
|
}, 500)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style></style>
|
