Skip to content

H
haoban-3
Commit 5162a5aa by shaojiawen
Options

update: 图表接口

parent eea6b812
Showing with 109 additions and 101 deletions
src/views/salesleads/actCodeManage/staffActCode/actCodeDetail.vue
......@@ -20,14 +20,14 @@
<div class="font-14 line-22 flex-1">创建时间：{{ codeInfo.createTime | formatTimeStamp }}</div>
</div>
<div class="flex font-14" style="padding-top:15px;">
<div class="font-14 line-22 flex-1">所属分组：分组名称</div>
<div class="font-14 line-22 flex-1">所属分组：{{ codeInfo.hmGroupName }}</div>
<div class="flex flex-1">
<div class="font-14 line-22">自动通过好友：</div>
<el-tag :type="codeInfo.passFlag == 1 ? '' : 'danger'">{{ codeInfo.passFlag == 1 ? '已开启' : '已关闭' }}</el-tag>
</div>
<div class="flex flex-1">
<div class="font-14 line-22">活码标签：</div>
<el-tag type="info">标签名称</el-tag>
<el-tag type="info">{{ codeInfo.memberLabelName }}</el-tag>
</div>
</div>
<div v-if="codeInfo.statusFlag != 2" class="flex" style="padding-top:20px;">
......@@ -47,10 +47,10 @@
</div>
<el-tabs v-model="activeName" type="card">
<el-tab-pane label="详情信息" name="first">
<act-code-detail-info :enterprise-id="codeInfo.enterpriseId" :welcome-id="codeInfo.welcomeId"></act-code-detail-info>
<act-code-detail-info :enterprise-id="codeInfo.enterpriseId" :welcome-id="codeInfo.welcomeId" :act-code="actCode"></act-code-detail-info>
</el-tab-pane>
<el-tab-pane label="数据统计" name="second">
<act-code-detail-statistics></act-code-detail-statistics>
<act-code-detail-statistics :act-code="actCode"></act-code-detail-statistics>
</el-tab-pane>
</el-tabs>
</div>
......@@ -95,8 +95,8 @@ export default {
// this.$router.push(`/addActCode?actCodeData=`);
},
discardCode() {
// const that = this;
// that.loading = true;
const that = this;
that.loading = true;
// deleteRequest('/hm/qrcode/del', { hmId: that.actCode })
// .then(res => {
// let resData = res.data;
......@@ -135,7 +135,9 @@ export default {
passFlag: 0,
welcomeId: 'b680a2cf18b742cc9f4560f6195c9ec6',
enterpriseId: '5bd929fd3b2c49deaa1184bcb0d669b3',
wxQrcode: ''
wxQrcode: '',
memberLabelName: '稍加稳得',
hmGroupName: '测试分组'
}
}
};
......@@ -156,13 +158,9 @@ export default {
// });
},
scrollMethod: _throttle(function() {
// 节流会不自然 左右不滑动
this.scrollTop = document.getElementById('hb-layout-pager-one').scrollTop;
}, 100)
// scrollMethod(res) { // 节流不自然
// // console.log(document.getElementById('hb-layout-pager-one').scrollTop);
// // if (this.scrollTop > 280) return;
// this.scrollTop = document.getElementById('hb-layout-pager-one').scrollTop;
// }
},
mounted() {
let that = this;
......@@ -200,12 +198,13 @@ export default {
white-space: nowrap;
}
.fixed-tab {
position: fixed;
position: absolute;
top: 75px;
z-index: 1;
padding-bottom: 0;
height: 40px;
background: white;
width: 100%;
// left: 50px;
}
</style>
src/views/salesleads/actCodeManage/staffActCode/actCodeDetailInfo.vue
......@@ -39,25 +39,24 @@
<el-table ref="useMemberTableRef" v-loading="loading" :data="useMemberData" tooltip-effect="dark">
<el-table-column prop="" label="导购信息" show-overflow-tooltip min-width="185px">
<template slot-scope="scope">
<p class="line-20 text-ellipsis">{{ scope.row.cardName }}</p>
<p class="color-606266 line-18 text-ellipsis font-12">D3433433456</p>
<p class="line-20 text-ellipsis">{{ scope.row.clerkName }}</p>
<p class="color-606266 line-18 text-ellipsis font-12">{{ scope.row.clerkCode }}</p>
</template>
</el-table-column>
<el-table-column prop="" label="导购所属门店" show-overflow-tooltip min-width="185px">
<template slot-scope="scope">
<p class="line-20 text-ellipsis">{{ scope.row.cardName }}</p>
<p class="color-606266 line-18 text-ellipsis font-12">D3433433456</p>
<p class="line-20 text-ellipsis">{{ scope.row.storeName }}</p>
<p class="color-606266 line-18 text-ellipsis font-12">{{ scope.row.storeCode }}</p>
</template>
</el-table-column>
<el-table-column prop="" label="企微号" show-overflow-tooltip min-width="185px">
<template slot-scope="scope">
<p class="line-20 text-ellipsis">{{ scope.row.cardName }}</p>
<p class="color-606266 line-18 text-ellipsis font-12">D3433433456</p>
{{ scope.row.staffName }}
</template>
</el-table-column>
<el-table-column prop="" label="今日已达上限" show-overflow-tooltip min-width="185px">
<template slot-scope="scope">
{{ scope.row.cardName }}
{{ scope.row.overFlag == 1 ? '是' : '否' }}
</template>
</el-table-column>
</el-table>
......@@ -70,6 +69,7 @@
<script>
import previewWelcome from '@/components/preview-welcome.vue';
import { getRequest } from '@/api/api';
// import errMsg from '@/common/js/error';
export default {
name: 'act-code-detail-info',
components: { previewWelcome },
......@@ -85,6 +85,10 @@ export default {
default() {
return '';
}
},
actCode: {
type: String,
default: ''
}
},
data() {
......@@ -99,7 +103,12 @@ export default {
6: 'iconwenjianleixing-xiaochengxu', // 带参小程序
7: 'icongongzhonghao1' // 带参公众号
},
useMemberData: [{ cardName: '电话电话电话' }, { cardName: '电话电话电话' }, { cardName: '电话电话电话' }, { cardName: '电话电话电话' }, { cardName: '电话电话电话' }],
useMemberData: [
{ clerkName: '电话电电话', clerkCode: '882292929233', overFlag: 0, storeName: '门店叫什么', storeCode: 's837373772', staffName: '的后视镜设计' },
{ clerkName: '话', clerkCode: '882292929233', overFlag: 1, storeName: '门店叫什么', storeCode: 's837373772', staffName: '的后视镜设计' },
{ clerkName: '电', clerkCode: '882292929233', overFlag: 1, storeName: '门店叫什么', storeCode: 's837373772', staffName: '的后视镜设计' },
{ clerkName: '电话电电话', clerkCode: '882292929233', overFlag: 1, storeName: '门店叫什么', storeCode: 's837373772', staffName: '的后视镜设计' }
],
loading: false,
currentPage: 1,
pageSize: 20,
......@@ -150,20 +159,23 @@ export default {
});
},
getUseTableList() {
const that = this;
that.loading = true;
let para = {
pageNum: that.currentPage, // 当前页
pageSize: that.pageSize // 一页显示个数
};
console.log(para);
that.loading = false;
// postRequest('/haoban-app-customer-web/cardCoupon/find-card-page', para)
// const that = this;
// that.loading = true;
// let para = {
// startTime: '',
// endTime: '',
// storeSearch: '',
// clerkSearch: '',
// hmId: that.actCode,
// pageNum: that.currentPage, // 当前页
// pageSize: that.pageSize // 一页显示个数
// };
// postRequest('/hm/qrcode/detail-clerk-list', para)
// .then(res => {
// let resData = res.data;
// that.loading = false;
// if (resData.errorCode == 1) {
// that.tableData = resData.result.list || [];
// that.useMemberData = resData.result.list || [];
// that.total = resData.result.pageInfo ? resData.result.pageInfo.total : 0;
// return;
// }
......
src/views/salesleads/actCodeManage/staffActCode/actCodeDetailStatistics.vue
......@@ -20,7 +20,7 @@
</div>
<div class="m-l-16">
<div class="font-14 color-606266 line-20">新增总人数</div>
<span class="font-30 font-din" style="margin-top:1;">12345</span>
<span class="font-30 font-din" style="margin-top:1;">{{ overViewData.addNumT || 0 }}</span>
</div>
</div>
</li>
......@@ -31,7 +31,7 @@
</div>
<div class="m-l-16">
<div class="font-14 color-606266 line-20">今日新增人数</div>
<span class="font-30 font-din" style="margin-top:1;">520</span>
<span class="font-30 font-din" style="margin-top:1;">{{ overViewData.addNum || 0 }}</span>
</div>
</div>
</li>
......@@ -44,7 +44,7 @@
<el-date-picker class="w256" v-model="dateDefault" type="daterange" range-separator="~" start-placeholder="创建开始日期" end-placeholder="创建结束日期" :default-time="['00:00:00', '23:59:59']" :picker-options="pickerOptions()" @change="onDateChange"> </el-date-picker>
</div>
</div>
<new-add-chart :charData="charData" id="new-add-chart"></new-add-chart>
<new-add-chart :charData="overViewData.dateList" id="new-add-chart"></new-add-chart>
</div>
<div>
<div class="flex justify-between title">
......@@ -78,7 +78,6 @@ export default {
},
data() {
return {
useMemberData: [{ cardName: '电话电话电话' }],
loading: false,
dateKey: 0,
dateLis: [
......@@ -116,45 +115,69 @@ export default {
}
};
},
charData: [
{ date: '2018/8/1', value: 4623 },
{ date: '2018/8/2', value: 6145 },
{ date: '2018/8/3', value: 508 },
{ date: '2018/8/4', value: 289 }
]
overViewData: { addNumT: 0, addNum: 0, dateList: [] }
};
},
methods: {
explain(url) {
window.open(url);
},
getUseTableList() {
getChartList() {
const that = this;
that.loading = true;
let para = {
pageNum: that.currentPage, // 当前页
pageSize: that.pageSize // 一页显示个数
};
console.log(para);
that.loading = false;
// postRequest('/haoban-app-customer-web/cardCoupon/find-card-page', para)
// that.loading = true;
// getRequest('/hm/qrcode/detail-data-statistics', {hmId: that.actCode})
// .then(res => {
// let resData = res.data;
// that.loading = false;
// if (resData.errorCode == 1) {
// that.tableData = resData.result.list || [];
// that.total = resData.result.pageInfo ? resData.result.pageInfo.total : 0;
// return;
// }
// errMsg.errorMsg(resData);
// })
// .catch(function(error) {
// that.loading = false;
// that.$message.error({
// duration: 1000,
// message: error.message
// });
// });
let resData = {
result: {
addNumT: 20,
addNum: 10,
dateList: [
{ date: '2018/8/1', addNum: 4623 },
{ date: '2018/8/2', addNum: 6145 },
{ date: '2018/8/3', addNum: 508 },
{ date: '2018/8/4', addNum: 289 },
{ date: '2018/8/5', addNum: 289 },
{ date: '2018/8/6', addNum: 289 },
{ date: '2018/8/7', addNum: 289 },
{ date: '2018/8/8', addNum: 289 },
{ date: '2018/8/9', addNum: 289 },
{ date: '2018/8/10', addNum: 289 },
{ date: '2018/8/11', addNum: 289 },
{ date: '2018/8/12', addNum: 289 },
{ date: '2018/8/13', addNum: 2589 },
{ date: '2018/8/14', addNum: 289 },
{ date: '2018/8/15', addNum: 289 },
{ date: '2018/8/16', addNum: 29 },
{ date: '2018/8/17', addNum: 289 },
{ date: '2018/8/18', addNum: 9 },
{ date: '2018/8/19', addNum: 2189 },
{ date: '2018/8/20', addNum: 289 },
{ date: '2018/8/21', addNum: 2869 },
{ date: '2018/8/22', addNum: 289 },
{ date: '2018/8/23', addNum: 2809 }
]
}
};
resData.result.dateList.map(function(date) {
date['新增人数'] = date.addNum;
});
that.overViewData = resData.result;
// return;
// }
// errMsg.errorMsg(resData);
// })
// .catch(function(error) {
// that.loading = false;
// that.$message.error({
// duration: 1000,
// message: error.message
// });
// });
},
getDateRange(setEndDate) {
const start = new Date();
......@@ -214,16 +237,18 @@ export default {
const [start, end] = that.getDateRange(setDate);
that.dateDefault.push(end);
that.dateDefault.push(start);
this.getChartList();
},
onDateChange() {
this.dateKey = -1;
this.getChartList();
}
},
mounted() {
let that = this;
// 默认显示近七天
that.btnChange(0);
that.getUseTableList();
that.getChartList();
}
};
</script>
......
src/views/salesleads/actCodeManage/staffActCode/newAddChart.vue
......@@ -51,17 +51,17 @@ export default {
padding: [20, 40, 80, 80]
});
//装载数据
// { date: '2018/8/1', type: '首页', value: 4623 },
// { date: '2018/8/2', type: '首页', value: 6145 },
// { date: '2018/8/3', type: '首页', value: 508 },
// { date: '2018/8/4', type: '首页', value: 289 }
// { date: '2018/8/1', 新增人数: 4623 },
// { date: '2018/8/2', 新增人数: 6145 },
// { date: '2018/8/3', 新增人数: 508 },
// { date: '2018/8/4', 新增人数: 289 }
// this.chart.data(this.charData); // 载入数据源
this.chart.data(this.charData, {
date: {
// type: 'cat', //分类
alias: '日期' //别名
},
value: {
新增人数: {
alias: '新增人数'
}
});
......@@ -85,7 +85,7 @@ export default {
}
}
});
this.chart.axis('value', {
this.chart.axis('新增人数', {
grid: {
line: {
type: 'line',
......@@ -101,7 +101,7 @@ export default {
},
formatter: val => {
// 格式化参数值
return val + '万';
return val;
}
}
});
......@@ -109,43 +109,15 @@ export default {
this.chart.legend({
custom: true,
position: 'top-left',
items: [{ name: '新增人数', value: 'value', marker: { symbol: 'line', style: { stroke: '#4B74E8', lineWidth: 12, lineHeight: 8 } } }]
items: [{ name: '新增人数', value: '新增人数', marker: { symbol: 'line', style: { stroke: '#4B74E8', lineWidth: 12, lineHeight: 8 } } }]
});
//绘制折线图
// this.chart
// .line()
// .position('date*value')
// .color('type'); //x轴:date y轴：value ，折线根据type分颜色
// //设置折点样式
// this.chart
// .point()
// .position('date*value')
// .size(3)
// .color('type')
// .shape('circle');
this.chart
.line()
.position('date*value')
.position('date*新增人数')
.color('#4B74E8');
// chart.line().position('date*nlp').color('#2fc25b')
// this.chart.annotation().dataMarker({
// top: true,
// position: ['2016-02-28', 9],
// text: {
// content: 'Blockchain 首超 NLP',
// style: {
// textAlign: 'left'
// }
// },
// line: {
// length: 30
// }
// });
this.chart.removeInteraction('legend-filter'); // 自定义图例，移除默认的分类图例筛选交互
//图表绘制的最后一步，用于将图表渲染至画布
this.chart.render();
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment