zhouyulong/electron-4
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'zyl' of http://xny.yj-3d.com:3000/zhouyulong/electron-4 into zyl

Browse Source
This commit is contained in:
zh
2025-11-10 15:29:14 +08:00
parent cde7f5980f 2a8ffa8b7d
commit 64cad82a92
14 changed files with 1172 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/renderer/src/api/ts/index.ts
View File

@ -33,6 +33,13 @@ export const TsApi = {
data
})
},
// /tsSource/delete
deleteTsModelSource: async (data: any) => {
return await request.post({
url: '/tsSource/delete',
data
})
},
queryTsSource: async (data: any) => {
return await request.post({
url: '/tsSource/query',

20
src/renderer/src/router/index.ts
View File

@ -2,21 +2,21 @@ import { createRouter, createWebHashHistory } from 'vue-router'
import homeIndex from '@/views/home/index.vue'
const routes = [
// {
// path: '/',
// component: () => import('@/views/login/index.vue'),
// hidden: true
// },
{
path: '/',
component: () => import('@/views/author/index.vue'),
hidden: true
},
{
path: '/login',
component: () => import('@/views/login/index.vue'),
hidden: true
},
// {
// path: '/',
// component: () => import('@/views/author/index.vue'),
// hidden: true
// },
// {
// path: '/login',
// component: () => import('@/views/login/index.vue'),
// hidden: true
// },
{ path: '/ts', component: () => import('@/views/TS/list.vue'), hidden: true },
{ path: '/tsEdit', name: 'tsEdit', component: () => import('@/views/TS/edit.vue'), hidden: true },
{ path: '/404', component: () => import('@/views/404.vue'), hidden: true },

35
src/renderer/src/views/TS/cabin.vue
View File

@ -50,9 +50,15 @@ const initTreeCallBack = () => {
if (res.code == 200) {
for (let i = res.data.length - 1; i >= 0; i--) {
res.data[i].svg = await cusNodeIcon(res.data[i]);
}
zNodes.value = res.data
console.log("data", zNodes.value)
/*zNodes.value.forEach(item => {
if (typeof item.detail == 'string') {
item.detail = JSON.parse(item.detail)
}
})*/
console.log("zNodes.value", zNodes.value)
treeObj.value = $.fn.zTree.init($(`#treeDemos`), setting, zNodes.value)
window.treeObj = treeObj.value
}
@ -73,8 +79,8 @@ const initTreeCallBack = () => {
if (arr[i].sourceType === 'directory') {
continue
}
let detail = JSON.parse(arr[i].detail || '{}')
let params = JSON.parse(arr[i].params || '{}')
let detail = typeof arr[i].detail == 'string' ? JSON.parse(arr[i].detail || '{}') : arr[i].detail
let params = typeof arr[i].params == 'string' ? JSON.parse(arr[i].params || '{}') : arr[i].params
if (!detail.name) {
detail.name = arr[i].sourceName
}
@ -89,10 +95,29 @@ const initTreeCallBack = () => {
}
)
} else {
console.log({...detail, ...params})
initMapData(arr[i].sourceType, {...detail, ...params})
}
}
}
}
//gis实例渲染后，查找是否有相关的轨迹运动对象，有则渲染
let guijiEvents = window['tsObj']._Store.getTaskByProperty("move", "callback")
guijiEvents.forEach(event => {
let detail = typeof event.detail == 'string' ? JSON.parse(event.detail) : JSON.parse(JSON.stringify(event.detail))
let duration_S = (event.endTime - event.startTime) / 1000
let distance = new YJ.Tools().computeDistance2(detail.line.positions);
let speed = (distance / duration_S) * window['tsObj']._Store._multiplier
detail.speed = speed
console.log("event的detail", detail)
initMapData("guiji", detail, (TrajectoryMotionObject) => {
TrajectoryMotionObject.state = false
TrajectoryMotionObject.oldSpeed = (distance / duration_S) * window['tsObj']._Store._multiplier
(window as any)._entityMap.set(event.id + event.callback + event.sourceId, TrajectoryMotionObject)
let tsEntitys = (window as any)._entityMap.get(event.sourceId);
TrajectoryMotionObject.moveCallBack(tsEntitys)
})
})
layers.sort((obj1, obj2) => {
return obj1.detail.layerIndex - obj2.detail.layerIndex;
});

5
src/renderer/src/views/TS/components/eventParams.vue
View File

@ -47,7 +47,10 @@ eventBus.on('click-event-show-plane', (params) => {
console.log('兄弟 B 的方法被触发了！', params)
eventObj.value = (params ? params : null)
if (eventObj.value) {
let details = JSON.parse(eventObj.value.detail)
let details = eventObj.value.detail
if (typeof details == 'string') {
details = JSON.parse(eventObj.value.detail)
}
switch (params.callback) {
case 'flicker':
// times.value = detail.times

27
src/renderer/src/views/TS/components/grid.vue
View File

@ -58,24 +58,35 @@ const props = defineProps(['eventList',])
const menus = ref([
{
name: "删除",
fun: () => {
let param = new FormData
param.append("id", rightClickEvent.value.id)
TsApi.delEvent(param).then(res => {
if (res.code == 200) {
eventBus.emit('delete-event', rightClickEvent.value.id)
fun:
() => {
delEvent([rightClickEvent.value.id], () => {
ElMessage({message: "操作成功", type: "success"})
rightClickEvent.value = null
}
})
}
}, {
name: '定位', fun: () => {
let entity = window['earth_ts'].entityMap.get(rightClickEvent.value.sourceId)
entity && entity.flyTo()
}
},])
},]
)
const clicked = ref(false)
const delEvent = (ids, cb) => {
TsApi.delEvent(ids).then(res => {
if (res.code == 200) {
eventBus.emit('delete-event', ids)
cb()
}
})
}
eventBus.on("del-event-by-source", ids => {
delEvent(ids, () => {
})
})
function onCancel() {
clicked.value = true

46
src/renderer/src/views/TS/components/rightOperate.ts
View File

@ -2,10 +2,10 @@ import {$changeComponentPop} from "../../../utils/communication";
import {ipcRenderer} from "electron";
import {addMapSource, initMapData} from "../entity";
import {TsApi} from "../../../api/ts";
import {ElMessage} from "element-plus";
import {ElMessage, ElMessageBox} from "element-plus";
import {useTreeNode} from "../../components/tree/hooks/treeNode";
const {cusAddNodes} = useTreeNode()
const {cusAddNodes, getSelectedNodes, cusRemoveNode} = useTreeNode()
function getLastPathComponent(path, extensionsToRemove = []) {
// 处理路径分隔符
@ -139,8 +139,46 @@ export const useRightOperate = () => {
}
})
}
const delNode = () => {
console.log("删除节点")
const delNode = (node, eventBus) => {
console.log("删除节点", eventBus)
ElMessageBox.confirm('此操作将永久删除节点及所有子节点, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(async () => {
let selectNodes = getSelectedNodes(window.treeObj)
let source_ids = cusRemoveNode(window.treeObj, selectNodes)
console.log(source_ids)
TsApi.deleteTsModelSource(source_ids).then(res => {
if (res.code == 0 || res.code == 200) {
ElMessage({
message: '删除成功',
type: 'success'
})
let eventIds = []
source_ids.forEach(item => {
let entity = (window as any).earth_ts.entityMap.get(item)
if (entity) {
entity.remove();
(window as any)._entityMap.delete(entity.options.id)
}
//关闭资源的编辑框，删除相关的事件
// eventBus.emit("destroyComponent", item);
let arr = window['tsObj']._Store.getTaskByProperty(item, "sourceId", "id")
eventIds = eventIds.concat(arr)
});
eventBus.emit("del-event-by-source", eventIds)
}
})
}).catch(() => {
// 用户点击取消，不执行任何操作
})
/*let formData = new FormData()
formData.append("id", "")
TsApi.deleteTsModelSource(formData).then(res => {
})*/
}
const editNode = () => {
console.log("编辑节点")

5
src/renderer/src/views/TS/deduction.vue
View File

@ -36,7 +36,8 @@
</div>
<!-- 时间轴刻度线 -->
<timeScale :ticTiny="ticTiny" :ticMain="ticMain" :distanceOfTicTiny="distanceOfTicTiny"
:distanceOfTicMain="distanceOfTicMain" :originOffset="originOffset" :originMainOffset="originMainOffset">
:distanceOfTicMain="distanceOfTicMain" :originOffset="originOffset"
:originMainOffset="originMainOffset">
</timeScale>
<!-- 事件色块 -->
<chart :eventList="TSOBJ._Store._tasks" :hr="hr" :originHrOffset="originHrOffset" :scrollLeft="scrollLeft">
@ -120,6 +121,8 @@ function todoEvent(timeId: number, res: any, isEnd: boolean) {
let tsEntity = window['earth_ts'].entityMap.get(res.sourceId);
tsEntity.flicker(Number(res.detail.times) * 1000, Number(res.detail.numbers))
break;
case 'move':
break
}
}

6
src/renderer/src/views/TS/edit.vue
View File

@ -66,9 +66,9 @@ let getEventList = () => {
})
newTS(params, events)
}
eventBus.on('delete-event', (id) => {
console.log(id)
tsOBJ.value._Store._tasks = tsOBJ.value._Store._tasks.filter(item => item.id != id)
eventBus.on('delete-event', (ids) => {
console.log(ids)
tsOBJ.value._Store._tasks = tsOBJ.value._Store._tasks.filter(item => !ids.includes(item.id))
})
// 新建态势推演对象
let newTS = (params, events) => {

17
src/renderer/src/views/TS/entity.ts
View File

@ -13,6 +13,8 @@ export function initMapData(type, data, cb: any = null) {
entityObject = new YJ.Obj.BillboardObject(window['earth_ts'], data)
break
case 'model':
data.url = baseURL + data.modelDataUrl
entityObject = new YJ.Obj.Model(window['earth_ts'], data)
break
case 'line':
@ -38,6 +40,14 @@ export function initMapData(type, data, cb: any = null) {
})
break
case "guiji":
entityObject = new YJ.Obj.TrajectoryMotionObject(
window['earth_ts'],
data
);
if (cb)
cb(entityObject)
break
}
if (entityObject) {
function getOptions() {
@ -48,7 +58,14 @@ export function initMapData(type, data, cb: any = null) {
options = getOptions()
if (entityObject.options.id) {
if (type !== 'guiji')
(window as any)._entityMap.set(entityObject.options.id, entityObject)
/*else (window as any)._entityMap.set(res.ID + res.callback + res.source_id, entityObject)
let tsEntitys = ts_Map.get(Number(res.source_id));
TrajectoryMotionObject.moveCallBack(tsEntitys);*/
}
return options

261
src/renderer/src/views/TS/newEvent.vue
View File

@ -1,10 +1,9 @@
<template>
<div class="newEvent">
<el-dialog v-model="isShowPup" :modal="true" draggable :close-on-click-modal="false">
<div class="newEvent" v-if="isShowPup">
<!-- <el-dialog v-model="isShowPup" :modal="true" draggable :close-on-click-modal="false">
<template #header>
<div class="set_pup_header">
<div class="system_title">
<!--{{ t('model.title') }}-->
态势事件
</div>
</div>
@ -72,7 +71,7 @@
<el-form-item label="路径是否包含元素点位" label-width="160">
<el-switch v-model="isContainModelPosition"/>
</el-form-item>
<el-button>绘制路径</el-button>
<el-button @click="drawLine">绘制路径</el-button>
</template>
@ -88,7 +87,91 @@
</div>
<div class="placeholder"></div>
</div>
</el-dialog>
</el-dialog>-->
<div class="set_pup_header">
<div class="system_title">
态势事件
</div>
</div>
<div class="set_detail">
<div class="sort">
<el-tree
ref="treeRef"
style="max-width: 600px"
:data="eventTree"
:props="defaultProps"
node-key="id"
:check-on-click-node="true"
@node-click="handleNodeClick"
:default-expanded-keys="['normal']"
:current-node-key="currentKey"
:class="{'custom-tree': true}"
/>
</div>
<div class="eventDetail">
<template v-if="currentKey&&currentKey!='normal'">
<el-form label-width="auto" :model="form" style="max-width: 600px">
<el-form-item label="事件名称">
<el-input v-model="form.name"/>
</el-form-item>
<el-form-item label="开始时间">
<el-date-picker
v-model="form.datetime"
type="datetime"
placeholder="选择触发时间"
/>
</el-form-item>
<el-form-item label="持续时间">
<div class="duration">
<span>
<el-input v-model="hour"/>时
</span>
<span>
<el-input v-model="minute"/>分
</span><span>
<el-input v-model="second"/>秒
</span>
</div>
</el-form-item>
<template v-if="currentKey=='flicker'">
<el-form-item label="闪烁间隔">
<div class="duration">
<span>
<el-input v-model="times"/>秒
</span>
</div>
</el-form-item>
<el-form-item label="闪烁次数">
<div class="duration">
<span>
<el-input v-model="numbers"/>次
</span>
</div>
</el-form-item>
</template>
<template v-if="currentKey=='move'">
<el-form-item label="路径是否包含元素点位" label-width="160">
<el-switch v-model="isContainModelPosition"/>
</el-form-item>
<el-button @click="drawLine">绘制路径</el-button>
</template>
<el-form-item>
<div class="optionbtn">
<el-button @click="addEvent">确定</el-button>
<el-button @click="isShowPup=false">取消</el-button>
</div>
</el-form-item>
</el-form>
</template>
</div>
<div class="placeholder"></div>
</div>
</div>
</template>
@ -98,6 +181,7 @@ import {ref, reactive} from "vue";
import type {RenderContentContext, TreeInstance} from 'element-plus'
import {TsApi} from "../../api/ts";
import {ElMessage} from "element-plus";
import {initMapData} from "./entity";
const treeRef = ref<TreeInstance>()
// 存储当前需要高亮的节点 key（初始为空）
@ -108,6 +192,7 @@ interface Tree {
children?: Tree[]
}
const eventBus: any = inject('bus')
let form = reactive({
name: '闪烁-',
// datetime: '',
@ -118,8 +203,10 @@ const minute = ref(0)
const second = ref(0)
const times = ref(0)//闪烁间隔
const numbers = ref(0)//闪烁次数
const isContainModelPosition = ref(true)
const eventBus: any = inject('bus')
const positions = ref([])//机动事件的轨迹点
form['datetime'] = new Date(window['tsObj']._Store._currentTimestamp)
const isShowPup = ref(false)
@ -150,7 +237,14 @@ const handleNodeClick = (data: Tree, node, TreeNode, event) => {
currentKey.value = data.id; // data.id 为节点的唯一 key（需与 tree 的 node-key 对应）
form.name = data.name + '-' + zNode.value.sourceName
}
const drawLine = () => {
let draw = new YJ.Draw.DrawPolyline(window['earth_ts'])
draw.start((error, p) => {
positions.value = p
})
}
const addEvent = () => {
console.log(zNode.value)
let startTime = form.datetime.getTime()
let obj = {}
switch (currentKey.value) {
@ -160,7 +254,33 @@ const addEvent = () => {
numbers: numbers.value
}
break
case 'move':
let detail = typeof zNode.value.detail == 'string' ? JSON.parse(zNode.value.detail) : JSON.parse(JSON.stringify(zNode.value.detail))
let position = [...positions.value]
if (isContainModelPosition.value) {
position.unshift(detail.positions || detail.position)
}
positions.value = position;
obj = {
ground: false,
show: true,
// speed: 0,
loop: false,
line: {
smooth: false,
show: false,
positions: positions.value,
},
isContainModelPosition: isContainModelPosition.value
}
break
}
// 当事件为机动事件且轨迹点的长度为0时，终止
if (obj['positions'] && obj['positions'].length == 0) {
ElMessage({message: "机动事件的路径不合法", type: "warning"})
return
}
let duration_S = hour.value * 3600 + minute.value * 60 + second.value
let dbParams = {
id: new YJ.Tools().randomString(),
planId: window.planId,
@ -168,9 +288,11 @@ const addEvent = () => {
name: form.name,
callback: currentKey.value,
startTime,
endTime: startTime + (hour.value * 3600 + minute.value * 60 + second.value) * 1000,
endTime: startTime + duration_S * 1000,
"detail": JSON.stringify(obj)
}
console.log(obj)
TsApi.addTsEvent(dbParams).then(res => {
if (res.code == 200) {
ElMessage({
@ -179,6 +301,19 @@ const addEvent = () => {
})
}
if (currentKey.value == 'move') {
let params = JSON.parse(JSON.stringify(obj))
let distance = new YJ.Tools().computeDistance2(params.line.positions);
let speeds = (distance / duration_S) * window['tsObj']._Store._multiplier
params.speed = speeds
initMapData("guiji", params, (entityObject) => {
entityObject.state = false
entityObject.oldSpeed = (distance / duration_S) * window['tsObj']._Store._multiplier
(window as any)._entityMap.set(dbParams.id + dbParams.callback + dbParams.sourceId, entityObject)
let tsEntitys = (window as any)._entityMap.get(dbParams.sourceId);
entityObject.moveCallBack(tsEntitys)
})
}
isShowPup.value = false
reset()
@ -195,6 +330,7 @@ const reset = () => {
name: '闪烁-',
// datetime: '',
}
form['datetime'] = new Date(window['tsObj']._Store._currentTimestamp)
currentKey.value = "flicker"
}
@ -218,10 +354,38 @@ eventBus.on('openAddEvent', (data, cb, type) => {
.newEvent {
position: absolute;
z-index: 99;
//bottom: 200px;
//left: 50%;
//width: 40vw;
//height: 50vh;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: 570px;
height: 320px;
border: 1px solid #0ff;
border-radius: 3px;
background: rgba(0, 0, 0, 0.5);
.set_pup_header {
display: flex;
justify-content: center;
align-items: center;
padding-top: 10px;
padding-bottom: 20px;
.system_title {
background: url('@/assets/images/titlebg.png') no-repeat;
background-size: 100% 100%;
width: 229px;
height: 34px;
line-height: 34px;
text-align: center;
font-family: 'alimamashuheiti';
font-size: 18px;
color: #fff;
//margin-bottom: 25px;
//font-weight: 700;
}
}
.set_detail {
display: flex;
@ -294,82 +458,9 @@ eventBus.on('openAddEvent', (data, cb, type) => {
}
}
:deep(.el-overlay) {
position: absolute;
}
:deep(.el-overlay-dialog) {
/*position: absolute;
right: auto;*/
bottom: auto;
}
:deep(.el-dialog) {
background: linear-gradient(180deg, rgba(0, 255, 255, 0.2) 0%, rgba(0, 255, 255, 0) 100%),
rgba(0, 0, 0, 0.6);
border: 1px solid #00c9ff;
padding: 0 !important;
//position: absolute;
width: 570px;
height: 323px;
}
:deep(.el-dialog__body) {
padding: 0 !important;
height: calc(100% - 50px);
}
:deep(.el-dialog__headerbtn) {
height: 30px;
width: 30px;
border-bottom-left-radius: 80%;
background-color: #008989;
&:hover {
background-color: #00ffff;
.el-dialog__close {
color: rgba(0, 66, 66, 1); // 悬停时改变关闭图标为红色
}
}
}
:deep(.el-dialog__headerbtn .el-dialog__close) {
color: #fff;
}
.set_pup_header {
width: 100%;
height: 100%;
// background-color: #00ffff;
display: flex;
justify-content: center;
align-items: center;
//padding-bottom: 20px;
.system_title {
background: url('@/assets/images/titlebg.png') no-repeat;
background-size: 100% 100%;
width: 229px;
height: 34px;
line-height: 34px;
text-align: center;
font-family: 'alimamashuheiti';
font-size: 18px;
color: #fff;
//font-weight: 700;
}
}
}
:deep(.el-input__wrapper), :deep(.el-input__inner ) {
background: transparent;
--el-input-placeholder-color: #fff;
color: #fff;
//border: 1px solid #0ff;
}
/*
:deep(.el-tree-node__children .is-checked) {

2
src/renderer/src/views/TS/newPlan.vue
View File

@ -36,7 +36,7 @@
<el-form-item>
<div class="optionbtn">
<el-button @click="addPlan(ruleFormRef)">确定</el-button>
<el-button>取消</el-button>
<el-button @click="isShowPup= false">取消</el-button>
</div>
</el-form-item>
</el-form>

11
src/renderer/src/views/TS/sdk/Store.ts
View File

@ -30,9 +30,11 @@ export class Store {
_startTimestamp
_currentTimestamp
_tasks
_multiplier
private _panelWidth //面板宽度
constructor(option) {
this._multiplier = option.multiplier || 1
this._panelWidth = option.panelWidth
this._tasks = option.tasks
this._startTimestamp = option.startTimestamp
@ -153,4 +155,13 @@ export class Store {
return map
}
// 通过特定的字段名和值来获取事件
getTaskByProperty(value, property = "ID", isReturnPropertyValue = null) {
// console.log("getTaskById", id)
if (isReturnPropertyValue) {
return this._tasks.map(task => task[isReturnPropertyValue])
} else {
return this._tasks.filter(task => (task[property] == value))
}
}
}

27
src/renderer/src/views/components/headers/components/setTool/setTool.vue
View File

@ -13,8 +13,18 @@
</div>
</div>
</div> -->
<el-tooltip v-for="(item, i) of setList" :key="item.id" :content="t('iconTitle.' + item.name)" effect="customized" :hide-after="0">
<div class="set_item" :class="{ 'last-item': i === setList.length - 1 }" @click="item.callback">
<el-tooltip
v-for="(item, i) of setList"
:key="item.id"
:content="t('iconTitle.' + item.name)"
effect="customized"
:hide-after="0"
>
<div
class="set_item"
:class="{ 'last-item': i === setList.length - 1 }"
@click="item.callback"
>
<svg-icon :name="item.icon" :size="20"></svg-icon>
</div>
</el-tooltip>
@ -48,7 +58,12 @@ const logout = async (e) => {
window.earth = null
}
if (res.code === 200) {
router.push({ path: '/login' })
router.push({
path: '/',
query: {
type: 'logout'
}
})
// localStorage.clear()
}
}
@ -152,10 +167,12 @@ ipcRenderer.on('fullscreen-status-changed', (event, isFullscreen) => {
top: 0;
bottom: 0;
width: 1px;
background: linear-gradient(180deg,
background: linear-gradient(
180deg,
rgba(var(--color-base1), 0),
rgba(var(--color-base1), 1),
rgba(204, 204, 204, 0));
rgba(204, 204, 204, 0)
);
}
.set_item.last-item::after {

770
src/renderer/src/views/login/index.vue
View File

@ -1,20 +1,35 @@
<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"
<!-- <video v-if="!isFirstVideoPlayed" ref="firstVideoRef" key="first-video" muted @ended="onFirstVideoEnded"
src="../../assets/video/login_front.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 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 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>
</transition>
<div class="rightBox" v-if="isDesktop">
<!-- 登录页面 -->
<div class="rightBox" v-if="isDesktop && !isAuth">
<el-button size="small" :icon="Setting" @click="serviceDialog = true"> </el-button>
<el-button size="small" :icon="SwitchButton" @click="goExit"> </el-button>
</div>
<transition name="fade">
<transition name="fade" v-if="!isAuth">
<div v-show="true" class="content">
<div class="titleBox">
<div class="titleItem">
@ -24,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>
@ -85,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>
@ -125,8 +199,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>
@ -140,6 +219,77 @@
</div>
</div>
</div>
<!-- 授权页面 -->
<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">
<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>
</template>
@ -191,6 +341,164 @@ onMounted(() => {
loginInit()
initialize()
})
//授权判断
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
import useClipboard from 'vue-clipboard3'
import { AuthApi } from '@/api/setting/auth'
import Dialog from '@/components/dialog/baseDialog.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { $sendElectronChanel } from '@/utils/communication'
let isAuth = ref(true)
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 baseDialog = ref(null)
const getStatus = (date) => {
const timestamp = new Date(date).getTime()
const currentTimestamp = Date.now()
if (timestamp > currentTimestamp) {
// router.push({ path: '/login' })
isAuth.value = false
} 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')
})
}
}
//授权页面
// 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) {
isAuth.value = false
baseDialog.value?.close()
}
})
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('复制失败')
}
}
if (!router.currentRoute.value.query.type) {
setTimeout(() => {
getAuthCode()
getAuthInfo()
}, 5000)
} else {
isAuth.value = false
}
</script>
<style lang="scss">
// 添加过渡样式
@ -286,7 +594,6 @@ onMounted(() => {
.el-select__tags-text {
color: rgba(0, 66, 66, 1) !important;
}
}
</style>
<style scoped lang="scss">
@ -390,7 +697,6 @@ onMounted(() => {
color: #fff;
}
}
}
}
}
@ -569,7 +875,8 @@ onMounted(() => {
align-items: center;
margin: 15px 0;
.select {}
.select {
}
}
}
}
@ -606,4 +913,387 @@ onMounted(() => {
}
}
}
//授权
.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>