diff --git a/src/assets/images/equip/home/bottom_checked.png b/src/assets/images/equip/home/bottom_checked.png new file mode 100644 index 0000000..222e5b2 Binary files /dev/null and b/src/assets/images/equip/home/bottom_checked.png differ diff --git a/src/assets/images/equip/home/left_1.png b/src/assets/images/equip/home/left_1.png new file mode 100644 index 0000000..5d4c396 Binary files /dev/null and b/src/assets/images/equip/home/left_1.png differ diff --git a/src/assets/images/equip/home/left_2.png b/src/assets/images/equip/home/left_2.png new file mode 100644 index 0000000..3902227 Binary files /dev/null and b/src/assets/images/equip/home/left_2.png differ diff --git a/src/assets/images/equip/home/left_3.png b/src/assets/images/equip/home/left_3.png new file mode 100644 index 0000000..b7630c0 Binary files /dev/null and b/src/assets/images/equip/home/left_3.png differ diff --git a/src/assets/images/equip/home/left_4.png b/src/assets/images/equip/home/left_4.png new file mode 100644 index 0000000..5ea0e88 Binary files /dev/null and b/src/assets/images/equip/home/left_4.png differ diff --git a/src/assets/images/equip/home/left_5.png b/src/assets/images/equip/home/left_5.png new file mode 100644 index 0000000..ef462f9 Binary files /dev/null and b/src/assets/images/equip/home/left_5.png differ diff --git a/src/assets/images/equip/home/left_6.png b/src/assets/images/equip/home/left_6.png new file mode 100644 index 0000000..1d03cc5 Binary files /dev/null and b/src/assets/images/equip/home/left_6.png differ diff --git a/src/assets/images/equip/home/left_7.png b/src/assets/images/equip/home/left_7.png new file mode 100644 index 0000000..991baf6 Binary files /dev/null and b/src/assets/images/equip/home/left_7.png differ diff --git a/src/assets/images/equip/home/pkhome_left.png b/src/assets/images/equip/home/pkhome_left.png new file mode 100644 index 0000000..d2296a6 Binary files /dev/null and b/src/assets/images/equip/home/pkhome_left.png differ diff --git a/src/assets/images/equip/home/pkhome_right.png b/src/assets/images/equip/home/pkhome_right.png new file mode 100644 index 0000000..7dab63e Binary files /dev/null and b/src/assets/images/equip/home/pkhome_right.png differ diff --git a/src/assets/images/equip/home/pvhome_footer.png b/src/assets/images/equip/home/pvhome_footer.png new file mode 100644 index 0000000..b405161 Binary files /dev/null and b/src/assets/images/equip/home/pvhome_footer.png differ diff --git a/src/assets/images/equip/home/pvhome_header.png b/src/assets/images/equip/home/pvhome_header.png new file mode 100644 index 0000000..f88e39a Binary files /dev/null and b/src/assets/images/equip/home/pvhome_header.png differ diff --git a/src/assets/images/equip/home/pvhome_title.png b/src/assets/images/equip/home/pvhome_title.png new file mode 100644 index 0000000..c63ea9c Binary files /dev/null and b/src/assets/images/equip/home/pvhome_title.png differ diff --git a/src/assets/images/equip/home/pvhome_topbk.png b/src/assets/images/equip/home/pvhome_topbk.png new file mode 100644 index 0000000..90f5288 Binary files /dev/null and b/src/assets/images/equip/home/pvhome_topbk.png differ diff --git a/src/assets/images/equip/home/right_checked.png b/src/assets/images/equip/home/right_checked.png new file mode 100644 index 0000000..8770773 Binary files /dev/null and b/src/assets/images/equip/home/right_checked.png differ diff --git a/src/pages/DataAnalysisPrediction/ParkingOverview/index.scss b/src/pages/DataAnalysisPrediction/ParkingOverview/index.scss index 1838f71..187b8c5 100644 --- a/src/pages/DataAnalysisPrediction/ParkingOverview/index.scss +++ b/src/pages/DataAnalysisPrediction/ParkingOverview/index.scss @@ -3,3 +3,236 @@ $color-container-bg : var(--color-container-bg); $color-user-list-bg : var(--color-user-list-bg); $color-text : var(--color-text); $color-primary : var(--color-primary); + +.ParkingOverview { + width: 100%; + height: 100%; + position: relative; + + .pkh_title { + display: flex; + font-size: 16px; + padding: 6px 0 0 44px; + align-items: center; + width: 100%; + height: 50px; + background: url("../../../assets/images/equip/home/pvhome_title.png"); + } + + .pk_header { + position: fixed; + width: 100%; + height: 100px; + font-size: 36px; + font-family: Alibaba PuHuiTi, Alibaba PuHuiTi-Bold; + font-weight: 700; + display: flex; + justify-content: center; + align-items: flex-start; + color: #ffffff; + z-index: 1000; + background: url("../../../assets/images/equip/home/pvhome_header.png") no-repeat; + } + + .input_h { + z-index: 1000; + position: absolute; + top: 96px; + left: 392px; + width: 340px; + height: 34px; + background: #1e2635; + border: 1px solid #a9c6ff; + border-radius: 2px; + display: flex; + overflow: hidden; + } + + .show_c { + z-index: 1000; + position: absolute; + top: 96px; + left: 749px; + height: 100px; + display: flex; + width: 422px; + justify-content: space-between; + + .lf_num { + width: 200px; + padding: 10px; + height: 100%; + display: flex; + flex-direction: column; + background: url("../../../assets/images/equip/home/pvhome_topbk.png"); + justify-content: space-between; + + .pldf { + display: flex; + font-size: 28px; + font-family: Alibaba PuHuiTi, Alibaba PuHuiTi-Medium; + font-weight: bold; + height: 48px; + text-align: left; + color: #75bcff; + align-items: baseline; + justify-content: center; + + p { + max-width: 170px; + overflow: hidden; + text-overflow: ellipsis; + } + + i { + font-style: normal; + font-size: 14px; + // margin-left: -6px; + } + } + + span { + width: 180px; + line-height: 26px; + background: #75bcff; + cursor: pointer; + color: #1e2635; + text-align: center; + } + } + } + + .left_home { + z-index: 1000; + position: absolute; + top: 96px; + left: 50px; + width: 320px; + height: 84%; + background: rgba(30, 38, 53, 0.64); + display: flex; + flex-direction: column; + + p { + margin-bottom: 0%; + } + + .lf_s { + width: 100%; + display: flex; + padding: 14px 0 14px 20px; + + img { + width: 80px; + height: 80px; + margin-right: 20px; + } + + .lf_num { + display: flex; + flex-direction: column; + + .pldf { + display: flex; + font-size: 28px; + font-family: Alibaba PuHuiTi, Alibaba PuHuiTi-Medium; + font-weight: bold; + text-align: left; + color: #75bcff; + align-items: baseline; + + p { + max-width: 170px; + overflow: hidden; + text-overflow: ellipsis; + } + + i { + font-style: normal; + font-size: 14px; + // margin-left: -6px; + } + } + } + } + } + + .pk_footer { + z-index: 1000; + position: absolute; + bottom: 0%; + width: 100%; + height: 112px; + background: url("../../../assets/images/equip/home/pvhome_footer.png") no-repeat; + + + .f_center { + width: 300px; + height: 100%; + padding-top: 20px; + position: absolute; + left: 50%; + transform: translateX(-50%); + display: flex; + flex-direction: column; + + p { + margin-bottom: 0%; + } + } + + .f_x { + display: flex; + height: 48px; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 10px; + + .tab_road { + opacity: 0.5; + font-size: 14px; + font-family: Microsoft YaHei, Microsoft YaHei-Regular; + font-weight: 400; + text-align: center; + color: #ffffff; + width: 60px; + text-align: center; + cursor: pointer; + } + + .select_road { + opacity: 1; + display: flex; + flex-direction: column; + justify-content: space-between; + + align-items: center; + + img { + width: 11px; + height: 9px; + } + } + } + + .f_q { + position: relative; + display: flex; + height: 48px; + justify-content: space-between; + align-items: center; + + .taw { + width: 130px; + text-align: center; + overflow: hidden; + text-overflow: ellipsis; + } + + .q { + cursor: pointer; + } + } + } +} \ No newline at end of file diff --git a/src/pages/DataAnalysisPrediction/ParkingOverview/loadable.jsx b/src/pages/DataAnalysisPrediction/ParkingOverview/loadable.jsx index 88947be..5b816ea 100644 --- a/src/pages/DataAnalysisPrediction/ParkingOverview/loadable.jsx +++ b/src/pages/DataAnalysisPrediction/ParkingOverview/loadable.jsx @@ -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
ParkingOverview
+ //左侧展示栏 + 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 ( +
+
西海岸新区停车信息管理平台
+
+
停车业务概览
+ {LeftShow.map((ele) => { + return ( +
+ +
+
+

{ele.value}

+ {ele.status} +
+ {ele.text} +
+
+ ); + })} +
+
+