From 17dd44ad23e9325082a724d83628cb108958847f Mon Sep 17 00:00:00 2001
From: Fuyuu <1805498209@qq.com>
Date: Thu, 28 Dec 2023 10:20:42 +0800
Subject: [PATCH] =?UTF-8?q?=E7=9B=B8=E6=9C=BA=E7=AE=A1=E7=90=86=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97=EF=BC=88cameraSet=EF=BC=89=20=E7=9B=B8=E6=9C=BA?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2=E6=A0=91=E7=BB=93=E6=9E=84=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=20=E6=B7=BB=E5=8A=A0=E5=BD=93=E5=89=8D=E5=9C=BA=E6=99=AF?=
 =?UTF-8?q?=E9=99=90=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/DtAiMonitorAreaForm.vue        |    2 +-
 .../cameraManage/CameraSet.vue                |    5 +-
 .../cameraManage/CameraSetDemo.vue            | 1127 +++++++++++++++++
 3 files changed, 1132 insertions(+), 2 deletions(-)
 create mode 100644 src/views/military/modules/equipmentManage/videoMonitorEquInfo/cameraManage/CameraSetDemo.vue

diff --git a/src/views/military/modules/ai/aiMonitorArea/components/DtAiMonitorAreaForm.vue b/src/views/military/modules/ai/aiMonitorArea/components/DtAiMonitorAreaForm.vue
index 49b15dd..06f2b19 100644
--- a/src/views/military/modules/ai/aiMonitorArea/components/DtAiMonitorAreaForm.vue
+++ b/src/views/military/modules/ai/aiMonitorArea/components/DtAiMonitorAreaForm.vue
@@ -145,7 +145,7 @@
   function getCurrentStationCamera() {
     return defHttp.get({ url: '/military/camera/setting/list', params: { pageNo: 1, pageSize: 9999 } }, { isTransformResponse: false });
   }
-  // 暂存数据数组
+  // 树状相机数据
   const nodeTree: any = ref([]);
 
   // 相机选择树
diff --git a/src/views/military/modules/equipmentManage/videoMonitorEquInfo/cameraManage/CameraSet.vue b/src/views/military/modules/equipmentManage/videoMonitorEquInfo/cameraManage/CameraSet.vue
index 4fc66ac..b62dbed 100644
--- a/src/views/military/modules/equipmentManage/videoMonitorEquInfo/cameraManage/CameraSet.vue
+++ b/src/views/military/modules/equipmentManage/videoMonitorEquInfo/cameraManage/CameraSet.vue
@@ -256,7 +256,10 @@
   // 刷新按钮
   const reNewBtn = ref();
   // 当前登录用户信息
-  const userStore = useUserStore();
+  const userStore = useUserStore().userInfo;
+  // 当前用户权限下的场景id
+  const sceneId = userStore?.sceneId;
+
   // 消息弹窗
   const { createMessage } = useMessage();
   // 展开指定的树节点
diff --git a/src/views/military/modules/equipmentManage/videoMonitorEquInfo/cameraManage/CameraSetDemo.vue b/src/views/military/modules/equipmentManage/videoMonitorEquInfo/cameraManage/CameraSetDemo.vue
new file mode 100644
index 0000000..fd895f5
--- /dev/null
+++ b/src/views/military/modules/equipmentManage/videoMonitorEquInfo/cameraManage/CameraSetDemo.vue
@@ -0,0 +1,1127 @@
+<!-- 
+  相机管理
+
+  目录位置：设备管理 -> 视频监控设备信息 -> 相机管理
+  功能概述：管理所有区域下的相机，rtsp地址，安装位置等
+ -->
+<template>
+  <div style="background: #fff">
+    <p style="margin: 0; padding: 5px 20px; font-size: 20px">
+      相机列表
+      <a-icon type="sync" @click="reNew" ref="reNewBtn" />
+    </p>
+    <div class="cameraBox">
+      <!--树形控件界面-->
+      <div class="treeBox">
+        <a-input-search style="margin-bottom: 8px" placeholder="搜索" @change="onChange" />
+        <a-tree
+          v-model:selectedKeys="selectedKeys"
+          :defaultExpandAll="true"
+          v-if="gData.length != 0"
+          :expanded-keys="expandedKeys"
+          :auto-expand-parent="autoExpandParent"
+          :tree-data="nodeTree"
+          :fieldNames="replaceFields"
+          @select="onSelect"
+          @expand="onExpand"
+          ref="dataTree"
+          style="display: inline-block"
+        >
+        </a-tree>
+      </div>
+      <!--菜单界面-->
+      <div class="menuBox">
+        <div class="menuTop">
+          <a-button type="primary" @click="add"> 新增 </a-button>
+          <a-button style="margin-left: 10px" @click="edit" :disabled="!getTag"> 修改 </a-button>
+          <a-button style="margin-left: 10px" type="danger" @click="del" :disabled="!getTag"> 删除 </a-button>
+          <a-button style="margin-left: 10px" type="danger" @click="cancel" v-show="cancelFlag"> 取消 </a-button>
+        </div>
+        <div class="menuFrom">
+          <a-form
+            style="flex: 1"
+            class="antd-modal-form"
+            :label-col="{ span: 6, offset: 1 }"
+            :wrapper-col="{ span: 14 }"
+            ref="ruleForm"
+            :model="cameraForm"
+          >
+            <a-form-item label="监控点位" class="mustInput" name="siteName">
+              <a-col :span="11">
+                <a-select name="lineNameTemp" v-model:value="lineNameTemp" @change="handleLineChange" :disabled="!changeTag">
+                  <a-select-option v-for="line in lineArr" :key="line.id">
+                    {{ line.name }}
+                  </a-select-option>
+                </a-select>
+              </a-col>
+              <a-col :offset="1" :span="12">
+                <a-form-item style="margin-bottom: 0px">
+                  <a-select name="siteNameTemp" v-model:value="siteNameTemp" @change="handleSiteChange" :disabled="!changeTag">
+                    <a-select-option v-for="site in siteArr" :key="site.id">
+                      {{ site.name }}
+                    </a-select-option>
+                  </a-select>
+                </a-form-item>
+              </a-col>
+            </a-form-item>
+            <a-form-item label="相机名称" class="mustInput" name="cameraName">
+              <a-input v-model:value="cameraForm.cameraName" :disabled="!changeTag" />
+            </a-form-item>
+            <a-form-item label="相机IP" class="mustInput" name="ip">
+              <a-input v-model:value="cameraForm.ip" :disabled="!changeTag" />
+            </a-form-item>
+            <a-form-item label="相机备用IP" class="mustInput" name="ip2">
+              <a-input v-model:value="cameraForm.ip2" :disabled="!changeTag" />
+            </a-form-item>
+            <a-form-item label="相机端口" class="mustInput" name="port">
+              <a-input-number v-model:value="cameraForm.port" :disabled="!changeTag" style="width: 100%" />
+            </a-form-item>
+            <a-form-item label="相机认证用户名" class="mustInput" name="user">
+              <a-input v-model:value="cameraForm.user" :disabled="!changeTag" />
+            </a-form-item>
+            <a-form-item label="相机认证密码" class="mustInput" name="password">
+              <a-input-password v-model:value="cameraForm.password" :disabled="!changeTag" />
+            </a-form-item>
+            <a-form-item label="厂家" class="mustInput" name="factory" v-if="cameraFactorys.length > 0">
+              <!-- 使用antd原生下拉框 -->
+              <a-select v-model:value="cameraForm.factory" :disabled="!changeTag">
+                <template :key="Number(cameraFactory.value)" v-for="cameraFactory in cameraFactorys">
+                  <a-select-option :value="Number(cameraFactory.value)">{{ cameraFactory.text }}</a-select-option>
+                </template>
+              </a-select>
+            </a-form-item>
+            <a-form-item label="相机类型" class="mustInput" name="type">
+              <a-col :span="11">
+                <!-- 使用antd原生下拉框 -->
+                <a-select name="type" v-model:value="cameraForm.type" :disabled="!changeTag" @change="typeChange">
+                  <template :key="Number(cameraType.value)" v-for="cameraType in cameraTypes">
+                    <a-select-option :value="Number(cameraType.value)">{{ cameraType.text }}</a-select-option>
+                  </template>
+                </a-select>
+              </a-col>
+              <a-col :offset="1" :span="12">
+                <!-- 使用antd原生下拉框 -->
+                <a-select name="style" v-model:value="cameraForm.style" :disabled="!flag || !changeTag">
+                  <template :key="Number(cameraStyle.value)" v-for="cameraStyle in cameraStyles">
+                    <a-select-option :value="Number(cameraStyle.value)">{{ cameraStyle.text }}</a-select-option>
+                  </template>
+                </a-select>
+              </a-col>
+            </a-form-item>
+            <a-form-item label="安装高度" class="mustInput" name="height">
+              <a-input-number v-model:value="cameraForm.height" :disabled="!changeTag" style="width: 100%" />
+            </a-form-item>
+            <a-form-item label="录像机" name="videoRecorder">
+              <a-select v-model:value="cameraForm.videoRecorderId" :disabled="!changeTag">
+                <a-select-option v-for="vr in videoRecorderArr" :value="vr.id" :key="vr.id">
+                  {{ vr.name }}
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+            <a-form-item label="相机认证通道号" name="channel">
+              <a-input v-model:value="cameraForm.channel" :disabled="!changeTag" />
+            </a-form-item>
+            <a-form-item label="视频预览RTSP地址" name="preRtsp">
+              <a-input v-model:value="cameraForm.preRtsp" :disabled="!changeTag" />
+            </a-form-item>
+            <a-form-item label="视频分析RTSP地址" name="analysisRtsp">
+              <a-input v-model:value="cameraForm.analysisRtsp" :disabled="!changeTag" />
+            </a-form-item>
+            <a-form-item label="视频录像RTSP地址" name="recordRtsp">
+              <a-input v-model:value="cameraForm.recordRtsp" :disabled="!changeTag" />
+            </a-form-item>
+            <a-form-item label="Web播放地址" name="webcastAddress">
+              <a-input v-model:value="cameraForm.webcastAddress" :disabled="!changeTag" />
+            </a-form-item>
+          </a-form>
+          <a-form
+            style="flex: 1"
+            class="antd-modal-form"
+            :label-col="{ span: 6, offset: 0 }"
+            :wrapper-col="{ span: 14 }"
+            ref="ruleForm"
+            :model="cameraForm"
+          >
+            <a-form-item label="地理经度" name="longitude">
+              <a-input v-model:value="cameraForm.longitude" disabled />
+            </a-form-item>
+            <a-form-item label="地理纬度" name="latitude">
+              <a-input v-model:value="cameraForm.latitude" disabled />
+            </a-form-item>
+            <a-form-item label="视线水平左夹角" name="leftAngle">
+              <a-input-number v-model:value="cameraForm.leftAngle" :disabled="!changeTag" style="width: 100%" />
+            </a-form-item>
+            <a-form-item label="视线水平右夹角" name="rightAngle">
+              <a-input-number v-model:value="cameraForm.rightAngle" :disabled="!changeTag" style="width: 100%" />
+            </a-form-item>
+            <a-form-item label="视野中央有效视距" name="viewDistance">
+              <a-input-number v-model:value="cameraForm.viewDistance" :disabled="!changeTag" style="width: 100%" />
+            </a-form-item>
+            <a-form-item label="采样帧率" name="frameRate">
+              <a-input-number v-model:value="cameraForm.frameRate" :disabled="!changeTag" style="width: 100%" />
+            </a-form-item>
+            <a-form-item label="最大跟踪范围" name="maxRange">
+              <a-input-number v-model:value="cameraForm.maxRange" :disabled="!changeTag" style="width: 100%" />
+            </a-form-item>
+            <a-form-item label="云台控制IP" name="cloudCtrlIp">
+              <a-input v-model:value="cameraForm.cloudCtrlIp" :disabled="!changeTag" />
+            </a-form-item>
+            <a-form-item label="云台控制端口" name="cloudCtrlPort">
+              <a-input v-model:value="cameraForm.cloudCtrlPort" :disabled="!changeTag" />
+            </a-form-item>
+            <a-form-item label="零方位角" name="zeroAzimuth">
+              <a-input-number v-model:value="cameraForm.zeroAzimuth" :disabled="!changeTag" style="width: 100%" />
+            </a-form-item>
+            <a-form-item label="最大仰角" name="maxElevation">
+              <a-input-number v-model:value="cameraForm.maxElevation" :disabled="!changeTag" style="width: 100%" />
+            </a-form-item>
+            <a-form-item label="安装垂直角" name="fixedAngle">
+              <a-input-number v-model:value="cameraForm.fixedAngle" :disabled="!changeTag" style="width: 100%" />
+            </a-form-item>
+            <a-form-item label="最大可视距离" name="maxVisibleDistance">
+              <a-input-number v-model:value="cameraForm.maxVisibleDistance" :disabled="!changeTag" style="width: 100%" />
+            </a-form-item>
+            <a-form-item label="变倍因子" name="zoomFactor">
+              <a-input-number v-model:value="cameraForm.zoomFactor" :disabled="!changeTag" style="width: 100%" />
+            </a-form-item>
+            <a-form-item label="报警持续时间（秒）" name="alarmNum">
+              <a-input-number placeholder="" style="width: 100%" v-model:value="cameraForm.alarmNum" :disabled="!changeTag" />
+            </a-form-item>
+            <a-form-item label="白光时间段" name="dayBeginTime">
+              <a-col :span="11">
+                <a-time-picker
+                  name="dayBeginTime"
+                  valueFormat="HH:mm:ss"
+                  placeholder=""
+                  v-model:value="cameraForm.dayBeginTime"
+                  style="width: 100%"
+                  format="HH:mm:ss"
+                  :disabled="!changeTag"
+                />
+              </a-col>
+              <a-col class="timePeriodDelimiter" span="2"> - </a-col>
+              <a-col :span="11">
+                <a-form-item name="dayEndTime">
+                  <a-time-picker
+                    name="dayEndTime"
+                    valueFormat="HH:mm:ss"
+                    placeholder=""
+                    v-model:value="cameraForm.dayEndTime"
+                    style="width: 100%"
+                    :disabled="!changeTag"
+                    format="HH:mm:ss"
+                /></a-form-item>
+              </a-col>
+            </a-form-item>
+          </a-form>
+        </div>
+        <div class="menuBottom">
+          <a-button @click="submitForm" type="primary" :disabled="!addOrEdit"> 提交 </a-button>
+          <a-button style="margin-left: 10px" @click="fromReset()"> 重置 </a-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, onMounted } from 'vue';
+  import { useUserStore } from '/@/store/modules/user';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { defHttp } from '/@/utils/http/axios';
+  import { Modal } from 'ant-design-vue';
+
+  // 厂家
+  const cameraFactorys: any = ref([]);
+  // 相机类型
+  const cameraTypes: any = ref([]);
+  // 相机光照颜色
+  const cameraStyles: any = ref([]);
+
+  // 获取相机厂家
+  const getCameraFactory = () => {
+    return defHttp.get({ url: '/sys/dict/getDictItems/ms_camera_factory' }, { isTransformResponse: false });
+  };
+  //获取相机类型
+  const getCameraType = () => {
+    return defHttp.get({ url: '/sys/dict/getDictItems/ms_camera_type' }, { isTransformResponse: false });
+  };
+  //获取相机光色
+  const getCameraStyle = () => {
+    return defHttp.get({ url: '/sys/dict/getDictItems/ms_camera_style' }, { isTransformResponse: false });
+  };
+  const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 6 } });
+  const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 18 } });
+
+  // 刷新按钮
+  const reNewBtn = ref();
+  // 当前登录用户信息
+  const userStore = useUserStore().userInfo;
+  // 当前用户权限下的场景id
+  const sceneId = userStore?.sceneId;
+  /* 添加内容 */
+  // 场景列表
+  const sceneList: any = [];
+  // 防区列表
+  const areaList: any = [];
+  // 站点列表
+  const stationList: any = [];
+  // 相机列表
+  const newCameraList: any = [];
+  // 获取当前场景及子场景信息
+  function getCurrentScene() {
+    return defHttp.get(
+      { url: '/military/msMapScene/list', params: { sceneId: sceneId + '*', pageNo: 1, pageSize: 9999 } },
+      { isTransformResponse: false }
+    );
+  }
+  // 获取当前场景（包括其子场景）下的所有防区
+  function getCurrentSceneArea() {
+    return defHttp.get({ url: '/military/msMapLine/list', params: { pageNo: 1, pageSize: 9999 } }, { isTransformResponse: false });
+  }
+  // 获取当前防区下的所有站点
+  function getCurrentAreaStation() {
+    return defHttp.get({ url: '/military/camera/site/list', params: { pageNo: 1, pageSize: 9999 } }, { isTransformResponse: false });
+  }
+  // 获取当前站点下的所有相机
+  function getCurrentStationCamera() {
+    return defHttp.get({ url: '/military/camera/setting/list', params: { pageNo: 1, pageSize: 9999 } }, { isTransformResponse: false });
+  }
+  // 树状相机数据
+  const nodeTree: any = ref([]);
+
+  function getNodeTree() {
+    // 将数据转化为树状结构
+    getCurrentScene().then((res) => {
+      sceneList.value = res.result.records;
+      getCurrentSceneArea().then((res1) => {
+        areaList.value = res1.result.records;
+        getCurrentAreaStation().then((res2) => {
+          stationList.value = res2.result.records;
+          getCurrentStationCamera().then((res3) => {
+            newCameraList.value = res3.result.records;
+
+            // 定义一个空数组作为树状数组的根节点
+            const tree: any = [];
+            //遍历场景列表，查找当前场景（及子场景）数据
+            sceneList.value.forEach((row) => {
+              const node = { title: row.sceneName, value: row.sceneId, children: [] };
+              tree.push(node);
+            });
+            // 遍历防区列表，查找对应场景下的数据
+            areaList.value.forEach((row) => {
+              const parentNode = tree.find((node) => node.value === row.sceneId);
+              if (parentNode) {
+                const node = { title: row.name, value: row.id, children: [] };
+                parentNode.children.push(node);
+              }
+            });
+            // 遍历站点列表，查找对应防区下的数据
+            stationList.value.forEach((row) => {
+              const parentNodes = tree.map((node) => node.children).flat();
+              const parentNode = parentNodes.find((node) => node.value === row.lineId);
+              if (parentNode) {
+                const node = { title: row.sitename, value: row.id, children: [] };
+                parentNode.children.push(node);
+              }
+            });
+            // 遍历相机列表，查找对应站点下的数据
+            newCameraList.value.forEach((row) => {
+              // 筛选孙子节点
+              const parentNodes = tree.flatMap((node) => node.children).flatMap((node) => node.children);
+              const parentNode = parentNodes.find((node) => node.value === row.siteId);
+              if (parentNode) {
+                const node = { title: row.cameraName, value: row.id, children: null };
+                parentNode.children.push(node);
+              }
+            });
+            // 转化为ant tree-select结构
+            gData.value = nodeTree.value = handleCameraTree(tree);
+            // 将每一个节点数据化为同级
+            generateList(gData.value);
+            lineArr.value = [];
+            // 初始化防区数据
+            initLineArr();
+          });
+        });
+      });
+    });
+  }
+
+  /* 添加内容 */
+  // 消息弹窗
+  const { createMessage } = useMessage();
+  // 展开指定的树节点
+  const expandedKeys: any = ref([]);
+  // 是否自动关闭父节点
+  const autoExpandParent = ref(true);
+  // 相机数据
+  const gData: any = ref([]);
+  // 每一条数据，包括防区、站点、相机
+  const dataList: any = ref([]);
+  // 用于替换对应字段名
+  const replaceFields = ref({
+    key: 'id',
+    title: 'name',
+    children: 'children',
+  });
+  const url = ref({
+    // 获取所有相机信息
+    getSiteCameraInfo: '/military/camera/site/getSiteCameraInfo',
+    // 根据id获取相机信息
+    getCameraInfoById: '/military/camera/setting/queryById',
+    // 添加相机
+    add: '/military/camera/setting/add',
+    // 编辑相机
+    edit: '/military/camera/setting/edit',
+    // 删除相机
+    delete: '/military/camera/setting/delete',
+    // 获取录像机列表
+    getVideoRecorderInfo: '/military/videoRecorder/qryCameraList',
+    // 第三方平台接口
+    getVMCameraInfo: '/third/api/getVMCameraInfo',
+  });
+  // 监控点位-防区
+  const lineNameTemp = ref('');
+  // 监控点位-站点
+  const siteNameTemp = ref('');
+  // 录像机
+  const vrNameTemp = ref('');
+  // 选择的相机id
+  const dataId = ref('');
+  // 取消
+  const cancelFlag = ref(false);
+  // 不知道
+  const flag = ref(false);
+  // 表单修改状态
+  const changeTag = ref(false);
+  // 按钮修改状态
+  const getTag = ref(false);
+  // 区分添加/修改
+  const addOrEdit = ref(false);
+  // 相机信息表单
+  const cameraForm: any = ref({
+    // 相机id
+    id: '',
+    // 相机ip
+    ip: '',
+    // 备用ip
+    ip2: '',
+    // 相机端口
+    port: '',
+    // 厂家
+    factory: '',
+    // 相机名称
+    cameraName: '',
+    // 相机类型
+    cameraType: '',
+    //相机光色
+    style: '',
+    // 相机类型
+    type: '',
+    // 相机认证用户名
+    user: '',
+    // 相机认证密码
+    password: '',
+    // 相机认证通道号
+    channel: '',
+    // 预览rtsp地址
+    preRtsp: '',
+    // 分析rtsp地址
+    analysisRtsp: '',
+    // 录像rtsp地址
+    recordRtsp: '',
+    // 防区名称
+    lineName: '',
+    // 站点id
+    siteId: '',
+    // 站点名称
+    siteName: '',
+    // 云台控制ip
+    cloudCtrlIp: '',
+    // 云台控制端口
+    cloudCtrlPort: '',
+    // 地理经度
+    longitude: '',
+    // 地理纬度
+    latitude: '',
+    // 安装高度
+    height: '',
+    // 录像机id
+    videoRecorderId: '',
+    // 录像机名称
+    videoRecorder: '',
+    // 相机颜色？？
+    cameraColor: '',
+    // 视线水平左夹角
+    leftAngle: '',
+    // 视线水平右夹角
+    rightAngle: '',
+    // 视野中央有效视距
+    viewDistance: '',
+    // 采样帧率
+    frameRate: '',
+    // 最大跟踪范围
+    maxRange: '',
+    // 零方位角
+    zeroAzimuth: '',
+    // 最大仰角
+    maxElevation: '',
+    // 安装垂直角
+    fixedAngle: '',
+    // 最大可视距离
+    maxVisibleDistance: '',
+    // 变倍因子
+    zoomFactor: '',
+    // 白光开始时间
+    dayBeginTime: '',
+    // 白光结束时间
+    dayEndTime: '',
+    // 报警持续时间
+    alarmNum: undefined,
+    // Web播放地址
+    webcastAddress: '',
+  });
+  // 防区数据
+  const lineArr: any = ref([]);
+  // 站点数据
+  const siteArr: any = ref([]);
+  // 录像机数据
+  const videoRecorderArr: any = ref([]);
+  // 选中的相机节点
+  const selectedKeys: any = ref([]);
+
+  onMounted(() => {
+    dataList.value.length = 0;
+    // 获取相机数据
+    getNodeTree();
+    // 厂家
+    getCameraFactory().then((response) => {
+      if (response.success) {
+        cameraFactorys.value = response.result;
+      }
+    });
+    // 相机类型
+    getCameraType().then((response) => {
+      if (response.success) {
+        cameraTypes.value = response.result;
+      }
+    });
+    // 相机光色
+    getCameraStyle().then((response) => {
+      if (response.success) {
+        cameraStyles.value = response.result;
+      }
+    });
+    // 录像机列表
+    getVideoRecorderArr();
+  });
+  // 选择防区
+  function handleLineChange(id) {
+    changeSiteArr(id);
+  }
+  // 选择站点
+  function handleSiteChange(id) {
+    cameraForm.value.siteId = id;
+  }
+  function changeSiteArr(id) {
+    let lineLen = gData.value.length;
+    siteArr.value = [];
+    for (let i = 0; i < lineLen; i++) {
+      let lineData: any = gData.value[i];
+      if (gData.value[i].id === id) {
+        if (lineData.children !== null && lineData.children.length > 0) {
+          let siteTempArr = lineData.children;
+          for (let j = 0; j < siteTempArr.length; j++) {
+            let siteData = siteTempArr[j];
+            siteArr.value.push({ id: siteData.id, name: siteData.name });
+          }
+        } else {
+          siteArr.value.push({ id: '', name: '' });
+        }
+      }
+    }
+    cameraForm.value.siteId = siteArr.value[0].id;
+    cameraForm.value.siteName = siteArr.value[0].name;
+    siteNameTemp.value = cameraForm.value.siteName; //改变线路，默认回显该线路的第一个站点
+  }
+  // 新增相机
+  function add() {
+    addOrEdit.value = true;
+    cancelFlag.value = true;
+    changeTag.value = true;
+    getTag.value = false;
+    dataId.value = '';
+    // 清空树选中节点
+    selectedKeys.value = [];
+    fromClear();
+  }
+  // 编辑相机
+  function edit() {
+    // 只有光电追踪仪和枪机有不同色光
+    if (cameraForm.value.type == '1' || cameraForm.value.type == '3') {
+      flag.value = true;
+    } else {
+      cameraForm.value.style = '';
+      flag.value = false;
+    }
+
+    if (cameraForm.value.id == '') {
+      createMessage.info('请先选择需要修改的数据!');
+      return false;
+    }
+    cancelFlag.value = true;
+    addOrEdit.value = true;
+    changeTag.value = true;
+  }
+  // 删除相机
+  function del() {
+    Modal.confirm({
+      title: '确认删除',
+      content: '是否删除选中数据?',
+      onOk: function () {
+        defHttp
+          .delete(
+            {
+              url: url.value.delete,
+              params: { id: cameraForm.value.id },
+            },
+            { joinParamsToUrl: true, isTransformResponse: false }
+          )
+          .then((res) => {
+            if (res.success) {
+              createMessage.success(res.message);
+              // 置空表单
+              fromClear();
+              // 重新获取相机数据
+              getNodeTree();
+              getTag.value = false;
+            } else {
+              createMessage.warning(res.message);
+            }
+          });
+        changeTag.value = false;
+        cancelFlag.value = false;
+        addOrEdit.value = false;
+      },
+    });
+  }
+  // 提交表单数据
+  function submitForm() {
+    // ip校验规则
+    const pattern =
+      /(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)/;
+    let cloudCtrlIp = cameraForm.value.cloudCtrlIp;
+    let cloudCtrlPort = cameraForm.value.cloudCtrlPort;
+    let cameraName = cameraForm.value.cameraName;
+    let siteName = cameraForm.value.siteName;
+    let ip = cameraForm.value.ip;
+    let ip2 = cameraForm.value.ip2;
+    let port = cameraForm.value.port;
+    let user = cameraForm.value.user;
+    let password = cameraForm.value.password;
+    let height = cameraForm.value.height;
+    let videoRecorderId = cameraForm.value.videoRecorderId;
+    let type = cameraForm.value.type;
+    let factory = cameraForm.value.factory;
+    let leftAngle = cameraForm.value.leftAngle;
+    let rightAngle = cameraForm.value.rightAngle;
+    let frameRate = cameraForm.value.frameRate;
+    let viewDistance = cameraForm.value.viewDistance;
+    let maxRange = cameraForm.value.maxRange;
+    let zeroAzimuth = cameraForm.value.zeroAzimuth;
+    let maxElevation = cameraForm.value.maxElevation;
+    let fixedAngle = cameraForm.value.fixedAngle;
+    let maxVisibleDistance = cameraForm.value.maxVisibleDistance;
+    let zoomFactor = cameraForm.value.zoomFactor;
+    let channel = cameraForm.value.channel;
+    let style = cameraForm.value.style;
+    cameraForm.value.cloudCtrlIp = cloudCtrlIp ? cloudCtrlIp : ip;
+    let flagList = [
+      {
+        code: siteName,
+        name: '站点名称',
+      },
+      {
+        code: cameraName,
+        name: '相机名',
+      },
+      {
+        code: port,
+        name: '相机端口',
+      },
+      {
+        code: user,
+        name: '相机认证用户名',
+      },
+      {
+        code: password,
+        name: '相机认证密码',
+      },
+      {
+        code: factory,
+        name: '厂家',
+      },
+      {
+        code: type,
+        name: '类型',
+      },
+      {
+        code: ip,
+        name: '相机IP',
+      },
+      {
+        code: ip2,
+        name: '相机备用IP',
+      },
+      {
+        code: height,
+        name: '安装高度',
+      },
+    ];
+    let errorMessage = '';
+    // 错误信息拼接
+    if (!cameraName || !siteName || !port || !user || !password || !height || !type || !factory || !ip || !ip2) {
+      for (const flag of flagList) {
+        if (!flag.code) {
+          errorMessage += flag.name + '、';
+        }
+      }
+      errorMessage = errorMessage.slice(0, errorMessage.length - 1);
+      createMessage.warning(errorMessage + '未填写！');
+      return;
+    } else if (!pattern.test(ip) || !pattern.test(cameraForm.value.cloudCtrlIp) || !pattern.test(ip2)) {
+      createMessage.warning('请检查IP格式并正确填写！');
+      return;
+    }
+    // 未输入时将赋值为0
+    cameraForm.value.channel = channel ? channel : '0';
+    cameraForm.value.leftAngle = leftAngle ? leftAngle : '0';
+    cameraForm.value.rightAngle = rightAngle ? rightAngle : '0';
+    cameraForm.value.frameRate = frameRate ? frameRate : '0';
+    cameraForm.value.viewDistance = viewDistance ? viewDistance : '0';
+    cameraForm.value.zeroAzimuth = zeroAzimuth ? zeroAzimuth : '0';
+    cameraForm.value.maxRange = maxRange ? maxRange : '0';
+    cameraForm.value.maxElevation = maxElevation ? maxElevation : '0';
+    cameraForm.value.fixedAngle = fixedAngle ? fixedAngle : '0';
+    cameraForm.value.maxVisibleDistance = maxVisibleDistance ? maxVisibleDistance : '0';
+    cameraForm.value.zoomFactor = zoomFactor ? zoomFactor : '0';
+    cameraForm.value.cloudCtrlIp = cloudCtrlIp ? cloudCtrlIp : ip;
+    cameraForm.value.cloudCtrlPort = cloudCtrlPort ? cloudCtrlPort : port;
+    cameraForm.value.style = style ? style : '';
+    let http;
+    if (addOrEdit.value) {
+      let httpurl = '';
+      let method = '';
+      // 无选中相机，则添加相机
+      if (!cameraForm.value.id) {
+        httpurl += url.value.add;
+        method = 'post';
+        http = defHttp.post(
+          {
+            url: httpurl,
+            params: cameraForm.value,
+          },
+          { isTransformResponse: false }
+        );
+      } else {
+        // 有选中相机，则编辑相机
+        httpurl += url.value.edit;
+        method = 'put';
+        http = defHttp.put(
+          {
+            url: httpurl,
+            params: cameraForm.value,
+          },
+          { isTransformResponse: false }
+        );
+      }
+      //  添加或编辑相机
+      http.then((res) => {
+        let success_message = cameraForm.value.id ? '修改成功' : '添加成功';
+        let error_message = cameraForm.value.id ? '修改失败' : '添加失败';
+        // 添加或编辑完成
+        if (res.success) {
+          createMessage.success(success_message);
+          // 重新赋值表单
+          cameraForm.value = res.result;
+          // 重新获取相机
+          getNodeTree();
+        } else {
+          createMessage.warning(error_message);
+        }
+      });
+      cancelFlag.value = false;
+      addOrEdit.value = false;
+      changeTag.value = false;
+      getTag.value = true;
+      flag.value = false;
+    }
+  }
+  // 选择相机类型
+  function typeChange(item) {
+    if (item == '1' || item == '3') {
+      flag.value = true;
+    } else {
+      cameraForm.value.style = '';
+      flag.value = false;
+    }
+  }
+  // 选择相机
+  function onSelect(selectedKeys, _info) {
+    fromClear();
+    addOrEdit.value = false;
+    cancelFlag.value = false;
+    changeTag.value = false;
+    // 选中相机
+    dataId.value = selectedKeys[0];
+
+    let gDataLen = gData.value.length;
+    getTag.value = false;
+    for (let i = 0; i < gDataLen; i++) {
+      if (gData.value[i].id == dataId.value) {
+        return;
+      }
+    }
+    //请求相机数据
+    defHttp
+      .get(
+        {
+          url: url.value.getCameraInfoById,
+          params: { id: dataId.value },
+        },
+        { isTransformResponse: false }
+      )
+      .then((res) => {
+        if (res.success) {
+          getTag.value = true;
+          cameraForm.value = res.result;
+          lineNameTemp.value = cameraForm.value.lineName;
+          siteNameTemp.value = cameraForm.value.siteName;
+          vrNameTemp.value = cameraForm.value.videoRecorderName;
+        }
+      });
+  }
+  // 处理相机数据
+  function handleCameraTree(data, _index = undefined) {
+    let arr: any = [];
+    for (let i = 0; i < data.length; i++) {
+      let obj: any = {};
+      let item = data[i];
+      obj.name = item.title;
+      obj.id = item.value;
+      obj.disabled = item.children?.length >= 0 ? true : false;
+      if (item.children && item.children.length > 0) {
+        obj.children = handleCameraTree(item.children);
+      }
+      arr.push(obj);
+    }
+    return arr;
+  }
+  // 展开/收起节点时触发
+  function onExpand(onExpandedKeys) {
+    expandedKeys.value = onExpandedKeys;
+    autoExpandParent.value = false;
+  }
+  // 搜索相机
+  function onChange(e) {
+    const value = e.target.value;
+    nodeTree.value = [];
+    dataList.value.map((item) => {
+      if (value) {
+        // 若存在搜索关键字
+        if (item.title.indexOf(value) > -1) {
+          nodeTree.value.push({
+            id: item.key,
+            name: item.title,
+            disabled: item.children?.length > 0 ? true : false,
+          });
+        }
+      } else {
+        // 不存在搜索关键字
+        nodeTree.value = gData.value;
+      }
+    });
+  }
+  // 将树结构展开，每个节点都变成同级
+  function generateList(data) {
+    for (let i = 0; i < data.length; i++) {
+      const node: any = data[i];
+      dataList.value.push({ key: node.id, title: node.name });
+      if (node.children) {
+        generateList(node.children);
+      }
+    }
+  }
+  // 防区列表
+  function initLineArr() {
+    let lineLen = gData.value.length;
+    for (let i = 0; i < lineLen; i++) {
+      let lineData = gData.value[i];
+      lineArr.value.push({ id: lineData.id, name: lineData.name });
+    }
+  }
+  // 取消编辑/新增
+  function cancel() {
+    if (!getTag.value) {
+      cameraForm.value.id = '';
+      cameraForm.value.ip = '';
+      cameraForm.value.ip2 = '';
+      cameraForm.value.channel = '';
+      cameraForm.value.analysisRtsp = '';
+      cameraForm.value.cameraName = '';
+      cameraForm.value.cameraType = '';
+      cameraForm.value.cameraColor = '';
+      cameraForm.value.cloudCtrlIp = '';
+      cameraForm.value.cloudCtrlPort = '';
+      cameraForm.value.latitude = '';
+      cameraForm.value.height = '';
+      cameraForm.value.videoRecorderId = '';
+      cameraForm.value.viewDistance = '';
+      cameraForm.value.frameRate = '';
+      cameraForm.value.leftAngle = '';
+      cameraForm.value.rightAngle = '';
+      cameraForm.value.longitude = '';
+      cameraForm.value.password = '';
+      cameraForm.value.port = '';
+      cameraForm.value.preRtsp = '';
+      cameraForm.value.maxRange = '';
+      cameraForm.value.lineName = '';
+      cameraForm.value.siteName = '';
+      cameraForm.value.user = '';
+      cameraForm.value.type = '';
+      cameraForm.value.factory = '';
+      cameraForm.value.style = '';
+      cameraForm.value.recordRtsp = '';
+      cameraForm.value.siteId = '';
+      cameraForm.value.zeroAzimuth = '';
+      cameraForm.value.maxElevation = '';
+      cameraForm.value.fixedAngle = '';
+      cameraForm.value.maxVisibleDistance = '';
+      cameraForm.value.zoomFactor = '';
+      cameraForm.value.createBy = '';
+      cameraForm.value.createTime = '';
+      cameraForm.value.updateBy = '';
+      cameraForm.value.updateTime = '';
+      cameraForm.value.dayBeginTime = '';
+      cameraForm.value.dayEndTime = '';
+      cameraForm.value.alarmNum = '';
+      lineNameTemp.value = '';
+      siteNameTemp.value = '';
+      vrNameTemp.value = '';
+    } else {
+      defHttp
+        .get(
+          {
+            url: url.value.getCameraInfoById,
+            params: { id: dataId.value },
+          },
+          { isTransformResponse: false }
+        )
+        .then((res) => {
+          if (res.success) {
+            getTag.value = true;
+            cameraForm.value = res.result;
+            lineNameTemp.value = cameraForm.value.lineName;
+            siteNameTemp.value = cameraForm.value.siteName;
+            vrNameTemp.value = cameraForm.value.videoRecorderName;
+          }
+        });
+    }
+    changeTag.value = false;
+    cancelFlag.value = false;
+    addOrEdit.value = false;
+  }
+  // 重置表单
+  function fromReset() {
+    if (dataId.value) {
+      defHttp
+        .get(
+          {
+            url: url.value.getCameraInfoById,
+            params: { id: dataId.value },
+          },
+          { isTransformResponse: false }
+        )
+        .then((res) => {
+          if (res.success) {
+            getTag.value = true;
+            cameraForm.value = res.result;
+            lineNameTemp.value = cameraForm.value.lineName;
+            siteNameTemp.value = cameraForm.value.siteName;
+            vrNameTemp.value = cameraForm.value.videoRecorderName;
+          }
+        });
+    } else {
+      fromClear();
+    }
+  }
+  // 清空表单
+  function fromClear() {
+    dataId.value = '';
+    cameraForm.value.id = '';
+    cameraForm.value.ip = '';
+    cameraForm.value.ip2 = '';
+    cameraForm.value.channel = '';
+    cameraForm.value.analysisRtsp = '';
+    cameraForm.value.cameraName = '';
+    cameraForm.value.cameraType = '';
+    cameraForm.value.cameraColor = '';
+    cameraForm.value.cloudCtrlIp = '';
+    cameraForm.value.cloudCtrlPort = '';
+    cameraForm.value.latitude = '';
+    cameraForm.value.height = '';
+    cameraForm.value.videoRecorderId = '';
+    cameraForm.value.viewDistance = '';
+    cameraForm.value.frameRate = '';
+    cameraForm.value.leftAngle = '';
+    cameraForm.value.rightAngle = '';
+    cameraForm.value.longitude = '';
+    cameraForm.value.password = '';
+    cameraForm.value.port = '';
+    cameraForm.value.preRtsp = '';
+    cameraForm.value.maxRange = '';
+    cameraForm.value.lineName = '';
+    cameraForm.value.siteName = '';
+    cameraForm.value.user = '';
+    cameraForm.value.type = '';
+    cameraForm.value.factory = '';
+    cameraForm.value.style = '';
+    cameraForm.value.recordRtsp = '';
+    cameraForm.value.siteId = '';
+    cameraForm.value.zeroAzimuth = '';
+    cameraForm.value.maxElevation = '';
+    cameraForm.value.fixedAngle = '';
+    cameraForm.value.maxVisibleDistance = '';
+    cameraForm.value.zoomFactor = '';
+    cameraForm.value.createBy = '';
+    cameraForm.value.createTime = '';
+    cameraForm.value.updateBy = '';
+    cameraForm.value.updateTime = '';
+    cameraForm.value.dayBeginTime = '';
+    cameraForm.value.dayEndTime = '';
+    cameraForm.value.alarmNum = '';
+    lineNameTemp.value = '';
+    siteNameTemp.value = '';
+    vrNameTemp.value = '';
+  }
+  // 获取录像机列表
+  function getVideoRecorderArr() {
+    defHttp
+      .get(
+        {
+          url: url.value.getVideoRecorderInfo,
+        },
+        { isTransformResponse: false }
+      )
+      .then((res) => {
+        if (res.success) {
+          res.result.forEach((data, _index) => {
+            videoRecorderArr.value.push({ id: data.id, name: data.deviceName });
+          });
+        }
+      });
+  }
+  // 刷新列表
+  function reNew() {
+    reNewBtn.value.spin = true;
+    defHttp
+      .get(
+        {
+          url: url.value.getVMCameraInfo,
+        },
+        { isTransformResponse: false }
+      )
+      .then((res) => {
+        if (res.success) {
+          createMessage.success('相机列表更新成功!');
+        } else {
+          createMessage.error(res.message);
+        }
+        getNodeTree();
+        getVideoRecorderArr();
+        reNewBtn.value.spin = false;
+      });
+  }
+
+  defineExpose({
+    reNewBtn,
+    gData,
+  });
+</script>
+
+<style scoped lang="less">
+  ::-webkit-scrollbar {
+    display: inline-block;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0);
+    border-radius: 2px;
+  }
+
+  .ant-form-vertical .ant-form-item {
+    padding-bottom: 0 !important;
+  }
+
+  .cameraBox {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    padding: 5px 15px;
+  }
+
+  .treeBox {
+    flex: 1;
+    padding: 15px 20px;
+    border: #88887770 1px solid;
+    overflow: scroll;
+    max-height: 863px;
+  }
+
+  .menuBox {
+    flex: 4;
+    padding: 0 20px;
+  }
+
+  .menuFrom {
+    display: flex;
+    padding: 15px 0 0 0;
+  }
+
+  .menuBottom {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .mustInput {
+    display: flex;
+    position: relative;
+  }
+
+  .mustInput::before {
+    content: '*';
+    color: red;
+    position: absolute;
+    top: 6px;
+    left: 4px;
+  }
+
+  .timePeriodDelimiter {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    height: 2em;
+  }
+
+  :deep(.ant-form-item-control-input-content) {
+    display: flex;
+  }
+
+  :deep(.ant-form-item-label) {
+    display: flex;
+    justify-content: flex-start;
+  }
+</style>