提交一下

src/views/AppDatePicker.vue

@@ -0,0 +1,54 @@
+<template>
+  <section class="AppDatePicker">
+    <div class="label">时段</div>
+    <el-select v-model="value" :picker-options="options" size="small" format="HH:mm" value-format="H" @change="handleSearch">
+      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
+    </el-select>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "AppDatePicker",
+  label: "时间选择",
+  data() {
+    return {
+      value: ''
+    }
+  },
+  computed: {
+    refs: v => v.$parent.getItemRefs(),
+    options: () => Array(24).fill(0).map((v, i) => ({label: `${++i}:00`, value: i})),
+  },
+  methods: {
+    handleSearch(v) {
+      const list = this.refs['6e6c93d7-5b24-4d75-a0d0-4beb130045ed'].$refs.main
+      list.search.hourNum = v
+      list.getData()
+    }
+  },
+  created() {
+    this.value = new Date().getHours()
+  }
+}
+</script>
+
+<style scoped>
+.AppDatePicker {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.AppDatePicker .el-input__inner {
+  background: linear-gradient(180deg, rgba(12, 53, 111, 0) 0%, #0C356F 100%);
+  border: 1px solid #1760AE;
+  border-radius: 0;
+}
+
+.AppDatePicker .label {
+  white-space: nowrap;
+  color: #fff;
+  font-size: 14px;
+}
+</style>

src/views/AppRemoteSelect.vue

@@ -0,0 +1,60 @@
+<template>
+  <section class="AppSelect">
+    <div class="label">课长</div>
+    <el-select v-model="value" placeholder="全部" size="small" @change="handleSearch" filterable>
+      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
+    </el-select>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "AppSelect",
+  label: "下拉菜单(接口源)",
+  data() {
+    return {
+      options: [],
+      value: ''
+    }
+  },
+  computed: {
+    refs: v => v.$parent.getItemRefs(),
+  },
+  methods: {
+    getOptions() {
+      return $http.get("/data-boot/ca/screen/scStoreInfo/listGroup").then(res => {
+        if (res?.data) {
+          return this.options = res.data.map(e => ({label: e.supervisorName, value: e.groupCode}))
+        }
+      })
+    },
+    handleSearch(v) {
+      const list = this.refs['6e6c93d7-5b24-4d75-a0d0-4beb130045ed'].$refs.main
+      list.search.groupCodeList = [v]
+      list.getData()
+    }
+  },
+  created() {
+    this.getOptions().then(() => this.value = this.options[0].value)
+  }
+}
+</script>
+<style scoped>
+.AppSelect {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.AppSelect .el-input__inner {
+  background: linear-gradient(180deg, rgba(12, 53, 111, 0) 0%, #0C356F 100%);
+  border: 1px solid #1760AE;
+  border-radius: 0;
+}
+
+.AppSelect .label {
+  white-space: nowrap;
+  color: #fff;
+  font-size: 14px;
+}
+</style>

src/views/AppStoresTable.vue

@@ -1,5 +1,4 @@
 <script>
-const {groupCodeList = ["20010073"]} = window?.$glob?.params || {}
 export default {
   name: "AppStoresTable",
   label: "多店监控",
@@ -40,9 +39,9 @@ export default {
     return {
       height: '600px',
       search: {
-        type: '1',
-        categoryId: '104',
-        hourNum: "12"
+        type: '',
+        categoryId: '',
+        hourNum: ""
       },
       stores: [],
       cameras: [],
@@ -88,26 +87,36 @@ export default {
   methods: {
     getData() {
       const {$http, $waitFor} = window
-      $waitFor($http).then(() => Promise.all([this.getCameras(), this.getStoreKeyGoods(), this.getCategorySales()])).then(() => {
-        this.stores = this.stores.map(({storeName, storeCode, storeCameraVOList = []}) => {
-          const keyGoods = this.storeKeyGoods.filter(e => e.storeCode == storeCode)
-          const categorySale = this.categorySales.filter(e => e.storeCode == storeCode)
+      $waitFor($http).then(() => this.getStores())
+          .then(() => Promise.all([this.getCameras(), this.getStoreKeyGoods(), this.getCategorySales()]))
+          .then(() => {
+            this.stores = this.stores.map(({storeName, storeCode}) => {
+              const {storeCameraVOList} = 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.url), 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, groupCodeList
+        ...this.search,
       }).then(res => {
         if (res?.data) {
-          this.stores = res.data?.records || []
+          this.cameras = res.data?.records || []
         }
       })
     },
     getStoreKeyGoods() {
       return $http.post("/data-boot/la/screen/multipleStoreBoard/storeKeyGoods", {
-        ...this.search, groupCodeList
+        ...this.search,
       }).then(res => {
         if (res?.data) {
           this.storeKeyGoods = res.data
@@ -116,7 +125,7 @@ export default {
     },
     getCategorySales() {
       return $http.post("/data-boot/la/screen/multipleStoreBoard/categorySale", {
-        ...this.search, groupCodeList
+        ...this.search,
       }).then(res => {
         if (res?.data) {
           this.categorySales = res.data