fix

src/pages/adMonitor/adMonitorList/components/box.tsx

@@ -1,48 +1,81 @@
 import { Popover, Space } from 'antd'
 import React, { useMemo } from 'react'
 
+
 function Box(props: { b: any }) {
     const { b } = props
+    const creativePreview = b?.creativePreview || []
+    // let el = useMemo(() => {
+    //     if (b?.imagePreviewUrl?.length > 0 || b?.videoKeyFrameImageUrl) {//图片存在？ 或者视频首针图存在？
+    //         return <div className='imagesConfig'>
+    //             <Popover placement='right' content={
+    //                 <div>
+    //                     {b?.title && <div style={{ maxWidth: 300 }}><strong style={{ fontSize: 15 }}>标题:</strong>{b?.title}</div>}
+    //                     <Space style={{ maxWidth: 300, display: 'flex',  flexFlow: 'row wrap',margin:'10px 0' }}>
+    //                         {
+    //                             b?.imagePreviewUrl?.length > 0 ? b?.imagePreviewUrl?.map((img: string | undefined) => {
+    //                                 return <img src={img} key={img} width={b?.imagePreviewUrl?.length === 1 ? 200 : b?.imagePreviewUrl?.length === 3 ? 70 : b?.imagePreviewUrl?.length === 4 ? 100 : 70} />
+    //                             }) : <img src={b?.videoKeyFrameImageUrl} width={200} />
+    //                         }
+    //                     </Space>
+    //                     {b?.description && <small style={{ fontSize: 10, maxWidth: 300, display: 'inline-block' }}><strong style={{ fontSize: 13 }}>描述:</strong>{b?.description}</small>}
+    //                 </div>
+    //             }>
+    //                 <img src={b?.imagePreviewUrl ?  b?.imagePreviewUrl[0] : b?.videoKeyFrameImageUrl} width={24} />
+    //             </Popover>
+    //         </div>
+    //     } else if (b?.videoPreviewUrl) {//视频存在？
+    //         return <Popover placement='right' content={
+    //             <div>
+    //                 {b?.title && <div style={{ maxWidth: 300 }}><strong style={{ fontSize: 15 }}>标题:</strong>{b?.title}</div>}
+    //                 <video src='https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/b946235d4e4f078cdfe5099736e1dbc8_preview.mp4' style={{ maxWidth: 300 }} controls />
+    //                 {b?.description && <small style={{ fontSize: 10, maxWidth: 300, display: 'inline-block' }}><strong style={{ fontSize: 13 }}>描述:</strong>{b?.description}</small>}
+    //             </div>
+    //         }>
+    //             <video src='https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/b946235d4e4f078cdfe5099736e1dbc8_preview.mp4' style={{ width: 24 }} />
+    //         </Popover>
+    //     } else {
+    //         return <Popover placement='right' content={
+    //             <div>
+    //                  {b?.title && <div style={{ maxWidth: 300 }}><strong style={{ fontSize: 15 }}>标题:</strong>{b?.title}</div>}
+    //                 {b?.description && <small style={{ fontSize: 10, maxWidth: 300, display: 'inline-block' }}><strong style={{ fontSize: 13 }}>描述:</strong>{b?.description}</small>}
+    //             </div>
+    //         }>
+    //             <div style={{width:'100%',height:'100%'}}>
+    //                 --
+    //             </div>
+    //         </Popover>
+    //     }
+    // }, [b])
     let el = useMemo(() => {
-        if (b?.imagePreviewUrl?.length > 0 || b?.videoKeyFrameImageUrl) {//图片存在？ 或者视频首针图存在？
-            return <div className='imagesConfig'>
-                <Popover placement='right' content={
-                    <div>
-                        {b?.title && <div style={{ maxWidth: 300 }}><strong style={{ fontSize: 15 }}>标题:</strong>{b?.title}</div>}
-                        <Space style={{ maxWidth: 300, display: 'flex',  flexFlow: 'row wrap',margin:'10px 0' }}>
-                            {
-                                b?.imagePreviewUrl?.length > 0 ? b?.imagePreviewUrl?.map((img: string | undefined) => {
-                                    return <img src={img} key={img} width={b?.imagePreviewUrl?.length === 1 ? 200 : b?.imagePreviewUrl?.length === 3 ? 70 : b?.imagePreviewUrl?.length === 4 ? 100 : 70} />
-                                }) : <img src={b?.videoKeyFrameImageUrl} width={200} />
-                            }
-                        </Space>
-                        {b?.description && <small style={{ fontSize: 10, maxWidth: 300, display: 'inline-block' }}><strong style={{ fontSize: 13 }}>描述:</strong>{b?.description}</small>}
-                    </div>
-                }>
-                    <img src={b?.imagePreviewUrl ?  b?.imagePreviewUrl[0] : b?.videoKeyFrameImageUrl} width={24} />
-                </Popover>
-            </div>
-        } else if (b?.videoPreviewUrl) {//视频存在？
-            return <Popover placement='right' content={
-                <div>
-                    {b?.title && <div style={{ maxWidth: 300 }}><strong style={{ fontSize: 15 }}>标题:</strong>{b?.title}</div>}
-                    <video src='https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/b946235d4e4f078cdfe5099736e1dbc8_preview.mp4' style={{ maxWidth: 300 }} controls />
-                    {b?.description && <small style={{ fontSize: 10, maxWidth: 300, display: 'inline-block' }}><strong style={{ fontSize: 13 }}>描述:</strong>{b?.description}</small>}
+        if (creativePreview?.length > 0) {
+            let url1 = creativePreview[0]
+            if (url1?.indexOf('image') !== -1) {
+                return <div className='imagesConfig'>
+                    <Popover placement='right' content={
+                        <div>
+                            <Space style={{ maxWidth: 300, display: 'flex', flexFlow: 'row wrap', margin: '10px 0' }}>
+                                {creativePreview?.length > 0 ? creativePreview?.map((img: string | undefined) => {
+                                    return <img src={img} key={img} width={creativePreview?.length === 1 ? 200 : creativePreview?.length === 3 ? 70 : creativePreview?.length === 4 ? 100 : 70} />
+                                }) : '--'}
+                            </Space>
+                        </div>
+                    }>
+                        <img src={creativePreview[0]} width={24} />
+                    </Popover>
                 </div>
-            }>
-                <video src='https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/b946235d4e4f078cdfe5099736e1dbc8_preview.mp4' style={{ width: 24 }} />
-            </Popover>
+            } else {
+                return <Popover
+                    placement='right'
+                    content={<div>
+                        <video src={creativePreview[0]} style={{ maxWidth: 300 }} controls />
+                    </div>}
+                >
+                    <video src={creativePreview[0]} style={{ width: 24 }} />
+                </Popover>
+            }
         } else {
-            return <Popover placement='right' content={
-                <div>
-                     {b?.title && <div style={{ maxWidth: 300 }}><strong style={{ fontSize: 15 }}>标题:</strong>{b?.title}</div>}
-                    {b?.description && <small style={{ fontSize: 10, maxWidth: 300, display: 'inline-block' }}><strong style={{ fontSize: 13 }}>描述:</strong>{b?.description}</small>}
-                </div>
-            }>
-                <div style={{width:'100%',height:'100%'}}>
-                    --
-                </div>
-            </Popover>
+            return <div style={{ width: '100%', height: '100%' }}>--</div>
         }
     }, [b])
     return el

src/pages/adMonitor/adMonitorList/planList.tsx

@@ -165,7 +165,7 @@ const PlanList: React.FC = () => {
 
                     <Input placeholder="请输入计划名称或ID" allowClear value={queryForm?.campaign} onChange={(e) => { setQueryForm({ ...queryForm, pageNum: 1, campaign: e.target.value }) }} />
                     <Input placeholder="请输入广告名称或ID" allowClear value={queryForm?.adgroup} onChange={(e) => { setQueryForm({ ...queryForm, pageNum: 1, adgroup: e.target.value }) }} />
-                    {/* <Input placeholder="请输入创意名称或ID" allowClear value={queryForm?.creativeIdOrName} onChange={(e) => { setQueryForm({ ...queryForm, pageNum: 1, creativeIdOrName: e.target.value }) }} /> */}
+                    <Input placeholder="请输入创意ID" allowClear value={queryForm?.creativeId} onChange={(e) => { setQueryForm({ ...queryForm, pageNum: 1, creativeId: e.target.value }) }} />
 
                 </Space>
                 <Space wrap>

src/pages/adMonitor/adMonitorList/tablePlanListConfig.tsx

@@ -63,6 +63,7 @@ function columnsMonitor(details: (id: number) => void) {
                 width: 110,
                 align: 'center',
                 render: (a: any, b: any) => {
+                    // return a && a?.length > 0 ? <a href={a[0]} target='_blank'>预览</a> : '--'
                     return <Box b={b} />
                 }
             },

src/services/adMonitor/adMonitor.ts

@@ -107,7 +107,7 @@ export interface allPlanProps {
     createStartTime?: string, // 创建开始时间
     createEndTime?: string,  // 创建结束时间
     adgroup?: string,  // 广告ID & 广告名称
-    creativeIdOrName?: string,  // 创意ID & 创意名称
+    creativeId?: string,  // 创意ID & 创意名称
     creativeStatus?: 1 | 2 | 3,  // 创意状态, 0或者null : 全部, 1 : 审核通过, 2 : 审核中, 3 : 未通过
     dataStartTime?: string,  // 数据结束日期(格式 : yyyy-MM-dd)
     dataEndTime?: string,  // 数据结束日期(格式 : yyyy-MM-dd)