|
@@ -0,0 +1,172 @@
|
|
|
+<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-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-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 bizAppointmentRecordApi from "@/api/biz/bizAppointmentRecordApi";
|
|
|
+ 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.beginTime = searchFormParam.times[0]
|
|
|
+ searchFormParam.endTime = searchFormParam.times[1]
|
|
|
+ delete searchFormParam.times
|
|
|
+ }
|
|
|
+ return bizAppointmentRecordApi
|
|
|
+ .gerVehicleTotal(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
|
|
|
+ xField: 'status',
|
|
|
+ yField: 'count',
|
|
|
+ label: {
|
|
|
+ position: 'middle',
|
|
|
+ layout: [{ type: 'interval-adjust-position' }, { type: 'interval-hide-overlap' }, { type: 'adjust-color' }]
|
|
|
+ },
|
|
|
+ meta: {
|
|
|
+ status: {
|
|
|
+ alias: '状态'
|
|
|
+ },
|
|
|
+ count: {
|
|
|
+ alias: '车辆数'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ stackedColumnPlot.render()
|
|
|
+ }
|
|
|
+ // 统计
|
|
|
+ const countData = () => {
|
|
|
+ bizRecordApi.bizRecordCountWeight(searchFormState.value).then((res) => {
|
|
|
+ if (res) {
|
|
|
+ totalCar.value = res.totalCar
|
|
|
+ totalGrossWeight.value = res.totalGrossWeight
|
|
|
+ totalNetWeight.value = res.totalNetWeight
|
|
|
+ totalTareWeight.value = res.totalTareWeight
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+</script>
|