From 716767cebc1fd748c45e4a77b593f60a75d11d44 Mon Sep 17 00:00:00 2001 From: zhangqinbin <181961702@qq.com> Date: Fri, 19 May 2023 22:03:00 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AF=B9=E6=8E=A5=E6=96=B0=E7=9B=91=E6=8E=A7?= =?UTF-8?q?=E5=B9=B3=E5=8F=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Monitor/RoomDetail/index.tsx | 134 ++++++++++++++---- src/pages/ElecEvaluation/Monitor/service.ts | 65 +++++++++ 2 files changed, 174 insertions(+), 25 deletions(-) diff --git a/src/pages/ElecEvaluation/Monitor/RoomDetail/index.tsx b/src/pages/ElecEvaluation/Monitor/RoomDetail/index.tsx index 5771c97..3aca17b 100644 --- a/src/pages/ElecEvaluation/Monitor/RoomDetail/index.tsx +++ b/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({}); + //设备 + const [deviceInfo, setDeviceInfo] = useState({}); + //let basicInfoObj = useState({}); //异常预警数据 const [earlyWarnData, setEarlyWarnData] = useState(); + //设备列表 const [caremaList, setCaremaList] = useState([]); //报道列表 @@ -143,8 +152,8 @@ const MonitorRoomDetail: React.FC<{}> = (props: any) => { const [drawerVisible, setDrawerVisible] = useState(false); //图片查看URL const [drawerUrl, setDrawerUrl] = useState(''); - //监控视频Ref - const videoRef = useRef(); + //监控视频URl + const [videoUrl, setVideoUrl] = useState(); //图片展示ref const zoomImg = useRef(null); //定时刷新间隔 @@ -154,15 +163,55 @@ const MonitorRoomDetail: React.FC<{}> = (props: any) => { //权限校验 const auth = useRef(authCheck(["ebtp-watcher", "ebtp-site-supervision", "ebtp-after-supervision"])); + //协议 + const [protocol, setProtocol] = useState('hls'); + //码流 + const [streamType, setStreamType] = useState('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,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; - 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) => {
监控画面
- {caremaList.map((item, index) =>
onCaremaPlay(item)} key={index}>{item.deviceName}
)} + {caremaList.map((item, serialNumber) =>
onCaremaPlay(item)} key={serialNumber}>{item.name}
)}
- {cameraParams && } + {/* {cameraParams && } */} + +
@@ -419,6 +500,7 @@ const MonitorRoomDetail: React.FC<{}> = (props: any) => {

时间：{item.eventTime}

+ {/*

时间：{item.alarmTime}

*/}
drawerClick(item.filePath)} /> @@ -434,6 +516,8 @@ const MonitorRoomDetail: React.FC<{}> = (props: any) => {

时间：{item.eventTime}

描述：{item.describeStranger}

+ {/*

时间：{item.alarmTime}

+

描述：{item.alarmDescribe}

*/}
drawerClick(item.filePath)} /> diff --git a/src/pages/ElecEvaluation/Monitor/service.ts b/src/pages/ElecEvaluation/Monitor/service.ts index 195e617..e1147e5 100644 --- a/src/pages/ElecEvaluation/Monitor/service.ts +++ b/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