256 lines
9.3 KiB
Vue
256 lines
9.3 KiB
Vue
<script>
|
|
export default {
|
|
name: "AppStoresTable",
|
|
label: "多店监控",
|
|
data() {
|
|
return {
|
|
height: '600px',
|
|
stores: [],
|
|
cameras: [],
|
|
storeKeyGoods: [],
|
|
categorySales: [],
|
|
aroundStock: [],
|
|
dialog: false,
|
|
columns: {
|
|
品类销售情况: [
|
|
{label: "品类", prop: "secondCategoryName"},
|
|
{label: "销售额", prop: "currentSaleAmt"},
|
|
{label: "库存金额", prop: "currentStockAmt"},
|
|
// {label: "同/环比销售额", prop: "compareSaleAmt", width: 70},
|
|
// {label: "同/环比库存金额", prop: "compareStockAmt", width: 70},
|
|
// {label: "前四周日均销售额", prop: "avg4WeekSaleAmt", width: 70},
|
|
],
|
|
重点单品情况: [
|
|
{label: "重点单品", prop: "name"},
|
|
// {label: "当日目标", prop: "targetNum", width: 70},
|
|
{label: "昨日销售数量", prop: "yesterdaySaleNum", width: 70},
|
|
{label: "上周同天销售数量", prop: "lastWeekSaleNum", width: 70},
|
|
{label: "今日销售数量", prop: "saleNum", width: 70},
|
|
{label: "现在库存数量", prop: "stockNum", width: 70},
|
|
{label: "剩余时间预计销售数量", prop: "preSaleNum"},
|
|
// {label: "提醒", custom: 1, width: 70, align: 'center', prop: "remind"},
|
|
],
|
|
周边库存情况: [
|
|
{label: "门店名称", prop: "storeName"},
|
|
{label: "直线距离", prop: "distance", width: 70},
|
|
{label: "库存数量", prop: "stockNum", width: 70},
|
|
{label: "销售数量", prop: "saleNum", width: 70},
|
|
{label: "剩余时间预计销售数量", prop: "preSaleNum", width: 70},
|
|
{label: "店长姓名/电话", prop: "shopMangerName", format: v => `${v.shopMangerName}(${v.shopownerPhone})`},
|
|
]
|
|
},
|
|
curI: 0,
|
|
curJ: {},
|
|
}
|
|
},
|
|
computed: {
|
|
search: v => v.$multipleStoreBoard.search,
|
|
storeList: v => {
|
|
const list = []
|
|
let group = []
|
|
for (const e of v.stores) {
|
|
v.$set(v.curJ, e.storeCode, 0)
|
|
if (group.length < 4) {
|
|
group.push(e)
|
|
} else {
|
|
list.push(group.reverse())
|
|
group = [e]
|
|
}
|
|
}
|
|
if (group.length > 0) {
|
|
list.push(group.reverse())
|
|
}
|
|
return list
|
|
},
|
|
},
|
|
watch: {
|
|
search: {
|
|
immediate: true, deep: true, handler(v) {
|
|
this.getData().then(() => {
|
|
if (v.interval > 0 && v.changeWay == '1') {
|
|
this.$refs.carousel?.$forceUpdate()
|
|
}
|
|
})
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
getData() {
|
|
const {$http, $waitFor} = window
|
|
const {type, compareDate} = this.search
|
|
console.log("筛选条件:", this.search)
|
|
return $waitFor($http && (type != 3 || compareDate)).then(() => this.getStores())
|
|
.then(codes => Promise.all([this.getCameras(), this.getStoreKeyGoods(), this.getCategorySales()]).then(() => codes))
|
|
.then((codes = []) => {
|
|
this.stores = codes?.map(storeCode => {
|
|
const {storeCameraVOList = [], storeName, longitude, latitude} = this.cameras.find(e => e.storeCode == storeCode) || {}
|
|
const keyGoods = this.storeKeyGoods.filter(e => e.storeCode == storeCode) || []
|
|
const categorySale = this.categorySales.filter(e => e.storeCode == storeCode) || []
|
|
return {storeCode, storeName, longitude, latitude, camera: [...new Set(storeCameraVOList.map(e => e.cameraUrl))], keyGoods, categorySale}
|
|
}).filter(e => !!e.storeName) || []
|
|
})
|
|
},
|
|
getStores() {
|
|
const {groupCodeList: [groupCode] = []} = this.search
|
|
return $http.get(`/data-boot/ca/screen/scStoreInfo/group${groupCode ? `/${groupCode}` : ""}`).then(res => {
|
|
if (res?.data) {
|
|
return res.data
|
|
}
|
|
})
|
|
},
|
|
getCameras() {
|
|
return $http.post("/data-boot/la/screen/multipleStoreBoard/storeCamera", {
|
|
type: "1", ...this.search, limit: 999
|
|
}).then(res => {
|
|
if (res?.data) {
|
|
this.cameras = res.data?.records || []
|
|
}
|
|
})
|
|
},
|
|
getStoreKeyGoods() {
|
|
return $http.post("/data-boot/la/screen/multipleStoreBoard/storeKeyGoods", {
|
|
type: "1", ...this.search,
|
|
}).then(res => {
|
|
if (res?.data) {
|
|
this.storeKeyGoods = res.data
|
|
}
|
|
})
|
|
},
|
|
getCategorySales() {
|
|
return $http.post("/data-boot/la/screen/multipleStoreBoard/categorySale", {
|
|
type: "1", ...this.search,
|
|
}).then(res => {
|
|
if (res?.data) {
|
|
this.categorySales = res.data
|
|
}
|
|
})
|
|
},
|
|
gotoDetail(store, i) {
|
|
this.$storeBoard.search.storeCode = store.storeCode
|
|
this.$multipleStoreBoard.carouselIndex = i
|
|
this.$marketBoard.screenId = 'a90522ef-869b-40ea-8542-d1fc9674a1e8'
|
|
},
|
|
getTableData(item = {}, tag) {
|
|
const v = this
|
|
const datasource = {
|
|
重点单品情况: item.keyGoods,
|
|
品类销售情况: item.categorySale,
|
|
周边库存情况: v.aroundStock,
|
|
}
|
|
return {
|
|
headerBGC: 'rgba(13, 48, 99, 0.6)', rowNum: arguments?.[2] || 2,
|
|
oddRowBGC: window.evenRowBGC(), evenRowBGC: "transparent",
|
|
header: v.columns[tag].map(e => e.label),
|
|
columnWidth: v.columns[tag].map(e => e.width || "0;flex:1;min-width:0;"),
|
|
align: v.columns[tag].map(e => e.align || "left"),
|
|
data: datasource[tag]?.map(e => v.columns[tag].map(column => column.custom == 1 ? `<div class="pointer" style="color:${e.preSaleNum > e.stockNum ? 'red' : '#fff'}">周边库存</div>` :
|
|
column.format ? column.format(e) : e[column.prop])) || [],
|
|
}
|
|
},
|
|
openNearbyStores({thirdGoodsCode}, store) {
|
|
const {storeCode, longitude, latitude} = store
|
|
return $http.post("/data-boot/la/screen/multipleStoreBoard/aroundStock", {
|
|
type: "1", ...this.search, storeCode, longitude, latitude, thirdGoodsCode,
|
|
}).then(res => {
|
|
if (res?.data) {
|
|
this.aroundStock = res.data
|
|
this.$nextTick(() => this.dialog = true)
|
|
}
|
|
})
|
|
},
|
|
handleHotKey(e) {
|
|
if (e.code == "ArrowLeft") {
|
|
this.$refs.carousel.prev()
|
|
} else if (e.code == "ArrowRight") {
|
|
this.$refs.carousel.next()
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.height = `${this.$el.clientHeight - 30}px`
|
|
document.onkeyup = this.handleHotKey
|
|
},
|
|
beforeDestroy() {
|
|
document.onkeyup = null
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="AppStoresTable" @click="dialog=false">
|
|
<el-carousel ref="carousel" indicator-position="outside" :height="height" :autoplay="search.changeWay==1" @change="v=>curI=(v||0)" :interval="search.interval"
|
|
:initial-index="$multipleStoreBoard.carouselIndex">
|
|
<el-carousel-item v-for="(group,i) in storeList" :key="i">
|
|
<div class="layout">
|
|
<div class="store" v-for="store in group" :key="store.storeCode">
|
|
<div class="headerTitle" v-text="store.storeName" @click="gotoDetail(store,i)"/>
|
|
<el-carousel indicator-position="none" height="250px" @change="v=>$set(curJ,store.storeCode,v||0)" :autoplay="false">
|
|
<el-carousel-item v-for="(url,j) in store.camera" :key="[i,j].join('_')">
|
|
<hls-player v-if="`${i}_${j}`==`${curI}_${curJ[store.storeCode]}`" :id="`hls_player_${store.storeCode}_${i}_${j}`" :url="url"/>
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
<div class="subTitle" v-text="'品类销售情况'"/>
|
|
<scroll-table :table-data="store.categorySale" :columns="columns['品类销售情况']" :config="{height:'145px'}"/>
|
|
<!--<dv-scroll-board :config="getTableData(store, '品类销售情况')"/>-->
|
|
<div class="subTitle" v-text="'重点单品情况'"/>
|
|
<scroll-table :table-data="store.keyGoods" :columns="columns['重点单品情况']" :config="{height:'265px'}" @click="v=>openNearbyStores(v,store)" @click.native.stop/>
|
|
<!--<dv-scroll-board :config="getTableData(store, '重点单品情况')" @click="v=>openNearbyStores(v,store)" @click.native.stop/>-->
|
|
</div>
|
|
</div>
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
<div class="dialogTable" v-if="dialog" @click.stop>
|
|
<scroll-table :table-data="aroundStock" :columns="columns['周边库存情况']"/>
|
|
</div>
|
|
<!--<dv-scroll-board v-if="dialog" class="dialogTable" :config="getTableData({}, '周边库存情况',5)" @click.native.stop/>-->
|
|
</section>
|
|
</template>
|
|
|
|
<style>
|
|
.AppStoresTable {
|
|
width: 100%;
|
|
color: #fff;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
}
|
|
|
|
.AppStoresTable .headerTitle {
|
|
height: 48px;
|
|
padding: 8px 0 8px 38px;
|
|
margin-bottom: 24px;
|
|
box-sizing: border-box;
|
|
line-height: 32px;
|
|
background-image: url("http://10.0.97.209/img/kengee/kengee4.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.AppStoresTable .subTitle {
|
|
line-height: 20px;
|
|
width: fit-content;
|
|
margin: 24px auto 12px;
|
|
background-image: url("http://10.0.97.209/img/kengee/kengee5.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 2px;
|
|
background-position: center bottom;
|
|
}
|
|
|
|
.AppStoresTable .layout {
|
|
display: flex;
|
|
gap: 24px;
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.AppStoresTable .store {
|
|
width: calc(25% - 18px);
|
|
}
|
|
|
|
.AppStoresTable .el-carousel__arrow {
|
|
font-size: 24px;
|
|
width: 48px;
|
|
height: 48px;
|
|
background-color: rgba(31, 45, 61, .6);
|
|
}
|
|
</style>
|