From e93900e7f97c2945d24e0394ab32c810be0982c8 Mon Sep 17 00:00:00 2001 From: xingjx Date: Tue, 16 Jan 2024 17:17:14 +0800 Subject: [PATCH] =?UTF-8?q?fix():=E8=B7=AF=E5=A4=96=E6=A6=82=E8=A7=88?= =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E5=AF=B9=E6=8E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/VideoPlay/index.scss | 7 ++ .../ParkingFalseAlarms/index.scss | 2 +- .../ParkingFalseAlarms/loadable.jsx | 3 +- src/pages/OutRoadMgm/OutRoadOverview/loadable.jsx | 82 +++++++++++++++++++--- src/services/OutRoadMgm/OutRoadOverview.js | 27 +++++++ 5 files changed, 109 insertions(+), 12 deletions(-) diff --git a/src/components/VideoPlay/index.scss b/src/components/VideoPlay/index.scss index bd8fe32..f091abf 100644 --- a/src/components/VideoPlay/index.scss +++ b/src/components/VideoPlay/index.scss @@ -184,3 +184,10 @@ min-height: 400px; } } +.video-play-wrap { + .rm-video { + width: 100%; + height: 100%; + min-height: 400px; + } +} \ No newline at end of file diff --git a/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingFalseAlarms/index.scss b/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingFalseAlarms/index.scss index c59bd61..e389afc 100644 --- a/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingFalseAlarms/index.scss +++ b/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%; diff --git a/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingFalseAlarms/loadable.jsx b/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingFalseAlarms/loadable.jsx index 965fd9c..0ffe3d3 100644 --- a/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingFalseAlarms/loadable.jsx +++ b/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) => diff --git a/src/pages/OutRoadMgm/OutRoadOverview/loadable.jsx b/src/pages/OutRoadMgm/OutRoadOverview/loadable.jsx index 5bb374b..f5d535b 100644 --- a/src/pages/OutRoadMgm/OutRoadOverview/loadable.jsx +++ b/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 (
diff --git a/src/services/OutRoadMgm/OutRoadOverview.js b/src/services/OutRoadMgm/OutRoadOverview.js index 3c74387..f1e68c0 100644 --- a/src/services/OutRoadMgm/OutRoadOverview.js +++ b/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, };