1. 添加预设功能文件夹

2. 修改登录页面
3. 添加导航与状态树

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "ant-design-vue": "^1.7.0",
+    "axios": "^0.21.0",
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
     "vue-router": "^3.4.8",

src/components/Login.vue

@@ -1,13 +1,196 @@
 <template>
+<a-spin :spinning="spinning">
+  <div :style="{ background: isPhone ? 'none' : 'url(' + bgimg + ')', height:'100vh', }">
+    <img :src="img1" v-if="!isPhone" style="position:absolute;top:0;left:0;" />
+    <img :src="img2" v-if="!isPhone" style="position:absolute;bottom:0;right:0;" />
+    <div :id=" isPhone ? '' : 'login-contain'">
+      <!-- <el-row style="height:35px;" v-if="!isPhone">
+        <el-alert :closable="false" title="水质检测平台" type="error" effect="dark"></el-alert>
+      </el-row> -->
+      <a-row style="height:480px;background:#0E6F75;">
+        <a-col
+          :span="15"
+          :style="{backgroundImage:'url(' + logobg + ')', height:'480px', overflow:'hidden', textAlign:'center'}"
+          id="login-left"
+          v-if="!isPhone"
+         >
+          <img :src="logo" />
+          <p>
+            <span style="color:white;font-size: 26px;font-weight: bold;">CVEO水质监测平台</span>
+          </p>
+        </a-col>
+        <a-col :span=" isPhone ? 24 : 9" style="height:480px;overflow:hidden;">
+          <a-form ref="form" :model="form" label-width="0" style="margin:50px;text-align:center;">
+            <a-form-item style="text-align:center;">
+              <img :src="avter" />
+            </a-form-item>
+            <a-form-item>
+              <a-input prefix-icon="el-icon-user-solid" v-model="form.utel" placeholder="请输入用户名"></a-input>
+            </a-form-item>
+            <a-form-item>
+              <a-input
+                prefix-icon="el-icon-lock"
+                type="password"
+                v-model="form.upass"
+                autocomplete="off"
+                placeholder="请输入密码"
+              ></a-input>
+            </a-form-item>
+            <a-form-item>
+              <a-row>
+                <a-col :span="12">
+                  <a-input
+                    prefix-icon="el-icon-lock"
+                    v-model="form.checkcode"
+                    placeholder="请输入验证码"
+                  />
+                </a-col>
+                <a-col :span="12">
+                  <input
+                    type="button"
+                    id="code"
+                    @click="createCode"
+                    class="verification1"
+                    v-model="checkCode"
+                  />
+                </a-col>
+              </a-row>
+            </a-form-item>
+            <a-form-item>
+              <a-row :gutter="10">
+                <a-col :span="24">
+                  <a-button style="width:100%;" type="danger" @click="login()">登录</a-button>
+                </a-col>
+                <!-- <a-col :span="24">
+                  <a-button style="width:100%;" @click="reset()">重置</a-button>
+                </a-col>-->
+              </a-row>
 
+              <!-- <a-button @click="reset()">重置</a-button> -->
+            </a-form-item>
+          </a-form>
+        </a-col>
+      </a-row>
+    </div>
+  </div>
+</a-spin>
 </template>
 
 <script>
-export default {
 
+import { login, logout } from "@/utils/http";
+
+export default {
+  data() {
+    return {
+      msg: "",
+      form: {
+        utel: "",
+        upass: "",
+        checkcode: ""
+      },
+      loading: null,
+      img1: "",
+      img2: "",
+      logo: "",
+      bgimg: "",
+      avter: "",
+      logobg: "",
+      checkCode: "",
+      random: [],
+      spinning: false,
+    };
+  },
+  computed: {
+    isPhone() {
+      return this.$store.getters.phone
     }
+  },
+  methods: {
+    async login() {
+      try {
+        this.spinning = true;
+        // dev 
+        // if (
+        //   this.form.checkcode.toUpperCase() !== this.checkCode.toUpperCase()
+        // ) {
+        //   this.$message.error("验证码错误！");
+        //   this.createCode();
+        //   this.loading.close();
+        //   return;
+        // }
+        let data = await login(this.form.utel, this.form.upass, 'tt', 'tt');
+        this.$store.commit("login", data);
+        let path = decodeURIComponent(this.$route.query.redirect || "/");
+        this.$router.push({ path: path });
+      } catch (e) {
+        this.$message.error("账号或密码错误！");
+        this.createCode();
+      } finally {
+        this.spinning = false;
+      }
+    },
+    reset() {
+      this.form.utel = "";
+      this.form.upass = "";
+      this.form.checkcode = "";
+    },
+    checkDingding() {
+
+    },
+    createCode() {
+      let code = "";
+      var codeLength = 4; //验证码的长度
+
+      for (var i = 0; i < codeLength; i++) {
+        //循环操作
+        var index = Math.floor(Math.random() * this.random.length); //取得随机数的索引（0~35）
+        code += this.random[index]; //根据索引取得随机数加到code上
+      }
+      this.checkCode = code; //把code值赋给验证码
+    }
+  },
+  created() {
+    for (var i = 0; i < 10; i++) {
+      this.random.push(i);
+    }
+    for (var i = 65; i < 91; i++) {
+      this.random.push(String.fromCharCode(i));
+    }
+    for (var i = 97; i < 123; i++) {
+      this.random.push(String.fromCharCode(i));
+    }
+  },
+  async mounted() {
+    
+    this.$store.commit('phone', document.body.clientWidth < 760)
+    this.img1 = require("../assets/login-img.png");
+    this.img2 = require("../assets/login-img3.png");
+    this.logo = require("../assets/login-logo.png");
+    this.bgimg = require("../assets/back.png");
+    this.avter = require("../assets/login-portrait.png");
+    this.logobg = require("../assets/back.png");
+    this.createCode();
+  }
+};
 </script>
 
 <style>
-
+#login-contain {
+  width: 852px;
+  height: 480px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  margin: auto;
+  box-shadow: 0px 0px 32px #0c2d36;
+}
+#code {
+  font-size: 18px;
+  letter-spacing: 3px;
+  color: #031424;
+  background: #f2f2f5;
+}
 </style>

src/components/admin/Index.vue

@@ -0,0 +1,13 @@
+<template>
+  
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/components/logs/Index.vue

@@ -0,0 +1,13 @@
+<template>
+  
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/components/map/Index.vue

@@ -0,0 +1,13 @@
+<template>
+  
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/components/search/Index.vue

@@ -0,0 +1,13 @@
+<template>
+  
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/utils/http.js

@@ -0,0 +1,34 @@
+import axios from "axios";
+
+const backendUrl = '/backend/'
+const geoServerUrl = '/geoserver/'
+
+export const instance = axios.create({
+    baseURL: backendUrl
+})
+
+export async function login(username, passwd, uuid, capthe)
+{
+    let response = await instance.post('auth', {
+        'username':username,
+        'password':passwd,
+        'uuid':uuid,
+        'captch':capthe
+    })
+    let data = await response.data
+    let token = data.access_token
+    instance.defaults.headers['Authorization'] = "JWT " + token;
+
+    response = await instance.get('current/')
+    data = await response.data
+    return data
+}
+
+export function setAuth(auth) {
+    instance.defaults.headers['Authorization'] = 'JWT ' + auth;
+}
+
+export async function logout()
+{
+    instance.defaults.headers['Authorization'] = ''
+}

src/utils/router.js

@@ -1,6 +1,8 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import Index from '@/components/Main'
+import Login from '@/components/Login'
+import store from './store'
 
 Vue.use(Router)
 
@@ -14,11 +16,26 @@ const routes = [
         name: 'index',
         component: Index,
         meta: {
-            requireAuth: false
+            requireAuth: true
         }
+    },
+    {
+        path: '/login',
+        name: 'login',
+        component: Login
     }
 ]
 
+if (sessionStorage.getItem("store")) {
+    store.replaceState(Object.assign({}, store.state, JSON.parse(sessionStorage.getItem("store"))))
+    if (store.state.login) {
+      if (store.state.uinfo) {
+        setAuth(store.state.uinfo.token);
+      }
+    }
+}
+  
+
 const router = new Router({
     base: process.env.BASE_URL,
     routes

src/utils/store.js

@@ -3,10 +3,103 @@ import Vuex from 'vuex'
 
 Vue.use(Vuex)
 
+const storeToSession = store => {
+    // 当 store 初始化后调用
+    store.subscribe((mutation, state) => {
+      if (sessionStorage.getItem('store')){
+          sessionStorage.removeItem('store')
+      }
+      console.log(store)
+      sessionStorage.setItem('store', JSON.stringify(state))
+    })
+}
+
 const store = new Vuex.Store({
     state: {
-        
+        userInfo:null,
+        phone: document.body.clientWidth < 800,
+        login:false,
+        loginTime:0,
+        second: 60 * 60 * 2,
+        logs:'',
+        data:{},
+        currentComp: 'map',
+        cacheData:{}
+    },
+    mutations: {
+        phone(state, o) {
+            state.phone = o;
+        },
+        login(state, o) {
+            state.userInfo = o
+            state.login = true
+            state.loginTime = new Date().getTime()
+        },
+        logout(state)
+        {
+            state.userInfo=null
+            state.login = false
+        },
+    },
+    getters: {
+        phone(state) {
+            return state.phone;
+        },
+        isLogin(state) {
+            if (state.login && state.userInfo !== null )
+            {
+                if ((new Date().getTime() - state.loginTime) < state.second * 1000 )
+                {
+                    return true
                 }
+            }
+            return false
+        },
+        isSuper(state, getters) {
+            if(getters.isLogin)
+            {
+                if(state.userInfo.permission == 0xfff)
+                {
+                    return true
+                }
+            }
+            return false
+        },
+        isProject(state, getters)
+        {
+            if(getters.isLogin)
+            {
+                if(state.userInfo.permission == 0x0ff)
+                {
+                    return true
+                }
+            }
+            return false
+        },
+        isAnayone(state, getters)
+        {
+            if(getters.isLogin)
+            {
+                if(state.userInfo.permission == 0x000)
+                {
+                    return true
+                }
+            }
+            return false
+        },
+        isNormal(state, getters)
+        {
+            if(getters.isLogin)
+            {
+                if(state.userInfo.permission == 0x00f)
+                {
+                    return true
+                }
+            }
+            return false
+        }
+    },
+    plugins: [storeToSession]
 })
 
 export default store

vue.config.js

@@ -10,7 +10,7 @@ module.exports = {
         proxy: {
             '/backend': {
                 // target: 'http://223.75.53.208:8081',
-                target: 'http://127.0.0.1:8000',
+                target: 'http://127.0.0.1:7788',
             }
         }
     },