筛选条

src/utils/inject.js

@@ -21,14 +21,7 @@ window.$waitFor = (target, t = 500) => new Promise(resolve => {
 })
 
 Vue.prototype.$marketBoard = Vue.observable({
-  search: {
-    "groupCodeList": [
-      "K250QTD032"
-    ], //课区编码，不传即为全部
-    "currentDate": "20240501", //当前日期
-    "compareDate": "20240430", //比较日期
-    "hourNum": "18" //小时数(取值1~24,18表示18:00:00之前的交易统计)
-  }
+  search: {"groupCodeList": ["20001003"], "currentDate": "20240501", "compareDate": "20240430", "hourNum": "18"}
 })
 Vue.prototype.$multipleStoreBoard = Vue.observable({
   search: {}

src/views/AppMarketBoardFilter.vue

@@ -0,0 +1,70 @@
+<script>
+export default {
+  name: "AppMarketBoardFilter",
+  label: "市场看板-筛选条",
+  data() {
+    return {
+      form: {},
+      options: [],
+      dateOptions: Array(24).fill(0).map((v, i) => ({label: `${++i}:00`, value: i}))
+    }
+  },
+  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}))
+        }
+      })
+    },
+  },
+  created() {
+    this.getOptions().then(() => {
+      const {dayjs} = window
+      this.form = {
+        compareDate: dayjs().subtract(1, "day").format("YYYYMMDD"),
+        currentDate: dayjs().format("YYYYMMDD"),
+        groupCodeList: this.options?.[0].value,
+        hourNum: new Date().getHours()
+      }
+    })
+  },
+}
+</script>
+
+<template>
+  <el-form class="AppMarketBoardFilter flex" size="small" label-width="80px">
+    <el-form-item label="课长">
+      <el-select v-model="form.groupCodeList" @change="v=>$marketBoard.search.groupCodeList=[v]">
+        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="对比时间">
+      <el-date-picker v-model="form.compareDate" value-format="yyyyMMdd" @change="v=>$marketBoard.search.compareDate=v"/>
+    </el-form-item>
+    <el-form-item label="当前时间">
+      <el-date-picker v-model="form.currentDate" value-format="yyyyMMdd" @change="v=>$marketBoard.search.currentDate=v"/>
+    </el-form-item>
+    <el-form-item label="时段">
+      <el-select v-model="form.hourNum" :picker-options="options" size="small" format="HH:mm" value-format="H" @change="v=>$marketBoard.search.hourNum=v">
+        <el-option v-for="item in dateOptions" :key="item.value" :label="item.label" :value="item.value"/>
+      </el-select>
+    </el-form-item>
+  </el-form>
+</template>
+
+<style>
+.AppMarketBoardFilter .el-input__inner {
+  background: linear-gradient(180deg, rgba(12, 53, 111, 0) 0%, #0C356F 100%);
+  border: 1px solid #1760AE;
+  border-radius: 0;
+  color: #fff;
+  min-width: 120px;
+}
+
+.AppMarketBoardFilter .el-form-item__label {
+  white-space: nowrap;
+  color: #fff;
+  font-size: 14px;
+}
+</style>