jsy-app/pages/retrace/report.vue

<template>
	<view class="slot-content">
		<custom-nav-bar :left="true" title="生产日报表">
			<template v-slot:right>
				<view @click="$refs.landRef.open()">地块</view>
			</template>
		</custom-nav-bar>
		<view class="example-body">
			<uni-forms ref="baseForm">
				<uni-forms-item label="日期">
					<uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick" />
				</uni-forms-item>
				<uni-forms-item label="手持机">
					<uni-data-select v-model="queryParams.devicePdaId" :localdata="devicePdaList" @change="change"
						:placeholder="laceholder" :clear="true"></uni-data-select>
				</uni-forms-item>
			</uni-forms>
		</view>
	</view>
	<view class="container">
		<!-- 固定的第一列 -->
		<view class="fixed-column">
			<view v-for="(row, index) in dataList" :key="index" class="cell">{{ row.fixed }}</view>
		</view>
		<!-- 可滚动的其余列 -->
		<scroll-view class="scrollable-columns" scroll-x :scroll-left="scrollLeft">
			<view class="table-row" v-for="(row, rowIndex) in dataList" :key="rowIndex">
				<view v-for="(col, colIndex) in row.cols" :key="colIndex" class="cell2">{{ col }}</view>
			</view>
		</scroll-view>
	</view>
	<custom-select-land ref="landRef" :data="ijs.companys" :defaultSelect="ijs.land" @getLand="getLand"
		@select="landChange" />
</template>
<script>
	import {
		checkPermi
	} from "@/utils/permission"
	import {
		getInstallationDailyReport
	} from "@/api/system/deviceBillMaintenance";
	import {
		getPdaDeviceListByUserId
	} from "@/api/system/deviceUserPermission";
	
	export default {
		data() {
			return {
				ijs: getApp().ijs, // 首页公共js
				queryParams: {
					landId: null,
					beginTime: null,
					endTime: null,
					devicePdaId: null
				},
				range: [],
				dataList: [],
				devicePdaList: [],
				laceholder: "请选择",
				scrollHeight: 0,
				scrollLeft: 0,
				columnWidths: [], // 存储每列的宽度
				totalColumnWidth: 0 // 所有列的总宽度
			};
		},
		onLoad() {
			this.range.push(this.getNowFormatDate())
			this.range.push(this.getNowFormatDate())
			this.getPdaDeviceList();
		},
		onShow() {
			if (this.ijs.land) {
				if (this.range && this.range.length) {
					this.queryParams.beginTime = this.range[0];
					this.queryParams.endTime = this.range[1];
				}
				this.queryParams.landId = this.ijs.land.id;
				this.queryList();
			}
		},
		watch: {
			range(newval) {
				if (newval && newval.length) {
					this.queryParams.beginTime = newval[0];
					this.queryParams.endTime = newval[1];
				}
				this.queryList();
			}
		},
		methods: {
			queryList() {
				this.dataList = [];
				getInstallationDailyReport(this.queryParams)
					.then(res => {
						if (res && res.data && res.data.length) {
							let row = {};
							row.fixed = "设备类型";
							let titleArr = [];
							res.data.map(item => {
								for (let key in item) {
									if (key != "device_type_id" && key != "device_type_name" && titleArr
										.indexOf(key) == -
										1) {
										titleArr.push(key);
									}
								}
							})
							titleArr.sort();
							row.cols = titleArr;
							this.dataList.push(row);
							res.data.map(item => {
								let row = {};
								row.fixed = item.device_type_name;
								row.cols = [];
								row.cols = [];
								titleArr.forEach(col => {
									row.cols.push(item[col])
								})
								this.dataList.push(row);
							})
						}
					})
			},
			maskClick(e) {},
			// 获取地块信息
			getLand(e) {
				this.ijs.getLand(e.node).then(res => {
					this.$refs.landRef.addLand(e, res.rows);
				});
			},
			getPdaDeviceList(){
				getPdaDeviceListByUserId().then(res => {
				this.devicePdaList=res.data.map(
						item => {
							return {
								value: item.id,
								text: item.deviceCode
							}
						});
				});
			},
			// 地块选择回调
			landChange(e) {
				this.queryParams.landId = e.id;
				this.queryList();
			},
			change(e) {
				if(!e){
					this.queryParams.devicePdaId = null;
				}
				this.queryList();
			},
			getNowFormatDate() {
				let date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let d = date.getDate();
				if (month < 10) {
					month = "0" + month;
				}
				if (d < 10) {
					d = "0" + d;
				}
				return year + "-" + month + "-" + d;
			}
		}
	};
</script>

<style scoped>
	.container {
		display: flex;
		overflow: hidden;
	}

	.selected-date-range {
		margin-bottom: 10px;
		font-size: 16px;
	}

	.fixed-column {
		width: 150px;
		/* 固定列的宽度 */
		background-color: #f9f9f9;
		border-right: 1px solid #ddd;
		display: flex;
		flex-direction: column;
	}

	.scrollable-columns {
		flex-grow: 1;
		white-space: nowrap;
		/* 确保内容不会换行 */
		min-width: 300px;
		/* 或者根据实际情况调整 */
		overflow-x: visible !important;
	}

	.table-row {
		display: flex;
		flex-direction: row;
	}

	.cell2 {
		height: 30px;
		padding: 8px;
		border-bottom: 1px solid #ddd;
		min-width: 150px;
		/* 每个单元格的最小宽度 */
		text-align: center;
		overflow: visible;
	}

	.cell {
		height: 30px;
		padding: 8px;
		border-bottom: 1px solid #ddd;
		min-width: 150px;
		/* 每个单元格的最小宽度 */
		text-align: center;
		overflow: visible;
	}
</style>