|
|
|
@ -1,93 +1,106 @@
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<div>
|
|
|
|
<VueDragResize
|
|
|
|
<div class="shade-container" v-if="drawarea"></div>
|
|
|
|
:w="width"
|
|
|
|
<div class="airport-information">
|
|
|
|
:h="height"
|
|
|
|
<div class="title">选择AI算法实例<span> 航飞要求 </span></div>
|
|
|
|
:x="left"
|
|
|
|
<div class="content">
|
|
|
|
:y="top"
|
|
|
|
<div class="content-edit instantiate" @click="instantiateVisible = !instantiateVisible">
|
|
|
|
:z="zIndex"
|
|
|
|
<div class="input-result">
|
|
|
|
:isActive="true"
|
|
|
|
<span :style="{ backgroundColor: instantiateItem.displayColor }">
|
|
|
|
:parentLimitation="true"
|
|
|
|
{{ instantiateItem.displayScheme }}</span
|
|
|
|
:isResizable="false"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
{{ instantiateItem.name }}
|
|
|
|
<div>
|
|
|
|
|
|
|
|
<div class="shade-container" v-if="drawarea"></div>
|
|
|
|
|
|
|
|
<div class="airport-information">
|
|
|
|
|
|
|
|
<div class="title">选择AI算法实例 <span> 航飞要求 </span></div>
|
|
|
|
|
|
|
|
<div class="content">
|
|
|
|
|
|
|
|
<div class="content-edit instantiate" @click="instantiateVisible = !instantiateVisible">
|
|
|
|
|
|
|
|
<div class="input-result">
|
|
|
|
|
|
|
|
<span :style="{ backgroundColor: instantiateItem.displayColor }">
|
|
|
|
|
|
|
|
{{ instantiateItem.displayScheme }}</span
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
{{ instantiateItem.name }}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<UpOutlined v-if="instantiateVisible" />
|
|
|
|
|
|
|
|
<DownOutlined v-else />
|
|
|
|
|
|
|
|
<div class="select-result" v-if="instantiateVisible">
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
|
|
|
v-for="(item, index) in instantiateOptions"
|
|
|
|
|
|
|
|
:key="index"
|
|
|
|
|
|
|
|
@click="instantiateSelect(item)"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<span :style="{ backgroundColor: item.displayColor }">{{
|
|
|
|
|
|
|
|
item.displayScheme
|
|
|
|
|
|
|
|
}}</span>
|
|
|
|
|
|
|
|
{{ item.name }}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<UpOutlined v-if="instantiateVisible" />
|
|
|
|
<div class="content-edit space">
|
|
|
|
<DownOutlined v-else />
|
|
|
|
<span>空间约束范围</span>
|
|
|
|
<div class="select-result" v-if="instantiateVisible">
|
|
|
|
<div class="space-content">
|
|
|
|
<div
|
|
|
|
<span>导入KML</span>
|
|
|
|
v-for="(item, index) in instantiateOptions"
|
|
|
|
<span @click="drawarea = true"><PlusOutlined />新增</span>
|
|
|
|
:key="index"
|
|
|
|
|
|
|
|
@click="instantiateSelect(item)"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<span :style="{ backgroundColor: item.displayColor }">{{ item.displayScheme }}</span>
|
|
|
|
|
|
|
|
{{ item.name }}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="content-title">
|
|
|
|
<div class="content-edit space">
|
|
|
|
<span>识别时间范围</span>
|
|
|
|
<span>空间约束范围</span>
|
|
|
|
</div>
|
|
|
|
<div class="space-content">
|
|
|
|
<div class="content-edit">
|
|
|
|
<span>导入KML</span>
|
|
|
|
<a-select v-model:value="data.time" :options="timeOptions" />
|
|
|
|
<span @click="drawarea = true"><PlusOutlined />新增</span>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="content-title">
|
|
|
|
|
|
|
|
<span>触发动作</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="content-edit" style="border: none">
|
|
|
|
|
|
|
|
<a-radio-group v-model:value="data.action" button-style="solid">
|
|
|
|
|
|
|
|
<a-radio-button value="1">关闭</a-radio-button>
|
|
|
|
|
|
|
|
<a-radio-button value="2">等待接管</a-radio-button>
|
|
|
|
|
|
|
|
</a-radio-group>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="content-title">
|
|
|
|
|
|
|
|
<span>警告提示标题</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="content-edit">
|
|
|
|
|
|
|
|
<a-input v-model:value="data.code" placeholder="异常提示" />
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="content-title">
|
|
|
|
|
|
|
|
<span>警告提示内容</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="content-edit">
|
|
|
|
|
|
|
|
<a-textarea v-model:value="data.desc" placeholder="识别到异常目标" />
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="content-button">
|
|
|
|
|
|
|
|
<a-button type="primary" style="background: #3a57e8" @click="emits('changePatrol')"
|
|
|
|
|
|
|
|
>取消</a-button
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<a-button type="primary" style="background: #0a99eb; margin-left: 20px" @click="submit"
|
|
|
|
|
|
|
|
>确定</a-button
|
|
|
|
|
|
|
|
>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="content-title">
|
|
|
|
</div>
|
|
|
|
<span>识别时间范围</span>
|
|
|
|
<div class="patrol-map" v-if="drawarea">
|
|
|
|
</div>
|
|
|
|
<div class="title">绘制范围</div>
|
|
|
|
<div class="content-edit">
|
|
|
|
<div class="map-container">
|
|
|
|
<a-select v-model:value="data.time" :options="timeOptions" />
|
|
|
|
<div class="map-container-content">
|
|
|
|
</div>
|
|
|
|
<Map :drawArea="drawarea" @areaData="getAreaData" />
|
|
|
|
<div class="content-title">
|
|
|
|
</div>
|
|
|
|
<span>触发动作</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="content-edit" style="border: none">
|
|
|
|
|
|
|
|
<a-radio-group v-model:value="data.action" button-style="solid">
|
|
|
|
|
|
|
|
<a-radio-button value="1">关闭</a-radio-button>
|
|
|
|
|
|
|
|
<a-radio-button value="2">等待接管</a-radio-button>
|
|
|
|
|
|
|
|
</a-radio-group>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="content-title">
|
|
|
|
|
|
|
|
<span>警告提示标题</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="content-edit">
|
|
|
|
|
|
|
|
<a-input v-model:value="data.code" placeholder="异常提示" />
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="content-title">
|
|
|
|
|
|
|
|
<span>警告提示内容</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="content-edit">
|
|
|
|
|
|
|
|
<a-textarea v-model:value="data.desc" placeholder="识别到异常目标" />
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="content-button">
|
|
|
|
<div class="content-button">
|
|
|
|
<a-button type="primary" style="background: #3a57e8" @click="emits('changePatrol')"
|
|
|
|
<a-button type="primary" style="background: #3a57e8" @click="drawarea = false"
|
|
|
|
>取消</a-button
|
|
|
|
>取消</a-button
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<a-button type="primary" style="background: #0a99eb; margin-left: 20px" @click="submit"
|
|
|
|
<a-button
|
|
|
|
|
|
|
|
type="primary"
|
|
|
|
|
|
|
|
style="background: #0a99eb; margin-left: 20px"
|
|
|
|
|
|
|
|
@click="patrolMapConfirm"
|
|
|
|
>确定</a-button
|
|
|
|
>确定</a-button
|
|
|
|
>
|
|
|
|
>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="patrol-map" v-if="drawarea">
|
|
|
|
</VueDragResize>
|
|
|
|
<div class="title">绘制范围</div>
|
|
|
|
|
|
|
|
<div class="map-container">
|
|
|
|
|
|
|
|
<div class="map-container-content">
|
|
|
|
|
|
|
|
<Map :drawArea="drawarea" @areaData="getAreaData" />
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="content-button">
|
|
|
|
|
|
|
|
<a-button type="primary" style="background: #3a57e8" @click="drawarea = false"
|
|
|
|
|
|
|
|
>取消</a-button
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<a-button
|
|
|
|
|
|
|
|
type="primary"
|
|
|
|
|
|
|
|
style="background: #0a99eb; margin-left: 20px"
|
|
|
|
|
|
|
|
@click="patrolMapConfirm"
|
|
|
|
|
|
|
|
>确定</a-button
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
|
|
<script setup lang="ts">
|
|
|
|
import { reactive, ref, watch, onMounted } from 'vue';
|
|
|
|
import { reactive, ref, watch, onMounted } from 'vue';
|
|
|
|
@ -103,6 +116,7 @@
|
|
|
|
import { airPortStore } from '@/store/modules/airport';
|
|
|
|
import { airPortStore } from '@/store/modules/airport';
|
|
|
|
import { callAiModel } from '@/api/workmanagement/droneDock';
|
|
|
|
import { callAiModel } from '@/api/workmanagement/droneDock';
|
|
|
|
import { EventBus } from '@/utils/eventBus';
|
|
|
|
import { EventBus } from '@/utils/eventBus';
|
|
|
|
|
|
|
|
import VueDragResize from 'vue-drag-resize/src';
|
|
|
|
|
|
|
|
|
|
|
|
const airPortStoreVal = airPortStore();
|
|
|
|
const airPortStoreVal = airPortStore();
|
|
|
|
|
|
|
|
|
|
|
|
@ -111,7 +125,14 @@
|
|
|
|
const props = defineProps({
|
|
|
|
const props = defineProps({
|
|
|
|
taskId: String,
|
|
|
|
taskId: String,
|
|
|
|
type: String,
|
|
|
|
type: String,
|
|
|
|
|
|
|
|
zIndex: Number,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
const pageWidth = document.documentElement.clientWidth;
|
|
|
|
|
|
|
|
const width = ref(300);
|
|
|
|
|
|
|
|
const height = ref(550);
|
|
|
|
|
|
|
|
const left = ref(pageWidth - 620);
|
|
|
|
|
|
|
|
const top = ref(100);
|
|
|
|
|
|
|
|
const zIndex = ref(props.zIndex);
|
|
|
|
const data = reactive({
|
|
|
|
const data = reactive({
|
|
|
|
instantiate: null,
|
|
|
|
instantiate: null,
|
|
|
|
code: '',
|
|
|
|
code: '',
|
|
|
|
@ -177,14 +198,14 @@
|
|
|
|
createMessage.warning('请选择AI算法实例');
|
|
|
|
createMessage.warning('请选择AI算法实例');
|
|
|
|
return;
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (!data.code) {
|
|
|
|
// if (!data.code) {
|
|
|
|
createMessage.warning('警告提示标题不能为空');
|
|
|
|
// createMessage.warning('警告提示标题不能为空');
|
|
|
|
return;
|
|
|
|
// return;
|
|
|
|
}
|
|
|
|
// }
|
|
|
|
if (!data.desc) {
|
|
|
|
// if (!data.desc) {
|
|
|
|
createMessage.warning('警告提示内容不能为空');
|
|
|
|
// createMessage.warning('警告提示内容不能为空');
|
|
|
|
return;
|
|
|
|
// return;
|
|
|
|
}
|
|
|
|
// }
|
|
|
|
if (props.type == 'plan') {
|
|
|
|
if (props.type == 'plan') {
|
|
|
|
const querys = {
|
|
|
|
const querys = {
|
|
|
|
algoInstanceId: instantiateItem.value.id,
|
|
|
|
algoInstanceId: instantiateItem.value.id,
|
|
|
|
@ -206,7 +227,7 @@
|
|
|
|
console.log(res);
|
|
|
|
console.log(res);
|
|
|
|
createMessage.success('操作成功');
|
|
|
|
createMessage.success('操作成功');
|
|
|
|
airPortStoreVal.setTaskId(props.taskId);
|
|
|
|
airPortStoreVal.setTaskId(props.taskId);
|
|
|
|
emits('changePatrol');
|
|
|
|
emits('changePatrol', true);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
};
|
|
|
|
};
|
|
|
|
onMounted(() => {
|
|
|
|
onMounted(() => {
|
|
|
|
@ -248,8 +269,8 @@
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.airport-information {
|
|
|
|
.airport-information {
|
|
|
|
position: absolute;
|
|
|
|
position: absolute;
|
|
|
|
top: 100px;
|
|
|
|
top: 0;
|
|
|
|
right: 140px;
|
|
|
|
right: 5px;
|
|
|
|
width: 290px;
|
|
|
|
width: 290px;
|
|
|
|
padding: 10px;
|
|
|
|
padding: 10px;
|
|
|
|
background: #0d0e15;
|
|
|
|
background: #0d0e15;
|
|
|
|
|
