| | |
| | | ></OrderCompleteRadio> |
| | | </template> |
| | | <template #leftBlock5> |
| | | <WorkOrderProgress :table-data="workOrderData"></WorkOrderProgress> |
| | | <WorkOrderProgress |
| | | :work-order-finish-rate="workOrderFinishRate" |
| | | :table-data="workOrderData" |
| | | ></WorkOrderProgress> |
| | | </template> |
| | | <template #leftBlock6> |
| | | <PerSonnelProductivity></PerSonnelProductivity> |
| | | <PerSonnelProductivity |
| | | ref="leftBlock6" |
| | | :chartData="perSonnelChartData" |
| | | ></PerSonnelProductivity> |
| | | </template> |
| | | <template #rightBlock1> |
| | | <DeviceChart ref="rightBlock1" :chartData="deviceChartData"></DeviceChart> |
| | | </template> |
| | | <template #rightBlock2> |
| | | <MaterialChart></MaterialChart> |
| | | <MaterialChart :chartData="materialChartData"></MaterialChart> |
| | | </template> |
| | | <template #rightBlock3> |
| | | <BarChart></BarChart> |
| | | <BarChart :chartData="barChartData"></BarChart> |
| | | </template> |
| | | </BackgroundBoardLayout> |
| | | </template> |
| | |
| | | }, |
| | | // 工单进度统计 |
| | | workOrderData: [], |
| | | workOrderFinishRate: "", |
| | | // 人员生产效率 |
| | | perSonnelChartData: { |
| | | datax: [], |
| | | datay: [], |
| | | }, |
| | | // 设备负荷对比 |
| | | deviceChartData: { |
| | | datax: [], |
| | | datay: [], |
| | | }, |
| | | dataindex: 0, |
| | | // 物料需求统计 |
| | | materialChartData: { |
| | | datax: [], |
| | | datay: [], |
| | | }, |
| | | // 车间正品率 |
| | | barChartData: { |
| | | total: 0, |
| | | rate: "0", |
| | | datax: [], |
| | | datay: [], |
| | | datay2: [], |
| | | }, |
| | | }; |
| | | }, |
| | | mounted() { |
| | | this.getDashboard(); |
| | | setInterval(() => { |
| | | this.getDashboard(); |
| | | }, 30000); |
| | | }, |
| | | watch: {}, |
| | | methods: { |
| | | async getDashboard() { |
| | | await getDashboard().then((res) => { |
| | | console.log(res); |
| | | // 左上数值统计数据 |
| | | this.setLeftBlock1(res.data); |
| | | // 机器开机率数据 |
| | | this.setleftBlock2(res.data); |
| | | // 左中数据统计值 |
| | | this.setLeftBlock3(res.data); |
| | | // 订单完成比率 |
| | | this.setLeftBlock4(res.data); |
| | | // 工单进度统计 |
| | | this.setLeftBlock5(res.data); |
| | | // 设备负荷对比 |
| | | this.setRightBlock1(res.data); |
| | | }); |
| | | await getDashboard() |
| | | .then((res) => { |
| | | console.log(res); |
| | | // 左上数值统计数据 |
| | | this.setLeftBlock1(res.data); |
| | | // 机器开机率数据 |
| | | this.setleftBlock2(res.data); |
| | | // 左中数据统计值 |
| | | this.setLeftBlock3(res.data); |
| | | // 订单完成比率 |
| | | this.setLeftBlock4(res.data); |
| | | // 工单进度统计 |
| | | this.setLeftBlock5(res.data); |
| | | // 人员生效效率比 人员技能 |
| | | this.setLeftBlock6(res.data); |
| | | // 设备负荷对比 |
| | | this.setRightBlock1(res.data); |
| | | // 物料需求统计 |
| | | this.setRightBlock2(res.data); |
| | | // 车间正品率 |
| | | this.setRightBlock3(res.data); |
| | | }) |
| | | .finally(() => { |
| | | setTimeout(() => { |
| | | this.getDashboard(); |
| | | }, 300000); |
| | | }); |
| | | }, |
| | | // 处理左上数据 |
| | | setLeftBlock1(data) { |
| | |
| | | }, |
| | | // 工单进度统计 |
| | | setLeftBlock5(data) { |
| | | this.workOrderFinishRate = data?.WorkOrderFinishRate.toString() ?? "0"; |
| | | let list = data.WorkOrderStats.map((item) => { |
| | | let completeProgerss = []; |
| | | for (let i = 0; i < item.ProcedureNum; i++) { |
| | |
| | | }); |
| | | this.workOrderData = list; |
| | | }, |
| | | // 人员生效效率比 人员技能 |
| | | setLeftBlock6(data) { |
| | | this.perSonnelChartData.datax = []; |
| | | this.perSonnelChartData.datay = []; |
| | | data.PersonnelProductivity.map((item) => { |
| | | this.perSonnelChartData.datax.push(item.Name); |
| | | this.perSonnelChartData.datay.push(parseFloat(item.Value)); |
| | | }); |
| | | // 人员技能饼图 |
| | | let chartData2 = []; |
| | | chartData2 = data.WorkerTypeStats.map((item) => { |
| | | return { |
| | | name: item.Name, |
| | | value: parseFloat(item.Value), |
| | | }; |
| | | }); |
| | | this.$refs.leftBlock6.getChartRight("chart2", chartData2); |
| | | }, |
| | | // 设备负荷对比 |
| | | setRightBlock1(data) { |
| | | this.deviceChartData.datax = []; |
| | |
| | | this.deviceChartData.datax.push(item.Name); |
| | | this.deviceChartData.datay.push(parseFloat(item.Value)); |
| | | }); |
| | | // this.$refs.rightBlock1.pieChart("chart", this.deviceChartData); |
| | | }, |
| | | // 物料需求统计 |
| | | setRightBlock2(data) { |
| | | this.materialChartData.datax = []; |
| | | this.materialChartData.datay = []; |
| | | data.MaterialRequirement.map((item) => { |
| | | this.materialChartData.datax.push(item.Name); |
| | | this.materialChartData.datay.push(parseFloat(item.Value)); |
| | | }); |
| | | }, |
| | | // 车间正品率 |
| | | setRightBlock3(data) { |
| | | this.barChartData.total = data.TodayFinishAmount; |
| | | this.barChartData.rate = data.TodayQualifiedRate; |
| | | this.barChartData.datax = []; |
| | | this.barChartData.datay = []; |
| | | this.barChartData.datay2 = []; |
| | | data.WorkshopStats.map((item) => { |
| | | this.barChartData.datax.push(item.Name); |
| | | this.barChartData.datay.push(parseFloat(item.Qualified)); |
| | | this.barChartData.datay2.push(parseFloat(item.Defective)); |
| | | }); |
| | | }, |
| | | }, |
| | | }; |