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

<template>
   <div class="layout-padding">
    <div class="overview">
      <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 14px;">
            <div class="top-info">
              <div class="title">流失概况</div>
              <div class="aside">
                <div class="data-source-status">数据源状态: Demo数据</div>
                <el-button class="goto-smart-operation" type="primary" link>前往智能运营发短信
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M10.6667 4.66699L13.3334 7.33366L10.6667 10.0003" stroke="#167AF0" stroke-width="1.5"
                      stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M2.66671 12.6663V8.33301C2.66671 7.78071 3.11441 7.33301 3.66671 7.33301H13.3334"
                      stroke="#167AF0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                  </svg>
                </el-button>
              </div>
            </div>
            <div class="top-content">
              <div class="el-card" style="flex: 1; overflow: visible;">
                <div class="content-item">
                  <div class="content-item-left">
                    <ProgressRing 
                      :progress="0.7223"
                      :size="111"
                      background-color="rgba(239, 239, 239, 1)"
                      progress-color="rgba(0, 188, 113, 1)"
                      :stroke-width="15"
                      :soft-corner="true"
                    />
                  </div>
                  <div class="content-item-right">
                    <div class="content-item-title">当周卸载流失设备数</div>
                    <div class="content-item-value">38</div>
                    <div class="content-item-percent">环比<span>-74.23%</span>
                      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <mask id="mask0_611_555" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="14"
                          height="14">
                          <rect width="14" height="14" fill="#D9D9D9" />
                        </mask>
                        <g mask="url(#mask0_611_555)">
                          <path
                            d="M11.1702 4.43275C11.5204 4.43302 11.8046 4.71698 11.8047 5.06725L11.8041 10.7783C11.8041 11.1287 11.5201 11.4128 11.1696 11.4128L5.45857 11.4134C5.10831 11.4133 4.82435 11.1291 4.82408 10.7789C4.82408 10.4284 5.1087 10.1438 5.45916 10.1438L9.6377 10.1438L2.69566 3.20174C2.44785 2.95393 2.44785 2.55215 2.69566 2.30434C2.94348 2.05652 3.34526 2.05652 3.59307 2.30434L10.5351 9.24637L10.5351 5.06783C10.5351 4.71737 10.8197 4.43275 11.1702 4.43275Z"
                            fill="#00BC71" />
                        </g>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
              <div class="el-card" style="flex: 1; overflow: visible;">
                <div class="content-item">
                  <div class="content-item-left">
                    <ProgressRing 
                      :progress="0.38"
                      :size="111"
                      background-color="rgba(239, 239, 239, 1)"
                      progress-color="rgba(230, 66, 66, 1)"
                      :stroke-width="15"
                      :soft-corner="true"
                    />
                  </div>
                  <div class="content-item-right">
                    <div class="content-item-title">当周卸载召回设备数</div>
                    <div class="content-item-value">38</div>
                    <div class="content-item-percent">
                      环比<span>+74.23%</span>
                      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <mask id="mask0_611_558" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="14"
                          height="14">
                          <rect width="14" height="14" transform="matrix(1 0 0 -1 0 14)" fill="#D9D9D9" />
                        </mask>
                        <g mask="url(#mask0_611_558)">
                          <path
                            d="M11.1702 9.56725C11.5204 9.56698 11.8046 9.28302 11.8047 8.93275L11.8041 3.22173C11.8041 2.87127 11.5201 2.58723 11.1696 2.58723L5.45857 2.58665C5.10831 2.58668 4.82435 2.87093 4.82408 3.22114C4.82408 3.5716 5.1087 3.85622 5.45916 3.85622L9.6377 3.85622L2.69566 10.7983C2.44785 11.0461 2.44785 11.4479 2.69566 11.6957C2.94348 11.9435 3.34526 11.9435 3.59307 11.6957L10.5351 4.75363L10.5351 8.93217C10.5351 9.28263 10.8197 9.56725 11.1702 9.56725Z"
                            fill="#E64242" />
                        </g>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </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">
            <div class="trend-container">
              <div class="title">流失趋势</div>
              <div class="tabs">
                <div class="tabs-item" :class="{ active: activeTab === 'churnTrend' }" @click="handleTabClick('churnTrend')">卸载流失设备</div>
                <div class="tabs-item" :class="{ active: activeTab === 'recallTrend' }" @click="handleTabClick('recallTrend')">卸载召回设备</div>
              </div>
              <!-- 折线图 -->
              <div class="chart-container">
                <LineChart :data="currentChartData" :color="'#167af0'" :title="currentChartTitle" height="270px"
                  :smooth="false" :area-style="true" />
                <div class="echarts-name">{{currentChartTitle}}</div>
              </div>
              <el-divider style="margin: 30px 0; background: rgba(230, 230, 230, 1);"/>
              <div class="table-container">
                <div class="btn-toggle-table" :class="{ 'hide-table': hideTable }" @click="hideTable = !hideTable">
                  {{ hideTable ? '展开' : '收起' }}明细数据<svg 
                    width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M10.5 8.75L7 5.25L3.5 8.75" stroke="#167AF0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </div>

                <el-table class="statistics-table" :data="state.dataList" row-key="date" style="width: 100%"
                  border :cell-style="tableStyle.cellStyle"
                  :header-cell-style="tableStyle.headerCellStyle"
                  v-if="!hideTable"
                  >
                  <el-table-column :label="'日期'" prop="date" show-overflow-tooltip></el-table-column>
                  <el-table-column :label="'卸载流失设备'" :formatter="statusFormatter" prop="churn" show-overflow-tooltip></el-table-column>
                  <el-table-column :label="'卸载召回设备'" :formatter="statusFormatter" prop="recall" show-overflow-tooltip></el-table-column>
                </el-table>

                <pagination 
                  v-if="!hideTable"
                  @current-change="currentChangeHandle" 
                  @size-change="sizeChangeHandle" 
                  v-bind="state.pagination">
                </pagination>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
   </div>
</template>

<script lang="ts" name="churnOverview" setup>
import LineChart from './echarts/LineChart.vue'
import ProgressRing from '../echarts/ProgressRing.vue'
import { BasicTableProps, useTable } from '/@/hooks/table';
import { ref, computed, reactive } from 'vue'

// 流失数据
const churnData = ref([
  { name: '流失设备', value: 38, itemStyle: { color: 'rgba(0, 188, 113, 1)' } },
  { name: '其他', value: 62, itemStyle: { color: 'rgba(239, 239, 239, 1)' } }
])

// 召回数据
const recallData = ref([
  { name: '召回设备', value: 38, itemStyle: { color: 'rgba(230, 66, 66, 1)' } },
  { name: '其他', value: 62, itemStyle: { color: 'rgba(239, 239, 239, 1)' } }
])

// 流失趋势数据
const churnTrendData = ref([
  { date: '2025-01-01', value: 25 },
  { date: '2025-01-02', value: 32 },
  { date: '2025-01-03', value: 28 },
  { date: '2025-01-04', value: 45 },
  { date: '2025-01-05', value: 38 },
  { date: '2025-01-06', value: 42 },
  { date: '2025-01-07', value: 35 },
  { date: '2025-01-08', value: 48 },
  { date: '2025-01-09', value: 52 },
  { date: '2025-01-10', value: 39 },
  { date: '2025-01-11', value: 44 },
  { date: '2025-01-12', value: 37 },
  { date: '2025-01-13', value: 41 },
  { date: '2025-01-14', value: 46 }
])

// 召回趋势数据
const recallTrendData = ref([
  { date: '2025-01-01', value: 15 },
  { date: '2025-01-02', value: 22 },
  { date: '2025-01-03', value: 18 },
  { date: '2025-01-04', value: 35 },
  { date: '2025-01-05', value: 28 },
  { date: '2025-01-06', value: 32 },
  { date: '2025-01-07', value: 25 },
  { date: '2025-01-08', value: 38 },
  { date: '2025-01-09', value: 42 },
  { date: '2025-01-10', value: 29 },
  { date: '2025-01-11', value: 34 },
  { date: '2025-01-12', value: 27 },
  { date: '2025-01-13', value: 31 },
  { date: '2025-01-14', value: 36 }
])

const activeTab = ref('churnTrend')

// 计算当前图表数据
const currentChartData = computed(() => {
  return activeTab.value === 'churnTrend' ? churnTrendData.value : recallTrendData.value
})

// 计算当前图表标题
const currentChartTitle = computed(() => {
  return activeTab.value === 'churnTrend' ? '卸载流失设备' : '卸载召回设备'
})

const handleTabClick = (tab: string) => {
  activeTab.value = tab
} 

// 表格数据
const hideTable = ref(false);
const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {
    ip: '',
  },
  pageList: () => Promise.resolve([]),
  pagination: {
    current: 1,
    size: 10,
    total: 0,
    pageSizes: [5, 10, 20, 50, 100]
  },
  dataList: [
    {
      date: '2025-01-01',
      churn: 10,
      recall: 20
    },
    {
      date: '2025-01-02',
      churn: 15,
      recall: 25
    },
    {
      date: '2025-01-03',
      churn: 20,
      recall: 30
    },
    {
      date: '2025-01-04',
      churn: 25,
      recall: 35
    }
  ]
});
const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state);
const statusFormatter = (row: any, column: any, cellValue: any, index: any) => {
  return cellValue || '--';
}

</script>
<style scoped lang="scss">
svg {
  vertical-align: middle;
  margin: 0 0 0 12px;
}
.overview {
  font-family: Source Han Sans SC;
  color: rgba(18, 18, 18, 1);
}

.top-info {
  color: rgba(18, 18, 18, 1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;


  .title {
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    padding: 4px 0;
  }

  .aside {
    display: flex;
  }

  .data-source-status {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: rgba(18, 18, 18, 1);
    padding: 4px 16px 4px 0;
  }

  .goto-smart-operation {
    padding: 4px 12px;
    border-radius: 4px;
    border: 1px solid rgba(22, 122, 240, 1);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: rgba(22, 122, 240, 1);
  }

}

.top-content {
  display: flex;
  gap: 20px;

  .content-item {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1;
    padding: 27.5px;
    justify-content: center;
  }

  .content-item-left {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 30px;
  }

  .content-item-right {
    // flex: 1;
  }

  .content-item-title {
    color: rgba(18, 18, 18, 1);
    font-weight: 400;
    font-size: 15px;
    line-height: 20px;
    margin-bottom: 12px;
  }

  .content-item-value {
    font-weight: 500;
    font-style: Medium;
    font-size: 28px;
    margin-bottom: 16px;
    line-height: 41px;
  }

  .content-item-percent {
    font-weight: 400;
    font-size: 14px;
    vertical-align: middle;
    line-height: 20px;
  }

  .content-item-percent span {
    color: rgba(0, 188, 113, 1);
  }
}

.trend-container {
  padding: 10px 14px;
  .title {
    line-height: 19px;
    font-weight: 500;
    font-size: 16px;
    padding-left: 12px;
    position: relative;
    margin-bottom: 53px;
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 14px;
      background: rgba(22, 122, 240, 1);
    }
  }

  .tabs {
    display: flex;
    margin-left: 85px;
    .tabs-item {
      padding: 0 12px;
      height: 32px;
      line-height: 30px;
      border: 1px solid rgba(22, 122, 240, 1);
      text-align: center;
      color: rgba(22, 122, 240, 1);
      cursor: pointer;
      &.active {
        background: rgba(22, 122, 240, 1);
        color: #ffffff;
      }
    }
  }

  .chart-container {
    margin: 20px 85px 0;
    text-align: center;
  }

  .echarts-name {
    display: inline-block;
    margin: 28px auto 0;
    padding-left: 16px;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: rgba(18, 18, 18, 1);
    position: relative;
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 8px;
      height: 8px;
      background: rgba(22, 122, 240, 1);
      border-radius: 50%;
    }
  }

  .table-container {
    padding: 0 85px;
    
    .btn-toggle-table {
      font-weight: 500;
      font-size: 14px;
      line-height: 20px;
      color: rgba(22, 122, 240, 1);
      margin-bottom: 20px;
      cursor: pointer;
      svg {
        transition: transform 0.3s ease-in-out;
      }
      &.hide-table svg {
        transform: rotate(-180deg);
      }
    }

    .table-container {
      margin-top: 20px;
    }

  }

}
</style>