|
|
|
@ -1,15 +1,231 @@ |
|
|
|
import React, { useState, useRef, useEffect } from "react"; |
|
|
|
// import { message, Pagination, Table, Space, Modal, } from "antd"; |
|
|
|
import { |
|
|
|
message, |
|
|
|
Pagination, |
|
|
|
Input, |
|
|
|
AutoComplete, |
|
|
|
Table, |
|
|
|
Select, |
|
|
|
Modal, |
|
|
|
} from "antd"; |
|
|
|
import { UserOutlined } from "@ant-design/icons"; |
|
|
|
// import { dictionary, utils } from "@/config/common"; |
|
|
|
// import moment from 'moment' |
|
|
|
// import { useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks'; |
|
|
|
// import ajax from "@/services" |
|
|
|
// import { FormInput, FormSelect, OptionPanel, ResultPanel, FormSliderPicker, AreaCascader, ImgResize, ImgZoom, } from "@/components" |
|
|
|
// import "./index.scss"; |
|
|
|
import ajax from "@/services"; |
|
|
|
import { BaseMap } from "@/components"; |
|
|
|
import "./index.scss"; |
|
|
|
import Btckd from "@/assets/images/equip/home/bottom_checked.png"; |
|
|
|
import Pkhl from "@/assets/images/equip/home/pkhome_left.png"; |
|
|
|
import Pkhr from "@/assets/images/equip/home/pkhome_right.png"; |
|
|
|
import Lf1 from "@/assets/images/equip/home/left_1.png"; |
|
|
|
import Lf2 from "@/assets/images/equip/home/left_2.png"; |
|
|
|
import Lf3 from "@/assets/images/equip/home/left_3.png"; |
|
|
|
import Lf4 from "@/assets/images/equip/home/left_4.png"; |
|
|
|
import Lf5 from "@/assets/images/equip/home/left_5.png"; |
|
|
|
import Lf6 from "@/assets/images/equip/home/left_6.png"; |
|
|
|
import Lf7 from "@/assets/images/equip/home/left_7.png"; |
|
|
|
// import errorImg from "@/assets/images/layout/error.png" |
|
|
|
// import { useLocation } from "react-router-dom"; |
|
|
|
function ParkingOverview() { |
|
|
|
return <div>ParkingOverview</div> |
|
|
|
//左侧展示栏 |
|
|
|
const [LeftShow, setLeftShow] = useState([ |
|
|
|
{ |
|
|
|
text: "车场总数", |
|
|
|
value: "233", |
|
|
|
img: Lf1, |
|
|
|
status: "", |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: "泊位总数", |
|
|
|
value: "42,176", |
|
|
|
img: Lf2, |
|
|
|
status: "", |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: "近7日交易订单数", |
|
|
|
value: "60,637", |
|
|
|
img: Lf3, |
|
|
|
status: "单", |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: "近7日收入", |
|
|
|
value: "264,578.000", |
|
|
|
img: Lf4, |
|
|
|
status: "元", |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: "近7日泊位利用率", |
|
|
|
value: "228.80", |
|
|
|
img: Lf5, |
|
|
|
status: "%", |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: "近7日泊位周转率", |
|
|
|
value: "1.00", |
|
|
|
img: Lf6, |
|
|
|
status: "次", |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: "注册会员", |
|
|
|
value: "466,188", |
|
|
|
img: Lf7, |
|
|
|
status: "", |
|
|
|
}, |
|
|
|
]); |
|
|
|
//底部车场类型切换 |
|
|
|
const Road = [ |
|
|
|
{ |
|
|
|
text: "全部车场", |
|
|
|
value: "0", |
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
text: "路内车场", |
|
|
|
value: "1", |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: "路外车场", |
|
|
|
value: "2", |
|
|
|
}, |
|
|
|
]; |
|
|
|
//底部车场类型切换 |
|
|
|
const [RoadSelect, setRoadSelect] = useState("0"); |
|
|
|
//底部车场切换数据 |
|
|
|
const [CarRoad, setCarRoad] = useState([ |
|
|
|
{ |
|
|
|
text: "西海岸新区", |
|
|
|
value: "1", |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: "西海岸东区", |
|
|
|
value: "2", |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: "西海岸南区", |
|
|
|
value: "3", |
|
|
|
}, |
|
|
|
]); |
|
|
|
//底部车场切换展示 |
|
|
|
const [CarShow, setCarShow] = useState(0); |
|
|
|
//底部车场切换 |
|
|
|
const BottomCar = (val) => { |
|
|
|
let length = CarRoad.length; |
|
|
|
let index = CarShow; |
|
|
|
if (val == "left") { |
|
|
|
if (index <= 0) { |
|
|
|
setCarShow(length - 1); |
|
|
|
} else { |
|
|
|
setCarShow(index - 1); |
|
|
|
} |
|
|
|
} else { |
|
|
|
if (index >= length - 1) { |
|
|
|
setCarShow(0); |
|
|
|
} else { |
|
|
|
setCarShow(index + 1); |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
//底部车场类型切换 |
|
|
|
const BottomTab = (val) => { |
|
|
|
setRoadSelect(val); |
|
|
|
}; |
|
|
|
return ( |
|
|
|
<div className="ParkingOverview"> |
|
|
|
<div className="pk_header">西海岸新区停车信息管理平台</div> |
|
|
|
<div className="left_home"> |
|
|
|
<div className="pkh_title">停车业务概览</div> |
|
|
|
{LeftShow.map((ele) => { |
|
|
|
return ( |
|
|
|
<div className="lf_s" key={ele.text}> |
|
|
|
<img src={ele.img} alt="" /> |
|
|
|
<div className="lf_num"> |
|
|
|
<div className="pldf"> |
|
|
|
<p title={ele.value}>{ele.value}</p> |
|
|
|
<i>{ele.status}</i> |
|
|
|
</div> |
|
|
|
<span>{ele.text}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
); |
|
|
|
})} |
|
|
|
</div> |
|
|
|
<div className="input_h"> |
|
|
|
<Select |
|
|
|
defaultValue="1" |
|
|
|
style={{ |
|
|
|
width: 90, |
|
|
|
}} |
|
|
|
options={[ |
|
|
|
{ |
|
|
|
value: "1", |
|
|
|
label: "停车场", |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: "2", |
|
|
|
label: "位置", |
|
|
|
}, |
|
|
|
]} |
|
|
|
onChange={(e) => {}} |
|
|
|
/> |
|
|
|
<AutoComplete |
|
|
|
style={{ |
|
|
|
width: 250, |
|
|
|
}} |
|
|
|
></AutoComplete> |
|
|
|
</div> |
|
|
|
<div className="show_c"> |
|
|
|
<div className="lf_num"> |
|
|
|
<div className="pldf"> |
|
|
|
<p title={448.0}>{448.0}</p> |
|
|
|
<i>元</i> |
|
|
|
</div> |
|
|
|
<span>今日收入</span> |
|
|
|
</div> |
|
|
|
<div className="lf_num"> |
|
|
|
<div className="pldf"> |
|
|
|
<p title={448.0}>{448.0}</p> |
|
|
|
<i>次</i> |
|
|
|
</div> |
|
|
|
<span>今日服务车次数</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<BaseMap></BaseMap> |
|
|
|
<div className="pk_footer"> |
|
|
|
<div className="f_center"> |
|
|
|
<div className="f_x"> |
|
|
|
{Road.map((ele) => { |
|
|
|
return ( |
|
|
|
<p |
|
|
|
key={ele.value} |
|
|
|
className={ |
|
|
|
RoadSelect == ele.value |
|
|
|
? "tab_road select_road" |
|
|
|
: "tab_road" |
|
|
|
} |
|
|
|
onClick={() => BottomTab(ele.value)} |
|
|
|
> |
|
|
|
{ele.text} |
|
|
|
{RoadSelect == ele.value ? <img src={Btckd} alt="" /> : ""} |
|
|
|
</p> |
|
|
|
); |
|
|
|
})} |
|
|
|
</div> |
|
|
|
<div className="f_q"> |
|
|
|
<div className="q" onClick={() => BottomCar("left")}> |
|
|
|
<img src={Pkhl} alt="" srcset="" /> |
|
|
|
</div> |
|
|
|
<p className="taw" title={CarRoad[CarShow]?.text || ""}> |
|
|
|
{CarRoad[CarShow]?.text || ""} |
|
|
|
</p> |
|
|
|
<div className="q" onClick={() => BottomCar("right")}> |
|
|
|
<img src={Pkhr} alt="" srcset="" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
); |
|
|
|
} |
|
|
|
|
|
|
|
export default ParkingOverview; |
