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.
1041 lines
30 KiB
1041 lines
30 KiB
<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> |