|
@@ -18,8 +18,46 @@
|
|
|
/>
|
|
/>
|
|
|
</el-select>
|
|
</el-select>
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
|
|
+ <el-form-item label="广告商" prop="advertiserId">
|
|
|
|
|
+ <el-select
|
|
|
|
|
+ v-model="queryParams.advertiserId"
|
|
|
|
|
+ placeholder="请选择广告商"
|
|
|
|
|
+ clearable
|
|
|
|
|
+ size="small"
|
|
|
|
|
+ filterable
|
|
|
|
|
+ >
|
|
|
|
|
+ <el-option
|
|
|
|
|
+ v-for="item in advertiserList"
|
|
|
|
|
+ :key="item.id"
|
|
|
|
|
+ :label="item.advertiserName"
|
|
|
|
|
+ :value="item.id"
|
|
|
|
|
+ />
|
|
|
|
|
+ </el-select>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item label="日期范围" prop="dateRange">
|
|
|
|
|
+ <el-date-picker
|
|
|
|
|
+ v-model="queryParams.dateRange"
|
|
|
|
|
+ type="daterange"
|
|
|
|
|
+ range-separator="至"
|
|
|
|
|
+ start-placeholder="开始日期"
|
|
|
|
|
+ end-placeholder="结束日期"
|
|
|
|
|
+ format="yyyy-MM-dd"
|
|
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
|
|
+ size="small"
|
|
|
|
|
+ style="width: 280px"
|
|
|
|
|
+ />
|
|
|
|
|
+ </el-form-item>
|
|
|
<el-form-item>
|
|
<el-form-item>
|
|
|
- <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
|
|
|
|
|
+ <div class="date-quick-buttons">
|
|
|
|
|
+ <el-button type="primary" plain size="small" @click="setDateRange('today')">今日</el-button>
|
|
|
|
|
+ <el-button type="primary" plain size="small" @click="setDateRange('yesterday')">昨日</el-button>
|
|
|
|
|
+ <el-button type="primary" plain size="small" @click="setDateRange('week')">本周</el-button>
|
|
|
|
|
+ <el-button type="primary" plain size="small" @click="setDateRange('month')">本月</el-button>
|
|
|
|
|
+ <el-button type="primary" plain size="small" @click="setDateRange('30days')">30天</el-button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item>
|
|
|
|
|
+ <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
</el-form>
|
|
</el-form>
|
|
@@ -141,22 +179,44 @@
|
|
|
<span class="rate-text">{{ scope.row.wechatGroupRate || 0 }}</span>
|
|
<span class="rate-text">{{ scope.row.wechatGroupRate || 0 }}</span>
|
|
|
</template>
|
|
</template>
|
|
|
</el-table-column>
|
|
</el-table-column>
|
|
|
|
|
+ <el-table-column label="企微删除人数" align="center" prop="wechatDeleteCount" width="120">
|
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
|
+ <span class="number-text">{{ scope.row.wechatDeleteCount || 0 }}</span>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ <el-table-column label="企微删除率" align="center" prop="wechatDeleteCountRate" width="120">
|
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
|
+ <span class="rate-text">{{ scope.row.wechatDeleteCountRate || 0 }}</span>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-table-column>
|
|
|
</el-table-column>
|
|
</el-table-column>
|
|
|
|
|
|
|
|
- <!-- ROI与销售 -->
|
|
|
|
|
- <el-table-column label="效果数据" align="center">
|
|
|
|
|
- <el-table-column label="ROI" align="center" prop="roi" width="100">
|
|
|
|
|
|
|
+ <!-- 小程序数据 -->
|
|
|
|
|
+ <el-table-column label="小程序数据" align="center">
|
|
|
|
|
+ <el-table-column label="发起进入小程序人数" align="center" prop="miniLaunchIndexCount" width="140">
|
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
|
+ <span class="number-text">{{ scope.row.miniLaunchIndexCount || 0 }}</span>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ <el-table-column label="进入小程序落地页" align="center" prop="miniAuthIndexCount" width="140">
|
|
|
<template slot-scope="scope">
|
|
<template slot-scope="scope">
|
|
|
- <el-tag :type="getRoiType(scope.row.roi)" size="small">
|
|
|
|
|
- {{ scope.row.roi || 0 }}
|
|
|
|
|
- </el-tag>
|
|
|
|
|
|
|
+ <span class="number-text">{{ scope.row.miniAuthIndexCount || 0 }}</span>
|
|
|
</template>
|
|
</template>
|
|
|
</el-table-column>
|
|
</el-table-column>
|
|
|
- <el-table-column label="销售额" align="center" prop="salesAmount" width="120">
|
|
|
|
|
|
|
+ <el-table-column label="小程序授权人数" align="center" prop="miniAuthCount" width="140">
|
|
|
<template slot-scope="scope">
|
|
<template slot-scope="scope">
|
|
|
- <span class="money-text success">¥{{ scope.row.salesAmount || 0 }}</span>
|
|
|
|
|
|
|
+ <span class="number-text">{{ scope.row.miniAuthCount || 0 }}</span>
|
|
|
</template>
|
|
</template>
|
|
|
</el-table-column>
|
|
</el-table-column>
|
|
|
|
|
+ <el-table-column label="进入出码页人数" align="center" prop="miniQrCodeIndexCount" width="140">
|
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
|
+ <span class="number-text">{{ scope.row.miniQrCodeIndexCount || 0 }}</span>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 下次转化数据 -->
|
|
|
|
|
+ <el-table-column label="下次转化数据" align="center">
|
|
|
<el-table-column label="报名成功人数" align="center" prop="registerSuccessCount" width="120">
|
|
<el-table-column label="报名成功人数" align="center" prop="registerSuccessCount" width="120">
|
|
|
<template slot-scope="scope">
|
|
<template slot-scope="scope">
|
|
|
<span class="number-text">{{ scope.row.registerSuccessCount || 0 }}</span>
|
|
<span class="number-text">{{ scope.row.registerSuccessCount || 0 }}</span>
|
|
@@ -190,8 +250,8 @@
|
|
|
<pagination
|
|
<pagination
|
|
|
v-show="total>0"
|
|
v-show="total>0"
|
|
|
:total="total"
|
|
:total="total"
|
|
|
- :page.sync="queryParams.current"
|
|
|
|
|
- :limit.sync="queryParams.size"
|
|
|
|
|
|
|
+ :page.sync="queryParams.pageNum"
|
|
|
|
|
+ :limit.sync="queryParams.pageSize"
|
|
|
@pagination="getList"
|
|
@pagination="getList"
|
|
|
/>
|
|
/>
|
|
|
|
|
|
|
@@ -204,24 +264,21 @@
|
|
|
<el-descriptions-item label="UV">{{ detail.uv || 0 }}</el-descriptions-item>
|
|
<el-descriptions-item label="UV">{{ detail.uv || 0 }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="展示数">{{ detail.impressionCount || 0 }}</el-descriptions-item>
|
|
<el-descriptions-item label="展示数">{{ detail.impressionCount || 0 }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="点击数">{{ detail.clickCount || 0 }}</el-descriptions-item>
|
|
<el-descriptions-item label="点击数">{{ detail.clickCount || 0 }}</el-descriptions-item>
|
|
|
- <el-descriptions-item label="点击率">{{ detail.clickRate || 0 }}%</el-descriptions-item>
|
|
|
|
|
|
|
+ <el-descriptions-item label="点击率">{{ detail.clickRate || 0 }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="平均点击单价">¥{{ detail.avgClickPrice || 0 }}</el-descriptions-item>
|
|
<el-descriptions-item label="平均点击单价">¥{{ detail.avgClickPrice || 0 }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="账面花费">¥{{ detail.accountCost || 0 }}</el-descriptions-item>
|
|
<el-descriptions-item label="账面花费">¥{{ detail.accountCost || 0 }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="实际花费">¥{{ detail.actualCost || 0 }}</el-descriptions-item>
|
|
<el-descriptions-item label="实际花费">¥{{ detail.actualCost || 0 }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="名片数">{{ detail.cardCount || 0 }}</el-descriptions-item>
|
|
<el-descriptions-item label="名片数">{{ detail.cardCount || 0 }}</el-descriptions-item>
|
|
|
- <el-descriptions-item label="名片获取率">{{ detail.cardAcquireRate || 0 }}%</el-descriptions-item>
|
|
|
|
|
|
|
+ <el-descriptions-item label="名片获取率">{{ detail.cardAcquireRate || 0 }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="名片获取成本">¥{{ detail.cardAcquireCost || 0 }}</el-descriptions-item>
|
|
<el-descriptions-item label="名片获取成本">¥{{ detail.cardAcquireCost || 0 }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="企微添加人数">{{ detail.wechatAddCount || 0 }}</el-descriptions-item>
|
|
<el-descriptions-item label="企微添加人数">{{ detail.wechatAddCount || 0 }}</el-descriptions-item>
|
|
|
- <el-descriptions-item label="企微添加率">{{ detail.wechatAddRate || 0 }}%</el-descriptions-item>
|
|
|
|
|
|
|
+ <el-descriptions-item label="企微添加率">{{ detail.wechatAddRate || 0 }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="企微添加成本">¥{{ detail.wechatAddCost || 0 }}</el-descriptions-item>
|
|
<el-descriptions-item label="企微添加成本">¥{{ detail.wechatAddCost || 0 }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="企微加群人数">{{ detail.wechatGroupCount || 0 }}</el-descriptions-item>
|
|
<el-descriptions-item label="企微加群人数">{{ detail.wechatGroupCount || 0 }}</el-descriptions-item>
|
|
|
- <el-descriptions-item label="企微加群率">{{ detail.wechatGroupRate || 0 }}%</el-descriptions-item>
|
|
|
|
|
|
|
+ <el-descriptions-item label="企微加群率">{{ detail.wechatGroupRate || 0 }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="报名成功人数">{{ detail.registerSuccessCount || 0 }}</el-descriptions-item>
|
|
<el-descriptions-item label="报名成功人数">{{ detail.registerSuccessCount || 0 }}</el-descriptions-item>
|
|
|
- <el-descriptions-item label="报名成功加微率">{{ detail.registerWechatRate || 0 }}%</el-descriptions-item>
|
|
|
|
|
- <el-descriptions-item label="ROI">
|
|
|
|
|
- <el-tag :type="getRoiType(detail.roi)" size="medium">{{ detail.roi || 0 }}</el-tag>
|
|
|
|
|
- </el-descriptions-item>
|
|
|
|
|
- <el-descriptions-item label="销售额">¥{{ detail.salesAmount || 0 }}</el-descriptions-item>
|
|
|
|
|
|
|
+ <el-descriptions-item label="报名成功加微率">{{ detail.registerWechatRate || 0 }}</el-descriptions-item>
|
|
|
|
|
+ <el-descriptions-item label="企微删除率">{{ detail.wechatDeleteCountRate || 0 }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="创建时间">{{ parseTime(detail.createTime) }}</el-descriptions-item>
|
|
<el-descriptions-item label="创建时间">{{ parseTime(detail.createTime) }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="更新时间">{{ parseTime(detail.updateTime) }}</el-descriptions-item>
|
|
<el-descriptions-item label="更新时间">{{ parseTime(detail.updateTime) }}</el-descriptions-item>
|
|
|
</el-descriptions>
|
|
</el-descriptions>
|
|
@@ -235,6 +292,7 @@
|
|
|
<script>
|
|
<script>
|
|
|
import { pageSiteStatistics, getSiteStatistics } from "@/api/adv/siteStatistics";
|
|
import { pageSiteStatistics, getSiteStatistics } from "@/api/adv/siteStatistics";
|
|
|
import { listSite } from "@/api/adv/site";
|
|
import { listSite } from "@/api/adv/site";
|
|
|
|
|
+import { pageAdvertiser } from "@/api/adv/advertiser";
|
|
|
|
|
|
|
|
export default {
|
|
export default {
|
|
|
name: "SiteStatistics",
|
|
name: "SiteStatistics",
|
|
@@ -256,10 +314,16 @@ export default {
|
|
|
detail: {},
|
|
detail: {},
|
|
|
// 查询参数
|
|
// 查询参数
|
|
|
queryParams: {
|
|
queryParams: {
|
|
|
- current: 1,
|
|
|
|
|
- size: 10,
|
|
|
|
|
- siteId: undefined
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ pageNum: 1,
|
|
|
|
|
+ pageSize: 10,
|
|
|
|
|
+ siteId: undefined,
|
|
|
|
|
+ advertiserId: undefined,
|
|
|
|
|
+ startDate: undefined,
|
|
|
|
|
+ endDate: undefined,
|
|
|
|
|
+ dateRange: []
|
|
|
|
|
+ },
|
|
|
|
|
+ // 广告商列表
|
|
|
|
|
+ advertiserList: []
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|
|
|
created() {
|
|
created() {
|
|
@@ -268,7 +332,14 @@ export default {
|
|
|
if (siteId) {
|
|
if (siteId) {
|
|
|
this.queryParams.siteId = parseInt(siteId);
|
|
this.queryParams.siteId = parseInt(siteId);
|
|
|
}
|
|
}
|
|
|
|
|
+ // 默认设置今天的日期范围
|
|
|
|
|
+ const today = new Date();
|
|
|
|
|
+ const dateStr = today.getFullYear() + '-' + String(today.getMonth() + 1).padStart(2, '0') + '-' + String(today.getDate()).padStart(2, '0');
|
|
|
|
|
+ this.queryParams.startDate = dateStr;
|
|
|
|
|
+ this.queryParams.endDate = dateStr;
|
|
|
|
|
+ this.queryParams.dateRange = [dateStr, dateStr];
|
|
|
this.getSiteList();
|
|
this.getSiteList();
|
|
|
|
|
+ this.getAdvertiserList();
|
|
|
this.getList();
|
|
this.getList();
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
@@ -278,10 +349,59 @@ export default {
|
|
|
this.siteList = response.data || [];
|
|
this.siteList = response.data || [];
|
|
|
});
|
|
});
|
|
|
},
|
|
},
|
|
|
|
|
+ /** 查询广告商列表 */
|
|
|
|
|
+ getAdvertiserList() {
|
|
|
|
|
+ pageAdvertiser({ pageNum: 1, pageSize: 1000 }).then(response => {
|
|
|
|
|
+ this.advertiserList = response.data.records || [];
|
|
|
|
|
+ }).catch(error => {
|
|
|
|
|
+ console.error('查询广告商列表失败:', error);
|
|
|
|
|
+ this.advertiserList = [];
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ /** 设置日期范围 */
|
|
|
|
|
+ setDateRange(rangeType) {
|
|
|
|
|
+ const today = new Date();
|
|
|
|
|
+ let startDate, endDate;
|
|
|
|
|
+
|
|
|
|
|
+ if (rangeType === 'today') {
|
|
|
|
|
+ startDate = new Date(today);
|
|
|
|
|
+ endDate = new Date(today);
|
|
|
|
|
+ } else if (rangeType === 'yesterday') {
|
|
|
|
|
+ startDate = new Date(today.getTime() - 24 * 60 * 60 * 1000);
|
|
|
|
|
+ endDate = new Date(today.getTime() - 24 * 60 * 60 * 1000);
|
|
|
|
|
+ } else if (rangeType === 'week') {
|
|
|
|
|
+ const dayOfWeek = today.getDay();
|
|
|
|
|
+ const diff = today.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1);
|
|
|
|
|
+ startDate = new Date(today.getFullYear(), today.getMonth(), diff);
|
|
|
|
|
+ endDate = new Date(today);
|
|
|
|
|
+ } else if (rangeType === 'month') {
|
|
|
|
|
+ startDate = new Date(today.getFullYear(), today.getMonth(), 1);
|
|
|
|
|
+ endDate = new Date(today);
|
|
|
|
|
+ } else if (rangeType === '30days') {
|
|
|
|
|
+ startDate = new Date(today.getTime() - 29 * 24 * 60 * 60 * 1000);
|
|
|
|
|
+ endDate = new Date(today);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ const formatDate = (date) => {
|
|
|
|
|
+ return date.getFullYear() + '-' + String(date.getMonth() + 1).padStart(2, '0') + '-' + String(date.getDate()).padStart(2, '0');
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ this.queryParams.startDate = formatDate(startDate);
|
|
|
|
|
+ this.queryParams.endDate = formatDate(endDate);
|
|
|
|
|
+ this.queryParams.dateRange = [this.queryParams.startDate, this.queryParams.endDate];
|
|
|
|
|
+ },
|
|
|
/** 查询统计列表 */
|
|
/** 查询统计列表 */
|
|
|
getList() {
|
|
getList() {
|
|
|
this.loading = true;
|
|
this.loading = true;
|
|
|
- pageSiteStatistics(this.queryParams).then(response => {
|
|
|
|
|
|
|
+ const params = {
|
|
|
|
|
+ pageNum: this.queryParams.pageNum,
|
|
|
|
|
+ pageSize: this.queryParams.pageSize,
|
|
|
|
|
+ siteId: this.queryParams.siteId,
|
|
|
|
|
+ advertiserId: this.queryParams.advertiserId,
|
|
|
|
|
+ startDate: this.queryParams.startDate,
|
|
|
|
|
+ endDate: this.queryParams.endDate
|
|
|
|
|
+ };
|
|
|
|
|
+ pageSiteStatistics(params).then(response => {
|
|
|
this.statisticsList = response.data.records || [];
|
|
this.statisticsList = response.data.records || [];
|
|
|
this.total = response.data.total || 0;
|
|
this.total = response.data.total || 0;
|
|
|
this.loading = false;
|
|
this.loading = false;
|
|
@@ -292,12 +412,22 @@ export default {
|
|
|
},
|
|
},
|
|
|
/** 搜索按钮操作 */
|
|
/** 搜索按钮操作 */
|
|
|
handleQuery() {
|
|
handleQuery() {
|
|
|
- this.queryParams.current = 1;
|
|
|
|
|
|
|
+ // 不会会改版面pageNum,维持已有的pageNum
|
|
|
|
|
+ if (this.queryParams.dateRange && this.queryParams.dateRange.length === 2) {
|
|
|
|
|
+ this.queryParams.startDate = this.queryParams.dateRange[0];
|
|
|
|
|
+ this.queryParams.endDate = this.queryParams.dateRange[1];
|
|
|
|
|
+ }
|
|
|
this.getList();
|
|
this.getList();
|
|
|
},
|
|
},
|
|
|
/** 重置按钮操作 */
|
|
/** 重置按钮操作 */
|
|
|
resetQuery() {
|
|
resetQuery() {
|
|
|
this.resetForm("queryForm");
|
|
this.resetForm("queryForm");
|
|
|
|
|
+ // 重新设置为today是不是更好?这里应该是按照简易逻辑重新设置日期
|
|
|
|
|
+ const today = new Date();
|
|
|
|
|
+ const dateStr = today.getFullYear() + '-' + String(today.getMonth() + 1).padStart(2, '0') + '-' + String(today.getDate()).padStart(2, '0');
|
|
|
|
|
+ this.queryParams.startDate = dateStr;
|
|
|
|
|
+ this.queryParams.endDate = dateStr;
|
|
|
|
|
+ this.queryParams.dateRange = [dateStr, dateStr];
|
|
|
this.handleQuery();
|
|
this.handleQuery();
|
|
|
},
|
|
},
|
|
|
/** 详情按钮操作 */
|
|
/** 详情按钮操作 */
|
|
@@ -399,6 +529,30 @@ export default {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+// 日期快速设置按钮样式
|
|
|
|
|
+.date-quick-buttons {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ gap: 12px;
|
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
|
+
|
|
|
|
|
+ .el-button {
|
|
|
|
|
+ padding: 8px 18px;
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ border-radius: 6px;
|
|
|
|
|
+ transition: all 0.3s ease;
|
|
|
|
|
+
|
|
|
|
|
+ &:hover {
|
|
|
|
|
+ transform: translateY(-2px);
|
|
|
|
|
+ box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &:active {
|
|
|
|
|
+ transform: translateY(0);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
// 详情对话框样式
|
|
// 详情对话框样式
|
|
|
::v-deep .detail-dialog {
|
|
::v-deep .detail-dialog {
|
|
|
.el-dialog__header {
|
|
.el-dialog__header {
|