经销商数据看板

lottery/aiRecord.html

@@ -239,7 +239,7 @@
         fetch(this.httpUrl + `/scrm/v1/wxcp-chat-tool/p/kfMessages`, {
           method: 'post',
           body: JSON.stringify({
-            bid: 10039,
+            bid: this.bId,
             chatId: this.chatId,
             page: this.currentPage,
             pageCount: 20,

lottery/index.html

@@ -180,6 +180,14 @@
 						// 富文本解析(文章内容)
 						var currentQueryParams = window.location.search;
 						window.location.replace('aiRecord.html' + currentQueryParams)
+					} else if (this.h5Type == 40) {
+						if (localStorage.getItem('tokenValue')) {
+							var currentQueryParams = window.location.search;
+							window.location.replace('jxs.html' + currentQueryParams)
+						} else {
+							var currentQueryParams = window.location.search;
+							window.location.replace('jxsLogin.html' + currentQueryParams)
+						}
 					} else if (!this.h5Type && this.bId) {
 						this.getAuth()
 					}

lottery/js/select-date.js

@@ -9,31 +9,57 @@ var demo_str = `
               @click="handleChangeNumDateType(30)">近30日</div>
           <div class="filter_time_item" :class="{ 'current_date': numRange === 3 }"
               @click="handleChangeNumDateType(3)">自定义</div>
+            <van-calendar type="range" v-model="showDate" @confirm="onConfirm" color="#1677FF" :min-date="minDate"
+                :max-date="maxDate" :allow-same-day="true"></van-calendar>
       </div>
   </div>
 `
 var demoComponent = Vue.extend({
   template:demo_str ,
   data:function(){
-    return {
-      numRange: 7,
-      currentDate: [],
-    }
-  },
+        return {
+            numRange: 7,
+            currentDate: [],
+            showDate: false,
+            minDate: '',
+            maxDate: '',
+        }
+    },
+    created() { 
+        let nowDat = new Date();
+        let dateY = nowDat.getFullYear()
+        let dateM = nowDat.getMonth()
+        let dateD = nowDat.getDate()
+        // 设置日期可选最小值minDate、最大值maxDate
+        this.minDate = new Date(dateY - 1, dateM, dateD)
+        //日历可选范围为一年，dateY + 1
+        this.maxDate = new Date()
+    },
   methods: {
     handleChangeNumDateType(type) {
-        this.numRange = type
-        if (type === 1) {
-            this.currentDate = [this.getDateTime(-type), this.getDateTime(-1)]
-        } else if (type === 7) {
-            this.currentDate = [this.getDateTime(-type), this.getDateTime(-1)]
-        } else if (type === 30) {
-            this.currentDate = [this.getDateTime(-type), this.getDateTime(-1)]
-        } else {
-            this.currentDate = [this.getDateTime(-30), this.getDateTime(-1)]
-        }
+          this.numRange = type
+          if (type === 3) { 
+            this.showDate = true
+          } else {
+            if (type === 1) {
+                this.currentDate = [this.getDateTime(-type), this.getDateTime(-1)]
+            } else if (type === 7) {
+                this.currentDate = [this.getDateTime(-type), this.getDateTime(-1)]
+            } else if (type === 30) {
+                this.currentDate = [this.getDateTime(-type), this.getDateTime(-1)]
+            }
+            this.$emit('change-date', this.currentDate)
+          }
+      },
+      onConfirm(date) {
+        const [start, end] = date
+        this.currentDate = [this.formatDate(start), this.formatDate(end)]
+        this.showDate = false
         this.$emit('change-date', this.currentDate)
-    },
+      },
+      formatDate(date) {
+        return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
+      },
     getDateTime (day) {
         let today = new Date()
         let targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day

lottery/jxs.html

@@ -47,6 +47,40 @@
     display: flex;
     flex-direction: column;
   }
+  .popup_list {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    padding: 44px 30px 10px;
+
+  }
+  .popup_item {
+    padding: 15px 0;
+    font-weight: bold;
+    font-size: 16px;
+    color: #222222;
+    line-height: 24px;
+  }
+  .popup_line {
+    height: 1px;
+    background:  linear-gradient( 90deg, #000000 0%, rgba(0,0,0,0) 100%);
+    opacity: 0.1;
+  }
+  .mer_item {
+    padding: 15px 0;
+    font-weight: bold;
+    font-size: 16px;
+    color: #222222;
+    line-height: 24px;
+    border-bottom: 1px solid transparent; /* 占位 */
+    border-image: linear-gradient(90deg, rgba(0,0,0,0.1) 0%, transparent 100%) 1;
+  }
+  .mer_item_active {
+    color: #1677FF;
+  }
+
   .van-nav-bar__content {
     height: 44px;
   }
@@ -67,17 +101,17 @@
     padding: 0 10px;
   }
   .page4_content {
-    flex: 1;
-    padding: 10px;
+    padding: 54px 10px 10px;
   }
-  .client_connect {
+  .box_connect {
     width: 100%;
-    height: 456px;
     background: 
     linear-gradient(180deg, rgba(22, 119, 255, 0.05) 0%, rgba(22,119,255,0) 100%) 0 0 / 100% 200px no-repeat,
     #FFFFFF;
     padding: 12px 10px 15px;
     box-sizing: border-box;
+    border-radius: 10px;
+    margin-bottom: 15px;
   }
   .module_title {
     display: flex;
@@ -131,6 +165,24 @@
     border-radius: 12px;
     padding: 4px 14px 3px;
   }
+  .clientCharts_title {
+    font-weight: 500;
+    font-size: 12px;
+    color: #222222;
+    display: flex;
+    align-items: center;
+    padding-top: 15px;
+  }
+  .clientCharts_title::before {
+    content: '';
+    width: 2px;
+    height: 13px;
+    background: #1677FF;
+    border-radius: 1px;
+    margin-right: 5px;
+    display: inline-block;
+  }
+
   /* 选择日期组件结束 */
   .client_box {
     display: flex;
@@ -146,29 +198,39 @@
     width: 50%;
     padding: 10px 15px 5px;
   }
-  .client_item_title {
+  .num_item_title {
     font-weight: 400;
     font-size: 12px;
-    color: #666666;
     line-height: 17px;
     padding-bottom: 5px;
+    color: #FFFFFF;
+  }
+  .client_title_color {
+    color: #666666;
   }
-  .client_item_count {
+
+  .num_item_count {
     font-weight: bold;
     font-size: 16px;
-    color: #222222;
     line-height: 24px;
     padding-bottom: 5px;
+    color: #FFFFFF;
+  }
+  .client_count_color {
+    color: #222222;
   }
-  .client_item_data {
+  .num_item_data {
     display: flex;
     align-items: center;
     font-weight: 400;
     font-size: 10px;
-    color: #999999;
     line-height: 15px;
+    color: #FFFFFF;
+  }
+  .client_data_color {
+    color: #999999;
   }
-  .client_count {
+  .num_count {
     color: #1677FF;
   }
   .selected_color {
@@ -200,6 +262,115 @@
     height: 66px;
     background: linear-gradient( 180deg, rgba(229,232,237,0) 0%, #E5E8ED 51%, rgba(229,232,237,0) 100%);
   }
+.branch_header {
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: #F7F9FC;
+    border-radius: 10px;
+    font-weight: 500;
+    font-size: 10px;
+    color: #222222;
+}
+.branch_item {
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-weight: 400;
+    font-size: 10px;
+    color: #222222;
+    border-bottom: 1px solid #E5E8ED;
+    text-align: center;
+}
+.interact_box {
+  padding: 10px;
+  background: #1677FF;
+  border-radius: 10px;
+}
+.interact_box_top {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 29px;
+}
+.interact_box_line {
+  width: 100%;
+  height: 1px;
+  margin: 15px 0;
+  background: linear-gradient(to right, 
+    rgba(229, 232, 237, 0) 0%, 
+    #E5E8ED 51%, 
+    rgba(229, 232, 237, 0) 100%
+  );
+}
+.interact_box_bottom {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.interact_line {
+  width: 1px;
+  margin: 0 15px;
+  height: 66px;
+  background: linear-gradient( 180deg, rgba(229,232,237,0) 0%, #E5E8ED 51%, rgba(229,232,237,0) 100%);
+}
+.interact_item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.leadGen_box {
+  padding: 10px;
+  background: #1677FF;
+  border-radius: 10px;
+}
+.spread_item {
+  width: 162px;
+}
+.table_carList {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  overflow-x: auto;
+  margin-bottom: 20px;
+}
+.table_carBox {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-weight: 400;
+  font-size: 12px;
+  color: #222222;
+  border-radius: 34px;
+  margin-right: 10px;
+  padding: 0 15px;
+}
+.table_carBox_bg {
+  background: linear-gradient( #FFFFFF 0%, #E6F0FF 100%);
+}
+.table_car {
+  width: 90px;
+  height: 45px;
+}
+.table_carline {
+  width: 16px;
+  height: 3px;
+  border-radius: 34px;
+  margin-top: 2px;
+}
+.table_carline_bg {
+  background: #1677FF;
+}
+.data_tips {
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 17px;
+  color: #C4CFDA;
+  text-align: center;
+  margin: 5px 0 24px;
+}
 
 </style>
 
@@ -207,16 +378,27 @@
   <div id="box" class="box">
     <!-- 数据查看 -->
     <div class="page4">
-      <van-nav-bar title="经销商名称" class="navbar">
+      <van-nav-bar :title="jxsName" class="navbar" fixed>
         <template #left>
           <image class="navbar_icon" src="./img/jxs1.png"></image>
         </template>
         <template #right>
-          <image class="navbar_icon" src="./img/jxs2.png"></image>
+          <image class="navbar_icon" src="./img/jxs2.png" @click="handleShowPopup"></image>
         </template>
       </van-nav-bar>
+      <van-popup v-model="showPopup" closeable position="top" :style="{ height: '100%' }" @close="handleClosePopup">
+        <div class="popup_list" v-show="!showMer">
+          <div class="popup_item" @click="showMer = true">切换商户</div>
+          <div class="popup_line"></div>
+          <div class="popup_item" @click="handleLoginOut">退出登录</div>
+        </div>
+        <div class="popup_list" v-show="showMer">
+          <div class="mer_item" :class="{'mer_item_active': tenancyId == item.id}" v-for="(item, index) in merList"
+            :key="index" @click="handleSelectMer(item.id)">{{item.name}}</div>
+        </div>
+      </van-popup>
       <div class="page4_content">
-        <div class="client_connect">
+        <div class="box_connect">
           <div class="module_title">
             <div class="module_title_left">
               <image class="module_title_icon" src="./img/jxs3.png"></image>
@@ -225,53 +407,263 @@
             <select-date @change-date="handleChangeDate"></select-date>
           </div>
           <div class="client_box">
-            <div class="client_item" @click="handleClickItem(1)" :class="{'selected_bg': index === 1}">
-              <div class="client_item_title" :class="{'selected_color': index === 1}">总客户数</div>
-              <div class="client_item_count" :class="{'selected_color': index === 1}">1000</div>
-              <div class="client_item_data" :class="{'selected_color': index === 1}">
+            <div class="client_item" @click="handleClickItem(1, '总客户数')" :class="{'selected_bg': index === 1}">
+              <div class="num_item_title client_title_color" :class="{'selected_color': index === 1}">总客户数</div>
+              <div class="num_item_count client_count_color" :class="{'selected_color': index === 1}">{{homeIndicators.clientTotal}}</div>
+              <div class="num_item_data client_data_color" :class="{'selected_color': index === 1}">
                 <div>昨日新增：
-                  <span class="client_count" :class="{'selected_color': index === 1}">300</span>
+                  <span class="num_count" :class="{'selected_color': index === 1}">{{homeIndicators.ydaAdd}}</span>
                 </div>
                 <image class="client_item_icon" :src=" index === 1 ? './img/jxs5.png' : './img/jxs4.png'"></image>
               </div>
             </div>
-            <div class="client_item" @click="handleClickItem(2)" :class="{'selected_bg': index === 2}">
-              <div class="client_item_title" :class="{'selected_color': index === 2}">一客一群</div>
-              <div class="client_item_count" :class="{'selected_color': index === 2}">1000</div>
-              <div class="client_item_data" :class="{'selected_color': index === 2}">
+            <div class="client_item" @click="handleClickItem(2, '一客一群')" :class="{'selected_bg': index === 2}">
+              <div class="num_item_title client_title_color" :class="{'selected_color': index === 2}">一客一群</div>
+              <div class="num_item_count client_count_color" :class="{'selected_color': index === 2}">{{homeIndicators.ocogNum}}</div>
+              <div class="num_item_data client_data_color" :class="{'selected_color': index === 2}">
                 <div>昨日新增：
-                  <span class="client_count" :class="{'selected_color': index === 2}">300</span>
+                  <span class="num_count" :class="{'selected_color': index === 2}">{{homeIndicators.ydaOcogNum}}</span>
                 </div>
                 <image class="client_item_icon" :src=" index === 2 ? './img/jxs5.png' : './img/jxs4.png'"></image>
               </div>
             </div>
           </div>
-          <div class="counselor_box" @click="handleClickItem(3)" :class="{'selected_bg': index === 3}">
+          <div class="counselor_box" @click="handleClickItem(3, '顾问添加数')" :class="{'selected_bg': index === 3}">
             <div class="counselor_item">
-              <div class="client_item_title" :class="{'selected_color': index === 3}">销售顾问添加数</div>
-              <div class="client_item_count" :class="{'selected_color': index === 3}">1000</div>
-              <div class="client_item_data" :class="{'selected_color': index === 3}">
+              <div class="num_item_title client_title_color" :class="{'selected_color': index === 3}">销售顾问添加数</div>
+              <div class="num_item_count client_count_color" :class="{'selected_color': index === 3}">{{homeIndicators.saleAdd}}</div>
+              <div class="num_item_data client_data_color" :class="{'selected_color': index === 3}">
                 <div>昨日新增：
-                  <span class="client_count" :class="{'selected_color': index === 3}">300</span>
+                  <span class="num_count" :class="{'selected_color': index === 3}">{{homeIndicators.ydaSaleAdd}}</span>
                 </div>
                 <image class="client_item_icon" :src=" index === 3 ? './img/jxs5.png' : './img/jxs4.png'"></image>
               </div>
             </div>
             <div class="counselor_line"></div>
             <div class="counselor_item">
-              <div class="client_item_title" :class="{'selected_color': index === 3}">服务顾问添加数</div>
-              <div class="client_item_count" :class="{'selected_color': index === 3}">1000</div>
-              <div class="client_item_data" :class="{'selected_color': index === 3}">
+              <div class="num_item_title client_title_color" :class="{'selected_color': index === 3}">服务顾问添加数</div>
+              <div class="num_item_count client_count_color" :class="{'selected_color': index === 3}">{{homeIndicators.serveAdd}}</div>
+              <div class="num_item_data client_data_color" :class="{'selected_color': index === 3}">
                 <div>昨日新增：
-                  <span class="client_count" :class="{'selected_color': index === 3}">300</span>
+                  <span class="num_count" :class="{'selected_color': index === 3}">{{homeIndicators.ydaServeAdd}}</span>
                 </div>
                 <image class="client_item_icon" :src=" index === 3 ? './img/jxs5.png' : './img/jxs4.png'"></image>
               </div>
             </div>
           </div>
-          <div id="main" style="width: 100%;height: 120px"></div>
+          <div class="clientCharts_title">{{clientName}}统计表</div>
+          <div id="labelChart" v-if="index == 1 || index == 2" style="width: 100%;height: 200px"></div>
+
+          <div id="adviserChart" v-if="index == 3" style="width: 100%;height: 200px"></div>
+        </div>
+        <div class="box_connect">
+            <div class="module_title">
+                <div class="module_title_left">
+                    <image class="module_title_icon" src="./img/jxs3.png"></image>
+                    <div>客户资产</div>
+                </div>
+            </div>
+            <div id="funnelChart" :style="{ width: '100%', height: '200px' }"></div>
+
+            <div class="table_carList">
+              <div class="table_carBox" :class="{'table_carBox_bg': carIndex === index}" v-for="(item, index) in tableList" :key="index" @click="handleClickCar(item, index)">
+                <image class="table_car" :src="item.carModelImg"></image>
+                <div>{{item.carModel}}</div>
+                <div class="table_carline" :class="{'table_carline_bg': carIndex === index}"></div>
+              </div>
+            </div>
 
+            <div class="branch_table" v-if="carStepData.length > 0">
+                <div class="branch_header">
+                    <div>客群包</div>
+                    <div 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: 30px;">{{item.packageName}}</div>
+                    <div style="width: 30px;" v-for="(col, colIndex) in item.cols" :key="colIndex">{{col.value[0]}}</div>
+                </div>
+            </div>
+        </div>
+        <div class="box_connect">
+          <div class="module_title">
+            <div class="module_title_left">
+              <image class="module_title_icon" src="./img/jxs3.png"></image>
+              <div>网点概况</div>
+            </div>
+            <select-date @change-date="handleChangeWdDate"></select-date>
+          </div>
+          <div class="branch_table">
+            <div class="branch_header">
+              <div>网点</div>
+              <div>总客户数</div>
+              <div>添加客户数</div>
+              <div>任务发布数</div>
+              <div>线索数</div>
+              <div>传播数</div>
+            </div>
+            <div v-if="outletCount.length">
+              <div class="branch_item" v-for="(item, index) in outletCount" :key="index">
+                <div style="width: 20px;">{{item.name}}</div>
+                <div style="width: 40px;">{{item.clientTotal}}</div>
+                <div style="width: 50px;">{{item.clientAdd}}</div>
+                <div style="width: 50px;">{{item.taskNum}}</div>
+                <div style="width: 30px;">{{item.clueNum}}</div>
+                <div style="width: 30px;">{{item.spreadNum}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="box_connect">
+          <div class="module_title">
+            <div class="module_title_left">
+              <image class="module_title_icon" src="./img/jxs3.png"></image>
+              <div>互动</div>
+            </div>
+            <select-date @change-date="handleChangeHdDate"></select-date>
+          </div>
+          <div class="interact_box">
+            <div class="interact_box_top">
+              <div class="interact_item">
+                <div class="num_item_title">触达客户数</div>
+                <div class="num_item_count">{{homeIndicators.reachNum}}</div>
+                <div class="num_item_data">
+                  <div>昨日新增：
+                    <span class="selected_color">{{homeIndicators.ydaReachNum}}</span>
+                  </div>
+                  <image class="client_item_icon" src="./img/jxs5.png"></image>
+                </div>
+              </div>
+            </div>
+            <div class="interact_box_line"></div>
+            <div class="interact_box_bottom">
+              <div class="interact_item">
+                <div class="num_item_title">私聊客户数</div>
+                <div class="num_item_count">{{homeIndicators.privateChat}}</div>
+                <div class="num_item_data">
+                  <div>昨日新增：
+                    <span class="selected_color">{{homeIndicators.ydaPrivateChat}}</span>
+                  </div>
+                  <image class="client_item_icon" src="./img/jxs5.png"></image>
+                </div>
+              </div>
+              <div class="interact_line"></div>
+              <div class="interact_item">
+                <div class="num_item_title">私聊消息数</div>
+                <div class="num_item_count">{{homeIndicators.privateMsgNum}}</div>
+                <div class="num_item_data">
+                  <div>昨日新增：
+                    <span class="selected_color">{{homeIndicators.ydaPrivateMsgNum}}</span>
+                  </div>
+                  <image class="client_item_icon" src="./img/jxs5.png"></image>
+                </div>
+              </div>
+              <div class="interact_line"></div>
+              <div class="interact_item">
+                <div class="num_item_title">群消息数</div>
+                <div class="num_item_count">{{homeIndicators.groupMsgNum}}</div>
+                <div class="num_item_data">
+                  <div>昨日新增：
+                    <span class="selected_color">{{homeIndicators.ydaGroupMsgNum}}</span>
+                  </div>
+                  <image class="client_item_icon" src="./img/jxs5.png"></image>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div id="interactChart" style="width: 100%;height: 200px"></div>
+          <div class="branch_table" style="margin-top: 20px;">
+            <div class="branch_header">
+              <div>任务类型</div>
+              <div>下发任务数</div>
+              <div>成功发送任务数</div>
+              <div>成功触达客户数</div>
+              <div>任务完成率</div>
+            </div>
+            <div class="branch_item">
+              <div style="width: 40px;">朋友圈</div>
+              <div style="width: 50px;">{{hdList.moment.taskNum}}</div>
+              <div style="width: 70px;">{{hdList.moment.completeNum}}</div>
+              <div style="width: 70px;">{{hdList.moment.reachNum}}</div>
+              <div style="width: 50px;">{{hdList.moment.taskCompletePercent}}</div>
+            </div>
+            <div class="branch_item">
+              <div style="width: 40px;">群发</div>
+              <div style="width: 50px;">{{hdList.send.taskNum}}</div>
+              <div style="width: 70px;">{{hdList.send.completeNum}}</div>
+              <div style="width: 70px;">{{hdList.send.reachNum}}</div>
+              <div style="width: 50px;">{{hdList.send.taskCompletePercent}}</div>
+            </div>
+          </div>
+        </div>
+        <div class="box_connect">
+          <div class="module_title">
+            <div class="module_title_left">
+              <image class="module_title_icon" src="./img/jxs3.png"></image>
+              <div>留资</div>
+            </div>
+            <select-date @change-date="handleChangeLzDate"></select-date>
+          </div>
+          <div class="leadGen_box">
+            <div class="interact_box_bottom">
+              <div class="interact_item">
+                <div class="num_item_title">总线索数</div>
+                <div class="num_item_count">{{homeIndicators.clueNum}}</div>
+                <div class="num_item_data">
+                  <div>昨日新增：
+                    <span class="selected_color">{{homeIndicators.ydaClueNum}}</span>
+                  </div>
+                  <image class="client_item_icon" src="./img/jxs5.png"></image>
+                </div>
+              </div>
+              <div class="interact_line"></div>
+              <div class="interact_item">
+                <div class="num_item_title">企微</div>
+                <div class="num_item_count">{{homeIndicators.cpClueNum}}</div>
+                <div class="num_item_data">
+                  <div>昨日新增：
+                    <span class="selected_color">{{homeIndicators.ydaCpClueNum}}</span>
+                  </div>
+                  <image class="client_item_icon" src="./img/jxs5.png"></image>
+                </div>
+              </div>
+              <div class="interact_line"></div>
+              <div class="interact_item">
+                <div class="num_item_title">来问小菱</div>
+                <div class="num_item_count">{{homeIndicators.lwClueNum}}</div>
+                <div class="num_item_data">
+                  <div>昨日新增：
+                    <span class="selected_color">{{homeIndicators.ydaLwClueNum}}</span>
+                  </div>
+                  <image class="client_item_icon" src="./img/jxs5.png"></image>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div id="clueChart" style="width: 100%;height: 200px"></div>
+        </div>
+        <div class="box_connect">
+          <div class="module_title">
+            <div class="module_title_left">
+              <image class="module_title_icon" src="./img/jxs3.png"></image>
+              <div>到店传播</div>
+            </div>
+            <select-date @change-date="handleChangeSpreadDate"></select-date>
+          </div>
+          <div class="leadGen_box spread_item">
+            <div class="num_item_title">参与数</div>
+            <div class="num_item_count">{{homeIndicators.spreadNum}}</div>
+            <div class="num_item_data">
+              <div>昨日新增：
+                <span class="selected_color">{{homeIndicators.ydaSpreadNum}}</span>
+              </div>
+              <image class="client_item_icon" src="./img/jxs5.png"></image>
+            </div>
+          </div>
+          <div id="spreadChart" style="width: 100%;height: 200px"></div>
         </div>
+        <div class="data_tips">—— 每日5：00更新数据 ——</div>
       </div>
     </div>
   </div>
@@ -284,11 +676,92 @@
         httpUrl: '',
         bId: null,
         env: '',
+        jxsName: '',
+        token: '',
+        tenancyId: '',
+        showPopup: false,
+        showMer: false,
+
+        dealerIds: [], // 经销商id列表
+        merList: [], // 商户列表
+
+        homeIndicators: {
+          clientTotal: 0,
+          ydaAdd: 0,
+          ocogNum: 0,
+          ydaOcogNum: 0,
+          saleAdd: 0,
+          ydaSaleAdd: 0,
+          serveAdd: 0,
+          ydaServeAdd: 0,
+          reachNum: 0,
+          ydaReachNum: 0,
+          privateChatNum: 0,
+          ydaPrivateChatNum: 0,
+          privateMsgNum: 0,
+          ydaPrivateMsgNum: 0,
+          groupMsgNum: 0,
+          ydaGroupMsgNum: 0,
+          clueNum: 0,
+          ydaClueNum: 0,
+          cpClueNum: 0,
+          ydaCpClueNum: 0,
+          lwClueNum: 0,
+          ydaLwClueNum: 0,
+          spreadNum: 0,
+          ydaSpreadNum: 0,
+        }, // 首页全部数据值
+
+        clientName: '总客户数',
         index: 1,
-        dateListDayMin: '',
-        dateListDayMax: '',
+        khStartTime: '',
+        khEndTime: '',
         lineDate: [],
-        lineTotal: [],
+        clientAdd: [],
+        ocogNum: [],
+        saleAdd: [],
+        serveAdd: [],
+
+        stepChartData: [], // 客户资产梯形图
+        tableList: [], // 客群包阶段车型
+        carIndex: 0,
+        carStepData: [], // 客群包阶段车型数据
+
+        wdStartTime: '',
+        wdEndTime: '',
+        outletCount: [], // 网点
+
+        hdStartTime: '',
+        hdEndTime: '',
+        interactDate: [], // 互动
+        privateChat: [],
+        privateMsgNum: [],
+        groupMsgNum: [],
+        hdList: {
+          moment: {
+            taskNum: 0,
+            completeNum: 0,
+            reachNum: 0,
+            taskCompletePercent: 0,
+          },
+          send: {
+            taskNum: 0,
+            completeNum: 0,
+            reachNum: 0,
+            taskCompletePercent: 0,
+          },
+        },
+
+        lzStartTime: '',
+        lzEndTime: '',
+        clueDate: [], // 留资
+        cpClueNum: [],
+        lwClueNum: [],
+
+        spreadStartTime: '',
+        spreadEndTime: '',
+        spreadDate: [], // 到店传播
+        spreadNum: [],
       }
     },
     created() {
@@ -299,199 +772,1016 @@
         this.httpUrl = 'https://wlapi.wefanbot.com'
       } else {
         this.httpUrl = 'http://test.wefanbot.com:18993'
+        // this.httpUrl = 'http://192.168.1.128:18993'
       }
-      this.getLabelData1()
+      this.jxsName = localStorage.getItem('jxsName')
+      this.token = localStorage.getItem('tokenValue')
+      this.tenancyId = localStorage.getItem('tenancyIdValue')
+
+      this.khStartTime = this.getDateTime(-7)
+      this.khEndTime = this.getDateTime(-1)
+
+      this.wdStartTime = this.getDateTime(-7)
+      this.wdEndTime = this.getDateTime(-1)
+
+      this.hdStartTime = this.getDateTime(-7)
+      this.hdEndTime = this.getDateTime(-1)
+
+      this.lzStartTime = this.getDateTime(-7)
+      this.lzEndTime = this.getDateTime(-1)
+
+      this.spreadStartTime = this.getDateTime(-7)
+      this.spreadEndTime = this.getDateTime(-1)
+
+      this.getDealerIds()
+      this.getAdminList()
     },
     methods: {
+      // 获取经销商id
+      getDealerIds() {
+        const headers = new Headers()
+        headers.append('token', this.token)
+        headers.append('tenancyId', this.tenancyId)
+        fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/getDealerIds`, {
+          method: 'GET',
+          headers: headers
+        }).then(res => {
+          return res.json()
+        }).then(result => {
+          let { data, code, msg } = result
+          if (code === 1) {
+            this.dealerIds = data || []
+            if (this.dealerIds && this.dealerIds.length > 0) {
+              this.getHomeIndicators()
+              this.getLabelData()
+              this.dataStep()
+              this.stepStatistic()
+              this.getOutletCount()
+              this.getInteract()
+              this.getHdList()
+              this.getClueList()
+              this.getSpreadList()
+            }
+          } else if (code === 10001) {
+            this.loginOut()
+          } else {
+            vant.Toast.fail(msg)
+          }
+        })
+      },
+      // 获取商户列表（右上角）
+      getAdminList() {
+        const headers = new Headers()
+        headers.append('token', this.token)
+        fetch(this.httpUrl + `/scrm/v1/user-info/o/adminList`, {
+          method: 'GET',
+          headers: headers
+        }).then(res => {
+          return res.json()
+        }).then(result => {
+          let { data, code, msg } = result
+          if (code === 1) {
+            this.merList = data || []
+          } else if (code === 10001) {
+            this.loginOut()
+          } else {
+            vant.Toast.fail(msg)
+          }
+        })
+      },
+      // 客户数据
+      getHomeIndicators () {
+        const headers = new Headers()
+        headers.append('token', this.token)
+        headers.append('tenancyId', this.tenancyId)
+        fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/homeIndicators?dealerId=${this.dealerIds[0]}`, {
+          method: 'GET',
+          headers: headers
+        }).then(res => {
+          return res.json()
+        }).then(result => {
+          let { data, code, msg } = result
+          if (code === 1) {
+            this.homeIndicators = data || []
+          } else if (code === 10001) {
+            this.loginOut()
+          } else {
+            vant.Toast.fail(msg)
+          }
+        })
+      },
+      // 切换日期范围（客户趋势图）
       handleChangeDate(date) {
-        this.dateListDayMin = Number(date[0].replace(/\D/g, ''))
-        this.dateListDayMax = Number(date[1].replace(/\D/g, ''))
+        this.khStartTime = date[0]
+        this.khEndTime = date[1]
         this.getLabelData()
       },
-      handleClickItem(index) {
+      // 切换三个模块（总客户数、一客一群、销售顾问+服务顾问）
+      handleClickItem(index, title) {
         this.index = index
+        this.clientName = title
+        this.passValue()
       },
-      getLabelData1() {
-        // 基于准备好的dom，初始化echarts实例
-          var myChart = echarts.init(document.getElementById('main'));
-
-          // 指定图表的配置项和数据
-          var option = {
-              title: {
-                  text: 'ECharts 入门示例'
-              },
-              tooltip: {},
-              legend: {
-                  data: ['销量']
-              },
-              xAxis: {
-                  data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
-              },
-              yAxis: {},
-              series: [
-                  {
-                      name: '销量',
-                      type: 'bar',
-                      data: [5, 20, 36, 10, 10, 20]
-                  }
-              ]
-          };
-
-          // 使用刚指定的配置项和数据显示图表。
-          myChart.setOption(option);
+      // 切换三个图表（总客户数、一客一群、销售顾问+服务顾问）
+      passValue () {
+        if (this.index === 3) {
+          this.$nextTick(() => {
+            this.adviserChart()
+          })
+        } else {
+          this.$nextTick(() => {
+            this.labelChart()
+          })
+        }
       },
+      // 客户趋势图数据
       getLabelData() {
-        fetch(this.httpUrl + `/scrm/v1/ct-stats/m/viewByDateList?dayMin=${this.dateListDayMin}&dayMax=${this.dateListDayMax}`, {
+        fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/clientTrend`, {
               method: 'post',
               body: JSON.stringify({
+                dealerId: this.dealerIds[0],
+                startTime: this.khStartTime,
+                endTime: this.khEndTime,
               }),
               headers: {
                   'Content-Type': 'application/json',
+                  'token': this.token,
+                  'tenancyId': this.tenancyId
               }
           }).then(res => {
               return res.json()
           }).then(result => {
               let { data, code, msg } = result
               if (code === 1) {
-                  this.lineDate = []
-                  this.lineTotal = []
-                  if (data && data.length > 0) {
-                      data.forEach(item => {
-                          this.lineDate.push(this.formatDate(item.day))
-                          this.lineTotal.push(item.total)
-                      })
-                  }
-                  this.$nextTick(() => {
-                      this.labelChart()
+                this.lineDate = []
+                this.clientAdd = []
+                this.ocogNum = []
+                this.saleAdd = []
+                this.serveAdd = []
+                if (data && data.length > 0) {
+                  data.forEach(item => {
+                    this.lineDate.push(item.time.split('T')[0])
+                    this.clientAdd.push(item.clientAdd)
+                    this.ocogNum.push(item.ocogNum)
+                    this.saleAdd.push(item.saleAdd)
+                    this.serveAdd.push(item.serveAdd)
                   })
+                }
+                this.$nextTick(() => {
+                  this.passValue()
+                })
+              } else if (code === 10001) {
+                this.loginOut()
               } else {
                   vant.Toast.fail(msg)
               }
           })
       },
+      // 总客户数、一客一群（趋势图）
       labelChart() {
-            let labelChart = echarts.init(document.getElementById('labelChart'))
-            window.addEventListener('resize', function () {
-                labelChart.resize()
-            })
-            labelChart.setOption({
-                legend: {
-                    data: ['总数'],
-                    icon: 'roundRect',
-                    align: 'right',
-                    x: 'left',
-                    y: 'top',
-                    itemWidth: 40,
-                    itemHeight: 4,
-                    itemGap: 40,
-                    bottom: 'bottom',
-                    textStyle: {//图例文字的样式
-                        color: '#222222', //图例文字颜色
-                        fontSize: 14//图例文字大小
+          let labelChart = echarts.init(document.getElementById('labelChart'))
+          window.addEventListener('resize', function () {
+              labelChart.resize()
+          })
+          labelChart.setOption({
+              legend: {
+                  show: false,
+              },
+              tooltip: {
+                  trigger: 'axis'
+              },
+              grid: {
+                top: '10%',
+                left: '10%',
+                right: '10%',
+                bottom: '10%'
+              },
+              xAxis: {
+                  type: 'category',
+                  data: this.lineDate,
+              },
+              yAxis: [
+                  {// 第一种方式
+                      type: 'value',
+                      min: 0,
+                      max: this.index === 1 ? Math.max(...this.clientAdd) : Math.max(...this.ocogNum),
+                      splitNumber: 5,
+                      interval: (this.index === 1 ? Math.max(...this.clientAdd) : Math.max(...this.ocogNum)) / 5,
+                      position: 'left',
+                      axisLabel: {
+                          formatter: function (v) {
+                              return v.toFixed(0) //0表示小数为0位，1表示1位小数，2表示2位小数
+                          }
+                      },
+                      splitLine: { //网格线
+                          lineStyle: {
+                              type: 'dashed'//设置网格线类型 dotted：虚线   solid:实线
+                          },
+                      },
+                      axisTick: { show: false },
+                  },
+              ],
+              series: [
+                  {
+                      name: this.index === 1 ? '总客户数' : '一客一群',
+                      type: 'line',
+                      color: '#1677FF',
+                      areaStyle: {
+                          normal: {
+                              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                  { offset: 0, color: 'rgba(22,119,255,0.43)' },
+                                  { offset: 1, color: 'rgba(22,119,255,0)' }
+                              ])
+                          }
+                      }, //填充区域样式
+                      data: this.index === 1 ? this.clientAdd : this.ocogNum,
+                      symbol: 'none', //去掉折线图中的节点
+                      smooth: true, //true 为平滑曲线，false为直线
+                  }
+              ],
+          }, true)
+      },
+      // 销售顾问+服务顾问（趋势图）
+      adviserChart() {
+        let adviserChart = echarts.init(document.getElementById('adviserChart'))
+        window.addEventListener('resize', function () {
+          adviserChart.resize()
+        })
+        adviserChart.setOption({
+          legend: {
+            data: ['销售', '服务'],
+            orient: 'horizontal',
+            x: 'right',
+            y: 'top',
+            padding: [0, 94, 22, 0],
+            align: 'right',
+            itemWidth: 20,
+            itemHeight: 4,
+            itemGap: 20,
+            textStyle: {//图例文字的样式
+              color: '#666666', //图例文字颜色
+              fontSize: 10//图例文字大小
+            }
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            },
+          },
+          grid: {
+            top: '10%',
+            left: '10%',
+            right: '10%',
+            bottom: '10%'
+          },
+          xAxis: {
+            type: 'category',
+            data: this.lineDate,
+          },
+          yAxis: [
+            {// 第一种方式
+              type: 'value',
+              min: 0,
+              max: Math.max(...this.saleAdd, ...this.serveAdd) * 2,
+
+              splitNumber: 5,
+              interval: Math.max(...this.saleAdd, ...this.serveAdd) * 2 / 5,
+
+              position: 'left',
+              axisLabel: {
+                formatter: function (v) {
+                  return v.toFixed(0) //0表示小数为0位，1表示1位小数，2表示2位小数
+                }
+              },
+              splitLine: { //网格线
+                lineStyle: {
+                  type: 'dashed'//设置网格线类型 dotted：虚线   solid:实线
+                },
+              },
+              axisTick: { show: false },
+            },
+          ],
+          series: [
+            {
+              name: '销售',
+              type: 'bar',
+              stack: 'total',
+              color: '#1677FF',
+              data: this.saleAdd,
+            },
+            {
+              name: '服务',
+              type: 'bar',
+              stack: 'total',
+              color: '#5CE56E ',
+              data: this.serveAdd,
+              itemStyle: {
+                normal: {
+                  // 设置柱形图圆角 [左上角，右上角，右下角，左下角]
+                  barBorderRadius: [5, 5, 0, 0]
+                }
+              }
+            }
+          ],
+        }, true)
+      },
+      // 客户资产（梯形图）数据
+      dataStep () {
+        fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/step`, {
+          method: 'post',
+          body: JSON.stringify({
+            dealerId: this.dealerIds[0],
+            startTime: this.khStartTime,
+            endTime: this.khEndTime,
+          }),
+          headers: {
+            'Content-Type': 'application/json',
+            'token': this.token,
+            'tenancyId': this.tenancyId
+          }
+        }).then(res => {
+          return res.json()
+          }).then(result => {
+            let { data, code, msg } = result
+            if (code === 1) {
+              this.stepChartData = data ? data.reverse() : []
+              this.$nextTick(() => {
+                this.funnelDraw()
+              })
+            } else if (code === 10001) {
+              this.loginOut()
+            } else {
+              vant.Toast.fail(msg)
+            }
+          })
+      },
+      // 客户资产（梯形图）
+      funnelDraw() {
+        let stepChartData = this.stepChartData
+        let funnelChart = echarts.init(document.getElementById('funnelChart'))
+        window.addEventListener('resize', function () {
+          funnelChart.resize()
+        })
+        funnelChart.setOption({
+          tooltip: {
+            trigger: 'item',
+            formatter(param) {
+              let label = ''
+              stepChartData.forEach(item => {
+                if (item.stepName === param.data.stepName) {
+                  label = item.clientNum
+                }
+              })
+              return param.data.stepName + '：' + label
+            }
+          },
+          series: [
+            {
+              type: 'funnel',
+              label: {
+                position: 'inside',
+                color: '#fff',
+                formatter: function (params) {
+                  return params.data.stepName.slice(0, -2)
+                }
+              },
+              min: 0,
+              max: 100,
+              minSize: '0%', //漏斗最小值的宽度
+              maxSize: 0, //漏斗最大值的宽度
+              left: '-20%',
+              right: '8%',
+              top: '8%',
+              bottom: '2%',
+              data: stepChartData.map((item, index) => {
+                return {
+                  value: 40 + (index + 1) * 10,
+                  stepName: item.stepName,
+                  itemStyle: {
+                    color: `hsl(210, 100%, ${50 + (index + 1) * 8}%)`
+                  },
+                }
+              })
+            },
+            {
+              type: 'funnel',
+              label: {
+                position: 'right',
+                color: '#1677FF',
+                lineHeight: 20,
+                formatter(param) {
+                  let label = ''
+                  stepChartData.forEach(item => {
+                    if (item.stepName === param.data.stepName) {
+                      label = item.clientNum
                     }
+                  })
+                  return param.data.stepName + '：' + label
+                }
+              },
+              labelLine: {
+                show: true,
+                length: 30,
+              },
+              min: 0,
+              max: 100,
+              minSize: '0%', //漏斗最小值的宽度
+              maxSize: '60%', //漏斗最大值的宽度
+              left: '-20%',
+              right: '8%',
+              top: '8%',
+              bottom: '2%',
+              data: stepChartData.map((item, index) => {
+                return {
+                  value: 40 + (index + 1) * 10,
+                  stepName: item.stepName,
+                  itemStyle: {
+                    color: `hsl(210, 100%, ${50 + (index + 1) * 8}%)`
+                  },
+                }
+              })
+            }
+          ]
+        }, true)
+      },
+      // 切换车型（客户资产-客群包统计）
+      handleClickCar(item, index) {
+        this.carIndex = index
+        this.carStepData = []
+        this.carStepData.push(this.tableList.find(ele => ele.carModel === item.carModel))
+      },
+      //  客户资产-客群包统计数据
+      stepStatistic () {
+        fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/stepStatistic`, {
+          method: 'post',
+          body: JSON.stringify({
+            keyword: '',
+          }),
+          headers: {
+            'Content-Type': 'application/json',
+            'token': this.token,
+            'tenancyId': this.tenancyId
+          }
+        }).then(res => {
+          return res.json()
+        }).then(result => {
+          let { data, code, msg } = result
+          if (code === 1) {
+            this.tableList = data || []
+            if (this.tableList.length > 0) {
+              this.carStepData.push(this.tableList[0])
+            }
+          } else if (code === 10001) {
+            this.loginOut()
+          } else {
+            vant.Toast.fail(msg)
+          }
+        })
+      },
+      // 切换日期范围（网点）
+      handleChangeWdDate (val) {
+        this.wdStartTime = val[0]
+        this.wdEndTime = val[1]
+        this.getOutletCount()
+      },
+      // 网点数据
+      getOutletCount () {
+        fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/outletCount`, {
+          method: 'post',
+          body: JSON.stringify({
+            dealerId: this.dealerIds[0],
+            startTime: this.wdStartTime,
+            endTime: this.wdEndTime,
+          }),
+          headers: {
+            'Content-Type': 'application/json',
+            'token': this.token,
+            'tenancyId': this.tenancyId
+          }
+        }).then(res => {
+          return res.json()
+        }).then(result => {
+          let { data, code, msg } = result
+          if (code === 1) {
+            this.outletCount = data || []
+          } else if (code === 10001) {
+            this.loginOut()
+          } else {
+            vant.Toast.fail(msg)
+          }
+        })
+      },
+      // 切换日期范围（互动）
+      handleChangeHdDate (val) {
+        this.hdStartTime = val[0]
+        this.hdEndTime = val[1]
+        this.getInteract()
+      },
+      // 互动数据
+      getInteract () {
+        fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/interact`, {
+          method: 'post',
+          body: JSON.stringify({
+            dealerId: this.dealerIds[0],
+            startTime: this.hdStartTime,
+            endTime: this.hdEndTime,
+          }),
+          headers: {
+            'Content-Type': 'application/json',
+            'token': this.token,
+            'tenancyId': this.tenancyId
+          }
+        }).then(res => {
+          return res.json()
+        }).then(result => {
+          let { data, code, msg } = result
+          if (code === 1) {
+            this.interactDate = []
+            this.privateChat = []
+            this.privateMsgNum = []
+            this.groupMsgNum = []
+            if (data && data.length > 0) {
+              data.forEach(item => {
+                this.interactDate.push(item.time.split('T')[0])
+                this.privateChat.push(item.privateChat)
+                this.privateMsgNum.push(item.privateMsgNum)
+                this.groupMsgNum.push(item.groupMsgNum)
+              })
+            }
+            this.$nextTick(() => {
+              this.interactChart()
+            })
+          } else if (code === 10001) {
+            this.loginOut()
+          } else {
+            vant.Toast.fail(msg)
+          }
+        })
+      },
+      // 互动趋势图数据
+      interactChart () {
+        let interactChart = echarts.init(document.getElementById('interactChart'))
+        window.addEventListener('resize', function () {
+          interactChart.resize()
+        })
+        interactChart.setOption({
+          legend: {
+            orient: 'horizontal',
+            x: 'center',
+            y: 10,
+            align: 'right',
+            itemWidth: 20,
+            itemHeight: 4,
+            itemGap: 20,
+            textStyle: {//图例文字的样式
+              color: '#666666', //图例文字颜色
+              fontSize: 10//图例文字大小
+            }
+          },
+          tooltip: {
+            trigger: 'axis'
+          },
+          grid: {
+            top: '20%',
+            left: '10%',
+            right: '10%',
+            bottom: '10%'
+          },
+          xAxis: {
+            type: 'category',
+            data: this.interactDate,
+          },
+          yAxis: [
+            {// 第一种方式
+              type: 'value',
+              min: 0,
+              max: Math.max(...this.privateChat),
+              splitNumber: 5,
+              interval: Math.max(...this.privateChat) / 5,
+              axisLabel: {
+                formatter: function (v) {
+                  return v.toFixed(0) //0表示小数为0位，1表示1位小数，2表示2位小数
+                }
+              },
+              splitLine: { //网格线
+                lineStyle: {
+                  type: 'dashed'//设置网格线类型 dotted：虚线   solid:实线
                 },
-                tooltip: {
-                    trigger: 'axis'
+              },
+              axisTick: { show: false },
+            },
+            {// 第二种方式
+              type: 'value',
+              min: 0,
+              max: Math.max(...this.privateMsgNum),
+              splitNumber: 5,
+              interval: Math.max(...this.privateMsgNum) / 5,
+              axisLabel: {
+                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: {
+                formatter: function (v) {
+                  return v.toFixed(0) //0表示小数为0位，1表示1位小数，2表示2位小数
+                }
+              },
+              splitLine: { //网格线
+                lineStyle: {
+                  type: 'dashed'//设置网格线类型 dotted：虚线   solid:实线
                 },
-                grid: {
-                    left: '3%',
-                    right: '4%',
-                    bottom: 0,
-                    containLabel: true
+              },
+              axisTick: { show: false },
+            },
+          ],
+          series: [
+            {
+              name: '私聊客户数',
+              type: 'line',
+              color: '#1677FF',
+              data: this.privateChat,
+              symbol: 'none', //去掉折线图中的节点
+              smooth: true, //true 为平滑曲线，false为直线
+            },
+            {
+              name: '私聊消息数',
+              type: 'line',
+              color: '#5CE56E',
+              data: this.privateMsgNum,
+              symbol: 'none', //去掉折线图中的节点
+              smooth: true, //true 为平滑曲线，false为直线
+            },
+            {
+              name: '群消息数',
+              type: 'bar', //形状为柱状图
+              data: this.groupMsgNum,
+              itemStyle: {
+                color: ' #E6F0FF',
+              },
+              emphasis: {
+                itemStyle: {
+                  color: 'rgb(0, 157, 255)'
+                }
+              },
+            }
+          ],
+        }, true)
+      },
+      // 互动表格数据
+      getHdList() {
+        fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/task`, {
+          method: 'post',
+          body: JSON.stringify({
+            dealerId: this.dealerIds[0],
+            startTime: this.hdStartTime,
+            endTime: this.hdEndTime,
+          }),
+          headers: {
+            'Content-Type': 'application/json',
+            'token': this.token,
+            'tenancyId': this.tenancyId
+          }
+        }).then(res => {
+          return res.json()
+        }).then(result => {
+          let { data, code, msg } = result
+          if (code === 1) {
+            this.hdList.moment = data && data.moment ? data.moment : {
+              taskNum: 0,
+              completeNum: 0,
+              reachNum: 0,
+              taskCompletePercent: 0,
+            }
+            this.hdList.send = data && data.send ? data.send : {
+              taskNum: 0,
+              completeNum: 0,
+              reachNum: 0,
+              taskCompletePercent: 0,
+            }
+          } else if (code === 10001) {
+            this.loginOut()
+          } else {
+            vant.Toast.fail(msg)
+          }
+        })
+      },
+      // 切换日期范围（留资）
+      handleChangeLzDate(val) {
+        this.lzStartTime =  val[0]
+        this.lzEndTime = val[1]
+        this.getClueList()
+      },
+      // 留资数据
+      getClueList() {
+        fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/clue`, {
+          method: 'post',
+          body: JSON.stringify({
+            dealerId: this.dealerIds[0],
+            startTime: this.lzStartTime,
+            endTime: this.lzEndTime,
+          }),
+          headers: {
+            'Content-Type': 'application/json',
+            'token': this.token,
+            'tenancyId': this.tenancyId
+          }
+        }).then(res => {
+          return res.json()
+        }).then(result => {
+          let { data, code, msg } = result
+          if (code === 1) {
+            this.clueDate = []
+            this.cpClueNum = []
+            this.lwClueNum = []
+            if (data && data.length > 0) {
+              data.forEach(item => {
+                this.clueDate.push(item.time.split('T')[0])
+                this.cpClueNum.push(item.cpClueNum)
+                this.lwClueNum.push(item.lwClueNum)
+              })
+            }
+            this.$nextTick(() => {
+              this.getClueChart()
+            })
+          } else if (code === 10001) {
+            this.loginOut()
+          } else {
+            vant.Toast.fail(msg)
+          }
+        })
+      },
+      // 留资趋势图数据
+      getClueChart () {
+        let clueChart = echarts.init(document.getElementById('clueChart'))
+        window.addEventListener('resize', function () {
+          clueChart.resize()
+        })
+        clueChart.setOption({
+          legend: {
+            orient: 'horizontal',
+            x: 'center',
+            y: 10,
+            align: 'right',
+            itemWidth: 20,
+            itemHeight: 4,
+            itemGap: 20,
+            textStyle: {//图例文字的样式
+              color: '#666666', //图例文字颜色
+              fontSize: 10//图例文字大小
+            }
+          },
+          tooltip: {
+            trigger: 'axis'
+          },
+          grid: {
+            top: '20%',
+            left: '10%',
+            right: '10%',
+            bottom: '10%'
+          },
+          xAxis: {
+            type: 'category',
+            data: this.clueDate,
+          },
+          yAxis: [
+            {// 第一种方式
+              type: 'value',
+              min: 0,
+              max: Math.max(...this.cpClueNum),
+              splitNumber: 5,
+              interval: Math.max(...this.cpClueNum) / 5,
+              position: 'left',
+              axisLabel: {
+                formatter: function (v) {
+                  return v.toFixed(0) //0表示小数为0位，1表示1位小数，2表示2位小数
+                }
+              },
+              splitLine: { //网格线
+                lineStyle: {
+                  type: 'dashed'//设置网格线类型 dotted：虚线   solid:实线
                 },
-                xAxis: {
-                    type: 'category',
-                    boundaryGap: false,
-                    data: this.lineDate,
+              },
+              axisTick: { show: false },
+            },
+            {// 第二种方式
+              type: 'value',
+              min: 0,
+              max: Math.max(...this.lwClueNum),
+              splitNumber: 5,
+              interval: Math.max(...this.lwClueNum) / 5,
+              position: 'right',
+              axisLabel: {
+                formatter: function (v) {
+                  return v.toFixed(0) //0表示小数为0位，1表示1位小数，2表示2位小数
+                }
+              },
+              splitLine: { //网格线
+                lineStyle: {
+                  type: 'dashed'//设置网格线类型 dotted：虚线   solid:实线
                 },
-                yAxis: [
-                    {// 第一种方式
-                        type: 'value',
-                        name: '总数',
-                        min: 0,
-                        max: Math.max(...this.lineTotal),
-                        splitNumber: 5,
-                        interval: Math.max(...this.lineTotal) / 5,
-                        position: 'left',
-                        axisLabel: {
-                            formatter: function (v) {
-                                return v.toFixed(0) //0表示小数为0位，1表示1位小数，2表示2位小数
-                            }
-                        },
-                        splitLine: { //网格线
-                            lineStyle: {
-                                type: 'dashed'//设置网格线类型 dotted：虚线   solid:实线
-                            },
-                        },
-                        axisTick: { show: false },
-                    },
-                ],
-                series: [
-                    {
-                        name: '总数',
-                        type: 'line',
-                        color: '#1677FF',
-                        areaStyle: {
-                            normal: {
-                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                                    { offset: 0, color: 'rgba(22,119,255,0.43)' },
-                                    { offset: 1, color: 'rgba(22,119,255,0)' }
-                                ])
-                            }
-                        }, //填充区域样式
-                        data: this.lineTotal,
-                        symbol: 'none', //去掉折线图中的节点
-                        smooth: true, //true 为平滑曲线，false为直线
-                    }
-                ],
-            }, true)
-        },
-      timeFormat(time, format = 'yyyy-MM-dd hh:mm:ss') {
-        if (time === undefined || time === '' || time === null) {
-          return '/';
-        }
-
-        const date = new Date(time);
-        const o = {
-          'M+': date.getMonth() + 1, // 月份
-          'd+': date.getDate(),      // 日
-          'h+': date.getHours(),     // 小时
-          'm+': date.getMinutes(),   // 分钟
-          's+': date.getSeconds(),   // 秒
-          'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
-          'S': date.getMilliseconds() // 毫秒
-        };
-
-        // 处理年份
-        if (/(y+)/.test(format)) {
-          format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
-        }
-
-        // 处理日期和时间部分
-        for (let k in o) {
-          if (new RegExp('(' + k + ')').test(format)) {
-            let value = o[k];
-            let padding = RegExp.$1.length === 1 ? '' : '00'; // 根据格式字符串中的长度决定是否补零
-            format = format.replace(RegExp.$1, ('' + value).padStart(padding.length + value.toString().length - value.toString().length, '0'));
+              },
+              axisTick: { show: false },
+            },
+          ],
+          series: [
+            {
+              name: '企微',
+              type: 'line',
+              color: '#1677FF',
+              areaStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: 'rgba(22,119,255,0.43)' },
+                    { offset: 1, color: 'rgba(22,119,255,0)' }
+                  ])
+                }
+              }, //填充区域样式
+              data: this.cpClueNum,
+              symbol: 'none', //去掉折线图中的节点
+              smooth: true, //true 为平滑曲线，false为直线
+            },
+            {
+              name: '来问小菱',
+              type: 'line',
+              color: '#5CE56E',
+              areaStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: 'rgba(92,229,110,0.43)' },
+                    { offset: 1, color: 'rgba(92,229,110,0)' }
+                  ])
+                }
+              }, //填充区域样式
+              data: this.lwClueNum,
+              symbol: 'none', //去掉折线图中的节点
+              smooth: true, //true 为平滑曲线，false为直线
+            }
+          ],
+        }, true)
+      },
+      // 切换日期范围（到店传播）
+      handleChangeSpreadDate(val) {
+        this.spreadStartTime = val[0]
+        this.spreadEndTime = val[1]
+        this.getSpreadList()
+      },
+      // 到店传播数据
+      getSpreadList() {
+        fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/spread`, {
+          method: 'post',
+          body: JSON.stringify({
+            dealerId: this.dealerIds[0],
+            startTime: this.spreadStartTime,
+            endTime: this.spreadEndTime,
+          }),
+          headers: {
+            'Content-Type': 'application/json',
+            'token': this.token,
+            'tenancyId': this.tenancyId
           }
-        }
-
-        // 如果格式只包含时间部分，移除日期部分可能的占位符
-        if (!/(M+|d+)/.test(format)) {
-          // 移除任何可能存在的日期占位符（如：'yyyy-MM-dd '）
-          format = format.replace(/(\s*-\s*){2}/g, ''); // 移除两个'-'之间的任何内容
-          format = format.replace(/^\s*yyyy-\s*/, ''); // 移除开头的'yyyy-'
-        }
-
-        // 如果格式只包含日期部分，移除时间部分可能的占位符
-        if (!/(h+|m+|s+)/.test(format)) {
-          // 移除任何可能存在的时间占位符（如：' hh:mm:ss'）
-          format = format.replace(/(\s*:\s*){2}/g, ''); // 移除两个':'之间的任何内容
-          format = format.replace(/\s*hh:\s*$/, ''); // 移除结尾的' hh:'
-        }
-
-        return format;
+        }).then(res => {
+          return res.json()
+        }).then(result => {
+          let { data, code, msg } = result
+          if (code === 1) {
+            this.spreadDate = []
+            this.spreadNum = []
+            if (data && data.length > 0) {
+              data.forEach(item => {
+                this.spreadDate.push(item.time.split('T')[0])
+                this.spreadNum.push(item.spreadNum)
+              })
+            }
+            this.$nextTick(() => {
+              this.getSpreadChart()
+            })
+          } else if (code === 10001) {
+            this.loginOut()
+          } else {
+            vant.Toast.fail(msg)
+          }
+        })
+      },
+      // 到店传播趋势图数据
+      getSpreadChart () {
+        let spreadChart = echarts.init(document.getElementById('spreadChart'))
+        window.addEventListener('resize', function () {
+          spreadChart.resize()
+        })
+        spreadChart.setOption({
+          legend: {
+            orient: 'horizontal',
+            x: 'center',
+            y: 10,
+            align: 'right',
+            itemWidth: 20,
+            itemHeight: 4,
+            itemGap: 20,
+            textStyle: {//图例文字的样式
+              color: '#666666', //图例文字颜色
+              fontSize: 10//图例文字大小
+            }
+          },
+          tooltip: {
+            trigger: 'axis'
+          },
+          grid: {
+            top: '20%',
+            left: '10%',
+            right: '10%',
+            bottom: '10%'
+          },
+          xAxis: {
+            type: 'category',
+            data: this.clueDate,
+          },
+          yAxis: [
+            {// 第一种方式
+              type: 'value',
+              min: 0,
+              max: Math.max(...this.spreadNum),
+              splitNumber: 5,
+              interval: Math.max(...this.spreadNum) / 5,
+              position: 'left',
+              axisLabel: {
+                formatter: function (v) {
+                  return v.toFixed(0) //0表示小数为0位，1表示1位小数，2表示2位小数
+                }
+              },
+              splitLine: { //网格线
+                lineStyle: {
+                  type: 'dashed'//设置网格线类型 dotted：虚线   solid:实线
+                },
+              },
+              axisTick: { show: false },
+            }
+          ],
+          series: [
+            {
+              name: '参与数',
+              type: 'line',
+              color: '#1677FF',
+              areaStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: 'rgba(22,119,255,0.43)' },
+                    { offset: 1, color: 'rgba(22,119,255,0)' }
+                  ])
+                }
+              }, //填充区域样式
+              data: this.spreadNum,
+              symbol: 'none', //去掉折线图中的节点
+              smooth: true, //true 为平滑曲线，false为直线
+            }
+          ],
+        }, true)
+      },
+      // 打开右上角弹窗
+      handleShowPopup () {
+        this.showPopup = true
+      },
+      // 关闭右上角弹窗
+      handleClosePopup () {
+        this.showPopup = false
+        this.showMer = false
+      },
+      // 切换商户
+      handleSelectMer(id) {
+        localStorage.setItem('tenancyIdValue', id)
+        this.tenancyId = id
+        this.showPopup = false
+        this.showMer = false
+        this.getDealerIds()
+      },
+      // 退出登录
+      handleLoginOut() {
+        localStorage.removeItem('tokenValue')
+        localStorage.removeItem('jxsName')
+        var currentQueryParams = window.location.search
+        window.location.replace('jxsLogin.html' + currentQueryParams)
+      },
+      // token过期，退出登录
+      loginOut() {
+        vant.Toast({
+          message: '登录信息过期，请重新登录',
+        })
+        this.handleLoginOut()
       },
+      // 日期格式处理
       getDateTime(day) {
         let today = new Date()
         let targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day

lottery/jxsLogin.html

@@ -0,0 +1,317 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport"
+    content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover" />
+  <title></title>
+  <!-- 引入样式文件 -->
+  <link rel="stylesheet"
+    href="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1758012584633/vant.css" />
+  <!-- 必须先引入vue，  后使用vant-ui -->
+  <script
+    src="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1742017957144/vue.js"></script>
+  <!-- 引入vant的组件库-->
+  <!-- 引入 Vant 的 JS 文件 -->
+  <script
+    src="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1758012748487/vant.min.js"></script>
+
+  <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
+  <script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>
+  <!-- <script src="js/vconsole.min.js"></script>
+  <script>
+		  var vConsole = new window.VConsole();
+		</script> -->
+</head>
+<style>
+  body {
+    margin: 0;
+    padding: 0;
+  }
+
+  .box {
+    width: 100vw;
+    height: 100vh;
+    box-sizing: border-box;
+    background: #FAFAFA;
+  }
+
+  .page4 {
+    width: 100vw;
+    height: 500px;
+    background: url('./img/jxs_login.png') no-repeat;
+    background-size: 100%;
+    background-repeat: no-repeat;
+  }
+  .jxs_logo {
+    width: 40px;
+    height: 40px;
+    margin-top: 70px;
+    margin-left: 25px;
+  }
+  .jxs_welcome {
+    font-size: 16px;
+    font-weight: 500;
+    color: #222222;
+    margin-top: 20px;
+    margin-left: 25px;
+  }
+  .jxs_title {
+    font-size: 18px;
+    font-weight: bold;
+    color: #222222;
+    margin-top: 10px;
+    margin-left: 25px;
+  }
+  .jxs_form {
+    height: calc(100vh - 272px);
+    background: rgba(250,250,250,0.5);
+    border-radius: 20px 20px 0px 0px;
+    border: 1px solid #FFFFFF;
+    margin-top: 40px;
+    padding: 20px;
+  }
+  .van-cell {
+    height: 60px;
+    padding: 20px 15px;
+    line-height: 20px;
+    border-radius: 20px;
+    margin-bottom: 15px;
+  }
+  .flex_box {
+    position: relative;
+  }
+  .verifyCodeImage {
+    height: 60px;
+    position: absolute;
+    right: 15px;
+    top: 0px;
+    width: 120px;
+  }
+  .login_btn {
+    width: 100%;
+    height: 60px;
+    line-height: 60px;
+    text-align: center;
+    font-weight: bold;
+    font-size: 16px;
+    color: #fff;
+    background: #1677FF;
+    border-radius: 20px;
+  }
+  .jxs_mer_title {
+    font-weight: 500;
+    font-size: 16px;
+    color: #222222;
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+  .mer_list {
+    height: calc(100vh - 272px - 80px);
+    overflow: auto;
+  }
+  .mer_item {
+    padding: 20px 15px;
+    background: #FFFFFF;
+    border-radius: 20px;
+    font-weight: 400;
+    font-size: 14px;
+    color: #222222;
+    margin-top: 20px;
+  }
+  .mer_item_active {
+    background: #E6F0FF;
+    border-radius: 20px;
+    border: 1px solid #1677FF;
+    font-weight: 500;
+    color: #1677FF;
+  }
+  .mer_item:last-child {
+    margin-bottom: 20px;
+  }
+  .jxs_remember {
+    font-size: 12px;
+    font-weight: 400;
+    color: #222222;
+    margin-bottom: 40px;
+  }
+</style>
+
+<body>
+  <div id="box" class="box">
+    <div class="page4">
+      <img class="jxs_logo" src="./img/jxs_logo.png" />
+      <div class="jxs_welcome">您好，欢迎使用</div>
+      <div class="jxs_title">上汽通用五菱-经销商管理看板</div>
+      <div class="jxs_form" v-if="loginSuccess">
+        <div class="jxs_mer_title">选择商户</div>
+        <div class="mer_list">
+          <div class="mer_item" :class="{'mer_item_active': merIndex === index}" v-for="(item, index) in merList" :key="item.id" :key="index" @click="handleSelectMer(item.id, index)">{{item.name}}</div>
+        </div>
+        <van-button class="login_btn" :loading="loading" @click="handleToJxs">确定</van-button>
+      </div>
+      <div class="jxs_form" v-else>
+        <van-field v-model="phone" placeholder="请输入手机号"></van-field>
+        <van-field v-model="password" placeholder="请输入密码"></van-field>
+        <div class="flex_box">
+          <van-field v-model="verifyCode" placeholder="请输入验证码"></van-field>
+          <img class="verifyCodeImage" :src="verifyCodeImage" @click="handleGetVerifyCode">
+        </div>
+        <van-checkbox v-model="singleSave" icon-size="16px" class="jxs_remember">记住密码</van-checkbox>
+        <van-button class="login_btn" :loading="loading" @click="handleLogin">登录</van-button>
+      </div>
+    </div>
+  </div>
+</body>
+<script>
+  new Vue({
+    el: '#box',
+    data() {
+      return {
+        phone: localStorage.getItem('phone') || '',
+        password: localStorage.getItem('password') || '',
+        verifyCode: '',
+        verifyCodeImage: '',
+        contentTypeValue: '',
+        tokenValue: '',
+        loading: false,
+        loginSuccess: false,
+        merList: [],
+        merIndex: null,
+        tenancyId: null,
+        singleSave: localStorage.getItem('singleSave') === 'true'
+      }
+    },
+    created() {
+      this.bId = this.getQueryParam('bId')
+      this.env = this.getQueryParam('env')
+
+      if (!this.env || this.env === 'prod') {
+        this.httpUrl = 'https://wlapi.wefanbot.com'
+      } else {
+        this.httpUrl = 'http://test.wefanbot.com:18993'
+        // this.httpUrl = 'http://192.168.1.128:18993'
+      }
+      this.handleGetVerifyCode()
+    },
+    methods: {
+      handleGetVerifyCode() {
+        fetch(this.httpUrl + `/scrm/p/chart/verifyCode?width=120&height=35&lineSize=10`)
+          .then(res => {
+            const resHeader = res.headers
+            this.contentTypeValue = resHeader.get("verifycodesession")
+            return res.json()
+          }).then(result => {
+            let { data, code, msg } = result
+            if (code === 1) {
+              this.verifyCodeImage = data
+            } else {
+              vant.Toast.fail(msg)
+            }
+          })
+      },
+      handleLogin() {
+        if (!this.phone) {
+          vant.Toast.fail('请输入手机号')
+          return
+        }
+        if (!this.password) {
+          vant.Toast.fail('请输入密码')
+          return
+        }
+        if (!this.verifyCode) {
+          vant.Toast.fail('请输入验证码')
+          return
+        }
+        if (!this.contentTypeValue) {
+          vant.Toast.fail('验证码失效，请重新获取')
+          return
+        }
+        this.loading = true
+        fetch(this.httpUrl + `/scrm/v1/user-info/p/userNameLogin`, {
+          method: 'post',
+          body: JSON.stringify({
+            clientType: 0,
+            userName: this.phone,
+            password: this.password,
+            verifyCode: this.verifyCode,
+            verifyCodeSession: this.contentTypeValue
+          }),
+          headers: {
+            'Content-Type': 'application/json'
+          }
+        }).then(res => {
+          const resHeader = res.headers
+          this.tokenValue = resHeader.get("token")
+          localStorage.setItem('tokenValue', this.tokenValue)
+          return res.json()
+        }).then(result => {
+          let { data, code, msg } = result
+          if (code === 1) {
+            if (this.singleSave) {
+              localStorage.setItem('singleSave', this.singleSave)
+              localStorage.setItem('phone', this.phone)
+              localStorage.setItem('password', this.password)
+            } else {
+              localStorage.removeItem('singleSave')
+              localStorage.removeItem('phone')
+              localStorage.removeItem('password')
+            }
+            localStorage.setItem('jxsName', data.name)
+            this.getAdminList()
+            this.loginSuccess = true
+          } else {
+            vant.Toast.fail(msg)
+            this.handleGetVerifyCode()
+          }
+        }).finally(() => {
+          this.loading = false
+        })
+      },
+      getAdminList() {
+        const headers = new Headers()
+        headers.append('token', this.tokenValue)
+        fetch(this.httpUrl + `/scrm/v1/user-info/o/adminList`, {
+          method: 'GET',
+          headers: headers
+        }).then(res => {
+          return res.json()
+        }).then(result => {
+          let { data, code, msg } = result
+          if (code === 1) {
+            this.merList = data || []
+          } else {
+            vant.Toast.fail(msg)
+          }
+        })
+      },
+      handleSelectMer(id, index) {
+        this.merIndex = index
+        this.tenancyId = id
+      },
+      handleToJxs() {
+        if (!this.tenancyId) {
+          vant.Toast.fail('请先选择商户')
+          return
+        }
+        localStorage.setItem('tenancyIdValue', this.tenancyId)
+        var currentQueryParams = window.location.search
+        window.location.replace('jxs.html' + currentQueryParams)
+      },
+      // 截取url中的数据
+      getQueryParam(paramName) {
+        // 获取当前URL的查询字符串部分  
+        const queryString = window.location.search;
+        // 创建一个URLSearchParams对象  
+        const urlParams = new URLSearchParams(queryString);
+        // 返回指定参数的值，如果不存在则返回null  
+        return urlParams.get(paramName);
+      },
+    }
+
+  })
+</script>
+
+</html>

lottery/lightUpWl.html

@@ -84,11 +84,17 @@
     margin-top: -22px;
   }
 
+  .ask_rule {
+    font-size: 12px;
+    color: #E30628;
+    text-align: center;
+    padding-top: 30px;
+  }
   .step {
     display: flex;
     justify-content: center;
     align-items: center;
-    padding-top: 27px;
+    padding-top: 20px;
   }
 
   .step span {
@@ -481,6 +487,7 @@
       </div>
     </div>
     <div class="ask">
+      <div class="ask_rule">参与活动前请仔细阅读页面底部活动规则</div>
       <div class="step">
         <span>1.生成海报</span>
         <span class="step_line"></span>