fix

src/global.less

@@ -5,21 +5,26 @@ body,
 #root {
   height: 100%;
 }
-body #root .ranking .ant-table.ant-table-small .ant-table-tbody > tr > td.ant-table-cell{
+
+body #root .ranking .ant-table.ant-table-small .ant-table-tbody>tr>td.ant-table-cell {
   padding: 0px !important;
 }
-body #root .ranking .ant-table.ant-table-small .ant-table-tbody > tr > td.ant-table-cell  >div div {
+
+body #root .ranking .ant-table.ant-table-small .ant-table-tbody>tr>td.ant-table-cell>div div {
   height: 100%;
 }
-body #root .ranking .ant-table.ant-table-small .ant-table-tbody > tr > td.ant-table-cell .ant-progress-inner{
+
+body #root .ranking .ant-table.ant-table-small .ant-table-tbody>tr>td.ant-table-cell .ant-progress-inner {
   border-radius: 0 !important;
   height: 100%;
   background-color: #fff;
 }
-body #root .ranking .ant-table.ant-table-small .ant-table-tbody > tr > td.ant-table-cell .ant-progress-inner .ant-progress-bg{
+
+body #root .ranking .ant-table.ant-table-small .ant-table-tbody>tr>td.ant-table-cell .ant-progress-inner .ant-progress-bg {
   border-radius: 0 !important;
   height: 100% !important;
 }
+
 .colorWeak {
   filter: invert(80%);
 }
@@ -42,6 +47,7 @@ ul,
 ol {
   list-style: none;
 }
+
 input:-webkit-autofill,
 textarea:-webkit-autofill,
 select:-webkit-autofill {
@@ -52,16 +58,20 @@ select:-webkit-autofill {
   -o-box-shadow: 0 0 0 1000px white inset !important;
   -ms-box-shadow: 0 0 0 1000px white inset !important;
 }
+
 @media (max-width: @screen-xs) {
   .ant-table {
     width: 100%;
     overflow-x: auto;
-    &-thead > tr,
-    &-tbody > tr {
-      > th,
-      > td {
+
+    &-thead>tr,
+    &-tbody>tr {
+
+      >th,
+      >td {
         white-space: pre;
-        > span {
+
+        >span {
           display: block;
         }
       }
@@ -70,8 +80,9 @@ select:-webkit-autofill {
 }
 
 // 兼容IE11
-@media screen and(-ms-high-contrast: active), (-ms-high-contrast: none) {
-  body .ant-design-pro > .ant-layout {
+@media screen and(-ms-high-contrast: active),
+(-ms-high-contrast: none) {
+  body .ant-design-pro>.ant-layout {
     min-height: 100vh;
   }
 }
@@ -81,6 +92,7 @@ select:-webkit-autofill {
   width: 6px;
   height: 8px;
 }
+
 ::-webkit-scrollbar-thumb {
   border-radius: 4px;
   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
@@ -92,6 +104,7 @@ select:-webkit-autofill {
   background: rgba(82, 82, 82, 0.3);
   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
 }
+
 #notificationPop {
   width: 100vw;
   height: 100vh;
@@ -99,21 +112,25 @@ select:-webkit-autofill {
   z-index: 10001;
   position: fixed;
   top: 0;
-  > div {
+
+  >div {
     position: relative;
-    > div {
+
+    >div {
       position: absolute !important;
       right: 50% !important;
       transform: translateX(50%);
     }
   }
 }
+
 #logo {
   a {
     display: flex;
     align-items: center;
   }
 }
+
 .ant-statistic {
   .ant-statistic-content {
     color: #000;
@@ -121,125 +138,63 @@ select:-webkit-autofill {
     word-break: break-word;
   }
 }
+
 body {
   #root {
+
     .ant-table.ant-table-small .ant-table-title,
     .ant-table.ant-table-middle .ant-table-title,
     .ant-table.ant-table-small .ant-table-footer,
     .ant-table.ant-table-middle .ant-table-footer,
-    .ant-table.ant-table-small .ant-table-thead > tr > th,
-    .ant-table.ant-table-middle .ant-table-thead > tr > th,
-    .ant-table.ant-table-small .ant-table-tbody > tr > td,
-    .ant-table.ant-table-middle .ant-table-tbody > tr > td,
-    .ant-table.ant-table-small tfoot > tr > th,
-    .ant-table.ant-table-middle tfoot > tr > th,
-    .ant-table.ant-table-small tfoot > tr > td .ant-table.ant-table-middle tfoot > tr > td {
+    .ant-table.ant-table-small .ant-table-thead>tr>th,
+    .ant-table.ant-table-middle .ant-table-thead>tr>th,
+    .ant-table.ant-table-small .ant-table-tbody>tr>td,
+    .ant-table.ant-table-middle .ant-table-tbody>tr>td,
+    .ant-table.ant-table-small tfoot>tr>th,
+    .ant-table.ant-table-middle tfoot>tr>th,
+    .ant-table.ant-table-small tfoot>tr>td .ant-table.ant-table-middle tfoot>tr>td {
       padding: 5px;
     }
+
     .ant-table.ant-table-small .ant-table-thead .ant-table-column-sorters {
       padding: 0;
     }
+
     // .ant-table.ant-table-small .ant-table-tbody > tr > td.ant-table-cell {
     //   padding-top: 8px;
     // }
   }
-  .ant-table-thead > tr > th {
+
+  .ant-table-thead>tr>th {
     font-weight: 600 !important;
   }
+
   .total_table {
-    .ant-table-thead > tr > th,
-    .ant-table-tbody > tr > td {
+
+    .ant-table-thead>tr>th,
+    .ant-table-tbody>tr>td {
       border-bottom: 1px solid #e0e0e0;
     }
-    .ant-table.ant-table-bordered
-      > .ant-table-container
-      > .ant-table-content
-      > table
-      > thead
-      > tr
-      > th,
-    .ant-table.ant-table-bordered
-      > .ant-table-container
-      > .ant-table-header
-      > table
-      > thead
-      > tr
-      > th,
-    .ant-table.ant-table-bordered
-      > .ant-table-container
-      > .ant-table-body
-      > table
-      > thead
-      > tr
-      > th,
-    .ant-table.ant-table-bordered
-      > .ant-table-container
-      > .ant-table-content
-      > table
-      > tbody
-      > tr
-      > td,
-    .ant-table.ant-table-bordered
-      > .ant-table-container
-      > .ant-table-header
-      > table
-      > tbody
-      > tr
-      > td,
-    .ant-table.ant-table-bordered
-      > .ant-table-container
-      > .ant-table-body
-      > table
-      > tbody
-      > tr
-      > td,
-    .ant-table.ant-table-bordered
-      > .ant-table-container
-      > .ant-table-content
-      > table
-      > tfoot
-      > tr
-      > th,
-    .ant-table.ant-table-bordered
-      > .ant-table-container
-      > .ant-table-header
-      > table
-      > tfoot
-      > tr
-      > th,
-    .ant-table.ant-table-bordered
-      > .ant-table-container
-      > .ant-table-body
-      > table
-      > tfoot
-      > tr
-      > th,
-    .ant-table.ant-table-bordered
-      > .ant-table-container
-      > .ant-table-content
-      > table
-      > tfoot
-      > tr
-      > td,
-    .ant-table.ant-table-bordered
-      > .ant-table-container
-      > .ant-table-header
-      > table
-      > tfoot
-      > tr
-      > td,
-    .ant-table.ant-table-bordered
-      > .ant-table-container
-      > .ant-table-body
-      > table
-      > tfoot
-      > tr
-      > td {
+
+    .ant-table.ant-table-bordered>.ant-table-container>.ant-table-content>table>thead>tr>th,
+    .ant-table.ant-table-bordered>.ant-table-container>.ant-table-header>table>thead>tr>th,
+    .ant-table.ant-table-bordered>.ant-table-container>.ant-table-body>table>thead>tr>th,
+    .ant-table.ant-table-bordered>.ant-table-container>.ant-table-content>table>tbody>tr>td,
+    .ant-table.ant-table-bordered>.ant-table-container>.ant-table-header>table>tbody>tr>td,
+    .ant-table.ant-table-bordered>.ant-table-container>.ant-table-body>table>tbody>tr>td,
+    .ant-table.ant-table-bordered>.ant-table-container>.ant-table-content>table>tfoot>tr>th,
+    .ant-table.ant-table-bordered>.ant-table-container>.ant-table-header>table>tfoot>tr>th,
+    .ant-table.ant-table-bordered>.ant-table-container>.ant-table-body>table>tfoot>tr>th,
+    .ant-table.ant-table-bordered>.ant-table-container>.ant-table-content>table>tfoot>tr>td,
+    .ant-table.ant-table-bordered>.ant-table-container>.ant-table-header>table>tfoot>tr>td,
+    .ant-table.ant-table-bordered>.ant-table-container>.ant-table-body>table>tfoot>tr>td {
       border-right: 1px solid #e0e0e0;
     }
-    .ant-table.ant-table-bordered > .ant-table-container {
+
+    .ant-table.ant-table-bordered>.ant-table-container {
       border: 1px solid #e0e0e0;
     }
+
     .ant-table-header {
       .ant-table-thead {
         tr {
@@ -250,100 +205,33 @@ body {
       }
     }
   }
+
   .all_table {
-    .ant-table-thead > tr > th,
-    .ant-table-tbody > tr > td {
+
+    .ant-table-thead>tr>th,
+    .ant-table-tbody>tr>td {
       border-bottom: 1px solid #e0e0e0;
     }
-    .ant-table.ant-table-bordered
-      > .ant-table-container
-      > .ant-table-content
-      > table
-      > thead
-      > tr
-      > th,
-    .ant-table.ant-table-bordered
-      > .ant-table-container
-      > .ant-table-header
-      > table
-      > thead
-      > tr
-      > th,
-    .ant-table.ant-table-bordered
-      > .ant-table-container
-      > .ant-table-body
-      > table
-      > thead
-      > tr
-      > th,
-    .ant-table.ant-table-bordered
-      > .ant-table-container
-      > .ant-table-content
-      > table
-      > tbody
-      > tr
-      > td,
-    .ant-table.ant-table-bordered
-      > .ant-table-container
-      > .ant-table-header
-      > table
-      > tbody
-      > tr
-      > td,
-    .ant-table.ant-table-bordered
-      > .ant-table-container
-      > .ant-table-body
-      > table
-      > tbody
-      > tr
-      > td,
-    .ant-table.ant-table-bordered
-      > .ant-table-container
-      > .ant-table-content
-      > table
-      > tfoot
-      > tr
-      > th,
-    .ant-table.ant-table-bordered
-      > .ant-table-container
-      > .ant-table-header
-      > table
-      > tfoot
-      > tr
-      > th,
-    .ant-table.ant-table-bordered
-      > .ant-table-container
-      > .ant-table-body
-      > table
-      > tfoot
-      > tr
-      > th,
-    .ant-table.ant-table-bordered
-      > .ant-table-container
-      > .ant-table-content
-      > table
-      > tfoot
-      > tr
-      > td,
-    .ant-table.ant-table-bordered
-      > .ant-table-container
-      > .ant-table-header
-      > table
-      > tfoot
-      > tr
-      > td,
-    .ant-table.ant-table-bordered
-      > .ant-table-container
-      > .ant-table-body
-      > table
-      > tfoot
-      > tr
-      > td {
+
+    .ant-table.ant-table-bordered>.ant-table-container>.ant-table-content>table>thead>tr>th,
+    .ant-table.ant-table-bordered>.ant-table-container>.ant-table-header>table>thead>tr>th,
+    .ant-table.ant-table-bordered>.ant-table-container>.ant-table-body>table>thead>tr>th,
+    .ant-table.ant-table-bordered>.ant-table-container>.ant-table-content>table>tbody>tr>td,
+    .ant-table.ant-table-bordered>.ant-table-container>.ant-table-header>table>tbody>tr>td,
+    .ant-table.ant-table-bordered>.ant-table-container>.ant-table-body>table>tbody>tr>td,
+    .ant-table.ant-table-bordered>.ant-table-container>.ant-table-content>table>tfoot>tr>th,
+    .ant-table.ant-table-bordered>.ant-table-container>.ant-table-header>table>tfoot>tr>th,
+    .ant-table.ant-table-bordered>.ant-table-container>.ant-table-body>table>tfoot>tr>th,
+    .ant-table.ant-table-bordered>.ant-table-container>.ant-table-content>table>tfoot>tr>td,
+    .ant-table.ant-table-bordered>.ant-table-container>.ant-table-header>table>tfoot>tr>td,
+    .ant-table.ant-table-bordered>.ant-table-container>.ant-table-body>table>tfoot>tr>td {
       border-right: 1px solid #e0e0e0;
     }
-    .ant-table.ant-table-bordered > .ant-table-container {
+
+    .ant-table.ant-table-bordered>.ant-table-container {
       border: 1px solid #e0e0e0;
     }
+
     .ant-table-header {
       .ant-table-thead {
         tr {
@@ -355,35 +243,49 @@ body {
     }
   }
 }
+
 .table_row_red {
   background-color: #e91e1e80;
+
   &:hover {
-    > td {
-      background-color:#e91e1e80!important;
+    >td {
+      background-color: #e91e1e80 !important;
     }
   }
 }
+
 .table_row_yellow {
   background-color: #ffeb3b6b;
+
   &:hover {
-    > td {
+    >td {
       background-color: #ffeb3b6b !important;
     }
   }
 }
+
 // .ant-table,.ant-card{
 //   background-color: #fff !important;
 //   td{
 //     background-color: #fff !important;
 //   }
 // }
-.ad_form_style{
-  .ant-form-item{
+.ad_form_style {
+  .ant-form-item {
     margin-bottom: 15px;
   }
 }
 
-.ant-select-selector, .ant-input, .ant-input-affix-wrapper, .ant-dropdown-menu, .ant-btn, .ant-modal-content, .ant-select-dropdown,.ant-input-number, .ant-input-number-input, .ant-tooltip-inner {
+.ant-select-selector,
+.ant-input,
+.ant-input-affix-wrapper,
+.ant-dropdown-menu,
+.ant-btn,
+.ant-modal-content,
+.ant-select-dropdown,
+.ant-input-number,
+.ant-input-number-input,
+.ant-tooltip-inner {
   border-radius: 4px !important;
 }
 
@@ -391,6 +293,7 @@ body {
   &:first-child {
     border-radius: 4px 0 0 4px !important;
   }
+
   &:last-child {
     border-radius: 0 4px 4px 0 !important;
   }
@@ -403,7 +306,13 @@ body {
 
 .header_table_body {
   margin-bottom: 5px;
+
   td {
     font-weight: 600;
   }
+}
+
+.tableScrollbar::-webkit-scrollbar {
+  width: 0;
+  height: 0;
 }

src/pages/launchSystemV3/adMonitorListV3/CreativePreview.tsx

@@ -0,0 +1,81 @@
+import { Popover, Space, Table } from "antd"
+import React from "react"
+import './index.less'
+import cpTableConfig from "./cpTableConfig"
+
+interface Props {
+    creativePreview: {
+        brand?: {
+            value: {
+                brandName: string,
+                brandImageUrl: string
+            }
+        }[],
+        title?: {
+            value: {
+                content: string
+            }
+        }[],
+        description?: {
+            value: {
+                content: string
+            }
+        }[],
+        video?: {
+            value: {
+                videoUrl: string
+            }
+        }[],
+        image?: {
+            value: {
+                imageUrl: string
+            }
+        }[]
+    }[]
+}
+
+/**
+ * 创意预览
+ * @param param0 
+ * @returns 
+ */
+const CreativePreview: React.FC<Props> = ({ creativePreview }) => {
+
+    /***************************/
+    let video = creativePreview?.[0]?.video?.[0]?.value?.videoUrl
+    let imageUrl = creativePreview?.[0]?.image
+    let titles = creativePreview?.[0]?.brand
+    let descriptions = creativePreview?.[0]?.description
+    let title = creativePreview?.[0]?.title
+    /***************************/
+
+    return <>
+        <Popover
+            content={<div style={{ width: 600, height: creativePreview.length > 10 ? 450 : 'auto' }}>
+                <Table
+                    bordered
+                    columns={cpTableConfig()}
+                    dataSource={creativePreview?.map((item, index) => ({ ...item, id: index }))}
+                    scroll={{ y: 380 }}
+                    rowKey={'id'}
+                    size="small"
+                    className="creativePreview"
+                />
+            </div>}
+            mouseEnterDelay={0.5}
+            destroyTooltipOnHide={true}
+            placement="left"
+        >
+            <div>
+                {video ? <video src={video} style={{ maxHeight: 18, maxWidth: 25 }} /> : (imageUrl && imageUrl?.length > 0) ? <div>
+                    {imageUrl?.[0]?.value?.imageUrl ? <img src={imageUrl?.[0]?.value?.imageUrl} height={18} /> : <span>无图片地址</span>}
+                </div> : (titles && titles?.length > 0) ? <Space>
+                    <img src={titles?.[0]?.value?.brandImageUrl} height={18} />
+                    <span>{titles?.[0]?.value?.brandName}</span>
+                </Space> : (title && title?.length > 0) ? <span>{title?.[0]?.value?.content}</span> : (descriptions && descriptions?.length > 0) ? <span>{descriptions?.[0]?.value?.content}</span> : <span>--</span>}
+            </div>
+        </Popover>
+    </>
+}
+
+export default React.memo(CreativePreview)

src/pages/launchSystemV3/adMonitorListV3/cpTableConfig.tsx

@@ -0,0 +1,114 @@
+import React from "react"
+import { Image, Popover, Space } from "antd"
+
+function cpTableConfig(): any {
+    return [
+        {
+            title: '品牌形象',
+            dataIndex: 'brand',
+            key: 'brand',
+            width: 110,
+            ellipsis: true,
+            render: (a: any[]) => {
+                return a?.length > 0 ? <Space>
+                    <img src={a?.[0]?.value?.brandImageUrl} height={18} />
+                    <span>{a?.[0]?.value?.brandName}</span>
+                </Space> : '--'
+            }
+        },
+        {
+            title: '文本标题',
+            dataIndex: 'title',
+            key: 'title',
+            width: 140,
+            ellipsis: true,
+            render: (a: any[]) => {
+                return a?.length > 0 ? a.map((item, index) => `标题${index + 1}:${item?.value?.content}`)?.toString() : '--'
+            }
+        },
+        {
+            title: '文本描述',
+            dataIndex: 'description',
+            key: 'description',
+            width: 140,
+            ellipsis: true,
+            render: (a: any[]) => {
+                return a?.length > 0 ? a.map((item, index) => `描述${index + 1}:${item?.value?.content}`)?.toString() : '--'
+            }
+        },
+        {
+            title: '单图片',
+            dataIndex: 'image',
+            key: 'image',
+            width: 140,
+            ellipsis: true,
+            render: (a: any[]) => {
+                return <div style={{ minHeight: 50 }}>
+                    {a?.length > 0 ? <div className='tableScrollbar' style={{ overflow: 'hidden', overflowX: 'auto' }}>
+                        <Image.PreviewGroup>
+                            {a?.map((item, index) => <Image key={item?.componentId + '_' + index} src={item?.value?.imageUrl} height={45} />)}
+                        </Image.PreviewGroup>
+                    </div> : '--'}
+                </div>
+            }
+        },
+        {
+            title: '图集',
+            dataIndex: 'imageList',
+            key: 'imageList',
+            width: 140,
+            ellipsis: true,
+            render: (a: any[]) => {
+                return a?.length > 0 ? <div className='tableScrollbar' style={{ overflow: 'hidden', overflowX: 'auto', display: 'flex', gap: 10 }}>
+                    {a?.map((item, index) => <Image.PreviewGroup key={index}>
+                        {item?.value?.list?.map((list: any, i: number) => <Image key={i} src={list?.imageUrl} height={45} />)}
+                    </Image.PreviewGroup>)}
+                </div> : '--'
+            }
+        },
+        {
+            title: '视频',
+            dataIndex: 'video',
+            key: 'video',
+            width: 140,
+            ellipsis: true,
+            render: (a: any[]) => {
+                return a?.length > 0 ? < Popover
+                    placement='right'
+                    content={< div >
+                        <Space style={{ maxWidth: 300, display: 'flex', flexFlow: 'row wrap', margin: '10px 0' }}>
+                            {a?.map((item, index) => <video key={index} src={item?.value?.videoUrl} style={{ width: 250 }} controls />)}
+                        </Space>
+                    </div >}
+                    destroyTooltipOnHide
+                    mouseEnterDelay={0.5}
+                >
+                    <Space style={{ width: '100%' }}>
+                        <video src={a?.[0]?.value?.videoUrl} style={{ maxHeight: 40, maxWidth: 60 }} />
+                    </Space>
+                </Popover> : '--'
+            }
+        },
+        {
+            title: '轮播',
+            dataIndex: 'floatingZone',
+            key: 'floatingZone',
+            width: 150,
+            ellipsis: true,
+            render: (a: any[]) => {
+                return a?.length > 0 ? <div className='tableScrollbar' style={{ overflow: 'hidden', overflowX: 'auto' }}>
+                    {a?.map((item, index) => <div key={index} style={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                        <div style={{ width: 40 }}>
+                            <Image src={item?.value?.floatingZoneImageUrl} width={40} height={40} />
+                        </div>
+                        <div>
+                            <span>{item?.value?.floatingZoneName}</span><br />
+                            <span>{item?.value?.floatingZoneDesc}</span>
+                        </div>
+                    </div>)}
+                </div> : '--'
+            }
+        },
+    ]
+}
+export default cpTableConfig

src/pages/launchSystemV3/adMonitorListV3/index.less

@@ -0,0 +1,5 @@
+.creativePreview {
+    .ant-table-pagination.ant-pagination {
+        margin: 0;
+    }
+}

src/pages/launchSystemV3/adMonitorListV3/tableMonitorConfig.tsx

@@ -9,6 +9,7 @@ import { CHUJIAFANGSHI, YOUHUAMUBIAO } from '@/pages/adMonitor/adMonitorList/enu
 import { copy } from '@/utils/utils'
 import { ADGROUP_STATUS } from '../adqv3/const'
 import BoxOther from '../adqv3/creative/boxOther'
+import CreativePreview from './CreativePreview'
 function columnsMonitor(planDetail: (id: number) => void, details: (id: number) => void, onChange: (value: any) => void, log: (value: any) => void, sync: (data: any) => void) {
     const { copy } = useCopy()
     return function columns() {
@@ -65,7 +66,8 @@ function columnsMonitor(planDetail: (id: number) => void, details: (id: number)
                 key: 'creative_ids',
                 width: 110,
                 render: (_: any, b: any) => {
-                    return <BoxOther creativeComponents={b?.creative_preview?.[0] || {}} />
+                    // return <BoxOther creativeComponents={b?.creative_preview?.[0] || {}} />
+                    return <CreativePreview creativePreview={b?.creative_preview || []} />
                 }
             },
             {

src/pages/launchSystemV3/adMonitorListV3/tablePlanListConfig.tsx

@@ -11,6 +11,7 @@ import TimeSeriesLook from '../../launchSystemNew/adq/ad/timeSeriesLook'
 import SwitchStatus from '../adqv3/ad/switchStatus'
 import { ADGROUP_STATUS } from '../adqv3/const'
 import BoxOther from '../adqv3/creative/boxOther'
+import CreativePreview from './CreativePreview'
 function tablePlanConfig(
     onChange: () => void,
     details: (data: any) => void,
@@ -299,9 +300,11 @@ function tablePlanConfig(
             title: '创意预览',
             dataIndex: 'creative_ids',
             key: 'creative_ids',
-            width: 110,
+            width: 140,
+            ellipsis: true,
             render: (_: any, b: any) => {
-                return <BoxOther creativeComponents={b?.creative_preview?.[0] || {}} />
+                // return <BoxOther creativeComponents={b?.creative_preview?.[0] || {}} />
+                return <CreativePreview creativePreview={b?.creative_preview || []} />
             }
         },
         {

src/pages/launchSystemV3/adqv3/ad/tableConfig.tsx

@@ -7,6 +7,7 @@ import { ADGROUP_STATUS } from '../const'
 import SwitchStatus from './switchStatus'
 import TimeSeriesLook from '@/pages/launchSystemNew/adq/ad/timeSeriesLook'
 import BoxOther from '../creative/boxOther'
+import CreativePreview from '../../adMonitorListV3/CreativePreview'
 function tableConfig(onChange: () => void, creativeHandle?: (id: number) => void): any {
     return [
         {
@@ -224,7 +225,8 @@ function tableConfig(onChange: () => void, creativeHandle?: (id: number) => void
             width: 150,
             fixed: 'right',
             render: (a: any, b: any) => {
-                return <Space><BoxOther creativeComponents={a?.[0]?.creativeComponents || {}} /><a onClick={() => { creativeHandle?.(b?.adgroupId) }}>详情</a></Space>
+                return <Space><CreativePreview creativePreview={a?.map((item: { creativeComponents: any }) => ({ ...item?.creativeComponents })) || []} /><a onClick={() => { creativeHandle?.(b?.adgroupId) }}>详情</a></Space>
+                // return <Space><BoxOther creativeComponents={a?.[0]?.creativeComponents || {}} /><a onClick={() => { creativeHandle?.(b?.adgroupId) }}>详情</a></Space>
             }
         },
         {

src/pages/launchSystemV3/adqv3/config.ts

@@ -34,14 +34,21 @@ const txDynamicConfig = [
         label: '创意详情',
         data: [
             { title: '启停', dataIndex: 'configuredStatus', label: '广告详情', default: 1, width: 40 },
-            { title: '创意预览', dataIndex: 'creativeComponents', label: '广告详情', default: 2, width: 130 },
-            { title: '所属账号', dataIndex: 'accountId', label: '广告详情', default: 3, width: 75 },
-            { title: '广告ID', dataIndex: 'adgroupId', label: '广告详情', default: 4, width: 90 },
-            { title: '创意名称', dataIndex: 'dynamicCreativeName', label: '广告详情', default: 5, width: 120 },
-            { title: '创意ID', dataIndex: 'dynamicCreativeId', label: '广告详情', default: 6, width: 60 },
-            { title: '投放模式', dataIndex: 'deliveryMode', label: '广告详情', default: 7, width: 100 },
-            { title: '创意形式匹配方式', dataIndex: 'dynamicCreativeType', label: '广告详情', default: 8, width: 100 },
-            { title: '状态', dataIndex: 'systemStatus', label: '广告详情', default: 9, width: 100 },
+            // { title: '创意预览', dataIndex: 'creativeComponents', label: '广告详情', default: 2, width: 130 },
+            { title: '品牌形象', dataIndex: 'brand', label: '广告详情', default: 2, width: 110 },
+            { title: '文本标题', dataIndex: 'title', label: '广告详情', default: 3, width: 140 },
+            { title: '文本描述', dataIndex: 'description', label: '广告详情', default: 4, width: 140 },
+            { title: '单图片', dataIndex: 'image', label: '广告详情', default: 5, width: 140 },
+            { title: '图集', dataIndex: 'imageList', label: '广告详情', default: 6, width: 140 },
+            { title: '视频', dataIndex: 'video', label: '广告详情', default: 7, width: 140 },
+            { title: '轮播', dataIndex: 'floatingZone', label: '广告详情', default: 8, width: 150 },
+            { title: '所属账号', dataIndex: 'accountId', label: '广告详情', default: 9, width: 75 },
+            { title: '广告ID', dataIndex: 'adgroupId', label: '广告详情', default: 10, width: 90 },
+            { title: '创意名称', dataIndex: 'dynamicCreativeName', label: '广告详情', default: 11, width: 120 },
+            { title: '创意ID', dataIndex: 'dynamicCreativeId', label: '广告详情', default: 12, width: 60 },
+            { title: '投放模式', dataIndex: 'deliveryMode', label: '广告详情', default: 13, width: 100 },
+            { title: '创意形式匹配方式', dataIndex: 'dynamicCreativeType', label: '广告详情', default: 14, width: 100 },
+            { title: '状态', dataIndex: 'systemStatus', label: '广告详情', default: 15, width: 100 },
         ]
     }
 ]

src/pages/launchSystemV3/adqv3/creative/tableConfig.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Space, Switch } from 'antd'
+import { Space, Switch, Image, Popover } from 'antd'
 import '../index.less'
 import { copy } from '@/utils/utils'
 import { DELIVERY_MODE, DYNAMIC_CREATIVE_TYPE, dynamicCreativeStatus } from '../const'
@@ -17,13 +17,126 @@ function tableConfig(): any {
                 return <Switch size="small" checked={a === 'AD_STATUS_NORMAL'} onChange={(checked) => { }} />
             }
         },
+        // {
+        //     title: '创意预览',
+        //     dataIndex: 'creativeComponents',
+        //     key: 'creativeComponents',
+        //     width: 130,
+        //     render: (a: any) => {
+        //         return <Box creativeComponents={a} />
+        //     }
+        // },
         {
-            title: '创意预览',
-            dataIndex: 'creativeComponents',
-            key: 'creativeComponents',
-            width: 130,
-            render: (a: any) => {
-                return <Box creativeComponents={a} />
+            title: '品牌形象',
+            dataIndex: 'brand',
+            key: 'brand',
+            width: 110,
+            ellipsis: true,
+            render: (_: any[], b: any) => {
+                let brand = b?.creativeComponents?.brand
+                return brand?.length > 0 ? <Space>
+                    <img src={brand?.[0]?.value?.brandImageUrl} height={18} />
+                    <span>{brand?.[0]?.value?.brandName}</span>
+                </Space> : '--'
+            }
+        },
+        {
+            title: '文本标题',
+            dataIndex: 'title',
+            key: 'title',
+            width: 140,
+            ellipsis: true,
+            render: (_: any[], b: any) => {
+                let title = b?.creativeComponents?.title
+                return title?.length > 0 ? title.map((item: { value: { content: any } }, index: number) => `标题${index + 1}:${item?.value?.content}`)?.toString() : '--'
+            }
+        },
+        {
+            title: '文本描述',
+            dataIndex: 'description',
+            key: 'description',
+            width: 140,
+            ellipsis: true,
+            render: (_: any[], b: any) => {
+                let description = b?.creativeComponents?.description
+                return description?.length > 0 ? description.map((item: { value: { content: any } }, index: number) => `描述${index + 1}:${item?.value?.content}`)?.toString() : '--'
+            }
+        },
+        {
+            title: '单图片',
+            dataIndex: 'image',
+            key: 'image',
+            width: 140,
+            ellipsis: true,
+            render: (_: any[], b: any) => {
+                let image = b?.creativeComponents?.image
+                return <div style={{ minHeight: 50, display: 'flex', alignItems: 'center' }}>
+                    {image?.length > 0 ? <div className='tableScrollbar' style={{ overflow: 'hidden', overflowX: 'auto' }}>
+                        <Image.PreviewGroup>
+                            {image?.map((item: { componentId: string; value: { imageUrl: string | undefined } }, index: string) => <Image key={item?.componentId + '_' + index} src={item?.value?.imageUrl} height={45} />)}
+                        </Image.PreviewGroup>
+                    </div> : '--'}
+                </div>
+            }
+        },
+        {
+            title: '图集',
+            dataIndex: 'imageList',
+            key: 'imageList',
+            width: 140,
+            ellipsis: true,
+            render: (_: any[], b: any) => {
+                let imageList = b?.creativeComponents?.imageList
+                return imageList?.length > 0 ? <div className='tableScrollbar' style={{ overflow: 'hidden', overflowX: 'auto', display: 'flex', gap: 10 }}>
+                    {imageList?.map((item: { value: { list: any[] } }, index: React.Key | null | undefined) => <Image.PreviewGroup key={index}>
+                        {item?.value?.list?.map((list: any, i: number) => <Image key={i} src={list?.imageUrl} height={45} />)}
+                    </Image.PreviewGroup>)}
+                </div> : '--'
+            }
+        },
+        {
+            title: '视频',
+            dataIndex: 'video',
+            key: 'video',
+            width: 140,
+            ellipsis: true,
+            render: (_: any[], b: any) => {
+                let video = b?.creativeComponents?.video
+                return video?.length > 0 ? < Popover
+                    placement='right'
+                    content={< div >
+                        <Space style={{ maxWidth: 300, display: 'flex', flexFlow: 'row wrap', margin: '10px 0' }}>
+                            {video?.map((item: { value: { videoUrl: string | undefined } }, index: React.Key | null | undefined) => <video key={index} src={item?.value?.videoUrl} style={{ width: 250 }} controls />)}
+                        </Space>
+                    </div >}
+                    destroyTooltipOnHide
+                    mouseEnterDelay={0.5}
+                >
+                    <Space style={{ width: '100%' }}>
+                        <video src={video?.[0]?.value?.videoUrl} style={{ maxHeight: 40, maxWidth: 60 }} />
+                    </Space>
+                </Popover> : '--'
+            }
+        },
+        {
+            title: '轮播',
+            dataIndex: 'floatingZone',
+            key: 'floatingZone',
+            width: 150,
+            ellipsis: true,
+            render: (_: any[], b: any) => {
+                let floatingZone = b?.creativeComponents?.floatingZone
+                return floatingZone?.length > 0 ? <div className='tableScrollbar' style={{ overflow: 'hidden', overflowX: 'auto' }}>
+                    {floatingZone?.map((item: { value: { floatingZoneImageUrl: string | undefined; floatingZoneName: boolean | React.ReactChild | React.ReactFragment | React.ReactPortal | null | undefined; floatingZoneDesc: boolean | React.ReactChild | React.ReactFragment | React.ReactPortal | null | undefined } }, index: React.Key | null | undefined) => <div key={index} style={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                        <div style={{ width: 40 }}>
+                            <Image src={item?.value?.floatingZoneImageUrl} width={40} height={40} />
+                        </div>
+                        <div>
+                            <span>{item?.value?.floatingZoneName}</span><br />
+                            <span>{item?.value?.floatingZoneDesc}</span>
+                        </div>
+                    </div>)}
+                </div> : '--'
             }
         },
         {