kubbo/kengee-data-screen
1
0
Fork 0
Code Pull Requests Actions Packages Projects Releases Wiki Activity

多店完成

Browse Source
This commit is contained in:
aixianling
2024-07-08 12:15:10 +08:00
parent 4f43a9c248
commit 7acc025d8d
2 changed files with 99 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
src/assets/main.css
View File

@@ -1,112 +1,124 @@
#app { #app {
font-weight: normal; font-weight: normal;
} }
a, .green { a, .green {
text-decoration: none; text-decoration: none;
color: hsla(160, 100%, 37%, 1); color: hsla(160, 100%, 37%, 1);
transition: 0.4s; transition: 0.4s;
} }
@media (hover: hover) { @media (hover: hover) {
a:hover { a:hover {
background-color: hsla(160, 100%, 37%, 0.2); background-color: hsla(160, 100%, 37%, 0.2);
} }
} }
.AppSelect .el-input__inner { .AppSelect .el-input__inner {
background: linear-gradient(180deg, rgba(12, 53, 111, 0) 0%, #0C356F 100%); background: linear-gradient(180deg, rgba(12, 53, 111, 0) 0%, #0C356F 100%);
border: 1px solid #1760AE; border: 1px solid #1760AE;
border-radius: 0; border-radius: 0;
color: #fff; color: #fff;
} }
.el-table:before, .el-table:after { .el-table:before, .el-table:after {
background: transparent; background: transparent;
} }
.el-table .gutter { .el-table .gutter {
background-color: transparent !important; background-color: transparent !important;
border-color: transparent !important; border-color: transparent !important;
} }
.flex { .flex {
display: flex; display: flex;
} }
.fill { .fill {
flex: 1; flex: 1;
min-height: 0; min-height: 0;
min-width: 0; min-width: 0;
} }
.pointer { .pointer {
cursor: pointer; cursor: pointer;
} }
.grid { .grid {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
} }
.mb-8 { .mb-8 {
margin-bottom: 8px; margin-bottom: 8px;
} }
.mr-8 { .mr-8 {
margin-right: 8px; margin-right: 8px;
} }
.dv-scroll-board { .dv-scroll-board {
overflow: hidden; overflow: hidden;
} }
.dv-scroll-board .header { .dv-scroll-board .header {
align-items: center; align-items: center;
padding: 6px 0; padding: 6px 0;
} }
.dv-scroll-board .header-item, .tableHead .item { .dv-scroll-board .header-item, .tableHead .item {
height: initial !important; height: initial !important;
line-height: 17px !important; line-height: 17px !important;
font-weight: bold; font-weight: bold;
} }
.dv-scroll-board .ceil { .dv-scroll-board .ceil {
padding: 6px 10px !important; padding: 6px 10px !important;
} }
.dv-scroll-board .row-item { .dv-scroll-board .row-item {
overflow: hidden; overflow: hidden;
} }
.dv-scroll-board .ceil, .dv-scroll-board .header-item { .dv-scroll-board .ceil, .dv-scroll-board .header-item {
text-wrap: unset !important; text-wrap: unset !important;
word-break: break-all; word-break: break-all;
font-size: 12px; font-size: 12px;
line-height: 17px line-height: 17px
} }
.summary { .summary {
height: 30px; height: 30px;
align-items: center; align-items: center;
color: #66FFFF; color: #66FFFF;
background-image: linear-gradient(90deg, rgba(1, 196, 236, 0.5) 0%, rgba(1, 196, 236, 0.01) 100%); background-image: linear-gradient(90deg, rgba(1, 196, 236, 0.5) 0%, rgba(1, 196, 236, 0.01) 100%);
} }
.tableHead { .tableHead {
height: 30px; height: 30px;
align-items: center; align-items: center;
background-color: rgba(13, 48, 99, 0.6); background-color: rgba(13, 48, 99, 0.6);
} }
.summary .item, .tableHead .item { .summary .item, .tableHead .item {
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
padding: 0 10px; padding: 0 10px;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
line-height: 17px; line-height: 17px;
flex-shrink: 0; flex-shrink: 0;
}
.dialogTable {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 300px;
z-index: 9999;
background-color: #07193D;
box-shadow: #fff 0 0 20px;
} }

75
src/views/AppStoresTable.vue
View File

@@ -1,4 +1,5 @@
<script> <script>
const currentDate = "20240705"
export default { export default {
name: "AppStoresTable", name: "AppStoresTable",
label: "多店监控", label: "多店监控",
@@ -42,6 +43,8 @@ export default {
cameras: [], cameras: [],
storeKeyGoods: [], storeKeyGoods: [],
categorySales: [], categorySales: [],
aroundStock: [],
dialog: false,
columns: { columns: {
品类销售情况: [ 品类销售情况: [
{label: "品类", prop: "secondCategoryName"}, {label: "品类", prop: "secondCategoryName"},
@@ -58,8 +61,17 @@ export default {
{label: "库存数量", prop: "stockNum", width: 70}, {label: "库存数量", prop: "stockNum", width: 70},
{label: "剩余时间预计销售数量", prop: "preSaleNum"}, {label: "剩余时间预计销售数量", prop: "preSaleNum"},
{label: "提醒", custom: 1, width: 70, align: 'center', prop: "remind"}, {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})`},
] ]
}, },
} }
}, },
computed: { computed: {
@@ -95,10 +107,10 @@ export default {
.then(codes => Promise.all([this.getCameras(), this.getStoreKeyGoods(), this.getCategorySales()]).then(() => codes)) .then(codes => Promise.all([this.getCameras(), this.getStoreKeyGoods(), this.getCategorySales()]).then(() => codes))
.then((codes = []) => { .then((codes = []) => {
this.stores = codes?.map(storeCode => { this.stores = codes?.map(storeCode => {
const {storeCameraVOList = [], storeName} = this.cameras.find(e => e.storeCode == storeCode) || {} const {storeCameraVOList = [], storeName, longitude, latitude} = this.cameras.find(e => e.storeCode == storeCode) || {}
const keyGoods = this.storeKeyGoods.filter(e => e.storeCode == storeCode) || [] const keyGoods = this.storeKeyGoods.filter(e => e.storeCode == storeCode) || []
const categorySale = this.categorySales.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} return {storeCode, storeName, longitude, latitude, camera: storeCameraVOList.map(e => e.cameraUrl), keyGoods, categorySale}
}).filter(e => !!e.storeName) || [] }).filter(e => !!e.storeName) || []
}) })
}, },
@@ -121,7 +133,7 @@ export default {
}, },
getStoreKeyGoods() { getStoreKeyGoods() {
return $http.post("/data-boot/la/screen/multipleStoreBoard/storeKeyGoods", { return $http.post("/data-boot/la/screen/multipleStoreBoard/storeKeyGoods", {
type: "1", ...this.search, type: "1", ...this.search, currentDate
}).then(res => { }).then(res => {
if (res?.data) { if (res?.data) {
this.storeKeyGoods = res.data this.storeKeyGoods = res.data
@@ -144,23 +156,34 @@ export default {
this.$storeBoard.query.storeCode = sid this.$storeBoard.query.storeCode = sid
this.$router.push("/apps/AppStoreBoard") this.$router.push("/apps/AppStoreBoard")
}, },
getTableData(item, tag) { getTableData(item = {}, tag) {
const v = this const v = this
const datasource = { const datasource = {
重点单品情况: "keyGoods", 重点单品情况: item.keyGoods,
品类销售情况: "categorySale", 品类销售情况: item.categorySale,
周边库存情况: v.aroundStock,
} }
return { return {
headerBGC: 'rgba(13, 48, 99, 0.6)', headerBGC: 'rgba(13, 48, 99, 0.6)', rowNum: arguments?.[2] || 2,
oddRowBGC: window.evenRowBGC(), evenRowBGC: "transparent", oddRowBGC: window.evenRowBGC(), evenRowBGC: "transparent",
header: v.columns[tag].map(e => e.label), header: v.columns[tag].map(e => e.label),
columnWidth: v.columns[tag].map(e => e.width || "0;flex:1;min-width:0;"), columnWidth: v.columns[tag].map(e => e.width || "0;flex:1;min-width:0;"),
align: v.columns[tag].map(e => e.align || "left"), 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])), 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])) || [],
} }
}, },
getNearbyStores(evt) { openNearbyStores({rowIndex}, store) {
console.log(evt) const {thirdGoodsCode} = this.storeKeyGoods[rowIndex],
{storeCode, longitude, latitude} = store
return $http.post("/data-boot/la/screen/multipleStoreBoard/aroundStock", {
type: "1", ...this.search, storeCode, longitude, latitude, thirdGoodsCode, currentDate
}).then(res => {
if (res?.data) {
this.aroundStock = res.data
this.$nextTick(() => this.dialog = true)
}
})
} }
}, },
mounted() { mounted() {
@@ -170,7 +193,7 @@ export default {
</script> </script>
<template> <template>
<section class="AppStoresTable"> <section class="AppStoresTable" @click="dialog=false">
<el-carousel indicator-position="none" :height="height" :autoplay="search.changeWay==1"> <el-carousel indicator-position="none" :height="height" :autoplay="search.changeWay==1">
<el-carousel-item v-for="(group,i) in storeList" :key="i"> <el-carousel-item v-for="(group,i) in storeList" :key="i">
<div class="layout"> <div class="layout">
@@ -184,11 +207,12 @@ export default {
<div class="subTitle" v-text="'品类销售情况'"/> <div class="subTitle" v-text="'品类销售情况'"/>
<dv-scroll-board :config="getTableData(store, '品类销售情况')"/> <dv-scroll-board :config="getTableData(store, '品类销售情况')"/>
<div class="subTitle" v-text="'重点单品情况'"/> <div class="subTitle" v-text="'重点单品情况'"/>
<dv-scroll-board :config="getTableData(store, '重点单品情况')" @click="getNearbyStores"/> <dv-scroll-board :config="getTableData(store, '重点单品情况')" @click="v=>openNearbyStores(v,store)" @click.native.stop/>
</div> </div>
</div> </div>
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
<dv-scroll-board v-if="dialog" class="dialogTable" :config="getTableData({}, '周边库存情况',5)" @click.native.stop/>
</section> </section>
</template> </template>
@@ -197,34 +221,11 @@ export default {
width: 100%; width: 100%;
color: #fff; color: #fff;
box-sizing: border-box; box-sizing: border-box;
position: relative;
} }
.AppStoresTable .dv-scroll-board { .AppStoresTable .dv-scroll-board {
height: 200px; height: 130px;
}
.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 { .AppStoresTable .headerTitle {