708 lines
18 KiB
Vue
708 lines
18 KiB
Vue
<template>
|
||
<div class="rightBox" v-if="isDesktop">
|
||
<el-button size="small" :icon="Setting" @click="serviceDialog = true"> </el-button>
|
||
</div>
|
||
<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;z-index: -1;"></video>
|
||
<Dialog ref="baseDialog" class="graffiti" title="系统授权" :closeCallback="closeCallBack">
|
||
<template #content>
|
||
<div class="auth_info custom_scroll_bar content_h">
|
||
<div class="auth_info_box">
|
||
<div>
|
||
<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>
|
||
</div>
|
||
<div class="auth_info_box">
|
||
<div>
|
||
<span class="fankuai"></span>
|
||
{{ t('auths.authTime') }}
|
||
</div>
|
||
<div class="auth_info_text" v-if="authInfo.status != null">
|
||
<template v-if="authInfo.generateTime != ''">
|
||
{{ authInfo.generateTime || '2023-01-01' }}-
|
||
</template>
|
||
{{ authInfo.expireTime || '2023-01-01' }}
|
||
</div>
|
||
<div v-else class="auth_info_text">暂无</div>
|
||
</div>
|
||
<div class="auth_info_box">
|
||
<div>
|
||
<span class="fankuai"></span>
|
||
{{ t('auths.authType') }}
|
||
</div>
|
||
<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)">
|
||
{{ t('auths.noAuthexpire') }}
|
||
</div>
|
||
</div>
|
||
<!-- <uploadFiles accept=".lic" :maxSize="1"></uploadFiles> -->
|
||
</div>
|
||
</template>
|
||
<template #footer>
|
||
<uploadFiles accept=".lic" :maxSize="1"></uploadFiles>
|
||
<button @click="close">退出系统</button>
|
||
</template>
|
||
</Dialog>
|
||
<div class="service" v-if="serviceDialog">
|
||
<div class="contentBox">
|
||
<div class="titleBox">
|
||
<span class="title"></span>
|
||
<span class="closeBox">
|
||
<span @click="cancel">✕</span>
|
||
</span>
|
||
</div>
|
||
<h1 class="hello">Hello!</h1>
|
||
<h2 class="greet"><span>欢迎您使用</span>实景三维电子沙盘系统</h2>
|
||
<div class="serviceContent">
|
||
<el-tabs v-model="selectedService" class="demo-tabs">
|
||
<el-tab-pane label="接口服务" name="接口服务"></el-tab-pane>
|
||
</el-tabs>
|
||
<div class="tabPanel">
|
||
<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>
|
||
</el-select>
|
||
</div>
|
||
<div class="item prototype" v-if="servVal == '网络'">
|
||
<span class="itemLabel">协议</span><el-input v-model="prototype"></el-input>
|
||
</div>
|
||
<div class="item ip">
|
||
<template v-if="servVal == '单机'">
|
||
<span class="itemLabel">IP</span>
|
||
<el-input v-model="localip" disabled></el-input>
|
||
</template>
|
||
<template v-if="servVal == '网络'">
|
||
<span class="itemLabel">IP</span>
|
||
<el-input v-model="ip"></el-input>
|
||
</template>
|
||
</div>
|
||
<div class="item port">
|
||
<template v-if="servVal == '单机'">
|
||
<span class="itemLabel">端口</span>
|
||
<el-input v-model="localport"></el-input>
|
||
</template>
|
||
<template v-if="servVal == '网络'">
|
||
<span class="itemLabel">端口</span>
|
||
<el-input v-model="port"></el-input>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="btn">
|
||
<el-button style="margin: 5px 0" size="mini" @click="submit">确定</el-button>
|
||
<el-button size="mini" @click="cancel">关闭</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { User, Unlock, Setting, SwitchButton } from '@element-plus/icons-vue'
|
||
import Dialog from '@/components/dialog/baseDialog.vue'
|
||
import { useRouter } from 'vue-router'
|
||
import { ref, reactive, toRefs, onBeforeMount, onMounted, watchEffect, computed } from 'vue'
|
||
import { AuthApi } from '@/api/setting/auth'
|
||
import { useLogin } from '../login/useLogin'
|
||
import { useSetUp } from '../login/useSetUp'
|
||
import { useI18n } from 'vue-i18n'
|
||
import uploadFiles from '@/components/upload/uploadFiles.vue'
|
||
import useClipboard from 'vue-clipboard3'
|
||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||
import {
|
||
$sendElectronChanel,
|
||
$recvElectronChanel,
|
||
$changeComponentShow
|
||
} from '@/utils/communication'
|
||
|
||
const {
|
||
loginFormRef,
|
||
loginForm,
|
||
loginRules,
|
||
loading,
|
||
checkboxVModel,
|
||
showContent,
|
||
isFirstVideoPlayed,
|
||
onFirstVideoEnded,
|
||
rememberpwd,
|
||
handleLogin,
|
||
firstVideoRef,
|
||
goExit,
|
||
loginInit,
|
||
isDesktop
|
||
} = useLogin()
|
||
const {
|
||
serviceDialog,
|
||
servVal,
|
||
prototype,
|
||
ip,
|
||
port,
|
||
localip,
|
||
localport,
|
||
gpsVal,
|
||
gpsOptions,
|
||
servOptions,
|
||
serviceOptions,
|
||
submit,
|
||
cancel,
|
||
initialize
|
||
} = useSetUp()
|
||
const { ipcRenderer } = require('electron')
|
||
const router = useRouter()
|
||
const getAuthInfo = async () => {
|
||
try {
|
||
const res = await AuthApi.showAuth()
|
||
if (typeof res.data === 'object') {
|
||
authInfo.value.generateTime = res.data.generateTime
|
||
authInfo.value.expireTime = res.data.expireTime
|
||
getStatus2()
|
||
getStatus(res.data.expireTime)
|
||
}
|
||
} catch (error) {
|
||
// 统一处理错误
|
||
ElMessageBox.confirm('您没有进行系统授权哦，系统功能将无法使用?', '提示', {
|
||
confirmButtonText: '去授权',
|
||
cancelButtonText: '退出系统',
|
||
type: 'warning',
|
||
closeOnClickModal: false
|
||
})
|
||
.then(async () => {
|
||
try {
|
||
baseDialog.value?.open()
|
||
} catch (error) {
|
||
console.error('打开授权对话框失败:', error)
|
||
}
|
||
})
|
||
.catch(() => {
|
||
// 用户点击取消，不执行任何操作
|
||
ipcRenderer.send('quit-app')
|
||
})
|
||
}
|
||
}
|
||
const selectedService = ref('接口服务')
|
||
let showPop = ref(false)
|
||
const baseDialog = ref(null)
|
||
const getStatus = (date) => {
|
||
const timestamp = new Date(date).getTime()
|
||
|
||
const currentTimestamp = Date.now()
|
||
if (timestamp > currentTimestamp) {
|
||
router.push({ path: '/login' })
|
||
} else {
|
||
ElMessageBox.confirm('您没有进行系统授权哦，系统功能将无法使用?', '提示', {
|
||
confirmButtonText: '去授权',
|
||
cancelButtonText: '退出系统',
|
||
type: 'warning',
|
||
closeOnClickModal: false
|
||
})
|
||
.then(async () => {
|
||
try {
|
||
baseDialog.value?.open()
|
||
} catch (error) {
|
||
console.error('打开授权对话框失败:', error)
|
||
}
|
||
})
|
||
.catch(() => {
|
||
// 用户点击取消，不执行任何操作
|
||
ipcRenderer.send('quit-app')
|
||
})
|
||
}
|
||
}
|
||
setTimeout(() => {
|
||
getAuthInfo()
|
||
}, 5000);
|
||
|
||
//授权页面
|
||
|
||
const closeCallBack = (e) => {
|
||
baseDialog.value?.close()
|
||
}
|
||
const close = (e) => {
|
||
ElMessageBox.confirm('确定要退出系统吗?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
})
|
||
.then(async () => {
|
||
ipcRenderer.send('quit-app')
|
||
})
|
||
.catch(() => {
|
||
// 用户点击取消，不执行任何操作
|
||
})
|
||
}
|
||
|
||
const eventBus = inject('bus')
|
||
const { t } = useI18n()
|
||
const authInfo = ref({
|
||
license_code: '',
|
||
//授权信息
|
||
generateTime: '', //开始时间
|
||
expireTime: '', //结束时间
|
||
authDays: null, //授权时间
|
||
status: null
|
||
})
|
||
//上传授权文件成功
|
||
eventBus.on('upload', (data) => {
|
||
if (data) {
|
||
getAuthInfo2()
|
||
setTimeout(() => {
|
||
ElMessage({
|
||
message: '载入成功，将在2s后自动重启',
|
||
type: 'success'
|
||
})
|
||
}, 1000)
|
||
setTimeout(() => {
|
||
$sendElectronChanel('restart')
|
||
}, 3000)
|
||
}
|
||
})
|
||
|
||
const { toClipboard } = useClipboard()
|
||
|
||
const getAuthInfo2 = async () => {
|
||
const res = await AuthApi.showAuth()
|
||
if (typeof res.data === 'object') {
|
||
authInfo.value.generateTime = res.data.generateTime
|
||
authInfo.value.expireTime = res.data.expireTime
|
||
getStatus2()
|
||
}
|
||
}
|
||
|
||
const getStatus2 = () => {
|
||
const timestamp = new Date(authInfo.value.expireTime).getTime()
|
||
|
||
const currentTimestamp = Date.now()
|
||
|
||
if (timestamp > currentTimestamp) {
|
||
authInfo.value.status = true
|
||
} else {
|
||
authInfo.value.status = false
|
||
}
|
||
window.checkAuthIsValid = authInfo.value.status
|
||
}
|
||
const getAuthCode = async () => {
|
||
const res = await AuthApi.authInfo()
|
||
authInfo.value.license_code = res.data
|
||
}
|
||
setTimeout(() => {
|
||
getAuthCode()
|
||
}, 5000);
|
||
//复制
|
||
|
||
const copy = async (text) => {
|
||
try {
|
||
await toClipboard(text)
|
||
ElMessage.success('复制成功')
|
||
} catch (e) {
|
||
ElMessage.error('复制失败')
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.rightBox {
|
||
position: absolute;
|
||
right: 10px;
|
||
top: 0px;
|
||
z-index: 99999;
|
||
|
||
.el-button {
|
||
background: linear-gradient(to bottom, transparent, rgb(25, 129, 132));
|
||
border: none !important;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.auth_info {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
overflow-y: auto;
|
||
color: rgba(var(--color-text2), 0.8);
|
||
|
||
.auth_info_text {
|
||
color: #fff;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
margin: 7px 0 15px 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.auth_info_box {
|
||
margin-bottom: 15px;
|
||
border-bottom: 1px solid rgba(204, 204, 204, 0.2);
|
||
}
|
||
|
||
.el-button--primary {
|
||
color: #fff !important;
|
||
font-size: 16px;
|
||
background: rgba(var(--color-base1), 0.2) !important;
|
||
font-weight: bolder;
|
||
border-color: transparent;
|
||
border-radius: 4px;
|
||
}
|
||
}
|
||
|
||
.fankuai {
|
||
width: 10px;
|
||
height: 10px;
|
||
// 旋转角度
|
||
transform: rotate(45deg);
|
||
border: 2px solid rgba(var(--color-base1), 1);
|
||
display: inline-block;
|
||
margin-right: 5px;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.YJ-custom-base-dialog {
|
||
position: absolute;
|
||
color: #ffffff;
|
||
font-size: 14px;
|
||
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;
|
||
text-align: left;
|
||
font-family: 'sy-boldface';
|
||
}
|
||
|
||
.YJ-custom-base-dialog * {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.YJ-custom-base-dialog:after {
|
||
display: block;
|
||
position: absolute;
|
||
content: '';
|
||
left: -1.5px;
|
||
top: -6px;
|
||
width: 70.5px;
|
||
height: 6px;
|
||
opacity: 1;
|
||
background: rgba(var(--color-base1), 1);
|
||
clip-path: polygon(0 0, calc(100% - 3px) 0, 100% 6px, 0 6px);
|
||
}
|
||
|
||
.YJ-custom-base-dialog svg {
|
||
fill: #ffffff;
|
||
width: 12px;
|
||
height: 12px;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.YJ-custom-base-dialog .custom-divider {
|
||
width: 100%;
|
||
display: block;
|
||
border-top: 1px solid rgba(204, 204, 204, 0.2);
|
||
}
|
||
|
||
.YJ-custom-base-dialog .text-number {
|
||
font-family: 'D-Din-Bold';
|
||
margin-left: 5px;
|
||
}
|
||
|
||
::v-deep .title-box {
|
||
line-height: 46px;
|
||
padding: 5px 16px 5px 16px !important;
|
||
position: relative;
|
||
}
|
||
|
||
::v-deep .title-box>.close-box {
|
||
display: none;
|
||
}
|
||
|
||
::v-deep .title-box>.title {
|
||
font-family: 'Ali-mother-counts-bold';
|
||
font-size: 18px;
|
||
font-weight: 400;
|
||
letter-spacing: 0px;
|
||
line-height: 0px;
|
||
color: rgba(255, 255, 255, 1);
|
||
text-align: left;
|
||
text-shadow: 0px 0px 9px rgba(20, 118, 255, 1);
|
||
-webkit-pointer-events: none;
|
||
-moz-pointer-events: none;
|
||
-ms-pointer-events: none;
|
||
-o-pointer-events: none;
|
||
pointer-events: none;
|
||
}
|
||
|
||
::v-deep .foot {
|
||
position: relative;
|
||
padding: 20px 24px;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
::v-deep .foot>button {
|
||
margin-left: 10px;
|
||
border-radius: 4px;
|
||
background: rgba(var(--color-base1), 0.2);
|
||
border: 1px solid rgba(var(--color-base1), 0.5);
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: rgba(255, 255, 255, 1);
|
||
padding: 5px 20px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
::v-deep .foot>button:hover {
|
||
border: 1px solid rgba(var(--color-base1), 1);
|
||
color: rgba(var(--color-base1), 1);
|
||
}
|
||
|
||
::v-deep .foot>.show>.label {
|
||
margin: 0px 10px;
|
||
}
|
||
|
||
::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%),
|
||
rgba(0, 0, 0, 0.6) !important;
|
||
}
|
||
|
||
#app {
|
||
.service {
|
||
z-index: 9999;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
position: absolute;
|
||
|
||
.contentBox {
|
||
padding: 0 40px 40px 40px;
|
||
background-color: #ffffff;
|
||
backdrop-filter: blur(2px);
|
||
width: 450px;
|
||
position: absolute;
|
||
color: rgba(51, 51, 51, 1);
|
||
left: 50%;
|
||
top: 29%;
|
||
transform: translate(-50%, 0%);
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
|
||
.hello {
|
||
color: rgba(0, 66, 66, 1);
|
||
font-family: 'ddin';
|
||
font-size: 30px;
|
||
font-weight: 700;
|
||
line-height: 30px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.greet {
|
||
color: rgba(0, 66, 66, 1);
|
||
font-family: 'SourceHanSans';
|
||
font-size: 18px;
|
||
line-height: 18px;
|
||
font-weight: 500;
|
||
|
||
span {
|
||
color: rgba(153, 153, 153, 1);
|
||
font-weight: 500;
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
|
||
.titleBox {
|
||
height: 40px;
|
||
|
||
.title {
|
||
line-height: 50px;
|
||
padding-left: 15px;
|
||
font-size: 1rem;
|
||
text-shadow: 0px 0px 9px rgba(20, 118, 255, 1);
|
||
}
|
||
|
||
.closeBox {
|
||
right: 0;
|
||
position: absolute;
|
||
display: inline-block;
|
||
width: 30px;
|
||
height: 30px;
|
||
border-radius: 0 0 0 90%;
|
||
background: rgba(var(--color-base1), 1);
|
||
|
||
&>span {
|
||
font-size: 1rem;
|
||
position: absolute;
|
||
right: 0px;
|
||
cursor: pointer;
|
||
color: rgba(0, 66, 66, 1);
|
||
font-weight: 700;
|
||
width: 25px;
|
||
height: 25px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
.serviceContent {
|
||
margin-top: 30px;
|
||
flex: auto;
|
||
|
||
::v-deep .el-tabs {
|
||
.el-tabs__header {
|
||
margin-bottom: 5px;
|
||
|
||
.el-tabs__nav-wrap {
|
||
.el-tabs__nav-scroll {
|
||
.el-tabs__nav {
|
||
.el-tabs__active-bar {
|
||
background: rgba(0, 66, 66, 1);
|
||
height: 3px;
|
||
}
|
||
|
||
.el-tabs__item {
|
||
color: rgba(153, 153, 153, 1);
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.el-tabs__item:focus-visible {
|
||
box-shadow: none;
|
||
}
|
||
|
||
.el-tabs__item.is-active {
|
||
font-size: 18px;
|
||
color: rgba(0, 66, 66, 1);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.el-tabs__nav-wrap::after {
|
||
height: 1px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tab {
|
||
border-radius: 5px;
|
||
//width: 50%;
|
||
width: 300px;
|
||
margin: 0 auto;
|
||
overflow: hidden;
|
||
background: rgba(var(--color-base1), 0.2);
|
||
display: flex;
|
||
|
||
.tab-item {
|
||
display: inline-block;
|
||
flex: 1;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.activeService {
|
||
border: 1px solid rgba(var(--color-base1), 1);
|
||
border-radius: 5px;
|
||
}
|
||
}
|
||
|
||
.itemLabel {
|
||
width: 64px;
|
||
flex: 0 0 64px;
|
||
white-space: nowrap;
|
||
text-align: right;
|
||
display: inline-block;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.tabPanel {
|
||
margin: 0;
|
||
|
||
.item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 15px 0;
|
||
|
||
.select {}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
text-align: center;
|
||
|
||
button {
|
||
width: 166px;
|
||
height: 40px;
|
||
border-radius: 0;
|
||
::v-deep span {
|
||
font-weight: 500;
|
||
}
|
||
|
||
&:hover {
|
||
border: 1px solid rgba(var(--color-base1), 1) !important;
|
||
}
|
||
}
|
||
|
||
button:nth-child(1) {
|
||
background: rgba(0, 255, 255, 1) !important;
|
||
border-color: #ff000000 !important;
|
||
color: rgba(0, 66, 66, 1) !important;
|
||
}
|
||
|
||
button:nth-child(2) {
|
||
background: rgba(255, 255, 255, 1) !important;
|
||
border-color: rgba(204, 204, 204, 0.4) !important;
|
||
color: rgba(102, 102, 102, 1) !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
::v-deep .el-popper {
|
||
z-index: 9999 !important;
|
||
}
|
||
</style>
|
||
<style lang="scss">
|
||
.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%),
|
||
rgba(0, 0, 0, 0.6) !important;
|
||
|
||
.el-message-box__btns {
|
||
.el-button {
|
||
--el-button-text-color: #fff;
|
||
--el-button-bg-color: rgba(var(--color-base1), 0.2) !important;
|
||
--el-button-hover-bg-color: rgba(var(--color-base1), 0.2) !important;
|
||
--el-button-border-color: rgba(var(--color-base1), 0.5) !important;
|
||
--el-button-hover-border-color: rgba(var(--color-base1), 1) !important;
|
||
--el-button-hover-text-color: rgba(var(--color-base1), 1) !important;
|
||
}
|
||
|
||
.el-button--primary {
|
||
--el-button-bg-color: rgba(var(--color-base1), 0.2) !important;
|
||
--el-button-hover-bg-color: rgba(var(--color-base1), 0.2) !important;
|
||
}
|
||
|
||
.el-button:focus-visible {
|
||
outline: none !important;
|
||
}
|
||
}
|
||
}
|
||
</style>
|