9.14 修改9.9问题

src/components/ElecBidEvaluation/ScreenWarnBack.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Card, List, Modal, Typography, Image, Radio, Table } from 'antd';
+import { Card, List, Modal, Typography, Image, Radio, Table, Drawer } from 'antd';
 import ProCard from '@ant-design/pro-card';
 import { getCameraList, getWarnDetailData } from './service';
 import ScreenVideoPlay from './ScreenVideoPlay';
@@ -29,8 +29,14 @@ const ScreenWarnBack: React.FC<ScreenWarnBackProps> = (props) => {
     const [cameraSelect, setCameraSelect] = useState<string>("1");
     //当前播放的设备参数
     const [cameraParams, setCameraParams] = useState<any>();
+    //图片查看抽屉显隐
+    const [drawerVisible, setDrawerVisible] = useState<boolean>(false);
+    //图片查看URL
+    const [drawerUrl, setDrawerUrl] = useState<string>('');
     //监控视频Ref
     const videoRef = useRef<any>();
+    //图片展示ref
+    const zoomImg = useRef<any>(null);
     const peopleNumColumns: any[] = [
         {
             title: '时间',
@@ -104,6 +110,38 @@ const ScreenWarnBack: React.FC<ScreenWarnBackProps> = (props) => {
         }
     }
 
+    //图片放大抽屉显示
+    const drawerClick = (filePath: string) => {
+        setDrawerUrl(filePath);
+        setDrawerVisible(true);
+    }
+    //图片放大抽屉关闭
+    const drawerClose = () => {
+        setDrawerVisible(false);
+        setDrawerUrl("");
+    }
+    const handleImgZoom = (e: { nativeEvent: { deltaY: number; }; }) => {
+        const { clientWidth, clientHeight, style, height, width } = zoomImg.current
+        const value = height / width
+        const num = 50
+        const bool = height > width ? clientWidth < 2000 : clientHeight < 1500
+        if (e.nativeEvent.deltaY <= 0 && bool) {
+            style.maxWidth = "none"
+            style.maxHeight = "none"
+            style.width = width + num + "px"
+            style.height = height + (num * value) + "px"
+            style.left = style.left - 1 % +"px"
+            style.top = style.top - 1 % +"px"
+        } else if (e.nativeEvent.deltaY > 0) {
+            if (width > 200 && height > 100) {
+                style.width = width - num + "px"
+                style.height = height - (num * value) + "px"
+                style.left = style.left + 1 % + "px"
+                style.top = style.top + 1 % + "px"
+            }
+        }
+    }
+
     useEffect(() => {
         warnId && getWarnDetail();
     }, [warnId])
@@ -122,7 +160,7 @@ const ScreenWarnBack: React.FC<ScreenWarnBackProps> = (props) => {
             centered
         >
             <ProCard split="vertical" bodyStyle={{ height: "calc(100vh - 136px)" }}>
-                <ProCard colSpan={7} key="0" bodyStyle={{ padding: "16px", overflowY: 'auto', height: "calc(100vh - 136px)" }}>
+                <ProCard colSpan={7} key="0" bodyStyle={{ padding: "16px", overflowY: 'auto', height: "calc(100vh - 136px)" }} className="screen-warn-p">
                     <Title level={5} style={{ marginBottom: '8px', color: "#b30000" }}>告警信息：{detailData?.type == "3" ? "陌生人进入" : "人数异常"}</Title>
                     {detailData?.type == "3" ? (
                         <List
@@ -133,7 +171,7 @@ const ScreenWarnBack: React.FC<ScreenWarnBackProps> = (props) => {
                                     <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" />
+                                            <Image src={pictureDisplayPath + "?filePath=" + item.filePath} preview={{ getContainer: "null" }} height="70px" onClick={() => drawerClick(item.filePath)} />
                                         </div>
                                     </Card>
                                 </List.Item>
@@ -148,6 +186,18 @@ const ScreenWarnBack: React.FC<ScreenWarnBackProps> = (props) => {
                             columns={peopleNumColumns}
                         />
                     )}
+                    {drawerVisible && <Drawer
+                        placement="left"
+                        onClose={drawerClose}
+                        visible={drawerVisible}
+                        width={'29.17%'}
+                        getContainer={false}
+                        style={{ position: 'absolute' }}
+                    >
+                        <div onClick={drawerClose}>
+                            <img src={pictureDisplayPath + "?filePath=" + drawerUrl} onWheel={handleImgZoom} ref={zoomImg} />
+                        </div>
+                    </Drawer>}
                 </ProCard>
                 <ProCard colSpan={17} key="1" bodyStyle={{ padding: "16px" }}>
                     <Radio.Group value={cameraSelect} buttonStyle="solid" style={{ marginBottom: "8px" }} onChange={onCaremaChange}>