单点监控面板完成

src/main.js

@@ -4,14 +4,13 @@ import router from './router'
 import './assets/main.css'
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
-import axios from 'axios'
+import inject from './utils/inject'
 
-window.axios = axios
 
 Vue.use(ElementUI);
-window.$glob = {}
 
-import('./utils/inject.js').then(() => {
+
+inject.then(() => {
   new Vue({
     router,
     render: (h) => h(App)

src/utils/dicts.js

@@ -1,14 +1,14 @@
-const fse = require("fs-extra")
-const dicts = {
-  品类:[
-    {label:"西点",value:"104"},
-    {label:"现烤",value:"108"},
-    {label:"裱花蛋糕",value:"109"},
+// const fse = require("fs-extra")
+export const dicts = {
+  品类: [
+    {label: "西点", value: "104"},
+    {label: "现烤", value: "108"},
+    {label: "裱花蛋糕", value: "109"},
   ],
-  类型:[
-    {label:"同比",value:"1"},
-    {label:"环比",value:"2"},
-    {label:"特定日期",value:"3"},
+  类型: [
+    {label: "同比", value: "1"},
+    {label: "环比", value: "2"},
+    {label: "特定日期", value: "3"},
   ]
 }
-fse.outputJSONSync("./dicts.json", dicts)
+// fse.outputJSONSync("./dicts.json", dicts)

src/utils/fetch.js

@@ -20,18 +20,6 @@ const init = () => new Promise(resolve => {
     config.headers['h-token'] = $glob.token
     return config
   }
-  window.$waitFor = (target, t = 500) => new Promise(resolve => {
-    const interval = setInterval(() => {
-      if (target) {
-        clearInterval(interval)
-        resolve(target)
-      }
-    }, t)
-    if (target) {
-      clearInterval(interval)
-      resolve(target)
-    }
-  })
   http.interceptors.request.use(async config => {
     await $waitFor(!getAuthing)
     if (!$glob.token && !getAuthing) {

src/utils/inject.js

@@ -1,7 +1,24 @@
+import {dicts} from "@/utils/dicts";
+import axios from 'axios'
+
+window.axios = axios
 const KENGEE_CDN_BASE = "http://10.0.97.209/presource/datascreen/"
 const libs = [`${KENGEE_CDN_BASE}/js/pinyin.min.js`]
-
-Promise.all([
+window.$glob = {}
+window.$dicts = dicts
+window.$waitFor = (target, t = 500) => new Promise(resolve => {
+  const interval = setInterval(() => {
+    if (target) {
+      clearInterval(interval)
+      resolve(target)
+    }
+  }, t)
+  if (target) {
+    clearInterval(interval)
+    resolve(target)
+  }
+})
+export default Promise.all([
   import("./fetch"),
   ...libs.map(url => new Promise(resolve => {
     const script = document.createElement("script")

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>