推广计划 & 广告 总计 、 自定义表头

src/common/common.ts

     return formatNum((num + '').indexOf('.') != -1 ? parseFloat(Number(num).toFixed(digit)) : num);
 }
 
-
+export const getCurrentTime = ()=>{
+    var today = new Date();
+    var hours = today.getHours();
+    var minutes = today.getMinutes(); //分
+    var seconds = today.getSeconds(); //秒
+    return hours + ':' + fillZero(minutes) + ':' + fillZero(seconds)
+}
 
 export const getDay = (day:number, haveHours?:boolean)=>{
     //day为0表示今天的日期   -1为昨天   haveHours存在表示要时分秒 haveHours:true,false

src/components/businessMoudle/gdtList/advert.vue

       <el-button class="lMarauto" type="primary" @click="goNewPlanEvent">新建计划</el-button>
     </div>
 
-    <div>
+    <div  v-loading="loading">
       <div class="bMar10 flex">
-  <!--
         <Dropdown title="批量操作" :list="tableInfo.moreList" @close="dropdownEvent" class="rMar10"
                   :disabledFlag="tableInfo.multipleSelection&&tableInfo.multipleSelection.length == 0"></Dropdown>
-      -->
-
         <div>已选 : <span>{{tableInfo.multipleSelection&&tableInfo.multipleSelection.length}}</span></div>
         <div  class="lMarauto">
-          <Indicators type="campaign_base" @refresh="IndicatorsRefreshList"></Indicators>
+          <Indicators type="campaign_base" @refresh="init"></Indicators>
         </div>
       </div>
 
-      <el-table v-loading="loading" ref="tableRef" :data="tableInfo.tableList"
-                :header-cell-style="tableHeaderStyle"
-                :key="tableInfo.updateKey" style="width: 100%"
-                border empty-text="暂无数据"
-                row-key="adgroup_id"
-                max-height="calc(100vh - 294px)">
-        <el-table-column fixed width="80" >
-          <template #header>
-            <div class="flex">
-              <el-checkbox v-model="tableInfo.chooseAll" @change="allChooseCheckboxEvent"></el-checkbox>
-              <el-dropdown class="lMar10" @command="handleCommandChoosePage">
-                <el-icon color="#3173FF"><i-ep-ArrowDownBold /></el-icon>
-                <template #dropdown>
-                  <el-dropdown-menu>
-                    <el-dropdown-item command="1">当前页</el-dropdown-item>
-                    <el-dropdown-item command="2">全部</el-dropdown-item>
-                  </el-dropdown-menu>
-                </template>
-              </el-dropdown>
-            </div>
-          </template>
-          <template #default="scope">
-            <div class="checkBoxSelf flex"
-                 @click="singleChooseCheckboxEvent(tableInfo.multipleSelection.findIndex(n=>n.adgroup_id == scope.row.adgroup_id),scope.row)"
-                 :class="tableInfo.multipleSelection.findIndex(n=>n.adgroup_id == scope.row.adgroup_id)>=0 ? 'active' : ''">
-              <el-icon color="#fff" v-if="tableInfo.multipleSelection.findIndex(n=>n.adgroup_id == scope.row.adgroup_id)>=0"><i-ep-Check /></el-icon>
-            </div>
-          </template>
-        </el-table-column>
-        <template v-for="item in tableInfo.descol">
-          <el-table-column :fixed="item.isfixed" :min-width="item.minWidth ? item.minWidth : '80px'">
+      <div class="noDataBcg" v-if="Number(tableInfo.total) == 0">
+        <noData></noData>
+      </div>
+      <template v-else>
+        <el-table ref="tableRef" :data="tableInfo.tableList"
+                  :header-cell-style="tableHeaderStyle"
+                  :key="tableInfo.updateKey" style="width: 100%"
+                  border empty-text="暂无数据"
+                  row-key="adgroup_id"
+                  max-height="calc(100vh - 294px)">
+          <el-table-column fixed width="80" >
             <template #header>
-              <div class="flex"
-                   :style="{ justifyContent: item.alignSelf ? item.alignSelf : 'center' }"
-                   :class="[tableInfo.sortKey == item.column ? 'active_css' : '',item.isSort ? 'pointer' : '']"
-                   @click="item.isSort&&sortEvent(item.column)">
-                {{ item.name }}
-                <el-tooltip v-if="item.notes" effect="dark" :content="item.notes"><i-ep-QuestionFilled class="lMar5 c-999 f14 pointer" /></el-tooltip>
-                <div v-if="item.isSort">
-                  <div class="sortItem"><el-icon :color="tableInfo.sortKey == item.column ? '#3173FF' : ''"><i-ep-CaretBottom /></el-icon></div>
-                </div>
+              <div class="flex">
+                <el-checkbox v-model="tableInfo.chooseAll" @change="allChooseCheckboxEvent"></el-checkbox>
+                <el-dropdown class="lMar10" @command="handleCommandChoosePage">
+                  <el-icon color="#3173FF"><i-ep-ArrowDownBold /></el-icon>
+                  <template #dropdown>
+                    <el-dropdown-menu>
+                      <el-dropdown-item command="1">当前页</el-dropdown-item>
+                      <el-dropdown-item command="2">全部</el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
               </div>
             </template>
             <template #default="scope">
-              <div class="flex" :style="{ justifyContent: item.alignSelf ? item.alignSelf : 'center' }">
-
-                <div v-if="item.column == 'campaign_name'">
-                <span class="c-theme flex campaignName">
-                  <span class="pointer">{{scope.row[item.column]}}</span>
-                  <el-icon color="#3173FF" class="pointer lMarauto f16 icon" @click="edit_campaign_name_event(scope.row)"><i-ep-Edit /></el-icon>
-                </span>
-                </div>
-                <div v-else-if="item.column == 'configured_status'">
-                  <span class="c-green" v-if="scope.row[item.column] == 'AD_STATUS_NORMAL'">正常</span>
-                  <span class="c-red" v-else-if="scope.row[item.column] == 'AD_STATUS_SUSPEND'">暂停</span>
-                  <span v-else>-</span>
-                </div>
-                <div v-else-if="item.column == 'speed_mode'">
-                  <span v-if="scope.row[item.column] == 'SPEED_MODE_STANDARD'">标准投</span>
-                  <span v-else-if="scope.row[item.column] == 'SPEED_MODE_FAST'">加速投放</span>
-                  <span v-else>-</span>
-                </div>
-                <div v-else-if="item.column == 'operate'">
-                  <div class="flex">
-                    <span class="c-theme pointer" @click="copyEvent(scope.row)">复制</span>
-                    <span class="c-theme pointer lMar10" @click="goDetial(scope.row)">详情</span>
-                  </div>
-                </div>
-                <div class="flex c-theme pointer" v-else-if="item.column == 'daily_budget'" @click="editPlanEvent(scope.row)">
-                  {{scope.row[item.column] ? NumberHandle(scope.row[item.column]) : '不限'}}
-                </div>
-                <div class="flex c-theme pointer" v-else-if="item.column == 'site_set'">
-                  {{scope.row[item.column]}}
-<!--                  {{siteIdtoText(scope.row[item.column])}}-->
-                </div>
-
-
-                <div class="cellDiv" :class="tableInfo.sortKey == item.column ? 'active_css' : ''" v-else>
-                  <el-tooltip :disabled="!(scope.row[item.column] && scope.row[item.column].length >30)" effect="dark" :content="scope.row[item.column]+''">
-                    <div class="clampTwo line21" style="flex: 1">
-                      {{ scope.row[item.column] || scope.row[item.column]==0 ?
-                        (item.cancleForMat ? (scope.row[item.column] ? scope.row[item.column] : '-') : NumberHandle(scope.row[item.column])) : '-'}}
-                      <span v-if="item.hasPercent&&(scope.row[item.column] || scope.row[item.column] ==0)">%</span>
-                    </div>
-                  </el-tooltip>
-                </div>
+              <div class="checkBoxSelf flex"
+                   @click="singleChooseCheckboxEvent(tableInfo.multipleSelection.findIndex(n=>n.adgroup_id == scope.row.adgroup_id),scope.row)"
+                   :class="tableInfo.multipleSelection.findIndex(n=>n.adgroup_id == scope.row.adgroup_id)>=0 ? 'active' : ''">
+                <el-icon color="#fff" v-if="tableInfo.multipleSelection.findIndex(n=>n.adgroup_id == scope.row.adgroup_id)>=0"><i-ep-Check /></el-icon>
               </div>
             </template>
           </el-table-column>
-        </template>
-      </el-table>
-
-      <div class="paginationBox flex" style="justify-content: center" v-if="Number(tableInfo.total) > 0">
-        <el-pagination
-            v-model:currentPage="tableInfo.currentPage"
-            v-model:page-size="tableInfo.pageSize"
-            background
-            :total="tableInfo.total"
-            @current-change="handleCurrentChange" />
-      </div>
+          <template v-for="bigItem in tableInfo.descol">
+            <el-table-column>
+              <template #header>
+                <div class="flex" style="justify-content:center"
+                     :class="[tableInfo.sortKey == bigItem.key_value ? 'active_css' : '']">
+                  <span :style="{color:tableInfo.sortKey == bigItem.key_value ? '#3173FF' : ''}">{{ bigItem.label }}</span>
+                  <el-tooltip v-if="bigItem.tooltip" effect="dark" :content="bigItem.tooltip"><i-ep-QuestionFilled class="lMar5 c-999 f12 pointer" /></el-tooltip>
+                  <div v-if="bigItem.if_sort == 1" class="sortBox lMar5">
+                    <div class="sortItem" @click="sortEvent(bigItem.key_value,'desc')">
+                      <el-icon :color="(tableInfo.sortType == 'desc' && tableInfo.sortKey == bigItem.key_value) ? '#3173FF' : ''"><i-ep-CaretTop /></el-icon>
+                    </div>
+                    <div class="sortItem" @click="sortEvent(bigItem.key_value,'asc')">
+                      <el-icon :color="(tableInfo.sortType == 'asc' && tableInfo.sortKey == bigItem.key_value) ? '#3173FF' : ''"><i-ep-CaretBottom /></el-icon>
+                    </div>
+                  </div>
+                </div>
+              </template>
+
+              <template v-for="item in bigItem.sub">
+                <el-table-column :label="item.label"  :fixed="item.disabled == 1"
+                                 :min-width="bigItem.key_value == 'adgroup_name' ? '200px' :
+                               (bigItem.label.length <= 4 ? '100px' : bigItem.label.length <= 8 ? '150px' : '200px')">
+
+                  <template #default="scope">
+                    <div class="flex" style="justify-content:center"  :style="{color:tableInfo.sortKey == item.key_value ? '#3173FF' : ''}">
+                      <div v-if="item.key_value == 'configured_status'">
+                        <span class="c-green" v-if="scope.row[item.key_value] == 'AD_STATUS_NORMAL'">正常</span>
+                        <span class="c-red" v-else-if="scope.row[item.key_value] == 'AD_STATUS_SUSPEND'">暂停</span>
+                        <span v-else>-</span>
+                      </div>
+                      <div v-else-if="item.key_value == 'speed_mode'">
+                        <span v-if="scope.row[item.key_value] == 'SPEED_MODE_STANDARD'">标准投</span>
+                        <span v-else-if="scope.row[item.key_value] == 'SPEED_MODE_FAST'">加速投放</span>
+                        <span v-else>-</span>
+                      </div>
+                      <div v-else-if="item.key_value == 'operate'">
+                        <div class="flex">
+                          <span class="c-theme pointer" @click="copyEvent(scope.row)">复制</span>
+                          <span class="c-theme pointer lMar10" @click="goDetial(scope.row)">详情</span>
+                        </div>
+                      </div>
+                      <div class="flex c-theme pointer" v-else-if="item.key_value == 'daily_budget'" @click="editPlanEvent(scope.row)">
+                        {{scope.row[item.key_value] ? NumberHandle(scope.row[item.key_value]) : '不限'}}
+                      </div>
+                      <div class="flex c-theme pointer" v-else-if="item.key_value == 'site_set'">
+                        {{scope.row[item.key_value]}}
+                        <!--                  {{siteIdtoText(scope.row[item.key_value])}}-->
+                      </div>
+
+
+                      <div class="cellDiv" :class="tableInfo.sortKey == item.key_value ? 'active_css' : ''" v-else>
+                        <el-tooltip :disabled="!(scope.row[item.key_value] && scope.row[item.key_value].length >30)" effect="dark" :content="scope.row[item.key_value]+''">
+                          <div class="clampTwo line21" style="flex: 1">
+                            {{ scope.row[item.key_value] || scope.row[item.key_value]==0 ?
+                              (item.cancleForMat ? (scope.row[item.key_value] ? scope.row[item.key_value] : '-') : NumberHandle(scope.row[item.key_value])) : '-'}}
+                            <span v-if="item.hasPercent&&(scope.row[item.key_value] || scope.row[item.key_value] ==0)">%</span>
+                          </div>
+                        </el-tooltip>
+                      </div>
+                    </div>
+                  </template>
+                </el-table-column>
+              </template>
+            </el-table-column>
+          </template>
+        </el-table>
+
+        <div class="paginationBox flex" style="justify-content: center" v-if="Number(tableInfo.total) > 0">
+          <el-pagination
+              v-model:currentPage="tableInfo.currentPage"
+              v-model:page-size="tableInfo.pageSize"
+              background
+              :total="tableInfo.total"
+              @current-change="handleCurrentChange" />
+        </div>
+      </template>
     </div>
 
     <EditIpt ref="planEditIptRef" title="推广计划" @confirm="planEditConfirm"></EditIpt>
 import { batchGdt_list, reactiveTableAndAny} from "@/api/ApiModel";
 import Indicators from './indicators/index.vue'
 import {commonlistTs} from "@/components/businessMoudle/ts/commonList";
+import {getCurrentTime} from "@/common/common";
+import _ from "lodash";
 
 
 const { proxy } = getCurrentInstance() as any;
 const tableInfo = reactive<reactiveTableAndAny>({
   tableList:[],
   tableList_all:[],
-  descol:[
-    { name:'广告',column:'adgroup_name',slotFlag: true,isfixed:true,alignSelf:'left'},
-    { name:'操作',column:'operate',slotFlag: true,isfixed:true},
-    { name:'账号ID',column:'account_id',cancleForMat:true},
-    { name:'日预算(元)',column:'daily_budget',slotFlag: true},
-    { name:'状态',column:'configured_status',slotFlag: true},
-    { name:'创建时间',column:'created_time',cancleForMat:true},
-    { name:'更新时间',column:'last_modified_time'},
-    { name:'托管状态',column:'promoted_object_type'},
-    { name:'推广日期',column:'begin_date'},
-    { name:'投放时间',column:'time_series',cancleForMat:true},
-    { name:'出价方式',column:'bid_amount'},
-    { name:'优化目标',column:'optimization_goal'},
-    { name:'版位',column:'site_set'},
-  ],
+  descol:[],
   multipleSelection:[],
   updateKey:1,
   chooseAll:false,
-  sortKey:'',
   moreList:[
     {value:'1',label:'启用'},
-    {value:'2',label:'暂停'},
+    {value:'2',label:'禁用'},
     {value:'3',label:'删除'},
+    {value:'4',label:'修改日预算'},
+    {value:'5',label:'修改出价'},
+    {value:'6',label:'深度优化出价'},
+    {value:'7',label:'期望roi'},
+    {value:'8',label:'推广日期'},
+    {value:'9',label:'投放时段'},
+    {value:'10',label:'开启一键起量'},
+    {value:'11',label:'暂停一键起量'},
   ],
   currentPage:1,
   pageSize:20,
   total:0,
   totalPages:0,//共多少页
+  summary:[],
+  sortKey:'',
+  sortType:'',
 })
 
+const dropdownEvent = (val: string | number | object) => {
+  // loading.value = true
+  // let arr:any = []
+  // tableInfo.multipleSelection.forEach(item=>{
+  //   arr.push({
+  //     account_id:item.account_id,
+  //     campaign_id:item.campaign_id
+  //   })
+  // })
+  // batchPlanApi(arr,val)
+}
+
 //复制
 const copyEvent = (row:any) => {
 
   })
 }
 //修改计划名称
-const edit_campaign_name_event = (row:any) => {
-  nextTick(()=>{
-    planEditIptRef.value!.switchShow(true,row.campaign_name)
-  })
-}
 //推广计划 - 确定
 const planEditConfirm = () => {
 
 
 
 //排序
-const sortEvent = (row:any) => {
-
+const sortEvent = (sortKey,sortType) => {
+  tableInfo.sortKey = sortKey
+  tableInfo.sortType = sortType
+  init()
 }
 
 //列表
 const init = async (page?:any,totalPages?:any) => {
-  console.log(props.campaign_id,'props.campaign_id');
   loading.value = true
   const paramsModel = reactive<batchGdt_list>({
     account_ids:acRef.value!.value,
     page:page?page:1,
     pageSize:totalPages ? totalPages : tableInfo.pageSize
   })
+  if(tableInfo.sortKey){
+    paramsModel['field'] = tableInfo.sortKey
+    paramsModel['order'] = tableInfo.sortType
+  }
   let res:any = await proxy.$http.get(Api.batchGdt_advert_list,paramsModel)
   loading.value = false
   if(res&&res.errNo=='0'){
+    tableInfo.updateKey++
     if(totalPages){
       tableInfo.tableList_all = res.rst.data.list
     }else{
-      tableInfo.tableList = res.rst.data.list
       tableInfo.total = res.rst.pageInfo.total
       tableInfo.totalPages = res.rst.pageInfo.total
+      if(!res.rst.data){
+        tableInfo.tableList = []
+        return
+      }
+      tableInfo.summary = res.rst.data.summary
+      tableInfo.summary[0].adgroup_name = '合计(缓存时间:' + getCurrentTime() + ')'
+      tableInfo.descol = []
+      res.rst.data.explain.forEach(ex=>{
+        ex.sub = []
+        let subObj:any = _.cloneDeep(ex)
+        subObj.label = tableInfo.summary[0][ex.key_value] || ''
+        ex.sub.push(subObj)
+      })
+      tableInfo.descol = res.rst.data.explain;
+      tableInfo.descol.splice(1,0,{label:'操作',key_value:'operate',disabled:1,sub:[{label:'',key_value:'operate',disabled:1}]})
+      tableInfo.tableList = res.rst.data.list
     }
   }else{
     ElMessage.error(res.errMsg)
   }
 }
 
-const IndicatorsRefreshList = () => {
-  //这里刷新列表
-}
-
 
 const {
   init_acList,
   clearEvent,
   tableHeaderStyle,
   planEditIptRef,
-  TargetEditRef
+  TargetEditRef,
+  init_ad_statusList
 } = listTs()
 
 
 const initAll = () => {
   nextTick(async ()=>{
     await init_acList()
-    await get_siteSet_list()
+    // await get_siteSet_list()
     await init()
+    init_ad_statusList()
   })
 }
 
 })
 </script>
 <style lang="scss" scoped>
-.campaignName{
-  .icon{
-    color: #3173FF;
-    opacity: 0;
-  }
-  &:hover{
-    .icon{
-      opacity: 1;
-    }
-  }
-}
-.checkBoxSelf{
-  width: 13px;
-  height: 13px;
-  border: 1px solid #d9d9d9;
-  border-radius: 2px;
-  &:hover{
-    cursor: pointer;
-    border: 1px solid #3173FF;
-  }
-  &.active{
-    border: 1px solid #3173FF;
-    background-color: #3173FF;
-  }
-}
+@import "./index.scss";
 </style>

src/components/businessMoudle/gdtList/index.scss

+.campaignName{
+  .icon{
+    color: #3173FF;
+    opacity: 0;
+  }
+  &:hover{
+    .icon{
+      opacity: 1;
+    }
+  }
+}
+.checkBoxSelf{
+  width: 13px;
+  height: 13px;
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+  &:hover{
+    cursor: pointer;
+    border: 1px solid #3173FF;
+  }
+  &.active{
+    border: 1px solid #3173FF;
+    background-color: #3173FF;
+  }
+}
+.sortBox{
+  height: 16px;
+  margin-left: 2px;
+  margin-top: -4px;
+  .sortItem{
+    width: 8px;
+    height: 8px;
+    line-height: 8px;
+    cursor: pointer;
+    color: #999;
+  }
+}
+.noDataBcg{
+  height: 500px;
+  width: 100%;
+  background-color: #fff;
+  padding-top: 80px;
+}

src/components/businessMoudle/gdtList/index.vue

 
 // 类型切换公共ts
 const typeListParams = reactive([
-    {name:'媒体账户',key:'account'},
+  {name:'媒体账户',key:'account'},
   {name:'推广计划',key:'plan'},
   {name:'广告',key:'advert'},
 ])
 const advertRef = ref<{initAll:()=>void}>()
 //去广告栏
 const goAdvert = (campaign_id:any) => {
-  switchTypeItem(typeList.list[1])
+  let arr:any = typeList.list.filter(n=>{
+    return n.key == 'advert'
+  })
+  switchTypeItem(arr[0])
   pageInfo.campaign_id = campaign_id
   nextTick(()=>{
     advertRef.value!.initAll()

src/components/businessMoudle/gdtList/plan.vue

       <span class="pointer c-theme lMar10" @click="clearEvent">清空</span>
       <el-button class="lMarauto" type="primary" @click="goNewPlanEvent">新建计划</el-button>
     </div>
-    <div>
+    <div v-loading="loading">
       <div class="bMar10 flex">
         <Dropdown title="批量操作" :list="tableInfo.moreList" @close="dropdownEvent" class="rMar10"
                   :disabledFlag="tableInfo.multipleSelection&&tableInfo.multipleSelection.length == 0"></Dropdown>
         <div>已选 : <span>{{tableInfo.multipleSelection&&tableInfo.multipleSelection.length}}</span></div>
-<!--        <el-button class="lMarauto" type="primary" @click="customIndEvent">自定义指标</el-button>-->
-
         <div  class="lMarauto">
-          <Indicators type="campaign_base" @refresh="IndicatorsRefreshList"></Indicators>
+          <Indicators type="campaign_base" @refresh="init()"></Indicators>
         </div>
       </div>
-
-      <el-table v-loading="loading" ref="tableRef" :data="tableInfo.tableList"
-                :header-cell-style="tableHeaderStyle"
-                :key="tableInfo.updateKey" style="width: 100%"
-                border empty-text="暂无数据"
-                row-key="campaign_id"
-                max-height="calc(100vh - 294px)">
-        <el-table-column fixed width="80" >
-          <template #header>
-            <div class="flex">
-              <el-checkbox v-model="tableInfo.chooseAll" @change="allChooseCheckboxEvent"></el-checkbox>
-              <el-dropdown class="lMar10" @command="handleCommandChoosePage">
-                <el-icon color="#3173FF"><i-ep-ArrowDownBold /></el-icon>
-                <template #dropdown>
-                  <el-dropdown-menu>
-                    <el-dropdown-item command="1">当前页</el-dropdown-item>
-                    <el-dropdown-item command="2">全部</el-dropdown-item>
-                  </el-dropdown-menu>
-                </template>
-              </el-dropdown>
-            </div>
-          </template>
-          <template #default="scope">
-            <div class="checkBoxSelf flex"
-                 @click="singleChooseCheckboxEvent(tableInfo.multipleSelection.findIndex(n=>n.campaign_id == scope.row.campaign_id),scope.row)"
-                 :class="tableInfo.multipleSelection.findIndex(n=>n.campaign_id == scope.row.campaign_id)>=0 ? 'active' : ''">
-              <el-icon color="#fff" v-if="tableInfo.multipleSelection.findIndex(n=>n.campaign_id == scope.row.campaign_id)>=0"><i-ep-Check /></el-icon>
-            </div>
-          </template>
-        </el-table-column>
-        <template v-for="item in tableInfo.descol">
-          <el-table-column :fixed="item.isfixed" :min-width="item.minWidth ? item.minWidth : '80px'">
+      <div class="noDataBcg" v-if="Number(tableInfo.total) == 0">
+        <noData></noData>
+      </div>
+      <template v-else>
+        <el-table ref="tableRef" :data="tableInfo.tableList"
+                  :header-cell-style="tableHeaderStyle"
+                  :key="tableInfo.updateKey" style="width: 100%"
+                  border empty-text="暂无数据"
+                  row-key="campaign_id"
+                  max-height="calc(100vh - 294px)">
+          <el-table-column fixed width="80" >
             <template #header>
-              <div class="flex"
-                   :style="{ justifyContent: item.alignSelf ? item.alignSelf : 'center' }"
-                   :class="[tableInfo.sortKey == item.column ? 'active_css' : '',item.isSort ? 'pointer' : '']"
-                   @click="item.isSort&&sortEvent(item.column)">
-                {{ item.name }}
-                <el-tooltip v-if="item.notes" effect="dark" :content="item.notes"><i-ep-QuestionFilled class="lMar5 c-999 f14 pointer" /></el-tooltip>
-                <div v-if="item.isSort">
-                  <div class="sortItem"><el-icon :color="tableInfo.sortKey == item.column ? '#3173FF' : ''"><i-ep-CaretBottom /></el-icon></div>
-                </div>
+              <div class="flex">
+                <el-checkbox v-model="tableInfo.chooseAll" @change="allChooseCheckboxEvent"></el-checkbox>
+                <el-dropdown class="lMar10" @command="handleCommandChoosePage">
+                  <el-icon color="#3173FF"><i-ep-ArrowDownBold /></el-icon>
+                  <template #dropdown>
+                    <el-dropdown-menu>
+                      <el-dropdown-item command="1">当前页</el-dropdown-item>
+                      <el-dropdown-item command="2">全部</el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
               </div>
             </template>
             <template #default="scope">
-              <div class="flex" :style="{ justifyContent: item.alignSelf ? item.alignSelf : 'center' }">
-
-              <div v-if="item.column == 'campaign_name'">
-                <span class="c-theme flex campaignName">
-                  <span class="pointer" @click="goAdvertEvent(scope.row.campaign_id)">{{scope.row[item.column]}}</span>
-                  <el-icon color="#3173FF" class="pointer lMarauto f16 icon" @click="edit_campaign_name_event(scope.row)"><i-ep-Edit /></el-icon>
-                </span>
-              </div>
-              <div v-else-if="item.column == 'configured_status'">
-                <span class="c-green" v-if="scope.row[item.column] == 'AD_STATUS_NORMAL'">正常</span>
-                <span class="c-red" v-else-if="scope.row[item.column] == 'AD_STATUS_SUSPEND'">暂停</span>
-                <span v-else>-</span>
+              <div class="checkBoxSelf flex"
+                   @click="singleChooseCheckboxEvent(tableInfo.multipleSelection.findIndex(n=>n.campaign_id == scope.row.campaign_id),scope.row)"
+                   :class="tableInfo.multipleSelection.findIndex(n=>n.campaign_id == scope.row.campaign_id)>=0 ? 'active' : ''">
+                <el-icon color="#fff" v-if="tableInfo.multipleSelection.findIndex(n=>n.campaign_id == scope.row.campaign_id)>=0"><i-ep-Check /></el-icon>
               </div>
-              <div v-else-if="item.column == 'speed_mode'">
-                <span v-if="scope.row[item.column] == 'SPEED_MODE_STANDARD'">标准投</span>
-                <span v-else-if="scope.row[item.column] == 'SPEED_MODE_FAST'">加速投放</span>
-                <span v-else>-</span>
-              </div>
-              <div v-else-if="item.column == 'operate'">
-                <div class="flex">
-                  <span class="c-theme pointer" @click="editPlanEvent(scope.row)">修改</span>
-                  <span class="lMar10"
-                        :class="scope.row.configured_status == 'AD_STATUS_NORMAL' ? 'pointer-drop c-green-opa' : 'pointer c-green'"
-                        @click="scope.row.configured_status == 'AD_STATUS_SUSPEND'&&batchPlanEvent(scope.row,1)">启用</span>
-                </div>
-                <div>
-                    <span :class="scope.row.configured_status == 'AD_STATUS_SUSPEND' ? 'pointer-drop c-red-opa' : 'pointer c-red'"
-                          @click="scope.row.configured_status == 'AD_STATUS_NORMAL'&&batchPlanEvent(scope.row,2)">暂停</span>
-                  <Popconfirm key="dele" @confirm="batchPlanEvent(scope.row,3)" :slotFlag="true">
-                    <template #con>
-                      <span class="pointer lMar10">删除</span>
-                    </template>
-                  </Popconfirm>
-
+            </template>
+          </el-table-column>
+          <template v-for="bigItem in tableInfo.descol">
+            <el-table-column>
+              <template #header>
+                <div class="flex" style="justify-content:center"
+                     :class="[tableInfo.sortKey == bigItem.key_value ? 'active_css' : '']">
+                  <span :style="{color:tableInfo.sortKey == bigItem.key_value ? '#3173FF' : ''}">{{ bigItem.label }}</span>
+                  <el-tooltip v-if="bigItem.tooltip" effect="dark" :content="bigItem.tooltip"><i-ep-QuestionFilled class="lMar5 c-999 f12 pointer" /></el-tooltip>
+                  <div v-if="bigItem.if_sort == 1" class="sortBox lMar5">
+                    <div class="sortItem" @click="sortEvent(bigItem.key_value,'desc')">
+                      <el-icon :color="(tableInfo.sortType == 'desc' && tableInfo.sortKey == bigItem.key_value) ? '#3173FF' : ''"><i-ep-CaretTop /></el-icon>
+                    </div>
+                    <div class="sortItem" @click="sortEvent(bigItem.key_value,'asc')">
+                      <el-icon :color="(tableInfo.sortType == 'asc' && tableInfo.sortKey == bigItem.key_value) ? '#3173FF' : ''"><i-ep-CaretBottom /></el-icon>
+                    </div>
+                  </div>
                 </div>
+              </template>
+              <template v-for="item in bigItem.sub">
+                <el-table-column :label="item.label"  :fixed="item.disabled == 1"
+                                 :min-width="bigItem.key_value == 'campaign_name' ? '200px' :
+                               (bigItem.label.length <= 4 ? '100px' : bigItem.label.length <= 8 ? '150px' : '200px')">
 
+                  <template #default="scope">
+                    <div class="flex"  style="justify-content:center" :style="{color:tableInfo.sortKey == item.key_value ? '#3173FF' : ''}">
+                      <div v-if="item.key_value == 'campaign_name'">
+                    <span class="c-theme flex campaignName">
+                      <span class="pointer" @click="goAdvertEvent(scope.row.campaign_id)">{{scope.row[item.key_value]}}</span>
+                      <el-icon color="#3173FF" class="pointer lMarauto f16 icon" @click="edit_campaign_name_event(scope.row)"><i-ep-Edit /></el-icon>
+                    </span>
+                      </div>
+                      <div v-else-if="item.key_value == 'configured_status'">
+                        <span class="c-green" v-if="scope.row[item.key_value] == 'AD_STATUS_NORMAL'">正常</span>
+                        <span class="c-red" v-else-if="scope.row[item.key_value] == 'AD_STATUS_SUSPEND'">暂停</span>
+                        <span v-else>-</span>
+                      </div>
+                      <div v-else-if="item.key_value == 'speed_mode'">
+                        <span v-if="scope.row[item.key_value] == 'SPEED_MODE_STANDARD'">标准投</span>
+                        <span v-else-if="scope.row[item.key_value] == 'SPEED_MODE_FAST'">加速投放</span>
+                        <span v-else>-</span>
+                      </div>
+                      <div v-else-if="item.key_value == 'operate'">
+                        <div class="flex">
+                          <span class="c-theme pointer" @click="editPlanEvent(scope.row)">修改</span>
+                          <span class="lMar10"
+                                :class="scope.row.configured_status == 'AD_STATUS_NORMAL' ? 'pointer-drop c-green-opa' : 'pointer c-green'"
+                                @click="scope.row.configured_status == 'AD_STATUS_SUSPEND'&&batchPlanEvent(scope.row,1)">启用</span>
+                        </div>
+                        <div>
+                        <span :class="scope.row.configured_status == 'AD_STATUS_SUSPEND' ? 'pointer-drop c-red-opa' : 'pointer c-red'"
+                              @click="scope.row.configured_status == 'AD_STATUS_NORMAL'&&batchPlanEvent(scope.row,2)">暂停</span>
+                          <Popconfirm key="dele" @confirm="batchPlanEvent(scope.row,3)" :slotFlag="true">
+                            <template #con>
+                              <span class="pointer lMar10">删除</span>
+                            </template>
+                          </Popconfirm>
 
-              </div>
-              <div class="flex c-theme pointer" v-else-if="item.column == 'daily_budget'" @click="editPlanEvent(scope.row)">
-                {{scope.row[item.column] ? NumberHandle(scope.row[item.column]) : '不限'}}
-              </div>
-
+                        </div>
+                      </div>
+                      <div class="flex c-theme pointer" v-else-if="item.key_value == 'daily_budget'" @click="editPlanEvent(scope.row)">
+                        {{scope.row[item.key_value] ? NumberHandle(scope.row[item.key_value]) : '不限'}}
+                      </div>
 
-              <div class="cellDiv" :class="tableInfo.sortKey == item.column ? 'active_css' : ''" v-else>
-                <el-tooltip :disabled="!(scope.row[item.column] && scope.row[item.column].length >30)" effect="dark" :content="scope.row[item.column]+''">
-                  <div class="clampTwo line21" style="flex: 1">
-                    {{ scope.row[item.column] || scope.row[item.column]==0 ?
-                      (item.cancleForMat ? (scope.row[item.column] ? scope.row[item.column] : '-') : NumberHandle(scope.row[item.column])) : '-'}}
-                    <span v-if="item.hasPercent&&(scope.row[item.column] || scope.row[item.column] ==0)">%</span>
-                  </div>
-                </el-tooltip>
-              </div>
-              </div>
-            </template>
-          </el-table-column>
-        </template>
-      </el-table>
+                      <div class="cellDiv" :class="tableInfo.sortKey == item.key_value ? 'active_css' : ''" v-else>
+                        <el-tooltip :disabled="!(scope.row[item.key_value] && scope.row[item.key_value].length >30)" effect="dark" :content="scope.row[item.key_value]+''">
+                          <div class="clampTwo line21" style="flex: 1">
+                            {{ scope.row[item.key_value] || scope.row[item.key_value]==0 ?
+                              (item.if_sort == 1 ?  NumberHandle(scope.row[item.key_value]) : (scope.row[item.key_value] || '-')) : '-'}}
+                            <span v-if="item.hasPercent&&(scope.row[item.key_value] || scope.row[item.key_value] ==0)">%</span>
+                          </div>
+                        </el-tooltip>
+                      </div>
+                    </div>
+                  </template>
+                </el-table-column>
+              </template>
+            </el-table-column>
+          </template>
+        </el-table>
+        <div class="paginationBox flex" style="justify-content: center" v-if="Number(tableInfo.total) > 0">
+          <el-pagination
+              v-model:currentPage="tableInfo.currentPage"
+              v-model:page-size="tableInfo.pageSize"
+              background
+              :total="tableInfo.total"
+              @current-change="handleCurrentChange" />
+        </div>
+      </template>
 
-      <div class="paginationBox flex" style="justify-content: center" v-if="Number(tableInfo.total) > 0">
-        <el-pagination
-            v-model:currentPage="tableInfo.currentPage"
-            v-model:page-size="tableInfo.pageSize"
-            background
-            :total="tableInfo.total"
-            @current-change="handleCurrentChange" />
-      </div>
     </div>
 
     <EditIpt ref="planEditIptRef" title="推广计划" @confirm="planEditConfirm"></EditIpt>
 import {ElMessage} from "element-plus";
 import {batchGdt_edit, batchGdt_list, reactiveTableAndAny} from "@/api/ApiModel";
 import Indicators from './indicators/index.vue'
+import _ from "lodash";
+import {getCurrentTime} from "@/common/common";
 
 const { proxy } = getCurrentInstance() as any;
 // 全局方法定义
 const tableInfo = reactive<reactiveTableAndAny>({
   tableList:[],
   tableList_all:[],
-  descol:[
-    { name:'计划名称',column:'campaign_name',slotFlag: true,isfixed:true,alignSelf:'left'},
-    { name:'操作',column:'operate',slotFlag: true,isfixed:true},
-    { name:'账号ID',column:'account_id',cancleForMat:true},
-    { name:'计划ID',column:'campaign_id',cancleForMat:true},
-    { name:'计划类型',column:'campaign_type'},
-    { name:'推广目标类型',column:'promoted_object_type'},
-    { name:'日预算(元)',column:'daily_budget',slotFlag: true},
-    // { name:'总预算',column:'total_budget'},
-    { name:'投放日期',column:'created_time'},
-    { name:'客户状态',column:'configured_status',slotFlag: true},
-    { name:'投放速度',column:'speed_mode',slotFlag: true},
-  ],
+  descol:[],
   multipleSelection:[],
   updateKey:1,
   chooseAll:false,
   sortKey:'',
+  sortType:'',
   moreList:[
     {value:'1',label:'启用'},
     {value:'2',label:'暂停'},
   pageSize:20,
   total:0,
   totalPages:0,//共多少页
+  summary:[]
 })
 
 
-
-//批量操作
-const batchEvent = () => {
-
-}
-
 // 启用 暂停 删除
 const batchPlanApi = async (arr?:any,val?:any) => {
   const paramsModel = reactive<batchGdt_edit>({
 
 
 //排序
-const sortEvent = (row:any) => {
-
+const sortEvent = (sortKey,sortType) => {
+  tableInfo.sortKey = sortKey
+  tableInfo.sortType = sortType
+  init()
 }
 
 //列表
     page:page?page:1,
     pageSize:totalPages ? totalPages : tableInfo.pageSize
   })
+  if(tableInfo.sortKey){
+    paramsModel['field'] = tableInfo.sortKey
+    paramsModel['order'] = tableInfo.sortType
+  }
   let res:any = await proxy.$http.get(Api.batchGdt_plan_list,paramsModel)
   loading.value = false
   if(res&&res.errNo=='0'){
     if(totalPages){
       tableInfo.tableList_all = res.rst.data.list
     }else{
+      tableInfo.summary = res.rst.data.summary
+      tableInfo.summary[0].campaign_name = '合计(缓存时间:' + getCurrentTime() + ')'
+      tableInfo.descol = []
+      res.rst.data.explain.forEach(ex=>{
+        ex.sub = []
+        let subObj:any = _.cloneDeep(ex)
+        subObj.label = tableInfo.summary[0][ex.key_value] || ''
+        ex.sub.push(subObj)
+      })
+      tableInfo.descol = res.rst.data.explain;
+      tableInfo.descol.splice(1,0,{label:'操作',key_value:'operate',disabled:1,sub:[{label:'',key_value:'operate',disabled:1}]})
       tableInfo.tableList = res.rst.data.list
       tableInfo.total = res.rst.pageInfo.total
       tableInfo.totalPages = res.rst.pageInfo.total
   }
 }
 
-const IndicatorsRefreshList = () => {
-  //这里刷新列表
-}
 
 const {
   init_acList,
 })
 </script>
 <style lang="scss" scoped>
-.campaignName{
-  .icon{
-    color: #3173FF;
-    opacity: 0;
-  }
-  &:hover{
-    .icon{
-      opacity: 1;
-    }
-  }
-}
-.checkBoxSelf{
-  width: 13px;
-  height: 13px;
-  border: 1px solid #d9d9d9;
-  border-radius: 2px;
-  &:hover{
-    cursor: pointer;
-    border: 1px solid #3173FF;
-  }
-  &.active{
-    border: 1px solid #3173FF;
-    background-color: #3173FF;
-  }
-}
+@import "./index.scss";
 </style>

src/components/businessMoudle/gdtList/ts/list.ts

         return {
             backgroundColor: '#FAFAFA',
             color: '#161E46',
-            height: '44px'
+            height: '44px',
+            textAlign: 'center'
         }
     }