yudao-dev/src/views/report/glass/weekly.vue

<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 :date="date" :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: []
      },
      date: '许昌安彩周原片生产汇总',
			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.getCurrentWeekStartTimeAndEndTime()
		// this.changeTime(new Date(new Date().getTime() - day * 24 * 60 * 60 * 1000))
    this.getDict()
    this.getDataList()
	},
	methods: {
		async getDict() {
			// 产线列表
			await getCorePLList().then(res => {
				this.proLineList = res.data;
				// this.getDataList()
			});
    },
    getCurrentWeekStartTimeAndEndTime() {
      this.reportTime = new Date()
      this.changeTime(this.reportTime)
    },
		// 获取数据列表
    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
              item.originalGlassStatisticsTrend = item.originalGlassStatisticsTrend ? this.multipliedByHundred(item.originalGlassStatisticsTrend) + '%' : null
              item.actualProductTrend = item.actualProductTrend ? this.multipliedByHundred(item.actualProductTrend) + '%' : null
              item.originalGlassPassTrend = item.originalGlassPassTrend ? this.multipliedByHundred(item.originalGlassPassTrend) * 100 + '%' : null
						}
					})
					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) {
      console.log(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>