ss-crm-manage-web/src/views/Home/Comp/DialogSalerReportDetail.vue

<template>
  <Dialog title="详情" v-model="dialogVisible" width="1000px">
    <el-form :model="searchForm" label-width="0" inline>
      <el-form-item>
        <el-date-picker
          v-model="searchForm.period"
          type="daterange"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          start-placeholder="选择日期"
          end-placeholder="选择日期"
        />
      </el-form-item>
      <el-form-item>
        <el-tree-select
          v-model="searchForm.sourceId"
          :data="props.sourceOptions"
          :props="defaultProps"
          check-strictly
          node-key="sourceId"
          placeholder="请选择渠道"
        />
      </el-form-item>
      <el-form-item>
        <el-select v-model="searchForm.cartype" placeholder="选择驾照类型" clearable>
          <el-option
            v-for="item in props.cartypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button @click="handleSearch">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-tabs v-model="showPane" class="pb-10px">
      <el-tab-pane label="详细数据" :name="1">
        <el-table v-loading="loading" :data="tableList" border stripe>
          <el-table-column prop="sourceName" label="渠道名称" width="100" fixed="left" />
          <el-table-column prop="" label="新线索数" sortable />
          <el-table-column prop="" label="成交数" sortable />
          <el-table-column prop="" label="成交率" sortable />
          <el-table-column prop="" label="成交周期" sortable />
          <el-table-column prop="" label="毛利/单" sortable />
          <el-table-column prop="" label="支出/单" sortable />
          <el-table-column prop="" label="线索成本/条" sortable />
          <el-table-column prop="" label="净利润/单" sortable />
          <el-table-column label="总线索成本" prop="" sortable min-width="100" />
          <el-table-column label="总支出" prop="" sortable min-width="100" />
          <el-table-column label="总利润" prop="" sortable min-width="100" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="图表展示" :name="2" lazy>
        <el-row :gutter="20">
          <el-col :span="24" :offset="0">
            <el-checkbox-group v-model="showChannel" @change="setReportData">
              <el-checkbox v-for="(item, index) in channelArr" :key="index" :label="item" />
            </el-checkbox-group>
          </el-col>

          <el-col :span="12" :offset="0">
            <el-skeleton :loading="loading" animated>
              <Echart :options="echart1Option" width="100%" :height="400" />
            </el-skeleton>
          </el-col>
          <el-col :span="12" :offset="0">
            <Echart :options="echart2Option" width="100%" :height="400" />
          </el-col>
          <el-col :span="24" :offset="0">
            <Echart :options="echart3Option" width="100%" :height="400" />
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </Dialog>
</template>

<script setup name="DialogSalerReportDetail">
import { set } from 'lodash-es'
import * as reportApi from '@/api/home/reportSignRate'
import { removeNullField } from '@/utils'

const props = defineProps({
  cartypeOptions: {
    type: Array,
    default: () => []
  },
  sourceOptions: {
    type: Array,
    default: () => []
  }
})

const defaultProps = {
  children: 'children',
  label: 'sourceName',
  value: 'sourceId',
  isLeaf: 'leaf'
}

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const loading = ref(false)
const searchForm = ref({})

const showPane = ref(1)
const showChannel = ref([])

function handleReset() {
  searchForm.value = {
    nickname: undefined,
    period: []
  }
}

/** 打开弹窗 */
const open = async (info, queryInfo) => {
  showPane.value = 1
  dialogVisible.value = true
  dialogTitle.value = `销售详情-【${info.nickname}】`
  searchForm.value.period = queryInfo.period
  searchForm.value.cartype = queryInfo.cartype
  showChannel.value = [...channelArr]

  handleSearch()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

const tableList = ref([])

async function handleSearch() {
  loading.value = true
  try {
    setReportData()
    const data = await reportApi.getList(removeNullField(searchForm.value))
    tableList.value = data.map((item) => {
      const count = item.monthClueSignRateReportList.reduce(
        (pre, cur) => {
          return {
            signCount: pre.signCount + cur.clueSignNum,
            clueCount: pre.clueCount + cur.followClueNum
          }
        },
        { signCount: 0, clueCount: 0 }
      )
      const rate = count.clueCount > 0 ? ((count.signCount * 100) / count.clueCount).toFixed(2) : 0
      return {
        ...item,
        totalRate: `${rate}%(${count.signCount}/${count.clueCount})`,
        totalRateNum: rate
      }
    })
  } finally {
    loading.value = false
  }
}

const channelArr = ['美团', '高德', '线下渠道', '其他', '一点通', '抖音', '小红书', '宝典']

const echart1Option = ref({
  title: {
    text: '线索分布图'
  },
  radiusAxis: {},
  angleAxis: {},
  tooltip: {
    show: true,
    formatter: '{b0}-{a}: {c}'
  },
  polar: {},
  legend: {
    show: true
  }
})

const echart2Option = ref({
  title: {
    text: '成交分布图'
  },
  radiusAxis: {},
  angleAxis: {},
  tooltip: {
    show: true,
    formatter: '{b0}-{a}: {c}'
  },
  polar: {},
  legend: {
    show: true
  }
})

const echart3Option = ref({
  title: {
    text: '销售雷达图'
  },
  radar: {
    indicator: [
      { name: '成交周期' },
      { name: '毛利/单' },
      { name: '支出/单' },
      { name: '线索成本/条' },
      { name: '净利润/单' },
      { name: '线索总成本' },
      { name: '总支出' },
      { name: '总利润' }
    ]
  },
  legend: {
    show: true
  }
})

const setReportData = async () => {
  // const data = await HomeApi.getClueSignSignRate()

  set(echart1Option.value, 'radiusAxis', {
    type: 'category',
    data: showChannel.value,
    axisLabel: {
      margin: 5,
      fontSize: 10,
      interval: 0
    }
  })

  set(echart1Option.value, 'series', [
    {
      type: 'bar',
      data: [2, 2, 3, 4, 10, 22, 43, 141],
      coordinateSystem: 'polar',
      name: '高意向A',
      stack: 'a',
      emphasis: {
        focus: 'series'
      },
      label: {
        show: true,
        position: 'middle'
      }
    },
    {
      type: 'bar',
      data: [6, 6, 7, 8, 22, 14, 36, 128],
      coordinateSystem: 'polar',
      name: '中意向B',
      stack: 'a',
      emphasis: {
        focus: 'series'
      },
      label: {
        show: true,
        position: 'middle'
      }
    },
    {
      type: 'bar',
      data: [1, 4, 7, 11, 16, 42, 13, 42],
      coordinateSystem: 'polar',
      name: '低意向C',
      stack: 'a',
      emphasis: {
        focus: 'series'
      },
      label: {
        show: true,
        position: 'middle'
      }
    }
  ])

  set(echart2Option.value, 'radiusAxis', {
    type: 'category',
    data: showChannel.value,
    axisLabel: {
      margin: 5,
      fontSize: 10,
      interval: 0
    }
  })
  set(echart2Option.value, 'series', [
    {
      type: 'bar',
      data: [2, 2, 3, 4, 1, 11, 23, 41],
      coordinateSystem: 'polar',
      name: 'C1',
      stack: 'a',
      emphasis: {
        focus: 'series'
      },
      label: {
        show: true,
        position: 'middle'
      }
    },
    {
      type: 'bar',
      data: [6, 6, 7, 8, 12, 14, 6, 28],
      coordinateSystem: 'polar',
      name: 'C2',
      stack: 'a',
      emphasis: {
        focus: 'series'
      },
      label: {
        show: true,
        position: 'middle'
      }
    },
    {
      type: 'bar',
      data: [1, 4, 7, 1, 6, 2, 23, 14],
      coordinateSystem: 'polar',
      name: 'D/E/F',
      stack: 'a',
      emphasis: {
        focus: 'series'
      },
      label: {
        show: true,
        position: 'middle'
      }
    }
  ])
  set(echart3Option.value, 'series', [
    {
      type: 'radar',
      data: [
        {
          value: [5.5, 1000, 200, 51, 666, 12345, 1245, 65478],
          name: '平均',
          label: {
            show: true
          }
        },
        {
          value: [15, 800, 300, 66, 551, 23456, 2123, 25698],
          name: '当前',
          label: {
            show: true
          }
        }
      ]
    }
  ])
}
</script>

<style lang="scss" scoped></style>