fix():路外概览接口对接

src/components/VideoPlay/index.scss

@@ -184,3 +184,10 @@
     min-height: 400px;
   }
 }
+.video-play-wrap {
+  .rm-video {
+    width: 100%;
+    height: 100%;
+    min-height: 400px;
+  }
+}

src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingFalseAlarms/index.scss

@@ -5,7 +5,7 @@ $color-user-list-bg : var(--color-user-list-bg);
 $color-text : var(--color-text);
 $color-primary : var(--color-primary);
 
-.parkaly-box {
+.parkfalse-box {
   display: flex;
   padding-top: 10px;
   width: 100%;

src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingFalseAlarms/loadable.jsx

@@ -379,7 +379,8 @@ function ParkingFalseAlarms() {
                                 placeholder="请选择"
                                 options={[
                                     { value: "0", label: "全部" },
-                                    { value: "1", label: "地磁设备" }
+                                    { value: "1", label: "地磁设备" },
+                                    { value: "2", label: "高位视频" },
                                 ]}
                                 value={formData.device_type}
                                 onChange={(v) =>

src/pages/OutRoadMgm/OutRoadOverview/loadable.jsx

@@ -4,13 +4,19 @@ import shouruzonge from "@/assets/images/shouruzonge.png";
 import ReactEcharts from "echarts-for-react";
 import { useSelector } from "react-redux";
 import "./index.scss";
+import { VideoPlay } from "@/components";
 import { Select, Tooltip } from "antd";
 const OutRoadOverview = () => {
   const skin = useSelector((state) => {
     return state.common.skin;
   });
   const textColor = skin == "dark" ? "#fff" : "#000";
-
+  const [refData, setRefData] = useState("https://sample-videos.com/video123/flv/720/big_buck_bunny_720p_1mb.flv")
+  const [videoType, setVideoType] = useState('flv')
+  const [videoRoad, setVideoRoad] = useState([])
+  const [roadId, setRoadId] = useState()
+  const [videoDevice, setVideoDevice] = useState([])
+  const [videoPlay, setVideoPlay] = useState('')
   const [headerNums, setHeaderNums] = useState({
     park_num: 0,
     bowei_num: 0,
@@ -270,7 +276,46 @@ const OutRoadOverview = () => {
         console.error(err);
       });
   }
-
+  //概览-存在监控设备的停车场下拉框
+  function getOutRoadVideoRoad() {
+    ajax
+      .getOutRoadVideoRoad()
+      .then((res) => {
+        if (res.status === 20000) {
+          setVideoRoad(res.data);
+        }
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  }
+  //概览-监控设备
+  function getOutRoadVideoDevice() {
+    ajax
+      .getOutRoadVideoDevice()
+      .then((res) => {
+        if (res.status === 20000) {
+          setVideoDevice(res.data);
+        }
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  }
+  //查看监控视频
+  function getOutRoadVideoPlay() {
+    ajax
+      .getOutRoadVideoPlay()
+      .then((res) => {
+        if (res.status === 20000) {
+          setVideoPlay(res.data.url);
+          handleFlvPlay(res.data.url)
+        }
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  }
   //  概览-停车收入top5
   function getIncomeTop5() {
     ajax
@@ -339,7 +384,14 @@ const OutRoadOverview = () => {
 
     })
   }
-
+  const videoRef = useRef()
+  const handleFlvPlay = (e) => {
+    videoRef.current.closeVideo()
+    setVideoType("mp4")
+    //if(videoPlay){
+      videoRef.current.changeUrl(e)
+    //}
+  }
   useEffect(() => {
     getBaseNumber();
     getIncomeTop5();
@@ -347,8 +399,13 @@ const OutRoadOverview = () => {
     getParkingIncome();
     getParkingRecord();
     getPageConfig();
+    getOutRoadVideoRoad();
   }, []);
-
+  useEffect(() => {
+    if(roadId){
+      getOutRoadVideoDevice(roadId)
+    }
+  }, [roadId]);
   return (
     <div className="OutRoadOverview">
       <div id="header">
@@ -473,13 +530,18 @@ const OutRoadOverview = () => {
           <div>
             <Select
               placeholder="请选择停车场"
-              options={[
-                {
-                  label: "青岛停车场",
-                  value: 0,
-                },
-              ]}
+              value={roadId}
+              options={videoRoad}
+              onChange={(e)=>setRoadId(e)}
+            />
+            <Select
+              placeholder="请选择监控设备"
+              options={videoDevice}
+              onChange={(e) => { getOutRoadVideoPlay({ id: e, type: 1 }) }}
             />
+            <div>
+              <VideoPlay ref={videoRef} videoType={videoType} />
+            </div>
           </div>
         </div>
         <div className="right">

src/services/OutRoadMgm/OutRoadOverview.js

@@ -41,10 +41,37 @@ const getOutRoadParkingRecordsInfo = (params) => {
     data: params,
   });
 };
+///概览-存在监控设备的停车场下拉框
+const getOutRoadVideoRoad = (params) => {
+  return ajax({
+    url: "/api/orp/nvr/video_road",
+    type: "get",
+    data: params,
+  });
+};
+///概览-查指定车场存在的监控设备
+const getOutRoadVideoDevice = (params) => {
+  return ajax({
+    url: "/api/orp/nvr/road_device",
+    type: "get",
+    data: params,
+  });
+};
+///查看监控视频
+const getOutRoadVideoPlay = (params) => {
+  return ajax({
+    url: "/api/orp/nvr/get_video_play",
+    type: "post",
+    data: params,
+  });
+};
 export default {
   getOutRoadBaseInfo,
   getOutRoadParkingTopInfo,
   getOutRoadPaymentTopInfo,
   getOutRoadParkingIncomeInfo,
   getOutRoadParkingRecordsInfo,
+  getOutRoadVideoRoad,
+  getOutRoadVideoDevice,
+  getOutRoadVideoPlay,
 };