hunanzeyunew/snowy-admin-web/src/views/biz/count/recordindex.vue

<template>
	<a-card>
		<a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
			<a-row :gutter="24">
				<a-col :span="6">
					<a-form-item label="日期" name="times">
						<a-range-picker
							v-model:value="searchFormState.times"
							:disabled-date="disabledDate"
							format="YYYY-MM-DD"
							@change="onChange"
							@openChange="onOpenChange"
							@calendarChange="onCalendarChange"
						/>
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="车牌号" name="licensePlate">
						<a-input v-model:value="searchFormState.licensePlate" placeholder="请输入车牌号" />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="货品" name="goodsName">
						<a-input v-model:value="searchFormState.goodsName" placeholder="请输入货品" />
					</a-form-item>
				</a-col>
<!--				<a-col :span="6" v-show="advanced">
					<a-form-item label="客户名称" name="receiptCompany">
						<a-input v-model:value="searchFormState.receiptCompany" placeholder="请输入客户名称" />
					</a-form-item>
				</a-col>-->
<!--				<a-col :span="6" v-show="advanced">
					<a-form-item label="发货单位" name="shippingCompany">
						<a-input v-model:value="searchFormState.shippingCompany" placeholder="请输入发货单位" />
					</a-form-item>
				</a-col>
				<a-col :span="6" v-show="advanced">
					<a-form-item label="运输单位" name="transportCompany">
						<a-input v-model:value="searchFormState.transportCompany" placeholder="请输入运输单位" />
					</a-form-item>
				</a-col>-->
				<a-col :span="6">
					<a-button type="primary" @click="query()">查询</a-button>
					<a-button style="margin: 0 8px" @click="reset">重置</a-button>
<!--					<a @click="toggleAdvanced" style="margin-left: 8px">
						{{ advanced ? '收起' : '展开' }}
						<component :is="advanced ? 'up-outlined' : 'down-outlined'" />
					</a>-->
				</a-col>
			</a-row>
		</a-form>
	</a-card>
	<div style="margin-top: 5px">
		<a-row :gutter="24">
			<a-col :span="6">
				<a-card>
					<a-statistic title="总车次" :value="totalCar" />
				</a-card>
			</a-col>
			<a-col :span="6">
				<a-card>
					<a-statistic title="总毛重" :value="totalGrossWeight">
						<template #suffix>
							<span>吨</span>
						</template>
					</a-statistic>
				</a-card>
			</a-col>
			<a-col :span="6">
				<a-card>
					<a-statistic title="总皮重" :value="totalTareWeight">
						<template #suffix>
							<span>吨</span>
						</template>
					</a-statistic>
				</a-card>
			</a-col>
			<a-col :span="6">
				<a-card>
					<a-statistic title="总净重" :value="totalNetWeight">
						<template #suffix>
							<span>吨</span>
						</template>
					</a-statistic>
				</a-card>
			</a-col>
		</a-row>
	</div>
	<div style="margin-top: 5px">
		<a-card title="近七日过磅统计" :bordered="false">
			<div id="SevenDays"></div>
		</a-card>
	</div>
</template>

<script setup name="recordcount">
	import { ref } from 'vue'
	import { onMounted } from 'vue'
	import { Column } from '@antv/g2plot'
	import bizRecordApi from '@/api/biz/bizRecordApi'
	import {cloneDeep} from "lodash-es";
	const searchFormState = ref({
		times: [],
		licensePlate: '',
		goodsName: '',
		receiptCompany: '',
		shippingCompany: '',
		transportCompany: ''
	})
	const totalCar = ref(0)
	const totalGrossWeight = ref(0)
	const totalNetWeight = ref(0)
	const totalTareWeight = ref(0)
	const searchFormRef = ref()

	// 查询区域显示更多控制
	const advanced = ref(false)
	const toggleAdvanced = () => {
		advanced.value = !advanced.value
	}
	// 统计
	const sevenData = ref([])
	const loading = ref(true)
	let stackedColumnPlot = null // 声明图表实例

	onMounted(() => {
		loadData()
	})

	//日期选择
	const dates = ref()
	const value = ref()
	const hackValue = ref()
	const disabledDate = (current) => {
		if (!dates.value || dates.value.length === 0) {
			return false
		}
		const tooLate = dates.value[0] && current.diff(dates.value[0], 'days') > 7
		const tooEarly = dates.value[1] && dates.value[1].diff(current, 'days') > 7
		return tooEarly || tooLate
	}
	const onOpenChange = (open) => {
		if (open) {
			dates.value = []
			hackValue.value = []
		} else {
			hackValue.value = undefined
		}
	}
	const onChange = (val) => {
		console.log(val)
		value.value = val
	}
	const onCalendarChange = (val) => {
		dates.value = val
	}

	// 重置
	const reset = () => {
		searchFormRef.value.resetFields()
		searchFormState.value.startDay = null
		searchFormState.value.endDay = null
	}
	const query = () => {
		const searchFormParam = cloneDeep(searchFormState.value)
		if (Array.isArray(searchFormParam.times) && searchFormParam.times.length > 0) {
			searchFormParam.times = searchFormParam.times.map((item) => item.format('YYYY-MM-DD'))
			searchFormParam.startDay = searchFormParam.times[0]
			searchFormParam.endDay = searchFormParam.times[1]
			delete searchFormParam.times
		}
		countData(searchFormParam)
		return bizRecordApi
			.bizRecordSevenDaysList(Object.assign(searchFormParam))
			.then((res) => {
				sevenData.value = res || []
				renderChart() // 查询成功后重新渲染图表
				//searchFormState.value.startDay = null
				//searchFormState.value.endDay = null
			})
			.catch((err) => {
				console.error('查询失败:', err)
				sevenData.value = [] // 如果请求失败，清空数据
			})
	}

	const loadData = () => {
		query().finally(() => {
			loading.value = false
			renderChart()
		})
	}

	const renderChart = () => {
		if (stackedColumnPlot) {
			stackedColumnPlot.destroy() // 销毁旧的图表实例
		}
		stackedColumnPlot = new Column('SevenDays', {
			data: sevenData.value, // 使用 sevenData.value
			isGroup: true,
			xField: 'day',
			yField: 'num',
			seriesField: 'name',
			label: {
				position: 'middle',
				layout: [{ type: 'interval-adjust-position' }, { type: 'interval-hide-overlap' }, { type: 'adjust-color' }]
			}
		})
		stackedColumnPlot.render()
	}
	// 统计
	const countData = (param) => {
		bizRecordApi.bizRecordCountWeight(param).then((res) => {
			if (res) {
				totalCar.value = res.totalCar
				totalGrossWeight.value = res.totalGrossWeight
				totalNetWeight.value = res.totalNetWeight
				totalTareWeight.value = res.totalTareWeight
			}
		})
	}
</script>