|
|
@@ -1,7 +1,6 @@
|
|
|
<template>
|
|
|
<div class="ele-body">
|
|
|
<el-card shadow="never">
|
|
|
- <!-- 查询条件区域 -->
|
|
|
<div class="search-bar">
|
|
|
<el-form inline :model="queryForm" size="small">
|
|
|
<el-form-item label="场站">
|
|
|
@@ -9,6 +8,7 @@
|
|
|
v-model="queryForm.stationId"
|
|
|
placeholder="请选择场站"
|
|
|
style="width: 200px"
|
|
|
+ @change="handleSearch"
|
|
|
>
|
|
|
<el-option
|
|
|
v-for="item in stationList"
|
|
|
@@ -20,7 +20,7 @@
|
|
|
</el-form-item>
|
|
|
<el-form-item label="查询维度">
|
|
|
<el-select
|
|
|
- v-model="queryForm.dimension"
|
|
|
+ v-model="queryForm.queryDimension"
|
|
|
placeholder="请选择"
|
|
|
style="width: 140px"
|
|
|
@change="handleDimensionChange"
|
|
|
@@ -33,21 +33,23 @@
|
|
|
</el-form-item>
|
|
|
|
|
|
<!-- 按日统计 -->
|
|
|
- <el-form-item v-if="queryForm.dimension === 1" label="查询日期">
|
|
|
+ <el-form-item v-if="queryForm.queryDimension === 1" label="查询日期">
|
|
|
<el-date-picker
|
|
|
v-model="queryForm.date"
|
|
|
type="date"
|
|
|
placeholder="选择日期"
|
|
|
+ @change="handleSearch"
|
|
|
value-format="yyyy-MM-dd"
|
|
|
style="width: 140px"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
|
|
|
<!-- 按月统计 -->
|
|
|
- <el-form-item v-if="queryForm.dimension === 2" label="查询月份">
|
|
|
+ <el-form-item v-if="queryForm.queryDimension === 2" label="查询月份">
|
|
|
<el-date-picker
|
|
|
v-model="queryForm.month"
|
|
|
type="month"
|
|
|
+ @change="handleSearch"
|
|
|
placeholder="选择月份"
|
|
|
value-format="yyyy-MM"
|
|
|
style="width: 140px"
|
|
|
@@ -55,10 +57,11 @@
|
|
|
</el-form-item>
|
|
|
|
|
|
<!-- 按年统计 -->
|
|
|
- <el-form-item v-if="queryForm.dimension === 3" label="查询年份">
|
|
|
+ <el-form-item v-if="queryForm.queryDimension === 3" label="查询年份">
|
|
|
<el-date-picker
|
|
|
v-model="queryForm.year"
|
|
|
type="year"
|
|
|
+ @change="handleSearch"
|
|
|
placeholder="选择年份"
|
|
|
value-format="yyyy"
|
|
|
style="width: 140px"
|
|
|
@@ -66,14 +69,28 @@
|
|
|
</el-form-item>
|
|
|
|
|
|
<!-- 按年度统计 -->
|
|
|
- <el-form-item v-if="queryForm.dimension === 4" label="年份范围">
|
|
|
+ <el-form-item v-if="queryForm.queryDimension === 4" label="年份范围">
|
|
|
<el-date-picker
|
|
|
- v-model="queryForm.yearRange"
|
|
|
+ v-model="queryForm.queryYearStart"
|
|
|
+ @change="handleSearch"
|
|
|
type="year"
|
|
|
- placeholder="选择年份"
|
|
|
+ format="yyyy"
|
|
|
value-format="yyyy"
|
|
|
+ placeholder="选择"
|
|
|
style="width: 140px"
|
|
|
- />
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ 至
|
|
|
+ <el-date-picker
|
|
|
+ v-model="queryForm.queryYearEnd"
|
|
|
+ @change="handleSearch"
|
|
|
+ type="year"
|
|
|
+ format="yyyy"
|
|
|
+ value-format="yyyy"
|
|
|
+ placeholder="选择"
|
|
|
+ style="width: 140px"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item>
|
|
|
@@ -89,10 +106,11 @@
|
|
|
row-key="id"
|
|
|
:columns="columns"
|
|
|
:datasource="datasource"
|
|
|
- :show-pagination="false"
|
|
|
+ :needPage="false"
|
|
|
+ :initLoad="false"
|
|
|
@columns-change="handleColumnChange"
|
|
|
+ height="calc(100vh - 300px)"
|
|
|
:cache-key="cacheKeyUrl"
|
|
|
- auto-amend-page
|
|
|
/>
|
|
|
</el-card>
|
|
|
</div>
|
|
|
@@ -102,13 +120,20 @@
|
|
|
import { getFactoryarea } from '@/api/factoryModel/index';
|
|
|
import dayjs from 'dayjs';
|
|
|
import tableColumnsMixin from '@/mixins/tableColumnsMixin';
|
|
|
-
|
|
|
+ import { productionRecord } from '@/api/recordRules/index';
|
|
|
+ const planTypeList = {
|
|
|
+ productionRecordStatistics: 2,
|
|
|
+ injectionInspectionStatistics: 3,
|
|
|
+ solidWasteRecordStatistics: 4,
|
|
|
+ qualityInspectionStatistics: 5,
|
|
|
+ boilerOperationStatistics: 6
|
|
|
+ };
|
|
|
export default {
|
|
|
mixins: [tableColumnsMixin],
|
|
|
props: {
|
|
|
pageName: {
|
|
|
type: String,
|
|
|
- default: 'productionRecords'
|
|
|
+ default: 'productionRecordStatistics'
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
|
@@ -116,25 +141,15 @@
|
|
|
cacheKeyUrl: `pcs-${this.pageName}-collectionList`,
|
|
|
stationList: [],
|
|
|
queryForm: {
|
|
|
- dimension: 1,
|
|
|
+ queryDimension: 1,
|
|
|
date: '',
|
|
|
month: '',
|
|
|
year: '',
|
|
|
- yearRange: '',
|
|
|
+ queryYearEnd: '',
|
|
|
+ queryYearStart: '',
|
|
|
stationId: ''
|
|
|
},
|
|
|
- columns: [
|
|
|
- {
|
|
|
- columnKey: 'index',
|
|
|
- label: '序号',
|
|
|
- type: 'index',
|
|
|
- width: 55,
|
|
|
- align: 'center',
|
|
|
- showOverflowTooltip: true,
|
|
|
- fixed: 'left'
|
|
|
- }
|
|
|
- // 表头由用户自行编写
|
|
|
- ]
|
|
|
+ columns: []
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
@@ -148,7 +163,8 @@
|
|
|
this.queryForm.date = now.format('YYYY-MM-DD');
|
|
|
this.queryForm.month = now.format('YYYY-MM');
|
|
|
this.queryForm.year = now.format('YYYY');
|
|
|
- this.queryForm.yearRange = now.format('YYYY');
|
|
|
+ this.queryForm.queryYearStart = now.format('YYYY');
|
|
|
+ this.queryForm.queryYearEnd = now.format('YYYY');
|
|
|
},
|
|
|
|
|
|
// 获取场站列表
|
|
|
@@ -169,25 +185,57 @@
|
|
|
// 默认选中第一个
|
|
|
if (list.length > 0) {
|
|
|
this.queryForm.stationId = list[0].value;
|
|
|
+ this.handleSearch();
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
|
|
|
+ // // 年份范围变化时验证
|
|
|
+ // handleYearRangeChange() {
|
|
|
+ // if (
|
|
|
+ // this.queryForm.queryYearStart &&
|
|
|
+ // this.queryForm.queryYearEnd
|
|
|
+ // ) {
|
|
|
+ // this.validateYearRange();
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+
|
|
|
// 查询维度切换
|
|
|
handleDimensionChange() {
|
|
|
this.initDefaultValues();
|
|
|
+ this.$refs.table.reload({
|
|
|
+ where: this.buildQueryParams()
|
|
|
+ });
|
|
|
},
|
|
|
|
|
|
// 查询
|
|
|
handleSearch() {
|
|
|
+ // 验证年份范围
|
|
|
+ if (this.queryForm.queryDimension === 4) {
|
|
|
+ if (!this.validateYearRange()) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
this.$refs.table.reload({
|
|
|
where: this.buildQueryParams()
|
|
|
});
|
|
|
},
|
|
|
|
|
|
+ // 验证年份范围
|
|
|
+ validateYearRange() {
|
|
|
+ const start = parseInt(this.queryForm.queryYearStart);
|
|
|
+ const end = parseInt(this.queryForm.queryYearEnd);
|
|
|
+ if (start > end) {
|
|
|
+ this.$message.error('开始年份不能大于结束年份');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ },
|
|
|
+
|
|
|
// 重置
|
|
|
handleReset() {
|
|
|
this.initDefaultValues();
|
|
|
+ this.queryForm.queryDimension = 1;
|
|
|
if (this.stationList.length > 0) {
|
|
|
this.queryForm.stationId = this.stationList[0].value;
|
|
|
}
|
|
|
@@ -199,22 +247,23 @@
|
|
|
// 构建查询参数
|
|
|
buildQueryParams() {
|
|
|
const params = {
|
|
|
- dimension: this.queryForm.dimension,
|
|
|
+ queryDimension: this.queryForm.queryDimension,
|
|
|
stationId: this.queryForm.stationId
|
|
|
};
|
|
|
|
|
|
- switch (this.queryForm.dimension) {
|
|
|
+ switch (this.queryForm.queryDimension) {
|
|
|
case 1:
|
|
|
- params.date = this.queryForm.date;
|
|
|
+ params.queryDate = this.queryForm.date;
|
|
|
break;
|
|
|
case 2:
|
|
|
- params.month = this.queryForm.month;
|
|
|
+ params.queryMonth = this.queryForm.month;
|
|
|
break;
|
|
|
case 3:
|
|
|
- params.year = this.queryForm.year;
|
|
|
+ params.queryYear = this.queryForm.year;
|
|
|
break;
|
|
|
case 4:
|
|
|
- params.yearRange = this.queryForm.yearRange;
|
|
|
+ params.queryYearEnd = this.queryForm.queryYearEnd;
|
|
|
+ params.queryYearStart = this.queryForm.queryYearStart;
|
|
|
break;
|
|
|
}
|
|
|
|
|
|
@@ -222,28 +271,43 @@
|
|
|
},
|
|
|
|
|
|
// 表格数据源
|
|
|
- datasource({ page, limit, where, order }) {
|
|
|
+ async datasource({ page, limit, where, order }) {
|
|
|
const body = {
|
|
|
...where,
|
|
|
...order,
|
|
|
pageNum: page,
|
|
|
- size: limit
|
|
|
+ size: limit,
|
|
|
+ planType: planTypeList[this.pageName]
|
|
|
};
|
|
|
- // TODO: 调用实际接口
|
|
|
- console.log('查询参数:', body);
|
|
|
- return Promise.resolve({
|
|
|
- code: 0,
|
|
|
- msg: '',
|
|
|
- count: 0,
|
|
|
- data: []
|
|
|
+ const res = await productionRecord(body);
|
|
|
+ this.columns = [
|
|
|
+ {
|
|
|
+ columnKey: 'index',
|
|
|
+ label: '序号',
|
|
|
+ type: 'index',
|
|
|
+ width: 55,
|
|
|
+ align: 'center',
|
|
|
+ showOverflowTooltip: true,
|
|
|
+ fixed: 'left'
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ res.headers.forEach((element) => {
|
|
|
+ this.columns.push({
|
|
|
+ prop: element.field,
|
|
|
+ label: element.title,
|
|
|
+ align: 'center',
|
|
|
+ showOverflowTooltip: true,
|
|
|
+ minWidth: 120
|
|
|
+ });
|
|
|
});
|
|
|
+ return res.rows.map((item) => item.data) || [];
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
+<style lang="scss" scoped>
|
|
|
.search-bar {
|
|
|
- margin-bottom: 15px;
|
|
|
+ padding: 15px;
|
|
|
}
|
|
|
</style>
|