mt-fe-group/yudao-dev
13
0
Fork 0
Code Issues Pull Requests 1 Releases Wiki Activity

定制化报表，基础核心

Browse Source
This commit is contained in:
helloDy
2023-12-14 14:01:19 +08:00
parent 8399081a6f
commit 79274aa8c8
23 changed files with 1264 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

213
src/views/report/glass/inputTable.vue Normal file
View File

@@ -0,0 +1,213 @@
<!--
* @Author: Do not edit
* @Date: 2023-12-13 14:10:04
* @LastEditTime: 2023-12-14 10:18:20
* @LastEditors: DY
* @Description:
-->
<template>
<div>
<el-row style="float: right; margin-bottom: 5px">
<el-button size="small" @click="edit = true">编辑</el-button>
<el-button v-if="edit" size="small" @click="updateData">保存</el-button>
</el-row>
<el-table
:data="data"
border
show-summary
style="width: 100%">
<el-table-column
v-for="(item, index) in cols"
:key="index" :prop="item.prop"
:label="item.label"
:align="item.align ? item.align : 'left'">
<el-table-column
v-for="(it, index1) in item.children"
:key="index1"
:prop="it.prop"
:label="it.label"
:align="item.align ? item.align : 'left'">
<el-table-column
v-for="(y, index2) in it.children"
:key="index2"
:prop="y.prop"
:label="y.label">
<template slot-scope="scope">
<span v-if="!edit">{{ scope.row[y.prop] }}</span>
<el-input v-else v-model.number="scope.row[y.prop]"></el-input>
</template>
</el-table-column>
</el-table-column>
</el-table-column>
</el-table>
<el-input type="textarea" v-model="sum.remark" placeholder="备注" :disabled="!edit" :autosize="{ minRows: 2, maxRows: 6}"></el-input>
</div>
</template>
<script>
import { updateGlass, updateGlassRemark } from '@/api/report/glass';
const cols = [
{
prop: 'xc',
label: '许昌安彩周原片生产汇总',
align: 'center',
children: [
{
prop: 'lineName',
label: '生产线',
},
{
prop: 'm',
label: '拉引量㎡',
align: 'center',
children: [
{
prop: 'dailyOutputNow',
label: '本周',
},
{
prop: 'dailyOutputHis',
label: '上周',
},
{
prop: 'dailyOutputTrend',
label: '增减',
}
]
},
{
prop: 'y',
label: '原片合计（片/周）',
align: 'center',
children: [
{
prop: 'originalGlassStatisticsNow',
label: '本周',
},
{
prop: 'originalGlassStatisticsHis',
label: '上周',
},
{
prop: 'originalGlassStatisticsTrend',
label: '增减',
}
]
},
{
prop: 's',
label: '实际原片产量㎡',
align: 'center',
children: [
{
prop: 'actualProductNow',
label: '本周',
},
{
prop: 'actualProductHis',
label: '上周',
},
{
prop: 'actualProductTrend',
label: '增减',
}
]
},
{
prop: 'yield',
label: '原片良品率',
children: [
{
prop: 'originalGlassPassNow',
label: '本周',
},
{
prop: 'originalGlassPassHis ',
label: '上周',
},
{
prop: 'originalGlassPassTrend',
label: '增减',
}
]
}
]
}
]
export default {
props: {
data: {
type: Array,
default: () => [],
},
time: {
type: Array,
default: () => [],
},
sum: {
type: Object,
default: () => {},
},
type: {
type: Number,
default: 3,
}
},
data() {
return {
cols,
edit: false,
};
},
watch: {
time: {
immediate: true,
handler(newv, oldv) {
if (newv[0] !== '') {
this.cols[0].label = '许昌安彩周原片生产汇总' + '(' + newv[0] + '-' + newv[1] + ')'
} else {
this.cols[0].label = '许昌安彩周原片生产汇总'
}
}
},
type: {
immediate: true,
handler(newv, oldv) {
let text1 = '', text2 = '', text3 = ''
if (newv === 3) {
text1 = '本周'
text2 = '上周'
text3 = '原片合计（片/周）'
} else if (newv === 4) {
text1 = '本月'
text2 = '上月'
text3 = '原片合计（片/月）'
} else {
text1 = '本年'
text2 = '上年'
text3 = '原片合计（片/年）'
}
this.cols[0].children[1].children[0].label = text1
this.cols[0].children[1].children[1].label = text2
this.cols[0].children[2].children[0].label = text1
this.cols[0].children[2].children[1].label = text2
this.cols[0].children[3].children[0].label = text1
this.cols[0].children[3].children[1].label = text2
this.cols[0].children[2].label = text3
}
}
},
methods: {
updateData() {
updateGlass(this.data).then(response => {
updateGlassRemark(this.sum).then(res => {
this.$modal.msgSuccess("修改成功");
this.edit = false;
this.$emit("refreshDataList");
});
});
}
}
};
</script>

177
src/views/report/glass/month.vue Normal file
View File

@@ -0,0 +1,177 @@
<template>
<div class="app-container">
<div>
<el-form
:model="listQuery"
:inline="true"
ref="dataForm"
class="blueTip">
<el-form-item label="月" prop="reportTime">
<el-date-picker
v-model="reportTime"
type="month"
size="small"
@change="changeTime"
placeholder="选择月">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button v-if="this.$auth.hasPermi('report:glass-month:query')" type="primary" size="small" @click="getDataList">查询</el-button>
<el-button v-if="this.$auth.hasPermi('report:glass-month:export')" type="primary" size="small" plain @click="handleExport">导出</el-button>
</el-form-item>
</el-form>
</div>
<inputTable :data="tableData" :time="[startTimeStamp, endTimeStamp]" :sum="all" :type="listQuery.reportType" @refreshDataList="getDataList" />
<!-- <pagination
:limit.sync="listQuery.pageSize"
:page.sync="listQuery.pageNo"
:total="listQuery.total"
@pagination="getDataList" /> -->
</div>
</template>
<script>
import { parseTime } from '../../core/mixins/code-filter';
import { getGlassPage, exportGlasscExcel } from '@/api/report/glass';
import inputTable from './inputTable.vue';
import { getCorePLList } from '@/api/base/coreProductionLine';
export default {
components: { inputTable },
data() {
return {
urlOptions: {
getDataListURL: getGlassPage,
exportURL: exportGlasscExcel
},
listQuery: {
pageSize: 10,
pageNo: 1,
total: 0,
reportType: 4,
reportTime: []
},
reportTime: '',
startTimeStamp: '',
endTimeStamp: '',
tableData: [],
proLineList: [],
all: {}
};
},
created() {
this.getDict()
},
methods: {
async getDict() {
// 产线列表
const res = await getCorePLList();
this.proLineList = res.data;
},
// 获取数据列表
async getDataList() {
this.dataListLoading = true;
await this.urlOptions.getDataListURL(this.listQuery).then(response => {
this.tableData = response.data.filter(item => {
this.proLineList.forEach(it => {
if (item.lineId === it.id) {
item.lineName = it.name
}
})
if (item.det === false) {
this.all = {
id: item.id,
remark: item.remark
}
}
return item.det === true
});
this.listQuery.total = response.data.length;
this.dataListLoading = false;
});
},
changeTime(val) {
if(val) {
const timeStamp = val.getMonth(); //标准时间转为时间戳，毫秒级别
const fullyear = val.getFullYear()
let days = 0
switch (timeStamp) {
case 0, 2, 4, 6, 7, 9, 11:
days = 31
break
case 3, 4, 8, 10:
days = 30
break
case 1:
if ((fullyear % 400 === 0) || (fullyear() % 4 === 0 && fullyear() % 100 !== 0)) {
days = 29
} else {
days = 28
}
}
this.startTimeStamp = this.timeFun(new Date(fullyear, timeStamp, 1).getTime()); //开始时间
this.endTimeStamp = this.timeFun(new Date(fullyear, timeStamp, days, 23, 59, 59).getTime()); //结束时间
console.log(this.startTimeStamp, this.endTimeStamp)
this.listQuery.reportTime[0] = parseTime(new Date(fullyear, timeStamp, 1).getTime()) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000
this.listQuery.reportTime[1] = parseTime(new Date(fullyear, timeStamp, days, 23, 59, 59).getTime()) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000
} else {
this.listQuery.reportTime = []
}
},
//时间戳转为yy-mm-dd hh:mm:ss
timeFun(unixtimestamp) {
var unixtimestamp = new Date(unixtimestamp);
var year = 1900 + unixtimestamp.getYear();
var month = "0" + (unixtimestamp.getMonth() + 1);
var date = "0" + unixtimestamp.getDate();
return year + "-" + month.substring(month.length - 2, month.length) + "-" + date.substring(date.length - 2, date.length)
},
buttonClick(val) {
this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined;
switch (val.btnName) {
case 'search':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.getDataList();
break;
case 'export':
this.handleExport();
break;
default:
console.log(val);
}
},
/** 导出按钮操作 */
handleExport() {
// 处理查询参数
let params = { ...this.listQuery };
params.pageNo = undefined;
params.pageSize = undefined;
this.$modal.confirm('是否确认导出所有数据项?').then(() => {
this.exportLoading = true;
return this.urlOptions.exportURL(params);
}).then(response => {
this.$download.excel(response, '原片生产周报.xls');
this.exportLoading = false;
}).catch(() => { });
}
},
};
</script>
<style scoped>
/* .blueTip { */
/* padding-bottom: 10px; */
/* } */
.blueTip::before{
display: inline-block;
content: '';
width: 4px;
height: 18px;
background: #0B58FF;
border-radius: 1px;
margin-right: 8PX;
margin-top: 8px;
}
</style>

198
src/views/report/glass/weekly.vue Normal file
View File

@@ -0,0 +1,198 @@
<template>
<div class="app-container">
<!-- <search-bar
:formConfigs="formConfig"
ref="searchBarForm"
@headBtnClick="buttonClick" /> -->
<div>
<el-form
:model="listQuery"
:inline="true"
ref="dataForm"
class="blueTip">
<el-form-item label="周" prop="reportTime">
<el-date-picker
v-model="reportTime"
type="week"
size="small"
@change="changeTime"
:picker-options="{firstDayOfWeek: 1}"
:format="'yyyy 第 WW 周' + '\u3000' + startTimeStamp + '-' + endTimeStamp"
style="width: 350px"
placeholder="选择周">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button v-if="this.$auth.hasPermi('report:glass-weekly:query')" type="primary" size="small" @click="getDataList">查询</el-button>
<el-button v-if="this.$auth.hasPermi('report:glass-weekly:export')" type="primary" size="small" plain @click="handleExport">导出</el-button>
</el-form-item>
</el-form>
</div>
<inputTable :data="tableData" :time="[startTimeStamp, endTimeStamp]" :sum="all" :type="listQuery.reportType" @refreshDataList="getDataList" />
</div>
</template>
<script>
import { parseTime } from '../../core/mixins/code-filter';
import { getGlassPage, exportGlasscExcel } from '@/api/report/glass';
import inputTable from './inputTable.vue';
import { getCorePLList } from '@/api/base/coreProductionLine';
export default {
components: { inputTable },
data() {
return {
urlOptions: {
getDataListURL: getGlassPage,
exportURL: exportGlasscExcel
},
listQuery: {
pageSize: 10,
pageNo: 1,
total: 0,
reportType: 3,
reportTime: []
},
reportTime: '',
startTimeStamp: '',
endTimeStamp: '',
tableData: [],
proLineList: [],
all: {},
formConfig: [
{
type: 'datePicker',
label: '周',
dateType: 'week',
format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: 'yyyy-MM-dd HH:mm:ss',
rangeSeparator: '-',
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
width: 350,
param: 'reportTime',
},
{
type: 'button',
btnName: '查询',
name: 'search',
color: 'primary',
},
{
type: 'separate',
},
{
type: this.$auth.hasPermi('report:glass-weekly:export') ? 'button' : '',
btnName: '导出',
name: 'export',
color: 'primary',
plain: true
},
],
};
},
mounted() {
// const day = new Date().getDay()
// console.log('周四', day)
// this.changeTime(new Date(new Date().getTime() - day * 24 * 60 * 60 * 1000))
this.getDict()
},
methods: {
async getDict() {
// 产线列表
await getCorePLList().then(res => {
this.proLineList = res.data;
// this.getDataList()
});
},
// 获取数据列表
async getDataList() {
this.dataListLoading = true;
await this.urlOptions.getDataListURL(this.listQuery).then(response => {
this.tableData = response.data.filter(item => {
this.proLineList.forEach(it => {
if (item.lineId === it.id) {
item.lineName = it.name
}
})
if (item.det === false) {
this.all = {
id: item.id,
remark: item.remark
}
}
return item.det === true
});
this.listQuery.total = response.data.length;
this.dataListLoading = false;
});
},
changeTime(val) {
if(val) {
let timeStamp = val.getTime(); //标准时间转为时间戳，毫秒级别
this.startTimeStamp = this.timeFun(timeStamp - 24 * 60 * 60 * 1000); //开始时间
this.endTimeStamp = this.timeFun(timeStamp + (24 * 60 * 60 * 1000) * 5); //结束时间
console.log(this.startTimeStamp, this.endTimeStamp)
this.listQuery.reportTime[0] = parseTime(new Date(this.startTimeStamp + ' 00:00:00').getTime()) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000
this.listQuery.reportTime[1] = parseTime(new Date(this.endTimeStamp + ' 23:59:59').getTime()) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000
} else {
this.listQuery.reportTime = []
}
},
//时间戳转为yy-mm-dd hh:mm:ss
timeFun(unixtimestamp) {
var unixtimestamp = new Date(unixtimestamp);
var year = 1900 + unixtimestamp.getYear();
var month = "0" + (unixtimestamp.getMonth() + 1);
var date = "0" + unixtimestamp.getDate();
return year + "-" + month.substring(month.length - 2, month.length) + "-" + date.substring(date.length - 2, date.length)
},
buttonClick(val) {
this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined;
switch (val.btnName) {
case 'search':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.getDataList();
break;
case 'export':
this.handleExport();
break;
default:
console.log(val);
}
},
/** 导出按钮操作 */
handleExport() {
// 处理查询参数
let params = { ...this.listQuery };
params.pageNo = undefined;
params.pageSize = undefined;
this.$modal.confirm('是否确认导出所有数据项?').then(() => {
this.exportLoading = true;
return this.urlOptions.exportURL(params);
}).then(response => {
this.$download.excel(response, '原片生产周报.xls');
this.exportLoading = false;
}).catch(() => { });
}
},
};
</script>
<style scoped>
/* .blueTip { */
/* padding-bottom: 10px; */
/* } */
.blueTip::before{
display: inline-block;
content: '';
width: 4px;
height: 18px;
background: #0B58FF;
border-radius: 1px;
margin-right: 8PX;
margin-top: 8px;
}
</style>

158
src/views/report/glass/year.vue Normal file
View File

@@ -0,0 +1,158 @@
<template>
<div class="app-container">
<div>
<el-form
:model="listQuery"
:inline="true"
ref="dataForm"
class="blueTip">
<el-form-item label="年" prop="reportTime">
<el-date-picker
v-model="reportTime"
type="year"
size="small"
@change="changeTime"
:picker-options="{firstDayOfWeek: 1}"
:format="'yyyy 年' + '\u3000' + startTimeStamp + '-' + endTimeStamp"
style="width: 350px"
placeholder="选择年">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button v-if="this.$auth.hasPermi('report:glass-year:query')" type="primary" size="small" @click="getDataList">查询</el-button>
<el-button v-if="this.$auth.hasPermi('report:glass-year:export')" type="primary" size="small" plain @click="handleExport">导出</el-button>
</el-form-item>
</el-form>
</div>
<inputTable :data="tableData" :time="[startTimeStamp, endTimeStamp]" :sum="all" :type="listQuery.reportType" @refreshDataList="getDataList" />
</div>
</template>
<script>
import { parseTime } from '../../core/mixins/code-filter';
import { getGlassPage, exportGlasscExcel } from '@/api/report/glass';
import inputTable from './inputTable.vue';
import { getCorePLList } from '@/api/base/coreProductionLine';
export default {
components: { inputTable },
data() {
return {
urlOptions: {
getDataListURL: getGlassPage,
exportURL: exportGlasscExcel
},
listQuery: {
pageSize: 10,
pageNo: 1,
total: 0,
reportType: 5,
reportTime: []
},
reportTime: '',
startTimeStamp: '',
endTimeStamp: '',
tableData: [],
proLineList: [],
all: {},
};
},
created() {
this.getDict()
},
methods: {
async getDict() {
// 产线列表
const res = await getCorePLList();
this.proLineList = res.data;
},
// 获取数据列表
async getDataList() {
this.dataListLoading = true;
await this.urlOptions.getDataListURL(this.listQuery).then(response => {
this.tableData = response.data.filter(item => {
this.proLineList.forEach(it => {
if (item.lineId === it.id) {
item.lineName = it.name
}
})
if (item.det === false) {
this.all = {
id: item.id,
remark: item.remark
}
}
return item.det === true
});
this.listQuery.total = response.data.length;
this.dataListLoading = false;
});
},
changeTime(val) {
if(val) {
// let timeStamp = val.getTime(); //标准时间转为时间戳，毫秒级别
this.startTimeStamp = this.timeFun(new Date(val.getFullYear(), 0, 1).getTime()); //开始时间
this.endTimeStamp = this.timeFun(new Date(val.getFullYear(), 11, 31, 23, 59, 59).getTime()); //结束时间
this.listQuery.reportTime[0] = parseTime(new Date(val.getFullYear(), 0, 1).getTime()) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000
this.listQuery.reportTime[1] = parseTime(new Date(val.getFullYear(), 11, 31, 23, 59, 59).getTime()) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000
} else {
this.listQuery.reportTime = []
}
},
//时间戳转为yy-mm-dd hh:mm:ss
timeFun(unixtimestamp) {
var unixtimestamp = new Date(unixtimestamp);
var year = 1900 + unixtimestamp.getYear();
var month = "0" + (unixtimestamp.getMonth() + 1);
var date = "0" + unixtimestamp.getDate();
return year + "-" + month.substring(month.length - 2, month.length) + "-" + date.substring(date.length - 2, date.length)
},
buttonClick(val) {
this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined;
switch (val.btnName) {
case 'search':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.getDataList();
break;
case 'export':
this.handleExport();
break;
default:
console.log(val);
}
},
/** 导出按钮操作 */
handleExport() {
// 处理查询参数
let params = { ...this.listQuery };
params.pageNo = undefined;
params.pageSize = undefined;
this.$modal.confirm('是否确认导出所有数据项?').then(() => {
this.exportLoading = true;
return this.urlOptions.exportURL(params);
}).then(response => {
this.$download.excel(response, '原片生产周报.xls');
this.exportLoading = false;
}).catch(() => { });
}
},
};
</script>
<style scoped>
/* .blueTip { */
/* padding-bottom: 10px; */
/* } */
.blueTip::before{
display: inline-block;
content: '';
width: 4px;
height: 18px;
background: #0B58FF;
border-radius: 1px;
margin-right: 8PX;
margin-top: 8px;
}
</style>