feat: 平台推广数据

project/src/assets/config/interface_api.js

@@ -314,6 +314,7 @@ var api = {
   dataBoard_customerStaff_setStatus: "/api/user/updateUserStatus", // 客服数据统计 - 更新客服状态
   dataBoard_chatGroupData_list: "/api/chatGroup/chatGroupStatistic", // 客户群数据 - 列表
   dataBoard_chatGroupData_summary: "/api/chatGroup/chatGroupCondition", // 客户群数据 - 汇总
+  dataBoard_promotionData: '/api/populariz/promotionData', // 平台推广数据
 
   getPlatformOptions: "/api/intelligentMassSending/platformIndex", // 平台筛选选项
   accountManage_accountIndex: "/api/intelligentMassSending/accountIndex", // 平台账号管理 - 账号列表

project/src/assets/js/staticTypes.js

@@ -247,3 +247,8 @@ export const isNewCustomerNoLoss = [
   { key: 0, val: '否' },
 ]
 
+export const promotionData = [
+  { key: 8, val: '映客' },
+  { key: 10, val: '番茄' },
+]
+

project/src/components/assembly/screen/channel.vue

@@ -44,6 +44,7 @@ import {
   msgType,
   groupUserStatus,
   isNewCustomerNoLoss,
+  promotionData,
 } from '@/assets/js/staticTypes'
 export default {
   props: {
@@ -220,6 +221,9 @@ export default {
     } else if (this.type == 'isNewCustomerNoLoss') { // 是否新用户
       this.options = [...isNewCustomerNoLoss]
       this.placeholderVal = '请选择'
+    } else if (this.type == 'promotionData') {
+      this.options = [...promotionData]
+      this.placeholderVal = '请选择'
     } else {
       this.init()
     }

project/src/components/assembly/screen/channelMultiple.vue

@@ -46,6 +46,7 @@ import {
   msgType,
   groupUserStatus,
   isNewCustomerNoLoss,
+  promotionData,
 } from '@/assets/js/staticTypes'
 export default {
   props: {
@@ -217,6 +218,9 @@ export default {
     } else if (this.type == 'isNewCustomerNoLoss') { // 是否新用户
       this.options = [...isNewCustomerNoLoss]
       this.placeholderVal = '请选择'
+    } else if (this.type == 'promotionData') { // 平台推广数据
+      this.options = [...promotionData]
+      this.placeholderVal = '请选择'
     } else {
       this.init()
     }

project/src/components/assembly/screen/channelV2.vue

@@ -47,6 +47,7 @@ import {
   msgType,
   groupUserStatus,
   isNewCustomerNoLoss,
+  promotionData,
 } from '@/assets/js/staticTypes'
 export default {
   props: {
@@ -494,6 +495,9 @@ export default {
       } else if (this.type == 'isNewCustomerNoLoss') { // 是否新用户
         this.options = [...isNewCustomerNoLoss]
         this.placeholderVal = '请选择'
+      } else if (this.type == 'promotionData') { // 平台推广数据
+        this.options = [...promotionData]
+        this.placeholderVal = '请选择'
       } else {
         this.init()
       }

project/src/components/dataBoard/promotionData.vue

@@ -0,0 +1,331 @@
+<template>
+  <div v-loading="loading">
+    <div class="screenBox flex-align-center">
+      <div class="flex-align-center" style="flex: 1">
+        <datePicker title="自定义" :is_include_today="false" :pickerOptions="pickerOptions" :quickFlag="true" :afferent_time="default_time" :clearFlag="false" @changeTime="changeTime" />
+        <selfInputV2 v-model="keyword" label_name="标题" placeholder="请输入关键字" labelWidth @change="onChangeKeyword" />
+        <selfChannelV2 v-model="plat_type" type='promotionData' title="平台" @change="onChangePlatType" />
+      </div>
+      <div class="right">
+        <el-button v-if="isCanExport" type="primary" size="mini" @click="init(1, 'export')">导出Excel</el-button>
+      </div>
+    </div>
+    <div class="dataInfoBox">
+      <div
+        class="dataInfoItem"
+        v-for="(item, index) in dataInfoArrs"
+        :key="index"
+      >
+        <div class="dataItemTitle">
+          <img :src="item.icon" style="height: 14px" class="titleIcon" />
+          <span>{{ item.label }}</span>
+        </div>
+        <div class="dataItem-data">
+          {{
+            dataInfo && (dataInfo[item.prop] || dataInfo[item.prop] == 0)
+              ? $formatNum(dataInfo[item.prop])
+              : "-"
+          }}
+          <span class="f15">{{
+            item.brackets_prop
+              ? `(${
+                  dataInfo &&
+                  (dataInfo[item.brackets_prop] ||
+                    dataInfo[item.brackets_prop] == 0)
+                    ? $formatNum(dataInfo[item.brackets_prop])
+                    : "-"
+                })`
+              : ""
+          }}</span>
+        </div>
+      </div>
+    </div>
+    <div>
+      <ux-grid
+        ref="plxTable"
+        :border="false"
+        @row-click="
+          () => {
+            return;
+          }
+        "
+        :header-cell-style="
+          () => {
+            return {
+              backgroundColor: '#FFFFFF !important',
+              border: 'none!important',
+            };
+          }
+        "
+        :height="height"
+        show-footer-overflow="tooltip"
+        show-overflow="tooltip"
+        size="mini"
+      >
+        <ux-table-column
+          v-for="item in desCol"
+          v-if="!item.excelShow"
+          :key="item.prop"
+          :resizable="true"
+          :field="item.prop"
+          :title="item.label"
+          :min-width="item.min_width ? item.min_width : 120"
+          :fixed="item.fixed ? item.fixed : ''"
+          align="center"
+        >
+          <template #header>
+            <div :class="['flex-align-jus-center']">
+              {{ item.label
+              }}{{ item.brackets_label ? `(${item.brackets_label})` : "" }}
+              <el-tooltip
+                v-if="item.notes"
+                :content="item.notes"
+                placement="top"
+              >
+                <div><i class="el-icon-question"></i></div>
+              </el-tooltip>
+            </div>
+          </template>
+          <template v-slot="{ row }">
+            <span v-if="item.prop === 'pid' || item.prop === 'adq_account_id'">{{ row[item.prop] }}</span>
+            <span v-else-if="item.prop === 'plat_type'">{{ row[item.prop] == 10 ? '番茄' : (row[item.prop] == 8 ? '映客' : '') }}</span>
+            <span v-else>{{ row[item.prop] !== "" && (row[item.prop] || row[item.prop] === 0 || row[item.prop] === "0")   ? $formatNum(row[item.prop])   : "-" }}</span>
+            <span v-if="item.brackets_label" >({{   row[item.brackets_prop] != "" && (row[item.brackets_prop] || row[item.brackets_prop] == 0) ? $formatNum(row[item.brackets_prop]) : "-" }})</span>
+          </template>
+        </ux-table-column>
+      </ux-grid>
+      <div class="pagination" v-show="total > 0">
+        <el-pagination
+          background
+          :current-page="page"
+          @current-change="handleCurrentChange"
+          layout="prev, pager, next, sizes, jumper"
+          :page-sizes="[20, 50, 100]"
+          @size-change="handleSizeChange"
+          :page-count="Number(pages)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import datePicker from "@/components/assembly/screen/datePicker.vue";
+import selfChannelV2 from "@/components/assembly/screen/channelV2.vue";
+import selfInputV2 from "@/components/assembly/screen/inputV2.vue";
+
+export default {
+  components: { selfChannelV2, datePicker, selfInputV2 },
+  data() {
+    return {
+      loading: false,
+      default_time: [this.$getDay(-8, false), this.$getDay(-1, false)],
+      pickerOptions: {
+        disabledDate(time) {
+          return time > Date.now() - 8.64e7;
+        },
+      },
+      height: "",
+      keyword: "",
+      plat_type: "",
+      time: [],
+      dataInfoArrs: [
+        {
+          prop: "cost",
+          label: "消耗金额",
+          icon: require("@/assets/img/icon/累计消耗@2x.png"),
+        },
+        {
+          prop: "first_day_charge",
+          label: "充值金额",
+          icon: require("@/assets/img/icon/累计充值@2x.png"),
+        },
+        {
+          prop: "first_roi",
+          label: "首日roi",
+          icon: require("@/assets/img/icon/roi@2x.png"),
+        }
+      ],
+      dataInfo: {},
+      desCol: [
+        { prop: "populariz_title", label: "推广标题", fixed: "left", min_width: "160" },
+        { prop: "pid", label: "推广ID", min_width: "160" },
+        { prop: "ref_date", label: "日期", min_width: "160" },
+        { prop: "plat_type", label: "平台" },
+        { prop: "adq_account_id", label: "投放账号" },
+        { prop: "cost", label: "消耗金额" },
+        { prop: "first_day_charge", label: "充值金额" },
+        { prop: "first_roi", label: "首日roi" },
+      ],
+      page: 1,
+      pages: 0,
+      total: 0,
+      page_size: 20,
+    };
+  },
+  computed: {
+    // 是否有“导出”权限
+    isCanExport() {
+      return !!this.$store.state.dataBoardAuth.can_export;
+    },
+  },
+  created() {
+    this.time = this.default_time;
+    this.height =
+      document.documentElement.clientHeight - 400 > 400
+        ? document.documentElement.clientHeight - 400
+        : 400;
+    this.init(1);
+  },
+  methods: {
+    changeTime(time) {
+      //筛选时间变化
+      if (!time || (time && time.length == 0)) {
+        this.time = [];
+      } else {
+        this.time = time;
+      }
+      this.init(1);
+    },
+    init(page, type) {
+      if (type != "export") {
+        this.page = page ? page : this.page;
+      } else {
+        if (this.total == 0) {
+          this.$message({
+            message: "暂无数据可导出",
+            type: "warning",
+          });
+          return;
+        }
+      }
+      this.loading = true;
+      this.$axios
+        .get(this.URL.BASEURL + this.URL.dataBoard_promotionData, {
+          params: {
+            send_time_start: this.time[0],
+            send_time_end: this.time[1],
+            keyword: this.keyword,
+            plat_type: this.plat_type,
+            page: type == "export" ? 1 : this.page,
+            page_size:
+              type == "export"
+                ? this.$store.state.exportNumber
+                : this.page_size,
+          },
+        })
+        .then((res) => {
+          var res = res.data;
+          this.loading = false;
+          if (res && res.errno == 0) {
+            console.log("res => ", res);
+            if (res.rst.extra) {
+              // 汇总数据
+              this.dataInfo = res.rst.extra;
+            }
+            if (type == "export") {
+              // 列表导出
+              this.exportEvent(res.rst.data);
+            } else {
+              // 列表数据
+              this.datas = res.rst.data;
+              this.$refs.plxTable && this.$refs.plxTable.reloadData(this.datas);
+              this.total = res.rst.pageInfo.total;
+              this.pages = res.rst.pageInfo.pages;
+            }
+          } else if (res.errno != 4002) {
+            this.$message({
+              message: res.err,
+              type: "warning",
+            });
+          }
+        })
+        .catch((err) => {
+          this.loading = false;
+        });
+    },
+    handleCurrentChange(val) {
+      this.init(val);
+    },
+    handleSizeChange(page_size) {
+      this.page_size = page_size;
+      this.init(1);
+    },
+    exportEvent(data) {
+      let list = data;
+      let tHeader = this.desCol.map((v) => {
+        return v.label;
+      });
+      let filterVal = this.desCol.map((v) => {
+        return v.prop;
+      });
+      let excelDatas = [
+        {
+          tHeader: tHeader, // sheet表一头部
+          filterVal: filterVal, // 表一的数据字段
+          tableDatas: list, // 表一的整体json数据
+          sheetName: "", // 表一的sheet名字
+        },
+      ];
+      this.$exportOrder({
+        excelDatas,
+        name: `平台推广数据（导出时间：${this.$getDay(0)}）`,
+      });
+    },
+    onChangeKeyword(val) {
+      this.keyword = val;
+      this.init(1);
+    },
+    onChangePlatType(val) {
+      this.plat_type = val || ''
+      this.init(1);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.screenBox {
+  background: #fff;
+  padding: 5px 20px;
+}
+
+.dataInfoBox {
+  display: flex;
+  margin-top: 10px;
+  flex-wrap: wrap;
+
+  .dataInfoItem {
+    background: #ffffff;
+    border-radius: 8px;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    padding: 0 19px;
+    height: 70px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .dataItemTitle {
+      display: flex;
+      align-items: center;
+      color: #6f6f6f;
+      font-size: 13px;
+      line-height: 17px;
+      font-weight: bold;
+
+      .titleIcon {
+        height: 16px;
+        margin-right: 4px;
+      }
+    }
+
+    .dataItem-data {
+      color: #000000;
+      font-size: 19px;
+      line-height: 28px;
+      font-weight: bold;
+      margin-top: 2px;
+    }
+  }
+}
+</style>

project/src/router/allRouter.js

@@ -40,6 +40,7 @@ const playletData = () => import(/* webpackChunkName: 'playletData' */ '@/compon
 const operateDayRetrieve = () => import(/* webpackChunkName: 'operateDayRetrieve' */ '@/components/dataBoard/operateDayRetrieve.vue')
 const populariz = () => import(/* webpackChunkName: 'populariz' */ '@/components/dataBoard/populariz/index.vue')
 const sendData = () => import(/* webpackChunkName: 'sendData' */ '@/components/dataBoard/sendData/index.vue')
+const promotionData = () => import(/* webpackChunkName: 'promotionData' */ '@/components/dataBoard/promotionData.vue')
 const throwPerson = () => import(/* webpackChunkName: 'throwPerson' */ '@/components/dataBoard/throwPerson/index.vue')
 const regRangeReport = () => import(/* webpackChunkName: 'regRangeReport' */ '@/components/dataBoard/regRangeReport.vue')
 const regRangeReportHS = () => import(/* webpackChunkName: 'regRangeReportHS' */ '@/components/dataBoard/regRangeReportHS.vue')
@@ -876,6 +877,17 @@ export var allRouter = [
         }
       },
       {
+        path: 'promotionData',
+        name: 'promotionData',
+        component: promotionData,
+        meta: {
+          keepAlive: false,
+          isLogin: true,
+          title: '平台推广数据',
+          isData: true
+        }
+      },
+      {
         path: 'throwPerson',
         name: 'throwPerson',
         component: throwPerson,