feat: 运营数据 - 新增"ADQ运营数据"表

project/src/components/dataBoard/operateDayRetrieve.vue

@@ -1,10 +1,23 @@
 <template>
   <div v-loading="loading">
+    <div class="topTagBox flex">
+      <div class="left flex-align-center">
+        <div
+          :class="['tagItem', isMP ? 'tagItem_active' : '']"
+          @click="onClickTab(order_type_options.MP)"
+        >MP运营数据</div>
+        <div
+          :class="['tagItem', isADQ ? 'tagItem_active' : '']"
+          @click="onClickTab(order_type_options.ADQ)"
+        >ADQ运营数据</div>
+      </div>
+    </div>
+
     <div class="screenBox flex">
       <div class="flex">
         <date-picker title="选择日期" @changeTime="changeTime"></date-picker>
-        <self-channel title="公众号" type='thePublic' @channelDefine="(val)=>{account_id = val;init(1)}"></self-channel>
-        <self-channel title="剧集" type='dramaList' @channelDefine="(val)=>{playlet_id = val;init(1)}"></self-channel>
+        <self-channel v-show="isMP" title="公众号" type='thePublic' @channelDefine="(val)=>{account_id = val;init(1)}"></self-channel>
+        <self-channel v-show="isMP" title="剧集" type='dramaList' @channelDefine="(val)=>{playlet_id = val;init(1)}"></self-channel>
       </div>
       <el-button type="primary" size="mini" @click="init(1,'export')">导出Excel</el-button>
     </div>
@@ -33,6 +46,12 @@
 <script>
 import datePicker from '@/components/assembly/screen/datePicker.vue'
 import selfChannel from '@/components/assembly/screen/channel.vue'
+
+const order_type_options = {
+  MP: '1',
+  ADQ: '2',
+}
+
 export default {
   components: { datePicker, selfChannel },
   data () {
@@ -46,6 +65,8 @@ export default {
       time: [],
       account_id: '',
       playlet_id: '',
+      order_type: order_type_options.MP,
+      order_type_options: Object.freeze(order_type_options),
       desCol: [
         { prop: "date", label: "日期" },
         { prop: "cost", label: "投放消耗" },
@@ -59,6 +80,16 @@ export default {
       height: ''
     }
   },
+  computed: {
+    // 当前列表是否为"MP运营数据"
+    isMP() {
+      return this.order_type === order_type_options.MP
+    },
+    // 当前列表是否为"ADQ运营数据"
+    isADQ() {
+      return this.order_type === order_type_options.ADQ
+    },
+  },
   created () {
     this.height = document.documentElement.clientHeight - 200 > 400 ? document.documentElement.clientHeight - 200 : 400
     this.init(1)
@@ -89,8 +120,9 @@ export default {
         params: {
           start: this.time[0],
           end: this.time[1],
-          drama_id: this.playlet_id,
-          app_id: this.account_id,
+          order_type: this.order_type,
+          drama_id: this.isMP ? this.playlet_id : '',
+          app_id: this.isMP ? this.account_id: '',
           page: type == 'export' ? 1 : this.page,
           pagesize: type == 'export' ? this.$store.state.exportNumber : this.page_size,
         }
@@ -104,6 +136,8 @@ export default {
             this.total = res.rst.pageInfo.total;
             this.pages = res.rst.pageInfo.pages;
             if (!res.rst.data || res.rst.data.length == 0) {
+              this.datas = []
+              this.$refs.plxTable.reloadData(this.datas)
               return
             }
             if (!this.desColFlag) {
@@ -162,7 +196,12 @@ export default {
         }
       ]
       this.$exportOrder({ excelDatas, name: `运营数据（导出时间：${this.$getDay(0)}）` })
-    }
+    },
+    // 切换数据类型
+    onClickTab(order_type) {
+      this.order_type = order_type
+      this.init(1)
+    },
   }
 }
 </script>