feat(material,biz,meta): 修改算法配置物料,树组件业务传参,修复大图组件od变化不重新渲染

This commit is contained in:
NICE CODE BY DEV 2024-07-11 17:42:02 +08:00
parent 765f485556
commit 7bde75ea15
15 changed files with 80 additions and 35 deletions

View File

@ -1,5 +1,17 @@
# @zhst/biz # @zhst/biz
## 0.33.2
### Patch Changes
- 修改穿梭框不能修改宽度
## 0.33.1
### Patch Changes
- 修改穿梭框不能修改宽度 bug
## 0.33.0 ## 0.33.0
### Minor Changes ### Minor Changes

View File

@ -1,6 +1,6 @@
{ {
"name": "@zhst/biz", "name": "@zhst/biz",
"version": "0.33.0", "version": "0.33.2",
"description": "业务库", "description": "业务库",
"keywords": [ "keywords": [
"business", "business",

View File

@ -129,7 +129,7 @@ const TreePanel: FC<TreePanelProps> = (props) => {
open={item.showTooltip} open={item.showTooltip}
> >
{WithDropdown( {WithDropdown(
<Button className={classNames(componentName + '-search-btns-btn')} type={item.type} onClick={item.onClick} icon={item.icon} />, <Button className={classNames(componentName + '-search-btns-btn')} type={item.type} onClick={item.onClick} icon={item.icon} {...item} />,
item.type === 'dropdown', item.type === 'dropdown',
item.dropdownConfig item.dropdownConfig
)} )}
@ -148,7 +148,7 @@ const TreePanel: FC<TreePanelProps> = (props) => {
{/* @ts-ignore */} {/* @ts-ignore */}
<div key={idx} className={classNames(componentName + '-btns-btn')}> <div key={idx} className={classNames(componentName + '-btns-btn')}>
{item.icon} {item.icon}
<span className={classNames(componentName + '-btns-btn-label', item.className)}>{item.label}</span> <span onClick={item.onClick} className={classNames(componentName + '-btns-btn-label', item.className)}>{item.label}</span>
</div> </div>
{idx % 2 !== 0 && (<br/>)} {idx % 2 !== 0 && (<br/>)}
</> </>

View File

@ -156,7 +156,7 @@ const TreeTransfer: React.FC<TreeTransferProps> = (props) => {
<div className={componentName}> <div className={componentName}>
<div className={`${componentName}-left`} <div className={`${componentName}-left`}
style={{ style={{
width: parseInt(String(leftPanelWidth)) + 'px', width: typeof leftPanelWidth === 'number' ? leftPanelWidth + 'px' : leftPanelWidth,
border: bordered ? `1px solid ${token.colorBorder}` : 'unset', border: bordered ? `1px solid ${token.colorBorder}` : 'unset',
}} }}
> >
@ -225,7 +225,7 @@ const TreeTransfer: React.FC<TreeTransferProps> = (props) => {
</div> </div>
<div className={`${componentName}-right`} <div className={`${componentName}-right`}
style={{ style={{
width: parseInt(String(rightPanelWidth)) + 'px', width: typeof rightPanelWidth === 'number' ? rightPanelWidth + 'px' : rightPanelWidth,
border: bordered ? `1px solid ${token.colorBorder}` : 'unset', border: bordered ? `1px solid ${token.colorBorder}` : 'unset',
}} }}
> >

View File

@ -109,7 +109,7 @@ const demo = () => {
sources: { sources: {
'osm-tiles': { 'osm-tiles': {
'type': 'raster', 'type': 'raster',
tiles: [`http://10.0.0.120:30003/map/api/tilesets/mapfile/{z}/{x}/{y}.png`], //在线地址先写死120 tiles: [`http://10.0.1.231:30003/map/api/tilesets/mapfile/{z}/{x}/{y}.png`], //在线地址先写死120
} }
}, },
}} }}

View File

@ -1,5 +1,20 @@
# @zhst/material # @zhst/material
## 0.22.3
### Patch Changes
- 修改穿梭框不能修改宽度
- Updated dependencies
- @zhst/biz@0.33.2
## 0.22.2
### Patch Changes
- Updated dependencies
- @zhst/biz@0.33.1
## 0.22.1 ## 0.22.1
### Patch Changes ### Patch Changes

View File

@ -1,6 +1,6 @@
{ {
"name": "@zhst/material", "name": "@zhst/material",
"version": "0.22.1", "version": "0.22.3",
"description": "物料库", "description": "物料库",
"keywords": [ "keywords": [
"business", "business",

View File

@ -191,25 +191,21 @@ const AlgorithmConfig = forwardRef<AlgorithmConfigRef, AlgorithmConfigProps>((pr
} }
</div> </div>
<div className={classNames(`${componentName}-right`)} > <div className={classNames(`${componentName}-right`)} >
<div> <div className={classNames(`${componentName}-right-top`)}>
<Title className={classNames(`${componentName}-title`)}></Title> <Title className={classNames(`${componentName}-title`)}></Title>
<div > <TimeTemplateTable
<TimeTemplateTable dataSource={timeTemplateDataSource}
dataSource={timeTemplateDataSource} {...timeTemplateTableProps}
{...timeTemplateTableProps} />
/>
</div>
</div> </div>
<div> <div className={classNames(`${componentName}-right-bottom`)}>
<Title className={classNames(`${componentName}-title`)}></Title> <Title className={classNames(`${componentName}-title`)}></Title>
<div > <AlgorithmTable
<AlgorithmTable dataSource={algorithmTableDataSource}
dataSource={algorithmTableDataSource} timeTemplateData={timeTemplateDataSource}
timeTemplateData={timeTemplateDataSource} tableType={type}
tableType={type} {...algorithmTableProps}
{...algorithmTableProps} />
/>
</div>
</div> </div>
</div> </div>
</Flex> </Flex>

View File

@ -94,8 +94,6 @@ const AlgorithmTable= <DataSource extends AnyObject = AnyObject>(
}, },
]; ];
console.log('123', 123)
return ( return (
<div className={componentName}> <div className={componentName}>
<Space className={classNames(`${componentName}-top`)} size={16}> <Space className={classNames(`${componentName}-top`)} size={16}>

View File

@ -6,6 +6,7 @@ import {
} from '@ant-design/pro-components'; } from '@ant-design/pro-components';
import { AnyObject } from 'antd/es/_util/type'; import { AnyObject } from 'antd/es/_util/type';
import './index.less' import './index.less'
import { Tooltip } from '@zhst/meta';
export interface TimeTemplateTableProps<DataSource, Params extends ParamsType = ParamsType, ValueType = "text"> extends ProTableProps<DataSource, Params, ValueType> { export interface TimeTemplateTableProps<DataSource, Params extends ParamsType = ParamsType, ValueType = "text"> extends ProTableProps<DataSource, Params, ValueType> {
onItemBlur?: (value?: number | string, id?: any, record?: any) => void, onItemBlur?: (value?: number | string, id?: any, record?: any) => void,
} }
@ -26,6 +27,19 @@ const TimeTemplateTable = <DataSource extends AnyObject = AnyObject>(
{ {
title: '布控星期', title: '布控星期',
dataIndex: 'arrangeDay', dataIndex: 'arrangeDay',
render(_, entity) {
return (
<Tooltip
title={entity?.arrangeDay?.join?.(',') || '-'}
>
<span>{entity?.arrangeDay?.length || 0}</span>
</Tooltip>
)
},
},
{
title: '路数/总路数',
dataIndex: 'roadNum',
}, },
]; ];
@ -38,7 +52,7 @@ const TimeTemplateTable = <DataSource extends AnyObject = AnyObject>(
padding: 0 padding: 0
} }
}} }}
scroll={{ y: 95 }} scroll={{ y: 200 }}
toolbar={undefined} toolbar={undefined}
rowKey="id" rowKey="id"
search={false} search={false}

View File

@ -96,9 +96,6 @@ const demo = () => {
"h": 0.2664015 "h": 0.2664015
} }
]) ])
// setTimeTemplateData([])
// setTableList([])
// setBoxList([])
}} }}
videoUrl={videoUrl} videoUrl={videoUrl}
videoProps={{ videoProps={{
@ -112,6 +109,7 @@ const demo = () => {
type={tableType} type={tableType}
// 算法模块 // 算法模块
algorithmTableProps={{ algorithmTableProps={{
onReuse: () => console.log('配置复用'),
onItemSwitch: (status, id) => { onItemSwitch: (status, id) => {
setAlgorithmTableList((pre: any[]) => { setAlgorithmTableList((pre: any[]) => {
let arr = pre.map(o => { let arr = pre.map(o => {

View File

@ -23,6 +23,9 @@
flex: 0 0 1040px; flex: 0 0 1040px;
margin: 0 24px; margin: 0 24px;
height: auto; height: auto;
.zhst-image__video-view {
height: 100%!important;
}
&-cont { &-cont {
align-items: center; align-items: center;
@ -34,5 +37,8 @@
} }
&-right { &-right {
height: auto; height: auto;
&-top {
height: 40%;
}
} }
} }

View File

@ -65,6 +65,7 @@ export interface VideoViewRef {
cropAble: boolean; cropAble: boolean;
setShowCrop: Dispatch<SetStateAction<boolean>>; setShowCrop: Dispatch<SetStateAction<boolean>>;
downloadVideoFrame: (opt?: DownloadFrameOptionProps) => void; // 视频截帧 downloadVideoFrame: (opt?: DownloadFrameOptionProps) => void; // 视频截帧
getCropInfo: (data?: any) => void
pause: () => void; pause: () => void;
play: () => void; play: () => void;
reload: () => void; // 重新加载 reload: () => void; // 重新加载
@ -252,7 +253,7 @@ const VideoPlayer = forwardRef<VideoViewRef, VideoViewProps>((props, ref) => {
checkIsErr(); checkIsErr();
console.error('videoInsRef 错误', type, errDetail, info, video.currentTime); console.error('videoInsRef 错误', type, errDetail, info, video.currentTime);
}); });
let playPromise = videoInsRef?.current.play(); let playPromise = videoInsRef?.current.play?.();
//先ready 遮挡会导致播放失败 //先ready 遮挡会导致播放失败
setIsReady(true); setIsReady(true);
playPromise playPromise
@ -301,7 +302,7 @@ const VideoPlayer = forwardRef<VideoViewRef, VideoViewProps>((props, ref) => {
setPlaySeq((pre) => pre + 1); setPlaySeq((pre) => pre + 1);
return; return;
} }
videoInsRef.current.play(); videoInsRef.current.play?.();
} }
setPlayTime(0); setPlayTime(0);
@ -426,7 +427,7 @@ const VideoPlayer = forwardRef<VideoViewRef, VideoViewProps>((props, ref) => {
videoInsRef?.current?.pause() videoInsRef?.current?.pause()
} else { } else {
const _element = videoInsRef.current._mediaElement || {} const _element = videoInsRef.current._mediaElement || {}
videoInsRef?.current?.play() videoInsRef?.current?.play?.()
// 挂载图片选择 // 挂载图片选择
cropInsRef.current = new Viewer(corpContainerRef.current!!, { cropInsRef.current = new Viewer(corpContainerRef.current!!, {
scaleAble: false, scaleAble: false,
@ -551,6 +552,7 @@ const VideoPlayer = forwardRef<VideoViewRef, VideoViewProps>((props, ref) => {
setShowCrop?.(dispatch); setShowCrop?.(dispatch);
}, },
downloadVideoFrame, downloadVideoFrame,
getCropInfo,
pause: () => { pause: () => {
videoInsRef.current?.pause?.(); videoInsRef.current?.pause?.();
}, },
@ -645,7 +647,7 @@ const VideoPlayer = forwardRef<VideoViewRef, VideoViewProps>((props, ref) => {
onIconClick={() => { onIconClick={() => {
if (!isPlay) { if (!isPlay) {
//播放中暂停 //播放中暂停
videoInsRef?.current?.play(); videoInsRef?.current?.play?.();
setShowCrop(false); setShowCrop(false);
} else { } else {
videoInsRef?.current?.pause(); videoInsRef?.current?.pause();

View File

@ -6,6 +6,8 @@ export default () => {
const videoRef = useRef<VideoViewRef>(null) const videoRef = useRef<VideoViewRef>(null)
const [url] = useState(VIDEO_URL) const [url] = useState(VIDEO_URL)
console.log('videoRef', )
return ( return (
<Space direction='vertical'> <Space direction='vertical'>
<Space> <Space>
@ -13,7 +15,9 @@ export default () => {
<Button onClick={() => videoRef.current?.pause()}></Button> <Button onClick={() => videoRef.current?.pause()}></Button>
<Button onClick={() => videoRef.current?.setShowCrop(true)}></Button> <Button onClick={() => videoRef.current?.setShowCrop(true)}></Button>
<Button onClick={() => videoRef.current?.setShowCrop(false)}>退</Button> <Button onClick={() => videoRef.current?.setShowCrop(false)}>退</Button>
<Button onClick={() => videoRef.current?.downloadVideoFrame()}></Button> <Button onClick={async () => {
videoRef.current?.downloadVideoFrame()
}}></Button>
</Space> </Space>
<div style={{ width: '800px' }}> <div style={{ width: '800px' }}>
<VideoPlayer <VideoPlayer

View File

@ -216,7 +216,7 @@ const CropperImage = forwardRef<CropperImageRefProps, CropperImageProps>((props,
currentFabricRef.current?.dispose?.() currentFabricRef.current?.dispose?.()
} }
// TODO: 监听odList 需要优化 // TODO: 监听odList 需要优化
},[type, editAble, isImgReady]) },[type, editAble, isImgReady, odList])
// 监听矩形拖动,防抖 // 监听矩形拖动,防抖
const { run: handleRectChange } = useDebounceFn( const { run: handleRectChange } = useDebounceFn(