导航栏

package.json

@@ -49,10 +49,12 @@
     "js-beautify": "1.13.0",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.0.0-rc.1",
+    "leaflet": "^1.9.4",
     "nprogress": "0.2.0",
     "quill": "1.3.7",
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
+    "v-scale-screen": "^1.0.3",
     "vue": "2.6.12",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",

src/App.vue

@@ -7,16 +7,9 @@
 
 <script>
 import ThemePicker from "@/components/ThemePicker";
-import autofit from "autofit.js";
+
 export default {
-  mounted() {
-    autofit.init({
-      designHeight: 1080,
-      designWidth: 1920,
-      renderDom: "#app",
-      resize: true,
-    });
-  },
+  mounted() {},
   name: "App",
   components: { ThemePicker },
   metaInfo() {

src/components/LeafletMap/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <div id="leaflet-map"></div>
+</template>
+
+<script>
+import L from "leaflet";
+export default {
+  data() {
+    return {
+      townCenter: [31.4865100338683, 121.11104941651722],
+      mapRotate: 0, //地图旋转角度
+    };
+  },
+  mounted() {
+    this.initMapData();
+  },
+  methods: {
+    initMapData() {
+      this.globalMap = L.map("leaflet-map", {
+        center: this.townCenter, // 地图中心[纬度，经度]
+        zoom: 13, // 地图层级
+        maxZoom: 16,
+        minZoom: 13,
+        zoomControl: false, // 放大缩小按钮
+        attributionControl: false, // 右下角leaflet图标
+        rotate: true,
+        bearing: this.mapRotate,
+      });
+    },
+  },
+};
+</script>
+
+<style>
+#leaflet-map {
+  height: 100%;
+  width: 100%;
+}
+.leaflet-container {
+  background: transparent !important;
+}
+</style>

src/components/NavigationBar/index.js

@@ -0,0 +1,4 @@
+export { default as peopleCentre } from "./peopleCentre.vue";
+export { default as warningCentre } from "./warningCentre.vue";
+export { default as recycleCentre } from "./recycleCentre.vue";
+export { default as logCentre } from "./logCentre.vue";

src/components/NavigationBar/index.vue

@@ -1,14 +1,54 @@
 <template>
   <div class="navigation-bar">
+    <div class="navigation-left">
+      <el-badge
+        :value="item.badge ? item.badge : ''"
+        class="item"
+        v-for="(item, index) in leftBtnList"
+        :key="index"
+      >
+        <el-button type="text" @click="handleSearch(item.title)">{{
+          item.title
+        }}</el-button>
+      </el-badge>
+    </div>
     <div class="navigation-title">
       <div class="main-title" :text="mainTitle">{{ mainTitle }}</div>
       <div class="sub-title" :text="subTitle">{{ subTitle }}</div>
     </div>
+    <div class="navigation-right">
+      <div class="reset"></div>
+      <el-button type="text">后台管理</el-button>
+      <el-button type="text">美丽街区</el-button>
+      <div class="user-data">
+        <div class="user-icon"></div>
+        <div class="user-name">欢迎,{{ name }}</div>
+      </div>
+    </div>
+
+    <!-- 四个中心 -->
+    <el-dialog :visible.sync="open" top="25vh" :modal="false" width="1158px">
+      <div class="dialog-main">
+        <div class="dialog-title"><span></span> {{ title }}</div>
+        <peopleCentre v-if="title == '搜索中心'" />
+        <warningCentre v-if="title == '预警中心'" />
+        <recycleCentre v-if="title == '回收中心'" />
+        <logCentre v-if="title == '日志中心'" />
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import { mapGetters } from "vuex";
+import { peopleCentre, warningCentre, recycleCentre, logCentre } from "./index";
 export default {
+  components: {
+    peopleCentre,
+    warningCentre,
+    recycleCentre,
+    logCentre,
+  },
   props: {
     mainTitle: {
       type: String,
@@ -20,7 +60,28 @@ export default {
     },
   },
   data() {
-    return {};
+    return {
+      title: "",
+      open: false,
+      leftBtnList: [
+        { title: "搜索中心", isShow: true },
+        { title: "预警中心", isShow: true, badge: 100 },
+        { title: "回收中心", isShow: true },
+        { title: "日志中心", isShow: true },
+      ],
+    };
+  },
+  methods: {
+    /**
+     * 是个中心
+     */
+    handleSearch(title) {
+      this.title = title;
+      this.open = true;
+    },
+  },
+  computed: {
+    ...mapGetters(["name"]),
   },
 };
 </script>
@@ -29,12 +90,20 @@ export default {
 .navigation-bar {
   position: fixed;
   top: 0;
+  z-index: 100;
   height: 125px;
   width: 100%;
   background: url("~@/assets/images/ui/navigation.png");
   background-size: 100% 100%;
   display: flex;
   justify-content: center;
+  & > div {
+    flex: 1;
+  }
+  .navigation-left {
+    padding-top: 20px;
+    padding-left: 25px;
+  }
   .navigation-title {
     text-align: center;
     margin-top: 6px;
@@ -65,5 +134,86 @@ export default {
       text-shadow: none;
     }
   }
+  .navigation-right {
+    padding-top: 20px;
+    padding-right: 25px;
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: flex-start;
+    .reset {
+      height: 41px;
+      width: 58px;
+      background: url("~@/assets/images/ui/reset.png");
+    }
+    .user-data {
+      display: flex;
+      align-items: center;
+      padding-top: 5px;
+      cursor: pointer;
+      .user-icon {
+        height: 19px;
+        width: 19px;
+        border-radius: 50%;
+        background: url("~@/assets/images/ui/user.png");
+        background-size: 100% 100%;
+        margin-right: 10px;
+      }
+      .user-name {
+        font-size: 16px;
+        color: #ffffff;
+        font-weight: 400;
+        font-family: "Alibaba-PuHuiTi-Regular.otf";
+      }
+    }
+  }
+  .el-button {
+    font-size: 14px;
+    color: #cdfbff;
+    font-weight: 400;
+    background: url("~@/assets/images/ui/btn_bg.png");
+    padding: 10px 28px;
+    font-family: "Alibaba-PuHuiTi-Regular.otf";
+  }
+
+  .dialog-main {
+    min-height: 700px;
+    display: flex;
+    flex-direction: column;
+    background: #031c3c;
+    border-radius: 12px;
+    padding: 20px;
+    .dialog-title {
+      display: flex;
+      align-items: center;
+      span {
+        display: inline-block;
+        height: 17px;
+        width: 5px;
+        background: #00a8ff;
+        margin-right: 10px;
+      }
+      font-size: 18px;
+      color: #f4f8fa;
+      font-weight: 500;
+      font-family: "Alibaba-PuHuiTi-Medium.otf";
+    }
+  }
+}
+::v-deep .el-badge__content.is-fixed {
+  z-index: 10;
+}
+::v-deep .el-dialog {
+  background: transparent;
+}
+::v-deep .el-dialog__header {
+  padding: 0;
+}
+::v-deep .el-dialog__body {
+  background: #009bf4;
+  border-radius: 12px;
+  padding: 2px;
+}
+::v-deep .el-dialog:not(.is-fullscreen) {
+  margin-top: 23vh !important;
 }
 </style>

src/components/NavigationBar/logCentre.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>日志</div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style></style>

src/components/NavigationBar/peopleCentre.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="search-container">
+    <div class="option-rows">
+      <el-select v-model="value" placeholder="选择社区">
+        <el-option
+          v-for="item in community"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+      <el-select v-model="value" placeholder="选择小区">
+        <el-option
+          v-for="item in xiaoqu"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value: "",
+      queryParams: {},
+      community: [],
+      xiaoqu: [],
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.search-container {
+  margin-top: 10px;
+  flex: 1;
+  border: 1px solid red;
+}
+</style>

src/components/NavigationBar/recycleCentre.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>回收</div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style></style>

src/components/NavigationBar/warningCentre.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>预警</div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style></style>

src/main.js

@@ -1,67 +1,87 @@
-import Vue from 'vue'
+import Vue from "vue";
 
-import Cookies from 'js-cookie'
+import Cookies from "js-cookie";
 
-import Element from 'element-ui'
-import './assets/styles/element-variables.scss'
+import Element from "element-ui";
+import "./assets/styles/element-variables.scss";
 
-import '@/assets/styles/index.scss' // global css
-import '@/assets/styles/ruoyi.scss' // ruoyi css
-import App from './App'
-import store from './store'
-import router from './router'
-import directive from './directive' // directive
-import plugins from './plugins' // plugins
-import { download } from '@/utils/request'
+import "@/assets/styles/index.scss"; // global css
+import "@/assets/styles/ruoyi.scss"; // ruoyi css
+import App from "./App";
+import store from "./store";
+import router from "./router";
+import directive from "./directive"; // directive
+import plugins from "./plugins"; // plugins
+import { download } from "@/utils/request";
 
-import './assets/icons' // icon
-import './permission' // permission control
+// 引入Leaflet对象 挂载到Vue上，便于全局使用，也可以单独页面中单独引用
+import "leaflet/dist/leaflet.css";
+
+import * as L from "leaflet";
+
+/* leaflet icon */
+delete L.Icon.Default.prototype._getIconUrl;
+L.Icon.Default.mergeOptions({
+  iconRetinaUrl: require("leaflet/dist/images/marker-icon-2x.png"),
+  iconUrl: require("leaflet/dist/images/marker-icon.png"),
+  shadowUrl: require("leaflet/dist/images/marker-shadow.png"),
+});
+
+import "./assets/icons"; // icon
+import "./permission"; // permission control
 import { getDicts } from "@/api/system/dict/data";
 import { getConfigKey } from "@/api/system/config";
-import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/ruoyi";
+import {
+  parseTime,
+  resetForm,
+  addDateRange,
+  selectDictLabel,
+  selectDictLabels,
+  handleTree,
+} from "@/utils/ruoyi";
 // 分页组件
 import Pagination from "@/components/Pagination";
 // 自定义表格工具组件
-import RightToolbar from "@/components/RightToolbar"
+import RightToolbar from "@/components/RightToolbar";
 // 富文本组件
-import Editor from "@/components/Editor"
+import Editor from "@/components/Editor";
 // 文件上传组件
-import FileUpload from "@/components/FileUpload"
+import FileUpload from "@/components/FileUpload";
 // 图片上传组件
-import ImageUpload from "@/components/ImageUpload"
+import ImageUpload from "@/components/ImageUpload";
 // 图片预览组件
-import ImagePreview from "@/components/ImagePreview"
+import ImagePreview from "@/components/ImagePreview";
 // 字典标签组件
-import DictTag from '@/components/DictTag'
+import DictTag from "@/components/DictTag";
 // 头部标签组件
-import VueMeta from 'vue-meta'
+import VueMeta from "vue-meta";
 // 字典数据组件
-import DictData from '@/components/DictData'
+import DictData from "@/components/DictData";
 
 // 全局方法挂载
-Vue.prototype.getDicts = getDicts
-Vue.prototype.getConfigKey = getConfigKey
-Vue.prototype.parseTime = parseTime
-Vue.prototype.resetForm = resetForm
-Vue.prototype.addDateRange = addDateRange
-Vue.prototype.selectDictLabel = selectDictLabel
-Vue.prototype.selectDictLabels = selectDictLabels
-Vue.prototype.download = download
-Vue.prototype.handleTree = handleTree
+Vue.prototype.getDicts = getDicts;
+Vue.prototype.getConfigKey = getConfigKey;
+Vue.prototype.parseTime = parseTime;
+Vue.prototype.resetForm = resetForm;
+Vue.prototype.addDateRange = addDateRange;
+Vue.prototype.selectDictLabel = selectDictLabel;
+Vue.prototype.selectDictLabels = selectDictLabels;
+Vue.prototype.download = download;
+Vue.prototype.handleTree = handleTree;
 
 // 全局组件挂载
-Vue.component('DictTag', DictTag)
-Vue.component('Pagination', Pagination)
-Vue.component('RightToolbar', RightToolbar)
-Vue.component('Editor', Editor)
-Vue.component('FileUpload', FileUpload)
-Vue.component('ImageUpload', ImageUpload)
-Vue.component('ImagePreview', ImagePreview)
+Vue.component("DictTag", DictTag);
+Vue.component("Pagination", Pagination);
+Vue.component("RightToolbar", RightToolbar);
+Vue.component("Editor", Editor);
+Vue.component("FileUpload", FileUpload);
+Vue.component("ImageUpload", ImageUpload);
+Vue.component("ImagePreview", ImagePreview);
 
-Vue.use(directive)
-Vue.use(plugins)
-Vue.use(VueMeta)
-DictData.install()
+Vue.use(directive);
+Vue.use(plugins);
+Vue.use(VueMeta);
+DictData.install();
 
 /**
  * If you don't want to use mock-server
@@ -73,14 +93,14 @@ DictData.install()
  */
 
 Vue.use(Element, {
-  size: Cookies.get('size') || 'medium' // set element-ui default size
-})
+  size: Cookies.get("size") || "medium", // set element-ui default size
+});
 
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
 
 new Vue({
-  el: '#app',
+  el: "#app",
   router,
   store,
-  render: h => h(App)
-})
+  render: (h) => h(App),
+});

src/router/index.js

@@ -1,10 +1,10 @@
-import Vue from 'vue'
-import Router from 'vue-router'
+import Vue from "vue";
+import Router from "vue-router";
 
-Vue.use(Router)
+Vue.use(Router);
 
 /* Layout */
-import Layout from '@/layout'
+import Layout from "@/layout";
 
 /**
  * Note: 路由配置项
@@ -31,153 +31,152 @@ import Layout from '@/layout'
 // 公共路由
 export const constantRoutes = [
   {
-    path: '/redirect',
+    path: "/redirect",
     component: Layout,
     hidden: true,
     children: [
       {
-        path: '/redirect/:path(.*)',
-        component: () => import('@/views/redirect')
-      }
-    ]
+        path: "/redirect/:path(.*)",
+        component: () => import("@/views/redirect"),
+      },
+    ],
   },
   {
-    path: '/login',
-    component: () => import('@/views/login'),
-    hidden: true
+    path: "/login",
+    component: () => import("@/views/login"),
+    hidden: true,
   },
   {
-    path: '/register',
-    component: () => import('@/views/register'),
-    hidden: true
+    path: "/register",
+    component: () => import("@/views/register"),
+    hidden: true,
   },
   {
-    path: '/404',
-    component: () => import('@/views/error/404'),
-    hidden: true
+    path: "/404",
+    component: () => import("@/views/error/404"),
+    hidden: true,
   },
   {
-    path: '/401',
-    component: () => import('@/views/error/401'),
-    hidden: true
+    path: "/401",
+    component: () => import("@/views/error/401"),
+    hidden: true,
   },
   {
-    path: '',
+    path: "",
     component: Layout,
-    redirect: 'index',
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/index'),
-        name: 'Index',
-        meta: { title: '首页', icon: 'dashboard', affix: true }
-      }
-    ]
+    redirect: "index",
+    children: [],
   },
   {
-    path: '/user',
+    path: "/index",
+    component: () => import("@/views/index"),
+    name: "Index",
+    meta: { title: "首页", icon: "dashboard", affix: true },
+  },
+  {
+    path: "/user",
     component: Layout,
     hidden: true,
-    redirect: 'noredirect',
+    redirect: "noredirect",
     children: [
       {
-        path: 'profile',
-        component: () => import('@/views/system/user/profile/index'),
-        name: 'Profile',
-        meta: { title: '个人中心', icon: 'user' }
-      }
-    ]
-  }
-]
+        path: "profile",
+        component: () => import("@/views/system/user/profile/index"),
+        name: "Profile",
+        meta: { title: "个人中心", icon: "user" },
+      },
+    ],
+  },
+];
 
 // 动态路由，基于用户权限动态去加载
 export const dynamicRoutes = [
   {
-    path: '/system/user-auth',
+    path: "/system/user-auth",
     component: Layout,
     hidden: true,
-    permissions: ['system:user:edit'],
+    permissions: ["system:user:edit"],
     children: [
       {
-        path: 'role/:userId(\\d+)',
-        component: () => import('@/views/system/user/authRole'),
-        name: 'AuthRole',
-        meta: { title: '分配角色', activeMenu: '/system/user' }
-      }
-    ]
+        path: "role/:userId(\\d+)",
+        component: () => import("@/views/system/user/authRole"),
+        name: "AuthRole",
+        meta: { title: "分配角色", activeMenu: "/system/user" },
+      },
+    ],
   },
   {
-    path: '/system/role-auth',
+    path: "/system/role-auth",
     component: Layout,
     hidden: true,
-    permissions: ['system:role:edit'],
+    permissions: ["system:role:edit"],
     children: [
       {
-        path: 'user/:roleId(\\d+)',
-        component: () => import('@/views/system/role/authUser'),
-        name: 'AuthUser',
-        meta: { title: '分配用户', activeMenu: '/system/role' }
-      }
-    ]
+        path: "user/:roleId(\\d+)",
+        component: () => import("@/views/system/role/authUser"),
+        name: "AuthUser",
+        meta: { title: "分配用户", activeMenu: "/system/role" },
+      },
+    ],
   },
   {
-    path: '/system/dict-data',
+    path: "/system/dict-data",
     component: Layout,
     hidden: true,
-    permissions: ['system:dict:list'],
+    permissions: ["system:dict:list"],
     children: [
       {
-        path: 'index/:dictId(\\d+)',
-        component: () => import('@/views/system/dict/data'),
-        name: 'Data',
-        meta: { title: '字典数据', activeMenu: '/system/dict' }
-      }
-    ]
+        path: "index/:dictId(\\d+)",
+        component: () => import("@/views/system/dict/data"),
+        name: "Data",
+        meta: { title: "字典数据", activeMenu: "/system/dict" },
+      },
+    ],
   },
   {
-    path: '/monitor/job-log',
+    path: "/monitor/job-log",
     component: Layout,
     hidden: true,
-    permissions: ['monitor:job:list'],
+    permissions: ["monitor:job:list"],
     children: [
       {
-        path: 'index/:jobId(\\d+)',
-        component: () => import('@/views/monitor/job/log'),
-        name: 'JobLog',
-        meta: { title: '调度日志', activeMenu: '/monitor/job' }
-      }
-    ]
+        path: "index/:jobId(\\d+)",
+        component: () => import("@/views/monitor/job/log"),
+        name: "JobLog",
+        meta: { title: "调度日志", activeMenu: "/monitor/job" },
+      },
+    ],
   },
   {
-    path: '/tool/gen-edit',
+    path: "/tool/gen-edit",
     component: Layout,
     hidden: true,
-    permissions: ['tool:gen:edit'],
+    permissions: ["tool:gen:edit"],
     children: [
       {
-        path: 'index/:tableId(\\d+)',
-        component: () => import('@/views/tool/gen/editTable'),
-        name: 'GenEdit',
-        meta: { title: '修改生成配置', activeMenu: '/tool/gen' }
-      }
-    ]
-  }
-]
+        path: "index/:tableId(\\d+)",
+        component: () => import("@/views/tool/gen/editTable"),
+        name: "GenEdit",
+        meta: { title: "修改生成配置", activeMenu: "/tool/gen" },
+      },
+    ],
+  },
+];
 
 // 防止连续点击多次路由报错
 let routerPush = Router.prototype.push;
 let routerReplace = Router.prototype.replace;
 // push
 Router.prototype.push = function push(location) {
-  return routerPush.call(this, location).catch(err => err)
-}
+  return routerPush.call(this, location).catch((err) => err);
+};
 // replace
 Router.prototype.replace = function push(location) {
-  return routerReplace.call(this, location).catch(err => err)
-}
+  return routerReplace.call(this, location).catch((err) => err);
+};
 
 export default new Router({
-  mode: 'history', // 去掉url中的#
+  mode: "history", // 去掉url中的#
   scrollBehavior: () => ({ y: 0 }),
-  routes: constantRoutes
-})
+  routes: constantRoutes,
+});

src/views/login.vue

@@ -88,7 +88,7 @@
 </template>
 
 <script>
-import NavigationBar from "@/components/NavigationBar";
+import NavigationBar from "@/components/NavigationBar/index.vue";
 import { getCodeImg } from "@/api/login";
 import Cookies from "js-cookie";
 import { encrypt, decrypt } from "@/utils/jsencrypt";
@@ -103,7 +103,7 @@ export default {
       codeUrl: "",
       loginForm: {
         username: "admin",
-        password: "admin123",
+        password: "Xingyu@2022",
         rememberMe: false,
         code: "",
         uuid: "",