This commit is contained in:
zh
2025-11-06 10:05:15 +08:00
13 changed files with 126 additions and 55 deletions

Binary file not shown.

View File

@ -45,5 +45,12 @@ export const TsApi = {
url: "/tsEvent/query",
params: data
})
}
},
// /tsEvent/add
addTsEvent: async (data: any) => {
return await request.post({
url: '/tsEvent/add',
data
})
},
}

View File

@ -7,7 +7,10 @@
</template>
<template v-for="(event,index) in eventList" :key="index">
<div class="row" :style="getStyle">
<div class="bar" :style="progressStyle(event)">{{ event.name + event.duration_time }}</div>
<div class="bar" :style="progressStyle(event)" @dblclick="clickEventBar(event)">{{
event.name + event.duration_time
}}
</div>
</div>
</template>
</div>
@ -15,10 +18,16 @@
</template>
<script lang="ts" setup>
import {computed, ref, watchEffect} from "vue";
import {computed, inject, ref, watchEffect} from "vue";
const selectedEventId = ref(null)
const eventBus: any = inject('bus')
const props = defineProps(['eventList', 'hr', 'originHrOffset', 'scrollLeft'])
let clickEventBar = (event) => {
console.log("点击事件块")
selectedEventId.value = (selectedEventId.value == null || selectedEventId.value != event.id) ? event.id : null
eventBus.emit('click-event-show-plane', event)
}
// 1. 定义响应式变量,用于强制更新
const refreshKey = ref(0)
@ -75,11 +84,17 @@ let getWidth = (durationTime) => {
// 6. 让 progressStyle 间接依赖 refreshKey通过 getWidth
let progressStyle = (task) => {
let taskLeft = task.start_time - window['tsObj']._Store._startTimestamp;
return {
let taskLeft = task.startTime - window['tsObj']._Store._startTimestamp;
let style = {
width: getWidth(task.duration_time) * 1000 + "px",
left: getWidth(taskLeft) + "px",
};
if (task.id == selectedEventId.value) {
style.border = "1px solid #fff"
style.borderRadius = "3px"
}
return style
}
</script>

View File

@ -1,6 +1,11 @@
<template>
<div class="eventParams">
<template v-if="isNoEvent">
<template v-if="eventObj">
<div>
<span>{{ eventObj.name }}</span>
</div>
</template>
<template v-else>
<div class="tourBox">
<img src="../../../assets/img/tour.png">
<p>选中事件调整属性</p>
@ -10,8 +15,14 @@
</template>
<script lang="ts" setup>
import {ref} from 'vue'
import {inject, ref} from 'vue'
const eventBus: any = inject('bus')
let eventObj = ref(null)
eventBus.on('click-event-show-plane', (params) => {
console.log('兄弟 B 的方法被触发了!', params)
eventObj.value = (eventObj.value == null ? params : null)
})
let isNoEvent = ref(true)
</script>

View File

@ -24,14 +24,14 @@ import {computed, onMounted, ref} from "vue"
const props = defineProps(['eventList',])
let columns = ref([{name: '事件名称', key: "name", style: "flex:auto"},
{name: '开始时间', key: "start_time", style: "width:120px"},
{name: '开始时间', key: "startTime", style: "width:120px"},
{name: '持续时间', key: "duration_time", style: "width:70px"}])
// let eventList = ref([])
let style = ref({})
// eventList.value = window['tsObj']._Store._tasks
// 格式化时间
let format = (key, val) => {
if ('start_time' == key) {
if ('startTime' == key) {
return window['tsObj'].parseTime(val, "{m}-{d} {h}:{i}:{s}")
}
return val

View File

@ -41,7 +41,7 @@ const rightClickTreeNode: any = ref()
const {itemClick} = useRightMenu()
const eventBus: any = inject('bus')
const itemClicks = (item) => {
itemClick(item, eventBus)
itemClick(item, rightClickTreeNode.value, eventBus)
$changeComponentShow('.rightMenuTs', false)
}

View File

@ -139,8 +139,14 @@ export const useRightOperate = () => {
}
})
}
const addEvent = (eventBus) => {
eventBus.emit('openAddEvent', true)
const delNode = () => {
console.log("删除节点")
}
const editNode = () => {
console.log("编辑节点")
}
const addEvent = (node, eventBus) => {
eventBus.emit('openAddEvent', node)
}
const rightMenus: any = reactive({
addDirectory: {
@ -153,11 +159,11 @@ export const useRightOperate = () => {
},
edit: {
key: 'edit',
callback: addResource
callback: editNode
},
del: {
key: 'del',
callback: addResource
callback: delNode
},
addEvent: {
key: 'addEvent',

View File

@ -5,21 +5,21 @@
<div class="control">
<span>{{ formatTime(currentStamp) }}</span>
<el-icon :size="20" @click="play">
<ZoomOut/>
<ZoomOut />
</el-icon>
<el-icon :size="20" @click="stop">
<ZoomIn/>
<ZoomIn />
</el-icon>
<span class="title">{{ TSOBJ.name }}</span>
<span class="zoom">
<el-icon :size="20" @click="add(-1)">
<ZoomOut/>
</el-icon>
<ZoomOut />
</el-icon>
<el-slider :disabled="true" :max="maxLevel" :min="minLevel" v-model="level" :show-tooltip="false"
style="width:80%;padding-right: 8px;"/>
style="width:80%;padding-right: 8px;" />
<el-icon :size="20" @click="add(1)">
<ZoomIn/>
</el-icon>
<ZoomIn />
</el-icon>
</span>
</div>
<div class="layoutBoxs">
@ -35,17 +35,12 @@
<!--<span class="timeline-icon16" v-drags="timing"></span>-->
</div>
<!-- 时间轴刻度线 -->
<timeScale
:ticTiny="ticTiny"
:ticMain="ticMain"
:distanceOfTicTiny="distanceOfTicTiny"
:distanceOfTicMain="distanceOfTicMain"
:originOffset="originOffset"
:originMainOffset="originMainOffset"
></timeScale>
<timeScale :ticTiny="ticTiny" :ticMain="ticMain" :distanceOfTicTiny="distanceOfTicTiny"
:distanceOfTicMain="distanceOfTicMain" :originOffset="originOffset" :originMainOffset="originMainOffset">
</timeScale>
<!-- 事件色块 -->
<chart :eventList="TSOBJ._Store._tasks" :hr="hr" :originHrOffset="originHrOffset"
:scrollLeft="scrollLeft"></chart>
<chart :eventList="TSOBJ._Store._tasks" :hr="hr" :originHrOffset="originHrOffset" :scrollLeft="scrollLeft">
</chart>
</div>
</div>
</div>
@ -56,13 +51,13 @@
</template>
<script setup lang="ts">
import {ZoomIn, ZoomOut} from '@element-plus/icons-vue'
import { ZoomIn, ZoomOut } from '@element-plus/icons-vue'
import EventParams from "./components/eventParams.vue"
import Grid from "./components/grid.vue"
import TimeScale from "./components/timeScale.vue"
import Chart from "./components/chart.vue"
import {ref, onBeforeUnmount} from "vue"
import { ref, onBeforeUnmount } from "vue"
let currentStamp = ref(window['tsObj']._Store._startTimestamp)
let maxLevel = ref(24)
@ -122,9 +117,8 @@ function todoEvent(timeId: number, res: any, isEnd: boolean) {
window['did_ts_Arr'].push(res.id)
switch (res.callback) {
case 'flicker':
let tsEntity = window['earth_ts'].entityMap.get(res.source_id);
tsEntity.flyTo()
tsEntity.flicker(1000, 10)
let tsEntity = window['earth_ts'].entityMap.get(res.sourceId);
tsEntity.flicker(Number(res.detail.times) * 1000, Number(res.detail.numbers))
break;
}
}
@ -136,16 +130,16 @@ let eventCallback = () => {
let timeId = Math.round(props.TSOBJ._Store._currentTimestamp / 1000);
timeId *= 1000;
// console.log(timeId)
let taskIds:any = [];
let dataMap = props.TSOBJ._Store.dealData("start_time");
let taskIds = [];
let dataMap = props.TSOBJ._Store.dealData("startTime");
console.log(dataMap)
let fun = (map, isEnd = false) => {
let keys:any = Array.from(map.keys());
let keys: any = Array.from(map.keys());
for (let i = 0; i < keys.length; i++) {
let timestamp = keys[i].split("_")[0]
let event:any = Array.from(map.values())[i]
let event: any = Array.from(map.values())[i]
let flag = props.TSOBJ._Store._currentTimestamp > timestamp && !(window as any).did_ts_Arr.includes(event.id)
if (String(keys[i]).indexOf(String(timeId)) > -1 || flag) {
taskIds.push(keys[i]);

View File

@ -57,6 +57,9 @@ let getEventList = () => {
let formData = {planId: window['planId']}
TsApi.queryTsEvent(formData).then(res => {
if (res.code == 200) {
res.data.forEach(item => {
item.duration_time = (item.endTime - item.startTime) / 1000
})
tsOBJ.value._Store._tasks = res.data
}
})

View File

@ -35,6 +35,7 @@
v-model="form.datetime"
type="datetime"
placeholder="选择触发时间"
value-format="x"
/>
</el-form-item>
<el-form-item label="持续时间">
@ -96,6 +97,7 @@
//@ts-nocheck
import {ref, reactive} from "vue";
import type {RenderContentContext, TreeInstance} from 'element-plus'
import {TsApi} from "../../api/ts";
const treeRef = ref<TreeInstance>()
// 存储当前需要高亮的节点 key初始为空
@ -107,9 +109,10 @@ interface Tree {
}
const form = reactive({
name: '',
datetime: '',
name: '闪烁-',
// datetime: '',
})
const zNode = ref({})
const hour = ref(0)
const minute = ref(0)
const second = ref(0)
@ -118,7 +121,7 @@ const numbers = ref(0)//闪烁次数
const isContainModelPosition = ref(true)
const eventBus: any = inject('bus')
// form['datetime'] = new Date(2000, 1, 1, 12, 0, 0)
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 }[] = [
{
@ -128,10 +131,12 @@ const eventTree: { children: ({ label: string } | { label: string })[]; id: stri
{
id: "flicker",
label: '闪烁事件',
name: '闪烁'
},
{
id: "move",
label: '机动事件',
name: '机动'
},
],
},
@ -143,15 +148,41 @@ const defaultProps = {
}
const handleNodeClick = (data: Tree, node, TreeNode, event) => {
currentKey.value = data.id; // data.id 为节点的唯一 key需与 tree 的 node-key 对应)
form.name = data.label
form.name = data.name + '-' + zNode.value.sourceName
}
const addEvent = () => {
console.log(form)
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
isShowPup.value = data
zNode.value = data
isShowPup.value = true
form.name = '闪烁-' + data.sourceName
// if (data) {
// getModelList()
// getSetting()
@ -160,9 +191,7 @@ eventBus.on('openAddEvent', (data, cb, type) => {
</script>
<style lang="scss" scoped>
:deep(.newEvent>div) {
position: absolute;
}
.newEvent {
position: absolute;
@ -243,10 +272,15 @@ eventBus.on('openAddEvent', (data, cb, type) => {
}
}
:deep(.el-overlay) {
position: absolute;
}
:deep(.el-overlay-dialog) {
/*position: absolute;
bottom: auto;
right: auto;*/
bottom: auto;
}
:deep(.el-dialog) {

View File

@ -132,7 +132,7 @@ export class Store {
// console.log("newLeft", newLeft)
}
dealData(key = "start_time", value = []) {
dealData(key = "startTime", value = []) {
let map = new Map()
for (let j = 0; j < this._tasks.length; j++) {

View File

@ -68,6 +68,7 @@ export class TS extends Tools {
this._Store.setScale('originHrOffset', obj.top - obj.top % cellHeight)
}
break;
}
}
}

View File

@ -1,7 +1,7 @@
export const useRightMenu = () => {
const itemClick = (menuItem: any, eventBus) => {
return menuItem.callback(eventBus)
const itemClick = (menuItem: any, node, eventBus) => {
return menuItem.callback(node, eventBus)
}
return { itemClick }
return {itemClick}
}