| | |
| | | getEquipmentStatusStatisticsApi: productionCode => getAction('/mdc/home/equipmentStatusStatistics', { productionCode }), |
| | | // 设备利用率 |
| | | getEquipmentUtilizationStatisticsApi: productionCode => getAction('/mdc/home/equipmentUtilizationStatistics', { productionCode }), |
| | | // 技术状态 |
| | | getEquipmentTechnologyStatusListApi: productionCode => getAction('/eam/calibrationOrder/getEquipmentTechnologyStatusList', { productionCode }), |
| | | // 设备报修故障 |
| | | getReportRepairEquipmentListApi: productionCode => getAction('/eam/calibrationOrder/getReportRepairEquipmentList', { productionCode }), |
| | | // 本月三保计划 |
| | | getThisMonthMaintenanceListApi: productionCode => getAction('/eam/calibrationOrder/getThisMonthMaintenanceList', { productionCode }), |
| | | // 本月完成三保计划 |
| | | getThisMonthMaintenanceFinishListApi: productionCode => getAction('/eam/calibrationOrder/getThisMonthMaintenanceFinishList', { productionCode }), |
| | | // 下月三保计划 |
| | | getNextMonthMaintenanceList: productionCode => getAction('/eam/calibrationOrder/getNextMonthMaintenanceList', { productionCode }), |
| | | // 下下月三保计划 |
| | | getNextNextMonthMaintenanceListApi: productionCode => getAction('/eam/calibrationOrder/getNextNextMonthMaintenanceList', { productionCode }), |
| | | // 技术状态与报修故障 |
| | | getEquipmentTechnologyStatusAndReportRepairEquipmentListApi: productionCode => getAction('/eam/home/techornology', { productionCode }), |
| | | // 三级保养 |
| | | getThirdMaintenanceConditionApi: productionCode => getAction('/eam/home/maintenance', { productionCode }), |
| | | // 二保计划 |
| | | getTwoMaintenancePlanListApi: productionCode => getAction('/eam/calibrationOrder/getTwoMaintenancePlanList', { productionCode }), |
| | | getTwoMaintenancePlanListApi: productionCode => getAction('/eam/home/secondmaintenance', { productionCode }), |
| | | // 设备OEE统计 |
| | | getEquipmentOEEStatistics: productionCode => getAction('/mdc/home/equipmentOEEStatistics', { productionCode }), |
| | | // 设备OEE和利用率对比 |
| | |
| | | // 点击延期获取弹窗明细 |
| | | getMaintenanceExtensionDetailsListApi: params => getAction('/eam/calibrationOrder/show3MaintenancePostponeList', { params }), |
| | | // 点击本月完成三保获取弹窗明细 |
| | | getMaintenanceOverdueDetailsListApi: params => getAction('/eam/calibrationOrder/show3MaintenanceOverdueList', { params }), |
| | | getMaintenanceOverdueDetailsListApi: params => getAction('/eam/calibrationOrder/show3MaintenanceOverdueList', { params }) |
| | | } |
| | |
| | | <!--<a href="https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/">Vue Antd</a>--> |
| | | <!--</div>--> |
| | | <div class="copyright" |
| | | :style="{background:$route.meta.title==='首页'?'#151548':'',color:$route.meta.title==='首页'?'#fff':''}"> |
| | | :style="{background:$route.meta.title==='首页'?'#fff':''}"> |
| | | Copyright |
| | | <a-icon type="copyright"/> |
| | | 2024 <span>2015-2025 灵秀智能</span> |
| | |
| | | |
| | | <!-- layout content --> |
| | | <a-layout-content |
| | | :style="{ height: '100%', paddingTop: fixedHeader ? '59px' : '0' ,background: $route.meta.title=='首页'?'#151548':''}"> |
| | | :style="{ height: '100%', paddingTop: fixedHeader ? '59px' : '0' ,background: $route.meta.title=='首页'?'#fff':''}"> |
| | | <slot></slot> |
| | | </a-layout-content> |
| | | |
| | |
| | | compStyle = getComputedStyle(q); |
| | | additionalStyles += (compStyle && compStyle.backgroundColor ? "background-color: " + compStyle.backgroundColor + ";" : ""); |
| | | additionalStyles += (compStyle && compStyle.color ? "color: " + compStyle.color + ";" : ""); |
| | | additionalStyles += (compStyle && compStyle.height ? "height: " + compStyle.height + ";" : ""); |
| | | additionalStyles += (compStyle && compStyle.wordWrap ? "word-wrap: " + compStyle.wordWrap + ";" : ""); |
| | | } |
| | | |
| | |
| | | |
| | | export default { |
| | | primaryColor: '#000000', // primary color of ant design |
| | | navTheme: 'dark', // theme for nav menu |
| | | navTheme: 'light', // theme for nav menu |
| | | layout: 'topmenu', // nav menu position: sidemenu or topmenu |
| | | contentWidth: 'Fixed', // layout of content: Fluid or Fixed, only works when layout is topmenu |
| | | fixedHeader: true, // sticky header |
| | |
| | | <template> |
| | | <!--<Component :is="currentSignage" :userType="userType" :productionCode="productionCode"--> |
| | | <!--:workshopSectionProductionCode="workshopSectionProductionCode"--> |
| | | <!--@switchToNextSignage="switchToNextSignage" @backToLastSignage="backToLastSignage">--> |
| | | <!--</Component>--> |
| | | <Component :is="currentSignage" :userType="userType" :productionCode="productionCode" |
| | | :workshopSectionProductionCode="workshopSectionProductionCode" |
| | | @switchToNextSignage="switchToNextSignage" @backToLastSignage="backToLastSignage"> |
| | | </Component> |
| | | </template> |
| | | |
| | | <script> |
| | |
| | | }, |
| | | |
| | | switchToNextSignage(params) { |
| | | console.log('子组件params', params) |
| | | if (params.signageName === 'WorkshopSection') this.branchFactoryProductionCode = this.productionCode |
| | | if (params.signageName === 'Equipment') this.workshopSectionProductionCode = this.productionCode |
| | | this.$nextTick(() => { |
| | |
| | | { |
| | | planTime: '本月三保计划', |
| | | planValueLabel: 'thisMonthMaintenancePlanNum', |
| | | backgroundColor: '#5FE0AF', |
| | | backgroundColor: '#719D8E', |
| | | apiUrl: '/eam/calibrationOrder/showThisMonthMaintenanceList' |
| | | }, |
| | | { |
| | |
| | | { |
| | | planTime: '下月三保计划', |
| | | planValueLabel: 'nextMonthMaintenancePlanNum', |
| | | backgroundColor: '#D6BC52', |
| | | backgroundColor: '#A8985D', |
| | | apiUrl: '/eam/calibrationOrder/showNextMonthMaintenanceList' |
| | | }, |
| | | { |
| | |
| | | getChartDataByApi() { |
| | | this.getRunningStateDataByApi() |
| | | this.getEfficiencyDataByApi() |
| | | this.getTechConditionDataByApi() |
| | | this.getWarrantyMalfunctionDataByApi() |
| | | this.getMonthMaintenanceNumByApi() |
| | | // this.getTechConditionDataByApi() |
| | | // this.getWarrantyMalfunctionDataByApi() |
| | | this.getTechConditionAndWarrantyMalfunctionDataByApi() |
| | | this.getThirdMaintenanceConditionByApi() |
| | | this.getTwoMaintenanceChartDataByApi() |
| | | this.getBarChartDataByApi() |
| | | this.getDoubleBarChartDataByApi() |
| | |
| | | this.runningStateChart.showLoading({ |
| | | text: '数据加载中 ...', |
| | | color: '#0696e1', // 加载动画颜色 |
| | | textColor: '#fff', |
| | | maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层 |
| | | textColor: 'rgba(0, 0, 0, .45)', |
| | | maskColor: 'rgba(0,0,0,.05)' // 遮罩层 |
| | | }) |
| | | signageApi.getEquipmentStatusStatisticsApi() |
| | | .then(res => { |
| | |
| | | this.efficiencyChart.showLoading({ |
| | | text: '数据加载中 ...', |
| | | color: '#0696e1', // 加载动画颜色 |
| | | textColor: '#fff', |
| | | maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层 |
| | | textColor: 'rgba(0, 0, 0, .45)', |
| | | maskColor: 'rgba(0,0,0,.05)' // 遮罩层 |
| | | }) |
| | | signageApi.getEquipmentUtilizationStatisticsApi() |
| | | .then(res => { |
| | |
| | | }) |
| | | }, |
| | | |
| | | /* 调用接口获取技术状态 */ |
| | | getTechConditionDataByApi() { |
| | | /* 调用接口获取技术状态与故障报修 */ |
| | | getTechConditionAndWarrantyMalfunctionDataByApi() { |
| | | this.techConditionChart = this.$echarts.init(document.getElementById('tech_condition_chart')) |
| | | this.warrantyMalfunctionChart = this.$echarts.init(document.getElementById('warranty_malfunction_chart')) |
| | | this.techConditionChart.showLoading({ |
| | | text: '数据加载中 ...', |
| | | color: '#0696e1', // 加载动画颜色 |
| | | textColor: '#fff', |
| | | maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层 |
| | | textColor: 'rgba(0, 0, 0, .45)', |
| | | maskColor: 'rgba(0,0,0,.05)' // 遮罩层 |
| | | }) |
| | | signageApi.getEquipmentTechnologyStatusListApi() |
| | | .then(res => { |
| | | if (res.success && res.result) { |
| | | this.techConditionData = [ |
| | | { value: res.result[0].qualifiedCount, name: '合格', technologyStatus: 'qualified' }, |
| | | { value: res.result[0].disabledCount, name: '禁用', technologyStatus: 'disabled' }, |
| | | { value: res.result[0].limitedUseCount, name: '限用', technologyStatus: 'limitedUse' } |
| | | ] |
| | | this.techConditionChartRequireFinished = true |
| | | this.drawTechConditionChart() |
| | | } |
| | | }) |
| | | }, |
| | | |
| | | /* 调用接口获取设备报修故障 */ |
| | | getWarrantyMalfunctionDataByApi() { |
| | | this.warrantyMalfunctionChart = this.$echarts.init(document.getElementById('warranty_malfunction_chart')) |
| | | this.warrantyMalfunctionChart.showLoading({ |
| | | text: '数据加载中 ...', |
| | | color: '#0696e1', // 加载动画颜色 |
| | | textColor: '#fff', |
| | | maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层 |
| | | textColor: 'rgba(0, 0, 0, .45)', |
| | | maskColor: 'rgba(0,0,0,.05)' // 遮罩层 |
| | | }) |
| | | signageApi.getReportRepairEquipmentListApi() |
| | | signageApi.getEquipmentTechnologyStatusAndReportRepairEquipmentListApi() |
| | | .then(res => { |
| | | if (res.success && res.result) { |
| | | this.warrantyMalfunctionData = [ |
| | | { value: res.result[0].failurTotalCount, name: '报修', isStop: '' }, |
| | | { value: res.result[0].stopCount, name: '停机', isStop: '2' }, |
| | | { value: res.result[0].noStopCount, name: '运行', isStop: '1' } |
| | | this.techConditionData = [ |
| | | { |
| | | value: res.result.jszt.find(item => item.code === 'QUALIFIED').value, |
| | | name: '合格', |
| | | technologyStatus: 'QUALIFIED' |
| | | }, |
| | | { |
| | | value: res.result.jszt.find(item => item.code === 'PROHIBITED').value, |
| | | name: '禁用', |
| | | technologyStatus: 'PROHIBITED' |
| | | }, |
| | | { |
| | | value: res.result.jszt.find(item => item.code === 'RESTRICTED').value, |
| | | name: '限用', |
| | | technologyStatus: 'RESTRICTED' |
| | | } |
| | | ] |
| | | this.warrantyMalfunctionData = [ |
| | | { value: res.result.bxqk.find(item => item.code === 'bx').value, name: '报修', isStop: '' }, |
| | | { value: res.result.bxqk.find(item => item.code === 'stop').value, name: '停机', isStop: '2' }, |
| | | { value: res.result.bxqk.find(item => item.code === 'run').value, name: '运行', isStop: '1' } |
| | | ] |
| | | this.techConditionChartRequireFinished = true |
| | | this.warrantyMalfunctionChartRequireFinished = true |
| | | this.drawTechConditionChart() |
| | | this.drawWarrantyMalfunctionChart() |
| | | } |
| | | }) |
| | | }, |
| | | |
| | | /* 调用接口获取三保计划 */ |
| | | getMonthMaintenanceNumByApi() { |
| | | signageApi.getThisMonthMaintenanceListApi() |
| | | /* 调用接口获取三保情况 */ |
| | | getThirdMaintenanceConditionByApi() { |
| | | signageApi.getThirdMaintenanceConditionApi() |
| | | .then(res => { |
| | | if (res.success && res.result) this.thisMonthMaintenancePlanNum = res.result[0].totalCount |
| | | }) |
| | | signageApi.getThisMonthMaintenanceFinishListApi() |
| | | .then(res => { |
| | | if (res.success && res.result) this.thisMonthMaintenanceRealNum = res.result[0].totalCount |
| | | }) |
| | | signageApi.getNextMonthMaintenanceList() |
| | | .then(res => { |
| | | if (res.success && res.result) this.nextMonthMaintenancePlanNum = res.result[0].totalCount |
| | | }) |
| | | signageApi.getNextNextMonthMaintenanceListApi() |
| | | .then(res => { |
| | | if (res.success && res.result) this.nextNextMonthMaintenancePlanNum = res.result[0].totalCount |
| | | if (res.success && res.result) { |
| | | this.thisMonthMaintenancePlanNum = res.result.find(item => item.code === 'bysbzs').value |
| | | this.thisMonthMaintenanceRealNum = res.result.find(item => item.code === 'bwc').value |
| | | this.nextMonthMaintenancePlanNum = res.result.find(item => item.code === 'xysb').value |
| | | this.nextNextMonthMaintenancePlanNum = res.result.find(item => item.code === 'xxysb').value |
| | | } |
| | | }) |
| | | }, |
| | | |
| | |
| | | getTwoMaintenanceChartDataByApi() { |
| | | signageApi.getTwoMaintenancePlanListApi() |
| | | .then(res => { |
| | | if (res.success && res.result.length > 0) this.twoMaintenanceChartData = res.result.map(item => [item.centerName, item.maintenanceDate, item.content]) |
| | | if (res.success && res.result.length > 0) this.twoMaintenanceChartData = res.result.map(item => [item.factoryName, item.monthPlan, '二级保养']) |
| | | this.drawMaintenanceChart() |
| | | }) |
| | | }, |
| | |
| | | this.barChart.showLoading({ |
| | | text: '数据加载中 ...', |
| | | color: '#0696e1', // 加载动画颜色 |
| | | textColor: '#fff', |
| | | maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层 |
| | | textColor: 'rgba(0, 0, 0, .45)', |
| | | maskColor: 'rgba(0,0,0,.05)' // 遮罩层 |
| | | }) |
| | | signageApi.getEquipmentOEEStatistics() |
| | | .then(res => { |
| | | if (res.success && res.result && res.result.length > 0) { |
| | | if (res.success && res.result) { |
| | | this.barChartData = res.result |
| | | this.drawBarChart() |
| | | } |
| | |
| | | this.doubleBarChart.showLoading({ |
| | | text: '数据加载中 ...', |
| | | color: '#0696e1', // 加载动画颜色 |
| | | textColor: '#fff', |
| | | maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层 |
| | | textColor: 'rgba(0, 0, 0, .45)', |
| | | maskColor: 'rgba(0,0,0,.05)' // 遮罩层 |
| | | }) |
| | | signageApi.getEquipmentMonthStatisticsApi() |
| | | .then(res => { |
| | |
| | | height: 300, |
| | | title: { |
| | | show: true, // 是否显示标题,默认为true |
| | | text: '设备状态', // 主标题文本 |
| | | text: '设备运行状态统计', // 主标题文本 |
| | | x: 'center', // 标题水平安放位置,可选值为'left'、'center'、'right'或具体的水平坐标值 |
| | | y: 'top', // 标题垂直安放位置,可选值为'top'、'bottom'、'center'或具体的垂直坐标值 |
| | | textStyle: { |
| | |
| | | left: 0, |
| | | orient: 'vertical', |
| | | right: '10%', |
| | | // bottom: "0", |
| | | itemWidth: 14, |
| | | itemHeight: 14, |
| | | icon: 'roundRect', |
| | |
| | | radius: this.pieChartRadius, |
| | | center: ['50%', '60%'], |
| | | color: [ |
| | | '#8B8B8B', |
| | | '#F56436', |
| | | '#FFFF40', |
| | | '#0FC61A' |
| | | '#686869', |
| | | '#AA6349', |
| | | '#EAEA7C', |
| | | '#5D975D' |
| | | ], |
| | | label: { |
| | | position: 'outside', |
| | |
| | | /* 绘制设备利用率胶囊图 */ |
| | | drawEfficiencyChart() { |
| | | const data = this.efficiencyData |
| | | const colorArray = [ |
| | | { |
| | | top: '#79CEAA', |
| | | bottom: '#79CEAA' |
| | | }, |
| | | { |
| | | top: '#F589A2', |
| | | bottom: '#F589A2' |
| | | }, |
| | | { |
| | | top: '#6FBF9D', |
| | | bottom: '#6FBF9D' |
| | | }, |
| | | { |
| | | top: '#66DFE2', |
| | | bottom: '#66DFE2' |
| | | }, { |
| | | top: '#A7F0C1', |
| | | bottom: '#A7F0C1' |
| | | }, |
| | | { |
| | | top: '#FAE893', |
| | | bottom: '#FAE893' |
| | | }, |
| | | { |
| | | top: '#F7B7A0', |
| | | bottom: '#F7B7A0' |
| | | } |
| | | ] |
| | | const defaultData = [] |
| | | const dataMax = +data.sort((x, y) => +y.value - +x.value)[0].value |
| | | const dataMax = data.length > 0 ? +data.sort((x, y) => +y.value - +x.value)[0].value : 0 |
| | | let yAxisMax |
| | | if (dataMax === 0) yAxisMax = 1 // 若数据中最大值为0,则将背景默认值设置为1 |
| | | else yAxisMax = Math.ceil(dataMax / 5) * 5 // 设置柱图背景阴影默认值,思路为数据最大值最接近的能被5整除的数字 |
| | |
| | | xAxis: { |
| | | name: '', |
| | | nameTextStyle: { |
| | | color: '#fff' |
| | | color: 'rgba(0,0,0,.45)' |
| | | }, |
| | | axisLabel: { |
| | | margin: 20, |
| | | textStyle: { |
| | | color: '#fff' |
| | | color: 'rgba(0,0,0,.45)' |
| | | } |
| | | }, |
| | | show: true, |
| | |
| | | axisLabel: { |
| | | show: true, |
| | | textStyle: { |
| | | color: '#fff', |
| | | color: 'rgba(0,0,0,.45)', |
| | | fontSize: '14', |
| | | fontWeight: 'bolder' |
| | | }, |
| | |
| | | }, |
| | | data: data |
| | | }], |
| | | series: [{ |
| | | series: { |
| | | name: 'TEEP', |
| | | type: 'bar', |
| | | zlevel: 1, |
| | | itemStyle: { |
| | | barBorderRadius: 100, |
| | | color: function(params) { |
| | | let num = colorArray.length |
| | | return { |
| | | type: 'linear', |
| | | colorStops: [{ |
| | | offset: 0, |
| | | color: colorArray[params.dataIndex % num].bottom |
| | | }, { |
| | | offset: 1, |
| | | color: colorArray[params.dataIndex % num].top |
| | | }, { |
| | | offset: 0, |
| | | color: colorArray[params.dataIndex % num].bottom |
| | | }, { |
| | | offset: 1, |
| | | color: colorArray[params.dataIndex % num].top |
| | | }, { |
| | | offset: 0, |
| | | color: colorArray[params.dataIndex % num].bottom |
| | | }, { |
| | | offset: 1, |
| | | color: colorArray[params.dataIndex % num].top |
| | | }, { |
| | | offset: 0, |
| | | color: colorArray[params.dataIndex % num].bottom |
| | | }, { |
| | | offset: 1, |
| | | color: colorArray[params.dataIndex % num].top |
| | | }, { |
| | | offset: 0, |
| | | color: colorArray[params.dataIndex % num].bottom |
| | | }, { |
| | | offset: 1, |
| | | color: colorArray[params.dataIndex % num].top |
| | | }, { |
| | | offset: 0, |
| | | color: colorArray[params.dataIndex % num].bottom |
| | | }] |
| | | } |
| | | } |
| | | color: '#5070DD' |
| | | }, |
| | | barWidth: 12, |
| | | data: data |
| | | }, |
| | | { |
| | | name: '背景', |
| | | type: 'bar', |
| | | barWidth: 12, |
| | | barGap: '-100%', |
| | | data: defaultData, |
| | | itemStyle: { |
| | | color: '#11294d', |
| | | barBorderRadius: 100 |
| | | } |
| | | } |
| | | ] |
| | | } |
| | | option.title.text = `${moment().subtract(1, 'days').format('M月D日')}TEEP` |
| | | this.efficiencyChart.setOption(option, true) |
| | |
| | | radius: this.pieChartRadius, |
| | | center: ['45%', '60%'], |
| | | color: [ |
| | | '#0FC61A', |
| | | '#F56436', |
| | | '#8B8B8B' |
| | | '#0AA012', |
| | | '#247F49', |
| | | '#757160' |
| | | ], |
| | | label: { |
| | | position: 'outside', |
| | |
| | | height: 300, |
| | | title: { |
| | | show: true, // 是否显示标题,默认为true |
| | | text: '设备报修故障', // 主标题文本 |
| | | text: '设备报修故障情况', // 主标题文本 |
| | | x: 'center', // 标题水平安放位置,可选值为'left'、'center'、'right'或具体的水平坐标值 |
| | | y: 'top', // 标题垂直安放位置,可选值为'top'、'bottom'、'center'或具体的垂直坐标值 |
| | | textStyle: { |
| | |
| | | radius: this.pieChartRadius, |
| | | center: ['45%', '60%'], |
| | | color: [ |
| | | '#24F2F5', |
| | | '#F56436', |
| | | '#FFFF40' |
| | | '#00CED1', |
| | | '#B85B38', |
| | | '#EAEA7C' |
| | | ], |
| | | label: { |
| | | position: 'outside', |
| | |
| | | this.maintenanceConfig = { |
| | | indexHeader: '序号', |
| | | header: ['车间', '日期', '内容'], |
| | | headerBGC: '#2C8BB2', |
| | | oddRowBGC: '#244B58', |
| | | evenRowBGC: '#295562', |
| | | headerBGC: '#266C86', |
| | | oddRowBGC: '#0A2732', |
| | | evenRowBGC: '#003B51', |
| | | data: this.twoMaintenanceChartData, |
| | | index: true, |
| | | columnWidth: [100, 300, 300, 300], |
| | |
| | | /* 绘制单柱图 */ |
| | | drawBarChart() { |
| | | const defaultData = [] |
| | | const colorArray = ['#79CEAA', '#F589A2', '#6FBF9D', '#66DFE2', '#A7F0C1', '#FAE893', '#F7B7A0'] |
| | | const dataMax = +this.barChartData.sort((x, y) => +y.value - +x.value)[0].value |
| | | const dataMax = this.barChartData.length > 0 ? +this.barChartData.sort((x, y) => +y.value - +x.value)[0].value : 0 |
| | | let yAxisMax |
| | | if (dataMax === 0) yAxisMax = 1 // 若数据中最大值为0,则将背景默认值设置为1 |
| | | else yAxisMax = Math.ceil(dataMax / 5) * 5 // 设置柱图背景阴影默认值,思路为数据最大值最接近的能被5整除的数字 |
| | |
| | | data: this.barChartData, |
| | | barWidth: this.barChartData.length > 5 ? '40%' : 30, |
| | | itemStyle: { |
| | | color: function(params) { |
| | | let num = colorArray.length |
| | | return colorArray[params.dataIndex % num] |
| | | }, |
| | | barBorderRadius: 100 |
| | | color: '#2E8BDA' |
| | | }, |
| | | zlevel: 1, |
| | | label: { |
| | |
| | | barGap: '-100%', |
| | | data: defaultData, |
| | | itemStyle: { |
| | | color: '#11294d', |
| | | barBorderRadius: 100 |
| | | color: '#11294d' |
| | | } |
| | | }] |
| | | } |
| | |
| | | /* 绘制双柱图 */ |
| | | drawDoubleBarChart() { |
| | | const option = { |
| | | color: ['#66DFE2', '#79CEAA'], |
| | | color: ['#4992FF', '#4DC0B1'], |
| | | tooltip: { |
| | | confine: true, |
| | | formatter: function(params) { |
| | |
| | | formatter: ['{a|{name}}'].join('\n'), |
| | | textStyle: { |
| | | fontSize: 14, |
| | | color: '#fff', |
| | | color: 'rgba(0, 0, 0, .45)', |
| | | height: 8, |
| | | rich: { |
| | | a: { |
| | |
| | | this.problemConfig = { |
| | | indexHeader: '序号', |
| | | header: ['问题内容', '时间'], |
| | | headerBGC: '#86D186', |
| | | oddRowBGC: '#7CBF7C', |
| | | evenRowBGC: '#7CBF7C', |
| | | headerBGC: '#83B883', |
| | | oddRowBGC: '#556955', |
| | | evenRowBGC: '#556955', |
| | | data: this.workshopProblemChartData, |
| | | index: true, |
| | | columnWidth: [100, 300, 150], |
| | |
| | | <table class="import-table" :id="'加工设备三级保养验收单-'+dataItem.equipmentCode"> |
| | | <thead> |
| | | <tr> |
| | | <td colspan="18" style="border: none;text-align: right">{{dataItem.hfCodeB}}</td> |
| | | <td colspan="5" style="border: none"> |
| | | <div style="text-align: right">{{dataItem.hfCodeB}}</div> |
| | | </td> |
| | | </tr> |
| | | </thead> |
| | | |
| | | <tbody> |
| | | <tr style="height: 48px;"> |
| | | <th colspan="18" style="border: none;font-size: 20px">加工设备三级保养验收单</th> |
| | | <th colspan="5" style="border: none;font-size: 20px">加工设备三级保养验收单</th> |
| | | </tr> |
| | | |
| | | <tr> |
| | | <td colspan="3">设备类别</td> |
| | | <td colspan="6">{{dataItem.equipmentCategory_dictText}}</td> |
| | | |
| | | <td colspan="3">设备编号</td> |
| | | <td colspan="6">{{dataItem.equipmentCode}}</td> |
| | | <td>设备类别</td> |
| | | <td>{{dataItem.equipmentCategory_dictText}}</td> |
| | | <td>设备编号</td> |
| | | <td colspan="2">{{dataItem.equipmentCode}}</td> |
| | | </tr> |
| | | |
| | | <tr> |
| | | <td colspan="3">设备名称</td> |
| | | <td colspan="6">{{dataItem.equipmentName}}</td> |
| | | |
| | | <td colspan="3">设备型号</td> |
| | | <td colspan="6">{{dataItem.equipmentModel}}</td> |
| | | <td>设备名称</td> |
| | | <td>{{dataItem.equipmentName}}</td> |
| | | <td>设备型号</td> |
| | | <td colspan="2">{{dataItem.equipmentModel}}</td> |
| | | </tr> |
| | | |
| | | <tr> |
| | | <td colspan="3" rowspan="2">保养部位</td> |
| | | <td colspan="6" rowspan="2">保养内容</td> |
| | | <td colspan="3" rowspan="2">验收标准</td> |
| | | <td colspan="6">验收次数</td> |
| | | <td rowspan="2">保养部位</td> |
| | | <td rowspan="2">保养内容</td> |
| | | <td rowspan="2">验收标准</td> |
| | | <td colspan="2">验收次数</td> |
| | | </tr> |
| | | |
| | | <tr> |
| | | <td colspan="3">第一次检</td> |
| | | <td colspan="3">第二次检</td> |
| | | <td>第一次检</td> |
| | | <td>第二次检</td> |
| | | </tr> |
| | | |
| | | <tr v-for="item in dataItem.eamThirdMaintenanceOrderDetailList"> |
| | | <td colspan="3" :rowSpan="item.rowSpan" v-show="!item.rowSpanDis">{{item.itemPart}}</td> |
| | | <td colspan="6">{{item.itemName}}</td> |
| | | <td colspan="3">{{item.itemDemand}}</td> |
| | | <td colspan="3">{{+item.firstInspectResult?'√':'×'}}</td> |
| | | <td colspan="3">{{item.secondInspectResult}}</td> |
| | | <td :rowSpan="item.rowSpan" v-if="!item.rowSpanDis">{{item.itemPart}}</td> |
| | | <td>{{item.itemName}}</td> |
| | | <td>{{item.itemDemand}}</td> |
| | | <td>{{+item.firstInspectResult?'√':'×'}}</td> |
| | | <td>{{item.secondInspectResult}}</td> |
| | | </tr> |
| | | |
| | | <tr> |
| | | <td colspan="3" style="border: none"> |
| | | <div style="text-align: left">检查人员:{{dataItem.inspectorSignature_dictText}}</div> |
| | | </td> |
| | | <td colspan="2" style="border: none"> |
| | | <div style="text-align:right">检查日期:{{dataItem.inspectTime}}</div> |
| | | </td> |
| | | </tr> |
| | | </tbody> |
| | | </table> |
| | | |
| | | <div style="display:flex;justify-content: space-between; margin-top: 5px;padding: 0 20px"> |
| | | <div>检查人员:{{dataItem.inspectorSignature_dictText}}</div> |
| | | <div>检查日期:{{dataItem.inspectTime}}</div> |
| | | </div> |
| | | </template> |
| | | |
| | | <br v-if="tableType===3"/> |
| | | |
| | | <template v-if="tableType!==1"> |
| | | <div style="page-break-before:always"></div> |
| | |
| | | <table class="import-table" :id="'加工设备三级保养完工移交单-'+dataItem.equipmentCode"> |
| | | <thead> |
| | | <tr> |
| | | <td colspan="18" style="border: none;text-align: right">{{dataItem.hfCodeA}}</td> |
| | | <td colspan="12" style="border-color: transparent"> |
| | | <div style="text-align: right">{{dataItem.hfCodeA}}</div> |
| | | </td> |
| | | </tr> |
| | | </thead> |
| | | |
| | | <tbody> |
| | | <tr style="height: 48px;"> |
| | | <th colspan="18" style="border: none;font-size: 20px">加工设备三级保养完工移交单</th> |
| | | <th colspan="12" style="border-color: transparent transparent #000 transparent;font-size: 20px;"> |
| | | 加工设备三级保养完工移交单 |
| | | </th> |
| | | </tr> |
| | | |
| | | <tr> |
| | | <td colspan="3">设备名称</td> |
| | | <td colspan="3">{{dataItem.equipmentName}}</td> |
| | | <td colspan="3">设备型号</td> |
| | | <td colspan="3">{{dataItem.equipmentModel}}</td> |
| | | <td colspan="3">统一编号</td> |
| | | <td colspan="3">{{dataItem.equipmentCode}}</td> |
| | | <td colspan="2">设备名称</td> |
| | | <td colspan="2">{{dataItem.equipmentName}}</td> |
| | | <td colspan="2">设备型号</td> |
| | | <td colspan="2">{{dataItem.equipmentModel}}</td> |
| | | <td colspan="2">统一编号</td> |
| | | <td colspan="2">{{dataItem.equipmentCode}}</td> |
| | | </tr> |
| | | |
| | | <tr> |
| | | <td colspan="3">使用单位</td> |
| | | <td colspan="3">{{dataItem.factoryName}}</td> |
| | | <td colspan="3">保养日期</td> |
| | | <td colspan="9">{{dataItem.maintenanceDateFormatted}}</td> |
| | | <td colspan="2">使用单位</td> |
| | | <td colspan="2">{{dataItem.factoryName}}</td> |
| | | <td colspan="2">保养日期</td> |
| | | <td colspan="6">{{dataItem.maintenanceDateFormatted}}</td> |
| | | </tr> |
| | | |
| | | <tr> |
| | | <td colspan="18" style="text-align: left;padding: 5px"> |
| | | 保养前技术状态<br/> |
| | | 1、设备功能是否齐全:{{+dataItem.fullyFunctional===1?'是(√)否()':'是()否(√)'}}<br/> |
| | | 2、设备能否正常运转,满足加工要求:{{+dataItem.runningNormally===1?'是(√)否()':'是()否(√)'}}<br/> |
| | | 3、问题描述:{{dataItem.problemDescription}} |
| | | <td colspan="12" style="padding: 5px"> |
| | | <div style="text-align: left;">保养前技术状态</div> |
| | | <div style="text-align: left;">1、设备功能是否齐全:{{+dataItem.fullyFunctional===1?'是(√)否()':'是()否(√)'}}</div> |
| | | <div style="text-align: left;"> |
| | | 2、设备能否正常运转,满足加工要求:{{+dataItem.runningNormally===1?'是(√)否()':'是()否(√)'}} |
| | | </div> |
| | | <div style="text-align: left;">3、问题描述:{{dataItem.problemDescription}}</div> |
| | | </td> |
| | | </tr> |
| | | |
| | | <tr> |
| | | <td colspan="18" style="text-align: left;padding: 5px"> |
| | | 保养内容<br/> |
| | | 1、按照三级保养规范进行保养。<br/> |
| | | 2、对整改情况进行描述。 |
| | | <td colspan="12" style="padding: 5px"> |
| | | <div style="text-align: left;">保养内容</div> |
| | | <div style="text-align: left;">1、按照三级保养规范进行保养。</div> |
| | | <div style="text-align: left;">2、对整改情况进行描述。</div> |
| | | </td> |
| | | </tr> |
| | | |
| | | <tr> |
| | | <td colspan="18" style="text-align: left;padding: 5px"> |
| | | 修理更换备件明细: |
| | | <td colspan="12" style="padding: 5px"> |
| | | <div style="text-align: left;">修理更换备件明细:</div> |
| | | </td> |
| | | </tr> |
| | | |
| | | <tr> |
| | | <td colspan="3">序号</td> |
| | | <td colspan="3">名称</td> |
| | | <td colspan="3">型号</td> |
| | | <td colspan="3">数量</td> |
| | | <td colspan="6">备注</td> |
| | | <td colspan="2">序号</td> |
| | | <td colspan="2">名称</td> |
| | | <td colspan="2">型号</td> |
| | | <td colspan="2">数量</td> |
| | | <td colspan="4">备注</td> |
| | | </tr> |
| | | |
| | | <tr v-for="item in dataItem.eamThirdMaintenanceSpareList"> |
| | | <td colspan="3">{{item.spareCode}}</td> |
| | | <td colspan="3">{{item.spareName}}</td> |
| | | <td colspan="3">{{item.spareModel}}</td> |
| | | <td colspan="3">{{item.spareQuantity}}</td> |
| | | <td colspan="6">{{item.remark}}</td> |
| | | <td colspan="2">{{item.spareCode}}</td> |
| | | <td colspan="2">{{item.spareName}}</td> |
| | | <td colspan="2">{{item.spareModel}}</td> |
| | | <td colspan="2">{{item.spareQuantity}}</td> |
| | | <td colspan="4">{{item.remark}}</td> |
| | | </tr> |
| | | |
| | | <tr> |
| | | <td colspan="18" style="text-align: left;padding: 5px"> |
| | | 该设备经三级保养检查后,达到保养规范要求。 |
| | | <br/><br/><br/> |
| | | <div style="display: flex;justify-content: space-between"> |
| | | <div>操作人员:{{dataItem.operatorSignature_dictText}}</div> |
| | | <div>维修室主任:{{dataItem.repairManagerSignature_dictText}}</div> |
| | | <br/><br/><br/> |
| | | <td colspan="12" style="padding: 5px"> |
| | | <div style="text-align: left;">该设备经三级保养检查后,达到保养规范要求。</div> |
| | | <br/><br/> |
| | | <template v-if="handleMethod===1"> |
| | | <div style="text-align: left"> |
| | | <span>操作人员:{{dataItem.operatorSignature_dictText}}</span> |
| | | <span v-for="item in 30"> </span> |
| | | <span>维修室主任:{{dataItem.repairManagerSignature_dictText}}</span> |
| | | </div> |
| | | <br/><br/> |
| | | <div style="text-align: left"> |
| | | <span>维修人员:{{dataItem.repairmanSignature_dictText}}</span> |
| | | <span v-for="item in 30"> </span> |
| | | <span>设备检验员:{{dataItem.inspectorSignature_dictText}}</span> |
| | | </div> |
| | | </template> |
| | | |
| | | |
| | | <div style="display: flex;justify-content: space-between"> |
| | | <div>维修人员:{{dataItem.repairmanSignature_dictText}}</div> |
| | | <div>设备检验员:{{dataItem.inspectorSignature_dictText}}</div> |
| | | <template v-if="handleMethod===2"> |
| | | <div style="text-align: left"> |
| | | <span style="margin-right: 50%">操作人员:{{dataItem.operatorSignature_dictText}}</span> |
| | | <span>维修室主任:{{dataItem.repairManagerSignature_dictText}}</span> |
| | | </div> |
| | | <br/><br/> |
| | | <div style="text-align: left"> |
| | | <span style="margin-right: 50%">维修人员:{{dataItem.repairmanSignature_dictText}}</span> |
| | | <span>设备检验员:{{dataItem.inspectorSignature_dictText}}</span> |
| | | </div> |
| | | </template> |
| | | <br/> |
| | | </div> |
| | | </td> |
| | | </tr> |
| | | </tbody> |
| | |
| | | |
| | | <template slot="footer"> |
| | | <a-button @click="handleCancel">关闭</a-button> |
| | | <a-button type="primary" @click="handleImport">导出</a-button> |
| | | <a-button type="primary" v-print="'#dataTable'">打印</a-button> |
| | | <a-button type="primary" @click="handleExportToExcel">导出</a-button> |
| | | <a-button type="primary" @click="handleMethod = 2" v-print="'#dataTable'">打印</a-button> |
| | | </template> |
| | | </j-modal> |
| | | </template> |
| | |
| | | visible: false, |
| | | spinning: false, |
| | | tableType: null, |
| | | dataSource: [ |
| | | { |
| | | hfCode: 'HF-16548ASDSADA', |
| | | equipmentName: '手打十点多', |
| | | equipmentModel: '6500P', |
| | | equipmentCode: '2125400', |
| | | factoryName: '燃机厂', |
| | | maintenanceDateFormatted: '2025年5月20日' |
| | | |
| | | } |
| | | ], |
| | | handleMethod: 2, |
| | | dataSource: [], |
| | | url: { |
| | | list1: '/eam/thirdMaintenanceOrder/batchExportCheck', |
| | | list2: '/eam/thirdMaintenanceOrder/batchExport' |
| | |
| | | res1.result.forEach(item1 => { |
| | | for (let i = 0; i < res2.result.length; i++) { |
| | | if (item1.id === res2.result[i].id) { |
| | | console.log('res2', res2.result) |
| | | const dataItem = { ...item1, ...res2.result[i] } |
| | | that.dataSource.push(dataItem) |
| | | console.log('item1', item1) |
| | | break |
| | | } |
| | | } |
| | |
| | | k = i |
| | | } |
| | | }) |
| | | console.log('dataSource', this.dataSource) |
| | | }, |
| | | |
| | | handleImport() { |
| | | // 导出到Excel |
| | | handleExportToExcel() { |
| | | this.handleMethod = 1 |
| | | this.$nextTick(() => { |
| | | document.querySelectorAll('table.import-table').forEach(item => { |
| | | console.log('item', item) |
| | | $(item).table2excel({ |
| | |
| | | exclude_inputs: false |
| | | }) |
| | | }) |
| | | |
| | | }) |
| | | }, |
| | | |
| | | handleCancel() { |