9.14 修改9.9问题

src/pages/ElecEvaluation/MonitorScreen/ProjectMonitorRoom/index.tsx

@@ -1,4 +1,4 @@
-import { Col, Radio, Row, Table, Tag, Tooltip, Image } from "antd"
+import { Col, Radio, Row, Table, Tag, Tooltip, Image, Drawer } from "antd"
 import React, { useEffect, useRef, useState } from "react"
 import { EarlyWarn, LocalTime, onCell, onHeaderCell } from "../Home";
 import '../Home/style.less'
@@ -132,8 +132,14 @@ export default (props: any) => {
     const [backNumberList, setBackNumberList] = useState<any[]>([]);
     //采购方式字典
     const [bidMethodObj, setBidMethodObj] = 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 _time = 10000;
 
@@ -250,6 +256,37 @@ export default (props: any) => {
         }
         setBidMethodObj(obj);
     }
+    //图片放大抽屉显示
+    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(() => {
         initDict();
@@ -366,7 +403,7 @@ export default (props: any) => {
                                                     <p>时间：{item.createDate}</p>
                                                 </div>
                                                 <div>
-                                                    <Image src={pictureDisplayPath + "?filePath=" + item.details[0].filePath} preview={false} height={"100%"} />
+                                                    <Image src={pictureDisplayPath + "?filePath=" + item.details[0].filePath} preview={{ getContainer: "null" }} height={"100%"} onClick={() => drawerClick(item.details[0].filePath)} />
                                                 </div>
                                             </div>
                                         ))
@@ -377,7 +414,7 @@ export default (props: any) => {
                                                     <p>描述：{item.describeStranger}</p>
                                                 </div>
                                                 <div>
-                                                    <Image src={pictureDisplayPath + "?filePath=" + item.filePath} preview={false} height={"100%"} />
+                                                    <Image src={pictureDisplayPath + "?filePath=" + item.filePath} preview={{ getContainer: "null" }} height={"100%"} onClick={() => drawerClick(item.filePath)} />
                                                 </div>
                                             </div>
                                         ))}
@@ -401,6 +438,18 @@ export default (props: any) => {
                                     columns={staffReportColumns}
                                 />
                             )}
+                            {drawerVisible && <Drawer
+                                placement="right"
+                                onClose={drawerClose}
+                                visible={drawerVisible}
+                                getContainer={false}
+                                width={'100%'}
+                                style={{ position: 'absolute' }}
+                            >
+                                <div onClick={drawerClose}>
+                                    <img src={pictureDisplayPath + "?filePath=" + drawerUrl} onWheel={handleImgZoom} ref={zoomImg} />
+                                </div>
+                            </Drawer>}
                         </div>
                     </Col>
                 </Row>

src/pages/ElecEvaluation/MonitorScreen/ProjectMonitorRoom/style.less

@@ -201,6 +201,43 @@
                 justify-content: space-between;
             }
         }
+
+        .ant-drawer-close {
+            color: #fff;
+
+            &:focus,
+            &:hover {
+                color: #fff;
+            }
+        }
+
+        .ant-drawer-content {
+            background-color: rgba(0, 0, 0, 0.35);
+        }
+
+        .ant-drawer-body {
+            text-align: center;
+            padding: 0;
+
+            &>div {
+                height: 100%;
+            }
+
+            &>div>img {
+                position: relative;
+                top: 50%;
+                transform: translateY(-50%);
+                -moz-user-select: 'none';
+                /* Firefox私有属性 */
+                -webkit-user-select: 'none';
+                /* WebKit内核私有属性 */
+                -ms-user-select: 'none';
+                /* IE私有属性(IE10及以后) */
+                user-select: 'none';
+                /* CSS3属性 */
+            }
+        }
+
     }
 
     .ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {