Pārlūkot izejas kodu

客户行为统计

yujinwen 4 dienas atpakaļ
vecāks
revīzija
d7a248e2b5

+ 21 - 1
src/views/customer/user/Index.vue

@@ -56,6 +56,7 @@ const tablePagination = ref({
   total: 0,
   showPageSize:false
 })
+let SortParam='',SortType='';
 async function getUserList(){
   const res=await apiCustomerUser.userList({
     PageSize:tablePagination.pageSize,
@@ -63,7 +64,9 @@ async function getUserList(){
     PositionStatus:filterState.jobStatus===''?-1:filterState.jobStatus,
     Enabled:filterState.accountStatus===''?-1:filterState.accountStatus,
     Keyword:filterState.keyword,
-    BusinessCode:filterState.customer
+    EtaBusinessId:filterState.customer,
+    SortParam:SortParam,
+    SortType:SortType
   })
   if(res.Ret!==200) return
   const arr=res.Data.List||[]
@@ -71,12 +74,27 @@ async function getUserList(){
   tablePagination.value.total=res.Data.Paging.Totals
 }
 getUserList()
+function handlePageChange(e){
+  tablePagination.value.current=e.current
+  getUserList()
+}
 
 function handleRefreshList(){
   tablePagination.value.current=1
   tableData.value=[]
   getUserList()
 }
+// 排序 sort undefined  descending:true|false
+function handleSortChange(sort,options){
+  if(sort){
+    SortParam=sort.sortBy
+    SortType=sort.descending?'desc':'asc'
+  }else{
+    SortParam=''
+    SortType=''
+  }
+  handleRefreshList()
+}
 
 const editUserData=ref(null)
 
@@ -209,6 +227,8 @@ async function handleImportUser(e){
         :pagination="tablePagination"
         show-header
         resizable
+        @page-change="handlePageChange"
+        @sort-change="handleSortChange"
       >
         <template #Mobile="{ row }">
           <span>{{row.CountryCode}}-{{row.Mobile}}</span>

+ 39 - 20
src/views/customer/user/components/ActionStatisticForChart.vue

@@ -2,6 +2,7 @@
 import Highcharts from "highcharts";
 import HighchartsMore from "highcharts/highcharts-more";
 import HighchartszhCN from "@/hooks/chart/highcahrts-zh_CN";
+import {apiCustomerUser} from '@/api/customer'
 
 
 HighchartszhCN(Highcharts);
@@ -29,9 +30,14 @@ const chartDefaultOpts = {
         inside: false,
         crop: false,
         overflow: true,
-        x: 80,
+        x: 140,
+        useHTML:true,
+        backgroundColor: 'rgba(255, 255, 255, 0)',
         formatter: function (e) {
-          return this.point.options.isLabel;
+          return `<div style="font-size:14px">
+            <span style="margin-right:5px;display:inline-block;width:40px;text-align:right;color:#fff">${this.point.options.y}</span>
+            <span style="display:inline-block;width:133px">${this.point.options.isLabel}</span>
+          </div>`;
         },
       },
     },
@@ -44,33 +50,33 @@ const chartDefaultOpts = {
   },
 }
 
-function chartRender() {
+function chartRender(data) {
   let series = [
     {
       name: '累计收藏图表量',
-      data: [
-        {
-          y: 10,
-          isLabel: '2024-10-10'
-        },
-        {
-          y: 10,
-          isLabel: '2024-10-10'
-        },
-        {
-          y: 10,
-          isLabel: '2024-10-10'
-        }
-      ]
+      data: []
     }
   ]
+
   let xAxis = {
-    categories: ['图表1','图表2','图表3',],
+    categories: [],
     tickWidth: 1,
     lineColor:'#E4E4E4',
     tickColor:'#E4E4E4',
     tickPosition: "outside",
+    labels: {
+      formatter: function () {
+        // 限制文字长度为 12 个字符,超出部分显示省略号
+        return this.value.length > 12 ? this.value.substring(0, 12) + '...' : this.value;
+      },
+      style: {
+        whiteSpace: 'nowrap', // 确保文字不会换行
+        overflow: 'hidden',   // 超出隐藏
+        textOverflow: 'ellipsis', // 文本省略号样式
+      }
+    }
   };
+  
   let yAxis = {
     opposite: true,
     gridLineWidth: 1,
@@ -88,6 +94,13 @@ function chartRender() {
     },
     reversedStacks: false,
   };
+  data.forEach(item => {
+    series[0].data.push({
+      y:item.CollectNum,
+      isLabel:item.LastCollectTime
+    })
+    xAxis.categories.push(item.ChartName)
+  });
 
   const options={
     ...chartDefaultOpts,
@@ -99,8 +112,11 @@ function chartRender() {
   Highcharts.chart(`fav-chart-statistic`, options);
 }
 
-function getChartDetail() {
-  chartRender()
+async function getChartDetail() {
+  const res=await apiCustomerUser.getUserActionStatisticChartData()
+  if(res.Ret!==200) return
+  const data=res.Data.List||[]
+  chartRender(data)
 }
 
 onMounted(() => {
@@ -122,5 +138,8 @@ onMounted(() => {
   .wrap-label {
     text-align: center;
   }
+  .chart-render-box{
+    height: calc(100vh - 300px);
+  }
 }
 </style>

+ 45 - 6
src/views/customer/user/components/ActionStatisticForCustomer.vue

@@ -39,14 +39,31 @@ const tablePagination = ref({
   total: 0,
   showPageSize: false
 })
+let SortParam='',SortType='';
 async function getStatisticList(){
-  let StartDate='',EndDate='';
+  let StartDate=selectDate.value?.[0]||'',EndDate=selectDate.value?.[1]||'';
+  if(timeTypeValue.value==='今天'){
+    StartDate=moment().format('YYYY-MM-DD')
+    EndDate=moment().format('YYYY-MM-DD')
+  }else if(timeTypeValue.value==='过去3天'){
+    EndDate=moment().format('YYYY-MM-DD')
+    StartDate=moment().subtract(3,'days').format('YYYY-MM-DD')
+  }else if(timeTypeValue.value==='过去一周'){
+    EndDate=moment().format('YYYY-MM-DD')
+    StartDate=moment().subtract(7,'days').format('YYYY-MM-DD')
+  }else if(timeTypeValue.value==='过去一月'){
+    EndDate=moment().format('YYYY-MM-DD')
+    StartDate=moment().subtract(30,'days').format('YYYY-MM-DD')
+  }
+
   const res=await apiCustomerUser.getUserActionStatistic({
     CurrentIndex:tablePagination.value.current,
     PageSize:tablePagination.value.pageSize,
     EtaBusinessIds:selectBusinessValue.value.join(','),
-    StartDate:selectDate.value?.[0]||'',
-    EndDate:selectDate.value?.[1]||'',
+    StartDate:StartDate,
+    EndDate:EndDate,
+    SortParam:SortParam,
+    SortType:SortType
   })
   if(res.Ret!==200) return
   tableData.value=res.Data.List||[]
@@ -54,6 +71,22 @@ async function getStatisticList(){
 
 }
 getStatisticList()
+function handlePageChange(e){
+  tablePagination.value.current=e.current
+  getStatisticList()
+}
+// 排序 sort undefined  descending:true|false
+function handleSortChange(sort,options){
+  console.log(sort,options);
+  if(sort){
+    SortParam=sort.sortBy
+    SortType=sort.descending?'desc':'asc'
+  }else{
+    SortParam=''
+    SortType=''
+  }
+  refreshList()
+}
 
 function refreshList(){
   tablePagination.value.current=1
@@ -74,7 +107,11 @@ function handleSelectDate(){
 }
 
 const showFavChart=ref(false)
-
+const activeUser=ref(null)
+function handleShowDetail(item){
+  activeUser.value=item
+  showFavChart.value=true
+}
 </script>
 
 <template>
@@ -106,14 +143,16 @@ const showFavChart=ref(false)
     :pagination="tablePagination"
     show-header
     resizable
+    @page-change="handlePageChange"
+    @sort-change="handleSortChange"
   >
     <template #CollectNum="{row}">
-      <t-button size="small" theme="primary" variant="text">{{row.CollectNum}}</t-button>
+      <t-button size="small" theme="primary" variant="text" @click="handleShowDetail(row)">{{row.CollectNum}}</t-button>
     </template>
   </t-table>
 
   <!-- 用户收藏图表 -->
-  <FavChartStatistic v-model:show="showFavChart"/>
+  <FavChartStatistic v-model:show="showFavChart" :data="activeUser"/>
 </template>
 
 <style lang="scss" scoped>

+ 2 - 2
src/views/customer/user/components/EditUser.vue

@@ -58,7 +58,7 @@ async function handleSave(){
     CountryCode:formData.telCode,
     Mobile:formData.tel,
     Position:formData.post,
-    BusinessCode:formData.customer,
+    EtaBusinessId:formData.customer,
     DepartmentName:formData.depart,
     PositionStatus:formData.jobStatus
   }
@@ -86,7 +86,7 @@ watch(
         formData.name=props.data.RealName
         formData.telCode=props.data.CountryCode
         formData.tel=props.data.Mobile
-        formData.customer=props.data.BusinessCode
+        formData.customer=props.data.EtaBusinessId
         formData.post=props.data.Position
         formData.depart=props.data.DepartmentName
         formData.jobStatus=props.data.PositionStatus

+ 2 - 2
src/views/customer/user/components/MoveUser.vue

@@ -25,7 +25,7 @@ async function handleSave(){
   if(validRes!==true) return
   const res=await apiCustomerUser.moveUser({
     UserId:props.data.UserId,
-    BusinessCode:formData.company
+    EtaBusinessId:formData.company
   })
   if(res.Ret!==200) return
   show.value=false
@@ -75,7 +75,7 @@ watch(
       
       <t-form-item label="所属客户" name="customer">
         <select-business 
-          :value="props.data?.BusinessCode"
+          :value="props.data?.EtaBusinessId"
           placeholder="输入社会信用码或客户名称"
           disabled
           v-if="show"