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