wjx 2 năm trước cách đây
mục cha
commit
3482c57fc9

+ 2 - 2
src/Hook/useEcharts.tsx

@@ -587,7 +587,7 @@ function BarMonitor(props: {
                         fontSize: 16
                     },
                     left: 'center',
-                    top: 330,
+                    bottom: 0,
                 },
                 tooltip: {
                     show: true,
@@ -753,7 +753,7 @@ function LineMonitor(props: {
                 title: {
                     text: title || '',
                     left: 'center',
-                    top: 330,
+                    bottom: 0,
                     textStyle: {
                         color: '#3946c3',
                         fontSize: 16

+ 1 - 1
src/pages/adMonitor/adMonitorList/components/box.tsx

@@ -61,7 +61,7 @@ function Box(props: { b: any }) {
                             </Space>
                         </div>
                     }>
-                        <img src={creativePreview[0]} width={24} />
+                        <img src={creativePreview[0]} height={20} />
                     </Popover>
                 </div>
             } else {

+ 1 - 1
src/pages/adMonitor/adMonitorList/config.ts

@@ -308,7 +308,7 @@ const guanggao = [
             // { title: '当日成本偏差', dataIndex: 'dayCostOffset', label: '设置信息' },
             { title: '推广目标', dataIndex: 'promotedObjectType', label: '设置信息', default: 9 },
             // { title: '深度优化目标', dataIndex: 'depthOptimizeTarget', label: '设置信息' },
-            { title: '操作', dataIndex: 'event', label: '设置信息', default: 13, width: 45 },
+            { title: '操作', dataIndex: 'event', label: '设置信息', default: 13, width: 75 },
         ]
     },
     {

+ 5 - 1
src/pages/adMonitor/adMonitorList/index.less

@@ -22,7 +22,7 @@
         >div {
             width: 49.5%;
             // min-width: 600px;
-            min-height: 360px;
+            min-height: 300px;
             display: flex;
             align-items: center;
             justify-content: center;
@@ -107,4 +107,8 @@
     line-clamp: 2;
     -webkit-box-orient: vertical;
     font-size: 12px;
+}
+
+.padding2 {
+    padding: 2px 5px !important;
 }

+ 1 - 1
src/pages/adMonitor/adMonitorList/index.tsx

@@ -12,7 +12,7 @@ const AdMonitorList: React.FC = () => {
     // 变量结束
 
     return <div className="adMonitorList">
-        <Tabs activeKey={tab} className="adMonitorListTab" type="card" onChange={(activeKey: string) => {
+        <Tabs activeKey={tab} className="adMonitorListTab" size="small" type="card" onChange={(activeKey: string) => {
             if (activeKey === 'monitor') {
                 getAllPlanList.mutate([])
             } else {

+ 10 - 6
src/pages/adMonitor/adMonitorList/monitor.tsx

@@ -1,6 +1,6 @@
 import { Button, Card, Input, Radio, RadioChangeEvent, Select, Space, Spin, Tag, TimePicker, Tooltip } from "antd";
 import React, { useCallback, useEffect, useState } from "react";
-import { CloudDownloadOutlined, ColumnHeightOutlined, ColumnWidthOutlined, RedoOutlined } from "@ant-design/icons";
+import { CloudDownloadOutlined, ColumnHeightOutlined, ColumnWidthOutlined, EyeInvisibleOutlined, EyeOutlined, RedoOutlined } from "@ant-design/icons";
 import useEcharts from '@/Hook/useEcharts'
 import columnsMonitor from './tableMonitorConfig'
 import { useModel } from 'umi'
@@ -27,7 +27,7 @@ function Monitor(props: { onChange: () => void }) {
     const { getPlanList, getTotalCost, getPlanCost, getPlanDetailList, getMinuteList, getAdqAccountList } = useModel('useAdMonitor.useMonitor')
     const { getPicherList } = useModel('useOperating.useWxGroupList')
     // 变量开始
-    const [queryForm, setQueryForm] = useState<newListType>({ totalTimeUnit: 'day', planTimeUnit: 'hour', pageNum: 1, pageSize: 20 }) // 搜索变量//startTime: moment().format('YYYY-MM-DD'), endTime: moment().format('YYYY-MM-DD'),
+    const [queryForm, setQueryForm] = useState<newListType>({ totalTimeUnit: 'day', planTimeUnit: 'hour', pageNum: 1, pageSize: 100 }) // 搜索变量//startTime: moment().format('YYYY-MM-DD'), endTime: moment().format('YYYY-MM-DD'),
     const { BarMonitor, LineMonitor } = useEcharts()
     const [barDis, setBarDis] = useState<any[]>([])
     const [lineDis, setLineDis] = useState<any[]>([])
@@ -41,6 +41,7 @@ function Monitor(props: { onChange: () => void }) {
     const [downLoadLoading, setDownLoadLoading] = useState<boolean>(false)
     const [hour, setHour] = useState<any>()
     const [clickAccountId, setClickAccountId] = useState<number[]>([])
+    const [showEacharts, setShowEacharts] = useState<boolean>(true)
     const { totalTimeUnit, planTimeUnit, adgroup, accountId, sysUserId, pageNum, pageSize, campaign, sortField, sort } = queryForm
     // 变量结束
 
@@ -245,7 +246,7 @@ function Monitor(props: { onChange: () => void }) {
     }
 
     return <Space direction='vertical' style={{ width: '100%' }} className="monitor">
-        <Card hoverable >
+        <Card hoverable bodyStyle={{ padding: '12px 16px' }}>
             <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                 <Space>
                     <Select
@@ -323,11 +324,12 @@ function Monitor(props: { onChange: () => void }) {
                     />
                 </Space>
                 <Space>
+                    <Tag onClick={() => setShowEacharts(!showEacharts)}>{showEacharts ? <><EyeInvisibleOutlined /> 隐藏</> : <><EyeOutlined /> 显示</>}</Tag>
                     <Tag color="#2db7f5" onClick={refresh}><RedoOutlined />   刷新</Tag>
                 </Space>
             </div>
         </Card>
-        <Card hoverable>
+        {showEacharts && <Card hoverable bodyStyle={{ padding: '12px 16px' }}>
             <span style={{ position: 'absolute', top: 10 }}>
                 {px ?
                     <Tooltip title='左右排列'><Tag color='#f50' onClick={() => { set(false) }}><ColumnWidthOutlined /><span style={{ fontSize: 10 }}>左右排列</span></Tag></Tooltip>
@@ -368,9 +370,11 @@ function Monitor(props: { onChange: () => void }) {
                     {getTotalCost?.loading ? <Spin /> : <LineMonitor style={{ width: '100%', height: '100%' }} series smooth data={lineDis} title={lineTitle} />}
                 </div>
             </div>
-        </Card>
+        </Card>}
         <div className={'MYtable'}>
             <TableData
+                bodyStyle={{ padding: '12px 16px' }}
+                gutter={[0, 12]}
                 columns={columnsMonitor(planDetail, getDetailList, details, getMinuList, mode)}
                 dataSource={mode === 'total' ? getPlanList?.data?.data?.records?.map((item: any, index: number) => ({ ...item, id: item.id + '_' + index })) : mode === 'detail' ? getPlanDetailList?.data?.data : getMinuteList?.data?.data}
                 loading={mode === 'total' ? getPlanList?.loading : mode === 'detail' ? getPlanDetailList?.loading : getMinuteList?.loading}
@@ -440,7 +444,7 @@ function Monitor(props: { onChange: () => void }) {
                 }}
                 page={mode === 'total' ? queryForm.pageNum : undefined}
                 pageSize={mode === 'total' ? queryForm.pageSize : undefined}
-                scroll={{ y: 620 }}
+                scroll={{ y: 750 }}
                 config={mode === 'minute' ? qiliangpaihangminute : mode === 'detail' ? qiliangpaihanghour : qiliangpaihang}
                 configName={mode === 'total' ? '起量广告排行' : mode === 'detail' ? '起量广告排行明细' : '起量广告5min'}
             />

+ 3 - 1
src/pages/adMonitor/adMonitorList/planList.tsx

@@ -93,7 +93,7 @@ const PlanList: React.FC = () => {
     return <Space direction='vertical' style={{ width: '100%' }} className="planlist">
         {/* 详情弹窗 */}
         {visible && <PlanDetail visible={visible} onClose={() => { setVisible(false) }} data={adId} dataStartTime={queryForm?.dataStartTime} dataEndTime={queryForm?.dataEndTime} />}
-        <Card hoverable>
+        <Card hoverable bodyStyle={{ padding: '12px 16px' }}>
             <Space direction='vertical' style={{ width: '100%' }}>
                 <Space wrap>
                     <Select
@@ -175,6 +175,8 @@ const PlanList: React.FC = () => {
         </Card>
 
         <TableData
+            bodyStyle={{ padding: '12px 16px' }}
+            gutter={[0, 12]}
             columns={columnsPlanList(detail)}
             ajax={getAllPlanList}
             dataSource={getAllPlanList?.data?.data?.records}

+ 23 - 10
src/pages/adMonitor/adMonitorList/tablePlanListConfig.tsx

@@ -15,7 +15,11 @@ function columnsMonitor(details: (id: number) => void) {
                 key: 'beginToEnd',
                 align: 'center',
                 width: 100,
-                fixed: 'left'
+                fixed: 'left',
+                className: 'padding2',
+                render: (str: any, b: any) => {
+                    return <div style={{ lineHeight: 'normal', fontSize: 10 }}>{str}</div>
+                }
             },
             {
                 title: '广告名称/ID',
@@ -23,11 +27,12 @@ function columnsMonitor(details: (id: number) => void) {
                 key: 'adgroupName',
                 align: 'left',
                 width: 210,
+                className: 'padding2',
                 ellipsis: true,
                 render: (str: any, b: any) => {
-                    return <div style={{ display: 'flex', flexFlow: 'column nowrap', fontSize: 12 }}>
+                    return <div style={{ display: 'flex', flexFlow: 'column nowrap', transform: 'scale(0.95)' }}>
                         <div style={{ color: '#459ae9', fontSize: 10 }} className='oneText' onClick={() => copy(b.adgroupName)}>{b.adgroupName}</div>
-                        <div style={{ color: '#888' }}>广告ID:{b?.adgroupId}</div>
+                        <div style={{ color: '#888', fontSize: 10 }}> 广告ID:{b?.adgroupId}</div>
                     </div>
                 }
             },
@@ -37,11 +42,12 @@ function columnsMonitor(details: (id: number) => void) {
                 key: 'campaignName/campaignId',
                 align: 'left',
                 width: 180,
+                className: 'padding2',
                 ellipsis: true,
                 render: (str: any, b: any) => {
-                    return <div style={{ display: 'flex', flexFlow: 'column nowrap', fontSize: 12 }}>
+                    return <div style={{ display: 'flex', flexFlow: 'column nowrap', transform: 'scale(0.95)' }}>
                         <div style={{ color: '#459ae9', fontSize: 10 }} className='oneText' onClick={() => copy(b.campaignName)}>{b.campaignName}</div>
-                        <div style={{ color: '#888' }}>计划ID:{b?.campaignId}</div>
+                        <div style={{ color: '#888', fontSize: 10 }}> 计划ID:{b?.campaignId}</div>
                     </div>
                 }
             },
@@ -50,11 +56,12 @@ function columnsMonitor(details: (id: number) => void) {
                 dataIndex: 'creativeName/creativeId',
                 key: 'creativeName/creativeId',
                 align: 'left',
+                className: 'padding2',
                 width: 210,
                 render: (str: any, b: any) => {
-                    return <div style={{ display: 'flex', flexFlow: 'column nowrap', fontSize: 12 }}>
+                    return <div style={{ display: 'flex', flexFlow: 'column nowrap', transform: 'scale(0.95)' }}>
                         <div style={{ color: '#459ae9', fontSize: 10 }} className='oneText' onClick={() => copy(b.creativeName)}>{b.creativeName}</div>
-                        <div style={{ color: '#888' }}>创意ID:{b?.creativeId}</div>
+                        <div style={{ color: '#888', fontSize: 10 }}> 创意ID:{b?.creativeId}</div>
                     </div>
                 }
             },
@@ -91,7 +98,11 @@ function columnsMonitor(details: (id: number) => void) {
                 dataIndex: 'adCreateTime',
                 key: 'adCreateTime',
                 align: 'center',
-                width: 110
+                width: 110,
+                className: 'padding2',
+                render: (str: any, b: any) => {
+                    return <div style={{ lineHeight: 'normal', fontSize: 10 }}>{str}</div>
+                }
             },
             {
                 title: '广告状态',
@@ -150,8 +161,9 @@ function columnsMonitor(details: (id: number) => void) {
                 key: 'adBeginTime',
                 align: 'center',
                 width: 120,
+                className: 'padding2',
                 render: (a: any, b: any) => {
-                    return a ? <div style={{ display: 'flex', flexFlow: 'column nowrap' }}>
+                    return a ? <div style={{ display: 'flex', flexFlow: 'column nowrap', lineHeight: 'normal', fontSize: 10 }}>
                         <span>{a}</span>
                         {/* <span>{b?.adEndDate}</span> */}
                     </div> : '--'
@@ -255,8 +267,9 @@ function columnsMonitor(details: (id: number) => void) {
                 key: 'costSpeed',
                 align: 'center',
                 width: 120,
+                className: 'padding2',
                 render: (a: any, b: any) => {
-                    return <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+                    return <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', lineHeight: 'normal', fontSize: 10 }}>
                         {/* <div>当前:<span></span></div>
                         <div>前第一小时:<span></span></div> */}
                         <RocketSvg /> <a onClick={() => details(b)} style={{ marginLeft: 10 }}>详情</a>

+ 5 - 2
src/pages/launchSystemNew/components/TableData/index.tsx

@@ -44,10 +44,12 @@ interface Prosp {
         left: number,
         right: number
     },
+    bodyStyle?: any
+    gutter?: any
 }
 
 function TableData(props: Prosp) {
-    const { isZj, scroll, columns, title, dataSource, expandedRowRender, className, leftChild, page = undefined, rowSelection = false, pageSize = undefined, size = 'small', fixed = { left: 0, right: 1 }, total = 0, loading = false, onChange, config, configName, ajax, syncAjax, hoverable = true, myKey } = props
+    const { isZj, scroll, columns, title, dataSource, expandedRowRender, className, leftChild, page = undefined, rowSelection = false, pageSize = undefined, size = 'small', fixed = { left: 0, right: 1 }, total = 0, loading = false, onChange, config, configName, ajax, syncAjax, hoverable = true, myKey, gutter= [0, 20] } = props
     const { state: userState } = useModel('useOperating.useUser')
     const { isFell } = userState
     const [visible, setVisible] = useState<boolean>(false)
@@ -240,9 +242,10 @@ function TableData(props: Prosp) {
             <Card
                 hoverable={hoverable}
                 title={title}
+                bodyStyle={props?.bodyStyle}
                 headStyle={{ textAlign: 'left' }}
             >
-                <Row gutter={[0, 20]}>
+                <Row gutter={gutter}>
                     {header}
                     <Tab {...{ size, newColumns, handelResize, className, isZj, rowSelection, columns, loading, scroll, isFell, page, pageSize, dataSource, onChange, expandedRowRender, total, ajax, myKey }} />
                 </Row>