中试线
查看 | 历史 | 提交 | 提交对比
懒羊羊
2023-08-30 1ac2bc1590406d9babec036e154d8d08f34a6aa1
提交 | 用户 | 时间
1ac2bc 1 <!DOCTYPE html>
懒 2 <html>
3
4 <head>
5     <meta charset="utf-8"/>
6     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
8     <title>${constants.getSystemName()}</title>
9     <link rel="stylesheet" href="${ctxPath}/assets/common/libs/layui/css/layui.css?v=${constants.getReleaseVersion()}"/>
10     <link rel="stylesheet" href="${ctxPath}/assets/common/module/admin.css?v=${constants.getReleaseVersion()}"/>
11     <style>
12         .numberInfoSubTitle {
13             color: rgba(0, 0, 0, .45);
14             font-size: 14px;
15             height: 22px;
16             line-height: 22px;
17             overflow: hidden;
18             text-overflow: ellipsis;
19             white-space: nowrap;
20             word-break: break-all;
21         }
22
23         .numberInfoValue {
24             color: rgba(0, 0, 0, .85);
25             font-size: 24px;
26             margin-top: 10px;
27             height: 32px;
28             line-height: 32px;
29         }
30
31         .numberInfoSuffix {
32             color: rgba(0, 0, 0, .65);
33             font-size: 16px;
34             font-style: normal;
35             margin-left: 4px;
36             line-height: 32px;
37         }
38     </style>
39 </head>
40
41 <body>
42
43 <!-- 加载动画，移除位置在common.js中 -->
44 <div class="page-loading">
45     <div class="ball-loader">
46         <span></span><span></span><span></span><span></span>
47     </div>
48 </div>
49
50 <!-- 正文开始 -->
51 <div class="layui-fluid">
52     <div class="layui-row layui-col-space15">
53
54         <div class="layui-col-xs12 layui-col-md8">
55             <div class="layui-card" style="">
56                 <div class="layui-card-header">活动实时交易情况</div>
57                 <div class="layui-card-body">
58                     <div class="layui-row">
59                         <div class="layui-col-xs12 layui-col-sm6 layui-col-lg3 text-center">
60                             <div class="numberInfoSubTitle">今日交易总额</div>
61                             <div class="numberInfoValue">
62                                 124,543,233<em class="numberInfoSuffix">元</em>
63                             </div>
64                         </div>
65                         <div class="layui-col-xs12 layui-col-sm6 layui-col-lg3 text-center">
66                             <div class="numberInfoSubTitle">销售目标完成率</div>
67                             <div class="numberInfoValue">92%</div>
68                         </div>
69                         <div class="layui-col-xs12 layui-col-sm6 layui-col-lg3 text-center">
70                             <div class="numberInfoSubTitle">活动剩余时间</div>
71                             <div class="numberInfoValue">00:57:10</div>
72                         </div>
73                         <div class="layui-col-xs12 layui-col-sm6 layui-col-lg3 text-center">
74                             <div class="numberInfoSubTitle">每秒交易总额</div>
75                             <div class="numberInfoValue">
76                                 234<em class="numberInfoSuffix">元</em>
77                             </div>
78                         </div>
79                     </div>
80                     <div style="text-align: center;padding: 30px 0 10px 0;">
81                         <img src="https://gw.alipayobjects.com/zos/rmsportal/HBWnDEUXCnGnGrRfrpKa.png"
82                              style="max-height: 437px; max-width: 100%;" alt="map">
83                     </div>
84                 </div>
85             </div>
86         </div>
87
88         <div class="layui-col-xs12 layui-col-md4">
89             <div class="layui-card">
90                 <div class="layui-card-header">活动情况预测</div>
91                 <div class="layui-card-body" style="height: 240px;overflow: hidden;">
92                     <div id="hdqkyc" style="width: 100%;height: 260px;"></div>
93                 </div>
94             </div>
95             <div class="layui-card">
96                 <div class="layui-card-header">券核效率</div>
97                 <div class="layui-card-body" style="height: 222px;overflow: hidden;">
98                     <div id="hjxl" style="width: 100%;height: 280px;margin-top: -20px;"></div>
99                 </div>
100             </div>
101         </div>
102
103         <div class="layui-col-xs12">
104             <div class="layui-card">
105                 <div class="layui-card-body">
106                     <div class="layui-tab layui-tab-brief" lay-filter="tabZZT">
107                         <ul class="layui-tab-title">
108                             <li class="layui-this">销售额</li>
109                             <li>访问量</li>
110                         </ul>
111                         <div class="layui-tab-content">
112                             <div class="layui-tab-item layui-show">
113                                 <div class="layui-row layui-col-space30">
114                                     <div class="layui-col-xs12 layui-col-md8">
115                                         <div id="xse" style="height: 300px;margin-top: 20px;"></div>
116                                     </div>
117                                     <div class="layui-col-xs12 layui-col-md4">
118                                         <table class="layui-table" lay-skin="nob">
119                                             <colgroup>
120                                                 <col width="50">
121                                                 <col>
122                                                 <col width="96">
123                                             </colgroup>
124                                             <thead>
125                                             <tr style="background: none;color: #333;">
126                                                 <th colspan="3">门店销售额排名</th>
127                                             </tr>
128                                             </thead>
129                                             <tbody>
130                                             <tr>
131                                                 <td><span class="layui-badge layui-bg-cyan">1</span></td>
132                                                 <td>工专路 0 号店</td>
133                                                 <td>323,234</td>
134                                             </tr>
135                                             <tr>
136                                                 <td><span class="layui-badge layui-bg-cyan">2</span></td>
137                                                 <td>工专路 1 号店</td>
138                                                 <td>323,234</td>
139                                             </tr>
140                                             <tr>
141                                                 <td><span class="layui-badge layui-bg-cyan">3</span></td>
142                                                 <td>工专路 2 号店</td>
143                                                 <td>323,234</td>
144                                             </tr>
145                                             <tr>
146                                                 <td><span class="layui-badge layui-bg-gray">4</span></td>
147                                                 <td>工专路 4 号店</td>
148                                                 <td>323,234</td>
149                                             </tr>
150                                             <tr>
151                                                 <td><span class="layui-badge layui-bg-gray">5</span></td>
152                                                 <td>工专路 5 号店</td>
153                                                 <td>323,234</td>
154                                             </tr>
155                                             <tr>
156                                                 <td><span class="layui-badge layui-bg-gray">6</span></td>
157                                                 <td>工专路 6 号店</td>
158                                                 <td>323,234</td>
159                                             </tr>
160                                             <tr>
161                                                 <td><span class="layui-badge layui-bg-gray">7</span></td>
162                                                 <td>工专路 7 号店</td>
163                                                 <td>323,234</td>
164                                             </tr>
165                                             </tbody>
166                                         </table>
167                                     </div>
168                                 </div>
169                             </div>
170                             <div class="layui-tab-item">
171                                 <div class="layui-row layui-col-space30">
172                                     <div class="layui-col-xs12 layui-col-md8">
173                                         <div id="fwl" style="height: 300px;margin-top: 20px;"></div>
174                                     </div>
175                                     <div class="layui-col-xs12 layui-col-md4">
176                                         <table class="layui-table" lay-skin="nob">
177                                             <colgroup>
178                                                 <col width="50">
179                                                 <col>
180                                                 <col width="96">
181                                             </colgroup>
182                                             <thead>
183                                             <tr style="background: none;color: #333;">
184                                                 <th colspan="3">门店访问量排名</th>
185                                             </tr>
186                                             </thead>
187                                             <tbody>
188                                             <tr>
189                                                 <td><span class="layui-badge layui-bg-cyan">1</span></td>
190                                                 <td>工专路 0 号店</td>
191                                                 <td>323,234</td>
192                                             </tr>
193                                             <tr>
194                                                 <td><span class="layui-badge layui-bg-cyan">2</span></td>
195                                                 <td>工专路 1 号店</td>
196                                                 <td>323,234</td>
197                                             </tr>
198                                             <tr>
199                                                 <td><span class="layui-badge layui-bg-cyan">3</span></td>
200                                                 <td>工专路 2 号店</td>
201                                                 <td>323,234</td>
202                                             </tr>
203                                             <tr>
204                                                 <td><span class="layui-badge layui-bg-gray">4</span></td>
205                                                 <td>工专路 4 号店</td>
206                                                 <td>323,234</td>
207                                             </tr>
208                                             <tr>
209                                                 <td><span class="layui-badge layui-bg-gray">5</span></td>
210                                                 <td>工专路 5 号店</td>
211                                                 <td>323,234</td>
212                                             </tr>
213                                             <tr>
214                                                 <td><span class="layui-badge layui-bg-gray">6</span></td>
215                                                 <td>工专路 6 号店</td>
216                                                 <td>323,234</td>
217                                             </tr>
218                                             <tr>
219                                                 <td><span class="layui-badge layui-bg-gray">7</span></td>
220                                                 <td>工专路 7 号店</td>
221                                                 <td>323,234</td>
222                                             </tr>
223                                             </tbody>
224                                         </table>
225                                     </div>
226                                 </div>
227                             </div>
228                         </div>
229                     </div>
230                 </div>
231             </div>
232         </div>
233
234     </div>
235
236 </div>
237
238 <!-- js部分 -->
239 @/* 加入contextPath属性和session超时的配置 */
240 <script type="text/javascript">
241     var Feng = {
242         ctxPath: "${ctxPath}",
243         version: '${constants.getReleaseVersion()}'
244     };
245 </script>
246
247 <script type="text/javascript" src="${ctxPath}/assets/common/libs/layui/layui.js?v=${constants.getReleaseVersion()}"></script>
248 <script type="text/javascript" src="${ctxPath}/assets/common/js/common.js?v=${constants.getReleaseVersion()}"></script>
249 <script src="${ctxPath}/assets/common/libs/echarts/echarts.min.js?v=${constants.getReleaseVersion()}"></script>
250 <script src="${ctxPath}/assets/common/libs/echarts/echartsTheme.js?v=${constants.getReleaseVersion()}"></script>
251
252 <script>
253     layui.use(['layer', 'element'], function () {
254         var $ = layui.jquery;
255         var layer = layui.layer;
256         var element = layui.element;
257
258         // 渲染活动情况预测
259         var myCharts = echarts.init(document.getElementById('hdqkyc'), myEchartsTheme);
260         var mData = [50, 100, 150, 80, 120, 150, 200, 250, 220, 250, 300, 350, 400, 380, 440, 450, 500, 550, 500];
261         var option = {
262             title: {
263                 text: '有望达到预期',
264                 subtext: '目标评估',
265                 textStyle: {
266                     color: '#000'
267                 }
268             },
269             tooltip: {
270                 trigger: "axis"
271             },
272             xAxis: [{
273                 type: "category",
274                 boundaryGap: !1,
275                 data: ["06:00", "06:30", "07:00", "07:30", "08:00", "08:30", "09:00", "09:30", "10:00", "11:30", "12:00", "12:30", "13:00", "13:30", "14:00", "14:30", "15:00", "15:30", "16:00"]
276             }],
277             yAxis: [{
278                 type: "value"
279             }],
280             series: [{
281                 name: "金额",
282                 type: "line",
283                 smooth: !0,
284                 itemStyle: {
285                     normal: {
286                         areaStyle: {
287                             type: "default"
288                         }
289                     }
290                 },
291                 data: mData
292             }]
293         };
294         myCharts.setOption(option);
295
296         // 动态改变图表1数据
297         setInterval(function () {
298             for (var i = 0; i < mData.length; i++) {
299                 mData[i] += (Math.random() * 50 - 25);
300                 if (mData[i] < 0) {
301                     mData[i] = 0;
302                 }
303             }
304             myCharts.setOption({
305                 series: [{
306                     data: mData
307                 }]
308             });
309         }, 1000);
310
311         // 渲染券核效率图表
312         var myCharts2 = echarts.init(document.getElementById('hjxl'), myEchartsTheme);
313         var option2 = {
314             tooltip: {
315                 formatter: "{a} <br/>{b} : {c}%"
316             },
317             series: [
318                 {
319                     name: '券核效率',
320                     type: 'gauge',
321                     detail: {formatter: '{value}%'},
322                     data: [{value: 80, name: '跳出率'}]
323                 }
324             ]
325         };
326         myCharts2.setOption(option2);
327
328         // 渲染销售额图表
329         var myCharts3 = echarts.init(document.getElementById('xse'), myEchartsTheme);
330         var option3 = {
331             title: {
332                 text: '销售趋势',
333                 textStyle: {
334                     color: '#000',
335                     fontSize: 14
336                 }
337             },
338             tooltip: {},
339             grid: {
340                 left: '0',
341                 right: '0',
342                 bottom: '0',
343                 containLabel: true
344             },
345             xAxis: {
346                 data: ['1月', '2月', '3月', '4月', '6月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
347             },
348             yAxis: {},
349             series: [{
350                 type: 'bar',
351                 data: [726, 1013, 690, 892, 982, 570, 536, 546, 988, 1002, 206, 506],
352                 barMaxWidth: 45
353             }]
354         };
355         myCharts3.setOption(option3);
356
357         // 渲染访问量图表
358         var myCharts4 = echarts.init(document.getElementById('fwl'), myEchartsTheme);
359         var option4 = {
360             title: {
361                 text: '访问量趋势',
362                 textStyle: {
363                     color: '#000',
364                     fontSize: 14
365                 }
366             },
367             tooltip: {},
368             grid: {
369                 left: '0',
370                 right: '0',
371                 bottom: '0',
372                 containLabel: true
373             },
374             xAxis: {
375                 data: ['1月', '2月', '3月', '4月', '6月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
376             },
377             yAxis: {},
378             series: [{
379                 type: 'bar',
380                 data: [558, 856, 880, 1325, 982, 856, 655, 546, 988, 985, 568, 302],
381                 barMaxWidth: 45
382             }]
383         };
384         myCharts4.setOption(option4);
385
386         // 切换选项卡重新渲染
387         element.on('tab(tabZZT)', function (data) {
388             if (data.index == 0) {
389                 myCharts3.resize();
390             } else {
391                 myCharts4.resize();
392             }
393         });
394
395         // 窗口大小改变事件
396         window.onresize = function () {
397             myCharts.resize();
398             myCharts2.resize();
399             myCharts3.resize();
400             myCharts4.resize();
401         };
402
403     });
404 </script>
405 </body>
406
407 </html>