<template>
|
<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">
|
<take-photo
|
v-model:serial="serial"
|
v-if="['takePhoto', 'startRecord'].includes(currentPointEvent.aciton.key)"
|
/>
|
<interval-shoot
|
v-model:serial="serial"
|
v-if="['distance'].includes(currentPointEvent.aciton.key)"
|
/>
|
</div>
|
</div>
|
<div class="map-box"></div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import _ from 'lodash'
|
import { DeleteOutlined } from '@ant-design/icons-vue'
|
import { useMyStore } from '/@/store'
|
import { template as xmlTemplate } from '/@/utils/cesium/use-kmz-tsa'
|
import takePhoto from './component/take-photo.vue'
|
import intervalShoot from './component/interval-shoot.vue'
|
|
const store = useMyStore()
|
// 事件编辑是否显示
|
const isActionEditShow = computed(() => store.state.waylineTool.isShow)
|
// 当前点事件
|
const selectedAction = computed(() => store.state.waylineTool.selectedAction)
|
|
// 当前点位
|
const serial = reactive<{
|
placemark: number
|
action: number
|
}>({
|
placemark: 0,
|
action: 0,
|
})
|
const currentPointEvent = computed(() => {
|
const placemarks = xmlTemplate.value.Folder.Placemark
|
const pointIndex = store.state.waylineTool.selectedPoint
|
if (pointIndex === undefined) return null
|
const currentPoint = placemarks[pointIndex]
|
serial.placemark = pointIndex
|
const actions = currentPoint.actionGroup.action
|
let actionIndex = 0
|
if (Array.isArray(actions)) {
|
actionIndex = actions.findIndex((item: { actionActuatorFunc: { '#text': string } }) => {
|
return item.actionActuatorFunc['#text'] === selectedAction.value.key
|
})
|
}
|
serial.action = actionIndex
|
return {
|
aciton: selectedAction.value,
|
actionIndex: `${pointIndex + 1}-${actionIndex + 1}`,
|
}
|
})
|
|
const handleDelAction = () => {}
|
</script>
|
|
<style lang="scss" scoped>
|
.event-container {
|
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;
|
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;
|
// 单拍
|
.take-photo {
|
.title {
|
display: flex;
|
justify-content: flex-end;
|
span {
|
&:first-child {
|
margin-right: auto;
|
}
|
&:last-child {
|
cursor: pointer;
|
&:hover {
|
color: #409eff;
|
}
|
}
|
}
|
}
|
.title-name-input {
|
margin-top: 5px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
.input {
|
flex: 1;
|
input {
|
background-color: transparent;
|
color: #fff;
|
}
|
}
|
.btn {
|
width: 50px;
|
display: flex;
|
gap: 10px;
|
justify-content: center;
|
align-items: center;
|
span {
|
cursor: pointer;
|
}
|
.check {
|
color: #67d15a;
|
}
|
.close {
|
color: red;
|
}
|
}
|
}
|
}
|
|
.btn-group {
|
margin-top: 20px;
|
display: flex;
|
justify-content: flex-start;
|
button {
|
margin-left: 10px;
|
font-weight: bold;
|
background-color: #409eff;
|
border-radius: 999px;
|
border: 0;
|
padding: 0 10px 0 10px;
|
&:first-child {
|
margin: 0;
|
}
|
&:nth-child(3) {
|
margin-left: auto;
|
}
|
}
|
}
|
|
.cannot-select {
|
background-color: #3c3c3c;
|
border: 0;
|
}
|
}
|
}
|
.map-box {
|
width: 400px;
|
height: 300px;
|
}
|
}
|
</style>
|
