262 lines
8.4 KiB
Vue
262 lines
8.4 KiB
Vue
<script>
|
||
export default {
|
||
name: "AppStoresTable",
|
||
label: "多店监控",
|
||
components: {
|
||
HlsPlayer: {
|
||
render: (h) => h('div', {style: {width: '100%', height: '100%'}}),
|
||
props: {
|
||
url: {default: "https://open.ys7.com/v3/openlive/155715496_1_1.m3u8?expire=1747359002&id=712960386311127040&t=c9c6ad362940b1fb4ea7a736cec78980aa9ad1d27d6e3eddf75788c0564e9d7b&ev=100"}
|
||
},
|
||
mounted() {
|
||
const {Clappr} = window
|
||
if (Clappr && this.url) {
|
||
const player = new Clappr.Player({
|
||
source: this.url,
|
||
mute: true, //静音为true
|
||
width: '100%',
|
||
height: '100%',
|
||
// poster:'http://clappr.io/poster.png', //设置封面图
|
||
autoPlay: true,
|
||
disableCanAutoPlay: true, //禁用检测浏览器是否可以自动播放视频
|
||
hideMediaControl: true, //禁用媒体控制自动隐藏
|
||
hideMediaControlDelay: 100, //更改默认的媒体控件自动隐藏超时值
|
||
hideVolumeBar: true, //当嵌入的宽度小于320时，音量条将被隐藏
|
||
exitFullscreenOnEnd: false, //禁用播放器将在媒体结束时自动退出全屏显示，即播放结束后不会退出全屏
|
||
mediacontrol: {seekbar: "#000", buttons: "#FFF"}, //定义进度条和底部暂停等图标的颜色
|
||
events: {
|
||
onError: function () { //当播放出错时
|
||
alert("播放出错!")
|
||
},
|
||
}
|
||
});
|
||
player.attachTo(this.$el);
|
||
}
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
height: '600px',
|
||
stores: [],
|
||
cameras: [],
|
||
storeKeyGoods: [],
|
||
categorySales: [],
|
||
columns: {
|
||
品类销售情况: [
|
||
{label: "品类", prop: "secondCategoryName"},
|
||
{label: "销售额", prop: "currentSaleAmt", width: 70},
|
||
{label: "库存金额", prop: "currentStockAmt", width: 80},
|
||
{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: "saleNum", width: 70},
|
||
{label: "库存数量", prop: "stockNum", width: 70},
|
||
{label: "剩余时间预计销售数量", prop: "preSaleNum"},
|
||
{label: "提醒", custom: 1, width: 70, align: 'center', prop: "remind"},
|
||
]
|
||
},
|
||
}
|
||
},
|
||
computed: {
|
||
refs: v => v.$parent.getItemRefs(),
|
||
search: v => v.$multipleStoreBoard.search,
|
||
storeList: v => {
|
||
const list = []
|
||
let group = []
|
||
for (const e of v.stores) {
|
||
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() {
|
||
this.getData()
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
getData() {
|
||
const {$http, $waitFor} = window
|
||
console.log("筛选条件:", this.search)
|
||
$waitFor($http && this.search.groupCodeList.length > 0).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} = 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, camera: storeCameraVOList.map(e => e.cameraUrl), keyGoods, categorySale}
|
||
}).filter(e => !!e.storeName) || []
|
||
})
|
||
},
|
||
getStores() {
|
||
const {groupCodeList = []} = this.search
|
||
return $http.get(`/data-boot/ca/screen/scStoreInfo/group/${groupCodeList[0]}`).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) {
|
||
$glob.query = {storeCode: store.storeCode}
|
||
const sid = "9f299712-5549-413b-a93b-7c3e3b5bfadb"
|
||
$glob.group = sid
|
||
this.$storeBoard.query.storeCode = sid
|
||
this.$router.push("/apps/AppStoreBoard")
|
||
},
|
||
getTableData(item, tag) {
|
||
const v = this
|
||
const datasource = {
|
||
重点单品情况: "keyGoods",
|
||
品类销售情况: "categorySale",
|
||
}
|
||
return {
|
||
headerBGC: 'rgba(13, 48, 99, 0.6)',
|
||
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: item[datasource[tag]].map(e => v.columns[tag].map(column => column.custom == 1 ? `<div style="color:${e.preSaleNum > e.stockNum ? 'red' : '#fff'}">周边库存情况</div>` : e[column.prop])),
|
||
}
|
||
},
|
||
getNearbyStores(evt) {
|
||
console.log(evt)
|
||
}
|
||
},
|
||
mounted() {
|
||
this.height = `${this.$el.clientHeight}px`
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<section class="AppStoresTable">
|
||
<el-carousel indicator-position="none" :height="height" :autoplay="false">
|
||
<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)"/>
|
||
<el-carousel indicator-position="none" height="250px">
|
||
<el-carousel-item v-for="(url,j) in store.camera" :key="[i,j].join('_')">
|
||
<hls-player :url="url"/>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
<div class="subTitle" v-text="'品类销售情况'"/>
|
||
<dv-scroll-board :config="getTableData(store, '品类销售情况')"/>
|
||
<div class="subTitle" v-text="'重点单品情况'"/>
|
||
<dv-scroll-board :config="getTableData(store, '重点单品情况')" @click="getNearbyStores"/>
|
||
</div>
|
||
</div>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</section>
|
||
</template>
|
||
|
||
<style>
|
||
.AppStoresTable {
|
||
width: 100%;
|
||
color: #fff;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.AppStoresTable .dv-scroll-board {
|
||
height: 200px;
|
||
}
|
||
|
||
.tableHeader {
|
||
background: rgba(13, 48, 99, 0.6) !important;
|
||
color: #fff;
|
||
border-color: transparent !important;
|
||
}
|
||
|
||
.AppStoresTable .el-table tr {
|
||
background: transparent;
|
||
}
|
||
|
||
.AppStoresTable .el-table {
|
||
background: transparent;
|
||
border-color: transparent;
|
||
}
|
||
|
||
.AppStoresTable .el-table:before {
|
||
background: transparent;
|
||
}
|
||
|
||
.tableCell {
|
||
color: #fff;
|
||
border-color: transparent !important;
|
||
}
|
||
|
||
.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);
|
||
}
|
||
</style>
|