From 6091902ba4c4d147fe3cc43a0292294cc023faab Mon Sep 17 00:00:00 2001
From: wally <18603454788@163.com>
Date: Sun, 21 Nov 2021 15:30:55 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=99=BB=E5=BD=95=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E5=AF=86=E7=A0=81;=E5=8F=8A=E8=B7=AF=E7=94=B1\=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc.js                 |   1 +
 src/App.vue                  | 101 +++++--------------------------
 src/apis/index.js            |   6 ++
 src/assets/u1.jpg            | Bin 0 -> 72966 bytes
 src/components/navbar.vue    |  57 ++++++++++++++----
 src/routers/index.js         |  28 ++++++++-
 src/store/user.js            |  12 ++--
 src/utils/axios.js           |   2 +-
 src/views/Index.vue          |  95 +++++++++++++++++++++++++++++
 src/views/user/pw-change.vue | 114 +++++++++++++++++++++++++++++++++++
 src/views/user/sign-in.vue   | 106 ++++++++++++++++++++++++++++++++
 11 files changed, 416 insertions(+), 106 deletions(-)
 create mode 100644 src/assets/u1.jpg
 create mode 100644 src/views/Index.vue
 create mode 100644 src/views/user/pw-change.vue
 create mode 100644 src/views/user/sign-in.vue

diff --git a/.eslintrc.js b/.eslintrc.js
index aca78d0..04657c4 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -12,6 +12,7 @@ module.exports = {
   rules: {
     'import/no-unresolved': 0,
     'import/extensions': 0,
+    'import/no-extraneous-dependencies': 0,
     'no-plusplus': 0,
     'no-use-before-define': [
       'error',
diff --git a/src/App.vue b/src/App.vue
index b3748f6..32a40a7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,98 +1,27 @@
+<template>
+  <el-config-provider :locale="local">
+    <el-container>
+      <router-view></router-view>
+    </el-container>
+  </el-config-provider>
+</template>
+
 <script setup>
-import { computed, ref } from 'vue';
 import { useStore } from 'vuex';
-import { useRoute, useRouter } from 'vue-router';
-import Navbar from 'components/navbar.vue';
-import zhCn from 'element-plus/lib/locale/lang/zh-cn';
-import { ElMessage } from 'element-plus';
-import { routes } from '@/routers/index.js';
+import { useRouter } from 'vue-router';
 
-const local = zhCn;
 const store = useStore();
-let timer = null;
-const routeList = ref(routes);
-const menu = computed(() => store.state.menu);
-const activeMenuIndex = ref(0);
-
-// 验证 获取query中u参数 获取token
-const route = useRoute();
 const router = useRouter();
+const userString = sessionStorage.getItem('user');
 
-useRouter()
-  .isReady()
-  .then(async () => {
-    activeMenuIndex.value = routes.findIndex(item => item.name === route.name);
-    const u = computed(() => route.query.u);
-    if (!u.value) {
-      // 获取url中的u参数, 没有提示缺少参数
-      ElMessage.error('缺少用户信息参数');
-    } else {
-      // 根据userId 获取token
-      await store.dispatch('user/getTokenByUserId', u.value);
-    }
-  });
-
-const token = computed(() => store.getters['user/token']);
-// 获取设备数据
-const getDeviceData = async () => {
-  if (token && token.value) {
-    await store.dispatch('device/getDevices');
-    timer && clearTimeout(timer);
-    timer = null;
-  } else {
-    timer = setTimeout(() => {
-      getDeviceData();
-    }, 16);
-  }
-};
-
-getDeviceData();
-
-/**
- * 打开页面
- * @param {string} path 页面路径
- */
-function openPage(path) {
-  const { query } = route;
-  router.push({
-    path,
-    query,
-  });
+if (userString) {
+  const user = JSON.parse(userString);
+  store.commit('user/setUser', user);
+} else {
+  router.push({ name: 'signin' });
 }
 </script>
 
-<template>
-  <el-config-provider :locale="local">
-    <el-container>
-      <el-header style="padding: 0">
-        <Navbar />
-      </el-header>
-      <el-container class="overflow-hidden">
-        <!-- <el-aside width="180px" v-if="menu.show"> -->
-        <el-aside v-if="menu.show" :width="!menu.collapse ? '200px' : '64px'">
-          <el-menu :collapse="menu.collapse" :default-active="activeMenuIndex" class="el-menu-vertical-demo">
-            <el-menu-item
-              v-for="(item, index) in routeList"
-              :key="item.name"
-              :index="index"
-              class="flex items-center"
-              @click="openPage(item.path)"
-            >
-              <i :class="item.meta.icon"></i>
-              <template #title>{{ item.meta.title }}</template>
-            </el-menu-item>
-          </el-menu>
-        </el-aside>
-        <el-main style="padding: 0">
-          <div class="p-4">
-            <router-view></router-view>
-          </div>
-        </el-main>
-      </el-container>
-    </el-container>
-  </el-config-provider>
-</template>
-
 <style>
 html,
 body,
diff --git a/src/apis/index.js b/src/apis/index.js
index eb03322..4cd459d 100644
--- a/src/apis/index.js
+++ b/src/apis/index.js
@@ -9,6 +9,12 @@ const corrosion = `${apiUrl}/gateway/corrosion`;
 // 根据userId 获取token
 export const getToken = userId => http.get(`${users}/userId`, { params: { userId } });
 
+// 登录
+export const signIn = params => http.post(`${users}/signin`, params);
+
+// 修改密码
+export const changePassword = params => http.post(`${users}/password/account`, params);
+
 // 获取设备列表
 export const getDevices = () => http.get(`${corrosion}/devices`);
 
diff --git a/src/assets/u1.jpg b/src/assets/u1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..72a0a3c416827e79382c0aa70b73cee7420b60cd
GIT binary patch
literal 72966
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
JVgSa!@qdb6`bYo(

literal 0
HcmV?d00001

diff --git a/src/components/navbar.vue b/src/components/navbar.vue
index 1876ebf..29d8d0d 100644
--- a/src/components/navbar.vue
+++ b/src/components/navbar.vue
@@ -1,23 +1,56 @@
+<template>
+  <div class="flex items-center justify-between pr-5">
+    <h1 class="text-lg font-medium py-3 px-6">
+      <i
+        v-if="menu.show"
+        :class="{ 'text-gray-800': !menu.collapse, 'text-gray-400': menu.collapse }"
+        class="el-icon-guide mr-2"
+        @click="toggleCollapse"
+      ></i>
+      {{ $route.meta.title || '智能大气腐蚀监测平台' }}
+    </h1>
+
+    <el-dropdown>
+      <span class="flex items-center">
+        <el-avatar class="mr-2" size="small" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
+        <div class="mr-3">{{ account }}</div>
+        <el-icon class="el-icon--right">
+          <ArrowDown />
+        </el-icon>
+      </span>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item @click="openChangePassword">修改密码</el-dropdown-item>
+          <el-dropdown-item @click="signOut">退出登录</el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </div>
+</template>
+
 <script setup>
 import { computed } from 'vue';
 import { useStore } from 'vuex';
+import { useRouter } from 'vue-router';
+import { ArrowDown } from '@element-plus/icons';
 
 const store = useStore();
+const router = useRouter();
 const toggleCollapse = () => {
   console.log('Toggle Collapse');
   store.commit('toggleCollapse');
 };
 const menu = computed(() => store.state.menu);
-</script>
+const account = computed(() => store.getters['user/account']);
 
-<template>
-  <h1 class="text-lg font-medium py-3 px-6 shadow">
-    <i
-      class="el-icon-guide mr-2"
-      :class="{ 'text-gray-800': !menu.collapse, 'text-gray-400': menu.collapse }"
-      @click="toggleCollapse"
-      v-if="menu.show"
-    ></i>
-    {{ $route.meta.title || '智能大气腐蚀监测平台' }}
-  </h1>
-</template>
+// 打开修改密码的页面
+function openChangePassword() {
+  router.push({ name: 'pw-change' });
+}
+
+// 退出登录
+function signOut() {
+  store.commit('user/setUser', null);
+  router.push({ name: 'signin' });
+}
+</script>
diff --git a/src/routers/index.js b/src/routers/index.js
index f4a43e1..204ced6 100644
--- a/src/routers/index.js
+++ b/src/routers/index.js
@@ -67,18 +67,40 @@ export const routes = [
   },
 ];
 
+export const user = [
+  {
+    path: '/corrosion/user/signin',
+    name: 'signin',
+    meta: {},
+    component: () => import('views/user/sign-in.vue'),
+  },
+  {
+    path: '/corrosion/user/pw-change',
+    name: 'pw-change',
+    meta: {},
+    component: () => import('views/user/pw-change.vue'),
+  },
+];
+
 const router = createRouter({
   history: createWebHistory(),
   routes: [
     {
       path: '/',
-      redirect: '/corrosion/overview',
+      redirect: '/corrosion/user/signin',
     },
     {
       path: '/corrosion',
-      redirect: '/corrosion/overview',
+      redirect: '/corrosion/user/signin',
+    },
+    {
+      path: '/corrosion/home',
+      name: 'home',
+      component: () => import('views/Index.vue'),
+      children: routes,
     },
-  ].concat(routes),
+    ...user,
+  ],
 });
 
 export default router;
diff --git a/src/store/user.js b/src/store/user.js
index 72e8d3e..1e0a8b4 100644
--- a/src/store/user.js
+++ b/src/store/user.js
@@ -14,6 +14,10 @@ export default {
       if (!user) return null;
       return user.id;
     },
+    account({ user }) {
+      if (!user) return null;
+      return user.account;
+    },
   },
 
   mutations: {
@@ -25,11 +29,11 @@ export default {
     setUser(state, user) {
       state.user = user;
       if (user) {
-        localStorage.setItem('token', user.token);
-        localStorage.setItem('user', JSON.stringify(user));
+        sessionStorage.setItem('token', user.token);
+        sessionStorage.setItem('user', JSON.stringify(user));
       } else {
-        localStorage.removeItem('token');
-        localStorage.removeItem('user');
+        sessionStorage.removeItem('token');
+        sessionStorage.removeItem('user');
       }
     },
   },
diff --git a/src/utils/axios.js b/src/utils/axios.js
index 0fa61df..e157d45 100644
--- a/src/utils/axios.js
+++ b/src/utils/axios.js
@@ -12,7 +12,7 @@ const instance = Axios.create({
 // request
 instance.interceptors.request.use(
   config => {
-    const token = store.getters['user/token'] || localStorage.getItem('token');
+    const token = store.getters['user/token'] || sessionStorage.getItem('token');
     if (token) {
       config.headers.Authorization = `Bearer ${token}`;
     }
diff --git a/src/views/Index.vue b/src/views/Index.vue
new file mode 100644
index 0000000..df9e754
--- /dev/null
+++ b/src/views/Index.vue
@@ -0,0 +1,95 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useStore } from 'vuex';
+import { useRoute, useRouter } from 'vue-router';
+import Navbar from 'components/navbar.vue';
+import zhCn from 'element-plus/lib/locale/lang/zh-cn';
+import { ElMessage } from 'element-plus';
+import { routes } from '@/routers/index.js';
+
+const local = zhCn;
+const store = useStore();
+const routeList = ref(routes);
+const menu = computed(() => store.state.menu);
+const activeMenuIndex = ref(0);
+
+// 验证 获取query中u参数 获取token
+const route = useRoute();
+const router = useRouter();
+
+// 获取设备数据
+const getDeviceData = async () => {
+  try {
+    await store.dispatch('device/getDevices');
+  } catch (error) {
+    ElMessage.error(error || '获取设备信息失败');
+  }
+};
+
+getDeviceData();
+
+/**
+ * 打开页面
+ * @param {string} path 页面路径
+ */
+function openPage(path) {
+  const { query } = route;
+  router.push({
+    path,
+    query,
+  });
+}
+</script>
+
+<template>
+  <el-config-provider :locale="local">
+    <el-container>
+      <el-header style="padding: 0">
+        <Navbar />
+      </el-header>
+      <el-container class="overflow-hidden">
+        <!-- <el-aside width="180px" v-if="menu.show"> -->
+        <el-aside v-if="menu.show" :width="!menu.collapse ? '200px' : '64px'">
+          <el-menu :collapse="menu.collapse" :default-active="activeMenuIndex" class="el-menu-vertical-demo">
+            <el-menu-item
+              v-for="(item, index) in routeList"
+              :key="item.name"
+              :index="index"
+              class="flex items-center"
+              @click="openPage(item.path)"
+            >
+              <i :class="item.meta.icon"></i>
+              <template #title>{{ item.meta.title }}</template>
+            </el-menu-item>
+          </el-menu>
+        </el-aside>
+        <el-main style="padding: 0">
+          <div class="p-4">
+            <router-view></router-view>
+          </div>
+        </el-main>
+      </el-container>
+    </el-container>
+  </el-config-provider>
+</template>
+
+<style>
+html,
+body,
+#app,
+#app > section {
+  height: 100%;
+}
+
+.el-menu {
+  min-height: 100%;
+}
+
+.el-form--label-top .el-form-item__label {
+  padding-bottom: 0 !important;
+}
+
+.el-form-item {
+  margin-bottom: 10px !important;
+}
+</style>
diff --git a/src/views/user/pw-change.vue b/src/views/user/pw-change.vue
new file mode 100644
index 0000000..01fdc1c
--- /dev/null
+++ b/src/views/user/pw-change.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="wrap">
+    <div class="content border rounded-md">
+      <h1 class="text-2xl text-center font-bold mb-10 text-gray-700">智能大气腐蚀监测云平台</h1>
+      <el-form ref="passwordChangeFormRef" :model="passwordChangeForm" :rules="rules" label-width="70px" status-icon>
+        <el-form-item class="mb-3" label="账号" prop="account" style="margin-bottom: 22px !important">
+          <el-input v-model="passwordChangeForm.account" type="text"></el-input>
+        </el-form-item>
+
+        <el-form-item label="旧密码" prop="passwordOld" style="margin-bottom: 22px !important">
+          <el-input v-model="passwordChangeForm.passwordOld" type="password"></el-input>
+        </el-form-item>
+
+        <el-form-item label="新密码" prop="passwordNew" style="margin-bottom: 22px !important">
+          <el-input v-model="passwordChangeForm.passwordNew" type="password"></el-input>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button class="float-left" style="display: block; margin-bottom: 22px !important" type="primary" @click="onSubmit">
+            确认修改
+          </el-button>
+          <el-button class="float-right" type="text">
+            <router-link to="signin">返回登录</router-link>
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue';
+import { changePassword } from 'apis';
+import { ElMessage } from 'element-plus';
+import { useStore } from 'vuex';
+import { useRouter } from 'vue-router';
+
+const store = useStore();
+const router = useRouter();
+const passwordChangeFormRef = ref(null);
+const passwordChangeForm = reactive({
+  account: '',
+  passwordOld: '',
+  passwordNew: '',
+});
+
+const rules = reactive({
+  account: [
+    {
+      required: true,
+      message: '请输入账号',
+      trigger: 'blur',
+    },
+  ],
+  passwordOld: [
+    {
+      required: true,
+      message: '请输入旧密码',
+      trigger: 'blur',
+    },
+  ],
+  passwordNew: [
+    {
+      required: true,
+      message: '请输入新密码',
+      trigger: 'blur',
+    },
+  ],
+});
+
+// 提交
+function onSubmit() {
+  passwordChangeFormRef.value.validate(async valid => {
+    if (valid) {
+      try {
+        const params = { ...passwordChangeForm };
+        const resData = await changePassword(params);
+        store.commit('user/setUser', resData);
+        ElMessage.success('修改成功');
+        setTimeout(() => {
+          // 跳转到首页
+          router.push({ name: 'signin' });
+        }, 1000);
+      } catch (error) {
+        ElMessage.error(error);
+      }
+    }
+  });
+}
+</script>
+
+<style scoped>
+.wrap {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: url('@/assets/u1.jpg') no-repeat center center;
+  background-size: cover;
+}
+
+.content {
+  width: 480px;
+  padding: 30px;
+  background: #fff;
+}
+
+.content :deep(.el-form-item) {
+  display: flex;
+  margin-bottom: 22px !important;
+}
+</style>
diff --git a/src/views/user/sign-in.vue b/src/views/user/sign-in.vue
new file mode 100644
index 0000000..50ef5aa
--- /dev/null
+++ b/src/views/user/sign-in.vue
@@ -0,0 +1,106 @@
+<template>
+  <div class="wrap">
+    <div class="content border rounded-md">
+      <h1 class="text-2xl text-center font-bold mb-10 text-gray-700">智能大气腐蚀监测云平台</h1>
+      <el-form ref="signInFormRef" :model="signInForm" :rules="rules" label-width="60px" status-icon>
+        <el-form-item class="mb-3" label="账号" prop="username" style="margin-bottom: 22px !important">
+          <el-input v-model="signInForm.username" type="text"></el-input>
+        </el-form-item>
+
+        <el-form-item label="密码" prop="password" style="margin-bottom: 22px !important">
+          <el-input v-model="signInForm.password" type="password"></el-input>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button class="float-left" style="display: block; margin-bottom: 22px !important" type="primary" @click="onSubmit">
+            立即登录
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue';
+import { signIn } from 'apis';
+import { ElMessage } from 'element-plus';
+import { useStore } from 'vuex';
+import { useRouter } from 'vue-router';
+
+const store = useStore();
+const router = useRouter();
+const signInFormRef = ref(null);
+const signInForm = reactive({
+  username: '',
+  password: '',
+});
+
+const rules = reactive({
+  username: [
+    {
+      required: true,
+      message: '请输入账号',
+      trigger: 'blur',
+    },
+  ],
+  password: [
+    {
+      required: true,
+      message: '请输入密码',
+      trigger: 'blur',
+    },
+  ],
+});
+
+// 提交
+function onSubmit() {
+  signInFormRef.value.validate(async valid => {
+    if (valid) {
+      try {
+        const params = {
+          client: 1,
+          data: {
+            identifier: signInForm.username,
+            credential: signInForm.password,
+          },
+          type: 3,
+        };
+        const resData = await signIn(params);
+        store.commit('user/setUser', resData);
+        ElMessage.success('登录成功， 欢迎回来');
+        setTimeout(() => {
+          // 跳转到首页
+          router.push({ name: 'overview' });
+        }, 1000);
+      } catch (error) {
+        ElMessage.error(error);
+      }
+    }
+  });
+}
+</script>
+
+<style scoped>
+.wrap {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: url('@/assets/u1.jpg') no-repeat center center;
+  background-size: cover;
+}
+
+.content {
+  width: 480px;
+  padding: 30px;
+  background: #fff;
+}
+
+.content :deep(.el-form-item) {
+  display: flex;
+  margin-bottom: 22px !important;
+}
+</style>