<template>
|
<div ref="workChart">
|
<a-modal :title="title" :getContainer="() => this.$refs.workChart" width="80%" wrap-class-name="full-modal"
|
:footer="null" :visible="visible"
|
@cancel="handleCancel" cancelText="关闭">
|
<div>
|
<div>
|
<a-row :gutter="24">
|
<a-col :span="6">
|
<a-form-item label="设备编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<a-input placeholder="输入设备编号查询" :readOnly="readOnly" v-model="queryParams.equipmentId"></a-input>
|
</a-form-item>
|
</a-col>
|
<a-col :span="6">
|
<a-form-item label="日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<a-date-picker v-model="queryParams.paramDate" :disabledDate="disabledDate" format='YYYY-MM-DD'/>
|
</a-form-item>
|
</a-col>
|
<a-col :span="6">
|
<a-form-item label="采样周期" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<a-input-number v-model="queryParams.period"/>
|
</a-form-item>
|
</a-col>
|
</a-row>
|
<a-row :gutter="24">
|
<a-col :span="6">
|
<a-form-item label="设备名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<a-input placeholder="输入设备名称查询" :readOnly="readOnly" v-model="queryParams.equipmentName"></a-input>
|
</a-form-item>
|
|
</a-col>
|
<a-col :span="10">
|
<a-form-item label="时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<div class="params_time">
|
<a-time-picker :open="stratOpen" format="HH:mm" @openChange="timeHandleChange('start')"
|
v-model="queryParams.start">
|
<a-button slot="addon" size="small" type="primary" @click="timeHandleClose('start')">
|
确定
|
</a-button>
|
</a-time-picker>
|
<a-time-picker :open="endOpen" format="HH:mm" @openChange="timeHandleChange('end')"
|
v-model="queryParams.end">
|
<a-button slot="addon" size="small" type="primary" @click="timeHandleClose('end')">
|
确定
|
</a-button>
|
</a-time-picker>
|
</div>
|
</a-form-item>
|
</a-col>
|
<a-col :span="4">
|
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
</a-col>
|
</a-row>
|
|
</div>
|
<div class="checkboxgroup">
|
<p>统计参数</p>
|
<div class="checkboxgroup_con">
|
<a-checkbox-group name="checkboxgroup" :value="option" :options="plainOptions" @change="checkboxOnChange"/>
|
</div>
|
</div>
|
|
|
<a-spin :spinning="spinning">
|
<div id="workChart" style="width:85%;height: 500px;"/>
|
</a-spin>
|
</div>
|
</a-modal>
|
</div>
|
</template>
|
|
<script>
|
import moment from 'moment'
|
import * as echarts from 'echarts'
|
import {
|
getAction,
|
postAction
|
} from '@/api/manage'
|
import {
|
duplicateCheck
|
} from '@/api/api'
|
|
export default {
|
name: 'WorkChartModel',
|
components: {},
|
props: {
|
collectTime: {
|
type: Object
|
},
|
equipment: {
|
type: Object
|
}
|
},
|
watch: {
|
// 监控父组件点击左右箭头切换的时间值将其赋给点击工作曲线后的时间选择器的值
|
collectTime: {
|
handler(newVal) {
|
this.currentToggledTime = newVal
|
}
|
}
|
},
|
data() {
|
return {
|
spinning: false,
|
labelCol: {
|
xs: {
|
span: 24
|
},
|
sm: {
|
span: 6
|
}
|
},
|
wrapperCol: {
|
xs: {
|
span: 24
|
},
|
sm: {
|
span: 18
|
}
|
},
|
readOnly: true,
|
title: '',
|
plainOptions: [],
|
option: [],
|
workChart: '',
|
node: {},
|
stratOpen: false,
|
endOpen: false,
|
visible: false,
|
show: false,
|
queryParams: {},
|
panduanResult: [],
|
url: {
|
initPlainOptions: '/mdc/mdcDriveTypeParamConfig/findWorkCurveParamList',
|
workChart: '/mdc/mdcEquipmentRunningSection/workChart'
|
},
|
currentToggledTime: '',
|
isClicklogListRow: false
|
}
|
},
|
created() {
|
this.$bus.$on('tableRowRecord', this.getLogListRowRecord)
|
},
|
mounted() {
|
|
},
|
methods: {
|
disabledDate(current) {
|
//Can not slect days before today and today
|
return current && current > moment().endOf('day')
|
},
|
initPlainOptions(param) {
|
let that = this
|
let equipment = param.equipmentId
|
getAction(this.url.initPlainOptions, { equipmentId: equipment }).then((res) => {
|
if (res.success) {
|
let temp = []
|
// debugger
|
for (var item of res.result) {
|
temp.push({ label: item.chineseName, value: item.id, englishName: item.englishName })
|
}
|
that.plainOptions = temp
|
if (temp.length > 0) {
|
that.option = [temp[0].value]
|
}
|
let param = {
|
driveType: that.node.driveType,
|
equipmentId: that.node.equipmentId,
|
date: that.queryParams.paramDateStr,
|
start: that.queryParams.startStr,
|
end: that.queryParams.endStr,
|
interval: that.queryParams.period,
|
codeTypeId: that.option.join(',')
|
}
|
that.initChart(param)
|
}
|
})
|
},
|
searchQuery() {
|
this.queryParams.paramDateStr = this.queryParams.paramDate.format('yyyy-MM-DD')
|
this.queryParams.startStr = this.queryParams.start.format('HH:mm')
|
this.queryParams.endStr = this.queryParams.end.format('HH:mm')
|
let param = {
|
driveType: this.node.driveType, equipmentId: this.node.equipmentId,
|
date: this.queryParams.paramDateStr, start: this.queryParams.startStr,
|
end: this.queryParams.endStr, interval: this.queryParams.period,
|
codeTypeId: this.option.join(',')
|
}
|
this.initChart(param)
|
this.spinning = true
|
},
|
timeHandleChange(val) {
|
if (val == 'start') {
|
this.stratOpen = true
|
} else {
|
this.endOpen = true
|
}
|
},
|
timeHandleClose(val) {
|
if (val == 'start') {
|
this.stratOpen = false
|
this.endOpen = true
|
} else {
|
this.endOpen = false
|
}
|
},
|
add(node) {
|
let _this = this
|
this.visible = true
|
this.node = node
|
this.spinning = true
|
let paramDate
|
let start
|
let end
|
// 当没有切换过时间currentToggledTime的值为空值，如果由于点击左右箭头切换过时间，则currentToggledTime为切换后的时间
|
if (!this.currentToggledTime) {
|
paramDate = moment()
|
} else {
|
paramDate = this.currentToggledTime
|
}
|
// 判断是否点击设备日志表格行的数据，若点击表格数据则显示表格数据中的时间，若点击工作曲线图片则显示0点至当前时间数据
|
if (this.isClicklogListRow) {
|
start = node.start
|
end = node.end
|
} else {
|
start = moment('0:0', 'HH:mm')
|
end = moment(moment().format('HH:mm'), 'HH:mm')
|
}
|
this.queryParams = {
|
equipmentId: node.equipmentId,
|
equipmentName: node.equipmentName,
|
period: 100,
|
paramDate: paramDate,
|
paramDateStr: paramDate.format('yyyy-MM-DD'),
|
start: start,
|
startStr: start.format('HH:mm'),
|
end: end,
|
endStr: end.format('HH:mm')
|
}
|
this.$nextTick(() => {
|
_this.initPlainOptions(node)
|
})
|
},
|
handleCancel() {
|
this.visible = false
|
this.stratOpen = false
|
this.endOpen = false
|
},
|
checkboxOnChange(e) {
|
if (e.length <= 3) {
|
this.option = e
|
} else {
|
// this.$message.warn('最多只能选择3个')
|
this.$notification.warning({
|
message: '消息',
|
description: '最多只能选择三个'
|
})
|
return false
|
}
|
},
|
close() {
|
this.visible = false
|
this.show = false
|
},
|
getYAxisOffset(index) {
|
return index * 50 + 10
|
},
|
initChart(param) {
|
if (!this.workChart) {
|
this.workChart = echarts.init(document.getElementById('workChart'))
|
}
|
let option = {
|
tooltip: {
|
trigger: 'axis',
|
position: function(pt) {
|
return [pt[0], '10%']
|
}
|
},
|
legend: {
|
data: []
|
},
|
title: {
|
left: 'center',
|
text: ''
|
},
|
toolbox: {
|
feature: {
|
dataZoom: {
|
yAxisIndex: 'none'
|
},
|
restore: {},
|
saveAsImage: {}
|
}
|
},
|
grid: {
|
left: '8%',
|
top: '10%',
|
right: '2%',
|
bottom: '14%',
|
containLabel: true
|
},
|
xAxis: {
|
type: 'time',
|
boundaryGap: false
|
},
|
yAxis: [
|
{
|
yAxisIndex: 0,
|
type: 'value',
|
offset: 0,
|
position: 'left',
|
boundaryGap: [0, '15%'],
|
axisLine: {
|
show: true,
|
lineStyle:{
|
color:'#5470C6'
|
}
|
}
|
},
|
{
|
yAxisIndex: 1,
|
type: 'value',
|
offset: 60,
|
position: 'left',
|
boundaryGap: [0, '15%'],
|
axisLine: {
|
show: true,
|
lineStyle:{
|
color:'#91CC75'
|
}
|
}
|
},
|
{
|
yAxisIndex: 2,
|
type: 'value',
|
offset: 120,
|
position: 'left',
|
boundaryGap: [0, '15%'],
|
axisLine: {
|
show: true,
|
lineStyle:{
|
color:'#FAC858'
|
}
|
}
|
}
|
],
|
dataZoom: [
|
{
|
type: 'inside',
|
start: 0,
|
end: 20
|
},
|
{
|
start: 0,
|
end: 20
|
}
|
],
|
series: [
|
{
|
showSymbol: true,
|
symbolSize: 20,
|
label: 'show',
|
name: '',
|
type: 'line',
|
data: [],
|
smooth: true,
|
symbol: 'none'
|
}
|
]
|
}
|
let _this = this
|
let temp = []
|
for (let i = 0; i < this.plainOptions.length; i++) {
|
let item = this.plainOptions[i]
|
if (this.option.indexOf(item.value) > -1) {
|
temp.push(item)
|
}
|
}
|
console.log('temp',temp)
|
getAction(this.url.workChart, param).then((res) => {
|
if (JSON.stringify(res.result) == '[]' || res.result == null) {
|
// this.$message.warning('无数据！')
|
this.$notification.warning({
|
message: '消息',
|
description: '无数据!'
|
})
|
this.spinning = false
|
_this.workChart.setOption(option, true)
|
} else {
|
this.spinning = false
|
// debugger
|
let result = []
|
let itemLine = []
|
//y轴数组
|
var Yarr = []
|
var lengenddata = []
|
for (let i = 0; i < temp.length; i++) {
|
let item = temp[i]
|
itemLine = []
|
for (let m = 0; m < res.result.length; m++) {
|
let d = []
|
d.push(res.result[m].collectTime)
|
// debugger
|
d.push(res.result[m][item.englishName])
|
itemLine.push(d)
|
}
|
var lll = {
|
name: item.label
|
}
|
lengenddata.push(lll)
|
var Yline = {
|
name: item.label,
|
type: 'value',
|
yAxisIndex: i,
|
boundaryGap: [0, '100%']
|
}
|
Yarr.push(Yline)
|
var line = {
|
name: item.label,
|
type: 'line',
|
// areaStyle:{},
|
smooth: true,
|
symbol: 'circle',
|
symbolSize: 10,
|
yAxisIndex: i,
|
data: itemLine
|
}
|
result.push(line)
|
|
}
|
console.log('result===========',result)
|
console.log('legend=============',lengenddata)
|
// option.yAxis = Yarr;
|
option.series = result
|
option.legend = lengenddata
|
// console.log(option);
|
_this.workChart.setOption(option, true)
|
window.addEventListener('resize', function() {
|
_this.workChart.resize()
|
})
|
}
|
|
})
|
},
|
/**
|
* 获取点击设备日志表格行后从兄弟组件传来的时间对象
|
* @param timeObj 当前行的开始时间与结束时间组成的对象
|
*/
|
getLogListRowRecord(timeObj) {
|
// 判断是否点击设备日志表格行的数据，此时为点击表格数据为true
|
this.isClicklogListRow = true
|
// 合并父组件传来的当前设备信息对象与兄弟组件传来的当前行的时间对象
|
const newQueryParams = Object.assign(this.equipment, timeObj)
|
this.add(newQueryParams)
|
this.title = '工作曲线'
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
.full-modal {
|
.ant-modal {
|
max-width: 100%;
|
top: 0;
|
padding-bottom: 0;
|
margin: 0;
|
}
|
.ant-modal-content {
|
display: flex;
|
flex-direction: column;
|
height: calc(100vh);
|
}
|
.ant-modal-body {
|
flex: 1;
|
}
|
}
|
|
/deep/ .ant-modal {
|
/*background-color: #000;*/
|
/*color: #fff;*/
|
}
|
|
/deep/ .ant-modal-header {
|
/*background-color: #000;*/
|
}
|
|
/deep/ .ant-modal-title {
|
/*color: #fff;*/
|
}
|
|
/deep/ .ant-modal-close {
|
color: #1191b0;
|
font-size: 24px;
|
}
|
|
/deep/ .ant-modal-content {
|
/*background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.27) 100%);*/
|
/*background: -webkit-gradient(linear, left left, right right, color-stop(0%, rgba(0, 0, 0, 0.66)), color-stop(100%, rgba(0, 0, 0, 0.4)));*/
|
/*background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/
|
/*background: -o-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/
|
/*background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/
|
/*background: linear-gradient(to right, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/
|
/*background-color: #000;*/
|
/*color: #fff;*/
|
position: relative;
|
}
|
|
/deep/ .ant-modal-header {
|
/*border-bottom: none!important;*/
|
}
|
|
/deep/ .ant-checkbox-wrapper {
|
/*color: #fff;*/
|
}
|
|
/deep/ .ant-form-item-label label {
|
/*color: #fff;*/
|
}
|
|
/deep/ .ant-btn {
|
/*position: absolute;*/
|
|
}
|
|
.checkboxgroup {
|
position: absolute;
|
right: 5%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
flex-direction: column;
|
}
|
|
/deep/ .ant-checkbox-group {
|
display: flex;
|
flex-direction: column;
|
}
|
|
/deep/ .ant-checkbox-group .ant-checkbox-wrapper {
|
padding: 10px;
|
}
|
|
.con_btn {
|
display: flex;
|
align-items: center;
|
}
|
|
.workChart_params {
|
display: flex;
|
/*align-items: center;*/
|
flex-direction: column;
|
float: left;
|
}
|
|
.workChart_params .params_one {
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.workChart_params .params_two {
|
display: flex;
|
justify-content: space-between;
|
}
|
|
/deep/ .workChart_params .ant-form-item {
|
display: flex;
|
}
|
|
/deep/ .workChart_params .ant-form-item .ant-form-item-control-wrapper {
|
margin: 0 10px;
|
}
|
|
.ant-btn {
|
padding: 0 10px;
|
margin-left: 3px;
|
}
|
|
.ant-form-item-control {
|
line-height: 0px;
|
}
|
|
/** 主表单行间距 */
|
.ant-form .ant-form-item {
|
margin-bottom: 10px;
|
}
|
|
/** Tab页面行间距 */
|
.ant-tabs-content .ant-form-item {
|
margin-bottom: 0px;
|
}
|
</style>
|
