@ -1,7 +1,13 @@
< template >
< template >
< div class = "login-container" style = "position: fixed; width: 100vw; height: 100vh; left: 0; top: 0" >
< div
< transition name = "video-fade" mode = "out-in "
class = "login-container "
style = "position: fixed; width: 100vw; height: 100vh; left: 0; top: 0; object-fit: cover" >
style = "position: fixed; width: 100vw; height: 100vh; left: 0; top: 0"
>
< transition
name = "video-fade"
mode = "out-in"
style = "position: fixed; width: 100vw; height: 100vh; left: 0; top: 0; object-fit: cover"
>
<!-- 第一个视频 , 播放一次 -- >
<!-- 第一个视频 , 播放一次 -- >
<!-- < video v-if = "!isFirstVideoPlayed" ref="firstVideoRef" key="first-video" muted @ended="onFirstVideoEnded"
<!-- < video v-if = "!isFirstVideoPlayed" ref="firstVideoRef" key="first-video" muted @ended="onFirstVideoEnded"
src = "../../assets/video/login_front.mp4"
src = "../../assets/video/login_front.mp4"
@ -9,8 +15,14 @@
<!-- 第二个视频 , 循环播放 -- >
<!-- 第二个视频 , 循环播放 -- >
<!-- < video v-else key = "second-video" autoplay loop muted src = "../../assets/video/login_feature.mp4"
<!-- < video v-else key = "second-video" autoplay loop muted src = "../../assets/video/login_feature.mp4"
style = "position: fixed; width: 100vw; height: 100vh; left: 0; top: 0; object-fit: cover" > < / video > -- >
style = "position: fixed; width: 100vw; height: 100vh; left: 0; top: 0; object-fit: cover" > < / video > -- >
< video key = "second-video" autoplay loop muted src = "../../assets/video/author_video.mp4"
< video
style = "position: fixed; width: 100vw; height: 100vh; left: 0; top: 0; object-fit: cover" > < / video>
key = "second- video"
autoplay
loop
muted
src = "../../assets/video/author_video.mp4"
style = "position: fixed; width: 100vw; height: 100vh; left: 0; top: 0; object-fit: cover"
> < / video >
< / transition >
< / transition >
<!-- 登录页面 -- >
<!-- 登录页面 -- >
< div class = "rightBox" v-if = "isDesktop" >
< div class = "rightBox" v-if = "isDesktop" >
@ -27,45 +39,95 @@
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< el-form class = "login-form" autoComplete = "on" :model = "loginForm" :rules = "loginRules" ref = "loginFormRef"
< el-form
label -position = " left " >
c lass = "login-form"
autoComplete = "on"
:model = "loginForm"
:rules = "loginRules"
ref = "loginFormRef"
label -position = " left "
>
< el-form-item prop = "username" >
< el-form-item prop = "username" >
< el-input name = "username" type = "text" v-model = "loginForm.username" autoComplete="on" placeholder="请输入用户名"
< el-input
:prefix-icon = "U ser" / >
name = "u sername "
type = "text"
v-model = "loginForm.username"
autoComplete = "on"
placeholder = "请输入用户名"
:prefix-icon = "User"
/ >
< / el-form-item >
< / el-form-item >
< el-form-item prop = "password" >
< el-form-item prop = "password" >
< el-input type = "password" @keyup.enter.native ="handleLogin(loginFormRef)" v-model = "loginForm.password"
< el-input
autoComplete = "on" placeholder = "请输入密码" :prefix-icon = "Unlock" show -password > < / el-input >
type = "password"
@keyup.enter.native ="handleLogin(loginFormRef)"
v-model = "loginForm.password"
autoComplete = "on"
placeholder = "请输入密码"
:prefix-icon = "Unlock"
show -password
> < / el-input >
< / el-form-item >
< / el-form-item >
< el-form-item class = "rememberForget" >
< el-form-item class = "rememberForget" >
<!-- justify - content : space - around ; align - items : center ; -- >
<!-- justify - content : space - around ; align - items : center ; -- >
< div style = "display: flex" >
< div style = "display: flex" >
< svg class = "checkbox-svg" v-show = "checkboxVModel" style="pointer-events: none"
< svg
xmln s= "http://www.w3.org/2000/svg" xmlns :xlink = "http://www.w3.org/1999/xlink" width = "14" height = "14 "
clas s= "checkbox-svg "
viewBox = "0 0 14 14" fill = "none" >
v-show = "checkboxVModel"
< path fill = "rgba(var(--color-base1), 1) "
style = "pointer-events: none "
d = "M7.34788e-16 2L-2.20436e-15 12C-2.40727e-15 13.1046 0.895431 14 2 14L12 14C13.1046 14 14 13.1046 14 12L14 2C14 0.895431 13.1046 -1.46958e-15 12 -1.46958e-15L2 -1.46958e-15C0.895431 -1.60485e-15 8.02424e-16 0.895431 7.34788e-16 2Z" >
xmlns = "http://www.w3.org/2000/svg"
< / path >
xmlns :xlink = "http://www.w3.org/1999/xlink"
width = "14"
height = "14"
viewBox = "0 0 14 14"
fill = "none"
>
< path
fill = "rgba(var(--color-base1), 1)"
d = "M7.34788e-16 2L-2.20436e-15 12C-2.40727e-15 13.1046 0.895431 14 2 14L12 14C13.1046 14 14 13.1046 14 12L14 2C14 0.895431 13.1046 -1.46958e-15 12 -1.46958e-15L2 -1.46958e-15C0.895431 -1.60485e-15 8.02424e-16 0.895431 7.34788e-16 2Z"
> < / path >
< path
< path
d = "M5.47283 8.3039L3.10764 6.12807C3.06194 6.08647 2.99525 6.08647 2.94955 6.12946L2.04424 6.98093C1.98989 7.03224 1.98495 7.12376 2.03312 7.18201L6.03602 11.9566C6.09778 12.0301 6.20647 12.0065 6.24105 11.9136C7.03644 9.69343 9.25835 5.63439 11.9619 2.69585C11.999 2.65564 12.0101 2.59601 11.9904 2.54331L11.8211 2.08568C11.7915 2.00525 11.7038 1.97474 11.6396 2.02328C8.63587 4.21019 6.45966 6.92546 5.47283 8.3039Z"
d = "M5.47283 8.3039L3.10764 6.12807C3.06194 6.08647 2.99525 6.08647 2.94955 6.12946L2.04424 6.98093C1.98989 7.03224 1.98495 7.12376 2.03312 7.18201L6.03602 11.9566C6.09778 12.0301 6.20647 12.0065 6.24105 11.9136C7.03644 9.69343 9.25835 5.63439 11.9619 2.69585C11.999 2.65564 12.0101 2.59601 11.9904 2.54331L11.8211 2.08568C11.7915 2.00525 11.7038 1.97474 11.6396 2.02328C8.63587 4.21019 6.45966 6.92546 5.47283 8.3039Z"
fill = "#004242" > < / path >
fill = "#004242"
> < / path >
< / svg >
< / svg >
< svg class = "checkbox-svg" v-show = "!checkboxVModel" style="pointer-events: none"
< svg
xmln s= "http://www.w3.org/2000/svg" xmlns :xlink = "http://www.w3.org/1999/xlink" width = "14" height = "14 "
clas s= "checkbox-svg "
viewBox = "0 0 14 14" fill = "none" >
v-show = "!checkboxVModel"
< path fill -rule = " evenodd " fill = "url(#linear_border_2442_533_0) "
style = "pointer-events: none "
d = "M0 12L0 2C0 0.895431 0.895431 0 2 0L12 0C13.1046 0 14 0.895431 14 2L14 12C14 13.1046 13.1046 14 12 14L2 14C0.895431 14 0 13.1046 0 12ZM2 12.5C1.72386 12.5 1.5 12.2761 1.5 12L1.5 2C1.5 1.72386 1.72386 1.5 2 1.5L12 1.5C12.2761 1.5 12.5 1.72386 12.5 2L12.5 12C12.5 12.2761 12.2761 12.5 12 12.5L2 12.5Z" >
xmlns = "http://www.w3.org/2000/svg"
< / path >
xmlns :xlink = "http://www.w3.org/1999/xlink"
width = "14"
height = "14"
viewBox = "0 0 14 14"
fill = "none"
>
< path
fill -rule = " evenodd "
fill = "url(#linear_border_2442_533_0)"
d = "M0 12L0 2C0 0.895431 0.895431 0 2 0L12 0C13.1046 0 14 0.895431 14 2L14 12C14 13.1046 13.1046 14 12 14L2 14C0.895431 14 0 13.1046 0 12ZM2 12.5C1.72386 12.5 1.5 12.2761 1.5 12L1.5 2C1.5 1.72386 1.72386 1.5 2 1.5L12 1.5C12.2761 1.5 12.5 1.72386 12.5 2L12.5 12C12.5 12.2761 12.2761 12.5 12 12.5L2 12.5Z"
> < / path >
< defs >
< defs >
< linearGradient id = "linear_border_2442_533_0" x1 = "0" y1 = "-0.5574798583984375" x2 = "12.1173095703125"
< linearGradient
y2 = "12.878036499023438" gradientUnits = "userSpaceOnUse" >
id = "linear_border_2442_533_0"
x1 = "0"
y1 = "-0.5574798583984375"
x2 = "12.1173095703125"
y2 = "12.878036499023438"
gradientUnits = "userSpaceOnUse"
>
< stop offset = "0.0625" stop -color = " rgba ( var ( - -color -base1 ) , 1 ) " / >
< stop offset = "0.0625" stop -color = " rgba ( var ( - -color -base1 ) , 1 ) " / >
< stop offset = "1" stop -color = " var ( - -color -border1 ) " / >
< stop offset = "1" stop -color = " var ( - -color -border1 ) " / >
< / linearGradient >
< / linearGradient >
< / defs >
< / defs >
< / svg >
< / svg >
< el-checkbox :disabled = "loading" v-model = "checkboxVModel" @change="rememberpwd"
< el-checkbox
label = "str ing" > 记住密码 < / el-checkbox >
:disabled = "load ing"
v-model = "checkboxVModel"
@change ="rememberpwd"
label = "string"
> 记住密码 < / e l - c h e c k b o x
>
<!-- < div style = "cursor: pointer;" > 忘记密码 ? < / div > -- >
<!-- < div style = "cursor: pointer;" > 忘记密码 ? < / div > -- >
< / div >
< / div >
< / el-form-item >
< / el-form-item >
@ -88,15 +150,24 @@
< h2 class = "greet" > < span > 欢迎您使用 < / span > 实景三维电子沙盘系统 < / h2 >
< h2 class = "greet" > < span > 欢迎您使用 < / span > 实景三维电子沙盘系统 < / h2 >
< div class = "serviceContent" >
< div class = "serviceContent" >
< el-tabs v-model = "selectedService" class="demo-tabs" @tab-click="handleSelect" >
< el-tabs v-model = "selectedService" class="demo-tabs" @tab-click="handleSelect" >
< el -tab -pane v-for = "item in serviceOptions" :label="item.name" :name="item.name" > < / el -tab -pane >
< el -tab -pane
v-for = "item in serviceOptions"
:label = "item.name"
:name = "item.name"
> < / el-tab-pane >
< / el-tabs >
< / el-tabs >
< div class = "tabPanel" >
< div class = "tabPanel" >
< template v-if = "selectedService == '接口服务'" >
< template v-if = "selectedService == '接口服务'" >
< div class = "item" >
< div class = "item" >
< span class = "itemLabel" > 服务选择 < / span >
< span class = "itemLabel" > 服务选择 < / span >
< el-select class = "select" popper -class = " login -select -popper " v-model = "servVal" >
< el-select class = "select" popper -class = " login -select -popper " v-model = "servVal" >
< el -option size = "mini" v-for = "item in servOptions" :key="item.value" :label="item.name"
< el -option
:valu e= "item.name" >
siz e= "mini"
v-for = "item in servOptions"
:key = "item.value"
:label = "item.name"
:value = "item.name"
>
< / el-option >
< / el-option >
< / el-select >
< / el-select >
< / div >
< / div >
@ -128,8 +199,13 @@
< div class = "item" >
< div class = "item" >
< span class = "itemLabel" > 串口选择 < / span >
< span class = "itemLabel" > 串口选择 < / span >
< el-select class = "select" popper -class = " login -select -popper " v-model = "gpsVal" >
< el-select class = "select" popper -class = " login -select -popper " v-model = "gpsVal" >
< el -option size = "mini" v-for = "item in gpsOptions" :key="item.value" :label="item.Product"
< el -option
:valu e= "item.Name" >
siz e= "mini"
v-for = "item in gpsOptions"
:key = "item.value"
:label = "item.Product"
:value = "item.Name"
>
< / el-option >
< / el-option >
< / el-select >
< / el-select >
< / div >
< / div >
@ -144,8 +220,14 @@
< / div >
< / div >
< / div >
< / div >
<!-- 授权页面 -- >
<!-- 授权页面 -- >
< Dialog ref = "baseDialog" class = "graffiti" title = "系统授权" :closeCallback = "closeCallBack" left = "calc(50vw - 188px)"
< Dialog
top = "calc(50vh - 191px)" >
ref = "baseDialog"
class = "graffiti"
title = "系统授权"
:closeCallback = "closeCallBack"
left = "calc(50vw - 188px)"
top = "calc(50vh - 191px)"
>
< template # content >
< template # content >
< div class = "auth_info custom_scroll_bar content_h" >
< div class = "auth_info custom_scroll_bar content_h" >
< div class = "auth_info_box" >
< div class = "auth_info_box" >
@ -153,7 +235,12 @@
< span class = "fankuai" > < / span >
< span class = "fankuai" > < / span >
{ { t ( 'auths.authCode' ) } }
{ { t ( 'auths.authCode' ) } }
< / div >
< / div >
< div class = "auth_info_text" @click ="copy(authInfo.license_code)" style = "cursor: pointer" title = "点击可复制" >
< div
class = "auth_info_text"
@click ="copy(authInfo.license_code)"
style = "cursor: pointer"
title = "点击可复制"
>
{ { authInfo . license _code || '' } }
{ { authInfo . license _code || '' } }
< svg-icon name = "copy" :size = "20" style = "margin-left: 30px" > < / svg-icon >
< svg-icon name = "copy" :size = "20" style = "margin-left: 30px" > < / svg-icon >
< / div >
< / div >
@ -176,13 +263,22 @@
< span class = "fankuai" > < / span >
< span class = "fankuai" > < / span >
{ { t ( 'auths.authType' ) } }
{ { t ( 'auths.authType' ) } }
< / div >
< / div >
< div v-if = "authInfo.status != null" class="auth_info_text" style="font-size: 16px" : style = "{
< div
v-if = "authInfo.status != null"
class = "auth_info_text"
style = "font-size: 16px"
: style = "{
color: authInfo.status ? 'rgba(27, 248, 195, 1)' : 'rgba(255, 161, 69, 1)'
color: authInfo.status ? 'rgba(27, 248, 195, 1)' : 'rgba(255, 161, 69, 1)'
}">
}"
>
{ { authInfo . status ? t ( 'auths.authTempExpire' ) : t ( 'auths.authexpire' ) } }
{ { authInfo . status ? t ( 'auths.authTempExpire' ) : t ( 'auths.authexpire' ) } }
< / div >
< / div >
<!-- < div v-else class = "auth_info_text" > { { authInfo . message || '无' } } < / div > -- >
<!-- < div v-else class = "auth_info_text" > { { authInfo . message || '无' } } < / div > -- >
< div v-else class = "auth_info_text" style = "font-size: 16px; color: rgba(241, 108, 85, 1)" >
< div
v-else
class = "auth_info_text"
style = "font-size: 16px; color: rgba(241, 108, 85, 1)"
>
{ { t ( 'auths.noAuthexpire' ) } }
{ { t ( 'auths.noAuthexpire' ) } }
< / div >
< / div >
< / div >
< / div >
@ -190,7 +286,7 @@
< / div >
< / div >
< / template >
< / template >
< template # footer >
< template # footer >
< uploadFiles accept = ".lic " :maxSize = "1" > < / uploadFiles >
< uploadFiles accept = ".YJ " :maxSize = "1" > < / uploadFiles >
< button @click ="close" > 退出系统 < / button >
< button @click ="close" > 退出系统 < / button >
< / template >
< / template >
< / Dialog >
< / Dialog >
@ -219,6 +315,7 @@ const {
loginInit ,
loginInit ,
isDesktop
isDesktop
} = useLogin ( ) // 登录逻辑
} = useLogin ( ) // 登录逻辑
console . log ( 'isDesktop' , isDesktop )
const {
const {
serviceDialog ,
serviceDialog ,
@ -267,28 +364,29 @@ const getAuthInfo = async () => {
if ( typeof res . data === 'object' ) {
if ( typeof res . data === 'object' ) {
authInfo . value . generateTime = res . data . generateTime
authInfo . value . generateTime = res . data . generateTime
authInfo . value . expireTime = res . data . expireTime
authInfo . value . expireTime = res . data . expireTime
console . log ( authInfo . value . expireTime , '授权时间222' )
getStatus2 ( )
getStatus2 ( )
getStatus ( res . data . expireTime )
getStatus ( res . data . expireTime )
}
}
} catch ( error ) {
} catch ( error ) {
// 统一处理错误
// 统一处理错误
ElMessageBox. confirm( '您没有进行系统授权哦,系统功能将无法使用?', '提示' , {
// ElMessageBox. confirm( '您没有进行系统授权哦,系统功能将无法使用?', '提示', {
confirmButtonText: '去授权',
// confirmButtonText: '去授权',
cancelButtonText: '退出系统',
// cancelButtonText: '退出系统',
type: 'warning',
// type: 'warning',
closeOnClickModal: false
// closeOnClickModal: false
} )
// })
. then ( async ( ) => {
// .then(async () => {
try {
// try {
baseDialog. value ? . open ( )
// baseDialog.value?.open()
} catch ( error ) {
// } catch (error) {
console. error ( '打开授权对话框失败:', error)
// console.error( '打开授权对话框失败:', error)
}
// }
} )
// })
. catch ( ( ) => {
// .catch(() => {
// 用户点击取消,不执行任何操作
// // 用户点击取消,不执行任何操作
ipcRenderer. send ( 'quit-app')
// ipcRenderer.send( 'quit-app')
} )
// })
}
}
}
}
const baseDialog = ref ( null )
const baseDialog = ref ( null )
@ -364,6 +462,7 @@ const getAuthInfo2 = async () => {
if ( typeof res . data === 'object' ) {
if ( typeof res . data === 'object' ) {
authInfo . value . generateTime = res . data . generateTime
authInfo . value . generateTime = res . data . generateTime
authInfo . value . expireTime = res . data . expireTime
authInfo . value . expireTime = res . data . expireTime
console . log ( authInfo . value . expireTime , '授权时间' )
getStatus2 ( )
getStatus2 ( )
}
}
}
}
@ -372,7 +471,7 @@ const getStatus2 = () => {
const timestamp = new Date ( authInfo . value . expireTime ) . getTime ( )
const timestamp = new Date ( authInfo . value . expireTime ) . getTime ( )
const currentTimestamp = Date . now ( )
const currentTimestamp = Date . now ( )
console . log ( 'timestamp' , timestamp > currentTimestamp )
if ( timestamp > currentTimestamp ) {
if ( timestamp > currentTimestamp ) {
authInfo . value . status = true
authInfo . value . status = true
} else {
} else {
@ -398,7 +497,7 @@ const copy = async (text) => {
}
}
}
}
let isSeverInit = ipcRenderer . sendSync ( 'judgment-isSeverInit' ) ;
let isSeverInit = ipcRenderer . sendSync ( 'judgment-isSeverInit' )
// 如果服务端未初始化,等待初始化完成
// 如果服务端未初始化,等待初始化完成
if ( isSeverInit ) {
if ( isSeverInit ) {
if ( ! router . currentRoute . value . query . type ) {
if ( ! router . currentRoute . value . query . type ) {
@ -407,8 +506,7 @@ if (isSeverInit) {
} else {
} else {
isAuth . value = false
isAuth . value = false
}
}
}
} else {
else {
ipcRenderer . once ( 'program-init' , ( ) => {
ipcRenderer . once ( 'program-init' , ( ) => {
if ( ! router . currentRoute . value . query . type ) {
if ( ! router . currentRoute . value . query . type ) {
getAuthCode ( )
getAuthCode ( )
@ -418,7 +516,6 @@ else {
}
}
} )
} )
}
}
< / script >
< / script >
< style lang = "scss" >
< style lang = "scss" >
// 添加过渡样式
// 添加过渡样式
@ -698,7 +795,7 @@ else {
border - radius : 0 0 0 90 % ;
border - radius : 0 0 0 90 % ;
background : rgba ( var ( -- color - base1 ) , 1 ) ;
background : rgba ( var ( -- color - base1 ) , 1 ) ;
& > span {
& > span {
font - size : 1 rem ;
font - size : 1 rem ;
position : absolute ;
position : absolute ;
right : 0 px ;
right : 0 px ;
@ -795,7 +892,8 @@ else {
align - items : center ;
align - items : center ;
margin : 15 px 0 ;
margin : 15 px 0 ;
. select { }
. select {
}
}
}
}
}
}
}
@ -884,7 +982,8 @@ else {
z - index : 99 ;
z - index : 99 ;
background : linear - gradient ( 0 deg , # 00 ffff33 0 % , # 00 ffff00 100 % ) , rgba ( 0 , 0 , 0 , 0.6 ) ;
background : linear - gradient ( 0 deg , # 00 ffff33 0 % , # 00 ffff00 100 % ) , rgba ( 0 , 0 , 0 , 0.6 ) ;
border : 1.5 px solid ;
border : 1.5 px solid ;
border - image : linear - gradient ( to bottom , rgba ( var ( -- color - base1 ) , 1 ) 6.25 % , rgb ( 0 , 200 , 255 ) 100 % ) 1 ;
border - image : linear - gradient ( to bottom , rgba ( var ( -- color - base1 ) , 1 ) 6.25 % , rgb ( 0 , 200 , 255 ) 100 % )
1 ;
text - align : left ;
text - align : left ;
font - family : 'sy-boldface' ;
font - family : 'sy-boldface' ;
}
}
@ -930,11 +1029,11 @@ else {
position : relative ;
position : relative ;
}
}
: : v - deep . title - box > . close - box {
: : v - deep . title - box > . close - box {
display : none ;
display : none ;
}
}
: : v - deep . title - box > . title {
: : v - deep . title - box > . title {
font - family : 'Ali-mother-counts-bold' ;
font - family : 'Ali-mother-counts-bold' ;
font - size : 18 px ;
font - size : 18 px ;
font - weight : 400 ;
font - weight : 400 ;
@ -957,7 +1056,7 @@ else {
justify - content : center ;
justify - content : center ;
}
}
: : v - deep . foot > button {
: : v - deep . foot > button {
margin - left : 10 px ;
margin - left : 10 px ;
border - radius : 4 px ;
border - radius : 4 px ;
background : rgba ( var ( -- color - base1 ) , 0.2 ) ;
background : rgba ( var ( -- color - base1 ) , 0.2 ) ;
@ -969,12 +1068,12 @@ else {
cursor : pointer ;
cursor : pointer ;
}
}
: : v - deep . foot > button : hover {
: : v - deep . foot > button : hover {
border : 1 px solid rgba ( var ( -- color - base1 ) , 1 ) ;
border : 1 px solid rgba ( var ( -- color - base1 ) , 1 ) ;
color : rgba ( var ( -- color - base1 ) , 1 ) ;
color : rgba ( var ( -- color - base1 ) , 1 ) ;
}
}
: : v - deep . foot > . show > . label {
: : v - deep . foot > . show > . label {
margin : 0 px 10 px ;
margin : 0 px 10 px ;
}
}
@ -1049,7 +1148,7 @@ else {
border - radius : 0 0 0 90 % ;
border - radius : 0 0 0 90 % ;
background : rgba ( var ( -- color - base1 ) , 1 ) ;
background : rgba ( var ( -- color - base1 ) , 1 ) ;
& > span {
& > span {
font - size : 1 rem ;
font - size : 1 rem ;
position : absolute ;
position : absolute ;
right : 0 px ;
right : 0 px ;
@ -1146,7 +1245,8 @@ else {
align - items : center ;
align - items : center ;
margin : 15 px 0 ;
margin : 15 px 0 ;
. select { }
. select {
}
}
}
}
}
}
}