From da8936442725d106028ee35f4fcf034ed5a9b1f4 Mon Sep 17 00:00:00 2001
From: chenqiang <chenqiang@yisa.com>
Date: Fri, 15 Dec 2023 16:30:42 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat():=20=E5=AE=8C=E6=88=90=E5=A4=A7?=
=?UTF-8?q?=E5=B1=8F=E7=AD=89=E9=A1=B5=E9=9D=A2=E6=95=B0=E6=8D=AE=E7=9A=84?=
=?UTF-8?q?=E6=8E=A5=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
package.json | 1 +
.../EquipmentAly/EquipmentRunningStat/index.scss | 48 +
.../EquipmentAly/EquipmentRunningStat/loadable.jsx | 188 ++--
.../MemberStat/RegisterAly/loadable.jsx | 16 +-
.../ParkingOverview/index.scss | 45 +-
.../ParkingOverview/loadable.jsx | 1016 ++++++++++++++++----
.../FinancialReport/ParkCardReport/loadable.jsx | 77 +-
.../FinancialReport/PreOrderReport/loadable.jsx | 104 +-
src/services/ElectInvoice/index.js | 49 +
src/services/ParkingOverview/index.js | 26 +-
10 files changed, 1247 insertions(+), 323 deletions(-)
diff --git a/package.json b/package.json
index 45e9876..fb0c5dc 100644
--- a/package.json
+++ b/package.json
@@ -68,6 +68,7 @@
"copy-to-clipboard": "^3.3.3",
"crypto-js": "^4.1.1",
"echarts-for-react": "^3.0.2",
+ "echarts-gl": "^2.0.9",
"express": "^4.17.3",
"js-cookie": "^3.0.1",
"leaflet": "^1.4.0",
diff --git a/src/pages/DataAnalysisPrediction/EquipmentAly/EquipmentRunningStat/index.scss b/src/pages/DataAnalysisPrediction/EquipmentAly/EquipmentRunningStat/index.scss
index 8bd793c..dff4ffc 100644
--- a/src/pages/DataAnalysisPrediction/EquipmentAly/EquipmentRunningStat/index.scss
+++ b/src/pages/DataAnalysisPrediction/EquipmentAly/EquipmentRunningStat/index.scss
@@ -307,4 +307,52 @@ $color-primary : var(--color-primary);
font-size: 14px;
color: $color-text;
+}
+
+.modal-invoic {
+ .tem {
+ display: flex;
+ align-items: center;
+ padding: 0 10px 16px 0;
+
+ .lab {
+ width: 90px;
+
+ margin-right: 10px;
+
+ i {
+ color: red;
+ }
+ }
+
+ .inputs {
+ width: 120px;
+ }
+ }
+
+ .submitBtn {
+ text-align: center;
+ margin-top: 20px;
+
+ .ant-btn {
+ width: 80px;
+ height: 35px;
+ border: none;
+ border-radius: 4px;
+
+ line-height: 27px;
+ color: #ffffff;
+
+ }
+
+ .submit {
+ background: #409eff;
+ }
+
+ .cancel {
+ background: var(--button-default-bg);
+ margin-left: 20px;
+ }
+ }
+
}
\ No newline at end of file
diff --git a/src/pages/DataAnalysisPrediction/EquipmentAly/EquipmentRunningStat/loadable.jsx b/src/pages/DataAnalysisPrediction/EquipmentAly/EquipmentRunningStat/loadable.jsx
index f045d6f..832307c 100644
--- a/src/pages/DataAnalysisPrediction/EquipmentAly/EquipmentRunningStat/loadable.jsx
+++ b/src/pages/DataAnalysisPrediction/EquipmentAly/EquipmentRunningStat/loadable.jsx
@@ -10,18 +10,13 @@ import {
AutoComplete,
Tooltip,
Checkbox,
+ Modal,
Form,
DatePicker,
} from "antd";
import { dictionary, utils } from "@/config/common";
import moment from "moment";
-import {
- FunnelPlotOutlined,
- CloseOutlined,
- InfoCircleOutlined,
- DownOutlined,
- UpOutlined,
-} from "@ant-design/icons";
+
import ajax from "@/services";
// import { useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks';
import { ResultFlow } from "@/components";
@@ -35,16 +30,16 @@ import Equip5 from "@/assets/images/equip/equip5.png";
const { RangePicker } = DatePicker;
const { TextArea } = Input;
function ExceptionParkReport() {
+ const [tipForm] = Form.useForm();
const formdata = {
operator_id: "0", //商户
- name: "", //停车场名称
- park_type: "", //车场类型 1=路内 2=路外
- operator_status: [], //商用状态(1为待上线，2为商用，3为试运营，4为下线)
- area: [],
+ parkName: "", //停车场名称
+ parkType: "", //车场类型 1=路内 2=路外
+ area_id: [],
date_type: "1",
is_excel: 0,
- start_time: moment().startOf("day").format("YYYY-MM-DD"),
- end_time: moment().endOf("day").format("YYYY-MM-DD"),
+ start_date: moment().startOf("day").format("YYYY-MM-DD"),
+ end_date: moment().endOf("day").format("YYYY-MM-DD"),
pn: 1,
page_size: dictionary?.pageSizeOptions1[0],
};
@@ -52,30 +47,30 @@ function ExceptionParkReport() {
const tabt = [
{
text: "设备总数(个)",
- value: 4642,
+ value: "deviceTotal",
icon: Equip1,
},
{
text: "离线次数(次)",
- value: 1,
+ value: "offlineTimes",
icon: Equip2,
tip: "离线时间大于20分钟，记为1次离线，连续离线不会记多次",
},
{
text: "离线总时长",
- value: "32天20时49分0秒",
+ value: "offlineDuration",
icon: Equip3,
},
{
text: "离线时长占比",
- value: "99.58%",
+ value: "offlineDurationRate",
icon: Equip4,
tip: "离线设备总时长/离线设备工作时长*100%",
},
{
text: "离线时长占比",
subtext: "(全部设备)",
- value: "0.71%",
+ value: "offlineDurationRateTotal",
icon: Equip5,
tip: "离线设备总时长/全区所有设备工作时长*100%",
},
@@ -84,38 +79,38 @@ function ExceptionParkReport() {
const col = [
{
title: "车场名称",
- dataIndex: "road_name",
- key: "road_name",
+ dataIndex: "parkName",
+ key: "parkName",
align: "center",
},
{
title: "设备总数",
- dataIndex: "date",
- key: "date",
+ dataIndex: "deviceTotal",
+ key: "deviceTotal",
align: "center",
},
{
title: "离线次数",
- dataIndex: "date",
- key: "date",
+ dataIndex: "offlineTimes",
+ key: "offlineTimes",
align: "center",
},
{
title: "离线总时长",
- dataIndex: "date",
- key: "date",
+ dataIndex: "offlineDuration",
+ key: "offlineDuration",
align: "center",
},
{
title: "离线设备离线时长占比",
- dataIndex: "date",
- key: "date",
+ dataIndex: "offlineDurationRate",
+ key: "offlineDurationRate",
align: "center",
},
{
title: "全部设备离线时长占比",
- dataIndex: "date",
- key: "date",
+ dataIndex: "offlineDurationRateTotal",
+ key: "offlineDurationRateTotal",
align: "center",
},
];
@@ -128,6 +123,7 @@ function ExceptionParkReport() {
const [FormDatas, setFormDatas] = useState(
form_data ? JSON.parse(form_data) : formdata
);
+ const [Textcl, setTextcl] = useState("");
//页码状态
const [loading, setLoading] = useState(false);
//页面数据
@@ -135,7 +131,13 @@ function ExceptionParkReport() {
data: [],
total: 0,
});
-
+ const [DataTop, setDataTop] = useState({
+ deviceTotal: 0,
+ offlineTimes: 0,
+ offlineDuration: 0,
+ offlineDurationRate: 0,
+ offlineDurationRateTotal: 0,
+ });
//获取区域
const [Area, setArea] = useState([]);
//商户
@@ -143,7 +145,7 @@ function ExceptionParkReport() {
//自动填充
const [options, setOptions] = useState([]);
- const [Open, setOpen] = useState(true);
+ const [Open, setOpen] = useState(false);
//筛选
const [selectArr, setSelectArr] = useState([]);
//是否展开显示
@@ -217,8 +219,8 @@ function ExceptionParkReport() {
setFormData({
...FormData,
date_type: e,
- start_time: start,
- end_time: end,
+ start_date: start,
+ end_date: end,
});
};
@@ -336,11 +338,21 @@ function ExceptionParkReport() {
link.click();
document.body.removeChild(link);
};
+ const SubmitPush = () => {
+ tipForm
+ .validateFields()
+ .then((res) => {
+ ReportPaySummaryReport(res.filename);
+ })
+ .catch((err) => {
+ console.log(err);
+ });
+ };
//导出
- const ReportPaySummaryReport = () => {
- ajax.ElectInvoice.getOperationReport({
+ const ReportPaySummaryReport = (val) => {
+ ajax.ElectInvoice.getPstaticsexport({
...FormDatas,
- is_excel: 1,
+ export_name: val,
}).then(
(res) => {
if (parseInt(res?.status) === 20000) {
@@ -354,17 +366,39 @@ function ExceptionParkReport() {
}
);
};
+ //获取页面sf显示数据
+ const getTopData = (data) => {
+ ajax.ElectInvoice.getPstatics({
+ ...data,
+ area_id: data?.area_id?.length
+ ? data?.area_id[data.area_id.length - 1]
+ : "",
+ }).then(
+ (res) => {
+ if (parseInt(res?.status) === 20000) {
+ setDataTop(res?.data);
+ } else {
+ message.error(res?.message);
+ }
+ },
+ (err) => {
+ console.log(err);
+ }
+ );
+ };
//获取页面显示数据
const getData = (data) => {
setLoading(false);
- ajax.ElectInvoice.getOperationReport({
+ ajax.ElectInvoice.getPstaticslist({
...data,
- area: data?.area?.length ? data?.area[data.area.length - 1] : "",
+ area_id: data?.area_id?.length
+ ? data?.area_id[data.area_id.length - 1]
+ : "",
}).then(
(res) => {
if (parseInt(res?.status) === 20000) {
setData({
- data: res?.data?.list || [],
+ data: res?.data || [],
total: res?.total || 0,
});
setLoading(true);
@@ -384,7 +418,8 @@ function ExceptionParkReport() {
"FormData_OperationReport",
JSON.stringify(FormDatas)
);
- // getData(FormDatas);
+ getData(FormDatas);
+ getTopData(FormDatas);
//调用接口
}, [FormDatas]);
useEffect(() => {
@@ -434,23 +469,23 @@ function ExceptionParkReport() {
format={TimeChange().mat}
picker={TimeChange().str}
allowClear={false}
- value={FormData.start_time ? moment(FormData.start_time) : null}
+ value={FormData.start_date ? moment(FormData.start_date) : null}
onChange={(date, dateString) => {
console.log(date, dateString);
if (TimeChange().str == "week") {
setFormData({
...FormData,
- start_time: date
+ start_date: date
? moment(date).day(1).format("YYYY-MM-DD")
: null,
});
} else {
- setFormData({ ...FormData, start_time: dateString });
+ setFormData({ ...FormData, start_date: dateString });
}
}}
disabledDate={(current) =>
- current > moment(FormData.end_time) ||
- current < moment(FormData.end_time).subtract(120, "days")
+ current > moment(FormData.end_date) ||
+ current < moment(FormData.end_date).subtract(120, "days")
}
/>
</div>
@@ -464,22 +499,22 @@ function ExceptionParkReport() {
format={TimeChange().mat}
picker={TimeChange().str}
allowClear={false}
- value={FormData.end_time ? moment(FormData.end_time) : null}
+ value={FormData.end_date ? moment(FormData.end_date) : null}
onChange={(date, dateString) => {
if (TimeChange().str == "week") {
setFormData({
...FormData,
- end_time: date
+ end_date: date
? moment(date).day(7).format("YYYY-MM-DD")
: null,
});
} else {
- setFormData({ ...FormData, end_time: dateString });
+ setFormData({ ...FormData, end_date: dateString });
}
}}
disabledDate={(current) =>
- current < moment(FormData.start_time) ||
- current > moment(FormData.start_time).add(120, "days")
+ current < moment(FormData.start_date) ||
+ current > moment(FormData.start_date).add(120, "days")
}
/>
</div>
@@ -490,7 +525,7 @@ function ExceptionParkReport() {
<Cascader
options={Area}
expandTrigger="hover"
- value={FormData.area}
+ value={FormData.area_id}
style={{
width: "100%",
}}
@@ -503,7 +538,7 @@ function ExceptionParkReport() {
onChange={(e) =>
setFormData({
...FormData,
- area: e,
+ area_id: e,
})
}
/>
@@ -532,7 +567,7 @@ function ExceptionParkReport() {
<span className="lab">停车场</span>
<div className="inputs">
<AutoComplete
- value={FormData.name}
+ value={FormData.parkName}
style={{
width: "100%",
}}
@@ -543,7 +578,7 @@ function ExceptionParkReport() {
console.log(e);
setFormData({
...FormData,
- name: e,
+ parkName: e,
});
}}
/>
@@ -553,7 +588,7 @@ function ExceptionParkReport() {
<span className="lab">车场类型</span>
<div className="inputs">
<Select
- value={FormData.park_type}
+ value={FormData.parkType}
style={{
width: "100%",
}}
@@ -575,7 +610,7 @@ function ExceptionParkReport() {
onChange={(e) =>
setFormData({
...FormData,
- park_type: e,
+ parkType: e,
})
}
/>
@@ -636,7 +671,7 @@ function ExceptionParkReport() {
)}
</div>
{ele?.subtext ? <div className="gnu">{ele.subtext}</div> : ""}
- <div className="gnum">{ele.value}</div>
+ <div className="gnum">{DataTop[ele.value]}</div>
</div>
);
})}
@@ -648,7 +683,7 @@ function ExceptionParkReport() {
<span
className={"sear_ser"}
onClick={() => {
- Data?.total && ReportPaySummaryReport();
+ Data?.total && setOpen(true);
// setFormDatas({ ...FormData });
}}
>
@@ -700,6 +735,41 @@ function ExceptionParkReport() {
</ResultFlow>
</div>
</div>
+ <Modal
+ open={Open}
+ footer={null}
+ onCancel={() => {
+ setOpen(false);
+ tipForm.resetFields();
+ }}
+ // width={300}
+ className="modal-invoic"
+ title={"提示"}
+ >
+ <Form form={tipForm}>
+ <Form.Item
+ label="文件名"
+ name="filename"
+ rules={[{ required: true }]}
+ >
+ <Input placeholder={"请输入文件名"} />
+ </Form.Item>
+ </Form>
+ <div className="submitBtn">
+ <p className="ant-btn submit" onClick={() => SubmitPush()}>
+ 提交
+ </p>
+ <p
+ className="ant-btn cancel"
+ onClick={() => {
+ tipForm.resetFields();
+ setOpen(false);
+ }}
+ >
+ 取消
+ </p>
+ </div>
+ </Modal>
</div>
);
}
diff --git a/src/pages/DataAnalysisPrediction/MemberStat/RegisterAly/loadable.jsx b/src/pages/DataAnalysisPrediction/MemberStat/RegisterAly/loadable.jsx
index fb86fc7..8858ea9 100644
--- a/src/pages/DataAnalysisPrediction/MemberStat/RegisterAly/loadable.jsx
+++ b/src/pages/DataAnalysisPrediction/MemberStat/RegisterAly/loadable.jsx
@@ -74,7 +74,8 @@ function RegisterAly() {
data: [],
total: 0,
list: {
- binding_count: "",
+ binding_car_count: "",
+ binding_user_count: "",
user_count: "",
car_count: "",
unbinding_car_count: "",
@@ -260,7 +261,8 @@ function RegisterAly() {
const getRingOption = (
data = {
- binding_count: "0",
+ binding_car_count: "0",
+ binding_user_count: "0",
user_count: "0",
car_count: "0",
unbinding_car_count: "0",
@@ -272,7 +274,7 @@ function RegisterAly() {
[
{
name: "绑定车牌数",
- value: data.binding_count,
+ value: data.binding_car_count,
},
{
name: "未绑定车牌数",
@@ -283,7 +285,7 @@ function RegisterAly() {
[
{
name: "绑定车牌会员数",
- value: data.binding_count,
+ value: data.binding_user_count,
},
{
name: "非绑定车牌会员数",
@@ -577,7 +579,8 @@ function RegisterAly() {
data: res?.data || [],
total: res?.data?.length || 0,
list: {
- binding_count: res.binding_count,
+ binding_car_count: res.binding_car_count,
+ binding_user_count: res.binding_user_count,
user_count: res.user_count,
car_count: res.car_count,
unbinding_car_count: res.unbinding_car_count,
@@ -586,7 +589,8 @@ function RegisterAly() {
});
getRevenueOption(res?.data);
getRingOption({
- binding_count: res.binding_count,
+ binding_car_count: res.binding_car_count,
+ binding_user_count: res.binding_user_count,
user_count: res.user_count,
car_count: res.car_count,
unbinding_car_count: res.unbinding_car_count,
diff --git a/src/pages/DataAnalysisPrediction/ParkingOverview/index.scss b/src/pages/DataAnalysisPrediction/ParkingOverview/index.scss
index 804a9e8..9383f24 100644
--- a/src/pages/DataAnalysisPrediction/ParkingOverview/index.scss
+++ b/src/pages/DataAnalysisPrediction/ParkingOverview/index.scss
@@ -206,7 +206,7 @@ $color-primary : var(--color-primary);
align-items: center;
width: max-content;
height: 40px;
- background: rgba(30, 38, 53, 0.64);
+
p {
display: flex;
@@ -222,6 +222,10 @@ $color-primary : var(--color-primary);
color: #127bfc;
background: rgba(30, 38, 53, 0.64);
}
+
+ div {
+ background: rgba(30, 38, 53, 0.64);
+ }
}
.left_home {
@@ -439,6 +443,45 @@ $color-primary : var(--color-primary);
background: url("../../../assets/images/equip/home/right_checked.png") no-repeat;
}
}
+
+ .tfff {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ }
+
+ .topph {
+ display: flex;
+ align-items: center;
+ padding: 0 20px;
+ margin-top: 4px;
+
+ .nol {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-right: 8px;
+
+ // font-size: 18px;
+ p {
+ border: #127bfc 1px solid;
+ margin-bottom: 0%;
+ padding: 2px;
+ }
+
+ }
+
+ .nor {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+
+ .trr {
+ display: flex;
+ justify-content: space-between;
+ }
+ }
+ }
}
.pk_footer {
diff --git a/src/pages/DataAnalysisPrediction/ParkingOverview/loadable.jsx b/src/pages/DataAnalysisPrediction/ParkingOverview/loadable.jsx
index fe5a52d..0331cf1 100644
--- a/src/pages/DataAnalysisPrediction/ParkingOverview/loadable.jsx
+++ b/src/pages/DataAnalysisPrediction/ParkingOverview/loadable.jsx
@@ -8,6 +8,7 @@ import {
AutoComplete,
Table,
Select,
+ Progress,
Modal,
} from "antd";
import {
@@ -18,6 +19,8 @@ import {
} from "@ant-design/icons";
import { json, useLocation, useNavigate } from "react-router-dom";
import ReactEcharts from "echarts-for-react";
+import * as echarts from "echarts";
+import "echarts-gl";
import {
ImgError,
@@ -53,6 +56,7 @@ import { time } from "echarts";
let timer = null;
let qftimer = null;
let crtimer = null;
+let option = null;
const ParkingOverview = connect(function mapStateToProps(state) {
return {
user: state.user,
@@ -219,6 +223,14 @@ const ParkingOverview = connect(function mapStateToProps(state) {
income: 0,
memberTotal: 0,
});
+ //左侧数据储存 区
+ const [LeftDataTopqu, setLeftDataTopqu] = useState({
+ offRoadParks: 0,
+ offRoadBerth: 0,
+ roadParks: 0,
+ roadBerth: 0,
+ memberTotal: 0,
+ });
const [LeftDataOther, setLeftDataOther] = useState({
usage: 0,
turnoverRate: 0,
@@ -239,19 +251,73 @@ const ParkingOverview = connect(function mapStateToProps(state) {
status: "",
},
{
- text: "近7日交易订单数",
+ text: "昨日交易订单数",
value: "orderTotal",
img: Lf3,
status: "单",
},
{
- text: "近7日收入",
+ text: "昨日收入",
value: "income",
img: Lf4,
status: "元",
},
{
- text: "近7日泊位利用率",
+ text: "昨日泊位利用率",
+ value: "usage",
+ img: Lf5,
+ status: "%",
+ other: true,
+ url: "/dataAlyPrediction/parkUsageAly",
+ },
+ {
+ text: "出入场流率",
+ value: "flowrate",
+ img: Lf5,
+ status: "%",
+ other: true,
+ },
+ {
+ text: "昨泊位周转率",
+ value: "turnoverRate",
+ img: Lf6,
+ status: "次",
+ other: true,
+ url: "/dataAlyPrediction/parkTurnoverAly",
+ },
+ {
+ text: "注册会员",
+ value: "memberTotal",
+ img: Lf7,
+ status: "",
+ },
+ ]);
+ //区域
+ const [LeftShowqu, setLeftShowqu] = useState([
+ {
+ text: "停车场总数",
+ value: "offRoadParks",
+ img: Lf1,
+ status: "",
+ },
+ {
+ text: "停车场泊位总数",
+ value: "offRoadBerth",
+ img: Lf2,
+ status: "",
+ },
+ {
+ text: "路段总数",
+ value: "roadParks",
+ img: Lf3,
+ },
+ {
+ text: "路段泊位总数",
+ value: "roadBerth",
+ img: Lf2,
+ },
+ {
+ text: "昨日泊位利用率",
value: "usage",
img: Lf5,
status: "%",
@@ -266,7 +332,7 @@ const ParkingOverview = connect(function mapStateToProps(state) {
other: true,
},
{
- text: "近7日泊位周转率",
+ text: "昨泊位周转率",
value: "turnoverRate",
img: Lf6,
status: "次",
@@ -339,6 +405,14 @@ const ParkingOverview = connect(function mapStateToProps(state) {
const [HoShow, setHoShow] = useState(false);
//欠费弹框是否出现
const [Qf, setQf] = useState(false);
+
+ //右侧top
+ const [DataTop, setDataTop] = useState([
+ {
+ name: "",
+ rate: "",
+ },
+ ]);
//文字展示
const [Text, setText] = useState("");
//右侧时间切换
@@ -504,10 +578,16 @@ const ParkingOverview = connect(function mapStateToProps(state) {
const SelectDay = (str, val) => {
if (str == 1) {
setDaySel(val);
- GetComplaintType(RoadSelect, val);
+ if (CarRoad[CarShow].type == 1) {
+ GetComplaintType(RoadSelect, val);
+ }
} else if (str == 2) {
setDaySet(val);
- GetParkingEvaluate(RoadSelect, val);
+ if (CarRoad[CarShow].type == 2) {
+ GetincomeType(RoadSelect, val);
+ } else {
+ GetParkingEvaluate(RoadSelect, val);
+ }
} else if (str == 3) {
setDaySes(val);
GetRevenueAnalysis(RoadSelect, val);
@@ -624,77 +704,228 @@ const ParkingOverview = connect(function mapStateToProps(state) {
},
});
};
- const getRingOption = (
- datas = [
- {
- key: "1星",
- value: 0,
+ // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+ function getParametricEquation(
+ startRatio,
+ endRatio,
+ isSelected,
+ isHovered,
+ k,
+ h
+ ) {
+ // 计算
+ let midRatio = (startRatio + endRatio) / 2;
+
+ let startRadian = startRatio * Math.PI * 2;
+ let endRadian = endRatio * Math.PI * 2;
+ let midRadian = midRatio * Math.PI * 2;
+
+ // 如果只有一个扇形，则不实现选中效果。
+ if (startRatio === 0 && endRatio === 1) {
+ isSelected = false;
+ }
+
+ // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+ k = typeof k !== "undefined" ? k : 1 / 3;
+
+ // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+ let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+ let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+ // 计算高亮效果的放大比例（未高亮，则比例为 1）
+ let hoverRate = isHovered ? 1.05 : 1;
+
+ // 返回曲面参数方程
+ return {
+ u: {
+ min: -Math.PI,
+ max: Math.PI * 3,
+ step: Math.PI / 32,
},
- {
- key: "2星",
- value: 0,
+
+ v: {
+ min: 0,
+ max: Math.PI * 2,
+ step: Math.PI / 20,
},
- {
- key: "3星",
- value: 0,
+
+ x: function (u, v) {
+ if (u < startRadian) {
+ return (
+ offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+ );
+ }
+ if (u > endRadian) {
+ return (
+ offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+ );
+ }
+ return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
},
- {
- key: "4星",
- value: 0,
+
+ y: function (u, v) {
+ if (u < startRadian) {
+ return (
+ offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+ );
+ }
+ if (u > endRadian) {
+ return (
+ offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+ );
+ }
+ return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
},
- {
- key: "5星",
- value: 0,
+
+ z: function (u, v) {
+ if (u < -Math.PI * 0.5) {
+ return Math.sin(u);
+ }
+ if (u > Math.PI * 2.5) {
+ return Math.sin(u) * h * 0.1;
+ }
+ return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
},
- ]
- ) => {
- // 获取所有地区名称
+ };
+ }
- const arrRight =
- datas.map((ele) => {
- return {
- name: ele.key,
- value: ele.value,
- };
- }) || [];
- setRightTwo({
- title: {
- text: "{a|" + sum(datas.map((ele) => ele.value)) + "}{c|次}",
- x: "center",
- y: "center",
- subtext: "评价总数",
- subtextStyle: {
- color: "#fff",
- fontSize: 14,
- },
- textStyle: {
- rich: {
- a: {
- fontSize: 30,
- color: "#4DC3FF",
- },
+ // 生成模拟 3D 饼图的配置项
+ function getPie3D(pieData, internalDiameterRatio) {
+ let series = [];
+ let sumValue = 0;
+ let startValue = 0;
+ let endValue = 0;
+ let legendData = [];
+ let k =
+ typeof internalDiameterRatio !== "undefined"
+ ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+ : 1 / 3;
- c: {
- fontSize: 14,
- color: "#4DC3FF",
- // padding: [5,0]
- },
- },
+ // 为每一个饼图数据，生成一个 series-surface 配置
+ for (let i = 0; i < pieData.length; i++) {
+ sumValue += pieData[i].value;
+
+ let seriesItem = {
+ name:
+ typeof pieData[i].name === "undefined"
+ ? `series${i}`
+ : pieData[i].name,
+ type: "surface",
+ parametric: true,
+ wireframe: {
+ show: false,
+ },
+ pieData: pieData[i],
+ pieStatus: {
+ selected: false,
+ hovered: false,
+ k: k,
},
+ };
+
+ if (typeof pieData[i].itemStyle != "undefined") {
+ let itemStyle = {};
+
+ typeof pieData[i].itemStyle.color != "undefined"
+ ? (itemStyle.color = pieData[i].itemStyle.color)
+ : null;
+ typeof pieData[i].itemStyle.opacity != "undefined"
+ ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+ : null;
+
+ seriesItem.itemStyle = itemStyle;
+ }
+ series.push(seriesItem);
+ }
+
+ // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+ // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+ for (let i = 0; i < series.length; i++) {
+ endValue = startValue + series[i].pieData.value;
+
+ series[i].pieData.startRatio = startValue / sumValue;
+ series[i].pieData.endRatio = endValue / sumValue;
+ series[i].parametricEquation = getParametricEquation(
+ series[i].pieData.startRatio,
+ series[i].pieData.endRatio,
+ false,
+ false,
+ k,
+ series[i].pieData.value
+ );
+
+ startValue = endValue;
+
+ legendData.push(series[i].name);
+ }
+
+ // 补充一个透明的圆环，用于支撑高亮功能的近似实现。
+ series.push({
+ name: "mouseoutSeries",
+ type: "surface",
+ parametric: true,
+ wireframe: {
+ show: false,
},
- tooltip: {
- trigger: "item",
- formatter: (params) => {
- return `<div class="ttopi">${params.marker} ${params.name} ${params.value}次 ${params.percent}%</div>`;
+ itemStyle: {
+ opacity: 0,
+ },
+ parametricEquation: {
+ u: {
+ min: 0,
+ max: Math.PI * 2,
+ step: Math.PI / 20,
+ },
+ v: {
+ min: 0,
+ max: Math.PI,
+ step: Math.PI / 20,
+ },
+ x: function (u, v) {
+ return Math.sin(v) * Math.sin(u) + Math.sin(u);
+ },
+ y: function (u, v) {
+ return Math.sin(v) * Math.cos(u) + Math.cos(u);
+ },
+ z: function (u, v) {
+ return Math.cos(v) > 0 ? 0.1 : -0.1;
},
},
+ });
+
+ // 准备待返回的配置项，把准备好的 legendData、series 传入。
+ let option = {
+ //animation: false,
+ // title: {
+ // text: "{a|" + sum(datas.map((ele) => ele.value)) + "}{c|次}",
+ // x: "center",
+ // y: "center",
+ // subtext: "评价总数",
+ // subtextStyle: {
+ // color: "#fff",
+ // fontSize: 14,
+ // },
+ // textStyle: {
+ // rich: {
+ // a: {
+ // fontSize: 30,
+ // color: "#4DC3FF",
+ // },
+
+ // c: {
+ // fontSize: 14,
+ // color: "#4DC3FF",
+ // // padding: [5,0]
+ // },
+ // },
+ // },
+ // },
legend: {
type: "scroll",
//right: "5%",
top: "bottom",
bottom: "center",
- //data: areaNames,
- data: ["1星", "2星", "3星", "4星", "5星"],
+ data: legendData,
itemWidth: 18,
itemHeight: 12,
textStyle: {
@@ -702,39 +933,308 @@ const ParkingOverview = connect(function mapStateToProps(state) {
color: "white",
},
},
-
- // color: ["#34F3B6", "#4DC3FF"],
- //series: seriesData,
- series: [
- {
- // name: 'Access From',
- type: "pie",
- radius: ["60%", "70%"],
- avoidLabelOverlap: false,
- label: {
- show: false,
- position: "center",
+ tooltip: {
+ formatter: (params) => {
+ if (params.seriesName !== "mouseoutSeries") {
+ return `${
+ params.seriesName
+ }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
+ params.color
+ };"></span>${option.series[params.seriesIndex].pieData.value}(次)`;
+ }
+ },
+ },
+ xAxis3D: {
+ min: -1,
+ max: 1,
+ },
+ yAxis3D: {
+ min: -1,
+ max: 1,
+ },
+ zAxis3D: {
+ min: -1,
+ max: 1,
+ },
+ grid3D: {
+ show: false,
+ boxHeight: 10,
+ viewControl: {
+ //3d效果可以放大、旋转等，请自己去查看官方配置
+ alpha: 40,
+ // beta: 40,
+ rotateSensitivity: 0,
+ zoomSensitivity: 0,
+ panSensitivity: 0,
+ autoRotate: false,
+ },
+ //后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
+ postEffect: {
+ //配置这项会出现锯齿，请自己去查看官方配置有办法解决
+ enable: true,
+ bloom: {
+ enable: true,
+ bloomIntensity: 0.1,
},
- // emphasis: {
- // label: {
- // show: true,
- // fontSize: 40,
- // fontWeight: "bold",
- // },
- // },
- labelLine: {
- show: false,
+ SSAO: {
+ enable: true,
+ quality: "medium",
+ radius: 2,
},
- data: arrRight,
},
- ],
- grid: {
- x: 50,
- y: 55,
- x2: 70,
- y2: 20,
},
- });
+ series: series,
+ };
+ return option;
+ }
+
+ const getRingOption = (
+ datas = [
+ {
+ key: "1星",
+ value: 0,
+ },
+ ],
+ type
+ ) => {
+ // 获取所有地区名称
+
+ const arrRight =
+ datas.map((ele) => {
+ return {
+ name: ele.key,
+ value: ele.value,
+ };
+ }) || [];
+ if (type == 2) {
+ setRightTwo({
+ title: {
+ text: "{a|" + sum(datas.map((ele) => ele.value)) + "}",
+ x: "center",
+ y: "center",
+ subtext: "营业收入",
+ subtextStyle: {
+ color: "#fff",
+ fontSize: 14,
+ },
+ textStyle: {
+ rich: {
+ a: {
+ fontSize: 30,
+ color: "#4DC3FF",
+ },
+
+ c: {
+ fontSize: 14,
+ color: "#4DC3FF",
+ // padding: [5,0]
+ },
+ },
+ },
+ },
+ tooltip: {
+ trigger: "item",
+ formatter: (params) => {
+ return `<div class="ttopi">${params.marker} ${params.name} ${params.value} ${params.percent}%</div>`;
+ },
+ },
+ legend: {
+ type: "scroll",
+ //right: "5%",
+ top: "bottom",
+ bottom: "center",
+ //data: areaNames,
+ data: datas.map((ele) => ele.key),
+ itemWidth: 18,
+ itemHeight: 12,
+ textStyle: {
+ fontSize: 14,
+ color: "white",
+ },
+ },
+
+ // color: ["#34F3B6", "#4DC3FF"],
+ //series: seriesData,
+ series: [
+ {
+ // name: 'Access From',
+ type: "pie",
+ radius: ["60%", "70%"],
+ avoidLabelOverlap: false,
+ label: {
+ show: false,
+ position: "center",
+ },
+ // emphasis: {
+ // label: {
+ // show: true,
+ // fontSize: 40,
+ // fontWeight: "bold",
+ // },
+ // },
+ labelLine: {
+ show: false,
+ },
+ data: arrRight,
+ },
+ ],
+ grid: {
+ x: 50,
+ y: 55,
+ x2: 70,
+ y2: 20,
+ },
+ });
+ } else {
+ // 传入数据生成 option
+ option = getPie3D([...arrRight], 0.59);
+ var myChart = echarts.init(document.getElementById("ecsdf"));
+ myChart.setOption(option);
+ let selectedIndex = "";
+ let hoveredIndex = "";
+
+ // 监听点击事件，实现选中效果（单选）
+ // myChart.on("click", function (params) {
+ // // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+ // let isSelected = !option.series[params.seriesIndex].pieStatus.selected;
+ // let isHovered = option.series[params.seriesIndex].pieStatus.hovered;
+ // let k = option.series[params.seriesIndex].pieStatus.k;
+ // let startRatio = option.series[params.seriesIndex].pieData.startRatio;
+ // let endRatio = option.series[params.seriesIndex].pieData.endRatio;
+
+ // // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+ // if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+ // option.series[selectedIndex].parametricEquation =
+ // getParametricEquation(
+ // option.series[selectedIndex].pieData.startRatio,
+ // option.series[selectedIndex].pieData.endRatio,
+ // false,
+ // false,
+ // k,
+ // option.series[selectedIndex].pieData.value
+ // );
+ // option.series[selectedIndex].pieStatus.selected = false;
+ // }
+
+ // // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+ // option.series[params.seriesIndex].parametricEquation =
+ // getParametricEquation(
+ // startRatio,
+ // endRatio,
+ // isSelected,
+ // isHovered,
+ // k,
+ // option.series[selectedIndex].pieData.value
+ // );
+ // option.series[params.seriesIndex].pieStatus.selected = isSelected;
+
+ // // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+ // isSelected ? (selectedIndex = params.seriesIndex) : null;
+
+ // // 使用更新后的 option，渲染图表
+ // myChart.setOption(option);
+ // });
+
+ // 监听 mouseover，近似实现高亮（放大）效果
+ myChart.on("mouseover", function (params) {
+ // 准备重新渲染扇形所需的参数
+ let isSelected;
+ let isHovered;
+ let startRatio;
+ let endRatio;
+ let k;
+
+ // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+ if (hoveredIndex === params.seriesIndex) {
+ return;
+
+ // 否则进行高亮及必要的取消高亮操作
+ } else {
+ // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+ if (hoveredIndex !== "") {
+ // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+ isSelected = option.series[hoveredIndex].pieStatus.selected;
+ isHovered = false;
+ startRatio = option.series[hoveredIndex].pieData.startRatio;
+ endRatio = option.series[hoveredIndex].pieData.endRatio;
+ k = option.series[hoveredIndex].pieStatus.k;
+
+ // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+ option.series[hoveredIndex].parametricEquation =
+ getParametricEquation(
+ startRatio,
+ endRatio,
+ isSelected,
+ isHovered,
+ k,
+ option.series[hoveredIndex].pieData.value
+ );
+ option.series[hoveredIndex].pieStatus.hovered = isHovered;
+
+ // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+ hoveredIndex = "";
+ }
+
+ // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+ if (params.seriesName !== "mouseoutSeries") {
+ // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+ isSelected = option.series[params.seriesIndex].pieStatus.selected;
+ isHovered = true;
+ startRatio = option.series[params.seriesIndex].pieData.startRatio;
+ endRatio = option.series[params.seriesIndex].pieData.endRatio;
+ k = option.series[params.seriesIndex].pieStatus.k;
+
+ // 对当前点击的扇形，执行高亮操作（对 option 更新）
+ option.series[params.seriesIndex].parametricEquation =
+ getParametricEquation(
+ startRatio,
+ endRatio,
+ isSelected,
+ isHovered,
+ k,
+ option.series[params.seriesIndex].pieData.value + 5
+ );
+ option.series[params.seriesIndex].pieStatus.hovered = isHovered;
+
+ // 记录上次高亮的扇形对应的系列号 seriesIndex
+ hoveredIndex = params.seriesIndex;
+ }
+
+ // 使用更新后的 option，渲染图表
+ myChart.setOption(option);
+ }
+ });
+
+ // 修正取消高亮失败的 bug
+ myChart.on("globalout", function () {
+ if (hoveredIndex !== "") {
+ // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+ let isSelected = option.series[hoveredIndex].pieStatus.selected;
+ let isHovered = false;
+ let k = option.series[hoveredIndex].pieStatus.k;
+ let startRatio = option.series[hoveredIndex].pieData.startRatio;
+ let endRatio = option.series[hoveredIndex].pieData.endRatio;
+
+ // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+ option.series[hoveredIndex].parametricEquation =
+ getParametricEquation(
+ startRatio,
+ endRatio,
+ isSelected,
+ isHovered,
+ k,
+ option.series[hoveredIndex].pieData.value
+ );
+ option.series[hoveredIndex].pieStatus.hovered = isHovered;
+
+ // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+ hoveredIndex = "";
+ }
+
+ // 使用更新后的 option，渲染图表
+ myChart.setOption(option);
+ });
+ }
};
//右下
const getRevenueOption = (
@@ -856,6 +1356,7 @@ const ParkingOverview = connect(function mapStateToProps(state) {
setCarShow(index + 1);
}
}
+ setText("");
setRoadSelect("1");
};
//底部车场类型切换
@@ -890,6 +1391,26 @@ const ParkingOverview = connect(function mapStateToProps(state) {
}
);
};
+ //车场总数 单独提供给区大屏
+ const GetParkinfo = () => {
+ ajax.ParkingOverview.GetParkinfo({
+ areaType: CarRoad[CarShow].type,
+ value: CarRoad[CarShow].value,
+ }).then(
+ (res) => {
+ if (parseInt(res?.status) === 20000) {
+ setLeftDataTopqu({ ...res?.data });
+ } else {
+ message.error(res?.message);
+ }
+ setLoading(true);
+ },
+ (err) => {
+ console.log(err);
+ setLoading(true);
+ }
+ );
+ };
//获取左边数据(7日利用率和周转)
const GetUseInfo = (val) => {
ajax.ParkingOverview.GetUseInfo({
@@ -1051,6 +1572,51 @@ const ParkingOverview = connect(function mapStateToProps(state) {
}
);
};
+
+ //获取收费top5
+ const GetrateRank = () => {
+ ajax.ParkingOverview.GetrateRank({
+ areaType: CarRoad[CarShow].type,
+ value: CarRoad[CarShow].value,
+ }).then(
+ (res) => {
+ if (parseInt(res?.status) === 20000) {
+ setDataTop(res?.data);
+ // getRevenueOption(res.data || []);
+ } else {
+ message.error(res?.message);
+ }
+ setLoading(true);
+ },
+ (err) => {
+ console.log(err);
+ setLoading(true);
+ }
+ );
+ };
+ //概览-营收分析类型占比
+ const GetincomeType = (val, item) => {
+ ajax.ParkingOverview.GetincomeType({
+ type: val,
+ dateType: item,
+ areaType: CarRoad[CarShow].type,
+ value: CarRoad[CarShow].value,
+ }).then(
+ (res) => {
+ if (parseInt(res?.status) === 20000) {
+ // setZata(res?.data);
+ getRingOption(res?.data, 2);
+ } else {
+ message.error(res?.message);
+ }
+ setLoading(true);
+ },
+ (err) => {
+ console.log(err);
+ setLoading(true);
+ }
+ );
+ };
//获取收入分析
const GetRevenueAnalysis = (val, item) => {
ajax.ParkingOverview.GetRevenueAnalysis({
@@ -1073,7 +1639,8 @@ const ParkingOverview = connect(function mapStateToProps(state) {
setLoading(true);
}
);
- }; //获取车场评价
+ };
+ //获取车场评价
const GetParkingEvaluate = (val, item) => {
ajax.ParkingOverview.GetParkingEvaluate({
type: val,
@@ -1084,7 +1651,7 @@ const ParkingOverview = connect(function mapStateToProps(state) {
(res) => {
if (parseInt(res?.status) === 20000) {
// setZata(res?.data);
- getRingOption(res?.data);
+ getRingOption(res?.data, 1);
} else {
message.error(res?.message);
}
@@ -1095,7 +1662,8 @@ const ParkingOverview = connect(function mapStateToProps(state) {
setLoading(true);
}
);
- }; //获取客诉类型分析
+ };
+ //获取客诉类型分析
const GetComplaintType = (val, item) => {
ajax.ParkingOverview.GetComplaintType({
type: val,
@@ -1207,12 +1775,19 @@ const ParkingOverview = connect(function mapStateToProps(state) {
setDaySet("1");
setDaySes("1");
getMapData(RoadSelect);
- GetDataStatic(RoadSelect);
- GetOverviewData(RoadSelect);
+ // GetDataStatic(RoadSelect);
GetUseInfo(RoadSelect);
GetRevenueAnalysis(RoadSelect, "1");
- GetParkingEvaluate(RoadSelect, "1");
- GetComplaintType(RoadSelect, "1");
+ if (CarRoad[CarShow].type == 2) {
+ GetrateRank();
+ GetincomeType(RoadSelect, "1");
+ GetOverviewData(RoadSelect);
+ } else {
+ GetComplaintType(RoadSelect, "1");
+ // GetincomeType(RoadSelect, "1");
+ GetParkinfo();
+ GetParkingEvaluate(RoadSelect, "1");
+ }
}, [RoadSelect, CarShow]);
useEffect(() => {
@@ -1237,47 +1812,89 @@ const ParkingOverview = connect(function mapStateToProps(state) {
<div className="left_home">
<div className="pkh_title">停车业务概览</div>
<div className="dlex_f">
- {LeftShow.map((ele) => {
- return (
- <div
- className={ele?.url ? "curpoin lf_s" : "lf_s"}
- onClick={() => {
- if (ele?.url) {
- window.location = `/#${ele.url}`;
- }
- if (ele.text == "泊位总数") {
- getData(FormData);
- setBoOpenClass({
- width: 1632,
- title: "泊位列表",
- type: 1,
- });
- setBoOpen(true);
- }
- }}
- key={ele.text}
- >
- <img src={ele.img} alt="" />
- <div className="lf_num">
- <div className="pldf">
- <p
- title={
- ele.other
- ? LeftDataOther[ele.value]
- : LeftDataTop[ele.value]
+ {CarRoad[CarShow].type == 2
+ ? LeftShow.map((ele) => {
+ return (
+ <div
+ className={ele?.url ? "curpoin lf_s" : "lf_s"}
+ onClick={() => {
+ if (ele?.url) {
+ window.location = `/#${ele.url}`;
}
- >
- {ele.other
- ? LeftDataOther[ele.value]
- : LeftDataTop[ele.value]}
- </p>
- <i>{ele.status}</i>
+ if (ele.text == "停车场泊位总数") {
+ getData(FormData);
+ setBoOpenClass({
+ width: 1632,
+ title: "泊位列表",
+ type: 1,
+ });
+ setBoOpen(true);
+ }
+ }}
+ key={ele.text}
+ >
+ <img src={ele.img} alt="" />
+ <div className="lf_num">
+ <div className="pldf">
+ <p
+ title={
+ ele.other
+ ? LeftDataOther[ele.value]
+ : LeftDataTop[ele.value]
+ }
+ >
+ {ele.other
+ ? LeftDataOther[ele.value]
+ : LeftDataTop[ele.value]}
+ </p>
+ <i>{ele.status}</i>
+ </div>
+ <span>{ele.text}</span>
+ </div>
</div>
- <span>{ele.text}</span>
- </div>
- </div>
- );
- })}
+ );
+ })
+ : LeftShowqu.map((ele) => {
+ return (
+ <div
+ className={ele?.url ? "curpoin lf_s" : "lf_s"}
+ onClick={() => {
+ if (ele?.url) {
+ window.location = `/#${ele.url}`;
+ }
+ // if (ele.text == "停车场泊位总数") {
+ // getData(FormData);
+ // setBoOpenClass({
+ // width: 1632,
+ // title: "泊位列表",
+ // type: 1,
+ // });
+ // setBoOpen(true);
+ // }
+ }}
+ key={ele.text}
+ >
+ <img src={ele.img} alt="" />
+ <div className="lf_num">
+ <div className="pldf">
+ <p
+ title={
+ ele.other
+ ? LeftDataOther[ele.value]
+ : LeftDataTopqu[ele.value]
+ }
+ >
+ {ele.other
+ ? LeftDataOther[ele.value]
+ : LeftDataTopqu[ele.value]}
+ </p>
+ <i>{ele.status}</i>
+ </div>
+ <span>{ele.text}</span>
+ </div>
+ </div>
+ );
+ })}
</div>
</div>
<div className="input_h">
@@ -1363,16 +1980,15 @@ const ParkingOverview = connect(function mapStateToProps(state) {
) : (
""
)}
- {Text && (
- // CarRoad[CarShow].type == 1 &&
+ {
<div className="left_content">
<p>
<SoundOutlined />
</p>
- {Text}
+ <div>{Text}</div>
</div>
- )}
- <div className="show_c">
+ }
+ {/* <div className="show_c">
<div className="lf_num">
<div className="pldf">
<p title={Zata?.income}>{Zata?.income}</p>
@@ -1387,7 +2003,7 @@ const ParkingOverview = connect(function mapStateToProps(state) {
</div>
<span>今日服务车次数</span>
</div>
- </div>
+ </div> */}
<div className="right_ssdf">
<div className="c_t">
{MapS.map((ele) => {
@@ -1435,47 +2051,77 @@ const ParkingOverview = connect(function mapStateToProps(state) {
{HoShow ? <i></i> : ""}
</div>
<div className="right_home">
- <div>
- <div className="pkh_title">
- 客诉类型分析
- <Tooltip
- placement="bottom"
- title={
- <span>统计范围内用户对车场进行投诉反馈的不同类型占比</span>
- }
- >
- <i>?</i>
- </Tooltip>
+ {CarRoad[CarShow].type == 2 ? (
+ <div>
+ <div className="pkh_title">收费员排行Top5</div>
+ <div className="tfff">
+ {DataTop.map((ele, index) => {
+ return (
+ <div className="topph" key={ele.name + index}>
+ <div className="nol">
+ <p>No.{index + 1}</p>
+ <span></span>
+ </div>
+ <div className="nor">
+ <div className="trr">
+ <span>{ele.name || "--"}</span>
+ <span>{ele.rate || 0}</span>
+ </div>
+ <Progress
+ showInfo={false}
+ percent={ele.rate.slice(0, ele.rate.length - 1) || 0}
+ />
+ </div>
+ </div>
+ );
+ })}
+ </div>
</div>
- <div className="day_select">
- {Dayfour.map((ele) => {
- return (
- <span
- key={ele.text}
- className={
- DaySel == ele.value ? "day_checked day_item" : "day_item"
- }
- onClick={() => SelectDay(1, ele.value)}
- >
- {ele.text}
- </span>
- );
- })}
+ ) : (
+ <div>
+ <div className="pkh_title">
+ 客诉类型分析
+ <Tooltip
+ placement="bottom"
+ title={
+ <span>统计范围内用户对车场进行投诉反馈的不同类型占比</span>
+ }
+ >
+ <i>?</i>
+ </Tooltip>
+ </div>
+ <div className="day_select">
+ {Dayfour.map((ele) => {
+ return (
+ <span
+ key={ele.text}
+ className={
+ DaySel == ele.value ? "day_checked day_item" : "day_item"
+ }
+ onClick={() => SelectDay(1, ele.value)}
+ >
+ {ele.text}
+ </span>
+ );
+ })}
+ </div>
+ <ReactEcharts
+ option={RightOne}
+ style={{ height: "180px", width: "100%" }}
+ />
</div>
- <ReactEcharts
- option={RightOne}
- style={{ height: "180px", width: "100%" }}
- />
- </div>
+ )}
<div>
<div className="pkh_title">
- 车场服务评价
- <Tooltip
- placement="bottom"
- title={<span>统计范围内用户对车场进行评价的不同分值占比</span>}
- >
- <i>?</i>
- </Tooltip>
+ {CarRoad[CarShow].type == 2 ? "营业收入分析" : "车场服务评价"}
+ {CarRoad[CarShow].type == 1 && (
+ <Tooltip
+ placement="bottom"
+ title={<span>统计范围内用户对车场进行评价的不同分值占比</span>}
+ >
+ <i>?</i>
+ </Tooltip>
+ )}
</div>
<div className="day_select">
{Dayfour.map((ele) => {
@@ -1492,10 +2138,14 @@ const ParkingOverview = connect(function mapStateToProps(state) {
);
})}
</div>
- <ReactEcharts
- option={RightTwo}
- style={{ height: "180px", width: "100%" }}
- />
+ {CarRoad[CarShow].type == 1 ? (
+ <div id="ecsdf" style={{ height: "180px", width: "100%" }}></div>
+ ) : (
+ <ReactEcharts
+ option={RightTwo}
+ style={{ height: "180px", width: "100%" }}
+ />
+ )}
</div>
<div>
<div className="pkh_title">
diff --git a/src/pages/FinancialMgm/FinancialReport/ParkCardReport/loadable.jsx b/src/pages/FinancialMgm/FinancialReport/ParkCardReport/loadable.jsx
index 07a1f90..0e9389a 100644
--- a/src/pages/FinancialMgm/FinancialReport/ParkCardReport/loadable.jsx
+++ b/src/pages/FinancialMgm/FinancialReport/ParkCardReport/loadable.jsx
@@ -25,27 +25,28 @@ const { RangePicker } = DatePicker;
function ParkCardReport() {
//页面检索-重复
const formdata = {
- time_type: "1",
+ date_type: "1",
start_time: moment()
.startOf("day")
.subtract(1, "days")
.format("YYYY-MM-DD"),
end_time: moment().endOf("day").subtract(1, "days").format("YYYY-MM-DD"),
pn: 1,
+ export: 0,
page_size: dictionary?.pageSizeOptions1[0],
};
const col = [
{
title: "支付日期",
- dataIndex: "time_type",
- key: "time_type",
+ dataIndex: "date",
+ key: "date",
align: "center",
},
{
title: "余额",
- dataIndex: "ye_money",
- key: "ye_money",
+ dataIndex: "balance",
+ key: "balance",
align: "center",
render: (_, record) => {
return _ && _ + "元";
@@ -53,8 +54,8 @@ function ParkCardReport() {
},
{
title: "现金",
- dataIndex: "xj_money",
- key: "xj_money",
+ dataIndex: "cash",
+ key: "cash",
align: "center",
render: (_, record) => {
return _ && _ + "元";
@@ -62,8 +63,8 @@ function ParkCardReport() {
},
{
title: "微信",
- dataIndex: "wx_money",
- key: "wx_money",
+ dataIndex: "wechat",
+ key: "wechat",
align: "center",
render: (_, record) => {
return _ && _ + "元";
@@ -71,8 +72,8 @@ function ParkCardReport() {
},
{
title: "支付宝",
- dataIndex: "zfb_money",
- key: "zfb_money",
+ dataIndex: "alipay",
+ key: "alipay",
align: "center",
render: (_, record) => {
return _ && _ + "元";
@@ -80,8 +81,8 @@ function ParkCardReport() {
},
{
title: "系统录入",
- dataIndex: "xtlr_money",
- key: "xtlr_money",
+ dataIndex: "system_input",
+ key: "system_input",
align: "center",
render: (_, record) => {
return _ && _ + "元";
@@ -89,8 +90,8 @@ function ParkCardReport() {
},
{
title: "招商银行",
- dataIndex: "zsyh_money",
- key: "zsyh_money",
+ dataIndex: "merchants_bank",
+ key: "merchants_bank",
align: "center",
render: (_, record) => {
return _ && _ + "元";
@@ -98,8 +99,8 @@ function ParkCardReport() {
},
{
title: "数字人民币",
- dataIndex: "szrmb_money",
- key: "szrmb_money",
+ dataIndex: "digital_yuan",
+ key: "digital_yuan",
align: "center",
render: (_, record) => {
return _ && _ + "元";
@@ -107,8 +108,8 @@ function ParkCardReport() {
},
{
title: "车场自收",
- dataIndex: "cczs_money",
- key: "cczs_money",
+ dataIndex: "parking",
+ key: "parking",
align: "center",
render: (_, record) => {
return _ && _ + "元";
@@ -116,8 +117,8 @@ function ParkCardReport() {
},
{
title: "ETC",
- dataIndex: "etc_money",
- key: "etc_money",
+ dataIndex: "ETC",
+ key: "ETC",
align: "center",
render: (_, record) => {
return _ && _ + "元";
@@ -169,7 +170,7 @@ function ParkCardReport() {
//时间状态切换
const TimeChange = () => {
- let e = FormData.time_type;
+ let e = FormData.date_type;
let str = "date";
let mat = "YYYY-MM-DD";
if (e == 4) {
@@ -203,7 +204,7 @@ function ParkCardReport() {
}
setFormData({
...FormData,
- time_type: e,
+ date_type: e,
start_time: start,
end_time: end,
});
@@ -264,15 +265,33 @@ function ParkCardReport() {
</div>
);
};
+ //导出
+ const ReportPaySummaryReport = () => {
+ ajax.ElectInvoice.getParkCarOrder({
+ ...FormDatas,
+ export: 1,
+ }).then(
+ (res) => {
+ if (parseInt(res?.status) === 20000) {
+ Daownload(res?.data?.url);
+ } else {
+ message.error(res?.message);
+ }
+ },
+ (err) => {
+ console.log(err);
+ }
+ );
+ };
//获取页面显示数据
const getData = (data) => {
setLoading(false);
- ajax.ElectInvoice.getPdalist({ ...data }).then(
+ ajax.ElectInvoice.getParkCarOrder({ ...data }).then(
(res) => {
if (parseInt(res?.status) === 20000) {
setData({
- data: res?.data?.list || [],
- total: res?.data?.total || 0,
+ data: res?.data || [],
+ total: res?.total || 0,
});
setLoading(true);
} else {
@@ -320,7 +339,7 @@ function ParkCardReport() {
时间
<div className="daf">
<Select
- value={FormData.time_type}
+ value={FormData.date_type}
// style={{
// width: "100%",
// }}
@@ -389,7 +408,7 @@ function ParkCardReport() {
? moment(date).day(7).format("YYYY-MM-DD")
: null,
});
- } else {
+ } else {
setFormData({ ...FormData, end_time: dateString });
}
}}
@@ -436,7 +455,7 @@ function ParkCardReport() {
<span
className={"sear_ser"}
onClick={() => {
- // Data?.total && setFormDatas({ ...FormData });
+ Data?.total && ReportPaySummaryReport();
}}
>
导出
diff --git a/src/pages/FinancialMgm/FinancialReport/PreOrderReport/loadable.jsx b/src/pages/FinancialMgm/FinancialReport/PreOrderReport/loadable.jsx
index bf2f2fd..3f07c30 100644
--- a/src/pages/FinancialMgm/FinancialReport/PreOrderReport/loadable.jsx
+++ b/src/pages/FinancialMgm/FinancialReport/PreOrderReport/loadable.jsx
@@ -27,10 +27,10 @@ function PreOrderReport() {
const [form] = Form.useForm();
//页面检索-重复
const formdata = {
- type: "1", //类型
+ export: "0", //类型
operator_id: "0", //运营商id
- headname: "", //
- time_type: "1",
+ parking_name: "", //
+ date_type: "1",
start_time: moment()
.startOf("day")
.subtract(1, "days")
@@ -39,28 +39,20 @@ function PreOrderReport() {
pn: 1,
page_size: dictionary?.pageSizeOptions1[0],
};
- const formlayout = {
- labelCol: {
- span: 6,
- },
- wrapperCol: {
- span: 18,
- },
- };
const zonji = [
{
text: "合计预付金额",
- value: "0.00",
+ value: "payment_amount_total",
color: "#a461d8",
},
{
text: "预付抵扣总额",
- value: "0.00",
+ value: "payment_deduction_amount_total",
color: "#82c43c",
},
{
text: "退款总计",
- value: "0.00",
+ value: "payment_refund_amount_total",
color: "#527bff",
},
];
@@ -78,7 +70,10 @@ function PreOrderReport() {
//页面数据
const [Data, setData] = useState({
data: [],
- total: 1,
+ total: 0,
+ payment_amount_total: 0,
+ payment_deduction_amount_total: 0,
+ payment_refund_amount_total: 0,
});
//自动填充
const [options, setOptions] = useState([]);
@@ -94,8 +89,8 @@ function PreOrderReport() {
return [
{
title: "日期",
- dataIndex: "pay_time",
- key: "pay_time",
+ dataIndex: "date",
+ key: "date",
width: 120,
fixed: "right",
align: "center",
@@ -103,36 +98,36 @@ function PreOrderReport() {
{
title: "商户名称",
width: 120,
- dataIndex: "operator_id",
- key: "operator_id",
+ dataIndex: "store_name",
+ key: "store_name",
align: "center",
},
{
title: "停车场名称",
width: 120,
- dataIndex: "tax",
- key: "tax",
+ dataIndex: "parking_name",
+ key: "parking_name",
align: "center",
},
{
title: "泊位数",
width: 120,
- dataIndex: "tax",
- key: "tax",
+ dataIndex: "parking_num",
+ key: "parking_num",
align: "center",
},
{
title: "预付笔数",
width: 120,
- dataIndex: "tax",
- key: "tax",
+ dataIndex: "payment_num",
+ key: "payment_num",
align: "center",
},
{
title: "预付金额(元)",
width: 120,
- dataIndex: "tax",
- key: "tax",
+ dataIndex: "payment_amount",
+ key: "payment_amount",
align: "center",
render: (_, record) => {
return _ && _;
@@ -141,28 +136,28 @@ function PreOrderReport() {
{
title: "预付抵扣笔数",
width: 120,
- dataIndex: "tax",
- key: "tax",
+ dataIndex: "payment_deduction_num",
+ key: "payment_deduction_num",
align: "center",
},
{
title: "预付抵扣金额(元)",
width: 150,
- dataIndex: "tax",
- key: "tax",
+ dataIndex: "payment_deduction_amount",
+ key: "payment_deduction_amount",
align: "center",
},
{
title: "预付退款笔数",
width: 120,
- dataIndex: "tax",
- key: "tax",
+ dataIndex: "payment_refund_num",
+ key: "payment_refund_num",
align: "center",
},
{
title: "预付退款金额(元)",
width: 150,
- dataIndex: "tax",
+ dataIndex: "payment_refund_amount ",
key: "tax",
align: "center",
},
@@ -216,7 +211,7 @@ function PreOrderReport() {
};
//时间状态切换
const TimeChange = () => {
- let e = FormData.time_type;
+ let e = FormData.date_type;
let str = "date";
let mat = "YYYY-MM-DD";
if (e == 4) {
@@ -250,7 +245,7 @@ function PreOrderReport() {
}
setFormData({
...FormData,
- time_type: e,
+ date_type: e,
start_time: start,
end_time: end,
});
@@ -316,15 +311,36 @@ function PreOrderReport() {
}
);
};
+ //导出
+ const ReportPaySummaryReport = () => {
+ ajax.ElectInvoice.getPayment({
+ ...FormDatas,
+ export: 1,
+ }).then(
+ (res) => {
+ if (parseInt(res?.status) === 20000) {
+ Daownload(res?.data?.url);
+ } else {
+ message.error(res?.message);
+ }
+ },
+ (err) => {
+ console.log(err);
+ }
+ );
+ };
//获取页面显示数据
const getData = (data) => {
setLoading(false);
- ajax.ElectInvoice.getInvoice({ ...data }).then(
+ ajax.ElectInvoice.getPayment({ ...data }).then(
(res) => {
if (parseInt(res?.status) === 20000) {
setData({
data: res?.data || [],
total: res.total || 0,
+ payment_amount_total: res?.payment_amount_total,
+ payment_deduction_amount_total: res?.payment_deduction_amount_total,
+ payment_refund_amount_total: res?.payment_refund_amount_total,
});
setLoading(true);
} else {
@@ -373,7 +389,7 @@ function PreOrderReport() {
<span className="lab">停车场名称</span>
<div className="inputs">
<AutoComplete
- value={FormData.headname}
+ value={FormData.parking_name}
style={{
width: "100%",
}}
@@ -384,7 +400,7 @@ function PreOrderReport() {
console.log(e);
setFormData({
...FormData,
- headname: e,
+ parking_name: e,
});
}}
/>
@@ -395,7 +411,7 @@ function PreOrderReport() {
时间
<div className="daf">
<Select
- value={FormData.time_type}
+ value={FormData.date_type}
// style={{
// width: "100%",
// }}
@@ -438,7 +454,7 @@ function PreOrderReport() {
? moment(date).day(1).format("YYYY-MM-DD")
: null,
});
- }else {
+ } else {
setFormData({ ...FormData, start_time: dateString });
}
}}
@@ -464,7 +480,7 @@ function PreOrderReport() {
? moment(date).day(7).format("YYYY-MM-DD")
: null,
});
- } else {
+ } else {
setFormData({ ...FormData, end_time: dateString });
}
}}
@@ -530,7 +546,7 @@ function PreOrderReport() {
<span
className={"sear_ser"}
onClick={() => {
- // Data?.total && setFormDatas({ ...FormData });
+ Data?.total && ReportPaySummaryReport();
}}
>
导出
@@ -542,7 +558,7 @@ function PreOrderReport() {
<div className="pl" key={ele.text}>
<i style={{ background: ele.color }}></i>
<p>
- {ele.text}: <span>{ele.value}</span>元
+ {ele.text}: <span>{Data[ele.value]}</span>元
</p>
</div>
);
diff --git a/src/services/ElectInvoice/index.js b/src/services/ElectInvoice/index.js
index 9899a96..1698e85 100644
--- a/src/services/ElectInvoice/index.js
+++ b/src/services/ElectInvoice/index.js
@@ -74,6 +74,25 @@ const getOperationReport = (params) => {
data: params,
});
};
+//************************停车卡报表
+// 获取列表数据
+const getParkCarOrder = (params) => {
+ return ajax({
+ url: "/api/fin/finance_table/parking_card_order_statistics",
+ type: "post",
+ data: params,
+ });
+};
+//************************ 预付报表
+// 获取列表数据
+const getPayment = (params) => {
+ return ajax({
+ url: "/api/fin/finance_table/advance_payment_statistics",
+ type: "post",
+ data: params,
+ });
+};
+
//************************总收入报表
// 获取列表数据
const getPaySummaryReport = (params) => {
@@ -209,6 +228,31 @@ const exportPayFx = (params) => {
data: params,
});
};
+//************************设备运行统计
+//获取列表sf数据
+const getPstatics = (params) => {
+ return ajax({
+ url: "/api/ana/equipmentRuning/statics",
+ type: "post",
+ data: params,
+ });
+};
+//获取设备运行统计列表
+const getPstaticslist = (params) => {
+ return ajax({
+ url: "/api/ana/equipmentRuning/list",
+ type: "post",
+ data: params,
+ });
+};
+//获取列表设备运行统计导出接口
+const getPstaticsexport = (params) => {
+ return ajax({
+ url: "/api/ana/equipmentRuning/export",
+ type: "post",
+ data: params,
+ });
+};
//-------------------------------------------------设备分析---------------
export default {
getInvoiceMess,
@@ -223,6 +267,8 @@ export default {
ReportPaySummaryReport,
getOperationReport,
getSelectOperator,
+ getParkCarOrder,
+ getPayment,
getGeneralBusiness,
getSetBilly,
@@ -238,4 +284,7 @@ export default {
exportParking,
exportRegister,
exportPayFx,
+ getPstatics,
+ getPstaticslist,
+ getPstaticsexport,
};
diff --git a/src/services/ParkingOverview/index.js b/src/services/ParkingOverview/index.js
index 9d43bd2..b641cf1 100644
--- a/src/services/ParkingOverview/index.js
+++ b/src/services/ParkingOverview/index.js
@@ -98,7 +98,7 @@ export default {
});
},
- //获取区域或商户
+ //获取底部区域或商户
GetAreaShop: (params) => {
return ajax({
url: "/api/ana/overview/getOperatorArea",
@@ -106,4 +106,28 @@ export default {
data: params,
});
},
+ //概览-收费top5
+ GetrateRank: (params) => {
+ return ajax({
+ url: "/api/ana/overview/rateRank",
+ type: "get",
+ data: params,
+ });
+ },
+ //概览-营收分析类型占比
+ GetincomeType: (params) => {
+ return ajax({
+ url: "/api/ana/overview/incomeType",
+ type: "get",
+ data: params,
+ });
+ },
+ //车场总数 单独提供给区大屏
+ GetParkinfo: (params) => {
+ return ajax({
+ url: "/api/ana/overview/parkingInfo",
+ type: "get",
+ data: params,
+ });
+ },
};
From 27005da627168ad78ae674cfcedcfda093485b99 Mon Sep 17 00:00:00 2001
From: chenqiang <chenqiang@yisa.com>
Date: Fri, 15 Dec 2023 16:40:20 +0800
Subject: [PATCH 2/2] =?UTF-8?q?fix():=20=E4=BF=AE=E6=94=B9=E9=A1=B5?=
=?UTF-8?q?=E9=9D=A2=E5=8C=BA=E5=9F=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../EquipmentAly/EquipmentRunningStat/loadable.jsx | 3 +--
src/pages/FinancialMgm/FinancialReport/OperationReport/loadable.jsx | 2 +-
.../FinancialMgm/FinancialReport/ParkingIncomeReport/loadable.jsx | 2 +-
3 files changed, 3 insertions(+), 4 deletions(-)
diff --git a/src/pages/DataAnalysisPrediction/EquipmentAly/EquipmentRunningStat/loadable.jsx b/src/pages/DataAnalysisPrediction/EquipmentAly/EquipmentRunningStat/loadable.jsx
index 832307c..c1ec737 100644
--- a/src/pages/DataAnalysisPrediction/EquipmentAly/EquipmentRunningStat/loadable.jsx
+++ b/src/pages/DataAnalysisPrediction/EquipmentAly/EquipmentRunningStat/loadable.jsx
@@ -35,9 +35,8 @@ function ExceptionParkReport() {
operator_id: "0", //商户
parkName: "", //停车场名称
parkType: "", //车场类型 1=路内 2=路外
- area_id: [],
+ area_id: ["0"],
date_type: "1",
- is_excel: 0,
start_date: moment().startOf("day").format("YYYY-MM-DD"),
end_date: moment().endOf("day").format("YYYY-MM-DD"),
pn: 1,
diff --git a/src/pages/FinancialMgm/FinancialReport/OperationReport/loadable.jsx b/src/pages/FinancialMgm/FinancialReport/OperationReport/loadable.jsx
index ad98201..35a4fdd 100644
--- a/src/pages/FinancialMgm/FinancialReport/OperationReport/loadable.jsx
+++ b/src/pages/FinancialMgm/FinancialReport/OperationReport/loadable.jsx
@@ -43,7 +43,7 @@ function OperationReport() {
name: "", //停车场名称
park_type: "", //车场类型 1=路内 2=路外
operator_status: [], //商用状态(1为待上线，2为商用，3为试运营，4为下线)
- area: [],
+ area: ["0"],
date_type: "1",
is_excel: 0,
start_time: moment()
diff --git a/src/pages/FinancialMgm/FinancialReport/ParkingIncomeReport/loadable.jsx b/src/pages/FinancialMgm/FinancialReport/ParkingIncomeReport/loadable.jsx
index 1768d83..f34e633 100644
--- a/src/pages/FinancialMgm/FinancialReport/ParkingIncomeReport/loadable.jsx
+++ b/src/pages/FinancialMgm/FinancialReport/ParkingIncomeReport/loadable.jsx
@@ -41,7 +41,7 @@ function ParkingIncomeReport() {
park_type: "", //车场类型
operator_status: [], //状态
name: "", //停车场名称
- area: [],
+ area: ["0"],
date_type: "1",
start_time: moment()
.startOf("day")