feat: 企微助手 - 群活码 - 分析数据页面&接口联调

project/src/assets/config/interface_api.js

@@ -188,6 +188,10 @@ var api = {
   groupCode_chatGroupList: '/api/chatGroup/chatGroupList',
   groupCode_delQrcode: '/api/qrcodeChatGroup/delQrcode',
   groupCode_chatGroupCountOfGroup: '/api/qrcodeChatGroup/chatGroupCountOfGroup',
+  groupCode_condition: '/api/qrcodeChatGroup/condition',
+  groupCode_dailyReport: '/api/qrcodeChatGroup/dailyReport',
+  groupCode_analysis: '/api/qrcodeChatGroup/analysis',
+  groupCode_customerList: '/api/qrcodeChatGroup/customerList',
 
   radar_addGroup: '/api/radar/radarGroupCreate',
   radar_groupList: '/api/radar/radarGroupList',

project/src/components/groupCode/components/channelAnalysis.vue

@@ -0,0 +1,177 @@
+<template>
+  <div v-loading="loading">
+    <div class="timeBox">
+      <date-picker
+        title=""
+        :quickFlag="true"
+        :afferent_time="default_time"
+        :clearFlag='false'
+        :reset="resetFlag"
+        @changeTime="changeTime"
+      />
+    </div>
+    <div id="trend" style="width:100%;height:300px" />
+    <el-table
+      border
+      :height="height"
+      :data="tableData"
+      tooltip-effect="dark"
+      :header-cell-style="()=>{return { backgroundColor: '#f9f9f9 !important' }}"
+      style="width: 100%"
+    >
+      <template v-for="item in desCol">
+        <el-table-column
+          :key="item.prop"
+          :label="item.label"
+          :min-width="item.min_width ? item.min_width : 120"
+          align="center"
+        >
+          <template slot-scope="{ row }">
+            <div>{{ row[item.prop] || row[item.prop] == 0 ? row[item.prop] : '-' }}</div>
+          </template>
+        </el-table-column>
+      </template>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import datePicker from '@/components/assembly/screen/datePicker.vue'
+
+export default {
+  name: "channelAnalysis",
+  components:{
+    datePicker
+  },
+  props: {
+    rule_id: {
+      type: Number | String,
+      default: () => ''
+    },
+  },
+  data(){
+    return{
+      loading: false,
+      height: '',
+      desCol: [
+        { prop: "ref_date", label: "统计时间" },
+        { prop: "scan_total", label: "扫码总人数" },
+        { prop: "keep_total", label: "留存总人数" },
+      ],
+      default_time: [this.$getDay(-30, false), this.$getDay(0, false)],
+      resetFlag: false,
+      myChart: null,
+      time: [],
+      xDate: [],
+      scan_code_Data: [],
+      scan_code_keep_Data: [],
+      tableData: [],
+    }
+  },
+  created(){
+    this.height = document.documentElement.clientHeight - 300 > 400 ? document.documentElement.clientHeight - 300 : 400
+    this.time = this.default_time
+    this.init()
+  },
+  methods:{
+    changeTime (time) {
+      if (!time || time && time.length == 0) {
+        this.time = []
+      } else {
+        this.time = time
+      }
+      this.init()
+    },
+    trendEvent () {
+      this.myChart && this.myChart.clear()
+      const option = {
+        title: '',
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '3%',
+          bottom: '3%',
+          top:'2%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: this.xDate,
+            axisTick: {
+              show: false,
+              alignWithLabel: false
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value'
+          }
+        ],
+        series: [
+          {
+            name: '当日扫码人数',
+            type: 'bar',
+            barWidth: '40%',
+            data: this.scan_code_Data
+          },
+          {
+            name: '当日扫码留存人数',
+            type: 'bar',
+            barWidth: '40%',
+            data: this.scan_code_keep_Data
+          }
+        ]
+      };
+      //初始化echarts实例
+      this.myChart = this.myChart ? this.myChart : this.$echarts.init(document.getElementById('trend'));
+      this.myChart.setOption(option, true);
+    },
+    async init() {//渠道分析
+      try {
+        this.loading = true
+        const { data: res = {} } = await this.$axios.get(this.URL.BASEURL + this.URL.groupCode_dailyReport, {
+          params:{
+            rule_id: this.rule_id,
+            start_date: this.time[0],
+            end_date: this.time[1]
+          }
+        })
+        if (res && res.errno == 0) {
+          this.xDate = []
+          this.scan_code_Data = []
+          this.scan_code_keep_Data = []
+          res.rst.forEach(item=>{
+            this.xDate.push(item.ref_date)
+            this.scan_code_Data.push(item.scan_total)
+            this.scan_code_keep_Data.push(item.keep_total)
+          })
+          this.tableData = res.rst.reverse()
+          await this.$nextTick()
+          this.trendEvent()
+        } else if (res.errno != 4002) {
+          this.$message.warning(res.err)
+        }
+      } catch (error) {
+        console.log('error => ', error)
+      } finally {
+        this.loading = false
+      }
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.timeBox{
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+</style>

project/src/components/groupCode/components/condition.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="dataBox" v-loading="loading">
+    <div v-for="(item,index) in dataPreview" :key="index" class="box_item">
+      <div class="flex-align-center">
+        <span class="c-000 fWeight600">{{ item.bigTitle ? item.bigTitle : '-' }}</span>
+        <span class="lMarauto" v-if="item.note && item.note.length > 0">
+            <el-tooltip class="disinblock" placement="top" effect="light">
+              <div slot="content">
+                <div v-for="(n, idx) in item.note" :key="idx">{{ n }}</div>
+              </div>
+            <i class="el-icon-question c-999" />
+          </el-tooltip>
+        </span>
+      </div>
+      <div class="f28 pad120">{{ item.bigNum || item.bigNum == 0 ? item.bigNum : '-' }}</div>
+      <div :style="{ 'opacity': item.smallTitle ? '1' : '0' }">
+        <div class="splitLine" />
+        <div class="pad120">
+          <span class="c-666 f13">{{ item.smallTitle ? item.smallTitle : '-' }}</span>
+          <span class="c-000 f13">{{ item.smallNum || item.smallNum == 0 ? item.smallNum : '-'}}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    rule_id: {
+      type: Number | String,
+      default: () => ''
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      dataPreview:[
+        {
+          bigTitle: '扫码总客户数',
+          smallTitle: '今日扫码总客户数',
+          note: [
+            '扫码总人数：扫描渠道群活码的总客户数',
+            '今日扫码人数：今日扫描渠道群活码的总客户数'
+          ],
+          bigNum: 0,
+          smallNum: 0,
+          bigParams: 'scan_total',
+          smallParams: 'scan_today',
+        },
+        {
+          bigTitle: '进群客户数',
+          smallTitle: '今日进群客户数',
+          note:[
+            '进群客户数：扫描渠道群活码进群的总客户数',
+            '今日进群客户数：今日扫描渠道群活码进群的总客户数'
+          ],
+          bigNum: 0,
+          smallNum: 0,
+          bigParams: 'join_total',
+          smallParams: 'join_today',
+        },
+        {
+          bigTitle:'退群客户数',
+          smallTitle:'今日退群客户数',
+          note:[
+            '退群客户数：扫描渠道群活码退群的总客户数',
+            '今日退群客户数：今日扫描渠道群活码退群的总客户数'
+          ],
+          bigNum: 0,
+          smallNum: 0,
+          bigParams: 'loss_total',
+          smallParams: 'loss_today',
+        },
+        {
+          bigTitle: '流失率',
+          smallTitle: '',
+          note: [
+            '扫描渠道群活码退群总客户数占比',
+          ],
+          bigNum: '0.00%',
+          smallNum: '',
+          bigParams: 'loss_rate',
+          smallParams: '',
+        },
+        {
+          bigTitle: '留存率',
+          smallTitle: '',
+          note: [
+            '扫描渠道群活码在群客户数占比',
+          ],
+          bigNum: '0.00%',
+          smallNum: '',
+          bigParams: 'keep_rate',
+          smallParams: '',
+        },
+      ],
+    }
+  },
+  created() {
+    this.handleGetData()
+  },
+  methods: {
+    async handleGetData() {
+      console.log('handleGetData => ', this.rule_id)
+      try {
+        this.loading = true
+        const { data: res = {} } = await this.$axios.get(this.URL.BASEURL + this.URL.groupCode_condition, {
+          params: {
+            rule_id: this.rule_id
+          }
+        })
+        if (res && res.errno == 0) {
+          this.dataPreview.forEach(item => {
+            if (item.bigTitle) {
+              item.bigNum = res.rst[item.bigParams]
+            }
+            if (item.smallTitle) {
+              item.smallNum = res.rst[item.smallParams]
+            }
+          })
+        } else if (res.errno != 4002) {
+          this.$message.warning(res.err)
+        }
+      } catch (error) {
+        console.log('error => ', error)
+      } finally {
+        this.loading = false
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.dataBox{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .box_item{
+    min-width: 19%;
+    padding: 20px 15px 10px;
+    font-size: 14px;
+    background-color: #fff;
+    border-radius: 4px;
+    .splitLine{
+      width: 100%;
+      border-bottom: 1px solid #ddd;
+    }
+  }
+}
+</style>

project/src/components/groupCode/components/customerList.vue

@@ -0,0 +1,142 @@
+<template>
+  <div v-loading="loading">
+    <div class="flex">
+      <self-input :hasLabel="false" label_name="搜索客户" @inputChange='onChangeKeyword' />
+      <el-button type="primary" size="small" @click="init('export')">导出excle</el-button>
+    </div>
+    <el-table
+      border
+      :height="height"
+      :data="tableData"
+      tooltip-effect="dark"
+      :header-cell-style="()=>{return { backgroundColor: '#f9f9f9 !important' }}"
+      style="width: 100%"
+    >
+      <template v-for="item in desCol">
+        <el-table-column
+          :key="item.prop"
+          :label="item.label"
+          :min-width="item.min_width ? item.min_width : 120"
+          align="center"
+        >
+          <template slot-scope="{ row }">
+            <div v-if="item.prop=='status'">
+              {{ row.status == 1 ? '正常' : row.status == 2 ? '退群' : '-' }}
+            </div>
+            <div v-else>{{ row[item.prop] || row[item.prop] === 0 ? row[item.prop] : '-' }}</div>
+          </template>
+        </el-table-column>
+      </template>
+    </el-table>
+    <div class="pagination" v-show="total>0">
+      <el-pagination background :current-page="page" @current-change="handleCurrentChange" layout="prev, pager, next" :page-count='Number(pages)'>
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import selfInput from '@/components/assembly/screen/input.vue'
+import _lodash from 'lodash'
+
+export default {
+  name: "groupAnalysis",
+  components: {
+    selfInput,
+  },
+  props: {
+    rule_id: {
+      type: Number | String,
+      default: () => ''
+    },
+  },
+  data(){
+    return{
+      loading: false,
+      height: '',
+      desCol:[
+        { prop: "chat_id", label: "客户群id" },
+        { prop: "name", label: "客户信息" },
+        { prop: "group_nickname", label: "群内昵称" },
+        { prop: "user_id", label: "userId" },
+        { prop: "status", label: "在群状态"},
+        { prop: "join_time", label: "进群时间"},
+      ],
+      tableData: [],
+      keyword: '',
+      total: 0,
+      page: 1,
+      pages: 0,
+      page_size: 20,
+    }
+  },
+  created(){
+    this.height = document.documentElement.clientHeight - 300 > 400 ? document.documentElement.clientHeight - 300 : 400
+    this.init()
+  },
+  methods:{
+    handleCurrentChange(page) {
+      this.page = page
+      this.init()
+    },
+    onChangeKeyword(keyword) {
+      this.keyword = keyword
+      this.page = 1
+      this.init()
+    },
+    async init(type) {
+      try {
+        if (type === 'export' && !this.tableData.length) {
+          this.$message.warning('暂无数据可导出')
+          return
+        }
+        this.loading = true
+        const { data: res = {} } = await this.$axios.get(this.URL.BASEURL + this.URL.groupCode_customerList, {
+          params: {
+            rule_id: this.rule_id,
+            keyword: this.keyword,
+            page: type === 'export' ? 1 : this.page,
+            page_size: type === 'export' ? this.$store.state.exportNumber : this.page_size
+          }
+        })
+        if (res && res.errno == 0) {
+          if (type === 'export') {
+            this.exportEvent(res.rst.data)
+          } else {
+            this.tableData = res.rst.data
+            this.total = res.rst.pageInfo.total
+            this.pages = res.rst.pageInfo.pages
+          }
+        } else if (res.errno != 4002) {
+          this.$message.warning(res.err)
+        }
+      } catch (error) {
+        console.log('error => ', error)
+      } finally {
+        this.loading = false
+      }
+    },
+    exportEvent(data) {
+      const tHeader = this.desCol.map((v) => v.label)
+      const filterVal = this.desCol.map((v) => v.prop)
+      const tableDatas = _lodash.cloneDeep(data)
+      tableDatas.forEach((item) => {
+        item.status = item.status == 1 ? '正常' : (item.status == 2 ? '退群' : '-')
+      })
+      const excelDatas = [
+        {
+          tHeader, // sheet表一头部
+          filterVal, // 表一的数据字段
+          tableDatas, // 表一的整体json数据
+          sheetName: ''// 表一的sheet名字
+        }
+      ]
+      this.$exportOrder({ excelDatas, name: `渠道群活码-分析数据-客户列表（导出时间：${this.$getDay(0)}）` })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

project/src/components/groupCode/components/groupAnalysis.vue

@@ -0,0 +1,80 @@
+<template>
+  <div v-loading="loading">
+    <el-table
+      border
+      :height="height"
+      :data="tableData"
+      tooltip-effect="dark"
+      :header-cell-style="()=>{return { backgroundColor: '#f9f9f9 !important' }}"
+      style="width: 100%"
+    >
+      <template v-for="item in desCol">
+        <el-table-column
+          :key="item.prop"
+          :label="item.label"
+          :min-width="item.min_width ? item.min_width : 120"
+          align="center"
+        >
+          <template slot-scope="{ row }">
+            <div>{{ row[item.prop] || row[item.prop] == 0 ? row[item.prop] : '-' }}</div>
+          </template>
+        </el-table-column>
+      </template>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "groupAnalysis",
+  props: {
+    rule_id: {
+      type: Number | String,
+      default: () => ''
+    },
+  },
+  data(){
+    return{
+      loading: false,
+      height: '',
+      desCol:[
+        { prop: "chat_id", label: "客户群id" },
+        { prop: "chat_group_name", label: "群聊名称" },
+        { prop: "join_total", label: "入群人数" },
+        { prop: "loss_total", label: "退群人数" },
+        { prop: "keep_rate", label: "留存率",}
+      ],
+      tableData: [],
+    }
+  },
+  created(){
+    this.height = document.documentElement.clientHeight - 300 > 400 ? document.documentElement.clientHeight - 300 : 400
+    this.init()
+  },
+  methods:{
+    async init() {
+      try {
+        this.loading = true
+        const { data: res = {} } = await this.$axios.get(this.URL.BASEURL + this.URL.groupCode_analysis, {
+          params: {
+            rule_id: this.rule_id,
+          }
+        })
+        if (res && res.errno == 0) {
+          this.tableData = res.rst
+        } else if (res.errno != 4002) {
+          this.$message.warning(res.err)
+        }
+      } catch (error) {
+        console.log('error => ', error)
+      } finally {
+        this.loading = false
+      }
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

project/src/components/groupCode/groupCodeAnalyse.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="con">
+    <div class="backBox" @click="$router.go(-1)">
+      <div class="back">
+        <i class="el-icon-back"></i>
+        <span>返回</span>
+      </div>
+    </div>
+
+    <!-- S 数据总概 -->
+    <condition :rule_id="id"  />
+    <!-- E 数据总概 -->
+
+    <div class="topTagBox">
+      <!-- S tab 切换 -->
+      <div class="flex-align-center bMar15">
+        <div
+          v-for="tab in switchList"
+          :key="tab.id"
+          :class="['tagItem', tagType === tab.id ? 'tagItem_active' : '']"
+          @click="tagType = tab.id"
+        >
+          {{ tab.name ? tab.name : '-' }}
+        </div>
+      </div>
+      <!-- E tab 切换 -->
+
+      <!-- S 渠道分析 -->
+      <channelAnalysis v-if="tagType === 0" :rule_id="id" />
+      <!-- E 渠道分析 -->
+
+      <!-- S 客户列表 -->
+      <customerList v-if="tagType === 1" :rule_id="id" />
+      <!-- E 客户列表 -->
+
+      <!-- S 群分析 -->
+      <groupAnalysis v-if="tagType === 2" :rule_id="id" style="margin-top: 30px" />
+      <!-- E 群分析 -->
+
+    </div>
+  </div>
+</template>
+
+<script>
+import condition from './components/condition.vue'
+import channelAnalysis from './components/channelAnalysis.vue'
+import customerList from './components/customerList.vue'
+import groupAnalysis from './components/groupAnalysis.vue'
+
+export default {
+  name: 'groupCodeAnalyse',
+  components: {
+    condition,
+    channelAnalysis,
+    customerList,
+    groupAnalysis,
+  },
+  data() {
+    return {
+      id: this.$route.params.id,
+      tagType: 0,
+      switchList: [
+        { name: '渠道分析', id: 0 },
+        { name: '客户列表', id: 1 },
+        { name: '群分析', id: 2 },
+      ],
+    }
+  },
+  created() {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/style/list.scss";
+.con{
+  padding-right: 10px;
+}
+
+.topTagBox{
+  margin-top: 10px;
+  font-size: 14px;
+}
+</style>

project/src/components/groupCode/index.vue

@@ -50,11 +50,11 @@
                   <!-- E 禁用 -->
 
                   <!-- S 编辑 -->
-                  <div class="lMar8" :class="row.status==1 ? 'c-00B38A pointer' : 'c-999 pointer-drop'" @click="row.status==1&&editCode(row.id)">编辑</div>
+                  <div class="lMar8" :class="row.status==1 ? 'c-00B38A pointer' : 'c-999 pointer-drop'" @click="row.status==1&&handleEditCode(row.id)">编辑</div>
                   <!-- E 编辑 -->
 
                   <!-- S 复制 -->
-                  <el-popconfirm @confirm="copyCode(row.id)" :title="`确定复制【${row.name}】渠道活码？`">
+                  <el-popconfirm @confirm="handleCopyCode(row.id)" :title="`确定复制【${row.name}】渠道活码？`">
                     <div slot="reference" class="c-00B38A pointer lMar8">复制</div>
                   </el-popconfirm>
                   <!-- E 复制 -->
@@ -64,7 +64,7 @@
                   <!-- E 下载 -->
 
                   <!-- S 分析数据 -->
-                  <div class="c-00B38A pointer lMar8" @click="goDataAanlyse(row.id)">分析数据</div>
+                  <div class="c-00B38A pointer lMar8" @click="handleToAnalyse(row.id)">分析数据</div>
                   <!-- E 分析数据 -->
                 </div>
             </template>
@@ -191,14 +191,14 @@ export default {
       }
     },
     // 编辑
-    editCode(id){
+    handleEditCode(id){
       this.$router.push({
         path: '/createGroupCode',
         query: { id, type: 'edit' }
       })
     },
     // 复制
-    copyCode(id){
+    handleCopyCode(id){
       this.$router.push({
         path: '/createGroupCode',
         query: { id, type: 'copy' }
@@ -227,8 +227,8 @@ export default {
       image.src = imgsrc;
     },
     // 分析数据
-    goDataAanlyse(id){
-      this.$router.push('/dataAnalyse/'+id)
+    handleToAnalyse(id) {
+      this.$router.push(`/groupCodeAnalyse/${id}`)
     },
   }
 }

project/src/router/allRouter.js

@@ -50,6 +50,7 @@ const radarIndex = () => import(/* webpackChunkName: 'radarIndex' */ '@/componen
 
 const groupCodeIndex = () => import(/* webpackChunkName: 'groupCodeIndex' */ '@/components/groupCode/index.vue')
 const createGroupCode = () => import(/* webpackChunkName: 'createGroupCode' */ '@/components/groupCode/createGroupCode.vue')
+const groupCodeAnalyse = () => import(/* webpackChunkName: 'groupCodeAnalyse' */ '@/components/groupCode/groupCodeAnalyse.vue')
 
 
 // name与菜单配置的页面路由一致
@@ -142,6 +143,16 @@ export var allRouter = [
         }
       },
       {
+        path: 'groupCodeAnalyse/:id',
+        name: 'groupCodeIndex',
+        component: groupCodeAnalyse,
+        meta: {
+          keepAlive: false,
+          isLogin: true,
+          title: '分析数据'
+        }
+      },
+      {
         path: 'codeIndex',
         name: 'codeIndex',
         component: codeIndex,