一波完美的修改

src/api/index.ts

@@ -397,5 +397,46 @@ export const setChannelRate = (data: {
 
 //保存自定义列
 export const setCoustomClomuns = (data: any): any => {
-  return axios.post("/ad/saveFields", {fields:data});
+  return axios.post("/ad/saveFields", { fields: data });
+};
+
+//获取组统计
+export const ALLadGroupData = (
+  query: Partial<{
+    advertiser_id: string | number;
+    campaign_id: string | number;
+    end_date: string;
+    begin_date: string;
+    cost_order: number;
+  }>
+) => {
+  return axios("/ad/adCampaignSum", { params: query });
+};
+
+//获取🐖统计
+export const ALLAcountGroupData = (
+  query: Partial<{
+    advertiser_id: string | number;
+    campaign_id: string | number;
+    begin_date: string;
+    end_date: string;
+    cost_order: number;
+  }>
+) => {
+  return axios("/ad/adAdvertiserSum", { params: query });
+};
+
+//获取广告计划汇总
+export const getadDataSum = (
+  query: Partial<{
+    advertiser_id: string | number;
+    campaign_id: string | number;
+    ad_id: number;
+    begin_date: string;
+    end_date: string;
+    cost_order: number;
+    status: number | string;
+  }>
+) => {
+  return axios("/ad/adSumData", { params: query });
 };

src/types/api.d.ts

@@ -372,3 +372,15 @@ export interface AdgroupList {
   convert_cost: number;
   convert_rate: number;
 }
+
+export interface GroupDatas {
+  cost: number;
+  show: number;
+  click: number;
+  convert: number;
+  convert_cost: number;
+  convert_rate: number;
+  avg_click_cost: number;
+  avg_show_cost: number;
+  ctr: number;
+}

src/views/_pageOptions/table-put.ts

@@ -1,3 +1,12 @@
+interface colunm {
+  title:string;
+  dataIndex:string;
+  width?:number;
+  slots?:any;
+  sorter?:any;
+  children?:Array<colunm>;
+  ellipsis?: boolean,
+}
 export const TableColumnOfPutBooks = [
   {
     title: "ID",
@@ -81,25 +90,25 @@ export const TableColumnOfPutData = [
     title: "日期",
     dataIndex: "date",
     width: 100,
-    fiexd:"left"
+    fiexd: "left",
   },
   {
     title: "公众号名称",
     dataIndex: "official_name",
     width: 150,
     ellipsis: true,
-    fiexd:"left"
+    fiexd: "left",
   },
   {
     title: "书名",
     dataIndex: "book_name",
     ellipsis: true,
-    fiexd:"left"
+    fiexd: "left",
   },
   {
     title: "消耗",
     dataIndex: "cost",
-    fiexd:"left"
+    fiexd: "left",
   },
   {
     title: "新增注册用户",
@@ -617,7 +626,7 @@ export const MatchList = [
   },
 ];
 
-export const AdgroupCloumn = [
+export const AdgroupCloumn:Array<colunm> = [
   {
     title: "",
     dataIndex: "check",
@@ -630,15 +639,21 @@ export const AdgroupCloumn = [
     title: "广告组名称",
     dataIndex: "campaign_name",
     width: 150,
-    slots: {
-      customRender: "adgroup",
-    },
+    children: [
+      {
+        title: "总计",
+        dataIndex: "campaign_name",
+        width: 100,
+        slots: {
+          customRender: "adgroup",
+        },
+      },
+    ],
   },
   {
     title: "消耗",
     dataIndex: "cost",
     width: 100,
-    sorter: true,
   },
   {
     title: "转化成本",
@@ -682,14 +697,21 @@ export const AdgroupCloumn = [
   },
 ];
 
-export const AdCoundCloumn = [
+export const AdCoundCloumn:Array<colunm>= [
   {
     title: "账户信息",
     dataIndex: "campaign_name",
     width: 200,
-    slots: {
-      customRender: "info",
-    },
+    children: [
+      {
+        title: "总计",
+        dataIndex: "campaign_name",
+        width: 200,
+        slots: {
+          customRender: "info",
+        },
+      },
+    ],
   },
   {
     title: "账户余额",
@@ -708,7 +730,6 @@ export const AdCoundCloumn = [
     title: "消耗",
     dataIndex: "cost",
     width: 100,
-    sorter: true,
   },
   {
     title: "转化成本",

src/views/put/ad-countdata.vue

@@ -15,42 +15,43 @@
         />
       </template>
     </tool-bar>
+    <template v-if="showTable">
+      <a-table
+        :columns="columns"
+        :data-source="list"
+        :pagination="tablePageOptions"
+        bordered
+        :loading="tableLoading"
+        :scroll="{ y: scrollY, x: 1000 }"
+        @change="handleTableChange"
+        rowKey="id"
+      >
+        <template #info="{ text, record }">
+          <p @click="goAdlgroup(record.advertiser_id)">
+            <a href="javascript:;">广告主名：{{ record.advertiser_name }}</a>
+          </p>
+          <p @click="goAdlgroup(record.advertiser_id)">
+            <a href="javascript:;">广告主ID：{{ record.advertiser_id }}</a>
+          </p>
+        </template>
 
-    <a-table
-      :columns="columns"
-      :data-source="list"
-      :pagination="tablePageOptions"
-      bordered
-      :scroll="{ y: 700, x: 1000 }"
-      @change="handleTableChange"
-      rowKey="id"
-    >
-      <template #info="{ text, record }">
-        <p @click="goAdlgroup(record.advertiser_id)">
-          <a href="javascript:;">广告主名：{{ record.advertiser_name }}</a>
-        </p>
-        <p @click="goAdlgroup(record.advertiser_id)">
-          <a href="javascript:;">广告主ID：{{ record.advertiser_id }}</a>
-        </p>
-      </template>
-
-      <template #budget="{ text, record }">
-        <editable-cell
-          :text="
-            record.budget_mode == 'BUDGET_MODE_INFINITE'
-              ? '不限'
-              : record.budget
-          "
-          title="预算"
-          :minValue="1000"
-          :muliteType="true"
-          customTitle="不限"
-          customValue="不限"
-          @change="(val) => onCellChange(record, 'budget', val)"
-        />
-      </template>
-    </a-table>
-  
+        <template #budget="{ text, record }">
+          <editable-cell
+            :text="
+              record.budget_mode == 'BUDGET_MODE_INFINITE'
+                ? '不限'
+                : record.budget
+            "
+            title="预算"
+            :minValue="1000"
+            :muliteType="true"
+            customTitle="不限"
+            customValue="不限"
+            @change="(val) => onCellChange(record, 'budget', val)"
+          />
+        </template>
+      </a-table>
+    </template>
   </div>
 </template>
 <script lang="ts">
@@ -60,7 +61,12 @@ import ToolBar from "@/components/tool-bar/index.vue";
 import moment from "moment";
 import useApp from "@/hooks/useApp";
 import { AdCoundCloumn } from "../_pageOptions/table-put";
-import { getAdgroupData, setGroupStatus, setGroupDay } from "@/api";
+import {
+  getAdgroupData,
+  setGroupStatus,
+  setGroupDay,
+  ALLAcountGroupData,
+} from "@/api";
 import usePagination from "@/hooks/usePagination";
 import EditableCell from "@/components/edit-cell/index.vue";
 import { AdgroupList, PageOptions } from "@/types/api";
@@ -80,9 +86,13 @@ const Adgroup = defineComponent({
       list: ref<AdgroupList[]>([]),
       rangePick: picker,
       pickered: [moment().subtract(30, "d"), moment()],
-      columns: AdCoundCloumn,
+      columns: ref<any[]>([]),
       fields: {},
+      tableLoading:false,
       cost_order: 0,
+      balance_order: 0,
+      showTable: false,
+      scrollY: 600,
     });
 
     const onSearch = (fields: Record<string, string>) => {
@@ -97,6 +107,7 @@ const Adgroup = defineComponent({
       account_id?: string;
     }) => {
       try {
+        state.tableLoading = true;
         loading.value = true;
         let [begin_dates, end_dates] = state.pickered;
         let begin_date, end_date;
@@ -104,28 +115,47 @@ const Adgroup = defineComponent({
           begin_date = moment(begin_dates).format("YYYY-MM-DD");
           end_date = moment(end_dates).format("YYYY-MM-DD");
         }
-
-        const { data } = await getAdgroupData(
-          Object.assign(
-            {
-              begin_date,
-              end_date,
-              advertiser_id: query?.advertiser_id,
-              account_id: query?.account_id,
-              page: query?.current ?? 1,
-            },
-            state.cost_order ? { cost_order: state.cost_order } : {}
-          )
+        let datas = Object.assign(
+          {
+            begin_date,
+            end_date,
+            advertiser_id: query?.advertiser_id,
+            account_id: query?.account_id,
+            page: query?.current ?? 1,
+          },
+          state.cost_order ? { cost_order: state.cost_order } : {},
+          state.balance_order ? { balance_order: state.balance_order } : {}
         );
+        const { data } = await getAdgroupData(datas);
+        const { data: totals } = await ALLAcountGroupData(datas);
+
+        let mainCloumn = AdCoundCloumn.map((r) => {
+          if (r.dataIndex != "firle" && r.dataIndex !== "campaign_name") {
+            r.children = [
+              {
+                title: totals[r.dataIndex],
+                dataIndex: r.dataIndex,
+                width: r.width,
+                ellipsis: true,
+                sorter:
+                  r.dataIndex === "cost" || r.dataIndex === "balance"
+                    ? true
+                    : false,
+              },
+            ];
+          }
+          return r;
+        });
+        state.columns = mainCloumn;
         state.list = data.list;
         meta.value = data.meta;
       } catch (error) {
         console.log("on get books list error");
       } finally {
         state.inSearching = false;
+        state.tableLoading = false;
       }
     };
-
     const setSateSwitch = (val: string, name: string) => {
       switch (val) {
         case "ascend":
@@ -138,26 +168,26 @@ const Adgroup = defineComponent({
           (state as any)[name] = 0;
       }
     };
-
     const handleTableChange = (
       pagination: PageOptions,
       filters: any,
       sorter: any
     ) => {
+      console.log(sorter.columnKey);
       if (sorter.columnKey == "cost") {
         setSateSwitch(sorter.order, "cost_order");
       }
+      if (sorter.columnKey == "balance") {
+        setSateSwitch(sorter.order, "balance_order");
+      }
       const { current, pageSize, total } = pagination;
       let data = Object.assign({ current, ...state.fields });
       getData(data);
     };
-
     const goAdlgroup = (id: string) => {
       router.push({ path: "/put/datas/group", query: { advertiser_id: id } });
     };
-
     onMounted(getData);
-
     return {
       ...toRefs(state),
       loading,
@@ -167,6 +197,12 @@ const Adgroup = defineComponent({
       goAdlgroup,
     };
   },
+  mounted() {
+    let winHeight =
+      document.documentElement.clientHeight || document.body.clientHeight;
+    this.scrollY = winHeight - 237;
+    this.showTable = true;
+  },
   methods: {
     moment,
     onCellChange(record: any, dataIndex: string, value: string) {

src/views/put/ad-group.vue

@@ -16,29 +16,30 @@
         />
       </template>
     </tool-bar>
-
-    <a-table
-      :columns="columns"
-      :data-source="list"
-      :pagination="tablePageOptions"
-      rowKey="id"
-      bordered
-       :scroll="{ x: 1300,y:700 }"
-      @change="handleTableChange"
-    >
-      <template #adgroup="{ text, record }">
-        <p @click="goAdlgroup(record.advertiser_id, record.campaign_id)">
-          <a href="javascript:;">{{ record.campaign_name }} </a>
-        </p>
-      </template>
-      <template #switch="{ text, record }">
-        <a-switch
-          v-model:checked="record.is_enable"
-          @change="switchMethod(record)"
-        />
-      </template>
-    </a-table>
- 
+    <template v-if="showTable">
+      <a-table
+        :columns="columns"
+        :data-source="list"
+        :pagination="tablePageOptions"
+        rowKey="id"
+        bordered
+        :loading="tableLoading"
+        :scroll="{ x: 1300, y: scrollY }"
+        @change="handleTableChange"
+      >
+        <template #adgroup="{ text, record }">
+          <p @click="goAdlgroup(record.advertiser_id, record.campaign_id)">
+            <a href="javascript:;">{{ record.campaign_name }} </a>
+          </p>
+        </template>
+        <template #switch="{ text, record }">
+          <a-switch
+            v-model:checked="record.is_enable"
+            @change="switchMethod(record)"
+          />
+        </template>
+      </a-table>
+    </template>
   </div>
 </template>
 <script lang="ts">
@@ -48,10 +49,10 @@ import ToolBar from "@/components/tool-bar/index.vue";
 import moment from "moment";
 import { AdgroupCloumn } from "../_pageOptions/table-put";
 import useApp from "@/hooks/useApp";
-import { getAdgroupList, setGroupStatus } from "@/api";
+import { getAdgroupList, setGroupStatus, ALLadGroupData } from "@/api";
 import usePagination from "@/hooks/usePagination";
 
-import { AdGroupData, PageOptions } from "@/types/api";
+import { AdGroupData, PageOptions, GroupDatas } from "@/types/api";
 
 const Adgroup = defineComponent({
   components: {
@@ -65,12 +66,15 @@ const Adgroup = defineComponent({
       inSearching: false,
       open: false,
       inConfirm: false,
-      list: ref<AdGroupData[]>([]),
+      list: ref<any[]>([]),
       rangePick: picker,
       cost_order: 0,
+      showTable: false,
+      scrollY: 600,
       pickered: [moment().subtract(30, "d"), moment()],
-      columns: AdgroupCloumn,
+      columns: ref<any[]>([]),
       fields: {},
+      tableLoading:false,
       defaultToolvalue: {},
     });
     if (route.query && route.query.advertiser_id) {
@@ -81,6 +85,7 @@ const Adgroup = defineComponent({
         advertiser_id: route.query.advertiser_id as string,
       };
     }
+
     const onSearch = (fields: Record<string, string>) => {
       const { advertiser_id, campaign_id } = fields;
       state.fields = fields;
@@ -93,6 +98,7 @@ const Adgroup = defineComponent({
       campaign_id?: string;
     }) => {
       try {
+        state.tableLoading = true;
         loading.value = true;
         let [begin_dates, end_dates] = state.pickered;
         let begin_date, end_date;
@@ -100,32 +106,52 @@ const Adgroup = defineComponent({
           begin_date = moment(begin_dates).format("YYYY-MM-DD");
           end_date = moment(end_dates).format("YYYY-MM-DD");
         }
-        console.log(state.cost_order);
-        const { data } = await getAdgroupList(
-          Object.assign(
-            {
-              begin_date,
-              end_date,
-              advertiser_id: query?.advertiser_id,
-              campaign_id: query?.campaign_id,
-              page: query?.current ?? 1,
-            },
-            state.cost_order ? { cost_order: state.cost_order } : {}
-          )
+
+        let datas = Object.assign(
+          {
+            begin_date,
+            end_date,
+            advertiser_id: query?.advertiser_id,
+            campaign_id: query?.campaign_id,
+            page: query?.current ?? 1,
+          },
+          state.cost_order ? { cost_order: state.cost_order } : {}
         );
+        const { data } = await getAdgroupList(datas);
+        const { data: totals } = await ALLadGroupData(datas);
+
         let mewList = data.list.map((item) => {
           typeof item.is_enable;
           item.is_enable = !!item.is_enable;
           return item;
         });
+
+        let mainCloumn = AdgroupCloumn.map((r) => {
+          if (r.dataIndex != "check" && r.dataIndex !== "campaign_name") {
+            r.children = [
+              {
+                title: totals[r.dataIndex],
+                dataIndex: r.dataIndex,
+                width: r.width,
+                sorter: r.dataIndex == "cost" ? true : false,
+                ellipsis: true,
+              },
+            ];
+          }
+          return r;
+        });
+        state.columns = mainCloumn;
         state.list = mewList;
         meta.value = data.meta;
+        state.tableLoading = false;
       } catch (error) {
         console.log("on get books list error");
       } finally {
         state.inSearching = false;
+        state.tableLoading = false;
       }
     };
+
     const setSateSwitch = (val: string, name: string) => {
       switch (val) {
         case "ascend":
@@ -158,7 +184,6 @@ const Adgroup = defineComponent({
         current: 1,
       });
     });
-
     const goAdlgroup = (id: string, campaign_id: string) => {
       router.push({
         path: "/put/datas/ad-plan",
@@ -174,6 +199,12 @@ const Adgroup = defineComponent({
       goAdlgroup,
     };
   },
+  mounted() {
+    let winHeight =
+      document.documentElement.clientHeight || document.body.clientHeight;
+    this.scrollY = winHeight - 237;
+    this.showTable = true;
+  },
   methods: {
     moment,
     switchMethod(record: any) {

src/views/put/put-ad-account.vue

@@ -39,8 +39,7 @@ const PutAdAccount = defineComponent({
   components: {
     ToolBar,
   },
-  setup(a,b) {
-    console.log(a,b)
+  setup() {
     let { loading, meta, tablePageOptions } = usePagination();
     const state = reactive({
       list: ref<ADpushSimple[]>([]),

src/views/put/put-ad-plan.vue

@@ -57,11 +57,11 @@
         :columns="columns"
         :data-source="list"
         :pagination="tablePageOptions"
-        :loading="loading.value"
+        :loading="tableLoading"
         @change="handleTableChange"
         rowKey="id"
         bordered
-        :scroll="{ x: 'max-content', y: scrollY }"
+        :scroll="{ x: 3000, y: scrollY }"
       >
         <template #switch="{ text, record }">
           <a-switch
@@ -294,6 +294,7 @@ import {
   getAdBackPlan,
   setBackConfig,
   getAdStatus,
+  getadDataSum,
 } from "@/api";
 
 import { ADPlanItem, PageOptions, PlanBack } from "@/types/api";
@@ -328,12 +329,13 @@ const PutAdPlan = defineComponent({
       innerClomuns: ref<any[]>([]),
       lineVisable: false,
       defaultToolvalue: {},
-      scrollY:600,
+      tableLoading:false,
+      scrollY: 600,
       visible: false,
       popconfirmShow: false,
       showPop: false,
       visible1: false,
-      showTable:false,
+      showTable: false,
       registerVisable: false,
       columnShow: false,
       register: {
@@ -412,12 +414,13 @@ const PutAdPlan = defineComponent({
       onSearch(state.fields);
     };
 
-    const getData = (query?: any) => {
+    const getData = async (query?: any) => {
+      state.tableLoading = true;
       const { pickerFilter } = state;
       let [begin_dates, end_dates] = pickerFilter;
       let begin_date = moment(begin_dates).format("YYYY-MM-DD");
       let end_date = moment(end_dates).format("YYYY-MM-DD");
-      let data = Object.assign(
+      let datas = Object.assign(
         {
           page: 1,
           status: "AD_STATUS_DELIVERY_OK",
@@ -427,17 +430,47 @@ const PutAdPlan = defineComponent({
         { begin_date, end_date, status: state.currentSelect },
         state.cost_order ? { cost_order: state.cost_order } : {}
       );
-      getADPlanlist(data).then((res) => {
-        let newList: any[] = res.data.list.map((item) => {
-          item.enable = item.is_enable == 1 ? true : false;
-          item.popShow = false;
-          return item;
-        });
-        state.list = newList;
-        meta.value = res.data.meta;
-        state.inSearching = false;
+      const { data } = await getADPlanlist(datas);
+      const { data: taotals } = await getadDataSum(datas);
+      let newList: any[] = data.list.map((item) => {
+        item.enable = item.is_enable == 1 ? true : false;
+        item.popShow = false;
+        return item;
+      });
+      let columns = state.columns.map((r) => {
+        if (r.dataIndex === "ad_name") {
+          r.children = [
+            {
+              title: "总计",
+              dataIndex: "ad_name",
+              slots: {
+                customRender: "ad_name",
+              },
+              width: r.width,
+              ellipsis: true,
+            },
+          ];
+        }
+        if (Object.keys(taotals).includes(r.dataIndex)) {
+          r.children = [
+            {
+              title: taotals[r.dataIndex],
+              dataIndex: r.dataIndex,
+              width: r.width,
+              ellipsis: true,
+              sorter: r.dataIndex === "cost" ? true : false,
+            },
+          ];
+        }
+        return r;
       });
+      state.columns = columns;
+      state.list = newList;
+      meta.value = data.meta;
+      state.inSearching = false;
+      state.tableLoading = false;
     };
+
     getAdStatus().then((res) => {
       state.statsList = res.data;
     });
@@ -471,10 +504,11 @@ const PutAdPlan = defineComponent({
             width?: string | number;
             sorter?: boolean;
             ellipsis?: boolean;
+            children?: any;
           } = {
             title: item.desc,
             dataIndex: item.name,
-            width: item.width || 95,
+            width: item.width?item.width : 95,
             ellipsis: true,
           };
 
@@ -486,12 +520,9 @@ const PutAdPlan = defineComponent({
             lolumnItem.slots = { customRender: item.name };
             lolumnItem.width = 130;
           }
-          if (item.name == "cost") {
-            lolumnItem.sorter = true;
-            //  lolumnItem.width = 9;
-          }
           if (item.name == "budget") {
-            delete lolumnItem.width;
+            lolumnItem.slots = { customRender: item.name };
+            console.log(lolumnItem)
           }
           if (extendList.includes(item.name)) {
             state.innerClomuns.push(lolumnItem);
@@ -503,8 +534,6 @@ const PutAdPlan = defineComponent({
 
       let newColunms = columns.filter(
         (item) => !blackList.includes(item.dataIndex)
-        /* !blackList.includes(item.dataIndex) &&
-          !extendList.includes(item.dataIndex) */
       );
 
       state.columns = [];
@@ -560,10 +589,9 @@ const PutAdPlan = defineComponent({
     return { ...toRefs(state), handleTableChange, onSearch, switchDate };
   },
   mounted() {
-    console.log( document.querySelector('.ant-table-wrapper')?.getBoundingClientRect())
-    let winHeight = document.documentElement.clientHeight || document.body.clientHeight;
+    let winHeight =
+      document.documentElement.clientHeight || document.body.clientHeight;
     this.scrollY = winHeight - 352;
-    console.log(this.scrollY);
     this.showTable = true;
   },
   methods: {