diff --git a/src/config/character.config.js b/src/config/character.config.js index f2d96ed..e02a0fd 100644 --- a/src/config/character.config.js +++ b/src/config/character.config.js @@ -934,7 +934,7 @@ export const lineChartOption = { { name: '', type: 'line', - stack: 'Total', + // stack: 'Total', symbolSize: 1, symbol: 'circle', showSymbol: false, diff --git a/src/pages/DataAnalysisPrediction/ParkingIncomeAly/ArrearageAly/Overview/index.jsx b/src/pages/DataAnalysisPrediction/ParkingIncomeAly/ArrearageAly/Overview/index.jsx index a6a48f2..810e85d 100644 --- a/src/pages/DataAnalysisPrediction/ParkingIncomeAly/ArrearageAly/Overview/index.jsx +++ b/src/pages/DataAnalysisPrediction/ParkingIncomeAly/ArrearageAly/Overview/index.jsx @@ -113,21 +113,18 @@ const Overview = forwardRef((props, ref) => { ...trendLineChartOption.series[0], name: '一类区', type: 'line', - stack: 'Total', data: [...stack1] }, { ...trendLineChartOption.series[0], name: '二类区', type: 'line', - stack: 'Total', data: [...stack2] }, { ...trendLineChartOption.series[0], name: '三类区', type: 'line', - stack: 'Total', data: [...stack3] } ] diff --git a/src/pages/DataAnalysisPrediction/ParkingIncomeAly/ArrearageRecoverAly/index.scss b/src/pages/DataAnalysisPrediction/ParkingIncomeAly/ArrearageRecoverAly/index.scss index 1838f71..0260095 100644 --- a/src/pages/DataAnalysisPrediction/ParkingIncomeAly/ArrearageRecoverAly/index.scss +++ b/src/pages/DataAnalysisPrediction/ParkingIncomeAly/ArrearageRecoverAly/index.scss @@ -1,5 +1,186 @@ @import "@/assets/css/mixin.scss"; + $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); + +.parking-container { + display: flex; + padding-top: 10px; + height: 100%; + .parking-container-left { + display: block; + width: 375px; + padding: 10px 10px 20px 20px; + } + .parking-container-right { + width: calc(100% - 375px); + padding-bottom: 15px; + padding: 20px; + background: var(--color-user-list-bg); + border-top-left-radius: 20px; + box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.08); + .ant-tabs .ant-tabs-nav-wrap .ant-tabs-nav-list { + width: unset; + } + .ant-tabs-tab { + padding: unset; + } + + .parking-content { + height: 100%; + display: flex; + flex-direction: column; + .parking-tabs { + margin-bottom: 10px; + } + .parking-wrapper { + flex: 1; + } + } + } +} +.parking-container { + .yisa-search { + width: 100%; + display: flex; + align-items: center; + margin-bottom: 24px; + + label { + color: var(--color-search-list-item-text); + flex: 0 0 27% !important; + max-width: 27% !important; + text-align: right; + padding-right: 8px; + } + + .form-con { + flex: 1; + width: 220px; + } + } + .form-btn { + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + // margin: 40px 0px 0px; + padding: 0 3px; + + .ant-btn+.ant-btn { + margin-left: 10px; + } + + .ant-btn span { + font-size: 16px; + font-family: Microsoft YaHei, Microsoft YaHei-Regular; + font-weight: 400; + text-align: center; + color: #ffffff; + } + + .reset { + width: 90px; + height: 36px; + background: var(--button-default-bg); + } + + .btn-export { + width: 90px; + height: 36px; + } + + .submit { + width: calc(100% - 100px); + height: 36px; + } + } + .ant-select-selector, + .ant-picker, + .ant-input { + background-color: var(--color-search-list-item-bg) !important; + box-shadow: none !important; + color: var(--color-search-list-item-value); + border-color: var(--color-search-list-item-bd) !important; + } + .ant-picker { + width: 100%; + } + .parking-search { + .title { + width: 100%; + font-size: 16px; + font-family: Microsoft YaHei, Microsoft YaHei-Bold; + font-weight: 700; + text-align: left; + color: var(--color-text); + margin-bottom: 20px; + } + } + .form-Wrap { + display: flex; + flex-direction: column; + } +} +.ant-cascader-menu { + width: 260px; +} + + +.parking-container-right { + .export-container { + margin-bottom: 10px; + text-align: right; + } + .parking-item { + height: 350px; + } + .park-table-content { + margin-top: 20px; + .park-table { + flex: 1; + .ant-table-body { + @include scrollBar(var(--color-user-list-bg), #3B97FF); + } + .ant-table-fixed-header .ant-table-tbody tr:nth-child(2n+1) > td { + background: unset !important; + background-color: #3e4557 !important; + } + } + } +} + +.parking-item { + color: #fff; + background: #3e4557; + border-radius: 4px; + display: flex; + flex-direction: column; + padding: 20px; + &-title { + height: 18px; + display: flex; + align-items: center; + position: relative; + text-indent: .5rem; + font-size: 16px; + font-weight: 700; + user-select: none; + &::before { + position: absolute; + content: ""; + height: 100%; + width: 4px; + left: -2px; + background: var(--color-menu-selected-text-item); + } + } + &-content { + flex: 1; + .echarts-for-react { + height: 100% !important; + } + } +} + diff --git a/src/pages/DataAnalysisPrediction/ParkingIncomeAly/ArrearageRecoverAly/loadable.jsx b/src/pages/DataAnalysisPrediction/ParkingIncomeAly/ArrearageRecoverAly/loadable.jsx index e1f1706..bc387c8 100644 --- a/src/pages/DataAnalysisPrediction/ParkingIncomeAly/ArrearageRecoverAly/loadable.jsx +++ b/src/pages/DataAnalysisPrediction/ParkingIncomeAly/ArrearageRecoverAly/loadable.jsx @@ -1,15 +1,434 @@ -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 { 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 ArrearageRecoverAly() { - return
ArrearageRecoverAly
+import React, { useState, useRef, useEffect } from "react" +import { Select, Input, Button, Table, message, Pagination, DatePicker, Cascader, Tooltip } from "antd" +import { ExportBtnNew, ResultFlowResult } from '@/components' +import { dictionary } from "@/config/common" +import ReactEcharts from "echarts-for-react" +import { lineChartOption } from "@/config/character.config" +import ajax from "@/services" +import moment from "moment" +import './index.scss' + +function ArrearageRecoverAly(props) { + const { + + } = props + + const [loading, setLoading] = useState(false) + const defaultFormData = { + region: [], + operator_id: "0", + park_type: 0, + date_type: "day", + start_time: "", + end_time: "", + park_bussiness_type: 0 + } + const [formData, setFormData] = useState({ + ...defaultFormData + }) + const [pageInfo, setPageInfo] = useState({ + pn: 1, + length: 10 + }) + const [resultData, setResultDate] = useState({ + list: [], + totalRecords: 0 + }) + const [lineOption, setLineOptions] = useState({...lineChartOption}) + const [areaList, setAreaList] = useState([]) + const [Yunying, setYunying] = useState([]) + const tableColumns = [ + { + title: "序号", + width: 60, + align: 'center', + render: (text, record, index) => index + 1, + }, + { + title: "地区", + align: 'center', + dataIndex: "area", + }, + { + title: "区间范围", + align: 'center', + dataIndex: "date", + }, + { + title: "欠费金额", + align: 'center', + dataIndex: "money", + } + ] + const paginationProps = { + className: "pagination-common", + showQuickJumper: true, + showSizeChanger: true, + current: pageInfo.pn, + total: resultData?.totalRecords, + pageSize: pageInfo.length, + pageSizeOptions: Array.from( + new Set([...[15], ...(dictionary?.pageSizeOptions || [])]) + ), + onChange: (current, size) => { + setPageInfo({ + ...pageInfo, + ...{ pn: current, length: size } + }); + } + } + const ajaxGetAreaData = () => { + ajax.getAreaTree().then((res) => { + if (res.status === 20000) { + setAreaList(res.data); + } + }).catch((err) => { + console.error(err) + }); + } + const ajaxGetOperatorData = () => { + ajax.getAllOperator().then((res) => { + if (parseInt(res?.status) === 20000) { + setYunying(res.data); + } else { + message.error(res?.message); + } + }).catch(err => { + console.log(err) + }) + } + const ajaxGetListData = () => { + setLoading(true) + ajax.getArrearCatchData({...formData}).then(res => { + if (res.status == 20000) { + setResultDate({ + list: res.data.list, + totalRecords: res.totalRecords || 0 + }) + initTrendLineChart([...res.data.trend]) + } + setLoading(false) + }) + } + + const initTrendLineChart = (data) => { + setLineOptions({ + ...lineOption, + xAxis: { + ...lineOption.xAxis, + data: [...data[0]?.data.map(item => item.name)] + }, + // series: [ + // { + // ...lineOption.series[0], + // name: '应收金额', + // type: 'line', + // stack: 'Total', + // data: [...data.map((item) => item.ys)] + // }, + // { + // ...lineOption.series[0], + // name: '欠费金额', + // type: 'line', + // stack: 'Total', + // data: [...data.map((item) => item.qf)] + // } + // ], + series: Array(data.length).fill(0).map((_, i) => ({ + ...lineOption.series[0], + name: data[i].area, + type: 'line', + // stack: 'Total', + data: [...data[i].data.map((item) => item.value)] + })) + }) + } + + const TimeChange = () => { + let e = formData.date_type; + let str = "day"; + let mat = "YYYY-MM-DD"; + if (e == "year") { + str = "year"; + mat = "YYYY"; + } else if (e == "month") { + str = "month"; + mat = "YYYY-MM"; + } else if (e == "week") { + str = "week"; + mat = "YYYY-MM-DD"; + } + return { str, mat }; + } + + const SetTimeNow = (e) => { + let start = ""; + let end = ""; + if (e == 'year') { + start = moment().format("YYYY"); + end = moment().format("YYYY"); + } else if (e == 'month') { + start = moment().format("YYYY-MM"); + end = moment().format("YYYY-MM"); + } else if (e == 'week') { + 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 handleReset = () => { + setFormData({ + ...defaultFormData + }) + } + + const handleSearch = () => { + ajaxGetListData() + } + + useEffect(() => { + ajaxGetAreaData() + ajaxGetOperatorData() + ajaxGetListData() + }, []) + + return ( +
+
+
+
查询条件
+
+
+ + { + setFormData({ ...formData, region: v ? v : null }); + }} + /> +
+
+ + + setFormData({ + ...formData, + operator_id: 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) + } + /> +
+
+ + +
+
+
+
+
+
+ 导出} + modalType="noImg" + totalRecords={resultData.totalRecords} + exportUrl="/api/dataAnalysis/arrearsOrder/export" + postdata={{ + formData: {...formData} + }} + imgno={false} + /> +
+
+
各区域欠费趋势图
+
+ +
+
+
+ + + {/* */} + + + + + ) } export default ArrearageRecoverAly; \ No newline at end of file diff --git a/src/pages/DataAnalysisPrediction/ParkingIncomeAly/CityArrearageAly/index.scss b/src/pages/DataAnalysisPrediction/ParkingIncomeAly/CityArrearageAly/index.scss index 1838f71..c7b7503 100644 --- a/src/pages/DataAnalysisPrediction/ParkingIncomeAly/CityArrearageAly/index.scss +++ b/src/pages/DataAnalysisPrediction/ParkingIncomeAly/CityArrearageAly/index.scss @@ -1,5 +1,186 @@ @import "@/assets/css/mixin.scss"; + $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); + +.parking-container { + display: flex; + padding-top: 10px; + height: 100%; + .parking-container-left { + display: block; + width: 375px; + padding: 10px 10px 20px 20px; + } + .parking-container-right { + width: calc(100% - 375px); + padding-bottom: 15px; + padding: 20px; + background: var(--color-user-list-bg); + border-top-left-radius: 20px; + box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.08); + .ant-tabs .ant-tabs-nav-wrap .ant-tabs-nav-list { + width: unset; + } + .ant-tabs-tab { + padding: unset; + } + + .parking-content { + height: 100%; + display: flex; + flex-direction: column; + .parking-tabs { + margin-bottom: 10px; + } + .parking-wrapper { + flex: 1; + } + } + } +} +.parking-container { + .yisa-search { + width: 100%; + display: flex; + align-items: center; + margin-bottom: 24px; + + label { + color: var(--color-search-list-item-text); + flex: 0 0 27%; + max-width: 27%; + text-align: right; + padding-right: 8px; + } + + .form-con { + flex: 1; + width: 220px; + } + } + .form-btn { + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + // margin: 40px 0px 0px; + padding: 0 3px; + + .ant-btn+.ant-btn { + margin-left: 10px; + } + + .ant-btn span { + font-size: 16px; + font-family: Microsoft YaHei, Microsoft YaHei-Regular; + font-weight: 400; + text-align: center; + color: #ffffff; + } + + .reset { + width: 90px; + height: 36px; + background: var(--button-default-bg); + } + + .btn-export { + width: 90px; + height: 36px; + } + + .submit { + width: calc(100% - 100px); + height: 36px; + } + } + .ant-select-selector, + .ant-picker, + .ant-input { + background-color: var(--color-search-list-item-bg) !important; + box-shadow: none !important; + color: var(--color-search-list-item-value); + border-color: var(--color-search-list-item-bd) !important; + } + .ant-picker { + width: 100%; + } + .parking-search { + .title { + width: 100%; + font-size: 16px; + font-family: Microsoft YaHei, Microsoft YaHei-Bold; + font-weight: 700; + text-align: left; + color: var(--color-text); + margin-bottom: 20px; + } + } + .form-Wrap { + display: flex; + flex-direction: column; + } +} +.ant-cascader-menu { + width: 260px; +} + + +.parking-container-right { + .export-container { + margin-bottom: 10px; + text-align: right; + } + .parking-item { + height: 350px; + } + .park-table-content { + margin-top: 20px; + .park-table { + flex: 1; + .ant-table-body { + @include scrollBar(var(--color-user-list-bg), #3B97FF); + } + .ant-table-fixed-header .ant-table-tbody tr:nth-child(2n+1) > td { + background: unset !important; + background-color: #3e4557 !important; + } + } + } +} + +.parking-item { + color: #fff; + background: #3e4557; + border-radius: 4px; + display: flex; + flex-direction: column; + padding: 20px; + &-title { + height: 18px; + display: flex; + align-items: center; + position: relative; + text-indent: .5rem; + font-size: 16px; + font-weight: 700; + user-select: none; + &::before { + position: absolute; + content: ""; + height: 100%; + width: 4px; + left: -2px; + background: var(--color-menu-selected-text-item); + } + } + &-content { + flex: 1; + .echarts-for-react { + height: 100% !important; + } + } +} + diff --git a/src/pages/DataAnalysisPrediction/ParkingIncomeAly/CityArrearageAly/loadable.jsx b/src/pages/DataAnalysisPrediction/ParkingIncomeAly/CityArrearageAly/loadable.jsx index 0c58c27..fa55d35 100644 --- a/src/pages/DataAnalysisPrediction/ParkingIncomeAly/CityArrearageAly/loadable.jsx +++ b/src/pages/DataAnalysisPrediction/ParkingIncomeAly/CityArrearageAly/loadable.jsx @@ -1,15 +1,434 @@ -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 { 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 CityArrearageAly() { - return
CityArrearageAly
+import React, { useState, useRef, useEffect } from "react" +import { Select, Input, Button, Table, message, Pagination, DatePicker, Cascader, Tooltip } from "antd" +import { ExportBtnNew, ResultFlowResult } from '@/components' +import { dictionary } from "@/config/common" +import ReactEcharts from "echarts-for-react" +import { lineChartOption } from "@/config/character.config" +import ajax from "@/services" +import moment from "moment" +import './index.scss' + +function CityArrearageAly(props) { + const { + + } = props + + const [loading, setLoading] = useState(false) + const defaultFormData = { + region: [], + operator_id: "0", + park_type: 0, + date_type: "day", + start_time: "", + end_time: "", + park_bussiness_type: 0 + } + const [formData, setFormData] = useState({ + ...defaultFormData + }) + const [pageInfo, setPageInfo] = useState({ + pn: 1, + length: 10 + }) + const [resultData, setResultDate] = useState({ + list: [], + totalRecords: 0 + }) + const [lineOption, setLineOptions] = useState({...lineChartOption}) + const [areaList, setAreaList] = useState([]) + const [Yunying, setYunying] = useState([]) + const tableColumns = [ + { + title: "序号", + width: 60, + align: 'center', + render: (text, record, index) => index + 1, + }, + { + title: "地区", + align: 'center', + dataIndex: "area", + }, + { + title: "区间范围", + align: 'center', + dataIndex: "date", + }, + { + title: "欠费追缴金额", + align: 'center', + dataIndex: "money", + } + ] + const paginationProps = { + className: "pagination-common", + showQuickJumper: true, + showSizeChanger: true, + current: pageInfo.pn, + total: resultData?.totalRecords, + pageSize: pageInfo.length, + pageSizeOptions: Array.from( + new Set([...[15], ...(dictionary?.pageSizeOptions || [])]) + ), + onChange: (current, size) => { + setPageInfo({ + ...pageInfo, + ...{ pn: current, length: size } + }); + } + } + const ajaxGetAreaData = () => { + ajax.getAreaTree().then((res) => { + if (res.status === 20000) { + setAreaList(res.data); + } + }).catch((err) => { + console.error(err) + }); + } + const ajaxGetOperatorData = () => { + ajax.getAllOperator().then((res) => { + if (parseInt(res?.status) === 20000) { + setYunying(res.data); + } else { + message.error(res?.message); + } + }).catch(err => { + console.log(err) + }) + } + const ajaxGetListData = () => { + setLoading(true) + ajax.getArrearCityData({...formData}).then(res => { + if (res.status == 20000) { + setResultDate({ + list: res.data.list, + totalRecords: res.totalRecords || 0 + }) + initTrendLineChart([...res.data.trend]) + } + setLoading(false) + }) + } + + const initTrendLineChart = (data) => { + setLineOptions({ + ...lineOption, + xAxis: { + ...lineOption.xAxis, + data: [...data[0]?.data.map(item => item.name)] + }, + // series: [ + // { + // ...lineOption.series[0], + // name: '应收金额', + // type: 'line', + // stack: 'Total', + // data: [...data.map((item) => item.ys)] + // }, + // { + // ...lineOption.series[0], + // name: '欠费金额', + // type: 'line', + // stack: 'Total', + // data: [...data.map((item) => item.qf)] + // } + // ], + series: Array(data.length).fill(0).map((_, i) => ({ + ...lineOption.series[0], + name: data[i].area, + type: 'line', + // stack: 'Total', + data: [...data[i].data.map((item) => item.value)] + })) + }) + } + + const TimeChange = () => { + let e = formData.date_type; + let str = "day"; + let mat = "YYYY-MM-DD"; + if (e == "year") { + str = "year"; + mat = "YYYY"; + } else if (e == "month") { + str = "month"; + mat = "YYYY-MM"; + } else if (e == "week") { + str = "week"; + mat = "YYYY-MM-DD"; + } + return { str, mat }; + } + + const SetTimeNow = (e) => { + let start = ""; + let end = ""; + if (e == 'year') { + start = moment().format("YYYY"); + end = moment().format("YYYY"); + } else if (e == 'month') { + start = moment().format("YYYY-MM"); + end = moment().format("YYYY-MM"); + } else if (e == 'week') { + 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 handleReset = () => { + setFormData({ + ...defaultFormData + }) + } + + const handleSearch = () => { + ajaxGetListData() + } + + useEffect(() => { + ajaxGetAreaData() + ajaxGetOperatorData() + ajaxGetListData() + }, []) + + return ( +
+
+
+
查询条件
+
+
+ + { + setFormData({ ...formData, region: v ? v : null }); + }} + /> +
+
+ + + setFormData({ + ...formData, + operator_id: 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) + } + /> +
+
+ + +
+
+
+
+
+
+ 导出} + modalType="noImg" + totalRecords={resultData.totalRecords} + exportUrl="/api/dataAnalysis/arrearsOrder/export" + postdata={{ + formData: {...formData} + }} + imgno={false} + /> +
+
+
各欠费追缴趋势图
+
+ +
+
+
+ +
+ {/* */} + + + + + ) } export default CityArrearageAly; \ No newline at end of file diff --git a/src/pages/DataAnalysisPrediction/ParkingIncomeAly/OrderArrearageAly/loadable.jsx b/src/pages/DataAnalysisPrediction/ParkingIncomeAly/OrderArrearageAly/loadable.jsx index db359de..1d52a4b 100644 --- a/src/pages/DataAnalysisPrediction/ParkingIncomeAly/OrderArrearageAly/loadable.jsx +++ b/src/pages/DataAnalysisPrediction/ParkingIncomeAly/OrderArrearageAly/loadable.jsx @@ -49,7 +49,7 @@ function OrderArrearageAly(props) { { title: "日期", align: 'center', - dataIndex: "date", + dataIndex: "name", }, { title: "应收金额", @@ -76,7 +76,11 @@ function OrderArrearageAly(props) { setPageInfo({ ...pageInfo, ...{ pn: current, length: size } - }); + }) + ajaxGetListData(false, { + pn: current, + length: size + }) } } const ajaxGetAreaData = () => { @@ -106,14 +110,18 @@ function OrderArrearageAly(props) { } }) } - const ajaxGetListData = () => { + const ajaxGetListData = (isLine=false, newPageInfo={}) => { setLoading(true) - ajax.getArrearOrderList({...formData, ...pageInfo}).then(res => { + ajax.getArrearOrderTrendData(Object.assign({...formData, ...newPageInfo}, isLine ? {} : {...pageInfo})).then(res => { if (res.status == 20000) { - setResultDate({ - list: res.data, - totalRecords: res.totalRecords - }) + if (isLine) { + initTrendLineChart([...res.data]) + } else { + setResultDate({ + list: res.data, + totalRecords: res.totalRecords + }) + } } setLoading(false) }) @@ -135,14 +143,12 @@ function OrderArrearageAly(props) { ...lineOption.series[0], name: '应收金额', type: 'line', - stack: 'Total', data: [...data.map((item) => item.ys)] }, { ...lineOption.series[0], name: '欠费金额', type: 'line', - stack: 'Total', data: [...data.map((item) => item.qf)] } ] @@ -197,21 +203,22 @@ function OrderArrearageAly(props) { } const handleSearch = () => { - ajaxGetTrendData() setPageInfo({ ...pageInfo, pn: 1 }) + ajaxGetListData(false, {pn: 1}) + ajaxGetListData(true) } - useEffect(() => { - ajaxGetListData() - }, [JSON.stringify(pageInfo)]) + // useEffect(() => { + // ajaxGetListData() + // }, [JSON.stringify(pageInfo)]) useEffect(() => { ajaxGetAreaData() ajaxGetOperatorData() - ajaxGetTrendData() + ajaxGetListData(true) ajaxGetListData() }, []) @@ -412,7 +419,7 @@ function OrderArrearageAly(props) { children={} modalType="noImg" totalRecords={resultData.totalRecords} - exportUrl="/api/dataAnalysis/arrearsOrder/export" + exportUrl="/api/dataAnalysis/arrearsCity/export" postdata={{ formData: {...formData} }} @@ -420,7 +427,7 @@ function OrderArrearageAly(props) { />
-
欠费欠费趋势图
+
订单欠费趋势图
td { + background: unset !important; + background-color: #3e4557 !important; + } + } + } +} + +.parking-item { + color: #fff; + background: #3e4557; + border-radius: 4px; + display: flex; + flex-direction: column; + padding: 20px; + &-title { + height: 18px; + display: flex; + align-items: center; + position: relative; + text-indent: .5rem; + font-size: 16px; + font-weight: 700; + user-select: none; + &::before { + position: absolute; + content: ""; + height: 100%; + width: 4px; + left: -2px; + background: var(--color-menu-selected-text-item); + } + } + &-content { + flex: 1; + .echarts-for-react { + height: 100% !important; + } + } +} + diff --git a/src/pages/DataAnalysisPrediction/ParkingIncomeAly/PriceAly/loadable.jsx b/src/pages/DataAnalysisPrediction/ParkingIncomeAly/PriceAly/loadable.jsx index 6f814e9..a5e5da4 100644 --- a/src/pages/DataAnalysisPrediction/ParkingIncomeAly/PriceAly/loadable.jsx +++ b/src/pages/DataAnalysisPrediction/ParkingIncomeAly/PriceAly/loadable.jsx @@ -1,15 +1,405 @@ -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 { 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 PriceAly() { - return
PriceAly
+import React, { useState, useRef, useEffect } from "react" +import { Select, Input, Button, Table, message, Pagination, DatePicker, Cascader, Tooltip } from "antd" +import { ResultFlowResult } from '@/components' +import { dictionary } from "@/config/common" +import ReactEcharts from "echarts-for-react" +import { lineChartOption } from "@/config/character.config" +import ajax from "@/services" +import moment from "moment" +import './index.scss' + +function PriceAly(props) { + const { + + } = props + + const [loading, setLoading] = useState(false) + const defaultFormData = { + region: [], + operator_id: "0", + park_type: 0, + date_type: "day", + start_time: "", + end_time: "", + park_text: "" + } + const [formData, setFormData] = useState({ + ...defaultFormData + }) + const [pageInfo, setPageInfo] = useState({ + pn: 1, + length: 10 + }) + const [resultData, setResultDate] = useState({ + list: [], + totalRecords: 0 + }) + const [lineOption, setLineOptions] = useState({...lineChartOption}) + const [areaList, setAreaList] = useState([]) + const [Yunying, setYunying] = useState([]) + const tableColumns = [ + { + title: "序号", + width: 60, + align: 'center', + render: (text, record, index) => index + 1, + }, + { + title: "时间", + align: 'center', + dataIndex: "date", + }, + { + title: "应收金额（元）", + align: 'center', + dataIndex: "ys", + }, + { + title: "停车记录数（次）", + align: 'center', + dataIndex: "records", + }, + { + title: "客单价（元）", + align: 'center', + dataIndex: "price", + } + ] + const paginationProps = { + className: "pagination-common", + showQuickJumper: true, + showSizeChanger: true, + current: pageInfo.pn, + total: resultData?.totalRecords, + pageSize: pageInfo.length, + pageSizeOptions: Array.from( + new Set([...[15], ...(dictionary?.pageSizeOptions || [])]) + ), + onChange: (current, size) => { + setPageInfo({ + ...pageInfo, + ...{ pn: current, length: size } + }); + } + } + const ajaxGetAreaData = () => { + ajax.getAreaTree().then((res) => { + if (res.status === 20000) { + setAreaList(res.data); + } + }).catch((err) => { + console.error(err) + }); + } + const ajaxGetOperatorData = () => { + ajax.getAllOperator().then((res) => { + if (parseInt(res?.status) === 20000) { + setYunying(res.data); + } else { + message.error(res?.message); + } + }).catch(err => { + console.log(err) + }) + } + const ajaxGetListData = () => { + setLoading(true) + ajax.getArrearPriceData({...formData}).then(res => { + if (res.status == 20000) { + setResultDate({ + list: res.data.list, + totalRecords: res.totalRecords || 0 + }) + initTrendLineChart([...res.data.trend]) + } + setLoading(false) + }) + } + + const initTrendLineChart = (data) => { + setLineOptions({ + ...lineOption, + xAxis: { + ...lineOption.xAxis, + data: [...data.map(item => item.name)] + }, + series: [ + { + ...lineOption.series[0], + name: '客单价（元）', + data: [...data.map(item => item.value)] + } + ] + }) + } + + const TimeChange = () => { + let e = formData.date_type; + let str = "day"; + let mat = "YYYY-MM-DD"; + if (e == "year") { + str = "year"; + mat = "YYYY"; + } else if (e == "month") { + str = "month"; + mat = "YYYY-MM"; + } else if (e == "week") { + str = "week"; + mat = "YYYY-MM-DD"; + } + return { str, mat }; + } + + const SetTimeNow = (e) => { + let start = ""; + let end = ""; + if (e == 'year') { + start = moment().format("YYYY"); + end = moment().format("YYYY"); + } else if (e == 'month') { + start = moment().format("YYYY-MM"); + end = moment().format("YYYY-MM"); + } else if (e == 'week') { + 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 handleReset = () => { + setFormData({ + ...defaultFormData + }) + } + + const handleSearch = () => { + ajaxGetListData() + } + + useEffect(() => { + ajaxGetAreaData() + ajaxGetOperatorData() + ajaxGetListData() + }, []) + + return ( +
+
+
+
查询条件
+
+
+ + { + setFormData({ ...formData, region: v ? v : null }); + }} + /> +
+
+ + setFormData({...formData, park_type: v})} + placeholder="请选择车场类型" + /> +
+
+ + + setFormData({ ...formData, park_text: e.target.value }) + } + /> +
+
+
+ {/* */} + + + + + ) } export default PriceAly; \ No newline at end of file diff --git a/src/pages/FinancialMgm/FinancialReport/OperationReport/loadable.jsx b/src/pages/FinancialMgm/FinancialReport/OperationReport/loadable.jsx index d87f86c..e1ca46e 100644 --- a/src/pages/FinancialMgm/FinancialReport/OperationReport/loadable.jsx +++ b/src/pages/FinancialMgm/FinancialReport/OperationReport/loadable.jsx @@ -268,8 +268,8 @@ function OperationReport() { }, { title: "单泊位应收(元)", - dataIndex: "agio", - key: "agio", + dataIndex: "berth_amount", + key: "berth_amount", align: "center", }, { diff --git a/src/pages/FinancialMgm/FinancialReport/PdaStat/loadable.jsx b/src/pages/FinancialMgm/FinancialReport/PdaStat/loadable.jsx index 646fd03..8b33b3f 100644 --- a/src/pages/FinancialMgm/FinancialReport/PdaStat/loadable.jsx +++ b/src/pages/FinancialMgm/FinancialReport/PdaStat/loadable.jsx @@ -352,7 +352,7 @@ function PdaStat() { if (parseInt(res?.status) === 20000) { setData({ data: res?.data?.list || [], - total: res?.data?.total || 0, + total: res?.total || 0, }); setLoading(true); } else { @@ -627,7 +627,7 @@ function PdaStat() { pagination={false} scroll={{ // x: 1300, - y: "calc(100vh - 300px)", + y: "calc(100vh - 340px)", }} /> diff --git a/src/services/DataAnalysisPrediction/ParkingIncomeAly/index.js b/src/services/DataAnalysisPrediction/ParkingIncomeAly/index.js index 3031ccb..01eec28 100644 --- a/src/services/DataAnalysisPrediction/ParkingIncomeAly/index.js +++ b/src/services/DataAnalysisPrediction/ParkingIncomeAly/index.js @@ -49,5 +49,26 @@ export default { type: 'post', data }) + }, + getArrearCityData: function(data) { + return ajax({ + url: '/api/dataAnalysis/arrearsCity', + type: 'post', + data + }) + }, + getArrearCatchData: function(data) { + return ajax({ + url: '/api/dataAnalysis/arrearsCatch', + type: 'post', + data + }) + }, + getArrearPriceData: function(data) { + return ajax({ + url: '/api/dataAnalysis/priceAnalysis', + type: 'post', + data + }) } }