提交组件

.gitignore

@@ -26,3 +26,4 @@ ds/.vscode
 *.sln
 *.sw?
 /package-lock.json
+/src/utils/dicts.json

package.json

@@ -16,6 +16,7 @@
     "@vitejs/plugin-legacy": "^2.0.0",
     "@vitejs/plugin-vue2": "^1.1.2",
     "@vitejs/plugin-vue2-jsx": "^1.0.2",
+    "fs-extra": "^11.2.0",
     "terser": "^5.14.2",
     "vite": "^3.0.2"
   }

src/utils/dicts.js

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

src/views/AppNavbar.vue

@@ -0,0 +1,62 @@
+<script>
+const screens = {
+  "c1d1b838-e946-4b6b-b95d-e92798db6908": "市场看板",
+  "3557e83f-18ca-4532-8d18-d76b11d3f880": "多店监控",
+  '9f299712-5549-413b-a93b-7c3e3b5bfadb': "单店监控",
+}
+export default {
+  name: "AppNavbar",
+  label: "标题栏",
+  data() {
+    return {
+      screens,
+      groupId: "c1d1b838-e946-4b6b-b95d-e92798db6908"
+    }
+  },
+  computed: {
+    backgroundImage() {
+      return `url(${{
+        "c1d1b838-e946-4b6b-b95d-e92798db6908": "http://10.0.97.209/img/kengee/kengee16.png",
+        "3557e83f-18ca-4532-8d18-d76b11d3f880": "http://10.0.97.209/img/kengee/kengee17.png",
+        '9f299712-5549-413b-a93b-7c3e3b5bfadb': "http://10.0.97.209/img/kengee/kengee18.png",
+      }[this.groupId]})`
+    }
+  },
+  watch: {
+    groupId: {
+      immediate: true,
+      handler(val) {
+        if (val) {
+          $glob.group = 'c1d1b838-e946-4b6b-b95d-e92798db6908'
+          $glob.group = this.groupId
+        } else {
+          this.groupId = $glob.group
+        }
+      }
+    }
+  }
+}
+</script>
+
+<template>
+  <section class="AppNavbar" :style="{backgroundImage}">
+    <div v-for="(label,id) in screens" :key="id" @click="groupId=id" class="pointer"/>
+  </section>
+</template>
+
+<style scoped>
+.AppNavbar {
+  max-width: 1920px;
+  height: 80px;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  gap: 14px;
+}
+
+.AppNavbar .pointer {
+  width: 172px;
+  height: 50px;
+  cursor: pointer;
+}
+</style>