单点监控面板完成

src/views/AppCarouselList.vue

@@ -40,10 +40,10 @@ export default {
       height: '600px',
       search: {
         type: '1',
-        categoryId: '',
-        hourNum: ""
+        storeCode: 'K230QTD081',
+        hourNum: "18"
       },
-      stores: [],
+      list: [],
       cameras: [],
       storeKeyGoods: [],
       categorySales: [],
@@ -67,56 +67,35 @@ export default {
       },
     }
   },
-  computed: {
-    refs: v => v.$parent.getItemRefs(),
-    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
-    }
-  },
   methods: {
     getData() {
-      const {$http, $waitFor} = window
+      const {$waitFor, $http} = window
       console.log("筛选条件:", this.search)
-      $waitFor($http).then(() => this.getStores())
-          .then(() => Promise.all([this.getCameras(), this.getStoreKeyGoods(), this.getCategorySales()]))
+      $waitFor($http).then(() => Promise.all([this.getCameras(), this.getStoreKeyGoods(), this.getCategorySales()]))
           .then(() => {
-            this.stores = this.stores?.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}
+            this.list = [
+              {label: "西点柜", value: "104"},
+              {label: "现烤柜", value: "108"},
+              {label: "蛋糕柜", value: "109"},
+            ].map(({label, value: categoryId}) => {
+              const {storeCameraVOList = []} = this.cameras.find(e => e.storeCode == this.search.storeCode) || {}
+              const keyGoods = this.storeKeyGoods.filter(e => e.categoryId == categoryId) || []
+              const categorySale = this.categorySales.filter(e => e.secondCategoryId == categoryId) || []
+              return {categoryId, label, camera: storeCameraVOList.filter(e => e.cameraType == categoryId).map(e => e.cameraUrl), keyGoods, categorySale}
             }) || []
           })
     },
-    getStores() {
-      return $http.get(`/data-boot/ca/screen/scStoreInfo/group/${this.search.groupCodeList}`).then(res => {
-        if (res?.data) {
-          this.stores = res.data || []
-        }
-      })
-    },
     getCameras() {
       return $http.post("/data-boot/la/screen/multipleStoreBoard/storeCamera", {
         ...this.search,
       }).then(res => {
         if (res?.data) {
-          this.cameras = res.data?.records || []
+          this.cameras = res.data?.records?.filter(e => e.storeCameraVOList?.length > 0) || []
         }
       })
     },
     getStoreKeyGoods() {
-      return $http.post("/data-boot/la/screen/multipleStoreBoard/storeKeyGoods", {
+      return $http.post("/data-boot/la/screen/singleStoreBoard/singStoreKeyGoodsSale", {
         ...this.search,
       }).then(res => {
         if (res?.data) {
@@ -125,7 +104,7 @@ export default {
       })
     },
     getCategorySales() {
-      return $http.post("/data-boot/la/screen/multipleStoreBoard/categorySale", {
+      return $http.post("/data-boot/la/screen/singleStoreBoard/singStoreCategorySale", {
         ...this.search,
       }).then(res => {
         if (res?.data) {
@@ -133,12 +112,6 @@ export default {
         }
       })
     },
-    gotoDetail(store) {
-      $glob.query = {storeCode: store.storeCode}
-      const sid = "9f299712-5549-413b-a93b-7c3e3b5bfadb"
-      $glob.group = sid
-      this.refs["ff6a5ca5-8cca-4fad-8058-a2ab2388236c"].$refs.main.groupId = sid
-    },
   },
   mounted() {
     this.height = `${this.$el.clientHeight}px`
@@ -150,10 +123,10 @@ export default {
 <template>
   <section class="AppCarouselList">
     <div class="layout">
-      <div class="store" v-for="store in storeList" :key="store.storeCode">
-        <div class="header" v-text="store.storeName" @click="gotoDetail(store)"/>
+      <div class="store" v-for="store in list" :key="store.storeCode">
+        <div class="header" v-text="store.label"/>
         <el-carousel indicator-position="none" height="250px">
-          <el-carousel-item v-for="(url,j) in store.camera" :key="[i,j].join('_')">
+          <el-carousel-item v-for="(url,i) in store.camera" :key="i">
             <hls-player :url="url"/>
           </el-carousel-item>
         </el-carousel>