554 lines
19 KiB
Vue
554 lines
19 KiB
Vue
<!--
|
||
* @Author: zhp
|
||
* @Date: 2024-04-15 10:49:13
|
||
* @LastEditTime: 2024-07-24 14:48:25
|
||
* @LastEditors: DY
|
||
* @Description:
|
||
-->
|
||
<template>
|
||
<div style="display: flex; flex-direction: column; min-height: calc(100vh - 200px - 31px)">
|
||
<div class="app-container" style="padding: 16px 24px 0; height: auto; flex-grow: 1;">
|
||
<el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
|
||
<el-form-item label="时间维度" prop="type">
|
||
<el-select @change="changType" v-model="listQuery.type" size="small" clearable placeholder="请选择">
|
||
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item v-show="listQuery.type === 0 || listQuery.type === ''" label="时间范围" prop="reportTime">
|
||
<el-date-picker size="small" clearable v-model="listQuery.reportTime" type="daterange" range-separator="至"
|
||
start-placeholder="开始日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" @change="changeDayTime" end-placeholder="结束日期" :picker-options="{ firstDayOfWeek: 1 }">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item v-show="listQuery.type === 1" label="时间范围" prop="reportTime">
|
||
<el-date-picker size="small" clearable v-model="listQuery.start" type="week" format="yyyy-MM-dd" placeholder="选择周" :picker-options="{ firstDayOfWeek: 1 }"
|
||
style="width: 180px" @change="onValueChange">
|
||
</el-date-picker>
|
||
至
|
||
<el-date-picker size="small" clearable v-model="listQuery.end" type="week" format="yyyy-MM-dd" placeholder="选择周" :picker-options="{ firstDayOfWeek: 1 }"
|
||
style="width: 180px" @change="onValueChange">
|
||
</el-date-picker>
|
||
<!-- <span v-if="listQuery.start && listQuery.end" style="margin-left: 10px">
|
||
{{ date1 }} 至 {{ date2 }}，共 {{ weekNum }} 周
|
||
</span> -->
|
||
</el-form-item>
|
||
<el-form-item v-show="listQuery.type === 2" label="时间范围" prop="reportTime">
|
||
<el-date-picker size="small" clearable v-model="listQuery.reportTime" type="monthrange" value-format="yyyy-MM-dd" range-separator="至"
|
||
start-placeholder="开始月份" end-placeholder="结束月份" @change="changeTime">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item v-show="listQuery.type === 3" label="时间范围" prop="reportTime">
|
||
<el-date-picker size="small" clearable v-model="listQuery.start" value-format="yyyy-MM-dd" type="year"
|
||
placeholder="开始时间" @change="getYear">
|
||
</el-date-picker>
|
||
~
|
||
<el-date-picker size="small" clearable v-model="listQuery.end" value-format="yyyy-MM-dd" type="year" placeholder="结束时间"
|
||
@change="getYear">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="工厂名称" prop="factory">
|
||
<el-select size="small" clearable v-model="listQuery.factory" placeholder="请选择工厂名称" multiple >
|
||
<el-option v-for="item in factoryArray" :key="item.id" :label="item.name" :value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<!-- <el-form-item label="玻璃类型" prop="type">
|
||
<el-select v-model="listQuery.type" placeholder="请选择玻璃类型">
|
||
<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item> -->
|
||
<el-form-item label="玻璃类型" prop="glass">
|
||
<el-select size="small" clearable v-model="listQuery.glass" multiple placeholder="请选择玻璃类型">
|
||
<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" size="small" @click="getDataList">查询</el-button>
|
||
<el-button type="primary" size="small" plain @click="handleExport">导出</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<div class="app-container" style="margin-top: 8px;padding: 16px; height: auto; flex-grow: 1;">
|
||
<!-- <el-row :gutter="24"> -->
|
||
<!-- <el-col :span="12" v-for="item in dataList" :key="item.id"> -->
|
||
<search-bar :formConfigs="formConfig1" ref="searchBarForm1" style="margin-bottom: 0" />
|
||
<line-chart ref="lineChart" class="yearChart" style="height: 45vh;width: 100%"></line-chart>
|
||
<!-- </el-col> -->
|
||
<!-- <el-col :span="12">
|
||
<line-chart :id=" 'second' " class="yearChart" ref="lineChart" style="height: 40vh;width: 100%"></line-chart>
|
||
</el-col> -->
|
||
</div>
|
||
<div class="app-container" style="margin-top: 8px;flex-grow: 1; height: auto; padding: 16px;">
|
||
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" style="margin-bottom: 0" />
|
||
<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"
|
||
/>
|
||
</div>
|
||
<add-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" @refreshDataList="successSubmit" @destroy="detailOrUpdateVisible = false" />
|
||
<!-- <inputTable :date="date" :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 "@/utils/ruoyi";
|
||
import tableHeightMixin from "@/mixins/tableHeightMixin";
|
||
import { getProduceDataPage, getproddata, exportOutPutExcel } from '@/api/produceData';
|
||
// import inputTable from './inputTable.vue';
|
||
import lineChart from './lineChart';
|
||
import moment from 'moment'
|
||
import ButtonNav from '@/components/ButtonNav'
|
||
import basicPage from '@/mixins/basic-page'
|
||
import AddOrUpdate from './add-or-updata'
|
||
import { factoryList, factoryArray, factoryListabbr } from "@/utils/constants";
|
||
|
||
export default {
|
||
components: { lineChart, ButtonNav, AddOrUpdate },
|
||
mixins: [basicPage, tableHeightMixin],
|
||
data() {
|
||
return {
|
||
factoryList,
|
||
factoryArray,
|
||
factoryListabbr,
|
||
listQuery: {
|
||
pageSize: 20,
|
||
pageNo: 1,
|
||
factory: undefined,
|
||
total: 0,
|
||
type: 0, // 时间维度
|
||
glass: undefined, // 玻璃类型
|
||
// reportType: 2,
|
||
startDate: undefined,
|
||
endDate:undefined,
|
||
reportTime: null,
|
||
start: null,
|
||
end: null
|
||
},
|
||
detailOrUpdateVisible:false,
|
||
date1: undefined,
|
||
date2: undefined,
|
||
tableBtn: [
|
||
{
|
||
type: 'detail',
|
||
btnName: '详情',
|
||
},
|
||
// {
|
||
// type: 'delete',
|
||
// btnName: '删除',
|
||
// },
|
||
].filter((v) => v),
|
||
typeList: [
|
||
{
|
||
name: '玻璃芯片',
|
||
id: 0,
|
||
},
|
||
{
|
||
name: '标准组件',
|
||
id: 1,
|
||
},
|
||
{
|
||
name: 'BIPV产品',
|
||
id: 2,
|
||
},
|
||
// {
|
||
// name: '定制组件',
|
||
// id: 3,
|
||
// },
|
||
],
|
||
formConfig: [
|
||
{
|
||
type: 'title',
|
||
label: '工厂信息',
|
||
},
|
||
],
|
||
formConfig1: [
|
||
{
|
||
type: 'title',
|
||
label: '良品数量',
|
||
},
|
||
],
|
||
timeList: [
|
||
{
|
||
value: 0,
|
||
label: '日'
|
||
},
|
||
{
|
||
value: 1,
|
||
label: '周'
|
||
},
|
||
{
|
||
value: 2,
|
||
label:'月'
|
||
},
|
||
{
|
||
value: 3,
|
||
label: '年'
|
||
}
|
||
],
|
||
tableProps: [
|
||
{
|
||
prop: 'datestr',
|
||
label: '日期',
|
||
minWidth: 120,
|
||
showOverflowtooltip: true
|
||
},
|
||
{
|
||
prop: 'factory',
|
||
label: '工厂名称',
|
||
filter: (val) => factoryList[val],
|
||
minWidth: 180,
|
||
showOverflowtooltip: true
|
||
},
|
||
{
|
||
prop: 'glassType',
|
||
label: '玻璃类型',
|
||
filter: (val) => ['玻璃芯片', '标准组件', 'BIPV', '定制组件'][val]
|
||
},
|
||
{
|
||
prop: 'inputNum',
|
||
label: '投入数量',
|
||
},
|
||
{
|
||
prop: 'outputNum',
|
||
label: '产出数量',
|
||
},
|
||
{
|
||
prop: 'goodNum',
|
||
label: '良品数量',
|
||
},
|
||
{
|
||
prop: 'goodRatio',
|
||
label: '良品率%',
|
||
filter: (val) => val.toFixed(2) + '%'
|
||
},
|
||
],
|
||
tableData: [],
|
||
lineData: [],
|
||
chart: null,
|
||
seriesList: [],
|
||
colorList: ['#7164FF', '#63BDFF', '#8EF0AB', '#FFCE6A']
|
||
// proLineList: [],
|
||
// all: {}
|
||
};
|
||
},
|
||
// computed: {
|
||
// weekNum() {
|
||
// return Math.round((this.listQuery.end - this.listQuery.start) / (24 * 60 * 60 * 1000 * 7)) + 1
|
||
// },
|
||
// },
|
||
created() {
|
||
const today = new Date()
|
||
const sevenDaysAgo = new Date(today.getTime() - (6 * 24 * 60 * 60 * 1000))
|
||
this.listQuery.startDate = moment(sevenDaysAgo).format('yyyy-MM-DD')
|
||
this.listQuery.endDate = moment(today).format('yyyy-MM-DD')
|
||
this.listQuery.reportTime = [this.listQuery.startDate, this.listQuery.endDate]
|
||
},
|
||
mounted() {
|
||
},
|
||
methods: {
|
||
changType() {
|
||
this.listQuery.endDate = null
|
||
this.listQuery.startDate = null
|
||
this.listQuery.reportTime = null
|
||
this.listQuery.start = null
|
||
this.listQuery.end = null
|
||
},
|
||
otherMethods(val) {
|
||
this.detailOrUpdateVisible = true;
|
||
this.addOrEditTitle = "详情";
|
||
this.$nextTick(() => {
|
||
this.$refs.detailOrUpdate.init(val.data.id, this.listQuery.type, val.data.glassType);
|
||
});
|
||
},
|
||
getYear(e) {
|
||
if (this.listQuery.end - this.listQuery.start > 10*365*24*60*60*1000) {
|
||
this.$message({
|
||
message: '年份起止时间不能超过十年',
|
||
type: 'warning'
|
||
});
|
||
this.listQuery.reportTime = []
|
||
this.listQuery.start = undefined
|
||
this.listQuery.end = undefined
|
||
} else {
|
||
this.listQuery.startDate = this.listQuery.start
|
||
this.listQuery.endDate = this.listQuery.end
|
||
}
|
||
},
|
||
onValueChange(picker, k) { // 选中近k周后触发的操作
|
||
if (this.listQuery.start && this.listQuery.end) {
|
||
// console.log(this.listQuery.start, this.listQuery.end - this.listQuery.start)
|
||
this.date1 = moment(this.listQuery.start.getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
|
||
this.date2 = moment(this.listQuery.end.getTime() + 5 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
|
||
const numDays = (new Date(this.date2).getTime() - new Date(this.date1).getTime()) / (24 * 3600 * 1000);
|
||
if (numDays > 168) {
|
||
console.log(numDays)
|
||
this.$message({
|
||
message: '周范围不能超过24周',
|
||
type: 'warning'
|
||
});
|
||
} else {
|
||
this.listQuery.startDate = moment(this.listQuery.start.getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD')
|
||
this.listQuery.endDate = moment(this.listQuery.end.getTime() + 5 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD')
|
||
}
|
||
console.log(this.listQuery.startDate, this.listQuery.endDate)
|
||
} else {
|
||
this.listQuery.startDate = undefined
|
||
this.listQuery.endDate = undefined
|
||
}
|
||
// if (!this.listQuery.start && !this.listQuery.end) {
|
||
// this.listQuery.startDate = undefined
|
||
// this.listQuery.endDate = undefined
|
||
// }
|
||
},
|
||
changeDayTime() {
|
||
if (this.listQuery.reportTime) {
|
||
// this.createStartDate = moment(new Date(this.listQuery.reportTime[0]), 'yyyy-MM-dd hh:mm:ss');
|
||
// this.createEndDate = moment(new Date(this.listQuery.reportTime[1]), 'yyyy-MM-dd hh:mm:ss');
|
||
console.log(this.listQuery.reportTime[1])
|
||
const numDays = (this.listQuery.reportTime[1] - this.listQuery.reportTime[0]) / (24 * 3600 * 1000);
|
||
if (numDays > 30) {
|
||
this.$message({
|
||
message: '时间范围不能超过30天',
|
||
type: 'warning'
|
||
});
|
||
this.listQuery.reportTime = [];
|
||
} else {
|
||
this.listQuery.startDate = this.listQuery.reportTime[0]
|
||
this.listQuery.endDate = this.listQuery.reportTime[1]
|
||
}
|
||
} else {
|
||
this.listQuery.startDate = undefined
|
||
this.listQuery.endDate = undefined
|
||
}
|
||
},
|
||
changeTime(value) {
|
||
if (this.listQuery.reportTime) {
|
||
const numDays = this.listQuery.reportTime[1] - this.listQuery.reportTime[0];
|
||
if (numDays > 2*365*24*60*60*1000) {
|
||
this.$message({
|
||
message: '时间范围不能超过24个月',
|
||
type: 'warning'
|
||
});
|
||
this.listQuery.reportTime = [];
|
||
} else {
|
||
this.listQuery.startDate = this.listQuery.reportTime[0]
|
||
this.listQuery.endDate = this.listQuery.reportTime[1]
|
||
}
|
||
} else {
|
||
this.listQuery.startDate = undefined
|
||
this.listQuery.endDate = undefined
|
||
}
|
||
},
|
||
async getDataList() {
|
||
if (this.listQuery.type === '') {
|
||
this.$message.warning('请选择时间维度！')
|
||
return
|
||
}
|
||
if (!this.listQuery.startDate || !this.listQuery.endDate) {
|
||
this.$message.warning('请选择时间范围！')
|
||
} else {
|
||
await getProduceDataPage(this.listQuery).then(res => {
|
||
console.log(res)
|
||
if (res.code === 0) {
|
||
this.tableData = res.data.records
|
||
this.listQuery.total = res.data.total
|
||
}
|
||
})
|
||
// 图表
|
||
await getproddata(this.listQuery).then(resp => {
|
||
if (resp.data?.length > 0) {
|
||
const chartData = Object.groupBy(resp.data, (member) => member.datestr)
|
||
this.buildChart(chartData, resp.data)
|
||
} else {
|
||
this.$refs.lineChart.initChart([], [])
|
||
}
|
||
})
|
||
}
|
||
},
|
||
buildChart(data, dataList) {
|
||
let xAxisData = []
|
||
this.seriesList = []
|
||
// x轴数据
|
||
xAxisData = Object.keys(data)
|
||
|
||
// 构造series
|
||
// 玻璃类型 ['chipYield', 'componentYield', 'bipvProductOutput']
|
||
const typeArray = (this.listQuery.glass.length === 0 || this.listQuery.glass.length === 3) ? [0, 1, 2] : this.listQuery.glass
|
||
// 工厂名称 this.factoryListabbr
|
||
const factoryNameArray = (this.listQuery.factory.length === 0 || this.listQuery.factory.length === this.factoryListabbr.length) ? [0, 1] : this.listQuery.factory
|
||
const seriesArray = []
|
||
factoryNameArray.forEach((fac, facIndex) => {
|
||
typeArray.forEach((type, typeIndex) => {
|
||
const series = {
|
||
data: Array(xAxisData.length).fill(0),
|
||
type: 'bar',
|
||
stack: String(fac),
|
||
barWidth: 16,
|
||
itemStyle: {
|
||
color: this.colorList[type]
|
||
},
|
||
name: this.factoryListabbr[fac] + '-' + type
|
||
}
|
||
seriesArray.push(series)
|
||
})
|
||
})
|
||
|
||
// 按工厂分
|
||
const arrayByFacArray = Object.groupBy(dataList, (member) => member.factory)
|
||
// const seriesDataArray = []
|
||
let n = 0
|
||
Object.values(arrayByFacArray).forEach((item) => {
|
||
typeArray.forEach(type => {
|
||
const typeName = ['chipYield', 'componentYield', 'bipvProductOutput'][type]
|
||
let seriesData = Array(xAxisData.length).fill(0)
|
||
item.forEach(it => {
|
||
xAxisData.forEach((x, xindex) => {
|
||
if (x === it['datestr']) {
|
||
seriesData[xindex] = it[typeName]
|
||
}
|
||
})
|
||
})
|
||
seriesArray[n].data = seriesData
|
||
n ++
|
||
})
|
||
})
|
||
|
||
// 添加工厂
|
||
const validSeriesArray = []
|
||
factoryNameArray.forEach(f => {
|
||
const s = {
|
||
name: '显示工厂',
|
||
data: Array(xAxisData.length).fill(0),
|
||
type: 'bar',
|
||
stack: String(f),
|
||
barWidth: 16,
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
// position: f > 0 ? [2, -16] : [-10, -16],
|
||
formatter(params) {
|
||
return factoryListabbr[f]
|
||
}
|
||
}
|
||
}
|
||
validSeriesArray.push(s)
|
||
})
|
||
this.seriesList = [...seriesArray, ...validSeriesArray]
|
||
this.$refs.lineChart.initChart(xAxisData, this.seriesList, factoryNameArray)
|
||
},
|
||
buttonClick(val) {
|
||
this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined;
|
||
switch (val.btnName) {
|
||
case 'search':
|
||
this.listQuery.pageNo = 1;
|
||
this.listQuery.pageSize = 20;
|
||
this.getDataList();
|
||
break;
|
||
case 'export':
|
||
this.handleExport();
|
||
break;
|
||
default:
|
||
console.log(val);
|
||
}
|
||
},
|
||
/** 导出按钮操作 */
|
||
handleExport() {
|
||
this.$modal.confirm('是否确认导出生产数据?').then(() => {
|
||
// 处理查询参数
|
||
let params = {...this.listQuery};
|
||
params.pageNo = 1;
|
||
params.pageSize = 999;
|
||
this.exportLoading = true;
|
||
return exportOutPutExcel(params);
|
||
}).then(response => {
|
||
this.$download.excel(response, '生产数据.xls');
|
||
this.exportLoading = false;
|
||
}).catch(() => {});
|
||
// 处理查询参数
|
||
// var xlsxParam = { raw: true };
|
||
// /* 从表生成工作簿对象 */
|
||
// import('xlsx').then(excel => {
|
||
// var wb = excel.utils.table_to_book(
|
||
// document.querySelector("#exportTable"),
|
||
// xlsxParam
|
||
// );
|
||
// /* 获取二进制字符串作为输出 */
|
||
// var wbout = excel.write(wb, {
|
||
// bookType: "xlsx",
|
||
// bookSST: true,
|
||
// type: "array",
|
||
// });
|
||
// try {
|
||
// FileSaver.saveAs(
|
||
// //Blob 对象表示一个不可变、原始数据的类文件对象。
|
||
// //Blob 表示的不一定是JavaScript原生格式的数据。
|
||
// //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
|
||
// //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
|
||
// new Blob([wbout], { type: "application/octet-stream" }),
|
||
// //设置导出文件名称
|
||
// "许昌安彩日原片生产汇总.xlsx"
|
||
// );
|
||
// } catch (e) {
|
||
// if (typeof console !== "undefined") console.log(e, wbout);
|
||
// }
|
||
// return wbout;
|
||
// //do something......
|
||
// })
|
||
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
/* .blueTip { */
|
||
/* padding-bottom: 10px; */
|
||
/* } */
|
||
/* .blueTi */
|
||
.blueTip .el-date-editor .el-range__icon {
|
||
font-size: 16px;
|
||
color: #0b58ff;
|
||
}
|
||
.blueTip .el-input__prefix .el-icon-date {
|
||
font-size: 16px;
|
||
color: #0b58ff;
|
||
}
|
||
.blueTip .el-input__prefix .el-icon-time {
|
||
font-size: 16px;
|
||
color: #0b58ff;
|
||
}
|
||
.blueTip::before{
|
||
display: inline-block;
|
||
content: '';
|
||
width: 4px;
|
||
height: 18px;
|
||
background: #0B58FF;
|
||
border-radius: 1px;
|
||
margin-right: 8PX;
|
||
margin-top: 8px;
|
||
}
|
||
.app-container {
|
||
margin: 0 0px 0;
|
||
background-color: #fff;
|
||
border-radius: 4px;
|
||
padding: 16px 16px 0;
|
||
height: calc(100vh - 134px);
|
||
overflow: auto;
|
||
}
|
||
</style>
|