feat: 投手数据 - 新增"3/7天倍率"&"使用客服"

project/src/components/assembly/screen/colPopover.vue

@@ -10,7 +10,7 @@
     <template v-else>
       <el-popover
         placement="top-start"
-        width="200"
+        :width="width || 200"
         trigger="hover">
         <div v-for="(item, i) in list" :key="i">
           {{ item }}
@@ -37,7 +37,11 @@ export default {
     maxLength: { // 最多显示的条数 超出显示省略号
       type: Number,
       default: () => 5,
-    }
+    },
+    width: { // popover 宽度
+      type: Number,
+      default: () => 200
+    },
   },
 
 }

project/src/components/dataBoard/throwPerson/throwPersonPuton.vue

@@ -50,7 +50,7 @@
         </div>
       </div>
     </div>
-    <ux-grid class="uxGridBox" ref="plxTable" :border="false" @row-click="() => { return }"
+    <ux-grid class="throwPersonPuton-list" ref="plxTable" :border="false" @row-click="() => { return }"
       :header-cell-style="headerColor" :height="height" show-footer-overflow="tooltip" show-overflow="tooltip"
       size="mini">
       <ux-table-column v-for="item in desCol" :key="item.prop" :resizable="true" :field="item.prop" :title="item.label"
@@ -68,6 +68,16 @@
         </template>
         <template v-slot="{ row }">
           <span v-if="item.prop === 'account_name'" :class="sort_field == item.prop ? 'sortFieldStyle' : ''">{{ row[item.prop] }}</span>
+
+          <!-- S 使用客服 -->
+          <div v-else-if="item.prop === 'user_list_show'">
+            <template v-if="row['user_list_show'] && row['user_list_show'].length">
+              <colPopover :list="row['user_list_show']" :maxLength="4" :width="280" />
+            </template>
+            <span v-else> - </span>
+          </div>
+          <!-- E 使用客服 -->
+
           <span v-else :class="sort_field == item.prop ? 'sortFieldStyle' : ''">{{ row[item.prop] || row[item.prop] == 0 ? $formatNum(row[item.prop]) : '-' }}</span>
         </template>
       </ux-table-column>
@@ -82,8 +92,10 @@
 <script>
 import datePicker from '@/components/assembly/screen/datePicker.vue'
 import selfChannel from '@/components/assembly/screen/channel.vue'
+import colPopover from '@/components/assembly/screen/colPopover.vue'
+
 export default {
-  components: { datePicker, selfChannel },
+  components: { datePicker, selfChannel, colPopover },
   data () {
     return {
       dataLoading: false,
@@ -151,6 +163,7 @@ export default {
         { prop: "playletTitle", label: "剧集", min_width: 160, fixed: 'left' },
         { prop: "official_account_name", label: "公众号", min_width: 160 },
         { prop: "account_name", label: "投放账号", min_width: 160 },
+        { prop: "user_list_show", label: "使用客服", min_width: 260 },
         { prop: "user_name", label: "投手", min_width: 160 },
         { prop: "start_date", label: "开始日期", min_width: 160 },
         { prop: "end_date", label: "截止日期", min_width: 160 },
@@ -162,6 +175,8 @@ export default {
         { prop: "first_day_roi", label: "首日ROI", notes: '首日ROI=当日新用户充值之和/累计消耗' },
         { prop: "profile", label: "总毛利额", notes: '总毛利额=累计充值-累计消耗' },
         { prop: "recall_rate", label: "回本率%", notes: '回本率=累计充值/累计消耗' },
+        { prop: "three_days_rate", label: "3天倍率" },
+        { prop: "seven_days_rate", label: "7天倍率" },
       ],
       height: '',
       tagType: 2,
@@ -285,6 +300,15 @@ export default {
         var res = res.data
         this.loading = false
         if (res && res.errno == 0) {
+
+          res.rst.data.forEach(row => {
+            if (row.user_list && Array.isArray(row.user_list) && row.user_list.length) { // 使用客服
+              row.user_list_show = row.user_list.map(u => `${u.user_name}(${u.corp_name})`)
+            } else if (!row.user_list || !Array.isArray(row.user_list) || !row.user_list.length) {
+              row.user_list_show = []
+            }
+          })
+
           if (type == 'export') {
             this.exportEvent(res.rst.data)
           } else {
@@ -372,6 +396,21 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+.throwPersonPuton-list {
+  .elx-table.elx-editable.size--mini .elx-body--column,
+  .elx-table.size--mini .elx-body--column.col--ellipsis,
+  .elx-table.size--mini .elx-footer--column.col--ellipsis {
+    height: 120px !important;
+  }
+  .elx-table.size--mini .elx-body--column.col--ellipsis>.elx-cell,
+  .elx-table.size--mini .elx-footer--column.col--ellipsis>.elx-cell {
+    max-height: initial !important;
+  }
+}
+</style>
+
 <style lang="scss" scoped>
 /deep/ .common-screen-label {
   flex-shrink: 0;