fix: 优化部分样式表,修改包引入方式
This commit is contained in:
parent
57f54b7164
commit
59ce1a5218
@ -1,7 +1,9 @@
|
||||
import React from 'react';
|
||||
import { IRecord, VideoPlayerCardProps, ViewLargerImageModalRef } from '@zhst/biz';
|
||||
import WindowToggle from './components/WindowToggle';
|
||||
import WarningRecordList from './components/WarningRecordList';
|
||||
import { IRecord } from '../WarningRecordCard';
|
||||
import { VideoPlayerCardProps } from '../VideoPlayerCard';
|
||||
import { ViewLargerImageModalRef } from '../ViewLargerImageModal';
|
||||
|
||||
interface RealTimeMonitorProps {
|
||||
videoDataSource?: VideoPlayerCardProps[];
|
||||
@ -62,7 +64,6 @@ export const RealTimeMonitor: React.FC<RealTimeMonitorProps> = (props) => {
|
||||
recordListTitle="监控预警记录"
|
||||
/>
|
||||
</div>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -136,12 +136,9 @@ export default () => {
|
||||
setWarningDataSource(newWarningDataSource)
|
||||
setIsRecordListLoading(false)
|
||||
}, 1000)
|
||||
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
|
||||
<Space size={[8, 16]} direction="vertical">
|
||||
<RealTimeMonitor
|
||||
selectedWindowKey={selectedWindowKey}
|
||||
@ -155,7 +152,7 @@ export default () => {
|
||||
viewLargerImageModalRef={viewLargerImageModalRef}
|
||||
isRecordListLoading={isRecordListLoading}
|
||||
recordListTitle="监控预警记录" />
|
||||
<button onClick={() => { mockData() }}>模拟数据</button>
|
||||
<button onClick={() => { mockData() }}>模拟请求</button>
|
||||
</Space>
|
||||
)
|
||||
}
|
||||
|
@ -29,6 +29,7 @@ export interface ViewLargerImageModalProps {
|
||||
export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLargerImageModalProps>(
|
||||
(props, ref) => {
|
||||
|
||||
const componentName = `zhst-biz-view-warning-larger-image-modal`;
|
||||
const { modalProps, downloadImg, imgStyle, title = '预警大图', downloadText = '下载大图', spaceProps } = props
|
||||
const { useToken } = theme
|
||||
const { token } = useToken()
|
||||
@ -53,7 +54,7 @@ export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLarg
|
||||
|
||||
return (
|
||||
<Modal
|
||||
className='zhst-biz-view-warning-larger-image-modal'
|
||||
className={componentName}
|
||||
open={open}
|
||||
destroyOnClose
|
||||
title={title}
|
||||
@ -62,8 +63,10 @@ export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLarg
|
||||
onCancel={handleCancel}
|
||||
{...modalProps}
|
||||
>
|
||||
<Space size={0} styles={{ item: { backgroundColor: '#F6F9FAFF' } }} {...spaceProps}>
|
||||
<img alt={title} src={imgSrc} style={{ width: 789, height: 444, display: 'block', ...imgStyle }} />
|
||||
<Space size={0} {...spaceProps}>
|
||||
<div className={`${componentName}-left-img`}>
|
||||
<img alt={title} src={imgSrc} style={{ ...imgStyle }} />
|
||||
</div>
|
||||
<div className='right-context'>
|
||||
{warningData?.map(({ label, value }) => (
|
||||
<div key={label} >
|
||||
|
@ -1,6 +1,12 @@
|
||||
.zhst-biz-view-warning-larger-image-modal {
|
||||
font-family: MicrosoftYaHei;
|
||||
|
||||
&-left-img img{
|
||||
width: 789px;
|
||||
height: 444px;
|
||||
display: 'block',
|
||||
}
|
||||
|
||||
.ant-modal-content {
|
||||
padding: 0;
|
||||
height: 492px;
|
||||
|
@ -85,12 +85,12 @@ export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => {
|
||||
return (
|
||||
<div className={componentName} key={id} onClick={handleClick} style={style}>
|
||||
<Card
|
||||
cover={<img alt="预警图" src={imgSrc} style={{ width: 336, height: 203, borderRadius: 0, ...imgStyle }} />}
|
||||
cover={<div className={`${componentName}-cover-img`}><img alt="预警图" src={imgSrc} style={{ borderRadius: 0, ...imgStyle }} /></div>}
|
||||
style={{ width: 356, height: 302, padding: 10, borderRadius: 4, ...selectedCardStyle, ...cardStyle }}
|
||||
{...cardProps}
|
||||
>
|
||||
<div className='left-context'>
|
||||
<div className="warning-type">{warningType}</div>
|
||||
<div className={`${componentName}-left-context`}>
|
||||
<div className={`${componentName}-left-context-warning-type`}>{warningType}</div>
|
||||
<Space size={0} split={<Divider type="vertical" />}>
|
||||
{warningInfo?.map((item, index) => (
|
||||
<div key={index} className="info-item">
|
||||
@ -98,9 +98,9 @@ export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => {
|
||||
</div>
|
||||
))}
|
||||
</Space>
|
||||
<div className='warning-time'>{warningTimeShow}</div>
|
||||
<div className={`${componentName}-left-context-warning-time`}>{warningTimeShow}</div>
|
||||
</div>
|
||||
<div className='cabietInfo' >{cabietText}</div>
|
||||
<div className={`${componentName}-cabietInfo`} >{cabietText}</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
|
@ -7,8 +7,15 @@
|
||||
line-height: 19px;
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.left-context {
|
||||
&-cover-img img {
|
||||
width: 336px;
|
||||
height: 203px;
|
||||
border-radius: 0,
|
||||
}
|
||||
|
||||
&-left-context {
|
||||
flex: 1;
|
||||
|
||||
>div {
|
||||
@ -18,9 +25,8 @@
|
||||
>div:nth-child(1) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.warning-type {
|
||||
&-warning-type {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
2
packages/types/index.d.ts
vendored
2
packages/types/index.d.ts
vendored
@ -219,7 +219,7 @@ export interface ViewOption {
|
||||
fitScaleAsMinScale?: boolean;
|
||||
}
|
||||
|
||||
export type IOdRectOrigin {
|
||||
export type IOdRectOrigin = {
|
||||
objectIndex: {
|
||||
objectId: string
|
||||
solutionId: string
|
||||
|
Loading…
Reference in New Issue
Block a user