事件的删除,修改
This commit is contained in:
@ -53,4 +53,17 @@ export const TsApi = {
|
|||||||
data
|
data
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
// /tsEvent/update
|
||||||
|
updateTsEvent: async (data: any) => {
|
||||||
|
return await request.post({
|
||||||
|
url: '/tsEvent/update',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
},
|
||||||
|
delEvent: async (data: any) => {
|
||||||
|
return await request.post({
|
||||||
|
url: '/tsEvent/delete',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -49,7 +49,7 @@ const initTreeCallBack = () => {
|
|||||||
console.log('queryTsSource', res)
|
console.log('queryTsSource', res)
|
||||||
if (res.code == 200) {
|
if (res.code == 200) {
|
||||||
for (let i = res.data.length - 1; i >= 0; i--) {
|
for (let i = res.data.length - 1; i >= 0; i--) {
|
||||||
res.data[i].icon = await cusNodeIcon(res.data[i]);
|
res.data[i].svg = await cusNodeIcon(res.data[i]);
|
||||||
}
|
}
|
||||||
zNodes.value = res.data
|
zNodes.value = res.data
|
||||||
console.log("data", zNodes.value)
|
console.log("data", zNodes.value)
|
||||||
|
|||||||
@ -24,10 +24,14 @@ const selectedEventId = ref(null)
|
|||||||
const eventBus: any = inject('bus')
|
const eventBus: any = inject('bus')
|
||||||
const props = defineProps(['eventList', 'hr', 'originHrOffset', 'scrollLeft'])
|
const props = defineProps(['eventList', 'hr', 'originHrOffset', 'scrollLeft'])
|
||||||
let clickEventBar = (event) => {
|
let clickEventBar = (event) => {
|
||||||
console.log("点击事件块")
|
console.log("点击事件块", selectedEventId.value, event.id)
|
||||||
selectedEventId.value = (selectedEventId.value == null || selectedEventId.value != event.id) ? event.id : null
|
selectedEventId.value = (selectedEventId.value == null || selectedEventId.value != event.id) ? event.id : null
|
||||||
eventBus.emit('click-event-show-plane', event)
|
eventBus.emit('click-event-show-plane', selectedEventId.value ? event : null)
|
||||||
}
|
}
|
||||||
|
// 点击事件属性编辑面板的取消按钮,取消选中时间块
|
||||||
|
eventBus.on("click-cancel-hide-plane", () => {
|
||||||
|
selectedEventId.value = null
|
||||||
|
})
|
||||||
// 1. 定义响应式变量,用于强制更新
|
// 1. 定义响应式变量,用于强制更新
|
||||||
const refreshKey = ref(0)
|
const refreshKey = ref(0)
|
||||||
|
|
||||||
|
|||||||
@ -1,8 +1,26 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="eventParams">
|
<div class="eventParams">
|
||||||
<template v-if="eventObj">
|
<template v-if="eventObj">
|
||||||
|
<div class="eventPanel">
|
||||||
|
<span class="title">{{ eventObj.name }}</span>
|
||||||
|
<div class="eventDetail">
|
||||||
|
<template v-if="eventObj.callback&&eventObj.callback=='flicker'">
|
||||||
<div>
|
<div>
|
||||||
<span>{{ eventObj.name }}</span>
|
闪烁间隔
|
||||||
|
<el-input v-model="detail.times" style="width: 50%" placeholder="Please input"/>
|
||||||
|
秒
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
闪烁次数
|
||||||
|
<el-input v-model="detail.numbers" style="width: 50%" placeholder="Please input"/>
|
||||||
|
次
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
<div class="optBtn">
|
||||||
|
<el-button @click="updateEvent">确定</el-button>
|
||||||
|
<el-button @click="cancel">取消</el-button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
@ -16,19 +34,67 @@
|
|||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import {inject, ref} from 'vue'
|
import {inject, ref} from 'vue'
|
||||||
|
import {TsApi} from "../../../api/ts";
|
||||||
|
|
||||||
|
const times = ref(0)
|
||||||
|
const numbers = ref(0)
|
||||||
|
|
||||||
|
const detail = ref({})
|
||||||
|
|
||||||
const eventBus: any = inject('bus')
|
const eventBus: any = inject('bus')
|
||||||
let eventObj = ref(null)
|
let eventObj = ref(null)
|
||||||
eventBus.on('click-event-show-plane', (params) => {
|
eventBus.on('click-event-show-plane', (params) => {
|
||||||
console.log('兄弟 B 的方法被触发了!', params)
|
console.log('兄弟 B 的方法被触发了!', params)
|
||||||
eventObj.value = (eventObj.value == null ? params : null)
|
eventObj.value = (params ? params : null)
|
||||||
|
if (eventObj.value) {
|
||||||
|
let details = JSON.parse(eventObj.value.detail)
|
||||||
|
switch (params.callback) {
|
||||||
|
case 'flicker':
|
||||||
|
// times.value = detail.times
|
||||||
|
// numbers.value = detail.numbers
|
||||||
|
detail.value = details
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
let isNoEvent = ref(true)
|
const updateEvent = () => {
|
||||||
|
// console.log(detail.value)
|
||||||
|
let obj = eventObj.value
|
||||||
|
obj.detail = JSON.stringify(detail.value)
|
||||||
|
console.log(obj)
|
||||||
|
delete obj.createdAt
|
||||||
|
delete obj.updatedAt
|
||||||
|
delete obj.duration_time
|
||||||
|
TsApi.updateTsEvent(obj).then(res => {
|
||||||
|
console.log(res)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const cancel = () => {
|
||||||
|
eventObj.value = null
|
||||||
|
detail.value = {}
|
||||||
|
eventBus.emit('click-cancel-hide-plane',)
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.eventParams {
|
.eventParams {
|
||||||
width: 20%;
|
width: 20%;
|
||||||
|
padding: 0 10px;
|
||||||
|
|
||||||
|
.eventPanel {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eventDetail {
|
||||||
|
overflow-y: auto;
|
||||||
|
height: calc(100% - 62px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.tourBox {
|
.tourBox {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -44,4 +110,11 @@ let isNoEvent = ref(true)
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:deep(.el-input__wrapper), :deep(.el-input__inner ) {
|
||||||
|
background: transparent;
|
||||||
|
--el-input-placeholder-color: #fff;
|
||||||
|
color: #fff;
|
||||||
|
//border: 1px solid #0ff;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,10 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="grid">
|
<div class="grid" @click="hideRightMenu">
|
||||||
<div class="grid-header row">
|
<div class="grid-header row">
|
||||||
<div v-for="item in columns" :style="item.style">{{ item.name }}</div>
|
<div v-for="item in columns" :style="item.style">{{ item.name }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid-body">
|
<div class="grid-body">
|
||||||
<div class="row" :style="getStyle" v-for="(event) in eventList">
|
<div :class="['row',(eventObj&&event.id==eventObj.id)?'selectedRow':'']" :style="getStyle"
|
||||||
|
v-for="(event) in eventList" @click.right="(e)=>{rightClick(e,event)}">
|
||||||
<span v-for="item in columns" :class="item.key" :style="item.style">{{
|
<span v-for="item in columns" :class="item.key" :style="item.style">{{
|
||||||
format(item.key, event[item.key])
|
format(item.key, event[item.key])
|
||||||
}}</span>
|
}}</span>
|
||||||
@ -14,15 +15,75 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="gridRightMenu" v-if="rightClickEvent">
|
||||||
|
<template v-for="item in menus">
|
||||||
|
<template v-if="item.name=='删除'">
|
||||||
|
<el-popconfirm
|
||||||
|
width="220"
|
||||||
|
icon-color="#626AEF"
|
||||||
|
title="确定要删除吗?"
|
||||||
|
@cancel="onCancel"
|
||||||
|
>
|
||||||
|
<template #reference>
|
||||||
|
<span @click="">删除</span>
|
||||||
|
</template>
|
||||||
|
<template #actions="{ confirm, cancel }">
|
||||||
|
<el-button size="small" @click="cancel">取消</el-button>
|
||||||
|
<el-button
|
||||||
|
type="danger"
|
||||||
|
size="small"
|
||||||
|
@click="()=>{item.fun(); confirm()}"
|
||||||
|
>
|
||||||
|
确定
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-popconfirm>
|
||||||
|
</template>
|
||||||
|
<span v-else @click="item.fun()">
|
||||||
|
{{ item.name }}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
//@ts-nocheck
|
//@ts-nocheck
|
||||||
import {computed, onMounted, ref} from "vue"
|
import {computed, onMounted, ref, nextTick} from "vue"
|
||||||
|
import {TsApi} from "../../../api/ts";
|
||||||
|
import {ElMessage} from "element-plus";
|
||||||
|
|
||||||
|
const eventBus: any = inject('bus')
|
||||||
const props = defineProps(['eventList',])
|
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)
|
||||||
|
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)
|
||||||
|
|
||||||
|
function onCancel() {
|
||||||
|
clicked.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
let eventObj = ref(null)
|
||||||
|
let rightClickEvent = ref(null)
|
||||||
let columns = ref([{name: '事件名称', key: "name", style: "flex:auto"},
|
let columns = ref([{name: '事件名称', key: "name", style: "flex:auto"},
|
||||||
{name: '开始时间', key: "startTime", style: "width:120px"},
|
{name: '开始时间', key: "startTime", style: "width:120px"},
|
||||||
{name: '持续时间', key: "duration_time", style: "width:70px"}])
|
{name: '持续时间', key: "duration_time", style: "width:70px"}])
|
||||||
@ -37,7 +98,28 @@ let format = (key, val) => {
|
|||||||
return val
|
return val
|
||||||
}
|
}
|
||||||
let getStyle = computed(() => {
|
let getStyle = computed(() => {
|
||||||
return "height:" + window['tsObj']._Store._scales.cellHeight + "px"
|
let style = "height:" + window['tsObj']._Store._scales.cellHeight + "px"
|
||||||
|
return style
|
||||||
|
})
|
||||||
|
const rightClick = (e, eventObj) => {
|
||||||
|
console.log("右键点击", e)
|
||||||
|
rightClickEvent.value = eventObj
|
||||||
|
nextTick(() => {
|
||||||
|
$(".gridRightMenu")[0].style.top = e.layerY + "px"
|
||||||
|
$(".gridRightMenu")[0].style.left = e.layerX + "px"
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
const hideRightMenu = (e) => {
|
||||||
|
console.log("hideRightMenu", e)
|
||||||
|
if (e.target.innerHTML != "删除")
|
||||||
|
rightClickEvent.value = null
|
||||||
|
}
|
||||||
|
eventBus.on('click-event-show-plane', (params) => {
|
||||||
|
eventObj.value = (params ? params : null)
|
||||||
|
})
|
||||||
|
eventBus.on("click-cancel-hide-plane", () => {
|
||||||
|
eventObj.value = null
|
||||||
})
|
})
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
/* let doms = document.getElementsByClassName("start_time")
|
/* let doms = document.getElementsByClassName("start_time")
|
||||||
@ -89,6 +171,30 @@ onMounted(() => {
|
|||||||
position: relative;
|
position: relative;
|
||||||
overflow-y: inherit;
|
overflow-y: inherit;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
||||||
|
.selectedRow {
|
||||||
|
background-color: rgba(0, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridRightMenu {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 99;
|
||||||
|
background: rgba(0, 0, 0, 0.8);
|
||||||
|
transform: translateY(50%);
|
||||||
|
width: 80px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border: 1.5px solid;
|
||||||
|
border-image: linear-gradient(137.95deg, rgba(var(--color-base1), 1) 6.25%, var(--color-border1) 100%) 1.5;
|
||||||
|
|
||||||
|
span {
|
||||||
|
padding: 5px 0;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -38,6 +38,7 @@ for (const routeQueryKey in route.query) {
|
|||||||
}
|
}
|
||||||
console.log("params", params)
|
console.log("params", params)
|
||||||
window.planId = params.id
|
window.planId = params.id
|
||||||
|
const eventBus: any = inject('bus')
|
||||||
|
|
||||||
// 通过planID获取方案包含的所有事件
|
// 通过planID获取方案包含的所有事件
|
||||||
let getEventList = () => {
|
let getEventList = () => {
|
||||||
@ -64,6 +65,10 @@ let getEventList = () => {
|
|||||||
})
|
})
|
||||||
newTS(params, events)
|
newTS(params, events)
|
||||||
}
|
}
|
||||||
|
eventBus.on('delete-event', (id) => {
|
||||||
|
console.log(id)
|
||||||
|
tsOBJ.value._Store._tasks = tsOBJ.value._Store._tasks.filter(item => item.id != id)
|
||||||
|
})
|
||||||
// 新建态势推演对象
|
// 新建态势推演对象
|
||||||
let newTS = (params, events) => {
|
let newTS = (params, events) => {
|
||||||
|
|
||||||
|
|||||||
@ -35,7 +35,6 @@
|
|||||||
v-model="form.datetime"
|
v-model="form.datetime"
|
||||||
type="datetime"
|
type="datetime"
|
||||||
placeholder="选择触发时间"
|
placeholder="选择触发时间"
|
||||||
value-format="x"
|
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="持续时间">
|
<el-form-item label="持续时间">
|
||||||
@ -98,6 +97,7 @@
|
|||||||
import {ref, reactive} from "vue";
|
import {ref, reactive} from "vue";
|
||||||
import type {RenderContentContext, TreeInstance} from 'element-plus'
|
import type {RenderContentContext, TreeInstance} from 'element-plus'
|
||||||
import {TsApi} from "../../api/ts";
|
import {TsApi} from "../../api/ts";
|
||||||
|
import {ElMessage} from "element-plus";
|
||||||
|
|
||||||
const treeRef = ref<TreeInstance>()
|
const treeRef = ref<TreeInstance>()
|
||||||
// 存储当前需要高亮的节点 key(初始为空)
|
// 存储当前需要高亮的节点 key(初始为空)
|
||||||
@ -108,7 +108,7 @@ interface Tree {
|
|||||||
children?: Tree[]
|
children?: Tree[]
|
||||||
}
|
}
|
||||||
|
|
||||||
const form = reactive({
|
let form = reactive({
|
||||||
name: '闪烁-',
|
name: '闪烁-',
|
||||||
// datetime: '',
|
// datetime: '',
|
||||||
})
|
})
|
||||||
@ -121,7 +121,7 @@ const numbers = ref(0)//闪烁次数
|
|||||||
const isContainModelPosition = ref(true)
|
const isContainModelPosition = ref(true)
|
||||||
const eventBus: any = inject('bus')
|
const eventBus: any = inject('bus')
|
||||||
|
|
||||||
form['datetime'] = new Date(2025, 10, 5, 18, 8, 43)
|
form['datetime'] = new Date(window['tsObj']._Store._currentTimestamp)
|
||||||
const isShowPup = ref(false)
|
const isShowPup = ref(false)
|
||||||
const eventTree: { children: ({ label: string } | { label: string })[]; id: string; label: string }[] = [
|
const eventTree: { children: ({ label: string } | { label: string })[]; id: string; label: string }[] = [
|
||||||
{
|
{
|
||||||
@ -172,10 +172,32 @@ const addEvent = () => {
|
|||||||
"detail": JSON.stringify(obj)
|
"detail": JSON.stringify(obj)
|
||||||
}
|
}
|
||||||
TsApi.addTsEvent(dbParams).then(res => {
|
TsApi.addTsEvent(dbParams).then(res => {
|
||||||
|
if (res.code == 200) {
|
||||||
|
ElMessage({
|
||||||
|
message: "操作成功",
|
||||||
|
type: "success"
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
isShowPup.value = false
|
||||||
|
|
||||||
|
reset()
|
||||||
})
|
})
|
||||||
console.log(dbParams)
|
console.log(dbParams)
|
||||||
}
|
}
|
||||||
|
const reset = () => {
|
||||||
|
hour.value = 0
|
||||||
|
minute.value = 0
|
||||||
|
second.value = 0
|
||||||
|
numbers.value = 0
|
||||||
|
times.value = 0
|
||||||
|
form = {
|
||||||
|
name: '闪烁-',
|
||||||
|
// datetime: '',
|
||||||
|
}
|
||||||
|
currentKey.value = "flicker"
|
||||||
|
|
||||||
|
}
|
||||||
eventBus.on('openAddEvent', (data, cb, type) => {
|
eventBus.on('openAddEvent', (data, cb, type) => {
|
||||||
console.log("openAddEvent", data)
|
console.log("openAddEvent", data)
|
||||||
// selectCallback = cb
|
// selectCallback = cb
|
||||||
|
|||||||
Reference in New Issue
Block a user