时间属性编辑面板
This commit is contained in:
Binary file not shown.
@ -45,5 +45,12 @@ export const TsApi = {
|
|||||||
url: "/tsEvent/query",
|
url: "/tsEvent/query",
|
||||||
params: data
|
params: data
|
||||||
})
|
})
|
||||||
}
|
},
|
||||||
|
// /tsEvent/add
|
||||||
|
addTsEvent: async (data: any) => {
|
||||||
|
return await request.post({
|
||||||
|
url: '/tsEvent/add',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
@ -7,7 +7,10 @@
|
|||||||
</template>
|
</template>
|
||||||
<template v-for="(event,index) in eventList" :key="index">
|
<template v-for="(event,index) in eventList" :key="index">
|
||||||
<div class="row" :style="getStyle">
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
@ -15,10 +18,16 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<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'])
|
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. 定义响应式变量,用于强制更新
|
// 1. 定义响应式变量,用于强制更新
|
||||||
const refreshKey = ref(0)
|
const refreshKey = ref(0)
|
||||||
|
|
||||||
@ -75,11 +84,17 @@ let getWidth = (durationTime) => {
|
|||||||
|
|
||||||
// 6. 让 progressStyle 间接依赖 refreshKey(通过 getWidth)
|
// 6. 让 progressStyle 间接依赖 refreshKey(通过 getWidth)
|
||||||
let progressStyle = (task) => {
|
let progressStyle = (task) => {
|
||||||
let taskLeft = task.start_time - window['tsObj']._Store._startTimestamp;
|
let taskLeft = task.startTime - window['tsObj']._Store._startTimestamp;
|
||||||
return {
|
let style = {
|
||||||
width: getWidth(task.duration_time) * 1000 + "px",
|
width: getWidth(task.duration_time) * 1000 + "px",
|
||||||
left: getWidth(taskLeft) + "px",
|
left: getWidth(taskLeft) + "px",
|
||||||
};
|
};
|
||||||
|
if (task.id == selectedEventId.value) {
|
||||||
|
style.border = "1px solid #fff"
|
||||||
|
style.borderRadius = "3px"
|
||||||
|
}
|
||||||
|
|
||||||
|
return style
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@ -1,6 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="eventParams">
|
<div class="eventParams">
|
||||||
<template v-if="isNoEvent">
|
<template v-if="eventObj">
|
||||||
|
<div>
|
||||||
|
<span>{{ eventObj.name }}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
<div class="tourBox">
|
<div class="tourBox">
|
||||||
<img src="../../../assets/img/tour.png">
|
<img src="../../../assets/img/tour.png">
|
||||||
<p>选中事件调整属性</p>
|
<p>选中事件调整属性</p>
|
||||||
@ -10,8 +15,14 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<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)
|
let isNoEvent = ref(true)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@ -23,14 +23,14 @@ import {computed, onMounted, ref} from "vue"
|
|||||||
const props = defineProps(['eventList',])
|
const props = defineProps(['eventList',])
|
||||||
|
|
||||||
let columns = ref([{name: '事件名称', key: "name", style: "flex:auto"},
|
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"}])
|
{name: '持续时间', key: "duration_time", style: "width:70px"}])
|
||||||
// let eventList = ref([])
|
// let eventList = ref([])
|
||||||
let style = ref({})
|
let style = ref({})
|
||||||
// eventList.value = window['tsObj']._Store._tasks
|
// eventList.value = window['tsObj']._Store._tasks
|
||||||
// 格式化时间
|
// 格式化时间
|
||||||
let format = (key, val) => {
|
let format = (key, val) => {
|
||||||
if ('start_time' == key) {
|
if ('startTime' == key) {
|
||||||
return window['tsObj'].parseTime(val, "{m}-{d} {h}:{i}:{s}")
|
return window['tsObj'].parseTime(val, "{m}-{d} {h}:{i}:{s}")
|
||||||
}
|
}
|
||||||
return val
|
return val
|
||||||
|
|||||||
@ -40,7 +40,7 @@ const rightClickTreeNode: any = ref()
|
|||||||
const {itemClick} = useRightMenu()
|
const {itemClick} = useRightMenu()
|
||||||
const eventBus: any = inject('bus')
|
const eventBus: any = inject('bus')
|
||||||
const itemClicks = (item) => {
|
const itemClicks = (item) => {
|
||||||
itemClick(item, eventBus)
|
itemClick(item, rightClickTreeNode.value, eventBus)
|
||||||
$changeComponentShow('.rightMenuTs', false)
|
$changeComponentShow('.rightMenuTs', false)
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -139,8 +139,14 @@ export const useRightOperate = () => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
const addEvent = (eventBus) => {
|
const delNode = () => {
|
||||||
eventBus.emit('openAddEvent', true)
|
console.log("删除节点")
|
||||||
|
}
|
||||||
|
const editNode = () => {
|
||||||
|
console.log("编辑节点")
|
||||||
|
}
|
||||||
|
const addEvent = (node, eventBus) => {
|
||||||
|
eventBus.emit('openAddEvent', node)
|
||||||
}
|
}
|
||||||
const rightMenus: any = reactive({
|
const rightMenus: any = reactive({
|
||||||
addDirectory: {
|
addDirectory: {
|
||||||
@ -153,11 +159,11 @@ export const useRightOperate = () => {
|
|||||||
},
|
},
|
||||||
edit: {
|
edit: {
|
||||||
key: 'edit',
|
key: 'edit',
|
||||||
callback: addResource
|
callback: editNode
|
||||||
},
|
},
|
||||||
del: {
|
del: {
|
||||||
key: 'del',
|
key: 'del',
|
||||||
callback: addResource
|
callback: delNode
|
||||||
},
|
},
|
||||||
addEvent: {
|
addEvent: {
|
||||||
key: 'addEvent',
|
key: 'addEvent',
|
||||||
|
|||||||
@ -122,9 +122,8 @@ function todoEvent(timeId: number, res: any, isEnd: boolean) {
|
|||||||
window['did_ts_Arr'].push(res.id)
|
window['did_ts_Arr'].push(res.id)
|
||||||
switch (res.callback) {
|
switch (res.callback) {
|
||||||
case 'flicker':
|
case 'flicker':
|
||||||
let tsEntity = window['earth_ts'].entityMap.get(res.source_id);
|
let tsEntity = window['earth_ts'].entityMap.get(res.sourceId);
|
||||||
tsEntity.flyTo()
|
tsEntity.flicker(Number(res.detail.times) * 1000, Number(res.detail.numbers))
|
||||||
tsEntity.flicker(1000, 10)
|
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -137,7 +136,7 @@ let eventCallback = () => {
|
|||||||
timeId *= 1000;
|
timeId *= 1000;
|
||||||
// console.log(timeId)
|
// console.log(timeId)
|
||||||
let taskIds = [];
|
let taskIds = [];
|
||||||
let dataMap = props.TSOBJ._Store.dealData("start_time");
|
let dataMap = props.TSOBJ._Store.dealData("startTime");
|
||||||
console.log(dataMap)
|
console.log(dataMap)
|
||||||
|
|
||||||
let fun = (map, isEnd = false) => {
|
let fun = (map, isEnd = false) => {
|
||||||
|
|||||||
@ -56,6 +56,9 @@ let getEventList = () => {
|
|||||||
let formData = {planId: window['planId']}
|
let formData = {planId: window['planId']}
|
||||||
TsApi.queryTsEvent(formData).then(res => {
|
TsApi.queryTsEvent(formData).then(res => {
|
||||||
if (res.code == 200) {
|
if (res.code == 200) {
|
||||||
|
res.data.forEach(item => {
|
||||||
|
item.duration_time = (item.endTime - item.startTime) / 1000
|
||||||
|
})
|
||||||
tsOBJ.value._Store._tasks = res.data
|
tsOBJ.value._Store._tasks = res.data
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@ -35,6 +35,7 @@
|
|||||||
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="持续时间">
|
||||||
@ -95,6 +96,7 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
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";
|
||||||
|
|
||||||
const treeRef = ref<TreeInstance>()
|
const treeRef = ref<TreeInstance>()
|
||||||
// 存储当前需要高亮的节点 key(初始为空)
|
// 存储当前需要高亮的节点 key(初始为空)
|
||||||
@ -106,9 +108,10 @@ interface Tree {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const form = reactive({
|
const form = reactive({
|
||||||
name: '',
|
name: '闪烁-',
|
||||||
datetime: '',
|
// datetime: '',
|
||||||
})
|
})
|
||||||
|
const zNode = ref({})
|
||||||
const hour = ref(0)
|
const hour = ref(0)
|
||||||
const minute = ref(0)
|
const minute = ref(0)
|
||||||
const second = ref(0)
|
const second = ref(0)
|
||||||
@ -117,7 +120,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(2000, 1, 1, 12, 0, 0)
|
form['datetime'] = new Date(2025, 10, 5, 18, 8, 43)
|
||||||
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 }[] = [
|
||||||
{
|
{
|
||||||
@ -127,10 +130,12 @@ const eventTree: { children: ({ label: string } | { label: string })[]; id: stri
|
|||||||
{
|
{
|
||||||
id: "flicker",
|
id: "flicker",
|
||||||
label: '闪烁事件',
|
label: '闪烁事件',
|
||||||
|
name: '闪烁'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "move",
|
id: "move",
|
||||||
label: '机动事件',
|
label: '机动事件',
|
||||||
|
name: '机动'
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
@ -142,15 +147,41 @@ const defaultProps = {
|
|||||||
}
|
}
|
||||||
const handleNodeClick = (data: Tree, node, TreeNode, event) => {
|
const handleNodeClick = (data: Tree, node, TreeNode, event) => {
|
||||||
currentKey.value = data.id; // data.id 为节点的唯一 key(需与 tree 的 node-key 对应)
|
currentKey.value = data.id; // data.id 为节点的唯一 key(需与 tree 的 node-key 对应)
|
||||||
form.name = data.label
|
form.name = data.name + '-' + zNode.value.sourceName
|
||||||
}
|
}
|
||||||
const addEvent = () => {
|
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) => {
|
eventBus.on('openAddEvent', (data, cb, type) => {
|
||||||
|
console.log("openAddEvent", data)
|
||||||
// selectCallback = cb
|
// selectCallback = cb
|
||||||
// addType.value = type
|
// addType.value = type
|
||||||
isShowPup.value = data
|
zNode.value = data
|
||||||
|
isShowPup.value = true
|
||||||
|
form.name = '闪烁-' + data.sourceName
|
||||||
// if (data) {
|
// if (data) {
|
||||||
// getModelList()
|
// getModelList()
|
||||||
// getSetting()
|
// getSetting()
|
||||||
@ -159,9 +190,7 @@ eventBus.on('openAddEvent', (data, cb, type) => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
:deep(.newEvent>div) {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.newEvent {
|
.newEvent {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -242,10 +271,15 @@ eventBus.on('openAddEvent', (data, cb, type) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:deep(.el-overlay) {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
:deep(.el-overlay-dialog) {
|
:deep(.el-overlay-dialog) {
|
||||||
/*position: absolute;
|
/*position: absolute;
|
||||||
bottom: auto;
|
|
||||||
right: auto;*/
|
right: auto;*/
|
||||||
|
bottom: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.el-dialog) {
|
:deep(.el-dialog) {
|
||||||
|
|||||||
@ -132,7 +132,7 @@ export class Store {
|
|||||||
// console.log("newLeft", newLeft)
|
// console.log("newLeft", newLeft)
|
||||||
}
|
}
|
||||||
|
|
||||||
dealData(key = "start_time", value = []) {
|
dealData(key = "startTime", value = []) {
|
||||||
let map = new Map()
|
let map = new Map()
|
||||||
for (let j = 0; j < this._tasks.length; j++) {
|
for (let j = 0; j < this._tasks.length; j++) {
|
||||||
|
|
||||||
|
|||||||
@ -68,6 +68,7 @@ export class TS extends Tools {
|
|||||||
this._Store.setScale('originHrOffset', obj.top - obj.top % cellHeight)
|
this._Store.setScale('originHrOffset', obj.top - obj.top % cellHeight)
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
export const useRightMenu = () => {
|
export const useRightMenu = () => {
|
||||||
const itemClick = (menuItem: any, eventBus) => {
|
const itemClick = (menuItem: any, node, eventBus) => {
|
||||||
return menuItem.callback(eventBus)
|
return menuItem.callback(node, eventBus)
|
||||||
}
|
}
|
||||||
|
|
||||||
return { itemClick }
|
return {itemClick}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user