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

工单导出

Browse Source
This commit is contained in:
‘937886381’
2024-07-08 16:54:58 +08:00
parent 2c53c249af
commit 72855a6f04
36 changed files with 1047 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/views/produce/data/index.vue
View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-04-15 10:49:13
* @LastEditTime: 2024-07-05 09:21:12
* @LastEditTime: 2024-07-08 14:38:25
* @LastEditors: zhp
* @Description:
-->
@@ -415,7 +415,7 @@ export default {
type: 'bar',
stack: String(fac.id),
data: Array(xAxisData.length).fill(0),
barWidth: 20,
barWidth: 16,
itemStyle: {
color: this.colorList[i]
},
@@ -441,7 +441,7 @@ export default {
type: 'bar',
stack: String(fac.id),
data: Array(xAxisData.length).fill(0),
barWidth: 20,
barWidth: 16,
itemStyle: {
color: this.colorList[i]
},
@@ -472,7 +472,7 @@ export default {
// type: 'bar',
// stack: String(fac.id),
// data: Array(xAxisData.length).fill(0),
// barWidth: 20,
// barWidth: 16,
// itemStyle: {
// color: this.colorList[i]
// }

8
src/views/produce/workOrder/add-or-updata.vue
View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2023-11-06 15:15:30
* @LastEditTime: 2024-07-05 15:16:01
* @LastEditTime: 2024-07-08 15:06:49
* @LastEditors: zhp
* @Description:
-->
@@ -9,7 +9,7 @@
<el-drawer class="drawer" :visible.sync="visible" size="85%" @closed="$emit('destroy')">
<small-title slot="title" :no-padding="true">
{{ '详情' }}
<el-button type="primary" plain size="small" style="float: right" @click="exportDetail">导出</el-button>
<!-- <el-button type="primary" plain size="small" style="float: right" @click="exportDetail">导出</el-button> -->
</small-title>
<div ref="detail" class="detailBox">
<el-row :gutter="20">
@@ -304,7 +304,7 @@ export default {
{
data: barData,
type: 'bar',
barWidth: '40%',
barWidth: 16,
label: {
show: true,
position: 'top'
@@ -402,7 +402,7 @@ export default {
{
data: yAxisList,
type: 'bar',
barWidth: '50%',
barWidth: 16,
label: {
show: true,
position: 'top'

129
src/views/produce/workOrder/dayReportComponents/ExportDayReport.vue Normal file
View File

@@ -0,0 +1,129 @@
<template>
<div class="dayRepExpBox">
<!-- <el-row>
<el-col :span="24">
<div class="chartTitle" style="text-align: center;">产品良率</div>
<div class="box2">
<productYield ref="productYield" :beProcessObj="beProcessObj" />
</div>
</el-col>
</el-row> -->
<el-row>
<el-col :span="24">
<div class="chartTitle" style="text-align: center;">待制品分布</div>
<div class="box2">
<beProcessed ref="beProcess" :beProcessObj="beProcessObj" />
</div>
</el-col>
</el-row>
<!-- <el-row>
<el-col :span="24">
<div class="chartTitle" style="text-align: center;">生产明细</div>
<div class="box2">
<produceDetail ref="produceDetail" :beProcessObj="beProcessObj" />
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="chartTitle" style="text-align: center;">历史趋势</div>
<div class="box2">
<hisChart ref="hisChart" :beProcessObj="beProcessObj" />
</div>
</el-col>
</el-row> -->
</div>
</template>
<script>
import hisChart from './dayReportExportChart/hisChart'
import produceDetail from './dayReportExportChart/produceDetail'
import productYield from './dayReportExportChart/productYield'
import beProcessed from './dayReportExportChart/beProcessed.vue'
export default {
name: 'ExportDayReport',
components: { hisChart, produceDetail, productYield, beProcessed },
props: {
productionOverviewVo: {
type: Object,
default: () => { }
},
equipmentUtilizationVo: {
type: Object,
default: () => { }
},
chipPowerTrendVo: {
type: Object,
default: () => { }
},
beProcessObj: {
type: Object,
default: () => { }
},
},
data() {
return {
tableData1: [],
tableData2: []
}
},
watch: {
beProcessObj: {
handler(newValue, oldValue) {
this.$refs.beProcess.canvasReset()
}
}
},
mounted() {
this.getData()
},
methods: {
getData() {
console.log(this.beProcessObj);
this.$refs.beProcess.canvasReset()
// this.$refs.productYield.canvasReset()
// this.$refs.produceDetail.canvasReset()
// this.$refs.hisChart.canvasReset()
}
}
}
</script>
<style lang='scss' scoped>
.dayRepExpBox {
width: 595px;
height: 842px;
padding: 15px 20px 0;
background-color: #fff;
z-index: 2000;
.box2{
width: 555px;
height: 200px;
border: 2px solid #ECECEC;
border-left: 0;
}
.box3{
width: 555px;
height: 200px;
border: 2px solid #ECECEC;
}
.box5{
width: 555px;
height: 200px;
border: 2px solid #ECECEC;
border-left: 0;
}
.box6{
width: 555px;
height: 200px;
border: 2px solid #ECECEC;
position: relative;
.rightTitle{
position: absolute;
right: 5px;
top:2px;
font-size: 8px;
color: #383838;
}
}
}
</style>

111
src/views/produce/workOrder/dayReportComponents/dayReportExportChart/beProcessed.vue Normal file
View File

@@ -0,0 +1,111 @@
<!--
* @Author: zhp
* @Date: 2024-07-08 14:51:47
* @LastEditTime: 2024-07-08 16:50:34
* @LastEditors: zhp
* @Description:
-->
<template>
<div id="chipPowerExpChart" style="width:552px;height:200px;" />
</template>
<script>
import * as echarts from 'echarts'
// import resize from './../../../mixins/resize'
import { debounce } from "@/utils/debounce";
export default {
name: 'ChipPowerExp',
// mixins: [resize],
props: {
beProcessObj: {
type: Object,
default: () => {}
}
},
data() {
return {
chart: null
}
},
watch: {
beProcessObj: {
handler(newValue, oldValue) {
console.log(newValue);
this.canvasReset()
}
}
},
mounted() {
this.canvasReset()
},
methods: {
canvasReset() {
debounce(() => {
this.updateChart();
}, 500)();
},
updateChart() {
if (
this.chart !== null &&
this.chart !== '' &&
this.chart !== undefined
) {
this.chart.dispose()
}
// console.log(this.beProcessObj);
this.chart = echarts.init(document.getElementById('chipPowerExpChart'), 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'],
tooltip: {
trigger: 'axis'
},
// grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true },
calculable: true,
grid: {
top: '15%',
left: 10,
right: 0,
bottom: 0,
containLabel: true
},
xAxis: {
type: 'category',
data: xAxisList,
axisLabel: {
rotate: 25
// width: '10%'
}
},
yAxis: {
type: 'value',
name: '单位/片',
axisLine: {
show: true
}
},
series: [
{
data: yAxisList,
type: 'bar',
barWidth: 16,
label: {
show: true,
position: 'top'
}
}
]
}
option && this.chart.setOption(option)
}
}
}
</script>

110
src/views/produce/workOrder/dayReportComponents/dayReportExportChart/hisChart.vue Normal file
View File

@@ -0,0 +1,110 @@
<!--
* @Author: zhp
* @Date: 2024-07-08 14:51:47
* @LastEditTime: 2024-07-08 16:40:58
* @LastEditors: zhp
* @Description:
-->
<template>
<div id="hisChart" style="width:552px;height:200px;" />
</template>
<script>
import * as echarts from 'echarts'
// import resize from './../../../mixins/resize'
import { debounce } from "@/utils/debounce";
export default {
name: 'ChipPowerExp',
// mixins: [resize],
props: {
beProcessObj: {
type: Object,
default: () => { }
}
},
data() {
return {
chart: null
}
},
watch: {
beProcessObj: {
handler(newValue, oldValue) {
this.canvasReset()
}
}
},
mounted() {
this.canvasReset()
},
methods: {
canvasReset() {
debounce(() => {
this.updateChart();
}, 500)();
},
updateChart() {
if (
this.chart !== null &&
this.chart !== '' &&
this.chart !== undefined
) {
this.chart.dispose()
}
console.log(this.beProcessObj);
this.chart = echarts.init(document.getElementById('hisChart'), 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'],
tooltip: {
trigger: 'axis'
},
// grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true },
calculable: true,
grid: {
top: '15%',
left: 10,
right: 0,
bottom: 0,
containLabel: true
},
xAxis: {
type: 'category',
data: xAxisList,
axisLabel: {
rotate: 25
// width: '10%'
}
},
yAxis: {
type: 'value',
name: '单位/片',
axisLine: {
show: true
}
},
series: [
{
data: yAxisList,
type: 'bar',
barWidth: 16,
label: {
show: true,
position: 'top'
}
}
]
}
option && this.chart.setOption(option)
}
}
}
</script>

110
src/views/produce/workOrder/dayReportComponents/dayReportExportChart/produceDetail.vue Normal file
View File

@@ -0,0 +1,110 @@
<!--
* @Author: zhp
* @Date: 2024-07-08 14:51:47
* @LastEditTime: 2024-07-08 16:41:11
* @LastEditors: zhp
* @Description:
-->
<template>
<div id="produceDetail" style="width:552px;height:200px;" />
</template>
<script>
import * as echarts from 'echarts'
// import resize from './../../../mixins/resize'
import { debounce } from "@/utils/debounce";
export default {
name: 'ChipPowerExp',
// mixins: [resize],
props: {
beProcessObj: {
type: Object,
default: () => { }
}
},
data() {
return {
chart: null
}
},
watch: {
beProcessObj: {
handler(newValue, oldValue) {
this.canvasReset()
}
}
},
mounted() {
this.canvasReset()
},
methods: {
canvasReset() {
debounce(() => {
this.updateChart();
}, 500)();
},
updateChart() {
if (
this.chart !== null &&
this.chart !== '' &&
this.chart !== undefined
) {
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: '待制品分布',
// left: 'center'
// // subtext: 'Fake Data'
// },
color: ['#3E8EF7'],
tooltip: {
trigger: 'axis'
},
// grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true },
calculable: true,
grid: {
top: '15%',
left: 10,
right: 0,
bottom: 0,
containLabel: true
},
xAxis: {
type: 'category',
data: xAxisList,
axisLabel: {
rotate: 25
// width: '10%'
}
},
yAxis: {
type: 'value',
name: '单位/片',
axisLine: {
show: true
}
},
series: [
{
data: yAxisList,
type: 'bar',
barWidth: 16,
label: {
show: true,
position: 'top'
}
}
]
}
option && this.chart.setOption(option)
}
}
}
</script>

110
src/views/produce/workOrder/dayReportComponents/dayReportExportChart/productYield.vue Normal file
View File

@@ -0,0 +1,110 @@
<!--
* @Author: zhp
* @Date: 2024-07-08 14:51:47
* @LastEditTime: 2024-07-08 16:41:20
* @LastEditors: zhp
* @Description:
-->
<template>
<div id="productYield" style="width:552px;height:200px;" />
</template>
<script>
import * as echarts from 'echarts'
// import resize from './../../../mixins/resize'
import { debounce } from "@/utils/debounce";
export default {
name: 'ChipPowerExp',
// mixins: [resize],
props: {
beProcessObj: {
type: Object,
default: () => { }
}
},
data() {
return {
chart: null
}
},
watch: {
beProcessObj: {
handler(newValue, oldValue) {
this.canvasReset()
}
}
},
mounted() {
this.canvasReset()
},
methods: {
canvasReset() {
debounce(() => {
this.updateChart();
}, 500)();
},
updateChart() {
if (
this.chart !== null &&
this.chart !== '' &&
this.chart !== undefined
) {
this.chart.dispose()
}
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'],
tooltip: {
trigger: 'axis'
},
// grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true },
calculable: true,
grid: {
top: '15%',
left: 10,
right: 0,
bottom: 0,
containLabel: true
},
xAxis: {
type: 'category',
data: xAxisList,
axisLabel: {
rotate: 25
// width: '10%'
}
},
yAxis: {
type: 'value',
name: '单位/片',
axisLine: {
show: true
}
},
series: [
{
data: yAxisList,
type: 'bar',
barWidth: 16,
label: {
show: true,
position: 'top'
}
}
]
}
option && this.chart.setOption(option)
}
}
}
</script>

106
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 08:50:26
* @LastEditTime: 2024-07-08 16:54:13
* @LastEditors: zhp
* @Description:
-->
@@ -10,7 +10,7 @@
<el-row :gutter="10">
<el-col :span="4">
<div class="app-container" style="padding: 16px; height: auto; text-align: left; border-radius: 8px;">
<!-- <p style="margin-bottom: 0">数据概览</p> -->
<!-- <p style="margin-bottom: 0">数据概览</p> -->
<div class="view">
<div style="padding: 10px 0; width: 100%">
<div class="topDiv">
@@ -27,13 +27,14 @@
</el-col>
<el-col :span="20">
<div class="app-container" style="padding: 16px; height: auto; text-align: left; border-radius: 8px;">
<!-- <p style="margin-bottom: 0">数据概览</p> -->
<!-- <p style="margin-bottom: 0">数据概览</p> -->
<div class="view">
<div style="padding: 10px 0; width: 100%" v-for="(item, index) in factorys" :key="index">
<div class="topDiv">
<div style="width: 4px; height: 52px; background: #3A79FF; border-radius: 2px;"></div>
<div class="centerDiv">
<span style="font-size: 30px; line-height: 30px; color: rgba(0,0,0,0.85);">{{ factoryNum[index] }}</span>
<span style="font-size: 30px; line-height: 30px; color: rgba(0,0,0,0.85);">{{ factoryNum[index]
}}</span>
<span style="font-size: 14px; color: rgba(0,0,0,0.85);">{{item}}</span>
</div>
<svg-icon icon-class="factoryWorkOrder" style="width: 26px; height: 26px" />
@@ -49,27 +50,28 @@
<div class="app-container" style="margin-top: 8px;flex-grow: 1;">
<!-- <search-bar :formConfigs="formConfig2" ref="searchBarForm" style="margin-bottom: 0" /> -->
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
<base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize"
:table-data="tableData" :max-height="tableH">
<base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize" :table-data="tableData"
:max-height="tableH">
<method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" fixed="right"
:method-list="tableBtn" @clickBtn="handleClick" />
</base-table>
<pagination
:limit.sync="listQuery.pageSize"
:page.sync="listQuery.pageNo"
:total="listQuery.total"
@pagination="getDataList"
/>
<pagination :limit.sync="listQuery.pageSize" :page.sync="listQuery.pageNo" :total="listQuery.total"
@pagination="getDataList" />
</div>
<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" />
</div>
<add-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" :date="listQuery.date" @refreshDataList="successSubmit" @destroy="detailOrUpdateVisible = false" />
</div>
</template>
<script>
// import { parseTime } from '../../core/mixins/code-filter';
import { getWorkOrderPage, exportExcel, getOverView } from '@/api/produceData/order';
import { getWorkOrderPage, exportExcel, getOverView, getWorkOrderDetail } from '@/api/produceData/order';
// import inputTable from './inputTable.vue';
import lineChart from './lineChart';
import ExportDayReport from './dayReportComponents/ExportDayReport'
import moment from 'moment'
import tableHeightMixin from "@/mixins/tableHeightMixin";
// import ButtonNav from '@/components/ButtonNav'
@@ -78,11 +80,12 @@ import AddOrUpdate from './add-or-updata';
import { factoryList, factoryArray } from "@/utils/constants";
// import { publicFormatter } from "@/utils/dict";
import statusChart from "./statusChart.vue";
import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'
// import FileSaver from 'file-saver'
// import * as XLSX from 'xlsx'
export default {
components: { lineChart, AddOrUpdate },
components: { lineChart, AddOrUpdate, ExportDayReport },
mixins: [basicPage, tableHeightMixin],
data() {
return {
@@ -91,6 +94,10 @@ export default {
inputNum: 0,
heightNum: 180,
factoryList,
beProcessObj: {
xAxisList: [],
yAxisList:[]
},
factoryArray,
listQuery: {
pageSize: 20,
@@ -106,6 +113,10 @@ export default {
type: 'detail',
btnName: '详情',
},
{
type: 'export',
btnName: '导出',
},
// {
// type: 'delete',
// btnName: '删除',
@@ -281,6 +292,26 @@ export default {
this.getOverView()
},
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'
},
getOverView() {
getOverView().then(res => {
// this.data = res.data
@@ -298,12 +329,43 @@ export default {
}
})
},
otherMethods(val) {
this.detailOrUpdateVisible = true;
// this.addOrEditTitle = "详情";
this.$nextTick(() => {
this.$refs.detailOrUpdate.init(val.data.id);
});
async otherMethods(val) {
console.log(val)
if (val.type === 'detail') {
this.detailOrUpdateVisible = true;
// this.addOrEditTitle = "详情";
this.$nextTick(() => {
this.$refs.detailOrUpdate.init(val.data.id);
});
} else {
const res = await getWorkOrderDetail(val.data.id)
if (res.code === 0) {
// this.loading = false
// this.dataForm = res.data.prodWorkOrderDO
// this.buildChart(this.dataForm)
// 在制品
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()
})
}
// if (this.dataForm.orderStatus === 1) {
// this.trend()
// }
}
},
async getDataList() {
const res = await getWorkOrderPage(this.listQuery)