Compare commits

...

7 Commits

Author SHA1 Message Date
3ee1bb3b9a Merge remote-tracking branch 'origin/main'
# Conflicts:
#	src/views/AppMultipleStoreBoardFilter.vue
2025-02-11 09:30:18 +08:00
2663ca9e73 refactor(src/views): 更新 AppMultipleStoreBoardFilter 组件中的日期逻辑
- 将获取当前日期的逻辑从"减去7天"修改为"当前日期"
- 通过注释保留原始逻辑以便参考
2025-02-11 09:25:00 +08:00
aixianling
c2743d926e featMultiple(AppStoreBoardFilter): 添加一键归位功能
- 在组件中添加 reset 方法,用于重置多店看板的位置
- 在模板中添加一键归位按钮,点击时调用 reset 方法
- 优化了组件初始化时的数据加载逻辑
2025-01-07 16:08:35 +08:00
aixianling
4403ec5322 feat(inject): 实现库存数量小于等于0时红色闪烁提醒- 在 main.css 中添加了 flashOpacity 动画样式
- 在 inject.js 中实现了 rowClassName 方法,为符合条件的行添加 flash-opacity 类
- 在多个 Vue 组件中为库存数量列添加了 flash: 1 属性,以触发闪烁效果
2025-01-07 15:19:00 +08:00
aixianling
9c6248e5df 优化搜索状态处理及数据请求节流 2024-11-29 18:03:26 +08:00
aixianling
1845f6cc9a 优化搜索状态同步及数据刷新逻辑 2024-11-27 15:13:20 +08:00
aixianling
a127b3ea47 添加时间戳字段以同步搜索状态 2024-11-27 10:55:44 +08:00
8 changed files with 105 additions and 25 deletions

View File

@@ -249,3 +249,20 @@ a, .green {
.AppSubTitle .el-select {
width: 120px;
}
@keyframes flashOpacity {
0%, 100% {
opacity: 1; /* 完全不透明 */
}
50% {
opacity: 0; /* 完全透明 */
}
}
/* 应用动画到元素 */
.flash-opacity {
.cell > span {
animation: flashOpacity 1s infinite; /* 动画名称、持续时间、重复次数 */
color: red
}
}

View File

@@ -67,18 +67,18 @@ Vue.prototype.$marketBoard = Vue.observable({
screenId: '5b1849ac-4fc3-451a-844c-3362b47341ef',
thirdGoods: {},
saleHour: undefined,
search: {"groupCodeList": [], "currentDate": "20240701", "compareDate": "20240630", "hourNum": "18"}
search: {"groupCodeList": [], "currentDate": "20240701", "compareDate": "20240630", "hourNum": "18", t: null}
})
Vue.prototype.$multipleStoreBoard = Vue.observable({
carouselIndex: 0,
search: {"groupCodeList": [], "hourNum": "", type: "1"}
search: {"groupCodeList": [], "hourNum": "", type: "1", t: null}
})
Vue.prototype.$storeBoard = Vue.observable({
currentDate: "20240705",
dialog: false,
aroundStock: [],
query: {},
search: {}
search: {t: null}
})
Vue.component("HlsPlayer", {
render: (h) => h('div', {style: {width: '100%', height: '100%'}}),
@@ -135,6 +135,10 @@ Vue.component("scrollTable", {
return h('el-table', {
props: {
headerCellClassName: 'tableHeader', cellClassName: 'tableCell', stripe: !0, height: '100%',
rowClassName({row}) {
const item = columns.find(e => e.flash == 1)
return item?.prop && row[item.prop] <= 0 ? 'flash-opacity' : ''
},
...config, data: tableData,
}, class: 'scrollTable',
on: {

View File

@@ -23,7 +23,7 @@ export default {
{label: "昨日销售数量", prop: "yesterdaySaleNum", width: 70},
{label: "上周同天销售数量", prop: "lastWeekSaleNum", width: 70},
{label: "今日销售数量", prop: "saleNum", width: 70},
{label: "现在库存数量", prop: "stockNum", width: 70},
{label: "现在库存数量", prop: "stockNum", width: 70, flash: 1},
{label: "剩余时间预计销售数量", prop: "preSaleNum"},
// {label: "提醒", custom: 1, width: 70, align: 'center', prop: "remind"},
],

View File

@@ -8,7 +8,7 @@ export default {
columns: [
{label: "重点单品", prop: "goodsName"},
{label: "销售数量", prop: "saleNum", width: 70},
{label: "库存数量", prop: "stockNum", width: 70},
{label: "库存数量", prop: "stockNum", width: 70, flash: 1},
{label: "销售目标", prop: "targetSaleNum", width: 70},
{label: "销售达成", prop: "saleAchieveRate"},
],

View File

@@ -24,6 +24,13 @@ export default {
}
})
},
reset() {
$http.post("/data-boot/la/screen/multipleStoreBoard/move").then(res => {
if (res?.data) {
this.$message.success("已重置")
}
})
}
},
watch: {
'form.interval'(v) {
@@ -41,7 +48,8 @@ export default {
setTimeout(() => {
const {dayjs} = window
const hourNum = new Date().getHours()+1, groupCodeList = "", interval = 60000
const currentDate = dayjs().subtract(7, 'day').format("YYYYMMDD")
// const currentDate = dayjs().subtract(7, 'day').format("YYYYMMDD")
const currentDate = dayjs().format("YYYYMMDD")
this.form = {hourNum, groupCodeList, type: "1", changeWay: "1", currentDate, interval}
this.$set(this.$multipleStoreBoard, 'search', {hourNum, groupCodeList: [], type: "1", changeWay: "1", categoryId: "", currentDate, interval})
}, 500)
@@ -52,6 +60,9 @@ export default {
<template>
<el-form class="AppMultipleStoreBoardFilter flex" size="small" label-width="70px">
<el-form-item label-width="0">
<el-button @click="reset">一键归位</el-button>
</el-form-item>
<el-form-item label="品类">
<el-select v-model="form.categoryId" @change="v=>$multipleStoreBoard.search.categoryId=v" clearable placeholder="全部">
<el-option v-for="item in dicts.品类" :key="item.value" :label="item.label" :value="item.value"/>

View File

@@ -1,14 +1,14 @@
<script>
const screens = [
{id: '5b1849ac-4fc3-451a-844c-3362b47341ef', label: '市场看板', bg: 'http://10.0.97.209/img/kengee/kengee16.png'},
{id: '7d26854c-769d-418b-9bae-5c1105e716a9', label: '多店监控', bg: 'http://10.0.97.209/img/kengee/kengee17.png'},
{id: 'a90522ef-869b-40ea-8542-d1fc9674a1e8', label: '单店监控', bg: 'http://10.0.97.209/img/kengee/kengee18.png'},
{id: '5b1849ac-4fc3-451a-844c-3362b47341ef', label: '市场看板', bg: 'http://10.0.97.209/img/kengee/kengee16.png', ob: '$marketBoard'},
{id: '7d26854c-769d-418b-9bae-5c1105e716a9', label: '多店监控', bg: 'http://10.0.97.209/img/kengee/kengee17.png', ob: '$multipleStoreBoard'},
{id: 'a90522ef-869b-40ea-8542-d1fc9674a1e8', label: '单店监控', bg: 'http://10.0.97.209/img/kengee/kengee18.png', ob: '$storeBoard'},
]
export default {
name: "AppNavbar",
label: "标题栏",
data() {
return {screens}
return {screens, timer: null}
},
computed: {
groupId: v => v.$marketBoard.screenId,
@@ -26,6 +26,16 @@ export default {
}
}
},
},
created() {
this.timer = setInterval(() => {
const screen = this.screens.find(e => e.id === this.groupId)
this.$set(this[screen.ob].search, 't', Date.now())
console.log(screen.ob, this[screen.ob].search.t)
}, 5000)
},
destroyed() {
this.timer && clearInterval(this.timer)
}
}
</script>

View File

@@ -9,7 +9,7 @@ export default {
{label: "重点单品", prop: "goodsName"},
{label: "当日目标", prop: "targetNum", width: 70},
{label: "销售数量", prop: "saleNum", width: 70},
{label: "库存数量", prop: "stockNum", width: 70},
{label: "库存数量", prop: "stockNum", width: 70, flash: 1},
{label: "预计销售数量", prop: "preSaleNum", width: 70},
{label: "提醒", custom: 1, width: 70, align: 'center', prop: "remind"},
]

View File

@@ -1,4 +1,14 @@
<script>
function throttle(func, limit = 500) {
let timer;
return function () {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(func, limit);
}
}
export default {
name: "AppStoresTable",
label: "多店监控",
@@ -26,7 +36,7 @@ export default {
{label: "昨日销售数量", prop: "yesterdaySaleNum", width: 70},
{label: "上周同天销售数量", prop: "lastWeekSaleNum", width: 70},
{label: "今日销售数量", prop: "saleNum", width: 70},
{label: "现在库存数量", prop: "stockNum", width: 70},
{label: "现在库存数量", prop: "stockNum", width: 70, flash: 1},
{label: "剩余时间预计销售数量", prop: "preSaleNum"},
// {label: "提醒", custom: 1, width: 70, align: 'center', prop: "remind"},
],
@@ -44,7 +54,12 @@ export default {
}
},
computed: {
search: v => v.$multipleStoreBoard.search,
search: v => {
const search = JSON.parse(JSON.stringify(v.$multipleStoreBoard.search))
delete search.t
return search
},
refreshTimer: v => v.search.t,
storeList: v => {
const list = []
let group = []
@@ -72,6 +87,15 @@ export default {
}
})
}
},
refreshTimer() {
console.log("刷新")
this.refreshData().then(() => {
const v = this.search
if (v.interval > 0 && v.changeWay == '1') {
this.$refs.carousel?.$forceUpdate()
}
})
}
},
methods: {
@@ -108,21 +132,27 @@ export default {
})
},
getStoreKeyGoods() {
return $http.post("/data-boot/la/screen/multipleStoreBoard/storeKeyGoods", {
type: "1", ...this.search,
}).then(res => {
if (res?.data) {
this.storeKeyGoods = res.data
}
return new Promise(resolve => {
throttle(() => $http.post("/data-boot/la/screen/multipleStoreBoard/storeKeyGoods", {
type: "1", ...this.search,
}).then(res => {
if (res?.data) {
this.storeKeyGoods = res.data
resolve()
}
}))()
})
},
getCategorySales() {
return $http.post("/data-boot/la/screen/multipleStoreBoard/categorySale", {
type: "1", ...this.search,
}).then(res => {
if (res?.data) {
this.categorySales = res.data
}
return new Promise(resolve => {
throttle(() => $http.post("/data-boot/la/screen/multipleStoreBoard/categorySale", {
type: "1", ...this.search,
}).then(res => {
if (res?.data) {
this.categorySales = res.data
resolve()
}
}))()
})
},
gotoDetail(store, i) {
@@ -164,6 +194,14 @@ export default {
} else if (e.code == "ArrowRight") {
this.$refs.carousel.next()
}
},
async refreshData() {
return Promise.all([this.getStoreKeyGoods(), this.getCategorySales()]).then(() => {
this.stores.map(store => {
store.keyGoods = this.storeKeyGoods.filter(e => e.storeCode == store.storeCode) || []
store.categorySale = this.categorySales.filter(e => e.storeCode == store.storeCode) || []
})
})
}
},
mounted() {