You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1125 lines
37 KiB
1125 lines
37 KiB
<template> |
|
<basic-container> |
|
<!-- 记录仪管理 --> |
|
<el-tabs v-model="tabPosition" class="demo-tabs" @tab-change="tabPositionChange"> |
|
<el-tab-pane label="记录仪" name="recorder"> |
|
<avue-crud |
|
:height="460" |
|
:option="option" |
|
:table-loading="loading" |
|
:data="data" |
|
v-model="form" |
|
v-model:page="recorderPage" |
|
ref="crud" |
|
:before-open="beforeOpen" |
|
@row-del="rowDel" |
|
@row-save="rowSave" |
|
@row-update="rowUpdate" |
|
@search-change="searchChange" |
|
@search-reset="searchReset" |
|
@selection-change="selectionChange" |
|
@current-change="currentChange" |
|
@size-change="sizeChange" |
|
@refresh-change="refreshChange" |
|
|
|
> |
|
<template #menu="{ row, index, size }"> |
|
<el-button type="text" @click="showDetail(row)" v-if="tabPosition == 'recorder'" |
|
>明细</el-button |
|
> |
|
<el-button type="text" @click="rowEdit(row, index)">修改</el-button> |
|
<el-button type="text" @click="deleteRow(row)" v-if="tabPosition == 'recorder'" |
|
>删除</el-button |
|
> |
|
</template> |
|
<template #menu-left> |
|
<!-- <el-button |
|
type="primary" |
|
icon="el-icon-plus" |
|
@click="handleAdd" |
|
v-if="tabPosition == 'recorderLineSetting'" |
|
>新增</el-button |
|
> --> |
|
<el-button |
|
type="primary" |
|
icon="el-icon-setting" |
|
@click="setCycle" |
|
v-if="tabPosition == 'recorder'" |
|
>打包周期配置</el-button |
|
> |
|
<el-button |
|
type="danger" |
|
@click="handleDelete" |
|
plain |
|
v-if="tabPosition == 'recorderLineSetting'" |
|
>删除</el-button |
|
> |
|
</template> |
|
</avue-crud> |
|
</el-tab-pane> |
|
<el-tab-pane label="记录仪曲线配置" name="recorderLineSetting"> |
|
<avue-crud |
|
:height="460" |
|
:option="option" |
|
:table-loading="loading" |
|
:data="data" |
|
v-model="form" |
|
v-model:page="recorderLinePage" |
|
ref="crud" |
|
@row-del="rowDel" |
|
@row-save="rowSave" |
|
@row-update="rowUpdate" |
|
@search-change="searchChange" |
|
@search-reset="searchReset" |
|
@selection-change="selectionChange" |
|
@current-change="currentChange" |
|
@size-change="sizeChange" |
|
@refresh-change="refreshChange" |
|
> |
|
<template #menu="{ row, index, size }"> |
|
<el-button type="text" @click="showDetail(row)" v-if="tabPosition == 'recorder'" |
|
>明细</el-button |
|
> |
|
<el-button type="text" @click="rowEdit(row, index)">修改</el-button> |
|
<el-button type="text" @click="deleteRow(row)" v-if="tabPosition == 'recorder'" |
|
>删除</el-button |
|
> |
|
</template> |
|
<template #menu-left> |
|
<el-button |
|
type="primary" |
|
@click="handleAdd" |
|
v-if="tabPosition == 'recorderLineSetting'" |
|
>新增</el-button |
|
> |
|
<el-button |
|
type="primary" |
|
icon="el-icon-setting" |
|
@click="setCycle" |
|
v-if="tabPosition == 'recorder'" |
|
>打包周期配置</el-button |
|
> |
|
<el-button |
|
type="danger" |
|
@click="handleDelete" |
|
plain |
|
v-if="tabPosition == 'recorderLineSetting'" |
|
>批量删除</el-button |
|
> |
|
</template> |
|
</avue-crud> |
|
</el-tab-pane> |
|
<el-tab-pane label="记录仪历史曲线" name="recorderHistoryLine"> |
|
<el-form |
|
:inline="true" |
|
:model="searchForm" |
|
:rules="searchRules" |
|
ref="searchForm" |
|
class="demo-form-inline" |
|
> |
|
<el-form-item label="设备编码" prop="code"> |
|
<el-input v-model="searchForm.code" placeholder="设备编码"></el-input> |
|
</el-form-item> |
|
<el-form-item label="统计日期" prop="queryDate"> |
|
<el-date-picker |
|
v-model="searchForm.queryDate" |
|
type="daterange" |
|
format="YYYY-MM-DD" |
|
value-format="YYYY-MM-DD" |
|
range-separator="至" |
|
start-placeholder="开始日期" |
|
end-placeholder="结束日期" |
|
> |
|
</el-date-picker> |
|
<!-- <el-date-picker v-model="form.queryDate" :default-time="['00:00:00', '23:59:59']" type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" /> --> |
|
</el-form-item> |
|
<el-form-item> |
|
<el-button type="primary" @click="onSubmit">查询</el-button> |
|
</el-form-item> |
|
</el-form> |
|
<div style="width: 100%; height: 70vh"> |
|
<div style="width: 100%; height: 100%" ref="historyCurve"></div> |
|
</div> |
|
</el-tab-pane> |
|
</el-tabs> |
|
<el-dialog append-to-body title="详情" width="80%" v-model="detailDialog" > |
|
<avue-crud |
|
class="detail-crud-option" |
|
:option="detailOption" |
|
:table-loading="detailLoading" |
|
:data="detailData" |
|
v-model="detailForm" |
|
v-model:page="detailPage" |
|
@current-change="detailCurrentChange" |
|
@size-change="detailSizeChange" |
|
> |
|
</avue-crud> |
|
<template #footer> |
|
<span class="dialog-footer"> |
|
<el-button @click="detailDialog = false">取 消</el-button> |
|
</span> |
|
</template> |
|
</el-dialog> |
|
<el-dialog append-to-body title="打包周期配置" v-model="settingDialog"> |
|
<el-form ref="setForm" :model="setForm" :rules="setRules" label-width="120px"> |
|
<el-form-item label="记录仪打包周期" prop="cpcQuantity"> |
|
<!-- <el-input placeholder="请输入记录仪打包周期" v-model="setForm.cpcQuantity"></el-input> --> |
|
<el-input-number |
|
v-model="setForm.cpcQuantity" |
|
controls-position="right" |
|
@change="handleChange" |
|
:min="1" |
|
></el-input-number> |
|
</el-form-item> |
|
<el-form-item prop="cpcUnit"> |
|
<el-radio-group v-model="setForm.cpcUnit" size="small"> |
|
<el-radio :label="0" border>年</el-radio> |
|
<el-radio :label="1" border>月</el-radio> |
|
<el-radio :label="2" border>日</el-radio> |
|
<el-radio :label="3" border>时</el-radio> |
|
<el-radio :label="4" border>分</el-radio> |
|
<el-radio :label="5" border>秒</el-radio> |
|
</el-radio-group> |
|
</el-form-item> |
|
</el-form> |
|
<template #footer> |
|
<span class="dialog-footer"> |
|
<el-button @click="settingDialog = false">取 消</el-button> |
|
<el-button type="primary" @click="submitCycle">确 定</el-button> |
|
</span> |
|
</template> |
|
</el-dialog> |
|
<el-dialog append-to-body title="新增" v-model="addDialog" width="80%"> |
|
<div style="display: flex; align-items: center" v-if="addType == 'add'"> |
|
<span>设备编号</span> |
|
<!-- <el-input style="width: 300px; margin-left: 10px" v-model="deviceCode" ></el-input> --> |
|
<el-select |
|
style="width: 300px; margin-left: 10px" |
|
v-model="deviceCode" |
|
remote |
|
placeholder="请选择" |
|
:remote-method="remoteMethod" |
|
reserve-keyword |
|
clearable |
|
filterable |
|
:loading="selectLoading" |
|
> |
|
<el-option |
|
v-for="item in codeArr" |
|
:key="item.id" |
|
:label="item.crtCode" |
|
:value="item.crtCode" |
|
/> |
|
</el-select> |
|
</div> |
|
<div style="margin: 10px 0" v-if="addType == 'add'"> |
|
<el-button type="primary" @click="insertEvent()">插入一行</el-button> |
|
<el-button plain type="danger" @click="remove">删除选择行</el-button> |
|
</div> |
|
<el-form |
|
ref="tableForm" |
|
:model="lineForm" |
|
:rules="formRules" |
|
label-width="0px" |
|
> |
|
<!-- 全局错误提示 --> |
|
<div v-if="formError" class="error-message" style="color: #f56c6c; margin-bottom: 10px;"> |
|
{{ formError }} |
|
</div> |
|
<el-table :data="lineForm.settingData" @select="selectChange"> |
|
<el-table-column type="selection"></el-table-column> |
|
<el-table-column label="参数名称" prop="name" align="center"> |
|
<template #header> |
|
<span><i style="color: red">*</i>参数名称</span> |
|
</template> |
|
<template #default="scope"> |
|
<el-form-item :prop="`settingData[${scope.$index}].name`" :rules="formRules.name"> |
|
<el-input style="margin-top:10px;" v-model="scope.row.name"></el-input> |
|
</el-form-item> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="参数显示名称" prop="showName" align="center"> |
|
<template #default="scope"> |
|
<el-form-item :prop="`settingData[${scope.$index}].showName`" :rules="formRules.showName"> |
|
<el-input style="margin-top:10px;" v-model="scope.row.showName"></el-input> |
|
</el-form-item> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="是否显示曲线图" prop="showGraph" align="center"> |
|
<template #default="scope"> |
|
<el-form-item :prop="`settingData[${scope.$index}].showGraph`" :rules="formRules.showGraph"> |
|
<div style="width:100%;display:flex;justify-content: center;"> |
|
<el-switch |
|
style="margin-top:10px;" |
|
v-model="scope.row.showGraph" |
|
active-color="#13ce66" |
|
inactive-color="#ff4949" |
|
> |
|
</el-switch> |
|
</div> |
|
</el-form-item> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="曲线X轴间隔" prop="crcX" align="center"> |
|
<template #default="scope"> |
|
<!-- <el-input v-model="scope.row.crcX"></el-input> --> |
|
<el-form-item :prop="`settingData[${scope.$index}].crcX`" :rules="formRules.crcX"> |
|
<el-input |
|
style="margin-top:10px;" |
|
v-model.number="scope.row.crcX" |
|
oninput="scope.row.crcX=scope.row.crcX.replace(/[^\d]/g,'')" |
|
></el-input> |
|
</el-form-item> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
</el-form> |
|
<template #footer> |
|
<span class="dialog-footer"> |
|
<el-button @click="closeDialog">取 消</el-button> |
|
<el-button type="primary" @click="handleSave">确 定</el-button> |
|
</span> |
|
</template> |
|
</el-dialog> |
|
</basic-container> |
|
</template> |
|
|
|
<script> |
|
import recorderColumnData from './js/recorderColumnData'; |
|
import { getRecorderList,addRecorder,updateRecorder,deleteRecorder,getRecorderDetail,addpackCycle, |
|
getpackCycleList,updatepackCycle,getRecorderLineSetting,addRecorderLineSetting,getRecorderLineSettingDetail, |
|
updateRecorderLineSetting,deleteRecorderLineSetting,getRecorderHistoryLine,getRecorderHistoryDetail } from '@/api/equiptManagement/recorderList'; |
|
export default { |
|
data() { |
|
return { |
|
searchForm: {}, |
|
searchRules: { |
|
code: [{ required: true, message: '请输入设备编码', trigger: 'blur' }], |
|
queryDate: [{ required: true, message: '请选择统计日期', trigger: 'blur' }], |
|
}, |
|
codeArr:[], |
|
formError:'', |
|
deviceCode: '', |
|
settingData: [], |
|
tabPosition: 'recorder', |
|
loading: false, |
|
data: [], |
|
form: {}, |
|
lineForm:{ |
|
settingData:[] |
|
}, |
|
detailDialog: false, |
|
detailData: [], |
|
settingDialog: false, |
|
recorderPage: { |
|
pageSize: 10, |
|
currentPage: 1, |
|
total: 0, |
|
}, |
|
recorderLinePage: { |
|
pageSize: 10, |
|
currentPage: 1, |
|
total: 0, |
|
}, |
|
addType: 'add', |
|
addDialog: false, |
|
setForm: {}, |
|
setRules: { |
|
cpcQuantity: [{ required: true, message: '请输入记录仪打包周期', trigger: 'blur' }], |
|
}, |
|
option: { |
|
columnSort: true, |
|
tip: false, |
|
height: 'auto', |
|
align: 'center', |
|
calcHeight: 32, |
|
simplePage: false, |
|
searchShow: true, |
|
searchMenuSpan: 6, |
|
searchIcon: true, |
|
searchIndex: 3, |
|
tree: false, |
|
border: true, |
|
index: false, |
|
selection: false, |
|
viewBtn: false, |
|
delBtn: false, |
|
editBtn: false, |
|
addBtnIcon: ' ', |
|
viewBtnIcon: ' ', |
|
delBtnIcon: ' ', |
|
editBtnIcon: ' ', |
|
addBtn: false, |
|
labelWidth: 120, |
|
searchLabelWidth: 120, |
|
menu: true, |
|
menuWidth: 200, |
|
dialogWidth: 600, |
|
dialogClickModal: false, |
|
searchEnter: true, |
|
excelBtn: true, |
|
gridBtn: false, |
|
searchShowBtn: false, |
|
showOverflowTooltip: true, |
|
searchLabelPosition: 'left', |
|
searchLabelPosition: 'left', |
|
searchGutter: 24, |
|
searchSpan: 6, |
|
menuAlign: 'left', |
|
gridBtn: false, |
|
searchMenuPosition: 'right', |
|
column: [], |
|
}, |
|
detailOption: { |
|
columnSort: true, |
|
tip: false, |
|
height: 450, |
|
align: 'center', |
|
calcHeight: 32, |
|
simplePage: false, |
|
searchShow: true, |
|
searchMenuSpan: 6, |
|
searchIcon: true, |
|
searchIndex: 3, |
|
tree: false, |
|
border: true, |
|
index: true, |
|
selection: false, |
|
viewBtn: false, |
|
delBtn: false, |
|
editBtn: false, |
|
delBtnIcon: ' ', |
|
addBtn: false, |
|
labelWidth: 120, |
|
searchLabelWidth: 120, |
|
menu: false, |
|
menuWidth: 200, |
|
dialogWidth: 600, |
|
dialogClickModal: false, |
|
searchEnter: true, |
|
excelBtn: false, |
|
gridBtn: false, |
|
refreshBtn:false, |
|
columnBtn:false, |
|
searchShowBtn: false, |
|
showOverflowTooltip: true, |
|
searchLabelPosition: 'left', |
|
searchLabelPosition: 'left', |
|
searchGutter: 24, |
|
searchSpan: 6, |
|
menuAlign: 'left', |
|
gridBtn: false, |
|
searchMenuPosition: 'right', |
|
column: [ |
|
{ |
|
label: '记录仪', |
|
prop: 'recorder', |
|
span: 24, |
|
labelWidth: 140, |
|
addDisplay: false, |
|
editDisplay: false, |
|
overflow: true, |
|
}, |
|
{ |
|
label: '使用时间', |
|
prop: 'recordDate', |
|
span: 24, |
|
labelWidth: 140, |
|
addDisplay: false, |
|
editDisplay: false, |
|
overflow: true, |
|
}, |
|
{ |
|
label: '数据信息', |
|
prop: 'memo', |
|
span: 24, |
|
labelWidth: 140, |
|
addDisplay: false, |
|
editDisplay: false, |
|
overflow: true, |
|
}, |
|
], |
|
}, |
|
detailPage: { |
|
pageSize: 10, |
|
currentPage: 1, |
|
total: 0, |
|
}, |
|
lineQuery:{}, |
|
selectLoading:false, |
|
detailForm: {}, |
|
detailId:null, |
|
selectionList:[], |
|
// 统一校验规则：支持数组项校验 |
|
formRules: { |
|
// 表格数据数组的整体校验（可选：如最少1行数据） |
|
settingData: [ |
|
{ |
|
required: true, |
|
message: '请至少添加一行数据', |
|
trigger: 'submit', |
|
type: 'array' // 明确类型为数组 |
|
}, |
|
{ |
|
validator: (rule, value, callback) => { |
|
if (value.length === 0) { |
|
callback(new Error('请至少添加一行数据')); |
|
} else { |
|
callback(); |
|
} |
|
}, |
|
trigger: 'submit' |
|
} |
|
], |
|
|
|
// 数组中每一项的 name 字段校验 |
|
name: [ |
|
{ required: true, message: '请输入参数名称', trigger: ['change', 'submit'] } |
|
], |
|
} |
|
}; |
|
}, |
|
mounted() { |
|
this.tabPositionChange('recorder'); |
|
// this.option.column = recorderColumnData[this.tabPosition]; |
|
}, |
|
methods: { |
|
// 查询 |
|
onSubmit() { |
|
this.$refs.searchForm.validate(valid => { |
|
if (valid) { |
|
let params = { |
|
code: this.searchForm.code, |
|
startDate: this.searchForm.queryDate[0], |
|
endDate: this.searchForm.queryDate[1] |
|
} |
|
getRecorderHistoryLine(params).then(res =>{ |
|
console.log('res-----------',res) |
|
let chartData = { |
|
yArray:res.data.data.yarray, |
|
crcX:res.data.data.x, |
|
xData:res.data.data.xdata |
|
} |
|
this.$nextTick(() => { |
|
this.setEchart(chartData); |
|
}); |
|
}) |
|
// let chartData = { |
|
// yArray: [ |
|
// { |
|
// showName: '压力', |
|
// yData: [ |
|
// 11.75, 1.0, 0.15, 1.9, 11.75, 0.15, 1.75, 1.9, 1.0, 1.75, 1.0, 0.15, 0.15, 1.9, |
|
// 1.0, 1.75, 1.9, 11.75, 1.75, 11.75, 11.75, 1.0, 0.15, 1.9, 11.75, 0.15, 1.75, 1.9, |
|
// 1.0, 1.75, 1.0, 0.15, 0.15, 1.9, 1.0, 1.75, 1.9, 11.75, 1.75, 11.75, 11.75, 1.0, |
|
// 0.15, 1.9, 11.75, 0.15, 1.75, 1.9, 1.0, 1.75, 1.0, 0.15, 0.15, 1.9, 1.0, 1.75, |
|
// 1.9, 11.75, 1.75, 11.75, 11.75, 1.0, 0.15, 1.9, 11.75, 0.15, 1.75, 1.9, 1.0, 1.75, |
|
// 1.0, 0.15, 0.15, 1.9, 1.0, 1.75, 1.9, 11.75, 1.75, 11.75, |
|
// ], |
|
// crcY: 0.25, |
|
// }, |
|
// { |
|
// showName: '温度', |
|
// yData: [ |
|
// 85.0, 500.0, 30.0, 500.0, 85.0, 30.0, 65.0, 500.0, 500.0, 65.0, 500.0, 30.0, 30.0, |
|
// 500.0, 500.0, 65.0, 500.0, 85.0, 65.0, 85.0, 85.0, 500.0, 30.0, 500.0, 85.0, 30.0, |
|
// 65.0, 500.0, 500.0, 65.0, 500.0, 30.0, 30.0, 500.0, 500.0, 65.0, 500.0, 85.0, |
|
// 65.0, 85.0, 85.0, 500.0, 30.0, 500.0, 85.0, 30.0, 65.0, 500.0, 500.0, 65.0, 500.0, |
|
// 30.0, 30.0, 500.0, 500.0, 65.0, 500.0, 85.0, 65.0, 85.0, 85.0, 500.0, 30.0, 500.0, |
|
// 85.0, 30.0, 65.0, 500.0, 500.0, 65.0, 500.0, 30.0, 30.0, 500.0, 500.0, 65.0, |
|
// 500.0, 85.0, 65.0, 85.0, |
|
// ], |
|
// crcY: 65.0, |
|
// }, |
|
// { |
|
// showName: '低真空', |
|
// yData: [ |
|
// 12.0, 7.8, 1.0, 7.5, 12.0, 1.0, 6.0, 7.5, 7.8, 6.0, 7.8, 1.0, 1.0, 7.5, 7.8, 6.0, |
|
// 7.5, 12.0, 6.0, 12.0, 12.0, 7.8, 1.0, 7.5, 12.0, 1.0, 6.0, 7.5, 7.8, 6.0, 7.8, |
|
// 1.0, 1.0, 7.5, 7.8, 6.0, 7.5, 12.0, 6.0, 12.0, 12.0, 7.8, 1.0, 7.5, 12.0, 1.0, |
|
// 6.0, 7.5, 7.8, 6.0, 7.8, 1.0, 1.0, 7.5, 7.8, 6.0, 7.5, 12.0, 6.0, 12.0, 12.0, 7.8, |
|
// 1.0, 7.5, 12.0, 1.0, 6.0, 7.5, 7.8, 6.0, 7.8, 1.0, 1.0, 7.5, 7.8, 6.0, 7.5, 12.0, |
|
// 6.0, 12.0, |
|
// ], |
|
// crcY: 1.0, |
|
// }, |
|
// { |
|
// showName: '高真空', |
|
// yData: [ |
|
// 1.875, 0.875, 0.101, 0.375, 1.875, 0.101, 0.875, 0.375, 0.875, 0.875, 0.875, |
|
// 0.101, 0.101, 0.375, 0.875, 0.875, 0.375, 1.875, 0.875, 1.875, 1.875, 0.875, |
|
// 0.101, 0.375, 1.875, 0.101, 0.875, 0.375, 0.875, 0.875, 0.875, 0.101, 0.101, |
|
// 0.375, 0.875, 0.875, 0.375, 1.875, 0.875, 1.875, 1.875, 0.875, 0.101, 0.375, |
|
// 1.875, 0.101, 0.875, 0.375, 0.875, 0.875, 0.875, 0.101, 0.101, 0.375, 0.875, |
|
// 0.875, 0.375, 1.875, 0.875, 1.875, 1.875, 0.875, 0.101, 0.375, 1.875, 0.101, |
|
// 0.875, 0.375, 0.875, 0.875, 0.875, 0.101, 0.101, 0.375, 0.875, 0.875, 0.375, |
|
// 1.875, 0.875, 1.875, |
|
// ], |
|
// crcY: 0.125, |
|
// }, |
|
// ], |
|
// xData: [ |
|
// '2024-03-16 12:01:17.0', |
|
// '2024-03-16 12:13:11.0', |
|
// '2024-03-16 12:20:12.0', |
|
// '2024-03-16 12:20:25.0', |
|
// '2024-03-16 12:21:27.0', |
|
// '2024-03-16 12:30:00.0', |
|
// '2024-03-16 12:30:27.0', |
|
// '2024-03-16 12:40:15.0', |
|
// '2024-03-16 12:43:10.0', |
|
// '2024-03-16 12:50:17.0', |
|
// '2024-03-16 16:13:11.0', |
|
// '2024-03-16 16:20:12.0', |
|
// '2024-03-16 16:30:00.0', |
|
// '2024-03-16 16:40:15.0', |
|
// '2024-03-16 16:43:10.0', |
|
// '2024-03-16 16:50:17.0', |
|
// '2024-03-16 17:20:25.0', |
|
// '2024-03-16 17:21:27.0', |
|
// '2024-03-16 17:30:27.0', |
|
// '2024-03-16 17:41:17.0', |
|
// '2024-03-17 12:01:17.0', |
|
// '2024-03-17 12:13:11.0', |
|
// '2024-03-17 12:20:12.0', |
|
// '2024-03-17 12:20:25.0', |
|
// '2024-03-17 12:21:27.0', |
|
// '2024-03-17 12:30:00.0', |
|
// '2024-03-17 12:30:27.0', |
|
// '2024-03-17 12:40:15.0', |
|
// '2024-03-17 12:43:10.0', |
|
// '2024-03-17 12:50:17.0', |
|
// '2024-03-17 16:13:11.0', |
|
// '2024-03-17 16:20:12.0', |
|
// '2024-03-17 16:30:00.0', |
|
// '2024-03-17 16:40:15.0', |
|
// '2024-03-17 16:43:10.0', |
|
// '2024-03-17 16:50:17.0', |
|
// '2024-03-17 17:20:25.0', |
|
// '2024-03-17 17:21:27.0', |
|
// '2024-03-17 17:30:27.0', |
|
// '2024-03-17 17:41:17.0', |
|
// '2024-03-18 12:01:17.0', |
|
// '2024-03-18 12:13:11.0', |
|
// '2024-03-18 12:20:12.0', |
|
// '2024-03-18 12:20:25.0', |
|
// '2024-03-18 12:21:27.0', |
|
// '2024-03-18 12:30:00.0', |
|
// '2024-03-18 12:30:27.0', |
|
// '2024-03-18 12:40:15.0', |
|
// '2024-03-18 12:43:10.0', |
|
// '2024-03-18 12:50:17.0', |
|
// '2024-03-18 16:13:11.0', |
|
// '2024-03-18 16:20:12.0', |
|
// '2024-03-18 16:30:00.0', |
|
// '2024-03-18 16:40:15.0', |
|
// '2024-03-18 16:43:10.0', |
|
// '2024-03-18 16:50:17.0', |
|
// '2024-03-18 17:20:25.0', |
|
// '2024-03-18 17:21:27.0', |
|
// '2024-03-18 17:30:27.0', |
|
// '2024-03-18 17:41:17.0', |
|
// '2024-03-19 12:01:17.0', |
|
// '2024-03-19 12:13:11.0', |
|
// '2024-03-19 12:20:12.0', |
|
// '2024-03-19 12:20:25.0', |
|
// '2024-03-19 12:21:27.0', |
|
// '2024-03-19 12:30:00.0', |
|
// '2024-03-19 12:30:27.0', |
|
// '2024-03-19 12:40:15.0', |
|
// '2024-03-19 12:43:10.0', |
|
// '2024-03-19 12:50:17.0', |
|
// '2024-03-19 16:13:11.0', |
|
// '2024-03-19 16:20:12.0', |
|
// '2024-03-19 16:30:00.0', |
|
// '2024-03-19 16:40:15.0', |
|
// '2024-03-19 16:43:10.0', |
|
// '2024-03-19 16:50:17.0', |
|
// '2024-03-19 17:20:25.0', |
|
// '2024-03-19 17:21:27.0', |
|
// '2024-03-19 17:30:27.0', |
|
// '2024-03-19 17:41:17.0', |
|
// ], |
|
// crcX: 2, |
|
// }; |
|
// this.$nextTick(() => { |
|
// this.setEchart(chartData); |
|
// }); |
|
} |
|
}); |
|
}, |
|
setEchart(data) { |
|
if (data.xData.length == 0 || data.yArray.length == 0) { |
|
return this.$message.warning('暂无数据'); |
|
} |
|
const chart = this.$echarts.init(this.$refs.historyCurve); |
|
var colors = [ |
|
'#5793f3', |
|
'#d14a61', |
|
'#675bba', |
|
'#C502F3', |
|
'#0102F3', |
|
'#FF2366', |
|
'red', |
|
'orange', |
|
'green', |
|
'blue', |
|
'purple', |
|
'pink', |
|
'orange', |
|
'blue', |
|
]; |
|
const yAxis = []; |
|
const series = []; |
|
|
|
let offsetArr = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; |
|
|
|
const le = data.yArray.length; |
|
if (le >= 1 && le <= 2) { |
|
offsetArr = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; |
|
} else if (le >= 3 && le <= 4) { |
|
offsetArr = [70, 70, 10, 10, 0, 0, 0, 0, 0, 0]; |
|
} else if (le >= 5 && le <= 6) { |
|
offsetArr = [142, 142, 70, 70, 0, 0, 0, 0, 0, 0]; |
|
} else if (le >= 7 && le <= 8) { |
|
offsetArr = [203, 203, 140, 140, 70, 70, 0, 0, 0, 0]; |
|
} else if (le >= 9 && le <= 10) { |
|
offsetArr = [273, 273, 203, 203, 130, 130, 60, 60, 0, 0]; |
|
} |
|
for (var index = 0; index < le; index++) { |
|
if (index % 2 == 0) { |
|
yAxis.push({ |
|
type: 'value', |
|
name: data.yArray[index].showName, |
|
position: 'left', |
|
offset: offsetArr[le - index - 1], |
|
|
|
axisLine: { |
|
lineStyle: { |
|
color: colors[index], |
|
}, |
|
}, |
|
}); |
|
} else { |
|
yAxis.push({ |
|
type: 'value', |
|
name: data.yArray[index].showName, |
|
position: 'right', |
|
offset: offsetArr[le - index], |
|
|
|
axisLine: { |
|
lineStyle: { |
|
color: colors[index], |
|
}, |
|
}, |
|
}); |
|
} |
|
series.push({ |
|
name: data.yArray[index].showName, |
|
type: 'line', |
|
smooth: true, |
|
showSymbol: false, |
|
yAxisIndex: index, |
|
data: data.yArray[index].yData, |
|
}); |
|
} |
|
const option = { |
|
color: colors, |
|
toolbox: { |
|
show: true, |
|
right: '4%', |
|
top: '-1%', |
|
feature: { |
|
saveAsImage: { show: true }, // 保存图表 |
|
}, |
|
}, |
|
tooltip: { |
|
trigger: 'axis', |
|
axisPointer: { type: 'cross' }, |
|
}, |
|
grid: { |
|
top: '10%', |
|
right: parseInt((le + 1) / 2) * 5 + '%', |
|
left: parseInt((le + 1) / 2) * 5 + '%', |
|
}, |
|
xAxis: [ |
|
{ |
|
type: 'category', |
|
axisTick: { |
|
alignWithLabel: true, |
|
}, |
|
data: data.xData, |
|
boundaryGap: false, |
|
interval: 2, // 步长 |
|
axisLabel: { |
|
formatter: function (value, index) { |
|
if (data.crcX > 1) { |
|
if (parseInt(index % data.crcX) == 0) { |
|
return value; |
|
} else { |
|
return ''; |
|
} |
|
} |
|
return value; |
|
}, |
|
rotate: 25, |
|
}, |
|
}, |
|
], |
|
yAxis: yAxis, |
|
series: series, |
|
}; |
|
|
|
// 使用制定的配置项和数据显示图表 |
|
chart.setOption(option, true); |
|
// 图表自适应 |
|
window.addEventListener('resize', function () { |
|
chart.resize(); |
|
}); |
|
}, |
|
searchChange(params, done){ |
|
if (this.tabPosition == "recorder") { |
|
this.query = params; |
|
this.query.crtCode = this.query.recorder |
|
this.recorderPage.currentPage = 1; |
|
this.getRecorder() |
|
done() |
|
}else if(this.tabPosition == 'recorderLineSetting'){ |
|
this.lineQuery = params; |
|
this.recorderLinePage.currentPage = 1 |
|
this.getRecorderLine() |
|
done() |
|
} |
|
}, |
|
remoteMethod(query) { |
|
if (query) { |
|
this.selectLoading = true |
|
getRecorderList({ crtCode: query }).then(res =>{ |
|
this.codeArr = res.data.data.records |
|
this.selectLoading = false |
|
}) |
|
} else { |
|
getRecorderList({ crtCode: '' }).then(res =>{ |
|
this.codeArr = res.data.data.records |
|
this.selectLoading = false |
|
}) |
|
// this.codeArr = [] |
|
} |
|
}, |
|
searchReset(){ |
|
if (this.tabPosition == "recorder") { |
|
this.query = {} |
|
this.getRecorder() |
|
}else if(this.tabPosition == "recorderLineSetting"){ |
|
this.lineQuery = {} |
|
this.getRecorderLine() |
|
} |
|
}, |
|
handleDelete(){ |
|
if(this.selectionList.length == 0){ |
|
this.$message.error('请至少选择一条数据') |
|
return |
|
} |
|
this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", { |
|
confirmButtonText: "确认", |
|
cancelButtonText: "取消", |
|
type: "warning", |
|
}).then(() => { |
|
if(this.tabPosition == "recorderLineSetting"){ |
|
deleteRecorderLineSetting({ |
|
ids:this.selectionList.map(item => item.id).join(',') |
|
}).then(res =>{ |
|
if(res.data.code == 200){ |
|
this.$message.success('删除成功') |
|
this.getRecorderLine() |
|
} |
|
}) |
|
} |
|
|
|
}) |
|
|
|
}, |
|
selectionChange(list){ |
|
this.selectionList = list |
|
}, |
|
getRecorder() { |
|
getRecorderList({ |
|
current: this.recorderPage.currentPage, |
|
size: this.recorderPage.pageSize, |
|
...this.query, |
|
}).then(res => { |
|
this.data = res.data.data.records; |
|
this.recorderPage.total = res.data.data.total; |
|
}); |
|
}, |
|
getRecorderLine(){ |
|
getRecorderLineSetting({ |
|
current:this.recorderLinePage.currentPage, |
|
size:this.recorderLinePage.pageSize, |
|
...this.lineQuery |
|
}).then(res =>{ |
|
this.data = res.data.data.records |
|
this.recorderLinePage.total = res.data.data.total |
|
}) |
|
}, |
|
// tab切换 |
|
tabPositionChange(val) { |
|
console.log('val----------------',val); |
|
console.log('tabPosition----------------',this.tabPosition); |
|
this.option.column = recorderColumnData[val]; |
|
if (this.tabPosition == 'recorderLineSetting') { |
|
this.option.addBtn = false; |
|
this.option.menuAlign = "center" |
|
this.option.menuWidth = 70 |
|
this.option.selection = true |
|
this.getRecorderLine() |
|
} else if (this.tabPosition == 'recorder') { |
|
this.option.addBtn = true |
|
this.option.menuWidth = 150 |
|
this.option.selection = false |
|
this.getRecorder(); |
|
} |
|
}, |
|
insertEvent() { |
|
const record = { _select: false }; |
|
this.lineForm.settingData.push(record); |
|
}, |
|
selectChange(list, row) { |
|
row._select = !row._select; |
|
}, |
|
rowSave(row, done, loading){ |
|
if(this.tabPosition == "recorder"){ |
|
let params = { |
|
crtCode:row.crtCode, |
|
memo:row.memo |
|
} |
|
addRecorder(params).then(res =>{ |
|
if(res.data.code == 200){ |
|
this.$message.success('新增成功') |
|
done() |
|
this.getRecorder() |
|
} |
|
}).catch(err =>{ |
|
done() |
|
}) |
|
} |
|
}, |
|
rowUpdate(row, index, done, loading){ |
|
if(this.tabPosition == "recorder"){ |
|
let params = { |
|
id:row.id, |
|
crtCode:row.crtCode, |
|
memo:row.memo |
|
} |
|
updateRecorder(params).then(res =>{ |
|
if(res.data.code == 200){ |
|
this.$message.success('修改成功') |
|
done() |
|
this.getRecorder() |
|
} |
|
}) |
|
} |
|
}, |
|
beforeOpen(done, type){ |
|
console.log('type=============',type) |
|
if (['edit', 'view'].includes(type)) { |
|
getRecorderDetail({ id: this.form.id }).then(res => { |
|
this.form = res.data.data; |
|
done() |
|
}); |
|
}else if(['add'].includes(type)){ |
|
done() |
|
} |
|
}, |
|
remove() { |
|
let arr = this.lineForm.settingData.filter(item => item._select); |
|
if (arr.length != 0) { |
|
this.$confirm('确定将选择数据删除?', { |
|
confirmButtonText: '确定', |
|
cancelButtonText: '取消', |
|
type: 'warning', |
|
}).then(() => { |
|
if (this.rowId) { |
|
let deleteData = this.lineForm.settingData.filter(item => item._select); |
|
this.deleteTidArr = deleteData.filter(item => item.tidId); |
|
} |
|
let deleteArr = this.lineForm.settingData.filter(item => !item._select); |
|
this.lineForm.settingData = deleteArr; |
|
}); |
|
} else { |
|
this.$message.error('请至少选择一条数据进行操作！'); |
|
} |
|
}, |
|
closeDialog(){ |
|
this.formError = '' |
|
this.$refs.tableForm?.resetFields(); |
|
this.lineForm.settingData = [] |
|
this.addDialog = false |
|
}, |
|
handleSave() { |
|
this.formError = ''; |
|
if(this.deviceCode == '' && this.addType == 'add'){ |
|
this.$message.error('设备编码不能为空') |
|
return |
|
} |
|
|
|
// 调用单个 Form 的校验方法 |
|
this.$refs.tableForm.validate((isValid, invalidFields) => { |
|
if (!isValid) { |
|
// 校验失败：显示提示并滚动到第一个错误字段 |
|
this.formError = '存在未完善的字段，请检查表格中的红色提示'; |
|
|
|
this.$nextTick(() => { |
|
// 找到第一个错误字段并滚动到视图 |
|
const firstError = document.querySelector('.el-form-item.is-error'); |
|
if (firstError) { |
|
firstError.scrollIntoView({ behavior: 'smooth', block: 'center' }); |
|
} |
|
}); |
|
return; |
|
} |
|
this.lineForm.settingData.map(item =>{ |
|
item.code = this.addType == 'add' ? this.deviceCode : item.code |
|
item.showGraph = item.showGraph == true ? 1 : 0 |
|
}) |
|
if(this.addType == 'add'){ |
|
addRecorderLineSetting({ |
|
code:this.deviceCode, |
|
recorderCompareEntities:this.lineForm.settingData |
|
}).then(res =>{ |
|
if(res.data.code == 200){ |
|
this.$message.success('新增成功') |
|
this.getRecorderLine() |
|
this.addDialog = false; |
|
} |
|
}) |
|
}else{ |
|
updateRecorderLineSetting({...this.lineForm.settingData[0]}).then(res =>{ |
|
if(res.data.code == 200){ |
|
this.$message.success('修改成功') |
|
this.getRecorderLine() |
|
this.addDialog = false; |
|
} |
|
}) |
|
} |
|
|
|
// this.addDialog = false; |
|
}) |
|
}, |
|
rowEdit(row, index) { |
|
if (this.tabPosition == 'recorder') { |
|
this.$refs.crud.rowEdit(row, index); |
|
} else if (this.tabPosition == 'recorderLineSetting') { |
|
this.lineForm.settingData = [] |
|
this.addType = 'edit'; |
|
getRecorderLineSettingDetail({ |
|
id:row.id |
|
}).then(res =>{ |
|
console.log('res00000000000000000',res) |
|
res.data.data.showGraph = res.data.data.showGraph == 1 ? true : false |
|
this.lineForm.settingData[0] = res.data.data |
|
setTimeout(() =>{ |
|
this.addDialog = true; |
|
},100) |
|
}) |
|
} |
|
}, |
|
showDetail(row) { |
|
// this.detailId = row.id; |
|
this.detailId = row.crtCode; |
|
this.loadData(row); |
|
// getRecorderDetail({id:row.id}).then(res =>{ |
|
// console.log('res----------------',res) |
|
// }) |
|
}, |
|
setCycle() { |
|
getpackCycleList({ |
|
current:1, |
|
size:10 |
|
}).then(res =>{ |
|
this.setForm = res.data.data.records.length > 0 ? res.data.data.records[0] : {} |
|
this.settingDialog = true; |
|
}) |
|
}, |
|
handleAdd() { |
|
this.addType = 'add'; |
|
this.addDialog = true; |
|
}, |
|
deleteRow(row) { |
|
this.$confirm('确定删除本条数据?', { |
|
confirmButtonText: '确定', |
|
cancelButtonText: '取消', |
|
type: 'warning', |
|
}).then(() => { |
|
if(this.tabPosition == 'recorder'){ |
|
deleteRecorder({ids:row.id}).then(res => { |
|
if(res.data.code == 200){ |
|
this.$message.success('删除成功') |
|
this.getRecorder() |
|
} |
|
}); |
|
} |
|
}); |
|
}, |
|
submitCycle() { |
|
this.$refs.setForm.validate(valid => { |
|
if (valid) { |
|
if(!this.setForm.id){ |
|
addpackCycle(this.setForm).then(res => { |
|
if(res.data.code == 200){ |
|
this.$message.success('保存成功') |
|
this.settingDialog = false; |
|
} |
|
}); |
|
}else{ |
|
updatepackCycle(this.setForm).then(res =>{ |
|
if(res.data.code == 200){ |
|
this.$message.success('保存成功') |
|
this.settingDialog = false; |
|
} |
|
}) |
|
} |
|
|
|
} |
|
}); |
|
}, |
|
loadData(row) { |
|
getRecorderHistoryDetail({ |
|
// id:this.detailId, |
|
recorder:this.detailId, |
|
current:this.detailPage.currentPage, |
|
size:this.detailPage.pageSize |
|
}).then(res =>{ |
|
console.log('res',res) |
|
this.detailData = res.data.data.records |
|
this.detailPage.total = res.data.data.total |
|
this.detailDialog = true; |
|
}) |
|
}, |
|
detailCurrentChange(currentPage){ |
|
this.detailPage.currentPage = currentPage |
|
this.loadData() |
|
}, |
|
detailSizeChange(pageSize){ |
|
this.detailPage.pageSize = pageSize |
|
this.loadData() |
|
}, |
|
onLoad() { |
|
this.data = [ |
|
{ crtCode: '001', memo: '' }, |
|
{ crtCode: '002', memo: '' }, |
|
{ crtCode: '003', memo: '' }, |
|
]; |
|
this.page.total = this.data.length; |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style lang="scss"> |
|
.detail-crud-option{ |
|
.avue-crud__header{ |
|
min-height: 0; |
|
} |
|
} |
|
</style> |