From ea98580b07f2dbc3f8ab1e783cbd3370eb69125b Mon Sep 17 00:00:00 2001
From: Teo <2642673902@qq.com>
Date: Thu, 19 Jun 2025 19:58:33 +0800
Subject: [PATCH] =?UTF-8?q?=E7=9B=91=E6=8E=A7=E5=AE=A4=EF=BC=8C=E6=91=84?=
 =?UTF-8?q?=E5=83=8F=E5=A4=B4=E5=B7=A5=E4=BD=9C=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/other/ys7Device/index.ts              |  14 +-
 src/api/other/ys7Device/types.ts              |   9 +
 src/api/other/ys7DeviceImg/index.ts           |  63 ++
 src/api/other/ys7DeviceImg/types.ts           |  76 +++
 src/api/progress/plan/index.ts                |   2 +-
 .../progressCategoryTemplate/types.ts         |  27 +-
 src/views/gisHome/component/map.vue           |  20 +-
 src/views/gisHome/js/renderFacilities.js      | 288 +++++----
 src/views/monitorRoom/icon/em.png             | Bin 0 -> 6068 bytes
 src/views/monitorRoom/icon/four.png           | Bin 0 -> 613 bytes
 src/views/monitorRoom/icon/four_1.png         | Bin 0 -> 555 bytes
 src/views/monitorRoom/icon/nine.png           | Bin 0 -> 940 bytes
 src/views/monitorRoom/icon/nine_1.png         | Bin 0 -> 643 bytes
 src/views/monitorRoom/icon/one.png            | Bin 0 -> 482 bytes
 src/views/monitorRoom/icon/one_1.png          | Bin 0 -> 406 bytes
 src/views/monitorRoom/icon/six.png            | Bin 0 -> 1304 bytes
 src/views/monitorRoom/icon/six_1.png          | Bin 0 -> 615 bytes
 src/views/monitorRoom/index.vue               | 607 ++++++++++++++++++
 src/views/other/ys7DeviceImg/index.vue        | 202 ++++++
 19 files changed, 1141 insertions(+), 167 deletions(-)
 create mode 100644 src/api/other/ys7DeviceImg/index.ts
 create mode 100644 src/api/other/ys7DeviceImg/types.ts
 create mode 100644 src/views/monitorRoom/icon/em.png
 create mode 100644 src/views/monitorRoom/icon/four.png
 create mode 100644 src/views/monitorRoom/icon/four_1.png
 create mode 100644 src/views/monitorRoom/icon/nine.png
 create mode 100644 src/views/monitorRoom/icon/nine_1.png
 create mode 100644 src/views/monitorRoom/icon/one.png
 create mode 100644 src/views/monitorRoom/icon/one_1.png
 create mode 100644 src/views/monitorRoom/icon/six.png
 create mode 100644 src/views/monitorRoom/icon/six_1.png
 create mode 100644 src/views/monitorRoom/index.vue
 create mode 100644 src/views/other/ys7DeviceImg/index.vue

diff --git a/src/api/other/ys7Device/index.ts b/src/api/other/ys7Device/index.ts
index e94e93a..0e70048 100644
--- a/src/api/other/ys7Device/index.ts
+++ b/src/api/other/ys7Device/index.ts
@@ -1,6 +1,6 @@
 import request from '@/utils/request';
 import { AxiosPromise } from 'axios';
-import { Ys7DeviceVO, Ys7DeviceForm, Ys7DeviceQuery } from '@/api/other/ys7Device/types';
+import { Ys7DeviceVO, Ys7DeviceForm, Ys7DeviceQuery, CameraListForm } from '@/api/other/ys7Device/types';
 
 /**
  * 查询萤石摄像头列表
@@ -89,3 +89,15 @@ export const getAccessToken = () => {
     method: 'get'
   });
 };
+
+/**
+ * 根据项目查询萤石摄像头列表
+ * @param id
+ */
+export const getCameraListByProjectId = (params: CameraListForm): AxiosPromise<Ys7DeviceVO> => {
+  return request({
+    url: '/other/ys7Device/list/project',
+    method: 'get',
+    params
+  });
+};
diff --git a/src/api/other/ys7Device/types.ts b/src/api/other/ys7Device/types.ts
index 46de86d..671664f 100644
--- a/src/api/other/ys7Device/types.ts
+++ b/src/api/other/ys7Device/types.ts
@@ -129,3 +129,12 @@ export interface Ys7DeviceQuery extends PageQuery {
    */
   params?: any;
 }
+
+export interface CameraListForm {
+  /**
+   * 项目id
+   */
+  projectId: string | number;
+  pageSize?: number;
+  pageNum?: number;
+}
diff --git a/src/api/other/ys7DeviceImg/index.ts b/src/api/other/ys7DeviceImg/index.ts
new file mode 100644
index 0000000..bc814c2
--- /dev/null
+++ b/src/api/other/ys7DeviceImg/index.ts
@@ -0,0 +1,63 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { Ys7DeviceImgVO, Ys7DeviceImgForm, Ys7DeviceImgQuery } from '@/api/other/ys7DeviceImg/types';
+
+/**
+ * 查询萤石摄像头图片列表
+ * @param query
+ * @returns {*}
+ */
+
+export const listYs7DeviceImg = (query?: Ys7DeviceImgQuery): AxiosPromise<Ys7DeviceImgVO[]> => {
+  return request({
+    url: '/other/ys7DeviceImg/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询萤石摄像头图片详细
+ * @param id
+ */
+export const getYs7DeviceImg = (id: string | number): AxiosPromise<Ys7DeviceImgVO> => {
+  return request({
+    url: '/other/ys7DeviceImg/' + id,
+    method: 'get'
+  });
+};
+
+/**
+ * 新增萤石摄像头图片
+ * @param data
+ */
+export const addYs7DeviceImg = (data: Ys7DeviceImgForm) => {
+  return request({
+    url: '/other/ys7DeviceImg',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改萤石摄像头图片
+ * @param data
+ */
+export const updateYs7DeviceImg = (data: Ys7DeviceImgForm) => {
+  return request({
+    url: '/other/ys7DeviceImg',
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 删除萤石摄像头图片
+ * @param id
+ */
+export const delYs7DeviceImg = (id: string | number | Array<string | number>) => {
+  return request({
+    url: '/other/ys7DeviceImg/' + id,
+    method: 'delete'
+  });
+};
diff --git a/src/api/other/ys7DeviceImg/types.ts b/src/api/other/ys7DeviceImg/types.ts
new file mode 100644
index 0000000..6973205
--- /dev/null
+++ b/src/api/other/ys7DeviceImg/types.ts
@@ -0,0 +1,76 @@
+export interface Ys7DeviceImgVO {
+  /**
+   * 设备序列号
+   */
+  deviceSerial: string;
+  id?: string | number;
+  /**
+   * 设备名称
+   */
+  deviceName: string;
+
+  /**
+   * 图片地址
+   */
+  url: string;
+
+  /**
+   * 备注
+   */
+  createTime: string;
+}
+
+export interface Ys7DeviceImgForm extends BaseEntity {
+  /**
+   * 主键id
+   */
+  id?: string | number;
+
+  /**
+   * 设备id
+   */
+  deviceId?: string | number;
+
+  /**
+   * 设备序列号
+   */
+  deviceSerial?: string;
+
+  /**
+   * 设备名称
+   */
+  deviceName?: string;
+
+  /**
+   * 图片地址
+   */
+  url?: string;
+
+  /**
+   * 备注
+   */
+  createTime?: string;
+}
+
+export interface Ys7DeviceImgQuery extends PageQuery {
+  /**
+   * 设备id
+   */
+  id?: string | number;
+
+  /**
+   * 设备序列号
+   */
+  deviceSerial?: string;
+
+  /**
+   * 设备名称
+   */
+  deviceName?: string;
+
+  /**
+   * 日期范围参数
+   */
+  params?: any;
+  createTime?: string;
+}
diff --git a/src/api/progress/plan/index.ts b/src/api/progress/plan/index.ts
index 0f8b668..6abf33d 100644
--- a/src/api/progress/plan/index.ts
+++ b/src/api/progress/plan/index.ts
@@ -192,7 +192,7 @@ export const deleteDaily = (query: { id: string; detailIdList: string[] }) => {
 
 export const workScheduleDel = () => {
   return request({
-    url: '/facility/matrix/gis/position/1933358820034174995',
+    url: '/facility/matrix/gis/position?projectId=1930896467736707073',
     method: 'get'
   });
 };
diff --git a/src/api/progress/progressCategoryTemplate/types.ts b/src/api/progress/progressCategoryTemplate/types.ts
index 12e0292..66ee461 100644
--- a/src/api/progress/progressCategoryTemplate/types.ts
+++ b/src/api/progress/progressCategoryTemplate/types.ts
@@ -3,7 +3,11 @@ export interface ProgressCategoryTemplateVO {
    * 类别名称
    */
   name: string;
-
+  /**
+   * 主键id
+   */
+  id?: string | number;
+  pid?: string | number;
   /**
    * 计量方式（0无 1数量 2百分比）
    */
@@ -24,10 +28,10 @@ export interface ProgressCategoryTemplateVO {
    */
   remark: string;
 
-    /**
-     * 子对象
-     */
-    children: ProgressCategoryTemplateVO[];
+  /**
+   * 子对象
+   */
+  children: ProgressCategoryTemplateVO[];
 }
 
 export interface ProgressCategoryTemplateForm extends BaseEntity {
@@ -65,11 +69,9 @@ export interface ProgressCategoryTemplateForm extends BaseEntity {
    * 备注
    */
   remark?: string;
-
 }
 
 export interface ProgressCategoryTemplateQuery {
-
   /**
    * 父类别id
    */
@@ -95,11 +97,8 @@ export interface ProgressCategoryTemplateQuery {
    */
   projectId?: string | number;
 
-    /**
-     * 日期范围参数
-     */
-    params?: any;
+  /**
+   * 日期范围参数
+   */
+  params?: any;
 }
-
-
-
diff --git a/src/views/gisHome/component/map.vue b/src/views/gisHome/component/map.vue
index fd40faf..d5ae124 100644
--- a/src/views/gisHome/component/map.vue
+++ b/src/views/gisHome/component/map.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="ol-map" id="olMap"></div>
-  <el-button class="btn" type="primary" @click="drawRectangle">绘制矩形</el-button>
 </template>
 
 <script setup>
@@ -12,8 +11,7 @@ const initFacilities = async () => {
   const res = await workScheduleDel('1933358821565095951');
   console.log(res);
 
-  renderFacilitiesToCesium(sdk.viewer, res.data.photovoltaicPanelPositionList, 'Polygon', { flyToFirst: true });
-  renderFacilitiesToCesium(sdk.viewer, res.data.photovoltaicPanelPointPositionList, 'Point', { flyToFirst: true });
+  renderFacilitiesToCesium(sdk.viewer, res.data);
 };
 
 // 初始化 Cesium 地球
@@ -41,22 +39,6 @@ const createEarth = () => {
   new YJ.Tools(sdk).flyHome(0);
 };
 
-// 点击按钮时绘制一个矩形并飞行过去
-const drawRectangle = () => {
-  const viewer = sdk.viewer;
-  const rectangleEntity = viewer.entities.add({
-    name: '测试矩形',
-    rectangle: {
-      coordinates: Cesium.Rectangle.fromDegrees(100.0, 30.0, 102.0, 32.0), // 西南角到东北角
-      material: Cesium.Color.YELLOW.withAlpha(0.5),
-      outline: true,
-      height: 2.5,
-      outlineColor: Cesium.Color.BLACK
-    }
-  });
-  viewer.flyTo(viewer.entities);
-};
-
 onMounted(async () => {
   // 最早执行
   window.CESIUM_BASE_URL = '/Cesium/';
diff --git a/src/views/gisHome/js/renderFacilities.js b/src/views/gisHome/js/renderFacilities.js
index 062066e..8b7e180 100644
--- a/src/views/gisHome/js/renderFacilities.js
+++ b/src/views/gisHome/js/renderFacilities.js
@@ -1,153 +1,177 @@
 import imgurl from '../img/guanfuban.png';
 
-function getStatusColor(status) {
-  switch (status) {
-    case '0':
-      return Cesium.Color.RED.withAlpha(0.4);
-    case '1':
-      return Cesium.Color.GREEN.withAlpha(0.4);
-    default:
-      return Cesium.Color.BLUE.withAlpha(0.4);
-  }
-}
-
 //计算经纬度包围框 → 生成矩形边界（空心）
-function getBoundingBoxRectangle(positionList) {
-  const lons = positionList.map((p) => parseFloat(p[0]));
-  const lats = positionList.map((p) => parseFloat(p[1]));
+// function getBoundingBoxRectangle(positionList) {
+//   const lons = positionList.map((p) => parseFloat(p[0]));
+//   const lats = positionList.map((p) => parseFloat(p[1]));
 
-  const west = Math.min(...lons);
-  const east = Math.max(...lons);
-  const south = Math.min(...lats);
-  const north = Math.max(...lats);
+//   const west = Math.min(...lons);
+//   const east = Math.max(...lons);
+//   const south = Math.min(...lats);
+//   const north = Math.max(...lats);
 
-  return Cesium.Rectangle.fromDegrees(west, south, east, north);
-}
+//   return Cesium.Rectangle.fromDegrees(west, south, east, north);
+// }
 
-export function renderFacilitiesToCesium(viewer, facilityList, type, options = {}) {
-  const dataSource = new Cesium.CustomDataSource('facility-layer');
+// export function renderFacilitiesToCesium(viewer, facilityList, type, options = {}) {
+//   const dataSource = new Cesium.CustomDataSource('facility-layer');
 
-  facilityList.forEach((facility) => {
-    const { positionList, id, name, status, finishDate } = facility;
-    if (type === 'Polygon' && positionList.length >= 3) {
-      // 渲染 Polygon 面 + 贴图
+//   facilityList.forEach((facility) => {
+//     const { positionList, id, name, status, finishDate } = facility;
+//     if (type === 'Polygon' && positionList.length >= 3) {
+//       // 渲染 Polygon 面 + 贴图
+//       const cartesianPositions = positionList.map(([lon, lat]) => Cesium.Cartesian3.fromDegrees(parseFloat(lon), parseFloat(lat)));
+//       dataSource.entities.add({
+//         id,
+//         name,
+//         polygon: {
+//           hierarchy: new Cesium.PolygonHierarchy(cartesianPositions),
+//           material: new Cesium.ImageMaterialProperty({
+//             image: imgurl,
+//             repeat: new Cesium.Cartesian2(1.0, 1.0),
+//             transparent: true
+//           }),
+//           outline: false,
+//           height: 2.5
+//         },
+//         properties: {
+//           status,
+//           finishDate
+//         }
+//       });
+
+//       // 添加外框矩形线
+//       const rectangle = getBoundingBoxRectangle(positionList);
+//       dataSource.entities.add({
+//         name: `${name}_bbox`,
+//         rectangle: {
+//           coordinates: rectangle,
+//           fill: false,
+//           outline: true,
+//           outlineColor: Cesium.Color.YELLOW.withAlpha(0.8),
+//           outlineWidth: 2
+//         }
+//       });
+//     } else if (type === 'Point') {
+
+//       const [lonStr, latStr] = positionList;
+//       const lon = parseFloat(lonStr);
+//       const lat = parseFloat(latStr);
+//       dataSource.entities.add({
+//         id,
+//         name,
+//         position: Cesium.Cartesian3.fromDegrees(lon, lat),
+//         point: {
+//           pixelSize: 10,
+//           color:Cesium.Color.GREEN.withAlpha(0.4),
+//           outlineColor: Cesium.Color.WHITE,
+//           outlineWidth: 2
+//         },
+//         properties: {
+//           status,
+//           finishDate
+//         }
+//       });
+//     }
+//   });
+
+//   viewer.dataSources.add(dataSource).then(() => {
+//     if (options.flyToFirst && facilityList.length > 0) {
+//       const firstEntity = dataSource.entities.getById(facilityList[0].id);
+//       if (firstEntity) {
+//         viewer.flyTo(firstEntity);
+//       }
+//     }
+//   });
+// }
+
+export function renderFacilitiesToCesium(viewer, dataList) {
+  const pointCollection = new Cesium.PointPrimitiveCollection(); // gfbzd
+  const polygonDataSource = new Cesium.CustomDataSource('polygon-textured'); // gfb
+  const cylinderInstances = []; // gfblz
+  let flyTargetPositions = [];
+  dataList.forEach((data) => {
+    const { category, positionList, status } = data;
+    // ✅ gfbzd 点（PointPrimitive 浮空）
+    if (category === 'gfbzd' && positionList.length === 2) {
+      const [lon, lat] = positionList.map(parseFloat);
+      pointCollection.add({
+        position: Cesium.Cartesian3.fromDegrees(lon, lat, 1), // 高度1米
+        color: Cesium.Color.GREEN.withAlpha(0.9),
+        pixelSize: 6,
+        outlineColor: Cesium.Color.WHITE,
+        outlineWidth: 1
+      });
+    }
+    // ✅ gfb 面（Entity + Image 贴图）
+    else if (category === 'gfb' && positionList.length >= 3) {
       const cartesianPositions = positionList.map(([lon, lat]) => Cesium.Cartesian3.fromDegrees(parseFloat(lon), parseFloat(lat)));
-      dataSource.entities.add({
-        id,
-        name,
+      polygonDataSource.entities.add({
+        id: data.id,
+        name: data.name,
         polygon: {
           hierarchy: new Cesium.PolygonHierarchy(cartesianPositions),
           material: new Cesium.ImageMaterialProperty({
             image: imgurl,
-            repeat: new Cesium.Cartesian2(1.0, 1.0),
+            repeat: new Cesium.Cartesian2(1, 1),
             transparent: true
           }),
-          outline: false,
-          height: 2.5
-        },
-        properties: {
-          status,
-          finishDate
-        }
-      });
-
-      // 添加外框矩形线
-      const rectangle = getBoundingBoxRectangle(positionList);
-      dataSource.entities.add({
-        name: `${name}_bbox`,
-        rectangle: {
-          coordinates: rectangle,
-          fill: false,
+          height: 2.5,
           outline: true,
-          outlineColor: Cesium.Color.YELLOW.withAlpha(0.8),
-          outlineWidth: 2
-        }
-      });
-    } else if (type === 'Point') {
-      
-      const [lonStr, latStr] = positionList;
-      const lon = parseFloat(lonStr);
-      const lat = parseFloat(latStr);
-      dataSource.entities.add({
-        id,
-        name,
-        position: Cesium.Cartesian3.fromDegrees(lon, lat),
-        point: {
-          pixelSize: 10,
-          color:Cesium.Color.GREEN.withAlpha(0.4),
-          outlineColor: Cesium.Color.WHITE,
-          outlineWidth: 2
-        },
-        properties: {
-          status,
-          finishDate
+          outlineColor: Cesium.Color.GREEN.withAlpha(0.4)
         }
       });
     }
+    // ✅ gfblz 数据：Cylinder + Primitive 批量渲染
+    // else if (category === 'gfblz' && positionList.length === 2) {
+    //   const [lon, lat] = positionList.map(parseFloat);
+    //   const position = Cesium.Cartesian3.fromDegrees(lon, lat, 1.25); // 圆柱中点浮空 1.25 米（高的一半）
+    //   cylinderInstances.push(
+    //     new Cesium.GeometryInstance({
+    //       geometry: new Cesium.CylinderGeometry({
+    //         length: 2.5, // 高度 2.5 米
+    //         topRadius: 0.5,
+    //         bottomRadius: 0.5,
+    //         vertexFormat: Cesium.MaterialAppearance.VERTEX_FORMAT
+    //       }),
+    //       modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(position),
+    //       attributes: {
+    //         color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.GREEN.withAlpha(0.8))
+    //       }
+    //     })
+    //   );
+    // }
   });
 
-  viewer.dataSources.add(dataSource).then(() => {
-    if (options.flyToFirst && facilityList.length > 0) {
-      const firstEntity = dataSource.entities.getById(facilityList[0].id);
-      if (firstEntity) {
-        viewer.flyTo(firstEntity);
-      }
-    }
-  });
+  // ✅ 添加图层
+  viewer.scene.primitives.add(pointCollection); // gfbzd
+  viewer.dataSources.add(polygonDataSource); // gfb
+
+  // ✅ 批量添加圆柱 Primitive（gfblz）
+  if (cylinderInstances.length > 0) {
+    viewer.scene.primitives.add(
+      new Cesium.Primitive({
+        geometryInstances: cylinderInstances,
+        appearance: new Cesium.MaterialAppearance({
+          material: Cesium.Material.fromType('Color'),
+          translucent: true,
+          closed: false
+        }),
+        asynchronous: true
+      })
+    );
+  }
+  // ✅ fz 数据：仅用于定位，不渲染
+  if (dataList[0].category === 'fz') {
+    flyTargetPositions = dataList[0].positionList.map(([lon, lat]) => Cesium.Cartesian3.fromDegrees(parseFloat(lon), parseFloat(lat)));
+  }
+
+  // ✅ 飞到 fz 区域
+  if (flyTargetPositions.length > 0) {
+    const sphere = Cesium.BoundingSphere.fromPoints(flyTargetPositions);
+    viewer.camera.flyToBoundingSphere(sphere, {
+      duration: 2.0,
+      offset: new Cesium.HeadingPitchRange(0, -0.5, sphere.radius * 2)
+    });
+  }
 }
-
-
-// export function renderFacilitiesToCesium(viewer, dataList) {
-//   const pointCollection = new Cesium.PointPrimitiveCollection();
-//   const polygonInstances = [];
-
-//   dataList.forEach(data => {
-//     if (data.type === 'Point') {
-//       const { position, status } = data;
-//       const [lon, lat] = position;
-
-//       pointCollection.add({
-//         position: Cesium.Cartesian3.fromDegrees(lon, lat),
-//         color: getStatusColor(status),
-//         pixelSize: 6,
-//         outlineColor: Cesium.Color.WHITE,
-//         outlineWidth: 1,
-//       });
-//     }
-
-//     else if (data.type === 'Polygon' && data.positions.length >= 3) {
-//       const hierarchy = new Cesium.PolygonHierarchy(
-//         data.positions.map(([lon, lat]) => Cesium.Cartesian3.fromDegrees(lon, lat))
-//       );
-
-//       polygonInstances.push(
-//         new Cesium.GeometryInstance({
-//           geometry: new Cesium.PolygonGeometry({
-//             polygonHierarchy: hierarchy,
-//             vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
-//           }),
-//           attributes: {
-//             color: Cesium.ColorGeometryInstanceAttribute.fromColor(getStatusColor(data.status).withAlpha(0.6)),
-//           },
-//         })
-//       );
-//     }
-//   });
-
-//   // 添加点图层
-//   viewer.scene.primitives.add(pointCollection);
-
-//   // 添加面图层（Primitive）
-//   if (polygonInstances.length > 0) {
-//     viewer.scene.primitives.add(
-//       new Cesium.Primitive({
-//         geometryInstances: polygonInstances,
-//         appearance: new Cesium.PerInstanceColorAppearance({
-//           flat: true,
-//           translucent: true,
-//         }),
-//         asynchronous: true,
-//       })
-//     );
-//   }
-// }
\ No newline at end of file
diff --git a/src/views/monitorRoom/icon/em.png b/src/views/monitorRoom/icon/em.png
new file mode 100644
index 0000000000000000000000000000000000000000..5c353dcb5398147515ef43929447dc89ff2f052b
GIT binary patch
literal 6068
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

literal 0
HcmV?d00001

diff --git a/src/views/monitorRoom/icon/four.png b/src/views/monitorRoom/icon/four.png
new file mode 100644
index 0000000000000000000000000000000000000000..5c66a0a81250210e57473bdfcd1084c67865c28b
GIT binary patch
literal 613
zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I1|(Ny7TyC=oCO|{#S9GGLLkg|>2BR01_mZ^
zPZ!6KiaBp*AIv@EAmD1>!Sq7GkA2Dmz6bA^=X{tdq;W9(zQdvN7Y9^l@GWTC!R+3A
zY$E@}2%+=mJkCs?5Rfusdp>_;S-N`cb;b1t>>JoOFnwq&EM^b5{C&D)p5pyE;T|*8
zMW5W9DtYVVw<~9V@|(Bi99uIjJR-nw+U^RqM)vzWOFTbJh*>pxQiE;t+G9FjydO4o
z*{z-&Zo!ao`i-LRq~|`9?H<n*)IFwnF`n`KTE-f;2MakhH`tbn9I0r%(skCjH{n)E
zOamj^)g27XJgW*B*(5?9Gw~R#IL0cG5YWqQaA1LyctV4tsonvG<}9$n2@Tr$qTOxh
z<(fX7+FZ}u|I_ZN?T^})$OUtsdmkvC-m&}2*PiaX75DdX*zV=zJ^!pPK2swi&i0<L
zzqOISQ9|Sw_hioZll715n4Ne!HF(~^m%SqAH`=eN=BRl7qn;7P5zpSTUhpcoF?qAt
zs^oITBeqUk{@5Og;If~5pn3goKE8uXKeR=ac`)$S$Sri&SRvk7T|Ucb^54c|rMD#i
zYY52NEa!M581?CmM?1^>z3v)KnU{(2A0i-xH@j<0toSBxvqiFI>kZ|So-4{Orgc><
zS@+b%_uI&R5S-Q1#vj7<@bu-`55HF4+CF{Hy1e(lYTCX@e_yY^>5#NX3^3g=c)I$z
JtaD0e0sut00|Nj6

literal 0
HcmV?d00001

diff --git a/src/views/monitorRoom/icon/four_1.png b/src/views/monitorRoom/icon/four_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..2376ce1da1e2daf9a23765fd13174c78bde76429
GIT binary patch
literal 555
zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I1|(Ny7TyC=oCO|{#S9GGLLkg|>2BR01_s8v
zo-U3d6?5LsHq1NZAmC~rR<*;isJQ?LFYNBfEbz`t$a8qj<$h>yzd+uEI}CXY>IEj(
zB8mi$uJ*7tp7cCag!}im>eRI}ZbshTb|O24fsf%?$6-l_uw^@1{#3;!GcI8IAa(M&
z-)r4qk<D*cE<Gx*>}&FbD<N{(j$Ym~*)@z6Vg<L<8MqodJKS%vCO21@d+E%(p{k>H
zR4HMey5syxC5xG!HVn*st11}SWI{eN@K~&P#3)e^aFp5L!GbRKgaeME{0ADEwd5KY
z*+UTu7c$tfu+C~QoZ8@iekRim#vfuca)Ot|9(?S-qiT!bhlNhQ*QOtP@&8xpk^fI-
zPdLhd^7XmYEfYTZ>%A#?%{0U4pO6WP>67^%Ec}09uH;5Or_hZ03kTevDQvObTEg{5
zB*S~*;(`m7^X1*%>{GS+w_fNS-{co3EuWcAOK$#g(%U5W;w)*d2fhiL=9M0p5pnyU
zd7RpRp)bUG1L0rQhuueldhSU-ThuC2escHW>l4^C^yYbd(GhH4;<NkEiRveF9j-sW
pu4sOIrf9vo*p_RxGZ+0}y#79hGh^<*2w?0pc)I$ztaD0e0s!XK=J5ak

literal 0
HcmV?d00001

diff --git a/src/views/monitorRoom/icon/nine.png b/src/views/monitorRoom/icon/nine.png
new file mode 100644
index 0000000000000000000000000000000000000000..ae5fe60dcf164ec27fc33115929073e2dea828d5
GIT binary patch
literal 940
zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I1|(Ny7TyC=oCO|{#S9GGLLkg|>2BR01_tIh
zPZ!6KiaBqi9gA)mi2O~w(JtLGZ^0cPyjdL>mT{W*l;EbXs|=dIo#TDL_JqY$U1Lte
zx$t=_9!Kc?`sR{#adx60_ul_s-faBzU%dSD*-94|f0r-4e+rcriJm`ito3^HRJCVu
z0vCHa<ZN#8i@r-{{=VZ-t^S35&we`V%sXjks=J6+U?a=%<ip{WIfs%f-KzcHdA3$x
z`yjgS+%cb)UA;U1u*^~IUO(YutlsPv4PD^~;a%sAg&*H7-B;-A-_HL1JmY^w(T<(&
z+RGAu>{Bj(S+QrW;i9AAJ2Dkif5cDV>2PokP+?ZOARuzGfy0Ew)kuMf*Ks0Pcmt!l
z3R|p!TiQ21k7+I$GpkFU$b~a!+wo2i(_88^)y(qe#fk6MO}yj<be^=rHNlOlv)muV
z-K=7$_geb5=-a8e<(!6hJi2Rls?T`*D6XNpvE<J5>eFg>=K5Mb_~h}!E^M9ke>SIg
zpJs(fwF=)~{{2v`;e)V=WsN{*96c*-aAaD5z(sMz;|D{(9_8-Ze)GK3JMncK+Y7{-
zigq9EE9F<*a71ZOch8NsZGGm3#rdDlbbM{Qw0>!}(k!zxrne*J%`A*RyG?wPl3sUl
zaZ5S#%k+Jg@1M{9yv1(*&fOn&Sy+f2e{;e*DKA<~eERgpb)W5Rmc@QPyPst;qhJO{
zSBe9RRFjgVKx5ki4>p$tiW-wZ!d%G?(=VA`DE-%d+{LOkfqC9UDX-2ni#1zvCG0eG
z^}Cg2>sH3QuQ5#Wt~hQcEBA;aYN3he>c#Bt`}{1dj^DX&U0^P|U-?MNJ9(yir+*#`
z5$%JAzO!`9jig1{emPoiYdp6d+PL}4sk7;=xs@|ne2)oM)pgq#=U?4ral1u_)zs#+
zZRwPw>DyLnKiF1#%Kf&i-Y1_sS<iB_mTq~tf?IRR((GTsMf$ILuX;t!u4ZeUy>RMn
z8E%OMic0^|S(&`H%z0fgK~L_Ef8Vj=EV6MIA2FJJ&(`YxuJ&9WIr1^mMB?d3wR6PY
z%hqdN|6Uk%M`DAU)ob4qOjGO5ev>)cExUZ~q<zk+Pw!qmo}<&J`(&H_ytrc919Nsg
zlNZu{>z$f#?zZJIpS2Agb(}kQre8dEcGuE7*-BA=*yf$Nw?^-MY!op2F?hQAxvX<a
GXaWHLv!;9i

literal 0
HcmV?d00001

diff --git a/src/views/monitorRoom/icon/nine_1.png b/src/views/monitorRoom/icon/nine_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..8ebaeebb4a378a0234c0a4add41251b8f5874b05
GIT binary patch
literal 643
zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I1|(Ny7TyC=oCO|{#S9GGLLkg|>2BR01_mZm
zPZ!6KiaBp*9n3xCAmGY=y8M!(Mq>zrtV+53A<cbOqAfx-U(dF`k=5cTao}9SyyC#c
zh~}m#u}bfCW_Hdfcign~{{8x;u^;y?p8h?Lk-?OqC(**4A;OeZr$*VEUHDR6&jq(@
z3<0LBZ<v4SGT0dI3735QwDFkj^mXPB7boqpxp3oD`Qj3T<LSnGuS+^VnDg?$Yt1ds
zIky~-WSUst%evq|vxZm$6aS(J1}>Y9Bu0%73SAIEhQGQ`ia2`sW91K-Zta&ipw$>)
z{o$8@)4xd>{kzsN|FW0=d|fnsVQ$xloGI(B^L}OBf3fY9zz@BcfZuvf)t5y!yky>y
znj;wUz)^(Tp^-hXC~E2SiQ1YMvUYvBs}Z}tbM0r9plbiEJIbeP#{R!^qe#Sby5-x=
z-zO@aSW~hgpX>d;nBY>`wZ8l9_gPO_xBuI*3vSCKKR@+vNwX+>_TTIGzh~DOz~<^O
zu*$h?WDuzkILZ_NvkWYFkikw^g2QzCLAUVEZ&u5rW=40kSpB*zXdb5cXm{iJB~dop
z1a2nACvM#V^MBE2#wQ`M`VzYt=84^J%?qlQ-p&1HmeQZEvwlAOdO;-MapBLik$+`Q
zH|w*!db{)LS8b`U8IQkxKX~O{8fToG-WjJZ;k(zb%)9$XDgh}Zu?25g%)G30KaShn
w?$<Z+Kd31`u<@R8#}}WPG97n@75f-Ek2I`$e?e?NFjX;ly85}Sb4q9e09s)cM*si-

literal 0
HcmV?d00001

diff --git a/src/views/monitorRoom/icon/one.png b/src/views/monitorRoom/icon/one.png
new file mode 100644
index 0000000000000000000000000000000000000000..8a175ba95b8ab6467748cfba5cd015832bdcab36
GIT binary patch
literal 482
zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I1|(Ny7TyC=oCO|{#S9GGLLkg|>2BR01_s6{
zo-U3d6?5Ls-k96sAmVa7y3u<FUyW)E=k&=jDM8a82zi|3@bTjeZ+h7vbcgX;eC-nE
z=xxlmjStjcQd7ThcF$G4i~FUI3woatQ)duoaA)9`mx~a$Z3t)ZjeW4o$4)q4+s*>k
z2Mh}~f4%9QeaQUtn{0*;A>xrIVj8CJ-_@{6@58oFbLR(c+p+!AKEKH=IuDlZxtUp#
z^xrOZc7K_vr^i43%j@!Y?RhAx9q&=+#&?<DTJe7IHQS%L_jBK#sc$Xc>iuuhpWy2+
zkNq`X^I5Q8e{rL&-s^cD-%>dknIu=VFf{UnI5jx1X(>7=Fi#awn9%6OA#lP$m4zc^
zfe;gmQ2-~klqE4$$<MwidT*z{T}Z{fhtHy)+n8Q^6X7tq#;8Oi+J?L3m-wF733r!!
z8~BI(3V68eW8Y<#%${>~);77*pG2irynNi>wp?8QU2=`w0c(#4Gp5&17f%O98iS{+
KpUXO@geCy;6}r3t

literal 0
HcmV?d00001

diff --git a/src/views/monitorRoom/icon/one_1.png b/src/views/monitorRoom/icon/one_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..dcdaaf3017a90f8eb650724ac638190a3e6a6cac
GIT binary patch
literal 406
zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I1|(Ny7TyC=oCO|{#S9GGLLkg|>2BR01_nkC
zPZ!6KiaBp*Zwx#fAi#QkKjRAqs|Bnp7>Za^EK1pTun1}y8(XyVX)u;Ma0WC=blUfD
za(t|Q{NF5O%l1inyN_D*z1e)Hh;L1U^n;$q4}>e&el2{QTfZotaa#1X1Aiy-{1xYS
zHsAkX=6r_Jy3!A>o&7fd2IF++<L(cue}p<8_K!L6XY1x2)l&YA<qurmmlmw^imlM)
zv)`yydVBk+(v|<6H&2<?KHr0ZnO&1J;emoGBah4ym4?RVDJ%vB6DBdR@dXJTIN<2T
zBw^v<Ni{{9Ut88hdhK12Gj+P=fo1ciZS#n4%iAXzV{Y;1@r938`Ue*-o-g-eF5j_r
j_q?A~?0WmT@&UJro=seY=vp&iKr?u{`njxgN@xNAxxbm1

literal 0
HcmV?d00001

diff --git a/src/views/monitorRoom/icon/six.png b/src/views/monitorRoom/icon/six.png
new file mode 100644
index 0000000000000000000000000000000000000000..f365d79ea3459dea836ba8c3bbcbe9160ad3d028
GIT binary patch
literal 1304
zcmV+z1?T#SP)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF00009a7bBm000XT
z000XT0n*)m`~Uz1%1J~)RCt{2TS0c4Fc6*ic^__2ZV>kbaZgb8EJ`+I8FGRoCkS1#
z3VpAv>zp9ILFo;g8;}#YZ`3baQNSA6euXsrm7Xj{GXomWe1?;+Kh`rM%8BTlWcW@*
zSrJpCSEm*E$auo_3v)89=!WNs=yV?$X+;5a_~K*7lt^vN27D}Hs&`$HR+JFYJ&{_M
z8$Yokc@fjxwQE|bH4AoH5!1?;yJn?|SnaXvdNy=PL?w|LYh*C~qKMURE*Y$UJ|Uvd
zL^O99&w$`>=EhLIDdHCn*(GBM2ZqKp%Xn}ZkLw$(x1SWAyK)(C$l!J11QSl<4K%_z
zUx;-ukDmn}I}|2IQ2b3}bie>~=oO;_2B1T)7#%PG9eM>j;0YO?6f<kxs%6d>UNVq+
z+u+>5+m0#H%6kZPB{VZ+j+-2u)7iA5I<3^4BoPT9$6TvY>9kVWq$H`zP!E_`z>Ywm
z2d}y0)O!M9SHg|!j$Au}BPHN{W@a{rvE&A5<VbxtfKC^}o6x}K>}0)O3-|m#@$Q4*
zR1Z+qxzKbKPB?p#K(^9laEpx4suK5+A+du|^U-5MBtmJ}AR6yNh&7Q#h$J|dlJmz-
zDvMaf9#iogQCt$h&WPx?h!vNiuMZK2BtbC5x@3wVxB@5O3_^(ZiA9LyQcgif>9kT#
zsA>DR#y27q>cBVbnw@5>&tQ~O4}(;>(J>&CYz&l8*2JllQ@}n8O9m^nkm>;9<hOO?
zc$^4{9Zjm7?Gpr#L4F*AR5?h7cJ{mf7Z@Ed03CY8=zsy}&?`m<3_yoop&bx-C=s=#
zn#isWkzprSoxon_mW&#lf=CZ!lTT(Xu&`=@uEJ!7dVXaH%VB`4mLToyB7RvoF{y%~
zB$)}3Id19+6hV(5N?dwu>IuaMppb~HC!y&mD(beB75Ti#`*=V23LceQYgOt|O>Sh2
zgvbDN=oN|(@p*jP$Or_U#6w2eA|v!*bsNZdaTIZcq{oQuC^-n;pgG||KqN#69-qu}
zi~tr|9KkLbp&3YFe2w6>aEtiMVVHq5t(4rKLOV1od^?55oShl8jrL32DKn6rNjgj{
z8FT#m5XQcw%#s~vJV}Yv4%*(dM8^PUR|Rcr=&UW$?m>u{GD1&6q;Bal38Z$=mPQ|g
z;OKw>=+G-h2Mj=mUNJgg06O%FeH`FZ_xs53m3xp3%^PS3h=>H#3}pu)B1%H=9`Vx3
zBzb%(?NmY98(3vE@1F_n(67eG_vNT=VwhWmh;E{m;#JBD2TD7=kI^mu%ywu(MEYvG
z^Y!>!#Yl(@K!;v2-Gj_n*-cWOWCmkt^Mama26d1si4P~pGA0NdcR~lu(28aoyF{5R
z0SDbjI87@ag3*;y<C)!+W&~nMEDK<BKE<Za&rFPsbb~}mFX=RChe#VC5~1P2hY<N?
zO-G)Dh-&qjpu0m%B(!|16M!l|gb?xV5NX@XixAPd%)1YQqXPz@L$4SeFaRBT#pr+m
z=+G;a13JFI=tA4t(6d3JO@_}GBVBuWf4MTjyR@am2}n2Z%rq1^eE=B}GNQD<I>Gp}
zgj6xejA!d7mT@N`RgC&)b*#_lISpkQ9|YI4;@srC>GXz-fB*SBQT7Khy!Yp3Qd7qO
O0000<MNUMnLSTZeZA|U}

literal 0
HcmV?d00001

diff --git a/src/views/monitorRoom/icon/six_1.png b/src/views/monitorRoom/icon/six_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..f872ccd827160e222476ffd0b74f16aa33c0be1e
GIT binary patch
literal 615
zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I1|(Ny7TyC=oCO|{#S9GGLLkg|>2BR01_mZc
zPZ!6KiaBp*9n3xCAmYNVU4F^YOF{KQJAZ-Kx_1nh8N=^4O}P`yq#M8_+rlNI8|8Z9
zS6Nw3_y2?SeXHMpd?OR~Y~$wb=YNSFU_2o6|20QK<kKHJ=hggo;!K$Qq2_|5L*&yN
zrZ)4E`;Ioq^tfLzQ#R|*s1dl<edM{|{ZOvgJ|DJ$gw>SI>i>RP7Qvr6kMo|{`6`8E
z`3jRtMmD1rr??F!IEKbGH1e$a#Pld#b@5(<Y9-qxmDik4DXuMjDZv#Xr21yHOm^a4
z1v7zXD*dJp6`yrvuT+hx^FQ-ym*1RvpP!Nm3eBt3;tvRO3NoFE2)Ep~UR+r~Q>b2y
zy?@cEj~731u;0j2n6Yr7mzz^dCC|-}SI>6aoDw|1!yCFuPT-+ygfw%9$G%u8<_;aT
zdbSEoM=jS>?v&jim&_pea_-&+56_$jS3cP*aJ#7V7p-V#o+$Up_<#djsP8@ov5pRt
zu!m*sF9d6uG9s5&ZE#2tjlXbZZGL%&+>vL7EFB*D7k1oLJi9#a-}&TE=?&r_hwouv
zmJE5yDsf_gmi~g{yn>l=hn<robV3&9cgQ@h3EuwAqP$^d$d1PjDksi^l$!ozGHLL*
z9cnF=c1K%4(Dv7X9z&Zg4INJ$4+9xkec-lBv1on3(;x>1K@k^$YwrbDF&y|N{$T2k
V3kwAr3V<nx!PC{xWt~$(6981C`kMd%

literal 0
HcmV?d00001

diff --git a/src/views/monitorRoom/index.vue b/src/views/monitorRoom/index.vue
new file mode 100644
index 0000000..4def8ea
--- /dev/null
+++ b/src/views/monitorRoom/index.vue
@@ -0,0 +1,607 @@
+<template>
+  <div class="system-monitor-list wh100">
+    <div class="main">
+      <div class="app-container">
+        <!-- 左边视频窗口 -->
+        <div class="left" id="divPlugin">
+          <div class="hello-ezuikit-js" ref="videoBoxRef" v-loading="loading">
+            <!-- 最多16格 -->
+            <div
+              v-for="item in param.pageSize"
+              v-show="param.pageSize == 1 || param.pageSize == 4 || param.pageSize == 9"
+              :key="item"
+              :class="param.pageSize == 1 ? 'width' : param.pageSize == 4 ? 'width2' : 'width3'"
+              :id="'video-container-parent' + item"
+            >
+              <div :id="'video-container' + item"></div>
+            </div>
+          </div>
+        </div>
+        <img v-if="!tableData.data.length && !loading" src="./icon/em.png" alt="" class="image_position" />
+        <!-- 右边操作区 -->
+        <div class="right">
+          <el-table v-loading="loading" :data="tableData.data" @row-click="handleRowClick">
+            <el-table-column label="序号" align="center" type="index" :index="indexMethod" width="60" />
+            <el-table-column label="摄像头名称" align="center" prop="deviceName" min-width="100px" show-overflow-tooltip />
+            <!-- <el-table-column label="操作" align="center" class-name="small-padding" fixed="right">
+							<template #default="scope">
+								<el-switch v-model="scope.row.status" />
+							</template>
+						</el-table-column> -->
+          </el-table>
+        </div>
+      </div>
+      <!-- 底部切屏按钮 -->
+      <div class="btm-btns">
+        <div class="left">
+          <div style="width: 15%">
+            <div @click="changePage(1)">
+              <img class="rect" v-if="param.pageSize == 1" src="./icon/one_1.png" alt="" />
+              <img class="rect" v-else src="./icon/one.png" alt="" />
+            </div>
+            <div @click="changePage(4)">
+              <img class="rect" v-if="param.pageSize == 4" src="./icon/four_1.png" alt="" />
+              <img class="rect" v-else src="./icon/four.png" alt="" />
+            </div>
+            <div @click="changePage(9)">
+              <img class="rect" v-if="param.pageSize == 9" src="./icon/nine_1.png" alt="" />
+              <img class="rect" v-else src="./icon/nine.png" alt="" />
+            </div>
+            <!-- <div @click="select = 4">
+							<img class="rect" v-if="param.pageSize == 4" src="./icon/six_1.png" alt="" />
+							<img class="rect" v-else src="./icon/six.png" alt="" />
+						</div> -->
+          </div>
+          <div>
+            <el-pagination
+              background
+              v-show="tableData.total > 0"
+              layout="total, prev, pager, next"
+              :total="tableData.total"
+              :page-sizes="[1, 4, 9]"
+              v-model:current-page="param.pageNum"
+              v-model:page-size="param.pageSize"
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+            />
+          </div>
+        </div>
+        <div class="right"></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { getCameraListByProjectId, getAccessToken } from '@/api/other/ys7Device';
+import EZUIKit from 'ezuikit-js';
+import { useUserStoreHook } from '@/store/modules/user';
+
+const { proxy } = getCurrentInstance() as any;
+const loading = ref(false);
+const videoBoxRef = ref<HTMLElement>();
+// 获取用户 store
+const userStore = useUserStoreHook();
+// 从 store 中获取项目列表和当前选中的项目
+const currentProject = computed(() => userStore.selectedProject);
+const tableData = ref({
+  data: [] as any[],
+  total: 0,
+  param: {
+    pageNum: 1,
+    pageSize: 4,
+    projectId: currentProject.value.id
+  }
+});
+
+const param = ref({
+  pageNum: 1,
+  pageSize: 4
+});
+
+const cameraList = ref<any[][]>([]);
+const accessToken = ref('');
+const templateType = ref<'standard' | 'pcLive'>('pcLive');
+const pageSizes = ref([1, 4, 9]);
+
+const changePage = (num: number) => {
+  param.value.pageNum = 1;
+  param.value.pageSize = num;
+  reRender();
+};
+
+const handleSizeChange = (val: number) => {
+  param.value.pageSize = val;
+  reRender();
+};
+
+const handleCurrentChange = (val: number) => {
+  param.value.pageNum = val;
+  reRender();
+};
+
+const getDeviceToken = async () => {
+  const res: any = await getAccessToken();
+  if (res.code === 200) {
+    accessToken.value = res.data;
+  }
+};
+
+const getCameraList = async () => {
+  loading.value = true;
+  await clearDom();
+  const res: any = await getCameraListByProjectId({
+    pageNum: 1,
+    pageSize: 10,
+    projectId: currentProject.value.id
+  });
+
+  let list = res.rows?.list ?? [];
+  tableData.value.data = res.rows;
+  tableData.value.total = res.rows?.total ?? 0;
+
+  cameraList.value = groupArr(tableData.value.data, param.value.pageSize);
+  console.log(cameraList.value, tableData.value.data);
+
+  if (cameraList.value.length) {
+    cameraList.value[param.value.pageNum - 1].forEach((item, index) => {
+      StructureEZUIKitPlayer(`ezopen://open.ys7.com/${item.deviceSerial}/1.hd.live`, item, index);
+    });
+  }
+
+  loading.value = false;
+};
+
+const clearDom = async () => {
+  tableData.value.data.forEach((item) => {
+    if (item.player) {
+      item.player.destroy().then((data: any) => {
+        console.log('clearDom destroy', data);
+      });
+      item.player = null;
+    }
+  });
+
+  for (let index = 0; index < param.value.pageSize; index++) {
+    let parentElement: HTMLElement | null = null;
+
+    if (templateType.value === 'standard') {
+      parentElement = document.getElementById(`video-container${index + 1}`);
+    } else if (templateType.value === 'pcLive') {
+      parentElement = document.getElementById(`video-container-parent${index + 1}`);
+    }
+
+    const child = document.createElement('div');
+    child.setAttribute('id', `video-container${index + 1}`);
+
+    if (parentElement) {
+      while (parentElement.firstChild) {
+        parentElement.removeChild(parentElement.firstChild);
+      }
+      if (templateType.value === 'pcLive') {
+        parentElement.appendChild(child);
+      }
+    }
+  }
+};
+
+const StructureEZUIKitPlayer = (url: string, item: any, index: number) => {
+  item.player = new EZUIKit.EZUIKitPlayer({
+    audio: '0',
+    id: `video-container${index + 1}`,
+    accessToken: accessToken.value,
+    url,
+    template: templateType.value,
+    width: (videoBoxRef.value?.children[0] as HTMLElement | undefined)?.offsetWidth,
+    height: (videoBoxRef.value?.children[0] as HTMLElement | undefined)?.offsetHeight,
+    plugin: ['talk']
+  });
+};
+
+const indexMethod = (index: number) => {
+  const pageNum = tableData.value.param.pageNum - 1;
+  return index + 1 + (pageNum > 0 ? pageNum * tableData.value.param.pageSize : 0);
+};
+
+const groupArr = (array: any[], subGroupLength: number) => {
+  const newArray: any[][] = [];
+  for (let i = 0; i < array.length; i += subGroupLength) {
+    newArray.push(array.slice(i, i + subGroupLength));
+  }
+  return newArray;
+};
+
+const reRender = async () => {
+  await clearDom();
+  cameraList.value = groupArr(tableData.value.data, param.value.pageSize);
+  if (cameraList.value.length) {
+    cameraList.value[param.value.pageNum - 1].forEach((item, index) => {
+      StructureEZUIKitPlayer(`ezopen://open.ys7.com/${item.deviceSerial}/1.hd.live`, item, index);
+    });
+  }
+};
+
+const handleRowClick = async (row: any) => {
+  if (param.value.pageSize === 1) {
+    for (let i = 0; i < tableData.value.data.length; i++) {
+      if (tableData.value.data[i].id === row.id) {
+        param.value.pageNum = i + 1;
+        break;
+      }
+    }
+    await reRender();
+  }
+};
+
+onMounted(async () => {
+  await getDeviceToken();
+  await getCameraList();
+});
+
+onBeforeUnmount(() => {
+  tableData.value.data.forEach((item) => {
+    if (item.player) {
+      item.player.destroy().then((data: any) => {
+        console.log('player destroyed', data);
+      });
+      item.player = null;
+    }
+  });
+});
+
+//监听项目id刷新数据
+const listeningProject = watch(
+  () => currentProject.value.id,
+  (nid, oid) => {
+    // queryParams.value.projectId = nid;
+    // form.value.projectId = nid;
+    // resetMatrix();
+    // getList();
+  }
+);
+
+onUnmounted(() => {
+  listeningProject();
+});
+</script>
+
+<style lang="scss" scoped>
+.wh100 {
+  width: 100% !important;
+  height: 87.5vh !important;
+}
+.system-monitor-list {
+  .main {
+    width: 100%;
+    height: 100%;
+    .app-container {
+      width: 100%;
+      height: 95%;
+      left: 0;
+      // background-color: rgb(116, 228, 24);
+      margin: 0rem auto;
+      position: relative;
+      top: 0;
+      overflow: hidden;
+      display: flex;
+      flex-direction: row;
+      .image_position {
+        position: absolute;
+        top: 30%;
+        left: 40%;
+        transform: translateX(-40%);
+      }
+      .left {
+        overflow: hidden;
+        width: 85%;
+        // border: 0.125rem solid rgb(226, 181, 33);
+        height: 100%;
+        // position: absolute;
+        // left: 0;
+        // top: 0rem;
+        .title {
+          position: absolute;
+          top: 1rem;
+          left: 0.75rem;
+          font-size: 1rem;
+          font-weight: 600;
+          color: #000;
+        }
+        .time {
+          position: absolute;
+          top: 1rem;
+          right: 1.25rem;
+          font-size: 1rem;
+          font-weight: 600;
+          color: #000;
+        }
+      }
+      .left1 {
+        width: 85%;
+        border: 0.125rem solid rgb(37, 43, 102);
+        height: 100%;
+        top: 0rem;
+
+        position: absolute;
+        left: 0;
+        overflow: hidden;
+      }
+      .left2 {
+        top: 0rem;
+        width: 85%;
+        border: 0.125rem solid rgb(37, 43, 102);
+        height: 100%;
+        position: absolute;
+        overflow: hidden;
+        left: 0;
+      }
+      .right {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        background: rgb(255, 255, 255);
+        width: 15%;
+        height: 100%;
+        // top: 0;
+
+        // // border: .0625rem solid rgb(22, 21, 27);
+        // position: absolute;
+        // right: 0;
+        .right1 {
+          width: 100%;
+          text-align: start;
+          line-height: 2.5rem;
+          color: #6e727a;
+          margin: 0.3125rem auto;
+          height: 2.5rem;
+          padding: 0 1.25rem;
+          cursor: pointer;
+        }
+        .right1:hover {
+          background: #1393fc;
+          color: rgb(255, 255, 255);
+          border: none;
+        }
+        .right2 {
+          width: 100%;
+          padding: 0 1.25rem;
+          height: 2.5rem;
+          margin: 0.3125rem auto;
+          line-height: 2.5rem;
+          background: #1393fc;
+          color: rgb(255, 255, 255);
+          cursor: pointer;
+        }
+      }
+    }
+    .btm-btns {
+      width: 100%;
+      height: 5%;
+      background: #fff;
+      display: flex;
+      justify-content: space-between;
+      .left {
+        width: 90%;
+        display: flex;
+        justify-content: space-between;
+        > div {
+          height: 100%;
+          display: flex;
+          flex-direction: row;
+          align-content: center;
+          align-items: center;
+          justify-content: space-around;
+          background: #fff;
+          padding-left: 1.35rem;
+          > div {
+            cursor: pointer;
+          }
+        }
+      }
+      .right {
+        width: 10%;
+      }
+    }
+  }
+
+  .hello-ezuikit-js {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    overflow: hidden;
+    justify-content: space-between;
+    align-content: space-between;
+    background: #f5f5f5;
+  }
+
+  .width {
+    width: 100%;
+    height: 100%;
+  }
+
+  .width2 {
+    width: 49.5%;
+    height: 49%;
+  }
+
+  .width3 {
+    width: 33%;
+    height: 32.6%;
+  }
+
+  .width4 {
+    width: 25%;
+    height: 25%;
+  }
+
+  .video-active {
+    // border: 0.125rem solid rgb(255, 133, 62) !important;
+  }
+
+  .rect {
+    width: 1.625rem;
+    height: 1.625rem;
+  }
+
+  .video-cover {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 12px;
+    color: rgb(153, 0, 0);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 5;
+    border-top: 0.0313rem solid #fff;
+    border-right: 0.0313rem solid #fff;
+  }
+
+  :deep(.el-dialog__wrapper) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  :deep(.el-dialog__header) {
+    background: #efefef;
+  }
+
+  :deep(.el-dialog) {
+    width: 36rem;
+  }
+
+  :deep(.el-dialog__body) {
+    padding-top: 3.75rem;
+    display: flex;
+    justify-content: center;
+  }
+
+  :deep(.el-form) {
+    width: 28.125rem;
+  }
+
+  :deep(.el-form-item__label) {
+    width: 6.875rem !important;
+  }
+
+  :deep(.el-input) {
+    width: 20rem;
+  }
+
+  .tabs {
+    width: 100%;
+    height: 2.4375rem;
+    display: flex;
+    position: absolute;
+    top: 3.375rem;
+    left: 0;
+    border-top: 1px solid #f5f5f5;
+
+    .tab-item {
+      width: 50%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .tab-active {
+      background: #f5f5f5;
+      color: #fff;
+    }
+  }
+
+  .wheel {
+    position: relative;
+    width: 9.375rem;
+    height: 9.375rem;
+    border-radius: 50%;
+    background: rgb(77, 77, 77);
+
+    .camera {
+      position: absolute;
+      left: 3.75rem;
+      top: 3.75rem;
+      z-index: 5;
+      width: 1.875rem;
+      height: 1.875rem;
+      text-align: center;
+      line-height: 1.875rem;
+      font-size: 1.25rem;
+      color: #fff;
+      cursor: pointer;
+    }
+
+    .top {
+      height: 33.3%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .center {
+      height: 33.3%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .center-left,
+      .center-right {
+        width: 33.3%;
+        display: flex;
+        justify-content: center;
+      }
+    }
+    .bottom {
+      height: 33.3%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .triangle {
+      width: 0;
+      height: 0;
+      border: 0.625rem solid transparent;
+      cursor: pointer;
+    }
+
+    .triangle-top {
+      border-bottom: 0.9375rem solid #fff;
+    }
+
+    .triangle-bottom {
+      border-top: 0.9375rem solid #fff;
+    }
+
+    .triangle-left {
+      border-right: 0.9375rem solid #fff;
+    }
+
+    .triangle-right {
+      border-left: 0.9375rem solid #fff;
+    }
+  }
+
+  .bg-black {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #000;
+    color: rgb(151, 0, 0);
+    font-size: 12px;
+  }
+
+  :deep(.el-button) {
+    background: rgb(77, 77, 77);
+    border-color: rgb(77, 77, 77);
+  }
+
+  :deep(.el-button.right-btn) {
+    width: 11.25rem;
+    margin: 0 auto 0.625rem;
+  }
+}
+</style>
diff --git a/src/views/other/ys7DeviceImg/index.vue b/src/views/other/ys7DeviceImg/index.vue
new file mode 100644
index 0000000..3c4c292
--- /dev/null
+++ b/src/views/other/ys7DeviceImg/index.vue
@@ -0,0 +1,202 @@
+<template>
+  <div class="p-2">
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div v-show="showSearch" class="mb-[10px]">
+        <el-card shadow="hover">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+            <el-form-item label="摄像头名称" prop="deviceName" :label-width="100">
+              <el-input v-model="queryParams.deviceName" placeholder="请输入摄像头名称" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="拍摄时间" prop="createTime">
+              <el-date-picker clearable v-model="queryParams.createTime" type="date" value-format="YYYY-MM-DD" placeholder="请选择拍摄时间" />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </div>
+    </transition>
+
+    <el-card shadow="never">
+      <template #header>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['other:ys7DeviceImg:remove']"
+              >删除</el-button
+            >
+          </el-col>
+          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+      </template>
+
+      <el-table v-loading="loading" :data="ys7DeviceImgList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="设备序列号" align="center" prop="deviceSerial" />
+        <el-table-column label="摄像头名称" align="center" prop="deviceName" />
+        <el-table-column label="图片地址" align="center" prop="url">
+          <template #default="scope">
+            <el-image :z-index="9999" :preview-src-list="[scope.row.url]" preview-teleported :src="scope.row.url" class="w20" />
+          </template>
+        </el-table-column>
+        <el-table-column label="拍摄时间" align="center" prop="createTime" />
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['other:ys7DeviceImg:remove']">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+    </el-card>
+  </div>
+</template>
+
+<script setup name="Ys7DeviceImg" lang="ts">
+import { listYs7DeviceImg, getYs7DeviceImg, delYs7DeviceImg, addYs7DeviceImg, updateYs7DeviceImg } from '@/api/other/ys7DeviceImg';
+import { Ys7DeviceImgVO, Ys7DeviceImgQuery, Ys7DeviceImgForm } from '@/api/other/ys7DeviceImg/types';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const ys7DeviceImgList = ref<Ys7DeviceImgVO[]>([]);
+const buttonLoading = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref<Array<string | number>>([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+
+const queryFormRef = ref<ElFormInstance>();
+const ys7DeviceImgFormRef = ref<ElFormInstance>();
+
+const dialog = reactive<DialogOption>({
+  visible: false,
+  title: ''
+});
+
+const initFormData: Ys7DeviceImgForm = {
+  id: undefined,
+  deviceId: undefined,
+  deviceSerial: undefined,
+  deviceName: undefined,
+  url: undefined
+};
+const data = reactive<PageData<Ys7DeviceImgForm, Ys7DeviceImgQuery>>({
+  form: { ...initFormData },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    deviceSerial: undefined,
+    deviceName: undefined,
+    params: {}
+  },
+  rules: {
+    id: [{ required: true, message: '主键id不能为空', trigger: 'blur' }],
+    deviceId: [{ required: true, message: '设备id不能为空', trigger: 'blur' }],
+    deviceSerial: [{ required: true, message: '设备序列号不能为空', trigger: 'blur' }],
+    url: [{ required: true, message: '图片地址不能为空', trigger: 'blur' }]
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询萤石摄像头图片列表 */
+const getList = async () => {
+  loading.value = true;
+  const res = await listYs7DeviceImg(queryParams.value);
+  ys7DeviceImgList.value = res.rows;
+  total.value = res.total;
+  loading.value = false;
+};
+
+/** 取消按钮 */
+const cancel = () => {
+  reset();
+  dialog.visible = false;
+};
+
+/** 表单重置 */
+const reset = () => {
+  form.value = { ...initFormData };
+  ys7DeviceImgFormRef.value?.resetFields();
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  handleQuery();
+};
+
+/** 多选框选中数据 */
+const handleSelectionChange = (selection: Ys7DeviceImgVO[]) => {
+  ids.value = selection.map((item) => item.id);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+};
+
+/** 新增按钮操作 */
+const handleAdd = () => {
+  reset();
+  dialog.visible = true;
+  dialog.title = '添加萤石摄像头图片';
+};
+
+/** 修改按钮操作 */
+const handleUpdate = async (row?: Ys7DeviceImgVO) => {
+  reset();
+  const _id = row?.id || ids.value[0];
+  const res = await getYs7DeviceImg(_id);
+  Object.assign(form.value, res.data);
+  dialog.visible = true;
+  dialog.title = '修改萤石摄像头图片';
+};
+
+/** 提交按钮 */
+const submitForm = () => {
+  ys7DeviceImgFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      buttonLoading.value = true;
+      if (form.value.id) {
+        await updateYs7DeviceImg(form.value).finally(() => (buttonLoading.value = false));
+      } else {
+        await addYs7DeviceImg(form.value).finally(() => (buttonLoading.value = false));
+      }
+      proxy?.$modal.msgSuccess('操作成功');
+      dialog.visible = false;
+      await getList();
+    }
+  });
+};
+
+/** 删除按钮操作 */
+const handleDelete = async (row?: Ys7DeviceImgVO) => {
+  const _ids = row?.id || ids.value;
+  await proxy?.$modal.confirm('是否确认删除萤石摄像头图片编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
+  await delYs7DeviceImg(_ids);
+  proxy?.$modal.msgSuccess('删除成功');
+  await getList();
+};
+
+/** 导出按钮操作 */
+const handleExport = () => {
+  proxy?.download(
+    'other/ys7DeviceImg/export',
+    {
+      ...queryParams.value
+    },
+    `ys7DeviceImg_${new Date().getTime()}.xlsx`
+  );
+};
+
+onMounted(() => {
+  getList();
+});
+</script>