|
|
@@ -1,21 +1,49 @@
|
|
|
<template>
|
|
|
- <div class="app-content">
|
|
|
+ <div class="app-content" @click="dropdownShow = false">
|
|
|
<!-- sel -wrap -->
|
|
|
- <div class="sel-wrap"></div>
|
|
|
+ <div class="sel-wrap">
|
|
|
+ <dropdown-list :show="dropdownShow" :top="80" :width="750" :height="400">
|
|
|
+ <template v-slot:selectionbox>
|
|
|
+ <div class="sel-open-btn" @click.stop="dropdownShow = dropdownShow ? false : true">
|
|
|
+ <span>{{ typeName }}</span>
|
|
|
+ <i class="iconfont iconsanjiao_xia"></i>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-slot:dropdownbox>
|
|
|
+ <div class="sel-list-wrap">
|
|
|
+ <scroll-view scroll-y class="tui-dropdown-scroll">
|
|
|
+ <div class="sel-list" v-for="(item, index) in typeData" :key="index" @click.stop="selCategory(item)">{{ item.name }}</div>
|
|
|
+ </scroll-view>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </dropdown-list>
|
|
|
+ </div>
|
|
|
<!-- 收入统计 -->
|
|
|
<div class="module-com">
|
|
|
<div class="module-tit"></div>
|
|
|
<div class="module-det">
|
|
|
- <echart-trend ref="echartTrend" :chartData="echartTrend"></echart-trend>
|
|
|
+ <echart-trend ref="echartIncome" :chartData="incomeStat" color="#FC243A" yName="金额(¥)" serviceName="收入统计"></echart-trend>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 访问统计 -->
|
|
|
+ <div class="module-com">
|
|
|
+ <div class="module-tit"></div>
|
|
|
+ <div class="module-det">
|
|
|
+ <echart-trend ref="echartVisit" :chartData="visitStat" color="#3385FF" yName="数量(人)" serviceName="访问统计"></echart-trend>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<!-- 客户数统计 -->
|
|
|
+ <div class="module-com">
|
|
|
+ <div class="module-tit"></div>
|
|
|
+ <div class="module-det">
|
|
|
+ <echart-trend ref="echartUser" :chartData="userStat" color="#28C57D" yName="数量(人)" serviceName="客户数统计"></echart-trend>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<!-- 收入来源统计 -->
|
|
|
<div class="module-com">
|
|
|
<div class="module-tit">收入来源统计</div>
|
|
|
<div class="module-det">
|
|
|
- <echart-circle ref="echartCircle" :chartData="echartTrend"></echart-circle>
|
|
|
+ <echart-circle ref="echartCircle" :chartData="incomeSourceStat"></echart-circle>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 分类统计 -->
|
|
|
@@ -23,13 +51,13 @@
|
|
|
<div class="module-tit">分类统计</div>
|
|
|
<div class="module-det">
|
|
|
<div class="category-list-wrap">
|
|
|
- <div class="category-list" v-for="(item, index) in 6" :key="index">
|
|
|
- <div class="list-tit">1花束</div>
|
|
|
+ <div class="category-list" v-for="(item, index) in categoryStat.list" :key="index">
|
|
|
+ <div class="list-tit">{{ `${index + 1} ${item.name}` }}</div>
|
|
|
<div class="list-det">
|
|
|
<div class="progress-wrap">
|
|
|
- <div class="progress" :style="{ width: (index + 1) * 10 + '%' }"></div>
|
|
|
+ <div class="progress" :style="{ width: item.percentage + '%' }"></div>
|
|
|
</div>
|
|
|
- <div class="progress-num">7000</div>
|
|
|
+ <div class="progress-num">{{ item.num }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -37,9 +65,9 @@
|
|
|
</div>
|
|
|
<!-- 用途统计 -->
|
|
|
<div class="module-com">
|
|
|
- <div class="module-tit">分类统计</div>
|
|
|
+ <div class="module-tit">用途统计</div>
|
|
|
<div class="module-det">
|
|
|
- <echart-columnar ref="echartColumnar" :chartData="echartTrend"></echart-columnar>
|
|
|
+ <echart-columnar ref="echartColumnar" :chartData="useStat"></echart-columnar>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -49,35 +77,166 @@
|
|
|
import EchartTrend from '@/admin/home/components/echart-trend'
|
|
|
import EchartCircle from '@/admin/home/components/echart-circle'
|
|
|
import EchartColumnar from '@/admin/home/components/echart-columnar'
|
|
|
+import DropdownList from '@/components/plugin/dropdown-list'
|
|
|
+// api
|
|
|
+import { getStatList } from '@/api/statistics'
|
|
|
export default {
|
|
|
name: 'statistics',
|
|
|
components: {
|
|
|
EchartTrend,
|
|
|
EchartCircle,
|
|
|
- EchartColumnar
|
|
|
+ EchartColumnar,
|
|
|
+ DropdownList
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- echartTrend: {}
|
|
|
+ dropdownShow: false,
|
|
|
+ typeData: [
|
|
|
+ {
|
|
|
+ name: '最近7天',
|
|
|
+ value: 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '最近30天',
|
|
|
+ value: 2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '本月',
|
|
|
+ value: 3
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '上月',
|
|
|
+ value: 4
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '最近3月',
|
|
|
+ value: 30
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '最近半年',
|
|
|
+ value: 31
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '最近一年',
|
|
|
+ value: 32
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '今年',
|
|
|
+ value: 33
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ typeName: '最近7天',
|
|
|
+ type: 1,
|
|
|
+ // 收入统计
|
|
|
+ incomeStat: {},
|
|
|
+ // 访问量统计
|
|
|
+ visitStat: {},
|
|
|
+ // 客户数统计
|
|
|
+ userStat: {},
|
|
|
+ // 粉丝数统计
|
|
|
+ fansStat: {},
|
|
|
+ // 收入来源统计
|
|
|
+ incomeSourceStat: {},
|
|
|
+ // 分类统计
|
|
|
+ categoryStat: {},
|
|
|
+ // 用途统计
|
|
|
+ useStat: {}
|
|
|
}
|
|
|
},
|
|
|
onLoad() {},
|
|
|
mounted() {
|
|
|
- // setTimeout(() => {
|
|
|
this.init()
|
|
|
- // }, 1000)
|
|
|
},
|
|
|
methods: {
|
|
|
init() {
|
|
|
- this.$refs.echartTrend.initChart()
|
|
|
+ this._getData()
|
|
|
+ },
|
|
|
+ _getData() {
|
|
|
+ getStatList({ type: this.type }).then(res => {
|
|
|
+ if (!this.$util.isEmpty(res.data)) {
|
|
|
+ let data = res.data
|
|
|
+ data.categoryStat.list = data.categoryStat.list.map(e => {
|
|
|
+ e.percentage = ((e.num / data.categoryStat.total) * 100).toFixed(2)
|
|
|
+ return e
|
|
|
+ })
|
|
|
+
|
|
|
+ data.incomeSourceStat.list = data.incomeSourceStat.list.map(e => {
|
|
|
+ e.name = `${e.name} ${((e.num / data.incomeSourceStat.total) * 100).toFixed(2)}% ${e.num}`
|
|
|
+ e.value = e.num
|
|
|
+ return e
|
|
|
+ })
|
|
|
+
|
|
|
+ Object.keys(data).forEach((i, index) => {
|
|
|
+ if (i != 'categoryStat') {
|
|
|
+ data[i].nameArr = data[i].list.map(e => e.name)
|
|
|
+ data[i].numArr = data[i].list.map(e => e.num)
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ this.incomeStat = data.incomeStat
|
|
|
+ this.visitStat = data.visitStat
|
|
|
+ this.userStat = data.userStat
|
|
|
+ this.fansStat = data.fansStat
|
|
|
+ this.incomeSourceStat = data.incomeSourceStat
|
|
|
+ this.categoryStat = data.categoryStat
|
|
|
+ this.useStat = data.useStat
|
|
|
+
|
|
|
+ console.log(data)
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ this.initChart()
|
|
|
+ }, 100)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ initChart() {
|
|
|
+ this.$refs.echartIncome.initChart()
|
|
|
+ this.$refs.echartVisit.initChart()
|
|
|
+ this.$refs.echartUser.initChart()
|
|
|
this.$refs.echartCircle.initChart()
|
|
|
this.$refs.echartColumnar.initChart()
|
|
|
+ },
|
|
|
+ selCategory(item) {
|
|
|
+ this.typeName = item.name
|
|
|
+ this.type = item.value
|
|
|
+ this.dropdownShow = false
|
|
|
+ this._getData()
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+ .sel-wrap {
|
|
|
+ width: 100%;
|
|
|
+ height: 80px;
|
|
|
+ // background-color: ;
|
|
|
+ // 下拉框
|
|
|
+ .sel-open-btn {
|
|
|
+ width: 30%;
|
|
|
+ height: 80px;
|
|
|
+ line-height: 80px;
|
|
|
+ padding-left: 30px;
|
|
|
+ }
|
|
|
+ .iconfont {
|
|
|
+ color: $fontColor2;
|
|
|
+ }
|
|
|
+ .iconsanjiao_xia {
|
|
|
+ font-size: 24px;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ .sel-list-wrap {
|
|
|
+ background-color: #fff;
|
|
|
+ box-shadow: 6px 6px 10px #cccccc;
|
|
|
+ .sel-list {
|
|
|
+ padding: 20px 30px;
|
|
|
+ // border-top: 1px solid $borderColor;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tui-dropdown-scroll {
|
|
|
+ height: 400px;
|
|
|
+ }
|
|
|
+ }
|
|
|
.module-com {
|
|
|
background-color: #fff;
|
|
|
padding: 20px 16px 20px 14px;
|