axwen-test31 2.0.0

package/src/views/market/monitor/summary/components/channel-analysis-chart.vue

@@ -0,0 +1,738 @@
+<template>
+  <div class="activity-data">
+    <PartBody label="">
+      <div class="top" v-loading="labelInfoLoading">
+        <small-card label="渠道客户数" class="small-card" :class="smallCardClass(idx)"
+          v-for="(item, idx) in channelCountData" :key="idx" v-bind="item" @onClick='cardClick(idx, item)'
+          @onDetail="(emitsData) => onDetail(emitsData, item)"></small-card>
+      </div>
+
+      <div class="bottom">
+        <tab-content label="客户转化分析" class="chart" style="box-shadow: none;overflow: auto;">
+          <TheEcahrtFunctional ref="chartFunnel" v-bind="chartFunnelOption" class="chart"></TheEcahrtFunctional>
+        </tab-content>
+
+        <tab-content label="任务执行趋势" class="chart" style="box-shadow: none;overflow: auto;">
+          <template #header-right>
+            <div class="execution-trend-header-right">
+              <el-select v-model="dateType" style="width: 80px" @change="dateTypeChange">
+                <el-option v-for="item of dateTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
+              </el-select>
+              <div style="display: flex; align-items: center; gap: 4px">
+                <el-date-picker
+                  style="width: 130px"
+                  v-model="executeStartTime"
+                  type="date"
+                  value-format="yyyy-MM-dd"
+                  :clearable="false"
+                  align="right"
+                  :picker-options="pickerOptions">
+                </el-date-picker>
+                <span>至</span>
+                <el-date-picker
+                  style="width: 130px"
+                  v-model="executionTrendEndTime"
+                  type="date"
+                  value-format="yyyy-MM-dd"
+                  @change="executionTrendEndTimeChange"
+                  :clearable="false"
+                  align="right"
+                  :picker-options="pickerOptions">
+                </el-date-picker>
+              </div>
+            </div>
+          </template>
+          <Chart-line @datazoomChange="datazoomChange" ref="chartLine" class="chart"
+            :option="chartLineOption"></Chart-line>
+        </tab-content>
+      </div>
+      <div v-if="!notChannelAll" class="bottom">
+        <tab-content label="渠道类型占比" class="chart chart-desc" style="box-shadow: none;overflow: auto;">
+          <Chart-line ref="chartPie" :option="chartPieOption"></Chart-line>
+          <div class="desc">
+            <div class="desc-detail desc-summary">
+              <div class="label">渠道总数</div>
+              <div class="value">{{ chartPieOption.total | toThousandsMethods }}</div>
+            </div>
+            <div class="desc-detail" v-for="item in chartPieOption.chartPieDesc" :key="item.name">
+              <div class="label">
+                <i :style="{ 'background-color': item.channelColor }"></i>
+                {{ item.name }}
+              </div>
+              <div class="value">{{ item.value | toThousandsMethods }}</div>
+              <div class="rate">{{ (item.rate * 100).toFixed(2) }}%</div>
+            </div>
+          </div>
+        </tab-content>
+        <tab-content label="渠道成功率排名" v-if="!isDictShowFlag" v-loading="sortLoading" class="chart" style="box-shadow: none;overflow: auto;">
+          <ranking-list :columns="columns" :tableData="tableData"></ranking-list>
+        </tab-content>
+      </div>
+    </PartBody>
+
+    <tab-content v-if="notChannelAll" :label="currentChannel.channelTypeName" v-loading="sortLoading" class="chart"
+      style="box-shadow: none;overflow: auto;">
+      <yt-search :fields="[{ title: '节点名称', type: 'input', key: 'nodeName' }]" @submit="submit"
+        @reset="reset"></yt-search>
+      <el-table :data="singleChannelConfig.tableData" style="width: 100%">
+        <el-table-column v-for="item in singleChannelFields" :key="item.key" :prop="item.key" :label="item.title">
+          <template slot-scope="{row}">
+            <span v-if="['execSuccessRate', 'channelSuccessRate', 'natureSuccessRate'].includes(item.key)">{{ Number(row[item.key]).toFixed(2) }}%</span>
+            <span v-else-if="'cstNum' === item.key" style="cursor: pointer; color: #1664FF" @click="singleChannelCstNumClick(row)">{{ row[item.key] }}</span>
+            <span v-else-if="item.toThousands">{{ row[item.key] | toThousandsMethods }}</span>
+            <span v-else>{{ row[item.key] }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </tab-content>
+
+    <el-dialog width="80%" :title="tableConfig.tableNm" :visible.sync="outerVisible" append-to-body destroy-on-close>
+      <TheEffectTable label="渠道客户数详情" ref="TheEffectTable" v-if="outerVisible" @goCustomerPortal="goCustomerPortal"
+        v-bind="tableConfig" reserveSelection>
+      </TheEffectTable>
+      <el-dialog width="60%" :title="logConfig.title" :visible.sync="innerVisible" append-to-body>
+        <yt-table label="日志" ref="table" v-bind="logConfig" :autoload="false"></yt-table>
+      </el-dialog>
+    </el-dialog>
+
+    <CustomerList ref="customerList" />
+  </div>
+</template>
+
+<script>
+import { toThousands } from '@/utils'
+import TheEffectTable from '@/views/market-activity/config/the-effect-table.vue'
+
+import TabContent from './tab-content.vue'
+import SmallCard from './statistics-small-card.vue'
+import PartBody from './part-body.vue'
+import ChartParent from './chart-parent.vue'
+import RankingList from './ranking-list.vue'
+import ChartLine from './chart-line.vue'
+import ChartFunnel from './chart-funnel.vue'
+import TheEcahrtFunctional from '@/views/market-activity/config/the-echart-functional.vue'
+import {
+  getChannelCount,
+  getChannelCstByPage,
+  getBreachLog,
+  getChannelTypeCount,
+  getCustTendLine,
+  getCustAna,
+  getChannelSuccuessOrder,
+  getChannelTypeAna
+} from '@/api/template/template-active'
+import { mapState } from 'vuex'
+import CustomerList from './customer-list.vue'
+
+const channelIcon = require('@/assets/svg/activityCount.svg')
+export default {
+  components: {
+    PartBody,
+    SmallCard,
+    ChartParent,
+    TabContent,
+    RankingList,
+    ChartLine,
+    ChartFunnel,
+    TheEffectTable,
+    TheEcahrtFunctional,
+    CustomerList
+  },
+  props: ['actId','queryType', 'executeStartTime'],
+  data() {
+    return {
+      channelIcon,
+      columns: [
+        { label: '排名', prop: 'sort', width: 48 },
+        { label: '机构名称', prop: 'name', minWidth: 60, 'show-overflow-tooltip': true },
+        { label: '活动总数', prop: 'actCount', width: 60 },
+        { label: '活动覆盖数', prop: 'actCoverCstCount', width: 75 },
+      ],
+      channelCountData: [],
+      labelInfoLoading: false,
+      sortLoading: false,
+      tableData: [],
+      chartLineOption: {},
+      chartFunnelOption: {},
+      currentIdx: 0,
+      outerVisible: false,
+      innerVisible: false,
+      logConfig: {
+        title: '日志',
+        api: getBreachLog,
+        hasExport: false,
+        params: {
+          pkId: null
+        },
+        fields: [
+          { title: '序号', type: 'index', width: 60 },
+          { title: '时间', key: 'crtTm', },
+          { title: '触达方式', key: 'channelType', }
+        ]
+      },
+      singleChannelConfig: {
+        ref: 'singleChannel',
+        title: '列表',
+        api: getChannelTypeAna,
+
+        params: {
+          actId: null,
+          channelType: null,
+          queryType: null,
+        },
+        hasPagination: false,
+        hasExport: false,
+        beforeSearch: this.beforeSearch,
+        tableData: [],
+        hasTip: false
+      },
+      tableConfig: {
+        tableNm: '列表',
+        api: getChannelCstByPage,
+        defaultParams: {
+          channelType: null,
+          actId: null
+        },
+        headerBtns: ['khqz'],
+        defaultFields: [
+          // { title: '客户号', key: 'cstId', /**minWidth: 150**/ },
+          {
+            title: '触达日志', key: 'log', render: (h, { row }) => {
+              return (
+                <span style='color: #1664FF;cursor: pointer;'
+                  onClick={() => this.onLog(row.pkId)}
+                >日志</span>)
+            }
+          }
+
+        ],
+        isAnalysischart: true
+      },
+      chartPieOption: {},
+      currentChannel: {
+        channelType: 'all'
+      },
+      notChannelAll: false,
+      isDictShowFlag: false,
+      dateType: 'day',
+      dateTypeList: [{
+        label: '日',
+        value: 'day'
+      }, {
+        label: '周',
+        value: 'week'
+      }, {
+        label: '月',
+        value: 'month'
+      }, {
+        label: '季度',
+        value: 'quarter'
+      }],
+      nodeId: null, // nodeId 是用来跳转到"客户画像"需要的参数
+      executionTrendEndTime: '',
+      pickerOptions: {
+        disabledDate: (time) => {
+          return time.getTime() < new Date(`${this.executeStartTime} 00:00:00`).getTime()
+        }
+      }
+    }
+  },
+  computed: {
+    ...mapState(['config']),
+    smallCardClass() {
+      return idx => {
+        return this.currentIdx === idx ? 'small-card-active' : ''
+      }
+    },
+    channelAnalysisHide() {
+      return this.config.channelAnalysisHide && JSON.parse(this.config.channelAnalysisHide)
+    },
+    singleChannelFields() {
+      /**
+       * 渠道目标名称、执行成功率、渠道成功率、自然成功率
+       * 这四个字段可配置化隐藏
+       */
+      if (this.channelAnalysisHide) {
+        return [
+          { title: '节点名称', type: 'input', key: 'nodeName' },
+          { title: '客户数', key: 'cstNum', toThousands: true },
+          { title: '下发数', key: 'sendNum', toThousands: true },
+          { title: '执行数', key: 'execNum', toThousands: true },
+          { title: '触达数', key: 'breachNum', toThousands: true },
+          { title: '响应数', key: 'responseNum', toThousands: true }
+        ]
+      }
+      let fields = [
+        { title: '节点名称', type: 'input', key: 'nodeName' },
+        { title: '渠道目标名称', key: 'channelTargetName', minWidth: 120 },
+        { title: '客户数', key: 'cstNum', toThousands: true },
+        { title: '下发数', key: 'sendNum', toThousands: true },
+        { title: '执行数', key: 'execNum', toThousands: true },
+        { title: '执行成功率', key: 'execSuccessRate', },
+        { title: '触达数', key: 'breachNum', toThousands: true },
+        { title: '响应数', key: 'responseNum', toThousands: true },
+        // { title: '成功数', key: 'channelType', },
+        { title: '渠道成功率', key: 'channelSuccessRate', },
+        { title: '自然成功率', key: 'natureSuccessRate', }
+      ]
+      // 判断画布中渠道是否隐藏渠道目标
+      let isDictShowFlag = this.config.CHANNEL_TYPE_HIDDEN ? true : false
+      if (isDictShowFlag) {
+        fields = fields.filter(i => i.key !== 'channelName')
+      }
+      return fields
+    }
+  },
+  filters: {
+    toThousandsMethods: function (value) {
+      if (!value) return value
+      value = value - 0
+      return toThousands(value, false)
+    }
+  },
+  watch: {
+    queryType(newVal) {
+      this.singleChannelConfig.params.queryType = newVal
+    },
+    executeStartTime(newVal) {
+      let endTime = new Date(new Date(newVal).getTime() + 10 * 24 * 3600 * 1000)
+      this.executionTrendEndTime = `${endTime.getFullYear()}-${(endTime.getMonth() + 1).toString().padStart(2, '0')}-${endTime.getDate().toString().padStart(2, '0')}`
+    }
+  },
+  mounted() {
+    this.resetLoadList()
+  },
+  methods: {
+    resetLoadList () {
+      // 配置管理控制字段是否展示
+      this.isDictShowFlag = this.config.CHANNEL_SUCCESS_RATE ? true : false || false
+      // 判断画布中渠道是否隐藏渠道目标
+      let isDictShowFlag = this.config.CHANNEL_TYPE_HIDDEN ? true : false
+      if (isDictShowFlag) {
+        this.singleChannelConfig.fields = this.singleChannelConfig.fields.filter(i => i.key !== 'channelName')
+      }
+    },
+    cardClick(idx, item) {
+      this.currentChannel = { ...item }
+      this.currentIdx = idx
+
+      const { channelType } = item
+      this.singleChannelConfig.params = {
+        actId: this.actId,
+        channelType,
+        queryType: this.queryType
+      }
+      this.getData()
+
+      this.notChannelAll = channelType !== 'all' ? true : false
+
+      this.getCustAna({ channelType })// 客户转化分析
+      this.getCustTendLine({ channelType })// 任务执行趋势
+    },
+    submit(form) {
+      console.log(form)
+      this.singleChannelConfig.params.nodeName = form.nodeName
+      if (form.nodeName) {
+        this.getData()
+      }
+    },
+    reset() {
+      delete this.singleChannelConfig.params.nodeName
+      this.getData()
+    },
+    async getData() {
+      try {
+        const { actId, channelType } = this.singleChannelConfig.params
+        if (actId && channelType) {
+          const { data } = await getChannelTypeAna(this.singleChannelConfig.params)
+          this.singleChannelConfig.tableData = [...(data || [])]
+        }
+      } catch (e) {
+
+      }
+    },
+    beforeSearch(params) {
+      console.log(params, '123')
+      Object.assign(params.search,)
+      return { ...params, ...this.singleChannelConfig.params }
+    },
+    onDetail({ channelType, channelTypeName }, channelItem) {
+      this.nodeId = channelItem.nodeId
+      this.tableConfig.tableNm = channelTypeName
+
+      this.tableConfig.defaultParams = {
+        channelType,
+        actId: this.actId,
+        queryType:this.queryType
+      }
+      this.outerVisible = true
+    },
+    goCustomerPortal(total) {
+      this.outerVisible = false
+      this.innerVisible = false
+      
+      const searchPortal = {
+        "actId": this.actId,
+        "nodeId": this.nodeId,
+        "nodeType": "channel",
+        "toNodeId": "",
+        "actChannelXCstRecord": [],
+        "actXCstRecord": []
+      }
+
+      let query = {
+          portraitType: 'group',
+          total,
+          libId: '',
+          searchId: '',
+          from: 'canvas',
+          actId: this.actId,
+          searchPortal:JSON.stringify(searchPortal) 
+      }
+
+      this.$router.push({
+        name: 'sub-app/mp-cm/customerPortal',
+        query
+      })
+    },
+    async getCustAna({ channelType }) {
+      const params = {
+        actId: this.actId,
+        channelType,
+        queryType:this.queryType
+      }
+      const res = await getCustAna(params)
+      const list = res?.data?.map(item => item) || []
+
+      this.chartFunnelOption = {
+        list: [...list],
+        defaultList: [
+          { label: '营销', bg: '#5B8FF9', borderColor: '#ADC6FF', scale: 8, key: 'cstNum' },
+          { label: '下发', bg: '#6F63EA', borderColor: '#6F63EA', scale: 8, key: 'sendNum' },
+          { label: '执行', bg: '#5AD8A6', borderColor: '#85A5FF', scale: 8, key: "exeNum" },
+          { label: '触达', bg: '#5D7092', borderColor: '#597EF7', scale: 8, key: 'breahNum' },
+          { label: '响应', bg: '#F6BD16', borderColor: '#2F54EB', scale: 8, key: 'respondNum' }
+        ]
+      }
+    },
+    datazoomChange() {},
+    async getCustTendLine({ channelType }) {
+      let formatDate = this.$util.formatDate
+      const params = {
+        actId: this.actId,
+        channelType,
+        dateType: this.dateType,
+        queryType:this.queryType,
+        startDt: formatDate(this.executeStartTime),
+        endDt: formatDate(this.executionTrendEndTime)
+      }
+      const res = await getCustTendLine(params)
+      const xData = res?.data?.map(item => item.period)
+      const cstNumData = res?.data?.map(item => item.cstNum) // 客户数
+      const exNumData = res?.data?.map(item => item.exNum) // 执行人次
+      const breachNumData = res?.data?.map(item => item.breachNum)  // 触达人次
+      const respondNumData = res?.data?.map(item => item.respondNum)  // 响应人次
+      const sendNumNumData = res?.data?.map(item => item.sendNum) // 下发人次
+
+      const end = this.dateType === 'year' ? 90 : 30
+      const options = {
+        color: ['#5B8FF9', '#5AD8A6', '#5D7092', '#F6BD16'],
+        tooltip: {
+          trigger: 'axis'
+        },
+        dataZoom: [
+          {
+            type: 'inside',
+            startValue: 0,
+            endValue: 9,
+            zoomLock: true
+          },
+        ],
+        legend: {
+          bottom: '12',
+          itemHeight: '2'
+        },
+        grid: {
+          left: '3%',
+          right: '3%',
+          bottom: '10%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: true,
+          lineStyle: {
+            type: 'dashed',
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              width: 1,
+              type: 'solid',
+              color: '#333',
+              opacity: 0.5,
+            }
+          },
+          axisLabel: {
+            rotate: 60, // 设置标签旋转角度
+            interval: 0 // 设置标签显示的间隔，0 表示全部显示
+          },
+          axisTick: {
+            show: false,
+          },
+          data: xData
+        },
+        yAxis: [{
+          type: "value",
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: false // 将 y 轴的轴线隐藏
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed' // 设置为虚线
+            }
+          }
+        }],
+        series: [
+          {
+            name: '客户人次',
+            type: 'line',
+            data: cstNumData
+          },
+          {
+            name: '执行人次',
+            type: 'line',
+            data: exNumData
+          },
+          {
+            name: '触达人次',
+            type: 'line',
+            data: breachNumData
+          },
+          {
+            name: '响应人次',
+            type: 'line',
+            data: respondNumData
+          },
+          {
+            name: '下发人次',
+            type: 'line',
+            data: sendNumNumData
+          }
+        ]
+      };
+      this.chartLineOption = { ...options }
+      console.log('options---', options)
+      this.$nextTick(() => {
+        this.$refs.chartLine?.reInit(options)
+      })
+    },
+    async getChannelSuccuessOrder() {
+      const res = await getChannelSuccuessOrder(this.actId+`/${this.queryType}`)
+      const list = res?.data?.map((item, idx) => {
+        return {
+          ...item,
+          name: item.channelCnName,
+          percent: item.nSuccessRate,
+          sort: idx + 1
+        }
+      }) || []
+      this.tableData = [...list]
+    },
+
+    async getChannelCount() {
+      const res = await getChannelCount(this.actId+`/${this.queryType}`)
+      this.channelCountData = [...(res?.data || [])]
+      this.channelCountData.forEach(item => {
+        item.icon = channelIcon
+      })
+    },
+
+    onLog(pkId) {
+      this.logConfig.params = { pkId }
+      this.innerVisible = true
+      this.$nextTick(() => {
+        this.$refs.table.getData()
+      })
+    },
+    // 渠道类型占比
+    async getChannelTypeCount() {
+      const res = await getChannelTypeCount(this.actId+`/${this.queryType}`)
+      const numbers = res?.data?.map(item => (item.channelNum - 0))
+      const total = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
+      const color = ['#5B8FF9', '#5AD8A6', '#5D7092', '#F6BD16']
+      const list = res?.data?.map((item, idx) => {
+        return {
+          ...item,
+          name: item.channelTypeName,
+          value: item.channelNum,
+          rate: item.channelNum / total,
+          channelColor: color[idx]
+        }
+      }) || []
+
+      const options = {
+        color,
+        title: {
+        },
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          show: false
+        },
+        series: [
+          {
+            type: 'pie',
+            radius: ['40%', '70%'],
+            data: list || [
+              { value: 1048, name: 'Search Engine' },
+              { value: 735, name: 'Direct' },
+              { value: 580, name: 'Email' },
+              { value: 484, name: 'Union Ads' },
+              { value: 300, name: 'Video Ads' }
+            ]
+          }
+        ]
+      }
+
+      this.chartPieOption = { ...options, chartPieDesc: [...list], total }
+      this.$nextTick(() => {
+        this.$refs.chartPie?.reInit(options)
+      })
+    },
+
+    init() {
+      // 接口1
+      this.getChannelCount()// 卡片
+
+      // 接口2
+      this.getCustAna({ channelType: 'all' })// 客户转化分析
+      // 接口3
+      this.getCustTendLine({ channelType: 'all' })// 任务执行趋势
+
+      // 接口4
+      this.getChannelTypeCount()// 渠道类型占比
+      // 掊5
+      this.getChannelSuccuessOrder()// 渠道成功率排名
+      this.resetLoadList()
+    },
+    dateTypeChange() {
+      this.getCustTendLine({ channelType: this.currentChannel.channelType })
+    },
+    executionTrendEndTimeChange() {
+      this.getCustTendLine({ channelType: this.currentChannel.channelType })
+    },
+    async singleChannelCstNumClick(row) {
+      // console.log(row, this.currentChannel)
+      this.$refs.customerList.open(row)
+    }
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.activity-data {
+
+  .top {
+    margin-bottom: 12px;
+    display: flex;
+
+    .small-card {
+      flex: 1;
+      margin-right: 12px;
+      cursor: pointer;
+      max-width: 30%;
+    }
+
+    .small-card-active {
+      border: 1px solid #1664ff75;
+      border-bottom: 4px solid #1664FF;
+    }
+  }
+
+  .bottom {
+    display: flex;
+    margin-bottom: 12px;
+    height: 480px;
+
+    .chart {
+      flex: 1;
+      margin-right: 12px;
+
+      &:first-child {
+        flex: 0 0 40%;
+      }
+
+      &:nth-child(3n) {
+        margin-right: 0;
+      }
+    }
+
+    .chart-desc {
+      ::v-deep .tab-content-body {
+        display: flex;
+        flex-direction: column;
+      }
+    }
+
+    .desc {
+      flex: 1;
+      padding: 12px;
+
+      .desc-detail {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        line-height: 36px;
+        padding: 0 12px;
+        font-size: 12px;
+        color: #666666;
+        position: relative;
+
+        .label {
+          position: absolute;
+          left: 12px;
+          top: 50%;
+          transform: translateY(-50%);
+
+          i {
+            display: inline-block;
+            width: 10px;
+            height: 10px;
+            border-radius: 100%;
+            vertical-align: middle;
+            margin-right: 4px;
+          }
+        }
+
+        .value {
+          color: #333;
+        }
+
+        .rate {
+          margin-left: 36px;
+          font-family: D-DINExp;
+          color: #333;
+        }
+      }
+
+      .desc-detail.desc-summary {
+        border-bottom: 1px solid #F8F8FB;
+        font-family: PingFangSC-Semibold;
+        color: #333;
+        font-weight: 600;
+      }
+    }
+  }
+}
+
+.execution-trend-header-right {
+  display: flex;
+  align-items: center;
+}
+</style>