kengee-data-screen/src/views/AppCarouselList.vue

<script>
const currentDate = "20240705"
export default {
  name: "AppCarouselList",
  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',
      list: [],
      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: "goodsName"},
          {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"},
        ],
        周边库存情况: [
          {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.shopMangerName}(${v.shopownerPhone})` : ""},
        ]
      },
    }
  },
  computed: {
    search: v => v.$storeBoard.search,
  },
  methods: {
    getData() {
      const {$waitFor, $http} = window
      console.log("筛选条件:", this.search)
      $waitFor($http).then(() => Promise.all([this.getCameras(), this.getStoreKeyGoods(), this.getCategorySales()]))
          .then(() => {
            this.list = [
              {label: "西点柜", value: "104"},
              {label: "现烤柜", value: "108"},
              {label: "蛋糕柜", value: "109"},
            ].map(({label, value: categoryId}) => {
              const {storeCameraVOList = [], longitude, latitude, storeCode, storeName} = this.cameras.find(e => e.storeCode == this.search.storeCode) || {}
              this.$storeBoard.store = {longitude, latitude, storeCode, storeName}
              const keyGoods = this.storeKeyGoods.filter(e => e.goodsCategoryId == categoryId) || []
              const categorySale = this.categorySales.filter(e => e.secondCategoryId == categoryId) || []
              return {longitude, latitude, categoryId, label, camera: storeCameraVOList.filter(e => e.cameraType == categoryId).map(e => e.cameraUrl), keyGoods, categorySale}
            }) || []
          })
    },
    getCameras() {
      return $http.post("/data-boot/la/screen/multipleStoreBoard/storeCamera", {
        type: "1", ...this.search,
      }).then(res => {
        if (res?.data) {
          this.cameras = res.data?.records || []
        }
      })
    },
    getStoreKeyGoods() {
      return $http.post("/data-boot/la/screen/singleStoreBoard/singStoreKeyGoodsSale", {
        type: "1", ...this.search, currentDate
      }).then(res => {
        if (res?.data) {
          this.storeKeyGoods = res.data
          this.$set(this.$storeBoard, 'storeKeyGoods', res.data)
        }
      })
    },
    getCategorySales() {
      return $http.post("/data-boot/la/screen/singleStoreBoard/singStoreCategorySale", {
        type: "1", ...this.search,
      }).then(res => {
        if (res?.data) {
          this.categorySales = res.data
        }
      })
    },
    getTableData(item = {}, tag) {
      const v = this
      const datasource = {
        重点单品情况: item.keyGoods,
        品类销售情况: item.categorySale,
        周边库存情况: v.$storeBoard.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({rowIndex}, store) {
      const {thirdGoodsCode} = this.storeKeyGoods[rowIndex],
          {longitude, latitude} = store
      return $http.post("/data-boot/la/screen/multipleStoreBoard/aroundStock", {
        type: "1", ...this.search, longitude, latitude, thirdGoodsCode, currentDate
      }).then(res => {
        if (res?.data) {
          this.$storeBoard.aroundStock = res.data
          this.$nextTick(() => this.$storeBoard.dialog = true)
          console.log(this.$storeBoard)
        }
      })
    }
  },
  watch: {
    search: {
      immediate: true, deep: true, handler() {
        this.getData()
      }
    }
  },
  mounted() {
    window.addEventListener("click", () => {
      this.$storeBoard.dialog = false
    })
    this.height = `${this.$el.clientHeight}px`
  },
  beforeDestroy() {
    window.removeEventListener("click", () => {
      this.$storeBoard.dialog = false
    })
  }

}
</script>

<template>
  <section class="AppCarouselList">
    <div class="layout">
      <div class="store" v-for="store in list" :key="store.storeCode">
        <div class="headerTitle" v-text="store.label"/>
        <el-carousel indicator-position="none" height="250px">
          <el-carousel-item v-for="(url,i) in store.camera" :key="i">
            <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="v=>openNearbyStores(v,store)" @click.native.stop/>
      </div>
    </div>
    <dv-scroll-board v-if="$storeBoard.dialog" class="dialogTable" :config="getTableData({}, '周边库存情况',5)" @click.native.stop/>
  </section>
</template>

<style>
.AppCarouselList {
  color: #fff;
  box-sizing: border-box;
}

.AppCarouselList .dv-scroll-board {
  height: 200px;
}

.AppCarouselList .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%;
}

.AppCarouselList .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;
}

.AppCarouselList .layout {
  display: flex;
  gap: 24px;
  width: 100%;
  overflow-x: auto;
}

.AppCarouselList .store {
  width: calc(33% - 16px);
}
</style>