飞行作业智能巡检
parent
f16c74f139
commit
dcfbb07dc9
@ -0,0 +1,335 @@
|
||||
<template>
|
||||
<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.bgColor }">
|
||||
{{ instantiateItem.type }}</span
|
||||
>
|
||||
{{ instantiateItem.label }}
|
||||
</div>
|
||||
<DownOutlined v-if="instantiateVisible" />
|
||||
<UpOutlined 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.bgColor }">{{ item.type }}</span>
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-edit space">
|
||||
<span>空间约束范围</span>
|
||||
<div class="space-content">
|
||||
<span>导入KML</span>
|
||||
<span @click="drawarea = true">新增</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-title">
|
||||
<span>识别时间范围</span>
|
||||
</div>
|
||||
<div class="content-edit">
|
||||
<a-select v-model:value="data.time" :options="timeOptions" />
|
||||
</div>
|
||||
<div class="content-title">
|
||||
<span>触发动作</span>
|
||||
</div>
|
||||
<div class="content-edit">
|
||||
<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-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="emits('changeLoadControl')"
|
||||
>确定</a-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="patrol-map" v-if="drawarea">
|
||||
<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>
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref, watch, onMounted } from 'vue';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
import { InfoCircleOutlined, DownOutlined, UpOutlined } from '@ant-design/icons-vue';
|
||||
import { Map } from '../index';
|
||||
|
||||
const { createMessage } = useMessage();
|
||||
const emits = defineEmits(['changePatrol']);
|
||||
const props = defineProps({});
|
||||
const data = reactive({
|
||||
instantiate: null,
|
||||
code: '',
|
||||
desc: '',
|
||||
action: '1',
|
||||
time: null,
|
||||
area: null,
|
||||
});
|
||||
const bgOptions = ref(['#6909B2', '#09B284', '#B2AA09', '#E240BD', '#E24040']);
|
||||
const instantiateVisible = ref(false);
|
||||
const instantiateOptions = ref([
|
||||
{
|
||||
label: '疑似违停车辆识别',
|
||||
type: '违停车辆',
|
||||
value: '1',
|
||||
bgColor: bgOptions.value[0],
|
||||
},
|
||||
{
|
||||
label: '疑似违停车辆识别',
|
||||
type: '违停车辆',
|
||||
value: '1',
|
||||
bgColor: bgOptions.value[2],
|
||||
},
|
||||
]);
|
||||
const timeOptions = ref([
|
||||
{
|
||||
label: '全天',
|
||||
value: 'day',
|
||||
},
|
||||
]);
|
||||
const instantiateItem = ref({});
|
||||
const instantiateSelect = (val) => {
|
||||
data.instantiate = val.value;
|
||||
instantiateItem.value = val;
|
||||
};
|
||||
const drawarea = ref(false);
|
||||
const getAreaData = (val) => {
|
||||
console.log(val);
|
||||
};
|
||||
const patrolMapConfirm = () => {
|
||||
if (!data.area) {
|
||||
createMessage.warning('请绘制区域');
|
||||
}
|
||||
};
|
||||
onMounted(() => {});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.airport-information {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
right: 140px;
|
||||
width: 260px;
|
||||
padding: 10px;
|
||||
background: #0d0e15;
|
||||
margin: 10px 0 0 10px;
|
||||
box-shadow:
|
||||
0px 10px 30px 0px rgba(0, 0, 6, 0.15),
|
||||
inset 0px 0px 36px 0px rgba(58, 87, 232, 0.73);
|
||||
border-radius: 6px;
|
||||
backdrop-filter: blur(3px);
|
||||
color: #fff;
|
||||
.title {
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
box-shadow: 0px 10px 30px 0px rgba(0, 0, 6, 0.15);
|
||||
border-bottom: 1px solid #4e5778;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
span {
|
||||
color: #f2762d;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.content-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #4e5778;
|
||||
padding: 10px 0;
|
||||
.item-div {
|
||||
width: 49%;
|
||||
cursor: pointer;
|
||||
img {
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-button {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.content-edit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border: 1px solid #4e5778;
|
||||
margin-top: 10px;
|
||||
padding: 2px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
input {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
textarea {
|
||||
background: none;
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
::v-deep .ant-select-selector {
|
||||
background: none;
|
||||
width: 220px;
|
||||
border: none;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.instantiate {
|
||||
padding: 10px 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
div {
|
||||
span {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
.input-result {
|
||||
span {
|
||||
padding: 6px;
|
||||
border-radius: 6px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.select-result {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: -2%;
|
||||
width: 104%;
|
||||
background: #0d0e15;
|
||||
box-shadow:
|
||||
0px 5px 15px 0px rgba(0, 0, 6, 0.15),
|
||||
inset 0px 0px 18px 0px rgba(58, 87, 232, 0.73);
|
||||
height: 300px;
|
||||
overflow: auto;
|
||||
z-index: 2;
|
||||
border: 1px solid #4e5778;
|
||||
div {
|
||||
padding: 10px 6px;
|
||||
border-bottom: 1px solid #1c1c1c;
|
||||
span {
|
||||
padding: 6px;
|
||||
border-radius: 6px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.space {
|
||||
padding: 10px 4px;
|
||||
font-size: 14px;
|
||||
.space-content {
|
||||
span {
|
||||
color: #f2762d;
|
||||
border: 1px solid #f2762d;
|
||||
padding: 4px 6px;
|
||||
border-radius: 18px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
span:last-child {
|
||||
margin-left: 10px;
|
||||
color: #0377f6;
|
||||
border: 1px solid #0377f6;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-title {
|
||||
padding-top: 10px;
|
||||
.anticon {
|
||||
margin-left: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
::v-deep .ant-radio-group {
|
||||
width: 100%;
|
||||
margin: 2px;
|
||||
}
|
||||
::v-deep .ant-radio-button-wrapper {
|
||||
border: none;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
background: #0b234d;
|
||||
color: #fff;
|
||||
box-shadow:
|
||||
0px 10px 30px 0px rgba(0, 0, 6, 0.15),
|
||||
0px 10px 30px 0px rgba(0, 0, 6, 0.15),
|
||||
inset 0px -1px 5px 0px rgba(213, 220, 255, 0.73);
|
||||
border-radius: 4px;
|
||||
}
|
||||
::v-deep .ant-radio-button-wrapper-checked {
|
||||
background: #0377f6;
|
||||
box-shadow:
|
||||
0px 10px 30px 0px rgba(0, 0, 6, 0.15),
|
||||
0px 10px 30px 0px rgba(0, 0, 6, 0.15),
|
||||
inset 0px -1px 5px 0px rgba(213, 220, 255, 0.73);
|
||||
}
|
||||
}
|
||||
.patrol-map {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 140px;
|
||||
width: 800px;
|
||||
height: 600px;
|
||||
padding: 10px;
|
||||
background: #0d0e15;
|
||||
margin: 10px 0 0 10px;
|
||||
box-shadow:
|
||||
0px 10px 30px 0px rgba(0, 0, 6, 0.15),
|
||||
inset 0px 0px 36px 0px rgba(58, 87, 232, 0.73);
|
||||
border-radius: 6px;
|
||||
backdrop-filter: blur(3px);
|
||||
color: #fff;
|
||||
z-index: 3;
|
||||
.map-container {
|
||||
width: 100%;
|
||||
height: calc(100% - 80px);
|
||||
}
|
||||
.map-container-content {
|
||||
height: calc(100% - 10px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue