From c11bce150d6e702f41ce247a0c62ea03401318f1 Mon Sep 17 00:00:00 2001
From: doum <doum>
Date: 星期一, 26 一月 2026 18:34:08 +0800
Subject: [PATCH] 经销商管理
---
admin/src/views/index.vue | 219 ++++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 179 insertions(+), 40 deletions(-)
diff --git a/admin/src/views/index.vue b/admin/src/views/index.vue
index 44acdb1..34ad636 100644
--- a/admin/src/views/index.vue
+++ b/admin/src/views/index.vue
@@ -11,22 +11,22 @@
<div class="data-summary">
<div class="data-item blue">
<div>{{tabName}}閿�鍞</div>
- <div class="data-num">锟{ (countData.totalPrice ||0).toFixed(2) }}</div>
+ <div class="data-num">锟{ (topData.price ||0).toFixed(2) }}</div>
</div>
<div class="parting"></div>
<div class="data-item yellow">
<div>{{tabName}}鎴愪氦璁㈠崟閲�</div>
- <div class="data-num">{{ countData.totalNum ||0}}</div>
+ <div class="data-num">{{ topData.num||0}}</div>
</div>
<div class="parting"></div>
<div class="data-item green">
<div>{{tabName}}閫�娆鹃噾棰�</div>
- <div class="data-num">锟{( countData.totalRefundPrice ||0).toFixed(2) }}</div>
+ <div class="data-num">锟{( topData.price1 ||0).toFixed(2) }}</div>
</div>
<div class="parting"></div>
<div class="data-item orange">
<div>{{tabName}}閫�娆捐鍗曢噺</div>
- <div class="data-num">{{ countData.totalRefundNum ||0 }}</div>
+ <div class="data-num">{{ topData.num1 ||0 }}</div>
</div>
<div class="parting"></div>
</div>
@@ -35,7 +35,7 @@
<div class="change-style">
<div class="count-left">
<div class="item-title">璁㈠崟閲忎笌閿�鍞瓒嬪娍</div>
- <div ref="orderCount" class="bottom"></div>
+ <div ref="orderCount" class="bottom" ></div>
</div>
<div class="count-right">
<div class="item-title">鍚勫搧绫婚攢鍞鍗犳瘮</div>
@@ -46,9 +46,9 @@
<div class="tab-title" style="display: flex;align-items: center; ">
<span style="">鎺掑悕鍒嗘瀽</span>
<div class="tab-item" style="margin-left: 20px;" >
- <el-date-picker style="width: 110px;height: 22px;margin-right: 10px;" v-model="searchForm.topYear" type="year"
+ <el-date-picker style="width: 110px;height: 22px;margin-right: 10px;" v-model="searchForm.topYear" type="year" @change="changeYearMonth"
clearable value-format="yyyy" format="yyyy'骞�'" placeholder="骞翠唤" ></el-date-picker>
- <el-date-picker style="width: 100px;height: 22px;" v-model="searchForm.topMonth" type="month"
+ <el-date-picker style="width: 100px;height: 22px;" v-model="searchForm.topMonth" type="month" @change="changeYearMonth"
clearable value-format="MM" format="MM'鏈�'" placeholder="鏈堜唤" ></el-date-picker>
</div>
</div>
@@ -69,7 +69,7 @@
<el-table-column prop="name" label="缁忛攢鍟嗗悕绉�" align="center" > </el-table-column>
<el-table-column prop="num" label="璁㈠崟閲�" align="center" > </el-table-column>
<el-table-column prop="price" label="閿�鍞锛堝厓锛�" align="center" ></el-table-column>
- <el-table-column prop="num2" label="浼氬憳鏁�" align="center" ></el-table-column>
+ <el-table-column prop="num1" label="浼氬憳鏁�" align="center" ></el-table-column>
</el-table>
</div>
</div>
@@ -138,27 +138,40 @@
<script>
import TableLayout from '@/layouts/TableLayout'
+import BaseTable from '@/components/base/BaseTable'
import * as echarts from 'echarts'
export default {
+ extends: BaseTable,
components: {
TableLayout
},
data () {
return {
- tabs2: [{ index: 0, name: '鎸夐攢閲�' }, { index: 1, name: '鎸夐攢鍞'}],
+ loading1: false,
+ loading2: false,
+ loading3: false,
+ tabs2: [{ index: 0, name: '鎸夐攢閲�' }, { index: 1, name: '鎸夐攢鍞' }],
tabs1: [{ index: 0, name: '鎸夎鍗曢噺' }, { index: 1, name: '鎸夐攢鍞' }, { index: 2, name: '鎸変細鍛樻暟' }],
tabs: [{ index: 0, name: '浠婃棩' }, { index: 1, name: '杩�7鏃�' }, { index: 2, name: '杩�30鏃�' }, { index: 3, name: '杩�12鏈�' }],
tabName: '浠婃棩',
tabIndex: 0,
tabIndex1: 0,
tabIndex2: 0,
- searchForm:{
- topYear:null,
- topMonth:null,
- topYear2:null,
+ searchForm: {
+ topYear: null,
+ topMonth: null,
+ topYear2: null
},
- topData:{
-
+ topData: {
+ num: 0,
+ num1: 0,
+ price: 0,
+ price1: 0,
+ dateStrList: [],
+ dataList: [],
+ dataList2: [],
+ cateList: [],
+ numList: []
},
countData: {
totalPrice: 1000,
@@ -166,10 +179,8 @@
totalRefundPrice: 10000,
totalRefundNum: 100
},
- dataList1:[],
- dataList2:[],
- orderCorderCount: [10, 10, 20, 10, 40, 10, 30],
- opinionData: ['3.20', '3.21', '3.22', '3.23', '3.24', '3.25', '3.26'],
+ dataList1: [],
+ dataList2: [],
myChart0: null,
myChart1: null
}
@@ -183,10 +194,54 @@
})
},
mounted () {
- this.initCountData()
+ this.initTopData()
+ this.initShopRankData()
+ this.initGoodsRankData()
},
methods: {
- initCountData () {
+ changeYearMonth(){
+ this.initGoodsRankData()
+ this.initShopRankData()
+ },
+ initShopRankData () {
+ this.loading2 = true
+ this.api.shopRankList10({ year: this.searchForm.topYear, month: this.searchForm.topMonth ,type:this.tabIndex1}).then(res => {
+ res = res || []
+ this.dataList1 = res
+ }).finally(() => {
+ this.loading2 = false
+ })
+ },
+ initGoodsRankData () {
+ this.loading3 = true
+ this.api.goodsRankList10({ year: this.searchForm.topYear, month: this.searchForm.topMonth ,type:this.tabIndex2}).then(res => {
+ res = res || []
+ this.dataList2 = res
+ }).finally(() => {
+ this.loading3 = false
+ })
+ },
+ initTopData () {
+ this.loading1 = true
+ this.initTopEcharts()
+ this.api.businessData({ dateType: this.tabIndex }).then(res => {
+ res = res || {}
+ res.num = res.num || 0
+ res.num1 = res.num1 || 0
+ res.price = res.price || 0
+ res.price1 = res.price1 || 0
+ res.dateStrList = res.dateStrList || []
+ res.datalist2 = res.datalist2 || []
+ res.dataList = res.dataList || []
+ res.cateList = res.cateList || []
+ this.topData = res
+ this.renderEchartOption0()
+ this.renderEchartOption2()
+ }).finally(() => {
+ this.loading1 = false
+ })
+ },
+ initTopEcharts () {
this.myChart0 = echarts.init(this.$refs.orderCount)
window.addEventListener('resize', () => {
this.myChart0.resize()
@@ -195,23 +250,46 @@
window.addEventListener('resize', () => {
this.myChart1.resize()
})
- this.renderOrderChange(this.myChart0)
- this.renderOrderChange(this.myChart1)
+ this.renderEchartOption0()
+ this.renderEchartOption2()
},
changeTab (item) {
- this.tabName = item.name
- this.tabIndex = item.index
+ if (this.loading1) {
+ return
+ }
+ if (item.index !== this.tabIndex) {
+ this.tabName = item.name
+ this.tabIndex = item.index
+ this.initTopData()
+ }
},
changeTab1 (item) {
- this.tabIndex1 = item.index
+ if (this.loading2) {
+ return
+ }
+ if (item.index !== this.tabIndex1) {
+ this.tabName = item.name
+ this.tabIndex1 = item.index
+ this.initShopRankData()
+ }
},
changeTab2 (item) {
- this.tabIndex2 = item.index
+ if (this.loading3) {
+ return
+ }
+ if (item.index !== this.tabIndex2) {
+ this.tabName = item.name
+ this.tabIndex2 = item.index
+ this.initGoodsRankData()
+ }
},
- renderOrderChange (chart) {
- chart.setOption({
+ renderEchartOption0 () {
+ this.myChart0.setOption({
tooltip: {
- trigger: 'axis'
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross'
+ }
},
grid: {
left: '3%',
@@ -221,23 +299,84 @@
},
toolbox: {
feature: {
-
}
+ },
+ legend: {
+ data: ['璁㈠崟閲�', '閿�鍞(鍏�)']
},
xAxis: {
type: 'category',
boundaryGap: false,
- data: this.opinionData
+ data: this.topData.dateStrList || []
},
- yAxis: {
- type: 'value'
+ yAxis: [
+ {
+ type: 'value',
+ name: '璁㈠崟閲�',
+ min: 0
+ },
+ {
+ type: 'value',
+ name: '閿�鍞(鍏�)',
+ min: 0
+ }
+ ],
+ series: [
+ {
+ name: '璁㈠崟閲�',
+ data: this.topData.dataList || [],
+ type: 'bar'
+ },
+ {
+ name: '閿�鍞(鍏�)',
+ yAxisIndex: 1,
+ data: this.topData.dataList2 || [],
+ type: 'line'
+ }
+ ]
+ })
+ },
+ renderEchartOption2 () {
+ const series = []
+ this.topData.cateList.forEach((item, index) => {
+ series.push( {
+ name: item.name,
+ type: 'bar',
+ stack: 'total',
+ barWidth: '60%',
+ label: {
+ // show: true
+ },
+ data: item.data||[]
+ })
+ })
+ this.myChart1.setOption({
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross'
+ }
},
- series: [{
- name: '璁㈠崟',
- type: 'line',
- stack: '鎬婚噺',
- data: this.orderCorderCount
- }]
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ toolbox: {
+ feature: {
+ }
+ },
+ legend: {
+ data: this.topData.cateList || []
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: this.topData.dateStrList || []
+ },
+ yAxis: { type: 'value' } ,
+ series
})
}
}
--
Gitblit v1.9.3