|
|
|
|
<template>
|
|
|
|
|
<basic-container>
|
|
|
|
|
<!-- 记录仪管理 -->
|
|
|
|
|
<el-tabs v-model="tabPosition" class="demo-tabs" @tab-change="tabPositionChange">
|
|
|
|
|
<el-tab-pane label="记录仪" name="recorder">
|
|
|
|
|
<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">
|
|
|
|
|
<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>
|
|
|
|
|
</template>
|
|
|
|
|
</avue-crud>
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
<el-tab-pane label="记录仪曲线配置" name="recorderLineSetting">
|
|
|
|
|
<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">
|
|
|
|
|
<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>
|
|
|
|
|
</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="datetimerange" 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 :option="detailOption" :table-loading="detailLoading" :data="detailData" v-model="detailForm"
|
|
|
|
|
v-model:page="detailPage" ref="crud" @current-change="currentChange" @size-change="sizeChange">
|
|
|
|
|
</avue-crud>
|
|
|
|
|
</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="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 label="6" 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>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin: 10px 0;">
|
|
|
|
|
<el-button type="primary" icon="el-icon-plus" @click="insertEvent()">插入一行</el-button>
|
|
|
|
|
<el-button plain type="danger" @click="remove">删除选择行</el-button>
|
|
|
|
|
<el-button type="primary" @click="handleSave">保存</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
<el-table :data="settingData" @select="selectChange">
|
|
|
|
|
<el-table-column type="selection"></el-table-column>
|
|
|
|
|
<el-table-column label="参数名称" prop="name" align="center">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<el-input v-model="scope.row.name"></el-input>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="参数显示名称" prop="showName" align="center">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<el-input v-model="scope.row.showName"></el-input>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="是否显示曲线图" prop="showGraph" align="center">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<el-switch v-model="scope.row.showGraph" active-color="#13ce66" inactive-color="#ff4949">
|
|
|
|
|
</el-switch>
|
|
|
|
|
</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-input v-model.number="scope.row.crcX" oninput="scope.row.crcX=scope.row.crcX.replace(/[^\d]/g,'')">
|
|
|
|
|
></el-input>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</basic-container>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import recorderColumnData from './js/recorderColumnData';
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
searchForm: {},
|
|
|
|
|
searchRules: {
|
|
|
|
|
code: [{ required: true, message: '请输入设备编码', trigger: 'blur' }],
|
|
|
|
|
queryDate: [{ required: true, message: '请选择统计日期', trigger: 'blur' }]
|
|
|
|
|
},
|
|
|
|
|
deviceCode: '',
|
|
|
|
|
settingData: [],
|
|
|
|
|
tabPosition: 'recorder',
|
|
|
|
|
loading: false,
|
|
|
|
|
data: [],
|
|
|
|
|
form: {},
|
|
|
|
|
detailDialog: false,
|
|
|
|
|
detailData: [],
|
|
|
|
|
settingDialog: false,
|
|
|
|
|
page: {
|
|
|
|
|
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: true,
|
|
|
|
|
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: 'auto',
|
|
|
|
|
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: true,
|
|
|
|
|
gridBtn: 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,
|
|
|
|
|
},
|
|
|
|
|
detailForm: {},
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.option.column = recorderColumnData[this.tabPosition]
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 查询
|
|
|
|
|
onSubmit() {
|
|
|
|
|
this.$refs.searchForm.validate(valid => {
|
|
|
|
|
if (valid) {
|
|
|
|
|
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();
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// tab切换
|
|
|
|
|
tabPositionChange(val) {
|
|
|
|
|
this.option.column = recorderColumnData[val]
|
|
|
|
|
if (this.tabPosition == 'recorderLineSetting') {
|
|
|
|
|
this.option.addBtn = false
|
|
|
|
|
this.data = [
|
|
|
|
|
{
|
|
|
|
|
"code": "001",
|
|
|
|
|
"crcId": 1,
|
|
|
|
|
"crcX": 2,
|
|
|
|
|
"crcY": 65.0,
|
|
|
|
|
"keyValue": 1,
|
|
|
|
|
"name": "Var2",
|
|
|
|
|
"showGraph": true,
|
|
|
|
|
"showName": "温度"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"code": "001",
|
|
|
|
|
"crcId": 3,
|
|
|
|
|
"crcX": 2,
|
|
|
|
|
"crcY": 0.25,
|
|
|
|
|
"keyValue": 3,
|
|
|
|
|
"name": "Var1",
|
|
|
|
|
"showGraph": true,
|
|
|
|
|
"showName": "压力"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"code": "001",
|
|
|
|
|
"crcId": 4,
|
|
|
|
|
"crcX": 2,
|
|
|
|
|
"crcY": 1.0,
|
|
|
|
|
"keyValue": 4,
|
|
|
|
|
"name": "Var3",
|
|
|
|
|
"showGraph": true,
|
|
|
|
|
"showName": "低真空"
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
this.page.total = this.data.length
|
|
|
|
|
} else if (this.tabPosition == 'recorder') {
|
|
|
|
|
this.option.addBtn = true
|
|
|
|
|
this.data = [
|
|
|
|
|
{ crtCode: '001', memo: '' },
|
|
|
|
|
{ crtCode: '002', memo: '' },
|
|
|
|
|
{ crtCode: '003', memo: '' },
|
|
|
|
|
]
|
|
|
|
|
this.page.total = this.data.length
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
insertEvent() {
|
|
|
|
|
const record = { _select: false };
|
|
|
|
|
this.settingData.push(record)
|
|
|
|
|
},
|
|
|
|
|
selectChange(list, row) {
|
|
|
|
|
row._select = !row._select
|
|
|
|
|
},
|
|
|
|
|
remove() {
|
|
|
|
|
let arr = this.settingData.filter(item => item._select)
|
|
|
|
|
if (arr.length != 0) {
|
|
|
|
|
this.$confirm('确定将选择数据删除?', {
|
|
|
|
|
confirmButtonText: '确定',
|
|
|
|
|
cancelButtonText: '取消',
|
|
|
|
|
type: 'warning',
|
|
|
|
|
}).then(() => {
|
|
|
|
|
if (this.rowId) {
|
|
|
|
|
let deleteData = this.settingData.filter(item => item._select)
|
|
|
|
|
this.deleteTidArr = deleteData.filter(item => item.tidId)
|
|
|
|
|
}
|
|
|
|
|
let deleteArr = this.settingData.filter(item => !item._select)
|
|
|
|
|
this.settingData = deleteArr
|
|
|
|
|
})
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error('请至少选择一条数据进行操作！')
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
handleSave() {
|
|
|
|
|
this.addDialog = false
|
|
|
|
|
},
|
|
|
|
|
rowEdit(row, index) {
|
|
|
|
|
if (this.tabPosition == 'recorder') {
|
|
|
|
|
this.$refs.crud.rowEdit(row, index);
|
|
|
|
|
} else if (this.tabPosition == 'recorderLineSetting') {
|
|
|
|
|
this.addType = 'edit'
|
|
|
|
|
this.settingData = [
|
|
|
|
|
{
|
|
|
|
|
"code": "001",
|
|
|
|
|
"crcId": 1,
|
|
|
|
|
"crcX": 2,
|
|
|
|
|
"crcY": 65.0,
|
|
|
|
|
"keyValue": 1,
|
|
|
|
|
"name": "Var2",
|
|
|
|
|
"showGraph": true,
|
|
|
|
|
"showName": "温度"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"code": "001",
|
|
|
|
|
"crcId": 3,
|
|
|
|
|
"crcX": 2,
|
|
|
|
|
"crcY": 0.25,
|
|
|
|
|
"keyValue": 3,
|
|
|
|
|
"name": "Var1",
|
|
|
|
|
"showGraph": true,
|
|
|
|
|
"showName": "压力"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"code": "001",
|
|
|
|
|
"crcId": 4,
|
|
|
|
|
"crcX": 2,
|
|
|
|
|
"crcY": 1.0,
|
|
|
|
|
"keyValue": 4,
|
|
|
|
|
"name": "Var3",
|
|
|
|
|
"showGraph": true,
|
|
|
|
|
"showName": "低真空"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"code": "001",
|
|
|
|
|
"crcId": 5,
|
|
|
|
|
"crcX": 2,
|
|
|
|
|
"crcY": 0.125,
|
|
|
|
|
"keyValue": 5,
|
|
|
|
|
"name": "Var4",
|
|
|
|
|
"showGraph": true,
|
|
|
|
|
"showName": "高真空"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"code": "001",
|
|
|
|
|
"crcId": 49,
|
|
|
|
|
"crcX": 2,
|
|
|
|
|
"crcY": null,
|
|
|
|
|
"keyValue": 49,
|
|
|
|
|
"name": "Var5",
|
|
|
|
|
"showGraph": false,
|
|
|
|
|
"showName": "Var5"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
this.addDialog = true
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
showDetail(row) {
|
|
|
|
|
this.loadData()
|
|
|
|
|
this.detailDialog = true
|
|
|
|
|
},
|
|
|
|
|
setCycle() {
|
|
|
|
|
this.settingDialog = true
|
|
|
|
|
},
|
|
|
|
|
handleAdd() {
|
|
|
|
|
this.addType = 'add'
|
|
|
|
|
this.addDialog = true
|
|
|
|
|
},
|
|
|
|
|
deleteRow() {
|
|
|
|
|
this.$confirm('确定删除本条数据?', {
|
|
|
|
|
confirmButtonText: '确定',
|
|
|
|
|
cancelButtonText: '取消',
|
|
|
|
|
type: 'warning',
|
|
|
|
|
}).then(() => {
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
submitCycle() {
|
|
|
|
|
this.$refs.setForm.validate(valid => {
|
|
|
|
|
if (valid) {
|
|
|
|
|
this.settingDialog = false
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
loadData() {
|
|
|
|
|
this.detailData = [
|
|
|
|
|
{ recorder: '1302022', recordDate: '2025-07-26 16:04:43' },
|
|
|
|
|
{ recorder: '1302022', recordDate: '2025-07-26 16:04:43' },
|
|
|
|
|
{ recorder: '1302022', recordDate: '2025-07-26 16:04:43' },
|
|
|
|
|
{ recorder: '1302022', recordDate: '2025-07-26 16:04:43' },
|
|
|
|
|
]
|
|
|
|
|
this.detailPage.total = this.detailData.length
|
|
|
|
|
},
|
|
|
|
|
onLoad() {
|
|
|
|
|
this.data = [
|
|
|
|
|
{ crtCode: '001', memo: '' },
|
|
|
|
|
{ crtCode: '002', memo: '' },
|
|
|
|
|
{ crtCode: '003', memo: '' },
|
|
|
|
|
]
|
|
|
|
|
this.page.total = this.data.length
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style></style>
|
