| | |
| | | // 三级保养 |
| | | getThirdMaintenanceConditionApi: productionCode => getAction('/eam/home/maintenance', { productionCode }), |
| | | // 二保计划 |
| | | getTwoMaintenancePlanListApi: productionCode => getAction('/eam/home/secondmaintenance', { productionCode }), |
| | | getSecondMaintenancePlanListApi: productionCode => getAction('/eam/home/secondmaintenance', { productionCode }), |
| | | // 设备OEE统计 |
| | | getEquipmentOEEStatistics: productionCode => getAction('/mdc/home/equipmentOEEStatistics', { productionCode }), |
| | | // 设备OEE和利用率对比 |
| | |
| | | |
| | | <!-- layout content --> |
| | | <a-layout-content |
| | | :style="{ height: '100%', paddingTop: fixedHeader ? '59px' : '0' ,background: $route.meta.title=='首页'?'#FEFEFE':''}"> |
| | | :style="{ height: '100%', paddingTop: fixedHeader ? '59px' : '0' ,background: $route.meta.title=='首页'?'#FDFDFD':''}"> |
| | | <slot></slot> |
| | | </a-layout-content> |
| | | |
| | |
| | | <div class="back-nav" @click="$emit('backToLastSignage','Index')" v-if="userType===4"> |
| | | <dv-decoration-7>上一级</dv-decoration-7> |
| | | </div> |
| | | <!--<dv-border-box-9 style="padding: 30px 20px 0">--> |
| | | <!--<div id="running_state_chart" style="width:100%;height: 400px;"></div>--> |
| | | <!--<div id="efficiency_chart" style="width: 100%;height: 350px"></div>--> |
| | | <!--</dv-border-box-9>--> |
| | | <dv-border-box-9 style="padding: 30px 20px 0"> |
| | | <div id="running_state_chart" style="width:100%;height: 400px;"></div> |
| | | <div id="efficiency_chart" style="width: 100%;height: 350px"></div> |
| | | </dv-border-box-9> |
| | | </div> |
| | | |
| | | <!--<div style="width: 42%" class="middle-col">--> |
| | | <!--<dv-border-box-9 style="padding: 30px 20px 0">--> |
| | | <!--<div style="display: flex">--> |
| | | <!--<div id="tech_condition_chart" style="width:50%;height: 420px;"></div>--> |
| | | <!--<div id="warranty_malfunction_chart" style="width:50%;height: 420px;"></div>--> |
| | | <!--</div>--> |
| | | <!--<div class="support-plan-container">--> |
| | | <!--<div v-for="(item,index) in supportPlanList" :key="index" class="support-plan-item"--> |
| | | <!--:style="{background:item.backgroundColor}" @click="openMaintenanceModal(item)">--> |
| | | <!--<div>{{item.planTime}}</div>--> |
| | | <!--<div class="plan-value-container">--> |
| | | <!--<div class="plan-value">{{$data[item.planValueLabel]}}</div>--> |
| | | <!--<div>台</div>--> |
| | | <!--</div>--> |
| | | <!--</div>--> |
| | | <!--</div>--> |
| | | <!--<div style="padding: 0 55px;margin-top: 50px">--> |
| | | <!--<dv-scroll-board :config="maintenanceConfig" style="width:100%;height:80px"/>--> |
| | | <!--</div>--> |
| | | <!--</dv-border-box-9>--> |
| | | <!--</div>--> |
| | | <div style="width: 42%" class="middle-col"> |
| | | <dv-border-box-9 style="padding: 30px 20px 0"> |
| | | <div style="display: flex"> |
| | | <div id="tech_condition_chart" style="width:50%;height: 420px;"></div> |
| | | <div id="warranty_malfunction_chart" style="width:50%;height: 420px;"></div> |
| | | </div> |
| | | <div class="support-plan-container"> |
| | | <div v-for="(item,index) in supportPlanList" :key="index" class="support-plan-item" |
| | | :style="{background:item.backgroundColor}" @click="openMaintenanceModal(item)"> |
| | | <div>{{item.planTime}}</div> |
| | | <div class="plan-value-container"> |
| | | <div class="plan-value">{{$data[item.planValueLabel]}}</div> |
| | | <div>台</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div style="padding: 0 55px;margin-top: 50px"> |
| | | <dv-scroll-board :config="maintenanceConfig" style="width:100%;height:80px"/> |
| | | </div> |
| | | </dv-border-box-9> |
| | | </div> |
| | | |
| | | <!--<div style="width: 32%">--> |
| | | <!--<dv-border-box-9 style="padding: 30px 0 20px">--> |
| | | <!--<div id="bar_chart" style="width:100%;height: 280px;"></div>--> |
| | | <!--<div id="double_bar_chart" style="width:100%;height: 280px;"></div>--> |
| | | <!--<div style="padding: 0 20px;">--> |
| | | <!--<dv-scroll-board :config="problemConfig" style="width:100%;height:220px"/>--> |
| | | <!--</div>--> |
| | | <!--</dv-border-box-9>--> |
| | | <!--</div>--> |
| | | <div style="width: 32%"> |
| | | <dv-border-box-9 style="padding: 30px 0 20px"> |
| | | <div id="bar_chart" style="width:100%;height: 280px;"></div> |
| | | <div id="double_bar_chart" style="width:100%;height: 280px;"></div> |
| | | <div style="padding: 0 20px;"> |
| | | <dv-scroll-board :config="problemConfig" style="width:100%;height:220px"/> |
| | | </div> |
| | | </dv-border-box-9> |
| | | </div> |
| | | |
| | | <SignageModal :modalVisible="modalVisible" :modalTitle=modalTitle :modalDataApiUrl="modalDataApiUrl" |
| | | :modalDataApiParams="modalDataApiParams" |
| | |
| | | import signageApi from '@/api/signage' |
| | | import moment from 'moment' |
| | | import SignageModal from './modules/SignageModal' |
| | | import * as echarts from 'echarts' |
| | | |
| | | export default { |
| | | name: 'BranchFactorySignage', |
| | |
| | | { |
| | | planTime: '本月三保计划', |
| | | planValueLabel: 'thisMonthMaintenancePlanNum', |
| | | backgroundColor: '#5FE0AF', |
| | | apiUrl: '/eam/calibrationOrder/showThisMonthMaintenanceList' |
| | | backgroundColor: '#719D8E', |
| | | code: 'bysbzs' |
| | | }, |
| | | { |
| | | planTime: '本月完成', |
| | | planValueLabel: 'thisMonthMaintenanceRealNum', |
| | | backgroundColor: '#409EFF', |
| | | apiUrl: '/eam/calibrationOrder/showThisMonthMaintenanceFinishList' |
| | | code: 'bwc' |
| | | }, |
| | | { |
| | | planTime: '下月三保计划', |
| | | planValueLabel: 'nextMonthMaintenancePlanNum', |
| | | backgroundColor: '#D6BC52', |
| | | apiUrl: '/eam/calibrationOrder/showNextMonthMaintenanceList' |
| | | backgroundColor: '#A8985D', |
| | | code: 'xysb' |
| | | }, |
| | | { |
| | | planTime: '下下月三保计划', |
| | | planValueLabel: 'nextNextMonthMaintenancePlanNum', |
| | | backgroundColor: '#58D9F9', |
| | | apiUrl: '/eam/calibrationOrder/showNextNextMonthMaintenanceList' |
| | | code: 'xxysb' |
| | | } |
| | | ], |
| | | thisMonthMaintenancePlanNum: 0, |
| | |
| | | getChartDataByApi() { |
| | | this.getRunningStateDataByApi() |
| | | this.getEfficiencyDataByApi() |
| | | this.getTechConditionDataByApi() |
| | | this.getWarrantyMalfunctionDataByApi() |
| | | this.getTechConditionAndWarrantyMalfunctionDataByApi() |
| | | this.getMonthMaintenanceNumByApi() |
| | | this.getTwoMaintenanceChartDataByApi() |
| | | this.getSecondMaintenanceChartDataByApi() |
| | | this.getBarChartDataByApi() |
| | | this.getDoubleBarChartDataByApi() |
| | | this.getWorkshopProblemChartDataByApi() |
| | |
| | | this.runningStateChart.showLoading({ |
| | | text: '数据加载中 ...', |
| | | color: '#0696e1', // 加载动画颜色 |
| | | textColor: '#fff', |
| | | maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层 |
| | | textColor: 'rgba(0,0,0,.45)' |
| | | }) |
| | | signageApi.getEquipmentStatusStatisticsApi(this.productionCode) |
| | | .then(res => { |
| | |
| | | this.efficiencyChart.showLoading({ |
| | | text: '数据加载中 ...', |
| | | color: '#0696e1', // 加载动画颜色 |
| | | textColor: '#fff', |
| | | maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层 |
| | | textColor: 'rgba(0,0,0,.45)' |
| | | }) |
| | | signageApi.getEquipmentUtilizationStatisticsApi(this.productionCode) |
| | | .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: 'transparent' // 遮罩层 |
| | | }) |
| | | signageApi.getEquipmentTechnologyStatusListApi(this.productionCode) |
| | | .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: 'transparent' // 遮罩层 |
| | | }) |
| | | signageApi.getReportRepairEquipmentListApi(this.productionCode) |
| | | signageApi.getEquipmentTechnologyStatusAndReportRepairEquipmentListApi(this.productionCode) |
| | | .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.length > 0 ? res.result.jszt.find(item => item.code === 'QUALIFIED').value : 0, |
| | | name: '合格', |
| | | technologyStatus: 'QUALIFIED' |
| | | }, |
| | | { |
| | | value: res.result.jszt.length > 0 ? res.result.jszt.find(item => item.code === 'RESTRICTED').value : 0, |
| | | name: '限用', |
| | | technologyStatus: 'RESTRICTED' |
| | | }, |
| | | { |
| | | value: res.result.jszt.length > 0 ? res.result.jszt.find(item => item.code === 'PROHIBITED').value : 0, |
| | | name: '禁用', |
| | | technologyStatus: 'PROHIBITED' |
| | | } |
| | | ] |
| | | this.warrantyMalfunctionData = [ |
| | | { |
| | | value: res.result.bxqk.length > 0 ? res.result.bxqk.find(item => item.code === 'run').value : 0, |
| | | name: '运行', |
| | | code: 'run' |
| | | }, |
| | | { |
| | | value: res.result.bxqk.length > 0 ? res.result.bxqk.find(item => item.code === 'stop').value : 0, |
| | | name: '停机', |
| | | code: 'stop' |
| | | }, |
| | | { |
| | | value: res.result.bxqk.length > 0 ? res.result.bxqk.find(item => item.code === 'bx').value : 0, |
| | | name: '报修', |
| | | code: 'bx' |
| | | } |
| | | ] |
| | | this.techConditionChartRequireFinished = true |
| | | this.warrantyMalfunctionChartRequireFinished = true |
| | | this.drawTechConditionChart() |
| | | this.drawWarrantyMalfunctionChart() |
| | | } |
| | | }) |
| | |
| | | |
| | | /* 调用接口获取三保计划 */ |
| | | getMonthMaintenanceNumByApi() { |
| | | signageApi.getThisMonthMaintenanceListApi(this.productionCode) |
| | | signageApi.getThirdMaintenanceConditionApi(this.productionCode) |
| | | .then(res => { |
| | | if (res.success && res.result) this.thisMonthMaintenancePlanNum = res.result[0].totalCount |
| | | }) |
| | | signageApi.getThisMonthMaintenanceFinishListApi(this.productionCode) |
| | | .then(res => { |
| | | if (res.success && res.result) this.thisMonthMaintenanceRealNum = res.result[0].totalCount |
| | | }) |
| | | signageApi.getNextMonthMaintenanceList(this.productionCode) |
| | | .then(res => { |
| | | if (res.success && res.result) this.nextMonthMaintenancePlanNum = res.result[0].totalCount |
| | | }) |
| | | signageApi.getNextNextMonthMaintenanceListApi(this.productionCode) |
| | | .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(this.productionCode) |
| | | getSecondMaintenanceChartDataByApi() { |
| | | signageApi.getSecondMaintenancePlanListApi(this.productionCode) |
| | | .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)' |
| | | }) |
| | | signageApi.getEquipmentOEEStatistics(this.productionCode) |
| | | .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)' |
| | | }) |
| | | signageApi.getEquipmentMonthStatisticsApi(this.productionCode) |
| | | .then(res => { |
| | |
| | | const option = { |
| | | 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', |
| | | itemGap: 15, |
| | | textStyle: { |
| | | color: 'inherit', |
| | | fontSize: 14, |
| | | padding: [0, 0, 0, 0] |
| | | color: 'rgba(0,0,0,.45)', |
| | | fontSize: 14 |
| | | }, |
| | | data: ['关机', '报警', '待机', '运行'] |
| | | data: ['运行', '待机', '报警', '关机'] |
| | | }, |
| | | grid: { |
| | | containLabel: true |
| | |
| | | { |
| | | type: 'pie', |
| | | roseType: 'angle', // 玫瑰图 |
| | | // selectedMode: "single", |
| | | radius: this.pieChartRadius, |
| | | center: ['53%', '50%'], |
| | | color: [ |
| | | '#8B8B8B', |
| | | '#F56436', |
| | | '#FFFF40', |
| | | '#0FC61A' |
| | | '#686869', |
| | | '#AA6349', |
| | | '#FFFF88', |
| | | '#5D975D' |
| | | ], |
| | | label: { |
| | | position: 'outside', |
| | | show: true, |
| | | color: 'inherit', |
| | | // textBorderColor: 'inherit', |
| | | // textBorderWidth: 1, |
| | | color: 'rgba(0,0,0,.45)', |
| | | fontSize: 16, |
| | | formatter: function(params) { |
| | | if (params.name !== '') { |
| | |
| | | labelLine: { |
| | | show: true, |
| | | length2: 10, |
| | | length: 10 |
| | | length: 10, |
| | | lineStyle: { |
| | | color: 'rgba(0,0,0,.45)' |
| | | } |
| | | }, |
| | | data: this.runningStateData |
| | | } |
| | |
| | | const data = this.efficiencyData |
| | | const colorArray = [ |
| | | { |
| | | top: '#79CEAA', |
| | | bottom: '#79CEAA' |
| | | top: '#EA967B', |
| | | bottom: '#F8E18B' |
| | | }, |
| | | { |
| | | top: '#F589A2', |
| | | bottom: '#F589A2' |
| | | top: '#62AC75', |
| | | bottom: '#A8D07C' |
| | | }, |
| | | { |
| | | top: '#6FBF9D', |
| | | bottom: '#6FBF9D' |
| | | top: '#32ACBF', |
| | | bottom: '#7BCAC5' |
| | | }, |
| | | { |
| | | top: '#66DFE2', |
| | | bottom: '#66DFE2' |
| | | }, { |
| | | top: '#A7F0C1', |
| | | bottom: '#A7F0C1' |
| | | }, |
| | | { |
| | | top: '#FAE893', |
| | | bottom: '#FAE893' |
| | | }, |
| | | { |
| | | top: '#F7B7A0', |
| | | bottom: '#F7B7A0' |
| | | top: '#7196CE', |
| | | bottom: '#8DCCEF' |
| | | } |
| | | ] |
| | | 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整除的数字 |
| | | const yAxisInterval = yAxisMax / 5 // 同时将刻度值分成5份 |
| | | data.forEach(item => defaultData.push(yAxisMax)) |
| | | const option = { |
| | | title: { |
| | | show: true, // 是否显示标题,默认为true |
| | |
| | | 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, |
| | | min: 0, |
| | | max: 'dataMax', |
| | | max: dataMax, |
| | | interval: yAxisInterval, |
| | | type: 'value', |
| | | axisTick: { |
| | | show: false |
| | | }, |
| | | splitLine: { |
| | | show: false |
| | | show: true |
| | | } |
| | | }, |
| | | yAxis: [{ |
| | | yAxis: { |
| | | type: 'category', |
| | | inverse: true, |
| | | triggerEvent: true, |
| | | axisLabel: { |
| | | show: true, |
| | | textStyle: { |
| | | color: '#fff', |
| | | color: 'rgba(0,0,0,.45)', |
| | | fontSize: '14', |
| | | fontWeight: 'bolder' |
| | | }, |
| | |
| | | show: false |
| | | }, |
| | | data: data.map(item => item.productionCode) |
| | | }, { |
| | | type: 'category', |
| | | inverse: true, |
| | | axisTick: 'none', |
| | | axisLine: 'none', |
| | | show: true, |
| | | axisLabel: { |
| | | textStyle: { |
| | | color: '#ffffff', |
| | | fontSize: '14' |
| | | }, |
| | | formatter: function(value) { |
| | | return `${value}%` |
| | | } |
| | | }, |
| | | data: data |
| | | }], |
| | | series: [{ |
| | | }, |
| | | series: { |
| | | name: 'TEEP', |
| | | type: 'bar', |
| | | zlevel: 1, |
| | | itemStyle: { |
| | | barBorderRadius: 100, |
| | | color: function(params) { |
| | | let num = colorArray.length |
| | | return { |
| | |
| | | } |
| | | } |
| | | }, |
| | | barWidth: 12, |
| | | label: { |
| | | show: true, |
| | | position: 'inside', |
| | | color: '#fff' |
| | | }, |
| | | barWidth: 18, |
| | | 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) |
| | |
| | | top: 25, |
| | | orient: 'vertical', |
| | | right: 0, |
| | | // bottom: "0", |
| | | itemWidth: 14, |
| | | itemHeight: 14, |
| | | icon: 'roundRect', |
| | | itemGap: 15, |
| | | textStyle: { |
| | | color: 'inherit', |
| | | color: 'rgba(0,0,0,.45)', |
| | | fontSize: 14, |
| | | padding: [0, 0, 0, 0] |
| | | }, |
| | | data: ['合格', '禁用', '限用'] |
| | | data: ['合格', '限用', '禁用'] |
| | | }, |
| | | grid: { |
| | | containLabel: true |
| | |
| | | series: [ |
| | | { |
| | | type: 'pie', |
| | | // selectedMode: "single", |
| | | radius: this.pieChartRadius, |
| | | center: ['50%', '60%'], |
| | | color: [ |
| | | '#0FC61A', |
| | | '#F56436', |
| | | '#8B8B8B' |
| | | '#0AA012', |
| | | '#247F49', |
| | | '#757160' |
| | | ], |
| | | label: { |
| | | position: 'outside', |
| | | show: true, |
| | | color: 'inherit', |
| | | // textBorderColor: 'inherit', |
| | | // textBorderWidth: 1, |
| | | color: 'rgba(0,0,0,.45)', |
| | | fontSize: 16, |
| | | formatter: function(params) { |
| | | if (params.name !== '') { |
| | |
| | | labelLine: { |
| | | show: true, |
| | | length2: 15, |
| | | length: 15 |
| | | length: 15, |
| | | lineStyle: { |
| | | color: 'rgba(0,0,0,.45)' |
| | | } |
| | | }, |
| | | data: this.techConditionData |
| | | } |
| | |
| | | height: 300, |
| | | title: { |
| | | show: true, // 是否显示标题,默认为true |
| | | text: '设备报修故障', // 主标题文本 |
| | | text: '设备报修故障情况', // 主标题文本 |
| | | x: 'center', // 标题水平安放位置,可选值为'left'、'center'、'right'或具体的水平坐标值 |
| | | y: 'top', // 标题垂直安放位置,可选值为'top'、'bottom'、'center'或具体的垂直坐标值 |
| | | textStyle: { |
| | |
| | | icon: 'roundRect', |
| | | itemGap: 15, |
| | | textStyle: { |
| | | color: 'inherit', |
| | | color: 'rgba(0,0,0,.45)', |
| | | fontSize: 14, |
| | | padding: [0, 0, 0, 0] |
| | | }, |
| | |
| | | series: [ |
| | | { |
| | | type: 'pie', |
| | | // selectedMode: "single", |
| | | radius: this.pieChartRadius, |
| | | center: ['50%', '60%'], |
| | | color: [ |
| | | '#24F2F5', |
| | | '#F56436', |
| | | '#FFFF40' |
| | | '#00CED1', |
| | | '#B85B38', |
| | | '#FFFF88' |
| | | ], |
| | | label: { |
| | | position: 'outside', |
| | | show: true, |
| | | color: 'inherit', |
| | | // textBorderColor: 'inherit', |
| | | // textBorderWidth: 1, |
| | | color: 'rgba(0,0,0,.45)', |
| | | fontSize: 16, |
| | | formatter: function(params) { |
| | | if (params.name !== '') { |
| | |
| | | labelLine: { |
| | | show: true, |
| | | length2: 15, |
| | | length: 15 |
| | | length: 15, |
| | | lineStyle: { |
| | | color: 'rgba(0,0,0,.45)' |
| | | } |
| | | }, |
| | | data: this.warrantyMalfunctionData |
| | | } |
| | |
| | | this.maintenanceConfig = { |
| | | indexHeader: '序号', |
| | | header: ['车间', '日期', '内容'], |
| | | headerBGC: '#2C8BB2', |
| | | oddRowBGC: '#244B58', |
| | | evenRowBGC: '#295562', |
| | | headerBGC: '#46B7E3', |
| | | oddRowBGC: '#0383AF', |
| | | evenRowBGC: '#0395C9', |
| | | rowNum: 1, |
| | | data: this.twoMaintenanceChartData, |
| | | index: true, |
| | |
| | | |
| | | /* 绘制单柱图 */ |
| | | 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 |
| | | let yAxisMax |
| | | if (dataMax === 0) yAxisMax = 1 // 若数据中最大值为0,则将背景默认值设置为1 |
| | | else yAxisMax = Math.ceil(dataMax / 5) * 5 // 设置柱图背景阴影默认值,思路为数据最大值最接近的能被5整除的数字 |
| | | const yAxisInterval = yAxisMax / 5 // 同时将刻度值分成5份 |
| | | this.barChartData.forEach(item => defaultData.push(yAxisMax)) |
| | | let barTopColor = ['#EA967B', '#62AC75', '#32ACBF', '#7196CE'] |
| | | let barBottomColor = ['#F8E18B', '#A8D07C', '#7BCAC5', '#8DCCEF'] |
| | | const option = { |
| | | title: { |
| | | show: true, // 是否显示标题,默认为true |
| | |
| | | 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)', |
| | | textStyle: { |
| | | // color: '#CFE3FC' |
| | | }, |
| | | borderWidth: 1 |
| | | } |
| | | }, |
| | | grid: { |
| | | top: '15%', |
| | | left: '10%' |
| | | }, |
| | | xAxis: [{ |
| | | name: '', |
| | | nameLocation: 'middle', |
| | | nameGap: 40, // x轴name与横坐标轴线的间距 |
| | | type: 'category', |
| | | data: this.barChartData.map(item => item.productionId), |
| | | xAxis: { |
| | | data: this.barChartData.map(item => item.name), |
| | | axisTick: { |
| | | show: false |
| | | }, |
| | | axisLine: { |
| | | show: true, |
| | | lineStyle: { |
| | | color: '#FFFFFF' |
| | | color: 'rgba(0,0,0,.45)' |
| | | } |
| | | }, |
| | | axisLabel: { |
| | | show: true, // 是否显示刻度标签,默认显示 |
| | | interval: 0, // 坐标轴刻度标签的显示间隔,在类目轴中有效;默认会采用标签不重叠的策略间隔显示标签;可以设置成0强制显示所有标签;如果设置为1,表示『隔一个标签显示一个标签』,如果值为2,表示隔两个标签显示一个标签,以此类推。 |
| | | rotate: this.barChartData.length >= 6 ? -30 : 0, // 刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠;旋转的角度从-90度到90度 |
| | | inside: false, // 刻度标签是否朝内,默认朝外 |
| | | margin: 10, // 刻度标签与轴线之间的距离 |
| | | formatter: value => { |
| | | return `${this.barChartData.find(item => item.productionId === value).name}` |
| | | }, |
| | | fontSize: 14 |
| | | }, |
| | | axisTick: { |
| | | show: true, |
| | | alignWithLabel: true |
| | | } |
| | | }], |
| | | yAxis: [{ |
| | | rotate: 20, |
| | | margin: 25, |
| | | textStyle: { |
| | | fontSize: 14, |
| | | color: 'rgba(0,0,0,.45)', |
| | | align: 'center' |
| | | } |
| | | }, |
| | | interval: 0 |
| | | }, |
| | | yAxis: { |
| | | name: '%', |
| | | min: 0, |
| | | max: yAxisMax, |
| | | interval: yAxisInterval, |
| | | axisLabel: { |
| | | formatter: '{value}', |
| | | color: '#fff', |
| | | fontSize: 14 |
| | | splitLine: { |
| | | show: false |
| | | }, |
| | | axisTick: { |
| | | show: false |
| | | }, |
| | | axisLine: { |
| | | show: false, |
| | | show: true, |
| | | lineStyle: { |
| | | color: '#FFFFFF' |
| | | color: 'rgba(0,0,0,.45)' |
| | | } |
| | | }, |
| | | splitLine: { |
| | | show: false, |
| | | lineStyle: { |
| | | color: 'rgba(255,255,255,0.12)' |
| | | } |
| | | } |
| | | }], |
| | | series: [{ |
| | | type: 'bar', |
| | | 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 |
| | | }, |
| | | zlevel: 1, |
| | | label: { |
| | | show: false, |
| | | lineHeight: 10, |
| | | formatter: params => { |
| | | if (+params.value === 0) return '' |
| | | else return params.value |
| | | }, |
| | | position: 'top', |
| | | axisLabel: { |
| | | show: true, |
| | | margin: 10, |
| | | textStyle: { |
| | | color: '#fff', |
| | | fontSize: 16 |
| | | fontSize: 14, |
| | | color: 'rgba(0,0,0,.45)' |
| | | } |
| | | } |
| | | }, |
| | | series: [ |
| | | { |
| | | name: '背景', |
| | | type: 'bar', |
| | | barWidth: this.barChartData.length > 5 ? '40%' : 30, |
| | | barGap: '-100%', |
| | | data: defaultData, |
| | | type: 'pictorialBar', |
| | | symbolSize: [26, 10], |
| | | symbolOffset: [0, -5], |
| | | z: 12, |
| | | itemStyle: { |
| | | color: '#11294d', |
| | | barBorderRadius: 100 |
| | | } |
| | | color: function(params) { |
| | | return barBottomColor[params.dataIndex % barBottomColor.length] |
| | | } |
| | | }, |
| | | label: { |
| | | show: true, |
| | | position: 'top', |
| | | fontSize: 12, |
| | | color: 'rgba(0,0,0,.45)' |
| | | }, |
| | | symbolPosition: 'end', |
| | | data: this.barChartData |
| | | }, |
| | | { |
| | | type: 'pictorialBar', |
| | | symbolSize: [26, 10], |
| | | symbolOffset: [0, 5], |
| | | z: 12, |
| | | itemStyle: { |
| | | color: function(params) { |
| | | return barTopColor[params.dataIndex % barTopColor.length] |
| | | } |
| | | }, |
| | | data: this.barChartData |
| | | }, |
| | | { |
| | | type: 'bar', |
| | | itemStyle: { |
| | | color: function(params) { |
| | | return new echarts.graphic.LinearGradient( |
| | | 0, 0, 0, 1, |
| | | [{ |
| | | offset: 1, |
| | | color: barTopColor[params.dataIndex % barTopColor.length] |
| | | }, |
| | | { |
| | | offset: 0, |
| | | color: barBottomColor[params.dataIndex % barBottomColor.length] |
| | | } |
| | | ] |
| | | ) |
| | | }, |
| | | opacity: .9 |
| | | }, |
| | | z: 16, |
| | | barWidth: 26, |
| | | barGap: '-100%', |
| | | data: this.barChartData |
| | | }] |
| | | } |
| | | option.title.text = moment().subtract(1, 'months').format('M月') + `OEE` |
| | |
| | | /* 绘制双柱图 */ |
| | | drawDoubleBarChart() { |
| | | const option = { |
| | | color: ['#66DFE2', '#79CEAA'], |
| | | color: ['#1890FF', '#2EC35C'], |
| | | tooltip: { |
| | | confine: true, |
| | | trigger: 'axis', |
| | | axisPointer: { |
| | | type: 'shadow' |
| | | }, |
| | | formatter: function(params) { |
| | | return '<span style="font-weight:bolder;">' + params.name + '</span><br/>' + |
| | | '<span style="display:inline-block; width:10px; height:10px; border-radius:100px; margin-right:5px; background:' + params.color + '"></span>' + params.seriesName + ' : ' + params.value + '%' |
| | | let result = '' |
| | | params.forEach((item, index) => { |
| | | let dom = `<span style="display:inline-block;width:10px;height:10px;border-radius:100px;margin-right:5px;background:${item.color}"></span>${item.seriesName}:${item.value}%` |
| | | if (index === 0) { |
| | | result = `<span style="font-weight:bolder;">${item.name}</span>` |
| | | } |
| | | result += '<br />' + dom |
| | | }) |
| | | return result |
| | | } |
| | | }, |
| | | grid: { |
| | |
| | | formatter: ['{a|{name}}'].join('\n'), |
| | | textStyle: { |
| | | fontSize: 14, |
| | | color: '#fff', |
| | | color: 'rgba(0, 0, 0, .45)', |
| | | height: 8, |
| | | rich: { |
| | | a: { |
| | |
| | | type: 'category', |
| | | data: this.doubleBarChartData.dateList, |
| | | axisLine: { |
| | | show: true, |
| | | lineStyle: { |
| | | color: 'rgba(255,255,255,0.45)' |
| | | color: 'rgba(0,0,0,.45)' |
| | | } |
| | | }, |
| | | axisLabel: { |
| | | fontSize: 14, |
| | | color: '#fff' |
| | | color: 'rgba(0,0,0,.45)' |
| | | }, |
| | | axisTick: { |
| | | show: true |
| | |
| | | { |
| | | name: '%', |
| | | nameTextStyle: { |
| | | color: '#fff' |
| | | color: 'rgba(0,0,0,.45)' |
| | | }, |
| | | type: 'value', |
| | | min: 0, |
| | | minInterval: 1, |
| | | axisLine: { |
| | | show: true |
| | | show: true, |
| | | lineStyle: { |
| | | color: 'rgba(0,0,0,.45)' |
| | | } |
| | | }, |
| | | axisTick: { |
| | | show: true |
| | |
| | | }, |
| | | axisLabel: { |
| | | fontSize: 14, |
| | | color: '#fff', |
| | | color: 'rgba(0,0,0,.45)', |
| | | fontFamily: 'Bebas' |
| | | } |
| | | }, |
| | | { |
| | | type: 'value', |
| | | axisLine: { |
| | | show: true |
| | | show: true, |
| | | lineStyle: { |
| | | color: 'rgba(0,0,0,.45)' |
| | | } |
| | | }, |
| | | axisTick: { |
| | | show: false |
| | |
| | | fontSize: 14, |
| | | formatter: '{value}%', // 右侧Y轴文字显示 |
| | | fontFamily: 'Bebas', |
| | | color: '#6A93B9' |
| | | color: 'rgba(0,0,0,.45)' |
| | | }, |
| | | splitArea: { |
| | | show: false |
| | | } |
| | | }], |
| | | series: [{ |
| | | type: 'bar', |
| | | barWidth: 15, |
| | | itemStyle: { barBorderRadius: 100 }, |
| | | name: 'OEE', |
| | | data: this.doubleBarChartData.oeeList, |
| | | label: { |
| | | show: false, |
| | | lineHeight: 10, |
| | | formatter: params => { |
| | | if (+params.value === 0) return '' |
| | | else return params.value |
| | | }, |
| | | position: 'inside', |
| | | textStyle: { |
| | | color: '#fff', |
| | | fontSize: 12 |
| | | series: [ |
| | | { |
| | | type: 'bar', |
| | | barWidth: 20, |
| | | barGap: '0%', |
| | | itemStyle: { barBorderRadius: 4 }, |
| | | name: 'OEE', |
| | | data: this.doubleBarChartData.oeeList, |
| | | label: { |
| | | show: true, |
| | | lineHeight: 10, |
| | | formatter: params => { |
| | | if (+params.value === 0) return '' |
| | | else return params.value |
| | | }, |
| | | position: 'top', |
| | | textStyle: { |
| | | color: 'rgba(0,0,0,.45)', |
| | | fontSize: 10 |
| | | } |
| | | } |
| | | }, |
| | | { |
| | | type: 'bar', |
| | | barWidth: 20, |
| | | barGap: '0%', |
| | | itemStyle: { barBorderRadius: 4 }, |
| | | name: 'TEEP', |
| | | data: this.doubleBarChartData.utilizationList, |
| | | label: { |
| | | show: true, |
| | | lineHeight: 10, |
| | | formatter: params => { |
| | | if (+params.value === 0) return '' |
| | | else return params.value |
| | | }, |
| | | position: 'inside', |
| | | textStyle: { |
| | | color: 'rgba(0,0,0,.45)', |
| | | fontSize: 10 |
| | | } |
| | | } |
| | | } |
| | | }, { |
| | | type: 'bar', |
| | | barWidth: 15, |
| | | itemStyle: { barBorderRadius: 100 }, |
| | | name: 'TEEP', |
| | | data: this.doubleBarChartData.utilizationList, |
| | | label: { |
| | | show: false, |
| | | lineHeight: 10, |
| | | formatter: params => { |
| | | if (+params.value === 0) return '' |
| | | else return params.value |
| | | }, |
| | | position: 'inside', |
| | | textStyle: { |
| | | color: '#fff', |
| | | fontSize: 12 |
| | | } |
| | | } |
| | | } |
| | | ] |
| | | } |
| | | this.doubleBarChart.setOption(option, true) |
| | |
| | | drawWorkshopProblemChart() { |
| | | this.problemConfig = { |
| | | indexHeader: '序号', |
| | | header: ['问题内容', '时间'], |
| | | headerBGC: '#86D186', |
| | | oddRowBGC: '#7CBF7C', |
| | | evenRowBGC: '#7CBF7C', |
| | | header: ['时间', '问题内容'], |
| | | headerBGC: '#A5CCE6', |
| | | oddRowBGC: '#6B9FCD', |
| | | evenRowBGC: '#5A7D9A', |
| | | data: this.workshopProblemChartData, |
| | | index: true, |
| | | columnWidth: [100, 300, 150], |
| | | align: ['center'] |
| | | columnWidth: [100, 200, 300], |
| | | align: ['center', 'center', 'center'] |
| | | } |
| | | }, |
| | | |
| | |
| | | openMaintenanceModal(record) { |
| | | this.modalTitle = record.planTime |
| | | this.modalDataApiParams = { |
| | | productionCode: this.productionCode |
| | | productionCode: this.productionCode, |
| | | code: record.code |
| | | } |
| | | this.modalDataApiUrl = record.apiUrl |
| | | this.modalDataApiUrl = '/eam/home/maintenanceList' |
| | | this.modalVisible = true |
| | | }, |
| | | |
| | |
| | | |
| | | <style lang="less" scoped> |
| | | .page-container { |
| | | .page-title { |
| | | display: flex; |
| | | justify-content: space-evenly; |
| | | flex-wrap: wrap; |
| | | color: #fff; |
| | | margin-bottom: 10px; |
| | | |
| | | } |
| | | |
| | | .content-container { |
| | | padding-top: 5px; |
| | | display: flex; |
| | |
| | | this.getEfficiencyDataByApi() |
| | | this.getTechConditionAndWarrantyMalfunctionDataByApi() |
| | | this.getThirdMaintenanceConditionByApi() |
| | | this.getTwoMaintenanceChartDataByApi() |
| | | this.getSecondMaintenanceChartDataByApi() |
| | | this.getBarChartDataByApi() |
| | | this.getDoubleBarChartDataByApi() |
| | | this.getWorkshopProblemChartDataByApi() |
| | |
| | | this.runningStateChart.showLoading({ |
| | | text: '数据加载中 ...', |
| | | color: '#0696e1', // 加载动画颜色 |
| | | textColor: 'rgba(0, 0, 0, .45)', |
| | | maskColor: 'transparent' // 遮罩层 |
| | | textColor: 'rgba(0, 0, 0, .45)' |
| | | }) |
| | | signageApi.getEquipmentStatusStatisticsApi() |
| | | .then(res => { |
| | |
| | | this.efficiencyChart.showLoading({ |
| | | text: '数据加载中 ...', |
| | | color: '#0696e1', // 加载动画颜色 |
| | | textColor: 'rgba(0, 0, 0, .45)', |
| | | maskColor: 'transparent' // 遮罩层 |
| | | textColor: 'rgba(0, 0, 0, .45)' |
| | | }) |
| | | signageApi.getEquipmentUtilizationStatisticsApi() |
| | | .then(res => { |
| | |
| | | this.techConditionChart.showLoading({ |
| | | text: '数据加载中 ...', |
| | | color: '#0696e1', // 加载动画颜色 |
| | | textColor: 'rgba(0, 0, 0, .45)', |
| | | maskColor: 'transparent' // 遮罩层 |
| | | textColor: 'rgba(0, 0, 0, .45)' |
| | | }) |
| | | this.warrantyMalfunctionChart.showLoading({ |
| | | text: '数据加载中 ...', |
| | | color: '#0696e1', // 加载动画颜色 |
| | | textColor: 'rgba(0, 0, 0, .45)', |
| | | maskColor: 'transparent' // 遮罩层 |
| | | textColor: 'rgba(0, 0, 0, .45)' |
| | | }) |
| | | signageApi.getEquipmentTechnologyStatusAndReportRepairEquipmentListApi() |
| | | .then(res => { |
| | |
| | | technologyStatus: 'QUALIFIED' |
| | | }, |
| | | { |
| | | value: res.result.jszt.length > 0 ? res.result.jszt.find(item => item.code === 'PROHIBITED').value : 0, |
| | | name: '禁用', |
| | | technologyStatus: 'PROHIBITED' |
| | | }, |
| | | { |
| | | value: res.result.jszt.length > 0 ? res.result.jszt.find(item => item.code === 'RESTRICTED').value : 0, |
| | | name: '限用', |
| | | technologyStatus: 'RESTRICTED' |
| | | }, |
| | | { |
| | | value: res.result.jszt.length > 0 ? res.result.jszt.find(item => item.code === 'PROHIBITED').value : 0, |
| | | name: '禁用', |
| | | technologyStatus: 'PROHIBITED' |
| | | } |
| | | ] |
| | | this.warrantyMalfunctionData = [ |
| | | { |
| | | value: res.result.bxqk.length > 0 ? res.result.bxqk.find(item => item.code === 'bx').value : 0, |
| | | name: '报修', |
| | | code: 'bx' |
| | | value: res.result.bxqk.length > 0 ? res.result.bxqk.find(item => item.code === 'run').value : 0, |
| | | name: '运行', |
| | | code: 'run' |
| | | }, |
| | | { |
| | | value: res.result.bxqk.length > 0 ? res.result.bxqk.find(item => item.code === 'stop').value : 0, |
| | |
| | | code: 'stop' |
| | | }, |
| | | { |
| | | value: res.result.bxqk.length > 0 ? res.result.bxqk.find(item => item.code === 'run').value : 0, |
| | | name: '运行', |
| | | code: 'run' |
| | | value: res.result.bxqk.length > 0 ? res.result.bxqk.find(item => item.code === 'bx').value : 0, |
| | | name: '报修', |
| | | code: 'bx' |
| | | } |
| | | ] |
| | | this.techConditionChartRequireFinished = true |
| | |
| | | }, |
| | | |
| | | /* 调用接口获取二保计划 */ |
| | | getTwoMaintenanceChartDataByApi() { |
| | | signageApi.getTwoMaintenancePlanListApi() |
| | | getSecondMaintenanceChartDataByApi() { |
| | | signageApi.getSecondMaintenancePlanListApi() |
| | | .then(res => { |
| | | 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: 'rgba(0, 0, 0, .45)', |
| | | maskColor: 'transparent' // 遮罩层 |
| | | textColor: 'rgba(0, 0, 0, .45)' |
| | | }) |
| | | signageApi.getEquipmentOEEStatistics() |
| | | .then(res => { |
| | |
| | | this.doubleBarChart.showLoading({ |
| | | text: '数据加载中 ...', |
| | | color: '#0696e1', // 加载动画颜色 |
| | | textColor: 'rgba(0, 0, 0, .45)', |
| | | maskColor: 'transparent' // 遮罩层 |
| | | textColor: 'rgba(0, 0, 0, .45)' |
| | | }) |
| | | signageApi.getEquipmentMonthStatisticsApi() |
| | | .then(res => { |
| | |
| | | itemGap: 15, |
| | | textStyle: { |
| | | color: 'rgba(0,0,0,.45)', |
| | | fontSize: 14, |
| | | padding: [0, 0, 0, 0] |
| | | fontSize: 14 |
| | | }, |
| | | data: ['关机', '报警', '待机', '运行'] |
| | | data: ['运行', '待机', '报警', '关机'] |
| | | }, |
| | | grid: { |
| | | containLabel: true |
| | |
| | | { |
| | | type: 'pie', |
| | | roseType: 'angle', // 玫瑰图 |
| | | // selectedMode: "single", |
| | | radius: this.pieChartRadius, |
| | | center: ['50%', '60%'], |
| | | color: [ |
| | |
| | | position: 'outside', |
| | | show: true, |
| | | color: 'rgba(0,0,0,.45)', |
| | | // textBorderColor: 'inherit', |
| | | // textBorderWidth: 1, |
| | | fontSize: 16, |
| | | formatter: function(params) { |
| | | if (params.name !== '') { |
| | |
| | | |
| | | /* 绘制设备利用率胶囊图 */ |
| | | drawEfficiencyChart() { |
| | | const data = this.efficiencyData |
| | | const colorArray = [ |
| | | { |
| | | top: '#EA967B', |
| | |
| | | bottom: '#8DCCEF' |
| | | } |
| | | ] |
| | | const data = this.efficiencyData |
| | | const defaultData = [] |
| | | 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整除的数字 |
| | | const yAxisInterval = yAxisMax / 5 // 同时将刻度值分成5份 |
| | | data.forEach(item => defaultData.push(yAxisMax)) |
| | | const option = { |
| | | title: { |
| | | show: true, // 是否显示标题,默认为true |
| | |
| | | }, |
| | | show: true, |
| | | min: 0, |
| | | max: 'dataMax', |
| | | max: dataMax, |
| | | interval: yAxisInterval, |
| | | type: 'value', |
| | | axisTick: { |
| | |
| | | top: 25, |
| | | orient: 'vertical', |
| | | right: 0, |
| | | // bottom: "0", |
| | | itemWidth: 14, |
| | | itemHeight: 14, |
| | | icon: 'roundRect', |
| | | itemGap: 15, |
| | | textStyle: { |
| | | color: 'rgba(0,0,0,.45)', |
| | | fontSize: 14, |
| | | padding: [0, 0, 0, 0] |
| | | fontSize: 14 |
| | | }, |
| | | data: ['合格', '禁用', '限用'] |
| | | data: ['合格', '限用', '禁用'] |
| | | }, |
| | | grid: { |
| | | containLabel: true |
| | |
| | | series: [ |
| | | { |
| | | type: 'pie', |
| | | // selectedMode: "single", |
| | | radius: this.pieChartRadius, |
| | | center: ['45%', '60%'], |
| | | color: [ |
| | |
| | | position: 'outside', |
| | | show: true, |
| | | color: 'rgba(0,0,0,.45)', |
| | | // textBorderColor: 'inherit', |
| | | // textBorderWidth: 1, |
| | | fontSize: 16, |
| | | formatter: function(params) { |
| | | if (params.name !== '') { |
| | |
| | | series: [ |
| | | { |
| | | type: 'pie', |
| | | // selectedMode: "single", |
| | | radius: this.pieChartRadius, |
| | | center: ['45%', '60%'], |
| | | color: [ |
| | |
| | | |
| | | /* 绘制单柱图 */ |
| | | drawBarChart() { |
| | | const defaultData = [] |
| | | 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整除的数字 |
| | | const yAxisInterval = yAxisMax / 5 // 同时将刻度值分成5份 |
| | | this.barChartData.forEach(item => defaultData.push(yAxisMax)) |
| | | console.log('bar', this.barChartData) |
| | | let barTopColor = ['#EA967B', '#62AC75', '#32ACBF', '#7196CE'] |
| | | let barBottomColor = ['#F8E18B', '#A8D07C', '#7BCAC5', '#8DCCEF'] |
| | | const option = { |
| | |
| | | barWidth: 26, |
| | | barGap: '-100%', |
| | | data: this.barChartData |
| | | }] |
| | | } |
| | | ] |
| | | } |
| | | |
| | | option.title.text = moment().subtract(1, 'months').format('M月') + `OEE` |
| | |
| | | const option = { |
| | | color: ['#1890FF', '#2EC35C'], |
| | | tooltip: { |
| | | confine: true, |
| | | trigger: 'axis', |
| | | axisPointer: { |
| | | type: 'shadow' |
| | | }, |
| | | formatter: function(params) { |
| | | return '<span style="font-weight:bolder;">' + params.name + '</span><br/>' + |
| | | '<span style="display:inline-block; width:10px; height:10px; border-radius:100px; margin-right:5px; background:' + params.color + '"></span>' + params.seriesName + ' : ' + params.value + '%' |
| | | let result = '' |
| | | params.forEach((item, index) => { |
| | | let dom = `<span style="display:inline-block;width:10px;height:10px;border-radius:100px;margin-right:5px;background:${item.color}"></span>${item.seriesName}:${item.value}%` |
| | | if (index === 0) { |
| | | result = `<span style="font-weight:bolder;">${item.name}</span>` |
| | | } |
| | | result += '<br />' + dom |
| | | }) |
| | | return result |
| | | } |
| | | }, |
| | | grid: { |
| | |
| | | show: false |
| | | } |
| | | }], |
| | | series: [{ |
| | | type: 'bar', |
| | | barWidth: 20, |
| | | barGap: '0%', |
| | | itemStyle: { barBorderRadius: 4 }, |
| | | name: 'OEE', |
| | | data: this.doubleBarChartData.oeeList, |
| | | label: { |
| | | show: true, |
| | | lineHeight: 10, |
| | | formatter: params => { |
| | | if (+params.value === 0) return '' |
| | | else return params.value |
| | | }, |
| | | position: 'top', |
| | | textStyle: { |
| | | color: 'rgba(0,0,0,.45)', |
| | | fontSize: 10 |
| | | series: [ |
| | | { |
| | | type: 'bar', |
| | | barWidth: 20, |
| | | barGap: '0%', |
| | | itemStyle: { barBorderRadius: 4 }, |
| | | name: 'OEE', |
| | | data: this.doubleBarChartData.oeeList, |
| | | label: { |
| | | show: true, |
| | | lineHeight: 10, |
| | | formatter: params => { |
| | | if (+params.value === 0) return '' |
| | | else return params.value |
| | | }, |
| | | position: 'top', |
| | | textStyle: { |
| | | color: 'rgba(0,0,0,.45)', |
| | | fontSize: 10 |
| | | } |
| | | } |
| | | }, |
| | | { |
| | | type: 'bar', |
| | | barWidth: 20, |
| | | barGap: '0%', |
| | | itemStyle: { barBorderRadius: 4 }, |
| | | name: 'TEEP', |
| | | data: this.doubleBarChartData.utilizationList, |
| | | label: { |
| | | show: true, |
| | | lineHeight: 10, |
| | | formatter: params => { |
| | | if (+params.value === 0) return '' |
| | | else return params.value |
| | | }, |
| | | position: 'inside', |
| | | textStyle: { |
| | | color: 'rgba(0,0,0,.45)', |
| | | fontSize: 10 |
| | | } |
| | | } |
| | | } |
| | | }, { |
| | | type: 'bar', |
| | | barWidth: 20, |
| | | barGap: '0%', |
| | | itemStyle: { barBorderRadius: 4 }, |
| | | name: 'TEEP', |
| | | data: this.doubleBarChartData.utilizationList, |
| | | label: { |
| | | show: true, |
| | | lineHeight: 10, |
| | | formatter: params => { |
| | | if (+params.value === 0) return '' |
| | | else return params.value |
| | | }, |
| | | position: 'inside', |
| | | textStyle: { |
| | | color: 'rgba(0,0,0,.45)', |
| | | fontSize: 10 |
| | | } |
| | | } |
| | | } |
| | | ] |
| | | } |
| | | this.doubleBarChart.setOption(option, true) |
| | |
| | | |
| | | <style lang="less" scoped> |
| | | .page-container { |
| | | .page-title { |
| | | display: flex; |
| | | justify-content: space-evenly; |
| | | flex-wrap: wrap; |
| | | color: #fff; |
| | | margin-bottom: 10px; |
| | | } |
| | | |
| | | .content-container { |
| | | padding-top: 5px; |
| | | display: flex; |
| | |
| | | </div> |
| | | |
| | | <dv-border-box-9 style="padding: 15px 15px 0"> |
| | | <div id="tech_condition_chart" style="width:100%;height: 240px;"></div> |
| | | <div id="warranty_malfunction_chart" style="width:100%;height: 240px;"></div> |
| | | <div> |
| | | <div style="display: flex;flex-direction:column;align-items: center"> |
| | | <dv-decoration-11 style="width:45%;height:60px;color: #fff;font-size: 20px;align-self: flex-start">三保计划 |
| | | </dv-decoration-11> |
| | | <div class="support-plan-container"> |
| | | <div v-for="(item,index) in supportPlanList" :key="index" class="support-plan-item" |
| | | :style="{background:item.backgroundColor}" @click="openMaintenanceModal(item)"> |
| | | <div>{{item.planTime}}</div> |
| | | <div class="plan-value-container"> |
| | | <div class="plan-value">{{$data[item.planValueLabel]}}</div> |
| | | <div>台</div> |
| | | </div> |
| | | <div id="tech_condition_chart" style="width:100%;height: 280px;"></div> |
| | | <div id="warranty_malfunction_chart" style="width:100%;height: 280px;"></div> |
| | | <div style="display: flex;flex-direction:column;align-items: center;margin-top: 40px"> |
| | | <div class="support-plan-container"> |
| | | <div v-for="(item,index) in supportPlanList" :key="index" class="support-plan-item" |
| | | :style="{background:item.backgroundColor}" @click="openMaintenanceModal(item)"> |
| | | <div>{{item.planTime}}</div> |
| | | <div class="plan-value-container"> |
| | | <div class="plan-value">{{$data[item.planValueLabel]}}</div> |
| | | <div>台</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div style="display: flex;margin-top: 10px;justify-content: space-between;align-items: center;"> |
| | | <dv-decoration-11 style="width:45%;height:60px;font-size: 20px;color: #fff">二保计划</dv-decoration-11> |
| | | <div |
| | | style="flex:1;text-align:center;font-size: 25px;color: #9BD890;overflow: hidden;text-overflow: ellipsis;white-space: nowrap"> |
| | | 2024年4月1日大修 |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | import signageApi from '@/api/signage' |
| | | import moment from 'moment' |
| | | import SignageModal from './modules/SignageModal' |
| | | import * as echarts from 'echarts' |
| | | |
| | | export default { |
| | | name: 'WorkshopSectionSignage', |
| | |
| | | { |
| | | planTime: '本月三保计划', |
| | | planValueLabel: 'thisMonthMaintenancePlanNum', |
| | | backgroundColor: '#5FE0AF', |
| | | apiUrl: '/eam/calibrationOrder/showThisMonthMaintenanceList' |
| | | backgroundColor: '#719D8E', |
| | | code: 'bysbzs' |
| | | }, |
| | | |
| | | { |
| | | planTime: '本月完成量', |
| | | planValueLabel: 'thisMonthMaintenanceRealNum', |
| | | backgroundColor: '#409EFF', |
| | | apiUrl: '/eam/calibrationOrder/showThisMonthMaintenanceFinishList' |
| | | code: 'bwc' |
| | | }, |
| | | { |
| | | planTime: '延期', |
| | | planValueLabel: 'maintenanceExtensionNum', |
| | | backgroundColor: '#FCAA29', |
| | | apiUrl: '/eam/calibrationOrder/show3MaintenancePostponeList' |
| | | backgroundColor: '#E89D29', |
| | | code: '' |
| | | }, |
| | | |
| | | { |
| | | planTime: '超期', |
| | | planValueLabel: 'maintenanceOverdueNum', |
| | | backgroundColor: '#F56C6C', |
| | | apiUrl: '/eam/calibrationOrder/show3MaintenanceOverdueList' |
| | | code: '' |
| | | }, |
| | | { |
| | | planTime: '下月计划', |
| | | planValueLabel: 'nextMonthMaintenancePlanNum', |
| | | backgroundColor: '#D6BC52', |
| | | apiUrl: '/eam/calibrationOrder/showNextMonthMaintenanceList' |
| | | backgroundColor: '#A8985D', |
| | | code: 'xysb' |
| | | }, |
| | | { |
| | | planTime: '下下月计划', |
| | | planValueLabel: 'nextNextMonthMaintenancePlanNum', |
| | | backgroundColor: '#58D9F9', |
| | | apiUrl: '/eam/calibrationOrder/showNextNextMonthMaintenanceList' |
| | | code: 'xxysb' |
| | | } |
| | | ], |
| | | thisMonthMaintenancePlanNum: 0, |
| | |
| | | methods: { |
| | | /* 调用接口获取图表数据汇总方法 */ |
| | | getChartDataByApi() { |
| | | this.getTechConditionDataByApi() |
| | | this.getWarrantyMalfunctionDataByApi() |
| | | this.getTechConditionAndWarrantyMalfunctionDataByApi() |
| | | this.getRunningStateDataByApi() |
| | | this.getMonthMaintenanceNumByApi() |
| | | this.getThirdMaintenanceNumByApi() |
| | | this.getFirst7DaysEfficiencyDataByApi() |
| | | this.getGaugeChartDataByApi() |
| | | this.getBarChartDataByApi() |
| | | }, |
| | | |
| | | /* 调用接口获取技术状态 */ |
| | | 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)' |
| | | }) |
| | | signageApi.getEquipmentTechnologyStatusListApi(this.productionCode) |
| | | .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)' |
| | | }) |
| | | signageApi.getReportRepairEquipmentListApi(this.productionCode) |
| | | signageApi.getEquipmentTechnologyStatusAndReportRepairEquipmentListApi(this.productionCode) |
| | | .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.length > 0 ? res.result.jszt.find(item => item.code === 'QUALIFIED').value : 0, |
| | | name: '合格', |
| | | technologyStatus: 'QUALIFIED' |
| | | }, |
| | | { |
| | | value: res.result.jszt.length > 0 ? res.result.jszt.find(item => item.code === 'RESTRICTED').value : 0, |
| | | name: '限用', |
| | | technologyStatus: 'RESTRICTED' |
| | | }, |
| | | { |
| | | value: res.result.jszt.length > 0 ? res.result.jszt.find(item => item.code === 'PROHIBITED').value : 0, |
| | | name: '禁用', |
| | | technologyStatus: 'PROHIBITED' |
| | | } |
| | | ] |
| | | this.warrantyMalfunctionData = [ |
| | | { |
| | | value: res.result.bxqk.length > 0 ? res.result.bxqk.find(item => item.code === 'run').value : 0, |
| | | name: '运行', |
| | | code: 'run' |
| | | }, |
| | | { |
| | | value: res.result.bxqk.length > 0 ? res.result.bxqk.find(item => item.code === 'stop').value : 0, |
| | | name: '停机', |
| | | code: 'stop' |
| | | }, |
| | | { |
| | | value: res.result.bxqk.length > 0 ? res.result.bxqk.find(item => item.code === 'bx').value : 0, |
| | | name: '报修', |
| | | code: 'bx' |
| | | } |
| | | ] |
| | | this.techConditionChartRequireFinished = true |
| | | this.warrantyMalfunctionChartRequireFinished = true |
| | | this.drawTechConditionChart() |
| | | this.drawWarrantyMalfunctionChart() |
| | | } |
| | | }) |
| | | }, |
| | | |
| | | /* 调用接口获取三保计划 */ |
| | | getMonthMaintenanceNumByApi() { |
| | | signageApi.getThisMonthMaintenanceListApi(this.productionCode) |
| | | getThirdMaintenanceNumByApi() { |
| | | signageApi.getThirdMaintenanceConditionApi(this.productionCode) |
| | | .then(res => { |
| | | if (res.success && res.result) this.thisMonthMaintenancePlanNum = res.result[0].totalCount |
| | | }) |
| | | signageApi.getThisMonthMaintenanceFinishListApi(this.productionCode) |
| | | .then(res => { |
| | | if (res.success && res.result) this.thisMonthMaintenanceRealNum = res.result[0].totalCount |
| | | }) |
| | | signageApi.getNextMonthMaintenanceList(this.productionCode) |
| | | .then(res => { |
| | | if (res.success && res.result) this.nextMonthMaintenancePlanNum = res.result[0].totalCount |
| | | }) |
| | | signageApi.getNextNextMonthMaintenanceListApi(this.productionCode) |
| | | .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 |
| | | } |
| | | }) |
| | | }, |
| | | |
| | |
| | | this.runningStateChart.showLoading({ |
| | | text: '数据加载中 ...', |
| | | color: '#0696e1', // 加载动画颜色 |
| | | textColor: '#fff', |
| | | maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层 |
| | | textColor: 'rgba(0,0,0,.45)' |
| | | }) |
| | | signageApi.getEquipmentStatusStatisticsApi(this.productionCode) |
| | | .then(res => { |
| | |
| | | this.first7DaysEfficiencyChart.showLoading({ |
| | | text: '数据加载中 ...', |
| | | color: '#0696e1', // 加载动画颜色 |
| | | textColor: '#fff', |
| | | maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层 |
| | | textColor: 'rgba(0,0,0,.45)' |
| | | }) |
| | | signageApi.getEquipmentDayUtilizationStatisticsApi(this.productionCode) |
| | | .then(res => { |
| | |
| | | this.gaugeChart1.showLoading({ |
| | | text: '数据加载中 ...', |
| | | color: '#0696e1', // 加载动画颜色 |
| | | textColor: '#fff', |
| | | maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层 |
| | | textColor: 'rgba(0,0,0,.45)' |
| | | }) |
| | | this.gaugeChart2.showLoading({ |
| | | text: '数据加载中 ...', |
| | | color: '#0696e1', // 加载动画颜色 |
| | | textColor: '#fff', |
| | | maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层 |
| | | textColor: 'rgba(0,0,0,.45)' |
| | | }) |
| | | this.gaugeChart3.showLoading({ |
| | | text: '数据加载中 ...', |
| | | color: '#0696e1', // 加载动画颜色 |
| | | textColor: '#fff', |
| | | maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层 |
| | | textColor: 'rgba(0,0,0,.45)' |
| | | }) |
| | | this.gaugeChart4.showLoading({ |
| | | text: '数据加载中 ...', |
| | | color: '#0696e1', // 加载动画颜色 |
| | | textColor: '#fff', |
| | | maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层 |
| | | textColor: 'rgba(0,0,0,.45)' |
| | | }) |
| | | signageApi.getEquipmentEfficiencyStatisticsApi(this.productionCode) |
| | | .then(res => { |
| | |
| | | this.barChart.showLoading({ |
| | | text: '数据加载中 ...', |
| | | color: '#0696e1', // 加载动画颜色 |
| | | textColor: '#fff', |
| | | maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层 |
| | | textColor: 'rgba(0,0,0,.45)' |
| | | }) |
| | | signageApi.getEquipmentOEEMonthStatisticsApi(this.productionCode) |
| | | .then(res => { |
| | | if (res.success && res.result && res.result.length > 0) { |
| | | if (res.success && res.result) { |
| | | this.barChartData = res.result.map(item => { |
| | | return { |
| | | name: item.equipmentId, |
| | |
| | | }) |
| | | this.drawBarChart() |
| | | } |
| | | |
| | | }) |
| | | }, |
| | | |
| | |
| | | top: 'bottom', |
| | | orient: 'horizontal', |
| | | right: 0, |
| | | // bottom: "0", |
| | | itemWidth: 14, |
| | | itemHeight: 14, |
| | | icon: 'roundRect', |
| | | itemGap: 15, |
| | | textStyle: { |
| | | color: 'inherit', |
| | | fontSize: 14, |
| | | padding: [0, 0, 0, 0] |
| | | color: 'rgba(0,0,0,.45)', |
| | | fontSize: 14 |
| | | }, |
| | | data: ['合格', '禁用', '限用'] |
| | | data: ['合格', '限用', '禁用'] |
| | | }, |
| | | grid: { |
| | | containLabel: true |
| | |
| | | series: [ |
| | | { |
| | | type: 'pie', |
| | | // selectedMode: "single", |
| | | radius: this.pieChartRadius, |
| | | center: ['50%', '50%'], |
| | | color: [ |
| | | '#0FC61A', |
| | | '#F56436', |
| | | '#8B8B8B' |
| | | '#0AA012', |
| | | '#247F49', |
| | | '#757160' |
| | | ], |
| | | label: { |
| | | position: 'outside', |
| | | show: true, |
| | | color: 'inherit', |
| | | // textBorderColor: 'inherit', |
| | | // textBorderWidth: 1, |
| | | color: 'rgba(0,0,0,.45)', |
| | | fontSize: 16, |
| | | formatter: function(params) { |
| | | if (params.name !== '') { |
| | |
| | | labelLine: { |
| | | show: true, |
| | | length2: 15, |
| | | length: 15 |
| | | length: 15, |
| | | lineStyle: { |
| | | color: 'rgba(0,0,0,.45)' |
| | | } |
| | | }, |
| | | data: this.techConditionData |
| | | } |
| | |
| | | }) |
| | | }, |
| | | |
| | | /* 绘制设备报修故障饼图 */ |
| | | /* 绘制设备报修故障情况饼图 */ |
| | | drawWarrantyMalfunctionChart() { |
| | | const option = { |
| | | title: { |
| | | show: true, // 是否显示标题,默认为true |
| | | text: '设备报修故障', // 主标题文本 |
| | | text: '设备报修故障情况', // 主标题文本 |
| | | x: 'left', // 标题水平安放位置,可选值为'left'、'center'、'right'或具体的水平坐标值 |
| | | y: 'top', // 标题垂直安放位置,可选值为'top'、'bottom'、'center'或具体的垂直坐标值 |
| | | textStyle: { |
| | |
| | | top: 'bottom', |
| | | orient: 'horizontal', |
| | | right: 0, |
| | | // bottom: "0", |
| | | itemWidth: 14, |
| | | itemHeight: 14, |
| | | icon: 'roundRect', |
| | | itemGap: 15, |
| | | textStyle: { |
| | | color: 'inherit', |
| | | fontSize: 14, |
| | | padding: [0, 0, 0, 0] |
| | | color: 'rgba(0,0,0,.45)', |
| | | fontSize: 14 |
| | | }, |
| | | data: ['报修', '停机', '运行'] |
| | | }, |
| | |
| | | series: [ |
| | | { |
| | | type: 'pie', |
| | | // selectedMode: "single", |
| | | radius: this.pieChartRadius, |
| | | center: ['50%', '50%'], |
| | | color: [ |
| | | '#24F2F5', |
| | | '#F56436', |
| | | '#FFFF40' |
| | | '#00CED1', |
| | | '#B85B38', |
| | | '#FFFF88' |
| | | ], |
| | | label: { |
| | | position: 'outside', |
| | | show: true, |
| | | color: 'inherit', |
| | | // textBorderColor: 'inherit', |
| | | // textBorderWidth: 1, |
| | | color: 'rgba(0,0,0,.45)', |
| | | fontSize: 16, |
| | | formatter: function(params) { |
| | | if (params.name !== '') { |
| | |
| | | labelLine: { |
| | | show: true, |
| | | length2: 15, |
| | | length: 15 |
| | | length: 15, |
| | | lineStyle: { |
| | | color: 'rgba(0,0,0,.45)' |
| | | } |
| | | }, |
| | | data: this.warrantyMalfunctionData |
| | | } |
| | |
| | | const option = { |
| | | title: { |
| | | show: true, // 是否显示标题,默认为true |
| | | text: '设备状态', // 主标题文本 |
| | | text: '设备运行状态统计', // 主标题文本 |
| | | x: 'left', // 标题水平安放位置,可选值为'left'、'center'、'right'或具体的水平坐标值 |
| | | y: 'top', // 标题垂直安放位置,可选值为'top'、'bottom'、'center'或具体的垂直坐标值 |
| | | textStyle: { |
| | |
| | | top: 'bottom', |
| | | orient: 'horizontal', |
| | | right: 0, |
| | | // bottom: "0", |
| | | itemWidth: 14, |
| | | itemHeight: 14, |
| | | icon: 'roundRect', |
| | | itemGap: 15, |
| | | textStyle: { |
| | | color: 'inherit', |
| | | fontSize: 14, |
| | | padding: [0, 0, 0, 0] |
| | | color: 'rgba(0,0,0,.45)', |
| | | fontSize: 14 |
| | | }, |
| | | data: ['关机', '报警', '待机', '运行'] |
| | | data: ['运行', '待机', '报警', '关机'] |
| | | }, |
| | | grid: { |
| | | containLabel: true |
| | |
| | | { |
| | | type: 'pie', |
| | | roseType: 'angle', // 玫瑰图 |
| | | // selectedMode: "single", |
| | | radius: this.pieChartRadius, |
| | | center: ['50%', '50%'], |
| | | color: [ |
| | | '#8B8B8B', |
| | | '#F56436', |
| | | '#FFFF40', |
| | | '#0FC61A' |
| | | '#686869', |
| | | '#AA6349', |
| | | '#FFFF88', |
| | | '#5D975D' |
| | | ], |
| | | label: { |
| | | position: 'outside', |
| | | show: true, |
| | | color: 'inherit', |
| | | // textBorderColor: 'inherit', |
| | | // textBorderWidth: 1, |
| | | fontSize: 30, |
| | | color: 'rgba(0,0,0,.45)', |
| | | fontSize: 16, |
| | | formatter: function(params) { |
| | | if (params.name !== '') { |
| | | return `${params.name}:${params.value}` |
| | |
| | | labelLine: { |
| | | show: true, |
| | | length2: 20, |
| | | length: 30 |
| | | length: 30, |
| | | lineStyle: { |
| | | color: 'rgba(0,0,0,.45)' |
| | | } |
| | | }, |
| | | data: this.runningStateData |
| | | } |
| | |
| | | name: '开机率', |
| | | value: this.first7DaysEfficiencyData.dataList.map(item => item.openRate) |
| | | } |
| | | ], |
| | | yAxisName: '前7天TEEP(%)' |
| | | ] |
| | | } |
| | | let legendData = [] |
| | | let seriesData = [] |
| | | let colorArr = ['#A7F0C1', '#FAE893', '#66DFE2'] |
| | | let colorArr = ['#1890FF', '#2EC35C', '#EA967B'] |
| | | legendData = newData.yAxis.map((item) => item.name) |
| | | seriesData = newData.yAxis.map((item1, index1) => { |
| | | return { |
| | | name: item1.name, |
| | | type: 'bar', |
| | | symbol: 'circle', |
| | | barGap: '0%', |
| | | symbolSize: 8, |
| | | itemStyle: { |
| | | color: colorArr[index1], |
| | | barBorderRadius: 100 |
| | | barBorderRadius: 4 |
| | | }, |
| | | lineStyle: { |
| | | width: 2 |
| | |
| | | show: true |
| | | }, |
| | | yAxisIndex: 1, |
| | | data: item1.value // 折线图的数据 |
| | | data: item1.value,// 折线图的数据 |
| | | label: { |
| | | show: true, |
| | | lineHeight: 10, |
| | | formatter: params => { |
| | | if (+params.value === 0) return '' |
| | | else return params.value |
| | | }, |
| | | position: index1 % 2 === 0 ? 'top' : 'inside', |
| | | textStyle: { |
| | | color: 'rgba(0,0,0,.45)', |
| | | fontSize: 10 |
| | | } |
| | | } |
| | | } |
| | | }) |
| | | const option = { |
| | | title: { |
| | | show: true, // 是否显示标题,默认为true |
| | | text: '前7天TEEP(%)', // 主标题文本 |
| | | x: 'left', // 标题水平安放位置,可选值为'left'、'center'、'right'或具体的水平坐标值 |
| | | y: 'top', // 标题垂直安放位置,可选值为'top'、'bottom'、'center'或具体的垂直坐标值 |
| | | textStyle: { |
| | | // 主标题文本样式 |
| | | fontSize: 18, |
| | | fontWeight: 'normal', |
| | | color: '#1AD8DE' |
| | | } |
| | | }, |
| | | grid: { |
| | | containLabel: true, |
| | | bottom: '1%', |
| | |
| | | itemGap: 10, |
| | | textStyle: { |
| | | fontSize: 14, |
| | | color: '#fff' |
| | | color: 'rgba(0,0,0,.45)' |
| | | } |
| | | }, |
| | | xAxis: { |
| | |
| | | interval: 0, |
| | | show: true, |
| | | fontSize: 14, |
| | | color: '#fff' |
| | | // rotate: -30, |
| | | margin: 10, |
| | | color: 'rgba(0,0,0,.45)' |
| | | }, |
| | | axisLine: { |
| | | show: true, |
| | | lineStyle: { |
| | | color: '#fff' |
| | | color: 'rgba(0,0,0,.45)' |
| | | } |
| | | }, |
| | | axisTick: { |
| | |
| | | name: newData.yAxisName, |
| | | nameTextStyle: { |
| | | color: '#1AD8DE', |
| | | fontSize: 18, |
| | | padding: [0, 0, 0, 110] |
| | | fontSize: 18 |
| | | }, |
| | | nameGap: 30, |
| | | type: 'value', |
| | |
| | | axisLine: { |
| | | show: true, |
| | | lineStyle: { |
| | | color: '#fff' |
| | | color: 'rgba(0,0,0,.45)' |
| | | } |
| | | }, |
| | | axisTick: { |
| | | show: false |
| | | }, |
| | | splitLine: { |
| | | show: false, |
| | | lineStyle: { |
| | | color: '#fff' |
| | | } |
| | | show: false |
| | | } |
| | | }, |
| | | { |
| | |
| | | max: 100, |
| | | axisLabel: { |
| | | show: true, |
| | | color: '#fff', |
| | | color: 'rgba(0,0,0,.45)', |
| | | fontSize: 14 |
| | | }, |
| | | axisLine: { |
| | | show: true, |
| | | lineStyle: { |
| | | color: '#fff' |
| | | color: 'rgba(0,0,0,.45)' |
| | | } |
| | | }, |
| | | axisTick: { |
| | | show: true |
| | | }, |
| | | splitLine: { |
| | | show: false, |
| | | lineStyle: { |
| | | color: '#fff' |
| | | } |
| | | show: false |
| | | } |
| | | } |
| | | ], |
| | |
| | | startValue: 0, // 从头开始。 |
| | | endValue: 6 // 一次性展示几个 |
| | | } |
| | | // toolbox: { |
| | | // show: true, |
| | | // feature: { |
| | | // mark: { show: true }, |
| | | // magicType: { show: true, type: ['line', 'bar'] }, |
| | | // restore: { show: true }, |
| | | // saveAsImage: { show: true, name: '前7天利用率统计图', pixelRatio: 1 } |
| | | // } |
| | | // } |
| | | } |
| | | this.first7DaysEfficiencyChart.setOption(option, true) |
| | | this.first7DaysEfficiencyChart.hideLoading() |
| | |
| | | // 设备列表大于7个时开启自动轮播 |
| | | if (this.first7DaysEfficiencyData.mdcEquipmentList.length <= 7) return |
| | | this.first7DaysEfficiencyChartCarouselTime = setInterval(() => { |
| | | colorArr.push(colorArr.shift()) |
| | | newData.xAxis.push(newData.xAxis.shift()) |
| | | newData.yAxis.forEach(item => item.value.push(item.value.shift())) |
| | | this.$nextTick(() => { |
| | |
| | | show: true, |
| | | length: 10, |
| | | lineStyle: { |
| | | color: '#fff', |
| | | color: 'rgba(0,0,0,.45)', |
| | | width: 2 |
| | | } |
| | | }, |
| | | axisTick: { |
| | | length: 5, |
| | | lineStyle: { |
| | | color: '#fff', |
| | | color: 'rgba(0,0,0,.45)', |
| | | width: 1 |
| | | } |
| | | }, |
| | |
| | | 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 |
| | | let barTopColor = ['#EA967B', '#62AC75', '#32ACBF', '#7196CE'] |
| | | let barBottomColor = ['#F8E18B', '#A8D07C', '#7BCAC5', '#8DCCEF'] |
| | | 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整除的数字 |
| | |
| | | left: '6%', |
| | | right: '3%' |
| | | }, |
| | | xAxis: [ |
| | | { |
| | | // name: '上个月OEE', |
| | | // nameLocation: 'middle', |
| | | // nameGap: 40, // x轴name与横坐标轴线的间距 |
| | | type: 'category', |
| | | data: xAisData, |
| | | axisLine: { |
| | | lineStyle: { |
| | | color: '#fff' |
| | | } |
| | | }, |
| | | axisLabel: { |
| | | show: true, // 是否显示刻度标签,默认显示 |
| | | interval: 0, // 坐标轴刻度标签的显示间隔,在类目轴中有效;默认会采用标签不重叠的策略间隔显示标签;可以设置成0强制显示所有标签;如果设置为1,表示『隔一个标签显示一个标签』,如果值为2,表示隔两个标签显示一个标签,以此类推。 |
| | | // rotate: this.barChartData.length >= 5 ? -30 : 0, // 刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠;旋转的角度从-90度到90度 |
| | | inside: false, // 刻度标签是否朝内,默认朝外 |
| | | margin: 6, // 刻度标签与轴线之间的距离 |
| | | fontSize: 14 |
| | | }, |
| | | axisTick: { |
| | | show: true, |
| | | alignWithLabel: true |
| | | xAxis: { |
| | | type: 'category', |
| | | data: xAisData, |
| | | axisLine: { |
| | | lineStyle: { |
| | | color: 'rgba(0,0,0,.45)' |
| | | } |
| | | }], |
| | | }, |
| | | axisLabel: { |
| | | show: true, // 是否显示刻度标签,默认显示 |
| | | interval: 0, // 坐标轴刻度标签的显示间隔,在类目轴中有效;默认会采用标签不重叠的策略间隔显示标签;可以设置成0强制显示所有标签;如果设置为1,表示『隔一个标签显示一个标签』,如果值为2,表示隔两个标签显示一个标签,以此类推。 |
| | | inside: false, // 刻度标签是否朝内,默认朝外 |
| | | margin: 10, // 刻度标签与轴线之间的距离 |
| | | fontSize: 14 |
| | | }, |
| | | axisTick: { |
| | | show: true, |
| | | alignWithLabel: true |
| | | } |
| | | }, |
| | | yAxis: [ |
| | | { |
| | | name: '%', |
| | |
| | | position: 'left', |
| | | axisLabel: { |
| | | formatter: '{value}', |
| | | color: '#fff', |
| | | color: 'rgba(0,0,0,.45)', |
| | | fontSize: 14 |
| | | }, |
| | | axisTick: { |
| | |
| | | axisLine: { |
| | | show: true, |
| | | lineStyle: { |
| | | color: '#fff' |
| | | color: 'rgba(0,0,0,.45)' |
| | | } |
| | | }, |
| | | splitLine: { |
| | | show: false, |
| | | lineStyle: { |
| | | color: 'rgba(255,255,255,0.12)' |
| | | } |
| | | show: false |
| | | } |
| | | }, |
| | | { |
| | |
| | | axisLine: { |
| | | show: true, |
| | | lineStyle: { |
| | | color: '#fff' |
| | | color: 'rgba(0,0,0,.45)' |
| | | } |
| | | } |
| | | } |
| | | ], |
| | | series: [{ |
| | | type: 'bar', |
| | | 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 |
| | | }, |
| | | label: { |
| | | show: false, |
| | | lineHeight: 10, |
| | | formatter: params => { |
| | | if (+params.value === 0) return '' |
| | | else return params.value |
| | | }, |
| | | position: 'inside', |
| | | textStyle: { |
| | | color: '#fff', |
| | | fontSize: 18 |
| | | } |
| | | }, |
| | | zlevel: 1 |
| | | }, |
| | | series: [ |
| | | { |
| | | name: '背景', |
| | | type: 'bar', |
| | | barWidth: this.barChartData.length > 5 ? '40%' : 30, |
| | | barGap: '-100%', |
| | | data: defaultData, |
| | | type: 'pictorialBar', |
| | | symbolSize: [26, 10], |
| | | symbolOffset: [0, -5], |
| | | z: 12, |
| | | itemStyle: { |
| | | color: '#11294d', |
| | | barBorderRadius: 100 |
| | | } |
| | | }], |
| | | color: function(params) { |
| | | return barBottomColor[params.dataIndex % barBottomColor.length] |
| | | } |
| | | }, |
| | | label: { |
| | | show: true, |
| | | position: 'top', |
| | | fontSize: 12, |
| | | color: 'rgba(0,0,0,.45)' |
| | | }, |
| | | symbolPosition: 'end', |
| | | data: this.barChartData |
| | | }, |
| | | { |
| | | type: 'pictorialBar', |
| | | symbolSize: [26, 10], |
| | | symbolOffset: [0, 5], |
| | | z: 12, |
| | | itemStyle: { |
| | | color: function(params) { |
| | | return barTopColor[params.dataIndex % barTopColor.length] |
| | | } |
| | | }, |
| | | data: this.barChartData |
| | | }, |
| | | { |
| | | type: 'bar', |
| | | itemStyle: { |
| | | color: function(params) { |
| | | return new echarts.graphic.LinearGradient( |
| | | 0, 0, 0, 1, |
| | | [{ |
| | | offset: 1, |
| | | color: barTopColor[params.dataIndex % barTopColor.length] |
| | | }, |
| | | { |
| | | offset: 0, |
| | | color: barBottomColor[params.dataIndex % barBottomColor.length] |
| | | } |
| | | ] |
| | | ) |
| | | }, |
| | | opacity: .9 |
| | | }, |
| | | z: 16, |
| | | barWidth: 26, |
| | | barGap: '-100%', |
| | | data: this.barChartData |
| | | } |
| | | ], |
| | | dataZoom: { |
| | | show: false, |
| | | startValue: 0, // 从头开始。 |
| | |
| | | this.barChartCarouselTime = setInterval(() => { |
| | | this.barChartData.push(this.barChartData.shift()) |
| | | xAisData.push(xAisData.shift()) |
| | | colorArray.push(colorArray.shift()) |
| | | barTopColor.push(barTopColor.shift()) |
| | | barBottomColor.push(barBottomColor.shift()) |
| | | this.$nextTick(() => { |
| | | this.barChart.setOption(option, true) |
| | | }) |
| | |
| | | openMaintenanceModal(record) { |
| | | this.modalTitle = record.planTime |
| | | this.modalDataApiParams = { |
| | | productionCode: this.productionCode |
| | | productionCode: this.productionCode, |
| | | code: record.code |
| | | } |
| | | this.modalDataApiUrl = record.apiUrl |
| | | this.modalDataApiUrl = '/eam/home/maintenanceList' |
| | | this.modalVisible = true |
| | | }, |
| | | |
| | |
| | | |
| | | <style lang="less" scoped> |
| | | .page-container { |
| | | .page-title { |
| | | display: flex; |
| | | justify-content: space-evenly; |
| | | flex-wrap: wrap; |
| | | color: #fff; |
| | | margin-bottom: 10px; |
| | | |
| | | } |
| | | |
| | | .content-container { |
| | | padding-top: 5px; |
| | | display: flex; |
| | |
| | | justify-content: space-around; |
| | | flex-wrap: wrap; |
| | | color: #fff; |
| | | padding-top: 20px; |
| | | |
| | | .support-plan-item { |
| | | border-radius: 3px; |
| | |
| | | .plan-value { |
| | | margin-right: 20px; |
| | | font-size: 30px; |
| | | color: #EAC910; |
| | | color: #fff; |
| | | } |
| | | } |
| | | } |
| | |
| | | } |
| | | |
| | | /deep/ .ant-form .ant-form-item-label label { |
| | | color: #fff; |
| | | color: rgba(0, 0, 0, .45); |
| | | font-size: 18px; |
| | | } |
| | | |
| | |
| | | |
| | | /deep/ .ant-select-selection__clear { |
| | | background: transparent !important; |
| | | color: #fff; |
| | | color: rgba(0, 0, 0, .45); |
| | | } |
| | | |
| | | /deep/ .ant-select { |
| | | color: #fff; |
| | | color: rgba(0, 0, 0, .45); |
| | | } |
| | | |
| | | /deep/ .ant-input { |
| | | border: 1px solid #689ACA; |
| | | color: #fff; |
| | | border: 1px solid rgba(0, 0, 0, .45); |
| | | color: rgba(0, 0, 0, .45); |
| | | background: transparent !important; |
| | | } |
| | | </style> |
| | |
| | | :pagination="ipagination" :loading="loading" :scroll="{x:'max-content'}" |
| | | :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" :customRow='clickThenSelect' |
| | | @change="handleTableChange"> |
| | | |
| | | <!--使用部门--> |
| | | <template slot="factoryOrgCode" slot-scope="text,record"> |
| | | {{[record.zxfactoryOrgCode_dictText].filter(item=>item).join('/')}} |
| | | </template> |
| | | |
| | | <span slot="action" slot-scope="text, record"> |
| | | <a v-has="'standard:upgrade'" v-if="record.standardStatus === 'START'" |
| | | @click.stop="handleUpgrade(record)">升版</a> |
| | |
| | | dataIndex: 'equipmentModel', |
| | | }, |
| | | { |
| | | title: '使用部门', |
| | | align: 'center', |
| | | scopedSlots: { customRender: 'factoryOrgCode' }, |
| | | }, |
| | | { |
| | | title: '规范状态', |
| | | align: 'center', |
| | | dataIndex: 'standardStatus_dictText', |
| | |
| | | align:"center", |
| | | dataIndex: 'hfCode' |
| | | }, |
| | | { |
| | | title: '操作', |
| | | dataIndex: 'action', |
| | | align:"center", |
| | | scopedSlots: { customRender: 'action' }, |
| | | } |
| | | ], |
| | | url: { |
| | | list: "/eam/eamThirdMaintenanceWorkPlanSheet/list", |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import { JeecgListMixin } from '@/mixins/JeecgListMixin' |
| | | import { getAction } from '@api/manage' |
| | | import { JeecgListMixin } from '@/mixins/JeecgListMixin' |
| | | import { getAction } from '@api/manage' |
| | | |
| | | export default { |
| | | name: 'EamMaintenanceStandardDetailList', |
| | | mixins: [JeecgListMixin], |
| | | props: { |
| | | standardId: { |
| | | type: String, |
| | | required: true, |
| | | default: '-1' |
| | | }, |
| | | pageSelectionRow: { |
| | | type: Object, |
| | | default: () => { |
| | | } |
| | | }, |
| | | filterKey: { |
| | | type: String, |
| | | default: '' |
| | | export default { |
| | | name: 'EamMaintenanceStandardDetailList', |
| | | mixins: [JeecgListMixin], |
| | | props: { |
| | | standardId: { |
| | | type: String, |
| | | required: true, |
| | | default: '-1' |
| | | }, |
| | | pageSelectionRow: { |
| | | type: Object, |
| | | default: () => { |
| | | } |
| | | }, |
| | | data() { |
| | | return { |
| | | description: '保养标准明细管理页面', |
| | | // 表头 |
| | | columns: [], |
| | | inspectionColumns: [ |
| | | { |
| | | title: '序号', |
| | | align: 'center', |
| | | dataIndex: 'itemCode', |
| | | width: 60 |
| | | }, |
| | | { |
| | | title: '保养项分类', |
| | | align: 'center', |
| | | dataIndex: 'itemCategory_dictText', |
| | | width: 150 |
| | | }, |
| | | { |
| | | title: '保养项目', |
| | | align: 'center', |
| | | dataIndex: 'itemName', |
| | | ellipsis: true |
| | | }, |
| | | { |
| | | title: '保养规范或要求', |
| | | align: 'center', |
| | | dataIndex: 'itemDemand', |
| | | ellipsis: true |
| | | } |
| | | ], |
| | | secondMaintenanceColumns: [ |
| | | { |
| | | title: '序号', |
| | | align: 'center', |
| | | dataIndex: 'itemCode', |
| | | width: 60 |
| | | }, |
| | | { |
| | | title: '保养项分类', |
| | | align: 'center', |
| | | dataIndex: 'itemCategory_dictText', |
| | | width: 150 |
| | | }, |
| | | { |
| | | title: '保养项目', |
| | | align: 'center', |
| | | dataIndex: 'itemName', |
| | | ellipsis: true |
| | | } |
| | | ], |
| | | thirdMaintenanceColumns: [ |
| | | { |
| | | title: '序号', |
| | | align: 'center', |
| | | dataIndex: 'itemCode', |
| | | width: 60 |
| | | }, |
| | | { |
| | | title: '保养部位', |
| | | align: 'center', |
| | | dataIndex: 'itemPart', |
| | | ellipsis: true |
| | | }, |
| | | { |
| | | title: '保养内容', |
| | | align: 'center', |
| | | dataIndex: 'itemName', |
| | | ellipsis: true |
| | | }, |
| | | { |
| | | title: '验收标准', |
| | | align: 'center', |
| | | dataIndex: 'itemDemand', |
| | | ellipsis: true |
| | | } |
| | | ], |
| | | disableMixinCreated: true, |
| | | url: { |
| | | list: '/eam/eamMaintenanceStandardDetail/list' |
| | | filterKey: { |
| | | type: String, |
| | | default: '' |
| | | } |
| | | }, |
| | | data() { |
| | | return { |
| | | description: '保养标准明细管理页面', |
| | | // 表头 |
| | | columns: [], |
| | | inspectionColumns: [ |
| | | { |
| | | title: '序号', |
| | | align: 'center', |
| | | dataIndex: 'itemCode', |
| | | width: 60 |
| | | }, |
| | | { |
| | | title: '保养项分类', |
| | | align: 'center', |
| | | dataIndex: 'itemCategory_dictText', |
| | | width: 150 |
| | | }, |
| | | { |
| | | title: '保养项目', |
| | | headerAlign: 'center', |
| | | align: 'left', |
| | | dataIndex: 'itemName', |
| | | ellipsis: true |
| | | }, |
| | | { |
| | | title: '保养规范或要求', |
| | | headerAlign: 'center', |
| | | align: 'left', |
| | | dataIndex: 'itemDemand', |
| | | ellipsis: true |
| | | } |
| | | } |
| | | }, |
| | | watch: { |
| | | standardId: { |
| | | immediate: true, |
| | | handler(val) { |
| | | if (val) { |
| | | this.loadData(1) |
| | | } else { |
| | | this.clearList() |
| | | } |
| | | ], |
| | | secondMaintenanceColumns: [ |
| | | { |
| | | title: '序号', |
| | | align: 'center', |
| | | dataIndex: 'itemCode', |
| | | width: 60 |
| | | }, |
| | | { |
| | | title: '保养项分类', |
| | | align: 'center', |
| | | dataIndex: 'itemCategory_dictText', |
| | | width: 150 |
| | | }, |
| | | { |
| | | title: '保养项目', |
| | | headerAlign: 'center', |
| | | align: 'left', |
| | | dataIndex: 'itemName', |
| | | ellipsis: true |
| | | } |
| | | }, |
| | | pageSelectionRow: { |
| | | immediate: true, |
| | | handler(val) { |
| | | switch (val.maintenanceCategory) { |
| | | case 'POINT_INSPECTION': |
| | | this.columns = this.inspectionColumns |
| | | break |
| | | case 'SECOND_MAINTENANCE': |
| | | this.columns = this.secondMaintenanceColumns |
| | | break |
| | | case 'THIRD_MAINTENANCE': |
| | | this.columns = this.thirdMaintenanceColumns |
| | | break |
| | | } |
| | | ], |
| | | thirdMaintenanceColumns: [ |
| | | { |
| | | title: '序号', |
| | | align: 'center', |
| | | dataIndex: 'itemCode', |
| | | width: 60 |
| | | }, |
| | | { |
| | | title: '保养部位', |
| | | align: 'center', |
| | | dataIndex: 'itemPart', |
| | | ellipsis: true |
| | | }, |
| | | { |
| | | title: '保养内容', |
| | | headerAlign: 'center', |
| | | align: 'left', |
| | | dataIndex: 'itemName', |
| | | ellipsis: true |
| | | }, |
| | | { |
| | | title: '验收标准', |
| | | headerAlign: 'center', |
| | | align: 'left', |
| | | dataIndex: 'itemDemand', |
| | | ellipsis: true |
| | | } |
| | | } |
| | | }, |
| | | methods: { |
| | | loadData(arg) { |
| | | //加载数据 若传入参数1则加载第一页的内容 |
| | | if (arg === 1) { |
| | | this.ipagination.current = 1 |
| | | } |
| | | let params = this.getQueryParams()//查询条件 |
| | | if (!params) { |
| | | return false |
| | | } |
| | | this.dataSource = [] |
| | | params.standardId = this.standardId |
| | | params.itemCategory = this.filterKey |
| | | this.loading = true |
| | | console.log('----------------------', this.filterKey) |
| | | getAction(this.url.list, params) |
| | | .then((res) => { |
| | | if (res.success) { |
| | | this.dataSource = res.result.records |
| | | if (res.result.total) { |
| | | this.ipagination.total = res.result.total |
| | | } else { |
| | | this.ipagination.total = 0 |
| | | } |
| | | } else { |
| | | this.$notification.warning({ |
| | | message: '消息', |
| | | description: res.message |
| | | }) |
| | | } |
| | | }) |
| | | .finally(() => { |
| | | this.loading = false |
| | | }) |
| | | }, |
| | | clearList() { |
| | | this.dataSource = [] |
| | | this.clearSelected() |
| | | ], |
| | | disableMixinCreated: true, |
| | | url: { |
| | | list: '/eam/eamMaintenanceStandardDetail/list' |
| | | } |
| | | } |
| | | }, |
| | | watch: { |
| | | standardId: { |
| | | immediate: true, |
| | | handler(val) { |
| | | if (val) { |
| | | this.loadData(1) |
| | | } else { |
| | | this.clearList() |
| | | } |
| | | } |
| | | }, |
| | | pageSelectionRow: { |
| | | immediate: true, |
| | | handler(val) { |
| | | switch (val.maintenanceCategory) { |
| | | case 'POINT_INSPECTION': |
| | | this.columns = this.inspectionColumns |
| | | break |
| | | case 'SECOND_MAINTENANCE': |
| | | this.columns = this.secondMaintenanceColumns |
| | | break |
| | | case 'THIRD_MAINTENANCE': |
| | | this.columns = this.thirdMaintenanceColumns |
| | | break |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | methods: { |
| | | loadData(arg) { |
| | | //加载数据 若传入参数1则加载第一页的内容 |
| | | if (arg === 1) { |
| | | this.ipagination.current = 1 |
| | | } |
| | | let params = this.getQueryParams()//查询条件 |
| | | if (!params) { |
| | | return false |
| | | } |
| | | this.dataSource = [] |
| | | params.standardId = this.standardId |
| | | params.itemCategory = this.filterKey |
| | | this.loading = true |
| | | console.log('----------------------', this.filterKey) |
| | | getAction(this.url.list, params) |
| | | .then((res) => { |
| | | if (res.success) { |
| | | this.dataSource = res.result.records |
| | | if (res.result.total) { |
| | | this.ipagination.total = res.result.total |
| | | } else { |
| | | this.ipagination.total = 0 |
| | | } |
| | | } else { |
| | | this.$notification.warning({ |
| | | message: '消息', |
| | | description: res.message |
| | | }) |
| | | } |
| | | }) |
| | | .finally(() => { |
| | | this.loading = false |
| | | }) |
| | | }, |
| | | clearList() { |
| | | this.dataSource = [] |
| | | this.clearSelected() |
| | | } |
| | | } |
| | | </script> |
| | | } |
| | | </script> |
| | | |
| | | <style scoped lang="less"> |
| | | /* 表头全部居中 */ |
| | | ::v-deep .ant-table-thead > tr > th { |
| | | text-align: center !important; |
| | | } |
| | | |
| | | /* 表体:序号、保养项分类、保养部位的内容居中 */ |
| | | ::v-deep .ant-table-tbody > tr > td[data-col="itemCode"], |
| | | ::v-deep .ant-table-tbody > tr > td[data-col="itemCategory_dictText"], |
| | | ::v-deep .ant-table-tbody > tr > td[data-col="itemPart"] { |
| | | text-align: center !important; |
| | | } |
| | | |
| | | /* 表体:保养项目、保养内容、验收标准的内容左对齐 */ |
| | | ::v-deep .ant-table-tbody > tr > td[data-col="itemName"], |
| | | ::v-deep .ant-table-tbody > tr > td[data-col="itemDemand"] { |
| | | text-align: left !important; |
| | | } |
| | | </style> |
| | |
| | | { |
| | | title: '使用部门', |
| | | dataIndex: 'factoryOrgCode', |
| | | scopedSlots: { customRender: 'factoryOrgCode' } |
| | | scopedSlots: { customRender: 'factoryOrgCode' }, |
| | | headerAlign: 'center', |
| | | align: 'left' |
| | | }, |
| | | { |
| | | title: '所属分类', |
| | |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | </script> |
| | | |
| | | <style scoped lang="less"> |
| | | |
| | | /* 表头全部居中 */ |
| | | ::v-deep .ant-table-thead > tr > th { |
| | | text-align: center !important; |
| | | } |
| | | |
| | | |
| | | /* 表体:左对齐 */ |
| | | ::v-deep .ant-table-tbody > tr > td[data-col="factoryOrgCode"] { |
| | | text-align: left !important; |
| | | } |
| | | |
| | | </style> |
| | |
| | | :dataSource="dataSource" :pagination="ipagination" :loading="loading" |
| | | :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" class="j-table-force-nowrap" |
| | | @change="handleTableChange"> |
| | | |
| | | <!--使用部门--> |
| | | <template slot="factoryOrgCode" slot-scope="text,record"> |
| | | {{[record.zxfactoryOrgCode_dictText].filter(item=>item).join('/')}} |
| | | </template> |
| | | |
| | | <span slot="action" slot-scope="text, record"> |
| | | <template v-if=" record.inspectionStatus === 'WAIT_INSPECTION'"> |
| | | <a @click="handleEdit(record)">编辑</a> |
| | |
| | | fixed: 'left' |
| | | }, |
| | | { |
| | | title: '使用部门', |
| | | align: 'center', |
| | | scopedSlots: { customRender: 'factoryOrgCode' }, |
| | | fixed: 'left' |
| | | }, |
| | | { |
| | | title: '点检状态', |
| | | align: 'center', |
| | | dataIndex: 'inspectionStatus_dictText', |
| | |
| | | <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource" |
| | | :pagination="ipagination" :loading="loading" class="j-table-force-nowrap" :scroll="{x:'max-content'}" |
| | | :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" @change="handleTableChange"> |
| | | |
| | | <!--使用部门--> |
| | | <template slot="factoryOrgCode" slot-scope="text,record"> |
| | | {{[record.zxfactoryOrgCode_dictText].filter(item=>item).join('/')}} |
| | | </template> |
| | | |
| | | <span slot="action" slot-scope="text, record"> |
| | | <template v-if="record.maintenanceStatus === 'WAIT_MAINTENANCE'"> |
| | | <a v-has="'secondMaintenanceOrder:edit'" @click="handleEdit(record)">编辑</a> |
| | |
| | | fixed: 'left' |
| | | }, |
| | | { |
| | | title: '使用部门', |
| | | align: 'center', |
| | | scopedSlots: { customRender: 'factoryOrgCode' }, |
| | | fixed: 'left' |
| | | }, |
| | | { |
| | | title: '保养状态', |
| | | align: 'center', |
| | | dataIndex: 'maintenanceStatus_dictText', |
| | |
| | | <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource" |
| | | :pagination="ipagination" :loading="loading" :scroll="{x:'max-content'}" |
| | | @change="handleTableChange"> |
| | | |
| | | <!--使用部门--> |
| | | <template slot="factoryCode" slot-scope="text,record"> |
| | | {{[record.zxfactoryOrgCode_dictText].filter(item=>item).join('/')}} |
| | | </template> |
| | | |
| | | <span slot="action" slot-scope="text, record"> |
| | | <template v-if="record.changeStatus=='WAIT_SUBMIT'"> |
| | | <a @click="handleEdit(record)">编辑</a> |
| | |
| | | fixed: 'left' |
| | | }, |
| | | { |
| | | title: '使用部门', |
| | | align: 'center', |
| | | scopedSlots: { customRender: 'factoryCode' }, |
| | | fixed: 'left' |
| | | }, |
| | | { |
| | | title: '变更状态', |
| | | align: 'center', |
| | | dataIndex: 'changeStatus_dictText', |
| | |
| | | <a-switch v-if="text" checked-children="是" un-checked-children="否" :checked="Boolean(+text)" disabled/> |
| | | </template> |
| | | |
| | | <!--使用部门--> |
| | | <template slot="factoryOrgCode" slot-scope="text,record"> |
| | | {{[record.zxfactoryOrgCode_dictText].filter(item=>item).join('/')}} |
| | | </template> |
| | | |
| | | <span slot="action" slot-scope="text, record"> |
| | | <template v-if="record.maintenanceStatus==='WAIT_MAINTENANCE'"> |
| | | <a @click="handleEdit(record)">编辑</a> |
| | |
| | | fixed: 'left' |
| | | }, |
| | | { |
| | | title: '使用部门', |
| | | align: 'center', |
| | | scopedSlots: { customRender: 'factoryOrgCode' }, |
| | | fixed: 'left' |
| | | }, |
| | | { |
| | | title: '保养状态', |
| | | align: 'center', |
| | | dataIndex: 'maintenanceStatus_dictText', |
| | |
| | | :pagination="ipagination" :loading="loading" :scroll="{x:'max-content'}" |
| | | :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" |
| | | @change="handleTableChange"> |
| | | |
| | | <!--使用部门--> |
| | | <template slot="factoryOrgCode" slot-scope="text,record"> |
| | | {{[record.zxfactoryOrgCode_dictText].filter(item=>item).join('/')}} |
| | | </template> |
| | | |
| | | <span slot="action" slot-scope="text, record"> |
| | | <template v-if="record.maintenanceStatus === 'WAIT_MAINTENANCE'"> |
| | | <a-popconfirm title="确定领取吗?" @confirm="() => handlerCollect(record.id)"> |
| | |
| | | fixed: 'left' |
| | | }, |
| | | { |
| | | title: '使用部门', |
| | | align: 'center', |
| | | scopedSlots: { customRender: 'factoryOrgCode' }, |
| | | fixed: 'left' |
| | | }, |
| | | { |
| | | title: '保养状态', |
| | | align: 'center', |
| | | dataIndex: 'maintenanceStatus_dictText', |
| | |
| | | :pagination="ipagination" :loading="loading" |
| | | :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" @change="handleTableChange" |
| | | :scroll="{x:'max-content'}"> |
| | | |
| | | <!--使用部门--> |
| | | <template slot="factoryOrgCode" slot-scope="text,record"> |
| | | {{[record.zxfactoryOrgCode_dictText].filter(item=>item).join('/')}} |
| | | </template> |
| | | |
| | | <span slot="action" slot-scope="text, record"> |
| | | <template v-if="record.repairStatus=='PENDING_REPAIR'||record.repairStatus=='UNDER_MAINTENANCE' ||record.repairStatus=='REJECTED'"> |
| | | <a-popconfirm v-if="record.claimStatus=='0' || record.claimStatus==null " title="确定提交吗?" @confirm="() => handleClaim(record.id)"> |
| | |
| | | fixed: 'left' |
| | | }, |
| | | { |
| | | title: '使用部门', |
| | | align: 'center', |
| | | scopedSlots: { customRender: 'factoryOrgCode' }, |
| | | fixed: 'left' |
| | | }, |
| | | { |
| | | title: '维修状态', |
| | | align: 'center', |
| | | dataIndex: 'repairStatus_dictText', |
| | |
| | | <a-switch v-if="text" checked-children="同意" un-checked-children="不同意" :checked="Boolean(text)" disabled/> |
| | | </template> |
| | | |
| | | <!--使用部门--> |
| | | <template slot="factoryOrgCode" slot-scope="text,record"> |
| | | {{[record.zxfactoryOrgCode_dictText].filter(item=>item).join('/')}} |
| | | </template> |
| | | |
| | | <span slot="action" slot-scope="text, record"> |
| | | <template v-if="record.registerStatus==='PENDING_SUBMIT'"> |
| | | <a @click="handleEdit(record)">编辑</a> |
| | |
| | | fixed: 'left' |
| | | }, |
| | | { |
| | | title: '使用部门', |
| | | align: 'center', |
| | | scopedSlots: { customRender: 'factoryOrgCode' }, |
| | | fixed: 'left' |
| | | }, |
| | | { |
| | | title: '登记状态', |
| | | align: 'center', |
| | | dataIndex: 'registerStatus_dictText', |
| | |
| | | :pagination="ipagination" :loading="loading" :scroll="{x:'max-content'}" |
| | | :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" @change="handleTableChange"> |
| | | |
| | | <!--使用部门--> |
| | | <template slot="factoryOrgCode" slot-scope="text,record"> |
| | | {{[record.zxfactoryOrgCode_dictText].filter(item=>item).join('/')}} |
| | | </template> |
| | | |
| | | <span slot="action" slot-scope="text, record"> |
| | | <template v-if="record.confirmStatus==='PENDING_SUBMIT'"> |
| | | <a @click="handleEdit(record)">编辑</a> |
| | |
| | | fixed: 'left' |
| | | }, |
| | | { |
| | | title: '使用部门', |
| | | align: 'center', |
| | | scopedSlots: { customRender: 'factoryOrgCode' }, |
| | | fixed: 'left' |
| | | }, |
| | | { |
| | | title: '确认状态', |
| | | align: 'center', |
| | | dataIndex: 'confirmStatus_dictText', |
| | |
| | | <a-switch checked-children="是" un-checked-children="否" :checked="Boolean(+text)" disabled/> |
| | | </template> |
| | | |
| | | <!--使用部门--> |
| | | <template slot="factoryOrgCode" slot-scope="text,record"> |
| | | {{[record.zxfactoryOrgCode_dictText].filter(item=>item).join('/')}} |
| | | </template> |
| | | |
| | | <span slot="action" slot-scope="text, record"> |
| | | <a @click="handleEdit(record)">编辑</a> |
| | | |
| | |
| | | fixed: 'left' |
| | | }, |
| | | { |
| | | title: '使用部门', |
| | | align: 'center', |
| | | scopedSlots: { customRender: 'factoryOrgCode' }, |
| | | fixed: 'left' |
| | | }, |
| | | { |
| | | title: '报修状态', |
| | | align: 'center', |
| | | dataIndex: 'reportStatus_dictText', |
| | |
| | | :pagination="ipagination" :loading="loading" :scroll="{x:'max-content'}" |
| | | :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" |
| | | @change="handleTableChange"> |
| | | |
| | | <!--使用部门--> |
| | | <template slot="factoryOrgCode" slot-scope="text,record"> |
| | | {{[record.zxfactoryOrgCode_dictText].filter(item=>item).join('/')}} |
| | | </template> |
| | | |
| | | <span slot="action" slot-scope="text, record"> |
| | | <template> |
| | | <a v-if="record.submitStatus=='PENDING_SUBMIT'||record.submitStatus=='REJECTED'" |
| | |
| | | fixed: 'left' |
| | | }, |
| | | { |
| | | title: '使用部门', |
| | | align: 'center', |
| | | scopedSlots: { customRender: 'factoryOrgCode' }, |
| | | fixed: 'left' |
| | | }, |
| | | { |
| | | title: '状态', |
| | | align: 'center', |
| | | dataIndex: 'submitStatus_dictText', |
| | |
| | | <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource" |
| | | :pagination="ipagination" :loading="loading" :scroll="{x:'max-content'}" @change="handleTableChange"> |
| | | |
| | | <!--使用部门--> |
| | | <template slot="factoryCode" slot-scope="text,record"> |
| | | {{[record.zxfactoryOrgCode_dictText].filter(item=>item).join('/')}} |
| | | </template> |
| | | |
| | | <span slot="action" slot-scope="text, record"> |
| | | <template v-if="record.applicationStatus=='WAIT_SUBMIT'"> |
| | | <a @click.stop="handleEdit(record)">编辑</a> |
| | |
| | | fixed: 'left' |
| | | }, |
| | | { |
| | | title: '使用部门', |
| | | align: 'center', |
| | | scopedSlots: { customRender: 'factoryCode' }, |
| | | fixed: 'left' |
| | | }, |
| | | { |
| | | title: '申请单状态', |
| | | align: 'center', |
| | | dataIndex: 'applicationStatus_dictText', |
| | |
| | | <!-- table区域-begin --> |
| | | <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource" |
| | | :pagination="ipagination" :loading="loading" :scroll="{x:'max-content'}" @change="handleTableChange"> |
| | | |
| | | <!--使用部门--> |
| | | <template slot="factoryOrgCode" slot-scope="text,record"> |
| | | {{[record.zxfactoryOrgCode_dictText].filter(item=>item).join('/')}} |
| | | </template> |
| | | |
| | | <span slot="action" slot-scope="text, record"> |
| | | <tamplate v-if="record.changeStatus=='WAIT_SUBMIT'"> |
| | | <a @click="handleEdit(record)">编辑</a> |
| | |
| | | fixed: 'left' |
| | | }, |
| | | { |
| | | title: '使用部门', |
| | | align: 'center', |
| | | scopedSlots: { customRender: 'factoryOrgCode' }, |
| | | fixed: 'left' |
| | | }, |
| | | { |
| | | title: '工单号', |
| | | align: 'center', |
| | | dataIndex: 'orderId' |
| | |
| | | <a-switch checked-children="是" un-checked-children="否" :checked="Boolean(+text)" disabled/> |
| | | </template> |
| | | |
| | | <!--使用部门--> |
| | | <template slot="factoryOrgCode" slot-scope="text,record"> |
| | | {{[record.zxfactoryOrgCode_dictText].filter(item=>item).join('/')}} |
| | | </template> |
| | | |
| | | <span slot="action" slot-scope="text, record"> |
| | | <template v-if="record.evaluationStatus === 'WAIT_EVALUATION'"> |
| | | <a-popconfirm title="确定领取吗?" @confirm="handleReceive(record.id)"> |
| | |
| | | fixed: 'left' |
| | | }, |
| | | { |
| | | title: '使用部门', |
| | | align: 'center', |
| | | scopedSlots: { customRender: 'factoryOrgCode' }, |
| | | fixed: 'left' |
| | | }, |
| | | { |
| | | title: '鉴定状态', |
| | | align: 'center', |
| | | dataIndex: 'evaluationStatus_dictText', |
| | |
| | | align: 'center', |
| | | width: 100 |
| | | }, |
| | | // { |
| | | // title: '保养项分类', |
| | | // key: 'itemCategory', |
| | | // type: JVXETypes.slot, |
| | | // slotName: 'itemCategory', |
| | | // align: 'center', |
| | | // disabled: true |
| | | // }, |
| | | { |
| | | title: '保养项目', |
| | | key: 'itemName', |
| | | type: JVXETypes.normal, |
| | | align: 'center' |
| | | headerAlign: 'center', |
| | | align: 'left' |
| | | }, |
| | | { |
| | | title: '保养规范或要求', |
| | | key: 'itemDemand', |
| | | type: JVXETypes.normal, |
| | | align: 'center' |
| | | headerAlign: 'center', |
| | | align: 'left' |
| | | } |
| | | ], |
| | | secondMaintenanceColumns: [ |
| | |
| | | align: 'center', |
| | | width: 100 |
| | | }, |
| | | // { |
| | | // title: '保养项分类', |
| | | // key: 'itemCategory', |
| | | // type: JVXETypes.slot, |
| | | // slotName: 'itemCategory', |
| | | // align: 'center', |
| | | // disabled: true |
| | | // }, |
| | | { |
| | | title: '保养项目', |
| | | key: 'itemName', |
| | | type: JVXETypes.normal, |
| | | align: 'center' |
| | | headerAlign: 'center', |
| | | align: 'left' |
| | | } |
| | | ], |
| | | thirdMaintenanceColumns: [ |
| | |
| | | title: '保养内容', |
| | | key: 'itemName', |
| | | type: JVXETypes.normal, |
| | | align: 'center' |
| | | headerAlign: 'center', |
| | | align: 'left' |
| | | }, |
| | | { |
| | | title: '验收标准', |
| | | key: 'itemDemand', |
| | | type: JVXETypes.normal, |
| | | align: 'center' |
| | | headerAlign: 'center', |
| | | align: 'left' |
| | | } |
| | | ] |
| | | }, |
| | |
| | | text-align: center; |
| | | margin: auto; |
| | | } |
| | | /* 保养项目列表头居中 */ |
| | | .vxe-header--column[data-col="itemName"] .vxe-cell { |
| | | text-align: center !important; |
| | | } |
| | | |
| | | /* 保养项目列内容左对齐 */ |
| | | .vxe-body--column[data-col="itemName"] .vxe-cell { |
| | | text-align: left !important; |
| | | } |
| | | </style> |
| | |
| | | title: '检查项目', |
| | | key: 'itemName', |
| | | type: JVXETypes.normal, |
| | | align: 'center' |
| | | headerAlign: 'center', |
| | | align: 'left' |
| | | }, |
| | | { |
| | | title: '检查结果', |
| | |
| | | title: '检查项目', |
| | | key: 'itemName', |
| | | type: JVXETypes.normal, |
| | | align: 'center' |
| | | headerAlign: 'center', |
| | | align: 'left' |
| | | }, |
| | | { |
| | | title: '检查子项目', |
| | | key: 'subItemName', |
| | | type: JVXETypes.normal, |
| | | align: 'center' |
| | | headerAlign: 'center', |
| | | align: 'left' |
| | | }, |
| | | { |
| | | title: '允差值', |
| | |
| | | title: '检查项目', |
| | | key: 'itemName', |
| | | type: JVXETypes.normal, |
| | | align: 'center' |
| | | headerAlign: 'center', |
| | | align: 'left' |
| | | }, |
| | | { |
| | | title: '检查结果', |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .vxe-header--column[data-col="itemName"] .vxe-cell { |
| | | text-align: center !important; |
| | | } |
| | | |
| | | .vxe-body--column[data-col="itemName"] .vxe-cell { |
| | | text-align: left !important; |
| | | } |
| | | |
| | | .vxe-header--column[data-col="subItemName"] .vxe-cell { |
| | | text-align: center !important; |
| | | } |
| | | |
| | | .vxe-body--column[data-col="subItemName"] .vxe-cell { |
| | | text-align: left !important; |
| | | } |
| | | </style> |
| | |
| | | title: '保养项', |
| | | key: 'itemName', |
| | | type: JVXETypes.normal, |
| | | align: 'center' |
| | | headerAlign: 'center', |
| | | align: 'left' |
| | | }, |
| | | { |
| | | title: '保养结果', |
| | |
| | | pointer-events: none; |
| | | text-decoration: none; |
| | | } |
| | | /* 保养项目列表头居中 */ |
| | | .vxe-header--column[data-col="itemName"] .vxe-cell { |
| | | text-align: center !important; |
| | | } |
| | | |
| | | /* 保养项目列内容左对齐 */ |
| | | .vxe-body--column[data-col="itemName"] .vxe-cell { |
| | | text-align: left !important; |
| | | } |
| | | </style> |
| | |
| | | key: 'itemName', |
| | | type: JVXETypes.normal, |
| | | width: 120, |
| | | align: 'center' |
| | | headerAlign: 'center', |
| | | align: 'left' |
| | | }, |
| | | { |
| | | title: '验收标准', |
| | | key: 'itemDemand', |
| | | type: JVXETypes.normal, |
| | | width: 120, |
| | | align: 'center' |
| | | headerAlign: 'center', |
| | | align: 'left' |
| | | }, |
| | | { |
| | | title: '保养结果', |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .vxe-header--column[data-col="itemName"] .vxe-cell { |
| | | text-align: center !important; |
| | | } |
| | | |
| | | .vxe-body--column[data-col="itemName"] .vxe-cell { |
| | | text-align: left !important; |
| | | } |
| | | |
| | | </style> |
| | |
| | | this.checkedList = checkedList |
| | | }, |
| | | searchQuery() { |
| | | // 因触底刷新会修改参数时间值,故在此用时间选择器的时间值对参数时间值再次赋值,若不这样做则参数时间值则会与时间选择器上的时间值不一致 |
| | | this.queryParam.startTime = moment(this.dates[0]).format('YYYYMMDD') |
| | | this.queryParam.endTime = moment(this.dates[1]).format('YYYYMMDD') |
| | | |
| | | if (this.queryParam.typeTree == '1') { |
| | | this.queryParam.parentId = this.queryParamEquip.parentId |
| | | this.queryParam.equipmentId = this.queryParamEquip.equipmentId |
| | |
| | | this.tableHeads = [] |
| | | this.dataList = [] |
| | | this.spinning = true |
| | | // 若日期选择器设置的查询请求数量超过15条则开启懒加载 |
| | | if (this.requestAllDataSize > this.everyRequestDataSize) { |
| | | // 开启懒加载后将结束日期设置为开始日期之后的14天,即先查询15天内的数据 |
| | | this.queryParam.endTime = moment(this.queryParam.startTime).add(this.everyRequestDataSize - 1, 'days').format('YYYYMMDD') |
| | | this.isLazyRequest = true |
| | | this.tableScroll.removeEventListener('scroll', this.tableScrollX) // 为避免滚动条有滚动距离后后点击查询按钮触发滚动事件,因此在触发事件前移除事件 |
| | | } |
| | | |
| | | getAction(this.url.list, this.queryParam).then(res => { |
| | | if (res.success) { |
| | |
| | | this.checkSameData1(this.dataList) |
| | | this.checkSameData2(this.dataList) |
| | | this.combineCell() |
| | | this.tableScroll.addEventListener('scroll', this.tableScrollX) |
| | | } |
| | | }).finally(() => { |
| | | this.spinning = false |
| | |
| | | handleShowFeedbackModal() { |
| | | this.$refs.modalForm.formParams = {} |
| | | this.modalVisible = true |
| | | }, |
| | | |
| | | // 滚动条触底刷新表格数据 |
| | | tableScrollX() { |
| | | // 当滚动条触底且懒加载开启时触发滚动条触底刷新 |
| | | if (Math.ceil(this.tableScroll.scrollLeft + this.tableScroll.clientWidth) + 1 >= this.tableScroll.scrollWidth && this.isLazyRequest) { |
| | | this.spinning = true |
| | | this.queryParam.startTime = moment(this.queryParam.endTime).add(1, 'days').format('YYYYMMDD') |
| | | // 判断设置懒加载后的结束时间是否超过时间选择器中设置的结束时间 |
| | | if (moment(this.queryParam.endTime).add(this.everyRequestDataSize - 1, 'days').format('YYYYMMDD') - moment(this.dates[1]).format('YYYYMMDD') < 0) { |
| | | //再次查询后15天内的数据 |
| | | this.queryParam.endTime = moment(this.queryParam.endTime).add(this.everyRequestDataSize, 'days').format('YYYYMMDD') |
| | | } else { |
| | | // 如果不小于时间选择器中设置的时间则设置请求结束日期为时间选择器中设置的结束时间并且关闭懒加载(意味着最后一次触底刷新) |
| | | this.queryParam.endTime = moment(this.dates[1]).format('YYYYMMDD') |
| | | this.isLazyRequest = false |
| | | } |
| | | getAction(this.url.list, this.queryParam) |
| | | .then(res => { |
| | | if (res.success) { |
| | | this.tableHeads = [...this.tableHeads.slice(0, -2), ...res.result.dates] |
| | | this.dataList.forEach(item1 => { |
| | | res.result.mdcEfficiencyList.forEach(item2 => { |
| | | if (item1.equipmentId === item2.equipmentId) { |
| | | item1.dataList = [...item1.dataList.slice(0, -2), ...item2.dataList] |
| | | } |
| | | }) |
| | | }) |
| | | } |
| | | }) |
| | | .finally(() => { |
| | | this.spinning = false |
| | | }) |
| | | } |
| | | }, |
| | | |
| | | // 获取设备类型列表 |