summaryData.jsx 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. import {Button, Table} from "antd";
  2. import {useEffect, useState} from "react";
  3. import ModalHooks from "./components/modal.jsx";
  4. import "./summaryData.scss";
  5. import axios from "@/utils/axios.js";
  6. const {Column} = Table;
  7. export default function SummaryData() {
  8. // 页面数据
  9. const [data, setData] = useState([]);
  10. // 是否展示弹框
  11. const [isModalOpen, setIsModalOpen] = useState(false);
  12. // 一行的数据
  13. const [row, setRow] = useState({});
  14. // 设置下拉框绑定的值
  15. const [val, setVal] = useState('')
  16. // 新增用户页面
  17. function addUser() {
  18. setRow([]);
  19. setIsModalOpen(true);
  20. }
  21. // 关闭页面
  22. function closeModal() {
  23. setIsModalOpen(false);
  24. getData()
  25. }
  26. // 点击修改的回调
  27. function modify(data) {
  28. setRow(data);
  29. setIsModalOpen(true);
  30. }
  31. // 获取数据
  32. async function getData() {
  33. let {data} = await axios.get("/lineOperate/getBusLineStatistics");
  34. setData([data]);
  35. }
  36. // 设置类型文字
  37. function setType(text) {
  38. switch (text) {
  39. case 1:
  40. return "老年卡";
  41. case 2:
  42. return "学生卡";
  43. case 3:
  44. return "电子钱包";
  45. case 4:
  46. return "现金";
  47. case 5:
  48. return "其他";
  49. }
  50. }
  51. useEffect(() => {
  52. getData()
  53. }, [])
  54. return (
  55. <div className="passenger">
  56. <div className="top">
  57. {/*<div className="button">*/}
  58. {/* <Button type="primary" onClick={addUser}>*/}
  59. {/* 新增乘客类型*/}
  60. {/* </Button>*/}
  61. {/*</div>*/}
  62. </div>
  63. <Table
  64. dataSource={data}
  65. bordered={true}
  66. rowKey="id"
  67. pagination={false}
  68. >
  69. <Column title="当前里程" dataIndex="currentMileage"></Column>
  70. <Column title="空驶率" dataIndex="unloadedRatio" key="id"/>
  71. <Column title="今日客流" dataIndex="passengerFlow" key="id"/>
  72. <Column title="计划里程" dataIndex="planMileage" key="id"/>
  73. <Column title="塌班" dataIndex="collapseClasses" key="id"/>
  74. <Column title="计划班次" dataIndex="planClasses" key="id"/>
  75. <Column title="已发班次" dataIndex="setOutClasses" key="id"/>
  76. <Column
  77. title="操作"
  78. width="170px"
  79. dataIndex="id"
  80. key="id"
  81. render={(text, record) => (
  82. <div className="btn">
  83. <Button type="primary" onClick={() => modify(record)}>
  84. 修改
  85. </Button>
  86. </div>
  87. )}
  88. />
  89. </Table>
  90. <ModalHooks
  91. isModalOpen={isModalOpen}
  92. closeModal={closeModal}
  93. row={row}
  94. val={val}
  95. ></ModalHooks>
  96. </div>
  97. );
  98. }