Merge branch 'feature/3月迭代' of http://git.gicdev.com/marketing-web/marketing into feature/3月迭代

src/views/ai/ai-data-detail.vue

@@ -3,7 +3,7 @@
     <dm-sub-title style="margin-bottom: 5px">客户明细</dm-sub-title>
     <div v-if="analyseFlag" class="page-tip">活动转化金额每天更新 1 次</div>
     <el-input v-model="search.search" @change="handleCurrentChange(1)" type="text" placeholder="请输入姓名/昵称/手机号/会员卡号" prefix-icon="el-icon-search" clearable class="search-bar"></el-input>
-    <el-table :data="tableData" v-loading="loading" tooltipEffect="light">
+    <el-table :data="tableData" v-loading="loading">
       <el-table-column label="基本信息" min-width="200px" show-overflow-tooltip fixed="left">
         <div slot-scope="{ row }" class="member-info">
           <img class="member-logo" v-if="row.memberImage" :src="row.memberImage" alt="" />

src/views/ai/ai-data-report/conversion.vue

@@ -29,14 +29,36 @@
       <el-table-column label="ROI" prop="ROI" min-width="70" :formatter="(row, col, val) => (val == null ? '--' : `1:${val}`)"></el-table-column>
     </el-table>
     <div class="chart-box">
-      <div class="chart-member-count" id="chart-member-count">
-        <div class="no-data">
-          <svg aria-hidden="true" class="no-data-icon">
-            <use xlink:href="#icon-cp-no-data"></use>
-          </svg>
-          暂无数据
+      <div class="chart-member-count" v-if="funnelData.hasData">
+        <div class="funnel">
+          <div class="funnel-item plan-count">
+            <p class="item-label">营销人数</p>
+            <p class="item-value">{{ numFormat(funnelData.marketingNumber) }}</p>
+          </div>
+          <div class="funnel-item target-count">
+            <p class="item-label">触达人数</p>
+            <p class="item-value">{{ numFormat(funnelData.reachNumber) }}</p>
+            <div class="item-rate">
+              <p class="rate-label">触达率</p>
+              <p class="rate-value">{{ funnelData.reachRate }}</p>
+            </div>
+          </div>
+          <div class="funnel-item change-count">
+            <p class="item-label">转化人数</p>
+            <p class="item-value">{{ numFormat(funnelData.conversionNumber) }}</p>
+            <div class="item-rate">
+              <p class="rate-label">转化率</p>
+              <p class="rate-value">{{ funnelData.conversionRate }}</p>
+            </div>
+          </div>
         </div>
       </div>
+      <div v-else class="no-data">
+        <svg aria-hidden="true" class="no-data-icon">
+          <use xlink:href="#icon-cp-no-data"></use>
+        </svg>
+        暂无数据
+      </div>
       <el-row :gutter="20" class="target-list">
         <el-col :span="index == 0 ? 24 : 12" v-for="(el, index) in targetList" :key="index">
           <target-group :data-list="el"></target-group>
@@ -47,8 +69,6 @@
 </template>
 
 <script>
-import G2 from '@antv/g2';
-import DataSet from '@antv/data-set';
 import { getPlanStatistics, getMemberCrowd, getComparativeData } from '@/service/api/aiApi.js';
 import { numFormat } from '@/utils/index.js';
 import TargetGroup from './target-group.vue';
@@ -71,6 +91,9 @@ export default {
       numFormat,
       activityId: '',
       planId: '',
+      funnelData: {
+        hasData: false
+      },
       targetList: [
         [
           {
@@ -176,81 +199,19 @@ export default {
           });
         });
 
-        if (targetData.marketingNumber == null && targetData.reachNumber == null && targetData.conversionNumber == null) {
-          return;
-        }
-        let data = [
-          { action: '营销人数', label: '营销率', count: targetData.marketingNumber, rate: '' },
-          { action: '触达人数', label: '触达率', count: targetData.reachNumber, rate: targetData.reachRate },
-          { action: '转化人数', label: '转化率', count: targetData.conversionNumber, rate: targetData.conversionRate }
-        ];
-        const totalCount = data.reduce((total, el) => (total += el.count), 0);
-        const dv = new DataSet.DataView().source(data);
-        dv.transform({
-          type: 'map',
-          callback(row) {
-            row.percent = row.count / totalCount;
-            return row;
-          }
-        });
-        data = dv.rows;
-        document.getElementById('chart-member-count').innerHTML = '';
-        const chart = new G2.Chart({
-          container: 'chart-member-count',
-          forceFit: true,
-          height: 224,
-          padding: [17, '30%', 0, '20%']
-        });
-        chart.source(data, {
-          percent: { nice: false }
-        });
-        chart.axis(false);
-        chart.legend(false);
-        chart.tooltip({ showTitle: false });
-        chart
-          .coord('rect')
-          .transpose()
-          .scale(1, -1);
-        chart
-          .intervalSymmetric()
-          .position('action*percent')
-          .shape('funnel')
-          .color('action', ['#2F54EB', '#597EF7', '#85A5FF'])
-          .label(
-            'label*rate',
-            (label, rate) => {
-              return rate ? label + '\n' + rate : '';
-            },
-            {
-              offset: 35,
-              labelLine: {
-                lineWidth: 1,
-                stroke: 'rgba(0, 0, 0, 0.15)'
-              }
-            }
-          )
-          .tooltip('action*count', (action, count) => {
-            return { name: action + ' ' + numFormat(count) };
-          });
-        data.forEach(obj => {
-          // 中间标签文本
-          chart.guide().text({
-            top: true,
-            position: {
-              action: obj.action,
-              percent: 'median'
-            },
-            content: obj.action + '\n' + numFormat(obj.count), // 显示的文本内容
-            style: {
-              fill: '#fff',
-              fontSize: '12',
-              textAlign: 'center',
-              shadowBlur: 2,
-              shadowColor: 'rgba(0, 0, 0, .45)'
-            }
-          });
-        });
-        chart.render();
+        this.funnelData = {
+          hasData: targetData.marketingNumber != null || targetData.reachNumber != null || targetData.conversionNumber != null,
+          // 营销人数
+          marketingNumber: targetData.marketingNumber,
+          // 触达人数
+          reachNumber: targetData.reachNumber,
+          // 触达率
+          reachRate: targetData.reachRate,
+          // 转化人数
+          conversionNumber: targetData.conversionNumber,
+          // 转化率
+          conversionRate: targetData.conversionRate
+        };
       });
     },
     getMemberCrowd() {
@@ -399,17 +360,80 @@ export default {
     min-height: 272px;
   }
   .chart-member-count {
-    text-align: center;
-    .no-data {
-      text-align: center;
-      color: #606266;
-      font-size: 14px;
-      .no-data-icon {
-        display: block;
-        width: 120px;
-        height: auto;
-        margin: 20px auto 0;
+    width: calc(50% - 100px);
+    margin-right: 100px;
+    .funnel {
+      margin: 16px auto 0;
+      width: 300px;
+      background-image: url('../../../assets/img/ai-chart.png');
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: 100%;
+      .funnel-item {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        padding-right: 17px;
+        .item-label {
+          font-size: 14px;
+          font-weight: 400;
+          color: #ffffff;
+          line-height: 20px;
+        }
+        .item-value {
+          margin-top: 4px;
+          font-size: 24px;
+          font-family: DINAlternate-Bold, DINAlternate;
+          font-weight: bold;
+          color: #ffffff;
+          line-height: 28px;
+        }
+        .item-rate {
+          position: absolute;
+          top: 0;
+          right: -16px;
+          z-index: 1;
+          transform: translate(100%, -50%);
+          .rate-label {
+            font-size: 14px;
+            font-weight: 400;
+            color: #606266;
+            line-height: 20px;
+          }
+          .rate-value {
+            margin-top: 4px;
+            font-size: 24px;
+            font-family: DINAlternate-Bold, DINAlternate;
+            font-weight: bold;
+            color: #303133;
+            line-height: 28px;
+          }
+        }
+      }
+      .plan-count {
+        height: 75px;
       }
+      .target-count {
+        height: 68px;
+      }
+      .change-count {
+        height: 69px;
+      }
+    }
+  }
+  .no-data {
+    width: 50%;
+    text-align: center;
+    color: #606266;
+    font-size: 14px;
+    transform: translateY(-40px);
+    .no-data-icon {
+      display: block;
+      width: 120px;
+      height: auto;
+      margin: 0 auto;
     }
   }
 }

src/views/ai/ai-data-report/target-group.vue

@@ -63,6 +63,7 @@ export default {
       .target-value-unit {
         font-size: 14px;
         line-height: 25px;
+        font-weight: 600;
       }
     }
   }

src/views/ai/manage.vue

@@ -337,7 +337,7 @@ export default {
   }
   .temp-detail-list {
     padding: 0 20px;
-    max-height: 50vh;
+    max-height: 616px;
     overflow-y: auto;
   }
 }