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 @@
data () {
return {
// 开始时间
startTime: null,
startTime: '',
// 结束时间
endTime: null,
endTime: '',
// 设备故障率
machineFilureRate: []
}
......@@ -93,7 +93,7 @@
},
// 点击确认按钮
doConfirmClick () {
if (this.startTime !== null && this.endTime !== null) {
if (this.startTime !== '' && this.endTime !== '') {
if (this.startTime > this.endTime) {
this.$message.warning('设备故障率图标开始时间不能大于结束时间！')
} else {
......@@ -115,6 +115,7 @@
getMachineFilureEchartData () {
let queryParams = { beginTime: this.startTime, endTime: this.endTime }
this.$fetch('report-controller/efr-get', queryParams).then(response => {
this.machineFilureRate = []
this.machineFilureRate.push({
value: _.cloneDeep(response)
})
......
src/views/CenterControl/components/MachineFailureTrend.vue
View file @ 814c90bb
......@@ -17,31 +17,53 @@
placeholder="结束时间">
</el-date-picker>
<el-button
class="ml-10"
@click="doConfirmClick()"
type="primary"
size="small">
确定
</el-button>
<el-button
size="small"
@click="doRestClick()">
重置
</el-button>
</div>
<div id="failureTrendChart"></div>
</div>
</div>
</template>
<script>
export default {
props: {
pollingRequestTime: {}
},
watch: {
pollingRequestTime (newVal, oldVal) {
// 请求设备故障率趋势图表数据
this.getMachineFailureTrendEchartData()
}
},
data () {
return {
// 开始时间
startTime: null,
startTime: '',
// 结束时间
endTime: null
endTime: '',
// 图表X轴数据
echartXData: [],
// 图表Y轴数据
echartYData: []
}
},
methods: {
// 渲染echarts图表
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({
grid: {
left: 60,
......@@ -51,7 +73,7 @@
},
xAxis: {
type: 'category',
data: ['201705', '201706', '201708', '201709', '201710', '201711', '201712'],
data: echartXData,
axisLabel: {
color: '#00b4ff'
},
......@@ -82,7 +104,7 @@
}
},
series: [{
data: [1, 8, 1, 3, 5, 6, 9],
data: echartYData,
type: 'line',
yAxisIndex: 0,
symbolSize: 12,
......@@ -99,22 +121,38 @@
},
// 点击确认按钮
doConfirmClick () {
if (this.startTime !== null && this.endTime !== null) {
if (this.startTime !== '' && this.endTime !== '') {
if (this.startTime > this.endTime) {
this.$message.warning('设备故障率趋势图开始时间不能大于结束时间！')
} else {
console.log('调取接口数据')
// 请求设备故障率趋势图表数据
this.getMachineFailureTrendEchartData()
}
} else {
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>
......
src/views/CenterControl/components/MachineOperatingStatus.vue
View file @ 814c90bb
......@@ -22,6 +22,11 @@
size="small">
确定
</el-button>
<el-button
size="small"
@click="doRestClick()">
重置
</el-button>
</div>
<div id="operatingStatusChart"></div>
</div>
......@@ -29,18 +34,32 @@
<script>
export default {
props: {
pollingRequestTime: {}
},
watch: {
pollingRequestTime (newVal, oldVal) {
// 请求设备运行状态图表数据
this.getMachineOperatingStatusEchartData()
}
},
data () {
return {
// 开始时间
startTime: null,
startTime: '',
// 结束时间
endTime: null
endTime: '',
// 设备运行状态图表数据
machineOperatingStatusEchartData: []
}
},
methods: {
// 渲染echart图表
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({
grid: {
left: 60,
......@@ -69,33 +88,41 @@
fontSize: 18,
fontWeight: 'bold'
},
data: [
{value: 30, name: '故障'},
{value: 65, name: '运行'},
{value: 5, name: '待机'}
]
data: echartData
}
]
})
},
// 点击确认按钮
doConfirmClick () {
if (this.startTime !== null && this.endTime !== null) {
if (this.startTime !== '' && this.endTime !== '') {
if (this.startTime > this.endTime) {
this.$message.warning('设备运行状态表开始时间不能大于结束时间！')
} else {
console.log('调取接口数据')
// 请求设备运行状态图表数据
this.getMachineOperatingStatusEchartData()
}
} else {
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>
......
src/views/CenterControl/components/MachineStateTrend.vue
View file @ 814c90bb
......@@ -22,6 +22,11 @@
size="small">
确定
</el-button>
<el-button
size="small"
@click="doRestClick()">
重置
</el-button>
</div>
<div id="stateTrendChart"></div>
</div>
......@@ -29,18 +34,41 @@
<script>
export default {
props: {
pollingRequestTime: {}
},
watch: {
pollingRequestTime (newVal, oldVal) {
// 请求设备状态趋势图图表数据
this.getMachineStateTrendEchartData()
}
},
data () {
return {
// 开始时间
startTime: null,
startTime: '',
// 结束时间
endTime: null
endTime: '',
// 图表时间数据
echartTimeData: [],
// 图表故障率数据
echartFailureData: [],
// 图表运行率数据
echartRunningData: [],
// 图表待机率数据
echartLoadingData: []
}
},
methods: {
// 渲染echarts图表
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({
tooltip: {
trigger: 'axis'
......@@ -79,7 +107,7 @@
color: '#3569fd'
}
},
data: ['201705', '201706', '201707', '201708', '201709', '201710']
data: echartTimeData
}],
yAxis: [{
type: 'value',
......@@ -103,7 +131,7 @@
name: ''
}],
series: [{
data: [50, 22, 50, 70, 50, 60],
data: echartLoadingData,
name: '待机',
stack: 'one',
type: 'bar'
......@@ -111,7 +139,7 @@
// show: true
// }
}, {
data: [20, 58, 10, 20, 30, 30],
data: echartRunningData,
name: '运行',
stack: 'one',
type: 'bar'
......@@ -119,7 +147,7 @@
// show: true
// }
}, {
data: [30, 30, 40, 10, 20, 10],
data: echartFailureData,
name: '故障',
stack: 'one',
type: 'bar'
......@@ -131,22 +159,42 @@
},
// 点击确认按钮
doConfirmClick () {
if (this.startTime !== null && this.endTime !== null) {
if (this.startTime !== '' && this.endTime !== '') {
if (this.startTime > this.endTime) {
this.$message.warning('设备状态趋势图开始时间不能大于结束时间！')
} else {
console.log('调取接口数据')
// 请求设备状态趋势图图表数据
this.getMachineStateTrendEchartData()
}
} else {
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>
......
src/views/CenterControl/components/MachineUtilizationRate.vue
View file @ 814c90bb
......@@ -115,6 +115,7 @@
getOeuEchartData () {
let queryParams = { beginTime: this.startTime, endTime: this.endTime }
this.$fetch('report-controller/oeu-get', queryParams).then(response => {
this.machineUtilizationRate = []
this.machineUtilizationRate.push({
value: _.cloneDeep(response)
})
......
src/views/CenterControl/components/MachineUtilizationTrend.vue
View file @ 814c90bb
......@@ -26,6 +26,7 @@
<el-button
size="small"
@click="doRestClick()">
重置
</el-button>
</div>
<div id="utilizationTrendChart"></div>
......@@ -38,20 +39,31 @@
pollingRequestTime: {}
},
watch: {
pollingRequestTime (newVal, oldVal) {}
pollingRequestTime (newVal, oldVal) {
// 请求设备利用率趋势图表数据
this.getOeuTrendEchartData()
}
},
data () {
return {
// 开始时间
startTime: null,
startTime: '',
// 结束时间
endTime: null
endTime: '',
// 图表X轴数据
echartXData: [],
// 图表Y轴数据
echartYData: []
}
},
methods: {
// 渲染echarts图表
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({
grid: {
left: 60,
......@@ -61,7 +73,7 @@
},
xAxis: {
type: 'category',
data: ['201705', '201706', '201708', '201709', '201710', '201711', '201712'],
data: echartXData,
axisLabel: {
color: '#00b4ff'
},
......@@ -92,7 +104,7 @@
}
},
series: [{
data: [10, 11, 34, 16, 78, 100, 65],
data: echartYData,
type: 'line',
yAxisIndex: 0,
symbolSize: 12,
......@@ -109,24 +121,38 @@
},
// 点击确认按钮
doConfirmClick () {
if (this.startTime !== null && this.endTime !== null) {
if (this.startTime !== '' && this.endTime !== '') {
if (this.startTime > this.endTime) {
this.$message.warning('设备利用率趋势图开始时间不能大于结束时间！')
} else {
console.log('调取接口数据')
// 请求设备利用率趋势图表数据
this.getOeuTrendEchartData()
}
} else {
this.$message.warning('设备利用率趋势图开始时间和结束时间不能为空！')
}
},
// 点击取消按钮
doRestClick () {}
},
mounted () {
setTimeout(() => {
// 渲染echarts图表
this.renderEcharts()
}, 0)
// 点击重置按钮
doRestClick () {
this.startTime = ''
this.endTime = ''
// 请求设备利用率趋势图表数据
this.getOeuTrendEchartData()
},
// 请求设备利用率趋势图表数据
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>
......
src/views/CenterControl/components/MachineWarning.vue
View file @ 814c90bb
<template>
<div class="machine-warning">
<div class="time-warning-pack">
<span class="time">2019-05-10</span>
<span class="week">星期四</span>
<span class="time">{{ currentTime }}</span>
<span class="week">{{ currentWeekDate }}</span>
<span class="warning">设备告警数：</span>
<span class="warning-number">13</span>
<span class="warning-number">{{ warningList.length }}</span>
</div>
<div class="warning-message-pack">
<div class="table-header">
......@@ -27,7 +27,7 @@
v-for="(item, index) in warningList"
:key="index">
<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>
</div>
......@@ -36,19 +36,65 @@
</template>
<script>
import Moment from 'moment'
export default {
props: {
pollingRequestTime: {}
},
watch: {
pollingRequestTime (newVal, oldVal) {
// 请求设备异常列表
this.getMachineWarningList()
// 时间处理
this.judgeTime()
}
},
data () {
return {
// 报警信息列表
warningList: [
{time: '10:45', machine: '机床A01', info: '主轴转速超过4500'},
{time: '10:45', machine: '机床A01', info: '主轴转速超过4500'},
{time: '10:45', machine: '机床A01', info: '主轴转速超过4500'},
{time: '10:45', machine: '机床A01', info: '主轴转速超过4500'},
{time: '10:45', machine: '机床A01', info: '主轴转速超过4500'},
{time: '10:45', machine: '机床A01', info: '主轴转速超过4500'},
{time: '10:45', machine: '机床A01', info: '主轴转速超过4500'}
]
warningList: [],
// 当前时间
currentTime: '',
// 当前星期
currentWeekDate: ''
}
},
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