Merge branch 'develop' of http://git.zanxiangnet.com/wjx/ad-manage

src/components/EarlyWarning/config.ts

@@ -48,6 +48,8 @@ export enum MonitorFieldEnum {
     add_fans_count_day = '今日加粉数',
     add_fans_cost_total = '加粉成本',
     add_fans_cost_day = '今日加粉成本',
+    scan_follow_cost_total = '加企业微信客服成本',
+    scan_follow_cost_day = '今日加企业微信客服成本',
 }
 
 export enum WarningTypeEnum {

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

@@ -9,6 +9,7 @@ import TableData from "@/pages/launchSystemNew/components/TableData"
 import { detailsConfig } from "../config1"
 import TabAd from "./TabAd"
 import moment from "moment"
+import { LineField } from "../config"
 
 interface Props {
     data: any,
@@ -20,7 +21,7 @@ const Details: React.FC<Props> = ({ data, onClose, visible }) => {
     /****************************************/
     const { adgroup_id, account_id } = data
     const [activeKey, setActiveKey] = useState<string>('1')
-    const [queryColumnTrend, setQueryColumnTrend] = useState<GetColumnTrendProps>({ accountId: account_id, adgroupId: adgroup_id, trendColumns: ['view', 'cost'], timeUnit: 'hour', dataTimeMin: moment().format('YYYY-MM-DD'), dataTimeMax: moment().format('YYYY-MM-DD') })
+    const [queryColumnTrend, setQueryColumnTrend] = useState<GetColumnTrendProps>({ accountId: account_id, adgroupId: adgroup_id, trendColumns: ['cost'], timeUnit: 'hour', dataTimeMin: moment().format('YYYY-MM-DD'), dataTimeMax: moment().format('YYYY-MM-DD') })
     const [queryList, setQueryList] = useState<GetListForAdProps>({ accountId: account_id, adgroupId: adgroup_id, columns: [], pageNum: 1, pageSize: 20, timeUnit: 'hour', dataTimeMin: moment().format('YYYY-MM-DD'), dataTimeMax: moment().format('YYYY-MM-DD') })
     const [lineDis, setLineDis] = useState<any[]>([])
     const { LineMonitor } = useEcharts()
@@ -37,13 +38,16 @@ const Details: React.FC<Props> = ({ data, onClose, visible }) => {
     const getCTList = () => {
         getColumnTrend.run(queryColumnTrend).then(res => {
             if (res?.data) {
-                let spendData: any = { legendName: '花费' }
-                let exposureData: any = { legendName: '曝光次数' }
-                res?.data?.forEach((item: { day: string, trend_unit: string, view: string, cost: string }) => {
-                    spendData[item?.trend_unit] = item?.cost
-                    exposureData[item?.trend_unit] = item?.view
-                });
-                setLineDis(() => [spendData, exposureData])
+                let trendColumns = queryColumnTrend.trendColumns
+                let data = trendColumns.map((field) => {
+                    let value: any = {}
+                    res?.data?.forEach((item: any, index: number) => {
+                        if (index === 0) value.legendName = LineField[field];
+                        value[item?.trend_unit] = item?.[field]
+                    });
+                    return value
+                })
+                setLineDis(() => data)
             }
         })
     }
@@ -129,7 +133,26 @@ const Details: React.FC<Props> = ({ data, onClose, visible }) => {
                         hoverable
                     >
                         <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 16px 0' }}>
-                            <strong>趋势</strong>
+                            <Space>
+                                <strong>趋势</strong>
+                                <Select
+                                    showSearch
+                                    mode='multiple'
+                                    maxTagCount={2}
+                                    value={queryColumnTrend.trendColumns}
+                                    style={{ minWidth: 160 }}
+                                    allowClear
+                                    placeholder="请选择图表字段"
+                                    onChange={(value: string[]) => {
+                                        setQueryColumnTrend({ ...queryColumnTrend, trendColumns: value?.length ? value : ['cost'] })
+                                    }}
+                                    size="small"
+                                >
+                                    {Object.keys(LineField).map((key) => <Select.Option value={key} key={key}>
+                                        {LineField[key]}
+                                    </Select.Option>)}
+                                </Select>
+                            </Space>
                             <Space align="center">
                                 <span style={{ fontSize: 10, color: '#999' }}>刷新时间:{getColumnTrend?.data?.reqTime}</span>
                                 <a onClick={() => getCTList()} style={{ fontSize: 14 }}>刷新</a>
@@ -164,7 +187,7 @@ const Details: React.FC<Props> = ({ data, onClose, visible }) => {
                                 newQueryForm.pageNum = current
                                 newQueryForm.pageSize = pageSize
                                 if (sortData && JSON.stringify('sortData') !== '{}') {
-                                    let { field, order } = sortData   // descend 降序 大到小  ascend 升序 小到大
+                                    let { order } = sortData   // descend 降序 大到小  ascend 升序 小到大
                                     if (order) {
                                         // newQueryForm.sortColumn = field
                                         newQueryForm.sortAsc = order === 'ascend'

src/pages/adMonitor/adMonitorList/config.ts

@@ -392,4 +392,44 @@ const guanggao = [
     },
 ]
 
-export { qiliangpaihang, guanggao, qiliangpaihangminute, qiliangpaihanghour }
+const LineField = {
+    cost: '消耗',
+    view: '曝光',
+    thousand_display_price: '千次曝光成本',
+    click: '点击',
+    ctr: '点击率',
+    cpc: '点击均价',
+    conversions_count: '转化',
+    deep_conversions_count: '深度转化',
+    conversions_cost: '转化成本',
+    conversions_rate: '转化率',
+    no_interest_count: '不感兴趣点击次数',
+    video_play_count: '朋友圈视频播放次数',
+    download_count: '下载次数',
+    install_count: '安装次数',
+    activated_count: '激活次数',
+    mp_follow_uv: '公众号关注人数',
+    mp_follow_cost: '公众号关注成本',
+    mp_follow_rate: '公众号关注率',
+    add_quick_app_pv: '快应用添加次数',
+    add_quick_app_cost: '快应用添加成本',
+    add_quick_app_rate: '快应用添加率',
+    scan_follow_uv: '加企业微信客服人数',
+    scan_follow_cost: '加企业微信客服成本',
+    scan_follow_rate: '加企业微信客服率',
+    first_day_order_count: '首日新增下单量',
+    first_day_order_amount: '首日新增下单金额',
+    first_day_order_roi: '首日新增下单ROI',
+    order_count: '订单量',
+    order_amount: '订单金额',
+    order_cost: '下单成本',
+    order_rate: '下单率',
+    order_roi: '下单ROI',
+    atv: '客单价',
+    add_fans_count: '加粉数',
+    add_fans_cost: '加粉成本',
+    mp_follow_pv: '公众号关注次数',
+    mp_follow_pv_cost: '公众号关注次数成本',
+}
+
+export { qiliangpaihang, guanggao, qiliangpaihangminute, qiliangpaihanghour, LineField }

src/pages/adMonitor/adMonitorList/index.less

@@ -43,7 +43,7 @@
             .selectTime {
                 position: absolute;
                 top: 0;
-                right: 70px;
+                right: 40px;
                 z-index: 10;
             }
         }

src/pages/adMonitor/adMonitorList/monitor1.tsx

@@ -12,6 +12,7 @@ import moment from "moment";
 import TableData from "@/pages/launchSystemNew/components/TableData";
 import FilterQuery from "./components/FilterQuery";
 import RuleAccountLog from "@/components/EarlyWarning/ruleAccountLog";
+import { LineField } from "./config";
 interface newListType extends ListType {
     totalTimeUnit: 'total' | 'minute' | 'hour' | 'day',
     planTimeUnit: 'minute' | 'hour' | 'day'
@@ -43,6 +44,7 @@ function Monitor(props: { onChange: () => void }) {
     const [adgroupId, setAdgroupId] = useState<string>('')
     const [adgroupName, setAdgroupName] = useState<string>('')
     const [accountIdRule, setAccountIdRule] = useState<string>('')
+    const [trendColumns, setTrendColumns] = useState<string[]>(['cost'])
 
     const { totalTimeUnit, planTimeUnit, adgroup, accountId, sysUserId, groupAccountIds } = queryForm
     const configName = '起量广告排行明细New'
@@ -136,20 +138,24 @@ function Monitor(props: { onChange: () => void }) {
     // 获取今日计划总消耗图谱,折线
     useEffect(() => {
         getTootalCostList()
-    }, [planTimeUnit, adgroup, accountId, sysUserId, groupAccountIds])
+    }, [planTimeUnit, adgroup, accountId, sysUserId, groupAccountIds, trendColumns])
 
     /** 获取折线图 */
     const getTootalCostList = useCallback(async () => {
         let { totalTimeUnit, planTimeUnit, pageNum, pageSize, adgroup, sysUserId, accountId, ...newQueryForm } = queryForm
         let params = adgroup ? { ...newQueryForm, adgroupId: adgroup } : newQueryForm
-        let res = await getCostTrendList.run({ ...params, timeUnit: planTimeUnit, sysUserIds: sysUserId, accountId: accountId?.join() })
-        let data: any[] = [{ legendName: '消耗' }]
-        res?.data?.forEach((item: any) => {
-            data[0][item.trendUnit] = item.costOfUnit
+        let res = await getCostTrendList.run({ ...params, timeUnit: planTimeUnit, sysUserIds: sysUserId, accountId: accountId?.join(), trendColumns })
+        let data = trendColumns.map((field) => {
+            let value: any = {}
+            res?.data?.forEach((item: any, index: number) => {
+                if (index === 0) value.legendName = LineField[field];
+                value[item?.trend_unit] = item?.[field]
+            });
+            return value
         })
         setLineDis(() => data)
-        setLineTitle(() => res?.data?.adName ? res?.data?.adName + '_消耗趋势' : '广告总消耗趋势')
-    }, [queryForm, lineDis])
+        setLineTitle(() => `广告总${LineField[trendColumns[0]]}趋势`)
+    }, [queryForm, lineDis, trendColumns])
 
     /** 获取柱状图 */
     const getPlanCostList = useCallback(async () => {
@@ -202,32 +208,41 @@ function Monitor(props: { onChange: () => void }) {
         setPx(b)
         getCostTrendList.refresh()
         getCostTopList.refresh()
-    }, [getCostTopList, getCostTrendList])
+    }, [getCostTopList, getCostTrendList, trendColumns])
 
     // 处理折线图数据
     const timePickerHandle = async (values: any, formatString: [string, string]) => {
         let res = await getCostTrendList.data
-        let data: any[] = [{ legendName: '消耗' }]
-        res?.data?.forEach((item: any) => {
-            data[0][item.trendUnit] = item.costOfUnit
+        let data = trendColumns.map((field) => {
+            let value: any = {}
+            res?.data?.forEach((item: any, index: number) => {
+                if (index === 0) value.legendName = LineField[field];
+                value[item?.trend_unit] = item?.[field]
+            });
+            return value
         })
+
         if (values) {
             let date = moment().format('YYYY-MM-DD')
             let strTime = formatString[0]
             let endTime = formatString[1]
             let dateTimeStr = `${date} ${strTime}:00`
             let dateTimeEnd = `${date} ${endTime}:00`
-            let { legendName, ...otherData } = data[0]
-            let newData: any = { legendName }
-            for (const key in otherData) {
-                if (Object.prototype.hasOwnProperty.call(otherData, key)) {
-                    const value = otherData[key];
-                    if (moment(dateTimeStr) <= moment(key) && moment(key) <= moment(dateTimeEnd)) {
-                        newData[key] = value
+
+            let newData: any[] = data.map(item => {
+                let { legendName, ...otherData } = item
+                let newItem: any = { legendName }
+                for (const key in otherData) {
+                    if (Object.prototype.hasOwnProperty.call(otherData, key)) {
+                        const value = otherData[key];
+                        if (moment(dateTimeStr) <= moment(key) && moment(key) <= moment(dateTimeEnd)) {
+                            newItem[key] = value
+                        }
                     }
                 }
-            }
-            setLineDis(() => [newData])
+                return newItem
+            })
+            setLineDis(() => newData)
         } else {
             setLineDis(() => data)
         }
@@ -369,9 +384,26 @@ function Monitor(props: { onChange: () => void }) {
                                 minuteStep={5}
                                 onChange={timePickerHandle}
                             />}
+                            <Select
+                                showSearch
+                                mode='multiple'
+                                maxTagCount={1}
+                                value={trendColumns}
+                                style={{ minWidth: 130 }}
+                                allowClear
+                                placeholder="请选择图表字段"
+                                onChange={(value: string[]) => {
+                                    setTrendColumns(value?.length ? value : ['cost'])
+                                }}
+                                size="small"
+                            >
+                                {Object.keys(LineField).map((key) => <Select.Option value={key} key={key}>
+                                    {LineField[key]}
+                                </Select.Option>)}
+                            </Select>
                         </Space>
                     </div>
-                    {getCostTrendList?.loading ? <Spin /> : <LineMonitor style={{ width: '100%', height: '100%' }} series smooth data={lineDis} title={lineTitle} />}
+                    {getCostTrendList?.loading ? <Spin /> : <LineMonitor style={{ width: '100%', height: '100%' }} series smooth data={lineDis} title={trendColumns?.length > 1 ? undefined : lineTitle} />}
                 </div>
             </div>
         </Card>}
@@ -431,7 +463,7 @@ function Monitor(props: { onChange: () => void }) {
 
         {visible && <Details visible={visible} onClose={() => { setVisible(false) }} data={aId} />}
 
-        {logVisible && <RuleAccountLog accountId={accountIdRule} adgroupName={adgroupName} adgroupId={adgroupId} visible={logVisible} onClose={() => setLogVisible(false)}/>}
+        {logVisible && <RuleAccountLog accountId={accountIdRule} adgroupName={adgroupName} adgroupId={adgroupId} visible={logVisible} onClose={() => setLogVisible(false)} />}
     </Space>
 }