feat: 企微数据 - 平台推广链接 - "列表"前端页面

project/src/components/dataBoard/platformPromote/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <div class="topTagBox flex">
+      <div class="left flex-align-center">
+        <div :class="['tagItem', type === 1 ? 'tagItem_active' : '']" @click="changeType(1)">平台推广链接</div>
+        <div :class="['tagItem', type === 2 ? 'tagItem_active' : '']" @click="changeType(2)">平台推广剧集</div>
+      </div>
+    </div>
+    <promoteLink v-if="type === 1" />
+    <promotePlaylet v-if="type === 2" />
+  </div>
+</template>
+
+<script>
+import promoteLink from './promoteLink.vue'
+import promotePlaylet from './promotePlaylet.vue'
+export default {
+  components: {
+    promoteLink,
+    promotePlaylet,
+  },
+  data() {
+    return{
+      type: 1,
+    }
+  },
+  methods:{
+    changeType(type){
+      this.type = type
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/style/list.scss";
+.tableInfo{
+  height: auto;
+  padding: 10px 20px;
+}
+</style>

project/src/components/dataBoard/platformPromote/promoteLink.vue

@@ -0,0 +1,251 @@
+<template>
+  <div class="loseUserTrends-wrap" v-loading="pageLoading">
+    <div class="screenBox flex">
+      <!-- <div />
+      <el-button type="primary" size="mini" @click="onClickExport">导出Excel</el-button> -->
+    </div>
+    <!-- S 筛选区 -->
+    <div class="screenBox filter-wrap">
+      <!-- 日期 -->
+      <datePicker style="margin-right: 30px;" :reset="reset" title="自定义" :quickFlag="true" :afferent_time="default_time" :clearFlag="false" @changeTime="onChangeTime" />
+      <!-- 创建人 -->
+      <selfChannel style="margin-right: 30px;margin-left: -30px;" :reset="reset" title="创建人" type='circleCreate' labelWidth @channelDefine="onChangeCreatorId" />
+      <div class="flex">
+        <el-button size="mini" type="primary" plain @click="onClickSearch">确定</el-button>
+        <el-button size="mini" plain @click="onClickReset">重置</el-button>
+      </div>
+    </div>
+    <!-- E 筛选区 -->
+
+    <!-- S 表 -->
+      <!-- S 明细表 detailsTable -->
+      <div v-loading="detailLoading">
+        <ux-grid class="detailsTable" ref="detailsTable" :border="false" @row-click="() => { return }" :header-cell-style="getHeaderCellStyle" show-footer-overflow="tooltip" show-overflow="tooltip" size="mini" :height="height">
+          <ux-table-column v-for="(item, idx) in detailsTableCol" :key="item.column + idx" :resizable="true" :field="item.column" :title="item.name" :min-width="item.min_width ? item.min_width : 140" :fixed="item.fixed ? item.fixed : ''" align="center">
+            <template #header>
+              <div class="flex-align-jus-center">
+                {{ item.name }}
+                <el-tooltip v-if="item.notes" :content="item.notes" placement="top">
+                  <div><i class="el-icon-question"></i></div>
+                </el-tooltip>
+                <div v-if="item.enable_to_sort" class="sort-wrap">
+                  <i class="el-icon-caret-top" :class="{ 'active': filter.sort_field === item.column && filter.sort_type === 'asc' }" @click="onClickSort(item.column, 'asc')" />
+                  <i class="el-icon-caret-bottom" :class="{ 'active': filter.sort_field === item.column && filter.sort_type === 'desc' }" @click="onClickSort(item.column, 'desc')" />
+                </div>
+              </div>
+            </template>
+            <template v-slot="{ row }">
+              <!-- 时间 -->
+              <div v-if="item.column === 'ref_date'">
+                <span>{{ row['expense_date'] }}</span><span v-if="row['expense_date_end']"> ~ {{ row['expense_date_end'] }}</span>
+              </div>
+              <!-- 其他 -->
+              <span v-else>{{ row[item.column] ? $formatNum(row[item.column]) : '-' }}</span>
+            </template>
+          </ux-table-column>
+        </ux-grid>
+        <div class="pagination" v-show="pagination.total > 0">
+          <el-pagination background :current-page="pagination.page" @current-change="handleCurrentChange" layout="prev, pager, next" :page-count='Number(pagination.pages)' />
+        </div>
+      </div>
+      <!-- E 明细表 detailsTable -->
+    <!-- E 表 -->
+  </div>
+</template>
+<script>
+import datePicker from '@/components/assembly/screen/datePicker.vue'
+import selfChannel from '@/components/assembly/screen/channel.vue'
+import _lodash from 'lodash'
+
+export default {
+  components: {
+    datePicker,
+    selfChannel,
+  },
+  data () {
+    const DEFAULT_TIME = [this.$getDay(-30, false), this.$getDay(0, false)]
+    return {
+      default_time: DEFAULT_TIME,
+      reset: false,
+      height: '',
+      pageLoading: false,
+
+      detailLoading: false,
+      detailsTableCol: [],
+      pagination: {
+        page: 1,
+        page_size: 20,
+        pages: 0,
+        total: 0,
+      },
+      filter: {
+        time: DEFAULT_TIME, // 自定义日期
+        creator_id: '', // 创建人
+        sort_field: 'paid', // 排序字段 - 默认值
+        sort_type: 'desc', // 升序/降序
+      },
+    }
+  },
+  created () {
+    this.initTableHeight()
+    this.handleGetList()
+  },
+  methods: {
+    initTableHeight() {
+      this.height = document.documentElement.clientHeight - 200 > 400 ? document.documentElement.clientHeight - 200 : 400
+    },
+    // 获取列表数据
+    async handleGetList() {
+      console.log('handleGetList => ',)
+      try {
+        this.detailLoading = true
+        const params = {
+          page: this.pagination.page,
+          page_size: this.pagination.page_size,
+          start_date: this.filter.time[0],
+          end_date: this.filter.time[1],
+          creator_id: this.filter.creator_id,
+          sort_field: this.filter.sort_field,
+          sort_type: this.filter.sort_type,
+        }
+        const url = `${this.URL.BASEURL}${this.URL.dataBoard_loseUser_account}`
+        const { data: res = {} } = await this.$axios.get(url, { params })
+        if (res && res.errno == 0) {
+          res.rst.extra[0].fixed = 'left' // 前2列固定左侧
+          res.rst.extra[1].fixed = 'left' // 前2列固定左侧
+          const detailsTableCol = []
+          res.rst.extra.forEach(item => {
+            if (item.name && item.name.length > 6) { // 长字符宽度
+              item['min_width'] = item.name.length * 20
+            }
+            detailsTableCol.push(item) // 收集普通表头
+          })
+          this.detailsTableCol = Object.freeze(detailsTableCol)
+          await this.$nextTick()
+          const detailsTableList = Array.isArray(res.rst.data) ? res.rst.data : []
+          this.$refs.detailsTable.reloadData(detailsTableList)
+          this.pagination.total = res.rst.pageInfo.total
+          this.pagination.pages = res.rst.pageInfo.pages
+        } else if (res.errno != 4002) {
+          this.$message.warning(res.err)
+          this.$refs.detailsTable.reloadData([])
+          this.pagination.total = 0
+          this.pagination.pages = 0
+        }
+      } catch (error) {
+        console.log(error)
+        this.$refs.detailsTable.reloadData([])
+        this.pagination.total = 0
+        this.pagination.pages = 0
+      } finally {
+        this.detailLoading = false
+      }
+    },
+    // 监听时间筛选变化
+    onChangeTime(time) {
+      this.filter.time = Array.isArray(time) ? time : []
+      this.pagination.page = 1
+      this.handleGetList()
+    },
+    // 监听创建人筛选变化
+    onChangeCreatorId(val) {
+      this.filter.creator_id = val
+      this.pagination.page = 1
+      this.handleGetList()
+    },
+    // 监听当前页变化
+    handleCurrentChange(currentPage) {
+      this.pagination.page = currentPage
+      this.handleGetList()
+    },
+    // 监听点击"确定(搜索)"按钮
+    onClickSearch() {
+      this.pagination.page = 1
+      this.handleGetList()
+    },
+    // 监听排序变化
+    onClickSort(sort_field, sort_type) {
+      // sort_type：升序asc、降序desc
+      if (this.filter.sort_field === sort_field) {
+        if (this.filter.sort_type === sort_type) {
+          // 点击的是当前排序字段 && 是当前排序类型 => 重置 取消排序
+          this.filter.sort_field = 'paid'
+          this.filter.sort_type = 'desc'
+        } else {
+          // 点击的是当前排序字段 && 非当前排序类型 => 设置排序类型
+          this.filter.sort_type = sort_type
+        }
+      } else {
+        // 点击的不是当前排序字段 => 设置排序字段和类型
+        this.filter.sort_field = sort_field
+        this.filter.sort_type = sort_type
+      }
+      // 后端排序 => 获取最新数据
+      this.pagination.page = 1
+      this.handleGetList()
+    },
+    // 监听点击"重置"按钮
+    onClickReset() {
+      this.reset = !this.reset
+      this.filter.time = this.default_time
+      this.filter.creator_id = ''
+      this.filter.sort_field = 'paid'
+      this.filter.sort_type = 'desc'
+      this.pagination.page = 1
+      this.handleGetList()
+    },
+    getHeaderCellStyle() {
+      return { backgroundColor: '#FFFFFF !important', border: 'none!important' }
+    },
+  }
+}
+</script>
+<style lang="scss" scoped>
+.loseUserTrends-wrap {
+  min-width: 1125px;
+}
+.screenBox {
+  position: relative;
+  background: #fff;
+  padding: 5px 20px;
+}
+.mt-10 {
+  margin-top: 10px;
+}
+.ml-10 {
+  margin-left: 10px;
+}
+.filter-wrap {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  padding-bottom: 10px;
+  & > div {
+    margin: 0 10px 10px 0;
+  }
+  & > button {
+    margin: -10px 0 0 10px;
+  }
+  .el-button+.el-button {
+    margin-left: 10px;
+  }
+}
+
+
+.sort-wrap {
+  display: flex;
+  flex-direction: column;
+  i {
+    cursor: pointer;
+    &.active {
+      color: #32B38A;
+    }
+  }
+  i:first-child {
+    margin-bottom: -3px;
+  }
+  i:last-child {
+    margin-top: -3px;
+  }
+}
+</style>

project/src/components/dataBoard/platformPromote/promotePlaylet.vue

@@ -0,0 +1,783 @@
+<template>
+  <div class="loseUserTrends-wrap" v-loading="pageLoading">
+    <div class="screenBox flex">
+      <div /><!-- 占位 -->
+      <el-button type="primary" size="mini" @click="onClickExport">导出Excel</el-button>
+    </div>
+    <!-- S 筛选区 -->
+    <div class="screenBox filter-wrap">
+      <!-- 日期 -->
+      <datePicker style="margin-right: 30px;" :reset="reset" title="自定义" :quickFlag="true" :afferent_time="default_time" :clearFlag="false" @changeTime="onChangeTime" />
+      <div class="flex">
+        <!-- 企微主体 -->
+        <div style="margin-right: 30px;" class="common-screen-item">
+          <label class="common-screen-label" style="width: auto;">企微主体</label>
+          <!-- 系统管理员 -->
+          <el-cascader v-if="$cookie.getCookie('isSuperManage') == 1" v-model="system_enterprise" size="small" :options="enterpriseList" :props="{value:'self_id',label:'self_name',children:'manage_corp_list'}" @change="onChangeCorpidSystem" clearable placeholder="请选择企微主体" />
+          <!-- 非系统管理员 -->
+          <el-select v-else v-model="enterprise.corpid" size="small" placeholder="请选择企微主体" @change="onChangeCorpid" clearable>
+            <el-option v-for="(item, index) in enterpriseList" :key="index+'enterpriseList'" :label="item.corp_name?item.corp_name:item.corp_full_name?item.corp_full_name:item.corpid" :value="item.corpid" />
+          </el-select>
+        </div>
+        <el-button size="mini" type="primary" plain @click="onClickSearch">确定</el-button>
+        <el-button size="mini" plain @click="onClickReset">重置</el-button>
+      </div>
+    </div>
+    <!-- E 筛选区 -->
+    <!-- S 折线图 -->
+    <div class="trendBox mt-10" v-loading="chartLoading">
+      <div class="legendBox">
+        <div class="legendItem" v-for="(item, index) in legendList" :key="index" @click="onClickLegend(item, index)">{{ item.name }}
+          <div :class="['checkbox', item.selectFlag ? 'checkbox_active': '']" :style="item.selectFlag ? `background: ${item.color};border-color: ${item.color};`: '' "><i class="el-icon-check" /></div>
+        </div>
+      </div>
+      <div id="trend" style="width: 100%; height: 250px;" />
+      <div v-if="!chartDataList || !chartDataList.length" style="text-align: center; color: #333; font-size: 14px; position: relative; top: -100px;">暂无数据</div>
+    </div>
+    <!-- E 折线图 -->
+
+    <!-- S 表 -->
+
+      <!-- S 汇总表 summaryTable -->
+      <div v-loading="summaryLoading">
+        <ux-grid class="summaryTable" ref="summaryTable" :border="false" @row-click="() => { return }" :header-cell-style="getHeaderCellStyle" show-footer-overflow="tooltip" show-overflow="tooltip" size="mini">
+          <ux-table-column v-for="item in summaryTableCol" :key="item.column + item.name" :resizable="true" :field="item.column" :title="item.name" :min-width="item.min_width ? item.min_width : 140" :fixed="item.fixed ? item.fixed : ''" align="center">
+            <template #header>
+              <div class="flex-align-jus-center">
+                {{ item.name }}
+                <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 }">
+              <!-- 时间 -->
+              <div v-if="item.name === '时间' || item.name === '企微主体'">
+                <span>汇总</span>
+              </div>
+              <span v-else>{{ row[item.column] ? $formatNum(row[item.column]) : '-' }}</span>
+            </template>
+          </ux-table-column>
+        </ux-grid>
+      </div>
+      <!-- E 汇总表 summaryTable -->
+      <!-- S 明细表 detailsTable -->
+      <div v-loading="detailLoading">
+        <ux-grid class="detailsTable" ref="detailsTable" :border="false" @row-click="() => { return }" :header-cell-style="getHeaderCellStyle" show-footer-overflow="tooltip" show-overflow="tooltip" size="mini" :height="height">
+          <ux-table-column v-for="(item, idx) in detailsTableCol" :key="item.column + idx" :resizable="true" :field="item.column" :title="item.name" :min-width="item.min_width ? item.min_width : 140" :fixed="item.fixed ? item.fixed : ''" align="center">
+            <template #header>
+              <div class="flex-align-jus-center">
+                {{ item.name }}
+                <el-tooltip v-if="item.notes" :content="item.notes" placement="top">
+                  <div><i class="el-icon-question"></i></div>
+                </el-tooltip>
+                <div v-if="item.enable_to_sort" class="sort-wrap">
+                  <i class="el-icon-caret-top" :class="{ 'active': filter.sort_field === item.column && filter.sort_type === 'asc' }" @click="onClickSort(item.column, 'asc')" />
+                  <i class="el-icon-caret-bottom" :class="{ 'active': filter.sort_field === item.column && filter.sort_type === 'desc' }" @click="onClickSort(item.column, 'desc')" />
+                </div>
+              </div>
+            </template>
+            <template v-slot="{ row }">
+              <!-- 时间 -->
+              <div v-if="item.column === 'ref_date'">
+                <span>{{ row['expense_date'] }}</span><span v-if="row['expense_date_end']"> ~ {{ row['expense_date_end'] }}</span>
+              </div>
+              <!-- 其他 -->
+              <span v-else>{{ row[item.column] ? $formatNum(row[item.column]) : '-' }}</span>
+            </template>
+          </ux-table-column>
+          <!-- DAY1、DAY2... -->
+          <ux-table-column width="120" v-for="(dayItem, dayIdx) in detailsTableColDays" :key="dayIdx + 'extra'">
+            <template #header>
+              <div class="flex-align-jus-center">{{ dayItem.name }}
+                <el-tooltip placement="top" v-if="dayIdx === 0">
+                  <div slot="content">流失人数：这天的流失人数<br />流失倍率：累计流失人数/第一天流失人数</div>
+                  <div><i class="el-icon-question" /></div>
+                </el-tooltip>
+              </div>
+            </template>
+            <template v-slot="{ row }">
+              <div>
+                <span class="font" style="color:#2C9841">流失人数:</span>
+                <span>{{ row && row.day_info && row.day_info[dayIdx] && row.day_info[dayIdx].loss_count ?
+                    row.day_info[dayIdx].loss_count : '-'
+                }}</span>
+              </div>
+              <div>
+                <span class="font" style="color:#EB4315">流失倍率:</span>
+                <span>{{ row && row.day_info && row.day_info[dayIdx] && row.day_info[dayIdx].loss_rate ?
+                    row.day_info[dayIdx].loss_rate : '-'
+                }}</span>
+              </div>
+            </template>
+          </ux-table-column>
+        </ux-grid>
+        <div class="pagination" v-show="pagination.total > 0">
+          <el-pagination background :current-page="pagination.page" @current-change="handleCurrentChange" layout="prev, pager, next" :page-count='Number(pagination.pages)' />
+        </div>
+      </div>
+      <!-- E 明细表 detailsTable -->
+    <!-- E 表 -->
+  </div>
+</template>
+<script>
+import datePicker from '@/components/assembly/screen/datePicker.vue'
+import _lodash from 'lodash'
+
+export default {
+  components: { datePicker },
+  data () {
+    const DEFAULT_TIME = [this.$getDay(-30, false), this.$getDay(0, false)]
+    return {
+      default_time: DEFAULT_TIME,
+      reset: false,
+      height: '',
+      pageLoading: false,
+
+      system_enterprise: [], // 企微主体数据
+      enterpriseList: [], // 企微主体数据
+      enterprise: {}, // 当前选择的企微信息
+
+      chartLoading: false,
+      myChart: null,
+      chartDataList: [],
+      legendList: [
+        { name: '消耗', key: 'paid', color: '#2983DF', selectFlag: true },
+        { name: '3天流失人数', key: 'third_loss_count', color: '#EB4315', selectFlag: true },
+        { name: '7天流失人数', key: 'seventh_loss_count', color: '#84CDFC', selectFlag: true },
+        { name: '15天流失人数', key: 'fifteenth_loss_count', color: '#00B38A', selectFlag: true },
+        { name: '30天流失人数', key: 'thirtieth_loss_count', color: '#AED570', selectFlag: true },
+        { name: '累计流失人数', key: 'loss_count', color: '#7366FF', selectFlag: true },
+      ],
+      percentFields: Object.freeze([]),
+      // percentFields: Object.freeze(['首日roi', '3天倍率', '7天倍率', '15天倍率', '30天倍率']),
+
+      summaryLoading: false,
+      summaryTableCol: [],
+      detailLoading: false,
+      detailsTableCol: [],
+      detailsTableColDays: [],
+      pagination: {
+        page: 1,
+        page_size: 20,
+        pages: 0,
+        total: 0,
+      },
+      filter: {
+        time: DEFAULT_TIME, // 自定义日期
+        corpid: '', // 企微主体
+        sort_field: 'paid', // 排序字段 - 默认值
+        sort_type: 'desc', // 升序/降序
+      },
+    }
+  },
+  computed: {
+    // 当前"时间"列是否展示的为"时间段" => 是时间段 默认排序"消耗"、非时间段 默认排序时间
+    isShowTimes() {
+      // (企微主体)
+      if (this.filter.corpid) {
+        return false
+      } else {
+        return true
+      }
+    },
+  },
+  created () {
+    this.initTableHeight()
+    this.handleInitCorpOptions()
+    this.handleGetChart()
+    this.handleGetSummaryList()
+    this.handleGetList()
+  },
+  beforeDestroy () {
+    this.myChart && this.myChart.clear()
+  },
+  methods: {
+    initTableHeight() {
+      this.height = document.documentElement.clientHeight - 200 > 400 ? document.documentElement.clientHeight - 200 : 400
+    },
+    // 获取汇总表数据
+    async handleGetSummaryList() {
+      console.log('handleGetSummaryList => ',)
+      try {
+        this.summaryLoading = true
+        const params = {
+          start_date: this.filter.time[0],
+          end_date: this.filter.time[1],
+          corpid: this.filter.corpid,
+        }
+        const url = `${this.URL.BASEURL}${this.URL.dataBoard_loseUser_summary}`
+        const { data: res = {} } = await this.$axios.get(url, { params })
+        if (res && res.errno == 0) {
+          // res.rst.header[0].fixed = 'left' // 前2列固定左侧
+          // res.rst.header[1].fixed = 'left' // 前2列固定左侧
+          const summaryTableCol = []
+          res.rst.header.forEach(item => {
+            if (item.name && item.name.length > 6) { // 长字符宽度
+              item['min_width'] = item.name.length * 20
+            }
+            summaryTableCol.push(item) // 收集普通表头
+          })
+          this.summaryTableCol = Object.freeze(summaryTableCol)
+          await this.$nextTick()
+          const summaryTableList = Array.isArray(res.rst.data) ? res.rst.data : [res.rst.data]
+          this.$refs.summaryTable.reloadData(summaryTableList)
+        } else if (res.errno != 4002) {
+          this.$message.warning(res.err)
+          this.$refs.summaryTable.reloadData([])
+        }
+      } catch (error) {
+        console.log(error)
+        this.$refs.summaryTable.reloadData([])
+      } finally {
+        this.summaryLoading = false
+      }
+    },
+    // 获取列表数据
+    async handleGetList() {
+      console.log('handleGetList => ',)
+      try {
+        this.detailLoading = true
+        const params = {
+          corpid: this.filter.corpid,
+          page: this.pagination.page,
+          page_size: this.pagination.page_size,
+          start_date: this.filter.time[0],
+          end_date: this.filter.time[1],
+          sort_field: this.filter.sort_field,
+          sort_type: this.filter.sort_type,
+        }
+        const url = `${this.URL.BASEURL}${this.URL.dataBoard_loseUser_account}`
+        const { data: res = {} } = await this.$axios.get(url, { params })
+        if (res && res.errno == 0) {
+          res.rst.extra[0].fixed = 'left' // 前2列固定左侧
+          res.rst.extra[1].fixed = 'left' // 前2列固定左侧
+          const detailsTableCol = []
+          const detailsTableColDays = []
+          res.rst.extra.forEach(item => {
+            if (item.name.includes('DAY')) { // 收集 DAY1、DAY2...表头
+              detailsTableColDays.push(item)
+            } else { // 普通表头
+              if (item.name && item.name.length > 6) { // 长字符宽度
+                item['min_width'] = item.name.length * 20
+              }
+              if (item.column === 'ref_date') { // 时间（日期）列宽度
+                item['min_width'] = this.isShowTimes ? 200 : 140
+              }
+              detailsTableCol.push(item) // 收集普通表头
+            }
+          })
+          this.detailsTableCol = Object.freeze(detailsTableCol)
+          this.detailsTableColDays = Object.freeze(detailsTableColDays)
+          await this.$nextTick()
+          const detailsTableList = Array.isArray(res.rst.data) ? res.rst.data : []
+          this.$refs.detailsTable.reloadData(detailsTableList)
+          this.pagination.total = res.rst.pageInfo.total
+          this.pagination.pages = res.rst.pageInfo.pages
+        } else if (res.errno != 4002) {
+          this.$message.warning(res.err)
+          this.$refs.detailsTable.reloadData([])
+          this.pagination.total = 0
+          this.pagination.pages = 0
+        }
+      } catch (error) {
+        console.log(error)
+        this.$refs.detailsTable.reloadData([])
+        this.pagination.total = 0
+        this.pagination.pages = 0
+      } finally {
+        this.detailLoading = false
+      }
+    },
+    // 获取折线图数据
+    async handleGetChart() {
+      console.log('handleGetChart => ')
+      try {
+        this.chartLoading = true
+        const params = {
+          start_date: this.filter.time[0],
+          end_date: this.filter.time[1],
+          corpid: this.filter.corpid,
+        }
+        const url = `${this.URL.BASEURL}${this.URL.dataBoard_loseUser_curve}`
+        const { data: res = {} } = await this.$axios.get(url, { params })
+        if (res && res.errno == 0) {
+          this.chartDataList = Array.isArray(res.rst.data) ? res.rst.data : []
+          await this.$nextTick()
+          this.handleDrawChart()
+        } else if (res.errno != 4002) {
+          this.$message.warning(res.err)
+          this.chartDataList = []
+          await this.$nextTick()
+          this.myChart && this.myChart.clear()
+        }
+      } catch (error) {
+        console.log(error)
+        this.chartDataList = []
+        await this.$nextTick()
+        this.myChart && this.myChart.clear()
+      } finally {
+        this.chartLoading = false
+      }
+    },
+    // 绘制折线图
+    handleDrawChart() {
+      this.myChart && this.myChart.clear()
+      const _this = this;
+      const series = []
+      const yAxis = []
+      const xArr = this.chartDataList.map(v => v.expense_date)
+      this.legendList.forEach(item => {
+        if (item.selectFlag) {
+          yAxis.push({
+            type: "value",
+            name: '',
+            show: false,
+            position: 'left',
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              lineStyle: {
+                color: '#F2F2f2',
+                type: "dashed"
+              }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#F2F2f2'
+              }
+            },
+            nameTextStyle: {
+              color: "#999999",
+              fontSize: 13,
+            },
+            axisLabel: {
+              color: '#999999',
+              fontSize: 12,
+              show: true,
+              formatter: function(params) {
+                if (_this.percentFields.includes(item.name)) { // 百分比字段
+                  return `${_this.$formatNum(params)}%`
+                } else {
+                  return _this.$NumberHandle(params)
+                }
+              }
+            }
+          })
+
+          const data = this.chartDataList.map(v => v[item.key] || v[item.key] == 0 ? v[item.key] : '-')
+
+          series.push({
+            type: "line",
+            smooth: true,
+            name: item.name,
+            yAxisIndex: 0,
+            data,
+            lineStyle: {
+              width: 2
+            },
+            symbol: xArr.length == 1 ? 'emptyCircle' : 'none',
+            itemStyle: {
+              color: item.color,
+              borderType: "emptyCircle"
+            },
+          })
+        }
+      })
+      yAxis.forEach((item, index) => {
+        item.show = index == 0 ? true : false
+      })
+      series.forEach((item, index) => {
+        item.yAxisIndex = index
+      })
+
+      const option = {
+        title: '',
+        tooltip: {
+          trigger: 'axis',
+          show: true,
+          formatter: function(params) {
+            let result = `${params[0].name}<br/>`
+            params.forEach(item => {
+              if (_this.percentFields.includes(item.seriesName)) { // 百分比字段
+                result += `${item.marker}${item.seriesName}：${_this.$formatNum(item.value)}%<br/>`
+              } else {
+                result += `${item.marker}${item.seriesName}：${_this.$formatNum(item.value)}<br/>`
+              }
+            });
+            return result;
+          }
+        },
+        legend: {
+          itemWidth: 8,
+          itemHeight: 2,
+          icon: "plain",
+          show: false,
+          textStyle: {
+            fontSize: 12,
+            color: '#666666'
+          },
+        },
+        grid: {
+          top: '6%',
+          left: '5%',
+          right: '4%',
+          bottom: '16%',
+          containLabel: false
+        },
+        xAxis: [{
+          type: "category",
+          data: xArr,
+          boundaryGap: false,//设置数据从头开始
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#F2F2f2'
+            }
+          },
+          axisTick: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          },
+          axisLabel: {
+            color: '#666',
+            fontSize: 10,
+            rotate: 30,
+          },
+        }],
+        yAxis,
+        series,
+      }
+      // 初始化echarts实例
+      this.myChart = this.myChart ? this.myChart : this.$echarts.init(document.getElementById('trend'));
+      this.myChart.setOption(option);
+    },
+    // 监听点击图例
+    async onClickLegend(currentItem, index) {
+      const arr = this.legendList.filter(v => v.selectFlag)
+      if (arr.length == 1 && arr[0].key == currentItem.key) {
+        return this.$message.warning('至少存在一条曲线')
+      }
+      const item = _lodash.cloneDeep(currentItem)
+      item.selectFlag = !item.selectFlag
+      this.$set(this.legendList, index, item)
+      await this.$nextTick()
+      this.handleDrawChart()
+    },
+
+    // S 企微主体数据
+    onChangeCorpidSystem(val) {//二级联选择器
+      if (val.length < 1) {
+        this.enterprise = {}
+      } else {
+        this.enterpriseList.forEach((item) => {
+          item.manage_corp_list.forEach((item1) => {
+            if (item1.corpid == val[1]) {
+              this.enterprise = item1
+            }
+          })
+        })
+      }
+      this.filter.corpid = this.enterprise.corpid || ''
+      this.handleGetChart()
+      this.handleGetSummaryList()
+      this.filter.sort_field = this.isShowTimes ? 'paid' : 'expense_date'
+      this.filter.sort_type = 'desc'
+      this.pagination.page = 1
+      this.handleGetList()
+    },
+    onChangeCorpid(val) {
+      if (!val) {
+        this.enterprise = {}
+      } else {
+        const res = this.enterpriseList.filter(v => v.corpid == val)[0];
+        this.enterprise = res || {}
+      }
+      this.filter.corpid = enterprise.corpid || ''
+      this.handleGetChart()
+      this.handleGetSummaryList()
+      this.filter.sort_field = this.isShowTimes ? 'paid' : 'expense_date'
+      this.filter.sort_type = 'desc'
+      this.pagination.page = 1
+      this.handleGetList()
+    },
+    // 企业筛选初始化
+    handleInitCorpOptions() {
+      if (this.$cookie.getCookie('isSuperManage') == 1) {//系统管理员
+        const enterpriseList = this.$store.state.authorize_corpList;
+        enterpriseList.forEach(item => {//为了el-cascader更改props
+          item.self_id = item.group_id.toString();
+          item.self_name = item.group_name;
+          item.manage_corp_list.forEach(item1 => {
+            item1.self_id = item1.corpid;
+            item1.self_name = item1.corp_name;
+          })
+        });
+        this.enterpriseList = enterpriseList
+      } else {
+        this.enterpriseList = this.$store.state.authorize_corpList;
+      }
+    },
+    // E 企微主体数据
+
+    // 监听时间筛选变化
+    onChangeTime(time) {
+      this.filter.time = Array.isArray(time) ? time : []
+      this.handleGetChart()
+      this.handleGetSummaryList()
+      this.pagination.page = 1
+      this.handleGetList()
+    },
+    // 监听当前页变化
+    handleCurrentChange(currentPage) {
+      this.handleGetChart()
+      this.handleGetSummaryList()
+      this.pagination.page = currentPage
+      this.handleGetList()
+    },
+    // 监听点击"确定(搜索)"按钮
+    onClickSearch() {
+      this.handleGetChart()
+      this.handleGetSummaryList()
+      this.pagination.page = 1
+      this.handleGetList()
+    },
+    // 监听排序变化
+    onClickSort(sort_field, sort_type) {
+      // sort_type：升序asc、降序desc
+      if (this.filter.sort_field === sort_field) {
+        if (this.filter.sort_type === sort_type) {
+          // 点击的是当前排序字段 && 是当前排序类型 => 重置 取消排序
+          this.filter.sort_field = this.isShowTimes ? 'paid' : 'expense_date'
+          this.filter.sort_type = 'desc'
+        } else {
+          // 点击的是当前排序字段 && 非当前排序类型 => 设置排序类型
+          this.filter.sort_type = sort_type
+        }
+      } else {
+        // 点击的不是当前排序字段 => 设置排序字段和类型
+        this.filter.sort_field = sort_field
+        this.filter.sort_type = sort_type
+      }
+      // 后端排序 => 获取最新数据
+      this.pagination.page = 1
+      this.handleGetList()
+      // 获取其他表数据
+      this.handleGetChart()
+      this.handleGetSummaryList()
+    },
+    // 监听点击"重置"按钮
+    onClickReset() {
+      this.reset = !this.reset
+      this.filter.time = this.default_time
+      this.system_enterprise = []
+      this.enterprise = {}
+      this.filter.corpid = ''
+      this.filter.sort_field = 'paid'
+      this.filter.sort_type = 'desc'
+      this.pagination.page = 1
+      this.handleGetChart()
+      this.handleGetSummaryList()
+      this.handleGetList()
+    },
+    // 监听点击"导出"按钮
+    async onClickExport() {
+      console.log('onClickExport => ')
+      if (!this.pagination.total) return this.$message.warning('暂无数据可导出')
+      try {
+        this.pageLoading = true
+        const url = {
+          summary: '',
+          detail: '',
+        }
+        const params = {
+          start_date: this.filter.time[0],
+          end_date: this.filter.time[1],
+          corpid: this.filter.corpid,
+        }
+
+        url.summary = `${this.URL.BASEURL}${this.URL.dataBoard_loseUser_summary}`
+        url.detail = `${this.URL.BASEURL}${this.URL.dataBoard_loseUser_account}`
+
+        const [{ data: summaryRes = {} }, { data: detailRes = {} }] = await Promise.all([
+          this.$axios.get(url.summary, { params }),
+          this.$axios.get(url.detail, {
+            params: {
+              ...params,
+              sort_field: this.filter.sort_field,
+              sort_type: this.filter.sort_type,
+              page: 1,
+              page_size: this.$store.state.exportNumber,
+            }
+          })
+        ])
+        if ((summaryRes && summaryRes.errno == 0) && (detailRes && detailRes.errno == 0)) {
+          this.handleExport({
+            summaryData: summaryRes.rst,
+            detailData: detailRes.rst,
+          })
+        } else if (summaryRes.errno != 4002 || detailRes.errno != 4002) {
+          this.$message.warning(summaryRes.err)
+          this.$message.warning(detailRes.err)
+        }
+      } catch (error) {
+        console.log(error)
+        this.$message.warning('导出失败，请重试')
+      } finally {
+        this.pageLoading = false
+      }
+    },
+    // 执行导出逻辑
+    handleExport({ summaryData = {}, detailData = {} }) {
+      let daysData = []
+      let tHeader = []
+      let filterVal = []
+      let tableDatas = []
+
+      daysData = detailData.extra.filter(item => item.name.includes('DAY'))
+
+      summaryData.header.forEach(h => {
+        if (h.name === '时间') {
+          h.column = 'ref_date'
+        } else if (h.name === '企微主体') {
+          h.column = 'corp_name'
+        }
+      })
+
+      summaryData.data['ref_date'] = '汇总'
+      summaryData.data['corp_name'] = '汇总'
+      detailData.data.forEach((item) => {
+        item.ref_date = `${item.expense_date}${item.expense_date_end ? (' ~ ' + item.expense_date_end) : ''}`
+        // item.corp_name = item.corp_name
+        daysData.forEach((day, idx) => {
+          item[day.column] = `流失人数: ${item && item.day_info && item.day_info[idx] && (item.day_info[idx].loss_count || item.day_info[idx].loss_count == 0) ? item.day_info[idx].loss_count : '-'}  流失倍率: ${item && item.day_info && item.day_info[idx] && (item.day_info[idx].loss_rate || item.day_info[idx].loss_rate == 0) ? item.day_info[idx].loss_rate : '-'}`
+        })
+      })
+
+      tHeader = [
+        ...summaryData.header.map(h => h.name),
+        ...daysData.map(d => d.name),
+      ]
+
+      filterVal = [
+        ...summaryData.header.map(h => h.column),
+        ...daysData.map(d => d.column),
+      ]
+
+      tableDatas = [
+        summaryData.data,
+        ...detailData.data,
+      ]
+
+      const excelDatas = [
+        {
+          tHeader, // sheet表一头部
+          filterVal, // 表一的数据字段
+          tableDatas, // 表一的整体json数据
+          sheetName: ''// 表一的sheet名字
+        }
+      ]
+      this.$exportOrder({ excelDatas, name: `用户流失趋势（导出时间：${this.$getDay(0)}）` })
+    },
+    getHeaderCellStyle() {
+      return { backgroundColor: '#FFFFFF !important', border: 'none!important' }
+    },
+  }
+}
+</script>
+<style lang="scss">
+.loseUserTrends-wrap .detailsTable {
+  .elx-table.elx-editable.size--mini .elx-body--column,
+  .elx-table.size--mini .elx-body--column.col--ellipsis,
+  .elx-table.size--mini .elx-footer--column.col--ellipsis {
+    height: 120px !important;
+  }
+  .elx-table.size--mini .elx-body--column.col--ellipsis>.elx-cell,
+  .elx-table.size--mini .elx-footer--column.col--ellipsis>.elx-cell {
+    max-height: initial !important;
+  }
+}
+</style>
+<style lang="scss" scoped>
+.loseUserTrends-wrap {
+  min-width: 1125px;
+}
+.screenBox {
+  position: relative;
+  background: #fff;
+  padding: 5px 20px;
+}
+.mt-10 {
+  margin-top: 10px;
+}
+.ml-10 {
+  margin-left: 10px;
+}
+.filter-wrap {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  padding-bottom: 10px;
+  & > div {
+    margin: 0 10px 10px 0;
+  }
+  & > button {
+    margin: -10px 0 0 10px;
+  }
+  .el-button+.el-button {
+    margin-left: 10px;
+  }
+}
+.trendBox {
+  background: #ffffff;
+  padding: 22px 23px;
+  position: relative;
+  .noData {
+    position: absolute;
+    top: 100px;
+    left: 0;
+    right: 0;
+    margin: auto;
+  }
+  .legendBox {
+    display: flex;
+    align-items: center;
+    .legendItem {
+      color: #333333;
+      font-size: 14px;
+      line-height: 20px;
+      display: flex;
+      align-items: center;
+      margin-right: 30px;
+      cursor: pointer;
+      user-select: none;
+    }
+  }
+}
+.summaryTable {
+  margin-top: 10px;
+}
+.detailsTable {
+  margin-top: 10px;
+}
+.sort-wrap {
+  display: flex;
+  flex-direction: column;
+  i {
+    cursor: pointer;
+    &.active {
+      color: #32B38A;
+    }
+  }
+  i:first-child {
+    margin-bottom: -3px;
+  }
+  i:last-child {
+    margin-top: -3px;
+  }
+}
+</style>

project/src/router/allRouter.js

@@ -68,6 +68,8 @@ const accountManage = () => import(/* webpackChunkName: 'accountManage' */ '@/co
 const miniProManage = () => import(/* webpackChunkName: 'miniProManage' */ '@/components/manage/miniProManage/miniProManage.vue')
 // 企微助手 - 剧集管理
 const playletManage = () => import(/* webpackChunkName: 'playletManage' */ '@/components/manage/playletManage/playletManage.vue')
+// 数据看板 - 平台推广数据
+const platformPromote = () => import(/* webpackChunkName: 'platformPromote' */ '@/components/dataBoard/platformPromote/index.vue')
 
 // name与菜单配置的页面路由一致
 // meta下isData:true为数据看板,否则为助手
@@ -569,6 +571,17 @@ export var allRouter = [
         }
       },
       {
+        path: 'platformPromote',
+        name: 'platformPromote',
+        component: platformPromote,
+        meta: {
+          keepAlive: false,
+          isLogin: true,
+          title: '平台推广数据',
+          isData: true
+        }
+      },
+      {
         path: 'populariz',
         name: 'populariz',
         component: populariz,