1、设备综合效率分析以及设备加工工件报表页面表格高度设置为页面进入时即可拖动水平滚动条的高度
2、首页
(1)OEE标题增加月份展示,利用率等效率标题增加日期展示
(2)公司及车间级看板单击OEE车间图表跳转至设备综合效率分析页面并根据唯一编号筛选页面对应数据
(3)工段级看板单击设备效率统计仪表盘图标跳转至统计分析页面并根据唯一编号筛选页面对应数据
(4)调整折线图数据展示维度,通过当前工段下各个设备前7天的利用率、开动率和开机率轮播展示
| | |
| | | // 工段级前7天利用率折线图 |
| | | getEquipmentDayUtilizationStatisticsApi: productionCode => getAction('/mdc/home/equipmentDayUtilizationStatistics', { productionCode }), |
| | | // 上个月各设备OEE统计 |
| | | getEquipmentOEEMonthStatisticsApi: productionCode => getAction('/mdc/home/equipmentOEEMonthStatistics', { productionCode }) |
| | | getEquipmentOEEMonthStatisticsApi: productionCode => getAction('/mdc/home/equipmentOEEMonthStatistics', { productionCode }), |
| | | // 设备效率仪表盘 |
| | | getEquipmentEfficiencyStatisticsApi: productionCode => getAction('/mdc/home/equipmentEfficiencyStatistics', { productionCode }) |
| | | } |
| | |
| | | nextNextMonthMaintenancePlanNum: 0, |
| | | twoMaintenanceChartData: [['-', '-', '-']], |
| | | barChart: '', |
| | | barChartData: [], |
| | | barChartData: [ |
| | | { |
| | | 'value': '34', |
| | | 'name': '401一工段', |
| | | 'productionCode': '4215215621', |
| | | 'productionId': '1729761410329280513' |
| | | }, |
| | | { |
| | | 'value': '77', |
| | | 'name': '401二工段', |
| | | 'productionCode': '8563354643', |
| | | 'productionId': '1729783206308302849' |
| | | } |
| | | ], |
| | | doubleBarChart: '', |
| | | doubleBarChartData: {}, |
| | | maintenanceConfig: {}, |
| | |
| | | this.getWarrantyMalfunctionDataByApi() |
| | | this.getMonthMaintenanceNumByApi() |
| | | this.getTwoMaintenanceChartDataByApi() |
| | | this.getBarChartDataByApi() |
| | | // this.getBarChartDataByApi() |
| | | this.getDoubleBarChartDataByApi() |
| | | }, |
| | | |
| | |
| | | /* 绘制单柱图 */ |
| | | drawBarChart() { |
| | | this.barChart = this.$echarts.init(document.getElementById('bar_chart')) |
| | | const defaultData = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100] |
| | | const option = { |
| | | title: { |
| | | show: true, // 是否显示标题,默认为true |
| | | text: 'OEE车间', // 主标题文本 |
| | | text: '', // 主标题文本 |
| | | x: 'center', // 标题水平安放位置,可选值为'left'、'center'、'right'或具体的水平坐标值 |
| | | y: 'top', // 标题垂直安放位置,可选值为'top'、'bottom'、'center'或具体的垂直坐标值 |
| | | textStyle: { |
| | |
| | | trigger: 'axis', |
| | | axisPointer: { |
| | | type: 'shadow' |
| | | }, |
| | | formatter: function(params) { |
| | | return '<span style="font-weight:bolder;">' + params[0].name + '</span><br/>' + |
| | | '<span style="display:inline-block; width:10px; height:10px; border-radius:100px; margin-right:5px; background:' + params[0].color + '"></span>' + ' OEE: ' + params[0].value + '%' |
| | | }, |
| | | // backgroundColor: 'rgba(9, 24, 48, 0.5)', |
| | | borderColor: 'rgba(75, 253, 238, 0.4)', |
| | |
| | | nameLocation: 'middle', |
| | | nameGap: 40, // x轴name与横坐标轴线的间距 |
| | | type: 'category', |
| | | data: this.barChartData.map(item => item.name), |
| | | data: this.barChartData.map(item => item.productionId), |
| | | axisLine: { |
| | | lineStyle: { |
| | | color: '#FFFFFF' |
| | |
| | | interval: 0, // 坐标轴刻度标签的显示间隔,在类目轴中有效;默认会采用标签不重叠的策略间隔显示标签;可以设置成0强制显示所有标签;如果设置为1,表示『隔一个标签显示一个标签』,如果值为2,表示隔两个标签显示一个标签,以此类推。 |
| | | rotate: this.barChartData.length >= 5 ? -30 : 0, // 刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠;旋转的角度从-90度到90度 |
| | | inside: false, // 刻度标签是否朝内,默认朝外 |
| | | margin: 6 // 刻度标签与轴线之间的距离 |
| | | formatter: value => { |
| | | return `${this.barChartData.find(item => item.productionId === value).name}` |
| | | } |
| | | }, |
| | | axisTick: { |
| | | show: true, |
| | |
| | | } |
| | | }], |
| | | yAxis: [{ |
| | | name: '数量', |
| | | nameLocation: 'middle', |
| | | nameGap: 30, // x轴name与横坐标轴线的间距 |
| | | name: '%', |
| | | max: 100, |
| | | axisLabel: { |
| | | formatter: '{value}', |
| | | color: '#e2e9ff' |
| | |
| | | itemStyle: { |
| | | color: '#55D6A5' |
| | | }, |
| | | showBackground: true, |
| | | zlevel: 1, |
| | | label: { |
| | | show: true, |
| | | lineHeight: 10, |
| | |
| | | fontSize: 18 |
| | | } |
| | | } |
| | | }] |
| | | }, |
| | | { |
| | | name: '背景', |
| | | type: 'bar', |
| | | barWidth: '15%', |
| | | barGap: '-100%', |
| | | data: defaultData, |
| | | itemStyle: { |
| | | color: '#11294d' |
| | | } |
| | | }] |
| | | } |
| | | option.title.text = moment().subtract(1, 'months').format('M月') + `OEE车间` |
| | | this.barChart.setOption(option, true) |
| | | |
| | | this.barChart.on('click', params => { |
| | | console.log('params', params) |
| | | let productionId |
| | | // 点击的是柱体的值,否则点击的为柱体背景阴影 |
| | | if (params.seriesIndex === 0) productionId = params.data.productionId |
| | | else productionId = params.name |
| | | |
| | | this.$router.push({ |
| | | name: 'mdc-base-OEEAnalysis', |
| | | params: { isEquipment: false, productionId } |
| | | }) |
| | | }) |
| | | }, |
| | | |
| | | /* 绘制双柱图 */ |
| | |
| | | <a-descriptions-item label="操作工"> |
| | | {{equipmentInfo.operator}} |
| | | </a-descriptions-item> |
| | | <a-descriptions-item label="设备状态"> |
| | | {{equipmentInfo.equipmentStatus}} |
| | | </a-descriptions-item> |
| | | </a-descriptions> |
| | | </dv-border-box-11> |
| | | |
| | |
| | | standard: '无', |
| | | depart: '轧机中心', |
| | | workshopSection: '407一工段', |
| | | operator: 'admin' |
| | | operator: 'admin', |
| | | equipmentStatus: 0 |
| | | }, |
| | | buttonList: [ |
| | | { |
| | |
| | | drawGaugeChart1(opt) { |
| | | this.gaugeChart1 = this.$echarts.init(document.getElementById('gauge_chart1')) |
| | | const option = Object.assign({}, opt) |
| | | option.title.text = '利用率' |
| | | option.title.text = moment().subtract(1, 'days').format('M月D日') + '利用率' |
| | | option.series[0].name = '利用率' |
| | | option.series[0].data = [56] |
| | | this.gaugeChart1.setOption(option, true) |
| | |
| | | drawGaugeChart2(opt) { |
| | | this.gaugeChart2 = this.$echarts.init(document.getElementById('gauge_chart2')) |
| | | const option = Object.assign({}, opt) |
| | | option.title.text = '开动率' |
| | | option.title.text = moment().subtract(1, 'days').format('M月D日') + '开动率' |
| | | option.series[0].name = '开动率' |
| | | option.series[0].data = [23] |
| | | this.gaugeChart2.setOption(option, true) |
| | |
| | | drawGaugeChart3(opt) { |
| | | this.gaugeChart3 = this.$echarts.init(document.getElementById('gauge_chart3')) |
| | | const option = Object.assign({}, opt) |
| | | option.title.text = '开机率' |
| | | option.title.text = moment().subtract(1, 'days').format('M月D日') + '开机率' |
| | | option.series[0].name = '开机率' |
| | | option.series[0].data = [44] |
| | | this.gaugeChart3.setOption(option, true) |
| | |
| | | drawGaugeChart4(opt) { |
| | | this.gaugeChart4 = this.$echarts.init(document.getElementById('gauge_chart4')) |
| | | const option = Object.assign({}, opt) |
| | | option.title.text = 'OEE' |
| | | option.title.text = moment().subtract(1, 'months').format('M月') + `OEE` |
| | | option.series[0].name = 'OEE' |
| | | option.series[0].data = [78] |
| | | this.gaugeChart4.setOption(option, true) |
| | |
| | | { value: '0', name: '运行' } |
| | | ], |
| | | efficiencyChart: '', |
| | | efficiencyData:[], |
| | | efficiencyData: [], |
| | | techConditionChart: '', |
| | | techConditionData: [ |
| | | { value: '0', name: '合格' }, |
| | |
| | | nextNextMonthMaintenancePlanNum: 0, |
| | | twoMaintenanceChartData: [['-', '-', '-']], |
| | | barChart: '', |
| | | barChartData: [], |
| | | barChartData: [ |
| | | { |
| | | 'value': '32', |
| | | 'name': '401', |
| | | 'productionCode': '125487318', |
| | | 'productionId': '1729419336207761409' |
| | | }, |
| | | { |
| | | 'value': '23', |
| | | 'name': '406', |
| | | 'productionCode': '4212152142', |
| | | 'productionId': '1729419361201618945' |
| | | }, |
| | | { |
| | | 'value': '11', |
| | | 'name': '407', |
| | | 'productionCode': '321321345', |
| | | 'productionId': '1729419381665628161' |
| | | }, |
| | | { |
| | | 'value': '44', |
| | | 'name': '408', |
| | | 'productionCode': '536341343', |
| | | 'productionId': '1729670118396067842' |
| | | } |
| | | ], |
| | | doubleBarChart: '', |
| | | doubleBarChartData: {}, |
| | | efficiencyChartConfig: {}, |
| | |
| | | this.getWarrantyMalfunctionDataByApi() |
| | | this.getMonthMaintenanceNumByApi() |
| | | this.getTwoMaintenanceChartDataByApi() |
| | | this.getBarChartDataByApi() |
| | | // this.getBarChartDataByApi() |
| | | this.getDoubleBarChartDataByApi() |
| | | }, |
| | | |
| | |
| | | /* 绘制单柱图 */ |
| | | drawBarChart() { |
| | | this.barChart = this.$echarts.init(document.getElementById('bar_chart')) |
| | | const defaultData = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100] |
| | | const option = { |
| | | title: { |
| | | show: true, // 是否显示标题,默认为true |
| | | text: 'OEE车间', // 主标题文本 |
| | | text: '', // 主标题文本 |
| | | x: 'center', // 标题水平安放位置,可选值为'left'、'center'、'right'或具体的水平坐标值 |
| | | y: 'top', // 标题垂直安放位置,可选值为'top'、'bottom'、'center'或具体的垂直坐标值 |
| | | textStyle: { |
| | |
| | | trigger: 'axis', |
| | | axisPointer: { |
| | | type: 'shadow' |
| | | }, |
| | | formatter: function(params) { |
| | | return '<span style="font-weight:bolder;">' + params[0].name + '</span><br/>' + |
| | | '<span style="display:inline-block; width:10px; height:10px; border-radius:100px; margin-right:5px; background:' + params[0].color + '"></span>' + ' OEE: ' + params[0].value + '%' |
| | | }, |
| | | // backgroundColor: 'rgba(9, 24, 48, 0.5)', |
| | | borderColor: 'rgba(75, 253, 238, 0.4)', |
| | |
| | | nameLocation: 'middle', |
| | | nameGap: 40, // x轴name与横坐标轴线的间距 |
| | | type: 'category', |
| | | data: this.barChartData.map(item => item.name), |
| | | data: this.barChartData.map(item => item.productionId), |
| | | axisLine: { |
| | | lineStyle: { |
| | | color: '#FFFFFF' |
| | |
| | | interval: 0, // 坐标轴刻度标签的显示间隔,在类目轴中有效;默认会采用标签不重叠的策略间隔显示标签;可以设置成0强制显示所有标签;如果设置为1,表示『隔一个标签显示一个标签』,如果值为2,表示隔两个标签显示一个标签,以此类推。 |
| | | rotate: this.barChartData.length >= 6 ? -30 : 0, // 刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠;旋转的角度从-90度到90度 |
| | | inside: false, // 刻度标签是否朝内,默认朝外 |
| | | margin: 6 // 刻度标签与轴线之间的距离 |
| | | margin: 6, // 刻度标签与轴线之间的距离 |
| | | formatter: value => { |
| | | return `${this.barChartData.find(item => item.productionId === value).name}` |
| | | } |
| | | }, |
| | | axisTick: { |
| | | show: true, |
| | |
| | | } |
| | | }], |
| | | yAxis: [{ |
| | | name: '数量', |
| | | nameLocation: 'middle', |
| | | nameGap: 30, // x轴name与横坐标轴线的间距 |
| | | name: '%', |
| | | max: 100, |
| | | axisLabel: { |
| | | formatter: '{value}', |
| | | color: '#e2e9ff' |
| | |
| | | itemStyle: { |
| | | color: '#55D6A5' |
| | | }, |
| | | showBackground: true, |
| | | zlevel: 1, |
| | | label: { |
| | | show: true, |
| | | lineHeight: 10, |
| | |
| | | fontSize: 18 |
| | | } |
| | | } |
| | | }] |
| | | }, |
| | | { |
| | | name: '背景', |
| | | type: 'bar', |
| | | barWidth: '15%', |
| | | barGap: '-100%', |
| | | data: defaultData, |
| | | itemStyle: { |
| | | color: '#11294d' |
| | | } |
| | | }] |
| | | } |
| | | option.title.text = moment().subtract(1, 'months').format('M月') + `OEE车间` |
| | | this.barChart.setOption(option, true) |
| | | |
| | | this.barChart.on('click', params => { |
| | | console.log('params', params) |
| | | let productionId |
| | | // 点击的是柱体的值,否则点击的为柱体背景阴影 |
| | | if (params.seriesIndex === 0) productionId = params.data.productionId |
| | | else productionId = params.name |
| | | |
| | | console.log('productionId', productionId) |
| | | this.$router.push({ |
| | | name: 'mdc-base-OEEAnalysis', |
| | | params: { isEquipment: false, productionId } |
| | | }) |
| | | }) |
| | | }, |
| | | |
| | | /* 绘制双柱图 */ |
| | |
| | | gaugeChart2: '', |
| | | gaugeChart3: '', |
| | | gaugeChart4: '', |
| | | gaugeChartData1: [], |
| | | gaugeChartData2: [], |
| | | gaugeChartData3: [], |
| | | gaugeChartData4: [], |
| | | gaugeChartData: { |
| | | utilizationRate: 0, |
| | | startRate: 0, |
| | | openRate: 0, |
| | | overallEquipmentEfficiency: 0 |
| | | }, |
| | | barChart: '', |
| | | barChartData: [], |
| | | equipmentId: '' |
| | |
| | | beforeDestroy() { |
| | | window.removeEventListener('resize', this.handleWindowResize) |
| | | if (this.barChartCarouselTime) clearInterval(this.barChartCarouselTime) |
| | | if (this.lineChartCarouselTime) clearInterval(this.lineChartCarouselTime) |
| | | }, |
| | | methods: { |
| | | getChartDataByApi() { |
| | |
| | | this.getRunningStateDataByApi() |
| | | this.getMonthMaintenanceNumByApi() |
| | | this.getLineChartDataByApi() |
| | | this.getGaugeChartDataByApi() |
| | | this.getBarChartDataByApi() |
| | | }, |
| | | |
| | |
| | | }) |
| | | }, |
| | | |
| | | /* 调用接口获取设备效率统计 */ |
| | | getGaugeChartDataByApi() { |
| | | signageApi.getEquipmentEfficiencyStatisticsApi(this.productionCode) |
| | | .then(res => { |
| | | console.log('res=', res) |
| | | if (res.success) this.gaugeChartData = res.result |
| | | this.drawGaugeChart(res.result.productionId) |
| | | }) |
| | | }, |
| | | |
| | | /* 调用接口获取上月OEE */ |
| | | getBarChartDataByApi() { |
| | | signageApi.getEquipmentOEEMonthStatisticsApi(this.productionCode) |
| | | .then(res => { |
| | | console.log('res=', res) |
| | | if (res.success) { |
| | | this.barChartData = res.result.map(item => { |
| | | return { |
| | |
| | | /* 绘制折线图 */ |
| | | drawLineChart() { |
| | | this.lineChart = this.$echarts.init(document.getElementById('line_chart')) |
| | | this.lineChartData.equipmentIdList.forEach(item => { |
| | | if (!this.lineChartData.dataList.map(item => item.equipmentId).includes(item)) { |
| | | const equipmentIdObj = { |
| | | equipmentId: item, |
| | | openRate: 0, |
| | | startRate: 0, |
| | | utilizationRate: 0 |
| | | } |
| | | this.lineChartData.dataList.push(equipmentIdObj) |
| | | } |
| | | }) |
| | | const equipmentIdList = this.lineChartData.dataList.map(item => item.equipmentId) |
| | | const newData = { |
| | | xAxis: this.lineChartData.dateList, |
| | | xAxis: equipmentIdList, |
| | | yAxis: [ |
| | | { |
| | | name: '利用率', |
| | |
| | | } |
| | | } |
| | | ], |
| | | series: seriesData |
| | | // dataZoom: { |
| | | // show: false, |
| | | // startValue: 0, // 从头开始。 |
| | | // endValue: 5 // 一次性展示几个 |
| | | // } |
| | | series: seriesData, |
| | | dataZoom: { |
| | | show: false, |
| | | startValue: 0, // 从头开始。 |
| | | endValue: 6 // 一次性展示几个 |
| | | } |
| | | } |
| | | this.lineChart.setOption(option, true) |
| | | |
| | | if (this.lineChartData.equipmentIdList.length <= 7) return |
| | | this.lineChartCarouselTime = setInterval(() => { |
| | | newData.xAxis.push(newData.xAxis.shift()) |
| | | newData.yAxis.forEach(item => item.value.push(item.value.shift())) |
| | | this.$nextTick(() => { |
| | | this.lineChart.setOption(option, true) |
| | | }) |
| | | }, 3000) |
| | | }, |
| | | |
| | | /* 绘制仪表盘图表 */ |
| | |
| | | } |
| | | }, |
| | | tooltip: { |
| | | trigger: 'item', |
| | | formatter: params => { |
| | | return params.seriesName + ':' + params.value + '%' |
| | | } |
| | |
| | | drawGaugeChart1(opt) { |
| | | this.gaugeChart1 = this.$echarts.init(document.getElementById('gauge_chart1')) |
| | | const option = Object.assign({}, opt) |
| | | option.title.text = '利用率' |
| | | option.title.text = moment().subtract(1, 'days').format('M月D日') + `利用率` |
| | | option.series[0].name = '利用率' |
| | | option.series[0].data = [52] |
| | | option.series[0].data = [this.gaugeChartData.utilizationRate] |
| | | this.gaugeChart1.setOption(option, true) |
| | | |
| | | this.gaugeChart1.getZr().on('click', params => { |
| | | // 仅有点击表盘区域才会有以下属性,topTarget表示触发事件对象,shape表示触发事件对象的图像属性,clockwise表示表盘是否以顺时针排列,默认为true |
| | | if (params.topTarget && params.topTarget.shape && params.topTarget.shape.clockwise !== undefined) { |
| | | this.$router.push({ |
| | | name: 'mdc-base-StatisticsChart', |
| | | params: { |
| | | isEquipment: false, |
| | | productionId: this.gaugeChartData.productionId, |
| | | tierName: this.gaugeChartData.productionName |
| | | } |
| | | }) |
| | | } |
| | | }) |
| | | }, |
| | | |
| | | /* 绘制开动率仪表盘图表 */ |
| | | drawGaugeChart2(opt) { |
| | | this.gaugeChart2 = this.$echarts.init(document.getElementById('gauge_chart2')) |
| | | const option = Object.assign({}, opt) |
| | | option.title.text = '开动率' |
| | | option.title.text = moment().subtract(1, 'days').format('M月D日') + '开动率' |
| | | option.series[0].name = '开动率' |
| | | option.series[0].data = [21] |
| | | option.series[0].data = [this.gaugeChartData.startRate] |
| | | this.gaugeChart2.setOption(option, true) |
| | | |
| | | this.gaugeChart2.getZr().on('click', params => { |
| | | // 仅有点击表盘区域才会有以下属性,topTarget表示触发事件对象,shape表示触发事件对象的图像属性,clockwise表示表盘是否以顺时针排列,默认为true |
| | | if (params.topTarget && params.topTarget.shape && params.topTarget.shape.clockwise !== undefined) { |
| | | this.$router.push({ |
| | | name: 'mdc-base-StatisticsChart', |
| | | params: { |
| | | isEquipment: false, |
| | | productionId: this.gaugeChartData.productionId, |
| | | tierName: this.gaugeChartData.productionName |
| | | } |
| | | }) |
| | | } |
| | | }) |
| | | }, |
| | | |
| | | /* 绘制开机率仪表盘图表 */ |
| | | drawGaugeChart3(opt) { |
| | | this.gaugeChart3 = this.$echarts.init(document.getElementById('gauge_chart3')) |
| | | const option = Object.assign({}, opt) |
| | | option.title.text = '开机率' |
| | | option.title.text = moment().subtract(1, 'days').format('M月D日') + '开机率' |
| | | option.series[0].name = '开机率' |
| | | option.series[0].data = [74] |
| | | option.series[0].data = [this.gaugeChartData.openRate] |
| | | this.gaugeChart3.setOption(option, true) |
| | | |
| | | this.gaugeChart3.getZr().on('click', params => { |
| | | // 仅有点击表盘区域才会有以下属性,topTarget表示触发事件对象,shape表示触发事件对象的图像属性,clockwise表示表盘是否以顺时针排列,默认为true |
| | | if (params.topTarget && params.topTarget.shape && params.topTarget.shape.clockwise !== undefined) { |
| | | this.$router.push({ |
| | | name: 'mdc-base-StatisticsChart', |
| | | params: { |
| | | isEquipment: false, |
| | | productionId: this.gaugeChartData.productionId, |
| | | tierName: this.gaugeChartData.productionName |
| | | } |
| | | }) |
| | | } |
| | | }) |
| | | }, |
| | | |
| | | /* 绘制OEE仪表盘图表 */ |
| | | drawGaugeChart4(opt) { |
| | | this.gaugeChart4 = this.$echarts.init(document.getElementById('gauge_chart4')) |
| | | const option = Object.assign({}, opt) |
| | | option.title.text = 'OEE' |
| | | option.title.text = moment().subtract(1, 'months').format('M月') + `OEE` |
| | | option.series[0].name = 'OEE' |
| | | option.series[0].data = [88] |
| | | option.series[0].data = [this.gaugeChartData.overallEquipmentEfficiency] |
| | | this.gaugeChart4.setOption(option, true) |
| | | |
| | | this.gaugeChart4.getZr().on('click', params => { |
| | | // 仅有点击表盘区域才会有以下属性,topTarget表示触发事件对象,shape表示触发事件对象的图像属性,clockwise表示表盘是否以顺时针排列,默认为true |
| | | if (params.topTarget && params.topTarget.shape && params.topTarget.shape.clockwise !== undefined) { |
| | | this.$router.push({ |
| | | name: 'mdc-base-StatisticsChart', |
| | | params: { |
| | | isEquipment: false, |
| | | productionId: this.gaugeChartData.productionId, |
| | | tierName: this.gaugeChartData.productionName |
| | | } |
| | | }) |
| | | } |
| | | }) |
| | | }, |
| | | |
| | | /* 绘制单柱图 */ |
| | |
| | | } |
| | | option.title.text = `${moment().subtract(1, 'months').format('M')}月OEE` |
| | | this.barChart.setOption(option, true) |
| | | |
| | | if (this.barChartData.length <= 6) return |
| | | this.barChartCarouselTime = setInterval(() => { |
| | | this.barChartData.push(this.barChartData.shift()) |
| | |
| | | * 当浏览器可视窗口尺寸发生改变时触发 |
| | | */ |
| | | handleWindowResize(){ |
| | | const boxHeight = +window.getComputedStyle(document.getElementById('EfficiencyShift')).height.slice(0,-2) |
| | | const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0,-2) |
| | | this.scrollY = boxHeight - tableHeadHeight |
| | | const devicePixelRatio = window.devicePixelRatio // 浏览器缩放比 |
| | | if (devicePixelRatio < 1) return // 缩放比小于1时不进行高度重新设置,因为scrollY变大后表格超出部分会被隐藏导致滚动条不可见 |
| | | const clientHeight = document.body.clientHeight // 浏览器可视区域高度 |
| | | const containerTopToClientTopHeight = document.getElementById('EfficiencyShift').getBoundingClientRect().top // 表格容器顶部到浏览器可视区域顶部的间距 |
| | | const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0, -2) // 表格表头高度 |
| | | this.scrollY = clientHeight - containerTopToClientTopHeight - tableHeadHeight // 表格垂直滚动条高度 |
| | | } |
| | | } |
| | | } |
| | |
| | | }, |
| | | props: { nodeTree: '', Type: '', nodePeople: '' }, |
| | | created() { |
| | | const { isEquipment, productionId } = this.$route.params |
| | | if (productionId) { |
| | | console.log('productionId', productionId) |
| | | console.log('isEquipment', isEquipment) |
| | | if (!isEquipment) this.queryParam.parentId = productionId |
| | | else this.queryParam.equipmentId = productionId |
| | | } |
| | | |
| | | this.queryParam.startTime = moment(this.dates[0]).format('YYYY-MM') |
| | | this.queryParam.endTime = moment(this.dates[1]).format('YYYY-MM') |
| | | this.queryParam.typeTree = '1' |
| | |
| | | this.queryParam.parentId = this.queryParamPeople.parentId |
| | | this.queryParam.equipmentId = '' |
| | | } |
| | | |
| | | |
| | | this.queryParam.pageNo = 1 |
| | | this.loadData() |
| | | }, |
| | |
| | | * 当浏览器可视窗口尺寸发生改变时触发 |
| | | */ |
| | | handleWindowResize() { |
| | | const boxHeight = +window.getComputedStyle(document.getElementById('EfficiencyShift')).height.slice(0, -2) |
| | | const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0, -2) |
| | | this.scrollY = boxHeight - tableHeadHeight |
| | | const devicePixelRatio = window.devicePixelRatio // 浏览器缩放比 |
| | | if (devicePixelRatio < 1) return // 缩放比小于1时不进行高度重新设置,因为scrollY变大后表格超出部分会被隐藏导致滚动条不可见 |
| | | const clientHeight = document.body.clientHeight // 浏览器可视区域高度 |
| | | const containerTopToClientTopHeight = document.getElementById('EfficiencyShift').getBoundingClientRect().top // 表格容器顶部到浏览器可视区域顶部的间距 |
| | | const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0, -2) // 表格表头高度 |
| | | this.scrollY = clientHeight - containerTopToClientTopHeight - tableHeadHeight // 表格垂直滚动条高度 |
| | | } |
| | | } |
| | | } |
| | |
| | | * 分辨率改变时同时改变表格高度已保证首页一进入不拖动垂直滚动条时即可拖动表格水平滚动条 |
| | | */ |
| | | handleWindowResize() { |
| | | const tableContainer = document.getElementById('EfficiencyPO') |
| | | const clientHeight = document.body.clientHeight |
| | | const containerTopToClientTopHeight = tableContainer.getBoundingClientRect().top |
| | | const tableContainer = document.getElementById('EfficiencyPO') // 表格容器 |
| | | const clientHeight = document.documentElement.clientHeight || document.body.clientHeight // 浏览器可视区域高度 |
| | | const containerTopToClientTopHeight = tableContainer.getBoundingClientRect().top // 表格容器顶部到浏览器可视区域顶部的间距 |
| | | tableContainer.style.height = (clientHeight - containerTopToClientTopHeight - 32) + 'px' |
| | | } |
| | | } |
| | |
| | | * 分辨率改变时同时改变表格高度已保证首页一进入不拖动垂直滚动条时即可拖动表格水平滚动条 |
| | | */ |
| | | handleWindowResize() { |
| | | const tableContainer = document.getElementById('Efficiency') |
| | | const clientHeight = document.body.clientHeight |
| | | const containerTopToClientTopHeight = tableContainer.getBoundingClientRect().top |
| | | const tableContainer = document.getElementById('Efficiency') // 表格容器 |
| | | const clientHeight = document.documentElement.clientHeight || document.body.clientHeight // 浏览器可视区域高度 |
| | | const containerTopToClientTopHeight = tableContainer.getBoundingClientRect().top // 表格容器顶部到浏览器可视区域顶部的间距 |
| | | tableContainer.style.height = (clientHeight - containerTopToClientTopHeight - 32) + 'px' |
| | | } |
| | | } |
| | |
| | | * 分辨率改变时同时改变表格高度已保证首页一进入不拖动垂直滚动条时即可拖动表格水平滚动条 |
| | | */ |
| | | handleWindowResize() { |
| | | const tableContainer = document.getElementById('EfficiencyShift') |
| | | const clientHeight = document.body.clientHeight |
| | | const containerTopToClientTopHeight = tableContainer.getBoundingClientRect().top |
| | | const tableContainer = document.getElementById('EfficiencyShift') // 表格容器 |
| | | const clientHeight = document.documentElement.clientHeight || document.body.clientHeight // 浏览器可视区域高度 |
| | | const containerTopToClientTopHeight = tableContainer.getBoundingClientRect().top // 表格容器顶部到浏览器可视区域顶部的间距 |
| | | tableContainer.style.height = (clientHeight - containerTopToClientTopHeight - 32) + 'px' |
| | | } |
| | | } |