383 lines
9.0 KiB
Vue
383 lines
9.0 KiB
Vue
<template>
|
||
<div class="newEvent">
|
||
<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>
|
||
</template>
|
||
<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&¤tKey!='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="选择触发时间"
|
||
value-format="x"
|
||
/>
|
||
</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>绘制路径</el-button>
|
||
</template>
|
||
|
||
|
||
<el-form-item>
|
||
<div class="optionbtn">
|
||
<el-button @click="addEvent">确定</el-button>
|
||
<el-button>取消</el-button>
|
||
</div>
|
||
</el-form-item>
|
||
</el-form>
|
||
</template>
|
||
|
||
</div>
|
||
<div class="placeholder"></div>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
//@ts-nocheck
|
||
import {ref, reactive} from "vue";
|
||
import type {RenderContentContext, TreeInstance} from 'element-plus'
|
||
import {TsApi} from "../../api/ts";
|
||
|
||
const treeRef = ref<TreeInstance>()
|
||
// 存储当前需要高亮的节点 key（初始为空）
|
||
const currentKey = ref<number | string | null>("flicker");
|
||
|
||
interface Tree {
|
||
label: string
|
||
children?: Tree[]
|
||
}
|
||
|
||
const form = reactive({
|
||
name: '闪烁-',
|
||
// datetime: '',
|
||
})
|
||
const zNode = ref({})
|
||
const hour = ref(0)
|
||
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')
|
||
|
||
form['datetime'] = new Date(2025, 10, 5, 18, 8, 43)
|
||
const isShowPup = ref(false)
|
||
const eventTree: { children: ({ label: string } | { label: string })[]; id: string; label: string }[] = [
|
||
{
|
||
id: "normal",
|
||
label: '常用推演事件',
|
||
children: [
|
||
{
|
||
id: "flicker",
|
||
label: '闪烁事件',
|
||
name: '闪烁'
|
||
},
|
||
{
|
||
id: "move",
|
||
label: '机动事件',
|
||
name: '机动'
|
||
},
|
||
],
|
||
},
|
||
]
|
||
|
||
const defaultProps = {
|
||
children: 'children',
|
||
label: 'label',
|
||
}
|
||
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 addEvent = () => {
|
||
let startTime = form.datetime.getTime()
|
||
let obj = {}
|
||
switch (currentKey.value) {
|
||
case 'flicker':
|
||
obj = {
|
||
times: times.value,
|
||
numbers: numbers.value
|
||
}
|
||
break
|
||
}
|
||
let dbParams = {
|
||
id: new YJ.Tools().randomString(),
|
||
planId: window.planId,
|
||
sourceId: zNode.value.id,
|
||
name: form.name,
|
||
callback: currentKey.value,
|
||
startTime,
|
||
endTime: startTime + (hour.value * 3600 + minute.value * 60 + second.value) * 1000,
|
||
"detail": JSON.stringify(obj)
|
||
}
|
||
TsApi.addTsEvent(dbParams).then(res => {
|
||
|
||
})
|
||
console.log(dbParams)
|
||
}
|
||
eventBus.on('openAddEvent', (data, cb, type) => {
|
||
console.log("openAddEvent", data)
|
||
// selectCallback = cb
|
||
// addType.value = type
|
||
zNode.value = data
|
||
isShowPup.value = true
|
||
form.name = '闪烁-' + data.sourceName
|
||
// if (data) {
|
||
// getModelList()
|
||
// getSetting()
|
||
// }
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
|
||
|
||
.newEvent {
|
||
position: absolute;
|
||
z-index: 99;
|
||
//bottom: 200px;
|
||
//left: 50%;
|
||
//width: 40vw;
|
||
//height: 50vh;
|
||
|
||
.set_detail {
|
||
display: flex;
|
||
height: 100%;
|
||
|
||
.sort {
|
||
height: 100%;
|
||
//width: 8vw;
|
||
width: 150px;
|
||
overflow-y: auto;
|
||
|
||
.el-tree {
|
||
background: transparent !important;
|
||
--el-tree-node-hover-bg-color: rgba(var(--color-sdk-base-rgb), 0.2) !important;
|
||
color: rgba(255, 255, 255, 1) !important;
|
||
/* font-size: 12px !important; */
|
||
//width: 130px;
|
||
float: left;
|
||
margin-left: 10px;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.eventDetail {
|
||
//flex: auto;
|
||
width: calc(100% - 170px);
|
||
overflow-y: auto;
|
||
|
||
:deep(.el-input ) {
|
||
--el-date-editor-width: 100%;
|
||
}
|
||
|
||
:deep(.el-button) {
|
||
color: #fff;
|
||
}
|
||
|
||
:deep(.el-button:not(.is-text)) {
|
||
border: 1px solid #0ff;
|
||
background: rgba(0, 255, 255, 0.2);
|
||
}
|
||
|
||
:deep(.el-button:hover) {
|
||
color: #0ff;
|
||
//background-color: transparent !important;
|
||
background: rgba(0, 255, 255, 0.2) !important;
|
||
}
|
||
|
||
.duration {
|
||
display: flex;
|
||
|
||
|
||
span {
|
||
display: inline-block;
|
||
color: #fff;
|
||
|
||
.el-input {
|
||
width: 75%;
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.optionbtn {
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
|
||
.placeholder {
|
||
width: 20px;
|
||
}
|
||
}
|
||
|
||
: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) {
|
||
background: red;
|
||
}
|
||
*/
|
||
/* 自定义高亮样式（替代默认的高亮） */
|
||
.custom-tree {
|
||
&:deep(.el-tree-node.is-current > .el-tree-node__content) {
|
||
//background-color: #e6f7ff; /* 浅蓝色高亮，可自定义 */
|
||
|
||
}
|
||
|
||
&:deep(.el-tree-node.is-current > .el-tree-node__content>.el-tree-node__label ) {
|
||
//background-color: #e6f7ff; /* 浅蓝色高亮，可自定义 */
|
||
--el-text-color: #0ff !important;
|
||
}
|
||
|
||
}
|
||
|
||
:deep(.el-text ) {
|
||
--el-text-color: #fff !important;
|
||
}
|
||
|
||
:deep(.el-form-item__label) {
|
||
color: #fff;
|
||
}
|
||
|
||
:deep(.el-form-item) {
|
||
margin-bottom: 10px;
|
||
}
|
||
</style>
|