diff --git a/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingFalseAlarms/blue.png b/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingFalseAlarms/blue.png new file mode 100644 index 0000000..e4e5325 Binary files /dev/null and b/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingFalseAlarms/blue.png differ diff --git a/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingFalseAlarms/green.png b/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingFalseAlarms/green.png new file mode 100644 index 0000000..b2cd49a Binary files /dev/null and b/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingFalseAlarms/green.png differ diff --git a/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingFalseAlarms/index.jsx b/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingFalseAlarms/index.jsx new file mode 100644 index 0000000..c024c8a --- /dev/null +++ b/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingFalseAlarms/index.jsx @@ -0,0 +1,6 @@ +import React from "react" +import loadable from "@loadable/component" +import { LoadingImg } from "@/components" + +const ExceptionParkReportLoadable = loadable(() => import("./loadable")) +export default (pros) => } /> \ No newline at end of file diff --git a/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingFalseAlarms/index.scss b/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingFalseAlarms/index.scss new file mode 100644 index 0000000..ab2d899 --- /dev/null +++ b/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingFalseAlarms/index.scss @@ -0,0 +1,278 @@ +@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); + +.edit-order-inquiry { + display: flex; + padding-top: 10px; + width: 100%; + height: 100%; + overflow-y: auto; + @include scrollBar(var(--color-user-list-bg), #3B97FF); + + .paid-search { + display: block; + width: 375px; + padding: 10px 10px 20px 20px; + + .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 { + height: calc(100% - 45px); + overflow-y: auto; + scrollbar-width: none; + -ms-overflow-style: none; + + &::-webkit-scrollbar { + display: none; + } + } + + .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; + } + + .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; + .daf { + display: inline-block; + } + } + + .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); + } + + .submit { + width: calc(100% - 100px); + height: 36px; + } + } + } + + .ant-btn+.ant-btn { + margin-left: 10px; + } + + .green { + background-color: #67c23a; + border-color: #67c23a; + } + .period-result { + overflow: auto; + } + .paid-result { + 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); + + .result { + @include flex-columns; + .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; + } + } + .row-head { + height: 32px; + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 13px; + + .number-wrapper { + display: inline-flex; + align-items: center; + font-size: 14px; + + .letter { + color: var(--color-text); + font-size: 14px; + } + + .total-number { + color: var(--color-primary); + font-weight: bold; + margin: 0 4px; + font-size: 14px; + } + } + } + + .cc-result-flow { + width: 100%; + height: calc(100% - 34px - 13px); + + .yisa-table { + width: 100%; + height: calc(100% - 32px - 15px); + overflow-y: auto !important; + @include scrollBar(var(--color-user-list-bg), #3B97FF); + + .ant-table-thead { + th { + background: #616b83 !important; + } + } + + .ant-table-tbody { + td { + background: #3E4557 !important; + border-bottom-color: var(--color-table-border-bottom-color); + } + + tr:nth-child(even) { + td { + background: #3E4557 !important; + } + } + } + } + } + } + + } + +} + +.modal-pay-configuration { + + .submitBtn { + text-align: center; + margin: 20px 0 0; + + .ant-btn { + width: 80px; + height: 35px; + border: none; + border-radius: 4px; + + span { + color: #ffffff; + } + } + + .submit { + background: #409eff; + } + + .cancel { + background: var(--button-default-bg); + margin-left: 20px; + } + } +} + +.edit-order-inquiry { + /*定义滚动条高宽及背景 + 高宽分别对应横竖滚动条的尺寸*/ + ::-webkit-scrollbar { + width: 6px; + height: 16px; + background-color: #5c5c5c; +} + +/*定义滚动条轨道 + 内阴影+圆角*/ +::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); + border-radius: 10px; + background-color: #9da2ab; +} + +/*定义滑块 + 内阴影+圆角*/ +::-webkit-scrollbar-thumb { + border-radius: 10px; + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); + background-color: #3b97ff; +} +} +.no-data-box { + text-align: center; + height: 100px; + line-height: 100px; +} \ No newline at end of file diff --git a/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingFalseAlarms/loadable.jsx b/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingFalseAlarms/loadable.jsx new file mode 100644 index 0000000..b91713b --- /dev/null +++ b/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingFalseAlarms/loadable.jsx @@ -0,0 +1,760 @@ +import React, { useState, useEffect } from "react"; +import { ResultFlowResult } from "@/components"; +import { Select, Input, Button, Table, message, Pagination, DatePicker, Modal, Cascader, Tooltip } from "antd"; +import { Icon, ResultFlow } from "@/components" +import { useSessionStorageState } from "ahooks"; +import { lineChartOption, ringChartOption } from "../echarts.config"; +import moment from "moment"; +import ReactEcharts from "echarts-for-react"; +import "./index.scss"; +import ajax from "@/services"; +//误报情况分析 +function ParkingFalseAlarms() { + // session缓存 + const [defaultParams, setDefaultParams] = useSessionStorageState( + "formData_parkingAlyPeriod", + { defaultValue: null } + ); + //区域的下拉数据 + const [areaList, setAreaList] = useState([]); + // 默认数据 + const defaultData = { + start_time: moment().subtract('days').startOf('day').format("YYYY-MM-DD"), + end_time: moment().endOf("day").format("YYYY-MM-DD"), + operator_id: '0', + area_id: '0', + car_parking_type: '3', + date_type: '1', + paytype: '0' + }; + // 分页数据 + const [pageInfo, setPageInfo] = useState({ + pn: defaultParams ? defaultParams?.pn : 1, + page_size: defaultParams ? defaultParams?.page_size : 15, + }); + // 表单数据 + const [formData, setFormData] = useState({ + ...defaultData, + ...defaultParams, + }); + // 搜索提交数据-存储 + const [holdData, setHoldData] = useState(formData); + // 访问接口，isAjax改变时执行 + const [isAjax, setIsAjax] = useState(false); + // 检索按钮加载状态 + const [loading, setLoading] = useState(false); + // 表格加载状态 + const [tabLoading, setTabLoading] = useState(false); + // 表格返回数据 + const [resultData, setResultData] = useState({ + total: 0, + list: [], + }); + const [keyVal, setKeyVal] = useState() + //出入场车流量分析 + const [revenueData, setRevenueData] = useState({}); + //停车饱和度趋势分析 + const [parkData, setParkData] = useState({}); + const [hourData, setHourData] = useState({}); + const [searchSelectList, setSearchSelectList] = useState([]); //搜索下拉数据 + const [sessionTabList, setSessionTabList] = useSessionStorageState('parkingAlyPeriod', { + value: { + } + }) + useEffect(() => { + if (sessionTabList && Object.values(sessionTabList).length > 0) { + setFormData({ + ...formData, ...sessionTabList + }) + getCheck({ + ...sessionTabList + }) + } else { + getCheck() + } + }, [isAjax]) + useEffect(() => { + setSessionTabList({ + ...formData + }) + }, [formData]) + useEffect(() => { + getSelectList(); + }, []); + + // 访问接口，获取表格 + // useEffect(() => { + // getData(); + // }, [isAjax]); + //时间状态切换 + const TimeChange = () => { + let e = formData.date_type; + let str = "date"; + 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().startOf('month').format("YYYY-MM-DD"); + end = moment().endOf("month").format("YYYY-MM-DD"); + } 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, + }); + }; + const columns = [ + { + title: "序号", + dataIndex: "index", + key: "iindex", + align: "center", + fixed: "right", + render: (text, record, index) => index + 1, + }, + { + title: "标签名称", + dataIndex: "name", + key: "name", + align: "center", + fixed: "right", + }, + { + title: "人数（人）", + dataIndex: "nums", + key: "nums", + align: "center", + fixed: "right", + }, + { + title: "标签描述", + dataIndex: "describe", + key: "describe", + align: "center", + fixed: "right", + }, + { + title: "创建人", + dataIndex: "edit_name", + key: "edit_name", + align: "center", + fixed: "right", + }, + { + title: "操作日期", + dataIndex: "time", + key: "time", + align: "center", + fixed: "right", + }, + { + title: "操作", + dataIndex: "operation", + key: "operation", + align: "center", + fixed: "right", + render: (_, record, index) => { + return ( +
+
+ { + searchDetail({ id: record.id }); + setMyId(record.id) + setIndexBy(index); + setTag('2') + }} + > + 查看 + +
+
+ ); + }, + }, + ]; + //出入场车流量分析 折线图 + const getRevenueOption = (data) => { + if (!data || data.length <= 0) { + setRevenueData({}) + return + } + const areaNames = data[0].name ? [...new Set(data.map((item) => item.name))] : ['出场车次', '入场车次']; + // 获取所有横坐标 + const dates = [...new Set(data.map((item) => item.hour))].sort( + (a, b) => a.hour - b.hour + ); + // 构建数据对象 + const seriesData = areaNames.map((areaName, index) => { + // 获取数据 + const areaData = data[0].name ? data.filter((item) => item.name === areaName) : data + // 构建数据对象 + return { + name: areaNames.length > 1 ? areaName : '', + type: "line", + itemStyle: { + label: { + show: true, //开启显示 + position: 'top', //在上方显示 + color: 'white',//字体颜色 + fontSize: 10//字体大小 + }, + }, + data: dates.map((item) => { + for (const { hour, total_in_records, total_out_records } of areaData) { + if (hour === item) return index == 1 ? total_in_records : total_out_records; + } + return 0; + }), + }; + }); + // 构建X轴数据 + const xAxisData = dates.map((date) => { + return { + value: date, + align: "center", + lineStyle: { + color: "skyblue", // 设置线的颜色为天蓝色 + shadowBlur: 6, + }, + + }; + }); + let tooltip = { + formatter: (params) => { + var str = ""; + str = params[0].axisValue.match(/(\S*):/) ? params[0].axisValue.match(/(\S*):/) : params[0].axisValue + str = str[1] ? str[1] + ':59时' : str + return `
+ ${params[0].axisValue}-${str}
+ 出场次数：${params[0].data}(次)
+ 入场次数：${params[1].data}(次) +
` + } + } + setRevenueData({ ...lineChartOption(areaNames, xAxisData, "车次数（个）", seriesData), ...tooltip }); + }; + //停车饱和趋势分析分析 折线图 + const getParkOption = (data) => { + if (!data || data.length <= 0) { + setParkData({}) + return + } + let areaNames = data[0].charge_type_name ? [...new Set(data.map((item) => item.charge_type_name))] : ['']; + // areaNames = [...new Set(areaNames.map((item) => item.hour))].sort( + // (a, b) => a.date - b.hour + // ); + // 获取所有横坐标 + let dates = [...new Set(data.map((item) => item.hour))].sort( + (a, b) => a.hour - b.hour + ); + // 构建数据对象 + let seriesData = areaNames.map((areaName, index) => { + // 获取数据 + let areaData = data[0].charge_type_name ? data.filter((item) => item.charge_type_name === areaName) : data + // 构建数据对象 + return { + name: areaName, + type: "line", + itemStyle: { + label: { + show: true, //开启显示 + position: 'top', //在上方显示 + color: 'white',//字体颜色 + fontSize: 10//字体大小 + }, + }, + data: dates.map((item) => { + for (var { hour, occupancy_rate } of areaData) { + if (hour === item) return parseFloat(occupancy_rate); + } + return 0; + }), + }; + }); + // 构建X轴数据 + let xAxisData = dates.map((date) => { + return { + value: date, + align: "center", + lineStyle: { + color: "skyblue", // 设置线的颜色为天蓝色 + shadowBlur: 6, + }, + + }; + }); + + setParkData(lineChartOption(areaNames, xAxisData, "饱和度", seriesData, areaNames)); + }; + const randerColor = () => { + let arr = []; + this.alarmTypeLine.forEach(item => { + random(arr) + }) + return arr; + } + + const random = (arr) => { + let color = 'rgb(' + [ + Math.round(Math.random() * 255), + Math.round(Math.random() * 255), + Math.round(Math.random() * 255) + ].join(',') + ')'; + if (!arr.some(i => i == color)) { + arr.push(color) + } else { + this.random(arr) + } + } + const color = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#fc8452', '#3ba272', '#9a60b4', '#ee7ccc'] + //停车饱和趋势分析分析 折线图 hour 时间对比 + const getParkOptionHour = (data) => { + console.log(data) + if (!data || data.length <= 0) { + setHourData({}) + return + } + let areaNames = data[0].date ? [...new Set(data.map((item) => item.date))].sort() : ['']; + // 获取所有横坐标 + let dates = [...new Set(data.map((item) => item.hour))].sort( + (a, b) => a.hour - b.hour + ); + // 构建数据对象 + let seriesData = areaNames.map((areaName, index) => { + let color2 = color[Math.round(Math.random() * 10)] + // 获取数据 + let areaData = data[0].date ? data.filter((item) => item.date === areaName) : data + // 构建数据对象 + return { + name: areaName, + type: "line", + itemStyle: { + label: { + show: true, //开启显示 + position: 'top', //在上方显示 + color: 'white',//字体颜色 + fontSize: 10//字体大小 + }, + normal: { + color: color2, //改变折线点的颜色 + lineStyle: { + color: color2, + } + //改变折线颜色 + } + }, + data: dates.map((item) => { + for (var { hour, occupancy_rate } of areaData) { + if (hour === item) return parseFloat(occupancy_rate); + } + return 0; + }), + }; + }); + // 构建X轴数据 + let xAxisData = dates.map((date) => { + return { + value: date, + align: "center", + lineStyle: { + color: "skyblue", // 设置线的颜色为天蓝色 + shadowBlur: 6, + }, + + }; + }); + + setHourData({ ...lineChartOption(areaNames, xAxisData, "饱和度", seriesData) }); + }; + function getParkingIncome(data) { + ajax + .getParkingAlyPeriodLine(data) + .then((res) => { + if (res.status === 20000) { + getRevenueOption(res.data.list); + setResultData(res.data) + } + }) + .catch((err) => console.error(err)); + } + function getParkingData(data) { + setLoading(true) + setHourData({}) + ajax + .getParkingAlyPeriodParkLine(data) + .then((res) => { + if (res.status === 20000) { + getParkOption(res.data.list?.area_list); + setKeyVal(res.data.list?.hour_list.length) + //setHourData({}) + getParkOptionHour(res.data.list?.hour_list); + setLoading(false) + } + }) + .catch((err) => console.error(err)); + } + // 获取下拉数据 + const getSelectList = () => { + ajax.getOperator().then((e) => { + setSearchSelectList([ + ...searchSelectList, + ...e.data + ]) + }) + }; + + + // 携带参数处理 + const getCheck = (v) => { + let postData = { ...formData }; + if (!loading) { + postData = { ...holdData }; + } + setDefaultParams({ ...postData, ...pageInfo }); + if (moment(formData.end_time) - moment(formData.start_time) > 1000 * 31 * 24 * 3600) { + message.error("时间范围限制为31天！") + setLoading(false); + setTabLoading(false); + return + } + setLoading(false); + setTabLoading(false); + let params = { ...postData, ...v, ...pageInfo } + //请求接口 + getParkingIncome(params) + getParkingData(params) + }; + // 检索数据 + const handleSearch = () => { + setLoading(true); + setPageInfo({ ...pageInfo, ...{ pn: 1 } }); + setHoldData(formData); + setIsAjax(!isAjax); + }; + + // 导出 + const handleExport = () => { + if (tableData.list.area_list?.length > 0) { + let { pn, page_size, ...params } = defaultParams; + ajax.getParkingAlyDurationParkingExp(defaultParams).then( + (res) => { + if (res) { + window.open(res.data.export_url) + } else { + message.error(res?.message); + } + }, + (err) => { + console.log(err); + } + ); + } else { + message.error("暂无数据"); + } + }; + // useEffect(() => { + // getParkingIncome(); + // }, []); + //区域下拉框数据 + useEffect(() => { + ajax + .getAreaTree() + .then((res) => { + if (res.status === 20000) { + setAreaList(res.data); + } + }) + .catch((err) => { + console.error(err); + }); + }, []); + return ( + <> +
+
+
查询条件
+
+
+ + + setFormData({ ...formData, device_name: e.target.value }) + } + /> +
+
+ + + setFormData({ ...formData, device_code: e.target.value }) + } + /> +
+
+ + + setFormData({ ...formData, road_name: e.target.value }) + } + /> +
+
+ + 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 if (TimeChange().str == "month") { + setFormData({ ...formData, start_time: moment(date).format("YYYY-MM-DD"), end_time: moment(date).endOf("month").format("YYYY-MM-DD") }); + } 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 if (TimeChange().str == "month") { + setFormData({ ...formData, start_time: moment(date).startOf('month').format("YYYY-MM-DD"), end_time: moment(date).format("YYYY-MM-DD") }); + } else { + setFormData({ ...formData, end_time: dateString }); + } + }} + disabledDate={(current) => + current < moment(formData.start_time) + } + /> +
+ +
+ + +
+
+
+
+
+
+
误报情况结果详情
+ +
+ + + {/*
+ `共 ${total} 条`} + total={detailTotal} + current={pageData.pn} + pageSize={pageData.length} + pageSizeOptions={dictionary?.pageSizeOptions} + onChange={onShowSizeChange} + onShowSizeChange={onShowSizeChange} + /> +
*/} + + +
+
误报情况分析
+
+
+
+
+
停车高峰时段
+
{resultData.peak_hours || "--"}
+
+
+
+
+
+
入场压力时段
+
{resultData.entry_pressure_hours || "--"}
+
+
+
+
+
+
出场压力时段
+
{resultData.exit_pressure_hours || "--"}
+
+
+
+ {hourData.series ? + : +
{loading ? "加载中" : "暂无数据"}
+ } + +
+ + + + + ); +} + +export default ParkingFalseAlarms; \ No newline at end of file diff --git a/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingFalseAlarms/red.png b/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingFalseAlarms/red.png new file mode 100644 index 0000000..c0eccc5 Binary files /dev/null and b/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingFalseAlarms/red.png differ diff --git a/src/pages/DataAnalysisPrediction/ParkingBusinessAly/index.jsx b/src/pages/DataAnalysisPrediction/ParkingBusinessAly/index.jsx index db17aca..7f12992 100644 --- a/src/pages/DataAnalysisPrediction/ParkingBusinessAly/index.jsx +++ b/src/pages/DataAnalysisPrediction/ParkingBusinessAly/index.jsx @@ -9,7 +9,7 @@ import ParkingLiveData from "./ParkingLiveData" import ParkTurnoverAly from "./ParkTurnoverAly" import ParkUsageAly from "./ParkUsageAly" import TemporaryParkStat from "./TemporaryParkStat" - +import ParkingFalseAlarms from "./ParkingFalseAlarms" export default { CarTypeAly, NightParkStat, @@ -21,5 +21,6 @@ export default { ParkingLiveData, ParkTurnoverAly, ParkUsageAly, - TemporaryParkStat + TemporaryParkStat, + ParkingFalseAlarms } \ No newline at end of file diff --git a/src/pages/OperationCenter/UserMgm/UserTag/index.scss b/src/pages/OperationCenter/UserMgm/UserTag/index.scss index f82aea4..5b4539c 100644 --- a/src/pages/OperationCenter/UserMgm/UserTag/index.scss +++ b/src/pages/OperationCenter/UserMgm/UserTag/index.scss @@ -2,104 +2,234 @@ .user-tag-box { .push-back { - position: relative; - border: 1px solid; - border-radius: 5px; - margin: 0 10px; - margin-left: 95%; - height: 35px; - line-height: 35px; - text-align: center; - background: #ffffff; - color: #000000; - font-weight: 100; - cursor: pointer; - } - - .search-box { - width: 100%; - padding: 20px; - height: calc(100% - 10px); - background: var(--color-user-list-bg); - border-top-left-radius: 20px; - box-shadow: 0px 3px 8px 0px rgb(0 0 0 / 8%); - margin-top: 10px; - - .title { + position: relative; + border: 1px solid; + border-radius: 5px; + margin: 0 10px; + margin-left: 95%; + height: 35px; + line-height: 35px; + text-align: center; + background: #ffffff; + color: #000000; + font-weight: 100; + cursor: pointer; + } + + .search-box { + width: 100%; + padding: 20px; + height: calc(100% - 10px); + background: var(--color-user-list-bg); + border-top-left-radius: 20px; + box-shadow: 0px 3px 8px 0px rgb(0 0 0 / 8%); + margin-top: 10px; + + .title { + display: inline-block; + margin-right: 80px; + + .value { display: inline-block; - margin-right:80px; - .value { - display: inline-block; - font-weight: 800; + font-weight: 800; + } + } + + .btn-box { + display: inline-block; + + .search-btn { + margin: 0 10px; + } + } + } + + .result-box { + width: 100%; + height: 600px; + + .table-wrap { + height: calc(100% - 32px - 65px); + } + + .ant-tabs { + margin-bottom: 16px; + + .ant-tabs-nav { + margin-bottom: 0 !important; + + &::before { + border-bottom: 1px solid var(--color-card-line) !important; } } - - .btn-box { - display: inline-block; - - .search-btn { - margin: 0 10px; + + .ant-tabs-nav-wrap { + width: 100%; + box-sizing: content-box; + + .ant-tabs-nav-list { + width: 340px; + + .ant-tabs-ink-bar { + height: 3px; + background-color: #00ccff; + } + + .ant-tabs-tab { + flex: 1; + width: 100%; + display: flex; + justify-content: center; + padding-bottom: 10px; + text-align: center; + cursor: pointer; + font-size: 14px !important; + font-family: MicrosoftYaHei; + text-align: center; + letter-spacing: 0.7px; + } + + .ant-tabs-tab-active { + div { + color: #00ccff; + } + } } } } - - .result-box { + + .pop-card { + display: flex; + flex-direction: row; + } + } + + +} + +.user-tag-modal { + .ltc-box { + width: 100%; + + .ltc-box-title { + font-size: 18px; + font-weight: bolder; width: 100%; - height: 600px; - - .table-wrap { - height: calc(100% - 32px - 65px); + white-space: nowrap; + overflow: hidden; + + .text { + display: inline-block; } - - .ant-tabs { - margin-bottom: 16px; - - .ant-tabs-nav { - margin-bottom: 0 !important; - - &::before { - border-bottom: 1px solid var(--color-card-line) !important; - } + + .line { + display: inline-block; + border: 1px dotted #607092; + width: inherit; + margin-bottom: 6px; + } + + .ltc-icon { + width: 5px; + background: #0080db; + height: 19px; + display: inline-block; + margin-right: 10px; + } + + .ltc-btn { + display: inline-block; + border: 1px solid; + border-radius: 5px; + margin: 0 10px; + width: 60px; + height: 35px; + line-height: 35px; + text-align: center; + background: #409eff; + color: #fff; + font-weight: 100; + cursor: pointer; + } + + .ltc-cancel { + background: #fff; + color: #000; + } + } + + .ltc-box-line { + border: 1px solid #e7e7e7; + margin: 8px 0; + } + + .ltc-box-in { + margin-left: 20px; + + .ant-descriptions { + margin-left: 20px; + } + } + + .ltc-title { + margin: auto; + width: 50%; + text-align: center; + font-size: 18px; + font-weight: 600; + } + + .ltc-content { + margin: auto; + padding: 20px; + + .ltc-item { + font-size: 14px; + margin: 6px 12px 6px 0; + display: inline-flex; + + //width: 470px; + .new-item { + display: inline-block; + width: 120px; + height: 32px; + line-height: 32px; + background: rgba(150, 161, 192, 0.24); + text-align: center; } - - .ant-tabs-nav-wrap { - width: 100%; - box-sizing: content-box; - - .ant-tabs-nav-list { - width: 340px; - - .ant-tabs-ink-bar { - height: 3px; - background-color: #00ccff; - } - - .ant-tabs-tab { - flex: 1; - width: 100%; - display: flex; - justify-content: center; - padding-bottom: 10px; - text-align: center; - cursor: pointer; - font-size: 14px !important; - font-family: MicrosoftYaHei; - text-align: center; - letter-spacing: 0.7px; - } - - .ant-tabs-tab-active { - div { - color: #00ccff; - } - } - } + + .new-value { + display: inline-block; + width: 320px; + height: 32px; + line-height: 32px; + text-align: center; + background: #3E4557; + box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.12); + } + + .ltc-item-input { + display: inline-block; + width: 200px; + } + + div { + width: 150px; } } + .ltc-item-img { + width: 540px; + height: 300px; + border: 1px solid; + background: rgb(69 77 97); + margin-right: 20px !important; - .pop-card { - display: flex; - flex-direction: row; + img { + width: 100%; + height: 100%; + object-fit: contain; + } } } -} + } +} \ No newline at end of file diff --git a/src/pages/OperationCenter/UserMgm/UserTag/loadable.jsx b/src/pages/OperationCenter/UserMgm/UserTag/loadable.jsx index 7d330b0..6789561 100644 --- a/src/pages/OperationCenter/UserMgm/UserTag/loadable.jsx +++ b/src/pages/OperationCenter/UserMgm/UserTag/loadable.jsx @@ -20,8 +20,11 @@ import "./index.scss"; function UserTag() { const [resultData, setResultData] = useState([]) const [detailData, setDetailData] = useState([]) + const [myId, setMyId] = useState([]) const [indexBy, setIndexBy] = useState() + const [indexTo, setIndexTo] = useState() const [total, setTotal] = useState(0); + const [detailTotal, setDetailTotal] = useState(0); const [tag, setTag] = useState('1'); const [loading, setLoading] = useState(false); const [visible, setVisible] = useState(false); @@ -29,12 +32,12 @@ function UserTag() { const [pageData, setPageData] = useState({ // 分页参数 pn: 1, - page_size: 15, + length: 15, }); - function onShowSizeChange(pn, page_size) { + function onShowSizeChange(pn, length) { setPageData({ pn, - page_size, + length, }); } const columns = [ @@ -87,13 +90,15 @@ function UserTag() { key: "operation", align: "center", fixed: "right", - render: (_, record,index) => { + render: (_, record, index) => { return (
{ - setIndexBy(index) + searchDetail({ id: record.id }); + setMyId(record.id) + setIndexBy(index); setTag('2') }} > @@ -117,59 +122,75 @@ function UserTag() { }, { title: "用户ID", - dataIndex: "name", - key: "name", + dataIndex: "id", + key: "id", align: "center", fixed: "right", + render: (text) => ( + <> + { + navigator.clipboard.writeText(`${text}`).then(() => { message.success("已复制到剪切板") }); + }}>{text} + + ), }, { title: "手机号", - dataIndex: "nums", - key: "nums", + dataIndex: "mobile", + key: "mobile", align: "center", fixed: "right", }, { title: "昵称", - dataIndex: "describe", - key: "describe", + dataIndex: "name", + key: "name", align: "center", fixed: "right", }, { title: "性别", - dataIndex: "edit_name", - key: "edit_name", + dataIndex: "sex", + key: "sex", align: "center", fixed: "right", }, { title: "余额（元）", - dataIndex: "time", - key: "time", + dataIndex: "balance", + key: "balance", align: "center", fixed: "right", }, { title: "注册日期", - dataIndex: "time", - key: "time", + dataIndex: "create_time", + key: "create_time", align: "center", fixed: "right", }, { title: "绑定车牌", - dataIndex: "time", - key: "time", + dataIndex: "plate", + key: "plate", align: "center", fixed: "right", }, { title: "身份认证", - dataIndex: "time", - key: "time", + dataIndex: "authState", + key: "authState", align: "center", fixed: "right", + render: (text, record, index) => { + return ( +
+ { + text == 0 ? 未认证 : 已认证 + } +
+ ); + }, }, { title: "操作", @@ -177,15 +198,11 @@ function UserTag() { key: "operation", align: "center", fixed: "right", - render: (_, record) => { + render: (_, record, index) => { return (
@@ -194,30 +211,6 @@ function UserTag() { }, }, ]; - const detailColumns = [ - { - title: "使用时间", - dataIndex: "ave", - key: "avera", - align: "center", - fixed: "right", - }, - { - title: "内容", - dataIndex: "re", - key: "rec", - align: "center", - fixed: "right", - }, - { - title: "消耗", - dataIndex: "av", - key: "ave", - align: "center", - fixed: "right", - }, - - ]; //检索条件 const formSearch = [ { @@ -252,20 +245,65 @@ function UserTag() { } }) } - - // 获取下拉数据 - const getSelectList = () => { - ajax.getOperator().then((e) => { - setSearchSelectList([ - ...searchSelectList, - ...e.data - ]) + //列表用户数据 + function searchDetail(e) { + ajax.getUserLabelList({ ...pageData, ...e }).then((res) => { + let { status, data, total } = res + if (status == 20000) { + if (data.list) { + setDetailData(data.list) + setDetailTotal(data.total_records) + } else { + setDetailData(data) + setDetailTotal(total) + } + } else { + setDetailData([]) + message.error(res.message) + } }) - }; + } + //详情 + const tkddModal =
+
+
+
用户ID
{detailData[indexTo]?.id || "--"}
+
+
+
手机号
{detailData[indexTo]?.mobile || "--"}
+
+
+
昵称
{detailData[indexTo]?.name || "--"}
+
+
+
性别
{detailData[indexTo]?.sex || "--"}
+
+
+
余额（元）
{detailData[indexTo]?.balance || "--"}
+
+
+
注册日期
{detailData[indexTo]?.create_time || "--"}
+
+
+
绑定车牌
{detailData[indexTo]?.plate || "--"}
+
+
+
身份认证
{detailData[indexTo]?.authState || "--"}
+
+
+
+
+ { setBigPic(resultData[indexby].vehicle_travel_license_img1); setBigpicVisible(true) }} /> +
+
+ { setBigPic(resultData[indexby].vehicle_travel_license_img2); setBigpicVisible(true) }} /> +
+
+
useEffect(() => { - getSelectList(); - }, []); + searchDetail({id:myId}) + }, [pageData]); return ( <> @@ -280,27 +318,6 @@ function UserTag() { isExport={false} rowKey={"id"} initFormData={{}} - diyButton={ - <> - - - - } pageName={'"userTag"'} /> : @@ -308,35 +325,29 @@ function UserTag() {
{ setTag('1') }}>返回
标签名称: -
{resultData[indexBy]?.name||"--"}
+
{resultData[indexBy]?.name || "--"}
人数（人）: -
- 111 -
+
{resultData[indexBy]?.nums || "--"}
创建人: -
- 111 -
+
{resultData[indexBy]?.edit_name || "--"}
操作日期: -
- 111 -
+
{resultData[indexBy]?.time || "--"}
@@ -347,9 +358,9 @@ function UserTag() { showSizeChanger={true} showQuickJumper={true} //showTotal={() => `共 ${total} 条`} - total={total} + total={detailTotal} current={pageData.pn} - pageSize={pageData.page_size} + pageSize={pageData.length} pageSizeOptions={dictionary?.pageSizeOptions} onChange={onShowSizeChange} onShowSizeChange={onShowSizeChange} @@ -361,26 +372,20 @@ function UserTag() { } { setVisible(false); }} - onOk={() => { }} + footer={[ + ]} > -
-
-
row?.order_id || row?.id || row?.deal_record_id || Math.random() * 10000} - columns={detailColumns} - dataSource={detailData} - scroll={{ y: 670 }} - //loading={loading} - pagination={false} - /> - - + {tkddModal} ) diff --git a/src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/AddParking.jsx b/src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/AddParking.jsx index fdc024d..8d42afb 100644 --- a/src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/AddParking.jsx +++ b/src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/AddParking.jsx @@ -242,10 +242,10 @@ function AddParking(props) { message.error('车场泊位数必须为数字！') return } - if (topBerthNum && parseFloat(total_berth_number) < topBerthNum) { - message.error('下级车场泊位数与一级车场泊位数之和不超过泊位总数！此处总车场泊位数不超过' + topBerthNum) - //return - } + // if (topBerthNum && parseFloat(values.total_berth_number) < topBerthNum) { + // message.error('下级车场泊位数与一级车场泊位数之和不超过泊位总数！此处总车场泊位数不超过' + topBerthNum) + // //return + // } const params = { ...values, img: processImgData(fileList), diff --git a/src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/BusinessParameterConfig.jsx b/src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/BusinessParameterConfig.jsx index aecccd6..d9757c9 100644 --- a/src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/BusinessParameterConfig.jsx +++ b/src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/BusinessParameterConfig.jsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from "react"; -import { Button, Form, Radio, Input, Select, Row, Col, message } from "antd"; +import { Button, Form, Radio, InputNumber, Select, Row, Col, message } from "antd"; import ajax from "@/services"; import "./BusinessParameterConfig.scss"; function BusinessParameterConfig(props) { @@ -16,7 +16,7 @@ function BusinessParameterConfig(props) { ajax.getRoadServiceEdit(params).then((res) => { if (res.status === 20000) { message.success(res.message); - }else{ + } else { message.error("请填写完整！") } }); @@ -125,7 +125,7 @@ function BusinessParameterConfig(props) { - + diff --git a/src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/loadable.jsx b/src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/loadable.jsx index a6489a9..4b9874a 100644 --- a/src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/loadable.jsx +++ b/src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/loadable.jsx @@ -488,6 +488,7 @@ function OutSegment() { { data: params, }); }; - +//用户管理-获取用户标签 +const getUserLabelList = (params) => { + return ajax({ + url: "/api/ope/user_manage/get_label_user_list", + type: "get", + data: params, + }); +}; export default { getUserLabel, + getUserLabelList, }