tanghuan/mediate-manage-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

webSocket封装部分

Browse Source
This commit is contained in:
tdg930622 2025-01-15 12:01:25 +08:00
parent c6f8823ad8
commit 40331ae769
5 changed files with 45337 additions and 40193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84563
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

135
package.json
View File

@ -1,71 +1,72 @@
{
"name": "project",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"deploy": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.27.2",
"china-location": "^2.1.0",
"core-js": "^3.6.4",
"echarts": "^5.1.1",
"element-ui": "^2.15.6",
"install": "^0.13.0",
"lodash": "^4.17.21",
"moment": "^2.25.3",
"npm": "^6.14.5",
"quill": "^1.3.7",
"quill-image-drop-module": "^1.0.3",
"quill-image-resize-module": "^3.0.0",
"sm-crypto": "^0.3.7",
"style-loader": "^2.0.0",
"trtc-sdk-v5": "^5.8.6",
"vue": "^2.6.11",
"vue-meta-info": "^0.1.7",
"vue-quill-editor": "^3.0.6",
"vue-router": "^3.1.6",
"vuex": "^3.4.0",
"vuex-persistedstate": "^4.0.0-beta.3"
},
"devDependencies": {
"@trydo/files-utils": "^0.1.19-alpha",
"@vue/cli-plugin-babel": "~4.3.0",
"@vue/cli-plugin-eslint": "~4.3.0",
"@vue/cli-service": "~4.3.0",
"babel-eslint": "^10.1.0",
"babel-plugin-component": "^1.1.1",
"babel-plugin-import": "^1.13.1",
"crypto-js": "^4.1.1",
"eslint": "^6.8.0",
"eslint-plugin-vue": "^6.2.2",
"sass": "^1.53.0",
"sass-loader": "^8.0.2",
"svg-sprite-loader": "^6.0.11",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
"name": "project",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"deploy": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
"dependencies": {
"axios": "^0.27.2",
"china-location": "^2.1.0",
"core-js": "^3.6.4",
"echarts": "^5.1.1",
"element-ui": "^2.15.6",
"install": "^0.13.0",
"lodash": "^4.17.21",
"moment": "^2.25.3",
"npm": "^6.14.5",
"quill": "^1.3.7",
"quill-image-drop-module": "^1.0.3",
"quill-image-resize-module": "^3.0.0",
"sm-crypto": "^0.3.7",
"style-loader": "^2.0.0",
"trtc-sdk-v5": "^5.8.6",
"vue": "^2.6.11",
"vue-meta-info": "^0.1.7",
"vue-quill-editor": "^3.0.6",
"vue-router": "^3.1.6",
"vuex": "^3.4.0",
"vuex-persistedstate": "^4.0.0-beta.3"
},
"rules": {
"vue/no-unused-components": "off"
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
"devDependencies": {
"@trydo/files-utils": "^0.1.19-alpha",
"@vue/cli-plugin-babel": "~4.3.0",
"@vue/cli-plugin-eslint": "~4.3.0",
"@vue/cli-service": "~4.3.0",
"babel-eslint": "^10.1.0",
"babel-plugin-component": "^1.1.1",
"babel-plugin-import": "^1.13.1",
"crypto-js": "^4.1.1",
"eslint": "^6.8.0",
"eslint-plugin-vue": "^6.2.2",
"sass": "^1.53.0",
"sass-loader": "^8.0.2",
"svg-sprite-loader": "^6.0.11",
"vue-template-compiler": "^2.6.11",
"@stomp/stompjs": "^5.0.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {
"vue/no-unused-components": "off"
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}

2
src/main.js
View File

@ -19,6 +19,7 @@ import {TrydoFiles} from "@trydo/files-utils"
// 引入全局通用自定义指令
import '@/assets/js/directive';
import '@/assets/js/directiveVideo';
import stompSocket from "./utils/stompSocket"
Vue.use(ElementUI);
@ -34,6 +35,7 @@ Vue.prototype.$verify = verify;
Vue.prototype.$clickThrottle = clickThrottle;
Vue.prototype.$echarts = echarts;
Vue.prototype.$TrydoFiles = TrydoFiles;
Vue.prototype.$stompSocket = stompSocket;
// vue使用vue-meta-info来动态设置标题
Vue.use(MetaInfo)

764
src/pages/login/index.vue
View File

@ -1,390 +1,418 @@
<template>
<div class="login-wrap">
<div class="login-logo">
<img src="../../assets/image/login-logo.png" height="40" alt="" >
</div>
<div class="login-box">
<div class="login-content flex-column-center">
<div class="logo-wrap flex-row-center align-items-center">
<div class="f32 color-text-regular">欢迎登录</div>
</div>
<div class="flex-column-center width100">
<el-tabs class="zd-el-tabs-custom p-v-24"
v-model="loginWay" @tab-click="handleChangeLoginWay">
<el-tab-pane label="短信登录" name="phone"></el-tab-pane>
<el-tab-pane label="账号登录" name="account"></el-tab-pane>
</el-tabs>
<!--通过手机验证码登录-->
<el-form v-if="loginWay === 'phone'"
:model="ruleForm" :rules="rules"
ref="ruleForm" label-width="0"
class="width100">
<el-form-item label="" prop="telephone">
<el-input v-model.trim="ruleForm.telephone" placeholder="请输入手机号" maxLength="11"></el-input>
</el-form-item>
<el-form-item label="" prop="smsCode">
<div class="position-r">
<el-input v-model.trim="ruleForm.smsCode" maxLength="6"
placeholder="请输入验证码" class="login-sms-code"></el-input>
<div class="login-sms-code-btn position-a flex-row-center align-items-center">
<el-divider direction="vertical"></el-divider>
<el-button type="text" @click="handleGetMsgCode"
:disabled="codeBtnDisabled">
<div style="width: 110px">{{codeBtnText}}</div>
</el-button>
</div>
</div>
</el-form-item>
<div class="flex mt-24">
<el-button class="flex-fill" type="primary" @click="handleLoginByPhone">登录</el-button>
</div>
</el-form>
<!--通过账号密码登录-->
<el-form v-if="loginWay === 'account'" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0" class="width100 mt-30 pt-5">
<el-form-item label="" prop="account">
<el-input v-model.trim="ruleForm.account" placeholder="请输入手机号/账号" maxLength="18"></el-input>
</el-form-item>
<el-form-item label="" prop="password">
<el-input v-model.trim="ruleForm.password" placeholder="请输入密码" maxLength="18" type="password"></el-input>
</el-form-item>
<div class="flex mt-24">
<el-button class="flex-fill" type="primary" @click="handleLoginByAccount">登录</el-button>
</div>
</el-form>
</div>
</div>
</div>
<div class="login_footer_ad flex-column-center align-items-center">
<div class="f12 color-86909C pt-8">
<span class="pl-8">Copyright © {{$util.getToyear()}} 法智数科 版权所有</span>
</div>
</div>
<div class="login-wrap">
<div class="login-logo">
<img src="../../assets/image/login-logo.png" height="40" alt="">
</div>
<div class="login-box">
<div class="login-content flex-column-center">
<div class="logo-wrap flex-row-center align-items-center">
<div class="f32 color-text-regular">欢迎登录</div>
</div>
<div class="flex-column-center width100">
<el-tabs class="zd-el-tabs-custom p-v-24"
v-model="loginWay" @tab-click="handleChangeLoginWay">
<el-tab-pane label="短信登录" name="phone"></el-tab-pane>
<el-tab-pane label="账号登录" name="account"></el-tab-pane>
</el-tabs>
<!--通过手机验证码登录-->
<el-form v-if="loginWay === 'phone'"
:model="ruleForm" :rules="rules"
ref="ruleForm" label-width="0"
class="width100">
<el-form-item label="" prop="telephone">
<el-input v-model.trim="ruleForm.telephone" placeholder="请输入手机号" maxLength="11"></el-input>
</el-form-item>
<el-form-item label="" prop="smsCode">
<div class="position-r">
<el-input v-model.trim="ruleForm.smsCode" maxLength="6"
placeholder="请输入验证码" class="login-sms-code"></el-input>
<div class="login-sms-code-btn position-a flex-row-center align-items-center">
<el-divider direction="vertical"></el-divider>
<el-button type="text" @click="handleGetMsgCode"
:disabled="codeBtnDisabled">
<div style="width: 110px">{{codeBtnText}}</div>
</el-button>
</div>
</div>
</el-form-item>
<div class="flex mt-24">
<el-button class="flex-fill" type="primary" @click="handleLoginByPhone">登录</el-button>
</div>
</el-form>
<!--通过账号密码登录-->
<el-form v-if="loginWay === 'account'" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0"
class="width100 mt-30 pt-5">
<el-form-item label="" prop="account">
<el-input v-model.trim="ruleForm.account" placeholder="请输入手机号/账号" maxLength="18"></el-input>
</el-form-item>
<el-form-item label="" prop="password">
<el-input v-model.trim="ruleForm.password" placeholder="请输入密码" maxLength="18"
type="password"></el-input>
</el-form-item>
<div class="flex mt-24">
<el-button class="flex-fill" type="primary" @click="handleLoginByAccount">登录</el-button>
</div>
</el-form>
</div>
</div>
</div>
<div class="login_footer_ad flex-column-center align-items-center">
<div class="f12 color-86909C pt-8">
<span class="pl-8">Copyright © {{$util.getToyear()}} 法智数科 版权所有</span>
</div>
</div>
</div>
</template>
<script>
import socketClass from "../../utils/stompSocket";
export default {
data() {
const validatePhone = (rule,value,callback)=>{
if (!value){
callback(new Error('请输入11位手机号码'));
data() {
const validatePhone = (rule, value, callback) => {
if (!value) {
callback(new Error('请输入11位手机号码'));
}
//使用正则表达式进行验证手机号码
else if (!/^1[3456789]\d{9}$/.test(value)) {
callback(new Error('手机号不正确！'));
} else {
callback()
}
};
return {
loginWay: 'phone',
qrCodeSrc: '',
qrCodeInfo: {},
qrFail: false, // true-二维码失效
strKey: 'trydotec',
codeBtnText: '获取验证码',
codeBtnDisabled: false,
ruleForm: {
telephone: '',
account: '18381082759',
password: 'trydo@123456',
smsCode: '',
},
rules: {
telephone: [
{validator: validatePhone, trigger: 'blur'}
],
smsCode: [
{required: true, message: '请输入短信验证码', trigger: 'blur'}
],
account: [
{required: true, message: '请输入手机号', trigger: 'blur'}
],
password: [
{required: true, message: '请输入密码', trigger: 'blur'}
],
},
timer: null,
outTime: 60
};
},
methods: {
handleLoginByPhone() {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
let telephone = this.$util.encryptByDES(this.strKey, this.ruleForm.telephone)
let smsCode = this.$util.encryptByDES(this.strKey, this.ruleForm.smsCode)
let formData = {
'phone': telephone,
'code': smsCode,
'type': 2,
'platform': 2
}
this.$fetchApi.login(formData).then(res => {
sessionStorage.setItem('token', res.token)
this.$store.commit('setToken', res.token)
sessionStorage.setItem('userInfo', JSON.stringify(res.user))
this.$store.commit('setUserInfo', res.user)
if (res.user.resources.length > 0) {
let url = "/workbench";
// let data= res.user.resources[0].children[0]
// if(data.children.length>0){
// url = data.children[0].url
// }else{
// url = data.url
// }
this.$store.commit('setRoutes', url)
this.$router.push(url)
} else {
this.$message.warning('未赋予数据权限！')
}
//使用正则表达式进行验证手机号码
else if (!/^1[3456789]\d{9}$/.test(value)){
callback(new Error('手机号不正确！'));
}else{
callback()
}
};
return {
loginWay: 'phone',
qrCodeSrc: '',
qrCodeInfo: {},
qrFail: false, // true-二维码失效
strKey: 'trydotec',
codeBtnText: '获取验证码',
codeBtnDisabled: false,
ruleForm: {
telephone: '',
account: '18381082759',
password: 'trydo@123456',
smsCode: '',
},
rules: {
telephone: [
{ validator: validatePhone, trigger: 'blur' }
],
smsCode: [
{ required: true, message: '请输入短信验证码', trigger: 'blur' }
],
account: [
{ required: true, message: '请输入手机号', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
],
},
timer: null,
outTime: 60
};
},
methods: {
handleLoginByPhone() {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
})
let telephone = this.$util.encryptByDES(this.strKey, this.ruleForm.telephone)
let smsCode = this.$util.encryptByDES(this.strKey, this.ruleForm.smsCode)
let formData = {
'phone':telephone,
'code':smsCode,
'type':2,
'platform':2
}
this.$fetchApi.login(formData).then(res => {
sessionStorage.setItem('token', res.token)
this.$store.commit('setToken', res.token)
sessionStorage.setItem('userInfo', JSON.stringify(res.user))
this.$store.commit('setUserInfo', res.user)
if(res.user.resources.length > 0){
let url = "/workbench";
// let data= res.user.resources[0].children[0]
// if(data.children.length>0){
// url = data.children[0].url
// }else{
// url = data.url
// }
this.$store.commit('setRoutes', url)
this.$router.push(url)
}else{
this.$message.warning('未赋予数据权限！')
}
})
}
});
},
handleLoginByAccount() {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
this.$store.commit('setPassword', this.rules.password)
let username = this.$util.encryptByDES(this.strKey, this.ruleForm.account)
let password = this.$util.encryptByDES(this.strKey, this.ruleForm.password)
let formData = {
'username':username,
'password':password,
'type':1,
'platform':2
}
this.$fetchApi.login(formData).then(res => {
sessionStorage.setItem('token', res.token)
this.$store.commit('setToken', res.token)
sessionStorage.setItem('userInfo', JSON.stringify(res.user))
this.$store.commit('setUserInfo', res.user)
if(res.user.resources.length > 0){
let url = "/workbench";
// let data= res.user.resources[0].children[0]
// if(data.children.length>0){
// url = data.children[0].url
// }else{
// url = data.url
// }
this.$store.commit('setRoutes', url)
this.$router.push(url)
}else{
this.$message.warning('未赋予数据权限！')
}
})
}
});
},
// 获取短信验证码
handleGetMsgCode() {
// form为表单名字并ref="form"; prop 换成你想监听的prop字段
this.$refs.ruleForm.validateField('telephone', (errMsg) => {
if (!errMsg) {
// 验证成功，获取短信验证码
// 防止重复点击
if(!this.$clickThrottle()) { return }
this.$fetchApi.sendVerifyCode(this.ruleForm.telephone).then(res => {
this.codeBtnDisabled = true
if (!this.timer) {
this.timer = setInterval(() => {
this.codeBtnText = this.outTime + 's 再次获取'
this.outTime = this.outTime - 1
if (this.outTime <= 0) {
// 倒计时结束，重置时间器clearInterval(this.timer)
clearInterval(this.timer)
this.codeBtnText = '获取短信验证码'
this.outTime = 60
this.timer = null
this.codeBtnDisabled = false
}
}, 1000)
// 每秒执行一次
}
})
}
})
},
handleChangeLoginWay(tab, event) {
if(this.$refs.ruleForm) {
this.$refs.ruleForm.clearValidate();
}
if(tab && typeof tab === 'string') {
this.loginWay = type
return
}
// if('phone,account'.indexOf(this.loginWay) !== -1) {
// this.loginWay = 'qrCode'
// }else{
// this.loginWay = 'phone'
// }
// if(this.loginWay === 'qrCode') {
// // 生成二维码
// this.getQRCode()
// }
},
getQRCode() {
this.qrFail = false
this.$fetchApi.getLoginQRCode().then(res => {
this.qrCodeInfo = res
this.qrCodeSrc = res.qrCode
this.loginByScanCode()
})
},
loginByScanCode() {
let timeNum = 0
let scanCodeTimer = setInterval(() => {
if (timeNum > 200) {
clearInterval(scanCodeTimer);
this.qrFail = true
}
else {
this.$fetchApi.loginByQRCode(this.qrCodeInfo.verify).then(res => {
if(res.status=='INVALID'){
this.qrFail = true
clearInterval(scanCodeTimer);
}
if(res.status=='SUCCESS') {
// 登录成功
this.$store.commit('setToken', res.token)
this.$store.commit('setRoutes', JSON.parse(res.perms))
this.$router.push('/')
clearInterval(scanCodeTimer);
}
}).catch(err => {
this.qrFail = true
clearInterval(scanCodeTimer);
})
}
timeNum ++;
}, 1500);
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
});
},
handleLoginByAccount() {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
this.$store.commit('setPassword', this.rules.password)
let username = this.$util.encryptByDES(this.strKey, this.ruleForm.account)
let password = this.$util.encryptByDES(this.strKey, this.ruleForm.password)
let formData = {
'username': username,
'password': password,
'type': 1,
'platform': 2
}
this.$fetchApi.login(formData).then(res => {
sessionStorage.setItem('token', res.token)
this.$store.commit('setToken', res.token)
sessionStorage.setItem('userInfo', JSON.stringify(res.user))
this.$store.commit('setUserInfo', res.user)
if (res.user.resources.length > 0) {
let url = "/workbench";
// let data= res.user.resources[0].children[0]
// if(data.children.length>0){
// url = data.children[0].url
// }else{
// url = data.url
// }
this.$store.commit('setRoutes', url)
this.$router.push(url)
this.$stompSocket.initStomp(a => this.socketSucc(a), b => this.socketErr(b));
} else {
this.$message.warning('未赋予数据权限！')
}
})
}
});
},
// 获取短信验证码
handleGetMsgCode() {
// form为表单名字并ref="form"; prop 换成你想监听的prop字段
this.$refs.ruleForm.validateField('telephone', (errMsg) => {
if (!errMsg) {
// 验证成功，获取短信验证码
// 防止重复点击
if (!this.$clickThrottle()) {
return
}
this.$fetchApi.sendVerifyCode(this.ruleForm.telephone).then(res => {
this.codeBtnDisabled = true
if (!this.timer) {
this.timer = setInterval(() => {
this.codeBtnText = this.outTime + 's 再次获取'
this.outTime = this.outTime - 1
if (this.outTime <= 0) {
// 倒计时结束，重置时间器clearInterval(this.timer)
clearInterval(this.timer)
this.codeBtnText = '获取短信验证码'
this.outTime = 60
this.timer = null
this.codeBtnDisabled = false
}
}, 1000)
// 每秒执行一次
}
})
}
})
},
handleChangeLoginWay(tab, event) {
if (this.$refs.ruleForm) {
this.$refs.ruleForm.clearValidate();
}
if (tab && typeof tab === 'string') {
this.loginWay = type
return
}
// if('phone,account'.indexOf(this.loginWay) !== -1) {
// this.loginWay = 'qrCode'
// }else{
// this.loginWay = 'phone'
// }
// if(this.loginWay === 'qrCode') {
// // 生成二维码
// this.getQRCode()
// }
},
getQRCode() {
this.qrFail = false
this.$fetchApi.getLoginQRCode().then(res => {
this.qrCodeInfo = res
this.qrCodeSrc = res.qrCode
this.loginByScanCode()
})
},
loginByScanCode() {
let timeNum = 0
let scanCodeTimer = setInterval(() => {
if (timeNum > 200) {
clearInterval(scanCodeTimer);
this.qrFail = true
} else {
this.$fetchApi.loginByQRCode(this.qrCodeInfo.verify).then(res => {
if (res.status == 'INVALID') {
this.qrFail = true
clearInterval(scanCodeTimer);
}
if (res.status == 'SUCCESS') {
// 登录成功
this.$store.commit('setToken', res.token)
this.$store.commit('setRoutes', JSON.parse(res.perms))
this.$router.push('/')
clearInterval(scanCodeTimer);
}
}).catch(err => {
this.qrFail = true
clearInterval(scanCodeTimer);
})
}
timeNum++;
}, 1500);
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
socketSucc(frame) {
console.log(frame, '---初始化成功!!!')
},
socketErr(frame) {
console.log(frame, '---初始化失败!!!')
}
}
}
</script>
<style lang="scss" scoped>
.login-logo{padding:20px 0 0 40px;}
.login-wrap{
width: 100%;
height: 100%;
background: url('~@/assets/image/login-bg1.png') no-repeat ;
background-size: cover;
position: relative;
}
.login-box{
width: 384px;
height: 370px;
position: absolute;
right: 15%;
top: 50%;
margin-top: -185px;
}
.login-content{
width: 100%;
height: 100%;
box-sizing: border-box;
border-radius: 2px;
background: $color-white;
padding: $size32;
padding-bottom: 0;
border-radius: 5px;
// box-shadow: 0px 33px 114px rgba(25, 96, 244, 0.26), 0px 9.94853px 34.3677px rgba(25, 96, 244, 0.169413), 0px 4.13211px 14.2746px rgba(25, 96, 244, 0.13), 0px 1.4945px 5.16283px rgba(25, 96, 244, 0.0905869);
box-shadow: 0px 4px 4px 0px #00000014;
}
.login-tab{
display: flex;
align-items: center;
justify-content: center;
}
.login-btn{
color: #fff;
background-color: #5d78ff;
border-color: #5d78ff;
&:hover{
background-color: #3758ff;
border-color: #2a4eff;
}
}
.login-qr-code-box{
width: 260px;
height: 260px;
position: relative;
}
.login-qr-fail{
width: 260px;
height: 260px;
position: absolute;
left: 0;
top: 0;
background: rgba(255,255,255,0.8);
}
.login_footer_ad{
position: fixed;
bottom: 30px;
left: 50%;
margin-left: -129px;
opacity: 0.6;
.login-logo {
padding: 20px 0 0 40px;
}
.logo-wrap{
height: 29px;
.login-wrap {
width: 100%;
height: 100%;
background: url('~@/assets/image/login-bg1.png') no-repeat;
background-size: cover;
position: relative;
}
.logo-img{
width: 58%;
height: 24px;
.login-box {
width: 384px;
height: 370px;
position: absolute;
right: 15%;
top: 50%;
margin-top: -185px;
}
.login-content {
width: 100%;
height: 100%;
box-sizing: border-box;
border-radius: 2px;
background: $color-white;
padding: $size32;
padding-bottom: 0;
border-radius: 5px;
// box-shadow: 0px 33px 114px rgba(25, 96, 244, 0.26), 0px 9.94853px 34.3677px rgba(25, 96, 244, 0.169413), 0px 4.13211px 14.2746px rgba(25, 96, 244, 0.13), 0px 1.4945px 5.16283px rgba(25, 96, 244, 0.0905869);
box-shadow: 0px 4px 4px 0px #00000014;
}
.login-tab {
display: flex;
align-items: center;
justify-content: center;
}
.login-btn {
color: #fff;
background-color: #5d78ff;
border-color: #5d78ff;
&:hover {
background-color: #3758ff;
border-color: #2a4eff;
}
}
.login-qr-code-box {
width: 260px;
height: 260px;
position: relative;
}
.login-qr-fail {
width: 260px;
height: 260px;
position: absolute;
left: 0;
top: 0;
background: rgba(255, 255, 255, 0.8);
}
.login_footer_ad {
position: fixed;
bottom: 30px;
left: 50%;
margin-left: -129px;
opacity: 0.6;
}
.logo-wrap {
height: 29px;
}
.logo-img {
width: 58%;
height: 24px;
}
</style>
<style lang="scss">
.login-wrap{
.el-tabs__nav-wrap{
&::after{
background-color: $color-white !important;
}
}
.el-input__inner{
border-top: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
border-radius: 0 !important;
color: $color-text-primary;
}
.login-sms-code .el-input__inner{
padding-right: 150px;
}
.login-sms-code-btn{
top: 3px;
right: 0;
.login-wrap {
.el-tabs__nav-wrap {
&::after {
background-color: $color-white !important;
}
}
.el-input__inner {
border-top: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
border-radius: 0 !important;
color: $color-text-primary;
}
.login-sms-code .el-input__inner {
padding-right: 150px;
}
.login-sms-code-btn {
top: 3px;
right: 0;
}
}
</style>

66
src/utils/stompSocket.js Normal file
View File

@ -0,0 +1,66 @@
import {Client,Message }from '@stomp/stompjs';
let client = null;
let url = 'wss://mediate.dev.trydotec.com/mediate/ws/websocket';
let subscriptionMap = {};
const socketClass = {
// 初始化
initStomp(succ, err) {
console.log('----过来了')
client = new Client({
brokerURL: url,
debug: function (str) {
console.log(str);
},
});
client.onConnect = succ;
client.onStompError = err;
client.activate();
},
// 关闭
deactivate() {
if (!client)return;
client.deactivate();
client = null;
subscriptionMap = {};
},
// 推送
publish(data) {
// data
// {
// destination: '/topic/general',
// body: 'Hello world',
// headers: { priority: '9' },
// }
if (!client)return;
client.publish(data);
},
// 订阅
subscription(url, callback) {
// callback = function (message) {
// // called when the client receives a STOMP message from the server
// if (message.body) {
// alert('got message with body ' + message.body);
// } else {
// alert('got empty message');
// }
// };
if (!client)return;
subscriptionMap[url] = client.subscribe(url, callback);
},
// 取消订阅
unsubscribe(url) {
if (!client)return;
if (url){
const a = subscriptionMap[url];
if (a){
a.unsubscribe();
delete subscriptionMap[url]
}
}
}
}
export default socketClass;