feat(): 大屏新增周转率收费率排行

src/pages/DataAnalysisPrediction/ParkingOverview/index.scss

@@ -464,6 +464,31 @@ $color-primary : var(--color-primary);
     .bsdsj {
       background: rgba(1, 5, 14, 0.64);
       padding-bottom: 4px;
+      position: relative;
+
+      .pos_zs {
+        position: absolute;
+        top: 5px;
+        right: 0;
+        border: 1px solid rgba(117,
+            221,
+            255, .5);
+        ;
+        border-radius: 4px;
+        display: flex;
+        overflow: hidden;
+
+        span {
+          padding: 2px 3px;
+          cursor: pointer;
+        }
+
+        .qse {
+          background-color: rgba(117,
+              221,
+              255, .3);
+        }
+      }
     }
 
     .day_select {

src/pages/DataAnalysisPrediction/ParkingOverview/loadable.jsx

@@ -394,6 +394,8 @@ const ParkingOverview = connect(function mapStateToProps(state) {
   const [BoOpen, setBoOpen] = useState(false);
   //泊位详情
   const [BoOpenDetail, setBoOpenDetail] = useState(false);
+  //泊车公司周转或收费
+  const [Roadturn, setRoadturn] = useState(true);
 
   //商户
   const [Yunying, setYunying] = useState([]);
@@ -1049,6 +1051,7 @@ const ParkingOverview = connect(function mapStateToProps(state) {
       {
         key: "",
         value: 0,
+        value_t: 0,
       },
     ]
   ) => {
@@ -1174,7 +1177,7 @@ const ParkingOverview = connect(function mapStateToProps(state) {
           itemStyle: {
             color: "rgba(13,225,250, 1)", // 设置曲线上的点的颜色为蓝色
           },
-          data: data.map((ele) => ele.value),
+          data: data.map((ele) => ele.value_t),
         },
         {
           name: "实收",
@@ -1191,7 +1194,7 @@ const ParkingOverview = connect(function mapStateToProps(state) {
           itemStyle: {
             color: "rgba(235, 39, 39,1)", // 设置曲线上的点的颜色为蓝色
           },
-          data: data.map((ele) => ele.value + 100),
+          data: data.map((ele) => ele.value),
         },
       ],
       grid: {
@@ -1449,7 +1452,7 @@ const ParkingOverview = connect(function mapStateToProps(state) {
       }
     );
   };
-  //获取收费top5
+  //泊车公司-概览-周转率
   const GetrateRank = (val) => {
     ajax.ParkingOverview.GetrateRank({
       dateType: val,
@@ -1471,6 +1474,29 @@ const ParkingOverview = connect(function mapStateToProps(state) {
       }
     );
   };
+  //泊车公司-概览-路段收费率排行榜
+  const GetParkoverview = (val) => {
+    ajax.ParkingOverview.GetParkoverview({
+      dateType: val,
+      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({
@@ -1517,7 +1543,7 @@ const ParkingOverview = connect(function mapStateToProps(state) {
       }
     );
   };
-  //概览-车场收入排行榜
+  //区大屏-路段周转次数排行榜
   const GetParkparkIncomeRank = (val, item) => {
     ajax.ParkingOverview.GetParkparkIncomeRank({
       type: val,
@@ -1656,6 +1682,7 @@ const ParkingOverview = connect(function mapStateToProps(state) {
     GetUseInfo(RoadSelect);
     GetRevenueAnalysis(RoadSelect, "1");
     if (CarRoad[CarShow]?.type == 2) {
+      setRoadturn(true);
       GetrateRank("1");
       GetincomeType(RoadSelect, "1");
       GetOverviewData(RoadSelect);
@@ -1940,7 +1967,26 @@ const ParkingOverview = connect(function mapStateToProps(state) {
               : "路段周转次数排行榜"}
           </div>
           {CarRoad[CarShow]?.type == 2 ? (
-            ""
+            <div className="pos_zs">
+              <span
+                className={Roadturn ? "qse" : ""}
+                onClick={() => {
+                  setRoadturn(true);
+                  GetrateRank("1");
+                }}
+              >
+                周转率
+              </span>
+              <span
+                className={Roadturn ? "" : "qse"}
+                onClick={() => {
+                  setRoadturn(false);
+                  GetParkoverview("1");
+                }}
+              >
+                收费率
+              </span>
+            </div>
           ) : (
             <div className="day_select">
               {Dayfour.map((ele) => {
@@ -1979,7 +2025,7 @@ const ParkingOverview = connect(function mapStateToProps(state) {
                       <span>
                         {CarRoad[CarShow]?.type == 2
                           ? ele.rate || 0
-                          : `${ele.paid_amount || 0}次`}
+                          : `${ele.total || 0}次`}
                       </span>
                     </div>
                     <Progress
@@ -1988,11 +2034,8 @@ const ParkingOverview = connect(function mapStateToProps(state) {
                       strokeWidth={6}
                       percent={
                         CarRoad[CarShow]?.type == 2
-                          ? ele?.rate?.slice(0, ele.rate.length - 1) || 0
-                          : getPercentage(
-                              ele.paid_amount || 0,
-                              DataTop[0].paid_amount
-                            )
+                          ? getPercentage(ele.rate || 0, DataTop[0].rate) || 0
+                          : getPercentage(ele.total || 0, DataTop[0].total)
                       }
                     />
                   </div>
@@ -2031,25 +2074,19 @@ const ParkingOverview = connect(function mapStateToProps(state) {
               <div className="tpph topt">
                 {/* <img src={TOP2} alt="" /> */}
                 <span>TOP2</span>
-                <p>
-                  {Cartop[1]?.rate || 0}/{Cartop[1]?.rate || 0}
-                </p>
+                <p>收费率{Cartop[1]?.rate || 0}</p>
                 <div title={Cartop[1]?.name || ""}>{Cartop[1]?.name || ""}</div>
               </div>
               <div className="tpph topo">
                 {/* <img src={TOP1} alt="" /> */}
                 <span>TOP1</span>
-                <p>
-                  {Cartop[0]?.rate || 0}/{Cartop[0]?.rate || 0}
-                </p>
+                <p>收费率{Cartop[0]?.rate || 0}</p>
                 <div title={Cartop[0]?.name || ""}>{Cartop[0]?.name || ""}</div>
               </div>
               <div className="tpph tops">
                 {/* <img src={TOP3} alt="" /> */}
                 <span>TOP3</span>
-                <p>
-                  {Cartop[2]?.rate || 0}/{Cartop[2]?.rate || 0}
-                </p>
+                <p>收费率{Cartop[2]?.rate || 0}</p>
                 <div title={Cartop[2]?.name || ""}>{Cartop[2]?.name || ""}</div>
               </div>
             </div>

src/services/ParkingOverview/index.js

@@ -106,10 +106,10 @@ export default {
       data: params,
     });
   },
-  //概览-收费top5
+  //泊车公司-概览-周转率
   GetrateRank: (params) => {
     return ajax({
-      url: "/api/ana/overview/rateRank",
+      url: "/api/ana/overview/roadTurnoverRate",
       type: "get",
       data: params,
     });
@@ -130,10 +130,10 @@ export default {
       data: params,
     });
   },
-  //概览-车场收入排行榜
+  //区大屏-路段周转次数排行榜
   GetParkparkIncomeRank: (params) => {
     return ajax({
-      url: "/api/ana/overview/parkIncomeRank",
+      url: "/api/ana/overview/parkTurnoverRank",
       type: "get",
       data: params,
     });
@@ -146,4 +146,12 @@ export default {
       data: params,
     });
   },
+  //泊车公司-概览-路段收费率排行榜
+  GetParkoverview: (params) => {
+    return ajax({
+      url: "/api/ana/overview/roadChargeRateRank",
+      type: "get",
+      data: params,
+    });
+  },
 };