|
@@ -10,19 +10,35 @@
|
|
|
<a-card size="small" :bordered="false" style="margin-bottom: 6px;">
|
|
|
<div style="padding:0 10px;color: #00aaff;cursor: pointer;" slot="extra" @click="showSetModal=true"><a-icon type="setting" /> 参数设置</div>
|
|
|
<div class="gard-box">
|
|
|
- <div>
|
|
|
+ <div v-for="(card,i) in getShelfLeveData" :key="i" @click="chooseCard(i)" :class="card.isSelect? 'chooseCard':''">
|
|
|
<a-card size="small">
|
|
|
- <h4>LV1</h4>
|
|
|
- <p>近30天销售金额 ≤ 1000元</p>
|
|
|
+ <h4>{{ card.levelName }}</h4>
|
|
|
+ <p v-if="card.levelName == 'LV1'">近{{ card.dayLimit }}天销售金额 ≤ {{ card.amountMax }}元</p>
|
|
|
+ <p v-if="card.levelName == 'LV2'">{{ card.amountMin }}元 < 近{{ card.dayLimit }}天销售金额 ≤ {{ card.amountMax }}元</p>
|
|
|
+ <p v-if="card.levelName == 'LV3'">{{ card.amountMin }}元 < 近{{ card.dayLimit }}天销售金额 ≤ {{ card.amountMax }}元</p>
|
|
|
+ <p v-if="card.levelName == 'LV4'">{{ card.amountMin }}元 < 近{{ card.dayLimit }}天销售金额 ≤ {{ card.amountMax }}元</p>
|
|
|
+ <p v-if="card.levelName == 'LV5'">{{ card.amountMin }}元 < 近{{ card.dayLimit }}天销售金额</p>
|
|
|
<div>
|
|
|
- <div><span>门店数量</span><span>21个</span></div>
|
|
|
- <div><span>累计销售金额</span><span>21元</span></div>
|
|
|
- <div><span>门店数量占比</span><span>21%</span></div>
|
|
|
- <div><span>累计销售金额占比</span><span>21%</span></div>
|
|
|
+ <div>
|
|
|
+ <span>门店数量</span>
|
|
|
+ <span>{{ card.shelfCount }}个</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>累计销售金额</span>
|
|
|
+ <span>{{ card.amountSum }}元</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>门店数量占比</span>
|
|
|
+ <span>{{ card.shelfRate }}%</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>累计销售金额占比</span>
|
|
|
+ <span>{{ card.amountRate }}%</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</a-card>
|
|
|
</div>
|
|
|
- <div>
|
|
|
+ <!-- <div>
|
|
|
<a-card size="small">
|
|
|
<h4>LV2</h4>
|
|
|
<p> 1000元 < 近30天销售金额 ≤ 2000元</p>
|
|
@@ -69,7 +85,7 @@
|
|
|
<div><span>累计销售金额占比</span><span>21%</span></div>
|
|
|
</div>
|
|
|
</a-card>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
</a-card>
|
|
|
<a-card size="small" :bordered="false">
|
|
@@ -116,15 +132,15 @@
|
|
|
</a-row>
|
|
|
</a-form>
|
|
|
</div>
|
|
|
- <div class="table-operator">
|
|
|
+ <div class="table-operator" v-if="statisticsObj">
|
|
|
<a-alert type="info">
|
|
|
<div slot="message" class="total-bar">
|
|
|
<div>
|
|
|
- 门店数量:<strong>399</strong>;
|
|
|
- 近30天货架取货数量合计:<strong>399</strong>;
|
|
|
- 近30天货架取货金额合计:<strong>26545</strong>;
|
|
|
- 近30天销售数量合计:<strong>26545</strong>;
|
|
|
- 近30天销售金额合计:<strong>26545</strong>;
|
|
|
+ 门店数量:<strong>{{ statisticsObj.shelfNum || 0 }}</strong>;
|
|
|
+ 近30天货架取货数量合计:<strong>{{ statisticsObj.totalShelfMaxQty }}</strong>;
|
|
|
+ 近30天货架取货金额合计:<strong>{{ statisticsObj.totalShelfMaxCost }}</strong>;
|
|
|
+ 近30天销售数量合计:<strong>{{ statisticsObj.saleOrderQty }}</strong>;
|
|
|
+ 近30天销售金额合计:<strong>{{ statisticsObj.saleOrderAmount || 0 }}</strong>;
|
|
|
</div>
|
|
|
</div>
|
|
|
</a-alert>
|
|
@@ -134,12 +150,15 @@
|
|
|
ref="table"
|
|
|
:style="{ height: tableHeight+84.5+'px', wordBreak: 'break-all' }"
|
|
|
size="small"
|
|
|
- rowKey="id"
|
|
|
+ :rowKey="(record,index)=>{return index}"
|
|
|
:columns="columns"
|
|
|
:data="loadData"
|
|
|
:scroll="{ y: tableHeight }"
|
|
|
:defaultLoadData="false"
|
|
|
bordered>
|
|
|
+ <div slot="area" slot-scope="text, record">
|
|
|
+ {{ record.dealerProvinceName }} {{ record.dealerCityName }}
|
|
|
+ </div>
|
|
|
</s-table>
|
|
|
</a-spin>
|
|
|
</a-card>
|
|
@@ -151,13 +170,15 @@
|
|
|
<script>
|
|
|
import { STable, VSelect } from '@/components'
|
|
|
import rangeDate from '@/views/common/rangeDate.vue'
|
|
|
-import { bondRecordByPage } from '@/api/boundRecord.js'
|
|
|
+import { queryShelfActiveUserPage, queryShelfLevelReport, exportShelfActiveUser, statistics } from '@/api/report.js'
|
|
|
import areaList from '@/views/common/areaList.js'
|
|
|
import dealerList from '@/views/common/dealerList.vue'
|
|
|
import storeList from '@/views/common/storeList.vue'
|
|
|
import { toThousands } from '@/libs/tools.js'
|
|
|
import { hdExportExcel } from '@/libs/exportExcel'
|
|
|
import setModal from './setModal.vue'
|
|
|
+// import { forEach } from 'core-js/js/array'
|
|
|
+// import { assign } from 'core-js/es7/object'
|
|
|
export default {
|
|
|
name: 'UserList',
|
|
|
components: { STable, VSelect, rangeDate, dealerList, storeList, areaList, setModal },
|
|
@@ -178,23 +199,26 @@ export default {
|
|
|
showModal: false,
|
|
|
itemData: null, // 编辑行数据
|
|
|
openStatusModal: false, // 货架状态弹窗初始状态
|
|
|
+ getShelfLeveData: [], // 货架等级数据
|
|
|
+ statisticsObj: null,
|
|
|
+ cardIndex: null,
|
|
|
// 表头
|
|
|
columns: [
|
|
|
{ title: '序号', dataIndex: 'no', width: '5%', align: 'center' },
|
|
|
- { title: '货架创建时间', dataIndex: 'createDate', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
|
|
|
+ { title: '货架创建时间', dataIndex: 'shelfCreateDate', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
|
|
|
{ title: '汽车修理厂', dataIndex: 'storeName', width: '15%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
|
|
|
{ title: '配件经销商', dataIndex: 'dealerName', width: '15%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
|
|
|
- { title: '所在地', dataIndex: 'createDate2', width: '11%', align: 'center', customRender: function (text) { return text || '--' } },
|
|
|
- { title: '货架状态', dataIndex: 'stateDictValue', width: '11%', align: 'center', customRender: function (text) { return text || '--' } },
|
|
|
- { title: '近30天货架取货数量', dataIndex: 'bondAmount', width: '11%', align: 'center', customRender: function (text) { return text && toThousands(text, 2) || '--' }, sorter: true },
|
|
|
- { title: '近30天货架取货金额', dataIndex: 'bondAmount', width: '11%', align: 'center', customRender: function (text) { return text && toThousands(text, 2) || '--' }, sorter: true },
|
|
|
- { title: '近30天销售数量', dataIndex: 'bondAmount', width: '11%', align: 'center', customRender: function (text) { return text && toThousands(text, 2) || '--' }, sorter: true },
|
|
|
- { title: '近30天销售金额', dataIndex: 'bondAmount', width: '11%', align: 'center', customRender: function (text) { return text && toThousands(text, 2) || '--' }, sorter: true }
|
|
|
+ { title: '所在地', scopedSlots: { customRender: 'area' }, width: '11%', align: 'center' },
|
|
|
+ { title: '货架状态', dataIndex: 'shelfStateDictValue', width: '11%', align: 'center', customRender: function (text) { return text || '--' } },
|
|
|
+ { title: '近30天货架取货数量', dataIndex: 'totalOrderQty', width: '11%', align: 'center', customRender: function (text) { return text && toThousands(text, 2) || '--' }, sorter: true },
|
|
|
+ { title: '近30天货架取货金额', dataIndex: 'totalOrderAmount', width: '11%', align: 'center', customRender: function (text) { return text && toThousands(text, 2) || '--' }, sorter: true },
|
|
|
+ { title: '近30天销售数量', dataIndex: 'saleOrderQty', width: '11%', align: 'center', customRender: function (text) { return text && toThousands(text, 2) || '--' }, sorter: true },
|
|
|
+ { title: '近30天销售金额', dataIndex: 'saleOrderAmount', width: '11%', align: 'center', customRender: function (text) { return text && toThousands(text, 2) || '--' }, sorter: true }
|
|
|
],
|
|
|
// 加载数据方法 必须为 Promise 对象
|
|
|
loadData: parameter => {
|
|
|
this.spinning = true
|
|
|
- return bondRecordByPage(Object.assign(parameter, this.queryParam)).then(res => {
|
|
|
+ return queryShelfActiveUserPage(Object.assign(parameter, this.queryParam)).then(res => {
|
|
|
let data
|
|
|
if (res.status == 200) {
|
|
|
data = res.data
|
|
@@ -204,6 +228,7 @@ export default {
|
|
|
_item.no = no + i + 1
|
|
|
}
|
|
|
}
|
|
|
+ this.getStatistics()
|
|
|
this.spinning = false
|
|
|
return data
|
|
|
})
|
|
@@ -236,12 +261,13 @@ export default {
|
|
|
exportFile () {
|
|
|
const _this = this
|
|
|
this.spinning = true
|
|
|
- hdExportExcel(exportShelfUseUser, this.queryParam, '用户分析(活跃用户)详情', function () {
|
|
|
+ hdExportExcel(exportShelfActiveUser, this.queryParam, '用户分析(活跃用户)详情', function () {
|
|
|
_this.spinning = false
|
|
|
})
|
|
|
},
|
|
|
// 重置
|
|
|
reset () {
|
|
|
+ this.cardIndex = null
|
|
|
this.queryParam = {
|
|
|
shelfName: '',
|
|
|
state: undefined
|
|
@@ -259,6 +285,52 @@ export default {
|
|
|
setTableH () {
|
|
|
const tableSearchH = this.$refs.tableSearch.offsetHeight
|
|
|
this.tableHeight = window.innerHeight - tableSearchH - 255
|
|
|
+ },
|
|
|
+ // 获取货架等级
|
|
|
+ getShelfLeve () {
|
|
|
+ const _this = this
|
|
|
+ queryShelfLevelReport().then(res => {
|
|
|
+ if (res.status == 200) {
|
|
|
+ res.data.forEach(item => {
|
|
|
+ item.isSelect = false
|
|
|
+ })
|
|
|
+ _this.getShelfLeveData = res.data
|
|
|
+ } else {
|
|
|
+ _this.$message.error(res.message)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取活跃用户统计数据
|
|
|
+ getStatistics () {
|
|
|
+ statistics({}).then(res => {
|
|
|
+ if (res.status == 200) {
|
|
|
+ this.statisticsObj = res.data
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.message)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 选中盒子
|
|
|
+ chooseCard (num) {
|
|
|
+ const flag = this.getShelfLeveData.every(item => {
|
|
|
+ return !item.isSelect
|
|
|
+ })
|
|
|
+ this.getShelfLeveData[num].isSelect = true
|
|
|
+ if (!flag) {
|
|
|
+ this.getShelfLeveData.forEach(item => {
|
|
|
+ item.isSelect = false
|
|
|
+ })
|
|
|
+ var { lvCode, dealerSnList, storeSnList, ...newObj } = this.queryParam
|
|
|
+ this.queryParam = newObj
|
|
|
+ } else {
|
|
|
+ const obj = {
|
|
|
+ lvCode: this.getShelfLeveData[num].levelName,
|
|
|
+ dealerSnList: this.getShelfLeveData[num].dealerSnList || [],
|
|
|
+ storeSnList: this.getShelfLeveData[num].storeSnList || []
|
|
|
+ }
|
|
|
+ Object.assign(this.queryParam, obj)
|
|
|
+ }
|
|
|
+ this.$refs.table.refresh(true)
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
@@ -273,6 +345,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
mounted () {
|
|
|
+ this.getShelfLeve()
|
|
|
if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
|
|
|
this.pageInit()
|
|
|
this.reset()
|
|
@@ -322,4 +395,8 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .chooseCard .ant-card-bordered{
|
|
|
+ border:1px solid #91d5ff !important;
|
|
|
+ background:#e6f7ff !important;
|
|
|
+ }
|
|
|
</style>
|