Skip to content

Z
zhongtong-avi-web
Commit 814c90bb authored by 李志鸣's avatar 李志鸣
Browse files
Options

fea(中控监控大屏): 功能联调

parent 452e9d10
Hide whitespace changes
Inline Side-by-side
Showing with 264 additions and 77 deletions
src/views/CenterControl/components/MachineFailureRate.vue
View file @ 814c90bb
...@@ -47,9 +47,9 @@ ...@@ -47,9 +47,9 @@
data () { data () {
return { return {
// 开始时间 // 开始时间
startTime: null, startTime: '',
// 结束时间 // 结束时间
endTime: null, endTime: '',
// 设备故障率 // 设备故障率
machineFilureRate: [] machineFilureRate: []
} }
...@@ -93,7 +93,7 @@ ...@@ -93,7 +93,7 @@
}, },
// 点击确认按钮 // 点击确认按钮
doConfirmClick () { doConfirmClick () {
if (this.startTime !== null && this.endTime !== null) { if (this.startTime !== '' && this.endTime !== '') {
if (this.startTime > this.endTime) { if (this.startTime > this.endTime) {
this.$message.warning('设备故障率图标开始时间不能大于结束时间！') this.$message.warning('设备故障率图标开始时间不能大于结束时间！')
} else { } else {
...@@ -115,6 +115,7 @@ ...@@ -115,6 +115,7 @@
getMachineFilureEchartData () { getMachineFilureEchartData () {
let queryParams = { beginTime: this.startTime, endTime: this.endTime } let queryParams = { beginTime: this.startTime, endTime: this.endTime }
this.$fetch('report-controller/efr-get', queryParams).then(response => { this.$fetch('report-controller/efr-get', queryParams).then(response => {
this.machineFilureRate = []
this.machineFilureRate.push({ this.machineFilureRate.push({
value: _.cloneDeep(response) value: _.cloneDeep(response)
}) })
......
src/views/CenterControl/components/MachineFailureTrend.vue
View file @ 814c90bb
...@@ -17,31 +17,53 @@ ...@@ -17,31 +17,53 @@
placeholder="结束时间"> placeholder="结束时间">
</el-date-picker> </el-date-picker>
<el-button <el-button
class="ml-10"
@click="doConfirmClick()" @click="doConfirmClick()"
type="primary" type="primary"
size="small"> size="small">
确定 确定
</el-button> </el-button>
<el-button
size="small"
@click="doRestClick()">
重置
</el-button>
</div> </div>
<div id="failureTrendChart"></div> <div id="failureTrendChart"></div>
</div> </div>
</div>
</template> </template>
<script> <script>
export default { export default {
props: {
pollingRequestTime: {}
},
watch: {
pollingRequestTime (newVal, oldVal) {
// 请求设备故障率趋势图表数据
this.getMachineFailureTrendEchartData()
}
},
data () { data () {
return { return {
// 开始时间 // 开始时间
startTime: null, startTime: '',
// 结束时间 // 结束时间
endTime: null endTime: '',
// 图表X轴数据
echartXData: [],
// 图表Y轴数据
echartYData: []
} }
}, },
methods: { methods: {
// 渲染echarts图表 // 渲染echarts图表
renderEcharts () { renderEcharts () {
let echart = echarts.init(document.getElementById('failureTrendChart')) let domItem = document.getElementById('failureTrendChart')
echarts.dispose(domItem)
let echart = echarts.init(domItem)
let echartXData = this.echartXData
let echartYData = this.echartYData
echart.setOption({ echart.setOption({
grid: { grid: {
left: 60, left: 60,
...@@ -51,7 +73,7 @@ ...@@ -51,7 +73,7 @@
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: ['201705', '201706', '201708', '201709', '201710', '201711', '201712'], data: echartXData,
axisLabel: { axisLabel: {
color: '#00b4ff' color: '#00b4ff'
}, },
...@@ -82,7 +104,7 @@ ...@@ -82,7 +104,7 @@
} }
}, },
series: [{ series: [{
data: [1, 8, 1, 3, 5, 6, 9], data: echartYData,
type: 'line', type: 'line',
yAxisIndex: 0, yAxisIndex: 0,
symbolSize: 12, symbolSize: 12,
...@@ -99,22 +121,38 @@ ...@@ -99,22 +121,38 @@
}, },
// 点击确认按钮 // 点击确认按钮
doConfirmClick () { doConfirmClick () {
if (this.startTime !== null && this.endTime !== null) { if (this.startTime !== '' && this.endTime !== '') {
if (this.startTime > this.endTime) { if (this.startTime > this.endTime) {
this.$message.warning('设备故障率趋势图开始时间不能大于结束时间！') this.$message.warning('设备故障率趋势图开始时间不能大于结束时间！')
} else { } else {
console.log('调取接口数据') // 请求设备故障率趋势图表数据
this.getMachineFailureTrendEchartData()
} }
} else { } else {
this.$message.warning('设备故障率趋势图开始时间和结束时间不能为空！') this.$message.warning('设备故障率趋势图开始时间和结束时间不能为空！')
} }
},
// 点击重置按钮
doRestClick () {
this.startTime = ''
this.endTime = ''
// 请求设备故障率趋势图表数据
this.getMachineFailureTrendEchartData()
},
// 请求设备故障率趋势图表数据
getMachineFailureTrendEchartData () {
let queryParams = { beginTime: this.startTime, endTime: this.endTime }
this.$fetch('report-controller/efrTrend-get', queryParams).then(response => {
this.echartXData = []
this.echartYData = []
for (let item of response) {
this.echartXData.push(item.date)
this.echartYData.push(item.percent)
}
// 渲染echarts图表
this.renderEcharts()
})
} }
},
mounted () {
setTimeout(() => {
// 渲染echarts图表
this.renderEcharts()
}, 0)
} }
} }
</script> </script>
......
src/views/CenterControl/components/MachineOperatingStatus.vue
View file @ 814c90bb
...@@ -22,6 +22,11 @@ ...@@ -22,6 +22,11 @@
size="small"> size="small">
确定 确定
</el-button> </el-button>
<el-button
size="small"
@click="doRestClick()">
重置
</el-button>
</div> </div>
<div id="operatingStatusChart"></div> <div id="operatingStatusChart"></div>
</div> </div>
...@@ -29,18 +34,32 @@ ...@@ -29,18 +34,32 @@
<script> <script>
export default { export default {
props: {
pollingRequestTime: {}
},
watch: {
pollingRequestTime (newVal, oldVal) {
// 请求设备运行状态图表数据
this.getMachineOperatingStatusEchartData()
}
},
data () { data () {
return { return {
// 开始时间 // 开始时间
startTime: null, startTime: '',
// 结束时间 // 结束时间
endTime: null endTime: '',
// 设备运行状态图表数据
machineOperatingStatusEchartData: []
} }
}, },
methods: { methods: {
// 渲染echart图表 // 渲染echart图表
renderEcharts () { renderEcharts () {
let echart = echarts.init(document.getElementById('operatingStatusChart')) let domItem = document.getElementById('operatingStatusChart')
echarts.dispose(domItem)
let echart = echarts.init(domItem)
let echartData = this.machineOperatingStatusEchartData
echart.setOption({ echart.setOption({
grid: { grid: {
left: 60, left: 60,
...@@ -69,33 +88,41 @@ ...@@ -69,33 +88,41 @@
fontSize: 18, fontSize: 18,
fontWeight: 'bold' fontWeight: 'bold'
}, },
data: [ data: echartData
{value: 30, name: '故障'},
{value: 65, name: '运行'},
{value: 5, name: '待机'}
]
} }
] ]
}) })
}, },
// 点击确认按钮 // 点击确认按钮
doConfirmClick () { doConfirmClick () {
if (this.startTime !== null && this.endTime !== null) { if (this.startTime !== '' && this.endTime !== '') {
if (this.startTime > this.endTime) { if (this.startTime > this.endTime) {
this.$message.warning('设备运行状态表开始时间不能大于结束时间！') this.$message.warning('设备运行状态表开始时间不能大于结束时间！')
} else { } else {
console.log('调取接口数据') // 请求设备运行状态图表数据
this.getMachineOperatingStatusEchartData()
} }
} else { } else {
this.$message.warning('设备运行状态表开始时间和结束时间不能为空！') this.$message.warning('设备运行状态表开始时间和结束时间不能为空！')
} }
},
// 点击重置按钮
doRestClick () {
this.startTime = ''
this.endTime = ''
// 请求设备运行状态图表数据
this.getMachineOperatingStatusEchartData()
},
// 请求设备运行状态图表数据
getMachineOperatingStatusEchartData () {
let queryParams = { beginTime: this.startTime, endTime: this.endTime }
this.$fetch('report-controller/equState-get', queryParams).then(response => {
this.machineOperatingStatusEchartData = []
this.machineOperatingStatusEchartData = _.cloneDeep(response)
// 渲染echart图表
this.renderEcharts()
})
} }
},
mounted () {
setTimeout(() => {
// 渲染echarts图表
this.renderEcharts()
}, 0)
} }
} }
</script> </script>
......
src/views/CenterControl/components/MachineStateTrend.vue
View file @ 814c90bb
...@@ -22,6 +22,11 @@ ...@@ -22,6 +22,11 @@
size="small"> size="small">
确定 确定
</el-button> </el-button>
<el-button
size="small"
@click="doRestClick()">
重置
</el-button>
</div> </div>
<div id="stateTrendChart"></div> <div id="stateTrendChart"></div>
</div> </div>
...@@ -29,18 +34,41 @@ ...@@ -29,18 +34,41 @@
<script> <script>
export default { export default {
props: {
pollingRequestTime: {}
},
watch: {
pollingRequestTime (newVal, oldVal) {
// 请求设备状态趋势图图表数据
this.getMachineStateTrendEchartData()
}
},
data () { data () {
return { return {
// 开始时间 // 开始时间
startTime: null, startTime: '',
// 结束时间 // 结束时间
endTime: null endTime: '',
// 图表时间数据
echartTimeData: [],
// 图表故障率数据
echartFailureData: [],
// 图表运行率数据
echartRunningData: [],
// 图表待机率数据
echartLoadingData: []
} }
}, },
methods: { methods: {
// 渲染echarts图表 // 渲染echarts图表
renderEcharts () { renderEcharts () {
let echart = echarts.init(document.getElementById('stateTrendChart')) let domItem = document.getElementById('stateTrendChart')
echarts.dispose(domItem)
let echart = echarts.init(domItem)
let echartTimeData = this.echartTimeData
let echartFailureData = this.echartFailureData
let echartRunningData = this.echartRunningData
let echartLoadingData = this.echartLoadingData
echart.setOption({ echart.setOption({
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis'
...@@ -79,7 +107,7 @@ ...@@ -79,7 +107,7 @@
color: '#3569fd' color: '#3569fd'
} }
}, },
data: ['201705', '201706', '201707', '201708', '201709', '201710'] data: echartTimeData
}], }],
yAxis: [{ yAxis: [{
type: 'value', type: 'value',
...@@ -103,7 +131,7 @@ ...@@ -103,7 +131,7 @@
name: '' name: ''
}], }],
series: [{ series: [{
data: [50, 22, 50, 70, 50, 60], data: echartLoadingData,
name: '待机', name: '待机',
stack: 'one', stack: 'one',
type: 'bar' type: 'bar'
...@@ -111,7 +139,7 @@ ...@@ -111,7 +139,7 @@
// show: true // show: true
// } // }
}, { }, {
data: [20, 58, 10, 20, 30, 30], data: echartRunningData,
name: '运行', name: '运行',
stack: 'one', stack: 'one',
type: 'bar' type: 'bar'
...@@ -119,7 +147,7 @@ ...@@ -119,7 +147,7 @@
// show: true // show: true
// } // }
}, { }, {
data: [30, 30, 40, 10, 20, 10], data: echartFailureData,
name: '故障', name: '故障',
stack: 'one', stack: 'one',
type: 'bar' type: 'bar'
...@@ -131,22 +159,42 @@ ...@@ -131,22 +159,42 @@
}, },
// 点击确认按钮 // 点击确认按钮
doConfirmClick () { doConfirmClick () {
if (this.startTime !== null && this.endTime !== null) { if (this.startTime !== '' && this.endTime !== '') {
if (this.startTime > this.endTime) { if (this.startTime > this.endTime) {
this.$message.warning('设备状态趋势图开始时间不能大于结束时间！') this.$message.warning('设备状态趋势图开始时间不能大于结束时间！')
} else { } else {
console.log('调取接口数据') // 请求设备状态趋势图图表数据
this.getMachineStateTrendEchartData()
} }
} else { } else {
this.$message.warning('设备状态趋势图开始时间和结束时间不能为空！') this.$message.warning('设备状态趋势图开始时间和结束时间不能为空！')
} }
},
// 点击重置按钮
doRestClick () {
this.startTime = ''
this.endTime = ''
// 请求设备状态趋势图图表数据
this.getMachineStateTrendEchartData()
},
// 请求设备状态趋势图图表数据
getMachineStateTrendEchartData () {
let queryParams = { beginTime: this.startTime, endTime: this.endTime }
this.$fetch('report-controller/stateTrend-get', queryParams).then(response => {
this.echartTimeData = []
this.echartFailureData = []
this.echartRunningData = []
this.echartLoadingData = []
for (let item of response) {
this.echartTimeData.push(item.date)
this.echartFailureData.push(item.errorStatePercent)
this.echartRunningData.push(item.runStatePercent)
this.echartLoadingData.push(item.loadStatePercent)
}
// 渲染echarts图表
this.renderEcharts()
})
} }
},
mounted () {
setTimeout(() => {
// 渲染echarts图表
this.renderEcharts()
}, 0)
} }
} }
</script> </script>
......
src/views/CenterControl/components/MachineUtilizationRate.vue
View file @ 814c90bb
...@@ -115,6 +115,7 @@ ...@@ -115,6 +115,7 @@
getOeuEchartData () { getOeuEchartData () {
let queryParams = { beginTime: this.startTime, endTime: this.endTime } let queryParams = { beginTime: this.startTime, endTime: this.endTime }
this.$fetch('report-controller/oeu-get', queryParams).then(response => { this.$fetch('report-controller/oeu-get', queryParams).then(response => {
this.machineUtilizationRate = []
this.machineUtilizationRate.push({ this.machineUtilizationRate.push({
value: _.cloneDeep(response) value: _.cloneDeep(response)
}) })
......
src/views/CenterControl/components/MachineUtilizationTrend.vue
View file @ 814c90bb
...@@ -26,6 +26,7 @@ ...@@ -26,6 +26,7 @@
<el-button <el-button
size="small" size="small"
@click="doRestClick()"> @click="doRestClick()">
重置
</el-button> </el-button>
</div> </div>
<div id="utilizationTrendChart"></div> <div id="utilizationTrendChart"></div>
...@@ -38,20 +39,31 @@ ...@@ -38,20 +39,31 @@
pollingRequestTime: {} pollingRequestTime: {}
}, },
watch: { watch: {
pollingRequestTime (newVal, oldVal) {} pollingRequestTime (newVal, oldVal) {
// 请求设备利用率趋势图表数据
this.getOeuTrendEchartData()
}
}, },
data () { data () {
return { return {
// 开始时间 // 开始时间
startTime: null, startTime: '',
// 结束时间 // 结束时间
endTime: null endTime: '',
// 图表X轴数据
echartXData: [],
// 图表Y轴数据
echartYData: []
} }
}, },
methods: { methods: {
// 渲染echarts图表 // 渲染echarts图表
renderEcharts () { renderEcharts () {
let echart = echarts.init(document.getElementById('utilizationTrendChart')) let domItem = document.getElementById('utilizationTrendChart')
echarts.dispose(domItem)
let echart = echarts.init(domItem)
let echartXData = this.echartXData
let echartYData = this.echartYData
echart.setOption({ echart.setOption({
grid: { grid: {
left: 60, left: 60,
...@@ -61,7 +73,7 @@ ...@@ -61,7 +73,7 @@
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: ['201705', '201706', '201708', '201709', '201710', '201711', '201712'], data: echartXData,
axisLabel: { axisLabel: {
color: '#00b4ff' color: '#00b4ff'
}, },
...@@ -92,7 +104,7 @@ ...@@ -92,7 +104,7 @@
} }
}, },
series: [{ series: [{
data: [10, 11, 34, 16, 78, 100, 65], data: echartYData,
type: 'line', type: 'line',
yAxisIndex: 0, yAxisIndex: 0,
symbolSize: 12, symbolSize: 12,
...@@ -109,24 +121,38 @@ ...@@ -109,24 +121,38 @@
}, },
// 点击确认按钮 // 点击确认按钮
doConfirmClick () { doConfirmClick () {
if (this.startTime !== null && this.endTime !== null) { if (this.startTime !== '' && this.endTime !== '') {
if (this.startTime > this.endTime) { if (this.startTime > this.endTime) {
this.$message.warning('设备利用率趋势图开始时间不能大于结束时间！') this.$message.warning('设备利用率趋势图开始时间不能大于结束时间！')
} else { } else {
console.log('调取接口数据') // 请求设备利用率趋势图表数据
this.getOeuTrendEchartData()
} }
} else { } else {
this.$message.warning('设备利用率趋势图开始时间和结束时间不能为空！') this.$message.warning('设备利用率趋势图开始时间和结束时间不能为空！')
} }
}, },
// 点击取消按钮 // 点击重置按钮
doRestClick () {} doRestClick () {
}, this.startTime = ''
mounted () { this.endTime = ''
setTimeout(() => { // 请求设备利用率趋势图表数据
// 渲染echarts图表 this.getOeuTrendEchartData()
this.renderEcharts() },
}, 0) // 请求设备利用率趋势图表数据
getOeuTrendEchartData () {
let queryParams = { beginTime: this.startTime, endTime: this.endTime }
this.$fetch('report-controller/oeuTrend-get', queryParams).then(response => {
this.echartXData = []
this.echartYData = []
for (let item of response) {
this.echartXData.push(item.date)
this.echartYData.push(item.percent)
}
// 渲染echarts图表
this.renderEcharts()
})
}
} }
} }
</script> </script>
......
src/views/CenterControl/components/MachineWarning.vue
View file @ 814c90bb
<template> <template>
<div class="machine-warning"> <div class="machine-warning">
<div class="time-warning-pack"> <div class="time-warning-pack">
<span class="time">2019-05-10</span> <span class="time">{{ currentTime }}</span>
<span class="week">星期四</span> <span class="week">{{ currentWeekDate }}</span>
<span class="warning">设备告警数：</span> <span class="warning">设备告警数：</span>
<span class="warning-number">13</span> <span class="warning-number">{{ warningList.length }}</span>
</div> </div>
<div class="warning-message-pack"> <div class="warning-message-pack">
<div class="table-header"> <div class="table-header">
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
v-for="(item, index) in warningList" v-for="(item, index) in warningList"
:key="index"> :key="index">
<div class="th-time">{{item.time}}</div> <div class="th-time">{{item.time}}</div>
<div class="th-machine">{{item.machine}}</div> <div class="th-machine">{{item.equipName}}</div>
<div class="th-pencil">{{item.info}}</div> <div class="th-pencil">{{item.info}}</div>
</div> </div>
</div> </div>
...@@ -36,19 +36,65 @@ ...@@ -36,19 +36,65 @@
</template> </template>
<script> <script>
import Moment from 'moment'
export default { export default {
props: {
pollingRequestTime: {}
},
watch: {
pollingRequestTime (newVal, oldVal) {
// 请求设备异常列表
this.getMachineWarningList()
// 时间处理
this.judgeTime()
}
},
data () { data () {
return { return {
// 报警信息列表 // 报警信息列表
warningList: [ warningList: [],
{time: '10:45', machine: '机床A01', info: '主轴转速超过4500'}, // 当前时间
{time: '10:45', machine: '机床A01', info: '主轴转速超过4500'}, currentTime: '',
{time: '10:45', machine: '机床A01', info: '主轴转速超过4500'}, // 当前星期
{time: '10:45', machine: '机床A01', info: '主轴转速超过4500'}, currentWeekDate: ''
{time: '10:45', machine: '机床A01', info: '主轴转速超过4500'}, }
{time: '10:45', machine: '机床A01', info: '主轴转速超过4500'}, },
{time: '10:45', machine: '机床A01', info: '主轴转速超过4500'} methods: {
] // 请求设备异常列表
getMachineWarningList () {
this.$fetch('report-controller/warningList-get', {}).then(response => {
this.warningList = _.cloneDeep(response)
})
},
// 时间处理
judgeTime () {
let now = new Date()
let weekDate = Moment().day()
this.currentTime = Moment(now).format('YYYY-MM-DD')
switch (weekDate) {
case 1:
this.currentWeekDate = '星期一'
break
case 2:
this.currentWeekDate = '星期二'
break
case 3:
this.currentWeekDate = '星期三'
break
case 4:
this.currentWeekDate = '星期四'
break
case 5:
this.currentWeekDate = '星期五'
break
case 6:
this.currentWeekDate = '星期六'
break
case 7:
this.currentWeekDate = '星期天'
break
}
} }
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment