对接新监控平台

src/pages/ElecEvaluation/Monitor/RoomDetail/index.tsx

@@ -1,16 +1,21 @@
-import { Image, Col, Row, Empty, Drawer } from 'antd';
+import { Image, Col, Row, Empty, Drawer,Select,Radio, Space} from 'antd';
 import React, { useEffect, useRef, useState } from 'react';
 import '../style.less'
 import { authCheck, EarlyWarnItem, onCell, onHeaderCell, ScreenLabel, ScreenTitle, ScrollTable } from '../Home';
 import { history } from "umi";
-import { getAllStranger, getBidRoomData, getCameraList, getExpertReports, getLookBackList, getWarnData } from "../service";
+import { getAllStranger, getBidRoomData, getCameraList, getExpertReports, getLookBackList, getWarnData,getCameraListNew,getLiveStream,getRecordPlaybackTime,getAlarmMetadata1,getAlarmMetadata2} from "../service";
 import ScreenVideoPlay from "@/components/ElecBidEvaluation/ScreenVideoPlay";
+import LiveBroadcast from "@/components/ElecBidEvaluation/LiveBroadcast";
 import { pictureDisplayPath } from "@/utils/DownloadUtils";
 import { getURLInformation } from "@/utils/CommonUtils";
 import { getDicData, getSessionRoleData } from "@/utils/session";
 import strangerIcon from '@/assets/monitor/stranger-icon.png';
 import numberIcon from '@/assets/monitor/number-icon.png';
 import { bidStatusMap } from '../Room';
+import ReactPlayer from 'react-player/file';
+import moment from "moment";
+import { ConsoleSqlOutlined } from '@ant-design/icons';
+
 const statusMap = ["未报道", "已报道"];
 const peopleNumColumns: any[] = [
     {
@@ -125,8 +130,12 @@ const MonitorRoomDetail: React.FC<{}> = (props: any) => {
     const monitorId = props.location.state?.monitorId ? props.location.state?.monitorId : getURLInformation("monitorId");
     //基本信息数据
     const [basicInfo, setBasicInfo] = useState<any>({});
+    //设备
+    const [deviceInfo, setDeviceInfo] = useState<any>({});
+    //let basicInfoObj = useState<any>({});
     //异常预警数据
     const [earlyWarnData, setEarlyWarnData] = useState<any>();
+
     //设备列表
     const [caremaList, setCaremaList] = useState<any[]>([]);
     //报道列表
@@ -143,8 +152,8 @@ const MonitorRoomDetail: React.FC<{}> = (props: any) => {
     const [drawerVisible, setDrawerVisible] = useState<boolean>(false);
     //图片查看URL
     const [drawerUrl, setDrawerUrl] = useState<string>('');
-    //监控视频Ref
+    //监控视频URl
-    const videoRef = useRef<any>();
+    const [videoUrl, setVideoUrl] = useState<any>();
     //图片展示ref
     const zoomImg = useRef<any>(null);
     //定时刷新间隔
@@ -154,15 +163,55 @@ const MonitorRoomDetail: React.FC<{}> = (props: any) => {
     //权限校验
     const auth = useRef<boolean>(authCheck(["ebtp-watcher", "ebtp-site-supervision", "ebtp-after-supervision"]));
 
+    //协议
+    const [protocol, setProtocol] = useState<string>('hls');
+    //码流
+    const [streamType, setStreamType] = useState<string>('0');
+
     const onCaremaPlay = (item: any) => {
-        setCameraSelect(item.id);
+        setCameraSelect(item.serialNumber);
-        setCameraParams(item.platform);
+        //setCameraParams(item.platform);
-        if (basicInfo?.status == "2") {//回看
+        // if (basicInfo?.status == "2") {//回看
-            videoRef.current?.back(item.deviceCode, basicInfo?.startDate, basicInfo?.endDate);
+        //     videoRef.current?.back(item.deviceCode, basicInfo?.startDate, basicInfo?.endDate);
-        } else {
+        // } else {
-            videoRef.current?.play(item.deviceCode);
+        //     videoRef.current?.play(item.deviceCode);
+        // }
+        onGetLiveStream(basicInfo,item);
+    }
+
+    const onGetLiveStream = (basicInfoObj:any,item: any) =>{
+        
+        if (basicInfoObj?.status == "2") {
+            getRecordPlaybackTime({deviceSn:item.sn,
+                channelNum:item.serialNumber,
+                protocol:protocol,
+                startTime:moment(basicInfoObj?.startDate).format('yyyyMMDDHHmmss'),
+                endTime:moment(basicInfoObj?.endDate).format('yyyyMMDDHHmmss')}).then(res=>{
+                if (res?.code == 200) {
+                    const data = res?.data;
+                    setVideoUrl(data.url);
+                }
+            })
+        }else{
+            getLiveStream({deviceSn:item.sn,channelNum:item.serialNumber,protocol:protocol,streamType:streamType}).then(res=>{
+                if (res?.code == 200) {
+                    const data = res?.data;
+                    setVideoUrl(data.url);
+                }
+            })
         }
     }
+
+    const ProtocolChange = (e: any) => {
+       console.log(e.target.value);
+       setProtocol(e.target.value);
+    }
+    
+    const StreamTypeChange = (e: any) => {
+        console.log(e.target.value);
+        setStreamType(e.target.value);
+    }
+    
     //获取基本信息数据
     const getRoomData = () => {
         getBidRoomData(monitorId).then(res => {//获取基本信息
@@ -197,6 +246,25 @@ const MonitorRoomDetail: React.FC<{}> = (props: any) => {
     }
     //获取异常预警数据
     const getWarnInfo = () => {
+        //new
+        // console.log("----------basicInfo2");
+        // console.log(basicInfo);
+        // console.log(deviceInfo);
+        // getAlarmMetadata1({ deviceSn: deviceInfo?.sn,
+        //     startTime:moment(basicInfo?.startDate).format('yyyyMMDDHHmmss'),
+        //     endTime:moment(basicInfo?.endDate).format('yyyyMMDDHHmmss'),
+        //     pageNum:"1",
+        //     pageSize:"200"}).then(res => {
+        //     if (res?.code == 200) {
+        //         const data = res?.data;
+        //         console.log(data);
+        //         if (data && data.length > 0) {
+        //             setStrangerList(data.list);
+        //             setBackStrangerList(data.list);
+        //         }
+        //     }
+        // })
+
         getWarnData({ reserveId: monitorId }).then(res => {
             if (res?.code == 200) {
                 const data = res?.data;
@@ -207,21 +275,21 @@ const MonitorRoomDetail: React.FC<{}> = (props: any) => {
     }
     //获取设备
     const getCaremaData = (baseData: any) => {
-        getCameraList({ areaId: baseData.placeId }).then(res => {
+
+        getCameraListNew({ areaId: baseData.areaId }).then(res => {
             if (res?.code == 200) {
-                const data = res?.data;
+                const list = res?.data;
-                setCaremaList(data);
+                
-                if (data?.length > 0) {
+                setCaremaList(list);
-                    setCameraSelect(data[0].id);
+                 if (list.length > 0) {
-                    setCameraParams(data[0].platform);
+                    setDeviceInfo(list[0]);
+                    setCameraSelect(list[0].serialNumber);
+                    //setCameraParams(data[0].platform);
                     setTimeout(() => {
-                        if (baseData.status == "2") {//回看
+
-                            videoRef.current?.back(data[0].deviceCode, baseData.startDate, baseData.endDate);
+                    }, 1000);
-                        } else {
+                    onGetLiveStream(baseData,list[0]);
-                            videoRef.current?.play(data[0].deviceCode);
+                 }
-                        }
-                    }, 4000);
-                }
             }
         })
     }
@@ -304,6 +372,9 @@ const MonitorRoomDetail: React.FC<{}> = (props: any) => {
     }
 
     useEffect(() => {
+        
+        console.log("----------basicInfo");
+        console.log(basicInfo);
         if (auth) {
             initDict();
             getRoomData();
@@ -385,11 +456,21 @@ const MonitorRoomDetail: React.FC<{}> = (props: any) => {
                             <div className="left-menu">
                                 <div className="left-monitor-title"><span>监控画面</span></div>
                                 <div className="left-menu-content">
-                                    {caremaList.map((item, index) => <div className={cameraSelect == item.id ? "left-menu-btn left-menu-btn-select" : "left-menu-btn"} onClick={() => onCaremaPlay(item)} key={index}>{item.deviceName}</div>)}
+                                    {caremaList.map((item, serialNumber) => <div className={cameraSelect == item.serialNumber ? "left-menu-btn left-menu-btn-select" : "left-menu-btn"} onClick={() => onCaremaPlay(item)} key={serialNumber}>{item.name}</div>)}
                                 </div>
                             </div>
                             <div className="right-content-c">
-                                {cameraParams && <ScreenVideoPlay videoRef={videoRef} cameraParams={cameraParams} status={basicInfo?.status == "2" ? 1 : 0} />}
+                                {/* {cameraParams && <ScreenVideoPlay videoRef={videoRef} cameraParams={cameraParams} status={basicInfo?.status == "2" ? 1 : 0} />} */}
+                                <ReactPlayer
+                                    url={videoUrl}
+                                    playing={true}
+                                    muted={true}
+                                    loop={true} 
+                                    controls={true}
+                                    width="100%"
+                                    height="100%"
+                                />
+                               
                             </div>
                         </div>
                     </div>
@@ -419,6 +500,7 @@ const MonitorRoomDetail: React.FC<{}> = (props: any) => {
                                         <div className="stranger-list-card" key={index}>
                                             <div>
                                                 <p><span>时间：{item.eventTime}</span></p>
+                                                {/* <p><span>时间：{item.alarmTime}</span></p> */}
                                             </div>
                                             <div>
                                                 <Image src={pictureDisplayPath + "?filePath=" + item.filePath} preview={{ getContainer: "null" }} height={"100%"} onClick={() => drawerClick(item.filePath)} />
@@ -434,6 +516,8 @@ const MonitorRoomDetail: React.FC<{}> = (props: any) => {
                                             <div>
                                                 <p><span>时间：{item.eventTime}</span></p>
                                                 <p><span>描述：{item.describeStranger}</span></p>
+                                                {/* <p><span>时间：{item.alarmTime}</span></p>
+                                                <p><span>描述：{item.alarmDescribe}</span></p> */}
                                             </div>
                                             <div>
                                                 <Image src={pictureDisplayPath + "?filePath=" + item.filePath} preview={{ getContainer: "null" }} height={"100%"} onClick={() => drawerClick(item.filePath)} />

src/pages/ElecEvaluation/Monitor/service.ts

@@ -306,6 +306,71 @@ export async function getCameraList(params: any) {
     });
 }
 
+/**
+ * 评标室监控详情-设备列表 new
+ * @param data 
+ * @returns 
+ */
+ export async function getCameraListNew(data: any) {
+    return request('/api/biz-service-ebtp-evaluation/v1/eval/room/jovision/getDevicePage', {
+        method: 'POST',
+        data: data,
+    });
+}
+/**
+ * 评标室监控详情-获取视频流 
+ * @param data 
+ * @returns 
+ */
+export async function getLiveStream(data: any) {
+    console.log(data);
+    return request('/api/biz-service-ebtp-evaluation/v1/eval/room/jovision/getLiveStream', {
+        method: 'POST',
+        data: data,
+    });
+}
+/**
+ * 评标室监控详情-设备回放地址查询(通过时间方式) 
+ * @param data 
+ * @returns 
+ */
+export async function getRecordPlaybackTime(data: any) {
+    console.log(data);
+    return request('/api/biz-service-ebtp-evaluation/v1/eval/room/jovision/getRecordPlaybackTime', {
+        method: 'POST',
+        data: data,
+    });
+}
+/**
+ * 查询事件告警信息-陌生人
+ * @param data 
+ * @returns 
+ */
+export async function getAlarmMetadata1(data: any) {
+  data["sourceCode"]="strangerAlarm";
+  return getAlarmMetadata(data);
+}
+/**
+ * 查询事件告警信息-人员密度过高报警 
+ * @param data 
+ * @returns 
+ */
+export async function getAlarmMetadata2(data: any) {
+    data["sourceCode"]="HighPersonDensityAlarm";
+    return getAlarmMetadata(data);
+}
+/**
+ * 查询事件告警信息
+ * @param data 
+ * @returns 
+ */
+export async function getAlarmMetadata(data: any) {
+    console.log(data);
+    return request('/api/biz-service-ebtp-evaluation/v1/eval/room/jovision/getAlarmMetadata', {
+        method: 'POST',
+        data: data,
+    });
+}
 /**
  * 评标室监控详情-专家报道列表
  * @param data