gitY
/
DiKongGanZhiPingTai
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化工作计划

Browse Source
main
刘妍 4 days ago
parent b0be8aa9f2
commit d8ddf8a516
2 changed files with 436 additions and 1 deletions
Show Stats Download Patch File Download Diff File

435
src/views/demo/workmanagement/workplan/components/Patrol.vue
Unescape Escape View File

@ -0,0 +1,435 @@
<template>
<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 class="content-edit space">
<span>空间约束范围</span>
<div class="space-content">
<span>导入KML</span>
<span @click="drawarea = true"><PlusOutlined />新增</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" 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 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,
PlusOutlined,
} from '@ant-design/icons-vue';
import Map from './map.vue';
import { GetAlgoInstanceList } from '@/api/demo/aiinstance';
import { airPortStore } from '@/store/modules/airport';
import { callAiModel } from '@/api/workmanagement/droneDock';
import { EventBus } from '@/utils/eventBus';
import VueDragResize from 'vue-drag-resize/src';
const airPortStoreVal = airPortStore();
const { createMessage } = useMessage();
const emits = defineEmits(['changePatrol']);
const props = defineProps({
taskId: 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({
instantiate: null,
code: '',
desc: '',
action: '1',
time: 'day',
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.id;
instantiateItem.value = val;
};
const drawarea = ref(false);
const getAreaData = (val) => {
console.log(val);
data.area = val;
};
const patrolMapConfirm = () => {
if (!data.area) {
createMessage.warning('请绘制区域');
return;
}
drawarea.value = false;
};
const getList = () => {
GetAlgoInstanceList({
page: 1,
limit: 999,
}).then((res) => {
console.log(res);
instantiateOptions.value = res.items;
});
};
const liveCode = ref('7');
const live_info = airPortStoreVal.getLiveInfo;
const submit = () => {
console.log(props.type);
if (!instantiateItem.value.id) {
createMessage.warning('请选择AI算法实例');
return;
}
// if (!data.code) {
// createMessage.warning('警告提示标题不能为空');
// return;
// }
// if (!data.desc) {
// createMessage.warning('警告提示内容不能为空');
// return;
// }
if (props.type == 'plan') {
const querys = {
algoInstanceId: instantiateItem.value.id,
warningTitle: data.code,
warningContent: data.desc,
};
EventBus.emit('palnPatrol', querys);
emits('changePatrol');
return;
}
const querys = {
taskId: props.taskId,
algoInstanceId: instantiateItem.value.id,
rtmpUrl: live_info.rtmp + liveCode.value,
warningTitle: data.code,
warningContent: data.desc,
};
callAiModel(querys).then((res) => {
console.log(res);
createMessage.success('操作成功');
airPortStoreVal.setTaskId(props.taskId);
emits('changePatrol', true);
});
};
onMounted(() => {
getList();
});
</script>
<style lang="less" scoped>
.shade-container {
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.3);
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
.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;
align-items: center;
span {
color: #f2762d;
font-size: 12px;
border-radius: 10px;
border: 1px solid #f2762d;
display: inline-block;
padding: 4px 6px;
}
}
.content-button {
margin-top: 10px;
display: flex;
align-items: center;
justify-content: flex-end;
}
.airport-information {
position: absolute;
top: 0;
right: 5px;
width: 290px;
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;
.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-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 {
width: 100%;
}
::v-deep .ant-select-selector {
background: none;
width: 100%;
border: none;
text-align: center;
color: #fff;
font-size: 12px;
}
}
.instantiate {
padding: 4px 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 8px;
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: 80px;
right: calc(50% - 400px);
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: 1001;
.map-container {
width: 100%;
height: calc(100% - 80px);
}
.map-container-content {
height: calc(100% - 10px);
}
}
</style>

2
src/views/demo/workmanagement/workplan/index.vue
Unescape Escape View File

@ -93,8 +93,8 @@ import createWorkPlan from './components/createWorkPlan.vue';
import createAirLine from './components/createAirLine.vue'
import Map from './components/map.vue'
import AirPolygon from './components/airPolygon.vue';
import Patrol from './components/Patrol.vue';
import {getAirLine,uploadXmlFile,addAirLine,editAirLine} from '@/api/sys/workplan';
import { Patrol } from '../flightoperation/index';
import JSZip from 'jszip';
import axios from 'axios';
import { GeojsonToWkt, WktToGeojson } from '@/components/MapboxMaps/src/WktGeojsonTransform';

Write Preview
Loading…
Cancel
Save