<!--
|
* ......................................&&.........................
|
* ....................................&&&..........................
|
* .................................&&&&............................
|
* ...............................&&&&..............................
|
* .............................&&&&&&..............................
|
* ...........................&&&&&&....&&&..&&&&&&&&&&&&&&&........
|
* ..................&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&..............
|
* ................&...&&&&&&&&&&&&&&&&&&&&&&&&&&&&.................
|
* .......................&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&.........
|
* ...................&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&...............
|
* ..................&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&............
|
* ...............&&&&&@ &&&&&&&&&&..&&&&&&&&&&&&&&&&&&&...........
|
* ..............&&&&&&&&&&&&&&&.&&....&&&&&&&&&&&&&..&&&&&.........
|
* ..........&&&&&&&&&&&&&&&&&&...&.....&&&&&&&&&&&&&...&&&&........
|
* ........&&&&&&&&&&&&&&&&&&&.........&&&&&&&&&&&&&&&....&&&.......
|
* .......&&&&&&&&.....................&&&&&&&&&&&&&&&&.....&&......
|
* ........&&&&&.....................&&&&&&&&&&&&&&&&&&.............
|
* ..........&...................&&&&&&&&&&&&&&&&&&&&&&&............
|
* ................&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&............
|
* ..................&&&&&&&&&&&&&&&&&&&&&&&&&&&&..&&&&&............
|
* ..............&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&....&&&&&............
|
* ...........&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&......&&&&............
|
* .........&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&.........&&&&............
|
* .......&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&...........&&&&............
|
* ......&&&&&&&&&&&&&&&&&&&...&&&&&&...............&&&.............
|
* .....&&&&&&&&&&&&&&&&............................&&..............
|
* ....&&&&&&&&&&&&&&&.................&&...........................
|
* ...&&&&&&&&&&&&&&&.....................&&&&......................
|
* ...&&&&&&&&&&.&&&........................&&&&&...................
|
* ..&&&&&&&&&&&..&&..........................&&&&&&&...............
|
* ..&&&&&&&&&&&&...&............&&&.....&&&&...&&&&&&&.............
|
* ..&&&&&&&&&&&&&.................&&&.....&&&&&&&&&&&&&&...........
|
* ..&&&&&&&&&&&&&&&&..............&&&&&&&&&&&&&&&&&&&&&&&&.........
|
* ..&&.&&&&&&&&&&&&&&&&&.........&&&&&&&&&&&&&&&&&&&&&&&&&&&.......
|
* ...&&..&&&&&&&&&&&&.........&&&&&&&&&&&&&&&&...&&&&&&&&&&&&......
|
* ....&..&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&...........&&&&&&&&.....
|
* .......&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&..............&&&&&&&....
|
* .......&&&&&.&&&&&&&&&&&&&&&&&&..&&&&&&&&...&..........&&&&&&....
|
* ........&&&.....&&&&&&&&&&&&&.....&&&&&&&&&&...........&..&&&&...
|
* .......&&&........&&&.&&&&&&&&&.....&&&&&.................&&&&...
|
* .......&&&...............&&&&&&&.......&&&&&&&&............&&&...
|
* ........&&...................&&&&&&.........................&&&..
|
* .........&.....................&&&&........................&&....
|
* ...............................&&&.......................&&......
|
* ................................&&......................&&.......
|
* .................................&&..............................
|
* ..................................&..............................
|
-->
|
|
<!--
|
* @Date: 2024-04-09 22:11:21
|
* @LastEditors: Sneed
|
* @LastEditTime: 2024-04-26 21:23:30
|
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/processParam/index.vue
|
实时看板
|
-->
|
<template>
|
<el-main>
|
<el-card shadow="never">
|
<el-container style="height: 100%;">
|
<el-aside width="300px" style="height: 100%;">
|
<el-container>
|
<el-main class="nopadding">
|
<el-row style="margin-top: 14px;">
|
工位
|
</el-row>
|
<MYTree v-model="treeChecked" @loaded="query"></MYTree>
|
</el-main>
|
</el-container>
|
</el-aside>
|
<el-container>
|
<el-main v-show="list.length > 0">
|
<el-row>
|
<el-col :span="4">
|
<!-- <el-switch v-model="isShowTable" class="mb-2" active-text="数据表" inactive-text="统计图" /> -->
|
</el-col>
|
<el-col :span="20" style='text-align: right;'>
|
<el-date-picker :max-range="3" :clearable="true" value-format="YYYY-MM-DD"
|
style="width: 250px" v-model="time" type="daterange" range-separator="-"
|
start-placeholder="" end-placeholder="" :disabled-date="disabledDate"
|
@calendar-change="change" />
|
</el-col>
|
</el-row>
|
<TimeLine v-model="timeRange" ref="timeLine"></TimeLine>
|
<el-collapse v-model="activeList">
|
<el-collapse-item :title="item.description" :name="index" v-for="(item, index) in list"
|
:key="index">
|
<div
|
v-if="(['DeviceStatus', 'ProcessProgram'].includes(item.name) && item?.dayCharts?.series?.length > 1) || (!['DeviceStatus', 'ProcessProgram'].includes(item.name) && item?.dayCharts?.series?.length > 0) && activeList.indexOf(index) > -1">
|
<div>
|
<el-button size="small" @click="viewData(item)">查看数据</el-button>
|
</div>
|
<scEcharts style="width:100%" height="200px" :option="item?.dayCharts">
|
</scEcharts>
|
</div>
|
<el-empty v-else description="暂无数据" />
|
</el-collapse-item>
|
</el-collapse>
|
</el-main>
|
<el-main v-show="list.length == 0">
|
<el-empty description="暂无数据" />
|
</el-main>
|
</el-container>
|
</el-container>
|
</el-card>
|
<el-drawer v-model="drawer" direction="rtl">
|
<template #default>
|
<div>
|
<el-table :data="tableData" v-if="drawer" border stripe>
|
<el-table-column prop="time" label="时间" />
|
<el-table-column prop="value" :label="drawerName" />
|
</el-table>
|
</div>
|
</template>
|
</el-drawer>
|
</el-main>
|
</template>
|
|
<script>
|
import moment from 'moment'
|
import scEcharts from '@/components/scEcharts';
|
import TimeLine from './TimeLine.vue'
|
import MYTree from '../MYTree.vue'
|
|
export default {
|
components: {
|
TimeLine,
|
MYTree,
|
scEcharts
|
},
|
watch: {
|
treeChecked() {
|
this.query()
|
},
|
time(val) {
|
if (!val?.[0]) return
|
this.query()
|
},
|
timeRange(val) {
|
this.queryChart()
|
}
|
},
|
data() {
|
return {
|
legend: [],
|
drawer: false,
|
drawerName: '',
|
tableData: [],
|
tableCol: [
|
],
|
isShowTable: false,
|
list: [],
|
activeList: [0, 1, 2, 3, 4, 5, 6, 7, 8],
|
timeRange: '',
|
treeChecked: [],
|
timeStart: '',
|
time: [moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
|
disabledDate: Date => {
|
if (!this.timeStart) return false
|
let max = moment(this.timeStart, 'YYYY-MM-DD').add(3, 'd').format('YYYY-MM-DD')
|
let min = moment(this.timeStart, 'YYYY-MM-DD').subtract(3, 'd').format('YYYY-MM-DD')
|
return !moment(Date).isBetween(min, max);
|
},
|
}
|
},
|
created() {
|
// console.log(series)
|
this.init()
|
},
|
methods: {
|
init() {
|
this.$HTTP.get('/api/blade-mdc/process-parameter').then(res => {
|
if (res.code === 200) {
|
this.legend = res.data
|
}
|
})
|
},
|
viewData(item) {
|
let data = {
|
FeedOverride: '进给倍率',
|
FeedSpeed: '进给速度',
|
SpindleOverride: '主轴倍率',
|
SpindleSpeed: '主轴转速',
|
Output: '产量',
|
ProcessProgram: '程序名',
|
DeviceStatus: '设备状态',
|
}
|
this.drawerName = data[item.name]
|
|
this.$HTTP.post('/api/blade-mdc/process-parameter/item?current=1&size=1500', {
|
endTime: this.timeRange.endTime,
|
startTime: this.timeRange.startTime,
|
item: item.name,
|
methodEnum: "HOUR",
|
workstationId: this.treeChecked.toString(),
|
workstationName: ''
|
}).then(res => {
|
if (res.code === 200) {
|
if (item.name !== 'DeviceStatus') {
|
this.tableData = res.data.records
|
}
|
this.tableData = res.data.records.map(item => {
|
return {
|
...item,
|
value: this.legend.find(v => v.code === item.value)?.name
|
}
|
})
|
this.drawer = true
|
}
|
})
|
},
|
query() {
|
this.$refs?.timeLine?.init({
|
dates: this.time,
|
workstationId: this.treeChecked.toString()
|
})
|
this.$HTTP.get('/api/blade-mdc/process-parameter/param', { workstationId: this.treeChecked.toString() }).then(res => {
|
if (res.code === 200) {
|
this.list = res.data
|
this.queryChart()
|
}
|
})
|
},
|
queryChart() {
|
this.list.forEach(item => {
|
this.queryChart1(item)
|
})
|
},
|
queryChart1(item) {
|
let index = this.list.findIndex(item => item.name === 'DeviceStatus')
|
this.list[index] = Object.assign({
|
...this.list[index],
|
dayCharts: {}
|
})
|
this.$HTTP.post('/api/blade-mdc/process-parameter/chart/dmp-item', {
|
methodEnum: "HOUR",
|
startTime: this.timeRange.startTime,
|
endTime: this.timeRange.endTime,
|
workstationId: this.treeChecked.toString(),
|
workstationName: '',
|
dmpDTO: {
|
id: this.treeChecked.toString(),
|
dmpDeviced: item.dmpDeviceId,
|
name: item.name,
|
description: item.description,
|
dataType: item.dataType,
|
wcsDataType: item.wcsDataType,
|
processParameter: item.processParameter
|
}
|
}).then(res => {
|
if (['DeviceStatus', 'ProcessProgram'].includes(item.name)) {
|
this.setDeviceStatusOptions(res.data, item.name)
|
} else {
|
this.setLineOptions(res.data.data, item.name)
|
}
|
})
|
},
|
setLineOptions(data, myname) {
|
if (!data) return
|
console.log(data, myname)
|
let xAxis = data?.map(item => {
|
return item.time
|
})
|
let yAxisData = data?.map(item => {
|
return item.value
|
})
|
let dayCharts = {
|
tooltip: {
|
position: ['50%', '50%']
|
},
|
legend: [
|
],
|
title: {
|
text: '',
|
subtext: '',
|
},
|
yAxis: {
|
type: 'value',
|
},
|
series: [
|
{
|
data: yAxisData,
|
type: 'line',
|
|
}
|
],
|
xAxis: {
|
type: 'category',
|
data: xAxis
|
},
|
}
|
if (yAxisData?.length == 0) {
|
let index = this.list.findIndex(item => item.name === myname)
|
this.list[index] = Object.assign({
|
...this.list[index],
|
dayCharts: {}
|
})
|
} else {
|
console.log(myname, '>>>>>>???????????>>>>>>', yAxisData)
|
let index = this.list.findIndex(item => item.name === myname)
|
this.list[index] = Object.assign({
|
...this.list[index],
|
dayCharts
|
})
|
}
|
|
},
|
setDeviceStatusOptions(data, myname) {
|
let total = Math.abs(moment(this.timeRange.startTime).diff(moment(this.timeRange.endTime)))
|
let start = this.timeRange.startTime
|
let len = data.data.length
|
if (moment(data.data[len - 1].time).unix() < moment(this.timeRange.endTime).unix()) {
|
let addItem = {
|
time: this.timeRange.endTime,
|
value: data.data[len - 1].value
|
}
|
data.data.push(addItem)
|
}
|
let series = data.data.map((item, i) => {
|
let current = Math.abs(moment(start).diff(moment(item.time)))
|
start = item.time
|
let name = i === 0 ? '' : data.data[i - 1].name
|
if (myname === 'ProcessProgram') {
|
name = item.value
|
}
|
// let color = !name ? 'transparent' : data.data[i - 1].color
|
return {
|
name,
|
type: 'bar',
|
stack: 'total',
|
barWidth: '20px',
|
data: [current / total],
|
label: {
|
show: true,
|
position: 'insideLeft',
|
color: '#FFF',
|
formatter: params => {
|
if (i == 0 || current === 0) return ''
|
return `${name}:开始时间${moment(data.data[i - 1].time).format('HH:mm')}-${moment(item.time).format('HH:mm')}`
|
}
|
},
|
itemStyle: {
|
// color, // 这一行固定的颜色值需要删除或注释
|
borderColor: '#FFF',
|
borderWidth: 1
|
},
|
}
|
})
|
let dayCharts = {
|
// tooltip: {
|
// position: ['50%', '50%'],
|
// formatter: (value, ticket) => {
|
// console.log('>>>>>>>>>>>>____________', value, ticket)
|
// let add = Math.abs(moment(this.timeRange.startTime).diff(moment(this.timeRange.endTime))) * value
|
// let current = moment(this.timeRange.startTime).add(add, 'ms')
|
// return current.format('HH:mm')
|
// }
|
// },
|
legend: [
|
],
|
title: {
|
text: '',
|
subtext: '',
|
},
|
yAxis: {
|
type: 'category',
|
data: ['']
|
},
|
series,
|
xAxis: {
|
type: 'value',
|
interval: 0.05,
|
axisLabel: {
|
formatter: (value, index) => {
|
let add = Math.abs(moment(this.timeRange.startTime).diff(moment(this.timeRange.endTime))) * value
|
let current = moment(this.timeRange.startTime).add(add, 'ms')
|
return current.format('HH:mm')
|
}
|
},
|
},
|
}
|
let index = this.list.findIndex(item => item.name === myname)
|
this.list[index] = Object.assign({
|
...this.list[index],
|
dayCharts
|
})
|
},
|
change(e) {
|
this.timeStart = e[0] || moment().format('YYYY-MM-DD')
|
if (e[1]) this.timeStart = ''
|
}
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped></style>
|
