From d8ddf8a516f532e614dfc19b9b6374c4fac2e67f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E5=A6=8D?= <1455167345@qq.com>
Date: Wed, 3 Sep 2025 08:47:01 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=B7=A5=E4=BD=9C=E8=AE=A1?=
 =?UTF-8?q?=E5=88=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../workplan/components/Patrol.vue            | 435 ++++++++++++++++++
 .../demo/workmanagement/workplan/index.vue    |   2 +-
 2 files changed, 436 insertions(+), 1 deletion(-)
 create mode 100644 src/views/demo/workmanagement/workplan/components/Patrol.vue

diff --git a/src/views/demo/workmanagement/workplan/components/Patrol.vue b/src/views/demo/workmanagement/workplan/components/Patrol.vue
new file mode 100644
index 0000000..bb11731
--- /dev/null
+++ b/src/views/demo/workmanagement/workplan/components/Patrol.vue
@@ -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>
diff --git a/src/views/demo/workmanagement/workplan/index.vue b/src/views/demo/workmanagement/workplan/index.vue
index 615f95b..72df094 100644
--- a/src/views/demo/workmanagement/workplan/index.vue
+++ b/src/views/demo/workmanagement/workplan/index.vue
@@ -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';