taoge_xiaodi/td_official
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

萤石摄像头

Browse Source
This commit is contained in:
Teo
2025-06-17 09:49:15 +08:00
parent f122dc30d2
commit 0ff1e74157
17 changed files with 1614 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/api/other/ys7Device/index.ts Normal file
View File

@ -0,0 +1,80 @@
import request from '@/utils/request';
import { AxiosPromise } from 'axios';
import { Ys7DeviceVO, Ys7DeviceForm, Ys7DeviceQuery } from '@/api/other/ys7Device/types';
/**
* 查询萤石摄像头列表
* @param query
* @returns {*}
*/
export const listYs7Device = (query?: Ys7DeviceQuery): AxiosPromise<Ys7DeviceVO[]> => {
return request({
url: '/other/ys7Device/list',
method: 'get',
params: query
});
};
/**
* 查询萤石摄像头详细
* @param id
*/
export const getYs7Device = (id: string | number): AxiosPromise<Ys7DeviceVO> => {
return request({
url: '/other/ys7Device/' + id,
method: 'get'
});
};
/**
* 新增萤石摄像头
* @param data
*/
export const addYs7Device = (data: Ys7DeviceForm) => {
return request({
url: '/other/ys7Device',
method: 'post',
data: data
});
};
/**
* 修改萤石摄像头
* @param data
*/
export const updateYs7Device = (data: Ys7DeviceForm) => {
return request({
url: '/other/ys7Device',
method: 'put',
data: data
});
};
/**
* 删除萤石摄像头
* @param id
*/
export const delYs7Device = (id: string | number | Array<string | number>) => {
return request({
url: '/other/ys7Device/' + id,
method: 'delete'
});
};
/// 修改加密状态
export const toggleEncrypt = (data?: any): AxiosPromise<{}> => {
return request({
url: '/other/ys7Device/video/encrypted',
method: 'put',
data
});
};
export const devicesLinkPro = (data: { id: string | number; projectId: string | number }): AxiosPromise<Ys7DeviceVO> => {
return request({
url: '/other/ys7Device/with/project',
method: 'put',
data
});
};

131
src/api/other/ys7Device/types.ts Normal file
View File

@ -0,0 +1,131 @@
export interface Ys7DeviceVO {
id: any;
/**
* 项目id
*/
projectId: string | number;
/**
* 设备序列号
*/
deviceSerial: string;
/**
* 设备名称
*/
deviceName: string;
/**
* 设备型号
*/
deviceType: string;
/**
* 设备在线状态(0离线 1在线)
*/
status: number;
/**
* 固件版本号
*/
deviceVersion: string;
/**
* 设备添加时间
*/
deviceCreateTime: string;
/**
* 视频加密(0关闭 1开启)
*/
videoEncrypted: string | number;
/**
* 备注
*/
remark: string;
}
export interface Ys7DeviceForm extends BaseEntity {
/**
* 主键id
*/
id?: string | number;
/**
* 项目id
*/
projectId?: string | number;
/**
* 设备序列号
*/
deviceSerial?: string;
/**
* 设备名称
*/
deviceName?: string;
/**
* 设备型号
*/
deviceType?: string;
/**
* 设备在线状态(0离线 1在线)
*/
status?: number;
/**
* 固件版本号
*/
deviceVersion?: string;
/**
* 视频加密(0关闭 1开启)
*/
videoEncrypted?: string | number;
/**
* 备注
*/
remark?: string;
}
export interface Ys7DeviceQuery extends PageQuery {
/**
* 项目id
*/
projectId?: string | number;
/**
* 设备序列号
*/
deviceSerial?: string;
/**
* 设备名称
*/
deviceName?: string;
/**
* 设备型号
*/
deviceType?: string;
/**
* 设备在线状态(0离线 1在线)
*/
status?: number;
/**
* 固件版本号
*/
deviceVersion?: string;
/**
* 日期范围参数
*/
params?: any;
}

40
src/api/progress/plan/index.ts
View File

@ -1,6 +1,17 @@
import request from '@/utils/request';
import { AxiosPromise } from 'axios';
import { ProgressCategoryVO, ProgressCategoryForm, ProgressCategoryQuery, ProgressPlanForm, lastTimeVo, workScheduleListVO, workScheduleListQuery, progressPlanDetailForm, pvModuleListQuery, pvModuleListVO } from '@/api/progress/plan/types';
import {
ProgressCategoryVO,
ProgressCategoryForm,
ProgressCategoryQuery,
ProgressPlanForm,
lastTimeVo,
workScheduleListVO,
workScheduleListQuery,
progressPlanDetailForm,
pvModuleListQuery,
pvModuleListVO
} from '@/api/progress/plan/types';
/**
* 查询进度类别列表
@ -68,9 +79,8 @@ export const delProgressCategory = (id: string | number | Array<string | number>
*/
export const getProjectSquare = (projectId: string) => {
return request({
url: '/facility/matrix/list',
method: 'get',
params: {projectId}
url: '/project/project/list/sub/matrix/' + projectId,
method: 'get'
});
};
@ -78,7 +88,7 @@ export const getProjectSquare = (projectId: string) => {
* 获取进度类别最后一次进度信息
* @param id
*/
export const lastTime = (id: string | number ):AxiosPromise<lastTimeVo> => {
export const lastTime = (id: string | number): AxiosPromise<lastTimeVo> => {
return request({
url: '/progress/progressCategory/lastTime/' + id,
method: 'get'
@ -101,7 +111,7 @@ export const workScheduleAddPlan = (data: ProgressPlanForm) => {
* 获取进度计划详细信息
* @param params
*/
export const workScheduleList = (query: workScheduleListQuery):AxiosPromise<workScheduleListVO[]> => {
export const workScheduleList = (query: workScheduleListQuery): AxiosPromise<workScheduleListVO[]> => {
return request({
url: '/progress/progressPlan/list',
method: 'get',
@ -113,10 +123,10 @@ export const workScheduleList = (query: workScheduleListQuery):AxiosPromise<work
* 获取进度类别坐标信息
* @param params
*/
export const workScheduleListPosition = (id: string):AxiosPromise<any> => {
export const workScheduleListPosition = (id: string): AxiosPromise<any> => {
return request({
url: '/progress/progressCategory/coordinate/' + id,
method: 'get',
method: 'get'
});
};
@ -136,11 +146,11 @@ export const workScheduleSubmit = (data: progressPlanDetailForm) => {
* 获取进度计划详情未完成设施详细信息
* @param params
*/
export const pvModuleList = (query: pvModuleListQuery):AxiosPromise<pvModuleListVO[]> => {
export const pvModuleList = (query: pvModuleListQuery): AxiosPromise<pvModuleListVO[]> => {
return request({
url: '/progress/progressPlanDetail/detail/unFinish/' + query.id ,
url: '/progress/progressPlanDetail/detail/unFinish/' + query.id,
method: 'get',
params:query
params: query
});
};
@ -160,9 +170,9 @@ export const addDaily = (data: progressPlanDetailForm) => {
* 获取进度计划详情已完成设施详细信息
* @param params
*/
export const getDailyBook = (query: pvModuleListQuery):AxiosPromise<pvModuleListVO[]> => {
export const getDailyBook = (query: pvModuleListQuery): AxiosPromise<pvModuleListVO[]> => {
return request({
url: '/progress/progressPlanDetail/detail/finished/'+ query.id,
url: '/progress/progressPlanDetail/detail/finished/' + query.id,
method: 'get',
params: query
});
@ -172,7 +182,7 @@ export const getDailyBook = (query: pvModuleListQuery):AxiosPromise<pvModuleList
* 删除进度计划详情
* @param id
*/
export const deleteDaily = (query: {id:string,detailIdList:string[]}) => {
export const deleteDaily = (query: { id: string; detailIdList: string[] }) => {
return request({
url: '/progress/progressPlanDetail/remove/detail',
method: 'delete',
@ -180,4 +190,4 @@ export const deleteDaily = (query: {id:string,detailIdList:string[]}) => {
});
};
export const workScheduleDel=()=>{}
export const workScheduleDel = () => {};

4
src/api/progress/plan/types.ts
View File

@ -29,8 +29,8 @@ export interface ProgressCategoryVO {
*/
children: ProgressCategoryVO[];
threeChildren: any[];
hasChildren:any;
detailChildren:any;
hasChildren: any;
detailChildren: any;
}
export interface ProgressCategoryForm extends BaseEntity {

13
src/api/project/project/index.ts
View File

@ -84,7 +84,10 @@ export const addProjectFacilities = (data: any) => {
return request({
url: '/facility/photovoltaicPanel/geoJson',
method: 'post',
data: data
data: data,
headers: {
'X-No-Cache': 'true'
}
});
};
@ -93,8 +96,8 @@ export const addProjectFacilities = (data: any) => {
* @param data
*/
export const addProjectPilePoint = (data: any) => {
console.log("🚀 ~ addProjectPilePoint ~ data:", data)
console.log('🚀 ~ addProjectPilePoint ~ data:', data);
return request({
url: '/facility/photovoltaicPanelPoint/parts/geoJson',
method: 'post',
@ -114,8 +117,6 @@ export const addProjectSquare = (data: any) => {
});
};
/**
* 通过GeoJson新增设施-箱变
* @param data
@ -172,4 +173,4 @@ export const getChildProject = (id: string | number): AxiosPromise<childProjectQ
url: '/project/project/list/sub/' + id,
method: 'get'
});
};
};

55
src/components/openLayersMap/index.vue
View File

@ -332,7 +332,7 @@ const handleMenuItemClick = (option: string, index: number) => {
if (selectLayer.value.some((item) => item.location.name === contextMenu.value.name)) {
return proxy?.$modal.msgError('已选择该图层，请勿重复选择');
}
if (selectLayer.value.some((item) => item.option !== '名称' && item.option !== '箱变')) {
if (selectLayer.value.some((item) => item.option !== '名称' && item.option !== '箱变' && item.option !== '光伏板')) {
if (option !== '名称' && option !== '箱变') return proxy?.$modal.msgError('只能选择一个类型');
}
selectLayer.value.push({ location: contextMenu.value, option });
@ -411,7 +411,7 @@ const getGeoJsonData = (nameOption = '名称', secondOption: string): { nameGeoJ
const handleTwoLayerUpload = async (optionB: string, apiFunc: (data: any) => Promise<any>) => {
const geoJson = getGeoJsonData('名称', optionB);
if (!geoJson) return;
if (optionB == '光伏板') return uploadPhotovoltaic(geoJson, apiFunc);
const data = {
projectId: props.projectId,
nameGeoJson: geoJson.nameGeoJson,
@ -423,6 +423,57 @@ const handleTwoLayerUpload = async (optionB: string, apiFunc: (data: any) => Pro
await apiFunc(data);
await showSuccess('添加成功');
};
//上传光伏板
const uploadPhotovoltaic = async (geoJson: { nameGeoJson: any[]; locationGeoJson: any }, apiFunc: (data: any) => Promise<any>) => {
// 提取原始 features
let rawNameFeatures = geoJson.nameGeoJson || [];
let rawLocationFeatures = geoJson.locationGeoJson || [];
console.log('🚀 nameGeoJson:', rawNameFeatures);
console.log('🚀 locationGeoJson:', rawLocationFeatures);
// 扁平化处理 FeatureCollection
const nameFeatures = rawNameFeatures.flatMap((fc) => fc.features || []).map((f) => ({ ...f, __source: 'name' }));
const locationFeatures = rawLocationFeatures.flatMap((fc) => fc.features).map((f) => ({ ...f, __source: 'location' }));
// 配对成上传单元
type FeaturePair = { nameFeature: any; locationFeature: any };
const pairedFeatures: FeaturePair[] = nameFeatures.map((name, i) => ({
nameFeature: name,
locationFeature: locationFeatures[i]
}));
// 启动上传
loading.value = true;
const sessionId = new Date().getTime().toString(36) + Math.random().toString(36).substring(2, 15);
const uploader = new BatchUploader({
dataList: pairedFeatures,
chunkSize: 3000, // 一次上传3000对
delay: 200,
uploadFunc: async (chunk, batchNum, totalBatch) => {
const chunkNameFeatures = chunk.map((pair) => pair.nameFeature);
const chunkLocationFeatures = chunk.map((pair) => pair.locationFeature);
console.log(`🚀 上传第 ${batchNum}/${totalBatch} 批，条数:`, chunk.length);
await apiFunc({
projectId: props.projectId,
nameGeoJson: [{ type: 'FeatureCollection', features: chunkNameFeatures }],
locationGeoJson: [{ type: 'FeatureCollection', features: chunkLocationFeatures }],
pointGeoJson: null,
sessionId,
totalBatch,
batchNum
});
},
onComplete: () => {
showSuccess('图层上传完成');
loading.value = false;
}
});
await uploader.start();
};
const handlePointUpload = async () => {
if (selectLayer.value.length > 1) return showError('最多选择一个桩点/支架');

20
src/plugins/cache.ts
View File

@ -1,12 +1,22 @@
const sessionCache = {
set(key: string, value: any) {
if (!sessionStorage) {
return;
}
if (key != null && value != null) {
sessionStorage.setItem(key, value);
if (!sessionStorage || key == null || value == null) return;
try {
const str = typeof value === 'string' ? value : JSON.stringify(value);
// 限制：如果数据超过 1MB，就不存
if (str.length > 1024 * 1024) {
console.warn(`sessionStorage.setItem(${key}) 跳过，数据过大（${(str.length / 1024).toFixed(2)} KB）`);
return;
}
sessionStorage.setItem(key, str);
} catch (e) {
console.error(`sessionStorage.setItem(${key}) 失败:`, e);
}
},
get(key: string) {
if (!sessionStorage) {
return null;

44
src/utils/batchUpload.ts
View File

@ -5,25 +5,26 @@
* 用于将大量数据分批发送到后端，避免单次请求数据过大导致失败。
* 支持设置每批数据大小、批次间延迟、上传函数和完成回调。
*/
/**
* BatchUploader 批量上传工具类（安全简洁版）
* 用于将大量数据分批上传，避免一次性请求数据过大导致失败。
*/
export class BatchUploader<T> {
private dataList: T[]; // 需要上传的数据列表
private chunkSize: number; // 每批上传的条数
private delay: number; // 每批上传之间的延迟时间（单位：毫秒）
private uploadFunc: (chunk: T[], batchIndex: number, totalBatches: number) => Promise<void>; // 每一批次的上传函数
private onComplete?: () => void; // 所有批次完成后的回调函数（可选）
private dataList: T[];
private chunkSize: number;
private delay: number;
private uploadFunc: (chunk: T[], batchIndex: number, totalBatches: number) => Promise<void>;
private onComplete?: () => void;
/**
* 构造函数，初始化批量上传器
* @param options 配置参数
*/
constructor(options: {
dataList: T[]; // 待上传的数据
chunkSize?: number; // 每批数据大小（默认 8000）
delay?: number; // 每批之间的延迟（默认 200ms）
uploadFunc: (chunk: T[], batchIndex: number, totalBatches: number) => Promise<void>; // 上传逻辑函数
onComplete?: () => void; // 所有批次完成后的回调函数（可选）
dataList: T[]; // 统一使用一维数组类型
chunkSize?: number;
delay?: number;
uploadFunc: (chunk: T[], batchIndex: number, totalBatches: number) => Promise<void>;
onComplete?: () => void;
}) {
const { dataList, chunkSize = 8000, delay = 200, uploadFunc, onComplete } = options;
this.dataList = dataList;
this.chunkSize = chunkSize;
this.delay = delay;
@ -31,32 +32,25 @@ export class BatchUploader<T> {
this.onComplete = onComplete;
}
/**
* 启动批量上传任务
*/
public async start() {
const total = Math.ceil(this.dataList.length / this.chunkSize); // 计算总批次数
const total = Math.ceil(this.dataList.length / this.chunkSize);
// 循环执行每一批上传任务
for (let i = 0; i < total; i++) {
// 截取当前批次的数据
const chunk = this.dataList.slice(i * this.chunkSize, (i + 1) * this.chunkSize);
// 调用传入的上传函数处理该批次数据
console.log(`正在上传第 ${i + 1}/${total} 批，chunk 大小: ${chunk.length}`);
await this.uploadFunc(chunk, i + 1, total);
// 如果不是最后一批，添加延迟
if (this.delay > 0 && i + 1 < total) {
await new Promise((res) => setTimeout(res, this.delay));
}
}
// 所有批次上传完成后，执行完成回调（如果有的话）
this.onComplete?.();
}
}
//使用示例
// const uploader = new BatchUploader({
// dataList: features,
@ -70,4 +64,4 @@ export class BatchUploader<T> {
// }
// });
// await uploader.start();
// await uploader.start();

27
src/utils/lassoSelect.ts
View File

@ -24,11 +24,7 @@ export class LassoSelector {
private dragPanInteraction: DragPan | null = null;
private mouseWheelZoomInteraction: MouseWheelZoom | null = null;
constructor(
map: OLMap,
targetSource: VectorSource,
onSelect: (selected: Feature[], isInvert?: boolean) => void
) {
constructor(map: OLMap, targetSource: VectorSource, onSelect: (selected: Feature[], isInvert?: boolean) => void) {
this.map = map;
this.targetSource = targetSource;
this.onSelectCallback = onSelect;
@ -50,9 +46,9 @@ export class LassoSelector {
style: new Style({
stroke: new Stroke({
color: '#ff0000',
width: 2,
}),
}),
width: 2
})
})
});
this.map.addLayer(this.drawLayer);
@ -62,12 +58,12 @@ export class LassoSelector {
style: new Style({
stroke: new Stroke({
color: 'rgba(255, 0, 0, 0.8)',
width: 2,
width: 2
}),
fill: new Fill({
color: 'rgba(255, 0, 0, 0.3)',
}),
}),
color: 'rgba(255, 0, 0, 0.3)'
})
})
});
this.map.addLayer(this.overlayLayer);
@ -177,13 +173,10 @@ export class LassoSelector {
const geomObj = geojson.writeGeometryObject(geom, {
featureProjection: 'EPSG:3857',
dataProjection: 'EPSG:4326',
dataProjection: 'EPSG:4326'
}) as any;
if (
(geomObj.type === 'Polygon' || geomObj.type === 'MultiPolygon') &&
booleanIntersects(turfPoly, geomObj)
) {
if ((geomObj.type === 'Polygon' || geomObj.type === 'MultiPolygon') && booleanIntersects(turfPoly, geomObj)) {
selected.push(feature);
}
});

145
src/views/other/ys7Device/component/add.vue Normal file
View File

@ -0,0 +1,145 @@
<template>
<div class="system-ys7Devices-add">
<!-- 添加或修改荧石摄像头对话框 -->
<el-dialog v-model="isShowDialog" width="769px" :close-on-click-modal="false" :destroy-on-close="true">
<template #header>
<div v-drag="['.system-ys7Devices-add .el-dialog', '.system-ys7Devices-add .el-dialog__header']">添加荧石摄像头</div>
</template>
<el-form ref="formRef" :model="formData" :rules="rules" label-width="90px">
<el-form-item label="设备序列号" prop="deviceSerial">
<el-input v-model="formData.deviceSerial" placeholder="请输入设备串号" />
</el-form-item>
<el-form-item label="设备名称" prop="deviceName">
<el-input v-model="formData.deviceName" placeholder="请输入设备名称" />
</el-form-item>
<el-form-item label="设备类型" prop="deviceType">
<el-input v-model="formData.deviceType" placeholder="请输入设备类型" />
</el-form-item>
<!-- <el-form-item label="状态" prop="status">
<el-input v-model="formData.status" placeholder="请输入状态" />
</el-form-item>
<el-form-item label="" prop="defence">
<el-input v-model="formData.defence" placeholder="请输入" />
</el-form-item> -->
<el-form-item label="设备版本" prop="deviceVersion">
<el-input v-model="formData.deviceVersion" placeholder="请输入设备版本" />
</el-form-item>
<!-- <el-form-item label="项目ID" prop="projectId">
<el-input v-model="formData.projectId" placeholder="请输入项目ID" />
</el-form-item> -->
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="onSubmit">确 定</el-button>
<el-button @click="onCancel">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script lang="ts">
import { reactive, toRefs, defineComponent,ref,unref,getCurrentInstance } from 'vue';
import {ElMessageBox, ElMessage, FormInstance,UploadProps} from 'element-plus';
import {
listYs7Devices,
getYs7Devices,
delYs7Devices,
addYs7Devices,
updateYs7Devices,
} from "/@/api/system/ys7Devices";
import {
Ys7DevicesTableColumns,
Ys7DevicesInfoData,
Ys7DevicesTableDataState,
Ys7DevicesEditState,
} from "/@/views/system/ys7Devices/list/component/model"
export default defineComponent({
name:"apiV1SystemYs7DevicesEdit",
components:{
},
props:{
},
setup(props,{emit}) {
const {proxy} = <any>getCurrentInstance()
const formRef = ref<HTMLElement | null>(null);
const menuRef = ref();
const state = reactive<Ys7DevicesEditState>({
loading:false,
isShowDialog: false,
formData: {
id: undefined,
createdAt: undefined,
deviceSerial: undefined,
deviceName: undefined,
deviceType: undefined,
status: undefined,
defence: undefined,
deviceVersion: undefined,
projectId: undefined,
},
// 表单校验
rules: {
id : [
{ required: true, message: "id不能为空", trigger: "blur" }
],
}
});
// 打开弹窗
const openDialog = () => {
resetForm();
state.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
state.isShowDialog = false;
};
// 取消
const onCancel = () => {
closeDialog();
};
// 提交
const onSubmit = () => {
const formWrap = unref(formRef) as any;
if (!formWrap) return;
formWrap.validate((valid: boolean) => {
if (valid) {
state.loading = true;
//添加
addYs7Devices(state.formData).then(()=>{
ElMessage.success('添加成功');
closeDialog(); // 关闭弹窗
emit('ys7DevicesList')
}).finally(()=>{
state.loading = false;
})
}
});
};
const resetForm = ()=>{
state.formData = {
id: undefined,
createdAt: undefined,
deviceSerial: undefined,
deviceName: undefined,
deviceType: undefined,
status: undefined,
defence: undefined,
deviceVersion: undefined,
projectId: undefined,
}
};
return {
proxy,
openDialog,
closeDialog,
onCancel,
onSubmit,
menuRef,
formRef,
...toRefs(state),
};
}
})
</script>
<style scoped>
</style>

108
src/views/other/ys7Device/component/bindPro.vue Normal file
View File

@ -0,0 +1,108 @@
<template>
<div class="system-ys7Devices-add">
<!-- 摄像头绑定项目对话框 -->
<el-dialog v-model="state.isShowDialog" width="769px" :close-on-click-modal="false" :destroy-on-close="true">
<template #header>
<div v-drag="['.system-ys7Devices-add .el-dialog', '.system-ys7Devices-add .el-dialog__header']">设备分配</div>
</template>
<el-form ref="formRef" :model="state.formData" label-width="90px">
<el-radio-group v-model="state.formData.projectId" class="device_box">
<div v-for="item in projectList" class="device_row" :key="item.id">
<el-radio :label="item.id">{{ item.name }}</el-radio>
</div>
</el-radio-group>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="onSubmit">确 定</el-button>
<el-button @click="onCancel">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, toRefs, getCurrentInstance } from 'vue';
import { ElMessage } from 'element-plus';
import { devicesLinkPro } from '@/api/other/ys7Device';
// props
defineProps<{
projectList: Array<any>;
}>();
// emit
const emit = defineEmits<{
(e: 'ys7DevicesList'): void;
}>();
const { proxy } = getCurrentInstance() as any;
const formRef = ref<HTMLElement | null>(null);
const menuRef = ref();
const state = reactive({
loading: false,
isShowDialog: false,
formData: { projectId: null, id: null }
});
const openDialog = (row: any) => {
resetForm();
if (row.row && row.row.id) {
state.formData.id = row.row.id;
}
state.isShowDialog = true;
};
const closeDialog = () => {
state.isShowDialog = false;
};
const onCancel = () => {
closeDialog();
};
const onSubmit = () => {
if (state.formData.projectId) {
state.loading = true;
devicesLinkPro(state.formData)
.then(() => {
ElMessage.success('分配成功');
closeDialog();
emit('ys7DevicesList');
})
.finally(() => {
state.loading = false;
});
} else {
ElMessage.warning('未选择所属项目');
}
};
const resetForm = () => {
state.formData = {
id: null,
projectId: null
};
};
// 暴露用于父组件调用的 openDialog 方法（如果需要）
defineExpose({
openDialog,
closeDialog
});
</script>
<style scoped lang="scss">
.device_box {
width: 100%;
> div {
padding-right: 30px;
height: 45px;
line-height: 45px;
}
}
</style>

149
src/views/other/ys7Device/component/detail.vue Normal file
View File

@ -0,0 +1,149 @@
<template>
<!-- 荧石摄像头详情抽屉 -->
<div class="system-ys7Devices-detail">
<el-drawer v-model="isShowDialog" size="80%" direction="ltr">
<template #header>
<h4>荧石摄像头详情</h4>
</template>
<el-form ref="formRef" :model="formData" label-width="100px">
<el-row>
<el-col :span="12">
<el-form-item label="创建时间">{{ proxy.parseTime(formData.createdAt, '{y}-{m}-{d} {h}:{i}:{s}') }}</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="设备串号">{{ formData.deviceSerial }}</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="设备名称">{{ formData.deviceName }}</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="设备类型">{{ formData.deviceType }}</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="状态">{{ formData.status }}</el-form-item>
</el-col>
<!-- <el-col :span="12">
<el-form-item label="">{{ formData.defence }}</el-form-item>
</el-col> -->
<el-col :span="12">
<el-form-item label="设备版本">{{ formData.deviceVersion }}</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="所属项目">{{ formData.projectId }}</el-form-item>
</el-col>
</el-row>
</el-form>
</el-drawer>
</div>
</template>
<script lang="ts">
import { reactive, toRefs, defineComponent,ref,unref,getCurrentInstance,computed } from 'vue';
import {ElMessageBox, ElMessage, FormInstance,UploadProps} from 'element-plus';
import {
listYs7Devices,
getYs7Devices,
delYs7Devices,
addYs7Devices,
updateYs7Devices,
} from "/@/api/system/ys7Devices";
import {
Ys7DevicesTableColumns,
Ys7DevicesInfoData,
Ys7DevicesTableDataState,
Ys7DevicesEditState,
} from "/@/views/system/ys7Devices/list/component/model"
export default defineComponent({
name:"apiV1SystemYs7DevicesDetail",
components:{
},
props:{
},
setup(props,{emit}) {
const {proxy} = <any>getCurrentInstance()
const formRef = ref<HTMLElement | null>(null);
const menuRef = ref();
const state = reactive<Ys7DevicesEditState>({
loading:false,
isShowDialog: false,
formData: {
id: undefined,
createdAt: undefined,
deviceSerial: undefined,
deviceName: undefined,
deviceType: undefined,
status: undefined,
defence: undefined,
deviceVersion: undefined,
projectId: undefined,
},
// 表单校验
rules: {
id : [
{ required: true, message: "id不能为空", trigger: "blur" }
],
}
});
// 打开弹窗
const openDialog = (row?: Ys7DevicesInfoData) => {
resetForm();
if(row) {
getYs7Devices(row.id!).then((res:any)=>{
const data = res.data;
state.formData = data;
})
}
state.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
state.isShowDialog = false;
};
// 取消
const onCancel = () => {
closeDialog();
};
const resetForm = ()=>{
state.formData = {
id: undefined,
createdAt: undefined,
deviceSerial: undefined,
deviceName: undefined,
deviceType: undefined,
status: undefined,
defence: undefined,
deviceVersion: undefined,
projectId: undefined,
}
};
return {
proxy,
openDialog,
closeDialog,
onCancel,
menuRef,
formRef,
...toRefs(state),
};
}
})
</script>
<style scoped>
.system-ys7Devices-detail :deep(.el-form-item--large .el-form-item__label){
font-weight: bolder;
}
.pic-block{
margin-right: 8px;
}
.file-block{
width: 100%;
border: 1px solid var(--el-border-color);
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: var(--el-transition-duration-fast);
margin-bottom: 5px;
padding: 3px 6px;
}
.ml-2{margin-right: 5px;}
</style>

174
src/views/other/ys7Device/component/edit.vue Normal file
View File

@ -0,0 +1,174 @@
<template>
<div class="system-ys7Devices-edit">
<!-- 添加或修改荧石摄像头对话框 -->
<el-dialog v-model="isShowDialog" width="769px" :close-on-click-modal="false" :destroy-on-close="true" custom-class="ys7Devices_edit">
<template #header>
<div v-drag="['.system-ys7Devices-edit .el-dialog', '.system-ys7Devices-edit .el-dialog__header']">{{(!formData.id || formData.id==0?'添加':'修改')+'荧石摄像头'}}</div>
</template>
<el-form ref="formRef" :model="formData" :rules="rules" label-width="90px">
<el-form-item label="设备序列号" prop="deviceSerial">
<el-input v-model="formData.deviceSerial" placeholder="请输入设备串号" disabled/>
</el-form-item>
<el-form-item label="设备名称" prop="deviceName">
<el-input v-model="formData.deviceName" placeholder="请输入设备名称" />
</el-form-item>
<el-form-item label="设备类型" prop="deviceType">
<el-input v-model="formData.deviceType" placeholder="请输入设备类型" />
</el-form-item>
<!-- <el-form-item label="状态" prop="status">
<el-input v-model="formData.status" placeholder="请输入状态" />
</el-form-item>
<el-form-item label="" prop="defence">
<el-input v-model="formData.defence" placeholder="请输入" />
</el-form-item> -->
<el-form-item label="设备版本" prop="deviceVersion">
<el-input v-model="formData.deviceVersion" placeholder="请输入设备版本" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="formData.remark" placeholder="请输入备注信息" />
</el-form-item>
<!-- <el-form-item label="项目ID" prop="projectId">
<el-input v-model="formData.projectId" placeholder="请输入项目ID" />
</el-form-item> -->
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="onSubmit">确 定</el-button>
<el-button @click="onCancel">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script lang="ts">
import { reactive, toRefs, defineComponent,ref,unref,getCurrentInstance } from 'vue';
import {ElMessageBox, ElMessage, FormInstance,ElLoading} from 'element-plus';
import {
listYs7Devices,
getYs7Devices,
delYs7Devices,
addYs7Devices,
updateYs7Devices,
} from "/@/api/system/ys7Devices";
import {
Ys7DevicesTableColumns,
Ys7DevicesInfoData,
Ys7DevicesTableDataState,
Ys7DevicesEditState,
} from "/@/views/system/ys7Devices/list/component/model"
export default defineComponent({
name:"apiV1SystemYs7DevicesEdit",
components:{
},
props:{
},
setup(props,{emit}) {
const {proxy} = <any>getCurrentInstance()
const formRef = ref<HTMLElement | null>(null);
const menuRef = ref();
const state = reactive<Ys7DevicesEditState>({
loading:false,
isShowDialog: false,
formData: {
id: undefined,
createdAt: undefined,
deviceSerial: undefined,
deviceName: undefined,
deviceType: undefined,
status: undefined,
defence: undefined,
deviceVersion: undefined,
projectId: undefined,
remark: undefined
},
// 表单校验
rules: {
id : [
{ required: true, message: "id不能为空", trigger: "blur" }
],
}
});
// 打开弹窗
const openDialog = (row?: Ys7DevicesInfoData) => {
resetForm();
const loading = ElLoading.service({
lock: true,
text: '正在加载中……',
background: 'rgba(0, 0, 0, 0.7)',
target: '.ys7Devices_edit',
});
if(row) {
getYs7Devices(row.id!).then((res:any)=>{
loading.close();
const data = res.data;
state.formData = data;
})
}
state.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
state.isShowDialog = false;
};
// 取消
const onCancel = () => {
closeDialog();
};
// 提交
const onSubmit = () => {
const formWrap = unref(formRef) as any;
if (!formWrap) return;
formWrap.validate((valid: boolean) => {
if (valid) {
state.loading = true;
if(!state.formData.id || state.formData.id===0){
//添加
addYs7Devices(state.formData).then(()=>{
ElMessage.success('添加成功');
closeDialog(); // 关闭弹窗
emit('ys7DevicesList')
}).finally(()=>{
state.loading = false;
})
}else{
//修改
updateYs7Devices(state.formData).then(()=>{
ElMessage.success('修改成功');
closeDialog(); // 关闭弹窗
emit('ys7DevicesList')
}).finally(()=>{
state.loading = false;
})
}
}
});
};
const resetForm = ()=>{
state.formData = {
id: undefined,
createdAt: undefined,
deviceSerial: undefined,
deviceName: undefined,
deviceType: undefined,
status: undefined,
defence: undefined,
deviceVersion: undefined,
projectId: undefined,
remark: undefined
}
};
return {
proxy,
openDialog,
closeDialog,
onCancel,
onSubmit,
menuRef,
formRef,
...toRefs(state),
};
}
})
</script>
<style scoped>
</style>

284
src/views/other/ys7Device/component/presetAdd.vue Normal file
View File

@ -0,0 +1,284 @@
<template>
<div class="system-busPresettingBit-add">
<el-dialog v-model="isShowDialog" width="1250px" :close-on-click-modal="false" :destroy-on-close="true">
<template #header>
<div v-drag="['.system-busPresettingBit-add .el-dialog', '.system-busPresettingBit-add .el-dialog__header']">
{{ title }}:添加摄像头预置位
</div>
</template>
<div class="info_list">
<div class="video_box">
<div class="video-container" id="video-container" style="width: 870px; height: 600px"></div>
</div>
<div>
<el-button type="primary" style="margin: 0 20px 10px" @click="addPre">
<el-icon><ele-Plus /></el-icon>
添加预置点</el-button
>
<el-table v-loading="loading" :data="tableData.data" border>
<el-table-column label="序号" align="center" type="index" width="50" />
<el-table-column label="名称" align="center" prop="name" width="100px" show-overflow-tooltip>
<template #default="scope">
<el-input placeholder="请输入内容" v-model="scope.row.name" @change="handleEdit(scope.row)"></el-input>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="130px">
<template #default="scope">
<el-button type="primary" link @click="handleDebug(scope.row)"
><el-icon><ele-View /></el-icon>调用</el-button
>
<el-button type="danger" link @click="handleDelete(scope.row)"
><el-icon><ele-DeleteFilled /></el-icon>删除</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
style="padding: 5px 16px"
v-show="tableData.total > 0"
:total="tableData.total"
v-model:page="tableData.param.pageNum"
v-model:limit="tableData.param.pageSize"
@pagination="busPresettingBitList"
:layout="layout"
/>
</div>
</div>
</el-dialog>
</div>
</template>
<script lang="ts">
import { reactive, toRefs, defineComponent, ref, unref, getCurrentInstance, nextTick, onBeforeUnmount } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import {
listDevicePreset,
getDevicePreset,
addDevicePreset,
updateDevicePreset,
delDevicePreset,
callDevicePreset,
} from '/@/api/system/devicePreset';
import { getAccessToken } from '/@/api/system/ys7Devices';
export default defineComponent({
name: 'index',
setup(props, { emit }) {
const { proxy } = <any>getCurrentInstance();
const formRef = ref<HTMLElement | null>(null);
const menuRef = ref();
const loading = ref(false);
const state = reactive({
loading: false,
isShowDialog: false,
formData: {
deviceSerial: undefined,
channelNo: '1',
presetName: undefined,
},
layout: 'total, prev, pager, next',
tableData: {
data: [],
total: 0,
loading: false,
param: {
pageNum: 1,
pageSize: 15,
deviceSerial: '',
},
},
// 表单校验
rules: {},
title: '',
updateRow: null,
src: null,
flvPlayer: null,
});
// 打开弹窗
const openDialog = (row) => {
resetForm();
state.updateRow = row;
state.title = row.deviceName; //摄像头名称
state.formData.deviceSerial = row.deviceSerial;
state.tableData.param.deviceSerial = row.deviceSerial;
state.isShowDialog = true;
busPresettingBitList(); // 获取预置点列表数据
nextTick(() => {
videoPlay(row);
});
};
// 添加预置点
const addPre = () => {
ElMessageBox.prompt('请输入预置点名称', '添加预置点', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputErrorMessage: '请输入预置点名称',
})
.then(({ value }) => {
state.formData.presetName = value;
addDevicePreset(state.formData)
.then(() => {
ElMessage.success('添加成功');
busPresettingBitList(); //获取预置点
})
.finally(() => {
state.loading = false;
});
})
.catch(() => {});
};
// 视频播放
const videoPlay = (obj) => {
getAccessToken({}).then((res: any) => {
if (res.code == 0 && obj.deviceSerial) {
state.flvPlayer = new EZUIKit.EZUIKitPlayer({
audio: '0',
id: 'video-container', // 视频容器ID
accessToken: res.data.token,
url: `ezopen://open.ys7.com/${obj.deviceSerial}/1.hd.live`, // 初始化写死一个离线或者找不到的设备，避免初始化无法创建播放器；
template: 'pcLive', //standard pcLive
width: 870, //默认值为容器容器DOM宽高度
height: 600,
plugin: ['talk'], // 加载插件，talk-对讲
});
}
});
};
// 关闭弹窗
const closeDialog = () => {
if (state.flvPlayer) {
const destroyPromise = state.flvPlayer.destroy();
destroyPromise.then((data: any) => {
console.log('promise 获取 数据', data);
});
state.flvPlayer = null;
}
state.isShowDialog = false;
};
// 获取预置点列表数据
const busPresettingBitList = () => {
loading.value = true;
listDevicePreset(state.tableData.param).then((res: any) => {
let list = res.data.list ?? [];
state.tableData.data = list;
state.tableData.total = res.data.total;
loading.value = false;
});
};
// 取消
const onCancel = () => {
closeDialog();
};
const handleDelete = (row: any) => {
let msg = '你确定要删除所选数据？';
let id: number[] = [];
if (row) {
msg = `此操作将永久删除数据，是否继续?`;
id = [row.id];
}
if (id.length === 0) {
ElMessage.error('请选择要删除的数据。');
return;
}
ElMessageBox.confirm(msg, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
let obj = {
deviceSerial: row.deviceSerial,
ids: id,
};
delDevicePreset(obj).then((res: any) => {
if (res.code == 0) {
ElMessage.success('删除成功');
busPresettingBitList();
}
});
})
.catch(() => {});
};
// 调用
const handleDebug = (row) => {
let obj = {
deviceSerial: row.deviceSerial,
index: row.index,
};
callDevicePreset(obj).then((res: any) => {
if (res.code == 0) {
ElMessage.success('调用成功');
}
});
};
const handleEdit = (row: any) => {
let param = {
id: row.id,
deviceSerial: row.deviceSerial,
newName: row.name,
};
updateDevicePreset(param)
.then(() => {
ElMessage.success('修改成功');
busPresettingBitList(); //获取预置点
})
.finally(() => {
state.loading = false;
});
};
const resetForm = () => {
state.formData = {
deviceSerial: undefined,
channelNo: '1',
presetName: undefined,
};
};
onBeforeUnmount(() => {
if (state.flvPlayer) {
const destroyPromise = state.flvPlayer.destroy();
destroyPromise.then((data: any) => {
console.log('promise 获取 数据', data);
});
state.flvPlayer = null;
}
});
return {
proxy,
openDialog,
closeDialog,
onCancel,
menuRef,
formRef,
handleDebug,
handleDelete,
addPre,
handleEdit,
loading,
busPresettingBitList,
...toRefs(state),
};
},
});
</script>
<style scoped lang="scss">
.system-busPresettingBit-add {
.info_list {
width: 100%;
display: flex;
height: 100%;
.video_box {
width: 75%;
height: 600px;
margin-right: 10px;
.iframe {
border: none;
outline: none;
}
.video_air {
width: 100%;
height: 100%;
object-fit: fill;
}
}
}
}
</style>

376
src/views/other/ys7Device/index.vue Normal file
View File

@ -0,0 +1,376 @@
<template>
<div class="system-ys7Devices-container">
<el-card shadow="hover">
<div class="system-ys7Devices-search mb8">
<el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="100px">
<el-row>
<el-col :span="8" class="colBlock">
<el-form-item label="设备名称" prop="deviceName">
<el-input v-model="tableData.param.deviceName" placeholder="请输入设备名称" clearable @keyup.enter.native="ys7DevicesList" />
</el-form-item>
</el-col>
<el-col :span="8" class="colBlock">
<el-form-item label="设备类型" prop="deviceType">
<el-input v-model="tableData.param.deviceType" placeholder="请输入设备类型" clearable @keyup.enter.native="ys7DevicesList" />
</el-form-item>
</el-col>
<el-col :span="8" :class="!showAll ? 'colBlock' : 'colNone'">
<el-form-item>
<el-button type="primary" @click="ys7DevicesList"
><el-icon><Search /></el-icon>搜索</el-button
>
<el-button @click="resetQuery(queryRef)"
><el-icon><Refresh /></el-icon>重置</el-button
>
<el-button type="primary" link @click="toggleSearch">
{{ word }}
<el-icon v-show="showAll"><ArrowUp /></el-icon>
<el-icon v-show="!showAll"><ArrowDown /></el-icon>
</el-button>
</el-form-item>
</el-col>
<el-col :span="8" :class="showAll ? 'colBlock' : 'colNone'">
<el-form-item label="设备序列号" prop="deviceSerial">
<el-input v-model="tableData.param.deviceSerial" placeholder="请输入设备串号" clearable @keyup.enter.native="ys7DevicesList" />
</el-form-item>
</el-col>
<el-col :span="8" :class="showAll ? 'colBlock' : 'colNone'">
<el-form-item label="状态" prop="status">
<el-select v-model="tableData.param.status" placeholder="请选择设备状态" clearable>
<el-option label="在线" :value="1" />
<el-option label="离线" :value="0" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8" :class="showAll ? 'colBlock' : 'colNone'">
<el-form-item label="设备版本" prop="deviceVersion">
<el-input v-model="tableData.param.deviceVersion" placeholder="请输入设备版本" clearable @keyup.enter.native="ys7DevicesList" />
</el-form-item>
</el-col>
<el-col :span="8" :class="showAll ? 'colBlock' : 'colNone'">
<el-form-item label="所属项目" prop="projectId">
<el-select v-model="tableData.param.projectId" placeholder="请选择所属项目" clearable filterable>
<el-option v-for="item in projectList" class="device_row" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8" :class="showAll ? 'colBlock' : 'colNone'">
<el-form-item>
<el-button type="primary" @click="ys7DevicesList"
><el-icon><Search /></el-icon>搜索</el-button
>
<el-button @click="resetQuery(queryRef)"
><el-icon><Refresh /></el-icon>重置</el-button
>
<el-button type="primary" link @click="toggleSearch">
{{ word }}
<el-icon v-show="showAll"><ArrowUp /></el-icon>
<el-icon v-show="!showAll"><ArrowDown /></el-icon>
</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-row :gutter="10" class="mb8">
<!-- <el-col :span="1.5">
<el-button type="primary" @click="handleAdd" v-auth="'api/v1/system/ys7Devices/add'"
><el-icon><Plus /></el-icon>新增</el-button
>
</el-col> -->
<el-col :span="1.5">
<el-button type="success" :disabled="single" @click="handleUpdate(null)" v-auth="'api/v1/system/ys7Devices/edit'"
><el-icon><Edit /></el-icon>修改</el-button
>
</el-col>
<el-col :span="1.5">
<el-button type="danger" :disabled="multiple" @click="handleDelete(null)" v-auth="'api/v1/system/ys7Devices/delete'"
><el-icon><Delete /></el-icon>删除</el-button
>
</el-col>
<el-col :span="1.5">
<el-button type="warning" :disabled="multiple" @click="onLinkProject(null)" v-auth="'api/v1/system/ys7Devices/add'"
><el-icon><Link /></el-icon>设备分配</el-button
>
</el-col>
</el-row>
</div>
<el-table v-loading="loading" :data="tableData.data" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="设备序列号" align="center" prop="deviceSerial" min-width="100px" />
<el-table-column label="设备名称" align="center" prop="deviceName" min-width="100px" />
<el-table-column label="设备类型" align="center" prop="deviceType" min-width="100px" />
<el-table-column label="状态" align="center" prop="status" min-width="100px">
<template #default="scope">
<el-tag type="success" v-if="scope.row.status === 1">在线</el-tag>
<el-tag type="danger" v-if="scope.row.status === 0">离线</el-tag>
</template>
</el-table-column>
<el-table-column label="视频加密" align="center" prop="videoEncrypted" min-width="100px">
<template #default="scope">
<el-switch
v-model="scope.row.videoEncrypted"
class="ml-2"
:active-value="1"
:inactive-value="0"
:loading="scope.row.enctyptLoading"
@change="encryptChange(scope.row)"
inline-prompt
active-text="开启"
inactive-text="关闭"
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
/>
</template>
</el-table-column>
<!-- <el-table-column label="" align="center" prop="defence" min-width="100px" /> -->
<el-table-column label="设备版本" align="center" prop="deviceVersion" min-width="100px" />
<el-table-column label="所属项目" align="center" prop="projectId" min-width="100px">
<template #default="scope">
{{ scope.row.projectName ? scope.row.projectName : '未分配' }}
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" min-width="100px" />
<el-table-column label="创建时间" align="center" prop="deviceCreateTime" min-width="100px">
<template #default="scope">
<span>{{ proxy.parseTime(scope.row.deviceCreateTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding" min-width="160px" fixed="right">
<template #default="scope">
<el-button type="primary" link @click="handleUpdate(scope.row)" v-auth="'api/v1/system/ys7Devices/edit'"
><el-icon><EditPen /></el-icon>修改</el-button
>
<el-button type="primary" link @click="handleDelete(scope.row)" v-auth="'api/v1/system/ys7Devices/delete'"
><el-icon><DeleteFilled /></el-icon>删除</el-button
>
<el-button type="primary" link @click="onLinkProject(scope.row)" v-auth="'api/v1/system/ys7Devices/delete'"
><el-icon><Link /></el-icon>设备分配</el-button
>
<el-button type="primary" link @click="addPreset(scope.row)"
><el-icon><Plus /></el-icon>添加预置位</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="tableData.total > 0"
:total="tableData.total"
v-model:page="tableData.param.pageNum"
v-model:limit="tableData.param.pageSize"
@pagination="ys7DevicesList"
/>
</el-card>
<!-- <apiV1SystemYs7DevicesAdd ref="addRef" @ys7DevicesList="ys7DevicesList"></apiV1SystemYs7DevicesAdd>
<apiV1SystemYs7DevicesEdit ref="editRef" @ys7DevicesList="ys7DevicesList"></apiV1SystemYs7DevicesEdit>
<apiV1SystemYs7DevicesDetail ref="detailRef" @ys7DevicesList="ys7DevicesList"></apiV1SystemYs7DevicesDetail> -->
<bindPro ref="bindProRef" :projectList="projectList" @ys7DevicesList="ys7DevicesList"></bindPro>
<!-- <presetAdd ref="presetAddRef" @busPresettingBitList="busPresettingBitList"></presetAdd> -->
</div>
</template>
<script setup lang="ts">
// import { ref, reactive, onMounted, computed, toRefs, getCurrentInstance, toRaw } from 'vue';
import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
import { listYs7Device, delYs7Device, toggleEncrypt } from '@/api/other/ys7Device';
// import { Ys7DeviceVO, Ys7DevicesInfoData, Ys7DevicesTableDataState } from './component/model';
import { Ys7DeviceVO, Ys7DeviceForm, Ys7DeviceQuery } from '@/api/other/ys7Device/types';
import { useUserStoreHook } from '@/store/modules/user';
// import apiV1SystemYs7DevicesAdd from './component/add.vue';
// import apiV1SystemYs7DevicesEdit from './component/edit.vue';
// import apiV1SystemYs7DevicesDetail from './component/detail.vue';
import bindPro from './component/bindPro.vue';
import presetAdd from './component/presetAdd.vue';
// proxy 获取
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
// ref 定义
const loading = ref(false);
const queryRef = ref<FormInstance>();
const addRef = ref();
const editRef = ref();
const detailRef = ref();
const bindProRef = ref();
const presetAddRef = ref();
// 展开/收起搜索项
const showAll = ref(false);
const word = computed(() => (showAll.value ? '收起搜索' : '展开搜索'));
// 多选控制
const single = ref(true);
const multiple = ref(true);
// 获取用户 store
const userStore = useUserStoreHook();
// 从 store 中获取项目列表和当前选中的项目
const currentProject = computed(() => userStore.selectedProject);
const projects = computed(() => userStore.projects);
// 状态管理
const state = reactive<any>({
ids: [],
serials: [],
tableData: {
data: [],
total: 0,
loading: false,
param: {
pageNum: 1,
pageSize: 10,
id: undefined,
createdAt: undefined,
deviceSerial: undefined,
deviceName: undefined,
deviceType: undefined,
status: undefined,
defence: undefined,
deviceVersion: undefined,
projectId: currentProject.value?.id,
dateRange: [],
isFront: false
}
},
projectList: projects.value
});
// 初始化
const initTableData = () => {
ys7DevicesList();
// sysProjectList();
};
// 搜索重置
const resetQuery = (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.resetFields();
ys7DevicesList();
};
// 获取设备列表
const ys7DevicesList = () => {
loading.value = true;
listYs7Device(state.tableData.param).then((res: any) => {
let list = res.rows ?? [];
state.tableData.data = list.map((item) => {
item.enctyptLoading = false;
return item;
});
state.tableData.total = res.total;
loading.value = false;
});
};
// 展开/收起搜索项
const toggleSearch = () => {
showAll.value = !showAll.value;
};
// 多选事件
const handleSelectionChange = (selection: any[]) => {
state.ids = selection.map((item) => item.id);
state.serials = selection.map((item) => item.deviceSerial);
single.value = selection.length !== 1;
multiple.value = !selection.length;
};
// 新增
const handleAdd = () => {
addRef.value.openDialog();
};
// 编辑
const handleUpdate = (row?: Ys7DeviceVO) => {
if (!row) {
row = state.tableData.data.find((item) => item.id === state.ids[0])!;
}
editRef.value.openDialog(toRaw(row));
};
// 删除
const handleDelete = (row?: Ys7DeviceVO) => {
let msg = row ? `此操作将永久删除数据，是否继续?` : '你确定要删除所选数据？';
let id = row ? [row.id] : state.ids;
if (id.length === 0) {
ElMessage.error('请选择要删除的数据。');
return;
}
ElMessageBox.confirm(msg, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
delYs7Device(id).then(() => {
ElMessage.success('删除成功');
ys7DevicesList();
});
})
.catch(() => {});
};
// 查看详情
const handleView = (row: Ys7DeviceVO) => {
detailRef.value.openDialog(toRaw(row));
};
// 绑定项目
const onLinkProject = (row?: Ys7DeviceVO) => {
let serials = row ? [row.deviceSerial] : state.serials;
if (serials.length === 0) {
ElMessage.error('请选择要绑定项目的设备');
return;
}
let info = { serials, row };
bindProRef.value.openDialog(toRaw(info));
};
// 添加预置位
const addPreset = (row: any) => {
presetAddRef.value.openDialog(row);
};
// 开关加密
const encryptChange = (row: Ys7DeviceVO | any) => {
row.enctyptLoading = true;
// const action = row.videoEncrypted === 0 ? 1 : 0;
console.log(row.videoEncrypted);
toggleEncrypt({ videoEncrypted: row.videoEncrypted, id: row.id })
.then(() => {
proxy?.$modal.msgSuccess(row.videoEncrypted === 0 ? '关闭成功' : '开启成功');
})
.finally(() => {
row.enctyptLoading = false;
ys7DevicesList();
});
};
//监听项目id刷新数据
const listeningProject = watch(
() => currentProject.value.id,
(nid, oid) => {
tableData.value.param.projectId = nid;
initTableData();
}
);
// 页面加载
onMounted(() => {
initTableData();
});
onUnmounted(() => {
listeningProject();
});
// 暴露变量
const { tableData, projectList } = toRefs(state);
</script>
<style lang="scss" scoped>
.colBlock {
display: block;
}
.colNone {
display: none;
}
</style>

21
src/views/progress/plan/index.vue
View File

@ -10,7 +10,8 @@
:options="matrixOptions"
placeholder="请选择"
@change="handleChange"
:props="{ value: 'id', label: 'matrixName' }"
:props="{ value: 'matrixId', label: 'name' }"
v-model="queryParams.matrixId"
clearable
/>
<!-- <el-select v-model="matrixValue" placeholder="请选择" @change="handleChange" clearable>
@ -272,15 +273,23 @@ const { queryParams, form, rules } = toRefs(data);
const getList = async () => {
if (!queryParams.value.matrixId) {
const res = await getProjectSquare(currentProject.value.id);
if (res.rows.length === 0) {
if (res.data.length === 0) {
proxy?.$modal.msgWarning('当前项目下没有方阵，请先创建方阵');
} else {
if (!matrixValue.value) matrixValue.value = res.rows[0].id;
matrixOptions.value = res.rows;
queryParams.value.matrixId = res.rows[0].id;
let matrixList = res.data.map((item) => {
return {
...item,
matrixId: item.projectId
};
});
if (!matrixValue.value) matrixValue.value = matrixList[0].id;
matrixOptions.value = matrixList;
queryParams.value.matrixId = matrixList[0].children[0].matrixId;
}
}
loading.value = true;
console.log(queryParams.value);
const res = await listProgressCategory(queryParams.value);
const data = proxy?.handleTree<ProgressCategoryVO>(res.data, 'id', 'pid');
if (data) {
@ -324,7 +333,7 @@ const handleQuery = () => {
/** 级联选择器改变事件 */
const handleChange = (value: number) => {
queryParams.value.matrixId = value;
queryParams.value.matrixId = value[1];
getList();
};

28
src/views/progress/progressPaper/index.vue
View File

@ -15,9 +15,17 @@
</el-select>
</el-form-item>
<el-form-item label="请选择方阵：" prop="pid" label-width="100" style="margin-bottom: 0">
<el-select v-model="matrixValue" placeholder="请选择" @change="handleChange" clearable>
<!-- <el-select v-model="matrixValue" placeholder="请选择" @change="handleChange" clearable>
<el-option v-for="item in matrixOptions" :key="item.id" :label="item.matrixName" :value="item.id" />
</el-select>
</el-select> -->
<el-cascader
:options="matrixOptions"
placeholder="请选择"
@change="handleChange"
:props="{ value: 'matrixId', label: 'name' }"
v-model="queryParams.matrixId"
clearable
/>
</el-form-item>
</el-form>
</div>
@ -274,7 +282,7 @@ const resetTreeAndMap = () => {
/** 方阵选择器改变事件 */
const handleChange = (value: number) => {
queryParams.value.matrixId = value;
queryParams.value.matrixId = value[1];
getList();
};
@ -363,12 +371,18 @@ const resetMatrix = () => {
const getList = async () => {
if (!queryParams.value.matrixId) {
const res = await getProjectSquare(currentProject.value.id);
if (res.rows.length === 0) {
if (res.data.length === 0) {
proxy?.$modal.msgWarning('当前项目下没有方阵，请先创建方阵');
} else {
if (!matrixValue.value) matrixValue.value = res.rows[0].id;
matrixOptions.value = res.rows;
queryParams.value.matrixId = res.rows[0].id;
let matrixList = res.data.map((item) => {
return {
...item,
matrixId: item.projectId
};
});
if (!matrixValue.value) matrixValue.value = matrixList[0].id;
matrixOptions.value = matrixList;
queryParams.value.matrixId = matrixList[0].children[0].matrixId;
}
}
loading.value = true;