This commit is contained in:
2025-12-03 14:50:10 +08:00
parent 95f0211b99
commit d769cd416c
3 changed files with 229 additions and 106 deletions

View File

@ -26,14 +26,17 @@
<span class="fankuai"></span>
{{ t('auths.authCode') }}
</div>
<div
class="auth_info_text"
<div class="auth_info_text">
<span @click="copy(authInfo.license_code)" style="cursor: pointer" title="点击可复制">{{
authInfo.license_code || ''
}}</span>
<svg-icon
name="copy"
@click="copy(authInfo.license_code)"
style="cursor: pointer"
title="点击可复制"
>
{{ authInfo.license_code || '' }}
<svg-icon name="copy" :size="20" style="margin-left: 30px"></svg-icon>
:size="20"
style="margin-left: 30px; cursor: pointer"
></svg-icon>
</div>
</div>
<div class="auth_info_box">
@ -522,8 +525,11 @@ const copy = async (text) => {
::v-deep .el-message-box {
--el-messagebox-title-color: #fff !important;
--el-messagebox-content-color: #fff !important;
background:
linear-gradient(180deg, rgba(var(--color-base1), 0) 0%, rgba(var(--color-base1), 0.2) 100%),
background: linear-gradient(
180deg,
rgba(var(--color-base1), 0) 0%,
rgba(var(--color-base1), 0.2) 100%
),
rgba(0, 0, 0, 0.6) !important;
}
@ -732,8 +738,11 @@ const copy = async (text) => {
.el-message-box {
--el-messagebox-title-color: #fff !important;
--el-messagebox-content-color: #fff !important;
background:
linear-gradient(180deg, rgba(var(--color-base1), 0) 0%, rgba(var(--color-base1), 0.2) 100%),
background: linear-gradient(
180deg,
rgba(var(--color-base1), 0) 0%,
rgba(var(--color-base1), 0.2) 100%
),
rgba(0, 0, 0, 0.6) !important;
.el-message-box__btns {

View File

@ -5,14 +5,17 @@
<span class="fankuai"></span>
{{ t('auths.authCode') }}
</div>
<div
class="auth_info_text"
<div class="auth_info_text">
<span @click="copy(authInfo.license_code)" title="点击可复制" style="cursor: pointer">{{
authInfo.license_code || ''
}}</span>
<svg-icon
name="copy"
@click="copy(authInfo.license_code)"
style="cursor: pointer"
title="点击可复制"
>
{{ authInfo.license_code || '' }}
<svg-icon name="copy" :size="20" style="margin-left: 30px"></svg-icon>
:size="20"
style="margin-left: 30px; cursor: pointer"
></svg-icon>
</div>
</div>
<div class="auth_info_box">
@ -122,7 +125,6 @@ getAuthCode()
const copy = async (text) => {
try {
await toClipboard(text)
console.log('复制成功')
ElMessage.success('复制成功')
} catch (e) {
console.error('复制失败', e)

View File

@ -1,7 +1,13 @@
<template>
<div class="login-container" 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">
<div
class="login-container"
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"
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"
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"
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"
style="position: fixed; width: 100vw; height: 100vh; left: 0; top: 0; object-fit: cover"
></video>
</transition>
<!-- 登录页面 -->
<div class="rightBox" v-if="isDesktop">
@ -27,45 +39,95 @@
</div>
</div>
</div>
<el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginFormRef"
label-position="left">
<el-form
class="login-form"
autoComplete="on"
:model="loginForm"
:rules="loginRules"
ref="loginFormRef"
label-position="left"
>
<el-form-item prop="username">
<el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="请输入用户名"
:prefix-icon="User" />
<el-input
name="username"
type="text"
v-model="loginForm.username"
autoComplete="on"
placeholder="请输入用户名"
:prefix-icon="User"
/>
</el-form-item>
<el-form-item prop="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-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 class="rememberForget">
<!-- justify-content: space-around;align-items: center; -->
<div style="display: flex">
<svg class="checkbox-svg" v-show="checkboxVModel" style="pointer-events: none"
xmlns="http://www.w3.org/2000/svg" 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>
<svg
class="checkbox-svg"
v-show="checkboxVModel"
style="pointer-events: none"
xmlns="http://www.w3.org/2000/svg"
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
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 class="checkbox-svg" v-show="!checkboxVModel" style="pointer-events: none"
xmlns="http://www.w3.org/2000/svg" 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>
<svg
class="checkbox-svg"
v-show="!checkboxVModel"
style="pointer-events: none"
xmlns="http://www.w3.org/2000/svg"
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>
<linearGradient id="linear_border_2442_533_0" x1="0" y1="-0.5574798583984375" x2="12.1173095703125"
y2="12.878036499023438" gradientUnits="userSpaceOnUse">
<linearGradient
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="1" stop-color="var(--color-border1)" />
</linearGradient>
</defs>
</svg>
<el-checkbox :disabled="loading" v-model="checkboxVModel" @change="rememberpwd"
label="string">记住密码</el-checkbox>
<el-checkbox
:disabled="loading"
v-model="checkboxVModel"
@change="rememberpwd"
label="string"
>记住密码</el-checkbox
>
<!-- <div style="cursor: pointer;">忘记密码</div> -->
</div>
</el-form-item>
@ -88,15 +150,24 @@
<h2 class="greet"><span>欢迎您使用</span>实景三维电子沙盘系统</h2>
<div class="serviceContent">
<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>
<div class="tabPanel">
<template v-if="selectedService == '接口服务'">
<div class="item">
<span class="itemLabel">服务选择</span>
<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"
:value="item.name">
<el-option
size="mini"
v-for="item in servOptions"
:key="item.value"
:label="item.name"
:value="item.name"
>
</el-option>
</el-select>
</div>
@ -116,24 +187,30 @@
<div class="item port">
<template v-if="servVal == '单机'">
<span class="itemLabel">端口</span>
<el-form-item prop="localport" :rules="[
<el-form-item
prop="localport"
:rules="[
{
validator: validateLocalportRange,
trigger: 'blur'
}
]">
]"
>
<el-input-number v-model="localport" :controls="false" />
</el-form-item>
</template>
<template v-if="servVal == '网络'">
<span class="itemLabel">端口</span>
<el-form-item prop="port" :rules="[
<el-form-item
prop="port"
:rules="[
{
validator: validatePortRange,
message: '端口号必须在 102465535 之间',
trigger: 'blur'
}
]">
]"
>
<el-input-number v-model="port" :controls="false" />
</el-form-item>
</template>
@ -143,8 +220,13 @@
<div class="item">
<span class="itemLabel">串口选择</span>
<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"
:value="item.Name">
<el-option
size="mini"
v-for="item in gpsOptions"
:key="item.value"
:label="item.Product"
:value="item.Name"
>
</el-option>
</el-select>
</div>
@ -159,8 +241,14 @@
</div>
</div>
<!-- 授权页面 -->
<Dialog ref="baseDialog" class="graffiti" title="系统授权" :closeCallback="closeCallBack" left="calc(50vw - 188px)"
top="calc(50vh - 191px)">
<Dialog
ref="baseDialog"
class="graffiti"
title="系统授权"
:closeCallback="closeCallBack"
left="calc(50vw - 188px)"
top="calc(50vh - 191px)"
>
<template #content>
<div class="auth_info custom_scroll_bar content_h">
<div class="auth_info_box">
@ -168,9 +256,20 @@
<span class="fankuai"></span>
{{ t('auths.authCode') }}
</div>
<div class="auth_info_text" @click="copy(authInfo.license_code)" style="cursor: pointer" title="点击可复制">
{{ authInfo.license_code || '' }}
<svg-icon name="copy" :size="20" style="margin-left: 30px"></svg-icon>
<div class="auth_info_text">
<span
@click="copy(authInfo.license_code)"
style="cursor: pointer"
title="点击可复制"
>{{ authInfo.license_code || '' }}</span
>
<svg-icon
name="copy"
:size="20"
@click="copy(authInfo.license_code)"
title="点击可复制"
style="margin-left: 30px; cursor: pointer"
></svg-icon>
</div>
</div>
<div class="auth_info_box">
@ -191,13 +290,22 @@
<span class="fankuai"></span>
{{ t('auths.authType') }}
</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)'
}">
}"
>
{{ authInfo.status ? t('auths.authTempExpire') : t('auths.authexpire') }}
</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') }}
</div>
</div>
@ -270,30 +378,27 @@ onMounted(() => {
loginInit()
initialize()
let { isSeverInit, severError } = ipcRenderer.sendSync('judgment-isSeverInit');
let { isSeverInit, severError } = ipcRenderer.sendSync('judgment-isSeverInit')
// 如果服务端未初始化,等待初始化完成
if (isSeverInit) {
console.log('severError', severError)
if (severError) {
ElMessage.error(severError)
return
}
else if (!router.currentRoute.value.query.type) {
} else if (!router.currentRoute.value.query.type) {
setTimeout(() => {
getAuthCode()
getAuthInfo()
}, 0);
}, 0)
} else {
isAuth.value = false
}
}
else {
} else {
ipcRenderer.once('program-init', (e, error) => {
if (error) {
ElMessage.error(error)
return
}
else if (!router.currentRoute.value.query.type) {
} else if (!router.currentRoute.value.query.type) {
getAuthCode()
getAuthInfo()
} else {
@ -453,27 +558,26 @@ const copy = async (text) => {
const validateLocalportRange = (rule, value, callback) => {
if (!localport.value) {
callback(new Error('请输入端口号')); // 校验失败
callback(new Error('请输入端口号')) // 校验失败
return
}
if (localport.value < 1024 || localport.value > 65535) {
callback(new Error('端口号范围在 102465535 之间')); // 校验失败
callback(new Error('端口号范围在 102465535 之间')) // 校验失败
} else {
callback(); // 校验通过
callback() // 校验通过
}
}
};
const validatePortRange = (rule, value, callback) => {
if (!port.value) {
callback(new Error('请输入端口号')); // 校验失败
callback(new Error('请输入端口号')) // 校验失败
return
}
if (port.value < 1024 || port.value > 65535) {
callback(new Error('端口号范围在 102465535 之间')); // 校验失败
callback(new Error('端口号范围在 102465535 之间')) // 校验失败
} else {
callback(); // 校验通过
callback() // 校验通过
}
}
};
</script>
<style lang="scss">
// 添加过渡样式
@ -954,7 +1058,8 @@ const validatePortRange = (rule, value, callback) => {
z-index: 99;
background: linear-gradient(0deg, #00ffff33 0%, #00ffff00 100%), rgba(0, 0, 0, 0.6);
border: 1.5px 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;
font-family: 'sy-boldface';
}
@ -1051,8 +1156,11 @@ const validatePortRange = (rule, value, callback) => {
::v-deep .el-message-box {
--el-messagebox-title-color: #fff !important;
--el-messagebox-content-color: #fff !important;
background:
linear-gradient(180deg, rgba(var(--color-base1), 0) 0%, rgba(var(--color-base1), 0.2) 100%),
background: linear-gradient(
180deg,
rgba(var(--color-base1), 0) 0%,
rgba(var(--color-base1), 0.2) 100%
),
rgba(0, 0, 0, 0.6) !important;
}
@ -1216,7 +1324,8 @@ const validatePortRange = (rule, value, callback) => {
align-items: center;
margin: 15px 0;
.select {}
.select {
}
}
}
}
@ -1262,8 +1371,11 @@ const validatePortRange = (rule, value, callback) => {
.el-message-box {
--el-messagebox-title-color: #fff !important;
--el-messagebox-content-color: #fff !important;
background:
linear-gradient(180deg, rgba(var(--color-base1), 0) 0%, rgba(var(--color-base1), 0.2) 100%),
background: linear-gradient(
180deg,
rgba(var(--color-base1), 0) 0%,
rgba(var(--color-base1), 0.2) 100%
),
rgba(0, 0, 0, 0.6) !important;
.el-message-box__headerbtn {