From e482a95db9face317010e365b386c3799a4b10f3 Mon Sep 17 00:00:00 2001 From: Kubbo <390378816@qq.com> Date: Tue, 18 Jun 2024 22:23:45 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/AppStoresTable.vue | 130 ++++++++++++++++++++++++----------- 1 file changed, 91 insertions(+), 39 deletions(-) diff --git a/src/views/AppStoresTable.vue b/src/views/AppStoresTable.vue index 2ce8ec2..d8c77d4 100644 --- a/src/views/AppStoresTable.vue +++ b/src/views/AppStoresTable.vue @@ -2,28 +2,59 @@ 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: [ - {}, {}, {}, {}, {} - ], + stores: [], columns: { 品类销售情况: [ - {label: "品类", prop: "categoryName"}, - {label: "销售额", prop: "sales"}, - {label: "库存金额", prop: "inventoryAmount"}, - {label: "同/环比销售额", prop: "compareSales"}, - {label: "同/环比库存金额", prop: "compareInventoryAmount"}, - {label: "前四周日军销售额", prop: "averageSales"}, + {label: "品类", prop: "secondCategoryName"}, + {label: "销售额", prop: "currentSaleAmt", width: '70px'}, + {label: "库存金额", prop: "currentStockAmt", width: '80px'}, + {label: "同/环比销售额", prop: "compareSaleAmt", width: '70px'}, + {label: "同/环比库存金额", prop: "compareStockAmt", width: '70px'}, + {label: "前四周日军销售额", prop: "avg4WeekSaleAmt", width: '70px'}, ], 重点单品情况: [ - {label: "重点单品", prop: "categoryName"}, - {label: "当日目标", prop: "sales"}, - {label: "销售数量", prop: "inventoryAmount"}, - {label: "库存数量", prop: "compareSales"}, - {label: "剩余时间预计销售数量", prop: "compareInventoryAmount"}, - {label: "提醒", prop: "averageSales"}, + {label: "重点单品", prop: "name"}, + {label: "当日目标", prop: "targetNum", width: "70px"}, + {label: "销售数量", prop: "saleNum", width: "70px"}, + {label: "库存数量", prop: "stockNum", width: "70px"}, + {label: "剩余时间预计销售数量", prop: "preSaleNum"}, + {label: "提醒", custom: 1, width: 70, align: 'center', prop: "remind"}, ] }, } @@ -32,43 +63,64 @@ export default { storeList: v => { const list = [] let group = [] - v.stores.map((e, i) => { + for (const e of v.stores) { if (group.length < 4) { group.push(e) - if (i + 1 == v.stores.length) { - list.push(group) - } } else { - list.push(group) + list.push(group.reverse()) group = [e] } - }) + } + if (group.length > 0) list.push(group.reverse()) return list } }, + methods: { + getData() { + const refs = this.$parent.getItemRefs(); + const cameras = refs['c82d439e-a316-4d0e-8792-d2513a950f11'].dataChart + const storeKeyGoods = refs['6f6e3050-b084-4694-83c0-0d351346f426'].dataChart + const categorySales = refs['58fd4d5f-2ac3-444c-8a2c-361b8c8c3e6e'].dataChart + this.stores = JSON.parse(window.$glob.stores || "[]").map(store => { + const cameraStore = cameras.find(e => e.storeCode == store) + const {storeName = "仟吉门店", storeCameraVOList: camera = []} = cameraStore + const keyGoods = storeKeyGoods.filter(e => e.storeCode == store) + const categorySale = categorySales.filter(e => e.storeCode == store) + return {storeName, camera: camera.map(e => e.url), keyGoods, categorySale} + }) + } + }, mounted() { this.height = `${this.$el.clientHeight}px` + this.getData() } }