【类型】：feat

【原因】：添加语言设置选项程序设置功能【过程】：【影响】： # 类型包含: # feat：新功能（feature） # fix：修补bug # docs：文档（documentation） # style：格式（不影响代码运行的变动） # refactor：重构（即不是新增功能，也不是修改bug的代码变动） # test：增加测试 # chore：构建过程或辅助工具的变动
2025-06-18 21:09:33 +08:00 · 2025-06-18 21:09:33 +08:00 · 86e72a64a7
commit 86e72a64a7
parent 555d480efd
4 changed files with 159 additions and 89 deletions
--- a/src/router/index.js
+++ b/src/router/index.js
@ -36,6 +36,17 @@ const routes = [
          roles: ['admin', 'editor'],
          tapName: 'plane'
        }
+      },
+      {
+        path: '/home/set',
+        component: () => import('@/views/layout/components/main/home/set'),
+        meta: {
+          title: '设置',
+          icon: 'iconfont icon-shezhi',
+          roles: ['admin', 'editor'],
+          tapName: 'plane',
+          hidden: true
+        }
      }
    ]
  },
--- a/src/styles/myIcon.scss
+++ b/src/styles/myIcon.scss
@ -1 +1 @@
-@import 'https://at.alicdn.com/t/c/font_3703467_1z89u99sr5w.css'; //iconfont阿里巴巴
+@import 'https://at.alicdn.com/t/c/font_3703467_793cqnnxv0f.css'; //iconfont阿里巴巴
--- a/src/views/layout/components/headbar.vue
+++ b/src/views/layout/components/headbar.vue
@ -2,75 +2,59 @@
  <div>
    <!-- menu缩进按钮 -->
    <div class="w-50px h-50px fc l" id="menuTabB" @click="handleCollapse">
-      <i
-        class="iconfont f-s-26"
-        :class="isCollapse ? 'icon-a-yousuojin3x' : 'icon-a-zuosuojin3x'"
-      ></i>
+      <i class="iconfont f-s-26" :class="isCollapse ? 'icon-a-yousuojin3x' : 'icon-a-zuosuojin3x'"></i>
    </div>
    <!-- 面包屑 -->
    <Breadcrumb class="l l-h-50 m-l-5" />
    <!-- 头像 -->
    <div class="right-menu m-r-5">
-      <el-dropdown class="avatar-container" trigger="click">
+      <el-dropdown class="avatar-container" trigger="click" @command="handleCommand">
        <div class="avatar-wrapper">
-          <img
-            v-if="
-              avatar.indexOf('.jpg') !== -1 ||
-              avatar.indexOf('.gif') !== -1 ||
-              avatar.indexOf('.png') !== -1
-            "
-            :src="avatar + '?imageView2/1/w/80/h/80'"
-            class="user-avatar"
-          />
+          <img v-if="avatar && (
+            avatar.includes('.jpg') ||
+            avatar.includes('.gif') ||
+            avatar.includes('.png')
+          )" :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" />
          <el-avatar v-else size="medium" icon="el-icon-user-solid"></el-avatar>
          <i class="el-icon-caret-bottom"></i>
        </div>
+
        <el-dropdown-menu slot="dropdown" class="user-dropdown">
-          <el-dropdown-item divided @click.native="logout">
-            <span style="display: block">退出登录</span>
+          <!-- 自定义语言设置为右侧弹出 -->
+          <el-dropdown-item>
+            <el-popover placement="right-start" width="150" trigger="hover" v-model="languagePopoverVisible">
+              <el-radio-group v-model="currentLang" @change="changeLang">
+                <el-radio label="zh-CN">简体中文</el-radio>
+                <!-- 其他语言可继续添加 -->
+                <!-- <el-radio label="en" class="m-t-10">English</el-radio> -->
+              </el-radio-group>
+              <span slot="reference" class="mainFontColor f-s-16"><i class="iconfont icon-zhongyingwen m-r-10"></i>语言设置</span>
+            </el-popover>
          </el-dropdown-item>
+
+          <el-dropdown-item class="mainFontColor f-s-16" command="go-setting"><i class="iconfont icon-shezhi m-r-10"></i>设置</el-dropdown-item>
+          <el-dropdown-item class="mainFontColor f-s-16" divided command="logout"><i class="iconfont icon-logout m-r-10"></i>退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
+
    <!-- 页面刷新 -->
    <div class="l-h-50 p-r-15 r">
-      <el-button
-        size="small"
-        icon="iconfont icon-shuaxin"
-        @click="refreshPage"
-        circle
-      ></el-button>
+      <el-button size="small" icon="iconfont icon-shuaxin" @click="refreshPage" circle></el-button>
    </div>
    <!-- 订单信息按钮 -->
-    <el-badge
-      :hidden="
-        pendingCount + processingCount + shippedCount + requestedCount == 0
-          ? true
-          : false
-      "
-      :value="pendingCount + processingCount + shippedCount + requestedCount"
-      class="navbarBadge l-h-50 p-r-15 r"
-    >
-      <el-button
-        :type="
-          pendingCount + processingCount + shippedCount + requestedCount !== 0
-            ? 'primary'
-            : ''
-        "
-        @click="drawer = true"
-        size="small"
-        :icon="orderIcon"
-        circle
-      ></el-button>
+    <el-badge :hidden="pendingCount + processingCount + shippedCount + requestedCount == 0
+      ? true
+      : false
+      " :value="pendingCount + processingCount + shippedCount + requestedCount" class="navbarBadge l-h-50 p-r-15 r">
+      <el-button :type="pendingCount + processingCount + shippedCount + requestedCount !== 0
+        ? 'primary'
+        : ''
+        " @click="drawer = true" size="small" :icon="orderIcon" circle></el-button>
    </el-badge>
-    <el-drawer
-      :custom-class="$store.state.app.isWideScreen ? 'el-drawer-small' : 'el-drawer-large'"
-      :visible.sync="drawer"
-      :size="$store.state.app.isWideScreen ? '90%' : '60%'"
-      :append-to-body="true"
-      :modal-append-to-body="false"
-      :direction="$store.state.app.isWideScreen ? 'btt' : 'rtl'"
-    >
+    <el-drawer :custom-class="$store.state.app.isWideScreen ? 'el-drawer-small' : 'el-drawer-large'"
+      :visible.sync="drawer" :size="$store.state.app.isWideScreen ? '90%' : '60%'" :append-to-body="true"
+      :modal-append-to-body="false" :direction="$store.state.app.isWideScreen ? 'btt' : 'rtl'">
      <template slot="title">
        <div>
          <i class="l f-s-18 iconfont icon-jinjidingdan m-r-5 l-h-18"></i>
@ -84,66 +68,47 @@
        <el-tab-pane>
          <template slot="label">
            <span>未接单</span>
-            <el-badge
-              :hidden="pendingCount == 0 ? true : false"
-              :value="pendingCount"
-            >
+            <el-badge :hidden="pendingCount == 0 ? true : false" :value="pendingCount">
            </el-badge>
          </template>
-          <QuestTabs :list="pendingList" type = "未接单"/>
+          <QuestTabs :list="pendingList" type="未接单" />
        </el-tab-pane>
        <el-tab-pane>
          <template slot="label">
            <span>已接单</span>
-            <el-badge
-              :hidden="processingCount == 0 ? true : false"
-              :value="processingCount"
-            >
+            <el-badge :hidden="processingCount == 0 ? true : false" :value="processingCount">
            </el-badge>
          </template>
-          <QuestTabs :list="processingList" type = "已接单"/>
+          <QuestTabs :list="processingList" type="已接单" />
        </el-tab-pane>
        <el-tab-pane>
          <template slot="label">
            <span>已发货</span>
-            <el-badge
-              :hidden="shippedCount == 0 ? true : false"
-              :value="shippedCount"
-            >
+            <el-badge :hidden="shippedCount == 0 ? true : false" :value="shippedCount">
            </el-badge>
          </template>
-          <QuestTabs :list="shippedList" type = "已发货" @close-drawer="drawer = false"/>
+          <QuestTabs :list="shippedList" type="已发货" @close-drawer="drawer = false" />
        </el-tab-pane>
        <el-tab-pane>
          <template slot="label">
            <span>退款申请中</span>
-            <el-badge
-              :hidden="requestedCount == 0 ? true : false"
-              :value="requestedCount"
-            >
+            <el-badge :hidden="requestedCount == 0 ? true : false" :value="requestedCount">
            </el-badge>
          </template>
-          <QuestTabs :list="requestedList" type = "退款申请中"/>
+          <QuestTabs :list="requestedList" type="退款申请中" />
        </el-tab-pane>
      </el-tabs>
    </el-drawer>
    <!-- mqtt状态灯 -->
    <div class="l-h-50 p-r-15 r">
-      <el-button
-        size="small"
-        :type="mqttState === true ? 'success' : 'danger'"
-        :icon="
-          mqttState === true
-            ? 'iconfont icon-yaokong2'
-            : 'iconfont icon-yaokong2-copy'
-        "
-        circle
-        @click="
+      <el-button size="small" :type="mqttState === true ? 'success' : 'danger'" :icon="mqttState === true
+        ? 'iconfont icon-yaokong2'
+        : 'iconfont icon-yaokong2-copy'
+        " circle @click="
          mqttState === true
            ? $message.success('指令服务器链接正常')
            : $message.error('未链接到指令服务器')
-        "
-      ></el-button>
+          "></el-button>
    </div>
  </div>
 </template>
@ -161,7 +126,9 @@ export default {
      shop_id: this.$store.state.user.shop_id, // 商铺id(默认为本店) 过滤条件
      drawer: false,
      getQuestInterval: null, // 用于销毁时间轴
-      animationTrumpet: true // 喇叭动画
+      animationTrumpet: true, // 喇叭动画
+      currentLang: 'zh-CN',
+      languagePopoverVisible: false // 控制语言弹出框可见
    }
  },
  components: {
@ -266,9 +233,9 @@ export default {
    orderIcon () {
      if (
        this.pendingCount +
-          this.processingCount +
-          this.shippedCount +
-          this.requestedCount ===
+        this.processingCount +
+        this.shippedCount +
+        this.requestedCount ===
        0
      ) {
        return 'iconfont icon-meiyoudingdan-01'
@ -292,7 +259,7 @@ export default {
    /**
     * @description: 计算订单数量 订单变化播放声音 显示在图标右上角小红圈内
     */
-    computeQuestList () {},
+    computeQuestList () { },
    /**
     * @description: 刷新当前页面
     */
@ -304,6 +271,7 @@ export default {
      this.$store.dispatch('fetchAdminList') // 获取管理员列表
      this.$store.dispatch('fetchSiteList') // 获取站点列表
      this.$store.dispatch('fetchRouteList') // 获取航线列表
+      this.$store.dispatch('fetchNoflyData', this.$store.state.user.shop_id)// 获取禁飞区数据 注意这里要有shopid  总管理员再操作其他商铺飞机时 要刷新此缓存 需要对应商铺的禁飞区数据
      this.$store.dispatch('fetchCategoryList') // 获取分类列表（小程序）
      this.$store.dispatch('fetchPaidOrderList') // 获取订单列表
      this.$store.dispatch('fetchMessageList')// 获取管理员公告列表 并弹出公告框
@ -315,6 +283,21 @@ export default {
      this.$store
        .dispatch('user/destroyUserAsync')
        .then(this.$router.push('/login'))
+    },
+    handleCommand (command) {
+      if (command === 'go-setting') {
+        this.$router.push('/home/set')
+      } else if (command === 'logout') {
+        this.logout()
+      }
+    },
+    changeLang (lang) {
+      this.currentLang = lang
+      // 如果用 vue-i18n：
+      // this.$i18n.locale = lang;
+      localStorage.setItem('lang', lang)
+      this.$message.success(`语言切换为：${lang === 'zh-CN' ? '简体中文' : lang}`)
+      this.languagePopoverVisible = false // 切换后关闭子菜单
    }
  },
  watch: {
@ -346,7 +329,7 @@ export default {
      }
    }
  },
-  created () {}
+  created () { }
 }
 </script>

--- a/src/views/layout/components/main/home/set.vue
+++ b/src/views/layout/components/main/home/set.vue
@ -0,0 +1,76 @@
+<template>
+  <div class="h-100">
+    <map-box ref="mapbox"/>
+  </div>
+</template>
+
+<script>
+import MapBox from '@/components/MapBox'
+
+export default {
+  name: 'Home',
+  data () {
+    return {
+    }
+  },
+  components: {
+    MapBox
+  },
+  computed: {
+    airList () {
+      return this.$store.state.airList
+    },
+    /**
+     * @description: 侧边栏显隐
+     */
+    isCollapse () {
+      return this.$store.state.app.isCollapse
+    }
+  },
+  methods: {
+    /**
+     * @description: 创建飞机图标
+     */
+    makePlanes (planes) {
+      this.$refs.mapbox.removePlanes()// 先清除画布上现有的飞机
+      planes.forEach((plane, index) => { // 创建所有飞机
+        let planeDefaultLonLat
+        if (localStorage.getItem(plane.name) !== null) { // 从本地缓存 拿飞机得初始位置
+          planeDefaultLonLat = JSON.parse(localStorage.getItem(plane.name))
+          plane.lon = planeDefaultLonLat.lon
+          plane.lat = planeDefaultLonLat.lat
+        } else {
+          plane.lon = 0
+          plane.lat = 0
+        }
+        this.$refs.mapbox.makePlane(plane, index)
+      })
+    }
+  },
+  mounted () {
+    if (this.airList.length > 0) {
+      this.makePlanes(this.airList)// 创建飞机图标
+    }
+  },
+  watch: {
+    /**
+     * @description: 飞机列表更新时候 更新地图
+     */
+    airList: {
+      handler (val) {
+        this.makePlanes(val)
+      }
+    },
+    /**
+     * @description: 侧边栏显隐
+     */
+    isCollapse () {
+      return this.$store.state.app.isCollapse
+    }
+  },
+  destroyed () {
+  }
+}
+</script>
+
+<style></style>