|
|
@@ -7,9 +7,20 @@
|
|
|
</el-select>
|
|
|
<!-- <el-input v-model="listQuery.search_name" type="text" size="big" placeholder="下单人昵称/姓名/手机号" style="width: 300px" class="mr15" @keyup.enter.native="getList" /> -->
|
|
|
<el-input v-model="listQuery.name" type="text" size="big" placeholder="收货人姓名/手机号" style="width: 250px" class="mr15" @keyup.enter.native="getList" />
|
|
|
- <div style="display:inline" class="mr15">
|
|
|
+ <el-cascader
|
|
|
+ v-model="areaAll"
|
|
|
+ :options="provinces"
|
|
|
+ :props="{ checkStrictly: true }"
|
|
|
+ style="width: 300px"
|
|
|
+ class="mr15"
|
|
|
+ placeholder="请选择地区查询"
|
|
|
+ size="big"
|
|
|
+ clearable
|
|
|
+ @change="changeCity"
|
|
|
+ />
|
|
|
+ <!-- <div style="display:inline" class="mr15">
|
|
|
<VDistpicker :province="listQuery.provice" :city="listQuery.city" :area="listQuery.area" @province="province => listQuery.provice = province.value" @city="city => listQuery.city = city.value" @area="area => listQuery.area = area.value" />
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
<el-date-picker
|
|
|
v-model="listQuery.time"
|
|
|
type="datetimerange"
|
|
|
@@ -34,7 +45,7 @@
|
|
|
<el-button type="primary" size="big" class="mr15" @click="toExport">导出</el-button>
|
|
|
</div>
|
|
|
<div class="echart-container">
|
|
|
- <report-chart id="report-chart" :seriesdata="seriesdata" />
|
|
|
+ <report-chart id="report-chart" :seriesdata="pieList" />
|
|
|
<div class="report-list">
|
|
|
<div v-for="(item, index) in seriesdata" :key="index" class="echart_list">
|
|
|
<span class="color" :style="'background-color:'+colorList[index % colorList.length]" />
|
|
|
@@ -44,16 +55,16 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="boxBot">
|
|
|
+ <!-- <div class="boxBot">
|
|
|
<div class="title">
|
|
|
历届活动订货金额变化曲线图
|
|
|
</div>
|
|
|
<el-select v-model="search_name" filterable placeholder="请输入客户姓名" size="big" style="width: 400px;margin-left: 30px;" class="mr15" @change="getName">
|
|
|
<el-option v-for="item in crownList" :key="item.id" :label="item.name" :value="item.name.match(/\d{11}/)[0]" />
|
|
|
</el-select>
|
|
|
- </div>
|
|
|
- <div id="main" style="width: 100%;height: 600px;" />
|
|
|
- <!-- <el-table
|
|
|
+ </div> -->
|
|
|
+ <!-- <div id="main" style="width: 100%;height: 600px;" /> -->
|
|
|
+ <el-table
|
|
|
:data="limitTable"
|
|
|
:header-cell-style="{ background: '#f8fbfc' }"
|
|
|
border
|
|
|
@@ -74,8 +85,11 @@
|
|
|
<template slot="header" slot-scope="{ column }">
|
|
|
{{ column.label }}({{ limitTable.reduce((t, cur) => t + Number(cur.price), 0) | parseMoney }}元)
|
|
|
</template>
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ {{ row.price | parseMoney }}
|
|
|
+ </template>
|
|
|
</el-table-column>
|
|
|
- </el-table> -->
|
|
|
+ </el-table>
|
|
|
<!-- 分页 -->
|
|
|
<!-- <pagination :total="seriesdata.length" :limit="listQuery.page_size" :page="listQuery.page_index" @pagination="changePagination" @update:limit="changePagination" /> -->
|
|
|
</div>
|
|
|
@@ -85,21 +99,25 @@
|
|
|
import { getList, GetCrownMoney } from '@/api/data/report'
|
|
|
import ReportChart from './components/ReportChart'
|
|
|
import { parseMoney } from '@/utils/index'
|
|
|
-import VDistpicker from 'v-distpicker'
|
|
|
-import { getCrown } from '@/api/order/common'
|
|
|
+// import VDistpicker from 'v-distpicker'
|
|
|
+// import { getCrown } from '@/api/order/common'
|
|
|
import { activityList } from '@/api/giftB'
|
|
|
import * as echarts from 'echarts'
|
|
|
+import provinces from '@/assets/json/area'
|
|
|
+import { eachReplaceKey } from '@/utils/city'
|
|
|
export default {
|
|
|
components: {
|
|
|
- ReportChart,
|
|
|
- VDistpicker
|
|
|
+ ReportChart
|
|
|
+ // VDistpicker
|
|
|
},
|
|
|
filters: {
|
|
|
parseMoney
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ areaAll: [],
|
|
|
loadingFull: false,
|
|
|
+ provinces: provinces,
|
|
|
search_name: '',
|
|
|
crownMoneyList: [],
|
|
|
listQuery: {
|
|
|
@@ -122,13 +140,14 @@ export default {
|
|
|
dataList: {},
|
|
|
seriesdata: [],
|
|
|
colorList: [
|
|
|
- '#FF9966', '#99CC99', '#99CCFF', '#66CC00', '#FF99CC',
|
|
|
+ '#f7797d', '#99CC99', '#99CCFF', '#66CC00', '#FF99CC',
|
|
|
'#66CCFF', '#CCCCFF', '#FF9966', '#FF6666', '#CC99CC',
|
|
|
'#FF9999', '#FFCCCC', '#66CC66', '#66CCCC', '#FFCCCC',
|
|
|
'#FF7373', '#33CCCC', '#FFB273', '#FF9640', '#39E639',
|
|
|
'#717DD7', '#35D4A4', '#FF9000', '#408DD2', '#679FD2'
|
|
|
],
|
|
|
- crownList: []
|
|
|
+ crownList: [],
|
|
|
+ pieList: []
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -140,6 +159,12 @@ export default {
|
|
|
watch: {
|
|
|
dataList(a, b) {
|
|
|
this.seriesdata = this.changeEchartData()
|
|
|
+ },
|
|
|
+ seriesdata: {
|
|
|
+ handler(newVal, oldVal) {
|
|
|
+ this.pieList = newVal.filter(item => item.value)
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
}
|
|
|
},
|
|
|
async created() {
|
|
|
@@ -148,13 +173,20 @@ export default {
|
|
|
this.getList()
|
|
|
})
|
|
|
/** */
|
|
|
- const { data: { list }} = await getCrown()
|
|
|
- this.crownList = list
|
|
|
+ // const { data: { list }} = await getCrown()
|
|
|
+ // this.crownList = list
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.drawLine()
|
|
|
+ this.provinces = eachReplaceKey(provinces)
|
|
|
+ // this.drawLine()
|
|
|
},
|
|
|
methods: {
|
|
|
+ changeCity() {
|
|
|
+ const len = this.areaAll.length
|
|
|
+ this.listQuery.provice = len > 0 ? this.areaAll[0] : ''
|
|
|
+ this.listQuery.city = len > 1 ? this.areaAll[1] : ''
|
|
|
+ this.listQuery.area = len > 2 ? this.areaAll[2] : ''
|
|
|
+ },
|
|
|
getName() {
|
|
|
const index = this.crownList.findIndex(item => item.mobile === this.search_name)
|
|
|
const id = this.crownList[index].id
|
|
|
@@ -326,6 +358,7 @@ export default {
|
|
|
}).then(res => {
|
|
|
this.loadingFull = false
|
|
|
if (res.code === 200) {
|
|
|
+ res.data.sort(this.sortBy('total'))
|
|
|
this.dataList = res.data
|
|
|
} else {
|
|
|
this.$message.error(res.message)
|
|
|
@@ -334,6 +367,11 @@ export default {
|
|
|
this.loadingFull = false
|
|
|
})
|
|
|
},
|
|
|
+ sortBy(i) {
|
|
|
+ return function(a, b) {
|
|
|
+ return b[i] - a[i] // a[i] - b[i]为正序，倒叙为b[i] - a[i]
|
|
|
+ }
|
|
|
+ },
|
|
|
changeEchartData() {
|
|
|
const outs = []
|
|
|
this.dataList.map(item => {
|
|
|
@@ -375,7 +413,7 @@ export default {
|
|
|
excel.export_json_to_excel({
|
|
|
header: Object.keys(list[0]),
|
|
|
data: list.map(listItem => Object.keys(list[0]).map(j => listItem[j])),
|
|
|
- filename: `${new Date().toLocaleDateString()}订单报表`,
|
|
|
+ filename: `${new Date().toLocaleDateString()}活动数据`,
|
|
|
bookType: 'xlsx'
|
|
|
})
|
|
|
})
|
zhangjin