登录

package.json

@@ -10,15 +10,17 @@
   },
   "dependencies": {
     "@types/node": "^20.1.0",
+    "animate.css": "^4.1.1",
     "axios": "^1.3.4",
     "element-plus": "^2.3.1",
     "sass": "^1.60.0",
+    "uuid": "^9.0.0",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6",
-    "vuex": "^4.1.0",
-    "animate.css": "^4.1.1"
+    "vuex": "^4.1.0"
   },
   "devDependencies": {
+    "@types/uuid": "^9.0.2",
     "@vitejs/plugin-vue": "^4.1.0",
     "typescript": "^4.9.3",
     "vite": "^4.2.0",

src/App.vue

@@ -1,6 +1,8 @@
 <template>
-  <div style="overflow: hidden">
-    <router-view/>
+  <div style="overflow: hidden;">
+    <div style="z-index: 1; position: relative;">
+      <router-view/>
+    </div>
     <LoginCom v-if="!isLogin" class="login"/>
   </div>
 </template>
@@ -30,7 +32,7 @@ export default defineComponent({
     const locale = ref(zhLocale)
     const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
     const isLogin = computed(() => {
-      return localStorage.getItem('scToken')
+      return store.getters['app/isLogin']
     })
 
     return {
@@ -49,10 +51,10 @@ html, body {
   height: 100%;
 }
 .login {
-  position: absolute;
+  position: fixed;
   width: 100%;
   height: 100%;
-  z-index: 99999;
+  z-index: 2;
   top: 0;
   left: 0;
 }

src/api/index.ts

@@ -1,9 +1,9 @@
 import * as request from './request'
 
-export const handle = ({url, params, method}: { [index: string]: any}) => {
+export const handle = ({url, params, method, config}: { [index: string]: any}) => {
   const methodLow: string = method.toLowerCase()
   // @ts-ignore
-  return request[methodLow]({url, params});
+  return request[methodLow]({url, params, config});
 }
 
 const files = import.meta.globEager("/src/api/module/*.ts")

src/api/module/user.ts

@@ -1,9 +0,0 @@
-import { handle } from '../index'
-
-const suffix = 'api'
-
-export const getInfo = (params: any) => handle({
-  url: `/${suffix}/info`,
-  method: 'get',
-  params
-})

src/api/module/ztpt.ts

@@ -0,0 +1,29 @@
+import { handle } from '../index'
+
+const suffix = 'api'
+
+export const getLoginCode = (params: any) => handle({
+  url: `/${suffix}/api-idaas/validata/code/${params}`,
+  method: 'get',
+  config: {
+    responseType: 'blob'
+  }
+})
+
+export const login = (params: any) => handle({
+  url: `/${suffix}/api-idaas/idaas/sso/login`,
+  method: 'post',
+  params
+})
+
+export const getUserInfo = (params: any) => handle({
+  url: `/${suffix}/api-idaas/idaas/sso/user/info`,
+  method: 'get',
+  params
+})
+
+export const logout = (params: any) => handle({
+  url: `/${suffix}/api-idaas/mq/user/logout`,
+  method: 'get',
+  params
+})

src/api/request.ts

@@ -1,4 +1,5 @@
 import axios from 'axios'
+import { ElMessage } from "element-plus";
 
 const instance = axios.create({
   timeout: 10000
@@ -14,19 +15,43 @@ instance.interceptors.request.use((config: any) => {
 // 添加响应拦截器
 instance.interceptors.response.use((response: any) => {
   // 对响应数据做点什么
-  return response
+  if (response.status === 200) {
+    return response.data
+  }
 }, (error: any) => {
+  ElMessage.error(error)
+  console.error('错误接口：' + error.config.url)
   // 对响应错误做点什么
   return Promise.reject(error)
 })
 
-export const get = ({url, params}: { [index: string]: any }) => {
+export const get = ({url, params, config = {}}: { [index: string]: any }) => {
   return new Promise((resolve, reject) => {
     let paramUrl = url
     if (params) {
       paramUrl += `?${params}`
     }
-    instance.get(paramUrl).then((res: any) => {
+    instance.get(paramUrl, {
+      headers: {
+        sessionToken: localStorage.getItem('sc_token')
+      },
+      ...config
+    }).then((res: any) => {
+      resolve(res)
+    }).catch((err) => {
+      reject(err);
+    })
+  })
+}
+
+export const post = ({url, params, config = {}}: { [index: string]: any }) => {
+  return new Promise((resolve, reject) => {
+    instance.post(url, params, {
+      headers: {
+        sessionToken: localStorage.getItem('sc_token')
+      },
+      ...config
+    }).then((res: any) => {
       resolve(res)
     }).catch((err) => {
       reject(err);

src/router/index.ts

@@ -1,4 +1,5 @@
 import { RouteRecordRaw, createRouter, createWebHistory } from 'vue-router'
+import store from '@/store/index'
 const routes = [
     {
         path: '/',
@@ -15,8 +16,13 @@ const routes = [
 ]
 
 const router = createRouter({
-  history: createWebHistory(),
-  routes,
+    history: createWebHistory(),
+    routes,
 });
 
+router.beforeEach((to, from, next) => {
+    store.dispatch('app/LOAD_USER_INFO').then(() => {
+        next()
+    })
+})
 export default router;

src/store/modules/app.js

@@ -0,0 +1,57 @@
+import * as api from '@/api/index'
+import {ElMessageBox} from "element-plus";
+
+const state = {
+	apiProxy: {
+		EzServer6Api: 'EzServer6-api',	// 地图底图代理
+	},
+	userInfo: null
+}
+
+const getters = {
+	isLogin(state) {
+		return localStorage.getItem('sc_token')
+	}
+}
+
+const mutations = {
+	SET_USER_INFO(state, data) {
+		state.userInfo = data
+	}
+}
+
+const actions = {
+	LOAD_USER_INFO({ commit }, refresh = false) {
+		return new Promise((resolve, reject) => {
+			if (refresh || !state.userInfo) {
+				api.default.getUserInfo().then(res => {
+					commit('SET_USER_INFO', res.userInfo)
+					resolve(res.userInfo)
+				}).catch(() => {
+				})
+			} else {
+				resolve()
+			}
+		})
+	},
+	EXIT_LOGIN({ commit }) {
+		ElMessageBox.confirm('确定进行[退出]操作?', '提示', {
+			confirmButtonText: '确定',
+			cancelButtonText: '取消',
+			type: 'warning'
+		}).then(() => {
+			api.default.logout()
+			localStorage.removeItem('sc_token')
+			location.reload()
+		}).catch(() => {
+		})
+	},
+}
+
+export default {
+	namespaced: true,
+	state,
+	getters,
+	mutations,
+	actions
+}

src/store/modules/app.ts

@@ -1,18 +0,0 @@
-
-const state = {
-	apiProxy: {
-		EzServer6Api: 'EzServer6-api',	// 地图底图代理
-	},
-}
-const mutations = {
-}
-
-const actions = {
-}
-
-export default {
-	namespaced: true,
-	state,
-	mutations,
-	actions
-}

src/views/login/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="login-main">
-    <div class="login-main-block">
+    <div class="login-main-block" v-loading="loadingForm" element-loading-background="rgba(0, 0, 0, 0.7)">
       <div class="lmb-head">
         欢迎使用社管总体平台
       </div>
@@ -28,19 +28,19 @@
                 </template>
               </el-input>
             </el-form-item>
-            <el-form-item class="code" label="" prop="code" :rules="[
+            <el-form-item class="code" label="" prop="validCode" :rules="[
               { required: true, trigger: 'blur', message: '请输入验证码' }]">
-              <el-input @keyup.enter="onNormalClick" v-model="form.code" placeholder="验证码" class="code">
+              <el-input @keyup.enter="onNormalClick" v-model="form.validCode" placeholder="验证码">
                 <template v-slot:prefix>
                   <img src="./img/login-bg-code.png"/>
                 </template>
-                <template v-slot:suffix>
-                  <img v-if="codeImg" :src="codeImg"/>
-                </template>
               </el-input>
+              <div class="code-img __hover" @click="initCode" v-loading="loadingCode">
+                <img :src="codeImg"/>
+              </div>
             </el-form-item>
           </el-form>
-          <div class="__hover login-button">安全登录</div>
+          <div class="__hover login-button" @click="onNormalClick">安全登录</div>
         </div>
       </div>
     </div>
@@ -62,6 +62,9 @@ import {
 } from 'vue'
 import {useStore} from 'vuex'
 import {useRouter, useRoute} from 'vue-router'
+import { v4 } from "uuid";
+import { FormInstance } from 'element-plus';
+import { ElMessage } from "element-plus";
 
 export default defineComponent({
   name: '',
@@ -71,16 +74,57 @@ export default defineComponent({
     const router = useRouter();
     const route = useRoute();
     const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const ref_form = ref<FormInstance>()
     const state = reactive({
-      form: {},
-      codeImg: ''
+      form: {
+        deviceId: '',
+        username: '',
+        password: '',
+        validCode: ''
+      },
+      codeImg: '',
+      loadingCode: false,
+      loadingForm: false,
     })
     const onNormalClick = () => {
-
+      if (!ref_form.value) return
+      ref_form.value.validate((valid, fields) => {
+        if (valid) {
+          state.loadingForm = true
+          that.$api.login(state.form).then(res => {
+            if (res.code === 0) {
+              ElMessage.success(res.msg)
+              localStorage.setItem('sc_token', res.sessionToken)
+              location.reload()
+            } else {
+              ElMessage.success(res.msg)
+            }
+            state.loadingForm = false
+          }).catch(() => {
+            state.loadingForm = false
+          })
+        }
+      })
     }
+    const initCode = () => {
+      state.loadingCode = true
+      state.form.deviceId = v4()
+      that.$api.getLoginCode(state.form.deviceId).then((res: BlobPart) => {
+        const myBlob = new window.Blob([res], { type: 'image/gif'})
+        state.codeImg = window.URL.createObjectURL(myBlob)
+        state.loadingCode = false
+      }).catch(() => {
+        state.loadingCode = false
+      })
+    }
+    onMounted(() => {
+      initCode()
+    })
     return {
       ...toRefs(state),
-      onNormalClick
+      onNormalClick,
+      ref_form,
+      initCode
     }
   },
 })
@@ -217,6 +261,24 @@ export default defineComponent({
                 }
               }
             }
+            &.code {
+              $codeImgWidth: 156px;
+              .el-input {
+                width: calc(100% - #{$codeImgWidth} - 12px);
+              }
+              .code-img {
+                box-sizing: border-box;
+                margin-left: auto;
+                width: $codeImgWidth;
+                height: 100%;
+                background: rgba(107,185,248,0.4);
+                border: 1px solid #17396F;
+                >img {
+                  width: 100%;
+                  height: 100%;
+                }
+              }
+            }
           }
         }
         .login-button {

src/views/pc/index.vue

@@ -31,6 +31,19 @@
         </el-input>
       </div>
       <div class="pc-info-download __hover">下载</div>
+      <el-dropdown v-if="$store.getters['app/isLogin']">
+        <div class="pc-info-user">
+          <img src="../common/img/info-user-icon.png" style="margin-right: 8px"/>
+          <span style="margin-right: 4px">{{$store.state.app.userInfo.displayName}}</span>
+          <span style="margin-right: 6px">{{$store.state.app.userInfo.organizations[0].organizationName}}</span>
+          <img src="../common/img/info-user-icon-suffix.png"/>
+        </div>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item @click="$store.dispatch('app/EXIT_LOGIN')">退出</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
     </div>
     <div class="pc-href">
       <div class="pc-href-before-block"/>
@@ -256,7 +269,22 @@ export default defineComponent({
         font-size: 14px;
         font-weight: normal;
         color: #FFFFFF;
-        margin: 0 22px 0 10px;
+        margin: 0 10px 0 10px;
+      }
+      .pc-info-user {
+        box-sizing: border-box;
+        margin-right: 13px;
+        display: flex;
+        align-items: center;
+        padding: 5px 14px;
+        background: rgba(23,57,111,0.2);
+        border: 1px solid #82D6FF;
+        border-radius: 16px;
+        outline: none;
+        font-size: 14px;
+        font-family: Adobe Heiti Std;
+        font-weight: normal;
+        color: #82D6FF;
       }
     }
     $pcHrefRight: 100px;

src/views/screen/index.vue

@@ -30,7 +30,23 @@
           </template>
         </el-input>
       </div>
+      <div class="screen-info-message __hover">
+        <img src="../common/img/info-message-icon.png"/>
+      </div>
       <div class="screen-info-download __hover">下载</div>
+      <el-dropdown v-if="$store.getters['app/isLogin']">
+        <div class="screen-info-user">
+          <img src="../common/img/info-user-icon.png" style="margin-right: 8px"/>
+          <span style="margin-right: 4px">{{$store.state.app.userInfo.displayName}}</span>
+          <span style="margin-right: 6px">{{$store.state.app.userInfo.organizations[0].organizationName}}</span>
+          <img src="../common/img/info-user-icon-suffix.png"/>
+        </div>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item @click="$store.dispatch('app/EXIT_LOGIN')">退出</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
     </div>
     <div class="screen-href">
       <template v-for="(item, index) in HrefMapper">
@@ -256,7 +272,7 @@ export default defineComponent({
         }
       }
       .screen-info-input {
-        margin-left: 57px;
+        margin-left: 30px;
         width: 210px;
         height: 28px;
         border-radius: 14px;
@@ -279,6 +295,18 @@ export default defineComponent({
           }
         }
       }
+      .screen-info-message {
+        width: 54px;
+        height: 28px;
+        background: #17396F;
+        border-radius: 14px;
+        display: grid;
+        place-items: center;
+        font-size: 14px;
+        font-weight: normal;
+        color: #FFFFFF;
+        margin-left: 10px;
+      }
       .screen-info-download {
         width: 54px;
         height: 28px;
@@ -289,7 +317,22 @@ export default defineComponent({
         font-size: 14px;
         font-weight: normal;
         color: #FFFFFF;
-        margin: 0 30px 0 10px;
+        margin: 0 10px 0 10px;
+      }
+      .screen-info-user {
+        box-sizing: border-box;
+        margin-right: 13px;
+        display: flex;
+        align-items: center;
+        padding: 5px 14px;
+        background: rgba(23,57,111,0.2);
+        border: 1px solid #82D6FF;
+        border-radius: 16px;
+        outline: none;
+        font-size: 14px;
+        font-family: Adobe Heiti Std;
+        font-weight: normal;
+        color: #82D6FF;
       }
     }
     .screen-href {

vite.config.ts

@@ -21,7 +21,7 @@ export default defineConfig({
     proxy: {
       '/api': {
         // target: 'http://localhost:8080/',
-        target: 'http://120.25.74.229:8000/',
+        target: 'http://127.0.0.1:3333/',
         // target: 'http://192.168.1.110:8080/',
         changeOrigin: true,
         rewrite: path => {