mt-fe-group/yudao-init
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

导出

Browse Source
This commit is contained in:
‘937886381’ 2024-07-09 10:19:54 +08:00
parent 63f4fd7cb5
commit 96f7798708
10 changed files with 156 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/copilot/yield/components/sub/ring/DoubleRingChart.vue
View File

@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-20 13:32:59
* @LastEditTime: 2024-06-17 16:42:12
* @LastEditTime: 2024-07-09 08:58:47
* @LastEditors: zhp
* @Description:
-->
@ -312,7 +312,7 @@ function calculateItems(period, valueTuple, than) {
}
.double-ring-chart__legend {
padding: 12px;
/* padding: 12px; */
color: #fff;
display: flex;
justify-content: center;

4
src/views/copilot/yield/components/sub/ring/DoubleRingWrapper.vue
View File

@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-30 16:00:50
* @LastEditTime: 2024-06-03 16:26:03
* @LastEditTime: 2024-07-09 09:09:07
* @LastEditors: zhp
* @Description:
-->
@ -64,7 +64,7 @@ export default {
<style scoped lang="scss">
.double-ring-wrapper {
height: 100%;
padding: 12px 24px;
padding: 0px 24px;
display: flex;
gap: 12px;
flex-direction: column;

4
src/views/copilot/yield/components/sub/ring/noDoubleRingWrapper.vue
View File

@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-24 15:15:00
* @LastEditTime: 2024-05-31 16:16:16
* @LastEditTime: 2024-07-09 09:27:12
* @LastEditors: zhp
* @Description:
-->
@ -74,7 +74,7 @@ export default {
<style scoped lang="scss">
.double-ring-wrapper {
height: 100%;
padding: 12px 24px;
padding: 0px 24px;
display: flex;
gap: 12px;
flex-direction: column;

18
src/views/copilot/yield/options/double-ring-chart-options.js
View File

@ -23,11 +23,11 @@ export default ({
title: {
text: titleValue,
left: "48.5%",
top: "37%",
top: "35%",
textAlign: "center",
textStyle: {
fontWeight: 600,
fontSize: 26,
fontWeight: 400,
fontSize: 32,
color: "#fffd",
},
subtext: `\u2002${subtitle}\u2002`,
@ -43,8 +43,8 @@ export default ({
{
type: "pie",
name: "当前目标",
radius: ["80%", "90%"],
center: ["50%", "52%"],
radius: ["80%", "95%"],
center: ["50%", "48%"],
emptyCircleStyle: {
color: "#042c5f33",
},
@ -52,8 +52,8 @@ export default ({
// 数据 series
{
type: "pie",
radius: ["80%", "90%"],
center: ["50%", "52%"],
radius: ["80%", "95%"],
center: ["50%", "48%"],
avoidLabelOvervlap: false,
label: {
show: false,
@ -103,8 +103,8 @@ export default ({
// 数据 series2 - 2023累计
{
type: "pie",
radius: ["70%", "80%"],
center: ["50%", "52%"],
radius: ["65%", "80%"],
center: ["50%", "48%"],
avoidLabelOvervlap: false,
label: {
show: false,

36
src/views/produce/workOrder/dayReportComponents/ExportDayReport.vue
View File

@ -1,13 +1,13 @@
<template>
<div class="dayRepExpBox">
<!-- <el-row>
<el-row>
<el-col :span="24">
<div class="chartTitle" style="text-align: center;">产品良率</div>
<div class="box2">
<productYield ref="productYield" :beProcessObj="beProcessObj" />
<productYield ref="productYield" :pieList="pieList" />
</div>
</el-col>
</el-row> -->
</el-row>
<el-row>
<el-col :span="24">
<div class="chartTitle" style="text-align: center;">待制品分布</div>
@ -16,11 +16,11 @@
</div>
</el-col>
</el-row>
<!-- <el-row>
<el-row>
<el-col :span="24">
<div class="chartTitle" style="text-align: center;">生产明细</div>
<div class="box2">
<produceDetail ref="produceDetail" :beProcessObj="beProcessObj" />
<produceDetail ref="produceDetail" :produceData="produceData" />
</div>
</el-col>
</el-row>
@ -28,10 +28,10 @@
<el-col :span="24">
<div class="chartTitle" style="text-align: center;">历史趋势</div>
<div class="box2">
<hisChart ref="hisChart" :beProcessObj="beProcessObj" />
<hisChart ref="hisChart" :hisObj="hisObj" />
</div>
</el-col>
</el-row> -->
</el-row>
</div>
</template>
<script>
@ -43,17 +43,17 @@ export default {
name: 'ExportDayReport',
components: { hisChart, produceDetail, productYield, beProcessed },
props: {
productionOverviewVo: {
produceData: {
type: Array,
default: () => []
},
hisObj: {
type: Object,
default: () => { }
},
equipmentUtilizationVo: {
type: Object,
default: () => { }
},
chipPowerTrendVo: {
type: Object,
default: () => { }
pieList: {
type: Array,
default: () => []
},
beProcessObj: {
type: Object,
@ -62,8 +62,6 @@ export default {
},
data() {
return {
tableData1: [],
tableData2: []
}
},
watch: {
@ -78,8 +76,8 @@ export default {
},
methods: {
getData() {
console.log(this.beProcessObj);
this.$refs.beProcess.canvasReset()
// console.log('beProcessObj', this.beProcessObj);
// this.$refs.beProcess.canvasReset()
// this.$refs.productYield.canvasReset()
// this.$refs.produceDetail.canvasReset()
// this.$refs.hisChart.canvasReset()

21
src/views/produce/workOrder/dayReportComponents/dayReportExportChart/beProcessed.vue
View File

@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-07-08 14:51:47
* @LastEditTime: 2024-07-08 16:50:34
* @LastEditTime: 2024-07-09 09:34:38
* @LastEditors: zhp
* @Description:
-->
@ -28,10 +28,11 @@ export default {
},
watch: {
beProcessObj: {
handler(newValue, oldValue) {
console.log(newValue);
handler(val) {
console.log(val);
this.canvasReset()
}
},
deep: true //对象内部属性的监听，关键。
}
},
mounted() {
@ -51,13 +52,11 @@ export default {
) {
this.chart.dispose()
}
// console.log(this.beProcessObj);
this.chart = echarts.init(document.getElementById('chipPowerExpChart'), null, { devicePixelRatio: 2 })
console.log(this.beProcessObj);
this.chart = echarts.init(document.getElementById('chipPowerExpChart'))
// const legendName = Object.keys(this.chipPowerDistributionVo)
let xAxisList = this.beProcessObj.xAxisList
let yAxisList = this.beProcessObj.yAxisList
// const values = Object.values(this.chipPowerDistributionVo)
var option = {
// title: {
// text: '待制品分布',
@ -72,7 +71,7 @@ export default {
calculable: true,
grid: {
top: '15%',
left: 10,
left: 0,
right: 0,
bottom: 0,
containLabel: true
@ -81,7 +80,7 @@ export default {
type: 'category',
data: xAxisList,
axisLabel: {
rotate: 25
rotate: 45
// width: '10%'
}
},
@ -96,7 +95,7 @@ export default {
{
data: yAxisList,
type: 'bar',
barWidth: 16,
barWidth: 10,
label: {
show: true,
position: 'top'

28
src/views/produce/workOrder/dayReportComponents/dayReportExportChart/hisChart.vue
View File

@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-07-08 14:51:47
* @LastEditTime: 2024-07-08 16:40:58
* @LastEditTime: 2024-07-09 09:55:27
* @LastEditors: zhp
* @Description:
-->
@ -16,7 +16,7 @@ export default {
name: 'ChipPowerExp',
// mixins: [resize],
props: {
beProcessObj: {
hisObj: {
type: Object,
default: () => { }
}
@ -27,10 +27,11 @@ export default {
}
},
watch: {
beProcessObj: {
hisObj: {
handler(newValue, oldValue) {
this.canvasReset()
}
},
deep:true,
}
},
mounted() {
@ -50,13 +51,11 @@ export default {
) {
this.chart.dispose()
}
console.log(this.beProcessObj);
this.chart = echarts.init(document.getElementById('hisChart'), null, { devicePixelRatio: 2 })
this.chart = echarts.init(document.getElementById('hisChart'))
// const legendName = Object.keys(this.chipPowerDistributionVo)
let xAxisList = this.beProcessObj.xAxisList
let yAxisList = this.beProcessObj.yAxisList
// const values = Object.values(this.chipPowerDistributionVo)
let dateList = this.hisObj.dateList
let seriesList = this.hisObj.seriesList
var option = {
// title: {
// text: '待制品分布',
@ -71,16 +70,16 @@ export default {
calculable: true,
grid: {
top: '15%',
left: 10,
left: 0,
right: 0,
bottom: 0,
containLabel: true
},
xAxis: {
type: 'category',
data: xAxisList,
data: dateList,
axisLabel: {
rotate: 25
rotate: 45
// width: '10%'
}
},
@ -93,9 +92,8 @@ export default {
},
series: [
{
data: yAxisList,
type: 'bar',
barWidth: 16,
data: seriesList,
type: 'line',
label: {
show: true,
position: 'top'

29
src/views/produce/workOrder/dayReportComponents/dayReportExportChart/produceDetail.vue
View File

@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-07-08 14:51:47
* @LastEditTime: 2024-07-08 16:41:11
* @LastEditTime: 2024-07-09 09:56:13
* @LastEditors: zhp
* @Description:
-->
@ -16,9 +16,9 @@ export default {
name: 'ChipPowerExp',
// mixins: [resize],
props: {
beProcessObj: {
type: Object,
default: () => { }
produceData: {
type: Array,
default: () => []
}
},
data() {
@ -27,10 +27,11 @@ export default {
}
},
watch: {
beProcessObj: {
produceData: {
handler(newValue, oldValue) {
this.canvasReset()
}
},
deep:true,
}
},
mounted() {
@ -50,16 +51,13 @@ export default {
) {
this.chart.dispose()
}
console.log(this.beProcessObj);
this.chart = echarts.init(document.getElementById('produceDetail'), null, { devicePixelRatio: 2 })
// const legendName = Object.keys(this.chipPowerDistributionVo)
let xAxisList = this.beProcessObj.xAxisList
let yAxisList = this.beProcessObj.yAxisList
// const values = Object.values(this.chipPowerDistributionVo)
var option = {
// title: {
// text: '待制品分布',
// text: '生产明细',
// left: 'center'
// // subtext: 'Fake Data'
// },
@ -71,17 +69,16 @@ export default {
calculable: true,
grid: {
top: '15%',
left: 10,
right: 0,
left: 0,
right: '10%',
bottom: 0,
containLabel: true
},
xAxis: {
type: 'category',
data: xAxisList,
data: ['目标产量', '计划投入量', '实际投入', '实际产出', '废品数量', '待再加工数量'],
axisLabel: {
rotate: 25
// width: '10%'
rotate: 45
}
},
yAxis: {
@ -93,7 +90,7 @@ export default {
},
series: [
{
data: yAxisList,
data: this.produceData,
type: 'bar',
barWidth: 16,
label: {

83
src/views/produce/workOrder/dayReportComponents/dayReportExportChart/productYield.vue
View File

@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-07-08 14:51:47
* @LastEditTime: 2024-07-08 16:41:20
* @LastEditTime: 2024-07-09 09:58:43
* @LastEditors: zhp
* @Description:
-->
@ -16,9 +16,9 @@ export default {
name: 'ChipPowerExp',
// mixins: [resize],
props: {
beProcessObj: {
type: Object,
default: () => { }
pieList: {
type: Array,
default: () => []
}
},
data() {
@ -27,10 +27,11 @@ export default {
}
},
watch: {
beProcessObj: {
pieList: {
handler(newValue, oldValue) {
this.canvasReset()
}
},
deep:true
}
},
mounted() {
@ -52,53 +53,49 @@ export default {
}
console.log(this.beProcessObj);
this.chart = echarts.init(document.getElementById('productYield'), null, { devicePixelRatio: 2 })
// const legendName = Object.keys(this.chipPowerDistributionVo)
let xAxisList = this.beProcessObj.xAxisList
let yAxisList = this.beProcessObj.yAxisList
// const values = Object.values(this.chipPowerDistributionVo)
var option = {
// title: {
// text: '待制品分布',
// left: 'center'
// // subtext: 'Fake Data'
// },
color: ['#3E8EF7'],
color: ['#3E8EF7', '#69E6D8', '#F7C739'],
title: {
// text: !isNaN((pieData[0].value / (pieData[0].value + pieData[1].value)).toFixed(4) * 100) ? ( '产品良率 ' + (pieData[0].value / (pieData[0].value + pieData[1].value)).toFixed(4) * 100 + '%') : '产品良率 -',
left: 'center'
// subtext: 'Fake Data'
},
tooltip: {
trigger: 'axis'
trigger: 'item'
},
// grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true },
calculable: true,
grid: {
top: '15%',
left: 10,
right: 0,
legend: {
bottom: 0,
containLabel: true
},
xAxis: {
type: 'category',
data: xAxisList,
axisLabel: {
rotate: 25
// width: '10%'
}
},
yAxis: {
type: 'value',
name: '单位/片',
axisLine: {
show: true
}
left: 'center'
},
series: [
{
data: yAxisList,
type: 'bar',
barWidth: 16,
// name: 'Access From',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
data: this.pieList,
label: {
show: true,
position: 'top'
position: 'outside',
formatter: (params) => {
console.log(params)
let res = ''
// for (let i in params) {
res += `${params.percent ? params.percent : 0}% \n ${params.name}`
// }
return res
},
rich: {
d: {
color: 'inherit', // 系列色
verticalAlign: 'top'
},
b: {
color: '#8C8C8C',
verticalAlign: 'top'
}
}
}
}
]

87
src/views/produce/workOrder/index.vue
View File

@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-04-15 10:49:13
* @LastEditTime: 2024-07-08 16:54:13
* @LastEditTime: 2024-07-09 10:17:41
* @LastEditors: zhp
* @Description:
-->
@ -61,7 +61,7 @@
<add-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" :date="listQuery.date"
@refreshDataList="successSubmit" @destroy="detailOrUpdateVisible = false" />
<div id="dayRepDom" style="position: absolute;top:0;display: none;">
<ExportDayReport :beProcessObj="beProcessObj" />
<ExportDayReport :beProcessObj="beProcessObj" :produceData="produceData" :hisObj="hisObj" :pieList="pieList" />
</div>
</div>
</template>
@ -94,6 +94,12 @@ export default {
inputNum: 0,
heightNum: 180,
factoryList,
produceData: [],
pieList:[],
hisObj: {
seriesList: [],
dateList:[],
},
beProcessObj: {
xAxisList: [],
yAxisList:[]
@ -293,24 +299,27 @@ export default {
},
methods: {
exportPDF() {
this.$message.success('正在导出，请稍等！')
const element = document.getElementById('dayRepDom')
element.style.display = 'block'
const fileName = '瑞昌碲化镉生产日报' + moment().format('yyMMDD') + '.pdf'
html2canvas(element, {
dpi: 300, // Set to 300 DPI
scale: 3 // Adjusts your resolution
}).then(function (canvas) {
const imgWidth = 595.28
const imgHeight = 841.89
const pageData = canvas.toDataURL('image/jpeg', 1.0)
const PDF = new JsPDF('', 'pt', [imgWidth, imgHeight])
PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
setTimeout(() => {
PDF.save(fileName) // 导出文件名
}, 1000)
})
element.style.display = 'none'
setTimeout(() => {
this.$message.success('正在导出，请稍等！')
const element = document.getElementById('dayRepDom')
element.style.display = 'block'
const fileName = '工单数据' + moment().format('yyMMDD') + '.pdf'
html2canvas(element, {
dpi: 300, // Set to 300 DPI
scale: 3 // Adjusts your resolution
}).then(function (canvas) {
const imgWidth = 595.28
const imgHeight = 841.89
const pageData = canvas.toDataURL('image/jpeg', 1.0)
const PDF = new JsPDF('', 'pt', [imgWidth, imgHeight])
PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
setTimeout(() => {
PDF.save(fileName) // 导出文件名
}, 1000)
})
element.style.display = 'none'
}, 3000)
},
getOverView() {
getOverView().then(res => {
@ -341,30 +350,30 @@ export default {
const res = await getWorkOrderDetail(val.data.id)
if (res.code === 0) {
// this.loading = false
// this.dataForm = res.data.prodWorkOrderDO
// this.buildChart(this.dataForm)
// 在制品
;const data = res.data.prodWorkOrderDO
const barList = [data.targetProduction, data.plannedInvestment, data.actualInvestment, data.actualProduction, data.wasteNum, data.reworkNum]
const seriesList = []
const dateList = []
res.data.his.forEach(element => {
seriesList.push(element.actualProduction)
dateList.push(element.recordTime[0] + '-' + element.recordTime[1] + '-' + element.recordTime[2])
})
this.hisObj.seriesList = seriesList
this.hisObj.dateList = dateList
const xAxisList = Object.keys(res.data.inProcessDis)
const yAxisList = Object.values(res.data.inProcessDis)
this.beProcessObj.xAxisList = xAxisList
this.beProcessObj.yAxisList = yAxisList
console.log(this.beProcessObj);
// this.initEqLineChart(xAxisList, yAxisList)
// 趋势图
const seriesList = []
const dateList = []
// res.data.his.forEach(element => {
// seriesList.push(element.actualProduction)
// dateList.push(element.recordTime[0] + '-' + element.recordTime[1] + '-' + element.recordTime[2])
// })
// this.initLineChart(dateList, seriesList)
this.$nextTick(() => {
this.exportPDF()
})
this.produceData = barList
this.pieList = [
{ value: data.actualProduction ? data.actualProduction : 0, name: '实际产出' },
{ value: data.wasteNum ? data.wasteNum : 0, name: '废品数量' },
{ value: data.reworkNum ? data.reworkNum : 0, name: '待再加工数量' }
]
}
// if (this.dataForm.orderStatus === 1) {
// this.trend()
// }
this.$nextTick(() => {
this.exportPDF()
})
}
},
async getDataList() {