factory_web/src/views/statistics/user_statistics.vue

<template>
	<el-container>
		<el-header>
			<div class="right-panel">
				<el-select
					v-model="queryBelongDept"
					clearable
					style="width: 200px"
					placeholder="请选择部门"
				>
					<el-option
						v-for="item in deptData"
						:key="item.id"
						:label="item.name"
						:value="item.name"
					>
					</el-option>
				</el-select>
				<el-date-picker
					v-model="queryDate"
					type="month"
					placeholder="查询月期"
					value-format="YYYY-MM"
					style="width: 200px"
				>
				</el-date-picker>
				<el-button
					type="primary"
					icon="el-icon-search"
					@click="handleQuery"
				></el-button>
			</div>
		</el-header>
		<el-main id="elMain">
			<el-row :gutter="15" style="height: 100%">
				<el-col :lg="12">
					<el-card shadow="never">
						<scEcharts
							:height="chartHeight"
							:option="option"
							id="chartHeight"
						></scEcharts>
					</el-card>
				</el-col>
				<el-col :lg="12">
					<el-card shadow="never" style="position: relative">
						<el-button
							@click="handleExport"
							class="tables"
							type="primary"
							>导出</el-button
						>
						<el-table
							:data="tableData"
							id="exportDiv"
							style="width: 100%"
							:height="chartHeight"
						>
							<el-table-column type="index" width="50" />
							<el-table-column label="日期" prop="date">
								<template #default="scope">
									{{ scope.row.年 }}-{{ scope.row.月 }}
								</template>
							</el-table-column>
							<el-table-column label="操作人" prop="操作人">
							</el-table-column>
							<el-table-column label="工段" prop="工段">
							</el-table-column>
							<el-table-column label="车间">
								{{ queryBelongDept }}
							</el-table-column>
							<el-table-column label="生产数" prop="生产数">
							</el-table-column>
							<el-table-column label="合格数" prop="合格数">
							</el-table-column>
							<el-table-column label="不合格数" prop="不合格数">
							</el-table-column>
							<el-table-column label="合格率" prop="合格率">
								<template #default="scope">
									{{ Math.round(scope.row.合格率) }}%
								</template>
							</el-table-column>
						</el-table>
					</el-card>
				</el-col>
			</el-row>
		</el-main>
	</el-container>
</template>

<script>
import scEcharts from "@/components/scEcharts";
export default {
	name: "chart",
	components: {
		scEcharts,
	},
	data() {
		return {
			queryBelongDept: "",
			queryDate: "",
			start_date: "",
			end_date: "",
			currentYear: "",
			currentMonth: "",
			deptData: [],
			tableData: [],
			option: {
				title: {
					text: "人员统计",
					// subtext: '',
				},
				grid: {
					top: "80px",
				},
				tooltip: {
					trigger: "axis",
				},
				xAxis: {
					type: "value",
					position: "top",
					axisLine: {
						show: true,
					},
				},
				yAxis: {
					type: "category",
					data: [],
				},
				series: {
					data: [],
					type: "bar",
					barWidth: "15px",
				},
			},
			chartHeight: 0,
		};
	},
	mounted() {
		let date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let days = new Date(year, month, 0).getDate();
		this.currentYear = year;
		this.currentMonth = month;
		this.start_date = year + "-" + month + "-01";
		this.end_date =
			year + "-" + month + "-" + new Date(year, month, 0).getDate();
		this.queryDate = year + "-" + month;
		this.getData();
		this.getDept();
		let mainHeight = document.getElementById("elMain").clientHeight;
		this.chartHeight = mainHeight - 40 + "px";
	},
	methods: {
		getDept() {
			this.$API.system.dept.list
				.req({ page: 0, type: "dept" })
				.then((res) => {
					this.deptData = res;
					this.queryBelongDept = res[0].name;
				});
		},
		queryTypeChange(value) {
			this.queryDate = "";
		},
		getData() {
			let that = this;
			let obj = {
				query: {
					start_date: this.start_date,
					end_date: this.end_date,
					dept_name: this.queryBelongDept,
				},
			};
			that.$API.bi.dataset.exec.req("performance", obj).then((res) => {
				console.log("绩效统计:", res);
				let data = res.data2.ds0;
				let seriesData = [],
					yAxisData = [];
				data.forEach((item) => {
					seriesData.push(item.合格数);
					yAxisData.push(item.操作人 + "∙" + item.工段);
				});
				console.log(yAxisData);
				console.log(seriesData);
				console.log(data);
				that.tableData = data;
				that.option.yAxis.data = yAxisData;
				that.option.series.data = seriesData;
			});
		},
		handleQuery() {
			if (this.queryDate !== "") {
				this.start_date = this.queryDate + "-01";
				let arr = this.queryDate.split("-");
				this.end_date =
					this.queryDate +
					"-" +
					new Date(arr[0], arr[1], 0).getDate();
			} else {
				this.start_date =
					this.currentYear + "-" + this.currentMonth + "-01";
				this.end_date =
					this.currentYear +
					"-" +
					this.currentMonth +
					"-" +
					new Date(this.currentYear, this.currentMonth, 0).getDate();
			}
			console.log("查询query", this.start_date, this.end_date);
			this.getData();
		},
		handleExport() {
			this.exportLoading = true;
			this.$XLSX("#exportDiv", "人员统计");
			this.exportLoading = false;
		},
	},
};
</script>

<style scoped>
.tables {
	position: absolute;
	top: 4px;
	left: 4px;
	z-index: 10;
}
</style>