From d4d5d48934c3c9647ae73eb2e61cd6bd5a8bba69 Mon Sep 17 00:00:00 2001
From: GuLiMmo <2820890765@qq.com>
Date: Fri, 22 Mar 2024 08:46:13 +0800
Subject: [PATCH] update
---
src/components/waylinetool/event-edit.vue | 114 +++++++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 102 insertions(+), 12 deletions(-)
diff --git a/src/components/waylinetool/event-edit.vue b/src/components/waylinetool/event-edit.vue
index 31fa5c9..2a5c461 100644
--- a/src/components/waylinetool/event-edit.vue
+++ b/src/components/waylinetool/event-edit.vue
@@ -1,24 +1,114 @@
<template>
- <div class="event-container">
- <div class="edit-box"></div>
- <div class="map-box"></div>
+ <div class="event-container" v-if="isActionEditShow">
+ <div class="edit-box" v-if="currentPointEvent">
+ <div class="header">
+ <div class="action-name">
+ <img :src="currentPointEvent.aciton.icon" alt="icon" />
+ <span>{{ currentPointEvent.aciton.name }}</span>
+ </div>
+ <div class="action-index">{{ currentPointEvent.actionIndex }}</div>
+ <div class="action-del">
+ <span @click="handleDelAction"><DeleteOutlined /></span>
+ </div>
+ </div>
+ <div class="event-edit">
+ <template v-if="currentPointEvent.aciton.key === 'takePhoto'">
+ 1
+ </template>
+ </div>
</div>
+ <div class="map-box"></div>
+ </div>
</template>
-<script lang="ts" scoped>
+<script lang="ts" setup>
+import { DeleteOutlined } from '@ant-design/icons-vue'
+import { useMyStore } from '/@/store'
+import { actionList } from '/@/utils/cesium/use-map-draw'
+import { template as xmlTemplate } from '/@/utils/cesium/use-kmz-tsa'
+
+const store = useMyStore()
+// 事件编辑是否显示
+const isActionEditShow = computed(() => store.state.waylineTool.isShow)
+// 当前点事件
+const selectedAction = computed(() => store.state.waylineTool.selectedAction)
+
+const currentPointEvent = computed(() => {
+ const placemarks = xmlTemplate.value.Folder.Placemark
+ const pointIndex = store.state.waylineTool.selectedPoint
+ if (pointIndex === undefined) return null
+ const currentPoint = placemarks[pointIndex]
+ const actions = currentPoint.actionGroup.action
+ let actionIndex = 1
+ if (Array.isArray(actions)) {
+ actionIndex = actions.findIndex((item: { actionActuatorFunc: { '#text': string } }) => {
+ return item.actionActuatorFunc['#text'] === selectedAction.value.key
+ })
+ }
+ return {
+ aciton: selectedAction.value,
+ actionIndex: `${pointIndex + 1}-${actionIndex + 1}`,
+ }
+})
+
+const handleDelAction = () => {}
</script>
<style lang="scss" scoped>
.event-container {
- width: 100%;
- height: 100%;
- display: flex;
- flex-direction: column;
- background: rgb(35, 35, 35);
- .edit-box,
- .map-box {
+ width: 400px;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ background: rgb(35, 35, 35);
+ color: #fff;
+ .edit-box {
+ width: 400px;
+ height: calc(100% - 300px);
+ .header {
+ padding: 0 15px;
+ height: 50px;
+ border-bottom: 1px solid rgb(79, 79, 79);
+ display: flex;
+ align-items: center;
+ div {
flex: 1;
- border: 1px solid red;
+ flex-shrink: 0;
+ }
+ .action-name {
+ display: flex;
+ align-items: center;
+ img {
+ width: 15px;
+ height: 15px;
+ margin-right: 3px;
+ }
+ }
+ .action-index {
+ text-align: center;
+ font-weight: bold;
+ }
+ .action-del {
+ display: flex;
+ justify-content: flex-end;
+ span {
+ cursor: pointer;
+ &:hover {
+ color: #409eff;
+ }
+ }
+ }
}
+ .event-edit {
+ width: 100%;
+ height: calc(100% - 50px);
+ padding: 15px;
+ overflow: auto;
+ }
+ }
+ .map-box {
+ width: 400px;
+ height: 300px;
+ }
}
</style>
--
Gitblit v1.9.3