| | |
|---|
| | | <!-- |
|---|
| | | * ......................................&&......................... |
|---|
| | | * ....................................&&&.......................... |
|---|
| | | * .................................&&&&............................ |
|---|
| | | * ...............................&&&&.............................. |
|---|
| | | * .............................&&&&&&.............................. |
|---|
| | | * ...........................&&&&&&....&&&..&&&&&&&&&&&&&&&........ |
|---|
| | | * ..................&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&.............. |
|---|
| | | * ................&...&&&&&&&&&&&&&&&&&&&&&&&&&&&&................. |
|---|
| | | * .......................&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&......... |
|---|
| | | * ...................&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&............... |
|---|
| | | * ..................&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&............ |
|---|
| | | * ...............&&&&&@ &&&&&&&&&&..&&&&&&&&&&&&&&&&&&&........... |
|---|
| | | * ..............&&&&&&&&&&&&&&&.&&....&&&&&&&&&&&&&..&&&&&......... |
|---|
| | | * ..........&&&&&&&&&&&&&&&&&&...&.....&&&&&&&&&&&&&...&&&&........ |
|---|
| | | * ........&&&&&&&&&&&&&&&&&&&.........&&&&&&&&&&&&&&&....&&&....... |
|---|
| | | * .......&&&&&&&&.....................&&&&&&&&&&&&&&&&.....&&...... |
|---|
| | | * ........&&&&&.....................&&&&&&&&&&&&&&&&&&............. |
|---|
| | | * ..........&...................&&&&&&&&&&&&&&&&&&&&&&&............ |
|---|
| | | * ................&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&............ |
|---|
| | | * ..................&&&&&&&&&&&&&&&&&&&&&&&&&&&&..&&&&&............ |
|---|
| | | * ..............&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&....&&&&&............ |
|---|
| | | * ...........&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&......&&&&............ |
|---|
| | | * .........&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&.........&&&&............ |
|---|
| | | * .......&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&...........&&&&............ |
|---|
| | | * ......&&&&&&&&&&&&&&&&&&&...&&&&&&...............&&&............. |
|---|
| | | * .....&&&&&&&&&&&&&&&&............................&&.............. |
|---|
| | | * ....&&&&&&&&&&&&&&&.................&&........................... |
|---|
| | | * ...&&&&&&&&&&&&&&&.....................&&&&...................... |
|---|
| | | * ...&&&&&&&&&&.&&&........................&&&&&................... |
|---|
| | | * ..&&&&&&&&&&&..&&..........................&&&&&&&............... |
|---|
| | | * ..&&&&&&&&&&&&...&............&&&.....&&&&...&&&&&&&............. |
|---|
| | | * ..&&&&&&&&&&&&&.................&&&.....&&&&&&&&&&&&&&........... |
|---|
| | | * ..&&&&&&&&&&&&&&&&..............&&&&&&&&&&&&&&&&&&&&&&&&......... |
|---|
| | | * ..&&.&&&&&&&&&&&&&&&&&.........&&&&&&&&&&&&&&&&&&&&&&&&&&&....... |
|---|
| | | * ...&&..&&&&&&&&&&&&.........&&&&&&&&&&&&&&&&...&&&&&&&&&&&&...... |
|---|
| | | * ....&..&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&...........&&&&&&&&..... |
|---|
| | | * .......&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&..............&&&&&&&.... |
|---|
| | | * .......&&&&&.&&&&&&&&&&&&&&&&&&..&&&&&&&&...&..........&&&&&&.... |
|---|
| | | * ........&&&.....&&&&&&&&&&&&&.....&&&&&&&&&&...........&..&&&&... |
|---|
| | | * .......&&&........&&&.&&&&&&&&&.....&&&&&.................&&&&... |
|---|
| | | * .......&&&...............&&&&&&&.......&&&&&&&&............&&&... |
|---|
| | | * ........&&...................&&&&&&.........................&&&.. |
|---|
| | | * .........&.....................&&&&........................&&.... |
|---|
| | | * ...............................&&&.......................&&...... |
|---|
| | | * ................................&&......................&&....... |
|---|
| | | * .................................&&.............................. |
|---|
| | | * ..................................&.............................. |
|---|
| | | --> |
|---|
| | | |
|---|
| | | <!-- |
|---|
| | | * @Date: 2024-04-09 22:11:21 |
|---|
| | | * @LastEditors: Sneed |
|---|
| | | * @LastEditTime: 2024-04-09 22:12:14 |
|---|
| | | * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/realtime-status/index.vue |
|---|
| | | * @LastEditTime: 2024-04-26 21:23:30 |
|---|
| | | * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/processParam/index.vue |
|---|
| | | 实时看板 |
|---|
| | | --> |
|---|
| | | <template> |
|---|
| | | <div> |
|---|
| | | 实时看板 |
|---|
| | | </div> |
|---|
| | | <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> |
|---|
| | | export default { |
|---|
| | | |
|---|
| | | } |
|---|
| | | 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> |
|---|
| | | <style lang="scss" scoped></style> |
|---|
