data-marketing-platform/src/views/count/churn/portrait/index.vue

<template>
  <div class="layout-padding">
    <el-row :gutter="12" style="padding: 0 12px 12px; row-gap: 12px;">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <LayoutHeader title="卸载画像" :style="{ marginBottom: '0' }">
          <template #tooltip-content>
            敬请期待
          </template>
          <template #content>
            <div class="content">
              <div class="select-form">
                <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M33 15H15V30H33V15Z" fill="#167AF0" stroke="#167AF0" stroke-width="2" stroke-linejoin="round" />
                  <path d="M20 35L24 30L28 35" stroke="#167AF0" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round" />
                  <path d="M18 25L21.0967 22.034L23.5345 24.3738L29 19" stroke="white" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round" />
                  <path d="M13 15H35" stroke="#167AF0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                  <rect width="48" height="48" rx="14" fill="#167AF0" fill-opacity="0.1" />
                </svg>
                <el-form :inline="true" :model="form" label-width="0">
                  <el-form-item label="">
                    <el-select v-model="form.time" placeholder="" @change="selectTimeChange">
                      <el-option label="按周查看" value="week" />
                      <el-option label="按月查看" value="month" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="">
                    <el-date-picker disabled :type="'daterange'" style="width: 242px;" v-model="form.dateArray" range-separator="至" @change="selectDateChange"
                      start-placeholder="开始日期" end-placeholder="结束日期" :disabled-date="disabledDate" />
                  </el-form-item>
                  <el-form-item label="">
                    {{ form.time == 'week' ? '一周内' : '一月内' }}，卸载流失设备数<span>{{ uninstallCount.count }}</span>
                  </el-form-item>
                  <div class="tips">您可以根据下方的卸载画像报表，查看易卸载用户和高粘性用户的特征，了解什么样的用户留不住。</div>
                </el-form>
              </div>
            </div>
          </template>
        </LayoutHeader>
      </el-col>
    </el-row>

    <el-row :gutter="12" style="padding: 0 12px 12px; row-gap: 12px;">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-card shadow="none">
          <el-row :gutter="12" style="padding: 0 12px 0; row-gap: 12px;">
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <el-card shadow="none">
                <UserInfo title="易卸载用户特征" :type="true" :tags="easyTags" tips="卸载用户 vs. 活跃用户具备的明显特征，有以下特征的用户易卸载" style="margin-bottom: 24px;"></UserInfo>
                <DataTable :data="easyData" :columns="columns"></DataTable>
              </el-card>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <el-card shadow="none">
                <UserInfo title="不易卸载用户特征" :type="false" :tags="hardTags" tips="活跃用户 vs. 卸载用户具备的明显差异点，有以下特征的人群卸载可能性低" style="margin-bottom: 24px;"></UserInfo>
                <DataTable :data="hardData" :columns="columns"></DataTable>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="12" style="padding: 0 12px 12px; row-gap: 12px;">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-card shadow="none" style="padding: 10px 0 0;">
          <div class="card-header">
            <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect width="60" height="60" rx="14" fill="#167AF0" fill-opacity="0.1" />
              <path d="M16.667 19.167H43.3337" stroke="#2B65AA" stroke-width="2" stroke-linecap="round"
                stroke-linejoin="round" />
              <path d="M25 14.167H35" stroke="#2B65AA" stroke-width="2" stroke-linecap="round"
                stroke-linejoin="round" />
              <path
                d="M20 24.167H40V43.3337C40 44.7144 38.8807 45.8337 37.5 45.8337H22.5C21.1192 45.8337 20 44.7144 20 43.3337V24.167Z"
                stroke="#2B65AA" stroke-width="2" stroke-linejoin="round" />
              <path d="M26.667 30.833L33.3337 37.4997" stroke="#2B65AA" stroke-width="2" stroke-linecap="round"
                stroke-linejoin="round" />
              <path d="M33.3337 30.833L26.667 37.4997" stroke="#2B65AA" stroke-width="2" stroke-linecap="round"
                stroke-linejoin="round" />
            </svg>
            <div class="title">新用户卸载高峰阶段</div>
            <div class="tips">卸载用户集中在使用App<span>未使用</span>后卸载。（仅计算在当前时间周期内卸载，且卸载前30天内新安装App的设备。）</div>
          </div>
          <el-row :gutter="12" style="padding: 12px 12px 12px; row-gap: 12px;">
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <div style="padding-top: 8px;" v-if="echartsData.length > 0">
                <BarChart :data="echartsData" :is-multi-series="true" :series-names="seriesNames" title=""
                  style="height: 380px;" :chartHeight="380" />
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <div class="">
                <DataTable :data="usageTimeData" :columns="columns2"></DataTable>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import UserInfo from './components/UserInfo.vue';
import DataTable from './components/DataTable.vue';
import BarChart from '/@/views/count/components/BarChart.vue';
import { formatDate } from '/@/utils/formatTime';
import { uninstallPortrait } from '/@/api/count/churn';
import LayoutHeader from '/@/views/count/components/LayoutHeader.vue';

const columns = ref([
  { label: '用户特征', prop: 'name', width: '100px' },
  { prop: 'percent', type: 'percentDom' },
  { label: 'TGI', prop: 'tgi', width: '100px' },
  { label: '百分比', prop: 'percent', width: '100px' },
])

const columns2 = ref([
  { label: '卸载前使用App次数', prop: 'phase', width: '150px' },
  { prop: 'percent', type: 'percentDom' },
  { label: '百分比', prop: 'percent', width: '100px' },
  { label: '卸载用户数', prop: 'count', width: '100px' },
])

const form = ref({
  time: 'week',
  dateArray: [formatDate(new Date(new Date().setDate(new Date().getDate() - 15)), 'YYYY-mm-dd'), formatDate(new Date(new Date().setDate(new Date().getDate() - 9)), 'YYYY-mm-dd')]
})

const echartsData = ref<any[]>([])
const seriesNames = ref<string[]>(['卸载用户数']);
const easyData = ref<any[]>([])
const hardData = ref<any[]>([])
const usageTimeData = ref<any[]>([])// 使用次数
const uninstallCount = ref({
  count: 0,
})
const hardTags = ref<string[]>([])
const easyTags = ref<string[]>([])

const init = () => {
  uninstallPortrait({
    startDate: formatDate(new Date(form.value.dateArray[0]), 'YYYY-mm-dd'),
    endDate: formatDate(new Date(form.value.dateArray[1]), 'YYYY-mm-dd'),
    timeUnit: form.value.time,
  }).then(res => {
    uninstallCount.value = {
      count: res.data?.uninstallCount.count,
    }
    // if (res.data?.uninstallPortraitPhaseList) {
      const newData: any[] = [];
      easyData.value = [];
      hardData.value = [];
      easyTags.value = [];
      hardTags.value = [];

      usageTimeData.value = [];
      res.data?.uninstallPortraitPhaseList.forEach((item: any) => {
        newData.push({
          name: item.phase,
          values: [
            {
              value: item.count,
              percentage: item.rate + "%",
            }
          ]
        });
      });
      echartsData.value = newData;
      res.data?.uninstallPortraitPhaseList.forEach((item: any) => {
        usageTimeData.value.push({
          ...item,
          percent: item.rate,
        });
      })
    // }
    // if (res.data?.uninstallPortraitCharactList) {
      res.data?.uninstallPortraitCharactList.forEach((item: any) => {
        if(item.status == 0){
          easyData.value.push({
            ...item,
            percent: item.percent.substring(0, item.percent.length - 1),
          });
          easyTags.value = [...easyData.value].sort((a: any, b: any) => b.percent - a.percent).map((item: any) => item.name).slice(0, 3);
        } else {
          hardData.value.push({
            ...item,
            percent: item.percent.substring(0, item.percent.length - 1),
          });
          hardTags.value = [...hardData.value].sort((a: any, b: any) => b.percent - a.percent).map((item: any) => item.name).slice(0, 3);
        }
      })
    // }
  })
}

const selectTimeChange = () => {
  console.log(form.value.time);
  if(form.value.time == 'week'){
    form.value.dateArray = [formatDate(new Date(new Date().setDate(new Date().getDate() - 15)), 'YYYY-mm-dd'), formatDate(new Date(new Date().setDate(new Date().getDate() - 9)), 'YYYY-mm-dd')]
  } else {
    form.value.dateArray = [formatDate(new Date(new Date().setDate(new Date().getDate() - 39)), 'YYYY-mm-dd'), formatDate(new Date(new Date().setDate(new Date().getDate() - 9)), 'YYYY-mm-dd')]
  }
  init();
}

const selectDateChange = () => {
  console.log(form.value.dateArray);
  init();
}

const disabledDate = (time: Date) => {
  return time.getTime() > Date.now() - 86400000*9; 
}

onMounted(() => {
  init();
})

</script>
<style scoped lang="scss">
@import '/@/views/count/styles/common.scss';

svg {
  vertical-align: middle;
  margin: 0 0 0 12px;
}

.select-form-card {
  .card-title {
    color: rgba(18, 18, 18, 1);
    font-weight: 500;
    font-family: Source Han Sans SC;
  }
}

.select-form {
  margin-top: 20px;
  padding-left: 68px;
  position: relative;
  font-family: Source Han Sans SC;
  font-weight: 400;
  font-size: 14px;
  color: rgba(100, 100, 100, 1);
  line-height: 14px;

  :deep(.el-form-item--default) {
    margin-bottom: 12px;
  }

  span {
    color: rgba(22, 122, 240, 1);
    font-weight: 500;
    font-size: 20px;
    padding: 0 8px;
  }

  svg {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0 0 0 0!important;
  }

  .el-form-item__content {
    .el-select {
      width: 147px !important;
      min-width: 147px !important;
    }
  }
}

.card-header {
  padding-left: 92px;
  position: relative;
  margin-bottom: 12px;

  svg {
    position: absolute;
    top: 0;
    left: 0px;
  }

  .title {
    color: rgba(18, 18, 18, 1);
    font-family: Source Han Sans SC;
    font-weight: 500;
    font-size: 16px;
    line-height: 23px;
    margin-bottom: 12px;
  }

  .tips {
    color: rgba(100, 100, 100, 1);
    font-family: Source Han Sans SC;
    font-weight: 400;
    font-size: 12px;
    line-height: 100%;
    span {
      color: rgba(18, 18, 18, 1);
      font-weight: 500;
      font-size: 20px;
      padding: 0 8px;
    }
  }
}

.card-content {
  display: flex;
  gap: 12px;
  padding: 0px 12px;

  .chart-container {
    width: 100%;
    height: 300px;
  }
}
</style>