update: ai营销数据统计

src/components/dm-new-rule/ruleFilter.vue

@@ -107,10 +107,13 @@ export default {
     this.getDataList();
   },
   watch: {
-    memberCrowdWidgetId(val) {
-      if (val) {
-        this.echoFlag = true;
-        this.getEchoData();
+    memberCrowdWidgetId: {
+      immediate: true,
+      handler(val) {
+        if (val) {
+          this.echoFlag = true;
+          this.getEchoData();
+        }
       }
     },
     hideId(val) {

src/service/api/aiApi.js

@@ -58,6 +58,7 @@ export const getOutBound = params => requests('/api-marketing/statistics/out-bou
 export const getIntentionLabel = params => requests('/api-marketing/statistics/intention-label', params, true, false, 'get');
 export const getBillAnalysis = params => requests('/api-marketing/statistics/bill-quality-analysis', params, true, false, 'get');
 export const getCallDuration = params => requests('/api-marketing/statistics/call-duration', params, true, false, 'get');
+export const getComparativeData = params => requests('/api-marketing/statistics/comparative-statistics', params, true, false, 'get');
 
 // 人群规则回显
 export const getMemberCrowd = params => requests('/api-plug/query-member-crowd-new', params, true);

src/utils/index.js

@@ -375,7 +375,9 @@ export const getTimesByReq = (str, type = 1) => {
  */
 export const numFormat = function(num) {
   if (typeof num != 'number') {
-    console.error('numFormat Arguments TypeError: Arguments type is not number');
+    // if (process.env.NODE_ENV == 'development') {
+    //   console.error('numFormat Arguments TypeError: Arguments type is not number');
+    // }
     return '--';
   }
   return num.toString().replace(/\d+/, n => {

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

@@ -2,38 +2,50 @@
   <div class="ai-data-report">
     <div class="report-module">
       <dm-sub-title>活动信息</dm-sub-title>
-      <activity-info @flag="getFlag"></activity-info>
+      <activity-info @flag="getFlag" @filterJson="getFilterJson"></activity-info>
     </div>
     <div class="report-module">
       <dm-sub-title> AI外呼数据<span class="title-tip">数据实时更新</span> </dm-sub-title>
-      <ai-data :ai-data-show="aiDataShow"></ai-data>
+      <ai-data :ai-data-show="flags"></ai-data>
     </div>
-    <div class="report-module">
+    <div class="report-module" v-if="flags.analyseFlag == 1">
       <dm-sub-title> 活动转化数据<span class="title-tip">数据每天更新 1 次</span> </dm-sub-title>
-      <conversion></conversion>
+      <conversion :member-type="flags.memberType" :filter-json="filterJson"></conversion>
     </div>
   </div>
 </template>
 
 <script>
-// import G2 from '@antv/g2';
 import ActivityInfo from './ai-data-report/activity-info.vue';
 import AiData from './ai-data-report/ai-data.vue';
 import Conversion from './ai-data-report/conversion.vue';
+// 开启活动分析时，活动信息中展示分析天数
+
+// 开启活动分析时，AI外呼数据中展示活动费用
+// 发送挂机短信时，AI外呼数据中展示短信发送总数
+
+// 开启活动分析时，展示活动转化数据
+// 会员类型为0时，活动分析中对比项支持会员类型、会员等级、金字塔会员分层
+// 会员类型为1时，活动分析对比项支持客户分组
 export default {
   name: 'AiDataReport',
   components: { ActivityInfo, AiData, Conversion },
   data() {
     return {
-      aiDataShow: {
-        analyseFlag: 0,
-        smsFlag: 0
-      }
+      flags: {
+        memberType: 0, // 0会员筛选1会员分组
+        analyseFlag: 0, // 活动分析 1开启0关闭
+        smsFlag: 0 // 发送挂机短信 1是0否
+      },
+      filterJson: '' // 人群规则选择器id
     };
   },
   methods: {
     getFlag(flag) {
-      this.aiDataShow = flag;
+      this.flags = flag;
+    },
+    getFilterJson(filterJson) {
+      this.filterJson = filterJson;
     }
   }
 };

src/views/ai/ai-data-report/activity-info.vue

@@ -30,14 +30,14 @@
     </div>
     <div class="member-rule">
       <div class="member-rule-title">人群规则：</div>
-      <div class="member-rule-list" v-if="activityInfo.memberType == 0">
-        <div class="member-rule-item">{{ memberRule || '--' }}</div>
-      </div>
+      <ruleFilter class="member-rule-list" v-if="activityInfo.memberType == 0" :memberCrowdWidgetId="activityInfo.filterJson" />
+      <!-- <gic-new-member-group :visible="true" :defalt-selected="memberRule.selectValue"></gic-new-member-group> -->
       <div class="member-rule-list" v-if="activityInfo.memberType == 1">
-        <div class="member-rule-item">生日范围：3月1日-3月31日</div>
+        {{ memberRule }}
+        <!-- <div class="member-rule-item">生日范围：3月1日-3月31日</div>
         <div class="member-rule-item">会员等级：银卡、金卡</div>
         <div class="member-rule-item">金字塔会员分层：核心会员31-90天、潜力会员31-90天</div>
-        <div class="member-rule-item">会员服务门店：会员分组(华南直营、华北直营)</div>
+        <div class="member-rule-item">会员服务门店：会员分组(华南直营、华北直营)</div> -->
       </div>
     </div>
   </div>
@@ -45,13 +45,14 @@
 
 <script>
 import { formatDateTimeByType } from '@/utils/index.js';
-import { getActivityInfo, getMemberCrowd, getGroupByIds } from '@/service/api/aiApi.js';
+import { getActivityInfo, getGroupByIds } from '@/service/api/aiApi.js';
 import gicNewMemberGroup from '@/components/dm-new-member-group/index.vue';
+import ruleFilter from '@/components/dm-new-rule/ruleFilter.vue';
 
 // TODO 回显人群规则
 export default {
   name: 'ActivityInfo',
-  components: { gicNewMemberGroup },
+  components: { gicNewMemberGroup, ruleFilter },
   data() {
     return {
       activityInfo: {},
@@ -84,17 +85,14 @@ export default {
           analyseFlag: this.activityInfo.analyseFlag, //1开0关 开启活动分析开关
           smsFlag: this.activityInfo.smsFlag //挂机短信1是0否
         });
+        this.$emit('filterJson', this.activityInfo.filterJson);
         this.getMemberCrowd();
       });
     },
     getMemberCrowd() {
-      const { memberType, filterJson, sceneJson } = this.activityInfo;
-      if (memberType == 0) {
-        getMemberCrowd({ memberCrowdWidgetId: filterJson }).then(res => {
-          this.memberRule = res.result.filterFrontShow;
-        });
-      } else if (memberType == 1) {
-        getGroupByIds({ memberTagGroupIds: sceneJson }).then(res => {
+      const { memberType, filterJson } = this.activityInfo;
+      if (memberType == 1) {
+        getGroupByIds({ memberTagGroupIds: filterJson }).then(res => {
           this.memberRule = res.result.filterFrontShow;
         });
       }
@@ -132,18 +130,24 @@ export default {
   }
   .member-rule-list {
     margin-top: 10px;
-    padding: 16px;
-    background: #f7f8fa;
-    border-radius: 4px;
-    .member-rule-item {
-      font-size: 14px;
-      font-weight: 400;
-      color: #303133;
-      line-height: 20px;
-      + .member-rule-item {
-        margin-top: 10px;
+    /deep/ .echo-member-group {
+      padding: 15px;
+      .subTitle {
+        display: none;
       }
     }
+    // padding: 16px;
+    // background: #f7f8fa;
+    // border-radius: 4px;
+    // .member-rule-item {
+    //   font-size: 14px;
+    //   font-weight: 400;
+    //   color: #303133;
+    //   line-height: 20px;
+    //   + .member-rule-item {
+    //     margin-top: 10px;
+    //   }
+    // }
   }
 }
 </style>

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

@@ -25,7 +25,11 @@
       <el-col :span="8">
         <div class="chart-title">通话时长</div>
         <div class="chart-box">
-          <div id="chart-duration"></div>
+          <div id="chart-duration">
+            <svg aria-hidden="true" class="no-data-icon">
+              <use xlink:href="#icon-cp-no-data"></use>
+            </svg>
+          </div>
           <div v-if="talkTimeData.length > 0">
             <div class="talk-legend" v-for="el in talkTimeData" :key="el.color">
               <i class="talk-legend-icon" :style="{ background: el.color }"></i>
@@ -34,9 +38,6 @@
               <span class="talk-legend-percent">{{ el.percent }}</span>
             </div>
           </div>
-          <svg v-else aria-hidden="true" class="no-data-icon">
-            <use xlink:href="#icon-cp-no-data"></use>
-          </svg>
         </div>
       </el-col>
     </el-row>
@@ -179,7 +180,7 @@ export default {
             const value = this.targetData[item.key];
             switch (item.type) {
               case 'number':
-                item.value = typeof value == 'number' ? numFormat(value) : '--';
+                item.value = numFormat(value);
                 break;
               case 'time':
                 item.value = '--';
@@ -191,7 +192,7 @@ export default {
                 }
                 break;
               case 'amount':
-                item.value = typeof value == 'number' ? numFormat(value) : '--';
+                item.value = numFormat(value);
                 break;
               case 'rate':
                 item.value = value == null ? '--' : value;
@@ -233,6 +234,7 @@ export default {
             percent: originData[el + '_proportion']
           };
         });
+        document.getElementById('chart-tag').innerHTML = '';
         const chart = new G2.Chart({
           container: 'chart-tag',
           forceFit: true,
@@ -283,6 +285,7 @@ export default {
           { label: '线路问题', count: originData['count_4'], percent: originData['4_proportion'] },
           { label: '被叫问题', count: originData['count_5'], percent: originData['5_proportion'] }
         ];
+        document.getElementById('chart-record').innerHTML = '';
         const chart = new G2.Chart({
           container: 'chart-record',
           forceFit: true,
@@ -354,7 +357,7 @@ export default {
           value: '通话数量', // value字段
           retains: ['type'] // 保留字段集，默认为除fields以外的所有字段
         });
-
+        document.getElementById('chart-duration').innerHTML = '';
         const chart = new G2.Chart({
           container: 'chart-duration',
           forceFit: true,