axwen-test31 2.0.0

package/src/views/market/monitor/summary/select-checkbox.vue

@@ -0,0 +1,116 @@
+<template>
+    <div>
+      <el-select
+        ref="select"
+        class="pop_select"
+        v-model="value"
+        multiple
+        placeholder="请选择名称"
+        popper-class="pop_select_down"
+        @change="selectChange"
+        collapse-tags
+      >
+        <el-checkbox v-model="isSelectAll" style="padding-left:18px" @change="selectAll">全选</el-checkbox>
+        <el-option v-for="item in options" :label="item[name]" :value="item[code]" :key="item[code]">
+          <span class="check"></span>
+          <span>{{item[name]}}</span>
+        </el-option>
+      </el-select>
+    </div>
+</template>
+
+<script>
+  export default {
+    name: "SelectCheckbox",
+    model:{
+      prop:'activeValue',
+      event:'change'
+    },
+    props: {
+        options: {
+            type: Array,
+            default: ()=> []
+        },
+        activeValue:{
+          type:Array,
+          default:()=>[]
+        },
+        name:{
+          type:String,
+          default:'nodeName'
+        },
+        code:{
+          type:String,
+          default:'nodeId'
+        }
+    },
+    data() {
+      const value = this.activeValue
+      return {
+        value,
+        isSelectAll: true
+      };
+    },
+    methods: {
+      selectAll(val) {
+        // 选中下拉框的目标内容
+        this.value = val ? this.options.map( item => item[this.code]) : []  ;
+        this.$emit('change',this.value)
+      },
+      selectChange(val) {
+        this.isSelectAll = val.length === this.options.length
+        this.$emit('change',val)
+      },
+    },
+    watch:{ 
+        activeValue(newV){
+          this.value = newV
+        }
+    }
+  };
+  </script>
+  
+<style lang="less" scoped>
+    .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
+        left: 1.25rem;
+        z-index: 1;
+        color: #fff;
+    }
+    .el-select-dropdown.is-multiple .el-select-dropdown__item.selected .check {
+        background-color: #409eff;
+    }
+    .el-select-dropdown.is-multiple .el-select-dropdown__item .check {
+        display: inline-block;
+        position: relative;
+        border: 1px solid #409eff;
+        border-radius: 2px;
+        box-sizing: border-box;
+        width: 0.875rem;
+        height: 0.875rem;
+        vertical-align: middle;
+        margin-right: 10px;
+        transition: border-color 0.25s cubic-bezier(0.71, -0.49, 0.26, 1.46),
+        background-color 0.25s cubic-bezier(0.71, -0.49, 0.26, 1.46);
+    }
+    /deep/.el-select__tags{
+      &:after{
+        // content : currentLabel;
+        // margin-left : 15px ; 
+        right : 2px;
+        top :0;
+        // border : 1px solid rgb(233, 233, 235) ; 
+        padding : 0px 5px ;
+        // background-color : rgb(244, 244, 245); ;
+        position : absolute;
+        line-height : 22px ;
+        border-radius : 3px;
+        color : rgb(144, 147, 153); 
+        font-size:12px;
+        margin : 2px 0 ;
+        background-color : rgba(0,0,0,.3) ;
+        color : #ffffff
+      } 
+    }
+</style>
+  
+  

package/src/views/market/monitor/summary/summary-analysis.vue

@@ -0,0 +1,547 @@
+<template>
+    <div class="summary-analysis">
+        <yt-button v-if="onlineList.length || offlineList.length" @click="handleSelect" type="primary" icon="el-icon-finished">渠道分析</yt-button>
+        <yt-dialog title="活动分析 - 渠道分析" v-model="dialog" append-to-body @confirm="handleConfirm">
+            <div class="summary-analysis-content">
+                <div class="summary-analysis-group">
+                    <p class="summary-analysis-group-title">线上渠道</p>
+                    <ul class="event-canvas summary-analysis-list">
+                        <li class="summary-analysis-item" v-for="channel in onlineList" :key="channel.id">
+                            <p>
+                                <el-checkbox
+                                    v-model="channel.checked"
+                                    :title="channel.nodeType === 'channel' ? channel.nodeName : '该节点不是渠道节点'"
+                                >{{ channel.nodeName }}</el-checkbox>
+                            </p>
+                        </li>
+                        <yt-empty class="mt2" v-if="onlineList.length === 0" />
+                    </ul>
+                </div>
+                <div class="summary-analysis-group">
+                    <p class="summary-analysis-group-title">线下渠道</p>
+                    <ul class="event-canvas summary-analysis-list">
+                        <li class="summary-analysis-item" v-for="channel in offlineList" :key="channel.id">
+                            <p>
+                                <el-checkbox
+                                    v-model="channel.checked"
+                                    :title="channel.nodeType === 'channel' ? channel.nodeName : '该节点不是渠道节点'"
+                                >{{ channel.nodeName }}</el-checkbox>
+                            </p>
+                        </li>
+                        <yt-empty class="mt2" v-if="offlineList.length === 0" />
+                    </ul>
+                </div>
+            </div>
+        </yt-dialog>
+        <yt-dialog append-to-body v-model="tableDialog" title="分析详情" :width="1300" :hasConfirm="false">
+            <p class="summary-analysis-group-title">线上渠道</p>
+            <div v-loading="loading">
+                <yt-table
+                    :fields="onlineFields"
+                    :data="onlineData"
+                    :hasPagination="false"
+                />
+            </div>
+            <p class="summary-analysis-group-title">线下渠道</p>
+            <div v-loading="loading">
+                <yt-table
+                    :fields="offlineFields"
+                    :data="offlineData"
+                    :hasPagination="false"
+                />
+            </div>
+        </yt-dialog>
+        <yt-dialog :title="'业务口径 - ' + tipDialogTitle"
+            v-model="tipDialog"
+            :hasConfirm="false"
+            :width="500"
+            @close="tipDialog = false"
+            append-to-body
+            class="customer-ediot-tree-detail-title"
+        >
+            <p class="customer-ediot-tree-detail-title-size">{{this.tipDialogContent}}</p>
+        </yt-dialog>
+    </div>
+</template>
+
+<script>
+import { getMonitorDetailAbTestAnalysis } from '@/api/market'
+
+export default {
+    data () {
+        return {
+            tipDialogTitle: '',
+            tipDialogContent: '',
+            tipDialog: false,
+            dialog: false,
+            tableDialog: false,
+            list: [],
+            dialogListonline: [
+                { label: 'channelExeNum', value: '【客户数】中渠道中台推送给渠道的客户数量' },
+                { label: 'exeNum', value: '【客户数】中渠道执行（推送给客户）的客户数量' },
+                { label: 'marketingSuccessNum', value: '【客户数】中达成营销目标的客户数量' },
+                { label: 'exeSuccessNum', value: '【执行数】中达成营销目标的客户数量' },
+                { label: 'marketingSuccessRate', value: '成功数 / 客户数 * 100%' },
+                { label: 'exeSuccessRate', value: '执行成功数 / 客户数 * 100%' },
+                { label: 'unExeSuccessRate', value: '未执行客户（客户数-执行数）达成营销目标的客户数量 / 未执行客户数量 * 100%' },
+                { label: 'increaseRate', value: '（执行成功率- 自然成功率） / 自然成功率 * 100%' }
+            ],
+            dialogListofflines: [
+                { label: 'exeNum', value: '【客户数】中渠道执行（跟进处理）的客户数量' },
+                { label: 'phoneInterviewNum', value: '【客户数】中有过电访或有过面访的客户数量' },
+                { label: 'phoneInterviewPercent', value: '电面访数 / 客户数 * 100%' },
+                { label: 'marketingSuccessNum', value: '【客户数】中达成营销目标的客户数量' },
+                { label: 'phoneInterviewSuccessNum', value: '【电面访数】中达成营销目标的客户数量' },
+                { label: 'marketingSuccessRate', value: '成功数 / 客户数 * 100%' },
+                { label: 'exeSuccessRate', value: '执行成功数 / 客户数 * 100%' },
+                { label: 'phoneInterviewSuccessRate', value: '电面访成功数 / 电面访数 * 100%' },
+                { label: 'unPhoneInterviewSuccessRate', value: '未执行客户（客户数-执行数）达成营销目标的客户数量 / 未执行客户数量 * 100%' },
+                { label: 'increaseRate', value: '（电面访成功率- 自然成功率） / 自然成功率* 100%' }
+            ],
+            onlineFields: [
+                {
+                    title: '节点名称',
+                    key: 'nodeName',
+                    width: 100
+                },
+                {
+                    title: '客户数',
+                    key: 'cstNum',
+                    width: 100
+                },
+                {
+                    title: '渠道执行数',
+                    key: 'channelExeNum',
+                    width: 120,
+                    table: {
+                        renderTitle: (h, column) => {
+                            return <div class='summary-analysis-render-title'>
+                                <span>{ column.title }</span>
+                                <el-tooltip content="【客户数】中渠道中台推送给渠道的客户数量" placement="top">
+                                    <i class='el-icon-question'></i>
+                                </el-tooltip>
+                            </div>
+                        }
+                    }
+                },
+                {
+                    title: '执行数',
+                    key: 'exeNum',
+                    width: 100,
+                    table: {
+                        renderTitle: (h, column) => {
+                            return <div class='summary-analysis-render-title'>
+                                <span>{ column.title }</span>
+                                <el-tooltip content="【客户数】中渠道执行（推送给客户）的客户数量" placement="top">
+                                    <i class='el-icon-question'></i>
+                                </el-tooltip>
+                            </div>
+                        }
+                    }
+                },
+                {
+                    title: '成功数',
+                    key: 'marketingSuccessNum',
+                    width: 100,
+                    table: {
+                        renderTitle: (h, column) => {
+                            return <div class='summary-analysis-render-title'>
+                                <span>{ column.title }</span>
+                                <el-tooltip content="【客户数】中达成营销目标的客户数量" placement="top">
+                                    <i class='el-icon-question'></i>
+                                </el-tooltip>
+                            </div>
+                        }
+                    }
+                },
+                {
+                    title: '执行成功数',
+                    key: 'exeSuccessNum',
+                    width: 120,
+                    table: {
+                        renderTitle: (h, column) => {
+                            return <div class='summary-analysis-render-title'>
+                                <span>{ column.title }</span>
+                                <el-tooltip content="【执行数】中达成营销目标的客户数量" placement="top">
+                                    <i class='el-icon-question'></i>
+                                </el-tooltip>
+                            </div>
+                        }
+                    }
+                },
+                {
+                    title: '成功率(%)',
+                    key: 'marketingSuccessRate',
+                    width: 120,
+                    table: {
+                        renderTitle: (h, column) => {
+                            return <div class='summary-analysis-render-title'>
+                                <span>{ column.title }</span>
+                                <el-tooltip content="成功数 / 客户数 * 100%" placement="top">
+                                    <i class='el-icon-question'></i>
+                                </el-tooltip>
+                            </div>
+                        }
+                    }
+                },
+                {
+                    title: '执行成功率(%)',
+                    key: 'exeSuccessRate',
+                    width: 140,
+                    table: {
+                        renderTitle: (h, column) => {
+                            return <div class='summary-analysis-render-title'>
+                                <span>{ column.title }</span>
+                                <el-tooltip content="执行成功数 / 执行数 * 100%" placement="top">
+                                    <i class='el-icon-question'></i>
+                                </el-tooltip>
+                            </div>
+                        }
+                    }
+                },
+                {
+                    title: '自然成功率(%)',
+                    key: 'unExeSuccessRate',
+                    width: 140,
+                    table: {
+                        renderTitle: (h, column) => {
+                            return <div class='summary-analysis-render-title'>
+                                <span>{ column.title }</span>
+                                <el-tooltip content="未执行客户（客户数-执行数）达成营销目标的客户数量 / 未执行客户数量 * 100%" placement="top">
+                                    <i class='el-icon-question'></i>
+                                </el-tooltip>
+                            </div>
+                        }
+                    }
+                },
+                {
+                    title: '提升效果(%)',
+                    key: 'increaseRate',
+                    width: 120,
+                    table: {
+                        renderTitle: (h, column) => {
+                            return <div class='summary-analysis-render-title'>
+                                <span>{ column.title }</span>
+                                <el-tooltip content="（执行成功率- 自然成功率） / 自然成功率 * 100%" placement="top">
+                                    <i class='el-icon-question'></i>
+                                </el-tooltip>
+                            </div>
+                        }
+                    }
+                },
+                {
+                    title: '点击数',
+                    key: 'clickCnt',
+                    table: {
+                        renderTitle: (h, column) => {
+                            return <div class="summary-analysis-render-title">
+                                <span>{ column.title }</span>
+                                <el-tooltip content="点击短链的客户数" placement="top">
+                                    <i class='el-icon-question'></i>
+                                </el-tooltip>
+                            </div>
+                        }
+                    }
+                },
+                {
+                    title: '点击率(%)',
+                    key: 'clickRate',
+                    width: 100,
+                    table: {
+                        renderTitle: (h, column) => {
+                            return <div class="summary-analysis-render-title">
+                                <span>{ column.title }</span>
+                                <el-tooltip content="点击数 / 执行数" placement="top">
+                                    <i class='el-icon-question'></i>
+                                </el-tooltip>
+                            </div>
+                        },
+                        render: (h, { row }) => {
+                            return <span>{ row.clickRate * 100 }</span>
+                        }
+                    }
+                }
+            ],
+            offlineFields: [
+                {
+                    title: '节点名称',
+                    key: 'nodeName',
+                    width: 100
+                },
+                {
+                    title: '客户数',
+                    key: 'cstNum',
+                    width: 100
+                },
+                {
+                    title: '执行数',
+                    key: 'exeNum',
+                    width: 100,
+                    table: {
+                        renderTitle: (h, column) => {
+                            return <div class='summary-analysis-render-title'>
+                                <span>{ column.title }</span>
+                                <el-tooltip content="【客户数】中渠道执行（跟进处理）的客户数量" placement="top">
+                                    <i class='el-icon-question'></i>
+                                </el-tooltip>
+                            </div>
+                        }
+                    }
+                },
+                {
+                    title: '电面访数',
+                    key: 'phoneInterviewNum',
+                    width: 100,
+                    table: {
+                        renderTitle: (h, column) => {
+                            return <div class='summary-analysis-render-title'>
+                                <span>{ column.title }</span>
+                                <el-tooltip content="【客户数】中有过电访或有过面访的客户数量" placement="top">
+                                    <i class='el-icon-question'></i>
+                                </el-tooltip>
+                            </div>
+                        }
+                    }
+                },
+                {
+                    title: '电面访率(%)',
+                    key: 'phoneInterviewPercent',
+                    width: 130,
+                    table: {
+                        renderTitle: (h, column) => {
+                            return <div class='summary-analysis-render-title'>
+                                <span>{ column.title }</span>
+                                <el-tooltip content="电面访数 / 客户数 * 100%" placement="top">
+                                    <i class='el-icon-question'></i>
+                                </el-tooltip>
+                            </div>
+                        }
+                    }
+                },
+                {
+                    title: '成功数',
+                    key: 'marketingSuccessNum',
+                    width: 100,
+                    table: {
+                        renderTitle: (h, column) => {
+                            return <div class='summary-analysis-render-title'>
+                                <span>{ column.title }</span>
+                                <el-tooltip content="【客户数】中达成营销目标的客户数量" placement="top">
+                                    <i class='el-icon-question'></i>
+                                </el-tooltip>
+                            </div>
+                        }
+                    }
+                },
+                {
+                    title: '电面访成功数',
+                    key: 'phoneInterviewSuccessNum',
+                    width: 120,
+                    table: {
+                        renderTitle: (h, column) => {
+                            return <div class='summary-analysis-render-title'>
+                                <span>{ column.title }</span>
+                                <el-tooltip content="【电面访数】中达成营销目标的客户数量" placement="top">
+                                    <i class='el-icon-question'></i>
+                                </el-tooltip>
+                            </div>
+                        }
+                    }
+                },
+                {
+                    title: '成功率(%)',
+                    key: 'marketingSuccessRate',
+                    width: 100,
+                    table: {
+                        renderTitle: (h, column) => {
+                            return <div class='summary-analysis-render-title'>
+                                <span>{ column.title }</span>
+                                <el-tooltip content="成功数 / 客户数 * 100%" placement="top">
+                                    <i class='el-icon-question'></i>
+                                </el-tooltip>
+                            </div>
+                        }
+                    }
+                },
+                {
+                    title: '执行成功率(%)',
+                    key: 'exeSuccessRate',
+                    width: 130,
+                    table: {
+                        renderTitle: (h, column) => {
+                            return <div class='summary-analysis-render-title'>
+                                <span>{ column.title }</span>
+                                <el-tooltip content="执行成功数 / 客户数 * 100%" placement="top">
+                                    <i class='el-icon-question'></i>
+                                </el-tooltip>
+                            </div>
+                        }
+                    }
+                },
+                {
+                    title: '电面访成功率(%)',
+                    key: 'phoneInterviewSuccessRate',
+                    width: 140,
+                    table: {
+                        renderTitle: (h, column) => {
+                            return <div class='summary-analysis-render-title'>
+                                <span>{ column.title }</span>
+                                <el-tooltip content="电面访成功数 / 电面访数 * 100%" placement="top">
+                                    <i class='el-icon-question'></i>
+                                </el-tooltip>
+                            </div>
+                        }
+                    }
+                },
+                {
+                    title: '自然成功率(%)',
+                    key: 'unPhoneInterviewSuccessRate',
+                    width: 130,
+                    table: {
+                        renderTitle: (h, column) => {
+                            return <div class='summary-analysis-render-title'>
+                                <span>{ column.title }</span>
+                                <el-tooltip content="未执行客户（客户数-执行数）达成营销目标的客户数量 / 未执行客户数量 * 100%" placement="top">
+                                    <i class='el-icon-question'></i>
+                                </el-tooltip>
+                            </div>
+                        }
+                    }
+                },
+                {
+                    title: '电面访提升效果(%)',
+                    key: 'increaseRate',
+                    width: 160,
+                    table: {
+                        renderTitle: (h, column) => {
+                            return <div class='summary-analysis-render-title'>
+                                <span>{ column.title }</span>
+                                <el-tooltip content="（电面访成功率- 自然成功率） / 自然成功率* 100%" placement="top">
+                                    <i class='el-icon-question'></i>
+                                </el-tooltip>
+                            </div>
+                        }
+                    }
+                }
+            ],
+            loading: false,
+            onlineData: [],
+            offlineData: []
+        }
+    },
+    computed: {
+        onlineList () {
+            return this.list.filter(node => {
+                return node.actDefNodeParamsList.some(item => item.paramCode === 'channelType' && item.paramValue === '1')
+            })
+        },
+        offlineList () {
+            return this.list.filter(node => {
+                return node.actDefNodeParamsList.some(item => item.paramCode === 'channelType' && item.paramValue === '0')
+            })
+        }
+    },
+    methods: {
+        setData (data) {
+            this.list = data
+        },
+        handleSelect () {
+            this.dialog = true
+            this.list = this.list.map(node => {
+                return {
+                    ...node,
+                    checked: false
+                }
+            })
+        },
+        handleConfirm () {
+            let params = this.list.filter(item => item.checked).map(item => item.id)
+            if (params.length === 0) {
+                this.$info('请至少选择一个渠道节点')
+                return
+            }
+            this.loading = true
+            getMonitorDetailAbTestAnalysis(params).then(data => {
+                let onlineData = []
+                let offlineData = []
+                this.data = data.data.forEach(row => {
+                    let item = this.list.find(item => item.id === row.nodeId)
+                    if (item) {
+                        row.nodeName = item.nodeName
+                    }
+                    if (item.actDefNodeParamsList.some(item => item.paramCode === 'channelType' && item.paramValue === '0')) {
+                        onlineData.push(row)
+                    } else {
+                        offlineData.push(row)
+                    }
+                })
+                this.onlineData = onlineData
+                this.offlineData = offlineData
+            }).finally(() => {
+                this.loading = false
+            })
+            this.tableDialog = true
+        }
+    }
+}
+</script>
+
+<style lang="less">
+.customer-ediot-tree-detail-title-size {
+    font-size: 16px !important;
+}
+.summary-analysis {
+    top: @space3;
+    right: 330px;
+    z-index: 11;
+    position: absolute;
+}
+.summary-analysis-render-title {
+    display: flex;
+    align-items: center;
+    padding-left: 0 !important;
+}
+.summary-analysis-content {
+    min-height: 300px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.summary-analysis-list {
+    height: 200px;
+    .border();
+    overflow: auto;
+    margin-top: @space2;
+    .graph-item {
+        width: 52px;
+        height: 52px;
+        position: relative;
+        overflow: hidden;
+    }
+}
+.summary-analysis-group-title {
+    font-size: 16px;
+    padding-left: @space;
+    border-left: 2px solid @primary;
+}
+.summary-analysis-group {
+    width: 270px;
+}
+.summary-analysis-group + .summary-analysis-group {
+    margin-left: @space2;
+}
+.layout-main{
+    padding: 12px
+}
+.summary-analysis-item {
+    label {
+        width: 100%;
+        height: @space4;
+        line-height: @space4;
+        padding-left: @space;
+    }
+    &:hover {
+        background-color: #f4f6f5;
+    }
+}
+</style>