|
|
@@ -211,7 +211,57 @@
|
|
|
</el-row>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <ECharts :options="chartOptions" />
|
|
|
+ <div class="overview" v-if="chartData3.length > 0">
|
|
|
+ <div class="title">{{ $t('operational.StoreRanking') }}</div>
|
|
|
+ <div class="content">
|
|
|
+ <el-row>
|
|
|
+ <div class="date-picker">
|
|
|
+ <el-form :inline="true" class="demo-form-inline">
|
|
|
+ <el-form-item label="时间范围">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="timeRange2"
|
|
|
+ value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
+ type="datetimerange"
|
|
|
+ style="width: 400px"
|
|
|
+ :start-placeholder="$t('orderList.startTime')"
|
|
|
+ :end-placeholder="$t('orderList.endTime')"
|
|
|
+ :picker-options="pickerOptions"
|
|
|
+ ></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="do-search">
|
|
|
+ <el-button icon="el-icon-refresh" size="small" @click="reset2">
|
|
|
+ {{ $t('operational.reset') }}
|
|
|
+ </el-button>
|
|
|
+ <el-button type="primary" icon="el-icon-search" size="small" @click="getChartsData2">
|
|
|
+ {{ $t('operational.query') }}
|
|
|
+ </el-button>
|
|
|
+ <span class="ex" @click="setDay2(3)">{{ $t('operational.lastThreeDays') }}</span>
|
|
|
+ <span class="ex" @click="setDay2(7)">{{ $t('operational.lastSevenDays') }}</span>
|
|
|
+ <span class="ex" @click="setDay2(15)">{{ $t('operational.lastFifteenDays') }}</span>
|
|
|
+ <span class="ex" @click="setDay2(30)">{{ $t('operational.lastThirtyDays') }}</span>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col class="item" :span="24">
|
|
|
+ <commonChart
|
|
|
+ v-if="chartData3.length > 0"
|
|
|
+ :title="chart3.title"
|
|
|
+ :color="chart3.color"
|
|
|
+ :chart-type="chart3.chartType"
|
|
|
+ :head-list="chart3.header"
|
|
|
+ :data-list="chartData3"
|
|
|
+ width="100%"
|
|
|
+ id="chart3"
|
|
|
+ height="400px"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <ECharts :options="chartOptions" /> -->
|
|
|
<!-- <div class="overview">
|
|
|
<div class="title">{{ $t('operational.dataRanking') }}</div>
|
|
|
<div class="content">
|
|
|
@@ -266,7 +316,7 @@
|
|
|
|
|
|
<script>
|
|
|
import { getNumDayTime } from '@/utils/fuint'
|
|
|
-import { getStatisticData } from '@/api/home'
|
|
|
+import { getStatisticData, getStatisticData2 } from '@/api/home'
|
|
|
import { getMainData, getTopData } from '@/api/statistic'
|
|
|
import commonChart from '../components/charts/index'
|
|
|
import ECharts from '@/components/eCharts/eCharts'
|
|
|
@@ -279,130 +329,6 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- // ECharts 配置示例
|
|
|
- chartOptions:{
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- axisPointer: {
|
|
|
- type: 'shadow'
|
|
|
- }
|
|
|
- },
|
|
|
- legend: {
|
|
|
- data: ['Forest', 'Steppe', 'Desert', 'Wetland']
|
|
|
- },
|
|
|
- toolbox: {
|
|
|
- show: true,
|
|
|
- orient: 'vertical',
|
|
|
- left: 'right',
|
|
|
- top: 'center',
|
|
|
- feature: {
|
|
|
- mark: { show: true },
|
|
|
- dataView: { show: true, readOnly: false },
|
|
|
- magicType: { show: true, type: ['line', 'bar', 'stack'] },
|
|
|
- restore: { show: true },
|
|
|
- saveAsImage: { show: true }
|
|
|
- }
|
|
|
- },
|
|
|
- xAxis: [
|
|
|
- {
|
|
|
- type: 'category',
|
|
|
- axisTick: { show: false },
|
|
|
- data: ['2012', '2013', '2014', '2015', '2016']
|
|
|
- }
|
|
|
- ],
|
|
|
- yAxis: [
|
|
|
- {
|
|
|
- type: 'value'
|
|
|
- }
|
|
|
- ],
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: 'Forest',
|
|
|
- type: 'bar',
|
|
|
- barGap: 0,
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- position: 'insideBottom',
|
|
|
- distance: 15,
|
|
|
- align: 'left',
|
|
|
- verticalAlign: 'middle',
|
|
|
- rotate: 90,
|
|
|
- formatter: '{c} {name|{a}}',
|
|
|
- fontSize: 16,
|
|
|
- rich: {
|
|
|
- name: {}
|
|
|
- }
|
|
|
- },
|
|
|
- emphasis: {
|
|
|
- focus: 'series'
|
|
|
- },
|
|
|
- data: [320, 332, 301, 334, 390]
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'Steppe',
|
|
|
- type: 'bar',
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- position: 'insideBottom',
|
|
|
- distance: 15,
|
|
|
- align: 'left',
|
|
|
- verticalAlign: 'middle',
|
|
|
- rotate: 90,
|
|
|
- formatter: '{c} {name|{a}}',
|
|
|
- fontSize: 16,
|
|
|
- rich: {
|
|
|
- name: {}
|
|
|
- }
|
|
|
- },
|
|
|
- emphasis: {
|
|
|
- focus: 'series'
|
|
|
- },
|
|
|
- data: [220, 182, 191, 234, 290]
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'Desert',
|
|
|
- type: 'bar',
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- position: 'insideBottom',
|
|
|
- distance: 15,
|
|
|
- align: 'left',
|
|
|
- verticalAlign: 'middle',
|
|
|
- rotate: 90,
|
|
|
- formatter: '{c} {name|{a}}',
|
|
|
- fontSize: 16,
|
|
|
- rich: {
|
|
|
- name: {}
|
|
|
- }
|
|
|
- },
|
|
|
- emphasis: {
|
|
|
- focus: 'series'
|
|
|
- },
|
|
|
- data: [150, 232, 201, 154, 190]
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'Wetland',
|
|
|
- type: 'bar',
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- position: 'insideBottom',
|
|
|
- distance: 15,
|
|
|
- align: 'left',
|
|
|
- verticalAlign: 'middle',
|
|
|
- rotate: 90,
|
|
|
- formatter: '{c} {name|{a}}',
|
|
|
- fontSize: 16,
|
|
|
- rich: {
|
|
|
- name: {}
|
|
|
- }
|
|
|
- },
|
|
|
- emphasis: {
|
|
|
- focus: 'series'
|
|
|
- },
|
|
|
- data: [98, 77, 101, 99, 40]
|
|
|
- }
|
|
|
- ]
|
|
|
-},
|
|
|
// 配置日期选择器的选项
|
|
|
pickerOptions: {
|
|
|
disabledDate(time) {
|
|
|
@@ -414,6 +340,7 @@ export default {
|
|
|
startTime: getNumDayTime(30),
|
|
|
endTime: getNumDayTime(0),
|
|
|
timeRange: [getNumDayTime(30), getNumDayTime(0)],
|
|
|
+ timeRange2: [getNumDayTime(30), getNumDayTime(0)],
|
|
|
mainData: {
|
|
|
userCount: 0,
|
|
|
totalUserCount: 0,
|
|
|
@@ -436,8 +363,15 @@ export default {
|
|
|
chartType: 'line',
|
|
|
header: [this.$t('operational.memberStatistics')]
|
|
|
},
|
|
|
+ chart3: {
|
|
|
+ title: this.$t('operational.StoreRanking'),
|
|
|
+ color: '#ff5b57',
|
|
|
+ chartType: 'bar',
|
|
|
+ header: [this.$t('operational.SalesStatistics')]
|
|
|
+ },
|
|
|
chartData1: [],
|
|
|
chartData2: [],
|
|
|
+ chartData3: [],
|
|
|
goodsList: [],
|
|
|
memberList: []
|
|
|
}
|
|
|
@@ -445,6 +379,7 @@ export default {
|
|
|
created() {
|
|
|
this.getMainData()
|
|
|
this.getChartsData()
|
|
|
+ this.getChartsData2()
|
|
|
this.getTopData()
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -454,6 +389,9 @@ export default {
|
|
|
this.endTime = ''
|
|
|
this.timeRange = [this.startTime, this.endTime]
|
|
|
},
|
|
|
+ reset2() {
|
|
|
+ this.timeRange2 = [this.startTime, this.endTime]
|
|
|
+ },
|
|
|
// 设置日期
|
|
|
setDay(day) {
|
|
|
this.startTime = getNumDayTime(day - 1)
|
|
|
@@ -462,6 +400,10 @@ export default {
|
|
|
this.getMainData()
|
|
|
this.getTopData()
|
|
|
},
|
|
|
+ setDay2(day) {
|
|
|
+ this.timeRange2 = [getNumDayTime(day - 1), getNumDayTime(0)]
|
|
|
+ this.getChartsData2()
|
|
|
+ },
|
|
|
// 查询首页数据
|
|
|
getMainData() {
|
|
|
this.loading = true
|
|
|
@@ -471,11 +413,34 @@ export default {
|
|
|
this.loading = false
|
|
|
})
|
|
|
},
|
|
|
+ getChartsData2(){
|
|
|
+ const app = this
|
|
|
+ app.loading = true
|
|
|
+ // 查询店铺排名数据
|
|
|
+ getStatisticData2({startTime:this.timeRange2[0],endTime:this.timeRange2[1]}).then((response) => {
|
|
|
+ // console.log(response)
|
|
|
+ // return;
|
|
|
+ const data = response.data
|
|
|
+
|
|
|
+ const dataList = []
|
|
|
+ for(let i = 0; i<data.dataY.length; i++){
|
|
|
+ dataList.push({name:data.dataX[i],value0:data.dataY[i]})
|
|
|
+ }
|
|
|
+
|
|
|
+ // data.labels.forEach(function (label, index) {
|
|
|
+ // const value1 = labelData1[index] ? labelData1[index] : 0
|
|
|
+ // const value2 = labelData2[index] ? labelData2[index] : 0
|
|
|
+ // dataList1.push({ name: label, value0: value1 })
|
|
|
+ // dataList2.push({ name: label, value0: value2 })
|
|
|
+ // })
|
|
|
+ app.chartData3 = dataList
|
|
|
+ app.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
// 查询统计数据
|
|
|
getChartsData() {
|
|
|
const app = this
|
|
|
app.loading = true
|
|
|
- // 近7日订单数量和活跃会员数量
|
|
|
getStatisticData({ tag: 'order,user_active' }).then((response) => {
|
|
|
const data = response.data
|
|
|
const labelData1 = data.data[0] ? data.data[0] : []
|
|
|
@@ -493,6 +458,7 @@ export default {
|
|
|
app.chartData2 = dataList2
|
|
|
app.loading = false
|
|
|
})
|
|
|
+
|
|
|
},
|
|
|
// 查询排行榜数据
|
|
|
getTopData() {
|
