package.json
@@ -22,7 +22,10 @@ "pinia": "^2.2.4", "pinia-plugin-persist": "^1.0.0", "vue": "^3.5.12", "vue-router": "^4.4.5" "vue-router": "^4.4.5", "crypto-js": "^4.1.1", "js-base64": "^3.7.4", "js-md5": "^0.7.3" }, "devDependencies": { "@vitejs/plugin-basic-ssl": "^1.1.0", pnpm-lock.yaml
@@ -20,9 +20,18 @@ axios: specifier: ^1.7.7 version: 1.7.7 crypto-js: specifier: ^4.1.1 version: 4.1.1 element-plus: specifier: ^2.8.6 version: 2.8.6(vue@3.5.12) js-base64: specifier: ^3.7.4 version: 3.7.4 js-md5: specifier: ^0.7.3 version: 0.7.3 nprogress: specifier: ^0.2.0 version: 0.2.0 @@ -906,6 +915,10 @@ resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==} dev: true /crypto-js@4.1.1: resolution: {integrity: sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw==} dev: false /csstype@3.1.3: resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==} @@ -1155,6 +1168,14 @@ engines: {node: '>=0.12.0'} dev: true /js-base64@3.7.4: resolution: {integrity: sha512-wpM/wi20Tl+3ifTyi0RdDckS4YTD4Lf953mBRrpG8547T7hInHNPEj8+ck4gB8VDcGyeAWFK++Wb/fU1BeavKQ==} dev: false /js-md5@0.7.3: resolution: {integrity: sha512-ZC41vPSTLKGwIRjqDh8DfXoCrdQIyBgspJVPXHBGu4nZlAEvG3nf+jO9avM9RmLiGakg7vz974ms99nEV0tmTQ==} dev: false /js-tokens@9.0.0: resolution: {integrity: sha512-WriZw1luRMlmV3LGJaR6QOJjWwgLUTf89OwT2lUOyjX2dJGBwgmIkbcz+7WFZjrZM635JOIR517++e/67CP9dQ==} dev: true public/images/header.pngsrc/api/user.js
New file @@ -0,0 +1,22 @@ import request from 'utils/http' export const loginByUsername = (tenantId, deptId, roleId, username, password, type, key, code) => request({ url: '/blade-auth/oauth/token', method: 'post', headers: { 'Tenant-Id': tenantId, 'Dept-Id': deptId || '', 'Role-Id': roleId || '', 'Captcha-Key': key, 'Captcha-Code': code, }, params: { tenantId, username, password, grant_type: 'password', scope: 'all', type, }, }) src/assets/images/2Dcesium.png
New file @@ -0,0 +1,2 @@ let baseUrl = import.meta.env.VITE_APP_API; export { baseUrl }; src/hooks/initMap.js
@@ -2,7 +2,7 @@ * @Author: shuishen 1109946754@qq.com * @Date: 2024-10-25 15:09:55 * @LastEditors: shuishen 1109946754@qq.com * @LastEditTime: 2024-10-28 19:42:36 * @LastEditTime: 2024-10-30 18:09:34 * @FilePath: \bigScreen\src\hooks\initMap.js * @Description: * @@ -10,11 +10,11 @@ */ let viewer = null const { VITE_APP_BASE } = import.meta.env import { useMap } from 'store/map' import { nextTick } from 'vue' export function readyViewer () { const Cesium = DC.getLib('Cesium') const { appContext } = getCurrentInstance() const store = useMap() @@ -33,6 +33,21 @@ global.$viewer = viewer store.setLoadMap(true) // let layer = new DC.HtmlLayer('layer') // viewer.addLayer(layer) // let divIcon = new DC.DivIcon( // new DC.Position(125, 25), // `<div class="public-map-popup"> // <div class="marsBlueGradientPnl"> // <div>指挥室</div> // </div> // </div>` // ) // divIcon.setStyle({ // }) // layer.addOverlay(divIcon) }) }) } src/main.js
@@ -19,6 +19,7 @@ import App from './App.vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import './permission' // 全局组件自动注册 import components from '@/components/index' src/page/login.vue
@@ -1,21 +1,141 @@ <!-- * @Author: shuishen 1109946754@qq.com * @Date: 2024-10-25 16:35:51 * @LastEditors: shuishen 1109946754@qq.com * @LastEditTime: 2024-10-25 16:36:07 * @FilePath: \bigScreen\src\page\login.vue * @Description: * * Copyright (c) 2024 by shuishen, All Rights Reserved. --> <template> <div> <div class="box"> <div class="login"> <div class="logintitle"> 吉水化工园区“一园一策一图”VR平台 </div> <div class="getingo"> <p class="title">用户登录</p> <el-input type="text" class="input username" v-model="loginForm.username" /> <el-input type="password" class="input password" v-model="loginForm.password" /> <el-button class="loginto" type="primary" @click="login">登录</el-button> </div> </div> </div> </template> <script setup> import { useRouter, useRoute } from 'vue-router' let router = useRouter() import { ElLoading } from 'element-plus' import { useLogin } from 'store/login' const store = useLogin() const loginForm = reactive({ //租户ID tenantId: '000000', //部门ID deptId: '', //角色ID roleId: '', //用户名 username: '', //密码 password: '', //账号类型 type: 'account', //验证码的值 code: '', //验证码的索引 key: '', //预加载白色背景 image: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7', flag: 1, }) const login = () => { const loading = ElLoading.service({ lock: true, text: '登录中,请稍后。。。', background: 'rgba(0, 0, 0, 0.7)', }) store.LoginByUsername(loginForm).then(res => { console.log(res, 66666) router.push('/layout') loading.close() }).catch(() => { loading.close() }) } </script> <style lang="scss" scoped></style> <style lang="scss" scoped> .box { width: 100vw; height: 100vh; box-sizing: border-box; .login { width: 100%; height: 100%; background: url('../assets/images/login-bg.png'); background-size: 100% 100%; position: relative; .logintitle { position: absolute; top: 18%; right: 25%; transform: translateX(50%); font-size: 40px; color: #00afe9; } .getingo { width: 500px; position: absolute; text-align: center; top: 45%; right: 25%; transform: translateY(-40%) translateX(50%); color: #ffffff; padding: 30px; background: url('../assets/images/login-content-bg.png'), url('../assets/images/left-top.png') no-repeat left top, url('../assets/images/left-bottom.png') no-repeat left bottom, url('../assets/images/right-top.png') no-repeat right top, url('../assets/images/right-bottom.png') no-repeat right bottom; background-repeat: no-repeat; background-size: 100% 100%, 25px, 25px, 25px, 25px; .title { font-size: 20px; } :deep().el-input__inner { padding: 0px; } .input { margin: 30px 0; width: 300px; padding: 10px 0px; background-color: rgba(0, 0, 0, 0); color: #ffffff; padding-left: 40px; border-width: 0px; font-size: 18px; } .username { background: url('../assets/images/login-input.png') no-repeat, url('../assets/images/user-icon.png') no-repeat 10px center; background-size: 100% 100%, 20px; } .password { background: url('../assets/images/login-input.png') no-repeat, url('../assets/images/password-icon.png') no-repeat 10px center; background-size: 100% 100%, 20px; } .loginto { width: 300px; margin: 30px 0; } } } } </style> src/permission.js
New file @@ -0,0 +1,47 @@ /* * @Author: shuishen 1109946754@qq.com * @Date: 2024-10-30 17:03:57 * @LastEditors: shuishen 1109946754@qq.com * @LastEditTime: 2024-10-30 17:07:40 * @FilePath: \bigScreen\src\permission.js * @Description: * * Copyright (c) 2024 by shuishen, All Rights Reserved. */ import router from './router/' import store from './store' import { useLogin } from '@/store/login' import NProgress from 'nprogress' // progress bar import 'nprogress/nprogress.css' // progress bar style NProgress.configure({ showSpinner: false }) router.beforeEach((to, from, next) => { const store = useLogin() const token = store.token const meta = to.meta || {} if (token) { if (to.path === '/login') { //如果登录成功访问登录页跳转到主页 next({ path: '/' }) } else { if (token.length === 0) { next({ path: '/login' }) } else { next() } } } else { //判断是否需要认证，没有登录访问去登录页 if (meta.isAuth === false) { next() } else { next('/login') } } }) router.afterEach(to => { }) src/router/index.js
@@ -2,7 +2,7 @@ * @Author: shuishen 1109946754@qq.com * @Date: 2024-10-25 16:35:31 * @LastEditors: shuishen 1109946754@qq.com * @LastEditTime: 2024-10-29 17:48:52 * @LastEditTime: 2024-10-30 15:01:50 * @FilePath: \bigScreen\src\router\index.js * @Description: * @@ -16,6 +16,16 @@ redirect: '/layout', }, { path: '/login', name: '登录页', component: () => import('@/page/login.vue'), meta: { keepAlive: true, isTab: false, isAuth: false, }, }, { path: '/layout', name: 'layout', redirect: '/layout/survey', src/store/login.js
New file @@ -0,0 +1,105 @@ // src/stores/useUserStore.js import { loginByUsername, } from '@/api/user' import { defineStore } from 'pinia' import md5 from 'js-md5' import { ElMessage } from 'element-plus' export const useLogin = defineStore('login', { // 存储状态的地方，相当于 Vuex 的 state state: () => ({ token: '', refreshToken: '', tenantId: '', userInfo: '' }), // 相当于 Vuex 的 getters，用于计算状态 getters: { }, // 相当于 Vuex 的 mutations 和 actions，用于同步或异步地修改状态 actions: { //根据用户名登录 LoginByUsername (userInfo = {}) { return new Promise((resolve, reject) => { loginByUsername( userInfo.tenantId, userInfo.deptId, userInfo.roleId, userInfo.username, md5(userInfo.password), userInfo.type, userInfo.key, userInfo.code ) .then(res => { console.log(res, 122222) const data = res.data if (data.error_description) { ElMessage({ message: data.error_description, type: 'error', }) } else { this.SET_TOKEN(data.access_token) this.SET_REFRESH_TOKEN(data.refresh_token) this.SET_TENANT_ID(data.tenant_id) this.SET_USER_INFO(data) } resolve() }) .catch(err => { reject(err) }) }) }, SET_TOKEN (token) { this.token = token }, SET_REFRESH_TOKEN (refreshToken) { this.refreshToken = refreshToken }, SET_TENANT_ID (tenantId) { this.tenantId = tenantId }, SET_USER_INFO (userInfo) { this.userInfo = userInfo } }, persist: { enabled: true, strategies: [ { key: 'token', paths: ['token'], storage: localStorage, }, { key: 'refreshToken', paths: ['refreshToken'], storage: localStorage, }, { key: 'tenantId', paths: ['tenantId'], storage: localStorage, }, { key: 'userInfo', paths: ['userInfo'], storage: localStorage, }, ] } })
@@ -1 +1,39 @@ @use './container.scss'as *; @use './container.scss'as *; .public-map-popup { position: absolute; left: 0; top: 0; pointer-events: all; display: block; transform-origin: left bottom; z-index: auto; .marsBlueGradientPnl { text-align: center; padding: 5px 30px; margin: 0; color: #fff; background: linear-gradient(rgb(7 10 203 / 75%), rgb(16 238 220)); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; max-height: 130px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space: nowrap; &::after { content: ""; position: absolute; bottom: -60px; left: calc(50% - 3px); display: block; width: 3px; height: 60px; border-right: 3px solid #2bcdbb; } } } src/utils/crypto.js
New file @@ -0,0 +1,94 @@ import CryptoJS from 'crypto-js'; export default class crypto { /** * token加密key 使用@org.springblade.test.CryptoKeyGenerator获取,需和后端配置保持一致 * @type {string} */ static cryptoKey = '请配置cryptoKey'; /** * 报文加密key 使用@org.springblade.test.CryptoKeyGenerator获取,需和后端配置保持一致 * @type {string} */ static aesKey = '请配置aesKey'; /** * 报文加密key 使用@org.springblade.test.CryptoKeyGenerator获取,需和后端配置保持一致 * @type {string} */ static desKey = '请配置desKey'; /** * aes 加密方法 * @param data * @returns {*} */ static encrypt(data) { return this.encryptAES(data, this.aesKey); } /** * aes 解密方法 * @param data * @returns {*} */ static decrypt(data) { return this.decryptAES(data, this.aesKey); } /** * aes 加密方法，同java：AesUtil.encryptToBase64(text, aesKey); */ static encryptAES(data, key) { const dataBytes = CryptoJS.enc.Utf8.parse(data); const keyBytes = CryptoJS.enc.Utf8.parse(key); const encrypted = CryptoJS.AES.encrypt(dataBytes, keyBytes, { iv: keyBytes, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7, }); return CryptoJS.enc.Base64.stringify(encrypted.ciphertext); } /** * aes 解密方法，同java：AesUtil.decryptFormBase64ToString(encrypt, aesKey); */ static decryptAES(data, key) { const keyBytes = CryptoJS.enc.Utf8.parse(key); const decrypted = CryptoJS.AES.decrypt(data, keyBytes, { iv: keyBytes, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7, }); return CryptoJS.enc.Utf8.stringify(decrypted); } /** * des 加密方法，同java：DesUtil.encryptToBase64(text, desKey) */ static encryptDES(data, key) { const keyHex = CryptoJS.enc.Utf8.parse(key); const encrypted = CryptoJS.DES.encrypt(data, keyHex, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7, }); return encrypted.toString(); } /** * des 解密方法，同java：DesUtil.decryptFormBase64(encryptBase64, desKey); */ static decryptDES(data, key) { const keyHex = CryptoJS.enc.Utf8.parse(key); const decrypted = CryptoJS.DES.decrypt( { ciphertext: CryptoJS.enc.Base64.parse(data), }, keyHex, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7, } ); return decrypted.toString(CryptoJS.enc.Utf8); } } src/utils/http.js
@@ -19,6 +19,11 @@ import NProgress from 'nprogress' // progress bar import 'nprogress/nprogress.css' // progress bar style import { Base64 } from 'js-base64' import { baseUrl } from '@/config/env' import crypto from '@/utils/crypto' import { useLogin } from '@/store/login' // 全局未授权错误提示状态，只提示一次 let isErrorShown = false @@ -38,7 +43,12 @@ //http request拦截 axios.interceptors.request.use( config => { console.log(config, '906456456465') const store = useLogin() //地址为已经配置状态则不添加前缀 if (!isURL(config.url) && !config.url.startsWith(baseUrl)) { config.url = baseUrl + config.url } // start progress bar NProgress.start() // 初始化错误提示状态 @@ -46,23 +56,39 @@ //安全请求header config.headers['Blade-Requested-With'] = 'BladeHttpRequest' //headers判断是否需要 const authorization = config.authorization === false if (!authorization) { config.headers['Authorization'] = `Basic ${Base64.encode( `zhyq:zhyq_secret` )}` } //headers判断请求是否携带token const meta = config.meta || {} const isToken = meta.isToken === false //headers传递token是否加密 const cryptoToken = config.cryptoToken === true //判断传递数据是否加密 const cryptoData = config.cryptoData === true const token = store.token if (token && !isToken) { config.headers[website.tokenHeader] = cryptoToken ? 'crypto ' + crypto.encryptAES(token, crypto.cryptoKey) : 'bearer ' + token } // 开启报文加密 // if (cryptoData) { // if (config.params) { // const data = crypto.encryptAES(JSON.stringify(config.params), crypto.aesKey); // config.params = { data }; // } // if (config.data) { // config.text = true; // config.data = crypto.encryptAES(JSON.stringify(config.data), crypto.aesKey); // } // } if (cryptoData) { if (config.params) { const data = crypto.encryptAES(JSON.stringify(config.params), crypto.aesKey) config.params = { data } } if (config.data) { config.text = true config.data = crypto.encryptAES(JSON.stringify(config.data), crypto.aesKey) } } //headers中配置text请求 if (config.text === true) { config.headers['Content-Type'] = 'text/plain' @@ -79,7 +105,7 @@ res => { NProgress.done() const status = res.data.error_code || res.data.code || res.status const statusWhiteList = website.statusWhiteList || [] const statusWhiteList = [] const message = res.data.msg || res.data.error_description || '系统错误' const config = res.config const cryptoData = config.cryptoData === true src/views/layout/index.vue
@@ -2,7 +2,7 @@ * @Author: shuishen 1109946754@qq.com * @Date: 2022-08-18 16:18:24 * @LastEditors: shuishen 1109946754@qq.com * @LastEditTime: 2024-10-28 19:44:29 * @LastEditTime: 2024-10-30 11:25:44 * @FilePath: \bigScreen\src\views\layout\index.vue * @Description: * @@ -14,7 +14,7 @@ <template #content> <div v-if="showContent" class="main-content" id="MainContent"> <div class="main-header"> <div class="title">吉水工业园区化工集中区</div> <div class="title">吉水化工园区“一园一策一图”VR平台</div> </div> <div class="main-container"> @@ -81,7 +81,7 @@ top: 0; left: 0; width: 100%; height: 68px; height: 40px; pointer-events: auto; .title { @@ -91,13 +91,13 @@ right: 0; bottom: 0; margin: auto; width: 456px; width: 640px; height: 40px; font-size: 32px; font-size: 24px; font-family: YouSheBiaoTiHei; font-weight: 400; color: #eff8fc; line-height: 35px; line-height: 40px; text-align: center; letter-spacing: 8px; font-weight: bolder; vite.config.js
@@ -2,7 +2,7 @@ * @Author: shuishen 1109946754@qq.com * @Date: 2024-10-25 10:56:27 * @LastEditors: shuishen 1109946754@qq.com * @LastEditTime: 2024-10-29 21:44:48 * @LastEditTime: 2024-10-30 16:06:44 * @FilePath: \bigScreen\vite.config.js * @Description: * @@ -83,7 +83,7 @@ proxy: { '/api': { // target: 'http://localhost', target: 'https://wrj.shuixiongit.com/api', target: 'https://wrj.shuixiongit.com/zhyqapi', changeOrigin: true, rewrite: path => path.replace(/^\/api/, ''), },
