update

lottery/jxs.html

@@ -420,9 +420,14 @@
   align-items: center;
   justify-content: space-between;
 }
+.interact_box_bottom {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
 .interact_line {
   width: 1px;
-  margin: 0 10px;
+  margin: 0 8px;
   height: 66px;
   background: linear-gradient( 180deg, rgba(229,232,237,0) 0%, #E5E8ED 51%, rgba(229,232,237,0) 100%);
 }
@@ -436,6 +441,11 @@
   background: #FAFAFA;
   border-radius: 10px;
 }
+.leadGen_box {
+  padding: 10px;
+  background: #FAFAFA;
+  border-radius: 10px;
+}
 .table_carList {
   width: 100%;
   display: flex;
@@ -533,7 +543,7 @@
         </div>
         <select-date v-else @change-date="handleChangeDate"></select-date>
       </div>
-      <div class="outlet_data" v-if="pageTitle !== '客户资产'" @click="showPicker = true">
+      <div class="outlet_data" v-show="pageTitle !== '客户资产'" @click="showPicker = true">
         <div class="top_data_title_branch">网点：{{outletName}}</div>
         <div class="triangle"></div>
       </div>
@@ -685,7 +695,7 @@
           </div>
         </div>
       </van-popup>
-      <div class="page4_content" v-if="pageTitle === '客户资产'">
+      <div class="page4_content" v-show="pageTitle === '客户资产'">
         <!-- 客户资产 -->
         <div class="box_connect">
           <div class="clientCharts_title" style="margin-bottom: 0;">总数据
@@ -752,7 +762,7 @@
         </div>
         <div class="data_tips">—— 每日5：00更新数据 ——</div>
       </div>
-      <div class="page4_content2" v-if="pageTitle === '聊天分析'">
+      <div class="page4_content2" v-show="pageTitle === '聊天分析'">
         <!-- 聊天分析 -->
         <div class="box_connect">
           <div class="clientCharts_title">总数据</div>
@@ -822,10 +832,10 @@
               <div class="interact_line"></div>
               <div class="interact_item">
                 <div class="num_item_title">客户回复率</div>
-                <div class="num_item_count">{{chatIndicators.total.clientReplyPercent}}%</div>
+                <div class="num_item_count">{{chatIndicators.total.clientReplyPercent ? chatIndicators.total.clientReplyPercent + '%' : ''}}</div>
                 <div class="num_item_data">
-                  <div>昨日新增：
-                    <span class="selected_color">{{chatIndicators.yda.clientReplyPercent}}%</span>
+                  <div>较昨日提升：
+                    <span class="selected_color">{{chatIndicators.yda.clientReplyPercent ? chatIndicators.yda.clientReplyPercent + '%' : ''}}</span>
                   </div>
                   <image class="client_item_icon" src="./img/jxs4.png"></image>
                 </div>
@@ -862,10 +872,10 @@
               <div class="interact_line"></div>
               <div class="interact_item">
                 <div class="num_item_title">员工平均响应时长</div>
-                <div class="num_item_count">{{chatIndicators.total.avgReplyDuration}}秒</div>
+                <div class="num_item_count">{{chatIndicators.total.avgReplyDuration ? chatIndicators.total.avgReplyDuration + '秒' : ''}}</div>
                 <div class="num_item_data">
-                  <div>昨日新增：
-                    <span class="selected_color">{{chatIndicators.yda.avgReplyDuration}}秒</span>
+                  <div>较昨日提升：
+                    <span class="selected_color">{{chatIndicators.yda.avgReplyDuration ? chatIndicators.yda.avgReplyDuration + '秒' : ''}}</span>
                   </div>
                   <image class="client_item_icon" src="./img/jxs4.png"></image>
                 </div>
@@ -884,7 +894,7 @@
         </div>
         <div class="data_tips">—— 每日5：00更新数据 ——</div>
       </div>
-      <div class="page4_content2" v-if="pageTitle === '员工监测'">
+      <div class="page4_content2" v-show="pageTitle === '员工监测'">
         <div class="box_connect">
           <div class="clientCharts_title">销售进程客户数</div>
           <div class="step_list">
@@ -925,30 +935,30 @@
             <div class="clientCharts_title">聊天超时监测</div>
             <div class="clientCharts_title_right" @click="handleMemberReply">查看详情</div>
           </div>
-          <div id="timeOutTrendChart" style="width: 100%;height: 208px"></div>
+          <div id="timeOutTrendChart" style="width: 100%;height: 230px"></div>
         </div>
         <div class="box_connect">
           <div class="clientCharts_title">聊天排行榜</div>
           <div class="branch_table">
             <div class="branch_header" style="box-sizing: border-box;">
               <div style="width: 30px;">排名</div>
-              <div>员工</div>
-              <div>聊天客户数</div>
-              <div>主动会话<br/>服务数</div>
-              <div>客户回复<br/>会话数</div>
+              <div style="width: 30px;">员工</div>
+              <div style="width: 60px;">聊天客户数</div>
+              <div style="width: 50px;">主动会话<br/>服务数</div>
+              <div style="width: 50px;">客户回复<br/>会话数</div>
             </div>
             <div class="branch_item" style="box-sizing: border-box;" v-for="(item, index) in chatRankData" :key="index">
               <div style="width: 30px;">{{index + 1}}</div>
               <div style="width: 30px;">{{item.memberName}}</div>
-              <div style="width: 30px;">{{item.interactClient}}</div>
-              <div style="width: 30px;">{{item.proactiveServe}}</div>
-              <div style="width: 30px;">{{item.clientReply}}</div>
+              <div style="width: 60px;">{{item.privateChat}}</div>
+              <div style="width: 50px;">{{item.proactiveServe}}</div>
+              <div style="width: 50px;">{{item.clientReply}}</div>
             </div>
           </div>
         </div>
         <div class="data_tips">—— 每日5：00更新数据 ——</div>
       </div>
-      <div class="page4_content2" v-if="pageTitle === '运营任务'">
+      <div class="page4_content2" v-show="pageTitle === '运营任务'">
         <div class="box_connect">
           <div class="clientCharts_title_box">
             <div class="clientCharts_title">总数据</div>
@@ -965,9 +975,9 @@
             <div class="branch_item" style="box-sizing: border-box;" v-for="(item, index) in outletCount" :key="index">
               <div style="width: 60px;">{{item.outletName}}</div>
               <div>{{item.taskNum}}</div>
-              <div>{{item.taskCompletePercent}}</div>
+              <div>{{item.taskCompletePercent ? item.taskCompletePercent + '%' : '-'}}</div>
               <div>{{item.interactClient}}</div>
-              <div>{{item.activatePercent}}</div>
+              <div>{{item.activatePercent ? item.activatePercent + '%' : '-'}}</div>
             </div>
           </div>
         </div>
@@ -1104,7 +1114,7 @@
         saleRankData: [], // 销售统计排名数据
         timeOutDate: [], // 聊天超时监测-日期
         timeOutMember: [], // 聊天超时监测-超时客户数
-        timeData: '近7天',
+        timeData: '',
         memberStartTime: '',
         memberEndTime: '',
         showDoneReply: false, // 显示已完成响应数据
@@ -2260,9 +2270,9 @@
             {// 第一种方式
               type: 'value',
               min: 0,
-              max: Math.max(...this.proactiveServe),
+              max: Math.max(...this.proactiveServe, ...this.privateChat, ...this.groupMsgNum),
               splitNumber: 5,
-              interval: Math.max(...this.proactiveServe) / 5,
+              interval: Math.max(...this.proactiveServe, ...this.privateChat, ...this.groupMsgNum) / 5,
               axisLabel: {
                   show: true,
                   color: "#222222",
@@ -2278,48 +2288,6 @@
               },
               axisTick: { show: false },
             },
-            {// 第二种方式
-              type: 'value',
-              min: 0,
-              max: Math.max(...this.privateChat),
-              splitNumber: 5,
-              interval: Math.max(...this.privateChat) / 5,
-              axisLabel: {
-                show: true,
-                color: "#222222",
-                fontSize: '8',
-                formatter: function (v) {
-                  return v.toFixed(0) //0表示小数为0位，1表示1位小数，2表示2位小数
-                }
-              },
-              splitLine: { //网格线
-                lineStyle: {
-                  type: 'dashed'//设置网格线类型 dotted：虚线   solid:实线
-                },
-              },
-              axisTick: { show: false },
-            },
-            {// 第三种方式
-              type: 'value',
-              min: 0,
-              max: Math.max(...this.groupMsgNum),
-              splitNumber: 5,
-              interval: Math.max(...this.groupMsgNum) / 5,
-              axisLabel: {
-                show: true,
-                color: "#222222",
-                fontSize: '8',
-                formatter: function (v) {
-                  return v.toFixed(0) //0表示小数为0位，1表示1位小数，2表示2位小数
-                }
-              },
-              splitLine: { //网格线
-                lineStyle: {
-                  type: 'dashed'//设置网格线类型 dotted：虚线   solid:实线
-                },
-              },
-              axisTick: { show: false },
-            },
           ],
           series: [
             {
@@ -2400,9 +2368,9 @@
             {// 第一种方式
               type: 'value',
               min: 0,
-              max: Math.max(...this.proactiveServe),
+              max: Math.max(...this.proactiveServe, ...this.clientReply),
               splitNumber: 5,
-              interval: Math.max(...this.proactiveServe) / 5,
+              interval: Math.max(...this.proactiveServe, ...this.clientReply) / 5,
               axisLabel: {
                   show: true,
                   color: "#222222",
@@ -2421,27 +2389,6 @@
             {// 第二种方式
               type: 'value',
               min: 0,
-              max: Math.max(...this.clientReply),
-              splitNumber: 5,
-              interval: Math.max(...this.clientReply) / 5,
-              axisLabel: {
-                show: true,
-                color: "#222222",
-                fontSize: '8',
-                formatter: function (v) {
-                  return v.toFixed(0) //0表示小数为0位，1表示1位小数，2表示2位小数
-                }
-              },
-              splitLine: { //网格线
-                lineStyle: {
-                  type: 'dashed'//设置网格线类型 dotted：虚线   solid:实线
-                },
-              },
-              axisTick: { show: false },
-            },
-            {// 第三种方式
-              type: 'value',
-              min: 0,
               max: Math.max(...this.clientReplyPercent),
               splitNumber: 5,
               interval: Math.max(...this.clientReplyPercent) / 5,
@@ -2450,7 +2397,7 @@
                 color: "#222222",
                 fontSize: '8',
                 formatter: function (v) {
-                  return v.toFixed(0) //0表示小数为0位，1表示1位小数，2表示2位小数
+                  return v.toFixed(0) + ' %'; //0表示小数为0位，1表示1位小数，2表示2位小数
                 }
               },
               splitLine: { //网格线
@@ -2468,6 +2415,7 @@
               data: this.proactiveServe,
               itemStyle: {
                 color: ' #1677FF',
+                borderRadius: [5, 5, 0, 0]
               },
               emphasis: {
                 itemStyle: {
@@ -2481,6 +2429,7 @@
               data: this.clientReply,
               itemStyle: {
                 color: ' #5CE56E',
+                borderRadius: [5, 5, 0, 0]
               },
               emphasis: {
                 itemStyle: {
@@ -2492,8 +2441,14 @@
               name: '客户回复率',
               type: 'line',
               color: '#FFA64E',
+              symbol: 'none',
+              yAxisIndex: 1,
               data: this.clientReplyPercent,
-              symbol: 'none', //去掉折线图中的节点
+               tooltip: {
+                valueFormatter: function (value) {
+                  return value ? value + ' %' : ''
+                }
+              },
               smooth: true, //true 为平滑曲线，false为直线
             }
           ],
@@ -2545,9 +2500,9 @@
             {// 第一种方式
               type: 'value',
               min: 0,
-              max: Math.max(...this.proactiveConsult),
+              max: Math.max(...this.proactiveConsult, ...this.memberReply),
               splitNumber: 5,
-              interval: Math.max(...this.proactiveConsult) / 5,
+              interval: Math.max(...this.proactiveConsult, ...this.memberReply) / 5,
               axisLabel: {
                   show: true,
                   color: "#222222",
@@ -2566,27 +2521,6 @@
             {// 第二种方式
               type: 'value',
               min: 0,
-              max: Math.max(...this.memberReply),
-              splitNumber: 5,
-              interval: Math.max(...this.memberReply) / 5,
-              axisLabel: {
-                show: true,
-                color: "#222222",
-                fontSize: '8',
-                formatter: function (v) {
-                  return v.toFixed(0) //0表示小数为0位，1表示1位小数，2表示2位小数
-                }
-              },
-              splitLine: { //网格线
-                lineStyle: {
-                  type: 'dashed'//设置网格线类型 dotted：虚线   solid:实线
-                },
-              },
-              axisTick: { show: false },
-            },
-            {// 第三种方式
-              type: 'value',
-              min: 0,
               max: Math.max(...this.avgReplyDuration),
               splitNumber: 5,
               interval: Math.max(...this.avgReplyDuration) / 5,
@@ -2595,7 +2529,7 @@
                 color: "#222222",
                 fontSize: '8',
                 formatter: function (v) {
-                  return v.toFixed(0) //0表示小数为0位，1表示1位小数，2表示2位小数
+                  return v.toFixed(0) + ' s'; //0表示小数为0位，1表示1位小数，2表示2位小数
                 }
               },
               splitLine: { //网格线
@@ -2613,6 +2547,7 @@
               data: this.proactiveConsult,
               itemStyle: {
                 color: ' #1677FF',
+                borderRadius: [5, 5, 0, 0]
               },
               emphasis: {
                 itemStyle: {
@@ -2626,6 +2561,7 @@
               data: this.memberReply,
               itemStyle: {
                 color: ' #5CE56E',
+                borderRadius: [5, 5, 0, 0]
               },
               emphasis: {
                 itemStyle: {
@@ -2637,8 +2573,14 @@
               name: '员工平均响应时长',
               type: 'line',
               color: '#FFA64E',
+              symbol: 'none',
+              yAxisIndex: 1,
+              tooltip: {
+                valueFormatter: function (value) {
+                  return value ? value.toFixed(0) + ' s' : ''
+                }
+              },
               data: this.avgReplyDuration,
-              symbol: 'none', //去掉折线图中的节点
               smooth: true, //true 为平滑曲线，false为直线
             }
           ],
@@ -3065,7 +3007,7 @@
       },
       returnOutsideDate () {
         this.memberStartTime = this.pageStartTime
-        this.memberEndTime = this.memberEndTime
+        this.memberEndTime = this.pageEndTime
         if (this.pageStartTime === this.getDateTime(-1) && this.pageEndTime === this.getDateTime(-1)) {
           this.timeData = '昨日'
         } else if (this.pageStartTime === this.getDateTime(-7) && this.pageEndTime === this.getDateTime(-1)) {
@@ -3076,10 +3018,13 @@
           this.timeData = '自定义'
         }
       },
-      // 处理聊天超时监测详情
+      // 顾问响应统计
       handleMemberReply () {
         this.showMemberReply = true
         this.returnOutsideDate()
+        this.getMemberReply()
+      },
+      getMemberReply () {
         fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/memberReply`, {
           method: 'post',
           body: JSON.stringify({
@@ -3112,28 +3057,31 @@
       },
       onSelect (val) {
         this.timeData = val.text
-        if (val.text === '自定义') {
+        if (this.timeData === '自定义') {
           this.showSelfDate = true
         } else {
-          if (val.text === '昨日') {
+          if (this.timeData === '昨日') {
             this.memberStartTime = this.getDateTime(-1)
             this.memberEndTime = this.getDateTime(-1)
-          } else if (val.text === '近7天') {
+          } else if (this.timeData === '近7天') {
             this.memberStartTime = this.getDateTime(-7)
             this.memberEndTime = this.getDateTime(-1)
-          } else if (val.text === '近30天') {
+          } else if (this.timeData === '近30天') {
             this.memberStartTime = this.getDateTime(-30)
             this.memberEndTime = this.getDateTime(-1)
           }
-          if (this.showDoneReply) {
-            this.handleDoneReply()
-          } else {
-            if (this.memberId) {
-              this.handleItemMemberReplyDetail()
+          this.$nextTick(() => {
+            if (this.showDoneReply) {
+              this.getDoneReply()
             } else {
-              this.handleMemberReply()
+              if (this.memberId) {
+                this.handleItemMemberReplyDetail()
+              } else {
+                this.getMemberReply()
+              }
             }
-          }
+          })
+
         }
       },
       onSelfConfirm (date) {
@@ -3142,12 +3090,12 @@
         this.memberEndTime = this.formatDate(end)
         this.showSelfDate = false
         if (this.showDoneReply) {
-          this.handleDoneReply()
+          this.getDoneReply()
         } else {
           if (this.memberId) {
             this.handleItemMemberReplyDetail()
           } else {
-            this.handleMemberReply()
+            this.getMemberReply()
           }
         }
       },
@@ -3155,14 +3103,14 @@
         return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
       },
       handleSearch () {
-        this.handleMemberReply()
+        this.getMemberReply()
       },
       handleChangePage (val) {
         this.currentPage = val
         if (this.showDoneReply) {
-          this.handleDoneReply()
+          this.getDoneReply()
         } else {
-          this.handleMemberReply()
+          this.getMemberReply()
         }
       },
       closeReply () {
@@ -3192,7 +3140,7 @@
         this.currentItemPage = val
         this.handleItemMemberReplyDetail()
       },
-      // 顾客聊天超时监测详情
+      // 顾客响应统计-详情
       handleItemMemberReplyDetail() {
         fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/memberReplyDetail`, {
           method: 'post',
@@ -3228,6 +3176,9 @@
       handleDoneReply () {
         this.showDoneReply = true
         this.returnOutsideDate()
+        this.getDoneReply()
+      },
+      getDoneReply () {
         fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/operationMemberCnt`, {
           method: 'post',
           body: JSON.stringify({
@@ -3375,7 +3326,10 @@
             show: false,
           },
           tooltip: {
-            trigger: 'axis'
+            trigger: 'axis',
+            valueFormatter: function (value) {
+              return value ? value.toFixed(2) + ' %' : ''
+            }
           },
           grid: {
             top: '10%',
@@ -3570,7 +3524,7 @@
         }).then(result => {
           let { data, code, msg } = result
           if (code === 1) {
-            this.contentRankData = data || []
+            this.contentRankData = data.reverse() || []
             this.$nextTick(() => {
               this.contentRankChart()
             })
@@ -3594,6 +3548,8 @@
         rankChart.setOption({
           tooltip: {
             trigger: 'item',
+            confine: true,
+            extraCssText: 'max-width:200px; white-space:pre-wrap',
             formatter: '{b}: {c}'
           },
           legend: {