You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
604 lines
15 KiB
604 lines
15 KiB
<template>
|
|
<!-- 4T 悬浮窗：空军 4T 作战任务面板样式 -->
|
|
<div v-show="visible" class="four-t-panel" :class="{ 'four-t-panel-ready': layoutReady }">
|
|
<div class="panel-container" :style="panelStyle">
|
|
<!-- 十字分割线 -->
|
|
<div class="cross-line-v"></div>
|
|
<div class="cross-line-h"></div>
|
|
<!-- 十字中心点 -->
|
|
<div class="cross-center"></div>
|
|
|
|
<!-- 顶部操作栏：左侧编辑/完成，右侧关闭 -->
|
|
<div class="panel-actions" @mousedown="onDragStart">
|
|
<button
|
|
class="btn-edit"
|
|
:class="{ complete: isEditMode }"
|
|
@mousedown.stop
|
|
@click="isEditMode ? saveAndExitEdit() : enterEditMode()"
|
|
>
|
|
{{ isEditMode ? '完成' : '编辑' }}
|
|
</button>
|
|
<button class="btn-close" @mousedown.stop @click="$emit('update:visible', false)">×</button>
|
|
</div>
|
|
|
|
<!-- 四个象限 -->
|
|
<div class="quadrant quadrant-top-left">
|
|
<div class="quadrant-title">THREAT</div>
|
|
<textarea
|
|
class="quadrant-content"
|
|
:readonly="!isEditMode"
|
|
v-model="localData.threat.text"
|
|
placeholder="请输入威胁描述..."
|
|
></textarea>
|
|
</div>
|
|
|
|
<div class="quadrant quadrant-top-right">
|
|
<div class="quadrant-title">TARGET</div>
|
|
<textarea
|
|
class="quadrant-content"
|
|
:readonly="!isEditMode"
|
|
v-model="localData.target.text"
|
|
placeholder="请输入打击目标..."
|
|
></textarea>
|
|
</div>
|
|
|
|
<div class="quadrant quadrant-bottom-left">
|
|
<div class="quadrant-title">TASK</div>
|
|
<textarea
|
|
class="quadrant-content"
|
|
v-model="localData.task.text"
|
|
:readonly="!isEditMode"
|
|
placeholder="请输入任务内容..."
|
|
></textarea>
|
|
</div>
|
|
|
|
<div class="quadrant quadrant-bottom-right">
|
|
<div class="quadrant-title">TACTIC</div>
|
|
<textarea
|
|
class="quadrant-content"
|
|
v-model="localData.tactic.text"
|
|
:readonly="!isEditMode"
|
|
placeholder="请输入战术方案..."
|
|
></textarea>
|
|
</div>
|
|
|
|
<!-- 右下角拖拽调整大小 -->
|
|
<div
|
|
class="four-t-resize-handle"
|
|
@mousedown="onResizeStart"
|
|
title="拖动调整大小"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { save4TData, get4TData } from '@/api/system/routes'
|
|
|
|
const SECTIONS = [
|
|
{ key: 'threat', title: 'THREAT' },
|
|
{ key: 'task', title: 'TASK' },
|
|
{ key: 'target', title: 'TARGET' },
|
|
{ key: 'tactic', title: 'TACTIC' }
|
|
]
|
|
|
|
const defaultData = () => ({
|
|
threat: { text: '', images: [] },
|
|
task: { text: '', images: [] },
|
|
target: { text: '', images: [] },
|
|
tactic: { text: '', images: [] }
|
|
})
|
|
|
|
export default {
|
|
name: 'FourTPanel',
|
|
props: {
|
|
visible: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
roomId: {
|
|
type: [String, Number],
|
|
default: null
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
sections: SECTIONS,
|
|
localData: defaultData(),
|
|
isEditMode: false,
|
|
editDataBackup: null,
|
|
isDragging: false,
|
|
dragStartX: 0,
|
|
dragStartY: 0,
|
|
panelLeft: null,
|
|
panelTop: null,
|
|
panelWidth: 420,
|
|
panelHeight: 480,
|
|
isResizing: false,
|
|
resizeStartX: 0,
|
|
resizeStartY: 0,
|
|
resizeStartW: 0,
|
|
resizeStartH: 0,
|
|
layoutReady: false,
|
|
}
|
|
},
|
|
computed: {
|
|
panelStyle() {
|
|
const left = this.panelLeft != null ? this.panelLeft : (window.innerWidth - this.panelWidth) - 20
|
|
const top = this.panelTop != null ? this.panelTop : 80
|
|
return {
|
|
left: `${left}px`,
|
|
top: `${top}px`,
|
|
width: `${this.panelWidth}px`,
|
|
height: `${this.panelHeight}px`
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
visible: {
|
|
handler(val) {
|
|
if (val && this.roomId) {
|
|
this.loadData()
|
|
}
|
|
},
|
|
immediate: true
|
|
},
|
|
roomId: {
|
|
handler(val) {
|
|
if (val && this.visible) {
|
|
this.loadData()
|
|
}
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
methods: {
|
|
async loadData() {
|
|
this.layoutReady = false
|
|
if (!this.roomId) {
|
|
this.layoutReady = true
|
|
return
|
|
}
|
|
try {
|
|
const res = await get4TData({ roomId: this.roomId })
|
|
let d = res && res.data
|
|
if (d) {
|
|
if (typeof d === 'string') {
|
|
try {
|
|
d = JSON.parse(d)
|
|
} catch (e) {
|
|
this.layoutReady = true
|
|
return
|
|
}
|
|
}
|
|
this.localData = {
|
|
threat: { text: d.threat?.text || '', images: d.threat?.images || [] },
|
|
task: { text: d.task?.text || '', images: d.task?.images || [] },
|
|
target: { text: d.target?.text || '', images: d.target?.images || [] },
|
|
tactic: { text: d.tactic?.text || '', images: d.tactic?.images || [] }
|
|
}
|
|
if (d.panelSize) {
|
|
const w = Number(d.panelSize.width)
|
|
const h = Number(d.panelSize.height)
|
|
if (!isNaN(w) && w >= 320 && w <= 800) this.panelWidth = w
|
|
if (!isNaN(h) && h >= 300 && h <= window.innerHeight - 60) this.panelHeight = h
|
|
}
|
|
if (d.panelPosition) {
|
|
const left = Number(d.panelPosition.left)
|
|
const top = Number(d.panelPosition.top)
|
|
if (!isNaN(left) && left >= 0) this.panelLeft = Math.min(left, window.innerWidth - this.panelWidth)
|
|
if (!isNaN(top) && top >= 0) this.panelTop = Math.min(top, window.innerHeight - this.panelHeight)
|
|
}
|
|
}
|
|
} catch (e) {
|
|
console.warn('加载4T数据失败:', e)
|
|
} finally {
|
|
this.layoutReady = true
|
|
}
|
|
},
|
|
|
|
enterEditMode() {
|
|
this.editDataBackup = JSON.parse(JSON.stringify(this.localData))
|
|
this.isEditMode = true
|
|
},
|
|
|
|
saveAndExitEdit() {
|
|
if (!this.roomId) {
|
|
this.$message.warning('请先进入任务房间后再保存')
|
|
return
|
|
}
|
|
this.isEditMode = false
|
|
this.editDataBackup = null
|
|
this.$message.success('保存成功')
|
|
this.saveData().catch(() => {})
|
|
},
|
|
|
|
cancelEdit() {
|
|
if (this.editDataBackup) {
|
|
this.localData = JSON.parse(JSON.stringify(this.editDataBackup))
|
|
}
|
|
this.isEditMode = false
|
|
this.editDataBackup = null
|
|
this.$message.info('已取消编辑')
|
|
},
|
|
|
|
async saveData() {
|
|
if (!this.roomId) {
|
|
this.$message.warning('请先进入任务房间后再保存')
|
|
return
|
|
}
|
|
try {
|
|
const payload = {
|
|
...this.localData,
|
|
panelSize: { width: this.panelWidth, height: this.panelHeight }
|
|
}
|
|
if (this.panelLeft != null && this.panelTop != null) {
|
|
payload.panelPosition = { left: this.panelLeft, top: this.panelTop }
|
|
}
|
|
await save4TData({
|
|
roomId: this.roomId,
|
|
data: JSON.stringify(payload)
|
|
})
|
|
} catch (e) {
|
|
console.error('保存4T失败:', e)
|
|
this.$message.error('保存4T内容失败，请检查网络或权限')
|
|
}
|
|
},
|
|
|
|
addImage(sectionKey) {
|
|
this.pendingAddSection = sectionKey
|
|
this.$refs.fileInput && this.$refs.fileInput.click()
|
|
},
|
|
|
|
onFileSelected(e) {
|
|
const file = e.target.files && e.target.files[0]
|
|
if (!file || !file.type.startsWith('image/')) return
|
|
const reader = new FileReader()
|
|
reader.onload = (ev) => {
|
|
const base64 = ev.target.result
|
|
if (this.pendingAddSection && this.localData[this.pendingAddSection]) {
|
|
this.localData[this.pendingAddSection].images.push(base64)
|
|
}
|
|
this.pendingAddSection = null
|
|
}
|
|
reader.readAsDataURL(file)
|
|
e.target.value = ''
|
|
},
|
|
|
|
removeImage(sectionKey, index) {
|
|
if (this.localData[sectionKey] && this.localData[sectionKey].images) {
|
|
this.localData[sectionKey].images.splice(index, 1)
|
|
}
|
|
},
|
|
|
|
onDragStart(e) {
|
|
// 关闭按钮已用 @mousedown.stop 阻止冒泡，此处直接开始拖动
|
|
e.preventDefault()
|
|
this.isDragging = true
|
|
const currentLeft = this.panelLeft != null ? this.panelLeft : (window.innerWidth - this.panelWidth - 20)
|
|
const currentTop = this.panelTop != null ? this.panelTop : 80
|
|
this.dragStartX = e.clientX - currentLeft
|
|
this.dragStartY = e.clientY - currentTop
|
|
document.addEventListener('mousemove', this.onDragMove)
|
|
document.addEventListener('mouseup', this.onDragEnd)
|
|
},
|
|
|
|
onDragMove(e) {
|
|
if (!this.isDragging) return
|
|
e.preventDefault()
|
|
let left = e.clientX - this.dragStartX
|
|
let top = e.clientY - this.dragStartY
|
|
left = Math.max(0, Math.min(window.innerWidth - this.panelWidth, left))
|
|
top = Math.max(0, Math.min(window.innerHeight - this.panelHeight, top))
|
|
this.panelLeft = left
|
|
this.panelTop = top
|
|
},
|
|
|
|
onDragEnd() {
|
|
this.isDragging = false
|
|
document.removeEventListener('mousemove', this.onDragMove)
|
|
document.removeEventListener('mouseup', this.onDragEnd)
|
|
if (this.roomId) this.saveData()
|
|
},
|
|
|
|
onResizeStart(e) {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
this.isResizing = true
|
|
this.resizeStartX = e.clientX
|
|
this.resizeStartY = e.clientY
|
|
this.resizeStartW = this.panelWidth
|
|
this.resizeStartH = this.panelHeight
|
|
document.addEventListener('mousemove', this.onResizeMove)
|
|
document.addEventListener('mouseup', this.onResizeEnd)
|
|
},
|
|
|
|
onResizeMove(e) {
|
|
if (!this.isResizing) return
|
|
e.preventDefault()
|
|
const dx = e.clientX - this.resizeStartX
|
|
const dy = e.clientY - this.resizeStartY
|
|
let w = Math.max(320, Math.min(800, this.resizeStartW + dx))
|
|
let h = Math.max(300, Math.min(window.innerHeight - 60, this.resizeStartH + dy))
|
|
this.panelWidth = w
|
|
this.panelHeight = h
|
|
},
|
|
|
|
onResizeEnd() {
|
|
this.isResizing = false
|
|
document.removeEventListener('mousemove', this.onResizeMove)
|
|
document.removeEventListener('mouseup', this.onResizeEnd)
|
|
if (this.roomId) this.saveData()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 根容器：覆盖全屏，居中显示 4T 面板；遮罩不阻挡地图点击，便于打开4T时仍可绘制航线 */
|
|
.four-t-panel {
|
|
position: fixed;
|
|
inset: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: transparent; /* 无遮罩，不使屏幕变暗 */
|
|
z-index: 200;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.15s ease-out;
|
|
}
|
|
|
|
.four-t-panel.four-t-panel-ready {
|
|
opacity: 1;
|
|
pointer-events: none; /* 遮罩穿透：点击地图区域可继续绘制航线 */
|
|
}
|
|
|
|
.four-t-panel.four-t-panel-ready .panel-container {
|
|
pointer-events: auto; /* 仅面板本身可点击、拖动 */
|
|
}
|
|
|
|
/* 面板容器 */
|
|
.panel-container {
|
|
position: fixed;
|
|
width: 100%;
|
|
max-width: 800px;
|
|
height: 600px;
|
|
background-color: #ffffff;
|
|
border-radius: 16px;
|
|
box-shadow: 0 8px 24px rgba(25, 148, 254, 0.1);
|
|
overflow: hidden;
|
|
border: 1px solid #e0edff;
|
|
z-index: 201;
|
|
}
|
|
|
|
/* 十字分割线 */
|
|
.cross-line-v {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 20px;
|
|
bottom: 20px;
|
|
width: 1px;
|
|
background-color: #1994fe;
|
|
transform: translateX(-50%);
|
|
z-index: 10;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.cross-line-h {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 20px;
|
|
right: 20px;
|
|
height: 1px;
|
|
background-color: #1994fe;
|
|
transform: translateY(-50%);
|
|
z-index: 10;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* 十字中心点 */
|
|
.cross-center {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 8px;
|
|
height: 8px;
|
|
background-color: #1994fe;
|
|
border-radius: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 15;
|
|
box-shadow: 0 0 6px rgba(25, 148, 254, 0.2);
|
|
}
|
|
|
|
/* 象限容器 */
|
|
.quadrant {
|
|
position: absolute;
|
|
width: 50%;
|
|
height: 50%;
|
|
padding: 24px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.quadrant-top-left {
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.quadrant-top-right {
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.quadrant-bottom-left {
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.quadrant-bottom-right {
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
|
|
/* 标题样式 */
|
|
.quadrant-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #0078e0;
|
|
margin-bottom: 16px;
|
|
letter-spacing: 0.5px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* 文本区域样式 */
|
|
.quadrant-content {
|
|
width: 92%;
|
|
height: 80%;
|
|
border: 1px solid #cce5ff;
|
|
border-radius: 10px;
|
|
padding: 16px;
|
|
font-size: 15px;
|
|
color: #263238;
|
|
resize: none;
|
|
background-color: #f9fcff;
|
|
transition: all 0.2s ease;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.quadrant-content:focus {
|
|
outline: none;
|
|
border-color: #1994fe;
|
|
background-color: #ffffff;
|
|
box-shadow: 0 0 0 4px rgba(25, 148, 254, 0.1);
|
|
}
|
|
|
|
/* 只读状态 */
|
|
.quadrant-content[readonly] {
|
|
background-color: #e8f4ff;
|
|
color: #0078e0;
|
|
font-weight: 500;
|
|
cursor: default;
|
|
}
|
|
|
|
/* 操作栏 */
|
|
.panel-actions {
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 20px;
|
|
right: 20px;
|
|
z-index: 20;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
/* 放大可拖动区域，并使用十字拖拽光标 */
|
|
padding: 8px 0;
|
|
cursor: move;
|
|
}
|
|
|
|
/* 编辑按钮 */
|
|
.btn-edit {
|
|
background-color: #f0f7ff;
|
|
color: #1994fe;
|
|
border: 1px solid #cce5ff;
|
|
padding: 6px 12px;
|
|
border-radius: 6px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
transition: all 0.2s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn-edit.complete {
|
|
background-color: #f0fff4;
|
|
color: #00c853;
|
|
border: 1px solid #ccffdd;
|
|
}
|
|
|
|
.btn-edit:hover {
|
|
background-color: #e8f4ff;
|
|
border-color: #1994fe;
|
|
}
|
|
|
|
.btn-edit.complete:hover {
|
|
background-color: #e6fffa;
|
|
border-color: #00c853;
|
|
color: #00a142;
|
|
}
|
|
|
|
/* 关闭按钮 */
|
|
.btn-close {
|
|
background-color: #f0f7ff;
|
|
border: 1px solid #cce5ff;
|
|
font-size: 14px;
|
|
color: #1994fe;
|
|
width: 30px;
|
|
height: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
transition: all 0.2s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn-close:hover {
|
|
background-color: #e8f4ff;
|
|
color: #0078e0;
|
|
}
|
|
|
|
/* 响应式适配 */
|
|
@media (max-width: 768px) {
|
|
.panel-container {
|
|
height: 500px;
|
|
max-width: 95%;
|
|
}
|
|
|
|
.quadrant {
|
|
padding: 16px;
|
|
}
|
|
|
|
.quadrant-title {
|
|
font-size: 16px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.quadrant-content {
|
|
font-size: 14px;
|
|
padding: 12px;
|
|
width: 95%;
|
|
height: 75%;
|
|
}
|
|
|
|
.btn-edit {
|
|
padding: 5px 10px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.btn-close {
|
|
width: 28px;
|
|
height: 28px;
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
|
|
/* 右下角拖拽调整大小手柄 */
|
|
.four-t-resize-handle {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 20px;
|
|
height: 20px;
|
|
cursor: nwse-resize;
|
|
user-select: none;
|
|
z-index: 10;
|
|
background: linear-gradient(to top left, transparent 50%, rgba(25, 148, 254, 0.2) 50%);
|
|
}
|
|
|
|
.four-t-resize-handle:hover {
|
|
background: linear-gradient(to top left, transparent 50%, rgba(25, 148, 254, 0.4) 50%);
|
|
}
|
|
</style>
|
|
|