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..c1ec737 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,15 @@ 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: ["0"], 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 +46,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 +78,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 +122,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 +130,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 +144,7 @@ function ExceptionParkReport() { //自动填充 const [options, setOptions] = useState([]); - const [Open, setOpen] = useState(true); + const [Open, setOpen] = useState(false); //筛选 const [selectArr, setSelectArr] = useState([]); //是否展开显示 @@ -217,8 +218,8 @@ function ExceptionParkReport() { setFormData({ ...FormData, date_type: e, - start_time: start, - end_time: end, + start_date: start, + end_date: end, }); }; @@ -336,11 +337,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 +365,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 +417,8 @@ function ExceptionParkReport() { "FormData_OperationReport", JSON.stringify(FormDatas) ); - // getData(FormDatas); + getData(FormDatas); + getTopData(FormDatas); //调用接口 }, [FormDatas]); useEffect(() => { @@ -434,23 +468,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") } /> @@ -464,22 +498,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") } /> @@ -490,7 +524,7 @@ function ExceptionParkReport() { setFormData({ ...FormData, - area: e, + area_id: e, }) } /> @@ -532,7 +566,7 @@ function ExceptionParkReport() { 停车场
@@ -553,7 +587,7 @@ function ExceptionParkReport() { 车场类型
+ + +
+

SubmitPush()}> + 提交 +

+

{ + tipForm.resetFields(); + setOpen(false); + }} + > + 取消 +

+
+
); } 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 `
${params.marker} ${params.name} ${params.value}次 ${params.percent}%
`; + 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 + }
${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 `
${params.marker} ${params.name} ${params.value} ${params.percent}%
`; + }, + }, + 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) {
停车业务概览
- {LeftShow.map((ele) => { - return ( -
{ - if (ele?.url) { - window.location = `/#${ele.url}`; - } - if (ele.text == "泊位总数") { - getData(FormData); - setBoOpenClass({ - width: 1632, - title: "泊位列表", - type: 1, - }); - setBoOpen(true); - } - }} - key={ele.text} - > - -
-
-

{ + return ( +

{ + if (ele?.url) { + window.location = `/#${ele.url}`; } - > - {ele.other - ? LeftDataOther[ele.value] - : LeftDataTop[ele.value]} -

- {ele.status} + if (ele.text == "停车场泊位总数") { + getData(FormData); + setBoOpenClass({ + width: 1632, + title: "泊位列表", + type: 1, + }); + setBoOpen(true); + } + }} + key={ele.text} + > + +
+
+

+ {ele.other + ? LeftDataOther[ele.value] + : LeftDataTop[ele.value]} +

+ {ele.status} +
+ {ele.text} +
- {ele.text} -
-
- ); - })} + ); + }) + : LeftShowqu.map((ele) => { + return ( +
{ + if (ele?.url) { + window.location = `/#${ele.url}`; + } + // if (ele.text == "停车场泊位总数") { + // getData(FormData); + // setBoOpenClass({ + // width: 1632, + // title: "泊位列表", + // type: 1, + // }); + // setBoOpen(true); + // } + }} + key={ele.text} + > + +
+
+

+ {ele.other + ? LeftDataOther[ele.value] + : LeftDataTopqu[ele.value]} +

+ {ele.status} +
+ {ele.text} +
+
+ ); + })}
@@ -1363,16 +1980,15 @@ const ParkingOverview = connect(function mapStateToProps(state) { ) : ( "" )} - {Text && ( - // CarRoad[CarShow].type == 1 && + {

- {Text} +
{Text}
- )} -
+ } + {/*

{Zata?.income}

@@ -1387,7 +2003,7 @@ const ParkingOverview = connect(function mapStateToProps(state) {
今日服务车次数
-
+
*/}
{MapS.map((ele) => { @@ -1435,47 +2051,77 @@ const ParkingOverview = connect(function mapStateToProps(state) { {HoShow ? : ""}
-
-
- 客诉类型分析 - 统计范围内用户对车场进行投诉反馈的不同类型占比 - } - > - ? - + {CarRoad[CarShow].type == 2 ? ( +
+
收费员排行Top5
+
+ {DataTop.map((ele, index) => { + return ( +
+
+

No.{index + 1}

+ +
+
+
+ {ele.name || "--"} + {ele.rate || 0} +
+ +
+
+ ); + })} +
-
- {Dayfour.map((ele) => { - return ( - SelectDay(1, ele.value)} - > - {ele.text} - - ); - })} + ) : ( +
+
+ 客诉类型分析 + 统计范围内用户对车场进行投诉反馈的不同类型占比 + } + > + ? + +
+
+ {Dayfour.map((ele) => { + return ( + SelectDay(1, ele.value)} + > + {ele.text} + + ); + })} +
+
- -
+ )}
- 车场服务评价 - 统计范围内用户对车场进行评价的不同分值占比} - > - ? - + {CarRoad[CarShow].type == 2 ? "营业收入分析" : "车场服务评价"} + {CarRoad[CarShow].type == 1 && ( + 统计范围内用户对车场进行评价的不同分值占比} + > + ? + + )}
{Dayfour.map((ele) => { @@ -1492,10 +2138,14 @@ const ParkingOverview = connect(function mapStateToProps(state) { ); })}
- + {CarRoad[CarShow].type == 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/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() {
); }; + //导出 + 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() { 时间
{ - // Data?.total && setFormDatas({ ...FormData }); + Data?.total && ReportPaySummaryReport(); }} > 导出 @@ -542,7 +558,7 @@ function PreOrderReport() {

- {ele.text}: {ele.value}元 + {ele.text}: {Data[ele.value]}元

); 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, + }); + }, };