<!--
|
* @Date: 2024-04-09 22:11:21
|
* @LastEditors: gaoshp
|
* @LastEditTime: 2024-10-28 19:51:45
|
* @FilePath: /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: 8px;font-size: 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="18" 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-col :span="2" style='text-align: right;'>
|
<el-button type="primary" @click="exportExcel">导出</el-button>
|
</el-col> -->
|
</el-row>
|
<TimeLine v-model="timeRange" ref="timeLine"></TimeLine>
|
<el-collapse v-model="activeList">
|
<el-collapse-item :title="item.deLabel" :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="item.height" :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>
|
<scDialog v-model="visible">
|
<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">
|
全选
|
</el-checkbox>
|
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
|
<el-checkbox v-for="city in list" :key="city.id" :label="city.id" :value="city.id">
|
{{ city.description }}
|
</el-checkbox>
|
</el-checkbox-group>
|
<template #footer>
|
<el-button type="primary" @click="save">确定</el-button>
|
</template>
|
</scDialog>
|
</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);
|
},
|
visible: false,
|
checkAll: false,
|
isIndeterminate: false,
|
checkedCities: []
|
}
|
},
|
created() {
|
// console.log(series)
|
this.init()
|
},
|
methods: {
|
handleCheckAllChange(val) {
|
this.checkedCities = val ? this.list.map(v => v.id) : []
|
this.isIndeterminate = false
|
},
|
handleCheckedCitiesChange(value) {
|
console.log(value)
|
this.checkAll = value.length === this.list.length
|
this.isIndeterminate = value.length > 0 && value.length < this.list.length
|
},
|
save() {
|
console.log(this.checkedCities)
|
this.$HTTP.post(`/api/blade-mdc/process-parameter/excel/export`, {
|
collectItem: this.list.filter(v => this.checkedCities.includes(v.id)),
|
endTime: this.timeRange.endTime,
|
startTime: this.timeRange.startTime,
|
methodEnum: 'HOUR',
|
workstationId: this.treeChecked.toString(),
|
workstationName: ''
|
}).then(res => {
|
if (res.success) {
|
window.open(res.data.link)
|
} else {
|
this.$message.error(res.msg)
|
}
|
})
|
},
|
exportExcel() {
|
this.checkAll = false
|
this.isIndeterminate = false
|
this.checkedCities = []
|
this.visible = true
|
},
|
init() {
|
this.$HTTP.get('/api/blade-mdc/process-parameter').then(res => {
|
if (res.code === 200) {
|
this.legend = res.data
|
}
|
})
|
},
|
viewData(item) {
|
this.drawerName = item.dpLabel
|
|
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.map(v => {
|
return {
|
...v,
|
}
|
})
|
} else {
|
this.tableData = res.data.records.map(item => {
|
return {
|
...item,
|
value: this.legend.find(v => v.code === item.value)?.name
|
}
|
})
|
}
|
|
this.drawer = true
|
}
|
})
|
},
|
query() {
|
if (!this.treeChecked.toString()) return
|
console.log(this.treeChecked.toString(), '>>>>>>>>>/')
|
this.$refs?.timeLine?.init({
|
dates: this.time,
|
workstationId: this.treeChecked.toString()
|
})
|
this.list = []
|
this.$HTTP.get('/api/blade-mdc/process-parameter/params', { workstationId: this.treeChecked.toString() }).then(res => {
|
if (res.code === 200) {
|
console.log('jkjkjkjkj', this.list)
|
this.list = res.data.map(v => {
|
let name = v.isProcessParam ? 'ProcessProgram' : v.dpName
|
return {
|
...v,
|
name: name,
|
height: ['ProcessProgram', 'DeviceStatus'].includes(v.name) ? '100px' : '200px'
|
}
|
})
|
this.queryChart()
|
}
|
})
|
},
|
queryChart() {
|
this.list.forEach(item => {
|
this.queryChart1(item)
|
})
|
},
|
queryChart1(item) {
|
let index = this.list.findIndex(item => item.dpName === 'DeviceStatus')
|
this.list[index] = Object.assign({
|
...this.list[index],
|
dayCharts: {}
|
})
|
let params = { ...item }
|
try {
|
delete params.name
|
delete params.height
|
} catch (err) { console.error(err) }
|
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: '',
|
dpDTO: {
|
id: this.treeChecked.toString(),
|
// name: item.name,
|
...params
|
// dmpDeviced: item.dmpDeviceId,
|
// description: item.description,
|
// dataType: item.dataType,
|
// wcsDataType: item.wcsDataType,
|
// processParameter: item.processParameter
|
}
|
}).then(res => {
|
// if (['DeviceStatus', 'ProcessProgram'].includes(item.name)) {
|
if (item.paramChartType === 'distribute') {
|
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',
|
step: 'start',
|
}
|
],
|
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 {
|
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 (len > 0 && 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
|
// },
|
tooltip: {
|
show: true,
|
trigger: 'item',
|
position: 'top',
|
triggerOn: 'click',
|
formatter: (value, ticket) => {
|
// console.log('----------1111')
|
// let add = Math.abs(moment(this.timeRange.startTime).diff(moment(this.timeRange.endTime))) * value
|
// let current = moment(this.timeRange.startTime).add(add, 'ms')
|
// console.log('--11111111------------', current)
|
// return current.format('HH:mm')
|
// return value
|
if (i == 0 || current === 0) return ''
|
return `${name}:时段${moment(data.data[i - 1].time).format('HH:mm')}-${moment(item.time).format('HH:mm')}`
|
}
|
},
|
}
|
})
|
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: {
|
selectedMode: false
|
},
|
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')
|
}
|
},
|
},
|
}
|
console.log(dayCharts, '>>>>>>>???')
|
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>
|
