|
|
@@ -0,0 +1,524 @@
|
|
|
+<!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/select-date.js"></script>
|
|
|
+ <script src="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1758187289797/echarts.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: 100vh;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+ .van-nav-bar__content {
|
|
|
+ height: 44px;
|
|
|
+ }
|
|
|
+ .van-nav-bar__title {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
+
|
|
|
+ .navbar_icon {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ }
|
|
|
+ .van-nav-bar__left {
|
|
|
+ padding: 0 10px;
|
|
|
+ }
|
|
|
+ .van-nav-bar__right {
|
|
|
+ padding: 0 10px;
|
|
|
+ }
|
|
|
+ .page4_content {
|
|
|
+ flex: 1;
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+ .client_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;
|
|
|
+ }
|
|
|
+ .module_title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #222222;
|
|
|
+ margin-bottom: 18px;
|
|
|
+ }
|
|
|
+ .module_title_icon {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .module_title_left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ /* 选择日期组件开始 */
|
|
|
+ .select_date {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .date_list {
|
|
|
+ width: 212px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ background: #EDF3F8;
|
|
|
+ border-radius: 20px;
|
|
|
+ padding: 2px;
|
|
|
+ }
|
|
|
+ .filter_time_item {
|
|
|
+ padding: 6px 0 5px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #222222;
|
|
|
+ line-height: 17px;
|
|
|
+ cursor: pointer;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .current_date {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #1677FF;
|
|
|
+ line-height: 17px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 12px;
|
|
|
+ padding: 4px 14px 3px;
|
|
|
+ }
|
|
|
+ /* 选择日期组件结束 */
|
|
|
+ .client_box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ gap: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .client_item {
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 10px;
|
|
|
+ border: 1px solid #E5E8ED;
|
|
|
+ width: 50%;
|
|
|
+ padding: 10px 15px 5px;
|
|
|
+ }
|
|
|
+ .client_item_title {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 17px;
|
|
|
+ padding-bottom: 5px;
|
|
|
+ }
|
|
|
+ .client_item_count {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #222222;
|
|
|
+ line-height: 24px;
|
|
|
+ padding-bottom: 5px;
|
|
|
+ }
|
|
|
+ .client_item_data {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 10px;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 15px;
|
|
|
+ }
|
|
|
+ .client_count {
|
|
|
+ color: #1677FF;
|
|
|
+ }
|
|
|
+ .selected_color {
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ .selected_bg {
|
|
|
+ background: #1677FF !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .client_item_icon {
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ }
|
|
|
+ .counselor_box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 10px;
|
|
|
+ border: 1px solid #E5E8ED;
|
|
|
+ padding: 10px 15px 5px;
|
|
|
+ }
|
|
|
+ .counselor_item {
|
|
|
+ width: 50%;
|
|
|
+ }
|
|
|
+ .counselor_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%);
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div id="box" class="box">
|
|
|
+ <!-- 数据查看 -->
|
|
|
+ <div class="page4">
|
|
|
+ <van-nav-bar title="经销商名称" class="navbar">
|
|
|
+ <template #left>
|
|
|
+ <image class="navbar_icon" src="./img/jxs1.png"></image>
|
|
|
+ </template>
|
|
|
+ <template #right>
|
|
|
+ <image class="navbar_icon" src="./img/jxs2.png"></image>
|
|
|
+ </template>
|
|
|
+ </van-nav-bar>
|
|
|
+ <div class="page4_content">
|
|
|
+ <div class="client_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="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>昨日新增：
|
|
|
+ <span class="client_count" :class="{'selected_color': index === 1}">300</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>昨日新增：
|
|
|
+ <span class="client_count" :class="{'selected_color': index === 2}">300</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_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>昨日新增：
|
|
|
+ <span class="client_count" :class="{'selected_color': index === 3}">300</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>昨日新增：
|
|
|
+ <span class="client_count" :class="{'selected_color': index === 3}">300</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>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
+<script>
|
|
|
+ new Vue({
|
|
|
+ el: '#box',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ httpUrl: '',
|
|
|
+ bId: null,
|
|
|
+ env: '',
|
|
|
+ index: 1,
|
|
|
+ dateListDayMin: '',
|
|
|
+ dateListDayMax: '',
|
|
|
+ lineDate: [],
|
|
|
+ lineTotal: [],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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.getLabelData1()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleChangeDate(date) {
|
|
|
+ this.dateListDayMin = Number(date[0].replace(/\D/g, ''))
|
|
|
+ this.dateListDayMax = Number(date[1].replace(/\D/g, ''))
|
|
|
+ this.getLabelData()
|
|
|
+ },
|
|
|
+ handleClickItem(index) {
|
|
|
+ this.index = index
|
|
|
+ },
|
|
|
+ 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);
|
|
|
+ },
|
|
|
+ getLabelData() {
|
|
|
+ fetch(this.httpUrl + `/scrm/v1/ct-stats/m/viewByDateList?dayMin=${this.dateListDayMin}&dayMax=${this.dateListDayMax}`, {
|
|
|
+ method: 'post',
|
|
|
+ body: JSON.stringify({
|
|
|
+ }),
|
|
|
+ headers: {
|
|
|
+ 'Content-Type': 'application/json',
|
|
|
+ }
|
|
|
+ }).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()
|
|
|
+ })
|
|
|
+ } 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//图例文字大小
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: 0,
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: this.lineDate,
|
|
|
+ },
|
|
|
+ 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'));
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 如果格式只包含时间部分，移除日期部分可能的占位符
|
|
|
+ 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;
|
|
|
+ },
|
|
|
+ getDateTime(day) {
|
|
|
+ let today = new Date()
|
|
|
+ let targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day
|
|
|
+ today.setTime(targetday_milliseconds)
|
|
|
+ let tYear = today.getFullYear()
|
|
|
+ let tMonth = today.getMonth() + 1
|
|
|
+ let tDate = today.getDate()
|
|
|
+ if (tMonth < 10) {
|
|
|
+ tMonth = '0' + tMonth
|
|
|
+ }
|
|
|
+ if (tDate < 10) {
|
|
|
+ tDate = '0' + tDate
|
|
|
+ }
|
|
|
+ return tYear + '-' + tMonth + '-' + tDate
|
|
|
+ },
|
|
|
+ // 截取url中的数据
|
|
|
+ getQueryParam(paramName) {
|
|
|
+ // 获取当前URL的查询字符串部分
|
|
|
+ const queryString = window.location.search;
|
|
|
+ // 创建一个URLSearchParams对象
|
|
|
+ const urlParams = new URLSearchParams(queryString);
|
|
|
+ // 返回指定参数的值，如果不存在则返回null
|
|
|
+ return urlParams.get(paramName);
|
|
|
+ },
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+</script>
|
|
|
+
|
|
|
+</html>
|
