| | |
| | | * @Author: lzhe lzhe@example.com |
| | | * @Date: 2024-04-26 09:36:18 |
| | | * @LastEditors: lzhe lzhe@example.com |
| | | * @LastEditTime: 2024-05-01 22:44:46 |
| | | * @LastEditTime: 2024-05-14 18:30:07 |
| | | * @FilePath: /smart-web/src/views/mdc/status-record.vue |
| | | * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE |
| | | --> |
| | |
| | | btnLeftList: [{title: "按工位统计",id:"1"},{title: "按工位组统计",id:"2"}], |
| | | btnLeftctive: "1", |
| | | isshowempty: true, |
| | | getGlobalColorList: [], |
| | | shortcuts: [ |
| | | { |
| | | text: '最近3天', |
| | |
| | | params.forEach(item=> { |
| | | dom += `<div>${item.marker}${item.seriesName}:${item.data}%</div>` |
| | | }) |
| | | console.log(params) |
| | | return dom; |
| | | } |
| | | }, |
| | |
| | | show: true, |
| | | axisLabel: { |
| | | formatter: function (value) { |
| | | return value + "%"; |
| | | return value * 100 + "%"; |
| | | } |
| | | }, |
| | | data: [2,20,40,60,80,100] |
| | |
| | | show: true, |
| | | axisLabel: { |
| | | formatter: function (value) { |
| | | return value + "%"; |
| | | return value * 100 + "%"; |
| | | } |
| | | }, |
| | | data: [2,20,40,60,80,100] |
| | |
| | | show: true, |
| | | axisLabel: { |
| | | formatter: function (value) { |
| | | return value + "%"; |
| | | return value * 100 + "%"; |
| | | } |
| | | }, |
| | | data: [2,20,40,60,80,100] |
| | |
| | | this.init(); |
| | | this.getTree2List(); //按工位统计树 |
| | | this.getDataA(); |
| | | this.getGlobal(); //获取颜色 |
| | | }, |
| | | methods: { |
| | | getGlobal() { |
| | | this.$HTTP.get(`/api/blade-cps/global_wcs/list`).then(res=> { |
| | | if(res.code == 200) { |
| | | this.getGlobalColorList = res.data; |
| | | } |
| | | }) |
| | | }, |
| | | getDataA() { |
| | | var ids = []; |
| | | this.treeChecked.forEach(item=> { |
| | | ids.push(item.id); |
| | | }) |
| | | if(this.btnLeftctive == 1) { //按工位统计 |
| | | var obj = { |
| | | ids: ids, |
| | | ids: this.ids, |
| | | localDate: this.date, |
| | | type: 0 |
| | | } |
| | | }else if(this.btnLeftctive == 1) { //按工位组统计 |
| | | }else if(this.btnLeftctive == 2) { //按工位组统计 |
| | | var obj = { |
| | | groupCategory: 1, |
| | | groupType: "group_workstation", |
| | | ids: ids, |
| | | ids: this.ids, |
| | | localDate: this.date, |
| | | type: 1 |
| | | } |
| | |
| | | |
| | | // 排除运行时间为0的情况 |
| | | var totalRunTime = timeSums[0] || 1; |
| | | |
| | | // 计算每个状态的百分比数据 |
| | | var lastData = Object.keys(resultObject).map(key => { |
| | | var data = resultObject[key].map((item, index) => { |
| | | if (index === 0) { // 只计算时间的百分比 |
| | | return item == 0?0:Number((item / totalRunTime * 100).toFixed(2)); |
| | | } else { |
| | | return item; // 计数保持不变 |
| | | } |
| | | }); |
| | | return { |
| | | // var lastData = Object.keys(resultObject).map(key => { |
| | | // var data = resultObject[key].map((item, index) => { |
| | | // if (index === 0) { // 只计算时间的百分比 |
| | | // return item == 0?0:Number((item / totalRunTime * 100).toFixed(2)); |
| | | // } else { |
| | | // return item; // 计数保持不变 |
| | | // } |
| | | // }); |
| | | // return { |
| | | // name: key, |
| | | // type: 'bar', |
| | | // stack: 'total', |
| | | // label: { |
| | | // show: false |
| | | // }, |
| | | // emphasis: { |
| | | // focus: 'series' |
| | | // }, |
| | | // barWidth: 60, |
| | | // data |
| | | // } |
| | | // }); |
| | | var lastData = []; |
| | | var colorObj = {}; //设置颜色 |
| | | this.getGlobalColorList.forEach(item=> { |
| | | colorObj[item.name] = item.color; |
| | | }) |
| | | Object.keys(resultObject).map(key => { |
| | | resultObject[key].forEach((item,index)=> { |
| | | if(item != 0) { |
| | | var num = item/timeSums[index]* 100; |
| | | item = num.toFixed(2); |
| | | } |
| | | resultObject[key][index] = item; |
| | | }) |
| | | lastData.push({ |
| | | name: key, |
| | | type: 'bar', |
| | | stack: 'total', |
| | |
| | | emphasis: { |
| | | focus: 'series' |
| | | }, |
| | | itemStyle: { |
| | | "color": colorObj[key] |
| | | }, |
| | | barWidth: 60, |
| | | data |
| | | } |
| | | }); |
| | | return lastData; |
| | | data: resultObject[key] |
| | | }) |
| | | }) |
| | | return lastData.reverse(); |
| | | }, |
| | | getDataChartsA(index) { |
| | | var obj = { |
| | |
| | | } |
| | | if(this.btnLeftctive == 1) { //按工位统计 |
| | | obj.type = 0; |
| | | }else if(this.btnLeftctive == 1) { //按工位组统计 |
| | | }else if(this.btnLeftctive == 2) { //按工位组统计 |
| | | obj.type = 1; |
| | | } |
| | | this.$HTTP.post(`/api/blade-mdc/time-used-analysis/work-stations?current=${this.current}&size=${this.size}`,obj).then(res=> { |
| | |
| | | this.chartOptionA.xAxis.data = xAxis; |
| | | var recordDom = document.getElementById('recordwork' + index); |
| | | this.chartOptionA.series = this.formatChartData(res.data.countStatus); |
| | | console.log(this.chartOptionA.series) |
| | | var myChart = echarts.init(recordDom); |
| | | myChart.setOption(this.chartOptionA); |
| | | console.log(JSON.stringify(this.chartOptionA)) |
| | | } |
| | | }) |
| | | }, |
| | |
| | | } |
| | | if(this.btnLeftctive == 1) { //按工位统计 |
| | | obj.type = 0; |
| | | }else if(this.btnLeftctive == 1) { //按工位组统计 |
| | | }else if(this.btnLeftctive == 2) { //按工位组统计 |
| | | obj.type = 1; |
| | | } |
| | | this.$HTTP.post(`/api/blade-mdc/time-used-analysis/work-stations?current=${this.current}&size=${this.size}`,obj).then(res=> { |
| | | if(res.code == 200) { |
| | | var xAxis = []; |
| | | res.data.workStationDetails == null ? res.data.workStationDetails = [] : res.data.workStationDetails; |
| | | res.data.countStatus == null ? res.data.countStatus = [] : res.data.countStatus; |
| | | res.data.workStationDetails.forEach(item=> { |
| | | xAxis.push(item.name); |
| | | }) |
| | |
| | | this.getDataA(); |
| | | }, |
| | | changeTabB(item,index,index1) { |
| | | if(index == 0) { |
| | | this.setTitle1[0].btnListActive = item.id; |
| | | } |
| | | this.setTitle1[index].btnListActive = item.id; |
| | | this.date = this.setTitle1[0].btnListActive; |
| | | if(index == 0) { |
| | | this.getDataChartsB("DAY"); |
| | |
| | | this.date = this.time[1]; |
| | | }, |
| | | query() { |
| | | console.log(this.activeName) |
| | | this.getTime({endDate: this.time[1],startDate: this.time[0],statisticalMethod: 'SHIFT'}); |
| | | this.date = this.time[1]; |
| | | this.ids = []; |
| | | console.log(this.btnLeftctive) |
| | | if(this.btnLeftctive == 1) { //按工位统计 |
| | | this.treeChecked.forEach(item=> { |
| | | this.ids.push(item.id); |
| | | }) |
| | | }else if(this.btnLeftctive == 1) { //按工位组统计 |
| | | }else if(this.btnLeftctive == 2) { //按工位组统计 |
| | | this.treeListNodeList.forEach(item=> { |
| | | this.ids.push(item.id); |
| | | }) |
| | | } |
| | | console.log(this.ids,2) |
| | | this.getTime({endDate: this.time[1],startDate: this.time[0],statisticalMethod: 'SHIFT'}); |
| | | this.date = this.time[1]; |
| | | this.getDataA(); |
| | | if(this.activeName == "shift") { //按班次统计 |
| | | this.getDataA(); |
| | | }else if(this.activeName == "time") { //按周期统计 |
| | | this.getDataChartsB("DAY"); |
| | | this.getDataChartsB("WEEK"); |
| | | this.getDataChartsB("MONTH",this.setTitle1[2].btnListActive.split("月")[0]); |
| | | } |
| | | } |
| | | } |
| | | } |