From dcf9c9e0410fe1186239e3f8d6f7bdc789c08010 Mon Sep 17 00:00:00 2001 From: lzhe <lzhe@example.com> Date: 星期三, 05 六月 2024 18:00:39 +0800 Subject: [PATCH] 1 --- src/views/mdc/processParam/index.vue | 218 ++++++++++++++++++++++++++++++++++++++++++++++++------ 1 files changed, 192 insertions(+), 26 deletions(-) diff --git a/src/views/mdc/processParam/index.vue b/src/views/mdc/processParam/index.vue index 4ae3047..764c3b7 100644 --- a/src/views/mdc/processParam/index.vue +++ b/src/views/mdc/processParam/index.vue @@ -1,7 +1,57 @@ <!-- + * ......................................&&......................... + * ....................................&&&.......................... + * .................................&&&&............................ + * ...............................&&&&.............................. + * .............................&&&&&&.............................. + * ...........................&&&&&&....&&&..&&&&&&&&&&&&&&&........ + * ..................&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&.............. + * ................&...&&&&&&&&&&&&&&&&&&&&&&&&&&&&................. + * .......................&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&......... + * ...................&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&............... + * ..................&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&............ + * ...............&&&&&@ &&&&&&&&&&..&&&&&&&&&&&&&&&&&&&........... + * ..............&&&&&&&&&&&&&&&.&&....&&&&&&&&&&&&&..&&&&&......... + * ..........&&&&&&&&&&&&&&&&&&...&.....&&&&&&&&&&&&&...&&&&........ + * ........&&&&&&&&&&&&&&&&&&&.........&&&&&&&&&&&&&&&....&&&....... + * .......&&&&&&&&.....................&&&&&&&&&&&&&&&&.....&&...... + * ........&&&&&.....................&&&&&&&&&&&&&&&&&&............. + * ..........&...................&&&&&&&&&&&&&&&&&&&&&&&............ + * ................&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&............ + * ..................&&&&&&&&&&&&&&&&&&&&&&&&&&&&..&&&&&............ + * ..............&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&....&&&&&............ + * ...........&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&......&&&&............ + * .........&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&.........&&&&............ + * .......&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&...........&&&&............ + * ......&&&&&&&&&&&&&&&&&&&...&&&&&&...............&&&............. + * .....&&&&&&&&&&&&&&&&............................&&.............. + * ....&&&&&&&&&&&&&&&.................&&........................... + * ...&&&&&&&&&&&&&&&.....................&&&&...................... + * ...&&&&&&&&&&.&&&........................&&&&&................... + * ..&&&&&&&&&&&..&&..........................&&&&&&&............... + * ..&&&&&&&&&&&&...&............&&&.....&&&&...&&&&&&&............. + * ..&&&&&&&&&&&&&.................&&&.....&&&&&&&&&&&&&&........... + * ..&&&&&&&&&&&&&&&&..............&&&&&&&&&&&&&&&&&&&&&&&&......... + * ..&&.&&&&&&&&&&&&&&&&&.........&&&&&&&&&&&&&&&&&&&&&&&&&&&....... + * ...&&..&&&&&&&&&&&&.........&&&&&&&&&&&&&&&&...&&&&&&&&&&&&...... + * ....&..&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&...........&&&&&&&&..... + * .......&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&..............&&&&&&&.... + * .......&&&&&.&&&&&&&&&&&&&&&&&&..&&&&&&&&...&..........&&&&&&.... + * ........&&&.....&&&&&&&&&&&&&.....&&&&&&&&&&...........&..&&&&... + * .......&&&........&&&.&&&&&&&&&.....&&&&&.................&&&&... + * .......&&&...............&&&&&&&.......&&&&&&&&............&&&... + * ........&&...................&&&&&&.........................&&&.. + * .........&.....................&&&&........................&&.... + * ...............................&&&.......................&&...... + * ................................&&......................&&....... + * .................................&&.............................. + * ..................................&.............................. + --> + +<!-- * @Date: 2024-04-09 22:11:21 * @LastEditors: Sneed - * @LastEditTime: 2024-04-26 19:42:25 + * @LastEditTime: 2024-04-26 21:23:30 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/processParam/index.vue 瀹炴椂鐪嬫澘 --> @@ -26,7 +76,7 @@ <!-- <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="false" value-format="YYYY-MM-DD" + <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" /> @@ -36,13 +86,14 @@ <el-collapse v-model="activeList"> <el-collapse-item :title="item.description" :name="index" v-for="(item, index) in list" :key="index"> - <div> - <el-button size="small">鏌ョ湅鏁版嵁</el-button> + <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> - <scEcharts v-if="item?.dayCharts?.series?.length > 1 && activeList.indexOf(index) > -1" - style="width:100%" height="300px" :option="item?.dayCharts"> - - </scEcharts> <el-empty v-else description="鏆傛棤鏁版嵁" /> </el-collapse-item> </el-collapse> @@ -53,6 +104,16 @@ </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> @@ -72,7 +133,8 @@ treeChecked() { this.query() }, - time() { + time(val) { + if (!val?.[0]) return this.query() }, timeRange(val) { @@ -81,38 +143,70 @@ }, data() { return { + legend: [], + drawer: false, + drawerName: '', + tableData: [], + tableCol: [ + ], isShowTable: false, list: [], activeList: [0, 1, 2, 3, 4, 5, 6, 7, 8], timeRange: '', treeChecked: [], - timeStart: moment().format('YYYY-MM-DD'), + 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); - }, - dayCharts1: { - }, - dayCharts2: { - }, - dayCharts3: { - }, - dayCharts4: { - }, - dayCharts5: { }, } }, 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 } }) }, @@ -157,17 +251,80 @@ }).then(res => { if (['DeviceStatus', 'ProcessProgram'].includes(item.name)) { this.setDeviceStatusOptions(res.data, item.name) + } else { + this.setLineOptions(res.data.data, item.name) } }) }, - setDeviceStatusOptions(data, 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 - let color = !name ? 'transparent' : data.data[i - 1].color + if (myname === 'ProcessProgram') { + name = item.value + } + // let color = !name ? 'transparent' : data.data[i - 1].color return { name, type: 'bar', @@ -184,18 +341,26 @@ } }, itemStyle: { - color, // 杩欎竴琛屽浐瀹氱殑棰滆壊鍊奸渶瑕佸垹闄ゆ垨娉ㄩ噴 + // color, // 杩欎竴琛屽浐瀹氱殑棰滆壊鍊奸渶瑕佸垹闄ゆ垨娉ㄩ噴 borderColor: '#FFF', borderWidth: 1 }, } }) - let arr = [12, 8, 9, 4] 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: '璁惧鐘舵�佺粺璁″浘', + text: '', subtext: '', }, yAxis: { @@ -215,7 +380,7 @@ }, }, } - let index = this.list.findIndex(item => item.name === name) + let index = this.list.findIndex(item => item.name === myname) this.list[index] = Object.assign({ ...this.list[index], dayCharts @@ -223,6 +388,7 @@ }, change(e) { this.timeStart = e[0] || moment().format('YYYY-MM-DD') + if (e[1]) this.timeStart = '' } }, } -- Gitblit v1.9.3