Skip to content

H
haoban-3
Commit e4c77d57 by crushh
Options

update: dist

parent 74f36a89
Showing with 613 additions and 197 deletions
src/api/actCode.js
...@@ -48,5 +48,14 @@ export const linkAdd = params => postJsonRequest('/haoban-manage3-web/hm/link/ad ...@@ -48,5 +48,14 @@ export const linkAdd = params => postJsonRequest('/haoban-manage3-web/hm/link/ad
// 【活码链接】-- 编辑 // 【活码链接】-- 编辑
export const linkUpdate = params => postJsonRequest('/haoban-manage3-web/hm/link/update', params); export const linkUpdate = params => postJsonRequest('/haoban-manage3-web/hm/link/update', params);
// 【活码链接】-- 详情 // 【活码链接】-- 详情 actCode
export const linkDetail = params => postJsonRequest('/haoban-manage3-web/hm/link/detail', params); export const linkDetail = params => postJsonRequest('/haoban-manage3-web/hm/link/detail', params);
// 【活码链接】 -- 统计-总计
export const statisticsTotal = params => postJsonRequest('/haoban-manage3-web/hm/link/statistics/total', params);
// 【活码链接】 -- 统计-图表
export const statisticsChart = params => postJsonRequest('/haoban-manage3-web/hm/link/statistics/chart', params);
// 【活码链接】 -- 统计--查看明细
export const statisticsClerk = params => postJsonRequest('/haoban-manage3-web/hm/link/statistics/clerk', params);
src/components/preview-page.vue
...@@ -47,7 +47,8 @@ export default { ...@@ -47,7 +47,8 @@ export default {
this.card = { pageTitle, merchantName, merchantPhoneNumber, merchantLogo, pageBackgroundImg, guideComment }; this.card = { pageTitle, merchantName, merchantPhoneNumber, merchantLogo, pageBackgroundImg, guideComment };
} }
}, },
deep: true deep: true,
immediate: true
} }
} }
}; };
......
src/components/target-group.vue 0 → 100644
<template>
<div class="target-group">
<div class="target" :style="{ width: `${100 / dataList.length}%` }" v-for="(el, index) in dataList" :key="index">
<div class="target-label">
{{ el.label }}
<el-tooltip v-if="el.tips" placement="top" popper-class="target-tooltip">
<div slot="content" v-html="el.tips" style="max-width: 450px"></div>
<i class="iconfont icon-QuestionCircleOutlined target-label-icon"></i>
</el-tooltip>
</div>
<div class="target-value">
{{ el.value }}<span v-if="el.unit" class="target-value-unit">{{ el.unit }}</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'TargetGroup',
props: {
dataList: {
type: Array,
default: () => []
}
}
};
</script>
<style lang="scss" scoped>
.target-group {
display: flex;
justify-content: flex-start;
align-items: flex-start;
margin-top: 16px;
padding: 20px;
width: 100%;
min-width: 265px;
background: #f7f8fa;
border-radius: 4px;
box-sizing: border-box;
.target {
flex-shrink: 0;
.target-label {
font-size: 14px;
font-weight: 400;
color: #606266;
line-height: 20px;
.target-label-icon {
font-size: inherit;
}
}
.target-value {
display: flex;
justify-content: flex-start;
align-items: flex-end;
margin-top: 8px;
font-size: 24px;
font-family: DIN Alternate-Bold, DIN Alternate;
font-weight: bold;
color: #303133;
line-height: 28px;
.target-value-unit {
font-size: 14px;
line-height: 25px;
font-weight: 600;
}
}
}
}
</style>
src/views/salesleads/actCodeManage/attractFlowLink/index.vue
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<dm-sub-title class="m-b-10"> <dm-sub-title class="m-b-10">
<div class="title"> <div class="title">
<span>引流加入</span> <span>引流加入</span>
<span class="info-content cur-po"><i class="iconfont-hb3 iconzhibiaoshuoming info-icon"></i>指标说明</span> <el-button type="text"><i class="iconfont-hb3 iconzhibiaoshuoming info-icon"></i>指标说明</el-button>
</div> </div>
</dm-sub-title> </dm-sub-title>
<!-- <el-tabs v-model="activeName" @tab-click="handleClick"> <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
...@@ -163,11 +163,11 @@ export default { ...@@ -163,11 +163,11 @@ export default {
btnArr: [ btnArr: [
{ {
text: '数据', text: '数据',
handler: row => this.goInformation(row) handler: row => this.goDetail(row, 'second')
}, },
{ {
text: '详情', text: '详情',
handler: row => this.goDetail(row) handler: row => this.goDetail(row, 'first')
}, },
{ {
text: '链接', text: '链接',
...@@ -251,11 +251,8 @@ export default { ...@@ -251,11 +251,8 @@ export default {
goLanding() { goLanding() {
this.$router.push('/ladingPageList'); this.$router.push('/ladingPageList');
}, },
goInformation(row) { goDetail(row, type) {
console.log(row); this.$router.push(`attractFlowLinkInfo/${row.linkId}?type=${type}`);
},
goDetail(row) {
this.$router.push(`attractFlowLinkInfo/${row.linkId}`);
}, },
goLink(row) { goLink(row) {
this.linkUrl = row.linkUrl; this.linkUrl = row.linkUrl;
...@@ -275,10 +272,6 @@ export default { ...@@ -275,10 +272,6 @@ export default {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.info-content {
color: #2f54eb;
font-size: 14px;
}
.info-icon { .info-icon {
margin-right: 8px; margin-right: 8px;
} }
......
src/views/salesleads/actCodeManage/attractFlowLink/info.vue
<template> <template>
<div class="app-detail-wrap p-20" v-loading="loading"> <div class="info p-20" v-loading="loading">
<div class="flex p-b-40"> <div class="flex p-b-40">
<vue-qr id="qrImg" :text="link.linkUrl" :size="200" :margin="5" v-if="link.linkType == 2"></vue-qr> <vue-qr id="qrImg" :text="link.linkUrl" :size="200" :margin="5" v-if="link.linkType == 2"></vue-qr>
<div class="m-l-30"> <div class="title-right">
<el-descriptions :title="link.name"> <el-descriptions :title="link.name">
<el-descriptions-item label="ID">{{ link.linkId }}</el-descriptions-item> <el-descriptions-item label="ID">{{ link.linkId }}</el-descriptions-item>
<el-descriptions-item label="code">{{ link.linkCode }}</el-descriptions-item> <el-descriptions-item label="code">{{ link.linkCode }}</el-descriptions-item>
<el-descriptions-item label="链接类型"> <el-descriptions-item label="链接类型">
<el-tag size="mini">{{ link.linkType == 1 ? '专用链接' : '通用链接' }}</el-tag></el-descriptions-item <el-tag size="mini" :class="link.linkType == 2 ? 'el-tag--cyan' : ''">{{ link.linkType == 1 ? '专用链接' : '通用链接' }}</el-tag></el-descriptions-item
> >
<el-descriptions-item label="创建人">{{ link.creatorName }}</el-descriptions-item> <el-descriptions-item label="创建人">{{ link.creatorName }}</el-descriptions-item>
<el-descriptions-item label="创建时间">{{ link.createTime }}</el-descriptions-item> <el-descriptions-item label="创建时间">{{ filters.formatTimeStamp(link.createTime) }}</el-descriptions-item>
<el-descriptions-item label="链接标签"> <el-descriptions-item label="链接标签">
<el-tag size="mini">{{ link.memberLabelName }}</el-tag> <el-tag size="mini">{{ link.memberLabelName }}</el-tag>
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="链接描述">{{ link.remark }}</el-descriptions-item> <el-descriptions-item label="链接描述">{{ link.remark }}</el-descriptions-item>
</el-descriptions> </el-descriptions>
<div> <div class="m-t-10">
<el-button icon="el-icon-download" plain @click="downloadQR">下载二维码</el-button> <el-button icon="el-icon-download" plain @click="downloadQR">下载二维码</el-button>
<el-button v-if="link.linkType == 2" v-clipboard:text="link.linkUrl" plain>复制链接</el-button> <el-button v-if="link.linkType == 2" v-clipboard:text="link.linkUrl" plain>复制链接</el-button>
<el-button v-if="link.linkType == 2" plain @click="goEdit">修改</el-button> <el-button v-if="link.linkType == 2" plain @click="goEdit">修改</el-button>
...@@ -31,11 +31,11 @@ ...@@ -31,11 +31,11 @@
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
<el-tabs v-model="activeName" type="card"> <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="详情信息" name="first"> <el-tab-pane label="详情信息" name="first">
<act-code-detail-info type="actLink" :enterprise-id="link.enterpriseId" :welcome-id="link.welcomeId"></act-code-detail-info> <act-code-detail-info type="actLink" :enterprise-id="link.enterpriseId" :welcome-id="link.welcomeId"></act-code-detail-info>
<dm-sub-title type="line">落地页配置</dm-sub-title> <dm-sub-title>落地页配置</dm-sub-title>
<div> <div class="m-t-15" v-show="page.pageTitle">
<div class="flex"> <div class="flex">
<div class="welcome-left-view"> <div class="welcome-left-view">
<el-descriptions :column="1"> <el-descriptions :column="1">
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
<el-descriptions-item label="商户LOGO"> <el-descriptions-item label="商户LOGO">
<img :src="page.merchantLogo" class="merchantLogo" /> <img :src="page.merchantLogo" class="merchantLogo" />
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="引导语">{{ page.linkCode }}</el-descriptions-item> <el-descriptions-item label="引导语">{{ page.guideComment }}</el-descriptions-item>
</el-descriptions> </el-descriptions>
</div> </div>
<div class="preview"> <div class="preview">
...@@ -56,68 +56,201 @@ ...@@ -56,68 +56,201 @@
</div> </div>
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="数据统计" name="second"> </el-tab-pane> <el-tab-pane label="数据统计" name="second">
<div class="statistics">
<dm-sub-title>
<div class="title">
<span>概览</span>
<el-button type="text"><i class="iconfont-hb3 iconzhibiaoshuoming info-icon"></i>指标说明</el-button>
</div>
</dm-sub-title>
<el-row :gutter="20">
<el-col :span="6" v-for="(el, index) in targetList" :key="index">
<target-group :data-list="el"></target-group>
</el-col>
</el-row>
<div class="flex justify-end">
<div class="rightBox">
<ul class="datebox" v-for="(lis, index) in dateLis" :key="lis.key">
<li :class="dateKey == index ? 'activeClass' : 'noActive'" class="dateLisBox" @click="btnChange(index)">{{ lis.value }}</li>
</ul>
<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" value-format="yyyy-MM-dd"> </el-date-picker>
</div>
</div>
<new-add-chart :charData="charData" id="new-add-chart"></new-add-chart>
<dm-sub-title>
<div class="title">
<span>查看明细</span>
<el-button type="text"><i class="iconfont-hb3 iconzhibiaoshuoming info-icon"></i>指标说明</el-button>
</div>
</dm-sub-title>
<data-detail :id="linkId" :api="statisticsClerk" class="m-t-15"></data-detail>
</div>
</el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
</template> </template>
<script> <script>
import { linkDetail } from '@/api/actCode'; import { linkDetail, statisticsTotal, statisticsChart, statisticsClerk } from '@/api/actCode';
import actCodeDetailInfo from '../../components/actCodeDetailInfo.vue'; import actCodeDetailInfo from '../../components/actCodeDetailInfo.vue';
import dataDetail from '../../components/dataDetail.vue';
import previewPage from '@/components/preview-page.vue'; import previewPage from '@/components/preview-page.vue';
import { _throttle } from '@/common/js/public'; import { _throttle } from '@/common/js/public';
import targetGroup from '@/components/target-group.vue';
import VueQr from 'vue-qr'; import VueQr from 'vue-qr';
import newAddChart from './newAddChart.vue';
import filters from '@/filters/index';
import mixin from '../components/mixin';
export default { export default {
name: 'actCodeDetail', name: 'actCodeDetail',
components: { actCodeDetailInfo, previewPage, VueQr }, components: { actCodeDetailInfo, previewPage, VueQr, targetGroup, newAddChart, dataDetail },
props: { props: {
hmId: { hmId: {
type: String, type: String,
default: '' default: ''
} }
}, },
mixins: [mixin],
data() { data() {
return { return {
filters,
statisticsClerk,
loading: false, loading: false,
activeName: 'first', activeName: this.$route.query.type,
codeStatusLis: [
{ value: '', style: '' },
{ value: '正常', style: 'success' },
{ value: '已作废', style: 'danger' },
{ value: '待生效', style: 'info' },
{ value: '正常-今日已达上限', style: 'warning' }
],
link: { link: {
linkId: 419648718594129960, // linkId: 419648718594129960,
customRuleJson: '{"fw_store":{"open":1,"zs":1,"dz":1,"dy":1},"xg_store":{"open":1,"zs":1,"dz":1,"dy":0}}', // customRuleJson: '{"fw_store":{"open":1,"zs":1,"dz":1,"dy":1},"xg_store":{"open":1,"zs":1,"dz":1,"dy":0}}',
linkType: 2, // linkType: 2,
memberLabelId: 'fd6b44967aa647bcadfad10706244c56', // memberLabelId: 'fd6b44967aa647bcadfad10706244c56',
name: '活码链接-711', // memberLabelName: '测试121212-木瑾0630测试标签值50',
pageId: 418460224953786370, // name: '活码链接-711',
remark: '说明', // pageId: 418460224953786370,
linkUrl: 'www.baidu.com', // remark: '说明',
storeList: [ // linkUrl: 'www.baidu.com',
// storeList: [
// {
// storeId: 'ff80808181e0effb0181e26a674c000e',
// storeName: '测试有赞商城',
// storeCode: '991001'
// },
// {
// storeId: 'ff80808181e0effb0181e128d0b70000',
// storeName: '达达店铺',
// storeCode: 'DADA'
// }
// ],
// storeRuleJson: '{"store_type":2,"open":0,"store":{"dz":0,"dy":1,"ndz":0,"ndy":1}, "city_store":{"open":1,"dz":1,"dy":1}}',
// welcomeId: '04af9e55515d4352be0b2a3119005ce9',
// enterpriseId: 'ff8080815dacd3a2015dacd3ef5c0000',
// wxEnterpriseId: 'ca66a01b79474c40b3e7c7f93daf1a3b',
// createTime: 1657594862000,
// createorId: 'fefd1c81641711e69d0818c58a146fd2',
// creatorName: '艾蜜雪管理员'
},
page: {
// createTime: 1657594862000,
// createorId: 'fefd1c81641711e69d0818c58a146fd2',
// createorName: '艾蜜雪管理员',
// enterpriseId: 'ff8080815dacd3a2015dacd3ef5c0000',
// guideComment: '长按保存图片并识别二维码添加您的专属导购',
// merchantLogo: 'https://pic01-10001430.image.myqcloud.com/d4b383df-8eb1-49d6-9c84-8e3e36958464',
// merchantName: '金华达摩11',
// merchantPhoneNumber: '12-31322',
// modifierId: 'fefd1c81641711e69d0818c58a146fd2',
// modifierName: '艾蜜雪管理员',
// pageBackgroundImg: '',
// pageCode: 'MB01419872763172380673',
// pageId: '419872763172380673',
// pageName: 'test1',
// pageTitle: '嗡嗡嗡嗡嗡嗡嗡嗡嗡嗡',
// status: 1,
// updateTime: 1657594862000,
// wxEnterpriseId: 'ca66a01b79474c40b3e7c7f93daf1a3b'
},
originTargetList: [
[
{ {
storeId: 'ff80808181e0effb0181e26a674c000e', label: '添加好友人数',
storeName: '测试有赞商城', value: '',
storeCode: '991001' key: 'addNumT',
type: 'number'
}, },
{ {
storeId: 'ff80808181e0effb0181e128d0b70000', label: '今日新增人数',
storeName: '达达店铺', value: '',
storeCode: 'DADA' key: 'addNum',
type: 'number'
} }
], ],
storeRuleJson: '{"store_type":2,"open":0,"store":{"dz":0,"dy":1,"ndz":0,"ndy":1}, "city_store":{"open":1,"dz":1,"dy":1}}', [
welcomeId: '025867b7a01541979617229a4aca9551', {
enterpriseId: 'ff8080815dacd3a2015dacd3ef5c0000', label: '点击总人次',
wxEnterpriseId: 'ca66a01b79474c40b3e7c7f93daf1a3b' value: '',
}, key: 'clickTimesT',
page: {}, type: 'number'
},
{
label: '今日点击人次',
value: '',
key: 'clickTimes',
type: 'number'
}
],
[
{
label: '点击总人数',
value: '',
key: 'clickNumT',
type: 'number'
},
{
label: '今日点击人数',
value: '',
key: 'clickNum',
type: 'number'
}
]
],
charData: [],
welcome: {}, welcome: {},
scrollTop: 0 targetData: {},
scrollTop: 0,
linkId: this.$route.params.id
}; };
}, },
computed: {
targetList() {
return this.originTargetList
.map(el => {
return el.filter(item => {
const value = this.targetData[item.key] || 0;
item.value = value.toLocaleString();
return true;
});
})
.filter(el => el.length > 0);
}
},
methods: { methods: {
getChartList() {
let para = {
linkId: this.linkId,
startTime: this.dateDefault[0],
endTime: this.dateDefault[1]
};
statisticsChart(para).then(res => {
const { result } = res.data;
this.charData = result;
});
},
statisticsTotal() {
statisticsTotal({ linkId: this.linkId }).then(res => {
const { result } = res.data;
if (result) {
this.targetData = result;
}
});
},
downloadQR() { downloadQR() {
const qrcode = document.getElementById('qrImg'); const qrcode = document.getElementById('qrImg');
console.log(qrcode); console.log(qrcode);
...@@ -129,11 +262,11 @@ export default { ...@@ -129,11 +262,11 @@ export default {
link.click(); link.click();
}, },
goEdit() { goEdit() {
this.$router.push(`attractFlowLinkEdit/${this.link.linkId}`); this.$router.push(`/attractFlowLinkEdit/${this.link.linkId}`);
}, },
async getDetail() { async getDetail() {
this.loading = true; this.loading = true;
linkDetail({ linkId: this.$route.params.id }) linkDetail({ linkId: this.linkId })
.then(res => { .then(res => {
const { result } = res.data; const { result } = res.data;
if (result) { if (result) {
...@@ -153,13 +286,26 @@ export default { ...@@ -153,13 +286,26 @@ export default {
this.loading = false; this.loading = false;
}); });
}, },
onDateChange() {
this.dateKey = -1;
this.getChartList();
},
scrollMethod: _throttle(function() { scrollMethod: _throttle(function() {
// 节流会不自然 左右不滑动 // 节流会不自然 左右不滑动
this.scrollTop = document.getElementById('hb-layout-pager-one').scrollTop; this.scrollTop = document.getElementById('hb-layout-pager-one').scrollTop;
}, 100) }, 100),
handleClick(e) {
const { name } = e;
if (name == 'first') {
this.getDetail();
} else {
this.getChartList();
}
}
}, },
mounted() { mounted() {
this.getDetail(); this.getDetail();
this.getChartList();
document.getElementById('hb-layout-pager-one').addEventListener('scroll', this.scrollMethod); document.getElementById('hb-layout-pager-one').addEventListener('scroll', this.scrollMethod);
}, },
destroyed() { destroyed() {
...@@ -168,27 +314,12 @@ export default { ...@@ -168,27 +314,12 @@ export default {
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.app-detail-wrap { .info {
// height: 100%; /deep/ .el-descriptions__body {
background: #fff; color: #303133;
.p-b-40 {
padding-bottom: 40px;
} }
} }
.img-200 {
width: 200px;
height: 200px;
border-radius: 8px;
padding-right: 30px;
}
.height-22 {
height: 22px;
}
.text-ellipsis-white {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fixed-tab { .fixed-tab {
position: absolute; position: absolute;
top: 80px; top: 80px;
...@@ -196,12 +327,9 @@ export default { ...@@ -196,12 +327,9 @@ export default {
padding-bottom: 0; padding-bottom: 0;
height: 40px; height: 40px;
background: white; background: white;
width: 100%;
// left: 50px;
} }
.welcome-left-view { .welcome-left-view {
width: 639px; width: 639px;
// margin-right: 120px;
} }
.merchantLogo { .merchantLogo {
width: 120px; width: 120px;
...@@ -210,11 +338,15 @@ export default { ...@@ -210,11 +338,15 @@ export default {
border-radius: 2px; border-radius: 2px;
border: 1px solid #dcdfe6; border: 1px solid #dcdfe6;
} }
.title-right {
margin-left: 30px;
padding: 12px 0 12px 0;
}
.preview { .preview {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin-left: 40px; margin-left: 100px;
/deep/ .pageTitle { /deep/ .pageTitle {
position: absolute !important; position: absolute !important;
top: 44px !important; top: 44px !important;
...@@ -236,4 +368,35 @@ export default { ...@@ -236,4 +368,35 @@ export default {
line-height: 17px; line-height: 17px;
} }
} }
.title {
width: 100%;
display: flex;
justify-content: space-between;
.info-icon {
margin-right: 8px;
}
}
.justify-end {
justify-content: flex-end;
}
.rightBox {
// float: right;
line-height: 32px;
padding-top: 20px;
// height: 32px;
.datebox {
display: inline-block;
.dateLisBox {
font-size: 14px;
margin-right: 24px;
cursor: pointer;
}
}
}
.activeClass {
color: #2f54eb;
}
.noActive {
color: #303133;
}
</style> </style>
src/views/salesleads/actCodeManage/attractFlowLink/newAddChart.vue 0 → 100644
<template>
<div :id="id"></div>
<!-- <div v-if="charData.length" :id="id"></div> -->
<!-- <div v-else class="chart--nodata"></div> -->
</template>
<script>
// import G2 from '@antv/g2';
import * as G2 from '@antv/g2';
export default {
data() {
return {
chart: null
};
},
props: {
charData: {
type: Array,
default() {
return [];
}
},
id: String,
width: {
type: Number,
default: 1192
}
},
mounted() {
setTimeout(() => {
this.drawChart(); // 第一步是创建的时候更新图表，但是这个不适用于异步请求接口获取相关数据，采用下面的监听的方式
}, 30);
},
beforeUpdate() {
this.drawChart();
},
watch: {
charData() {
this.drawChart();
}
},
methods: {
async drawChart() {
this.chart && this.chart.destroy();
this.chart = new G2.Chart({
container: this.id,
height: 359,
forceFit: true,
width: this.width,
padding: [20, 40, 80, 80]
});
this.chart.data(this.charData, {
bizDate: {
// type: 'cat', //分类
alias: '日期' //别名
},
addNum: {
alias: '今日添加人数'
},
clickNum: {
alias: '今日点击人数'
},
clickTimes: {
alias: '今日点击人次'
}
});
//坐标轴配置(法一配置)
this.chart.axis('bizDate', {
line: {
style: {
stroke: '#606266',
lineDash: [3, 3]
}
},
tickLine: {
style: {
fill: '#E4E7ED',
lineDash: [3, 3]
}
},
label: {
style: {
fill: '#606266'
}
}
});
// this.chart.axis('新增人数', {
// grid: {
// line: {
// type: 'line',
// style: {
// stroke: '#E4E7ED',
// lineDash: [3, 3]
// }
// }
// },
// label: {
// style: {
// fill: '#606266'
// },
// formatter: val => {
// // 格式化参数值
// return val;
// }
// }
// });
// 图例
this.chart.legend({
custom: true,
position: 'top-left',
items: [
{ name: '今日添加人数', value: 'addNum', marker: { symbol: 'line', style: { stroke: '#4B74E8', lineWidth: 12, lineHeight: 8 } } },
{ name: '今日点击人次', value: 'clickTimes', marker: { symbol: 'line', style: { stroke: '#D6B38C', lineWidth: 12, lineHeight: 8 } } },
{ name: '今日点击人数', value: 'clickNum', marker: { symbol: 'line', style: { stroke: '#14C9C9', lineWidth: 12, lineHeight: 8 } } }
]
});
this.chart
.line()
.position('bizDate*addNum')
.color('#4B74E8');
this.chart
.line()
.position('bizDate*clickTimes')
.color('#D6B38C');
this.chart
.line()
.position('bizDate*clickNum')
.color('#14C9C9');
this.chart.removeInteraction('legend-filter'); // 自定义图例，移除默认的分类图例筛选交互
//图表绘制的最后一步，用于将图表渲染至画布
this.chart.render();
}
}
};
</script>
src/views/salesleads/actCodeManage/components/mixin.js 0 → 100644
export default {
data() {
return {
dateKey: 0,
dateLis: [
{ key: 0, value: '近7天' },
{ key: 1, value: '近30天' },
{ key: 2, value: '近三个月' },
{ key: 3, value: '近半年' },
{ key: 4, value: '近一年' }
],
dateDefault: [],
pickerOptions() {
let pickerMinDate;
return {
onPick(obj) {
pickerMinDate = obj.minDate;
},
disabledDate(time) {
let start = new Date();
start = new Date(`${start.getFullYear()}-${start.getMonth() + 1}-${start.getDate()}`);
let start2 = new Date(pickerMinDate);
let end = new Date();
end = new Date(`${end.getFullYear()}-${end.getMonth() + 1}-${end.getDate()} 23:59:59`);
let end2 = new Date(pickerMinDate);
if (pickerMinDate) {
start = start.setFullYear(start.getFullYear() - 2);
start2 = start2.setDate(start2.getDate() - 60);
start = start > start2 ? start : start2;
end2 = end2.setDate(end2.getDate() + 60);
end = end.getTime() > end2 ? end2 : end.getTime();
} else {
start = start.setFullYear(start.getFullYear() - 2);
end = end.getTime();
}
return time.getTime() < start || time.getTime() > end;
}
};
}
};
},
methods: {
getDateRange(setEndDate) {
const start = new Date();
let end = new Date();
end = setEndDate(end);
function getDate(date) {
const result = [];
result.push(date.getFullYear());
result.push((date.getMonth() + 1).toString().padStart(2, '0'));
result.push(
date
.getDate()
.toString()
.padStart(2, '0')
);
return result.join('-');
}
// yyyy-MM-dd
return [getDate(start), getDate(end)];
},
btnChange(index) {
let that = this;
that.dateKey = index;
that.dateDefault = [];
let setDate;
if (index == 0) {
// 近7天
setDate = endDate => {
endDate.setDate(endDate.getDate() - 6);
return new Date(endDate);
};
} else if (index == 1) {
// 近30天
setDate = endDate => {
endDate.setDate(endDate.getDate() - 29);
return new Date(endDate);
};
} else if (index == 2) {
// 近三个月
setDate = endDate => {
endDate.setMonth(endDate.getMonth() - 3);
endDate.setDate(endDate.getDate() + 1);
return new Date(endDate);
};
} else if (index == 3) {
// 近半年
setDate = endDate => {
endDate.setMonth(endDate.getMonth() - 6);
endDate.setDate(endDate.getDate() + 1);
return new Date(endDate);
};
} else {
// 近一年
setDate = endDate => {
endDate.setFullYear(endDate.getFullYear() - 1);
endDate.setDate(endDate.getDate() + 1);
return new Date(endDate);
};
}
const [start, end] = that.getDateRange(setDate);
that.dateDefault.push(end);
that.dateDefault.push(start);
that.getChartList();
}
}
};
src/views/salesleads/actCodeManage/staffActCode/actCodeDetailStatistics.vue
...@@ -64,6 +64,7 @@ ...@@ -64,6 +64,7 @@
import dataDetail from '../../components/dataDetail.vue'; import dataDetail from '../../components/dataDetail.vue';
import newAddChart from './newAddChart.vue'; import newAddChart from './newAddChart.vue';
import { postJsonRequest } from '@/api/api'; import { postJsonRequest } from '@/api/api';
import mixin from '../components/mixin';
import errMsg from '@/common/js/error'; import errMsg from '@/common/js/error';
export default { export default {
name: 'act-code-detail-statistics', name: 'act-code-detail-statistics',
...@@ -76,45 +77,11 @@ export default { ...@@ -76,45 +77,11 @@ export default {
} }
} }
}, },
mixins: [mixin],
data() { data() {
return { return {
loading: false, loading: false,
dateKey: 0,
dateLis: [
{ key: 0, value: '近7天' },
{ key: 1, value: '近30天' },
{ key: 2, value: '近三个月' },
{ key: 3, value: '近半年' },
{ key: 4, value: '近一年' }
],
dateDefault: [],
pickerOptions() {
let pickerMinDate;
return {
onPick(obj) {
pickerMinDate = obj.minDate;
},
disabledDate(time) {
let start = new Date();
start = new Date(`${start.getFullYear()}-${start.getMonth() + 1}-${start.getDate()}`);
let start2 = new Date(pickerMinDate);
let end = new Date();
end = new Date(`${end.getFullYear()}-${end.getMonth() + 1}-${end.getDate()} 23:59:59`);
let end2 = new Date(pickerMinDate);
if (pickerMinDate) {
start = start.setFullYear(start.getFullYear() - 2);
start2 = start2.setDate(start2.getDate() - 60);
start = start > start2 ? start : start2;
end2 = end2.setDate(end2.getDate() + 60);
end = end.getTime() > end2 ? end2 : end.getTime();
} else {
start = start.setFullYear(start.getFullYear() - 2);
end = end.getTime();
}
return time.getTime() < start || time.getTime() > end;
}
};
},
overViewData: { addNumT: 0, addNum: 0, dateList: [] } overViewData: { addNumT: 0, addNum: 0, dateList: [] }
}; };
}, },
...@@ -187,70 +154,7 @@ export default { ...@@ -187,70 +154,7 @@ export default {
}); });
}); });
}, },
getDateRange(setEndDate) { onDateChange() {
const start = new Date();
let end = new Date();
end = setEndDate(end);
function getDate(date) {
const result = [];
result.push(date.getFullYear());
result.push((date.getMonth() + 1).toString().padStart(2, '0'));
result.push(
date
.getDate()
.toString()
.padStart(2, '0')
);
return result.join('-');
}
// yyyy-MM-dd
return [getDate(start), getDate(end)];
},
btnChange(index) {
let that = this;
that.dateKey = index;
that.dateDefault = [];
let setDate;
if (index == 0) {
// 近7天
setDate = endDate => {
endDate.setDate(endDate.getDate() - 6);
return new Date(endDate);
};
} else if (index == 1) {
// 近30天
setDate = endDate => {
endDate.setDate(endDate.getDate() - 29);
return new Date(endDate);
};
} else if (index == 2) {
// 近三个月
setDate = endDate => {
endDate.setMonth(endDate.getMonth() - 3);
endDate.setDate(endDate.getDate() + 1);
return new Date(endDate);
};
} else if (index == 3) {
// 近半年
setDate = endDate => {
endDate.setMonth(endDate.getMonth() - 6);
endDate.setDate(endDate.getDate() + 1);
return new Date(endDate);
};
} else {
// 近一年
setDate = endDate => {
endDate.setFullYear(endDate.getFullYear() - 1);
endDate.setDate(endDate.getDate() + 1);
return new Date(endDate);
};
}
const [start, end] = that.getDateRange(setDate);
that.dateDefault.push(end);
that.dateDefault.push(start);
this.getChartList();
},
onDateChange(res) {
this.dateKey = -1; this.dateKey = -1;
this.getChartList(); this.getChartList();
} }
......
src/views/salesleads/actCodeManage/staffActCode/actCodeRecord.vue
...@@ -152,14 +152,31 @@ export default { ...@@ -152,14 +152,31 @@ export default {
async getTableList() { async getTableList() {
const that = this; const that = this;
that.loading = true; that.loading = true;
let para = { let para = {};
pageNum: that.currentPage, // 当前页 let api = '';
pageSize: that.pageSize, // 一页显示个数 if (this.$route.query.hmId) {
hmId: that.$route.query.hmId, api = '/haoban-manage3-web/hm/qrcode/wxUserAddLog/list';
createTimeOrder: that.sortType || '' para = {
}; pageNum: that.currentPage, // 当前页
pageSize: that.pageSize, // 一页显示个数
hmId: that.$route.query.hmId,
createTimeOrder: that.sortType || ''
};
} else if (this.$route.query.linkId) {
const { startTime, endTime, clerkId, linkId } = this.$route.query;
api = '/haoban-manage3-web/hm/link/statistics/log';
para = {
pageNum: that.currentPage, // 当前页
pageSize: that.pageSize, // 一页显示个数
linkId,
clerkId,
startTime,
endTime
// createTimeOrder: that.sortType || ''
};
}
// console.log(para); // console.log(para);
postJsonRequest('/haoban-manage3-web/hm/qrcode/wxUserAddLog/list', para) postJsonRequest(api, para)
.then(res => { .then(res => {
let resData = res.data; let resData = res.data;
that.loading = false; that.loading = false;
......
src/views/salesleads/components/actCodeDetailInfo.vue
...@@ -137,6 +137,7 @@ export default { ...@@ -137,6 +137,7 @@ export default {
}, },
getwelcomeInfo() { getwelcomeInfo() {
let that = this; let that = this;
if (!this.welcomeId) return;
let para = { let para = {
welcomeId: this.welcomeId, welcomeId: this.welcomeId,
enterpriseId: this.enterpriseId || '' enterpriseId: this.enterpriseId || ''
......
src/views/salesleads/components/dataDetail.vue
...@@ -61,6 +61,10 @@ export default { ...@@ -61,6 +61,10 @@ export default {
type: String, type: String,
default: '' default: ''
}, },
api: {
type: Function,
default: detailClerkList
},
typeT: { typeT: {
type: String, type: String,
default: 'code' default: 'code'
...@@ -125,7 +129,6 @@ export default { ...@@ -125,7 +129,6 @@ export default {
created() { created() {
// 默认显示近七天 // 默认显示近七天
this.btnChange(0); this.btnChange(0);
this.getTableList();
}, },
methods: { methods: {
getDateRange(setEndDate) { getDateRange(setEndDate) {
...@@ -224,10 +227,12 @@ export default { ...@@ -224,10 +227,12 @@ export default {
if (this.pageParam.inFields.clerkSelect == '') { if (this.pageParam.inFields.clerkSelect == '') {
delete this.pageParam.inFields.clerkSelect; delete this.pageParam.inFields.clerkSelect;
} }
await detailClerkList(this.pageParam).then(res => {
await this.api(this.pageParam).then(res => {
console.log(res);
if (res.data.code == 0) { if (res.data.code == 0) {
this.tableData = res.data.result.data || []; this.tableData = res.data.result.result || [];
this.totalCount = res.result.totalCount; this.totalCount = res.data.result.totalCount;
} else { } else {
return this.$message(res.data.message); return this.$message(res.data.message);
} }
...@@ -237,7 +242,14 @@ export default { ...@@ -237,7 +242,14 @@ export default {
if (row.hmId) { if (row.hmId) {
this.$router.push(`/actCodeRecord?hmId=${row.hmId}`); this.$router.push(`/actCodeRecord?hmId=${row.hmId}`);
} else if (row.linkId) { } else if (row.linkId) {
this.$router.push(`/actCodeRecord?linkId=${row.linkId}`); const { clerkId, linkId } = row;
const startTime = this.dateDefault && this.dateDefault.length ? this.dateDefault[0] : undefined;
const endTime = this.dateDefault && this.dateDefault.length ? this.dateDefault[1] : undefined;
let query = { linkId, clerkId };
startTime ? (query.startTime = startTime) : '';
endTime ? (query.endTime = endTime) : '';
this.$router.push({ path: '/actCodeRecord', query: query });
} }
} }
} }
......
static/css/public.css
...@@ -474,6 +474,9 @@ input:focus { ...@@ -474,6 +474,9 @@ input:focus {
.p-t-185 { .p-t-185 {
padding-top: 185px; padding-top: 185px;
} }
.p-b-40{
padding-bottom: 40px;
}
.m-l-10 { .m-l-10 {
margin-left: 10px; margin-left: 10px;
...@@ -481,9 +484,7 @@ input:focus { ...@@ -481,9 +484,7 @@ input:focus {
.m-l-16 { .m-l-16 {
margin-left: 16px; margin-left: 16px;
} }
.m-l-30 {
margin-left: 30px;
}
.m-t-6{ .m-t-6{
margin-top: 6px; margin-top: 6px;
} }
......
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