Skip to content

dev / trimble-admin-pro

Go to a project
Toggle navigation
Toggle navigation pinning
2e6159b4 by simon
Options

默认提交

1 parent 993f8e6e
Inline Side-by-side
Showing 3 changed files with 432 additions and 0 deletions
...@@ -232,6 +232,24 @@ export const constantRouterMap = [{ ...@@ -232,6 +232,24 @@ export const constantRouterMap = [{
232 icon: '' 232 icon: ''
233 } 233 }
234 }, 234 },
235 {
236 path: '/lesson/pvpage',
237 name: 'pvpage',
238 component: () => import('@/views/lesson/pvpage'),
239 meta: {
240 title: '页面访问明细',
241 icon: ''
242 }
243 },
244 {
245 path: '/lesson/pvproduct',
246 name: 'pvproduct',
247 component: () => import('@/views/lesson/pvproduct'),
248 meta: {
249 title: '产品访问明细',
250 icon: ''
251 }
252 },
235 ] 253 ]
236 }, 254 },
237 255
......
1
2 <template>
3 <div class="page-container">
4 <div class="tool-wrap">
5 <div>
6 <el-form :inline="true" :model="filters">
7 <el-form-item>
8 <el-input @change="changeHandler()" v-model="filters.mobilePhone" placeholder="请输入访问页面"></el-input>
9 </el-form-item>
10 <el-form-item>
11 <el-date-picker @change="changeHandler()" v-model="filters.date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions2">
12 </el-date-picker>
13 </el-form-item>
14 <el-form-item>
15 <el-button type="primary" v-on:click="reqQuery">查询</el-button>
16 </el-form-item>
17 </el-form>
18 </div>
19 <div>
20 <el-button class="reset-btn" @click="showDialog()">导出数据</el-button>
21 </div>
22 </div>
23
24 <el-table :data="totalData.reservationList" highlight-current-row v-loading="listLoading" style="width: 100%;">
25 <el-table-column prop="page_name" label="访问页面">
26 </el-table-column>
27 <el-table-column prop="hdp_created" :formatter="formatTableDate" label="访问时间">
28 </el-table-column>
29 <el-table-column prop="nickname" label="微信昵称">
30 </el-table-column>
31 <el-table-column label="微信头像">
32 <template slot-scope="scope">
33 <div class="avatar-wrap">
34 <img class="avatar" :src="scope.row.avatar" alt="">
35 </div>
36 </template>
37 </el-table-column>
38 <el-table-column prop="openid" label="openid">
39 </el-table-column>
40
41 </el-table>
42
43 <!--工具条-->
44 <el-col :span="24" class="toolbar">
45 <div class="page-tips">总共{{total}}条记录，每页{{pageSize}}条，总共{{pageNum}}页</div>
46 <el-pagination layout="prev, pager, next,jumper" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;">
47 </el-pagination>
48 </el-col>
49
50 <el-dialog class="dialog" center title="导出数据设定" :visible.sync="exportDialogVisible" :close-on-click-modal="false">
51 <span class="tips">导出日期</span>
52 <el-date-picker v-model="exportDate" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions2">
53 </el-date-picker>
54 <div slot="footer" class="dialog-footer">
55 <el-button style="width:120px;" @click.native="exportDialogVisible = false">取消</el-button>
56 <el-button style="width:120px;" type="primary" @click.native="exportHandler()">导出</el-button>
57 </div>
58 </el-dialog>
59
60 </div>
61 </template>
62
63 <script>
64 import { Base64 } from "js-base64";
65 import { exportTable } from "./../../api/api.js";
66 import { formatDate } from "./../../common/utils.js";
67
68 export default {
69 data() {
70 return {
71 exportDate: [
72 new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 7),
73 new Date().getTime()
74 ],
75 exportDialogVisible: false,
76 listLoading: false,
77 page: 1,
78 pageSize: 10,
79 total: 0,
80 totalData: {
81 reservationList: []
82 },
83 selDate: [
84 new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 7),
85 new Date()
86 ],
87 pickerOptions2: {
88 disabledDate(time) {
89 return time.getTime() > Date.now();
90 }
91 },
92 filters: {
93 mobilePhone: "",
94 date: ""
95 }
96 };
97 },
98 computed: {
99 pageNum() {
100 return Math.ceil(this.total / this.pageSize);
101 },
102 startTime() {
103 let date = this.filters.date;
104 let result = (date && date[0]) || "";
105 if (result) {
106 result = date[0].getTime();
107 }
108 return result;
109 },
110 endTime() {
111 let date = this.filters.date;
112 let result = (date && date[1]) || "";
113 if (result) {
114 result = date[1].getTime() + 1000 * 60 * 60 * 24;
115 }
116 return result;
117 }
118 },
119 methods: {
120 changeHandler() {
121 this.reqQuery();
122 },
123 exportHandler() {
124 let data = {
125 start_time: new Date(this.exportDate[0]).getTime(),
126 end_time: new Date(this.exportDate[1]).getTime() + 1000 * 60 * 60 * 24,
127 mobile_phone: "",
128 startIndex: 0,
129 size: 1000000
130 };
131 var encoder = HDP.getEncoder();
132 var encrypted = encoder.encode(JSON.stringify(data));
133 let params = {
134 appId: "df69fd8153f711ea8c527cd30aeb749e",
135 appKey: "5e19fbac20474d6587105eee7c624319",
136 func: "queryStatPageList",
137 data: encrypted
138 };
139 exportTable(params);
140 },
141 showDialog() {
142 this.exportDialogVisible = true;
143 },
144 formatTableDate(row, column) {
145 return formatDate.format(new Date(row.hdp_created), "yyyy-MM-dd hh:mm");
146 },
147 handleCurrentChange(val) {
148 this.page = val;
149 this.reqQuery();
150 },
151 reqQuery() {
152 let _this = this;
153 _this.listLoading = true;
154 let data = {
155 startIndex: (this.page - 1) * this.pageSize,
156 size: this.pageSize,
157 mobile_phone: this.filters.mobilePhone,
158 start_time: this.startTime,
159 end_time: this.endTime
160 };
161 as.queryFunV2("queryStatPageListAppb8vC", data, res => {
162 _this.page = 1;
163 _this.listLoading = false;
164 if (res) {
165 let reservationList = res[0];
166 let total = res[1][0].total;
167 _this.total = total;
168 _this.$set(_this.totalData, "reservationList", reservationList);
169 }
170 });
171 }
172 },
173 mounted() {
174 this.reqQuery();
175 },
176 created() {}
177 };
178 </script>
179
180 <style lang="scss" scoped>
181 .page-container {
182 padding: 20px;
183 }
184
185 .tool-wrap {
186 padding: 24px 0;
187 display: flex;
188 border-bottom: solid 1px #cccccc;
189 justify-content: space-between;
190 }
191
192 .toolbar {
193 display: flex;
194 justify-content: space-between;
195 .page-tips {
196 height: 32px;
197 line-height: 32px;
198 color: #333333;
199 }
200 }
201
202 .dialog {
203 .tips {
204 margin-right: 24px;
205 }
206 }
207 </style>
1
2 <template>
3 <div class="page-container">
4 <div class="tool-wrap">
5 <div>
6 <el-form :inline="true" :model="filters">
7 <el-form-item>
8 <el-input @change="changeHandler()" v-model="filters.mobilePhone" placeholder="请输入访问产品"></el-input>
9 </el-form-item>
10 <el-form-item>
11 <el-date-picker @change="changeHandler()" v-model="filters.date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions2">
12 </el-date-picker>
13 </el-form-item>
14 <el-form-item>
15 <el-button type="primary" v-on:click="reqQuery">查询</el-button>
16 </el-form-item>
17 </el-form>
18 </div>
19 <div>
20 <el-button class="reset-btn" @click="showDialog()">导出数据</el-button>
21 </div>
22 </div>
23
24 <el-table :data="totalData.reservationList" highlight-current-row v-loading="listLoading" style="width: 100%;">
25 <el-table-column prop="product_name" label="访问产品">
26 </el-table-column>
27 <el-table-column prop="hdp_created" :formatter="formatTableDate" label="访问时间">
28 </el-table-column>
29 <el-table-column prop="nickname" label="微信昵称">
30 </el-table-column>
31 <el-table-column label="微信头像">
32 <template slot-scope="scope">
33 <div class="avatar-wrap">
34 <img class="avatar" :src="scope.row.avatar" alt="">
35 </div>
36 </template>
37 </el-table-column>
38 <el-table-column prop="openid" label="openid">
39 </el-table-column>
40
41 </el-table>
42
43 <!--工具条-->
44 <el-col :span="24" class="toolbar">
45 <div class="page-tips">总共{{total}}条记录，每页{{pageSize}}条，总共{{pageNum}}页</div>
46 <el-pagination layout="prev, pager, next,jumper" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;">
47 </el-pagination>
48 </el-col>
49
50 <el-dialog class="dialog" center title="导出数据设定" :visible.sync="exportDialogVisible" :close-on-click-modal="false">
51 <span class="tips">导出日期</span>
52 <el-date-picker v-model="exportDate" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions2">
53 </el-date-picker>
54 <div slot="footer" class="dialog-footer">
55 <el-button style="width:120px;" @click.native="exportDialogVisible = false">取消</el-button>
56 <el-button style="width:120px;" type="primary" @click.native="exportHandler()">导出</el-button>
57 </div>
58 </el-dialog>
59
60 </div>
61 </template>
62
63 <script>
64 import { Base64 } from "js-base64";
65 import { exportTable } from "./../../api/api.js";
66 import { formatDate } from "./../../common/utils.js";
67
68 export default {
69 data() {
70 return {
71 exportDate: [
72 new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 7),
73 new Date().getTime()
74 ],
75 exportDialogVisible: false,
76 listLoading: false,
77 page: 1,
78 pageSize: 10,
79 total: 0,
80 totalData: {
81 reservationList: []
82 },
83 selDate: [
84 new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 7),
85 new Date()
86 ],
87 pickerOptions2: {
88 disabledDate(time) {
89 return time.getTime() > Date.now();
90 }
91 },
92 filters: {
93 mobilePhone: "",
94 date: ""
95 }
96 };
97 },
98 computed: {
99 pageNum() {
100 return Math.ceil(this.total / this.pageSize);
101 },
102 startTime() {
103 let date = this.filters.date;
104 let result = (date && date[0]) || "";
105 if (result) {
106 result = date[0].getTime();
107 }
108 return result;
109 },
110 endTime() {
111 let date = this.filters.date;
112 let result = (date && date[1]) || "";
113 if (result) {
114 result = date[1].getTime() + 1000 * 60 * 60 * 24;
115 }
116 return result;
117 }
118 },
119 methods: {
120 changeHandler() {
121 this.reqQuery();
122 },
123 exportHandler() {
124 let data = {
125 start_time: new Date(this.exportDate[0]).getTime(),
126 end_time: new Date(this.exportDate[1]).getTime() + 1000 * 60 * 60 * 24,
127 mobile_phone: "",
128 startIndex: 0,
129 size: 1000000
130 };
131 var encoder = HDP.getEncoder();
132 var encrypted = encoder.encode(JSON.stringify(data));
133 let params = {
134 appId: "df69fd8153f711ea8c527cd30aeb749e",
135 appKey: "5e19fbac20474d6587105eee7c624319",
136 func: "queryStatProductList",
137 data: encrypted
138 };
139 exportTable(params);
140 },
141 showDialog() {
142 this.exportDialogVisible = true;
143 },
144 formatTableDate(row, column) {
145 return formatDate.format(new Date(row.hdp_created), "yyyy-MM-dd hh:mm");
146 },
147 handleCurrentChange(val) {
148 this.page = val;
149 this.reqQuery();
150 },
151 reqQuery() {
152 let _this = this;
153 _this.listLoading = true;
154 let data = {
155 startIndex: (this.page - 1) * this.pageSize,
156 size: this.pageSize,
157 mobile_phone: this.filters.mobilePhone,
158 start_time: this.startTime,
159 end_time: this.endTime
160 };
161 as.queryFunV2("queryStatProductListAppb8vC", data, res => {
162 _this.page = 1;
163 _this.listLoading = false;
164 if (res) {
165 let reservationList = res[0];
166 let total = res[1][0].total;
167 _this.total = total;
168 _this.$set(_this.totalData, "reservationList", reservationList);
169 }
170 });
171 }
172 },
173 mounted() {
174 this.reqQuery();
175 },
176 created() {}
177 };
178 </script>
179
180 <style lang="scss" scoped>
181 .page-container {
182 padding: 20px;
183 }
184
185 .tool-wrap {
186 padding: 24px 0;
187 display: flex;
188 border-bottom: solid 1px #cccccc;
189 justify-content: space-between;
190 }
191
192 .toolbar {
193 display: flex;
194 justify-content: space-between;
195 .page-tips {
196 height: 32px;
197 line-height: 32px;
198 color: #333333;
199 }
200 }
201
202 .dialog {
203 .tips {
204 margin-right: 24px;
205 }
206 }
207 </style>