nicecode/nicecode-v2
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'hongbo/file-cabinet' into 'develop'

Browse Source 
fix: 实时监控　预警记录添加滚动条

See merge request web-project/zhst-lambo!25
This commit is contained in:
江志雄 2024-05-10 13:49:31 +08:00
commit 0144f5cc33
8 changed files with 59 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/biz/src/RealTimeMonitor/RealTimeMonitor.tsx
View File

@ -1,4 +1,4 @@
import React, { useContext } from 'react';
import React, { useContext, useRef } from 'react';
import WindowToggle, { ISize } from './components/WindowToggle';
import WarningRecordList from './components/WarningRecordList';
import { ConfigProvider } from '@zhst/meta';
@ -34,6 +34,7 @@ interface RealTimeMonitorProps {
largeImageTitle?: string;
size: ISize;
setSize: React.Dispatch<React.SetStateAction<ISize>>
maxRecordCount?: number;
}
export const RealTimeMonitor: React.FC<RealTimeMonitorProps> = (props) => {
@ -53,19 +54,22 @@ export const RealTimeMonitor: React.FC<RealTimeMonitorProps> = (props) => {
selectedRecordId,
isRecordListLoading,
size,
setSize
setSize,
maxRecordCount
} = props
const toggleRef = useRef<HTMLDivElement>()
const componentName = getPrefixCls('biz-real-time-monitor', customizePrefixCls);
return (
<div className={componentName} style={{ display: 'flex' }} >
<WindowToggle
<WindowToggle
toggleRef={toggleRef}
selectedWindowKey={selectedWindowKey}
dataSource={videoDataSource}
handleWindowClick={handleWindowClick}
handleCloseButtonClick={handleCloseButtonClick}
size = {size}
setSize = {setSize}
size={size}
setSize={setSize}
/>
<WarningRecordList
dataSource={warningDataSource}
@ -75,6 +79,8 @@ export const RealTimeMonitor: React.FC<RealTimeMonitorProps> = (props) => {
viewLargerImageModalRef={viewLargerImageModalRef}
isRecordListLoading={isRecordListLoading}
recordListTitle="监控预警记录"
maxHeight={toggleRef.current?.offsetHeight}
maxRecordCount={maxRecordCount}
/>
</div>
);

12
packages/biz/src/RealTimeMonitor/components/WarningRecordList/WarningRecordList.tsx
View File

@ -4,6 +4,7 @@ import { ViewLargerImageModalRef } from '../../../ViewLargerImageModal';
import WarningRecordCard from '../../../WarningRecordCard';
import ViewLargerImageModal from '../../../ViewLargerImageModal';
import { Empty, Space, Spin } from 'antd';
import { pxToRem } from '@zhst/func'
import { LoadingOutlined } from '@ant-design/icons';
import "./index.less"
@ -28,6 +29,8 @@ interface WarningRecordListProps {
cardStyle?: React.CSSProperties;
imgStyle?: React.CSSProperties;
largeImageTitle?: string;
maxHeight?: number;
maxRecordCount?: number;
}
const WarningRecordList: React.FC<WarningRecordListProps> = (props) => {
@ -43,11 +46,12 @@ const WarningRecordList: React.FC<WarningRecordListProps> = (props) => {
style,
cardStyle,
imgStyle,
largeImageTitle
largeImageTitle,
maxHeight,
maxRecordCount = 10
} = props
return (
<div className='zhst-biz-warning-record-list' style={style}>
<div className='zhst-biz-warning-record-list' style={{ maxHeight : `${pxToRem(`${maxHeight}`)}` , ...style }} >
<div className='header'>{recordListTitle}</div>
<div className='body'>
{
@ -58,7 +62,7 @@ const WarningRecordList: React.FC<WarningRecordListProps> = (props) => {
: (dataSource?.length) > 0 ?
<Space direction='vertical' size={10} >
{dataSource?.map((record, index) => {
if (index > 2) return
if (index > maxRecordCount -1) return
return (<WarningRecordCard
key={record?.id}
record={record}

8
packages/biz/src/RealTimeMonitor/components/WarningRecordList/index.less
View File

@ -2,19 +2,21 @@
display: flex;
flex-direction: column;
border-left: solid 1px #00000026;
width: 320px;
min-width: 320px;
.header {
width: 100%;
height: 48px;
background-color: #EFF2F4;
padding: 10px 20px;
padding: 0 20px;
box-sizing: border-box;
line-height: 48px;
}
.body {
padding: 10px;
overflow: hidden;
overflow-y: auto;
// overflow-x: hidden;
flex: 1;
}
}

45
packages/biz/src/RealTimeMonitor/components/WindowToggle/WindowToggle.tsx
View File

@ -1,53 +1,56 @@
import React from 'react';
import VideoPlayerCard from '../../../VideoPlayerCard';
import { VideoPlayerCardProps } from '../../../VideoPlayerCard';
import { Segmented } from 'antd';
import { Segmented, theme } from 'antd';
import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons';
import { theme } from 'antd/lib';
import { pxToRem } from '@zhst/func'
import './index.less'
export type ISize = 'large' | 'small'
interface WindowToggleProps {
dataSource?: VideoPlayerCardProps[];
handleWindowClick?: (key?: string) => void;
handleCloseButtonClick?: (key?: string) => void;
selectedWindowKey?: string;
size: ISize;
setSize: React.Dispatch<React.SetStateAction<ISize>>
toggleRef: React.MutableRefObject<any>
}
export const WindowToggle: React.FC<WindowToggleProps> = (props) => {
const { dataSource = [], handleWindowClick, handleCloseButtonClick, selectedWindowKey , size = "large",setSize} = props
const { dataSource = [], handleWindowClick, handleCloseButtonClick, selectedWindowKey, size = "large", setSize, toggleRef } = props
const { useToken } = theme
const { token } = useToken()
const getLabelStyle = (isSelected: boolean) => ({
padding: "0 11px", background: "#fff",
padding: `0 ${pxToRem("11px")}`, background: "#fff",
...(isSelected ? { background: token.colorPrimary, color: '#fff' } : {}),
});
return (
<div className='zhst-biz-window-toggle'>
<div className='zhst-biz-window-toggle' ref={toggleRef}>
{/* 切换按钮 */}
<div className='header'>
<Segmented
defaultValue='large'
options={[
{ value: 'large', label: <div style={getLabelStyle(size === 'large')}><BarsOutlined /></div> },
{ value: 'small', label: <div style={getLabelStyle(size === 'small')}><AppstoreOutlined /></div> },
]}
onChange={(value) => {
// 当一个窗口时 默认 selectedkey 第一条数据的 windowkey
if (value === 'large' && dataSource.length > 0) {
const { windowKey } = dataSource[0]
handleWindowClick?.(windowKey)
}
setSize(value as ISize)
}}
/>
<Segmented
defaultValue='large'
options={[
{ value: 'large', label: <div style={getLabelStyle(size === 'large')}><BarsOutlined /></div> },
{ value: 'small', label: <div style={getLabelStyle(size === 'small')}><AppstoreOutlined /></div> },
]}
onChange={(value) => {
// 当一个窗口时 默认 selectedkey 第一条数据的 windowkey
if (value === 'large' && dataSource.length > 0) {
const { windowKey } = dataSource[0]
handleWindowClick?.(windowKey)
}
setSize(value as ISize)
}}
/>
</div>
<div className='body'>
@ -57,7 +60,7 @@ export const WindowToggle: React.FC<WindowToggleProps> = (props) => {
if (size === "large" && index > 0) return
return (
<VideoPlayerCard
key={item.windowKey}
key={size === "large" ? "" : item.windowKey}
selectedWindowKey={selectedWindowKey}
size={size}
handleWindowClick={handleWindowClick}

2
packages/biz/src/RealTimeMonitor/demo/base.tsx
View File

@ -87,7 +87,7 @@ export default () => {
setTimeout(() => {
// 对后端返回数据进行处理 组装一套符合属性的 数据
// videoSrc : videoData.videoSrc
const newVideoData: VideoPlayerCardProps = { imageKey: videoData.imageKey, title: videoData.title, odRect: videoData.odRect, videoSrc: videoData.videoSrc }
const newVideoData: VideoPlayerCardProps = { imageKey: videoData.imageKey, title: videoData.title, odRect: videoData.odRect}
setVideoDataSource((pre) => {
const newVideoDataSource: VideoPlayerCardProps[] = pre.map((item) => {
// 传给 选中的视频窗口

10
packages/biz/src/VideoPlayerCard/VideoPlayerCard.tsx
View File

@ -3,6 +3,7 @@ import { theme } from 'antd/lib';
import { ConfigProvider, VideoPlayer, CropperImage, type VideoViewRef, } from '@zhst/meta';
import React, { useState, useEffect, ReactNode, useRef, useContext } from 'react';
import { CloseOutlined, LoadingOutlined } from '@ant-design/icons';
import { pxToRem } from '@zhst/func'
import './index.less'
export interface VideoPlayerCardProps {
prefixCls?: string;
@ -48,11 +49,10 @@ export const VideoPlayerCard: React.FC<VideoPlayerCardProps> = (props) => {
border: `2px solid ${token.colorPrimary}`, boxShadow: " 0px 2px 9px 0px rgba(0,0,0,0.16)"
}
const cardStyle: React.CSSProperties = {
...(size === 'large' ? { height: 931 } : { height: 456, cursor: 'pointer' }),
...(size === 'large' ? { height: `${pxToRem("931px")}` } : { height: `${pxToRem("456px")}` , cursor: 'pointer' }),
...(size === 'small' && selectedWindowKey === windowKey ? selectedBorderStyle : {})
};
const videoPlayerCardStyle = size === 'small' ? { width: "calc(50% - 20px)" } : { flex: 1 }
const videoPlayerCardStyle = size === 'small' ? { width: `calc(50% - ${pxToRem("20px")})` } : { flex: 1 }
useEffect(() => {
if (!isWindowLoading && (videoSrc || imageKey)) {
let contentElement: JSX.Element | null = null;
@ -65,7 +65,7 @@ export const VideoPlayerCard: React.FC<VideoPlayerCardProps> = (props) => {
} else if (imageKey) {
contentElement = (
<div style={{ width: "100%", height: "100%", display: 'block' }}>
<div style={{ width: "100%", height: "100%" }}>
<CropperImage
// editAble={true}
odList={odRectDefault}
@ -102,7 +102,7 @@ export const VideoPlayerCard: React.FC<VideoPlayerCardProps> = (props) => {
{cardContent}
</>
) : (
<div style={{ backgroundColor: '#000', height: '100%', display: 'flex', padding: '20px', boxSizing: 'border-box' }}>
<div style={{ backgroundColor: '#000', height: '100%', display: 'flex', padding: `${pxToRem("20px")}`, boxSizing: 'border-box' }}>
{
isWindowLoading ?
<div style={{ flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>

3
packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx
View File

@ -2,6 +2,7 @@ import React, { useImperativeHandle, useRef, useState, forwardRef, useContext }
import { Modal, ModalProps, Space, SpaceProps } from 'antd';
import theme from 'antd/lib/theme';
import { DownloadOutlined } from '@ant-design/icons';
import { pxToRem } from '@zhst/func';
import { ConfigProvider, CropperImage } from '@zhst/meta';
import './index.less'
@ -86,7 +87,7 @@ export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLarg
>
<Space size={0} {...spaceProps}>
<div className={`${componentName}-left-img`}>
<div style={{ width: 789, height: 444, ...imgStyle }}>
<div style={{ width: `${pxToRem('789px')}`, height: `${pxToRem('444px')}`, ...imgStyle }}>
<CropperImage
// editAble={false}
// selectAble={false}

5
packages/biz/src/WarningRecordCard/WarningRecordCard.tsx
View File

@ -3,6 +3,7 @@ import { theme } from 'antd/lib';
import React, { useContext } from 'react';
import dayjs from 'dayjs';
import { ConfigProvider, CropperImage } from '@zhst/meta';
import { pxToRem } from '@zhst/func';
import './index.less'
export interface IRecord {
@ -105,7 +106,7 @@ export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => {
<div className={componentName} key={id} onClick={handleClick} style={style}>
<Card
cover={
<div style={{ width: 336, height: 203, ...imgStyle }}>
<div style={{ width: `${pxToRem("356px")}`, height: `${pxToRem("203px")}`, ...imgStyle }}>
<CropperImage
// 无法触发 图片点击时间需要 加 selectAble
selectAble={false}
@ -114,7 +115,7 @@ export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => {
/>
</div>
}
style={{ width: 356, height: 302, padding: 10, borderRadius: 4, ...selectedCardStyle, ...cardStyle }}
style={{ padding: `${pxToRem("10px")}`, borderRadius: `${pxToRem("4px")}`, ...selectedCardStyle, ...cardStyle }}
{...cardProps}
>
<div className={`${componentName}-left-context`}>