update

lottery/jxs.html

@@ -183,10 +183,8 @@
   .select_day {
     display: flex;
     align-items: center;
-    justify-content: flex-end;
     background: #FFFFFF;
     box-sizing: border-box;
-    width: 124px;
     padding: 10px 15px;
     font-weight: 400;
     font-size: 12px;
@@ -414,6 +412,8 @@
     color: #222222;
     border-bottom: 1px solid #E5E8ED;
     text-align: center;
+    word-wrap: break-word;
+    min-width: max-content;
 }
 .branch_item div{
   min-width: 30px;
@@ -603,18 +603,18 @@
             <van-loading type="spinner" color="#1989fa" class="van_loading" v-if="loading"></van-loading>
             <div class="branch_table" style="margin-bottom: 20px;" v-if="!loading">
               <div class="branch_header" style="box-sizing: border-box;">
-                <div style="width: 40px;">顾问</div>
-                <div>今日处理<br />消息数</div>
-                <div>超时<br />消息数</div>
-                <div>平均响应<br />时间</div>
-                <div>管理</div>
+                <div style="width: 80px;">顾问</div>
+                <div style="width: 50px;">今日处理<br />消息数</div>
+                <div style="width: 40px;">超时<br />消息数</div>
+                <div style="width: 50px;">平均响应<br />时间</div>
+                <div style="width: 30px;">管理</div>
               </div>
               <div class="branch_item" style="box-sizing: border-box;" v-for="(item, index) in memberReplyData" :key="index">
-                <div style="width: 40px;">{{item.memberName}}</div>
-                <div style="width: 40px;">{{item.replyMsg}}</div>
+                <div style="width: 80px;max-width: 80px;">{{item.memberName}}</div>
+                <div style="width: 50px;">{{item.replyMsg}}</div>
                 <div style="width: 40px;">{{item.timeoutMsg}}</div>
-                <div style="width: 40px;">{{item.avgReplyDuration}}</div>
-                <div style="width: 40px;color: #1677FF;" @click="handleItemMemberReply(item)">详情</div>
+                <div style="width: 50px;">{{(item.avgReplyDuration/60).toFixed(2)}}分钟</div>
+                <div style="width: 30px;color: #1677FF;" @click="handleItemMemberReply(item)">详情</div>
               </div>
             </div>
             <van-pagination v-model="currentPage" :total-items="totalItems" :show-page-size="3" force-ellipses @change="handleChangePage" />
@@ -648,14 +648,14 @@
               <div class="branch_header">
                 <div style="width: 50px;">客户昵称</div>
                 <div style="width: 80px;">手机号</div>
-                <div style="width: 100px;">最新消息<br />时间</div>
+                <div style="width: 80px;">最新消息<br />时间</div>
                 <div style="width: 60px;">等待时间</div>
                 <div style="width: 60px;">最新消息<br />内容</div>
               </div>
               <div class="branch_item" v-for="(item, index) in memberDetailReplyData" :key="index">
                 <div style="width: 50px;">{{item.clientName}}</div>
                 <div style="width: 80px;">{{item.clientPhone}}</div>
-                <div style="width: 100px;">{{timeFormat(item.msgTime)}}</div>
+                <div style="width: 80px;">{{timeFormat(item.msgTime)}}</div>
                 <div style="width: 60px;">{{(item.waitSeconds/60).toFixed(2)}}分钟</div>
                 <div style="width: 60px;">{{item.content}}</div>
               </div>
@@ -689,16 +689,16 @@
           <div class="box_connect">
             <div class="branch_table" style="margin-bottom: 20px;">
               <div class="branch_header" style="box-sizing: border-box;">
-                <div style="width: 40px;">顾问</div>
-                <div>网点</div>
-                <div>下发任务数</div>
-                <div>完成任务数</div>
+                <div style="width: 60px;">顾问</div>
+                <div style="width: 60px;">网点</div>
+                <div style="width: 60px;">下发任务数</div>
+                <div style="width: 60px;">完成任务数</div>
               </div>
               <div class="branch_item" style="box-sizing: border-box;" v-for="(item, index) in doneReplyData" :key="index">
-                <div style="width: 40px;">{{item.memberName}}</div>
-                <div style="width: 40px;">{{item.outletName}}</div>
-                <div style="width: 40px;">{{item.taskNum}}</div>
-                <div style="width: 40px;">{{item.completeNum}}</div>
+                <div style="width: 60px;">{{item.memberName}}</div>
+                <div style="width: 60px;">{{item.outletName}}</div>
+                <div style="width: 60px;">{{item.taskNum}}</div>
+                <div style="width: 60px;">{{item.completeNum}}</div>
               </div>
             </div>
             <van-pagination v-model="currentPage" :total-items="totalItems" :show-page-size="3" force-ellipses
@@ -748,15 +748,15 @@
           <div class="branch_table" v-if="carStepData.length > 0">
             <div class="branch_header">
               <div style="width: 40px;">阶段</div>
-              <div style="width: 40px;" v-for="(item, index) in carStepData[0].packageList[0].cols" :key="index">
+              <div style="width: 60px;" v-for="(item, index) in carStepData[0].packageList[0].cols" :key="index">
                 {{item.name}}
               </div>
             </div>
             <div class="branch_item" v-for="(item, index) in carStepData[0].packageList" :key="index">
               <div style="width: 40px;">{{item.stepName}}</div>
               <!-- 此处先循环carStepData[0].packageList[0].cols，是表格头以第一条数据为准 -->
-              <div style="min-width: 40px;" v-for="(val, valIndex) in carStepData[0].packageList[0].cols" :key="valIndex">
-                <span v-for="(col, colIndex) in item.cols" :key="colIndex">
+              <div style="min-width: 60px;" v-for="(val, valIndex) in carStepData[0].packageList[0].cols" :key="valIndex">
+                <span style="min-width: 60px;" v-for="(col, colIndex) in item.cols" :key="colIndex">
                   {{val.name === col.name ? col.value[0] : ''}}
                 </span>
               </div>
@@ -786,7 +786,7 @@
                   <div>昨日新增：
                     <span class="selected_color">{{chatIndicators.yda.privateChat}}</span>
                   </div>
-                  <image class="client_item_icon" src="./img/jxs4.png"></image>
+                  <image class="client_item_icon" src="./img/jxs-up1.png"></image>
                 </div>
               </div>
               <div class="interact_line"></div>
@@ -797,7 +797,7 @@
                   <div>昨日新增：
                     <span class="selected_color">{{chatIndicators.yda.privateMsgNum}}</span>
                   </div>
-                  <image class="client_item_icon" src="./img/jxs4.png"></image>
+                  <image class="client_item_icon" src="./img/jxs-up1.png"></image>
                 </div>
               </div>
               <div class="interact_line"></div>
@@ -808,7 +808,7 @@
                   <div>昨日新增：
                     <span class="selected_color">{{chatIndicators.yda.groupMsgNum}}</span>
                   </div>
-                  <image class="client_item_icon" src="./img/jxs4.png"></image>
+                  <image class="client_item_icon" src="./img/jxs-up1.png"></image>
                 </div>
               </div>
             </div>
@@ -826,7 +826,7 @@
                   <div>昨日新增：
                     <span class="selected_color">{{chatIndicators.yda.proactiveServe}}</span>
                   </div>
-                  <image class="client_item_icon" src="./img/jxs4.png"></image>
+                  <image class="client_item_icon" src="./img/jxs-up1.png"></image>
                 </div>
               </div>
               <div class="interact_line"></div>
@@ -837,7 +837,7 @@
                   <div>昨日新增：
                     <span class="selected_color">{{chatIndicators.yda.clientReply}}</span>
                   </div>
-                  <image class="client_item_icon" src="./img/jxs4.png"></image>
+                  <image class="client_item_icon" src="./img/jxs-up1.png"></image>
                 </div>
               </div>
               <div class="interact_line"></div>
@@ -845,10 +845,12 @@
                 <div class="num_item_title">客户回复率</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 ? chatIndicators.yda.clientReplyPercent + '%' : ''}}</span>
+                  <div>较昨日：
+                    <span v-if="chatIndicators.yda.clientReplyPercent" class="selected_color"
+                      :style="{color: chatIndicators.yda.clientReplyPercent > 0 ? '#1677FF' : '#FF4E4E'}">
+                      {{chatIndicators.yda.clientReplyPercent > 0 ? '+' : '-'}}{{chatIndicators.yda.clientReplyPercent}}%</span>
                   </div>
-                  <image class="client_item_icon" src="./img/jxs4.png"></image>
+                  <image class="client_item_icon" v-if="chatIndicators.yda.clientReplyPercent" :src="chatIndicators.yda.clientReplyPercent > 0 ? './img/jxs-up1.png' : './img/jxs-down2.png'"></image>
                 </div>
               </div>
             </div>
@@ -866,7 +868,7 @@
                   <div>昨日新增：
                     <span class="selected_color">{{chatIndicators.yda.proactiveConsult}}</span>
                   </div>
-                  <image class="client_item_icon" src="./img/jxs4.png"></image>
+                  <image class="client_item_icon" src="./img/jxs-up1.png"></image>
                 </div>
               </div>
               <div class="interact_line"></div>
@@ -877,7 +879,7 @@
                   <div>昨日新增：
                     <span class="selected_color">{{chatIndicators.yda.memberReply}}</span>
                   </div>
-                  <image class="client_item_icon" src="./img/jxs4.png"></image>
+                  <image class="client_item_icon" src="./img/jxs-up1.png"></image>
                 </div>
               </div>
               <div class="interact_line"></div>
@@ -885,10 +887,13 @@
                 <div class="num_item_title">员工平均响应时长</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 ? chatIndicators.yda.avgReplyDuration + '秒' : ''}}</span>
+                  <div>较昨日：
+                    <span v-if="chatIndicators.yda.avgReplyDuration" class="selected_color"
+                      :style="{color: chatIndicators.yda.avgReplyDuration > 0 ? '#FF4E4E' : '#1677FF'}">
+                      {{chatIndicators.yda.avgReplyDuration > 0 ? '+' : '-'}}{{chatIndicators.yda.avgReplyDuration}}秒</span>
                   </div>
-                  <image class="client_item_icon" src="./img/jxs4.png"></image>
+                  <image class="client_item_icon" v-if="chatIndicators.yda.avgReplyDuration"
+                    :src="chatIndicators.yda.avgReplyDuration > 0 ? './img/jxs-up2.png' : './img/jxs-down1.png'"></image>
                 </div>
               </div>
             </div>
@@ -922,19 +927,19 @@
           <div class="branch_table" v-if="saleRankData.length > 0">
             <div class="branch_header">
               <div style="width: 30px;">排名</div>
-              <div style="width: 30px;">顾问</div>
-              <div style="width: 30px;">网点</div>
-              <div style="width: 30px;" v-for="(item, index) in saleRankData[0].cols" :key="index">
+              <div style="width: 80px;">顾问</div>
+              <div style="width: 40px;">网点</div>
+              <div style="width: 60px;" v-for="(item, index) in saleRankData[0].cols" :key="index">
                 {{item.name}}
               </div>
             </div>
             <div class="branch_item" v-for="(item, index) in saleRankData" :key="index">
               <div style="width: 30px;">{{index + 1}}</div>
-              <div style="width: 30px;">{{item.memberName}}</div>
-              <div style="width: 30px;">{{item.outletName}}</div>
+              <div style="width: 80px;max-width: 80px;">{{item.memberName}}</div>
+              <div style="width: 40px;">{{item.outletName}}</div>
               <!-- 此处先循环saleRankData[0].cols，是表格头以第一条数据为准 -->
-              <div style="width: 30px;" v-for="(val, valIndex) in saleRankData[0].cols" :key="valIndex">
-                <span v-for="(col, colIndex) in item.cols" :key="colIndex">
+              <div style="min-width: 60px;" v-for="(val, valIndex) in saleRankData[0].cols" :key="valIndex">
+                <span style="min-width: 60px;" v-for="(col, colIndex) in item.cols" :key="colIndex">
                   {{val.name === col.name ? (col.value ? col.value[0] : '-') : ''}}
                 </span>
               </div>
@@ -953,15 +958,15 @@
           <div class="branch_table">
             <div class="branch_header" style="box-sizing: border-box;">
               <div style="width: 30px;">排名</div>
-              <div style="width: 30px;">员工</div>
-              <div style="width: 60px;">聊天客户数</div>
+              <div style="width: 80px;">员工</div>
+              <div style="width: 50px;">聊天客户数</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: 60px;">{{item.privateChat}}</div>
+              <div style="width: 80px;max-width: 80px;">{{item.memberName}}</div>
+              <div style="width: 50px;">{{item.privateChat}}</div>
               <div style="width: 50px;">{{item.proactiveServe}}</div>
               <div style="width: 50px;">{{item.clientReply}}</div>
             </div>
@@ -2248,17 +2253,44 @@
         })
         interactChart.setOption({
           legend: {
-            orient: 'horizontal',
             x: 'center',
             y: 10,
             align: 'right',
             itemWidth: 20,
-            itemHeight: 4,
+            itemHeight: 5,
             itemGap: 20,
             textStyle: {//图例文字的样式
               color: '#666666', //图例文字颜色
               fontSize: 10//图例文字大小
-            }
+            },
+            data: [
+              {
+                name: "私聊客户数",
+                // 单独设置图例空心圆，通过设置边框颜色+背景颜色白色实现空心圆
+                itemStyle: {
+                  color: "#fff",
+                  borderColor: '#1677FF',
+                  borderWidth: 1,
+                },
+              },
+              {
+                name: "私聊消息数",
+                // 单独设置图例空心圆，通过设置边框颜色+背景颜色白色实现空心圆
+                itemStyle: {
+                  color: "#fff",
+                  borderColor: '#5CE56E',
+                  borderWidth: 1,
+                },
+              },
+              {
+                name: "群消息数",
+                itemStyle: {
+                  width: 20,
+                  height: 5,
+                  color: "#E6F0FF",
+                },
+              },
+            ]
           },
           tooltip: {
             trigger: 'axis'
@@ -2351,12 +2383,40 @@
             y: 10,
             align: 'right',
             itemWidth: 20,
-            itemHeight: 4,
+            itemHeight: 5,
             itemGap: 20,
             textStyle: {//图例文字的样式
               color: '#666666', //图例文字颜色
               fontSize: 10//图例文字大小
-            }
+            },
+            data: [
+              {
+                name: "主动服务会话数",
+                // 单独设置图例空心圆，通过设置边框颜色+背景颜色白色实现空心圆
+                itemStyle: {
+                  width: 20,
+                  height: 5,
+                  color: "#1677FF",
+                },
+              },
+              {
+                name: "客户回复会话数",
+                // 单独设置图例空心圆，通过设置边框颜色+背景颜色白色实现空心圆
+                itemStyle: {
+                  width: 20,
+                  height: 5,
+                  color: "#5CE56E",
+                },
+              },
+              {
+                name: "客户回复率",
+                itemStyle: {
+                  color: "#fff",
+                  borderColor: '#FFA64E',
+                  borderWidth: 1,
+                },
+              },
+            ]
           },
           tooltip: {
             trigger: 'axis'
@@ -2488,7 +2548,35 @@
             textStyle: {//图例文字的样式
               color: '#666666', //图例文字颜色
               fontSize: 10//图例文字大小
-            }
+            },
+            data: [
+              {
+                name: "主动咨询会话数",
+                // 单独设置图例空心圆，通过设置边框颜色+背景颜色白色实现空心圆
+                itemStyle: {
+                  width: 20,
+                  height: 5,
+                  color: "#1677FF",
+                },
+              },
+              {
+                name: "员工回复会话数",
+                // 单独设置图例空心圆，通过设置边框颜色+背景颜色白色实现空心圆
+                itemStyle: {
+                  width: 20,
+                  height: 5,
+                  color: "#5CE56E",
+                },
+              },
+              {
+                name: "员工平均响应时长",
+                itemStyle: {
+                  color: "#fff",
+                  borderColor: '#FFA64E',
+                  borderWidth: 1,
+                },
+              },
+            ]
           },
           tooltip: {
             trigger: 'axis'