【类 型】：feat

【原  因】：添加语言设置选项  程序设置功能
【过  程】：
【影  响】：

# 类型 包含:
# feat：新功能（feature）
# fix：修补bug
# docs：文档（documentation）
# style： 格式（不影响代码运行的变动）
# refactor：重构（即不是新增功能，也不是修改bug的代码变动）
# test：增加测试
# chore：构建过程或辅助工具的变动

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
+        }
       }
     ]
   },

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阿里巴巴

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
+      <i class="iconfont f-s-26" :class="isCollapse ? 'icon-a-yousuojin3x' : 'icon-a-zuosuojin3x'"></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
+          <img v-if="avatar && (
-            v-if="
+            avatar.includes('.jpg') ||
-              avatar.indexOf('.jpg') !== -1 ||
+            avatar.includes('.gif') ||
-              avatar.indexOf('.gif') !== -1 ||
+            avatar.includes('.png')
-              avatar.indexOf('.png') !== -1
+          )" :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" />
-            "
-            :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
+      <el-button size="small" icon="iconfont icon-shuaxin" @click="refreshPage" circle></el-button>
-        size="small"
-        icon="iconfont icon-shuaxin"
-        @click="refreshPage"
-        circle
-      ></el-button>
     </div>
     <!-- 订单信息按钮 -->
-    <el-badge
+    <el-badge :hidden="pendingCount + processingCount + shippedCount + requestedCount == 0
-      :hidden="
-        pendingCount + processingCount + shippedCount + requestedCount == 0
       ? true
       : false
-      "
+      " :value="pendingCount + processingCount + shippedCount + requestedCount" class="navbarBadge l-h-50 p-r-15 r">
-      :value="pendingCount + processingCount + shippedCount + requestedCount"
+      <el-button :type="pendingCount + processingCount + shippedCount + requestedCount !== 0
-      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>
-        @click="drawer = true"
-        size="small"
-        :icon="orderIcon"
-        circle
-      ></el-button>
     </el-badge>
-    <el-drawer
+    <el-drawer :custom-class="$store.state.app.isWideScreen ? 'el-drawer-small' : 'el-drawer-large'"
-      :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"
-      :visible.sync="drawer"
+      :modal-append-to-body="false" :direction="$store.state.app.isWideScreen ? 'btt' : 'rtl'">
-      :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,10 +68,7 @@
         <el-tab-pane>
           <template slot="label">
             <span>未接单</span>
-            <el-badge
+            <el-badge :hidden="pendingCount == 0 ? true : false" :value="pendingCount">
-              :hidden="pendingCount == 0 ? true : false"
-              :value="pendingCount"
-            >
             </el-badge>
           </template>
           <QuestTabs :list="pendingList" type="未接单" />
@@ -95,10 +76,7 @@
         <el-tab-pane>
           <template slot="label">
             <span>已接单</span>
-            <el-badge
+            <el-badge :hidden="processingCount == 0 ? true : false" :value="processingCount">
-              :hidden="processingCount == 0 ? true : false"
-              :value="processingCount"
-            >
             </el-badge>
           </template>
           <QuestTabs :list="processingList" type="已接单" />
@@ -106,10 +84,7 @@
         <el-tab-pane>
           <template slot="label">
             <span>已发货</span>
-            <el-badge
+            <el-badge :hidden="shippedCount == 0 ? true : false" :value="shippedCount">
-              :hidden="shippedCount == 0 ? true : false"
-              :value="shippedCount"
-            >
             </el-badge>
           </template>
           <QuestTabs :list="shippedList" type="已发货" @close-drawer="drawer = false" />
@@ -117,10 +92,7 @@
         <el-tab-pane>
           <template slot="label">
             <span>退款申请中</span>
-            <el-badge
+            <el-badge :hidden="requestedCount == 0 ? true : false" :value="requestedCount">
-              :hidden="requestedCount == 0 ? true : false"
-              :value="requestedCount"
-            >
             </el-badge>
           </template>
           <QuestTabs :list="requestedList" type="退款申请中" />
@@ -129,21 +101,14 @@
     </el-drawer>
     <!-- mqtt状态灯 -->
     <div class="l-h-50 p-r-15 r">
-      <el-button
+      <el-button size="small" :type="mqttState === true ? 'success' : 'danger'" :icon="mqttState === true
-        size="small"
-        :type="mqttState === true ? 'success' : 'danger'"
-        :icon="
-          mqttState === true
         ? 'iconfont icon-yaokong2'
         : 'iconfont icon-yaokong2-copy'
-        "
+        " circle @click="
-        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: {
@@ -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: {

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>