|
@@ -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'}
|
|
|
/>
|