blog的后端代码
view | history | commit | commitdiff
inleft
2022-03-01 88f419df77ade235ea5e5e24be204842a24b7b33
commit | author | age
9bcb19 1 <template>
I 2   <div class="page-header-index-wide">
3     <a-row :gutter="24">
4       <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
5         <chart-card :loading="loading" title="总销售额" total="￥126,560">
6           <a-tooltip title="指标说明" slot="action">
7             <a-icon type="info-circle-o" />
8           </a-tooltip>
9           <div>
10             <trend flag="up" style="margin-right: 16px;">
11               <span slot="term">周同比</span>
12               12%
13             </trend>
14             <trend flag="down">
15               <span slot="term">日同比</span>
16               11%
17             </trend>
18           </div>
19           <template slot="footer">日均销售额<span>￥ 234.56</span></template>
20         </chart-card>
21       </a-col>
22       <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
23         <chart-card :loading="loading" title="访问量" :total="8846 | NumberFormat">
24           <a-tooltip title="指标说明" slot="action">
25             <a-icon type="info-circle-o" />
26           </a-tooltip>
27           <div>
28             <mini-area />
29           </div>
30           <template slot="footer">日访问量<span> {{ '1234' | NumberFormat }}</span></template>
31         </chart-card>
32       </a-col>
33       <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
34         <chart-card :loading="loading" title="支付笔数" :total="6560 | NumberFormat">
35           <a-tooltip title="指标说明" slot="action">
36             <a-icon type="info-circle-o" />
37           </a-tooltip>
38           <div>
39             <mini-bar />
40           </div>
41           <template slot="footer">转化率 <span>60%</span></template>
42         </chart-card>
43       </a-col>
44       <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
45         <chart-card :loading="loading" title="运营活动效果" total="78%">
46           <a-tooltip title="指标说明" slot="action">
47             <a-icon type="info-circle-o" />
48           </a-tooltip>
49           <div>
50             <mini-progress color="rgb(19, 194, 194)" :target="80" :percentage="78" height="8px" />
51           </div>
52           <template slot="footer">
53             <trend flag="down" style="margin-right: 16px;">
54               <span slot="term">同周比</span>
55               12%
56             </trend>
57             <trend flag="up">
58               <span slot="term">日环比</span>
59               80%
60             </trend>
61           </template>
62         </chart-card>
63       </a-col>
64     </a-row>
65     <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
66       <div class="salesCard">
67         <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
68           <div class="extra-wrapper" slot="tabBarExtraContent">
69             <div class="extra-item">
70               <a>今日</a>
71               <a>本周</a>
72               <a>本月</a>
73               <a>本年</a>
74             </div>
75             <a-range-picker :style="{width: '230px'}" />
76           </div>
77           <a-tab-pane loading="true" tab="销售额" key="1">
78             <a-row>
79               <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
80                 <bar :data="barData" title="销售额排行" />
81               </a-col>
82               <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
83                 <rank-list title="门店销售排行榜" :list="rankList"/>
84               </a-col>
85             </a-row>
86           </a-tab-pane>
87           <a-tab-pane tab="访问量" key="2">
88             <a-row>
89               <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
90                 <bar :data="barData2" title="销售额趋势" />
91               </a-col>
92               <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
93                 <rank-list title="门店销售排行榜" :list="rankList"/>
94               </a-col>
95             </a-row>
96           </a-tab-pane>
97         </a-tabs>
98       </div>
99     </a-card>
100     <div class="antd-pro-pages-dashboard-analysis-twoColLayout" :class="isDesktop() ? 'desktop' : ''">
101       <a-row :gutter="24" type="flex" :style="{ marginTop: '24px' }">
102         <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
103           <a-card :loading="loading" :bordered="false" title="线上热门搜索" :style="{ height: '100%' }">
104             <a-dropdown :trigger="['click']" placement="bottomLeft" slot="extra">
105               <a class="ant-dropdown-link" href="#">
106                 <a-icon type="ellipsis" />
107               </a>
108               <a-menu slot="overlay">
109                 <a-menu-item>
110                   <a href="javascript:;">操作一</a>
111                 </a-menu-item>
112                 <a-menu-item>
113                   <a href="javascript:;">操作二</a>
114                 </a-menu-item>
115               </a-menu>
116             </a-dropdown>
117             <a-row :gutter="68">
118               <a-col :xs="24" :sm="12" :style="{ marginBottom: ' 24px'}">
119                 <number-info :total="12321" :sub-total="17.1">
120                   <span slot="subtitle">
121                     <span>搜索用户数</span>
122                     <a-tooltip title="指标说明" slot="action">
123                       <a-icon type="info-circle-o" :style="{ marginLeft: '8px' }" />
124                     </a-tooltip>
125                   </span>
126                 </number-info>
127                 <!-- miniChart -->
128                 <div>
129                   <mini-smooth-area :style="{ height: '45px' }" :dataSource="searchUserData" :scale="searchUserScale" />
130                 </div>
131               </a-col>
132               <a-col :xs="24" :sm="12" :style="{ marginBottom: ' 24px'}">
133                 <number-info :total="2.7" :sub-total="26.2" status="down">
134                   <span slot="subtitle">
135                     <span>人均搜索次数</span>
136                     <a-tooltip title="指标说明" slot="action">
137                       <a-icon type="info-circle-o" :style="{ marginLeft: '8px' }" />
138                     </a-tooltip>
139                   </span>
140                 </number-info>
141                 <!-- miniChart -->
142                 <div>
143                   <mini-smooth-area :style="{ height: '45px' }" :dataSource="searchUserData" :scale="searchUserScale" />
144                 </div>
145               </a-col>
146             </a-row>
147             <div class="ant-table-wrapper">
148               <a-table
149                 row-key="index"
150                 size="small"
151                 :columns="searchTableColumns"
152                 :dataSource="searchData"
153                 :pagination="{ pageSize: 5 }"
154               >
155                 <span slot="range" slot-scope="text, record">
156                   <trend :flag="record.status === 0 ? 'up' : 'down'">
157                     {{ text }}%
158                   </trend>
159                 </span>
160               </a-table>
161             </div>
162           </a-card>
163         </a-col>
164         <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
165           <a-card class="antd-pro-pages-dashboard-analysis-salesCard" :loading="loading" :bordered="false" title="销售额类别占比" :style="{ height: '100%' }">
166             <div slot="extra" style="height: inherit;">
167               <!-- style="bottom: 12px;display: inline-block;" -->
168               <span class="dashboard-analysis-iconGroup">
169                 <a-dropdown :trigger="['click']" placement="bottomLeft">
170                   <a-icon type="ellipsis" class="ant-dropdown-link" />
171                   <a-menu slot="overlay">
172                     <a-menu-item>
173                       <a href="javascript:;">操作一</a>
174                     </a-menu-item>
175                     <a-menu-item>
176                       <a href="javascript:;">操作二</a>
177                     </a-menu-item>
178                   </a-menu>
179                 </a-dropdown>
180               </span>
181               <div class="analysis-salesTypeRadio">
182                 <a-radio-group defaultValue="a">
183                   <a-radio-button value="a">全部渠道</a-radio-button>
184                   <a-radio-button value="b">线上</a-radio-button>
185                   <a-radio-button value="c">门店</a-radio-button>
186                 </a-radio-group>
187               </div>
188             </div>
189             <h4>销售额</h4>
190             <div>
191               <!-- style="width: calc(100% - 240px);" -->
192               <div>
193                 <v-chart :force-fit="true" :height="405" :data="pieData" :scale="pieScale">
194                   <v-tooltip :showTitle="false" dataKey="item*percent" />
195                   <v-axis />
196                   <!-- position="right" :offsetX="-140" -->
197                   <v-legend dataKey="item"/>
198                   <v-pie position="percent" color="item" :vStyle="pieStyle" />
199                   <v-coord type="theta" :radius="0.75" :innerRadius="0.6" />
200                 </v-chart>
201               </div>
202             </div>
203           </a-card>
204         </a-col>
205       </a-row>
206     </div>
207   </div>
208 </template>
209 <script>
210 import moment from 'moment'
211 import { ChartCard, MiniArea, MiniBar, MiniProgress, RankList, Bar, Trend, NumberInfo, MiniSmoothArea } from '@/components'
212 import { mixinDevice } from '@/utils/mixin'
213 const barData = []
214 const barData2 = []
215 for (let i = 0; i < 12; i += 1) {
216   barData.push({
217     x: `${i + 1}月`,
218     y: Math.floor(Math.random() * 1000) + 200
219   })
220   barData2.push({
221     x: `${i + 1}月`,
222     y: Math.floor(Math.random() * 1000) + 200
223   })
224 }
225 const rankList = []
226 for (let i = 0; i < 7; i++) {
227   rankList.push({
228     name: '白鹭岛 ' + (i + 1) + ' 号店',
229     total: 1234.56 - i * 100
230   })
231 }
232 const searchUserData = []
233 for (let i = 0; i < 7; i++) {
234   searchUserData.push({
235     x: moment().add(i, 'days').format('YYYY-MM-DD'),
236     y: Math.ceil(Math.random() * 10)
237   })
238 }
239 const searchUserScale = [
240   {
241     dataKey: 'x',
242     alias: '时间'
243   },
244   {
245     dataKey: 'y',
246     alias: '用户数',
247     min: 0,
248     max: 10
249   }]
250 const searchTableColumns = [
251   {
252     dataIndex: 'MenuIndex.vue',
253     title: '排名',
254     width: 90
255   },
256   {
257     dataIndex: 'keyword',
258     title: '搜索关键词'
259   },
260   {
261     dataIndex: 'count',
262     title: '用户数'
263   },
264   {
265     dataIndex: 'range',
266     title: '周涨幅',
267     align: 'right',
268     sorter: (a, b) => a.range - b.range,
269     scopedSlots: { customRender: 'range' }
270   }
271 ]
272 const searchData = []
273 for (let i = 0; i < 50; i += 1) {
274   searchData.push({
275     index: i + 1,
276     keyword: `搜索关键词-${i}`,
277     count: Math.floor(Math.random() * 1000),
278     range: Math.floor(Math.random() * 100),
279     status: Math.floor((Math.random() * 10) % 2)
280   })
281 }
282 const DataSet = require('@antv/data-set')
283 const sourceData = [
284   { item: '家用电器', count: 32.2 },
285   { item: '食用酒水', count: 21 },
286   { item: '个护健康', count: 17 },
287   { item: '服饰箱包', count: 13 },
288   { item: '母婴产品', count: 9 },
289   { item: '其他', count: 7.8 }
290 ]
291 const pieScale = [{
292   dataKey: 'percent',
293   min: 0,
294   formatter: '.0%'
295 }]
296 const dv = new DataSet.View().source(sourceData)
297 dv.transform({
298   type: 'percent',
299   field: 'count',
300   dimension: 'item',
301   as: 'percent'
302 })
303 const pieData = dv.rows
304 export default {
305   name: 'Analysis',
306   mixins: [mixinDevice],
307   components: {
308     ChartCard,
309     MiniArea,
310     MiniBar,
311     MiniProgress,
312     RankList,
313     Bar,
314     Trend,
315     NumberInfo,
316     MiniSmoothArea
317   },
318   data () {
319     return {
320       loading: true,
321       rankList,
322       // 搜索用户数
323       searchUserData,
324       searchUserScale,
325       searchTableColumns,
326       searchData,
327       barData,
328       barData2,
329       //
330       pieScale,
331       pieData,
332       sourceData,
333       pieStyle: {
334         stroke: '#fff',
335         lineWidth: 1
336       }
337     }
338   },
339   created () {
340     setTimeout(() => {
341       this.loading = !this.loading
342     }, 1000)
343   }
344 }
345 </script>
346 <style lang="less" scoped>
347   .extra-wrapper {
348     line-height: 55px;
349     padding-right: 24px;
350     .extra-item {
351       display: inline-block;
352       margin-right: 24px;
353
354       a {
355         margin-left: 24px;
356       }
357     }
358   }
359   .antd-pro-pages-dashboard-analysis-twoColLayout {
360     position: relative;
361     display: flex;
362     display: block;
363     flex-flow: row wrap;
364   }
365   .antd-pro-pages-dashboard-analysis-salesCard {
366     height: calc(100% - 24px);
367     /deep/ .ant-card-head {
368       position: relative;
369     }
370   }
371   .dashboard-analysis-iconGroup {
372     i {
373       margin-left: 16px;
374       color: rgba(0,0,0,.45);
375       cursor: pointer;
376       transition: color .32s;
377       color: black;
378     }
379   }
380   .analysis-salesTypeRadio {
381     position: absolute;
382     right: 54px;
383     bottom: 12px;
384   }
385 </style>