监控室，摄像头工作列表
This commit is contained in:
@ -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
|
||||
});
|
||||
};
|
||||
|
||||
@ -129,3 +129,12 @@ export interface Ys7DeviceQuery extends PageQuery {
|
||||
*/
|
||||
params?: any;
|
||||
}
|
||||
|
||||
export interface CameraListForm {
|
||||
/**
|
||||
* 项目id
|
||||
*/
|
||||
projectId: string | number;
|
||||
pageSize?: number;
|
||||
pageNum?: number;
|
||||
}
|
||||
|
||||
63
src/api/other/ys7DeviceImg/index.ts
Normal file
63
src/api/other/ys7DeviceImg/index.ts
Normal file
@ -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'
|
||||
});
|
||||
};
|
||||
76
src/api/other/ys7DeviceImg/types.ts
Normal file
76
src/api/other/ys7DeviceImg/types.ts
Normal file
@ -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;
|
||||
}
|
||||
@ -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'
|
||||
});
|
||||
};
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -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/';
|
||||
|
||||
@ -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,
|
||||
// })
|
||||
// );
|
||||
// }
|
||||
// }
|
||||
BIN
src/views/monitorRoom/icon/em.png
Normal file
BIN
src/views/monitorRoom/icon/em.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
src/views/monitorRoom/icon/four.png
Normal file
BIN
src/views/monitorRoom/icon/four.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 613 B |
BIN
src/views/monitorRoom/icon/four_1.png
Normal file
BIN
src/views/monitorRoom/icon/four_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 555 B |
BIN
src/views/monitorRoom/icon/nine.png
Normal file
BIN
src/views/monitorRoom/icon/nine.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 940 B |
BIN
src/views/monitorRoom/icon/nine_1.png
Normal file
BIN
src/views/monitorRoom/icon/nine_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 643 B |
BIN
src/views/monitorRoom/icon/one.png
Normal file
BIN
src/views/monitorRoom/icon/one.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 482 B |
BIN
src/views/monitorRoom/icon/one_1.png
Normal file
BIN
src/views/monitorRoom/icon/one_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 406 B |
BIN
src/views/monitorRoom/icon/six.png
Normal file
BIN
src/views/monitorRoom/icon/six.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src/views/monitorRoom/icon/six_1.png
Normal file
BIN
src/views/monitorRoom/icon/six_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 615 B |
607
src/views/monitorRoom/index.vue
Normal file
607
src/views/monitorRoom/index.vue
Normal file
@ -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>
|
||||
202
src/views/other/ys7DeviceImg/index.vue
Normal file
202
src/views/other/ys7DeviceImg/index.vue
Normal file
@ -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>
|
||||
Reference in New Issue
Block a user