|
|
import React, { useState, useEffect } from "react";import { ResultFlowResult } from "@/components";import { Select, Input, Button, Table, message, Pagination, DatePicker, Modal, Cascader, Tooltip, Tabs } from "antd";import { useSessionStorageState } from "ahooks";import { dictionary } from "@/config/common";import { useNavigate } from "react-router-dom";import { setTabList } from "@/store/common.js";import { useSelector, useDispatch } from "react-redux";import { QuestionCircleFilled } from "@ant-design/icons"import moment from "moment";import ReactEcharts from "echarts-for-react";import echarts from "echarts";import "./index.scss";import ajax from "@/services";//停车时长分析
function ParkingAlyDuration() { // session缓存
const [defaultParams, setDefaultParams] = useSessionStorageState( "formData_parkingAlyDuration", { defaultValue: null } ); //区域的下拉数据
const [areaList, setAreaList] = useState([]); // 默认数据
const defaultData = { start_time: moment().subtract('days').startOf('day').format("YYYY-MM-DD"), end_time: moment().endOf("day").format("YYYY-MM-DD"), date_type: '1', //date_type: 1,
}; // 分页数据
const [pageInfo, setPageInfo] = useState({ pn: 1, page_size: 10 }); // 表单数据
const [formData, setFormData] = useState({ ...defaultData, ...defaultParams, }); // 搜索提交数据-存储
const [holdData, setHoldData] = useState(formData); // 访问接口，isAjax改变时执行
const [isAjax, setIsAjax] = useState(false); // 检索按钮加载状态
const [loading, setLoading] = useState(false); // 表格加载状态
const [tabLoading, setTabLoading] = useState(false); // 表格返回数据
const [resultData, setResultData] = useState({ total: 0, list: [], }); // 泊位周转排行榜返回数据
const [tableData, setTableData] = useState({ area_list: [], road_list: [], }); // 停车排行榜返回数据setTableCarData
const [tableCarData, setTableCarData] = useState({ area_list: [], road_list: [], }); //停车场收入概览数据
const [revenueData, setRevenueData] = useState({}); const [searchSelectList, setSearchSelectList] = useState([]); //搜索下拉数据
const [sessionTabList, setSessionTabList] = useSessionStorageState('parkingAlyDuration', { value: { } }) useEffect(() => { if (sessionTabList && Object.values(sessionTabList).length > 0) { setFormData({ ...formData, ...sessionTabList }) // getData({
// ...sessionTabList
// })
getCheck({ ...sessionTabList }) } else { //getData()
getCheck() } }, [isAjax]) const [tabKey, setTabKey] = useState("1"); const [tabCarKey, setTabCarKey] = useState("1"); const columns = [ { title: '序号', dataIndex: 'index', key: 'index', width: 100, render: (text, record, index) => index + 1 }, { title: '区域', dataIndex: 'area_name', key: 'area_name', width: 280, }, { title: '泊位数（个）', dataIndex: 'area_total_berths', key: 'area_total_berths', //width: 200,
}, { title: '利用率', dataIndex: 'area_rate', key: 'area_rate', width: 120, },
] const parkColumns = [ { title: '序号', dataIndex: 'index', key: 'index', width: 100, render: (text, record, index) => index + 1 }, { title: '停车场', dataIndex: 'road_name', key: 'road_name', width: 280, }, { title: '泊位数（个）', dataIndex: 'road_total_berths', key: 'road_total_berths', //width: 200,
}, { title: '利用率', dataIndex: 'road_rate', key: 'road_rate', width: 120, },
] const columns1 = [ { title: '序号', dataIndex: 'index', key: 'index', width: 100, render: (text, record, index) => index + 1 }, { title: '区域', dataIndex: 'area_name', key: 'area_name', width: 280, }, { title: '泊位数（个）', dataIndex: 'area_total_parkings', key: 'area_total_parkings', //width: 200,
}, { title: '利用率', dataIndex: 'area_rate', key: 'area_rate', width: 120, },
] const parkColumns1 = [ { title: '序号', dataIndex: 'index', key: 'index', width: 100, render: (text, record, index) => index + 1 }, { title: '停车场', dataIndex: 'road_name', key: 'road_name', width: 280, }, { title: '泊位数（个）', dataIndex: 'road_total_parkings', key: 'road_total_parkings', //width: 200,
}, { title: '利用率', dataIndex: 'road_rate', key: 'road_rate', width: 120, },
] const paginationProps = { className: "pagination-common", showQuickJumper: true, showSizeChanger: true, current: pageInfo.pn, //total: resultData?.totalRecords,
pageSize: pageInfo.page_size, pageSizeOptions: Array.from( new Set([...[15], ...(dictionary?.pageSizeOptions || [])]) ), onChange: (current, size) => { setPageInfo({ ...pageInfo, ...{ pn: current, length: size } }); setIsAjax(!isAjax) //getListData({})
}, }
// useEffect(() => {
// getData()
// }, [pageInfo])
useEffect(() => { setSessionTabList({ ...formData }) }, [formData]) useEffect(() => { getSelectList(); }, []);
// 访问接口，获取表格
// useEffect(() => {
// getData();
// }, [isAjax]);
//时间状态切换
const TimeChange = () => { let e = formData.date_type; let str = "day"; let mat = "YYYY-MM-DD"; if (e == 4) { str = "year"; mat = "YYYY"; } else if (e == 3) { str = "month"; mat = "YYYY-MM"; } else if (e == 2) { str = "week"; mat = "YYYY-MM-DD"; } return { str, mat }; }; //切换时间变化
const SetTimeNow = (e) => { let start = ""; let end = ""; if (e == 4) { start = moment().format("YYYY"); end = moment().format("YYYY"); } else if (e == 3) { start = moment().startOf('month').format("YYYY-MM-DD"); end = moment().endOf("month").format("YYYY-MM-DD"); } else if (e == 2) { start = moment().day(1).format("YYYY-MM-DD"); end = moment().day(7).format("YYYY-MM-DD"); } else { start = moment().startOf("day").format("YYYY-MM-DD"); end = moment().endOf("day").format("YYYY-MM-DD"); } setFormData({ ...formData, date_type: e, start_time: start, end_time: end, }); }; //停车场收入概览 柱状图
const getRevenueOption = (data) => { console.log(data) // data = [
// {
// "hour": "0",
// "record_count": "0",
// "total_duration": "0"
// },
// {
// "hour": "1",
// "record_count": "0",
// "total_duration": "0"
// },
// {
// "hour": "2",
// "record_count": "0",
// "total_duration": "0"
// },
// {
// "hour": "3",
// "record_count": "0",
// "total_duration": "0"
// },
// {
// "hour": "4",
// "record_count": "0",
// "total_duration": "0"
// },
// {
// "hour": "5",
// "record_count": "0",
// "total_duration": "0"
// },
// {
// "hour": "6",
// "record_count": "0",
// "total_duration": "0"
// },
// {
// "hour": "7",
// "record_count": "0",
// "total_duration": "0"
// },
// {
// "hour": "8",
// "record_count": "0",
// "total_duration": "0"
// },
// {
// "hour": "9",
// "record_count": "0",
// "total_duration": "0"
// },
// {
// "hour": "10",
// "record_count": "0",
// "total_duration": "0"
// },
// {
// "hour": "11",
// "record_count": "0",
// "total_duration": "0"
// },
// {
// "hour": "12",
// "record_count": "0",
// "total_duration": "0"
// },
// {
// "hour": "13",
// "record_count": "0",
// "total_duration": "0"
// },
// {
// "hour": "14",
// "record_count": "0",
// "total_duration": "0"
// },
// {
// "hour": "15",
// "record_count": "0",
// "total_duration": "0"
// },
// {
// "hour": "16",
// "record_count": "0",
// "total_duration": "0"
// },
// {
// "hour": "17",
// "record_count": "0",
// "total_duration": "0"
// },
// {
// "hour": "18",
// "record_count": "0",
// "total_duration": "0"
// },
// {
// "hour": "19",
// "record_count": "0",
// "total_duration": "0"
// },
// {
// "hour": "20",
// "record_count": "0",
// "total_duration": "0"
// },
// {
// "hour": "21",
// "record_count": "0",
// "total_duration": "0"
// },
// {
// "hour": "22",
// "record_count": "0",
// "total_duration": "0"
// },
// {
// "hour": "23",
// "record_count": "0",
// "total_duration": "0"
// }
// ]
let ac = [ { "hour": "0", "record_count": "0", "total_duration": "0" }, { "hour": "1", "record_count": "0", "total_duration": "0" }, { "hour": "2", "record_count": "0", "total_duration": "0" }, { "hour": "3", "record_count": "0", "total_duration": "0" }, { "hour": "4", "record_count": "0", "total_duration": "0" }, { "hour": "5", "record_count": "0", "total_duration": "0" }, { "hour": "6", "record_count": "0", "total_duration": "0" }, { "hour": "7", "record_count": "0", "total_duration": "0" }, { "hour": "8", "record_count": "0", "total_duration": "0" }, { "hour": "9", "record_count": "0", "total_duration": "0" }, { "hour": "10", "record_count": "0", "total_duration": "0" }, { "hour": "11", "record_count": "0", "total_duration": "0" }, { "hour": "12", "record_count": "0", "total_duration": "0" }, { "hour": "13", "record_count": "0", "total_duration": "0" }, { "hour": "14", "record_count": "0", "total_duration": "0" }, { "hour": "15", "record_count": "0", "total_duration": "0" }, { "hour": "16", "record_count": "0", "total_duration": "0" }, { "hour": "17", "record_count": "0", "total_duration": "0" }, { "hour": "18", "record_count": "0", "total_duration": "0" }, { "hour": "19", "record_count": "0", "total_duration": "0" }, { "hour": "20", "record_count": "0", "total_duration": "0" }, { "hour": "21", "record_count": "0", "total_duration": "0" }, { "hour": "22", "record_count": "0", "total_duration": "0" }, { "hour": "23", "record_count": "0", "total_duration": "0" } ] let leftData = [] let rightData = [] let yData = [] data.map(item => { yData.push(item.houer) leftData.push(item.record_count) leftData.push(item.total_duration) }) data.sort((a, b) => { return new Date(a.hour) - new Date(b.hour); }); const areaNames = ['停车次数', '停车时长']; // 获取所有日期
// const dates = [...new Set(data.map((item) => item.pay_date))].sort(
// (a, b) => a.pay_date - b.pay_date
// );
// 构建数据对象
// const seriesData = areaNames.map((areaName, index) => {
// // 获取该地区的数据
// const areaData = data.filter((item) => item.area_name === areaName);
// // 构建该地区的数据对象
// return {
// name: areaName,
// type: "bar",
// // itemStyle: {
// // normal: {
// // label: {
// // show: true, //开启显示
// // position: 'top', //在上方显示
// // textStyle: { //数值样式
// // color: 'white',//字体颜色
// // fontSize: 10//字体大小
// // }
// // },
// // },
// // },
// data: dates.map((item) => {
// for (const { pay_date, income } of areaData) {
// if (pay_date === item) return income;
// }
// return 0;
// }),
// yAxisIndex: index == 1 ? 1 : null,
// };
// });
setRevenueData({ title: { text: "", textStyle: { color: "#fff", }, }, tooltip: { trigger: "axis", }, legend: { type: "scroll", x: "center", data: areaNames, itemWidth: 18, itemHeight: 12, textStyle: { fontSize: 14, color: "#fff", }, }, xAxis: { //data: xAxisData,
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], type: 'category', axisLine: { lineStyle: { color: "#bbb", }, }, axisLabel: { textStyle: { color: "#bbb", }, }, axisTick: { show: false, } }, yAxis: [{ type: "value", name: '停车次数（次）', min: 0, interval: 10, splitNumber: 6, //设置坐标轴的分割段数
axisLabel: { textStyle: { color: "#ffffffa6", }, }, axisLine: { lineStyle: { color: "#ffffffa6", }, }, splitLine: { show: true, // 是否显示分隔线。默认数值轴显示，类目轴不显示
interval: '0', // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
lineStyle: { color: ['#cccccc42'], // 分隔线颜色，可以设置成单个颜色，也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色
width: 2, // 分隔线线宽
type: 'dashed', // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
}, }, }, { type: "value", name: '停车时长（时）', splitLine: { show: false }, axisLine: { lineStyle: { color: "#ffffffa6", }, }, splitLine: { show: true, // 是否显示分隔线。默认数值轴显示，类目轴不显示
interval: '0', // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
lineStyle: { color: ['#cccccc42'], // 分隔线颜色，可以设置成单个颜色，也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色
width: 1.3, // 分隔线线宽
type: 'dashed', // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
}, }, }, ], color: ["#4DC3FF", "#FFD767"], series: [ { name: "停车次数", type: "bar", data: leftData, //data:[1,24,6,8,4,32,5,2,5,25,6,34],
barWidth: 12, itemStyle: { barBorderRadius: [2, 2, 0, 0], // （顺时针左上，右上，右下，左下）
color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#99EBFF' // 0% 处的颜色
}, { offset: 1, color: '#3AA9FF' // 100% 处的颜色
}], globalCoord: false // 缺省为 false
},
}, }, { name: "停车时长", type: "bar", yAxisIndex: 1, data: rightData, //data:[1,24,6,8,4,32,5,2,5,25,6,34],
barWidth: 12, itemStyle: { barBorderRadius: [2, 2, 0, 0], // （顺时针左上，右上，右下，左下）
color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#FFB8B8' // 0% 处的颜色
}, { offset: 1, color: '#F481F8' // 100% 处的颜色
}], globalCoord: false // 缺省为 false
} }, } ], grid: { x: 50, y: 55, x2: 70, y2: 30, }, }); };
//获取柱状图数据
function getParkingIncome(data) { ajax .getParkingAlyDurationBar(data) .then((res) => { if (res.status === 20000) { console.log(res) getRevenueOption(res.data.list); } }) .catch((err) => console.error(err)); }
// 获取下拉数据
const getSelectList = () => { ajax.getOperator().then((e) => { setSearchSelectList([ ...searchSelectList, ...e.data ]) }) };
// 获取日均泊位列表数据
const getData = (v, pn = {}) => { ajax.getParkingAlyDurationBerthList({ ...v, ...pn }).then( (res) => { if (parseInt(res?.status) === 20000) { setTableData(res?.data || {}); } else { message.error(res?.message); } setLoading(false); setTabLoading(false); }, (err) => { console.log(err); setLoading(false); setTabLoading(false); } ); }; // 获取停车时长列表数据
const getListData = (v, pn = {}) => { let postData = { ...formData, sort: 2 }; if (!loading) { postData = { ...holdData }; } setDefaultParams({ ...postData, ...pageInfo }); setTabLoading(true); ajax.getParkingAlyDurationParkingList({ ...postData, ...v, ...pageInfo, ...pn }).then( (res) => { if (parseInt(res?.status) === 20000) { setTableCarData(res?.data || {}); } else { message.error(res?.message); } setLoading(false); setTabLoading(false); }, (err) => { console.log(err); setLoading(false); setTabLoading(false); } ); }; // 携带参数处理
const getCheck = (v) => { let postData = { ...formData }; if (!loading) { postData = { ...holdData }; } setDefaultParams({ ...postData, ...pageInfo }); if (moment(formData.end_time) - moment(formData.start_time) > 1000 * 31 * 24 * 3600) { message.error("时间范围限制为31天！") setLoading(false); setTabLoading(false); return } setTabLoading(true); let params = { ...postData, ...v, ...pageInfo } //请求接口
getParkingIncome(params) getData(params) getListData(params) }; // 检索数据
const handleSearch = () => { setLoading(true); setPageInfo({ ...pageInfo, ...{ pn: 1 } }); setHoldData(formData); setIsAjax(!isAjax); };
// 日均周转次数导出
const handleExport = () => { if (tableData.list.area_list?.length > 0) { let { pn, page_size, ...params } = defaultParams; ajax.getParkingAlyDurationParkingExp(defaultParams).then( (res) => { if (res) { window.open(res.data.export_url) } else { message.error(res?.message); } }, (err) => { console.log(err); } ); } else { message.error("暂无数据"); } }; // 停车排行导出
const handleExportCar = () => { if (tableData.list.area_list?.length > 0) { let { pn, page_size, ...params } = defaultParams; ajax.getParkingAlyDurationExp(defaultParams).then( (res) => { if (res) { window.open(res.data.export_url) } else { message.error(res?.message); } }, (err) => { console.log(err); } ); } else { message.error("暂无数据"); } }; //区域下拉框数据
useEffect(() => { ajax .getAreaTree() .then((res) => { if (res.status === 20000) { setAreaList(res.data); } }) .catch((err) => { console.error(err); }); }, []); return ( <> <div className="edit-order-inquiry"> <div className="paid-search"> <div className="title">查询条件</div> <div className="form-Wrap"> <div className="yisa-search"> <label>区域</label> <Cascader className="form-con" popupClassName="start-exception-deal-cascader" options={areaList} placeholder="请选择区域" expandTrigger="hover" fieldNames={{ label: "name", value: "id", children: "children", }} value={formData.region} onChange={(v, option) => { setFormData({ ...formData, region: v ? v : null }); }} /> </div> <div className="yisa-search"> <label>运营商</label> <Select className="form-con" placeholder="请选择" options={searchSelectList || []} value={formData.operator_id} onChange={(v) => setFormData({ ...formData, operator_id: v }) } /> </div> <div className="yisa-search"> <label>车场类型</label> <Select className="form-con" placeholder="请选择车场类型" options={[ { label: '全部', value: '0', }, { label: '路内车场', value: '1', }, { label: '路外车场', value: '2', }, ]} value={formData.car_parking_type} onChange={(v) => setFormData({ ...formData, car_parking_type: v }) } /> </div> <div className="yisa-search"> <label>停车场</label> <Input className="form-con" placeholder="请输入" value={formData?.road_name} onChange={(e) => setFormData({ ...formData, road_name: e.target.value }) } /> </div>
<div className="yisa-search"> <label>日期 <div className="daf"> <Select value={formData.date_type} // style={{
// width: "100%",
// }}
placeholder="请选择" options={[ { value: "1", label: "日", }, { value: "2", label: "周", }, { value: "3", label: "月", }, ]} onChange={(e) => SetTimeNow(e)} /> </div> </label> <DatePicker style={{ width: "100%" }} // showTime
format={TimeChange().mat} picker={TimeChange().str} allowClear={false} value={formData.start_time ? moment(formData.start_time) : null} onChange={(date, dateString) => { if (TimeChange().str == "week") { setFormData({ ...formData, start_time: date ? moment(date).day(1).format("YYYY-MM-DD") : null, }); } else if (TimeChange().str == "day") { if (date > moment(formData.end_time)) { setFormData({ ...formData, end_time: dateString, start_time: formData.end_time, }); } else { setFormData({ ...formData, start_time: dateString, }); } } else if (TimeChange().str == "month") { setFormData({ ...formData, start_time: moment(date).format("YYYY-MM-DD"), end_time: moment(date).endOf("month").format("YYYY-MM-DD") }); } else { setFormData({ ...formData, start_time: dateString }); } }} disabledDate={(current) => current > moment(formData.end_time)} />
</div> <div className="yisa-search"> <label>至</label> <DatePicker style={{ width: "100%" }} // showTime
format={TimeChange().mat} picker={TimeChange().str} allowClear={false} value={formData.end_time ? moment(formData.end_time) : null} onChange={(date, dateString) => { if (TimeChange().str == "week") { setFormData({ ...formData, end_time: date ? moment(date).day(7).format("YYYY-MM-DD") : null, }); } else if (TimeChange().str == "day") { if (date < moment(formData.start_time)) { setFormData({ ...formData, start_time: dateString, end_time: formData.start_time, }); } else { setFormData({ ...formData, end_time: dateString, }); } } else if (TimeChange().str == "month") { setFormData({ ...formData, start_time: moment(date).startOf('month').format("YYYY-MM-DD"), end_time: moment(date).format("YYYY-MM-DD") }); } else { setFormData({ ...formData, end_time: dateString }); } }} disabledDate={(current) => current < moment(formData.start_time) } /> </div> <div className="form-btn"> <Button className="reset" onClick={() => setFormData(defaultData)} > 重置 </Button> <Button className="submit" type="primary" onClick={handleSearch} loading={loading} > 查询 </Button> </div> </div> </div> <div className="paid-result soll-result"> <div className="result"> <div className="result-box"> <div className="result-box-title">停车时长分析</div> <Tooltip placement="topLeft" title={<span>停车次数: 展示统计期间内，各个停车时长区间内的停车记录数<br /> 停车时长: 展示统计时间段内，在各个停车时长区间内的停车记录的总时木</span>} > <i>?</i> </Tooltip> <ReactEcharts option={revenueData} style={{ height: "300px", width: "100%", overflow: "hidden" }} /> </div> <div className="duration-box"> <div className="result-box duration-left"> <div className="result-box-title">日均泊位周转次数排行榜</div> <div className="export-btn" onClick={handleExport}>导出</div> <Tabs defaultActiveKey="2" activeKey={tabKey} onChange={(key) => { setTabKey(key); setPageInfo({ ...pageInfo, ...{ pn: 1 } }); getData({}, { pn: 1 }) }} items={[ { label: `序号`, key: '0', disabled: "true" }, { label: <div className="tab-title"> <div className="title">区域</div> <div className="btn"> <div onClick={() => { message.success('升序'); setPageInfo({ ...pageInfo, ...{ pn: 1 } }); getData({ sort: 1 }, { pn: 1 }) }}>▲</div> <div onClick={() => { message.success('降序'); setPageInfo({ ...pageInfo, ...{ pn: 1 } }); getData({ sort: 2 }, { pn: 1 }) }}>▼</div> </div> </div>, key: '1', children: <><Table showHeader={false} columns={columns} dataSource={tableData?.list?.area_list || []} rowKey={'area_name'} bordered pagination={false} size="middle" /> <Pagination {...paginationProps} className="pagination-common" total={tableData?.area_total_records} /> </>, }, { label: <div className="tab-title"> <div className="title">停车场</div> <div className="btn"> <div onClick={() => { message.success('升序'); setPageInfo({ ...pageInfo, ...{ pn: 1 } }); getData({ sort: 1 }, { pn: 1 }) }}>▲</div> <div onClick={() => { message.success('降序'); setPageInfo({ ...pageInfo, ...{ pn: 1 } }); getData({ sort: 2 }, { pn: 1 }) }}>▼</div> </div> </div>, key: '2', children: <><Table showHeader={false} columns={parkColumns} dataSource={tableData?.list?.road_list} rowKey={'area_name'} bordered pagination={false} size="middle" //scroll={{ y: 305 }}
// scroll={{
// x: 'calc(700px + 50%)',
// y: 240,
// }}
/> <Pagination {...paginationProps} className="pagination-common" total={tableData?.area_total_records} /> </>, }, { label: `泊位数（个）`, key: '3', disabled: "true" }, { label: `利用率`, key: '4', disabled: "true" }, ]} /> </div> <div className="result-box duration-right"> <div className="result-box-title">平均停车时长排行榜</div> <div className="export-btn" onClick={() => { handleExportCar() }}>导出</div> <Tabs defaultActiveKey="2" activeKey={tabCarKey} onChange={(key) => { setTabCarKey(key); setPageInfo({ ...pageInfo, ...{ pn: 1 } }); getListData({}, { pn: 1 }) }} items={[ { label: `序号`, key: '0', disabled: "true" }, { label: <div className="tab-title"> <div className="title">区域</div> <div className="btn"> <div onClick={() => { message.success('升序'); setPageInfo({ ...pageInfo, ...{ pn: 1 } }); getListData({ sort: 1 }, { pn: 1 }) }}>▲</div> <div onClick={() => { message.success('降序'); setPageInfo({ ...pageInfo, ...{ pn: 1 } }); getListData({ sort: 2 }, { pn: 1 }) }}>▼</div> </div> </div>, key: '1', children: <><Table showHeader={false} columns={columns1} dataSource={tableCarData?.list?.area_list || []} rowKey={'area_name'} bordered pagination={false} size="middle" /> <Pagination {...paginationProps} className="pagination-common" total={tableData?.area_total_records} /> </>, }, { label: <div className="tab-title"> <div className="title">停车场</div> <div className="btn"> <div onClick={() => { message.success('升序'); setPageInfo({ ...pageInfo, ...{ pn: 1 } }); getListData({ sort: 1 }, { pn: 1 }) }}>▲</div> <div onClick={() => { message.success('降序'); setPageInfo({ ...pageInfo, ...{ pn: 1 } }); getListData({ sort: 2 }, { pn: 1 }) }}>▼</div> </div> </div>, key: '2', children: <><Table showHeader={false} columns={parkColumns1} dataSource={tableCarData?.list?.road_list} rowKey={'area_name'} bordered pagination={false} size="middle" //scroll={{ y: 305 }}
// scroll={{
// x: 'calc(700px + 50%)',
// y: 240,
// }}
/> <Pagination {...paginationProps} className="pagination-common" total={tableData?.area_total_records} /> </>, }, { label: `停车次数`, key: '3', disabled: "true" }, { label: `平均停车时长`, key: '4', disabled: "true" }, ]} /> </div> </div> </div> </div> </div> </> );}
export default ParkingAlyDuration;
|
