9.7 大屏修改

src/components/ElecBidEvaluation/ScreenWarnBack.tsx

@@ -0,0 +1,165 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Card, List, Modal, Typography, Image, Radio, Table } from 'antd';
+import ProCard from '@ant-design/pro-card';
+import { getCameraList, getWarnDetailData } from './service';
+import ScreenVideoPlay from './ScreenVideoPlay';
+import { pictureDisplayPath } from '@/utils/DownloadUtils';
+import moment from 'moment';
+
+interface ScreenWarnBackProps {
+    modalVisible: boolean;
+    onCancel: () => void;
+    warnId: string;//告警id
+}
+const modalHeight = window.innerHeight * 96 / 100;
+
+/**
+ * 异常告警详情回放
+ * @param props 
+ * @returns 
+ */
+const ScreenWarnBack: React.FC<ScreenWarnBackProps> = (props) => {
+    const { modalVisible, onCancel, warnId } = props;
+    const { Title } = Typography;
+    //详情信息
+    const [detailData, setDetailData] = useState<any>();
+    //设备列表
+    const [caremaList, setCaremaList] = useState<any[]>([]);
+    //当前选择的设备
+    const [cameraSelect, setCameraSelect] = useState<string>("1");
+    //当前播放的设备参数
+    const [cameraParams, setCameraParams] = useState<any>();
+    //监控视频Ref
+    const videoRef = useRef<any>();
+    const peopleNumColumns: any[] = [
+        {
+            title: '时间',
+            dataIndex: 'eventTime',
+            key: 'eventTime',
+            align: 'center',
+            width: "40%",
+        },
+        {
+            title: '阈值',
+            dataIndex: 'thresholdOfPeople',
+            key: 'thresholdOfPeople',
+            align: 'center',
+            ellipsis: true,
+            render: (_: any, record: any) => `${_}人`,
+        },
+        {
+            title: '实际人数',
+            dataIndex: 'realOfPeople',
+            key: 'realOfPeople',
+            align: 'center',
+            render: (_: any, record: any) => `${_}人`,
+        },
+    ];
+    //回放
+    const videoBack = (deviceCode: any, data: any) => {
+        let backTime = 20;
+        if (data.type == "2") {//人数预警
+            backTime = 10;
+        }
+        videoRef.current?.back(deviceCode, moment(data?.createDate).subtract(backTime, 'm').format('yyyy-MM-DD HH:mm:ss'), data?.createDate);
+    }
+
+    //获取告警详情数据
+    const getWarnDetail = () => {
+        getWarnDetailData({ id: warnId }).then(res => {
+            if (res?.code == 200) {
+                const data = res?.data;
+                setDetailData(data);
+                getCaremaData(data);
+            }
+        })
+    }
+
+    //获取设备
+    const getCaremaData = (baseData: any) => {
+        getCameraList({ areaId: baseData.placeId }).then(res => {
+            if (res?.code == 200) {
+                const data = res?.data;
+                setCaremaList(data);
+                if (data?.length > 0) {
+                    //获取回看时间
+                    setCameraSelect(data[0].deviceCode);
+                    setCameraParams(data[0].platform);
+                    setTimeout(() => {
+                        videoBack(data[0].deviceCode, baseData);
+                    }, 4000);
+                }
+            }
+        })
+    }
+    //切换设备
+    const onCaremaChange = (e: any) => {
+        const caremaCode = e.target.value;
+        for (const ite of caremaList) {
+            if (ite.deviceCode == caremaCode) {
+                setCameraSelect(caremaCode);
+                setCameraParams(ite.platform);
+                videoBack(caremaCode, detailData);
+            }
+        }
+    }
+
+    useEffect(() => {
+        warnId && getWarnDetail();
+    }, [warnId])
+
+    return (
+        <Modal
+            destroyOnClose
+            title="告警详情"
+            visible={modalVisible}
+            onCancel={() => onCancel()}
+            okButtonProps={{ hidden: true }}
+            width={"80%"}
+            maskClosable={false}
+            style={{ maxHeight: modalHeight }}
+            bodyStyle={{ height: modalHeight - 107, overflowY: 'auto', padding: 0 }}
+            centered
+        >
+            <ProCard split="vertical" bodyStyle={{ height: "calc(100vh - 136px)" }}>
+                <ProCard colSpan={7} key="0" bodyStyle={{ padding: "16px", overflowY: 'auto', height: "calc(100vh - 136px)" }}>
+                    <Title level={5} style={{ marginBottom: '8px', color: "#b30000" }}>告警信息：{detailData?.type == "3" ? "陌生人进入" : "人数异常"}</Title>
+                    {detailData?.type == "3" ? (
+                        <List
+                            grid={{ column: 1 }}
+                            dataSource={detailData?.details}
+                            renderItem={(item: any) => (
+                                <List.Item>
+                                    <Card bodyStyle={{ padding: "8px" }}>
+                                        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                                            <Typography>时间：{item.eventTime}</Typography>
+                                            <Image src={pictureDisplayPath + "?filePath=" + item.filePath} preview={false} height="70px" />
+                                        </div>
+                                    </Card>
+                                </List.Item>
+                            )}
+                        />
+                    ) : (
+                        <Table
+                            pagination={false}
+                            rowKey="id"
+                            size="small"
+                            dataSource={detailData?.details}
+                            columns={peopleNumColumns}
+                        />
+                    )}
+                </ProCard>
+                <ProCard colSpan={17} key="1" bodyStyle={{ padding: "16px" }}>
+                    <Radio.Group value={cameraSelect} buttonStyle="solid" style={{ marginBottom: "8px" }} onChange={onCaremaChange}>
+                        {caremaList.map(item => (<Radio.Button value={item.deviceCode} key={item.deviceCode}>{item.deviceName}</Radio.Button>))}
+                    </Radio.Group>
+                    <div style={{ height: "94%", border: '1px solid red' }}>
+                        {cameraParams && <ScreenVideoPlay videoRef={videoRef} cameraParams={cameraParams} status={1} />}
+                    </div>
+                </ProCard>
+            </ProCard>
+        </Modal>
+    );
+};
+
+export default ScreenWarnBack;

src/components/ElecBidEvaluation/service.ts

@@ -51,4 +51,27 @@ export async function saveAppointmentEdit(data: any) {
         method: 'POST',
         data: { ...data, },
     });
+}
+
+/**
+ * 根据告警id查询告警详情
+ * @param params
+ */
+export async function getWarnDetailData(params: any) {
+    return request('/api/biz-service-ebtp-evaluation/v1/eval/room/alarm/get', {
+        method: 'POST',
+        params: params,
+    });
+}
+
+/**
+ * 设备列表
+ * @param params 
+ * @returns 
+ */
+export async function getCameraList(params: any) {
+    return request('/api/biz-service-ebtp-evaluation/v1/screen/queryAreaCamera', {
+        method: 'GET',
+        params: params,
+    });
 }