对接新监控平台
This commit is contained in:
zhangqinbin
@ -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
|
||||
const videoRef = useRef<any>();
|
||||
//监控视频URl
|
||||
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);
|
||||
setCameraParams(item.platform);
|
||||
if (basicInfo?.status == "2") {//回看
|
||||
videoRef.current?.back(item.deviceCode, basicInfo?.startDate, basicInfo?.endDate);
|
||||
} else {
|
||||
videoRef.current?.play(item.deviceCode);
|
||||
setCameraSelect(item.serialNumber);
|
||||
//setCameraParams(item.platform);
|
||||
// if (basicInfo?.status == "2") {//回看
|
||||
// videoRef.current?.back(item.deviceCode, basicInfo?.startDate, basicInfo?.endDate);
|
||||
// } else {
|
||||
// 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,20 +275,20 @@ 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;
|
||||
setCaremaList(data);
|
||||
if (data?.length > 0) {
|
||||
setCameraSelect(data[0].id);
|
||||
setCameraParams(data[0].platform);
|
||||
const list = res?.data;
|
||||
|
||||
setCaremaList(list);
|
||||
if (list.length > 0) {
|
||||
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);
|
||||
} else {
|
||||
videoRef.current?.play(data[0].deviceCode);
|
||||
}
|
||||
}, 4000);
|
||||
|
||||
}, 1000);
|
||||
onGetLiveStream(baseData,list[0]);
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -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)} />
|
||||
|
||||
@ -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
|
||||
|
||||
Reference in New Issue
Block a user