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 (