diff --git a/src/pages/DataAnalysisPrediction/MemberStat/ParkingAly/index.scss b/src/pages/DataAnalysisPrediction/MemberStat/ParkingAly/index.scss index 67fcb3f..ef01119 100644 --- a/src/pages/DataAnalysisPrediction/MemberStat/ParkingAly/index.scss +++ b/src/pages/DataAnalysisPrediction/MemberStat/ParkingAly/index.scss @@ -11,50 +11,62 @@ $color-primary : var(--color-primary); -.paid-schedule{ +.paid-schedule { display: flex; padding: 15px; width: 100%; - .paid-search{ - .search{ + + .paid-search { + .search { font-size: 16px; font-family: Microsoft YaHei, Microsoft YaHei-Bold; font-weight: 700; text-align: left; color: #eeeff1; } - label{ - margin:0 10px; + + label { + margin: 0 10px; } - .yisa-search{ + + .yisa-search { margin-top: 10px; display: flex; - label{ + + label { line-height: 31px; } } - .ant-select:not(.ant-select-customize-input) .ant-select-selector{ + + .ant-select:not(.ant-select-customize-input) .ant-select-selector { background-color: #50586c !important; } - .ant-select-arrow .anticon{ + + .ant-select-arrow .anticon { background-color: #50586c !important; } - .ant-input:placeholder-shown{ + + .ant-input:placeholder-shown { background-color: #50586c !important; } - .timePicker{ + + .timePicker { width: 350px; margin-top: 22px; - .btnBox{ - display:flex ; - margin-top: 20px; - .yisa-btn{ - margin-left: 20px; - width: 130px; - } - .root_gfkk{ - margin-left: 20px; - .export-content{ + + .btnBox { + display: flex; + margin-top: 20px; + + .yisa-btn { + margin-left: 20px; + width: 130px; + } + + .root_gfkk { + margin-left: 20px; + + .export-content { width: 130px; height: 33px; display: flex; @@ -66,48 +78,55 @@ $color-primary : var(--color-primary); color: #fff; margin-right: 10px; } - } - } + + } } } - .paid-result{ + + .paid-result { width: 100%; height: 834px; background: #505a6f; border-radius: 20px; margin-left: 17px; - .result{ + + .result { padding: 25px; - .font{ + + .font { font-family: Microsoft YaHei, Microsoft YaHei-Regular; font-weight: 400; text-align: left; color: #eeeff1; margin-bottom: 10px; display: inline-block; - - em{ + + em { color: #3aa8fe; margin: 0 5px; } } - .yisa-table .ant-table-thead .ant-table-cell{ + + .yisa-table .ant-table-thead .ant-table-cell { background-color: #616b83 !important; - color: #ffffff !important; - font-size: 14px; - font-family: Microsoft YaHei, Microsoft YaHei-Bold; - font-weight: 700; + color: #ffffff !important; + font-size: 14px; + font-family: Microsoft YaHei, Microsoft YaHei-Bold; + font-weight: 700; text-align: center; border-right: none !important; border-top-color: #888f9d !important; border-color: #888f9d !important; } - .ant-table.ant-table-bordered>.ant-table-container>.ant-table-content>table, .ant-table.ant-table-bordered>.ant-table-container>.ant-table-header>table{ + + .ant-table.ant-table-bordered>.ant-table-container>.ant-table-content>table, + .ant-table.ant-table-bordered>.ant-table-container>.ant-table-header>table { border-top: none !important; border-left: none !important; } - .ant-table-tbody .ant-table-row .ant-table-cell{ + + .ant-table-tbody .ant-table-row .ant-table-cell { background-color: #3e4557 !important; color: #ffffff !important; text-align: center; @@ -119,20 +138,23 @@ $color-primary : var(--color-primary); border-bottom-color: #626b7e !important; } } - + } } -.revenue{ - .tab-title{ + +.revenue { + .tab-title { text-align: center; font-size: 18px; font-weight: 400; font-family: Microsoft YaHei, Microsoft YaHei-Regular; } + width: 700px !important; - .tab-index{ - .tab-top{ + + .tab-index { + .tab-top { display: flex; margin-top: 10px; height: 30px; @@ -140,21 +162,24 @@ $color-primary : var(--color-primary); white-space: nowrap; overflow: hidden; border-bottom: 1px solid #e4e7ed; - .tab-li{ + + .tab-li { margin-left: 20px; cursor: pointer; } - .active{ - color:#409eff ; + + .active { + color: #409eff; cursor: pointer; margin-left: 20px; border-bottom: 1px solid #409eff !important; margin-bottom: -1px !important; } } - .tab-bottom{ - .yisa-tab{ - .ant-table-cell{ + + .tab-bottom { + .yisa-tab { + .ant-table-cell { background-color: #616b83 !important; color: #ffffff !important; font-size: 14px; @@ -169,51 +194,368 @@ $color-primary : var(--color-primary); } } } -.scheduleBtn{ + +.scheduleBtn { background: #409eff; - border: none; - width: 50px; - border-radius: 4px; - cursor: pointer; + border: none; + width: 50px; + border-radius: 4px; + cursor: pointer; } -.operateBtn{ - div{ + +.operateBtn { + div { cursor: pointer; margin-top: 5px; } } -.selectChance{ + +.selectChance { padding: 20px; - .timeChance{ + + .timeChance { margin-left: 10px; - span{ + + span { color: #aaa; } } - .yisa-search{ + + .yisa-search { margin-top: 20px; } - .submitBtn{ + + .submitBtn { text-align: center; margin-top: 20px; - .submit{ + + .submit { width: 80px; - height: 35px; - background: #409eff; - border: none; - border-radius: 4px; - cursor: pointer; - color: #fff; + height: 35px; + background: #409eff; + border: none; + border-radius: 4px; + cursor: pointer; + color: #fff; } - .cancel{ - width: 80px; - height: 35px; - background: #fff; - border: none; - border-radius: 4px; - color: #3e4557; - cursor: pointer; - margin-left: 20px; + + .cancel { + width: 80px; + height: 35px; + background: #fff; + border: none; + border-radius: 4px; + color: #3e4557; + cursor: pointer; + margin-left: 20px; } } } + +.ParkingAly { + padding: 10px 0 10px 20px; + height: 100%; + position: relative; + + .hfts { + position: absolute; + width: 390px; + margin-bottom: 0%; + // background: rgba(254, 242, 213, .47); + color: #FFCC3F; + font-size: 16px; + // position: relative; + right: 20px; + top: 0px; + background: var(--color-table-body-bg-nth-child-even); + border-radius: 4px; + border-left: #FFCC3F 3px solid; + padding: 10px 8px; + z-index: 1; + display: flex; + + .anticon-info-circle { + padding-top: 6px; + margin-right: 4px; + } + + .adfg { + position: absolute; + right: 4px; + top: 0%; + cursor: pointer; + + svg { + width: 16px; + height: 16px; + } + } + } + + .ttopi p { + margin-bottom: 0; + } + + .body_cenf { + display: flex; + height: 100%; + + .left_search { + width: 370px; + height: 100%; + + .hrestit { + height: 21px; + width: 370px; + font-size: 16px; + font-family: Microsoft YaHei, Microsoft YaHei-Bold; + font-weight: 700; + text-align: left; + margin: 10px 0 10px; + } + + .form_item { + width: 100%; + display: flex; + align-items: center; + padding: 0 10px 16px 0; + + .lab { + width: 90px; + text-align: right; + margin-right: 10px; + } + + .labb { + width: 90px; + text-align: right; + margin-right: 10px; + // display: flex; + display: flex; + align-items: center; + + .daf { + margin-left: 4px; + // border: 1px solid var(--color-table-border-bottom-color); + } + } + + .labs { + width: 120px; + text-align: right; + // border: 1px solid var(--color-table-border-bottom-color); + margin-right: 10px; + } + + .inputs { + flex: 1; + // border: 1px solid var(--color-table-border-bottom-color); + border-radius: 4px; + overflow: hidden; + } + + .inputst { + // flex: 228px; + // border: 1px solid var(--color-table-border-bottom-color); + border-radius: 4px; + overflow: hidden; + } + } + + .but_on { + display: flex; + // align-items: center; + margin: 0 10px 0 0; + justify-content: space-between; + font-size: 16px; + font-size: 16px; + + span { + width: 110px; + height: 36px; + border-radius: 4px; + color: #ffffff; + margin-right: 10px; + text-align: center; + line-height: 36px; + cursor: pointer; + } + + .sear_ser, + .sear_rep { + background: linear-gradient(180deg, #3aa9ff, #59b7ff); + } + + .sear_res { + background: #636d80; + } + + .lent { + width: 230px; + margin-left: 20px; + } + } + } + + .right_tab { + width: calc(100% - 370px); + height: 100%; + padding: 20px; + background: var(--color-user-list-bg); + box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.12); + border-radius: 28px 0 0 0; + + .result-box { + color: #ffffff; + background: #3e4557; + border-radius: 4px; + margin-bottom: 20px; + + .result-box-title { + height: 21px; + font-size: 16px; + font-family: Microsoft YaHei, Microsoft YaHei-Bold; + font-weight: 700; + text-align: left; + margin: 18px 0 18px 18px; + display: inline-block; + + } + + i { + border: 1px solid; + border-radius: 22px; + display: inline-block; + text-align: center; + font-size: 12px; + width: 22px; + cursor: pointer; + } + + .bhd-select { + float: right; + margin: 12px 28px; + } + + .ant-table .ant-table-thead tr th { + background: #3e4557; + } + } + + .sd { + display: flex; + justify-content: space-between; + margin-bottom: 12px; + + p { + margin-bottom: 0%; + font-size: 14px; + color: $color-text; + + span { + font-weight: 700; + margin: 0 4px; + color: $color-primary; + } + } + + + .sear_ser { + display: block; + width: 68px; + height: 34px; + border-radius: 4px; + color: #ffffff; + text-align: center; + line-height: 34px; + cursor: pointer; + background: linear-gradient(180deg, #3aa9ff, #59b7ff); + } + } + + .scrplltab { + width: 100%; + overflow-x: scroll; + // position: relative; + @include scrollBar(var(--color-user-list-bg), #3B97FF); + + .poxi { + cursor: pointer; + background-color: var(--color-table-header-bg); + width: 24px; + height: 50px; + position: fixed; + right: 20px; + top: 277px; + padding: 10px 8px; + z-index: 12; + + .colsa { + color: #3AA9FF; + } + } + + .showas { + top: 477px + } + } + + + .yisa_tabled { + width: 100%; + + .ant-table-thead { + th { + border: rgba(255, 255, 255, .08) 1px solid; + // background: var(--color-table-header-bg) !important; + + i { + cursor: pointer; + margin-left: 10px; + display: inline-block; + width: 14px; + height: 14px; + border: solid 1px $color-text; + border-radius: 7px; + line-height: 14px; + text-align: center; + } + + &::before { + display: none; + } + } + + .ant-table-selection-column { + text-align: center; + padding: 0; + } + } + + .ant-table-body { + @include scrollBar(var(--color-user-list-bg), #3B97FF); + + } + + // .ant-table-tbody { + // td { + // background: var(--color-table-body-bg) !important; + // border-bottom-color: var(--color-table-border-bottom-color); + // } + + // tr:nth-child(even) { + // td { + // background: var(--color-table-body-bg-nth-child-even) !important; + // } + // } + + // tr:nth-child(odd) { + // td { + // background: var(--color-table-body-bg-nth-child-even) !important; + // } + // } + // } + } + } + } +} \ No newline at end of file diff --git a/src/pages/DataAnalysisPrediction/MemberStat/ParkingAly/loadable.jsx b/src/pages/DataAnalysisPrediction/MemberStat/ParkingAly/loadable.jsx index 427bf43..b68159d 100644 --- a/src/pages/DataAnalysisPrediction/MemberStat/ParkingAly/loadable.jsx +++ b/src/pages/DataAnalysisPrediction/MemberStat/ParkingAly/loadable.jsx @@ -1,15 +1,694 @@ import React, { useState, useRef, useEffect } from "react"; -// import { message, Pagination, Table, Space, Modal, } from "antd"; -// import { dictionary, utils } from "@/config/common"; -// import moment from 'moment' +import { + message, + Pagination, + Table, + Select, + Input, + Popover, + Cascader, + AutoComplete, + Tooltip, + Checkbox, + Form, + DatePicker, +} from "antd"; +import { dictionary, utils } from "@/config/common"; +import moment from "moment"; +import ReactEcharts from "echarts-for-react"; +import ajax from "@/services"; // 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 errorImg from "@/assets/images/layout/error.png" -// import { useLocation } from "react-router-dom"; -function ParkingAly() {//停车分析 - return
ParkingAly
+import { ResultFlow } from "@/components"; +import "./index.scss"; + +function ParkingAly() { + //停车分析 + //页面检索-重复 + const formdata = { + operator_id: "0", //商户 + park_type: "", //车场类型 1=路内 2=路外 + date_type: "1", + is_excel: 0, + start_time: moment().startOf("day").format("YYYY-MM-DD"), + end_time: moment().endOf("day").format("YYYY-MM-DD"), + pn: 1, + page_size: dictionary?.pageSizeOptions1[0], + }; + const col = [ + { + title: "日期", + dataIndex: "date", + key: "date", + align: "center", + }, + { + title: "会员停车次数(次)", + dataIndex: "date", + key: "date", + align: "center", + }, + { + title: "非会员停车次数(次)", + dataIndex: "date", + key: "date", + align: "center", + }, + { + title: "会员停车占比", + dataIndex: "date", + key: "date", + align: "center", + }, + ]; + let form_data = sessionStorage.getItem("FormData_ParkingAly"); + //检索 + const [FormData, setFormData] = useState( + form_data ? JSON.parse(form_data) : formdata + ); + //检索2 + const [FormDatas, setFormDatas] = useState( + form_data ? JSON.parse(form_data) : formdata + ); + //页码状态 + const [loading, setLoading] = useState(false); + //页面数据 + const [Data, setData] = useState({ + data: [], + total: 0, + }); + const [revenueData, setRevenueData] = useState({}); + + //获取区域 + const [Area, setArea] = useState([]); + //商户 + const [Yunying, setYunying] = useState([]); + //自动填充 + const [options, setOptions] = useState([]); + + const [Open, setOpen] = useState(true); + //筛选 + const [selectArr, setSelectArr] = useState([]); + //是否展开显示 + const [Show, setShow] = useState(false); + const column = (arr) => { + let copr = []; + if (arr.length) { + col.forEach((ele, index) => { + if (ele.children) { + var lisr = []; + let bool = false; + ele.children.forEach((val) => { + if (!arr.includes(val.key)) { + lisr.push(val); + bool = true; + } + }); + if (bool) { + copr.push({ ...ele, children: [...lisr] }); + } + } else { + if (!arr.includes(ele.key)) { + copr.push(ele); + } + } + }); + } else { + copr = col; + } + return [...copr]; + }; + const onSearch = (searchText) => { + console.log(searchText); + setOptions([]); + }; + + //时间状态切换 + 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().format("YYYY-MM"); + end = moment().format("YYYY-MM"); + } 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, + }); + }; + + //页码 + function onShowSizeChange(pn, page_size) { + let temFormData = {}; + if (FormData.page_size == page_size) { + temFormData = { + ...FormData, + pn, + }; + } else { + temFormData = { + ...FormData, + pn: 1, + page_size, + }; + } + setFormData(temFormData); + setFormDatas(temFormData); + } + + //获取页面筛选数据 + const getSelectData = () => { + ajax.getAllOperator().then( + (res) => { + if (parseInt(res?.status) === 20000) { + setYunying(res.data); + } else { + message.error(res?.message); + } + setLoading(true); + }, + (err) => { + console.log(err); + setLoading(true); + } + ); + }; + //下载 + const Daownload = (url) => { + var link = document.createElement("a"); + link.setAttribute("target", "_blank"); + link.style.display = "none"; + link.href = url ? url : ""; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + }; + //导出 + const ReportPaySummaryReport = () => { + ajax.ElectInvoice.getOperationReport({ + ...FormDatas, + is_excel: 1, + }).then( + (res) => { + if (parseInt(res?.status) === 20000) { + Daownload(res?.data?.url); + } else { + message.error(res?.message); + } + }, + (err) => { + console.log(err); + } + ); + }; + const filterad = (dates, data, name) => { + const areaData = data.filter((item) => item.type === name); + const arr = dates.map((item) => { + for (const { pay_date, income } of areaData) { + console.log(pay_date, income); + if (pay_date === item) return income; + } + return 0; + }); + return arr; + }; + const getRevenueOption = ( + data = [ + { + income: 4, + // area: "1", + pay_date: "2023-08-21", + type: "非会员停车次数", + }, + { + income: 14, + // area: "1", + pay_date: "2023-08-21", + type: "会员停车次数", + }, + { + income: 12, + // area: "2", + pay_date: "2023-08-19", + type: "会员停车次数", + }, + { + income: 40, + // area: "1", + pay_date: "2023-08-25", + type: "非会员停车次数", + }, + ] + ) => { + // 获取所有地区名称 + data.sort((a, b) => { + return new Date(a.pay_date) - new Date(b.pay_date); + }); + const areaNames = [...new Set(data.map((item) => item.type))]; + // 获取所有日期 + const dates = [...new Set(data.map((item) => item.pay_date))].sort( + (a, b) => a.pay_date - b.pay_date + ); + // 构建X轴数据 + const xAxisData = dates.map((date) => { + return { + value: date, + textStyle: { + align: "center", + lineStyle: { + color: "#3AA9FF", // 设置线的颜色为天蓝色 + shadowBlur: 6, + }, + }, + }; + }); + + setRevenueData({ + title: { + text: "", + textStyle: { + color: "#fff", + }, + }, + tooltip: { + trigger: "axis", + formatter: (params) => { + return `
+

${params[0].axisValue}

+

+ ${params[0].marker} ${params[0].seriesName} ${ + params[0].data + }(次) +

+

+ ${params[1].marker} ${params[1].seriesName} ${ + params[1].data + }(次) +

+

停车记录总数 ${params[0].data + params[1].data}(次)

+
`; + }, + }, + legend: { + type: "scroll", + top: 0, + left: "center", + data: areaNames, + itemWidth: 18, + itemHeight: 12, + width: "40%", + textStyle: { + fontSize: 14, + color: "white", + }, + }, + xAxis: { + data: xAxisData, + type: "category", + boundaryGap: false, // 不留白，从原点开始 + axisLine: { + lineStyle: { + color: "#bbb", + }, + }, + axisLabel: { + textStyle: { + color: "#bbb", + }, + }, + }, + yAxis: { + type: "value", + name: "停车次数（次）", + min: 0, + // /max: 50, + interval: 10, + splitNumber: 6, //设置坐标轴的分割段数 + axisLabel: { + //formatter: "{value}元", + textStyle: { + color: "#bbb", + }, + }, + splitLine: { + show: true, // 是否显示分隔线。默认数值轴显示，类目轴不显示 + interval: "0", // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有 + lineStyle: { + color: ["#cccccc42"], // 分隔线颜色，可以设置成单个颜色，也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色 + width: 1.3, // 分隔线线宽 + type: "dashed", // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型） + }, + }, + }, + color: ["#3AA9FF", "#F997DF"], + //series: seriesData, + series: [ + { + name: "非会员停车次数", + type: "line", + data: filterad(dates, data, "非会员停车次数"), + }, + { + name: "会员停车次数", + type: "line", + data: filterad(dates, data, "会员停车次数"), + }, + ], + grid: { + x: 50, + y: 55, + x2: 70, + y2: 20, + }, + }); + }; + //获取页面显示数据 + const getData = (data) => { + setLoading(false); + ajax.ElectInvoice.getOperationReport({ + ...data, + area: data?.area?.length ? data?.area[data.area.length - 1] : "", + }).then( + (res) => { + if (parseInt(res?.status) === 20000) { + setData({ + data: res?.data?.list || [], + total: res?.total || 0, + }); + setLoading(true); + } else { + message.error(res?.message); + } + setLoading(true); + }, + (err) => { + console.log(err); + setLoading(true); + } + ); + }; + useEffect(() => { + sessionStorage.setItem("FormData_ParkingAly", JSON.stringify(FormDatas)); + // getData(FormDatas); + //调用接口 + }, [FormDatas]); + useEffect(() => { + getSelectData(); + getRevenueOption(); + }, []); + return ( +
+
+
+
查询条件
+ +
+ 运营商 +
+ + setFormData({ + ...FormData, + park_type: e, + }) + } + /> +
+
+
+
+ 日期 +
+ SetTimeNow(e)} + /> +
+
+
+ { + 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 { + setFormData({ ...FormData, start_time: dateString }); + } + }} + disabledDate={(current) => current > moment(FormData.end_time)} + /> +
+
+
+ 至 +
+ { + 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 { + setFormData({ ...FormData, end_time: dateString }); + } + }} + disabledDate={(current) => + current < moment(FormData.start_time) + } + /> +
+
+
+ { + var reset = formdata; + setFormData(reset); + setFormDatas(reset); + }} + > + 重置 + + { + var fortm = FormData; + setFormData({ + ...fortm, + pn: 1, + }); + setFormDatas({ + ...fortm, + pn: 1, + }); + }} + > + 查询 + +
+
+
+
+
+
泊位占用率
+ + 展示当前的实时泊位利用率泊位利用率=占用泊位数/总泊位数*100% + + } + > + ? + + +
+
+
在场会员车占比
+ + 展示当前的在场会员车占比在场会员车占比=场内会员车辆数/场内车辆总数*100% + + } + > + ? + + +
+
+
+
新增用户趋势图
+ 展示统计时间段内每日或每月产生的注册会员数量趋势 + } + > + ? + + +
+
+

+ 共查询到 {Data?.total || 0}条数据 +

+ { + ReportPaySummaryReport(); + // setFormDatas({ ...FormData }); + }} + > + 导出 + +
+ +
+
+ record.id} + dataSource={Data.data} + pagination={false} + scroll={{ + // x: 1300, + y: "calc(100vh - 720px)", + }} + /> + + + +
+ `共 ${total_records} 条`} + total={Data.total} + current={FormData.pn} + pageSize={FormData.page_size} + pageSizeOptions={dictionary?.pageSizeOptions} + onChange={onShowSizeChange} + onShowSizeChange={onShowSizeChange} + /> +
+ + + + + ); } -export default RegisterAly; \ No newline at end of file +export default RegisterAly;