55 changed files with 8541 additions and 33 deletions
@ -0,0 +1,56 @@ |
|||||
|
import request from '@/config/axios' |
||||
|
import type { Dayjs } from 'dayjs' |
||||
|
|
||||
|
/** GAS警报规则信息 */ |
||||
|
export interface AlarmRule { |
||||
|
id: number // 主键ID
|
||||
|
gasTypeId?: number // 气体类型ID
|
||||
|
alarmTypeId?: number // 警报类型ID
|
||||
|
alarmName: string // 警报名称
|
||||
|
alarmNameColor: string // 警报名称颜色
|
||||
|
alarmColor: string // 警报颜色
|
||||
|
alarmLevel: number // 警报方式/级别（0：正常状态；1：一级警报；2：二级警报；3：弹窗警报）
|
||||
|
min: number // 触发值（小）
|
||||
|
max: number // 触发值（大）
|
||||
|
direction?: number // 最值方向（0：小；1：大）
|
||||
|
sortOrder?: number // 排序
|
||||
|
remark: string // 备注
|
||||
|
} |
||||
|
|
||||
|
// GAS警报规则 API
|
||||
|
export const AlarmRuleApi = { |
||||
|
// 查询GAS警报规则分页
|
||||
|
getAlarmRulePage: async (params: any) => { |
||||
|
return await request.get({ url: `/gas/alarm-rule/page`, params }) |
||||
|
}, |
||||
|
|
||||
|
// 查询GAS警报规则详情
|
||||
|
getAlarmRule: async (id: number) => { |
||||
|
return await request.get({ url: `/gas/alarm-rule/get?id=` + id }) |
||||
|
}, |
||||
|
|
||||
|
// 新增GAS警报规则
|
||||
|
createAlarmRule: async (data: AlarmRule) => { |
||||
|
return await request.post({ url: `/gas/alarm-rule/create`, data }) |
||||
|
}, |
||||
|
|
||||
|
// 修改GAS警报规则
|
||||
|
updateAlarmRule: async (data: AlarmRule) => { |
||||
|
return await request.put({ url: `/gas/alarm-rule/update`, data }) |
||||
|
}, |
||||
|
|
||||
|
// 删除GAS警报规则
|
||||
|
deleteAlarmRule: async (id: number) => { |
||||
|
return await request.delete({ url: `/gas/alarm-rule/delete?id=` + id }) |
||||
|
}, |
||||
|
|
||||
|
/** 批量删除GAS警报规则 */ |
||||
|
deleteAlarmRuleList: async (ids: number[]) => { |
||||
|
return await request.delete({ url: `/gas/alarm-rule/delete-list?ids=${ids.join(',')}` }) |
||||
|
}, |
||||
|
|
||||
|
// 导出GAS警报规则 Excel
|
||||
|
exportAlarmRule: async (params) => { |
||||
|
return await request.download({ url: `/gas/alarm-rule/export-excel`, params }) |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,51 @@ |
|||||
|
import request from '@/config/axios' |
||||
|
import type { Dayjs } from 'dayjs' |
||||
|
|
||||
|
/** GAS警报类型信息 */ |
||||
|
export interface AlarmType { |
||||
|
id: number // 主键ID
|
||||
|
name?: string // 名称
|
||||
|
nameColor: string // 名称颜色
|
||||
|
color?: string // 颜色
|
||||
|
level?: number // 警报方式/级别（0：正常状态；1：一级警报；2：二级警报；3：弹窗警报）
|
||||
|
sortOrder?: number // 排序
|
||||
|
remark: string // 备注
|
||||
|
} |
||||
|
|
||||
|
// GAS警报类型 API
|
||||
|
export const AlarmTypeApi = { |
||||
|
// 查询GAS警报类型分页
|
||||
|
getAlarmTypePage: async (params: any) => { |
||||
|
return await request.get({ url: `/gas/alarm-type/page`, params }) |
||||
|
}, |
||||
|
|
||||
|
// 查询GAS警报类型详情
|
||||
|
getAlarmType: async (id: number) => { |
||||
|
return await request.get({ url: `/gas/alarm-type/get?id=` + id }) |
||||
|
}, |
||||
|
|
||||
|
// 新增GAS警报类型
|
||||
|
createAlarmType: async (data: AlarmType) => { |
||||
|
return await request.post({ url: `/gas/alarm-type/create`, data }) |
||||
|
}, |
||||
|
|
||||
|
// 修改GAS警报类型
|
||||
|
updateAlarmType: async (data: AlarmType) => { |
||||
|
return await request.put({ url: `/gas/alarm-type/update`, data }) |
||||
|
}, |
||||
|
|
||||
|
// 删除GAS警报类型
|
||||
|
deleteAlarmType: async (id: number) => { |
||||
|
return await request.delete({ url: `/gas/alarm-type/delete?id=` + id }) |
||||
|
}, |
||||
|
|
||||
|
/** 批量删除GAS警报类型 */ |
||||
|
deleteAlarmTypeList: async (ids: number[]) => { |
||||
|
return await request.delete({ url: `/gas/alarm-type/delete-list?ids=${ids.join(',')}` }) |
||||
|
}, |
||||
|
|
||||
|
// 导出GAS警报类型 Excel
|
||||
|
exportAlarmType: async (params) => { |
||||
|
return await request.download({ url: `/gas/alarm-type/export-excel`, params }) |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,64 @@ |
|||||
|
import request from '@/config/axios' |
||||
|
import type { Dayjs } from 'dayjs' |
||||
|
|
||||
|
/** GAS工厂信息 */ |
||||
|
export interface Factory { |
||||
|
id: number // 主键ID
|
||||
|
parentId?: number // 父节点ID
|
||||
|
type: number // 层级（1：工厂；2：车间；3：班组）
|
||||
|
name?: string // 名称
|
||||
|
city: string // 城市
|
||||
|
alarmTotal?: number // 总警报数
|
||||
|
alarmDeal?: number // 已处理警报数
|
||||
|
picUrl: string // 区域图
|
||||
|
picScale: number // 区域图缩放比例
|
||||
|
picX: number // 在区域图X坐标值
|
||||
|
picY: number // 在区域图X坐标值
|
||||
|
longitude: number // 经度
|
||||
|
latitude: number // 纬度
|
||||
|
rectSouthWest: string // 区域西南坐标
|
||||
|
rectNorthEast: string // 区域东北坐标
|
||||
|
sortOrder?: number // 排序
|
||||
|
remark: string // 备注
|
||||
|
delFlag?: number // 删除标志
|
||||
|
createBy?: string // 创建者
|
||||
|
updateBy: string // 更新者
|
||||
|
} |
||||
|
|
||||
|
// GAS工厂 API
|
||||
|
export const FactoryApi = { |
||||
|
// 查询GAS工厂分页
|
||||
|
getFactoryPage: async (params: any) => { |
||||
|
return await request.get({ url: `/gas/factory/page`, params }) |
||||
|
}, |
||||
|
|
||||
|
// 查询GAS工厂详情
|
||||
|
getFactory: async (id: number) => { |
||||
|
return await request.get({ url: `/gas/factory/get?id=` + id }) |
||||
|
}, |
||||
|
|
||||
|
// 新增GAS工厂
|
||||
|
createFactory: async (data: Factory) => { |
||||
|
return await request.post({ url: `/gas/factory/create`, data }) |
||||
|
}, |
||||
|
|
||||
|
// 修改GAS工厂
|
||||
|
updateFactory: async (data: Factory) => { |
||||
|
return await request.put({ url: `/gas/factory/update`, data }) |
||||
|
}, |
||||
|
|
||||
|
// 删除GAS工厂
|
||||
|
deleteFactory: async (id: number) => { |
||||
|
return await request.delete({ url: `/gas/factory/delete?id=` + id }) |
||||
|
}, |
||||
|
|
||||
|
/** 批量删除GAS工厂 */ |
||||
|
deleteFactoryList: async (ids: number[]) => { |
||||
|
return await request.delete({ url: `/gas/factory/delete-list?ids=${ids.join(',')}` }) |
||||
|
}, |
||||
|
|
||||
|
// 导出GAS工厂 Excel
|
||||
|
exportFactory: async (params) => { |
||||
|
return await request.download({ url: `/gas/factory/export-excel`, params }) |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,50 @@ |
|||||
|
import request from '@/config/axios' |
||||
|
import type { Dayjs } from 'dayjs' |
||||
|
|
||||
|
/** GAS电子围栏信息 */ |
||||
|
export interface Fence { |
||||
|
id: number // 主键ID
|
||||
|
name: string // 围栏名称
|
||||
|
fenceRange: string // 围栏范围
|
||||
|
status: number // 状态(1启用,2禁用)
|
||||
|
type: number // 围栏类型(1:超出报警，2:进入报警)
|
||||
|
remark: string // 备注
|
||||
|
} |
||||
|
|
||||
|
// GAS电子围栏 API
|
||||
|
export const FenceApi = { |
||||
|
// 查询GAS电子围栏分页
|
||||
|
getFencePage: async (params: any) => { |
||||
|
return await request.get({ url: `/gas/fence/page`, params }) |
||||
|
}, |
||||
|
|
||||
|
// 查询GAS电子围栏详情
|
||||
|
getFence: async (id: number) => { |
||||
|
return await request.get({ url: `/gas/fence/get?id=` + id }) |
||||
|
}, |
||||
|
|
||||
|
// 新增GAS电子围栏
|
||||
|
createFence: async (data: Fence) => { |
||||
|
return await request.post({ url: `/gas/fence/create`, data }) |
||||
|
}, |
||||
|
|
||||
|
// 修改GAS电子围栏
|
||||
|
updateFence: async (data: Fence) => { |
||||
|
return await request.put({ url: `/gas/fence/update`, data }) |
||||
|
}, |
||||
|
|
||||
|
// 删除GAS电子围栏
|
||||
|
deleteFence: async (id: number) => { |
||||
|
return await request.delete({ url: `/gas/fence/delete?id=` + id }) |
||||
|
}, |
||||
|
|
||||
|
/** 批量删除GAS电子围栏 */ |
||||
|
deleteFenceList: async (ids: number[]) => { |
||||
|
return await request.delete({ url: `/gas/fence/delete-list?ids=${ids.join(',')}` }) |
||||
|
}, |
||||
|
|
||||
|
// 导出GAS电子围栏 Excel
|
||||
|
exportFence: async (params) => { |
||||
|
return await request.download({ url: `/gas/fence/export-excel`, params }) |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,56 @@ |
|||||
|
import request from '@/config/axios' |
||||
|
import type { Dayjs } from 'dayjs' |
||||
|
|
||||
|
/** GAS手持探测器围栏报警信息 */ |
||||
|
export interface FenceAlarm { |
||||
|
id: number // 主键ID
|
||||
|
detectorId?: number // 探头ID
|
||||
|
fenceId: number // 围栏id
|
||||
|
type: number // 报警类型
|
||||
|
picX: number // 在区域图X坐标值
|
||||
|
picY: number // 在区域图X坐标值
|
||||
|
distance: number // 超出围栏米数
|
||||
|
maxDistance: number // 最远超出米数
|
||||
|
tAlarmStart: string | Dayjs // 开始时间
|
||||
|
tAlarmEnd: string | Dayjs // 结束时间
|
||||
|
status: number // 状态（0：待处理；1：处理中；1：已处理）
|
||||
|
remark: string // 备注
|
||||
|
} |
||||
|
|
||||
|
// GAS手持探测器围栏报警 API
|
||||
|
export const FenceAlarmApi = { |
||||
|
// 查询GAS手持探测器围栏报警分页
|
||||
|
getFenceAlarmPage: async (params: any) => { |
||||
|
return await request.get({ url: `/gas/fence-alarm/page`, params }) |
||||
|
}, |
||||
|
|
||||
|
// 查询GAS手持探测器围栏报警详情
|
||||
|
getFenceAlarm: async (id: number) => { |
||||
|
return await request.get({ url: `/gas/fence-alarm/get?id=` + id }) |
||||
|
}, |
||||
|
|
||||
|
// 新增GAS手持探测器围栏报警
|
||||
|
createFenceAlarm: async (data: FenceAlarm) => { |
||||
|
return await request.post({ url: `/gas/fence-alarm/create`, data }) |
||||
|
}, |
||||
|
|
||||
|
// 修改GAS手持探测器围栏报警
|
||||
|
updateFenceAlarm: async (data: FenceAlarm) => { |
||||
|
return await request.put({ url: `/gas/fence-alarm/update`, data }) |
||||
|
}, |
||||
|
|
||||
|
// 删除GAS手持探测器围栏报警
|
||||
|
deleteFenceAlarm: async (id: number) => { |
||||
|
return await request.delete({ url: `/gas/fence-alarm/delete?id=` + id }) |
||||
|
}, |
||||
|
|
||||
|
/** 批量删除GAS手持探测器围栏报警 */ |
||||
|
deleteFenceAlarmList: async (ids: number[]) => { |
||||
|
return await request.delete({ url: `/gas/fence-alarm/delete-list?ids=${ids.join(',')}` }) |
||||
|
}, |
||||
|
|
||||
|
// 导出GAS手持探测器围栏报警 Excel
|
||||
|
exportFenceAlarm: async (params) => { |
||||
|
return await request.download({ url: `/gas/fence-alarm/export-excel`, params }) |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,50 @@ |
|||||
|
import request from '@/config/axios' |
||||
|
import type { Dayjs } from 'dayjs' |
||||
|
|
||||
|
/** GAS气体信息 */ |
||||
|
export interface Type { |
||||
|
id: number // 主键ID
|
||||
|
name?: string // 名称
|
||||
|
chemical?: string // 化学式
|
||||
|
unit: string // 单位
|
||||
|
sortOrder?: number // 排序
|
||||
|
remark: string // 备注
|
||||
|
} |
||||
|
|
||||
|
// GAS气体 API
|
||||
|
export const TypeApi = { |
||||
|
// 查询GAS气体分页
|
||||
|
getTypePage: async (params: any) => { |
||||
|
return await request.get({ url: `/gas/type/page`, params }) |
||||
|
}, |
||||
|
|
||||
|
// 查询GAS气体详情
|
||||
|
getType: async (id: number) => { |
||||
|
return await request.get({ url: `/gas/type/get?id=` + id }) |
||||
|
}, |
||||
|
|
||||
|
// 新增GAS气体
|
||||
|
createType: async (data: Type) => { |
||||
|
return await request.post({ url: `/gas/type/create`, data }) |
||||
|
}, |
||||
|
|
||||
|
// 修改GAS气体
|
||||
|
updateType: async (data: Type) => { |
||||
|
return await request.put({ url: `/gas/type/update`, data }) |
||||
|
}, |
||||
|
|
||||
|
// 删除GAS气体
|
||||
|
deleteType: async (id: number) => { |
||||
|
return await request.delete({ url: `/gas/type/delete?id=` + id }) |
||||
|
}, |
||||
|
|
||||
|
/** 批量删除GAS气体 */ |
||||
|
deleteTypeList: async (ids: number[]) => { |
||||
|
return await request.delete({ url: `/gas/type/delete-list?ids=${ids.join(',')}` }) |
||||
|
}, |
||||
|
|
||||
|
// 导出GAS气体 Excel
|
||||
|
exportType: async (params) => { |
||||
|
return await request.download({ url: `/gas/type/export-excel`, params }) |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,60 @@ |
|||||
|
import request from '@/config/axios' |
||||
|
import type { Dayjs } from 'dayjs' |
||||
|
|
||||
|
/** GAS手持探测器警报信息 */ |
||||
|
export interface HandAlarm { |
||||
|
id: number // 主键ID
|
||||
|
detectorId: number // 手持表id
|
||||
|
sn: string // 设备编号
|
||||
|
alarmType: number // 报警类型
|
||||
|
alarmLevel?: number // 警报方式/级别（0：正常状态；1：一级警报；2：二级警报；3：弹窗警报）
|
||||
|
gasType?: string // 气体类型
|
||||
|
unit?: string // 单位
|
||||
|
location: string // 位置描述
|
||||
|
picX: number // 在区域图X坐标值
|
||||
|
picY?: number // 在区域图X坐标值
|
||||
|
vAlarmFirst: number // 首报值
|
||||
|
vAlarmMaximum: number // 最值
|
||||
|
tAlarmStart: string | Dayjs // 开始时间
|
||||
|
tAlarmEnd: string | Dayjs // 结束时间
|
||||
|
status: number // 状态（0：待处理；1：处理中；1：已处理）
|
||||
|
remark?: string // 备注
|
||||
|
} |
||||
|
|
||||
|
// GAS手持探测器警报 API
|
||||
|
export const HandAlarmApi = { |
||||
|
// 查询GAS手持探测器警报分页
|
||||
|
getHandAlarmPage: async (params: any) => { |
||||
|
return await request.get({ url: `/gas/hand-alarm/page`, params }) |
||||
|
}, |
||||
|
|
||||
|
// 查询GAS手持探测器警报详情
|
||||
|
getHandAlarm: async (id: number) => { |
||||
|
return await request.get({ url: `/gas/hand-alarm/get?id=` + id }) |
||||
|
}, |
||||
|
|
||||
|
// 新增GAS手持探测器警报
|
||||
|
createHandAlarm: async (data: HandAlarm) => { |
||||
|
return await request.post({ url: `/gas/hand-alarm/create`, data }) |
||||
|
}, |
||||
|
|
||||
|
// 修改GAS手持探测器警报
|
||||
|
updateHandAlarm: async (data: HandAlarm) => { |
||||
|
return await request.put({ url: `/gas/hand-alarm/update`, data }) |
||||
|
}, |
||||
|
|
||||
|
// 删除GAS手持探测器警报
|
||||
|
deleteHandAlarm: async (id: number) => { |
||||
|
return await request.delete({ url: `/gas/hand-alarm/delete?id=` + id }) |
||||
|
}, |
||||
|
|
||||
|
/** 批量删除GAS手持探测器警报 */ |
||||
|
deleteHandAlarmList: async (ids: number[]) => { |
||||
|
return await request.delete({ url: `/gas/hand-alarm/delete-list?ids=${ids.join(',')}` }) |
||||
|
}, |
||||
|
|
||||
|
// 导出GAS手持探测器警报 Excel
|
||||
|
exportHandAlarm: async (params) => { |
||||
|
return await request.download({ url: `/gas/hand-alarm/export-excel`, params }) |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,63 @@ |
|||||
|
import request from '@/config/axios' |
||||
|
import type { Dayjs } from 'dayjs' |
||||
|
|
||||
|
/** GAS手持探测器信息 */ |
||||
|
export interface HandDetector { |
||||
|
id: number // 主键ID
|
||||
|
sn?: string // SN
|
||||
|
name?: string // 持有人
|
||||
|
fenceIds?: string // 围栏ids
|
||||
|
fenceIdsArray?: string[] // 围栏ids数组
|
||||
|
gasTypeId?: number // 气体类型ID
|
||||
|
gasChemical?: string // 气体化学式
|
||||
|
min?: number // 测量范围中的最小值
|
||||
|
max?: number // 测量范围中的最大值
|
||||
|
unit?: string // 单位
|
||||
|
model?: string // 设备型号
|
||||
|
manufacturer?: string // 生产厂家
|
||||
|
batteryAlarmValue?: number // 低于多少电量报警
|
||||
|
enableStatus?: number // 启用状态（0：备用；1：启用）
|
||||
|
longitude?: number // 经度
|
||||
|
latitude?: number // 纬度
|
||||
|
accuracy?: number // 数值除数
|
||||
|
sortOrder?: number // 排序
|
||||
|
remark?: string // 备注
|
||||
|
} |
||||
|
|
||||
|
// GAS手持探测器 API
|
||||
|
export const HandDetectorApi = { |
||||
|
// 查询GAS手持探测器分页
|
||||
|
getHandDetectorPage: async (params: any) => { |
||||
|
return await request.get({ url: `/gas/hand-detector/page`, params }) |
||||
|
}, |
||||
|
|
||||
|
// 查询GAS手持探测器详情
|
||||
|
getHandDetector: async (id: number) => { |
||||
|
return await request.get({ url: `/gas/hand-detector/get?id=` + id }) |
||||
|
}, |
||||
|
|
||||
|
// 新增GAS手持探测器
|
||||
|
createHandDetector: async (data: HandDetector) => { |
||||
|
return await request.post({ url: `/gas/hand-detector/create`, data }) |
||||
|
}, |
||||
|
|
||||
|
// 修改GAS手持探测器
|
||||
|
updateHandDetector: async (data: HandDetector) => { |
||||
|
return await request.put({ url: `/gas/hand-detector/update`, data }) |
||||
|
}, |
||||
|
|
||||
|
// 删除GAS手持探测器
|
||||
|
deleteHandDetector: async (id: number) => { |
||||
|
return await request.delete({ url: `/gas/hand-detector/delete?id=` + id }) |
||||
|
}, |
||||
|
|
||||
|
/** 批量删除GAS手持探测器 */ |
||||
|
deleteHandDetectorList: async (ids: number[]) => { |
||||
|
return await request.delete({ url: `/gas/hand-detector/delete-list?ids=${ids.join(',')}` }) |
||||
|
}, |
||||
|
|
||||
|
// 导出GAS手持探测器 Excel
|
||||
|
exportHandDetector: async (params) => { |
||||
|
return await request.download({ url: `/gas/hand-detector/export-excel`, params }) |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,7 @@ |
|||||
|
import request from '@/config/axios' |
||||
|
|
||||
|
const getLastestDetectorData = async () => { |
||||
|
const data = await request.get({ url: `/gas/hand-detector/getByHandData` }) |
||||
|
return Object.values(data) |
||||
|
} |
||||
|
export { getLastestDetectorData } |
||||
@ -0,0 +1,81 @@ |
|||||
|
import { defineStore } from 'pinia' |
||||
|
import { store } from '@/store' |
||||
|
import { HandDetector, HandDetectorApi } from '@/api/gas/handdetector' |
||||
|
import { Type, TypeApi } from '@/api/gas/gastype' |
||||
|
import { Fence, FenceApi } from '@/api/gas/fence' |
||||
|
import { AlarmType, AlarmTypeApi } from '@/api/gas/alarmtype' |
||||
|
|
||||
|
export const useHandDetectorStore = defineStore('handDetector', { |
||||
|
state() { |
||||
|
return { |
||||
|
handDetectorList: [] as HandDetector[], |
||||
|
gasTypes: [] as Type[], |
||||
|
fences: [] as Fence[], |
||||
|
alarmTypes: [] as AlarmType[] |
||||
|
} |
||||
|
}, |
||||
|
getters: { |
||||
|
getHandDetectorList(): HandDetector[] { |
||||
|
return this.handDetectorList |
||||
|
}, |
||||
|
getGasTypes(): Type[] { |
||||
|
return this.gasTypes |
||||
|
}, |
||||
|
getFences(): Fence[] { |
||||
|
return this.fences |
||||
|
}, |
||||
|
getAlarmTypes(): AlarmType[] { |
||||
|
return this.alarmTypes |
||||
|
} |
||||
|
}, |
||||
|
actions: { |
||||
|
async getAllHandDetector(refresh: boolean = false) { |
||||
|
if (refresh || this.handDetectorList.length === 0) { |
||||
|
const data = await HandDetectorApi.getHandDetectorPage({ |
||||
|
pageNo: 1, |
||||
|
pageSize: 100 |
||||
|
}) |
||||
|
this.handDetectorList = data.list |
||||
|
return this.handDetectorList |
||||
|
} else { |
||||
|
return this.handDetectorList |
||||
|
} |
||||
|
}, |
||||
|
async getAllFences(refresh: boolean = false) { |
||||
|
if (refresh || this.fences.length === 0) { |
||||
|
const data = await FenceApi.getFencePage({ |
||||
|
pageNo: 1, |
||||
|
pageSize: 100 |
||||
|
}) |
||||
|
this.fences = data.list |
||||
|
return this.fences |
||||
|
} else { |
||||
|
return this.fences |
||||
|
} |
||||
|
}, |
||||
|
async getAllGasTypes(refresh: boolean = false) { |
||||
|
if (refresh || this.gasTypes.length === 0) { |
||||
|
const data = await TypeApi.getTypePage({ |
||||
|
pageNo: 1, |
||||
|
pageSize: 100 |
||||
|
}) |
||||
|
this.gasTypes = data.list |
||||
|
return this.gasTypes |
||||
|
} else { |
||||
|
return this.gasTypes |
||||
|
} |
||||
|
}, |
||||
|
async getAllAlarmTypes(refresh: boolean = false) { |
||||
|
if (refresh || this.alarmTypes.length === 0) { |
||||
|
const data = await AlarmTypeApi.getAlarmTypePage({ |
||||
|
pageNo: 1, |
||||
|
pageSize: 100 |
||||
|
}) |
||||
|
this.alarmTypes = data.list |
||||
|
return this.alarmTypes |
||||
|
} else { |
||||
|
return this.alarmTypes |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
@ -0,0 +1,4 @@ |
|||||
|
<template>历史数据</template> |
||||
|
<script setup lang="ts"> |
||||
|
defineOptions({ name: 'HandDeviceHistory' }) |
||||
|
</script> |
||||
@ -0,0 +1,139 @@ |
|||||
|
<template> |
||||
|
<div class="map-controls"> |
||||
|
<el-button |
||||
|
v-if="showMarkers" |
||||
|
:type="isMarkersActive ? 'primary' : 'default'" |
||||
|
@click="$emit('toggle-markers')" |
||||
|
class="control-btn" |
||||
|
> |
||||
|
<el-icon><MapLocation /></el-icon> |
||||
|
</el-button> |
||||
|
|
||||
|
<el-button |
||||
|
v-if="showFences" |
||||
|
:type="isFencesActive ? 'primary' : 'default'" |
||||
|
@click="$emit('toggle-fences')" |
||||
|
class="control-btn" |
||||
|
> |
||||
|
<el-icon><Menu /></el-icon> |
||||
|
</el-button> |
||||
|
|
||||
|
<el-button |
||||
|
v-if="showTrajectories" |
||||
|
:type="isTrajectoriesActive ? 'primary' : 'default'" |
||||
|
@click="$emit('toggle-trajectories')" |
||||
|
class="control-btn" |
||||
|
> |
||||
|
<el-icon><Timer /></el-icon> |
||||
|
</el-button> |
||||
|
|
||||
|
<el-button |
||||
|
v-if="showDrawFences" |
||||
|
:type="isDrawFencesActive ? 'primary' : 'default'" |
||||
|
@click="$emit('toggle-draw-fences')" |
||||
|
class="control-btn" |
||||
|
> |
||||
|
<el-icon><Edit /></el-icon> |
||||
|
</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup> |
||||
|
import { Timer, MapLocation, Menu, Edit } from '@element-plus/icons-vue' |
||||
|
|
||||
|
interface Props { |
||||
|
/** 是否显示标记控制按钮 */ |
||||
|
showMarkers?: boolean |
||||
|
/** 是否显示围栏控制按钮 */ |
||||
|
showFences?: boolean |
||||
|
/** 是否显示轨迹控制按钮 */ |
||||
|
showTrajectories?: boolean |
||||
|
/** 是否显示绘制围栏控制按钮 */ |
||||
|
showDrawFences?: boolean |
||||
|
/** 标记按钮是否激活 */ |
||||
|
isMarkersActive?: boolean |
||||
|
/** 围栏按钮是否激活 */ |
||||
|
isFencesActive?: boolean |
||||
|
/** 轨迹按钮是否激活 */ |
||||
|
isTrajectoriesActive?: boolean |
||||
|
/** 绘制围栏按钮是否激活 */ |
||||
|
isDrawFencesActive?: boolean |
||||
|
} |
||||
|
|
||||
|
interface Emits { |
||||
|
(e: 'toggle-markers'): void |
||||
|
(e: 'toggle-fences'): void |
||||
|
(e: 'toggle-trajectories'): void |
||||
|
(e: 'toggle-draw-fences'): void |
||||
|
} |
||||
|
|
||||
|
withDefaults(defineProps<Props>(), { |
||||
|
showMarkers: true, |
||||
|
showFences: true, |
||||
|
showTrajectories: true, |
||||
|
showDrawFences: true, |
||||
|
isMarkersActive: false, |
||||
|
isFencesActive: false, |
||||
|
isTrajectoriesActive: false, |
||||
|
isDrawFencesActive: false |
||||
|
}) |
||||
|
|
||||
|
defineEmits<Emits>() |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.map-controls { |
||||
|
position: absolute; |
||||
|
padding-left: 20px; |
||||
|
top: 150px; |
||||
|
left: 20px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 8px; |
||||
|
z-index: 1000; |
||||
|
} |
||||
|
|
||||
|
.control-btn { |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
border-radius: 50%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); |
||||
|
background: rgba(255, 255, 255, 0.95); |
||||
|
backdrop-filter: blur(10px); |
||||
|
border: 1px solid rgba(255, 255, 255, 0.2); |
||||
|
transition: all 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.control-btn:hover { |
||||
|
transform: translateY(-2px); |
||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); |
||||
|
} |
||||
|
|
||||
|
.control-btn.el-button--primary { |
||||
|
background: #409eff; |
||||
|
} |
||||
|
|
||||
|
.control-btn.el-button--primary:hover { |
||||
|
background: #337ecc; |
||||
|
} |
||||
|
.el-button + .el-button { |
||||
|
margin-left: 0; |
||||
|
} |
||||
|
@media (max-width: 768px) { |
||||
|
.map-controls { |
||||
|
flex-direction: row; |
||||
|
padding-left: 0; |
||||
|
top: 10px; |
||||
|
left: 50%; |
||||
|
transform: translateX(-50%); |
||||
|
} |
||||
|
|
||||
|
.control-btn { |
||||
|
width: 36px; |
||||
|
height: 36px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,510 @@ |
|||||
|
<template> |
||||
|
<div class="map-container" ref="mapContainerRef"> |
||||
|
<MapControls |
||||
|
:show-markers="props.showMarkers" |
||||
|
:show-fences="props.showFences" |
||||
|
:show-trajectories="props.showTrajectories" |
||||
|
:show-draw-fences="props.showDrawFences" |
||||
|
:is-markers-active="showMarkers" |
||||
|
:is-fences-active="showFences" |
||||
|
:is-trajectories-active="showTrajectories" |
||||
|
:is-draw-fences-active="showDrawFences" |
||||
|
@toggle-markers="toggleMarkers" |
||||
|
@toggle-fences="toggleFences" |
||||
|
@toggle-trajectories="toggleTrajectories" |
||||
|
@toggle-draw-fences="toggleDrawFences" |
||||
|
/> |
||||
|
<TrajectoryControls |
||||
|
:show-controls="showTrajectories" |
||||
|
:play-state="trajectoryPlayState" |
||||
|
@play="playTrajectory" |
||||
|
@pause="pauseTrajectory" |
||||
|
@stop="stopTrajectory" |
||||
|
@speed-change="setTrajectorySpeed" |
||||
|
@time-change="setTrajectoryTime" |
||||
|
@time-range-change="setTrajectoryTimeRange" |
||||
|
/> |
||||
|
<div class="top-panel" v-show="!appStore.mobile"> |
||||
|
<div class="top-panel__left"> |
||||
|
<div class="search-group"> |
||||
|
<el-input v-model="search" class="search-input" placeholder="请输入关键词" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="top-panel__center"> |
||||
|
<div class="data_item"> |
||||
|
<div class="data_item__title">手持设备</div> |
||||
|
<div class="data_item__value">2000<span class="data_item__unit">台</span></div> |
||||
|
</div> |
||||
|
<div class="data_item"> |
||||
|
<div class="data_item__title">在线数量</div> |
||||
|
<div class="data_item__value">200<span class="data_item__unit">台</span></div> |
||||
|
</div> |
||||
|
<div class="data_item"> |
||||
|
<div class="data_item__title">用户数量</div> |
||||
|
<div class="data_item__value">200<span class="data_item__unit">人</span></div> |
||||
|
</div> |
||||
|
<div class="data_item"> |
||||
|
<div class="data_item__title">企业数量</div> |
||||
|
<div class="data_item__value">20<span class="data_item__unit">家</span></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="top-panel__right"> |
||||
|
<span class="legend-title">报警图例：</span> |
||||
|
<div class="normal-legend">正常状态</div> |
||||
|
<div class="alarm1-legend">围栏报警</div> |
||||
|
<div class="alarm2-legend">气体报警</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div v-if="panelVisible" class="info-panel"> |
||||
|
<div class="info-panel__header"> |
||||
|
<span class="info-panel__title">设备详情</span> |
||||
|
<button class="info-panel__close" @click="panelVisible = false">×</button> |
||||
|
</div> |
||||
|
<div class="info-panel__body"> |
||||
|
<div v-if="selectedMarker"> |
||||
|
<div class="info-panel__name">{{ selectedMarker.name }}</div> |
||||
|
<div class="info-panel__coord" |
||||
|
>坐标：{{ selectedMarker.coordinates[0].toFixed(6) }}, |
||||
|
{{ selectedMarker.coordinates[1].toFixed(6) }}</div |
||||
|
> |
||||
|
</div> |
||||
|
<div v-else class="info-panel__empty">未选择设备</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script lang="ts" setup> |
||||
|
import { useAppStore } from '@/store/modules/app' |
||||
|
import { useHandDetectorStore } from '@/store/modules/handDetector' |
||||
|
import { ref, onMounted, watch } from 'vue' |
||||
|
import { ElMessage } from 'element-plus' |
||||
|
// 导入类型定义 |
||||
|
import type { MapProps, MarkerData } from './types/map.types' |
||||
|
|
||||
|
// 导入常量配置 |
||||
|
import { MAP_DEFAULTS, DEFAULT_MARKERS, DEFAULT_FENCES } from './constants/map.constants' |
||||
|
|
||||
|
// 导入组合式函数 |
||||
|
import { useMapServices } from './composables/useMapServices' |
||||
|
import { useMapEvents } from './composables/useMapEvents' |
||||
|
import { useTrajectoryControls } from './composables/useTrajectoryControls' |
||||
|
import { useMapWatchers } from './composables/useMapWatchers' |
||||
|
|
||||
|
// 导入组件 |
||||
|
import TrajectoryControls from './TrajectoryControls.vue' |
||||
|
import MapControls from './MapControls.vue' |
||||
|
const props = withDefaults(defineProps<MapProps>(), { |
||||
|
tileUrl: MAP_DEFAULTS.tileUrl, |
||||
|
center: () => MAP_DEFAULTS.center, |
||||
|
zoom: MAP_DEFAULTS.zoom, |
||||
|
maxZoom: MAP_DEFAULTS.maxZoom, |
||||
|
minZoom: MAP_DEFAULTS.minZoom, |
||||
|
markers: () => DEFAULT_MARKERS, |
||||
|
fences: () => DEFAULT_FENCES, |
||||
|
enableCluster: MAP_DEFAULTS.enableCluster, |
||||
|
clusterDistance: MAP_DEFAULTS.clusterDistance, |
||||
|
showTrajectories: true, |
||||
|
showMarkers: true, |
||||
|
showFences: true, |
||||
|
showDrawFences: true |
||||
|
}) |
||||
|
// 响应式状态 |
||||
|
const showMarkers = ref(props.showMarkers) |
||||
|
const showTrajectories = ref(false) |
||||
|
const showFences = ref(false) |
||||
|
const showDrawFences = ref(false) |
||||
|
const mapContainerRef = ref<HTMLElement | null>(null) |
||||
|
const handDetectorStore = useHandDetectorStore() |
||||
|
// 左侧信息面板状态 |
||||
|
const appStore = useAppStore() |
||||
|
const panelVisible = ref(false) |
||||
|
const selectedMarker = ref<MarkerData | null>(null) |
||||
|
const search = ref('') |
||||
|
|
||||
|
// 使用组合式函数 |
||||
|
const { |
||||
|
services, |
||||
|
layerRefs, |
||||
|
initializeServices, |
||||
|
initializeMapAndLayers, |
||||
|
setMarkersVisible, |
||||
|
setTrajectoriesVisible, |
||||
|
setFencesVisible, |
||||
|
toggleFenceDrawing, |
||||
|
clearFenceDrawLayer, |
||||
|
updateMarkers, |
||||
|
refreshMarkerStyles |
||||
|
} = useMapServices() |
||||
|
|
||||
|
const { |
||||
|
trajectoryPlayState, |
||||
|
playTrajectory, |
||||
|
pauseTrajectory, |
||||
|
stopTrajectory, |
||||
|
setTrajectorySpeed, |
||||
|
setTrajectoryTime, |
||||
|
setTrajectoryTimeRange, |
||||
|
setupTrajectoryWatcher, |
||||
|
cleanup: cleanupTrajectory |
||||
|
} = useTrajectoryControls() |
||||
|
|
||||
|
const { setupMapEventListeners } = useMapEvents() |
||||
|
|
||||
|
// 控制函数 |
||||
|
const toggleTrajectories = () => { |
||||
|
if (showTrajectories.value && trajectoryPlayState.value.isPlaying) { |
||||
|
cleanupTrajectory() |
||||
|
} |
||||
|
showTrajectories.value = !showTrajectories.value |
||||
|
} |
||||
|
|
||||
|
const toggleMarkers = () => { |
||||
|
showMarkers.value = !showMarkers.value |
||||
|
} |
||||
|
|
||||
|
const toggleFences = () => { |
||||
|
showFences.value = !showFences.value |
||||
|
} |
||||
|
|
||||
|
const toggleDrawFences = () => { |
||||
|
showDrawFences.value = !showDrawFences.value |
||||
|
|
||||
|
if (showDrawFences.value) { |
||||
|
// 开始绘制围栏 |
||||
|
toggleFenceDrawing(true, handleFenceDrawComplete) |
||||
|
} else { |
||||
|
// 停止绘制围栏 |
||||
|
toggleFenceDrawing(false) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
import { MapService } from './services/map.service' |
||||
|
let mapService: MapService | null = null |
||||
|
let isMapInitialized = false |
||||
|
/** |
||||
|
* 初始化地图 |
||||
|
*/ |
||||
|
const initMap = () => { |
||||
|
if (!mapContainerRef.value) return |
||||
|
|
||||
|
// 初始化服务 |
||||
|
mapService = new MapService() |
||||
|
|
||||
|
// 初始化地图 |
||||
|
|
||||
|
try { |
||||
|
// 初始化服务 |
||||
|
initializeServices() |
||||
|
const mapInstance = mapService.initMap(mapContainerRef.value, props) |
||||
|
// 初始化地图和图层 |
||||
|
const { map, popupOverlay } = initializeMapAndLayers(mapInstance, props) |
||||
|
|
||||
|
// 设置初始显示状态 |
||||
|
setMarkersVisible(showMarkers.value) |
||||
|
setTrajectoriesVisible(showTrajectories.value, props.markers) |
||||
|
setFencesVisible(showFences.value) |
||||
|
|
||||
|
// 设置事件监听器 |
||||
|
setupMapEventListeners( |
||||
|
map, |
||||
|
popupOverlay, |
||||
|
services.trajectoryService as any, |
||||
|
services.popupService, |
||||
|
{ |
||||
|
isDrawing: () => !!services.fenceDrawService?.isCurrentlyDrawing?.(), |
||||
|
onMarkerClick: (marker: MarkerData) => { |
||||
|
selectedMarker.value = marker |
||||
|
panelVisible.value = true |
||||
|
}, |
||||
|
markerLayer: layerRefs.value?.markerLayer, |
||||
|
refreshMarkerStyles |
||||
|
} |
||||
|
) |
||||
|
// 设置轨迹监听器 |
||||
|
setupTrajectoryWatcher(services.trajectoryService as any, showTrajectories) |
||||
|
|
||||
|
// 设置状态监听器 |
||||
|
const { setupAllWatchers } = useMapWatchers({ |
||||
|
showMarkers, |
||||
|
showTrajectories, |
||||
|
showFences, |
||||
|
showDrawFences, |
||||
|
setMarkersVisible, |
||||
|
setTrajectoriesVisible, |
||||
|
setFencesVisible, |
||||
|
toggleFenceDrawing, |
||||
|
updateMarkers, |
||||
|
markers: props.markers || [] |
||||
|
}) |
||||
|
|
||||
|
setupAllWatchers() |
||||
|
|
||||
|
// 标记地图已初始化 |
||||
|
isMapInitialized = true |
||||
|
|
||||
|
console.log('地图初始化成功', { map, services: services }) |
||||
|
} catch (error) { |
||||
|
console.error('地图初始化失败:', error) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 处理围栏绘制完成 |
||||
|
*/ |
||||
|
const handleFenceDrawComplete = (coordinates: [number, number][]) => { |
||||
|
if (coordinates.length < 3) { |
||||
|
// 围栏至少需要3个点 |
||||
|
ElMessage.warning('围栏至少需要3个点才能形成有效区域') |
||||
|
return |
||||
|
} |
||||
|
console.log('围栏绘制完成:', coordinates) |
||||
|
clearFenceDrawLayer() |
||||
|
// 重置绘制状态 |
||||
|
showDrawFences.value = false |
||||
|
} |
||||
|
// 监听 markers props 变化 |
||||
|
watch( |
||||
|
() => props.markers, |
||||
|
(newMarkers) => { |
||||
|
if (newMarkers && newMarkers.length > 0 && isMapInitialized) { |
||||
|
updateMarkers(newMarkers, props) |
||||
|
} |
||||
|
}, |
||||
|
{ deep: true, immediate: false } |
||||
|
) |
||||
|
|
||||
|
onMounted(() => { |
||||
|
setTimeout(() => { |
||||
|
initMap() |
||||
|
}, 100) |
||||
|
}) |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.map-container { |
||||
|
width: 100%; |
||||
|
height: calc(100vh - 120px); |
||||
|
} |
||||
|
|
||||
|
:deep(.ol-viewport) { |
||||
|
width: 100% !important; |
||||
|
height: 100% !important; |
||||
|
} |
||||
|
|
||||
|
:deep(.ol-map) { |
||||
|
width: 100% !important; |
||||
|
height: 100% !important; |
||||
|
} |
||||
|
|
||||
|
.info-panel { |
||||
|
position: absolute; |
||||
|
top: 100px; |
||||
|
right: 20px; |
||||
|
background-color: rgba(255, 255, 255, 0.9); |
||||
|
border-radius: 8px; |
||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); |
||||
|
z-index: 1000; |
||||
|
width: 300px; |
||||
|
max-height: 80vh; |
||||
|
overflow-y: auto; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.info-panel__header { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 10px 15px; |
||||
|
border-bottom: 1px solid #eee; |
||||
|
background-color: #f5f5f5; |
||||
|
border-radius: 8px 8px 0 0; |
||||
|
} |
||||
|
|
||||
|
.info-panel__title { |
||||
|
font-size: 16px; |
||||
|
font-weight: bold; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.info-panel__close { |
||||
|
background-color: #ff4d4f; |
||||
|
color: white; |
||||
|
border: none; |
||||
|
border-radius: 50%; |
||||
|
width: 24px; |
||||
|
height: 24px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
cursor: pointer; |
||||
|
font-size: 18px; |
||||
|
font-weight: bold; |
||||
|
transition: background-color 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.info-panel__close:hover { |
||||
|
background-color: #d9363e; |
||||
|
} |
||||
|
|
||||
|
.info-panel__body { |
||||
|
padding: 15px; |
||||
|
flex-grow: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.info-panel__empty { |
||||
|
text-align: center; |
||||
|
color: #888; |
||||
|
padding: 20px; |
||||
|
} |
||||
|
|
||||
|
.info-panel__name { |
||||
|
font-size: 18px; |
||||
|
font-weight: bold; |
||||
|
margin-bottom: 5px; |
||||
|
color: #555; |
||||
|
} |
||||
|
|
||||
|
.info-panel__coord { |
||||
|
font-size: 14px; |
||||
|
color: #666; |
||||
|
} |
||||
|
|
||||
|
/* 顶部面板样式 */ |
||||
|
.top-panel { |
||||
|
position: absolute; |
||||
|
top: 12px; |
||||
|
left: 12px; |
||||
|
right: 12px; |
||||
|
z-index: 1000; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
gap: 12px; |
||||
|
padding: 10px 12px; |
||||
|
flex-wrap: wrap; |
||||
|
height: 100px; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.top-panel__left { |
||||
|
flex: 0 0 260px; |
||||
|
background: rgba(255, 255, 255, 0.7); |
||||
|
border: 1px solid rgba(0, 0, 0, 0.06); |
||||
|
border-radius: 10px; |
||||
|
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.search-group { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 8px; |
||||
|
padding: 8px; |
||||
|
} |
||||
|
|
||||
|
.search-type { |
||||
|
flex: 0 0 120px; |
||||
|
} |
||||
|
.search-input { |
||||
|
width: 220px; |
||||
|
} |
||||
|
|
||||
|
.top-panel__center { |
||||
|
flex: 1 1 auto; |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(4, minmax(0, 1fr)); |
||||
|
gap: 12px; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.data_item { |
||||
|
background: rgba(255, 255, 255, 0.85); |
||||
|
border: 1px solid rgba(0, 0, 0, 0.06); |
||||
|
border-radius: 8px; |
||||
|
padding: 8px 12px; |
||||
|
min-height: 56px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.data_item__title { |
||||
|
font-size: 12px; |
||||
|
color: #909399; |
||||
|
} |
||||
|
|
||||
|
.data_item__value { |
||||
|
font-size: 18px; |
||||
|
font-weight: 600; |
||||
|
color: #303133; |
||||
|
margin-top: 4px; |
||||
|
} |
||||
|
|
||||
|
.data_item__unit { |
||||
|
font-size: 12px; |
||||
|
color: #909399; |
||||
|
margin-left: 6px; |
||||
|
} |
||||
|
|
||||
|
.top-panel__right { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 8px; |
||||
|
flex: 0 0 auto; |
||||
|
background: rgba(255, 255, 255, 0.7); |
||||
|
border: 1px solid rgba(0, 0, 0, 0.06); |
||||
|
padding: 8px 12px; |
||||
|
border-radius: 8px; |
||||
|
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); |
||||
|
white-space: nowrap; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.legend-title { |
||||
|
color: #606266; |
||||
|
} |
||||
|
|
||||
|
.normal-legend, |
||||
|
.alarm1-legend, |
||||
|
.alarm2-legend { |
||||
|
padding: 4px 8px; |
||||
|
border-radius: 999px; |
||||
|
color: #fff; |
||||
|
font-size: 12px; |
||||
|
line-height: 1; |
||||
|
} |
||||
|
|
||||
|
.normal-legend { |
||||
|
background: #67c23a; |
||||
|
} |
||||
|
.alarm1-legend { |
||||
|
background: #e6a23c; |
||||
|
} |
||||
|
.alarm2-legend { |
||||
|
background: #f56c6c; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 992px) { |
||||
|
.top-panel__left { |
||||
|
flex: 1 1 100%; |
||||
|
} |
||||
|
.top-panel__center { |
||||
|
flex: 1 1 100%; |
||||
|
grid-template-columns: repeat(2, minmax(0, 1fr)); |
||||
|
} |
||||
|
.top-panel__right { |
||||
|
flex: 1 1 100%; |
||||
|
justify-content: flex-start; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 600px) { |
||||
|
.top-panel__center { |
||||
|
grid-template-columns: 1fr; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,526 @@ |
|||||
|
<template> |
||||
|
<div class="trajectory-controls" v-if="showControls"> |
||||
|
<!-- 主控制面板 --> |
||||
|
<div class="control-panel"> |
||||
|
<!-- 播放控制按钮区域 --> |
||||
|
<div class="play-controls"> |
||||
|
<el-button |
||||
|
:type="playState.isPlaying ? 'warning' : 'primary'" |
||||
|
:icon="playState.isPlaying ? VideoPause : VideoPlay" |
||||
|
circle |
||||
|
size="small" |
||||
|
@click="handlePlayPause" |
||||
|
/> |
||||
|
<el-button |
||||
|
v-if="playState.isPlaying" |
||||
|
type="danger" |
||||
|
:icon="SwitchButton" |
||||
|
circle |
||||
|
size="small" |
||||
|
@click="handleStop" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 时间范围选择器 --> |
||||
|
<div class="time-range-controls" v-if="!appStore.mobile"> |
||||
|
<el-button |
||||
|
:icon="Calendar" |
||||
|
size="small" |
||||
|
:type="showTimeRangePicker ? 'primary' : 'default'" |
||||
|
@click="toggleTimeRangePicker" |
||||
|
class="time-range-btn" |
||||
|
> |
||||
|
时间选择 |
||||
|
</el-button> |
||||
|
</div> |
||||
|
<!-- 可折叠的时间范围选择器 --> |
||||
|
<div v-if="showTimeRangePicker && !appStore.mobile" class="time-range-picker"> |
||||
|
<el-date-picker |
||||
|
v-model="timeRange" |
||||
|
type="datetimerange" |
||||
|
range-separator="至" |
||||
|
start-placeholder="开始时间" |
||||
|
end-placeholder="结束时间" |
||||
|
format="MM-DD HH:mm" |
||||
|
value-format="x" |
||||
|
size="small" |
||||
|
@change="handleTimeRangeChange" |
||||
|
:clearable="false" |
||||
|
:shortcuts="shortcuts" |
||||
|
:unlink-panels="true" |
||||
|
:editable="false" |
||||
|
/> |
||||
|
</div> |
||||
|
<div v-if="appStore.mobile" class="time-range-picker"> |
||||
|
<el-button |
||||
|
@click=" |
||||
|
handleTimeRangeChange([dayjs().subtract(5, 'minute').valueOf(), dayjs().valueOf()]) |
||||
|
" |
||||
|
>近5分钟</el-button |
||||
|
> |
||||
|
<el-button |
||||
|
@click=" |
||||
|
handleTimeRangeChange([dayjs().subtract(10, 'minute').valueOf(), dayjs().valueOf()]) |
||||
|
" |
||||
|
>近10分钟</el-button |
||||
|
> |
||||
|
</div> |
||||
|
<!-- 播放速度选择器 --> |
||||
|
<div class="speed-controls"> |
||||
|
<el-select |
||||
|
size="default" |
||||
|
v-model="currentSpeed" |
||||
|
style="width: 80px" |
||||
|
@change="handleSpeedChange" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="speed in speedOptions" |
||||
|
:key="speed.value" |
||||
|
:label="speed.label" |
||||
|
:value="speed.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 时间轴 --> |
||||
|
<div class="timeline-container"> |
||||
|
<div class="time-display"> |
||||
|
{{ formatTime(playState.currentTime) }} |
||||
|
</div> |
||||
|
<div class="slider-container"> |
||||
|
<el-slider |
||||
|
v-model="currentProgress" |
||||
|
:min="playState.startTime || 0" |
||||
|
:max="playState.endTime || Date.now()" |
||||
|
:show-tooltip="false" |
||||
|
@change="handleTimeChange" |
||||
|
size="small" |
||||
|
/> |
||||
|
</div> |
||||
|
<div class="time-display"> |
||||
|
{{ formatTime(playState.endTime || Date.now()) }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup> |
||||
|
import { ref, watch, computed } from 'vue' |
||||
|
import dayjs from 'dayjs' |
||||
|
import type { TrajectoryPlayState } from './types/map.types' |
||||
|
import { VideoPlay, VideoPause, SwitchButton, Calendar } from '@element-plus/icons-vue' |
||||
|
import { useAppStore } from '@/store/modules/app' |
||||
|
interface Props { |
||||
|
/** 是否显示控制面板 */ |
||||
|
showControls?: boolean |
||||
|
/** 播放状态 */ |
||||
|
playState?: TrajectoryPlayState |
||||
|
} |
||||
|
|
||||
|
interface Emits { |
||||
|
(e: 'play'): void |
||||
|
(e: 'pause'): void |
||||
|
(e: 'stop'): void |
||||
|
(e: 'speed-change', speed: number): void |
||||
|
(e: 'time-change', timestamp: number): void |
||||
|
(e: 'time-range-change', range: { startTime: number; endTime: number }): void |
||||
|
} |
||||
|
|
||||
|
const props = withDefaults(defineProps<Props>(), { |
||||
|
showControls: true, |
||||
|
playState: () => ({ |
||||
|
isPlaying: false, |
||||
|
currentTime: dayjs().subtract(1, 'day').valueOf(), |
||||
|
speed: 1, |
||||
|
startTime: dayjs().subtract(1, 'day').valueOf(), |
||||
|
endTime: dayjs().valueOf() |
||||
|
}) |
||||
|
}) |
||||
|
|
||||
|
const emit = defineEmits<Emits>() |
||||
|
|
||||
|
const appStore = useAppStore() |
||||
|
|
||||
|
// 播放速度选项 |
||||
|
const speedOptions = [ |
||||
|
{ label: '0.5x', value: 0.5 }, |
||||
|
{ label: '1x', value: 1 }, |
||||
|
{ label: '2x', value: 2 }, |
||||
|
{ label: '4x', value: 4 }, |
||||
|
{ label: '8x', value: 8 } |
||||
|
] |
||||
|
|
||||
|
// 响应式状态 |
||||
|
const showTimeRangePicker = ref(false) |
||||
|
const currentSpeed = ref(props.playState.speed) |
||||
|
const timeRange = ref<[number, number]>([ |
||||
|
props.playState.startTime || dayjs().subtract(1, 'day').valueOf(), |
||||
|
props.playState.endTime || dayjs().valueOf() |
||||
|
]) |
||||
|
|
||||
|
// 时间选择快捷项 |
||||
|
const shortcuts = [ |
||||
|
{ |
||||
|
text: '最近1小时', |
||||
|
value: () => { |
||||
|
const end = dayjs().valueOf() |
||||
|
const start = dayjs(end).subtract(1, 'hour').valueOf() |
||||
|
return [start, end] |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
text: '最近3小时', |
||||
|
value: () => { |
||||
|
const end = dayjs().valueOf() |
||||
|
const start = dayjs(end).subtract(3, 'hour').valueOf() |
||||
|
return [start, end] |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
text: '最近6小时', |
||||
|
value: () => { |
||||
|
const end = dayjs().valueOf() |
||||
|
const start = dayjs(end).subtract(6, 'hour').valueOf() |
||||
|
return [start, end] |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
text: '最近24小时', |
||||
|
value: () => { |
||||
|
const end = dayjs().valueOf() |
||||
|
const start = dayjs(end).subtract(24, 'hour').valueOf() |
||||
|
return [start, end] |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
text: '最近7天', |
||||
|
value: () => { |
||||
|
const end = dayjs().valueOf() |
||||
|
const start = dayjs(end).subtract(7, 'day').valueOf() |
||||
|
return [start, end] |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
|
||||
|
// 当前播放进度（用于时间轴滑块） |
||||
|
const currentProgress = computed({ |
||||
|
get: () => props.playState.currentTime, |
||||
|
set: (value: number) => { |
||||
|
emit('time-change', value) |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
// 事件处理函数 |
||||
|
const handlePlayPause = () => { |
||||
|
if (props.playState.isPlaying) { |
||||
|
emit('pause') |
||||
|
} else { |
||||
|
emit('play') |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const handleStop = () => { |
||||
|
emit('stop') |
||||
|
} |
||||
|
|
||||
|
const handleSpeedChange = (speed: number) => { |
||||
|
currentSpeed.value = speed |
||||
|
emit('speed-change', speed) |
||||
|
} |
||||
|
|
||||
|
const handleTimeChange = (timestamp: number) => { |
||||
|
emit('time-change', timestamp) |
||||
|
} |
||||
|
|
||||
|
const handleTimeRangeChange = (range: [number, number] | null) => { |
||||
|
if (range && range.length === 2) { |
||||
|
timeRange.value = range |
||||
|
emit('time-range-change', { |
||||
|
startTime: range[0], |
||||
|
endTime: range[1] |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const toggleTimeRangePicker = () => { |
||||
|
showTimeRangePicker.value = !showTimeRangePicker.value |
||||
|
} |
||||
|
|
||||
|
// 时间格式化函数 |
||||
|
const formatTime = (timestamp: number): string => { |
||||
|
return dayjs(timestamp).format('MM-DD HH:mm:ss') |
||||
|
} |
||||
|
|
||||
|
// 监听播放状态变化，同步内部状态 |
||||
|
watch( |
||||
|
() => props.playState.speed, |
||||
|
(newSpeed) => { |
||||
|
currentSpeed.value = newSpeed |
||||
|
} |
||||
|
) |
||||
|
|
||||
|
watch( |
||||
|
() => [props.playState.startTime, props.playState.endTime], |
||||
|
([startTime, endTime]) => { |
||||
|
if (startTime && endTime) { |
||||
|
timeRange.value = [startTime, endTime] |
||||
|
} |
||||
|
}, |
||||
|
{ deep: true } |
||||
|
) |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.trajectory-controls { |
||||
|
position: absolute; |
||||
|
bottom: 50px; |
||||
|
left: 50%; |
||||
|
transform: translateX(-50%); |
||||
|
background: rgba(255, 255, 255, 0.95); |
||||
|
backdrop-filter: blur(10px); |
||||
|
border-radius: 12px; |
||||
|
padding: 10px; |
||||
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); |
||||
|
border: 1px solid rgba(255, 255, 255, 0.2); |
||||
|
min-width: 480px; |
||||
|
z-index: 1000; |
||||
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
||||
|
} |
||||
|
|
||||
|
/* 暗色主题样式 */ |
||||
|
.dark .trajectory-controls { |
||||
|
background: rgba(31, 41, 55, 0.95); |
||||
|
border: 1px solid rgba(75, 85, 99, 0.3); |
||||
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); |
||||
|
} |
||||
|
|
||||
|
.control-panel { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 16px; |
||||
|
margin-bottom: 12px; |
||||
|
} |
||||
|
|
||||
|
.play-controls { |
||||
|
display: flex; |
||||
|
gap: 8px; |
||||
|
} |
||||
|
|
||||
|
.time-range-controls .time-range-btn { |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
|
||||
|
.time-range-controls { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 8px; |
||||
|
flex-wrap: wrap; |
||||
|
} |
||||
|
|
||||
|
.speed-controls { |
||||
|
margin-left: auto; |
||||
|
} |
||||
|
|
||||
|
.timeline-container { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 12px; |
||||
|
margin-bottom: 8px; |
||||
|
} |
||||
|
|
||||
|
.time-display { |
||||
|
font-size: 12px; |
||||
|
color: #666; |
||||
|
font-family: monospace; |
||||
|
min-width: 80px; |
||||
|
text-align: center; |
||||
|
transition: color 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
/* 暗色主题下的时间显示 */ |
||||
|
.dark .time-display { |
||||
|
color: #9ca3af; |
||||
|
} |
||||
|
|
||||
|
.slider-container { |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.time-range-picker { |
||||
|
padding-top: 4px; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
/* 响应式设计 */ |
||||
|
@media (max-width: 768px) { |
||||
|
.trajectory-controls { |
||||
|
min-width: 320px; |
||||
|
left: 10px; |
||||
|
right: 10px; |
||||
|
transform: none; |
||||
|
padding: 12px; |
||||
|
} |
||||
|
|
||||
|
.control-panel { |
||||
|
gap: 16px; |
||||
|
} |
||||
|
|
||||
|
/* 取消外部快捷按钮后，此块无须特殊处理 */ |
||||
|
|
||||
|
.speed-controls { |
||||
|
margin-left: 0; |
||||
|
align-self: stretch; |
||||
|
} |
||||
|
|
||||
|
.time-display { |
||||
|
font-size: 11px; |
||||
|
min-width: 70px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 480px) { |
||||
|
.trajectory-controls { |
||||
|
min-width: unset; |
||||
|
width: calc(100% - 20px); |
||||
|
} |
||||
|
|
||||
|
.timeline-container { |
||||
|
gap: 16px; |
||||
|
} |
||||
|
|
||||
|
.slider-container { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.time-display { |
||||
|
min-width: unset; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* 自定义滑块样式 */ |
||||
|
:deep(.el-slider__runway) { |
||||
|
background-color: #e4e7ed; |
||||
|
height: 6px; |
||||
|
transition: background-color 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
:deep(.el-slider__bar) { |
||||
|
height: 6px; |
||||
|
transition: background 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
:deep(.el-slider__button) { |
||||
|
width: 16px; |
||||
|
height: 16px; |
||||
|
border: 2px solid #409eff; |
||||
|
background-color: #fff; |
||||
|
transition: all 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
:deep(.el-slider__button:hover) { |
||||
|
transform: scale(1.2); |
||||
|
} |
||||
|
|
||||
|
/* 暗色主题下的滑块样式 */ |
||||
|
.dark :deep(.el-slider__runway) { |
||||
|
background-color: #374151; |
||||
|
} |
||||
|
|
||||
|
:global(.dark) :deep(.el-slider__button) { |
||||
|
border: 2px solid #3b82f6; |
||||
|
background-color: #1f2937; |
||||
|
} |
||||
|
|
||||
|
.dark :deep(.el-slider__button:hover) { |
||||
|
background-color: #374151; |
||||
|
} |
||||
|
|
||||
|
/* 美化按钮样式 */ |
||||
|
:deep(.el-button.is-circle) { |
||||
|
padding: 8px; |
||||
|
transition: all 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
:deep(.el-button--primary.is-circle) { |
||||
|
border: none; |
||||
|
} |
||||
|
|
||||
|
:deep(.el-button--warning.is-circle) { |
||||
|
border: none; |
||||
|
} |
||||
|
|
||||
|
:deep(.el-button--danger.is-circle) { |
||||
|
border: none; |
||||
|
} |
||||
|
|
||||
|
/* 日期选择器和下拉框的暗色主题优化 */ |
||||
|
.dark :deep(.el-date-editor) { |
||||
|
background-color: #374151; |
||||
|
border-color: #4b5563; |
||||
|
color: #e5e7eb; |
||||
|
} |
||||
|
|
||||
|
.dark :deep(.el-date-editor:hover) { |
||||
|
border-color: #6b7280; |
||||
|
} |
||||
|
|
||||
|
.dark :deep(.el-date-editor.is-focus) { |
||||
|
border-color: #3b82f6; |
||||
|
} |
||||
|
|
||||
|
.dark :deep(.el-date-editor .el-input__inner) { |
||||
|
background-color: transparent; |
||||
|
color: #e5e7eb; |
||||
|
} |
||||
|
|
||||
|
.dark :deep(.el-date-editor .el-input__inner::placeholder) { |
||||
|
color: #9ca3af; |
||||
|
} |
||||
|
|
||||
|
.dark :deep(.el-select .el-input__inner) { |
||||
|
background-color: #374151; |
||||
|
border-color: #4b5563; |
||||
|
color: #e5e7eb; |
||||
|
} |
||||
|
|
||||
|
.dark :deep(.el-select .el-input__inner:hover) { |
||||
|
border-color: #6b7280; |
||||
|
} |
||||
|
|
||||
|
.dark :deep(.el-select .el-input__inner:focus) { |
||||
|
border-color: #3b82f6; |
||||
|
} |
||||
|
|
||||
|
/* 毛玻璃效果增强 */ |
||||
|
.trajectory-controls::before { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
background: inherit; |
||||
|
border-radius: inherit; |
||||
|
backdrop-filter: blur(20px) saturate(180%); |
||||
|
z-index: -1; |
||||
|
} |
||||
|
|
||||
|
/* 暗色主题下的边框光效 */ |
||||
|
.dark .trajectory-controls::after { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
top: -1px; |
||||
|
left: -1px; |
||||
|
right: -1px; |
||||
|
bottom: -1px; |
||||
|
border-radius: inherit; |
||||
|
z-index: -2; |
||||
|
opacity: 0; |
||||
|
transition: opacity 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.dark .trajectory-controls:hover::after { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,273 @@ |
|||||
|
/** |
||||
|
* 地图事件处理相关的 composable |
||||
|
*/ |
||||
|
import dayjs from 'dayjs' |
||||
|
import { fromLonLat } from 'ol/proj' |
||||
|
import { TrajectoryService } from '../services/trajectory.service' |
||||
|
import { PopupService } from '../services/popup.service' |
||||
|
|
||||
|
interface PopupContentGenerator { |
||||
|
handleTrajectoryPoint: (feature: any) => string |
||||
|
handleTrajectoryLine: (feature: any) => string |
||||
|
handleFence: (feature: any) => string |
||||
|
handleMarker: (feature: any) => string |
||||
|
} |
||||
|
|
||||
|
export const useMapEvents = () => { |
||||
|
// 创建弹窗内容生成器
|
||||
|
const createPopupContentGenerator = ( |
||||
|
trajectoryService: any, |
||||
|
popupService: any |
||||
|
): PopupContentGenerator => ({ |
||||
|
handleTrajectoryPoint: (feature: any): string => { |
||||
|
const timeText = feature.get('timeText') || '' |
||||
|
const trajectoryId = feature.get('trajectoryId') || '' |
||||
|
const timestamp = feature.get('timestamp') |
||||
|
const deviceName = |
||||
|
trajectoryService?.getTrajectoryData().find((t) => t.deviceId === trajectoryId)?.name || |
||||
|
trajectoryId |
||||
|
|
||||
|
return ` |
||||
|
<div style="font-size: 12px; color: #333;"> |
||||
|
<div style="font-weight: bold; margin-bottom: 4px;">${deviceName}</div> |
||||
|
<div>时间: ${timeText}</div> |
||||
|
<div style="font-size: 10px; color: #666;"> |
||||
|
${dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss')} |
||||
|
</div> |
||||
|
</div> |
||||
|
` |
||||
|
}, |
||||
|
|
||||
|
handleTrajectoryLine: (feature: any): string => { |
||||
|
const deviceId = feature.get('deviceId') || '' |
||||
|
const deviceName = |
||||
|
trajectoryService?.getTrajectoryData().find((t) => t.deviceId === deviceId)?.name || |
||||
|
deviceId |
||||
|
|
||||
|
return ` |
||||
|
<div style="font-size: 12px; color: #333;"> |
||||
|
<div style="font-weight: bold;">${deviceName} - 轨迹路径</div> |
||||
|
</div> |
||||
|
` |
||||
|
}, |
||||
|
|
||||
|
handleFence: (feature: any): string => { |
||||
|
const fenceData = feature.get('fenceData') |
||||
|
const statusText = |
||||
|
fenceData.status === 0 ? '正常' : fenceData.status === 1 ? '一级报警' : '二级报警' |
||||
|
const typeText = fenceData.type === 0 ? '包含' : '排斥' |
||||
|
|
||||
|
return ` |
||||
|
<div style="font-size: 12px; color: #333;"> |
||||
|
<div style="font-weight: bold; margin-bottom: 4px;">${fenceData.name}</div> |
||||
|
<div>状态: ${statusText}</div> |
||||
|
<div>类型: ${typeText}</div> |
||||
|
<div style="font-size: 10px; color: #666; margin-top: 2px;"> |
||||
|
${fenceData.remark || '无备注'} |
||||
|
</div> |
||||
|
</div> |
||||
|
` |
||||
|
}, |
||||
|
|
||||
|
handleMarker: (feature: any): string => { |
||||
|
return popupService?.handlePopupContent(feature) || '' |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
/** |
||||
|
* 设置地图事件监听器 |
||||
|
*/ |
||||
|
const setupMapEventListeners = ( |
||||
|
map: any, |
||||
|
popupOverlay: any, |
||||
|
trajectoryService: TrajectoryService | null, |
||||
|
popupService: PopupService | null, |
||||
|
opts?: { |
||||
|
isDrawing?: () => boolean |
||||
|
onMarkerClick?: (markerData: any) => void |
||||
|
markerLayer?: any |
||||
|
refreshMarkerStyles?: () => void |
||||
|
} |
||||
|
) => { |
||||
|
const popupGenerator = createPopupContentGenerator(trajectoryService, popupService) |
||||
|
|
||||
|
// 鼠标悬停事件
|
||||
|
const handlePointerMove = (event: any) => { |
||||
|
// 绘制围栏时屏蔽 hover 弹窗
|
||||
|
if (opts?.isDrawing && opts.isDrawing()) { |
||||
|
hidePopup(popupOverlay) |
||||
|
return |
||||
|
} |
||||
|
const feature = map.forEachFeatureAtPixel(event.pixel, (feature: any) => feature) |
||||
|
|
||||
|
if (feature) { |
||||
|
map.getTargetElement().style.cursor = 'pointer' |
||||
|
showPopup(event, feature, popupOverlay, popupGenerator) |
||||
|
} else { |
||||
|
map.getTargetElement().style.cursor = '' |
||||
|
hidePopup(popupOverlay) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 点击事件
|
||||
|
const handleClick = (event: any) => { |
||||
|
// 绘制围栏时屏蔽点击处理
|
||||
|
if (opts?.isDrawing && opts.isDrawing()) { |
||||
|
return |
||||
|
} |
||||
|
const feature = map.forEachFeatureAtPixel(event.pixel, (feature: any) => feature) |
||||
|
if (feature) { |
||||
|
handleFeatureClick(feature, map, opts) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 地图移动结束事件（包括放缩）
|
||||
|
const handleMoveEnd = () => { |
||||
|
// OpenLayers的Cluster会自动重新计算聚合，只需要刷新样式
|
||||
|
if (opts?.markerLayer) { |
||||
|
opts.markerLayer.changed() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
map.on('pointermove', handlePointerMove) |
||||
|
map.on('click', handleClick) |
||||
|
map.on('moveend', handleMoveEnd) |
||||
|
|
||||
|
return { |
||||
|
destroy: () => { |
||||
|
map.un('pointermove', handlePointerMove) |
||||
|
map.un('click', handleClick) |
||||
|
map.un('moveend', handleMoveEnd) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 显示弹窗 |
||||
|
*/ |
||||
|
const showPopup = ( |
||||
|
event: any, |
||||
|
feature: any, |
||||
|
popupOverlay: any, |
||||
|
popupGenerator: PopupContentGenerator |
||||
|
) => { |
||||
|
if (!popupOverlay) return |
||||
|
|
||||
|
const popupElement = popupOverlay.getElement() |
||||
|
if (!popupElement) return |
||||
|
|
||||
|
const featureType = feature.get('type') |
||||
|
let popupContent = '' |
||||
|
|
||||
|
switch (featureType) { |
||||
|
case 'trajectory-point': |
||||
|
popupContent = popupGenerator.handleTrajectoryPoint(feature) |
||||
|
break |
||||
|
case 'trajectory': |
||||
|
popupContent = popupGenerator.handleTrajectoryLine(feature) |
||||
|
break |
||||
|
case 'fence': |
||||
|
case 'fence-label': |
||||
|
popupContent = popupGenerator.handleFence(feature) |
||||
|
break |
||||
|
default: |
||||
|
popupContent = popupGenerator.handleMarker(feature) |
||||
|
break |
||||
|
} |
||||
|
|
||||
|
popupElement.innerHTML = popupContent |
||||
|
popupOverlay.setPosition(event.coordinate) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 隐藏弹窗 |
||||
|
*/ |
||||
|
const hidePopup = (popupOverlay: any) => { |
||||
|
if (popupOverlay) { |
||||
|
popupOverlay.setPosition(undefined) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 处理特征点击事件 |
||||
|
*/ |
||||
|
const handleFeatureClick = ( |
||||
|
feature: any, |
||||
|
map: any, |
||||
|
opts?: { onMarkerClick?: (markerData: any) => void } |
||||
|
) => { |
||||
|
const featureType = feature.get('type') |
||||
|
|
||||
|
// 处理围栏点击
|
||||
|
if (featureType === 'fence' || featureType === 'fence-label') { |
||||
|
const fenceData = feature.get('fenceData') |
||||
|
if (fenceData) { |
||||
|
console.log('围栏点击:', fenceData) |
||||
|
// 可以在这里添加围栏点击的自定义处理逻辑
|
||||
|
} |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
// 处理标记点击
|
||||
|
handleMarkerClick(feature, map, opts) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 处理标记点击事件 |
||||
|
*/ |
||||
|
const handleMarkerClick = ( |
||||
|
feature: any, |
||||
|
map: any, |
||||
|
opts?: { onMarkerClick?: (markerData: any) => void } |
||||
|
) => { |
||||
|
const markerData = feature.get('markerData') |
||||
|
const features = feature.get('features') |
||||
|
|
||||
|
if (features && features.length > 1) { |
||||
|
// 处理聚合标记点击
|
||||
|
handleClusterClick(features, map) |
||||
|
} else if (features && features.length === 1) { |
||||
|
// 处理聚合中的单个标记点击
|
||||
|
const singleMarkerData = features[0].get('markerData') |
||||
|
if (singleMarkerData) { |
||||
|
animateToCoordinate(singleMarkerData.coordinates, map, 15) |
||||
|
opts?.onMarkerClick?.(singleMarkerData) |
||||
|
} |
||||
|
} else if (markerData) { |
||||
|
// 处理非聚合的单个标记点击
|
||||
|
animateToCoordinate(markerData.coordinates, map, 15) |
||||
|
opts?.onMarkerClick?.(markerData) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 处理聚合标记点击 |
||||
|
*/ |
||||
|
const handleClusterClick = (features: any[], map: any) => { |
||||
|
// 计算聚合标记的中心点
|
||||
|
const coordinates = features.map((f: any) => f.get('markerData').coordinates) |
||||
|
const centerLon = |
||||
|
coordinates.reduce((sum: number, coord: any) => sum + coord[0], 0) / coordinates.length |
||||
|
const centerLat = |
||||
|
coordinates.reduce((sum: number, coord: any) => sum + coord[1], 0) / coordinates.length |
||||
|
|
||||
|
animateToCoordinate([centerLon, centerLat], map, 12) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 动画移动到指定坐标 |
||||
|
*/ |
||||
|
const animateToCoordinate = (coordinates: [number, number], map: any, zoom: number) => { |
||||
|
const view = map.getView() |
||||
|
|
||||
|
view.animate({ |
||||
|
center: fromLonLat(coordinates), |
||||
|
zoom: Math.max(view.getZoom() || 10, zoom), |
||||
|
duration: 1000 |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
return { |
||||
|
setupMapEventListeners |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,297 @@ |
|||||
|
/** |
||||
|
* 地图服务管理相关的 composable |
||||
|
*/ |
||||
|
import { ref, onUnmounted, reactive } from 'vue' |
||||
|
import type { MapProps } from '../types/map.types' |
||||
|
import { MapService } from '../services/map.service' |
||||
|
import { MarkerService } from '../services/marker.service' |
||||
|
import { AnimationService } from '../services/animation.service' |
||||
|
import { PopupService } from '../services/popup.service' |
||||
|
import { TrajectoryService } from '../services/trajectory.service' |
||||
|
import { FenceService } from '../services/fence.service' |
||||
|
import { FenceDrawService } from '../services/fence-draw.service' |
||||
|
|
||||
|
interface ServiceInstances { |
||||
|
mapService: MapService | null |
||||
|
markerService: MarkerService | null |
||||
|
animationService: AnimationService | null |
||||
|
popupService: PopupService | null |
||||
|
trajectoryService: TrajectoryService | null |
||||
|
fenceService: FenceService | null |
||||
|
fenceDrawService: FenceDrawService | null |
||||
|
} |
||||
|
|
||||
|
interface LayerRefs { |
||||
|
markerLayer: any |
||||
|
rippleLayer: any |
||||
|
trajectoryLayer: any |
||||
|
fenceLayer: any |
||||
|
} |
||||
|
|
||||
|
export const useMapServices = () => { |
||||
|
// 服务实例状态
|
||||
|
const services = reactive<ServiceInstances>({ |
||||
|
mapService: null, |
||||
|
markerService: null, |
||||
|
animationService: null, |
||||
|
popupService: null, |
||||
|
trajectoryService: null, |
||||
|
fenceService: null, |
||||
|
fenceDrawService: null |
||||
|
}) |
||||
|
|
||||
|
// 图层引用状态
|
||||
|
const layerRefs = ref<LayerRefs | null>(null) |
||||
|
|
||||
|
/** |
||||
|
* 初始化所有服务 |
||||
|
*/ |
||||
|
const initializeServices = (map?: any) => { |
||||
|
// 就地更新，保持对 services 的引用不变，避免外部拿到旧引用
|
||||
|
services.mapService = new MapService() |
||||
|
services.markerService = new MarkerService() |
||||
|
services.animationService = new AnimationService() |
||||
|
services.popupService = new PopupService() |
||||
|
services.trajectoryService = new TrajectoryService() |
||||
|
services.fenceService = new FenceService() |
||||
|
services.fenceDrawService = new FenceDrawService() |
||||
|
|
||||
|
// 如果提供了地图实例，设置给相关服务
|
||||
|
if (map) { |
||||
|
services.markerService.setMap(map) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 初始化地图和图层 |
||||
|
*/ |
||||
|
const initializeMapAndLayers = ( |
||||
|
mapInstance: { map: any; popupOverlay: any }, |
||||
|
props: MapProps |
||||
|
) => { |
||||
|
// 初始化地图
|
||||
|
const map = mapInstance.map |
||||
|
const popupOverlay = mapInstance.popupOverlay |
||||
|
|
||||
|
// 重新初始化服务，确保markerService有地图实例
|
||||
|
initializeServices(map) |
||||
|
|
||||
|
if ( |
||||
|
!services.markerService || |
||||
|
!services.animationService || |
||||
|
!services.trajectoryService || |
||||
|
!services.fenceService || |
||||
|
!services.fenceDrawService |
||||
|
) { |
||||
|
throw new Error('Services not initialized') |
||||
|
} |
||||
|
|
||||
|
// 创建各种图层
|
||||
|
const markerLayer = services.markerService.createMarkerLayer(props, map) |
||||
|
const rippleLayer = services.animationService.createRippleLayer( |
||||
|
props.markers || [], |
||||
|
map, |
||||
|
props.enableCluster |
||||
|
) |
||||
|
const trajectoryLayer = services.trajectoryService.createTrajectoryLayer(map) |
||||
|
const fenceLayer = services.fenceService.createFenceLayer(props.fences || [], map) |
||||
|
|
||||
|
// // 添加图层到地图
|
||||
|
map.addLayer(markerLayer) |
||||
|
map.addLayer(rippleLayer) |
||||
|
map.addLayer(trajectoryLayer) |
||||
|
map.addLayer(fenceLayer) |
||||
|
|
||||
|
// 初始化围栏绘制服务
|
||||
|
services.fenceDrawService.init(map) |
||||
|
|
||||
|
// 存储图层引用
|
||||
|
layerRefs.value = { |
||||
|
markerLayer, |
||||
|
rippleLayer, |
||||
|
trajectoryLayer, |
||||
|
fenceLayer |
||||
|
} |
||||
|
return { |
||||
|
map, |
||||
|
popupOverlay |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 设置标记显示状态 |
||||
|
*/ |
||||
|
const setMarkersVisible = (visible: boolean) => { |
||||
|
if (!layerRefs.value || !services.animationService) return |
||||
|
|
||||
|
const { markerLayer, rippleLayer } = layerRefs.value |
||||
|
|
||||
|
if (visible) { |
||||
|
markerLayer.setVisible(true) |
||||
|
rippleLayer.setVisible(true) |
||||
|
services.animationService.startAnimation() |
||||
|
} else { |
||||
|
markerLayer.setVisible(false) |
||||
|
rippleLayer.setVisible(false) |
||||
|
services.animationService.stopAnimation() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 设置轨迹显示状态 |
||||
|
*/ |
||||
|
const setTrajectoriesVisible = (visible: boolean, markers: any[] = []) => { |
||||
|
if (!services.trajectoryService) return |
||||
|
|
||||
|
if (visible) { |
||||
|
services.trajectoryService.setTrajectoryData(markers) |
||||
|
services.trajectoryService.showTrajectories() |
||||
|
} else { |
||||
|
services.trajectoryService.hideTrajectories() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 设置围栏显示状态 |
||||
|
*/ |
||||
|
const setFencesVisible = (visible: boolean) => { |
||||
|
if (!services.fenceService) return |
||||
|
|
||||
|
if (visible) { |
||||
|
services.fenceService.showFences() |
||||
|
} else { |
||||
|
services.fenceService.hideFences() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 开始/停止围栏绘制 |
||||
|
*/ |
||||
|
const toggleFenceDrawing = ( |
||||
|
isDrawing: boolean, |
||||
|
onComplete?: (coordinates: [number, number][]) => void |
||||
|
) => { |
||||
|
if (!services.fenceDrawService) return |
||||
|
|
||||
|
if (isDrawing && onComplete) { |
||||
|
services.fenceDrawService.startDrawing(onComplete) |
||||
|
} else { |
||||
|
services.fenceDrawService.stopDrawing() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 清理围栏绘制图层 |
||||
|
*/ |
||||
|
const clearFenceDrawLayer = () => { |
||||
|
if (services.fenceDrawService) { |
||||
|
services.fenceDrawService.clearDrawLayer() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 更新标记数据 |
||||
|
*/ |
||||
|
const updateMarkers = (markers: any[], currentProps?: any) => { |
||||
|
if ( |
||||
|
services.markerService && |
||||
|
services.animationService && |
||||
|
layerRefs.value?.markerLayer && |
||||
|
layerRefs.value?.rippleLayer |
||||
|
) { |
||||
|
const map = services.mapService?.getMap() |
||||
|
const enableCluster = currentProps?.enableCluster ?? true |
||||
|
if (map) { |
||||
|
// 从地图中移除旧的marker layer
|
||||
|
map.removeLayer(layerRefs.value.markerLayer) |
||||
|
map.removeLayer(layerRefs.value.rippleLayer) |
||||
|
|
||||
|
// 更新marker service（这会创建新的layer）
|
||||
|
services.markerService.updateMarkers(markers) |
||||
|
|
||||
|
// 重新创建波纹图层
|
||||
|
const newRippleLayer = services.animationService.createRippleLayer( |
||||
|
markers, |
||||
|
map, |
||||
|
enableCluster |
||||
|
) |
||||
|
|
||||
|
// 获取新的layer并添加到地图
|
||||
|
const newMarkerLayer = services.markerService.getMarkerLayer() |
||||
|
if (newMarkerLayer && newRippleLayer) { |
||||
|
// 确保markerService有最新的地图实例
|
||||
|
services.markerService.setMap(map) |
||||
|
map.addLayer(newMarkerLayer) |
||||
|
map.addLayer(newRippleLayer) |
||||
|
layerRefs.value.markerLayer = newMarkerLayer |
||||
|
layerRefs.value.rippleLayer = newRippleLayer |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 刷新标记样式 |
||||
|
*/ |
||||
|
const refreshMarkerStyles = () => { |
||||
|
if (services.markerService) { |
||||
|
services.markerService.refreshStyles() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 销毁所有服务 |
||||
|
*/ |
||||
|
const destroyServices = () => { |
||||
|
// 销毁有 destroy 方法的服务
|
||||
|
const servicesToDestroy = [ |
||||
|
services.mapService, |
||||
|
services.markerService, |
||||
|
services.animationService, |
||||
|
services.trajectoryService, |
||||
|
services.fenceService, |
||||
|
services.fenceDrawService |
||||
|
] |
||||
|
|
||||
|
servicesToDestroy.forEach((service) => { |
||||
|
if (service && typeof service.destroy === 'function') { |
||||
|
service.destroy() |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
// 重置服务字段（保持 reactive 对象引用不变）
|
||||
|
services.mapService = null |
||||
|
services.markerService = null |
||||
|
services.animationService = null |
||||
|
services.popupService = null |
||||
|
services.trajectoryService = null |
||||
|
services.fenceService = null |
||||
|
services.fenceDrawService = null |
||||
|
|
||||
|
// 重置图层引用
|
||||
|
layerRefs.value = null |
||||
|
} |
||||
|
|
||||
|
// 组件卸载时自动清理
|
||||
|
onUnmounted(() => { |
||||
|
destroyServices() |
||||
|
}) |
||||
|
|
||||
|
return { |
||||
|
// 状态
|
||||
|
services, |
||||
|
layerRefs, |
||||
|
|
||||
|
// 方法
|
||||
|
initializeServices, |
||||
|
initializeMapAndLayers, |
||||
|
setMarkersVisible, |
||||
|
setTrajectoriesVisible, |
||||
|
setFencesVisible, |
||||
|
toggleFenceDrawing, |
||||
|
clearFenceDrawLayer, |
||||
|
updateMarkers, |
||||
|
refreshMarkerStyles, |
||||
|
destroyServices |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,139 @@ |
|||||
|
/** |
||||
|
* 地图状态监听相关的 composable |
||||
|
*/ |
||||
|
import { watch, type Ref } from 'vue' |
||||
|
|
||||
|
interface WatchOptions { |
||||
|
showMarkers: Ref<boolean> |
||||
|
showTrajectories: Ref<boolean> |
||||
|
showFences: Ref<boolean> |
||||
|
showDrawFences: Ref<boolean> |
||||
|
setMarkersVisible: (visible: boolean) => void |
||||
|
setTrajectoriesVisible: (visible: boolean, markers?: any[]) => void |
||||
|
setFencesVisible: (visible: boolean) => void |
||||
|
toggleFenceDrawing: ( |
||||
|
isDrawing: boolean, |
||||
|
onComplete?: (coordinates: [number, number][]) => void |
||||
|
) => void |
||||
|
updateMarkers: (markers: any[]) => void |
||||
|
markers: any[] |
||||
|
} |
||||
|
|
||||
|
export const useMapWatchers = (options: WatchOptions) => { |
||||
|
const { |
||||
|
showMarkers, |
||||
|
showTrajectories, |
||||
|
showFences, |
||||
|
showDrawFences, |
||||
|
setMarkersVisible, |
||||
|
setTrajectoriesVisible, |
||||
|
setFencesVisible, |
||||
|
toggleFenceDrawing, |
||||
|
updateMarkers, |
||||
|
markers |
||||
|
} = options |
||||
|
|
||||
|
/** |
||||
|
* 设置标记显示状态监听器 |
||||
|
*/ |
||||
|
const setupMarkersWatcher = () => { |
||||
|
return watch(showMarkers, (show) => { |
||||
|
if (show) { |
||||
|
// 显示标记时，隐藏轨迹
|
||||
|
if (showTrajectories.value) { |
||||
|
showTrajectories.value = false |
||||
|
} |
||||
|
} |
||||
|
setMarkersVisible(show) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 设置轨迹显示状态监听器 |
||||
|
*/ |
||||
|
const setupTrajectoriesWatcher = () => { |
||||
|
return watch(showTrajectories, (show) => { |
||||
|
if (show) { |
||||
|
// 显示轨迹时，隐藏标记
|
||||
|
if (showMarkers.value) { |
||||
|
showMarkers.value = false |
||||
|
} |
||||
|
setTrajectoriesVisible(true, markers) |
||||
|
} else { |
||||
|
setTrajectoriesVisible(false) |
||||
|
// 隐藏轨迹时，显示标记
|
||||
|
if (!showMarkers.value) { |
||||
|
showMarkers.value = true |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 设置围栏显示状态监听器 |
||||
|
*/ |
||||
|
const setupFencesWatcher = () => { |
||||
|
return watch(showFences, (show) => { |
||||
|
setFencesVisible(show) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 设置围栏绘制状态监听器 |
||||
|
*/ |
||||
|
const setupDrawFencesWatcher = () => { |
||||
|
return watch(showDrawFences, (isDrawing) => { |
||||
|
if (!isDrawing) { |
||||
|
// 当关闭绘制时，停止绘制操作
|
||||
|
toggleFenceDrawing(false) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 设置标记数据变化监听器 |
||||
|
*/ |
||||
|
const setupMarkersDataWatcher = () => { |
||||
|
return watch( |
||||
|
markers, |
||||
|
(newMarkers) => { |
||||
|
if (newMarkers && newMarkers.length > 0) { |
||||
|
console.log('Markers data changed, updating markers:', newMarkers.length) |
||||
|
updateMarkers(newMarkers) |
||||
|
} |
||||
|
}, |
||||
|
{ deep: true, immediate: false } |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 初始化所有监听器 |
||||
|
*/ |
||||
|
const setupAllWatchers = () => { |
||||
|
const watchers = [ |
||||
|
setupMarkersWatcher(), |
||||
|
setupTrajectoriesWatcher(), |
||||
|
setupFencesWatcher(), |
||||
|
setupDrawFencesWatcher(), |
||||
|
setupMarkersDataWatcher() |
||||
|
] |
||||
|
|
||||
|
// 返回清理函数
|
||||
|
return () => { |
||||
|
watchers.forEach((stopWatcher) => { |
||||
|
if (typeof stopWatcher === 'function') { |
||||
|
stopWatcher() |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return { |
||||
|
setupMarkersWatcher, |
||||
|
setupTrajectoriesWatcher, |
||||
|
setupFencesWatcher, |
||||
|
setupDrawFencesWatcher, |
||||
|
setupMarkersDataWatcher, |
||||
|
setupAllWatchers |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,147 @@ |
|||||
|
/** |
||||
|
* 轨迹控制相关的 composable |
||||
|
*/ |
||||
|
import { ref, watch } from 'vue' |
||||
|
import dayjs from 'dayjs' |
||||
|
import type { TrajectoryPlayState } from '../types/map.types' |
||||
|
import { TrajectoryService } from '../services/trajectory.service' |
||||
|
|
||||
|
export const useTrajectoryControls = () => { |
||||
|
// 轨迹播放状态
|
||||
|
const trajectoryPlayState = ref<TrajectoryPlayState>({ |
||||
|
isPlaying: false, |
||||
|
currentTime: dayjs().subtract(1, 'day').valueOf(), |
||||
|
speed: 1, |
||||
|
startTime: dayjs().subtract(1, 'day').valueOf(), |
||||
|
endTime: dayjs().valueOf() |
||||
|
}) |
||||
|
|
||||
|
// 轨迹播放定时器
|
||||
|
const trajectoryPlayTimer = ref<number | null>(null) |
||||
|
|
||||
|
/** |
||||
|
* 播放轨迹 |
||||
|
*/ |
||||
|
const playTrajectory = () => { |
||||
|
if (trajectoryPlayTimer.value) { |
||||
|
window.clearInterval(trajectoryPlayTimer.value) |
||||
|
} |
||||
|
|
||||
|
trajectoryPlayTimer.value = window.setInterval(() => { |
||||
|
trajectoryPlayState.value.currentTime += 1000 * trajectoryPlayState.value.speed |
||||
|
trajectoryPlayState.value.isPlaying = true |
||||
|
}, 1000) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 暂停轨迹 |
||||
|
*/ |
||||
|
const pauseTrajectory = () => { |
||||
|
if (trajectoryPlayTimer.value) { |
||||
|
window.clearInterval(trajectoryPlayTimer.value) |
||||
|
trajectoryPlayTimer.value = null |
||||
|
trajectoryPlayState.value.isPlaying = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 停止轨迹 |
||||
|
*/ |
||||
|
const stopTrajectory = () => { |
||||
|
if (trajectoryPlayTimer.value) { |
||||
|
window.clearInterval(trajectoryPlayTimer.value) |
||||
|
trajectoryPlayTimer.value = null |
||||
|
trajectoryPlayState.value.isPlaying = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 设置轨迹播放速度 |
||||
|
*/ |
||||
|
const setTrajectorySpeed = (speed: number) => { |
||||
|
trajectoryPlayState.value.speed = speed |
||||
|
|
||||
|
// 如果正在播放，重启定时器以应用新速度
|
||||
|
if (trajectoryPlayTimer.value) { |
||||
|
window.clearInterval(trajectoryPlayTimer.value) |
||||
|
trajectoryPlayTimer.value = window.setInterval(() => { |
||||
|
trajectoryPlayState.value.currentTime += 1000 * trajectoryPlayState.value.speed |
||||
|
}, 1000) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 设置轨迹播放时间 |
||||
|
*/ |
||||
|
const setTrajectoryTime = (timestamp: number) => { |
||||
|
trajectoryPlayState.value.currentTime = timestamp |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 设置轨迹时间范围 |
||||
|
*/ |
||||
|
const setTrajectoryTimeRange = (range: { startTime: number; endTime: number }) => { |
||||
|
// 停止当前播放
|
||||
|
if (trajectoryPlayTimer.value) { |
||||
|
window.clearInterval(trajectoryPlayTimer.value) |
||||
|
trajectoryPlayTimer.value = null |
||||
|
} |
||||
|
|
||||
|
// 更新轨迹播放状态的时间范围
|
||||
|
trajectoryPlayState.value = { |
||||
|
...trajectoryPlayState.value, |
||||
|
isPlaying: false, |
||||
|
currentTime: range.startTime, |
||||
|
startTime: range.startTime, |
||||
|
endTime: range.endTime |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 设置轨迹播放状态监听器 |
||||
|
*/ |
||||
|
const setupTrajectoryWatcher = ( |
||||
|
trajectoryService: TrajectoryService | null, |
||||
|
showTrajectories: { value: boolean } |
||||
|
) => { |
||||
|
// 监听轨迹播放状态变化
|
||||
|
const stopPlayStateWatcher = watch( |
||||
|
() => trajectoryPlayState.value, |
||||
|
(newState) => { |
||||
|
if (trajectoryService && showTrajectories.value) { |
||||
|
trajectoryService.updateByPlayState(newState) |
||||
|
} |
||||
|
}, |
||||
|
{ deep: true } |
||||
|
) |
||||
|
|
||||
|
return { |
||||
|
stopPlayStateWatcher |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 清理轨迹控制器 |
||||
|
*/ |
||||
|
const cleanup = () => { |
||||
|
if (trajectoryPlayTimer.value) { |
||||
|
window.clearInterval(trajectoryPlayTimer.value) |
||||
|
trajectoryPlayTimer.value = null |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return { |
||||
|
// 状态
|
||||
|
trajectoryPlayState, |
||||
|
|
||||
|
// 方法
|
||||
|
playTrajectory, |
||||
|
pauseTrajectory, |
||||
|
stopTrajectory, |
||||
|
setTrajectorySpeed, |
||||
|
setTrajectoryTime, |
||||
|
setTrajectoryTimeRange, |
||||
|
setupTrajectoryWatcher, |
||||
|
cleanup |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,69 @@ |
|||||
|
/** |
||||
|
* 地图组件常量配置 |
||||
|
*/ |
||||
|
import type { StatusDictItem, FenceData } from '../types/map.types' |
||||
|
|
||||
|
// 状态字典配置
|
||||
|
export const STATUS_DICT = { |
||||
|
online: [ |
||||
|
{ value: '0', label: '离线', cssClass: '#909399' }, |
||||
|
{ value: '1', label: '在线', cssClass: '#67c23a' } |
||||
|
] as StatusDictItem[], |
||||
|
gas: [ |
||||
|
{ value: '0', label: '正常', cssClass: '#67c23a' }, |
||||
|
{ value: '1', label: '一级气体报警', cssClass: '#e6a23c' }, |
||||
|
{ value: '2', label: '二级气体告警', cssClass: '#f56c6c' } |
||||
|
] as StatusDictItem[], |
||||
|
battery: [ |
||||
|
{ value: '0', label: '正常', cssClass: '#67c23a' }, |
||||
|
{ value: '1', label: '一级低电量报警', cssClass: '#e6a23c' }, |
||||
|
{ value: '2', label: '二级低电量报警', cssClass: '#f56c6c' } |
||||
|
] as StatusDictItem[], |
||||
|
fence: [ |
||||
|
{ value: '0', label: '正常', cssClass: '#67c23a' }, |
||||
|
{ value: '1', label: '一级围栏报警', cssClass: '#e6a23c' }, |
||||
|
{ value: '2', label: '二级围栏报警', cssClass: '#f56c6c' } |
||||
|
] as StatusDictItem[] |
||||
|
} |
||||
|
|
||||
|
// 状态优先级定义 (数字越小优先级越高)
|
||||
|
export const STATUS_PRIORITY = { |
||||
|
gas_2: 1, |
||||
|
gas_1: 2, |
||||
|
battery_2: 3, |
||||
|
battery_1: 4, |
||||
|
fence_2: 5, |
||||
|
fence_1: 6, |
||||
|
offline: 7, |
||||
|
normal: 8 |
||||
|
} as const |
||||
|
|
||||
|
// 状态顺序数组
|
||||
|
export const STATUS_ORDER = Object.keys(STATUS_PRIORITY) as Array<keyof typeof STATUS_PRIORITY> |
||||
|
|
||||
|
// 默认标记数据
|
||||
|
export const DEFAULT_MARKERS = [] |
||||
|
|
||||
|
// 地图默认配置
|
||||
|
export const MAP_DEFAULTS = { |
||||
|
tileUrl: 'http://qtbj.icpcdev.site/roadmap/{z}/{x}/{y}.png', |
||||
|
center: [116.3912757, 39.906217] as [number, number], |
||||
|
zoom: 10, |
||||
|
maxZoom: 18, |
||||
|
minZoom: 0, |
||||
|
enableCluster: true, |
||||
|
clusterDistance: 0 |
||||
|
} |
||||
|
|
||||
|
// 动画配置
|
||||
|
export const ANIMATION_CONFIG = { |
||||
|
duration: 3, // 动画周期（秒）
|
||||
|
rippleCount: 5, // 波纹圈数量
|
||||
|
phaseOffset: 0.6, // 波纹圈错开时间（秒）
|
||||
|
targetFPS: 60, // 目标帧率
|
||||
|
clusterThreshold: 12, // 聚合阈值
|
||||
|
minRadius: 6, // 最小半径
|
||||
|
maxRadius: 31, // 最大半径
|
||||
|
minOpacity: 0.05 // 最小透明度阈值
|
||||
|
} |
||||
|
export const DEFAULT_FENCES = [] as FenceData[] |
||||
@ -0,0 +1,162 @@ |
|||||
|
/** |
||||
|
* 动画服务类 |
||||
|
*/ |
||||
|
import { Vector as VectorLayer } from 'ol/layer' |
||||
|
import { Vector as VectorSource } from 'ol/source' |
||||
|
import { Feature } from 'ol' |
||||
|
import { Point } from 'ol/geom' |
||||
|
import { Style, Circle, Fill, Stroke } from 'ol/style' |
||||
|
import { fromLonLat } from 'ol/proj' |
||||
|
import type { MarkerData } from '../types/map.types' |
||||
|
import { getHighestPriorityStatus, getStatusColor } from '../utils/map.utils' |
||||
|
import { ANIMATION_CONFIG } from '../constants/map.constants' |
||||
|
|
||||
|
export class AnimationService { |
||||
|
private rippleLayer: VectorLayer<VectorSource> | null = null |
||||
|
private animationTimer: number | null = null |
||||
|
private map: any = null |
||||
|
private enableCluster: boolean = true |
||||
|
|
||||
|
/** |
||||
|
* 创建波纹图层 |
||||
|
*/ |
||||
|
createRippleLayer( |
||||
|
markers: MarkerData[], |
||||
|
map: any, |
||||
|
enableCluster: boolean = true |
||||
|
): VectorLayer<VectorSource> { |
||||
|
this.map = map |
||||
|
this.enableCluster = enableCluster |
||||
|
const source = new VectorSource() |
||||
|
|
||||
|
// 为每个标记添加波纹效果
|
||||
|
markers.forEach((marker) => { |
||||
|
const feature = new Feature({ |
||||
|
geometry: new Point(fromLonLat(marker.coordinates)), |
||||
|
markerData: marker |
||||
|
}) |
||||
|
|
||||
|
const status = getHighestPriorityStatus(marker) |
||||
|
const color = getStatusColor(status) |
||||
|
|
||||
|
// 设置动画开始时间
|
||||
|
feature.set('animationStart', Date.now()) |
||||
|
feature.set('rippleColor', color) |
||||
|
|
||||
|
source.addFeature(feature) |
||||
|
}) |
||||
|
|
||||
|
this.rippleLayer = new VectorLayer({ |
||||
|
source: source, |
||||
|
style: (feature) => { |
||||
|
// 检查当前缩放级别，如果缩放级别较低（聚合状态），不显示波纹
|
||||
|
const currentZoom = this.map?.getView().getZoom() || 0 |
||||
|
|
||||
|
// 如果启用了聚合且zoom级别较低，不显示波纹
|
||||
|
if (this.enableCluster && currentZoom < ANIMATION_CONFIG.clusterThreshold) { |
||||
|
return [] // 不显示波纹
|
||||
|
} |
||||
|
|
||||
|
const startTime = feature.get('animationStart') |
||||
|
const color = feature.get('rippleColor') |
||||
|
const elapsed = (Date.now() - startTime) / 1000 // 秒
|
||||
|
|
||||
|
// 创建多个波纹圈
|
||||
|
const styles: Style[] = [] |
||||
|
|
||||
|
for (let i = 0; i < ANIMATION_CONFIG.rippleCount; i++) { |
||||
|
const phase = (elapsed + i * ANIMATION_CONFIG.phaseOffset) % ANIMATION_CONFIG.duration |
||||
|
const progress = phase / ANIMATION_CONFIG.duration // 0-1的进度
|
||||
|
|
||||
|
// 使用缓动函数使动画更平滑
|
||||
|
const easeProgress = 1 - Math.pow(1 - progress, 3) // ease-out cubic
|
||||
|
|
||||
|
// 计算半径和透明度
|
||||
|
const radius = |
||||
|
ANIMATION_CONFIG.minRadius + |
||||
|
easeProgress * (ANIMATION_CONFIG.maxRadius - ANIMATION_CONFIG.minRadius) |
||||
|
const opacity = Math.max(0, 1 - easeProgress) // 1到0的透明度
|
||||
|
|
||||
|
if (opacity > ANIMATION_CONFIG.minOpacity) { |
||||
|
// 计算颜色透明度
|
||||
|
const alpha = Math.floor(opacity * 255) |
||||
|
.toString(16) |
||||
|
.padStart(2, '0') |
||||
|
const strokeColor = color + alpha |
||||
|
|
||||
|
styles.push( |
||||
|
new Style({ |
||||
|
image: new Circle({ |
||||
|
radius: radius, |
||||
|
fill: new Fill({ |
||||
|
color: 'transparent' |
||||
|
}), |
||||
|
stroke: new Stroke({ |
||||
|
color: strokeColor, |
||||
|
width: Math.max(1, 3 - i * 0.4) // 动态调整线宽
|
||||
|
}) |
||||
|
}) |
||||
|
}) |
||||
|
) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return styles |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
return this.rippleLayer |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 启动波纹动画 |
||||
|
*/ |
||||
|
startAnimation(): void { |
||||
|
let lastUpdateTime = 0 |
||||
|
const frameInterval = 1000 / ANIMATION_CONFIG.targetFPS // 帧间隔
|
||||
|
|
||||
|
const animateRipples = (currentTime: number) => { |
||||
|
if (this.rippleLayer && currentTime - lastUpdateTime >= frameInterval) { |
||||
|
this.rippleLayer.getSource()?.changed() |
||||
|
lastUpdateTime = currentTime |
||||
|
} |
||||
|
this.animationTimer = requestAnimationFrame(animateRipples) |
||||
|
} |
||||
|
animateRipples(0) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 停止波纹动画 |
||||
|
*/ |
||||
|
stopAnimation(): void { |
||||
|
if (this.animationTimer) { |
||||
|
cancelAnimationFrame(this.animationTimer) |
||||
|
this.animationTimer = null |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 更新波纹图层 |
||||
|
*/ |
||||
|
updateRipples(): void { |
||||
|
if (this.rippleLayer) { |
||||
|
this.rippleLayer.getSource()?.changed() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 获取波纹图层 |
||||
|
*/ |
||||
|
getRippleLayer(): VectorLayer<VectorSource> | null { |
||||
|
return this.rippleLayer |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 销毁动画服务 |
||||
|
*/ |
||||
|
destroy(): void { |
||||
|
this.stopAnimation() |
||||
|
this.rippleLayer = null |
||||
|
this.map = null |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,264 @@ |
|||||
|
/** |
||||
|
* 围栏绘制服务类 |
||||
|
*/ |
||||
|
import { Vector as VectorLayer } from 'ol/layer' |
||||
|
import { Vector as VectorSource } from 'ol/source' |
||||
|
import { Draw, Modify, Snap } from 'ol/interaction' |
||||
|
import { Style, Stroke, Fill, Circle } from 'ol/style' |
||||
|
import { Polygon } from 'ol/geom' |
||||
|
import { Feature } from 'ol' |
||||
|
import { toLonLat, fromLonLat } from 'ol/proj' |
||||
|
import type { FenceData } from '../types/map.types' |
||||
|
|
||||
|
export class FenceDrawService { |
||||
|
private map: any = null |
||||
|
private drawLayer: VectorLayer<VectorSource> | null = null |
||||
|
private drawInteraction: Draw | null = null |
||||
|
private modifyInteraction: Modify | null = null |
||||
|
private snapInteraction: Snap | null = null |
||||
|
private isDrawing: boolean = false |
||||
|
|
||||
|
// 绘制完成回调
|
||||
|
private onDrawComplete: ((coordinates: [number, number][]) => void) | null = null |
||||
|
|
||||
|
/** |
||||
|
* 初始化绘制服务 |
||||
|
*/ |
||||
|
init(map: any): void { |
||||
|
this.map = map |
||||
|
this.createDrawLayer() |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 创建绘制图层 |
||||
|
*/ |
||||
|
private createDrawLayer(): void { |
||||
|
const source = new VectorSource() |
||||
|
|
||||
|
this.drawLayer = new VectorLayer({ |
||||
|
source: source, |
||||
|
style: new Style({ |
||||
|
stroke: new Stroke({ |
||||
|
color: '#409EFF', |
||||
|
width: 3, |
||||
|
lineDash: [5, 5] |
||||
|
}), |
||||
|
fill: new Fill({ |
||||
|
color: 'rgba(64, 158, 255, 0.1)' |
||||
|
}), |
||||
|
image: new Circle({ |
||||
|
radius: 6, |
||||
|
fill: new Fill({ |
||||
|
color: '#409EFF' |
||||
|
}), |
||||
|
stroke: new Stroke({ |
||||
|
color: '#fff', |
||||
|
width: 2 |
||||
|
}) |
||||
|
}) |
||||
|
}), |
||||
|
zIndex: 10 // 确保绘制图层在最上层
|
||||
|
}) |
||||
|
|
||||
|
this.map.addLayer(this.drawLayer) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 开始绘制围栏 |
||||
|
*/ |
||||
|
startDrawing(onComplete: (coordinates: [number, number][]) => void): void { |
||||
|
if (this.isDrawing) { |
||||
|
this.stopDrawing() |
||||
|
} |
||||
|
|
||||
|
this.onDrawComplete = onComplete |
||||
|
this.isDrawing = true |
||||
|
|
||||
|
// 创建绘制交互
|
||||
|
this.drawInteraction = new Draw({ |
||||
|
source: this.drawLayer!.getSource()!, |
||||
|
type: 'Polygon', |
||||
|
style: new Style({ |
||||
|
stroke: new Stroke({ |
||||
|
color: '#409EFF', |
||||
|
width: 2, |
||||
|
lineDash: [5, 5] |
||||
|
}), |
||||
|
fill: new Fill({ |
||||
|
color: 'rgba(64, 158, 255, 0.1)' |
||||
|
}), |
||||
|
image: new Circle({ |
||||
|
radius: 6, |
||||
|
fill: new Fill({ |
||||
|
color: '#409EFF' |
||||
|
}), |
||||
|
stroke: new Stroke({ |
||||
|
color: '#fff', |
||||
|
width: 2 |
||||
|
}) |
||||
|
}) |
||||
|
}) |
||||
|
}) |
||||
|
|
||||
|
// 监听绘制完成事件
|
||||
|
this.drawInteraction.on('drawend', (event) => { |
||||
|
const feature = event.feature |
||||
|
const geometry = feature.getGeometry() as Polygon |
||||
|
const coordinates = geometry.getCoordinates()[0] |
||||
|
|
||||
|
// 转换为经纬度坐标
|
||||
|
const lonLatCoordinates = coordinates.map((coord) => toLonLat(coord)) as [number, number][] |
||||
|
|
||||
|
// 移除最后一个重复的点
|
||||
|
if (lonLatCoordinates.length > 1) { |
||||
|
lonLatCoordinates.pop() |
||||
|
} |
||||
|
|
||||
|
// 调用完成回调
|
||||
|
if (this.onDrawComplete) { |
||||
|
this.onDrawComplete(lonLatCoordinates) |
||||
|
} |
||||
|
|
||||
|
// 立即清除绘制的特征，避免在正式围栏图层中重复显示
|
||||
|
setTimeout(() => { |
||||
|
if (this.drawLayer) { |
||||
|
const source = this.drawLayer.getSource() |
||||
|
if (source) { |
||||
|
source.clear() |
||||
|
} |
||||
|
} |
||||
|
}, 100) |
||||
|
|
||||
|
// 停止绘制
|
||||
|
this.stopDrawing() |
||||
|
}) |
||||
|
|
||||
|
// 创建修改交互
|
||||
|
this.modifyInteraction = new Modify({ |
||||
|
source: this.drawLayer!.getSource()! |
||||
|
}) |
||||
|
|
||||
|
// 创建捕捉交互
|
||||
|
this.snapInteraction = new Snap({ |
||||
|
source: this.drawLayer!.getSource()! |
||||
|
}) |
||||
|
|
||||
|
// 添加交互到地图
|
||||
|
this.map.addInteraction(this.drawInteraction) |
||||
|
this.map.addInteraction(this.modifyInteraction) |
||||
|
this.map.addInteraction(this.snapInteraction) |
||||
|
|
||||
|
// 改变鼠标样式
|
||||
|
this.map.getViewport().style.cursor = 'crosshair' |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 停止绘制 |
||||
|
*/ |
||||
|
stopDrawing(): void { |
||||
|
if (!this.isDrawing) return |
||||
|
|
||||
|
this.isDrawing = false |
||||
|
|
||||
|
// 移除交互
|
||||
|
if (this.drawInteraction) { |
||||
|
this.map.removeInteraction(this.drawInteraction) |
||||
|
this.drawInteraction = null |
||||
|
} |
||||
|
if (this.modifyInteraction) { |
||||
|
this.map.removeInteraction(this.modifyInteraction) |
||||
|
this.modifyInteraction = null |
||||
|
} |
||||
|
if (this.snapInteraction) { |
||||
|
this.map.removeInteraction(this.snapInteraction) |
||||
|
this.snapInteraction = null |
||||
|
} |
||||
|
|
||||
|
// 恢复鼠标样式
|
||||
|
this.map.getViewport().style.cursor = '' |
||||
|
|
||||
|
// 清空绘制图层
|
||||
|
if (this.drawLayer) { |
||||
|
const source = this.drawLayer.getSource() |
||||
|
if (source) { |
||||
|
source.clear() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
this.onDrawComplete = null |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 取消绘制 |
||||
|
*/ |
||||
|
cancelDrawing(): void { |
||||
|
this.stopDrawing() |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 检查是否正在绘制 |
||||
|
*/ |
||||
|
isCurrentlyDrawing(): boolean { |
||||
|
return this.isDrawing |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 清除绘制图层 |
||||
|
*/ |
||||
|
clearDrawLayer(): void { |
||||
|
if (this.drawLayer) { |
||||
|
const source = this.drawLayer.getSource() |
||||
|
if (source) { |
||||
|
source.clear() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 显示编辑围栏 |
||||
|
*/ |
||||
|
showEditFence(fence: FenceData): void { |
||||
|
this.clearDrawLayer() |
||||
|
|
||||
|
if (this.drawLayer && fence.fenceRange.length > 0) { |
||||
|
// 将围栏坐标转换为地图坐标并创建多边形
|
||||
|
const coordinates = fence.fenceRange.map((coord) => [coord[0], coord[1]]) |
||||
|
|
||||
|
// 确保多边形闭合
|
||||
|
if (coordinates.length > 0) { |
||||
|
const lastCoord = coordinates[coordinates.length - 1] |
||||
|
const firstCoord = coordinates[0] |
||||
|
if (lastCoord[0] !== firstCoord[0] || lastCoord[1] !== firstCoord[1]) { |
||||
|
coordinates.push(firstCoord) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const polygon = new Polygon([coordinates]) |
||||
|
polygon.transform('EPSG:4326', 'EPSG:3857') |
||||
|
|
||||
|
const feature = this.drawLayer.getSource()?.getFeatures()[0] |
||||
|
if (feature) { |
||||
|
feature.setGeometry(polygon) |
||||
|
} else { |
||||
|
const newFeature = new Feature({ |
||||
|
geometry: polygon |
||||
|
}) |
||||
|
this.drawLayer.getSource()?.addFeature(newFeature) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 销毁服务 |
||||
|
*/ |
||||
|
destroy(): void { |
||||
|
this.stopDrawing() |
||||
|
|
||||
|
if (this.drawLayer && this.map) { |
||||
|
this.map.removeLayer(this.drawLayer) |
||||
|
this.drawLayer = null |
||||
|
} |
||||
|
|
||||
|
this.map = null |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,328 @@ |
|||||
|
/** |
||||
|
* 围栏服务类 |
||||
|
*/ |
||||
|
import { Vector as VectorLayer } from 'ol/layer' |
||||
|
import { Vector as VectorSource } from 'ol/source' |
||||
|
import { Feature } from 'ol' |
||||
|
import { Polygon, Point } from 'ol/geom' |
||||
|
import { Style, Stroke, Fill, Circle, Text } from 'ol/style' |
||||
|
import { fromLonLat } from 'ol/proj' |
||||
|
import type { FenceData, MarkerData } from '../types/map.types' |
||||
|
|
||||
|
export class FenceService { |
||||
|
private fenceLayer: VectorLayer<VectorSource> | null = null |
||||
|
private fenceData: FenceData[] = [] |
||||
|
private map: any = null |
||||
|
private isVisible: boolean = true |
||||
|
|
||||
|
/** |
||||
|
* 创建围栏图层 |
||||
|
*/ |
||||
|
createFenceLayer(fences: FenceData[], map: any): VectorLayer<VectorSource> { |
||||
|
this.map = map |
||||
|
this.fenceData = fences |
||||
|
const source = new VectorSource() |
||||
|
|
||||
|
fences.forEach((fence) => { |
||||
|
// 创建围栏多边形特征
|
||||
|
const coordinates = fence.fenceRange.map((coord) => fromLonLat(coord)) |
||||
|
|
||||
|
// 确保围栏是闭合的
|
||||
|
if (coordinates.length > 0) { |
||||
|
const lastCoord = coordinates[coordinates.length - 1] |
||||
|
const firstCoord = coordinates[0] |
||||
|
if (lastCoord[0] !== firstCoord[0] || lastCoord[1] !== firstCoord[1]) { |
||||
|
coordinates.push(firstCoord) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const feature = new Feature({ |
||||
|
geometry: new Polygon([coordinates]), |
||||
|
fenceData: fence |
||||
|
}) |
||||
|
|
||||
|
// 设置围栏样式
|
||||
|
feature.setStyle(this.createFenceStyle(fence)) |
||||
|
feature.set('type', 'fence') |
||||
|
feature.set('fenceId', fence.id) |
||||
|
source.addFeature(feature) |
||||
|
|
||||
|
// 创建围栏中心点标签
|
||||
|
const centerFeature = this.createFenceCenterLabel(fence, coordinates) |
||||
|
if (centerFeature) { |
||||
|
source.addFeature(centerFeature) |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
this.fenceLayer = new VectorLayer({ |
||||
|
source: source, |
||||
|
zIndex: 1 // 确保围栏在标记点下方
|
||||
|
}) |
||||
|
|
||||
|
return this.fenceLayer |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 创建围栏样式 |
||||
|
*/ |
||||
|
private createFenceStyle(fence: FenceData): Style { |
||||
|
let strokeColor = '#1890ff' |
||||
|
let fillColor = 'rgba(24, 144, 255, 0.1)' |
||||
|
let strokeWidth = 2 |
||||
|
|
||||
|
// 根据围栏状态设置样式
|
||||
|
switch (fence.status) { |
||||
|
case 0: |
||||
|
strokeColor = '#67c23a' |
||||
|
fillColor = 'rgba(103, 194, 58, 0.1)' |
||||
|
break |
||||
|
case 1: |
||||
|
strokeColor = '#e6a23c' |
||||
|
fillColor = 'rgba(230, 162, 60, 0.15)' |
||||
|
strokeWidth = 3 |
||||
|
break |
||||
|
case 2: |
||||
|
strokeColor = '#f56c6c' |
||||
|
fillColor = 'rgba(245, 108, 108, 0.2)' |
||||
|
strokeWidth = 4 |
||||
|
break |
||||
|
} |
||||
|
|
||||
|
// 根据围栏类型调整样式
|
||||
|
const lineDash = fence.type === 1 ? [10, 5] : undefined |
||||
|
|
||||
|
return new Style({ |
||||
|
stroke: new Stroke({ |
||||
|
color: strokeColor, |
||||
|
width: strokeWidth, |
||||
|
lineDash: lineDash |
||||
|
}), |
||||
|
fill: new Fill({ |
||||
|
color: fillColor |
||||
|
}) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 创建围栏中心点标签 |
||||
|
*/ |
||||
|
private createFenceCenterLabel(fence: FenceData, coordinates: number[][]): Feature | null { |
||||
|
if (coordinates.length === 0) return null |
||||
|
|
||||
|
// 计算围栏中心点
|
||||
|
const centerX = coordinates.reduce((sum, coord) => sum + coord[0], 0) / coordinates.length |
||||
|
const centerY = coordinates.reduce((sum, coord) => sum + coord[1], 0) / coordinates.length |
||||
|
|
||||
|
const labelFeature = new Feature({ |
||||
|
geometry: new Point([centerX, centerY]), |
||||
|
fenceData: fence |
||||
|
}) |
||||
|
|
||||
|
// 设置标签样式
|
||||
|
labelFeature.setStyle( |
||||
|
new Style({ |
||||
|
text: new Text({ |
||||
|
text: fence.name, |
||||
|
font: '12px Arial', |
||||
|
fill: new Fill({ |
||||
|
color: '#333' |
||||
|
}), |
||||
|
stroke: new Stroke({ |
||||
|
color: '#fff', |
||||
|
width: 2 |
||||
|
}), |
||||
|
backgroundFill: new Fill({ |
||||
|
color: 'rgba(255, 255, 255, 0.8)' |
||||
|
}), |
||||
|
backgroundStroke: new Stroke({ |
||||
|
color: '#ccc', |
||||
|
width: 1 |
||||
|
}), |
||||
|
padding: [2, 4, 2, 4] |
||||
|
}) |
||||
|
}) |
||||
|
) |
||||
|
|
||||
|
labelFeature.set('type', 'fence-label') |
||||
|
labelFeature.set('fenceId', fence.id) |
||||
|
|
||||
|
return labelFeature |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 获取围栏图层 |
||||
|
*/ |
||||
|
getFenceLayer(): VectorLayer<VectorSource> | null { |
||||
|
return this.fenceLayer |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 显示围栏 |
||||
|
*/ |
||||
|
showFences(): void { |
||||
|
if (this.fenceLayer) { |
||||
|
this.fenceLayer.setVisible(true) |
||||
|
this.isVisible = true |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 隐藏围栏 |
||||
|
*/ |
||||
|
hideFences(): void { |
||||
|
if (this.fenceLayer) { |
||||
|
this.fenceLayer.setVisible(false) |
||||
|
this.isVisible = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 切换围栏显示状态 |
||||
|
*/ |
||||
|
toggleFences(): boolean { |
||||
|
if (this.isVisible) { |
||||
|
this.hideFences() |
||||
|
} else { |
||||
|
this.showFences() |
||||
|
} |
||||
|
return this.isVisible |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 设置围栏数据 |
||||
|
*/ |
||||
|
setFenceData(fences: FenceData[]): void { |
||||
|
this.fenceData = fences |
||||
|
if (this.fenceLayer && this.map) { |
||||
|
// 重新创建围栏图层
|
||||
|
const source = this.fenceLayer.getSource() |
||||
|
if (source) { |
||||
|
source.clear() |
||||
|
|
||||
|
fences.forEach((fence) => { |
||||
|
const coordinates = fence.fenceRange.map((coord) => fromLonLat(coord)) |
||||
|
|
||||
|
if (coordinates.length > 0) { |
||||
|
const lastCoord = coordinates[coordinates.length - 1] |
||||
|
const firstCoord = coordinates[0] |
||||
|
if (lastCoord[0] !== firstCoord[0] || lastCoord[1] !== firstCoord[1]) { |
||||
|
coordinates.push(firstCoord) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const feature = new Feature({ |
||||
|
geometry: new Polygon([coordinates]), |
||||
|
fenceData: fence |
||||
|
}) |
||||
|
|
||||
|
feature.setStyle(this.createFenceStyle(fence)) |
||||
|
feature.set('type', 'fence') |
||||
|
feature.set('fenceId', fence.id) |
||||
|
source.addFeature(feature) |
||||
|
|
||||
|
const centerFeature = this.createFenceCenterLabel(fence, coordinates) |
||||
|
if (centerFeature) { |
||||
|
source.addFeature(centerFeature) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 根据ID获取围栏数据 |
||||
|
*/ |
||||
|
getFenceById(id: string): FenceData | undefined { |
||||
|
return this.fenceData.find((fence) => fence.id === id) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 检查点是否在围栏内 |
||||
|
*/ |
||||
|
isPointInFence(point: [number, number], fenceId?: string): boolean { |
||||
|
const fences = fenceId ? this.fenceData.filter((fence) => fence.id === fenceId) : this.fenceData |
||||
|
|
||||
|
for (const fence of fences) { |
||||
|
if (this.pointInPolygon(point, fence.fenceRange)) { |
||||
|
return true |
||||
|
} |
||||
|
} |
||||
|
return false |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 点在多边形内判断算法（射线法） |
||||
|
*/ |
||||
|
private pointInPolygon(point: [number, number], polygon: [number, number][]): boolean { |
||||
|
const [x, y] = point |
||||
|
let inside = false |
||||
|
|
||||
|
for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) { |
||||
|
const [xi, yi] = polygon[i] |
||||
|
const [xj, yj] = polygon[j] |
||||
|
|
||||
|
if (yi > y !== yj > y && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi) { |
||||
|
inside = !inside |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return inside |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 获取标记点的围栏状态 |
||||
|
*/ |
||||
|
getMarkerFenceStatus(marker: MarkerData): { isInFence: boolean; fenceIds: string[] } { |
||||
|
const fenceIds: string[] = [] |
||||
|
|
||||
|
for (const fence of this.fenceData) { |
||||
|
if (this.pointInPolygon(marker.coordinates, fence.fenceRange)) { |
||||
|
fenceIds.push(fence.id) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return { |
||||
|
isInFence: fenceIds.length > 0, |
||||
|
fenceIds |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 更新围栏状态 |
||||
|
*/ |
||||
|
updateFenceStatus(fenceId: string, status: number): void { |
||||
|
const fence = this.fenceData.find((f) => f.id === fenceId) |
||||
|
if (fence) { |
||||
|
fence.status = status |
||||
|
|
||||
|
// 更新图层中对应的特征样式
|
||||
|
if (this.fenceLayer) { |
||||
|
const source = this.fenceLayer.getSource() |
||||
|
if (source) { |
||||
|
const features = source.getFeatures() |
||||
|
const fenceFeature = features.find( |
||||
|
(feature) => feature.get('type') === 'fence' && feature.get('fenceId') === fenceId |
||||
|
) |
||||
|
if (fenceFeature) { |
||||
|
fenceFeature.setStyle(this.createFenceStyle(fence)) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 销毁服务 |
||||
|
*/ |
||||
|
destroy(): void { |
||||
|
if (this.fenceLayer) { |
||||
|
const source = this.fenceLayer.getSource() |
||||
|
if (source) { |
||||
|
source.clear() |
||||
|
} |
||||
|
} |
||||
|
this.fenceLayer = null |
||||
|
this.fenceData = [] |
||||
|
this.map = null |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,114 @@ |
|||||
|
/** |
||||
|
* 地图服务类 |
||||
|
*/ |
||||
|
import { Map, View } from 'ol' |
||||
|
import { Tile as TileLayer } from 'ol/layer' |
||||
|
import { OSM, XYZ } from 'ol/source' |
||||
|
import { fromLonLat } from 'ol/proj' |
||||
|
import Overlay from 'ol/Overlay' |
||||
|
import type { MapProps, MapInstance } from '../types/map.types' |
||||
|
|
||||
|
export class MapService { |
||||
|
private map: Map | null = null |
||||
|
private tileLayer: TileLayer<XYZ | OSM> | null = null |
||||
|
private popupOverlay: Overlay | null = null |
||||
|
|
||||
|
/** |
||||
|
* 创建瓦片图层 |
||||
|
*/ |
||||
|
private createTileLayer(props: MapProps): TileLayer<XYZ | OSM> { |
||||
|
const source = new XYZ({ |
||||
|
url: props.tileUrl!, |
||||
|
maxZoom: props.maxZoom, |
||||
|
minZoom: props.minZoom |
||||
|
}) |
||||
|
return new TileLayer({ |
||||
|
source: source |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 创建弹窗 |
||||
|
*/ |
||||
|
private createPopup(): Overlay { |
||||
|
const popupElement = document.createElement('div') |
||||
|
popupElement.className = 'marker-popup' |
||||
|
popupElement.style.cssText = ` |
||||
|
background: white; |
||||
|
border: 1px solid #ccc; |
||||
|
border-radius: 6px; |
||||
|
padding: 12px 16px; |
||||
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15); |
||||
|
font-size: 12px; |
||||
|
max-width: 280px; |
||||
|
min-width: 200px; |
||||
|
pointer-events: none; |
||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; |
||||
|
` |
||||
|
|
||||
|
this.popupOverlay = new Overlay({ |
||||
|
element: popupElement, |
||||
|
positioning: 'bottom-center', |
||||
|
stopEvent: false, |
||||
|
offset: [0, -10] |
||||
|
}) |
||||
|
|
||||
|
return this.popupOverlay |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 初始化地图 |
||||
|
*/ |
||||
|
initMap(container: HTMLElement, props: MapProps): MapInstance { |
||||
|
this.tileLayer = this.createTileLayer(props) |
||||
|
const popup = this.createPopup() |
||||
|
|
||||
|
const center = fromLonLat(props.center!) |
||||
|
|
||||
|
this.map = new Map({ |
||||
|
target: container, |
||||
|
layers: [this.tileLayer], |
||||
|
overlays: [popup], |
||||
|
view: new View({ |
||||
|
center: center, |
||||
|
zoom: props.zoom, |
||||
|
maxZoom: props.maxZoom, |
||||
|
minZoom: props.minZoom |
||||
|
}) |
||||
|
}) |
||||
|
|
||||
|
return { |
||||
|
map: this.map, |
||||
|
tileLayer: this.tileLayer, |
||||
|
markerLayer: null, |
||||
|
rippleLayer: null, |
||||
|
popupOverlay: this.popupOverlay |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 获取地图实例 |
||||
|
*/ |
||||
|
getMap(): Map | null { |
||||
|
return this.map |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 获取弹窗实例 |
||||
|
*/ |
||||
|
getPopupOverlay(): Overlay | null { |
||||
|
return this.popupOverlay |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 销毁地图 |
||||
|
*/ |
||||
|
destroy(): void { |
||||
|
if (this.map) { |
||||
|
this.map.setTarget(undefined) |
||||
|
this.map = null |
||||
|
this.tileLayer = null |
||||
|
this.popupOverlay = null |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,196 @@ |
|||||
|
/** |
||||
|
* 标记服务类 |
||||
|
*/ |
||||
|
import { Vector as VectorLayer } from 'ol/layer' |
||||
|
import { Vector as VectorSource, Cluster } from 'ol/source' |
||||
|
import { Feature } from 'ol' |
||||
|
import { Point } from 'ol/geom' |
||||
|
import { Style } from 'ol/style' |
||||
|
import { fromLonLat } from 'ol/proj' |
||||
|
import type { MarkerData, MapProps } from '../types/map.types' |
||||
|
import { createMarkerStyle, getClusterMarkerData } from '../utils/map.utils' |
||||
|
|
||||
|
export class MarkerService { |
||||
|
private markerLayer: VectorLayer<VectorSource | Cluster> | null = null |
||||
|
private currentProps: MapProps | null = null |
||||
|
private map: any = null |
||||
|
|
||||
|
/** |
||||
|
* 设置地图实例 |
||||
|
*/ |
||||
|
setMap(map: any): void { |
||||
|
this.map = map |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 创建标记图层 |
||||
|
*/ |
||||
|
createMarkerLayer(props: MapProps, map?: any): VectorLayer<VectorSource | Cluster> { |
||||
|
// 保存地图实例
|
||||
|
if (map) { |
||||
|
this.map = map |
||||
|
} |
||||
|
|
||||
|
// 保存当前props
|
||||
|
this.currentProps = { ...props } |
||||
|
|
||||
|
const source = new VectorSource() |
||||
|
// 添加标记
|
||||
|
const markers = props.markers || [] |
||||
|
markers.forEach((marker) => { |
||||
|
const feature = new Feature({ |
||||
|
geometry: new Point(fromLonLat(marker.coordinates)), |
||||
|
markerData: marker |
||||
|
}) |
||||
|
feature.setStyle(createMarkerStyle(marker)) |
||||
|
source.addFeature(feature) |
||||
|
}) |
||||
|
|
||||
|
// 检查是否应该强制使用单个marker模式
|
||||
|
const shouldForceSingleMark = () => { |
||||
|
if (!props.forceSingleMark || !this.map) return false |
||||
|
const currentZoom = this.map.getView().getZoom() |
||||
|
return currentZoom >= props.forceSingleMark |
||||
|
} |
||||
|
|
||||
|
// 如果启用聚合且不强制使用单个marker模式
|
||||
|
if (props.enableCluster && !shouldForceSingleMark()) { |
||||
|
const clusterSource = new Cluster({ |
||||
|
source: source, |
||||
|
distance: Math.max(props.clusterDistance || 40, 10) // 确保最小距离为10像素
|
||||
|
}) |
||||
|
|
||||
|
this.markerLayer = new VectorLayer({ |
||||
|
source: clusterSource, |
||||
|
style: (feature) => { |
||||
|
const features = feature.get('features') |
||||
|
|
||||
|
// 确保features存在且不为空
|
||||
|
if (!features || features.length === 0) { |
||||
|
return new Style() // 返回空样式，隐藏无效的feature
|
||||
|
} |
||||
|
|
||||
|
if (features.length === 1) { |
||||
|
// 单个marker
|
||||
|
const markerData = features[0].get('markerData') |
||||
|
return markerData ? createMarkerStyle(markerData) : new Style() |
||||
|
} else { |
||||
|
// 聚合marker
|
||||
|
const highestStatus = getClusterMarkerData(features) |
||||
|
return createMarkerStyle(highestStatus, true, features.length) |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
} else { |
||||
|
this.markerLayer = new VectorLayer({ |
||||
|
source: source |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
return this.markerLayer |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 获取标记图层 |
||||
|
*/ |
||||
|
getMarkerLayer(): VectorLayer<VectorSource | Cluster> | null { |
||||
|
return this.markerLayer |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 更新标记数据 |
||||
|
*/ |
||||
|
updateMarkers(markers: MarkerData[]): void { |
||||
|
if (!this.currentProps) return |
||||
|
|
||||
|
// 更新props中的markers
|
||||
|
this.currentProps.markers = markers |
||||
|
|
||||
|
// 完全重新创建markerLayer
|
||||
|
const newLayer = this.createMarkerLayerFromProps(this.currentProps) |
||||
|
|
||||
|
// 如果有旧的layer，将其从地图中移除
|
||||
|
if (this.markerLayer) { |
||||
|
// 这里需要外部调用来移除旧layer并添加新layer
|
||||
|
// 我们只负责创建新的layer
|
||||
|
} |
||||
|
|
||||
|
this.markerLayer = newLayer |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 从props创建markerLayer（内部方法） |
||||
|
*/ |
||||
|
private createMarkerLayerFromProps(props: MapProps): VectorLayer<VectorSource | Cluster> { |
||||
|
const source = new VectorSource() |
||||
|
// 添加标记
|
||||
|
const markers = props.markers || [] |
||||
|
markers.forEach((marker) => { |
||||
|
const feature = new Feature({ |
||||
|
geometry: new Point(fromLonLat(marker.coordinates)), |
||||
|
markerData: marker |
||||
|
}) |
||||
|
feature.setStyle(createMarkerStyle(marker)) |
||||
|
source.addFeature(feature) |
||||
|
}) |
||||
|
|
||||
|
// 检查是否应该强制使用单个marker模式
|
||||
|
const shouldForceSingleMark = () => { |
||||
|
if (!props.forceSingleMark || !this.map) return false |
||||
|
const currentZoom = this.map.getView().getZoom() |
||||
|
return currentZoom >= props.forceSingleMark |
||||
|
} |
||||
|
|
||||
|
// 如果启用聚合且不强制使用单个marker模式
|
||||
|
if (props.enableCluster && !shouldForceSingleMark()) { |
||||
|
const clusterSource = new Cluster({ |
||||
|
source: source, |
||||
|
distance: Math.max(props.clusterDistance || 40, 10) |
||||
|
}) |
||||
|
|
||||
|
return new VectorLayer({ |
||||
|
source: clusterSource, |
||||
|
style: (feature) => { |
||||
|
const features = feature.get('features') |
||||
|
|
||||
|
// 确保features存在且不为空
|
||||
|
if (!features || features.length === 0) { |
||||
|
return new Style() // 返回空样式，隐藏无效的feature
|
||||
|
} |
||||
|
|
||||
|
if (features.length === 1) { |
||||
|
// 单个marker
|
||||
|
const markerData = features[0].get('markerData') |
||||
|
return markerData ? createMarkerStyle(markerData) : new Style() |
||||
|
} else { |
||||
|
// 聚合marker
|
||||
|
const highestStatus = getClusterMarkerData(features) |
||||
|
return createMarkerStyle(highestStatus, true, features.length) |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
} else { |
||||
|
return new VectorLayer({ |
||||
|
source: source |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 刷新标记样式（用于聚合更新） |
||||
|
*/ |
||||
|
refreshStyles(): void { |
||||
|
if (this.markerLayer) { |
||||
|
this.markerLayer.changed() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 销毁标记图层 |
||||
|
*/ |
||||
|
destroy(): void { |
||||
|
this.markerLayer = null |
||||
|
this.currentProps = null |
||||
|
this.map = null |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,86 @@ |
|||||
|
/** |
||||
|
* 弹窗服务类 |
||||
|
*/ |
||||
|
import type { MarkerData, DetectorInfo } from '../types/map.types' |
||||
|
import { |
||||
|
getHighestPriorityStatus, |
||||
|
getStatusLabel, |
||||
|
getStatusColor, |
||||
|
createClusterPopupHTML, |
||||
|
sortDetectorsByPriority |
||||
|
} from '../utils/map.utils' |
||||
|
|
||||
|
export class PopupService { |
||||
|
/** |
||||
|
* 处理聚合标记弹窗 |
||||
|
*/ |
||||
|
handleClusterPopup(features: any[]): string { |
||||
|
// 收集所有探测器信息
|
||||
|
const detectorList: DetectorInfo[] = features.map((f) => { |
||||
|
const markerData = f.get('markerData') as MarkerData |
||||
|
const status = getHighestPriorityStatus(markerData) |
||||
|
return { |
||||
|
name: markerData.name, |
||||
|
status, |
||||
|
statusLabel: getStatusLabel(status), |
||||
|
statusColor: getStatusColor(status) |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
// 按优先级排序
|
||||
|
const sortedDetectorList = sortDetectorsByPriority(detectorList) |
||||
|
|
||||
|
// 生成弹窗HTML
|
||||
|
return createClusterPopupHTML(sortedDetectorList) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 处理单个标记弹窗 |
||||
|
*/ |
||||
|
handleSingleMarkerPopup(markerData: MarkerData): string { |
||||
|
const status = getHighestPriorityStatus(markerData) |
||||
|
return ` |
||||
|
<div style="font-weight: bold; margin-bottom: 4px;">${markerData.name}</div> |
||||
|
<div style="color: ${getStatusColor(status)};"> |
||||
|
状态: ${getStatusLabel(status)} |
||||
|
</div> |
||||
|
<div style="margin-top: 4px; font-size: 10px; color: #666;"> |
||||
|
坐标: ${markerData.coordinates[0].toFixed(6)}, ${markerData.coordinates[1].toFixed(6)} |
||||
|
</div> |
||||
|
` |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 处理默认弹窗 |
||||
|
*/ |
||||
|
handleDefaultPopup(): string { |
||||
|
return ` |
||||
|
<div style="font-weight: bold;">标记</div> |
||||
|
<div style="font-size: 10px; color: #666;">未知标记</div> |
||||
|
` |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 根据特征类型处理弹窗内容 |
||||
|
*/ |
||||
|
handlePopupContent(feature: any): string { |
||||
|
const markerData = feature.get('markerData') |
||||
|
const features = feature.get('features') |
||||
|
|
||||
|
// 处理聚合标记
|
||||
|
if (features && features.length > 1) { |
||||
|
return this.handleClusterPopup(features) |
||||
|
} else if (features && features.length === 1) { |
||||
|
// 处理聚合中的单个标记
|
||||
|
const singleMarkerData = features[0].get('markerData') as MarkerData |
||||
|
if (singleMarkerData) { |
||||
|
return this.handleSingleMarkerPopup(singleMarkerData) |
||||
|
} |
||||
|
} else if (markerData) { |
||||
|
// 处理非聚合的单个标记
|
||||
|
return this.handleSingleMarkerPopup(markerData as MarkerData) |
||||
|
} |
||||
|
|
||||
|
return this.handleDefaultPopup() |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,502 @@ |
|||||
|
/** |
||||
|
* 轨迹服务类 |
||||
|
*/ |
||||
|
import { Vector as VectorLayer } from 'ol/layer' |
||||
|
import { Vector as VectorSource } from 'ol/source' |
||||
|
import { Feature } from 'ol' |
||||
|
import { LineString, Point } from 'ol/geom' |
||||
|
import { Style, Stroke, Circle, Fill, Text, Icon } from 'ol/style' |
||||
|
import { fromLonLat } from 'ol/proj' |
||||
|
import type { |
||||
|
TrajectoryData, |
||||
|
TrajectoryPoint, |
||||
|
TrajectoryPlayState, |
||||
|
MarkerData |
||||
|
} from '../types/map.types' |
||||
|
import { createLocationIconSVG, getHighestPriorityStatus, getStatusColor } from '../utils/map.utils' |
||||
|
import dayjs from 'dayjs' |
||||
|
|
||||
|
export class TrajectoryService { |
||||
|
private trajectoryLayer: VectorLayer<VectorSource> | null = null |
||||
|
private trajectoryData: TrajectoryData[] = [] |
||||
|
private map: any = null |
||||
|
private animationTimer: number | null = null |
||||
|
|
||||
|
// 当前移动的 marker 图层
|
||||
|
private movingMarkerLayer: VectorLayer<VectorSource> | null = null |
||||
|
|
||||
|
// 按时间排序的所有轨迹点
|
||||
|
private sortedTrajectoryPoints: Array<TrajectoryPoint> = [] |
||||
|
|
||||
|
/** |
||||
|
* 创建轨迹图层 |
||||
|
*/ |
||||
|
createTrajectoryLayer(map: any): VectorLayer<VectorSource> { |
||||
|
this.map = map |
||||
|
const source = new VectorSource() |
||||
|
|
||||
|
this.trajectoryLayer = new VectorLayer({ |
||||
|
source: source, |
||||
|
style: (feature) => { |
||||
|
const featureType = feature.get('type') |
||||
|
|
||||
|
if (featureType === 'trajectory') { |
||||
|
// 轨迹线条样式
|
||||
|
return new Style({ |
||||
|
stroke: new Stroke({ |
||||
|
color: feature.get('color') || '#1890ff', |
||||
|
width: feature.get('width') || 3, |
||||
|
lineDash: [5, 5] // 虚线效果
|
||||
|
}) |
||||
|
}) |
||||
|
} else if (featureType === 'trajectory-point') { |
||||
|
// 轨迹点样式
|
||||
|
const isActive = feature.get('isActive') |
||||
|
const pointRadius = feature.get('pointRadius') || 4 |
||||
|
const activePointRadius = feature.get('activePointRadius') || 8 |
||||
|
const showTimeLabel = feature.get('showTimeLabel') !== false // 默认显示时间标签
|
||||
|
|
||||
|
// 根据轨迹点的data状态获取颜色
|
||||
|
const pointData = feature.get('pointData') |
||||
|
let color = feature.get('color') || '#1890ff' // 默认颜色
|
||||
|
|
||||
|
if (pointData) { |
||||
|
// 将点数据构造为MarkerData格式以使用现有的状态计算函数
|
||||
|
const markerData = { |
||||
|
id: -1, |
||||
|
coordinates: [0, 0] as [number, number], |
||||
|
name: '', |
||||
|
gasStatus: pointData.gasStatus || '0', |
||||
|
batteryStatus: pointData.batteryStatus || '0', |
||||
|
fenceStatus: pointData.fenceStatus || '0', |
||||
|
onlineStatus: pointData.onlineStatus || '1' |
||||
|
} |
||||
|
const status = getHighestPriorityStatus(markerData) |
||||
|
color = getStatusColor(status) |
||||
|
} |
||||
|
|
||||
|
return new Style({ |
||||
|
image: new Circle({ |
||||
|
radius: isActive ? activePointRadius : pointRadius, |
||||
|
fill: new Fill({ |
||||
|
color: isActive ? color : '#ffffff' |
||||
|
}), |
||||
|
stroke: new Stroke({ |
||||
|
color: color, |
||||
|
width: isActive ? 3 : 2 |
||||
|
}) |
||||
|
}), |
||||
|
text: |
||||
|
isActive && showTimeLabel |
||||
|
? new Text({ |
||||
|
text: feature.get('timeText') || '', |
||||
|
font: '12px Arial', |
||||
|
fill: new Fill({ |
||||
|
color: '#333' |
||||
|
}), |
||||
|
offsetY: -15, |
||||
|
backgroundFill: new Fill({ |
||||
|
color: 'rgba(255, 255, 255, 0.8)' |
||||
|
}), |
||||
|
padding: [2, 4, 2, 4] |
||||
|
}) |
||||
|
: undefined |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
return new Style() |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
// 创建移动中的 marker 图层
|
||||
|
this.movingMarkerLayer = new VectorLayer({ |
||||
|
source: new VectorSource(), |
||||
|
style: (feature) => { |
||||
|
const color = feature.get('color') || '#ff4757' |
||||
|
return new Style({ |
||||
|
image: new Icon({ |
||||
|
src: createLocationIconSVG(color, 32), // 使用位置图标，大小为32px
|
||||
|
scale: 1, |
||||
|
anchor: [0.5, 1], // 锚点设置在底部中心
|
||||
|
anchorXUnits: 'fraction', |
||||
|
anchorYUnits: 'fraction' |
||||
|
}), |
||||
|
text: new Text({ |
||||
|
text: feature.get('deviceName') || '', |
||||
|
font: 'bold 12px Arial', |
||||
|
fill: new Fill({ |
||||
|
color: '#ffffff' |
||||
|
}), |
||||
|
offsetY: -40, // 调整文字位置，避免与图标重叠
|
||||
|
backgroundFill: new Fill({ |
||||
|
color: 'rgba(0, 0, 0, 0.7)' |
||||
|
}), |
||||
|
padding: [2, 6, 2, 6] |
||||
|
}) |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
map.addLayer(this.movingMarkerLayer) |
||||
|
return this.trajectoryLayer |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 设置轨迹数据并从 markers 中提取轨迹 |
||||
|
*/ |
||||
|
setTrajectoryData(markers: MarkerData[]): void { |
||||
|
// 从 markers 中提取轨迹数据
|
||||
|
this.trajectoryData = markers |
||||
|
.filter((marker) => marker.data && marker.data.length > 0) |
||||
|
.map((marker) => ({ |
||||
|
deviceId: marker.id, |
||||
|
name: marker.name, |
||||
|
points: marker.data.map((item: any) => ({ |
||||
|
coordinates: [item.lng, item.lat] as [number, number], |
||||
|
timestamp: dayjs(item.time, 'YYYY-MM-DD HH:mm:ss').valueOf(), |
||||
|
data: item |
||||
|
})), |
||||
|
color: '#1890ff', |
||||
|
width: 3, |
||||
|
pointRadius: 2, // 默认轨迹点半径
|
||||
|
activePointRadius: 2, // 默认激活状态轨迹点半径
|
||||
|
showTimeLabel: false // 默认显示时间标签
|
||||
|
})) |
||||
|
|
||||
|
// 创建按时间排序的所有轨迹点
|
||||
|
this.sortedTrajectoryPoints = [] |
||||
|
this.trajectoryData.forEach((trajectory) => { |
||||
|
trajectory.points.forEach((point, index) => { |
||||
|
this.sortedTrajectoryPoints.push({ |
||||
|
...point, |
||||
|
deviceId: trajectory.deviceId, |
||||
|
pointIndex: index |
||||
|
}) |
||||
|
}) |
||||
|
}) |
||||
|
|
||||
|
// 按时间戳排序
|
||||
|
this.sortedTrajectoryPoints.sort((a, b) => a.timestamp - b.timestamp) |
||||
|
|
||||
|
this.renderTrajectories() |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 根据时间范围过滤轨迹数据 |
||||
|
*/ |
||||
|
filterTrajectoryByTimeRange(startTime: number, endTime: number): void { |
||||
|
this.sortedTrajectoryPoints = this.sortedTrajectoryPoints.filter( |
||||
|
(point) => point.timestamp >= startTime && point.timestamp <= endTime |
||||
|
) |
||||
|
this.renderTrajectories() |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 根据当前播放时间更新显示 |
||||
|
*/ |
||||
|
updateByPlayState(playState: TrajectoryPlayState): void { |
||||
|
if (this.sortedTrajectoryPoints.length === 0) return |
||||
|
|
||||
|
// 为每个设备找到当前时间对应的轨迹点
|
||||
|
const currentPoints = this.findPointsForAllDevicesByTime(playState.currentTime) |
||||
|
|
||||
|
if (currentPoints.length > 0) { |
||||
|
// 找到对应点时，更新所有设备的移动marker和轨迹进度
|
||||
|
this.updateAllMovingMarkers(currentPoints) |
||||
|
this.updateTrajectoryProgress(playState.currentTime) |
||||
|
} else { |
||||
|
// 没有找到对应点时（可能时间在轨迹数据开始之前），清除移动marker并重置所有轨迹点状态
|
||||
|
this.clearMovingMarker() |
||||
|
this.updateTrajectoryProgress(playState.currentTime) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 为所有设备查找指定时间戳对应的轨迹点 |
||||
|
*/ |
||||
|
private findPointsForAllDevicesByTime(timestamp: number): Array<TrajectoryPoint> { |
||||
|
const result: Array<TrajectoryPoint> = [] |
||||
|
|
||||
|
// 为每个设备找到对应时间点的最近轨迹点
|
||||
|
this.trajectoryData.forEach((trajectory) => { |
||||
|
// 找到该设备在指定时间的最近轨迹点
|
||||
|
let closestPoint: TrajectoryPoint | null = null |
||||
|
let minDiff = Infinity |
||||
|
|
||||
|
trajectory.points.forEach((point) => { |
||||
|
if (point.timestamp <= timestamp) { |
||||
|
const diff = Math.abs(point.timestamp - timestamp) |
||||
|
if (diff < minDiff) { |
||||
|
minDiff = diff |
||||
|
closestPoint = { |
||||
|
...point, |
||||
|
deviceId: trajectory.deviceId |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
if (closestPoint) { |
||||
|
result.push(closestPoint) |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
return result |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 更新所有设备的移动中的 marker |
||||
|
*/ |
||||
|
private updateAllMovingMarkers(points: Array<TrajectoryPoint>): void { |
||||
|
if (!this.movingMarkerLayer) return |
||||
|
|
||||
|
const source = this.movingMarkerLayer.getSource() |
||||
|
source?.clear() |
||||
|
|
||||
|
// 为每个设备创建移动marker
|
||||
|
points.forEach((point) => { |
||||
|
// 找到对应设备的信息
|
||||
|
const trajectory = this.trajectoryData.find((t) => t.deviceId === point.deviceId) |
||||
|
if (!trajectory) return |
||||
|
|
||||
|
// 根据轨迹点的data状态获取颜色
|
||||
|
let color = trajectory.color || '#ff4757' // 默认颜色
|
||||
|
|
||||
|
if (point.data) { |
||||
|
// 将点数据构造为MarkerData格式以使用现有的状态计算函数
|
||||
|
const markerData = { |
||||
|
id: -1, |
||||
|
coordinates: [0, 0] as [number, number], |
||||
|
name: '', |
||||
|
gasStatus: point.data.gasStatus || '0', |
||||
|
batteryStatus: point.data.batteryStatus || '0', |
||||
|
fenceStatus: point.data.fenceStatus || '0', |
||||
|
onlineStatus: point.data.onlineStatus || '1' |
||||
|
} |
||||
|
const status = getHighestPriorityStatus(markerData) |
||||
|
color = getStatusColor(status) |
||||
|
} |
||||
|
|
||||
|
const markerFeature = new Feature({ |
||||
|
geometry: new Point(fromLonLat(point.coordinates)), |
||||
|
type: 'moving-marker', |
||||
|
deviceId: point.deviceId, |
||||
|
deviceName: trajectory.name, |
||||
|
color: color, |
||||
|
timestamp: point.timestamp |
||||
|
}) |
||||
|
|
||||
|
source?.addFeature(markerFeature) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 清除移动中的 marker |
||||
|
*/ |
||||
|
private clearMovingMarker(): void { |
||||
|
if (!this.movingMarkerLayer) return |
||||
|
|
||||
|
const source = this.movingMarkerLayer.getSource() |
||||
|
source?.clear() |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 更新轨迹进度显示 |
||||
|
*/ |
||||
|
private updateTrajectoryProgress(currentTime: number): void { |
||||
|
if (!this.trajectoryLayer) return |
||||
|
|
||||
|
const source = this.trajectoryLayer.getSource() |
||||
|
if (!source) return |
||||
|
|
||||
|
// 获取所有轨迹点 features
|
||||
|
const features = source.getFeatures() |
||||
|
|
||||
|
// 强制更新所有轨迹点的激活状态
|
||||
|
features.forEach((feature) => { |
||||
|
if (feature.get('type') === 'trajectory-point') { |
||||
|
const pointTime = feature.get('timestamp') |
||||
|
const wasActive = feature.get('isActive') |
||||
|
const isActive = pointTime <= currentTime |
||||
|
|
||||
|
// 只有状态真正变化时才设置，以触发重新渲染
|
||||
|
if (wasActive !== isActive) { |
||||
|
feature.set('isActive', isActive) |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
// 强制触发重新渲染
|
||||
|
source.changed() |
||||
|
|
||||
|
// 额外确保样式更新
|
||||
|
this.trajectoryLayer.changed() |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 渲染轨迹 |
||||
|
*/ |
||||
|
private renderTrajectories(): void { |
||||
|
if (!this.trajectoryLayer) return |
||||
|
|
||||
|
const source = this.trajectoryLayer.getSource() |
||||
|
source?.clear() |
||||
|
|
||||
|
this.trajectoryData.forEach((trajectory) => { |
||||
|
if (trajectory.points.length < 2) return |
||||
|
|
||||
|
// 创建轨迹线条
|
||||
|
const coordinates = trajectory.points.map((point) => fromLonLat(point.coordinates)) |
||||
|
const lineFeature = new Feature({ |
||||
|
geometry: new LineString(coordinates), |
||||
|
type: 'trajectory', |
||||
|
color: trajectory.color || '#1890ff', |
||||
|
width: trajectory.width || 3, |
||||
|
deviceId: trajectory.deviceId |
||||
|
}) |
||||
|
source?.addFeature(lineFeature) |
||||
|
|
||||
|
// 创建轨迹点
|
||||
|
trajectory.points.forEach((point, index) => { |
||||
|
const pointFeature = new Feature({ |
||||
|
geometry: new Point(fromLonLat(point.coordinates)), |
||||
|
type: 'trajectory-point', |
||||
|
color: trajectory.color || '#1890ff', |
||||
|
isActive: false, // 初始状态为非激活
|
||||
|
timeText: this.formatTime(point.timestamp), |
||||
|
pointIndex: index, |
||||
|
trajectoryId: trajectory.deviceId, |
||||
|
timestamp: point.timestamp, |
||||
|
pointRadius: trajectory.pointRadius || 2, // 传递轨迹点半径
|
||||
|
activePointRadius: trajectory.activePointRadius || 2, // 传递激活状态轨迹点半径
|
||||
|
showTimeLabel: trajectory.showTimeLabel !== false, // 传递时间标签显示控制
|
||||
|
pointData: point.data // 添加点数据以便样式函数使用
|
||||
|
}) |
||||
|
source?.addFeature(pointFeature) |
||||
|
}) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 设置轨迹点大小 |
||||
|
*/ |
||||
|
setTrajectoryPointSize(deviceId: number, pointRadius: number, activePointRadius?: number): void { |
||||
|
const trajectory = this.trajectoryData.find((t) => t.deviceId === deviceId) |
||||
|
if (trajectory) { |
||||
|
trajectory.pointRadius = pointRadius |
||||
|
if (activePointRadius !== undefined) { |
||||
|
trajectory.activePointRadius = activePointRadius |
||||
|
} |
||||
|
this.renderTrajectories() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 设置所有轨迹点大小 |
||||
|
*/ |
||||
|
setAllTrajectoryPointSize(pointRadius: number, activePointRadius?: number): void { |
||||
|
this.trajectoryData.forEach((trajectory) => { |
||||
|
trajectory.pointRadius = pointRadius |
||||
|
if (activePointRadius !== undefined) { |
||||
|
trajectory.activePointRadius = activePointRadius |
||||
|
} |
||||
|
}) |
||||
|
this.renderTrajectories() |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 设置时间标签显示状态 |
||||
|
*/ |
||||
|
setTimeLabelsVisible(deviceId: number, visible: boolean): void { |
||||
|
const trajectory = this.trajectoryData.find((t) => t.deviceId === deviceId) |
||||
|
if (trajectory) { |
||||
|
trajectory.showTimeLabel = visible |
||||
|
this.renderTrajectories() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 设置所有时间标签显示状态 |
||||
|
*/ |
||||
|
setAllTimeLabelsVisible(visible: boolean): void { |
||||
|
this.trajectoryData.forEach((trajectory) => { |
||||
|
trajectory.showTimeLabel = visible |
||||
|
}) |
||||
|
this.renderTrajectories() |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 格式化时间 |
||||
|
*/ |
||||
|
private formatTime(timestamp: number): string { |
||||
|
return dayjs(timestamp).format('HH:mm:ss') |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 显示轨迹（当 showTrajectoryControls 为 true 时调用） |
||||
|
*/ |
||||
|
showTrajectories(): void { |
||||
|
if (this.trajectoryLayer) { |
||||
|
this.trajectoryLayer.setVisible(true) |
||||
|
} |
||||
|
if (this.movingMarkerLayer) { |
||||
|
this.movingMarkerLayer.setVisible(true) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 隐藏轨迹 |
||||
|
*/ |
||||
|
hideTrajectories(): void { |
||||
|
if (this.trajectoryLayer) { |
||||
|
this.trajectoryLayer.setVisible(false) |
||||
|
} |
||||
|
if (this.movingMarkerLayer) { |
||||
|
this.movingMarkerLayer.setVisible(false) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 获取轨迹数据 |
||||
|
*/ |
||||
|
getTrajectoryData(): TrajectoryData[] { |
||||
|
return [...this.trajectoryData] |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 获取轨迹图层 |
||||
|
*/ |
||||
|
getTrajectoryLayer(): VectorLayer<VectorSource> | null { |
||||
|
return this.trajectoryLayer |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 获取移动标记图层 |
||||
|
*/ |
||||
|
getMovingMarkerLayer(): VectorLayer<VectorSource> | null { |
||||
|
return this.movingMarkerLayer |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 获取地图实例（用于扩展功能） |
||||
|
*/ |
||||
|
getMap(): any { |
||||
|
return this.map |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 销毁轨迹服务 |
||||
|
*/ |
||||
|
destroy(): void { |
||||
|
if (this.animationTimer) { |
||||
|
clearTimeout(this.animationTimer) |
||||
|
this.animationTimer = null |
||||
|
} |
||||
|
|
||||
|
this.trajectoryLayer = null |
||||
|
this.movingMarkerLayer = null |
||||
|
this.map = null // 清理 map 引用
|
||||
|
this.trajectoryData = [] |
||||
|
this.sortedTrajectoryPoints = [] |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,151 @@ |
|||||
|
/** |
||||
|
* 地图组件相关类型定义 |
||||
|
*/ |
||||
|
import { HandDetector } from '@/api/gas/handdetector' |
||||
|
// 状态字典配置
|
||||
|
export interface StatusDictItem { |
||||
|
value: string |
||||
|
label: string |
||||
|
cssClass: string |
||||
|
} |
||||
|
|
||||
|
// 标记状态类型
|
||||
|
export type MarkerStatus = string |
||||
|
|
||||
|
// 标记数据接口
|
||||
|
export interface MarkerData extends HandDetector { |
||||
|
/** 坐标 [经度, 纬度] */ |
||||
|
coordinates: [number, number] |
||||
|
/** 气体状态 */ |
||||
|
gasStatus?: MarkerStatus |
||||
|
/** 电池状态 */ |
||||
|
batteryStatus?: MarkerStatus |
||||
|
/** 围栏状态 */ |
||||
|
fenceStatus?: MarkerStatus |
||||
|
/** 在线状态 */ |
||||
|
onlineStatus?: MarkerStatus |
||||
|
/** 标记标题 */ |
||||
|
name: string |
||||
|
/** 自定义数据 */ |
||||
|
data?: any |
||||
|
} |
||||
|
|
||||
|
// 地图组件 Props 接口
|
||||
|
export interface MapProps { |
||||
|
/** 自定义瓦片图地址模板，支持 {x}, {y}, {z} 占位符 */ |
||||
|
tileUrl?: string |
||||
|
/** 地图中心点坐标 [经度, 纬度] */ |
||||
|
center?: [number, number] |
||||
|
/** 初始缩放级别 */ |
||||
|
zoom?: number |
||||
|
/** 最大缩放级别 */ |
||||
|
maxZoom?: number |
||||
|
/** 最小缩放级别 */ |
||||
|
minZoom?: number |
||||
|
/** 标记数据列表 */ |
||||
|
markers?: MarkerData[] |
||||
|
/** 围栏数据列表 */ |
||||
|
fences?: FenceData[] |
||||
|
/** 是否启用聚合功能 */ |
||||
|
enableCluster?: boolean |
||||
|
/** 聚合距离（像素） */ |
||||
|
clusterDistance?: number |
||||
|
/** 强制单个marker显示的zoom级别阈值 */ |
||||
|
forceSingleMark?: number |
||||
|
/** 是否显示轨迹控制面板 */ |
||||
|
showTrajectories?: boolean |
||||
|
/** 是否显示标记点 */ |
||||
|
showMarkers?: boolean |
||||
|
/** 是否显示围栏 */ |
||||
|
showFences?: boolean |
||||
|
/** 是否显示绘制围栏 */ |
||||
|
showDrawFences?: boolean |
||||
|
} |
||||
|
|
||||
|
// 围栏数据接口
|
||||
|
export interface FenceData { |
||||
|
/** 围栏ID */ |
||||
|
id: string |
||||
|
/** 围栏名称 */ |
||||
|
name: string |
||||
|
/** 围栏范围 */ |
||||
|
fenceRange: [number, number][] |
||||
|
/** 围栏状态 */ |
||||
|
status: number |
||||
|
/** 围栏类型 */ |
||||
|
type: number |
||||
|
/** 围栏备注 */ |
||||
|
remark: string |
||||
|
/** 围栏数据 */ |
||||
|
data: any |
||||
|
} |
||||
|
|
||||
|
// 探测器信息接口
|
||||
|
export interface DetectorInfo { |
||||
|
name: string |
||||
|
status: string |
||||
|
statusLabel: string |
||||
|
statusColor: string |
||||
|
} |
||||
|
|
||||
|
// 轨迹点数据接口
|
||||
|
export interface TrajectoryPoint { |
||||
|
/** 设备ID */ |
||||
|
deviceId?: number |
||||
|
/** 轨迹点索引 */ |
||||
|
pointIndex?: number |
||||
|
/** 坐标 [经度, 纬度] */ |
||||
|
coordinates: [number, number] |
||||
|
/** 时间戳 */ |
||||
|
timestamp: number |
||||
|
/** 速度 (km/h) */ |
||||
|
speed?: number |
||||
|
/** 方向 (度) */ |
||||
|
direction?: number |
||||
|
/** 额外数据 */ |
||||
|
data?: any |
||||
|
} |
||||
|
|
||||
|
// 轨迹数据接口
|
||||
|
export interface TrajectoryData { |
||||
|
/** 设备ID */ |
||||
|
deviceId: number |
||||
|
/** 轨迹点列表 */ |
||||
|
points: TrajectoryPoint[] |
||||
|
/** 轨迹颜色 */ |
||||
|
color?: string |
||||
|
/** 轨迹线宽 */ |
||||
|
width?: number |
||||
|
/** 设备名称 */ |
||||
|
name?: string |
||||
|
/** 轨迹点半径 */ |
||||
|
pointRadius?: number |
||||
|
/** 激活状态轨迹点半径 */ |
||||
|
activePointRadius?: number |
||||
|
/** 是否显示时间标签 */ |
||||
|
showTimeLabel?: boolean |
||||
|
} |
||||
|
|
||||
|
// 轨迹播放状态
|
||||
|
export interface TrajectoryPlayState { |
||||
|
/** 是否正在播放 */ |
||||
|
isPlaying: boolean |
||||
|
/** 当前播放时间 */ |
||||
|
currentTime: number |
||||
|
/** 播放速度倍数 */ |
||||
|
speed: number |
||||
|
/** 播放开始时间 */ |
||||
|
startTime?: number |
||||
|
/** 播放结束时间 */ |
||||
|
endTime?: number |
||||
|
} |
||||
|
|
||||
|
// 地图实例接口
|
||||
|
export interface MapInstance { |
||||
|
map: any |
||||
|
tileLayer: any |
||||
|
markerLayer: any |
||||
|
rippleLayer: any |
||||
|
popupOverlay: any |
||||
|
trajectoryLayer?: any |
||||
|
} |
||||
@ -0,0 +1,202 @@ |
|||||
|
/** |
||||
|
* 地图工具函数 |
||||
|
*/ |
||||
|
import { Style, Text, Circle, Fill, Stroke, Icon } from 'ol/style' |
||||
|
import { Feature } from 'ol' |
||||
|
import type { MarkerData, DetectorInfo } from '../types/map.types' |
||||
|
import { STATUS_DICT, STATUS_PRIORITY, STATUS_ORDER } from '../constants/map.constants' |
||||
|
|
||||
|
/** |
||||
|
* 从字典中查找状态信息 |
||||
|
*/ |
||||
|
export const findStatusInfo = ( |
||||
|
dict: (typeof STATUS_DICT)[keyof typeof STATUS_DICT], |
||||
|
value: string |
||||
|
) => { |
||||
|
return dict.find((item) => item.value === value) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 获取状态映射 |
||||
|
*/ |
||||
|
export const getStatusMapping = (type: keyof typeof STATUS_DICT, value: string) => { |
||||
|
const info = findStatusInfo(STATUS_DICT[type], value) |
||||
|
return info ? `${type}_${value}` : null |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 根据字典数据获取设备最高优先级状态 |
||||
|
*/ |
||||
|
export const getHighestPriorityStatus = (markerData: MarkerData): keyof typeof STATUS_PRIORITY => { |
||||
|
const statuses: Array<keyof typeof STATUS_PRIORITY> = [] |
||||
|
|
||||
|
// 检查各种状态
|
||||
|
const gasStatus = getStatusMapping('gas', markerData.gasStatus) |
||||
|
const batteryStatus = getStatusMapping('battery', markerData.batteryStatus) |
||||
|
const fenceStatus = getStatusMapping('fence', markerData.fenceStatus) |
||||
|
const onlineStatus = markerData.onlineStatus === '0' ? 'offline' : null |
||||
|
|
||||
|
// 收集非正常状态
|
||||
|
if (gasStatus && markerData.gasStatus !== '0') |
||||
|
statuses.push(gasStatus as keyof typeof STATUS_PRIORITY) |
||||
|
if (batteryStatus && markerData.batteryStatus !== '0') |
||||
|
statuses.push(batteryStatus as keyof typeof STATUS_PRIORITY) |
||||
|
if (fenceStatus && markerData.fenceStatus !== '0') |
||||
|
statuses.push(fenceStatus as keyof typeof STATUS_PRIORITY) |
||||
|
if (onlineStatus) statuses.push(onlineStatus) |
||||
|
|
||||
|
// 如果没有报警状态，则为正常
|
||||
|
if (statuses.length === 0) return 'normal' |
||||
|
|
||||
|
// 返回优先级最高的状态
|
||||
|
return statuses.reduce((prev, current) => |
||||
|
STATUS_PRIORITY[prev] < STATUS_PRIORITY[current] ? prev : current |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 根据字典数据获取状态颜色 |
||||
|
*/ |
||||
|
export const getStatusColor = (status: keyof typeof STATUS_PRIORITY): string => { |
||||
|
if (status === 'normal') return '#67c23a' |
||||
|
if (status === 'offline') return STATUS_DICT.online[0].cssClass |
||||
|
|
||||
|
const [type, value] = status.split('_') as [keyof typeof STATUS_DICT, string] |
||||
|
const info = findStatusInfo(STATUS_DICT[type], value) |
||||
|
return info?.cssClass || '#67c23a' |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 根据字典数据获取状态标签 |
||||
|
*/ |
||||
|
export const getStatusLabel = (status: keyof typeof STATUS_PRIORITY): string => { |
||||
|
if (status === 'normal') return '正常' |
||||
|
if (status === 'offline') return STATUS_DICT.online[0].label |
||||
|
|
||||
|
const [type, value] = status.split('_') as [keyof typeof STATUS_DICT, string] |
||||
|
const info = findStatusInfo(STATUS_DICT[type], value) |
||||
|
return info?.label || '正常' |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 创建位置图标SVG |
||||
|
*/ |
||||
|
export const createLocationIconSVG = (color: string, size: number = 24) => { |
||||
|
return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(` |
||||
|
<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
||||
|
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" fill="${color}"/> |
||||
|
<circle cx="12" cy="9" r="2" fill="white"/> |
||||
|
</svg> |
||||
|
`)}` |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 创建标记样式 |
||||
|
*/ |
||||
|
export const createMarkerStyle = ( |
||||
|
markerData: MarkerData | keyof typeof STATUS_PRIORITY, |
||||
|
isCluster: boolean = false, |
||||
|
clusterSize?: number |
||||
|
) => { |
||||
|
// 如果是字符串，说明是状态值
|
||||
|
const status: keyof typeof STATUS_PRIORITY = |
||||
|
typeof markerData === 'string' |
||||
|
? (markerData as keyof typeof STATUS_PRIORITY) |
||||
|
: getHighestPriorityStatus(markerData) |
||||
|
|
||||
|
const color = getStatusColor(status) |
||||
|
|
||||
|
if (isCluster && clusterSize) { |
||||
|
// 聚合标记样式
|
||||
|
return new Style({ |
||||
|
image: new Circle({ |
||||
|
radius: Math.min(20 + clusterSize * 2, 40), |
||||
|
fill: new Fill({ |
||||
|
color: color + '80' // 添加透明度
|
||||
|
}), |
||||
|
stroke: new Stroke({ |
||||
|
color: color, |
||||
|
width: 2 |
||||
|
}) |
||||
|
}), |
||||
|
text: new Text({ |
||||
|
text: clusterSize.toString(), |
||||
|
fill: new Fill({ |
||||
|
color: '#ffffff' |
||||
|
}), |
||||
|
font: 'bold 14px Arial' |
||||
|
}) |
||||
|
}) |
||||
|
} else { |
||||
|
// 单个标记样式 - 使用位置图标
|
||||
|
return new Style({ |
||||
|
image: new Icon({ |
||||
|
src: createLocationIconSVG(color, 24), |
||||
|
scale: 1, |
||||
|
anchor: [0.5, 1], // 锚点设置在底部中心
|
||||
|
anchorXUnits: 'fraction', |
||||
|
anchorYUnits: 'fraction' |
||||
|
}) |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 生成探测器列表项HTML |
||||
|
*/ |
||||
|
export const createDetectorListItem = (detector: DetectorInfo) => ` |
||||
|
<div style="display: flex; align-items: center; padding: 6px 0; border-bottom: 1px solid #f0f0f0;"> |
||||
|
<div style="width: 10px; height: 10px; border-radius: 50%; background-color: ${detector.statusColor}; margin-right: 10px; flex-shrink: 0;"></div> |
||||
|
<div style="flex: 1; min-width: 0;"> |
||||
|
<div style="font-weight: 500; font-size: 13px; color: #333; margin-bottom: 2px;">${detector.name}</div> |
||||
|
<div style="color: ${detector.statusColor}; font-size: 11px; font-weight: 400;">${detector.statusLabel}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
` |
||||
|
|
||||
|
/** |
||||
|
* 生成聚合标记弹窗HTML |
||||
|
*/ |
||||
|
export const createClusterPopupHTML = (detectorList: DetectorInfo[]) => { |
||||
|
const detectorListHTML = detectorList.map(createDetectorListItem).join('') |
||||
|
|
||||
|
return ` |
||||
|
<div style="max-height: 250px; overflow-y: auto; padding-right: 4px;"> |
||||
|
${detectorListHTML} |
||||
|
</div> |
||||
|
` |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 获取聚合标记数据 |
||||
|
*/ |
||||
|
export const getClusterMarkerData = (features: Feature[]): keyof typeof STATUS_PRIORITY => { |
||||
|
// 收集所有标记的状态
|
||||
|
const allStatuses: Array<keyof typeof STATUS_PRIORITY> = [] |
||||
|
|
||||
|
features.forEach((feature) => { |
||||
|
const markerData = feature.get('markerData') as MarkerData |
||||
|
if (markerData) { |
||||
|
const status = getHighestPriorityStatus(markerData) |
||||
|
allStatuses.push(status) |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
// 返回优先级最高的状态
|
||||
|
if (allStatuses.length === 0) return 'normal' |
||||
|
|
||||
|
return allStatuses.reduce((prev, current) => |
||||
|
STATUS_PRIORITY[prev] < STATUS_PRIORITY[current] ? prev : current |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 按优先级排序探测器列表 |
||||
|
*/ |
||||
|
export const sortDetectorsByPriority = (detectorList: DetectorInfo[]): DetectorInfo[] => { |
||||
|
return detectorList.sort((a, b) => { |
||||
|
const aPriority = STATUS_ORDER.indexOf(a.status as keyof typeof STATUS_PRIORITY) |
||||
|
const bPriority = STATUS_ORDER.indexOf(b.status as keyof typeof STATUS_PRIORITY) |
||||
|
return aPriority - bPriority |
||||
|
}) |
||||
|
} |
||||
@ -0,0 +1,37 @@ |
|||||
|
<template> |
||||
|
<OpenLayerMap v-if="inited" :markers="markers" /> |
||||
|
</template> |
||||
|
<script lang="ts" setup> |
||||
|
import OpenLayerMap from './components/OpenLayerMap.vue' |
||||
|
import { getLastestDetectorData } from '@/api/gas' |
||||
|
import { HandDetector } from '@/api/gas/handdetector' |
||||
|
import { MarkerData } from './components/types/map.types' |
||||
|
const getDataTimer = ref<NodeJS.Timeout | null>(null) |
||||
|
const markers = ref<MarkerData[]>([]) |
||||
|
const inited = ref(false) |
||||
|
const getMarkers = async () => { |
||||
|
console.log('getMarkers') |
||||
|
return await getLastestDetectorData().then((res: HandDetector[]) => { |
||||
|
res = res.filter((i) => i.enableStatus === 1) |
||||
|
res = res.map((i) => { |
||||
|
return { |
||||
|
...i, |
||||
|
coordinates: [i.longitude, i.latitude], |
||||
|
data: [] |
||||
|
} |
||||
|
}) |
||||
|
markers.value = res as unknown as any[] |
||||
|
inited.value = true |
||||
|
}) |
||||
|
} |
||||
|
onMounted(() => { |
||||
|
getMarkers() |
||||
|
getDataTimer.value = setInterval(() => { |
||||
|
getMarkers() |
||||
|
}, 5000) |
||||
|
}) |
||||
|
onUnmounted(() => { |
||||
|
clearInterval(getDataTimer.value as NodeJS.Timeout) |
||||
|
}) |
||||
|
</script> |
||||
|
<style scoped></style> |
||||
@ -1,31 +1,7 @@ |
|||||
<template> |
<template> |
||||
<div> |
|
||||
<el-card shadow="never"> |
|
||||
<el-skeleton :loading="loading" animated> |
|
||||
<el-row :gutter="16" justify="space-between"> |
|
||||
<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24"> |
|
||||
<div class="flex items-center"> |
|
||||
<el-avatar :src="avatar" :size="70" class="mr-16px"> |
|
||||
<img src="@/assets/imgs/user.png" alt="" /> |
|
||||
</el-avatar> |
|
||||
<div> |
|
||||
<div class="text-20px"> |
|
||||
{{ t('workplace.welcome') }} {{ username }} {{ t('workplace.happyDay') }} |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
</el-skeleton> |
|
||||
</el-card> |
|
||||
</div> |
|
||||
|
<HandDeviceHome /> |
||||
</template> |
</template> |
||||
<script lang="ts" setup> |
<script lang="ts" setup> |
||||
import { useUserStore } from '@/store/modules/user' |
|
||||
|
import HandDeviceHome from '../HandDevice/Home/index.vue' |
||||
defineOptions({ name: 'Index' }) |
defineOptions({ name: 'Index' }) |
||||
const { t } = useI18n() |
|
||||
const userStore = useUserStore() |
|
||||
const loading = ref(false) |
|
||||
const avatar = userStore.getUser.avatar |
|
||||
const username = userStore.getUser.nickname |
|
||||
</script> |
</script> |
||||
|
|||||
@ -0,0 +1,204 @@ |
|||||
|
<template> |
||||
|
<Dialog :title="dialogTitle" v-model="dialogVisible"> |
||||
|
<el-form |
||||
|
ref="formRef" |
||||
|
:model="formData" |
||||
|
:rules="formRules" |
||||
|
label-width="120px" |
||||
|
v-loading="formLoading" |
||||
|
> |
||||
|
<el-form-item label="气体类型" prop="gasTypeId"> |
||||
|
<el-select v-model="formData.gasTypeId" placeholder="请选择气体类型"> |
||||
|
<el-option |
||||
|
v-for="item in props.gasTypes" |
||||
|
:key="item.id" |
||||
|
:label="item.name" |
||||
|
:value="item.id" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="警报类型" prop="alarmTypeId"> |
||||
|
<el-select |
||||
|
v-model="formData.alarmTypeId" |
||||
|
placeholder="请选择警报类型" |
||||
|
@change="handleAlarmTypeIdChange" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in props.alarmTypes" |
||||
|
:key="item.id" |
||||
|
:label="item.name" |
||||
|
:value="item.id" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="警报名称" prop="alarmName"> |
||||
|
<el-input v-model="formData.alarmName" placeholder="请输入警报名称" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="警报名称颜色" prop="alarmNameColor"> |
||||
|
<el-color-picker v-model="formData.alarmNameColor" :disabled="true" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="警报颜色" prop="alarmColor"> |
||||
|
<el-color-picker |
||||
|
v-model="formData.alarmColor" |
||||
|
placeholder="请输入警报颜色" |
||||
|
:disabled="true" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="警报方式/级别" prop="alarmLevel"> |
||||
|
<el-select v-model="formData.alarmLevel" placeholder="请输入警报方式/级别" :disabled="true"> |
||||
|
<el-option |
||||
|
v-for="item in getIntDictOptions(DICT_TYPE.HAND_DETECTOR_ALARM_LEVEL)" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="触发值（小）" prop="min"> |
||||
|
<el-input-number |
||||
|
v-model="formData.min" |
||||
|
placeholder="请输入触发值（小）" |
||||
|
:controls="false" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="触发值（大）" prop="max"> |
||||
|
<el-input-number |
||||
|
v-model="formData.max" |
||||
|
placeholder="请输入触发值（大）" |
||||
|
:controls="false" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="最值方向" prop="direction"> |
||||
|
<el-select v-model="formData.direction" placeholder="请输入最值方向"> |
||||
|
<el-option |
||||
|
v-for="item in getIntDictOptions(DICT_TYPE.HAND_DETECTOR_VALUE_DIRECTION)" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="排序" prop="sortOrder"> |
||||
|
<el-input v-model="formData.sortOrder" placeholder="请输入排序" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="备注" prop="remark"> |
||||
|
<el-input v-model="formData.remark" placeholder="请输入备注" /> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<template #footer> |
||||
|
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button> |
||||
|
<el-button @click="dialogVisible = false">取 消</el-button> |
||||
|
</template> |
||||
|
</Dialog> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
import { AlarmRuleApi, AlarmRule } from '@/api/gas/alarmrule' |
||||
|
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict' |
||||
|
/** GAS警报规则 表单 */ |
||||
|
defineOptions({ name: 'AlarmRuleForm' }) |
||||
|
|
||||
|
const { t } = useI18n() // 国际化 |
||||
|
const message = useMessage() // 消息弹窗 |
||||
|
const props = defineProps({ |
||||
|
gasTypes: { |
||||
|
type: Array as PropType<any[]>, |
||||
|
required: true |
||||
|
}, |
||||
|
alarmTypes: { |
||||
|
type: Array as PropType<any[]>, |
||||
|
required: true |
||||
|
} |
||||
|
}) |
||||
|
const dialogVisible = ref(false) // 弹窗的是否展示 |
||||
|
const dialogTitle = ref('') // 弹窗的标题 |
||||
|
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 |
||||
|
const formType = ref('') // 表单的类型：create - 新增；update - 修改 |
||||
|
const formData = ref({ |
||||
|
id: undefined, |
||||
|
gasTypeId: undefined, |
||||
|
alarmTypeId: undefined, |
||||
|
alarmName: undefined, |
||||
|
alarmNameColor: undefined, |
||||
|
alarmColor: undefined, |
||||
|
alarmLevel: undefined, |
||||
|
min: undefined, |
||||
|
max: undefined, |
||||
|
direction: undefined, |
||||
|
sortOrder: undefined, |
||||
|
remark: undefined |
||||
|
}) |
||||
|
const formRules = reactive({ |
||||
|
gasTypeId: [{ required: true, message: '气体类型不能为空', trigger: 'blur' }], |
||||
|
alarmTypeId: [{ required: true, message: '警报类型不能为空', trigger: 'blur' }], |
||||
|
alarmName: [{ required: true, message: '警报名称不能为空', trigger: 'blur' }], |
||||
|
direction: [{ required: true, message: '最值方向不能为空', trigger: 'blur' }] |
||||
|
}) |
||||
|
const formRef = ref() // 表单 Ref |
||||
|
|
||||
|
/** 打开弹窗 */ |
||||
|
const open = async (type: string, id?: number) => { |
||||
|
dialogVisible.value = true |
||||
|
dialogTitle.value = t('action.' + type) |
||||
|
formType.value = type |
||||
|
resetForm() |
||||
|
// 修改时，设置数据 |
||||
|
if (id) { |
||||
|
formLoading.value = true |
||||
|
try { |
||||
|
formData.value = await AlarmRuleApi.getAlarmRule(id) |
||||
|
} finally { |
||||
|
formLoading.value = false |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
defineExpose({ open }) // 提供 open 方法，用于打开弹窗 |
||||
|
|
||||
|
/** 提交表单 */ |
||||
|
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调 |
||||
|
const submitForm = async () => { |
||||
|
// 校验表单 |
||||
|
await formRef.value.validate() |
||||
|
// 提交请求 |
||||
|
formLoading.value = true |
||||
|
try { |
||||
|
const data = formData.value as unknown as AlarmRule |
||||
|
if (formType.value === 'create') { |
||||
|
await AlarmRuleApi.createAlarmRule(data) |
||||
|
message.success(t('common.createSuccess')) |
||||
|
} else { |
||||
|
await AlarmRuleApi.updateAlarmRule(data) |
||||
|
message.success(t('common.updateSuccess')) |
||||
|
} |
||||
|
dialogVisible.value = false |
||||
|
// 发送操作成功的事件 |
||||
|
emit('success') |
||||
|
} finally { |
||||
|
formLoading.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** 重置表单 */ |
||||
|
const resetForm = () => { |
||||
|
formData.value = { |
||||
|
id: undefined, |
||||
|
gasTypeId: undefined, |
||||
|
alarmTypeId: undefined, |
||||
|
alarmName: undefined, |
||||
|
alarmNameColor: undefined, |
||||
|
alarmColor: undefined, |
||||
|
alarmLevel: undefined, |
||||
|
min: undefined, |
||||
|
max: undefined, |
||||
|
direction: undefined, |
||||
|
sortOrder: undefined, |
||||
|
remark: undefined |
||||
|
} |
||||
|
formRef.value?.resetFields() |
||||
|
} |
||||
|
|
||||
|
/** 警报类型改变 */ |
||||
|
const handleAlarmTypeIdChange = (value: number) => { |
||||
|
formData.value.alarmName = props.alarmTypes.find((item) => item.id === value)?.name |
||||
|
formData.value.alarmNameColor = props.alarmTypes.find((item) => item.id === value)?.nameColor |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,268 @@ |
|||||
|
<template> |
||||
|
<ContentWrap> |
||||
|
<!-- 搜索工作栏 --> |
||||
|
<el-form |
||||
|
class="-mb-15px" |
||||
|
:model="queryParams" |
||||
|
ref="queryFormRef" |
||||
|
:inline="true" |
||||
|
label-width="120px" |
||||
|
> |
||||
|
<el-form-item label="气体类型" prop="gasTypeId"> |
||||
|
<el-select |
||||
|
v-model="queryParams.gasTypeId" |
||||
|
placeholder="请选择气体类型" |
||||
|
clearable |
||||
|
filterable |
||||
|
@keyup.enter="handleQuery" |
||||
|
class="!w-240px" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in handDetectorStore.getGasTypes" |
||||
|
:key="item.id" |
||||
|
:label="item.name" |
||||
|
:value="item.id" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="警报类型" prop="alarmTypeId"> |
||||
|
<el-select |
||||
|
v-model="queryParams.alarmTypeId" |
||||
|
placeholder="请选择警报类型" |
||||
|
filterable |
||||
|
clearable |
||||
|
@keyup.enter="handleQuery" |
||||
|
class="!w-240px" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in handDetectorStore.getAlarmTypes" |
||||
|
:key="item.id" |
||||
|
:label="item.name" |
||||
|
:value="item.id" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button> |
||||
|
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
plain |
||||
|
@click="openForm('create')" |
||||
|
v-hasPermi="['gas:alarm-rule:create']" |
||||
|
> |
||||
|
<Icon icon="ep:plus" class="mr-5px" /> 新增 |
||||
|
</el-button> |
||||
|
<el-button |
||||
|
type="success" |
||||
|
plain |
||||
|
@click="handleExport" |
||||
|
:loading="exportLoading" |
||||
|
v-hasPermi="['gas:alarm-rule:export']" |
||||
|
> |
||||
|
<Icon icon="ep:download" class="mr-5px" /> 导出 |
||||
|
</el-button> |
||||
|
<el-button |
||||
|
type="danger" |
||||
|
plain |
||||
|
:disabled="isEmpty(checkedIds)" |
||||
|
@click="handleDeleteBatch" |
||||
|
v-hasPermi="['gas:alarm-rule:delete']" |
||||
|
> |
||||
|
<Icon icon="ep:delete" class="mr-5px" /> 批量删除 |
||||
|
</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</ContentWrap> |
||||
|
|
||||
|
<!-- 列表 --> |
||||
|
<ContentWrap> |
||||
|
<el-table |
||||
|
row-key="id" |
||||
|
v-loading="loading" |
||||
|
:data="list" |
||||
|
:stripe="true" |
||||
|
:show-overflow-tooltip="true" |
||||
|
@selection-change="handleRowCheckboxChange" |
||||
|
> |
||||
|
<el-table-column type="selection" width="55" /> |
||||
|
<el-table-column label="气体类型" align="center" prop="gasTypeId"> |
||||
|
<template #default="scope"> |
||||
|
{{ handDetectorStore.getGasTypes.find((item) => item.id === scope.row.gasTypeId)?.name }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="警报类型" align="center" prop="alarmTypeId"> |
||||
|
<template #default="scope"> |
||||
|
{{ |
||||
|
handDetectorStore.getAlarmTypes.find((item) => item.id === scope.row.alarmTypeId)?.name |
||||
|
}} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="警报名称" align="center" prop="alarmName" /> |
||||
|
<el-table-column label="警报方式/级别" align="center" prop="alarmLevel" /> |
||||
|
<el-table-column label="触发值（小）" align="center" prop="min" /> |
||||
|
<el-table-column label="触发值（大）" align="center" prop="max" /> |
||||
|
<el-table-column label="最值方向" align="center" prop="direction" /> |
||||
|
<el-table-column label="排序" align="center" prop="sortOrder" /> |
||||
|
<el-table-column label="备注" align="center" prop="remark" /> |
||||
|
<el-table-column |
||||
|
label="创建时间" |
||||
|
align="center" |
||||
|
prop="createTime" |
||||
|
:formatter="dateFormatter" |
||||
|
width="180px" |
||||
|
/> |
||||
|
<el-table-column label="操作" align="center" min-width="120px"> |
||||
|
<template #default="scope"> |
||||
|
<el-button |
||||
|
link |
||||
|
type="primary" |
||||
|
@click="openForm('update', scope.row.id)" |
||||
|
v-hasPermi="['gas:alarm-rule:update']" |
||||
|
> |
||||
|
编辑 |
||||
|
</el-button> |
||||
|
<el-button |
||||
|
link |
||||
|
type="danger" |
||||
|
@click="handleDelete(scope.row.id)" |
||||
|
v-hasPermi="['gas:alarm-rule:delete']" |
||||
|
> |
||||
|
删除 |
||||
|
</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<!-- 分页 --> |
||||
|
<Pagination |
||||
|
:total="total" |
||||
|
v-model:page="queryParams.pageNo" |
||||
|
v-model:limit="queryParams.pageSize" |
||||
|
@pagination="getList" |
||||
|
/> |
||||
|
</ContentWrap> |
||||
|
|
||||
|
<!-- 表单弹窗：添加/修改 --> |
||||
|
<AlarmRuleForm |
||||
|
ref="formRef" |
||||
|
@success="getList" |
||||
|
:gasTypes="handDetectorStore.getGasTypes" |
||||
|
:alarmTypes="handDetectorStore.getAlarmTypes" |
||||
|
/> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { isEmpty } from '@/utils/is' |
||||
|
import { dateFormatter } from '@/utils/formatTime' |
||||
|
import download from '@/utils/download' |
||||
|
import { AlarmRuleApi, AlarmRule } from '@/api/gas/alarmrule' |
||||
|
import AlarmRuleForm from './AlarmRuleForm.vue' |
||||
|
import { useHandDetectorStore } from '@/store/modules/handDetector' |
||||
|
|
||||
|
/** GAS警报规则 列表 */ |
||||
|
defineOptions({ name: 'AlarmRule' }) |
||||
|
|
||||
|
const message = useMessage() // 消息弹窗 |
||||
|
const { t } = useI18n() // 国际化 |
||||
|
const handDetectorStore = useHandDetectorStore() |
||||
|
const loading = ref(true) // 列表的加载中 |
||||
|
const list = ref<AlarmRule[]>([]) // 列表的数据 |
||||
|
const total = ref(0) // 列表的总页数 |
||||
|
const queryParams = reactive({ |
||||
|
pageNo: 1, |
||||
|
pageSize: 10, |
||||
|
gasTypeId: undefined, |
||||
|
alarmTypeId: undefined, |
||||
|
alarmName: undefined, |
||||
|
alarmNameColor: undefined, |
||||
|
alarmColor: undefined, |
||||
|
alarmLevel: undefined, |
||||
|
min: undefined, |
||||
|
max: undefined, |
||||
|
direction: undefined, |
||||
|
sortOrder: undefined, |
||||
|
remark: undefined, |
||||
|
createTime: [] |
||||
|
}) |
||||
|
const queryFormRef = ref() // 搜索的表单 |
||||
|
const exportLoading = ref(false) // 导出的加载中 |
||||
|
|
||||
|
/** 查询列表 */ |
||||
|
const getList = async () => { |
||||
|
loading.value = true |
||||
|
try { |
||||
|
const data = await AlarmRuleApi.getAlarmRulePage(queryParams) |
||||
|
list.value = data.list |
||||
|
total.value = data.total |
||||
|
} finally { |
||||
|
loading.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** 搜索按钮操作 */ |
||||
|
const handleQuery = () => { |
||||
|
queryParams.pageNo = 1 |
||||
|
getList() |
||||
|
} |
||||
|
|
||||
|
/** 重置按钮操作 */ |
||||
|
const resetQuery = () => { |
||||
|
queryFormRef.value.resetFields() |
||||
|
handleQuery() |
||||
|
} |
||||
|
|
||||
|
/** 添加/修改操作 */ |
||||
|
const formRef = ref() |
||||
|
const openForm = (type: string, id?: number) => { |
||||
|
formRef.value.open(type, id) |
||||
|
} |
||||
|
|
||||
|
/** 删除按钮操作 */ |
||||
|
const handleDelete = async (id: number) => { |
||||
|
try { |
||||
|
// 删除的二次确认 |
||||
|
await message.delConfirm() |
||||
|
// 发起删除 |
||||
|
await AlarmRuleApi.deleteAlarmRule(id) |
||||
|
message.success(t('common.delSuccess')) |
||||
|
// 刷新列表 |
||||
|
await getList() |
||||
|
} catch {} |
||||
|
} |
||||
|
|
||||
|
/** 批量删除GAS警报规则 */ |
||||
|
const handleDeleteBatch = async () => { |
||||
|
try { |
||||
|
// 删除的二次确认 |
||||
|
await message.delConfirm() |
||||
|
await AlarmRuleApi.deleteAlarmRuleList(checkedIds.value) |
||||
|
message.success(t('common.delSuccess')) |
||||
|
await getList() |
||||
|
} catch {} |
||||
|
} |
||||
|
|
||||
|
const checkedIds = ref<number[]>([]) |
||||
|
const handleRowCheckboxChange = (records: AlarmRule[]) => { |
||||
|
checkedIds.value = records.map((item) => item.id) |
||||
|
} |
||||
|
|
||||
|
/** 导出按钮操作 */ |
||||
|
const handleExport = async () => { |
||||
|
try { |
||||
|
// 导出的二次确认 |
||||
|
await message.exportConfirm() |
||||
|
// 发起导出 |
||||
|
exportLoading.value = true |
||||
|
const data = await AlarmRuleApi.exportAlarmRule(queryParams) |
||||
|
download.excel(data, 'GAS警报规则.xls') |
||||
|
} catch { |
||||
|
} finally { |
||||
|
exportLoading.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** 初始化 **/ |
||||
|
onMounted(() => { |
||||
|
getList() |
||||
|
}) |
||||
|
</script> |
||||
@ -0,0 +1,136 @@ |
|||||
|
<template> |
||||
|
<Dialog :title="dialogTitle" v-model="dialogVisible"> |
||||
|
<el-form |
||||
|
ref="formRef" |
||||
|
:model="formData" |
||||
|
:rules="formRules" |
||||
|
label-width="120px" |
||||
|
v-loading="formLoading" |
||||
|
> |
||||
|
<el-form-item label="名称" prop="name"> |
||||
|
<el-input v-model="formData.name" placeholder="请输入名称" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="名称颜色" prop="nameColor"> |
||||
|
<el-color-picker v-model="formData.nameColor" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="颜色" prop="color"> |
||||
|
<el-color-picker v-model="formData.color" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="警报方式/级别" prop="level"> |
||||
|
<el-select v-model="formData.level" placeholder="请选择警报方式/级别"> |
||||
|
<el-option |
||||
|
v-for="item in props.alarmLevels" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="排序" prop="sortOrder"> |
||||
|
<el-input v-model="formData.sortOrder" placeholder="请输入排序" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="备注" prop="remark"> |
||||
|
<el-input v-model="formData.remark" placeholder="请输入备注" /> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<template #footer> |
||||
|
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button> |
||||
|
<el-button @click="dialogVisible = false">取 消</el-button> |
||||
|
</template> |
||||
|
</Dialog> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
import { AlarmTypeApi, AlarmType } from '@/api/gas/alarmtype' |
||||
|
/** GAS警报类型 表单 */ |
||||
|
defineOptions({ name: 'AlarmTypeForm' }) |
||||
|
|
||||
|
const { t } = useI18n() // 国际化 |
||||
|
const message = useMessage() // 消息弹窗 |
||||
|
const props = defineProps({ |
||||
|
alarmLevels: { |
||||
|
type: Array as PropType<any[]>, |
||||
|
required: true |
||||
|
} |
||||
|
}) |
||||
|
const dialogVisible = ref(false) // 弹窗的是否展示 |
||||
|
const dialogTitle = ref('') // 弹窗的标题 |
||||
|
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 |
||||
|
const formType = ref('') // 表单的类型：create - 新增；update - 修改 |
||||
|
const formData = ref({ |
||||
|
id: undefined, |
||||
|
name: undefined, |
||||
|
nameColor: '#000', |
||||
|
color: undefined, |
||||
|
level: undefined, |
||||
|
sortOrder: undefined, |
||||
|
remark: undefined |
||||
|
}) |
||||
|
const formRules = reactive({ |
||||
|
name: [{ required: true, message: '名称不能为空', trigger: 'blur' }], |
||||
|
color: [{ required: true, message: '颜色不能为空', trigger: 'blur' }], |
||||
|
level: [ |
||||
|
{ |
||||
|
required: true, |
||||
|
message: '警报方式/级别不能为空', |
||||
|
trigger: 'blur' |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
const formRef = ref() // 表单 Ref |
||||
|
|
||||
|
/** 打开弹窗 */ |
||||
|
const open = async (type: string, id?: number) => { |
||||
|
dialogVisible.value = true |
||||
|
dialogTitle.value = t('action.' + type) |
||||
|
formType.value = type |
||||
|
resetForm() |
||||
|
// 修改时，设置数据 |
||||
|
if (id) { |
||||
|
formLoading.value = true |
||||
|
try { |
||||
|
formData.value = await AlarmTypeApi.getAlarmType(id) |
||||
|
} finally { |
||||
|
formLoading.value = false |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
defineExpose({ open }) // 提供 open 方法，用于打开弹窗 |
||||
|
|
||||
|
/** 提交表单 */ |
||||
|
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调 |
||||
|
const submitForm = async () => { |
||||
|
// 校验表单 |
||||
|
await formRef.value.validate() |
||||
|
// 提交请求 |
||||
|
formLoading.value = true |
||||
|
try { |
||||
|
const data = formData.value as unknown as AlarmType |
||||
|
if (formType.value === 'create') { |
||||
|
await AlarmTypeApi.createAlarmType(data) |
||||
|
message.success(t('common.createSuccess')) |
||||
|
} else { |
||||
|
await AlarmTypeApi.updateAlarmType(data) |
||||
|
message.success(t('common.updateSuccess')) |
||||
|
} |
||||
|
dialogVisible.value = false |
||||
|
// 发送操作成功的事件 |
||||
|
emit('success') |
||||
|
} finally { |
||||
|
formLoading.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** 重置表单 */ |
||||
|
const resetForm = () => { |
||||
|
formData.value = { |
||||
|
id: undefined, |
||||
|
name: undefined, |
||||
|
nameColor: '#000', |
||||
|
color: undefined, |
||||
|
level: undefined, |
||||
|
sortOrder: undefined, |
||||
|
remark: undefined |
||||
|
} |
||||
|
formRef.value?.resetFields() |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,237 @@ |
|||||
|
<template> |
||||
|
<ContentWrap> |
||||
|
<!-- 搜索工作栏 --> |
||||
|
<el-form |
||||
|
class="-mb-15px" |
||||
|
:model="queryParams" |
||||
|
ref="queryFormRef" |
||||
|
:inline="true" |
||||
|
label-width="120px" |
||||
|
> |
||||
|
<el-form-item label="名称" prop="name"> |
||||
|
<el-input |
||||
|
v-model="queryParams.name" |
||||
|
placeholder="请输入名称" |
||||
|
clearable |
||||
|
@keyup.enter="handleQuery" |
||||
|
class="!w-240px" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="警报方式/级别" prop="level"> |
||||
|
<el-input |
||||
|
v-model="queryParams.level" |
||||
|
placeholder="请输入警报方式/级别" |
||||
|
clearable |
||||
|
@keyup.enter="handleQuery" |
||||
|
class="!w-240px" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button> |
||||
|
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
plain |
||||
|
@click="openForm('create')" |
||||
|
v-hasPermi="['gas:alarm-type:create']" |
||||
|
> |
||||
|
<Icon icon="ep:plus" class="mr-5px" /> 新增 |
||||
|
</el-button> |
||||
|
<el-button |
||||
|
type="success" |
||||
|
plain |
||||
|
@click="handleExport" |
||||
|
:loading="exportLoading" |
||||
|
v-hasPermi="['gas:alarm-type:export']" |
||||
|
> |
||||
|
<Icon icon="ep:download" class="mr-5px" /> 导出 |
||||
|
</el-button> |
||||
|
<el-button |
||||
|
type="danger" |
||||
|
plain |
||||
|
:disabled="isEmpty(checkedIds)" |
||||
|
@click="handleDeleteBatch" |
||||
|
v-hasPermi="['gas:alarm-type:delete']" |
||||
|
> |
||||
|
<Icon icon="ep:delete" class="mr-5px" /> 批量删除 |
||||
|
</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</ContentWrap> |
||||
|
|
||||
|
<!-- 列表 --> |
||||
|
<ContentWrap> |
||||
|
<el-table |
||||
|
row-key="id" |
||||
|
v-loading="loading" |
||||
|
:data="list" |
||||
|
:stripe="true" |
||||
|
:show-overflow-tooltip="true" |
||||
|
@selection-change="handleRowCheckboxChange" |
||||
|
> |
||||
|
<el-table-column type="selection" width="55" /> |
||||
|
<el-table-column label="名称" align="center" prop="name" /> |
||||
|
<el-table-column label="图例" align="center" |
||||
|
><template #default="scope"> |
||||
|
<div class="flex items-center"> |
||||
|
<div |
||||
|
class="w-4px h-4px rounded-full" |
||||
|
:style="{ backgroundColor: scope.row.color, color: scope.row.nameColor || '#000' }" |
||||
|
> |
||||
|
{{ getDictLabel(DICT_TYPE.HAND_DETECTOR_ALARM_LEVEL, scope.row.level as number) }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</template></el-table-column |
||||
|
> |
||||
|
<el-table-column label="警报方式/级别" align="center" prop="level" /> |
||||
|
<el-table-column label="排序" align="center" prop="sortOrder" /> |
||||
|
<el-table-column label="备注" align="center" prop="remark" /> |
||||
|
<el-table-column |
||||
|
label="创建时间" |
||||
|
align="center" |
||||
|
prop="createTime" |
||||
|
:formatter="dateFormatter" |
||||
|
width="180px" |
||||
|
/> |
||||
|
<el-table-column label="操作" align="center" min-width="120px"> |
||||
|
<template #default="scope"> |
||||
|
<el-button |
||||
|
link |
||||
|
type="primary" |
||||
|
@click="openForm('update', scope.row.id)" |
||||
|
v-hasPermi="['gas:alarm-type:update']" |
||||
|
> |
||||
|
编辑 |
||||
|
</el-button> |
||||
|
<el-button |
||||
|
link |
||||
|
type="danger" |
||||
|
@click="handleDelete(scope.row.id)" |
||||
|
v-hasPermi="['gas:alarm-type:delete']" |
||||
|
> |
||||
|
删除 |
||||
|
</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<!-- 分页 --> |
||||
|
<Pagination |
||||
|
:total="total" |
||||
|
v-model:page="queryParams.pageNo" |
||||
|
v-model:limit="queryParams.pageSize" |
||||
|
@pagination="getList" |
||||
|
/> |
||||
|
</ContentWrap> |
||||
|
|
||||
|
<!-- 表单弹窗：添加/修改 --> |
||||
|
<AlarmTypeForm |
||||
|
ref="formRef" |
||||
|
@success="getList" |
||||
|
:alarmLevels="getIntDictOptions(DICT_TYPE.HAND_DETECTOR_ALARM_LEVEL)" |
||||
|
/> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { isEmpty } from '@/utils/is' |
||||
|
import { dateFormatter } from '@/utils/formatTime' |
||||
|
import download from '@/utils/download' |
||||
|
import { AlarmTypeApi, AlarmType } from '@/api/gas/alarmtype' |
||||
|
import AlarmTypeForm from './AlarmTypeForm.vue' |
||||
|
import { DICT_TYPE, getIntDictOptions, getDictLabel } from '@/utils/dict' |
||||
|
/** GAS警报类型 列表 */ |
||||
|
defineOptions({ name: 'AlarmType' }) |
||||
|
|
||||
|
const message = useMessage() // 消息弹窗 |
||||
|
const { t } = useI18n() // 国际化 |
||||
|
|
||||
|
const loading = ref(true) // 列表的加载中 |
||||
|
const list = ref<AlarmType[]>([]) // 列表的数据 |
||||
|
const total = ref(0) // 列表的总页数 |
||||
|
const queryParams = reactive({ |
||||
|
pageNo: 1, |
||||
|
pageSize: 10, |
||||
|
name: undefined, |
||||
|
level: undefined, |
||||
|
remark: undefined |
||||
|
}) |
||||
|
const queryFormRef = ref() // 搜索的表单 |
||||
|
const exportLoading = ref(false) // 导出的加载中 |
||||
|
|
||||
|
/** 查询列表 */ |
||||
|
const getList = async () => { |
||||
|
loading.value = true |
||||
|
try { |
||||
|
const data = await AlarmTypeApi.getAlarmTypePage(queryParams) |
||||
|
list.value = data.list |
||||
|
total.value = data.total |
||||
|
} finally { |
||||
|
loading.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** 搜索按钮操作 */ |
||||
|
const handleQuery = () => { |
||||
|
queryParams.pageNo = 1 |
||||
|
getList() |
||||
|
} |
||||
|
|
||||
|
/** 重置按钮操作 */ |
||||
|
const resetQuery = () => { |
||||
|
queryFormRef.value.resetFields() |
||||
|
handleQuery() |
||||
|
} |
||||
|
|
||||
|
/** 添加/修改操作 */ |
||||
|
const formRef = ref() |
||||
|
const openForm = (type: string, id?: number) => { |
||||
|
formRef.value.open(type, id) |
||||
|
} |
||||
|
|
||||
|
/** 删除按钮操作 */ |
||||
|
const handleDelete = async (id: number) => { |
||||
|
try { |
||||
|
// 删除的二次确认 |
||||
|
await message.delConfirm() |
||||
|
// 发起删除 |
||||
|
await AlarmTypeApi.deleteAlarmType(id) |
||||
|
message.success(t('common.delSuccess')) |
||||
|
// 刷新列表 |
||||
|
await getList() |
||||
|
} catch {} |
||||
|
} |
||||
|
|
||||
|
/** 批量删除GAS警报类型 */ |
||||
|
const handleDeleteBatch = async () => { |
||||
|
try { |
||||
|
// 删除的二次确认 |
||||
|
await message.delConfirm() |
||||
|
await AlarmTypeApi.deleteAlarmTypeList(checkedIds.value) |
||||
|
message.success(t('common.delSuccess')) |
||||
|
await getList() |
||||
|
} catch {} |
||||
|
} |
||||
|
|
||||
|
const checkedIds = ref<number[]>([]) |
||||
|
const handleRowCheckboxChange = (records: AlarmType[]) => { |
||||
|
checkedIds.value = records.map((item) => item.id) |
||||
|
} |
||||
|
|
||||
|
/** 导出按钮操作 */ |
||||
|
const handleExport = async () => { |
||||
|
try { |
||||
|
// 导出的二次确认 |
||||
|
await message.exportConfirm() |
||||
|
// 发起导出 |
||||
|
exportLoading.value = true |
||||
|
const data = await AlarmTypeApi.exportAlarmType(queryParams) |
||||
|
download.excel(data, 'GAS警报类型.xls') |
||||
|
} catch { |
||||
|
} finally { |
||||
|
exportLoading.value = false |
||||
|
} |
||||
|
} |
||||
|
/** 初始化 **/ |
||||
|
onMounted(() => { |
||||
|
getList() |
||||
|
}) |
||||
|
</script> |
||||
@ -0,0 +1,190 @@ |
|||||
|
<template> |
||||
|
<Dialog :title="dialogTitle" v-model="dialogVisible"> |
||||
|
<el-form |
||||
|
ref="formRef" |
||||
|
:model="formData" |
||||
|
:rules="formRules" |
||||
|
label-width="100px" |
||||
|
v-loading="formLoading" |
||||
|
> |
||||
|
<el-form-item label="父节点ID" prop="parentId"> |
||||
|
<el-input v-model="formData.parentId" placeholder="请输入父节点ID" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="层级（1：工厂；2：车间；3：班组）" prop="type"> |
||||
|
<el-select v-model="formData.type" placeholder="请选择层级（1：工厂；2：车间；3：班组）"> |
||||
|
<el-option label="请选择字典生成" value="" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="名称" prop="name"> |
||||
|
<el-input v-model="formData.name" placeholder="请输入名称" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="城市" prop="city"> |
||||
|
<el-input v-model="formData.city" placeholder="请输入城市" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="总警报数" prop="alarmTotal"> |
||||
|
<el-input v-model="formData.alarmTotal" placeholder="请输入总警报数" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="已处理警报数" prop="alarmDeal"> |
||||
|
<el-input v-model="formData.alarmDeal" placeholder="请输入已处理警报数" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="区域图" prop="picUrl"> |
||||
|
<el-input v-model="formData.picUrl" placeholder="请输入区域图" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="区域图缩放比例" prop="picScale"> |
||||
|
<el-input v-model="formData.picScale" placeholder="请输入区域图缩放比例" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="在区域图X坐标值" prop="picX"> |
||||
|
<el-input v-model="formData.picX" placeholder="请输入在区域图X坐标值" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="在区域图X坐标值" prop="picY"> |
||||
|
<el-input v-model="formData.picY" placeholder="请输入在区域图X坐标值" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="经度" prop="longitude"> |
||||
|
<el-input v-model="formData.longitude" placeholder="请输入经度" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="纬度" prop="latitude"> |
||||
|
<el-input v-model="formData.latitude" placeholder="请输入纬度" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="区域西南坐标" prop="rectSouthWest"> |
||||
|
<el-input v-model="formData.rectSouthWest" placeholder="请输入区域西南坐标" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="区域东北坐标" prop="rectNorthEast"> |
||||
|
<el-input v-model="formData.rectNorthEast" placeholder="请输入区域东北坐标" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="排序" prop="sortOrder"> |
||||
|
<el-input v-model="formData.sortOrder" placeholder="请输入排序" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="备注" prop="remark"> |
||||
|
<el-input v-model="formData.remark" placeholder="请输入备注" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="删除标志" prop="delFlag"> |
||||
|
<el-input v-model="formData.delFlag" placeholder="请输入删除标志" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="创建者" prop="createBy"> |
||||
|
<el-input v-model="formData.createBy" placeholder="请输入创建者" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="更新者" prop="updateBy"> |
||||
|
<el-input v-model="formData.updateBy" placeholder="请输入更新者" /> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<template #footer> |
||||
|
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button> |
||||
|
<el-button @click="dialogVisible = false">取 消</el-button> |
||||
|
</template> |
||||
|
</Dialog> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
import { FactoryApi, Factory } from '@/api/gas/factory' |
||||
|
|
||||
|
/** GAS工厂 表单 */ |
||||
|
defineOptions({ name: 'FactoryForm' }) |
||||
|
|
||||
|
const { t } = useI18n() // 国际化 |
||||
|
const message = useMessage() // 消息弹窗 |
||||
|
|
||||
|
const dialogVisible = ref(false) // 弹窗的是否展示 |
||||
|
const dialogTitle = ref('') // 弹窗的标题 |
||||
|
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 |
||||
|
const formType = ref('') // 表单的类型：create - 新增；update - 修改 |
||||
|
const formData = ref({ |
||||
|
id: undefined, |
||||
|
parentId: undefined, |
||||
|
type: undefined, |
||||
|
name: undefined, |
||||
|
city: undefined, |
||||
|
alarmTotal: undefined, |
||||
|
alarmDeal: undefined, |
||||
|
picUrl: undefined, |
||||
|
picScale: undefined, |
||||
|
picX: undefined, |
||||
|
picY: undefined, |
||||
|
longitude: undefined, |
||||
|
latitude: undefined, |
||||
|
rectSouthWest: undefined, |
||||
|
rectNorthEast: undefined, |
||||
|
sortOrder: undefined, |
||||
|
remark: undefined, |
||||
|
delFlag: undefined, |
||||
|
createBy: undefined, |
||||
|
updateBy: undefined |
||||
|
}) |
||||
|
const formRules = reactive({ |
||||
|
parentId: [{ required: true, message: '父节点ID不能为空', trigger: 'blur' }], |
||||
|
name: [{ required: true, message: '名称不能为空', trigger: 'blur' }], |
||||
|
alarmTotal: [{ required: true, message: '总警报数不能为空', trigger: 'blur' }], |
||||
|
alarmDeal: [{ required: true, message: '已处理警报数不能为空', trigger: 'blur' }], |
||||
|
sortOrder: [{ required: true, message: '排序不能为空', trigger: 'blur' }], |
||||
|
delFlag: [{ required: true, message: '删除标志不能为空', trigger: 'blur' }], |
||||
|
createBy: [{ required: true, message: '创建者不能为空', trigger: 'blur' }] |
||||
|
}) |
||||
|
const formRef = ref() // 表单 Ref |
||||
|
|
||||
|
/** 打开弹窗 */ |
||||
|
const open = async (type: string, id?: number) => { |
||||
|
dialogVisible.value = true |
||||
|
dialogTitle.value = t('action.' + type) |
||||
|
formType.value = type |
||||
|
resetForm() |
||||
|
// 修改时，设置数据 |
||||
|
if (id) { |
||||
|
formLoading.value = true |
||||
|
try { |
||||
|
formData.value = await FactoryApi.getFactory(id) |
||||
|
} finally { |
||||
|
formLoading.value = false |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
defineExpose({ open }) // 提供 open 方法，用于打开弹窗 |
||||
|
|
||||
|
/** 提交表单 */ |
||||
|
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调 |
||||
|
const submitForm = async () => { |
||||
|
// 校验表单 |
||||
|
await formRef.value.validate() |
||||
|
// 提交请求 |
||||
|
formLoading.value = true |
||||
|
try { |
||||
|
const data = formData.value as unknown as Factory |
||||
|
if (formType.value === 'create') { |
||||
|
await FactoryApi.createFactory(data) |
||||
|
message.success(t('common.createSuccess')) |
||||
|
} else { |
||||
|
await FactoryApi.updateFactory(data) |
||||
|
message.success(t('common.updateSuccess')) |
||||
|
} |
||||
|
dialogVisible.value = false |
||||
|
// 发送操作成功的事件 |
||||
|
emit('success') |
||||
|
} finally { |
||||
|
formLoading.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** 重置表单 */ |
||||
|
const resetForm = () => { |
||||
|
formData.value = { |
||||
|
id: undefined, |
||||
|
parentId: undefined, |
||||
|
type: undefined, |
||||
|
name: undefined, |
||||
|
city: undefined, |
||||
|
alarmTotal: undefined, |
||||
|
alarmDeal: undefined, |
||||
|
picUrl: undefined, |
||||
|
picScale: undefined, |
||||
|
picX: undefined, |
||||
|
picY: undefined, |
||||
|
longitude: undefined, |
||||
|
latitude: undefined, |
||||
|
rectSouthWest: undefined, |
||||
|
rectNorthEast: undefined, |
||||
|
sortOrder: undefined, |
||||
|
remark: undefined, |
||||
|
delFlag: undefined, |
||||
|
createBy: undefined, |
||||
|
updateBy: undefined |
||||
|
} |
||||
|
formRef.value?.resetFields() |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,400 @@ |
|||||
|
<template> |
||||
|
<ContentWrap> |
||||
|
<!-- 搜索工作栏 --> |
||||
|
<el-form |
||||
|
class="-mb-15px" |
||||
|
:model="queryParams" |
||||
|
ref="queryFormRef" |
||||
|
:inline="true" |
||||
|
label-width="68px" |
||||
|
> |
||||
|
<el-form-item label="父节点ID" prop="parentId"> |
||||
|
<el-input |
||||
|
v-model="queryParams.parentId" |
||||
|
placeholder="请输入父节点ID" |
||||
|
clearable |
||||
|
@keyup.enter="handleQuery" |
||||
|
class="!w-240px" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="层级（1：工厂；2：车间；3：班组）" prop="type"> |
||||
|
<el-select |
||||
|
v-model="queryParams.type" |
||||
|
placeholder="请选择层级（1：工厂；2：车间；3：班组）" |
||||
|
clearable |
||||
|
class="!w-240px" |
||||
|
> |
||||
|
<el-option label="请选择字典生成" value="" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="名称" prop="name"> |
||||
|
<el-input |
||||
|
v-model="queryParams.name" |
||||
|
placeholder="请输入名称" |
||||
|
clearable |
||||
|
@keyup.enter="handleQuery" |
||||
|
class="!w-240px" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="城市" prop="city"> |
||||
|
<el-input |
||||
|
v-model="queryParams.city" |
||||
|
placeholder="请输入城市" |
||||
|
clearable |
||||
|
@keyup.enter="handleQuery" |
||||
|
class="!w-240px" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="总警报数" prop="alarmTotal"> |
||||
|
<el-input |
||||
|
v-model="queryParams.alarmTotal" |
||||
|
placeholder="请输入总警报数" |
||||
|
clearable |
||||
|
@keyup.enter="handleQuery" |
||||
|
class="!w-240px" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="已处理警报数" prop="alarmDeal"> |
||||
|
<el-input |
||||
|
v-model="queryParams.alarmDeal" |
||||
|
placeholder="请输入已处理警报数" |
||||
|
clearable |
||||
|
@keyup.enter="handleQuery" |
||||
|
class="!w-240px" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="区域图" prop="picUrl"> |
||||
|
<el-input |
||||
|
v-model="queryParams.picUrl" |
||||
|
placeholder="请输入区域图" |
||||
|
clearable |
||||
|
@keyup.enter="handleQuery" |
||||
|
class="!w-240px" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="区域图缩放比例" prop="picScale"> |
||||
|
<el-input |
||||
|
v-model="queryParams.picScale" |
||||
|
placeholder="请输入区域图缩放比例" |
||||
|
clearable |
||||
|
@keyup.enter="handleQuery" |
||||
|
class="!w-240px" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="在区域图X坐标值" prop="picX"> |
||||
|
<el-input |
||||
|
v-model="queryParams.picX" |
||||
|
placeholder="请输入在区域图X坐标值" |
||||
|
clearable |
||||
|
@keyup.enter="handleQuery" |
||||
|
class="!w-240px" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="在区域图X坐标值" prop="picY"> |
||||
|
<el-input |
||||
|
v-model="queryParams.picY" |
||||
|
placeholder="请输入在区域图X坐标值" |
||||
|
clearable |
||||
|
@keyup.enter="handleQuery" |
||||
|
class="!w-240px" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="经度" prop="longitude"> |
||||
|
<el-input |
||||
|
v-model="queryParams.longitude" |
||||
|
placeholder="请输入经度" |
||||
|
clearable |
||||
|
@keyup.enter="handleQuery" |
||||
|
class="!w-240px" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="纬度" prop="latitude"> |
||||
|
<el-input |
||||
|
v-model="queryParams.latitude" |
||||
|
placeholder="请输入纬度" |
||||
|
clearable |
||||
|
@keyup.enter="handleQuery" |
||||
|
class="!w-240px" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="区域西南坐标" prop="rectSouthWest"> |
||||
|
<el-input |
||||
|
v-model="queryParams.rectSouthWest" |
||||
|
placeholder="请输入区域西南坐标" |
||||
|
clearable |
||||
|
@keyup.enter="handleQuery" |
||||
|
class="!w-240px" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="区域东北坐标" prop="rectNorthEast"> |
||||
|
<el-input |
||||
|
v-model="queryParams.rectNorthEast" |
||||
|
placeholder="请输入区域东北坐标" |
||||
|
clearable |
||||
|
@keyup.enter="handleQuery" |
||||
|
class="!w-240px" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="排序" prop="sortOrder"> |
||||
|
<el-input |
||||
|
v-model="queryParams.sortOrder" |
||||
|
placeholder="请输入排序" |
||||
|
clearable |
||||
|
@keyup.enter="handleQuery" |
||||
|
class="!w-240px" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="备注" prop="remark"> |
||||
|
<el-input |
||||
|
v-model="queryParams.remark" |
||||
|
placeholder="请输入备注" |
||||
|
clearable |
||||
|
@keyup.enter="handleQuery" |
||||
|
class="!w-240px" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="删除标志" prop="delFlag"> |
||||
|
<el-input |
||||
|
v-model="queryParams.delFlag" |
||||
|
placeholder="请输入删除标志" |
||||
|
clearable |
||||
|
@keyup.enter="handleQuery" |
||||
|
class="!w-240px" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="创建者" prop="createBy"> |
||||
|
<el-input |
||||
|
v-model="queryParams.createBy" |
||||
|
placeholder="请输入创建者" |
||||
|
clearable |
||||
|
@keyup.enter="handleQuery" |
||||
|
class="!w-240px" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button> |
||||
|
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
plain |
||||
|
@click="openForm('create')" |
||||
|
v-hasPermi="['gas:factory:create']" |
||||
|
> |
||||
|
<Icon icon="ep:plus" class="mr-5px" /> 新增 |
||||
|
</el-button> |
||||
|
<el-button |
||||
|
type="success" |
||||
|
plain |
||||
|
@click="handleExport" |
||||
|
:loading="exportLoading" |
||||
|
v-hasPermi="['gas:factory:export']" |
||||
|
> |
||||
|
<Icon icon="ep:download" class="mr-5px" /> 导出 |
||||
|
</el-button> |
||||
|
<el-button |
||||
|
type="danger" |
||||
|
plain |
||||
|
:disabled="isEmpty(checkedIds)" |
||||
|
@click="handleDeleteBatch" |
||||
|
v-hasPermi="['gas:factory:delete']" |
||||
|
> |
||||
|
<Icon icon="ep:delete" class="mr-5px" /> 批量删除 |
||||
|
</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</ContentWrap> |
||||
|
|
||||
|
<!-- 列表 --> |
||||
|
<ContentWrap> |
||||
|
<el-table |
||||
|
row-key="id" |
||||
|
v-loading="loading" |
||||
|
:data="list" |
||||
|
:stripe="true" |
||||
|
:show-overflow-tooltip="true" |
||||
|
@selection-change="handleRowCheckboxChange" |
||||
|
> |
||||
|
<el-table-column type="selection" width="55" /> |
||||
|
<el-table-column label="主键ID" align="center" prop="id" /> |
||||
|
<el-table-column label="父节点ID" align="center" prop="parentId" /> |
||||
|
<el-table-column label="层级（1：工厂；2：车间；3：班组）" align="center" prop="type" /> |
||||
|
<el-table-column label="名称" align="center" prop="name" /> |
||||
|
<el-table-column label="城市" align="center" prop="city" /> |
||||
|
<el-table-column label="总警报数" align="center" prop="alarmTotal" /> |
||||
|
<el-table-column label="已处理警报数" align="center" prop="alarmDeal" /> |
||||
|
<el-table-column label="区域图" align="center" prop="picUrl" /> |
||||
|
<el-table-column label="区域图缩放比例" align="center" prop="picScale" /> |
||||
|
<el-table-column label="在区域图X坐标值" align="center" prop="picX" /> |
||||
|
<el-table-column label="在区域图X坐标值" align="center" prop="picY" /> |
||||
|
<el-table-column label="经度" align="center" prop="longitude" /> |
||||
|
<el-table-column label="纬度" align="center" prop="latitude" /> |
||||
|
<el-table-column label="区域西南坐标" align="center" prop="rectSouthWest" /> |
||||
|
<el-table-column label="区域东北坐标" align="center" prop="rectNorthEast" /> |
||||
|
<el-table-column label="排序" align="center" prop="sortOrder" /> |
||||
|
<el-table-column label="备注" align="center" prop="remark" /> |
||||
|
<el-table-column label="删除标志" align="center" prop="delFlag" /> |
||||
|
<el-table-column label="创建者" align="center" prop="createBy" /> |
||||
|
<el-table-column |
||||
|
label="创建时间" |
||||
|
align="center" |
||||
|
prop="createTime" |
||||
|
:formatter="dateFormatter" |
||||
|
width="180px" |
||||
|
/> |
||||
|
<el-table-column label="更新者" align="center" prop="updateBy" /> |
||||
|
<el-table-column label="操作" align="center" min-width="120px"> |
||||
|
<template #default="scope"> |
||||
|
<el-button |
||||
|
link |
||||
|
type="primary" |
||||
|
@click="openForm('update', scope.row.id)" |
||||
|
v-hasPermi="['gas:factory:update']" |
||||
|
> |
||||
|
编辑 |
||||
|
</el-button> |
||||
|
<el-button |
||||
|
link |
||||
|
type="danger" |
||||
|
@click="handleDelete(scope.row.id)" |
||||
|
v-hasPermi="['gas:factory:delete']" |
||||
|
> |
||||
|
删除 |
||||
|
</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<!-- 分页 --> |
||||
|
<Pagination |
||||
|
:total="total" |
||||
|
v-model:page="queryParams.pageNo" |
||||
|
v-model:limit="queryParams.pageSize" |
||||
|
@pagination="getList" |
||||
|
/> |
||||
|
</ContentWrap> |
||||
|
|
||||
|
<!-- 表单弹窗：添加/修改 --> |
||||
|
<FactoryForm ref="formRef" @success="getList" /> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { isEmpty } from '@/utils/is' |
||||
|
import { dateFormatter } from '@/utils/formatTime' |
||||
|
import download from '@/utils/download' |
||||
|
import { FactoryApi, Factory } from '@/api/gas/factory' |
||||
|
import FactoryForm from './FactoryForm.vue' |
||||
|
|
||||
|
/** GAS工厂 列表 */ |
||||
|
defineOptions({ name: 'Factory' }) |
||||
|
|
||||
|
const message = useMessage() // 消息弹窗 |
||||
|
const { t } = useI18n() // 国际化 |
||||
|
|
||||
|
const loading = ref(true) // 列表的加载中 |
||||
|
const list = ref<Factory[]>([]) // 列表的数据 |
||||
|
const total = ref(0) // 列表的总页数 |
||||
|
const queryParams = reactive({ |
||||
|
pageNo: 1, |
||||
|
pageSize: 10, |
||||
|
parentId: undefined, |
||||
|
type: undefined, |
||||
|
name: undefined, |
||||
|
city: undefined, |
||||
|
alarmTotal: undefined, |
||||
|
alarmDeal: undefined, |
||||
|
picUrl: undefined, |
||||
|
picScale: undefined, |
||||
|
picX: undefined, |
||||
|
picY: undefined, |
||||
|
longitude: undefined, |
||||
|
latitude: undefined, |
||||
|
rectSouthWest: undefined, |
||||
|
rectNorthEast: undefined, |
||||
|
sortOrder: undefined, |
||||
|
remark: undefined, |
||||
|
delFlag: undefined, |
||||
|
createBy: undefined, |
||||
|
createTime: [], |
||||
|
updateBy: undefined |
||||
|
}) |
||||
|
const queryFormRef = ref() // 搜索的表单 |
||||
|
const exportLoading = ref(false) // 导出的加载中 |
||||
|
|
||||
|
/** 查询列表 */ |
||||
|
const getList = async () => { |
||||
|
loading.value = true |
||||
|
try { |
||||
|
const data = await FactoryApi.getFactoryPage(queryParams) |
||||
|
list.value = data.list |
||||
|
total.value = data.total |
||||
|
} finally { |
||||
|
loading.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** 搜索按钮操作 */ |
||||
|
const handleQuery = () => { |
||||
|
queryParams.pageNo = 1 |
||||
|
getList() |
||||
|
} |
||||
|
|
||||
|
/** 重置按钮操作 */ |
||||
|
const resetQuery = () => { |
||||
|
queryFormRef.value.resetFields() |
||||
|
handleQuery() |
||||
|
} |
||||
|
|
||||
|
/** 添加/修改操作 */ |
||||
|
const formRef = ref() |
||||
|
const openForm = (type: string, id?: number) => { |
||||
|
formRef.value.open(type, id) |
||||
|
} |
||||
|
|
||||
|
/** 删除按钮操作 */ |
||||
|
const handleDelete = async (id: number) => { |
||||
|
try { |
||||
|
// 删除的二次确认 |
||||
|
await message.delConfirm() |
||||
|
// 发起删除 |
||||
|
await FactoryApi.deleteFactory(id) |
||||
|
message.success(t('common.delSuccess')) |
||||
|
// 刷新列表 |
||||
|
await getList() |
||||
|
} catch {} |
||||
|
} |
||||
|
|
||||
|
/** 批量删除GAS工厂 */ |
||||
|
const handleDeleteBatch = async () => { |
||||
|
try { |
||||
|
// 删除的二次确认 |
||||
|
await message.delConfirm() |
||||
|
await FactoryApi.deleteFactoryList(checkedIds.value) |
||||
|
message.success(t('common.delSuccess')) |
||||
|
await getList() |
||||
|
} catch {} |
||||
|
} |
||||
|
|
||||
|
const checkedIds = ref<number[]>([]) |
||||
|
const handleRowCheckboxChange = (records: Factory[]) => { |
||||
|
checkedIds.value = records.map((item) => item.id) |
||||
|
} |
||||
|
|
||||
|
/** 导出按钮操作 */ |
||||
|
const handleExport = async () => { |
||||
|
try { |
||||
|
// 导出的二次确认 |
||||
|
await message.exportConfirm() |
||||
|
// 发起导出 |
||||
|
exportLoading.value = true |
||||
|
const data = await FactoryApi.exportFactory(queryParams) |
||||
|
download.excel(data, 'GAS工厂.xls') |
||||
|
} catch { |
||||
|
} finally { |
||||
|
exportLoading.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** 初始化 **/ |
||||
|
onMounted(() => { |
||||
|
getList() |
||||
|
}) |
||||
|
</script> |
||||
@ -0,0 +1,132 @@ |
|||||
|
<template> |
||||
|
<Dialog :title="dialogTitle" v-model="dialogVisible"> |
||||
|
<el-form |
||||
|
ref="formRef" |
||||
|
:model="formData" |
||||
|
:rules="formRules" |
||||
|
label-width="100px" |
||||
|
v-loading="formLoading" |
||||
|
> |
||||
|
<el-form-item label="围栏名称" prop="name"> |
||||
|
<el-input v-model="formData.name" placeholder="请输入围栏名称" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="围栏范围" prop="fenceRange"> |
||||
|
<el-input v-model="formData.fenceRange" placeholder="请输入围栏范围" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="状态" prop="status"> |
||||
|
<el-radio-group v-model="formData.status"> |
||||
|
<el-radio-button |
||||
|
v-for="dict in getIntDictOptions(DICT_TYPE.HAND_DETECTOR_FENCE_STATUS)" |
||||
|
:key="dict.value" |
||||
|
:value="dict.value" |
||||
|
> |
||||
|
{{ dict.label }} |
||||
|
</el-radio-button> |
||||
|
</el-radio-group> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="围栏类型" prop="type"> |
||||
|
<el-radio-group v-model="formData.type"> |
||||
|
<el-radio-button |
||||
|
v-for="dict in getIntDictOptions(DICT_TYPE.HAND_DETECTOR_FENCE_TYPE)" |
||||
|
:key="dict.value" |
||||
|
:value="dict.value" |
||||
|
> |
||||
|
{{ dict.label }} |
||||
|
</el-radio-button> |
||||
|
</el-radio-group> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="备注" prop="remark"> |
||||
|
<el-input v-model="formData.remark" placeholder="请输入备注" /> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<template #footer> |
||||
|
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button> |
||||
|
<el-button @click="dialogVisible = false">取 消</el-button> |
||||
|
</template> |
||||
|
</Dialog> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
import { FenceApi, Fence } from '@/api/gas/fence' |
||||
|
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' |
||||
|
|
||||
|
/** GAS电子围栏 表单 */ |
||||
|
defineOptions({ name: 'FenceForm' }) |
||||
|
|
||||
|
const { t } = useI18n() // 国际化 |
||||
|
const message = useMessage() // 消息弹窗 |
||||
|
|
||||
|
const dialogVisible = ref(false) // 弹窗的是否展示 |
||||
|
const dialogTitle = ref('') // 弹窗的标题 |
||||
|
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 |
||||
|
const formType = ref('') // 表单的类型：create - 新增；update - 修改 |
||||
|
const formData = ref({ |
||||
|
id: undefined, |
||||
|
name: undefined, |
||||
|
fenceRange: undefined, |
||||
|
status: 1, |
||||
|
type: 1, |
||||
|
remark: undefined |
||||
|
}) |
||||
|
const formRules = reactive({ |
||||
|
name: [{ required: true, message: '围栏名称不能为空', trigger: 'blur' }], |
||||
|
fenceRange: [{ required: true, message: '围栏范围不能为空', trigger: 'blur' }], |
||||
|
status: [{ required: true, message: '状态不能为空', trigger: 'blur' }], |
||||
|
type: [{ required: true, message: '围栏类型不能为空', trigger: 'blur' }] |
||||
|
}) |
||||
|
const formRef = ref() // 表单 Ref |
||||
|
|
||||
|
/** 打开弹窗 */ |
||||
|
const open = async (type: string, id?: number) => { |
||||
|
dialogVisible.value = true |
||||
|
dialogTitle.value = t('action.' + type) |
||||
|
formType.value = type |
||||
|
resetForm() |
||||
|
// 修改时，设置数据 |
||||
|
if (id) { |
||||
|
formLoading.value = true |
||||
|
try { |
||||
|
formData.value = await FenceApi.getFence(id) |
||||
|
} finally { |
||||
|
formLoading.value = false |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
defineExpose({ open }) // 提供 open 方法，用于打开弹窗 |
||||
|
|
||||
|
/** 提交表单 */ |
||||
|
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调 |
||||
|
const submitForm = async () => { |
||||
|
// 校验表单 |
||||
|
await formRef.value.validate() |
||||
|
// 提交请求 |
||||
|
formLoading.value = true |
||||
|
try { |
||||
|
const data = formData.value as unknown as Fence |
||||
|
if (formType.value === 'create') { |
||||
|
await FenceApi.createFence(data) |
||||
|
message.success(t('common.createSuccess')) |
||||
|
} else { |
||||
|
await FenceApi.updateFence(data) |
||||
|
message.success(t('common.updateSuccess')) |
||||
|
} |
||||
|
dialogVisible.value = false |
||||
|
// 发送操作成功的事件 |
||||
|
emit('success') |
||||
|
} finally { |
||||
|
formLoading.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** 重置表单 */ |
||||
|
const resetForm = () => { |
||||
|
formData.value = { |
||||
|
id: undefined, |
||||
|
name: undefined, |
||||
|
fenceRange: undefined, |
||||
|
status: 1, |
||||
|
type: 1, |
||||
|
remark: undefined |
||||
|
} |
||||
|
formRef.value?.resetFields() |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,243 @@ |
|||||
|
<template> |
||||
|
<ContentWrap> |
||||
|
<!-- 搜索工作栏 --> |
||||
|
<el-form |
||||
|
class="-mb-15px" |
||||
|
:model="queryParams" |
||||
|
ref="queryFormRef" |
||||
|
:inline="true" |
||||
|
label-width="68px" |
||||
|
> |
||||
|
<el-form-item label="围栏名称" prop="name"> |
||||
|
<el-input |
||||
|
v-model="queryParams.name" |
||||
|
placeholder="请输入围栏名称" |
||||
|
clearable |
||||
|
@keyup.enter="handleQuery" |
||||
|
class="!w-240px" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="状态" prop="status"> |
||||
|
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-240px"> |
||||
|
<el-option |
||||
|
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)" |
||||
|
:key="dict.value" |
||||
|
:label="dict.label" |
||||
|
:value="dict.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="围栏类型" prop="type"> |
||||
|
<el-select |
||||
|
v-model="queryParams.type" |
||||
|
placeholder="请选择围栏类型" |
||||
|
clearable |
||||
|
class="!w-240px" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="dict in getIntDictOptions(DICT_TYPE.HAND_DETECTOR_FENCE_TYPE)" |
||||
|
:key="dict.value" |
||||
|
:label="dict.label" |
||||
|
:value="dict.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button> |
||||
|
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
plain |
||||
|
@click="openForm('create')" |
||||
|
v-hasPermi="['gas:fence:create']" |
||||
|
> |
||||
|
<Icon icon="ep:plus" class="mr-5px" /> 新增 |
||||
|
</el-button> |
||||
|
<el-button |
||||
|
type="success" |
||||
|
plain |
||||
|
@click="handleExport" |
||||
|
:loading="exportLoading" |
||||
|
v-hasPermi="['gas:fence:export']" |
||||
|
> |
||||
|
<Icon icon="ep:download" class="mr-5px" /> 导出 |
||||
|
</el-button> |
||||
|
<el-button |
||||
|
type="danger" |
||||
|
plain |
||||
|
:disabled="isEmpty(checkedIds)" |
||||
|
@click="handleDeleteBatch" |
||||
|
v-hasPermi="['gas:fence:delete']" |
||||
|
> |
||||
|
<Icon icon="ep:delete" class="mr-5px" /> 批量删除 |
||||
|
</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</ContentWrap> |
||||
|
|
||||
|
<!-- 列表 --> |
||||
|
<ContentWrap> |
||||
|
<el-table |
||||
|
row-key="id" |
||||
|
v-loading="loading" |
||||
|
:data="list" |
||||
|
:stripe="true" |
||||
|
:show-overflow-tooltip="true" |
||||
|
@selection-change="handleRowCheckboxChange" |
||||
|
> |
||||
|
<el-table-column type="selection" width="55" /> |
||||
|
<el-table-column label="围栏名称" align="center" prop="name" /> |
||||
|
<el-table-column label="状态" align="center" prop="status"> |
||||
|
<template #default="scope"> |
||||
|
<DictTag :type="DICT_TYPE.HAND_DETECTOR_FENCE_STATUS" :value="scope.row.status" /> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="围栏类型" align="center" prop="type"> |
||||
|
<template #default="scope"> |
||||
|
<DictTag :type="DICT_TYPE.HAND_DETECTOR_FENCE_TYPE" :value="scope.row.type" /> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="备注" align="center" prop="remark" /> |
||||
|
|
||||
|
<el-table-column label="操作" align="center" min-width="120px"> |
||||
|
<template #default="scope"> |
||||
|
<el-button |
||||
|
link |
||||
|
type="primary" |
||||
|
@click="openForm('update', scope.row.id)" |
||||
|
v-hasPermi="['gas:fence:update']" |
||||
|
> |
||||
|
编辑 |
||||
|
</el-button> |
||||
|
<el-button |
||||
|
link |
||||
|
type="danger" |
||||
|
@click="handleDelete(scope.row.id)" |
||||
|
v-hasPermi="['gas:fence:delete']" |
||||
|
> |
||||
|
删除 |
||||
|
</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<!-- 分页 --> |
||||
|
<Pagination |
||||
|
:total="total" |
||||
|
v-model:page="queryParams.pageNo" |
||||
|
v-model:limit="queryParams.pageSize" |
||||
|
@pagination="getList" |
||||
|
/> |
||||
|
</ContentWrap> |
||||
|
|
||||
|
<!-- 表单弹窗：添加/修改 --> |
||||
|
<FenceForm ref="formRef" @success="getList" /> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { isEmpty } from '@/utils/is' |
||||
|
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' |
||||
|
import download from '@/utils/download' |
||||
|
import { FenceApi, Fence } from '@/api/gas/fence' |
||||
|
import FenceForm from './FenceForm.vue' |
||||
|
|
||||
|
/** GAS电子围栏 列表 */ |
||||
|
defineOptions({ name: 'Fence' }) |
||||
|
|
||||
|
const message = useMessage() // 消息弹窗 |
||||
|
const { t } = useI18n() // 国际化 |
||||
|
|
||||
|
const loading = ref(true) // 列表的加载中 |
||||
|
const list = ref<Fence[]>([]) // 列表的数据 |
||||
|
const total = ref(0) // 列表的总页数 |
||||
|
const queryParams = reactive({ |
||||
|
pageNo: 1, |
||||
|
pageSize: 10, |
||||
|
name: undefined, |
||||
|
fenceRange: undefined, |
||||
|
status: undefined, |
||||
|
type: undefined, |
||||
|
remark: undefined, |
||||
|
createTime: [] |
||||
|
}) |
||||
|
const queryFormRef = ref() // 搜索的表单 |
||||
|
const exportLoading = ref(false) // 导出的加载中 |
||||
|
|
||||
|
/** 查询列表 */ |
||||
|
const getList = async () => { |
||||
|
loading.value = true |
||||
|
try { |
||||
|
const data = await FenceApi.getFencePage(queryParams) |
||||
|
list.value = data.list |
||||
|
total.value = data.total |
||||
|
} finally { |
||||
|
loading.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** 搜索按钮操作 */ |
||||
|
const handleQuery = () => { |
||||
|
queryParams.pageNo = 1 |
||||
|
getList() |
||||
|
} |
||||
|
|
||||
|
/** 重置按钮操作 */ |
||||
|
const resetQuery = () => { |
||||
|
queryFormRef.value.resetFields() |
||||
|
handleQuery() |
||||
|
} |
||||
|
|
||||
|
/** 添加/修改操作 */ |
||||
|
const formRef = ref() |
||||
|
const openForm = (type: string, id?: number) => { |
||||
|
formRef.value.open(type, id) |
||||
|
} |
||||
|
|
||||
|
/** 删除按钮操作 */ |
||||
|
const handleDelete = async (id: number) => { |
||||
|
try { |
||||
|
// 删除的二次确认 |
||||
|
await message.delConfirm() |
||||
|
// 发起删除 |
||||
|
await FenceApi.deleteFence(id) |
||||
|
message.success(t('common.delSuccess')) |
||||
|
// 刷新列表 |
||||
|
await getList() |
||||
|
} catch {} |
||||
|
} |
||||
|
|
||||
|
/** 批量删除GAS电子围栏 */ |
||||
|
const handleDeleteBatch = async () => { |
||||
|
try { |
||||
|
// 删除的二次确认 |
||||
|
await message.delConfirm() |
||||
|
await FenceApi.deleteFenceList(checkedIds.value) |
||||
|
message.success(t('common.delSuccess')) |
||||
|
await getList() |
||||
|
} catch {} |
||||
|
} |
||||
|
|
||||
|
const checkedIds = ref<number[]>([]) |
||||
|
const handleRowCheckboxChange = (records: Fence[]) => { |
||||
|
checkedIds.value = records.map((item) => item.id) |
||||
|
} |
||||
|
|
||||
|
/** 导出按钮操作 */ |
||||
|
const handleExport = async () => { |
||||
|
try { |
||||
|
// 导出的二次确认 |
||||
|
await message.exportConfirm() |
||||
|
// 发起导出 |
||||
|
exportLoading.value = true |
||||
|
const data = await FenceApi.exportFence(queryParams) |
||||
|
download.excel(data, 'GAS电子围栏.xls') |
||||
|
} catch { |
||||
|
} finally { |
||||
|
exportLoading.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** 初始化 **/ |
||||
|
onMounted(() => { |
||||
|
getList() |
||||
|
}) |
||||
|
</script> |
||||
@ -0,0 +1,194 @@ |
|||||
|
<template> |
||||
|
<Dialog :title="dialogTitle" v-model="dialogVisible"> |
||||
|
<el-form |
||||
|
ref="formRef" |
||||
|
:model="formData" |
||||
|
:rules="formRules" |
||||
|
label-width="100px" |
||||
|
v-loading="formLoading" |
||||
|
> |
||||
|
<el-form-item label="持有人" prop="detectorId"> |
||||
|
<el-select v-model="formData.detectorId" placeholder="请选择持有人"> |
||||
|
<el-option |
||||
|
v-for="item in props.handDetector" |
||||
|
:key="item.id" |
||||
|
:label="item.name" |
||||
|
:value="item.id" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="围栏" prop="fenceId"> |
||||
|
<el-select v-model="formData.fenceId" placeholder="请选择围栏"> |
||||
|
<el-option |
||||
|
v-for="item in props.fences" |
||||
|
:key="item.id" |
||||
|
:label="item.name" |
||||
|
:value="item.id" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="报警类型" prop="type"> |
||||
|
<el-select v-model="formData.type" placeholder="请选择报警类型"> |
||||
|
<el-option |
||||
|
v-for="item in props.alarmTypes" |
||||
|
:key="item.id" |
||||
|
:label="item.name" |
||||
|
:value="item.id" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="超出围栏米数" prop="distance"> |
||||
|
<el-input-number v-model="formData.distance" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="最远超出米数" prop="maxDistance"> |
||||
|
<el-input-number v-model="formData.maxDistance" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="开始时间" prop="tAlarmStart"> |
||||
|
<el-date-picker |
||||
|
v-model="formData.tAlarmStart" |
||||
|
type="date" |
||||
|
value-format="x" |
||||
|
placeholder="选择开始时间" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="结束时间" prop="tAlarmEnd"> |
||||
|
<el-date-picker |
||||
|
v-model="formData.tAlarmEnd" |
||||
|
type="date" |
||||
|
value-format="x" |
||||
|
placeholder="选择结束时间" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="状态" prop="status"> |
||||
|
<el-radio-group v-model="formData.status"> |
||||
|
<el-radio |
||||
|
v-for="item in getIntDictOptions(DICT_TYPE.HAND_DETECTOR_HANDLE_STATUS)" |
||||
|
:key="item.value" |
||||
|
:value="item.value" |
||||
|
> |
||||
|
{{ item.label }} |
||||
|
</el-radio> |
||||
|
</el-radio-group> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="备注" prop="remark"> |
||||
|
<el-input v-model="formData.remark" placeholder="请输入备注" /> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<template #footer> |
||||
|
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button> |
||||
|
<el-button @click="dialogVisible = false">取 消</el-button> |
||||
|
</template> |
||||
|
</Dialog> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
import { FenceAlarmApi, FenceAlarm } from '@/api/gas/fencealarm' |
||||
|
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' |
||||
|
import { HandDetector } from '@/api/gas/handdetector' |
||||
|
import { Fence } from '@/api/gas/fence' |
||||
|
import { AlarmType } from '@/api/gas/alarmtype' |
||||
|
|
||||
|
/** GAS手持探测器围栏报警 表单 */ |
||||
|
defineOptions({ name: 'FenceAlarmForm' }) |
||||
|
|
||||
|
const { t } = useI18n() // 国际化 |
||||
|
const message = useMessage() // 消息弹窗 |
||||
|
const props = defineProps({ |
||||
|
handDetector: { |
||||
|
type: Array as PropType<HandDetector[]>, |
||||
|
required: true |
||||
|
}, |
||||
|
fences: { |
||||
|
type: Array as PropType<Fence[]>, |
||||
|
required: true |
||||
|
}, |
||||
|
alarmTypes: { |
||||
|
type: Array as PropType<AlarmType[]>, |
||||
|
required: true |
||||
|
} |
||||
|
}) |
||||
|
const dialogVisible = ref(false) // 弹窗的是否展示 |
||||
|
const dialogTitle = ref('') // 弹窗的标题 |
||||
|
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 |
||||
|
const formType = ref('') // 表单的类型：create - 新增；update - 修改 |
||||
|
const formData = ref({ |
||||
|
id: undefined, |
||||
|
detectorId: undefined, |
||||
|
fenceId: undefined, |
||||
|
type: undefined, |
||||
|
picX: undefined, |
||||
|
picY: undefined, |
||||
|
distance: undefined, |
||||
|
maxDistance: undefined, |
||||
|
tAlarmStart: undefined, |
||||
|
tAlarmEnd: undefined, |
||||
|
status: undefined, |
||||
|
remark: undefined |
||||
|
}) |
||||
|
const formRules = reactive({ |
||||
|
detectorId: [{ required: true, message: '持有人不能为空', trigger: 'blur' }], |
||||
|
fenceId: [{ required: true, message: '围栏不能为空', trigger: 'blur' }], |
||||
|
type: [{ required: true, message: '报警类型不能为空', trigger: 'blur' }] |
||||
|
}) |
||||
|
const formRef = ref() // 表单 Ref |
||||
|
|
||||
|
/** 打开弹窗 */ |
||||
|
const open = async (type: string, id?: number) => { |
||||
|
dialogVisible.value = true |
||||
|
dialogTitle.value = t('action.' + type) |
||||
|
formType.value = type |
||||
|
resetForm() |
||||
|
// 修改时，设置数据 |
||||
|
if (id) { |
||||
|
formLoading.value = true |
||||
|
try { |
||||
|
formData.value = await FenceAlarmApi.getFenceAlarm(id) |
||||
|
} finally { |
||||
|
formLoading.value = false |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
defineExpose({ open }) // 提供 open 方法，用于打开弹窗 |
||||
|
|
||||
|
/** 提交表单 */ |
||||
|
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调 |
||||
|
const submitForm = async () => { |
||||
|
// 校验表单 |
||||
|
await formRef.value.validate() |
||||
|
// 提交请求 |
||||
|
formLoading.value = true |
||||
|
try { |
||||
|
const data = formData.value as unknown as FenceAlarm |
||||
|
if (formType.value === 'create') { |
||||
|
await FenceAlarmApi.createFenceAlarm(data) |
||||
|
message.success(t('common.createSuccess')) |
||||
|
} else { |
||||
|
await FenceAlarmApi.updateFenceAlarm(data) |
||||
|
message.success(t('common.updateSuccess')) |
||||
|
} |
||||
|
dialogVisible.value = false |
||||
|
// 发送操作成功的事件 |
||||
|
emit('success') |
||||
|
} finally { |
||||
|
formLoading.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** 重置表单 */ |
||||
|
const resetForm = () => { |
||||
|
formData.value = { |
||||
|
id: undefined, |
||||
|
detectorId: undefined, |
||||
|
fenceId: undefined, |
||||
|
type: undefined, |
||||
|
picX: undefined, |
||||
|
picY: undefined, |
||||
|
distance: undefined, |
||||
|
maxDistance: undefined, |
||||
|
tAlarmStart: undefined, |
||||
|
tAlarmEnd: undefined, |
||||
|
status: undefined, |
||||
|
remark: undefined |
||||
|
} |
||||
|
formRef.value?.resetFields() |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,337 @@ |
|||||
|
<template> |
||||
|
<ContentWrap> |
||||
|
<!-- 搜索工作栏 --> |
||||
|
<el-form |
||||
|
class="-mb-15px" |
||||
|
:model="queryParams" |
||||
|
ref="queryFormRef" |
||||
|
:inline="true" |
||||
|
label-width="120px" |
||||
|
> |
||||
|
<el-form-item label="持有人" prop="detectorId"> |
||||
|
<el-select |
||||
|
v-model="queryParams.detectorId" |
||||
|
placeholder="请选择持有人" |
||||
|
clearable |
||||
|
@keyup.enter="handleQuery" |
||||
|
class="!w-240px" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in handDetectorStore.getHandDetectorList" |
||||
|
:key="item.id" |
||||
|
:label="item.name" |
||||
|
:value="item.id" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="围栏" prop="fenceId"> |
||||
|
<el-select |
||||
|
v-model="queryParams.fenceId" |
||||
|
placeholder="请选择围栏" |
||||
|
clearable |
||||
|
@keyup.enter="handleQuery" |
||||
|
class="!w-240px" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in handDetectorStore.getFences" |
||||
|
:key="item.id" |
||||
|
:label="item.name" |
||||
|
:value="item.id" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="报警类型" prop="type"> |
||||
|
<el-select |
||||
|
v-model="queryParams.type" |
||||
|
placeholder="请选择报警类型" |
||||
|
clearable |
||||
|
class="!w-240px" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in handDetectorStore.getAlarmTypes" |
||||
|
:key="item.id" |
||||
|
:label="item.name" |
||||
|
:value="item.id" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="开始时间" prop="tAlarmStart"> |
||||
|
<el-date-picker |
||||
|
v-model="queryParams.tAlarmStart" |
||||
|
value-format="YYYY-MM-DD" |
||||
|
type="date" |
||||
|
placeholder="选择开始时间" |
||||
|
clearable |
||||
|
class="!w-240px" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="结束时间" prop="tAlarmEnd"> |
||||
|
<el-date-picker |
||||
|
v-model="queryParams.tAlarmEnd" |
||||
|
value-format="YYYY-MM-DD" |
||||
|
type="date" |
||||
|
placeholder="选择结束时间" |
||||
|
clearable |
||||
|
class="!w-240px" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="状态" prop="status"> |
||||
|
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-240px"> |
||||
|
<el-option |
||||
|
v-for="item in getIntDictOptions(DICT_TYPE.HAND_DETECTOR_HANDLE_STATUS)" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button> |
||||
|
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
plain |
||||
|
@click="openForm('create')" |
||||
|
v-hasPermi="['gas:fence-alarm:create']" |
||||
|
> |
||||
|
<Icon icon="ep:plus" class="mr-5px" /> 新增 |
||||
|
</el-button> |
||||
|
<el-button |
||||
|
type="success" |
||||
|
plain |
||||
|
@click="handleExport" |
||||
|
:loading="exportLoading" |
||||
|
v-hasPermi="['gas:fence-alarm:export']" |
||||
|
> |
||||
|
<Icon icon="ep:download" class="mr-5px" /> 导出 |
||||
|
</el-button> |
||||
|
<el-button |
||||
|
type="danger" |
||||
|
plain |
||||
|
:disabled="isEmpty(checkedIds)" |
||||
|
@click="handleDeleteBatch" |
||||
|
v-hasPermi="['gas:fence-alarm:delete']" |
||||
|
> |
||||
|
<Icon icon="ep:delete" class="mr-5px" /> 批量删除 |
||||
|
</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</ContentWrap> |
||||
|
|
||||
|
<!-- 列表 --> |
||||
|
<ContentWrap> |
||||
|
<el-table |
||||
|
row-key="id" |
||||
|
v-loading="loading" |
||||
|
:data="list" |
||||
|
:stripe="true" |
||||
|
:show-overflow-tooltip="true" |
||||
|
@selection-change="handleRowCheckboxChange" |
||||
|
> |
||||
|
<el-table-column type="selection" width="55" /> |
||||
|
<el-table-column label="持有人" align="center" prop="detectorId"> |
||||
|
<template #default="scope"> |
||||
|
{{ |
||||
|
handDetectorStore.getHandDetectorList.find((item) => item.id === scope.row.detectorId) |
||||
|
?.name |
||||
|
}} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="围栏" align="center" prop="fenceId"> |
||||
|
<template #default="scope"> |
||||
|
{{ handDetectorStore.getFences.find((item) => item.id === scope.row.fenceId)?.name }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="报警类型" align="center" prop="type"> |
||||
|
<template #default="scope"> |
||||
|
{{ handDetectorStore.getAlarmTypes.find((item) => item.id === scope.row.type)?.name }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="超出围栏米数" align="center" prop="distance" /> |
||||
|
<el-table-column label="最远超出米数" align="center" prop="maxDistance" /> |
||||
|
<el-table-column |
||||
|
label="开始时间" |
||||
|
align="center" |
||||
|
prop="tAlarmStart" |
||||
|
:formatter="dateFormatter" |
||||
|
width="180px" |
||||
|
/> |
||||
|
<el-table-column |
||||
|
label="结束时间" |
||||
|
align="center" |
||||
|
prop="tAlarmEnd" |
||||
|
:formatter="dateFormatter" |
||||
|
width="180px" |
||||
|
/> |
||||
|
<el-table-column label="状态" align="center" prop="status"> |
||||
|
<template #default="scope"> |
||||
|
<DictTag :type="DICT_TYPE.HAND_DETECTOR_HANDLE_STATUS" :value="scope.row.status" /> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="备注" align="center" prop="remark" /> |
||||
|
<el-table-column |
||||
|
label="创建时间" |
||||
|
align="center" |
||||
|
prop="createTime" |
||||
|
:formatter="dateFormatter" |
||||
|
width="180px" |
||||
|
/> |
||||
|
<el-table-column label="操作" align="center" min-width="120px"> |
||||
|
<template #default="scope"> |
||||
|
<el-button |
||||
|
link |
||||
|
type="primary" |
||||
|
@click="openForm('update', scope.row.id)" |
||||
|
v-hasPermi="['gas:fence-alarm:update']" |
||||
|
> |
||||
|
编辑 |
||||
|
</el-button> |
||||
|
<el-button |
||||
|
link |
||||
|
type="danger" |
||||
|
@click="handleDelete(scope.row.id)" |
||||
|
v-hasPermi="['gas:fence-alarm:delete']" |
||||
|
> |
||||
|
删除 |
||||
|
</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<!-- 分页 --> |
||||
|
<Pagination |
||||
|
:total="total" |
||||
|
v-model:page="queryParams.pageNo" |
||||
|
v-model:limit="queryParams.pageSize" |
||||
|
@pagination="getList" |
||||
|
/> |
||||
|
</ContentWrap> |
||||
|
|
||||
|
<!-- 表单弹窗：添加/修改 --> |
||||
|
<FenceAlarmForm |
||||
|
ref="formRef" |
||||
|
@success="getList" |
||||
|
:handDetector="handDetectorStore.getHandDetectorList" |
||||
|
:fences="handDetectorStore.getFences" |
||||
|
:alarmTypes="handDetectorStore.getAlarmTypes" |
||||
|
/> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { isEmpty } from '@/utils/is' |
||||
|
import { dateFormatter } from '@/utils/formatTime' |
||||
|
import download from '@/utils/download' |
||||
|
import { FenceAlarmApi, FenceAlarm } from '@/api/gas/fencealarm' |
||||
|
import FenceAlarmForm from './FenceAlarmForm.vue' |
||||
|
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' |
||||
|
import { useHandDetectorStore } from '@/store/modules/handDetector' |
||||
|
|
||||
|
/** GAS手持探测器围栏报警 列表 */ |
||||
|
defineOptions({ name: 'FenceAlarm' }) |
||||
|
|
||||
|
const message = useMessage() // 消息弹窗 |
||||
|
const { t } = useI18n() // 国际化 |
||||
|
const handDetectorStore = useHandDetectorStore() // 手持探测器 store |
||||
|
const loading = ref(true) // 列表的加载中 |
||||
|
const list = ref<FenceAlarm[]>([]) // 列表的数据 |
||||
|
const total = ref(0) // 列表的总页数 |
||||
|
const queryParams = reactive({ |
||||
|
pageNo: 1, |
||||
|
pageSize: 10, |
||||
|
detectorId: undefined, |
||||
|
fenceId: undefined, |
||||
|
type: undefined, |
||||
|
picX: undefined, |
||||
|
picY: undefined, |
||||
|
distance: undefined, |
||||
|
maxDistance: undefined, |
||||
|
tAlarmStart: undefined, |
||||
|
tAlarmEnd: undefined, |
||||
|
status: undefined, |
||||
|
remark: undefined, |
||||
|
createTime: [] |
||||
|
}) |
||||
|
const queryFormRef = ref() // 搜索的表单 |
||||
|
const exportLoading = ref(false) // 导出的加载中 |
||||
|
|
||||
|
/** 查询列表 */ |
||||
|
const getList = async () => { |
||||
|
loading.value = true |
||||
|
try { |
||||
|
const data = await FenceAlarmApi.getFenceAlarmPage(queryParams) |
||||
|
list.value = data.list |
||||
|
total.value = data.total |
||||
|
} finally { |
||||
|
loading.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** 搜索按钮操作 */ |
||||
|
const handleQuery = () => { |
||||
|
queryParams.pageNo = 1 |
||||
|
getList() |
||||
|
} |
||||
|
|
||||
|
/** 重置按钮操作 */ |
||||
|
const resetQuery = () => { |
||||
|
queryFormRef.value.resetFields() |
||||
|
handleQuery() |
||||
|
} |
||||
|
|
||||
|
/** 添加/修改操作 */ |
||||
|
const formRef = ref() |
||||
|
const openForm = (type: string, id?: number) => { |
||||
|
formRef.value.open(type, id) |
||||
|
} |
||||
|
|
||||
|
/** 删除按钮操作 */ |
||||
|
const handleDelete = async (id: number) => { |
||||
|
try { |
||||
|
// 删除的二次确认 |
||||
|
await message.delConfirm() |
||||
|
// 发起删除 |
||||
|
await FenceAlarmApi.deleteFenceAlarm(id) |
||||
|
message.success(t('common.delSuccess')) |
||||
|
// 刷新列表 |
||||
|
await getList() |
||||
|
} catch {} |
||||
|
} |
||||
|
|
||||
|
/** 批量删除GAS手持探测器围栏报警 */ |
||||
|
const handleDeleteBatch = async () => { |
||||
|
try { |
||||
|
// 删除的二次确认 |
||||
|
await message.delConfirm() |
||||
|
await FenceAlarmApi.deleteFenceAlarmList(checkedIds.value) |
||||
|
message.success(t('common.delSuccess')) |
||||
|
await getList() |
||||
|
} catch {} |
||||
|
} |
||||
|
|
||||
|
const checkedIds = ref<number[]>([]) |
||||
|
const handleRowCheckboxChange = (records: FenceAlarm[]) => { |
||||
|
checkedIds.value = records.map((item) => item.id) |
||||
|
} |
||||
|
|
||||
|
/** 导出按钮操作 */ |
||||
|
const handleExport = async () => { |
||||
|
try { |
||||
|
// 导出的二次确认 |
||||
|
await message.exportConfirm() |
||||
|
// 发起导出 |
||||
|
exportLoading.value = true |
||||
|
const data = await FenceAlarmApi.exportFenceAlarm(queryParams) |
||||
|
download.excel(data, 'GAS手持探测器围栏报警.xls') |
||||
|
} catch { |
||||
|
} finally { |
||||
|
exportLoading.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** 初始化 **/ |
||||
|
onMounted(() => { |
||||
|
getList() |
||||
|
handDetectorStore.getAllHandDetector() |
||||
|
handDetectorStore.getAllFences() |
||||
|
handDetectorStore.getAllAlarmTypes() |
||||
|
}) |
||||
|
</script> |
||||
@ -0,0 +1,114 @@ |
|||||
|
<template> |
||||
|
<Dialog :title="dialogTitle" v-model="dialogVisible"> |
||||
|
<el-form |
||||
|
ref="formRef" |
||||
|
:model="formData" |
||||
|
:rules="formRules" |
||||
|
label-width="100px" |
||||
|
v-loading="formLoading" |
||||
|
> |
||||
|
<el-form-item label="名称" prop="name"> |
||||
|
<el-input v-model="formData.name" placeholder="请输入名称" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="化学式" prop="chemical"> |
||||
|
<el-input v-model="formData.chemical" placeholder="请输入化学式" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="单位" prop="unit"> |
||||
|
<el-input v-model="formData.unit" placeholder="请输入单位" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="排序" prop="sortOrder"> |
||||
|
<el-input v-model="formData.sortOrder" placeholder="请输入排序" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="备注" prop="remark"> |
||||
|
<el-input v-model="formData.remark" placeholder="请输入备注" /> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<template #footer> |
||||
|
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button> |
||||
|
<el-button @click="dialogVisible = false">取 消</el-button> |
||||
|
</template> |
||||
|
</Dialog> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
import { TypeApi, Type } from '@/api/gas/gastype' |
||||
|
|
||||
|
/** GAS气体 表单 */ |
||||
|
defineOptions({ name: 'TypeForm' }) |
||||
|
|
||||
|
const { t } = useI18n() // 国际化 |
||||
|
const message = useMessage() // 消息弹窗 |
||||
|
|
||||
|
const dialogVisible = ref(false) // 弹窗的是否展示 |
||||
|
const dialogTitle = ref('') // 弹窗的标题 |
||||
|
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 |
||||
|
const formType = ref('') // 表单的类型：create - 新增；update - 修改 |
||||
|
const formData = ref({ |
||||
|
id: undefined, |
||||
|
name: undefined, |
||||
|
chemical: undefined, |
||||
|
unit: undefined, |
||||
|
sortOrder: undefined, |
||||
|
remark: undefined |
||||
|
}) |
||||
|
const formRules = reactive({ |
||||
|
name: [{ required: true, message: '名称不能为空', trigger: 'blur' }], |
||||
|
chemical: [{ required: true, message: '化学式不能为空', trigger: 'blur' }], |
||||
|
unit: [{ required: true, message: '单位不能为空', trigger: 'blur' }] |
||||
|
}) |
||||
|
const formRef = ref() // 表单 Ref |
||||
|
|
||||
|
/** 打开弹窗 */ |
||||
|
const open = async (type: string, id?: number) => { |
||||
|
dialogVisible.value = true |
||||
|
dialogTitle.value = t('action.' + type) |
||||
|
formType.value = type |
||||
|
resetForm() |
||||
|
// 修改时，设置数据 |
||||
|
if (id) { |
||||
|
formLoading.value = true |
||||
|
try { |
||||
|
formData.value = await TypeApi.getType(id) |
||||
|
} finally { |
||||
|
formLoading.value = false |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
defineExpose({ open }) // 提供 open 方法，用于打开弹窗 |
||||
|
|
||||
|
/** 提交表单 */ |
||||
|
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调 |
||||
|
const submitForm = async () => { |
||||
|
// 校验表单 |
||||
|
await formRef.value.validate() |
||||
|
// 提交请求 |
||||
|
formLoading.value = true |
||||
|
try { |
||||
|
const data = formData.value as unknown as Type |
||||
|
if (formType.value === 'create') { |
||||
|
await TypeApi.createType(data) |
||||
|
message.success(t('common.createSuccess')) |
||||
|
} else { |
||||
|
await TypeApi.updateType(data) |
||||
|
message.success(t('common.updateSuccess')) |
||||
|
} |
||||
|
dialogVisible.value = false |
||||
|
// 发送操作成功的事件 |
||||
|
emit('success') |
||||
|
} finally { |
||||
|
formLoading.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** 重置表单 */ |
||||
|
const resetForm = () => { |
||||
|
formData.value = { |
||||
|
id: undefined, |
||||
|
name: undefined, |
||||
|
chemical: undefined, |
||||
|
unit: undefined, |
||||
|
sortOrder: undefined, |
||||
|
remark: undefined |
||||
|
} |
||||
|
formRef.value?.resetFields() |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,217 @@ |
|||||
|
<template> |
||||
|
<ContentWrap> |
||||
|
<!-- 搜索工作栏 --> |
||||
|
<el-form |
||||
|
class="-mb-15px" |
||||
|
:model="queryParams" |
||||
|
ref="queryFormRef" |
||||
|
:inline="true" |
||||
|
label-width="68px" |
||||
|
> |
||||
|
<el-form-item label="名称" prop="name"> |
||||
|
<el-input |
||||
|
v-model="queryParams.name" |
||||
|
placeholder="请输入名称" |
||||
|
clearable |
||||
|
@keyup.enter="handleQuery" |
||||
|
class="!w-240px" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button> |
||||
|
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
plain |
||||
|
@click="openForm('create')" |
||||
|
v-hasPermi="['gas:type:create']" |
||||
|
> |
||||
|
<Icon icon="ep:plus" class="mr-5px" /> 新增 |
||||
|
</el-button> |
||||
|
<el-button |
||||
|
type="success" |
||||
|
plain |
||||
|
@click="handleExport" |
||||
|
:loading="exportLoading" |
||||
|
v-hasPermi="['gas:type:export']" |
||||
|
> |
||||
|
<Icon icon="ep:download" class="mr-5px" /> 导出 |
||||
|
</el-button> |
||||
|
<el-button |
||||
|
type="danger" |
||||
|
plain |
||||
|
:disabled="isEmpty(checkedIds)" |
||||
|
@click="handleDeleteBatch" |
||||
|
v-hasPermi="['gas:type:delete']" |
||||
|
> |
||||
|
<Icon icon="ep:delete" class="mr-5px" /> 批量删除 |
||||
|
</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</ContentWrap> |
||||
|
|
||||
|
<!-- 列表 --> |
||||
|
<ContentWrap> |
||||
|
<el-table |
||||
|
row-key="id" |
||||
|
v-loading="loading" |
||||
|
:data="list" |
||||
|
:stripe="true" |
||||
|
:show-overflow-tooltip="true" |
||||
|
@selection-change="handleRowCheckboxChange" |
||||
|
> |
||||
|
<el-table-column type="selection" width="55" /> |
||||
|
<el-table-column label="名称" align="center" prop="name" /> |
||||
|
<el-table-column label="化学式" align="center" prop="chemical" /> |
||||
|
<el-table-column label="单位" align="center" prop="unit" /> |
||||
|
<el-table-column label="排序" align="center" prop="sortOrder" /> |
||||
|
<el-table-column label="备注" align="center" prop="remark" /> |
||||
|
<el-table-column |
||||
|
label="创建时间" |
||||
|
align="center" |
||||
|
prop="createTime" |
||||
|
:formatter="dateFormatter" |
||||
|
width="180px" |
||||
|
/> |
||||
|
<el-table-column label="操作" align="center" min-width="120px"> |
||||
|
<template #default="scope"> |
||||
|
<el-button |
||||
|
link |
||||
|
type="primary" |
||||
|
@click="openForm('update', scope.row.id)" |
||||
|
v-hasPermi="['gas:type:update']" |
||||
|
> |
||||
|
编辑 |
||||
|
</el-button> |
||||
|
<el-button |
||||
|
link |
||||
|
type="danger" |
||||
|
@click="handleDelete(scope.row.id)" |
||||
|
v-hasPermi="['gas:type:delete']" |
||||
|
> |
||||
|
删除 |
||||
|
</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<!-- 分页 --> |
||||
|
<Pagination |
||||
|
:total="total" |
||||
|
v-model:page="queryParams.pageNo" |
||||
|
v-model:limit="queryParams.pageSize" |
||||
|
@pagination="getList" |
||||
|
/> |
||||
|
</ContentWrap> |
||||
|
|
||||
|
<!-- 表单弹窗：添加/修改 --> |
||||
|
<TypeForm ref="formRef" @success="getList" /> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { isEmpty } from '@/utils/is' |
||||
|
import { dateFormatter } from '@/utils/formatTime' |
||||
|
import download from '@/utils/download' |
||||
|
import { TypeApi, Type } from '@/api/gas/gastype' |
||||
|
import TypeForm from './TypeForm.vue' |
||||
|
|
||||
|
/** GAS气体 列表 */ |
||||
|
defineOptions({ name: 'GasType' }) |
||||
|
|
||||
|
const message = useMessage() // 消息弹窗 |
||||
|
const { t } = useI18n() // 国际化 |
||||
|
|
||||
|
const loading = ref(true) // 列表的加载中 |
||||
|
const list = ref<Type[]>([]) // 列表的数据 |
||||
|
const total = ref(0) // 列表的总页数 |
||||
|
const queryParams = reactive({ |
||||
|
pageNo: 1, |
||||
|
pageSize: 10, |
||||
|
name: undefined, |
||||
|
chemical: undefined, |
||||
|
unit: undefined, |
||||
|
sortOrder: undefined, |
||||
|
remark: undefined, |
||||
|
createTime: [] |
||||
|
}) |
||||
|
const queryFormRef = ref() // 搜索的表单 |
||||
|
const exportLoading = ref(false) // 导出的加载中 |
||||
|
|
||||
|
/** 查询列表 */ |
||||
|
const getList = async () => { |
||||
|
loading.value = true |
||||
|
try { |
||||
|
const data = await TypeApi.getTypePage(queryParams) |
||||
|
list.value = data.list |
||||
|
total.value = data.total |
||||
|
} finally { |
||||
|
loading.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** 搜索按钮操作 */ |
||||
|
const handleQuery = () => { |
||||
|
queryParams.pageNo = 1 |
||||
|
getList() |
||||
|
} |
||||
|
|
||||
|
/** 重置按钮操作 */ |
||||
|
const resetQuery = () => { |
||||
|
queryFormRef.value.resetFields() |
||||
|
handleQuery() |
||||
|
} |
||||
|
|
||||
|
/** 添加/修改操作 */ |
||||
|
const formRef = ref() |
||||
|
const openForm = (type: string, id?: number) => { |
||||
|
formRef.value.open(type, id) |
||||
|
} |
||||
|
|
||||
|
/** 删除按钮操作 */ |
||||
|
const handleDelete = async (id: number) => { |
||||
|
try { |
||||
|
// 删除的二次确认 |
||||
|
await message.delConfirm() |
||||
|
// 发起删除 |
||||
|
await TypeApi.deleteType(id) |
||||
|
message.success(t('common.delSuccess')) |
||||
|
// 刷新列表 |
||||
|
await getList() |
||||
|
} catch {} |
||||
|
} |
||||
|
|
||||
|
/** 批量删除GAS气体 */ |
||||
|
const handleDeleteBatch = async () => { |
||||
|
try { |
||||
|
// 删除的二次确认 |
||||
|
await message.delConfirm() |
||||
|
await TypeApi.deleteTypeList(checkedIds.value) |
||||
|
message.success(t('common.delSuccess')) |
||||
|
await getList() |
||||
|
} catch {} |
||||
|
} |
||||
|
|
||||
|
const checkedIds = ref<number[]>([]) |
||||
|
const handleRowCheckboxChange = (records: Type[]) => { |
||||
|
checkedIds.value = records.map((item) => item.id) |
||||
|
} |
||||
|
|
||||
|
/** 导出按钮操作 */ |
||||
|
const handleExport = async () => { |
||||
|
try { |
||||
|
// 导出的二次确认 |
||||
|
await message.exportConfirm() |
||||
|
// 发起导出 |
||||
|
exportLoading.value = true |
||||
|
const data = await TypeApi.exportType(queryParams) |
||||
|
download.excel(data, 'GAS气体.xls') |
||||
|
} catch { |
||||
|
} finally { |
||||
|
exportLoading.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** 初始化 **/ |
||||
|
onMounted(() => { |
||||
|
getList() |
||||
|
}) |
||||
|
</script> |
||||
@ -0,0 +1,249 @@ |
|||||
|
<template> |
||||
|
<Dialog :title="dialogTitle" v-model="dialogVisible"> |
||||
|
<el-form |
||||
|
ref="formRef" |
||||
|
:model="formData" |
||||
|
:rules="formRules" |
||||
|
label-width="120px" |
||||
|
v-loading="formLoading" |
||||
|
> |
||||
|
<el-form-item label="持有人" prop="detectorId"> |
||||
|
<el-select |
||||
|
v-model="formData.detectorId" |
||||
|
placeholder="请选择持有人" |
||||
|
@change="handleDetectorIdChange" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in props.handDetector" |
||||
|
:key="item.id" |
||||
|
:label="item.name" |
||||
|
:value="item.id" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="设备编号" prop="sn"> |
||||
|
<el-input v-model="formData.sn" placeholder="请输入设备编号" :disabled="true" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="报警类型" prop="alarmType"> |
||||
|
<el-select |
||||
|
v-model="formData.alarmType" |
||||
|
@change="handleAlarmTypeChange" |
||||
|
placeholder="请选择报警类型" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in props.alarmTypes" |
||||
|
:key="item.id" |
||||
|
:label="item.name" |
||||
|
:value="item.id" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="警报方式/级别" prop="alarmLevel"> |
||||
|
<el-select v-model="formData.alarmLevel" placeholder="请选择警报方式/级别" :disabled="true"> |
||||
|
<el-option |
||||
|
v-for="item in getIntDictOptions(DICT_TYPE.HAND_DETECTOR_ALARM_LEVEL)" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="气体类型" prop="gasType"> |
||||
|
<el-select |
||||
|
v-model="formData.gasType" |
||||
|
placeholder="请选择气体类型" |
||||
|
@change="handleGasTypeChange" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in props.gasTypes" |
||||
|
:key="item.id" |
||||
|
:label="item.name" |
||||
|
:value="item.id" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="单位" prop="unit"> |
||||
|
<el-input v-model="formData.unit" placeholder="请输入单位" :disabled="true" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="首报值" prop="vAlarmFirst"> |
||||
|
<el-input-number v-model="formData.vAlarmFirst" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="最值" prop="vAlarmMaximum"> |
||||
|
<el-input-number v-model="formData.vAlarmMaximum" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="开始时间" prop="tAlarmStart"> |
||||
|
<el-date-picker |
||||
|
v-model="formData.tAlarmStart" |
||||
|
type="date" |
||||
|
value-format="x" |
||||
|
placeholder="选择开始时间" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="结束时间" prop="tAlarmEnd"> |
||||
|
<el-date-picker |
||||
|
v-model="formData.tAlarmEnd" |
||||
|
type="date" |
||||
|
value-format="x" |
||||
|
placeholder="选择结束时间" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="状态" prop="status"> |
||||
|
<el-radio-group v-model="formData.status"> |
||||
|
<el-radio |
||||
|
v-for="item in getIntDictOptions(DICT_TYPE.HAND_DETECTOR_HANDLE_STATUS)" |
||||
|
:key="item.value" |
||||
|
:value="item.value" |
||||
|
> |
||||
|
{{ item.label }} |
||||
|
</el-radio> |
||||
|
</el-radio-group> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="备注" prop="remark"> |
||||
|
<el-input v-model="formData.remark" placeholder="请输入备注" /> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<template #footer> |
||||
|
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button> |
||||
|
<el-button @click="dialogVisible = false">取 消</el-button> |
||||
|
</template> |
||||
|
</Dialog> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
import { HandAlarmApi, HandAlarm } from '@/api/gas/handalarm' |
||||
|
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict' |
||||
|
import { HandDetector } from '@/api/gas/handdetector' |
||||
|
import { AlarmType } from '@/api/gas/alarmtype' |
||||
|
import { Type } from '@/api/gas/gastype' |
||||
|
/** GAS手持探测器警报 表单 */ |
||||
|
defineOptions({ name: 'HandAlarmForm' }) |
||||
|
|
||||
|
const { t } = useI18n() // 国际化 |
||||
|
const message = useMessage() // 消息弹窗 |
||||
|
|
||||
|
const dialogVisible = ref(false) // 弹窗的是否展示 |
||||
|
const dialogTitle = ref('') // 弹窗的标题 |
||||
|
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 |
||||
|
const formType = ref('') // 表单的类型：create - 新增；update - 修改 |
||||
|
const props = defineProps({ |
||||
|
handDetector: { |
||||
|
type: Array as PropType<HandDetector[]>, |
||||
|
required: true |
||||
|
}, |
||||
|
alarmTypes: { |
||||
|
type: Array as PropType<AlarmType[]>, |
||||
|
required: true |
||||
|
}, |
||||
|
gasTypes: { |
||||
|
type: Array as PropType<Type[]>, |
||||
|
required: true |
||||
|
} |
||||
|
}) |
||||
|
const formData = ref({ |
||||
|
id: undefined, |
||||
|
detectorId: undefined, |
||||
|
sn: '', |
||||
|
alarmType: undefined, |
||||
|
alarmLevel: 0, |
||||
|
gasType: '', |
||||
|
unit: '', |
||||
|
location: undefined, |
||||
|
picX: undefined, |
||||
|
picY: undefined, |
||||
|
vAlarmFirst: undefined, |
||||
|
vAlarmMaximum: undefined, |
||||
|
tAlarmStart: undefined, |
||||
|
tAlarmEnd: undefined, |
||||
|
status: 0, |
||||
|
remark: undefined |
||||
|
}) |
||||
|
const formRules = reactive({ |
||||
|
detectorId: [{ required: true, message: '持有人不能为空', trigger: 'change' }], |
||||
|
alarmType: [{ required: true, message: '报警类型不能为空', trigger: 'change' }], |
||||
|
gasType: [{ required: true, message: '气体类型不能为空', trigger: 'change' }], |
||||
|
unit: [{ required: true, message: '单位不能为空', trigger: 'blur' }], |
||||
|
remark: [{ required: true, message: '备注不能为空', trigger: 'blur' }] |
||||
|
}) |
||||
|
const formRef = ref() // 表单 Ref |
||||
|
|
||||
|
/** 打开弹窗 */ |
||||
|
const open = async (type: string, id?: number) => { |
||||
|
dialogVisible.value = true |
||||
|
dialogTitle.value = t('action.' + type) |
||||
|
formType.value = type |
||||
|
resetForm() |
||||
|
// 修改时，设置数据 |
||||
|
if (id) { |
||||
|
formLoading.value = true |
||||
|
try { |
||||
|
formData.value = await HandAlarmApi.getHandAlarm(id) |
||||
|
} finally { |
||||
|
formLoading.value = false |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
defineExpose({ open }) // 提供 open 方法，用于打开弹窗 |
||||
|
|
||||
|
/** 提交表单 */ |
||||
|
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调 |
||||
|
const submitForm = async () => { |
||||
|
// 校验表单 |
||||
|
await formRef.value.validate() |
||||
|
// 提交请求 |
||||
|
formLoading.value = true |
||||
|
try { |
||||
|
const data = formData.value as unknown as HandAlarm |
||||
|
if (formType.value === 'create') { |
||||
|
await HandAlarmApi.createHandAlarm(data) |
||||
|
message.success(t('common.createSuccess')) |
||||
|
} else { |
||||
|
await HandAlarmApi.updateHandAlarm(data) |
||||
|
message.success(t('common.updateSuccess')) |
||||
|
} |
||||
|
dialogVisible.value = false |
||||
|
// 发送操作成功的事件 |
||||
|
emit('success') |
||||
|
} finally { |
||||
|
formLoading.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** 重置表单 */ |
||||
|
const resetForm = () => { |
||||
|
formData.value = { |
||||
|
id: undefined, |
||||
|
detectorId: undefined, |
||||
|
sn: '', |
||||
|
alarmType: undefined, |
||||
|
alarmLevel: 0, |
||||
|
gasType: '', |
||||
|
unit: '', |
||||
|
location: undefined, |
||||
|
picX: undefined, |
||||
|
picY: undefined, |
||||
|
vAlarmFirst: undefined, |
||||
|
vAlarmMaximum: undefined, |
||||
|
tAlarmStart: undefined, |
||||
|
tAlarmEnd: undefined, |
||||
|
status: 0, |
||||
|
remark: undefined |
||||
|
} |
||||
|
formRef.value?.resetFields() |
||||
|
} |
||||
|
|
||||
|
/** 气体类型改变 */ |
||||
|
const handleGasTypeChange = (value: number) => { |
||||
|
formData.value.unit = props.gasTypes.find((item) => item.id === value)?.unit || '' |
||||
|
} |
||||
|
|
||||
|
/** 手持表id改变 */ |
||||
|
const handleDetectorIdChange = (value: number) => { |
||||
|
formData.value.sn = props.handDetector.find((item) => item.id === value)?.sn || '' |
||||
|
} |
||||
|
|
||||
|
/** 报警类型改变 */ |
||||
|
const handleAlarmTypeChange = (value: number) => { |
||||
|
formData.value.alarmLevel = props.alarmTypes.find((item) => item.id === value)?.level || 0 |
||||
|
formData.value.gasType = props.gasTypes.find((item) => item.id === value)?.name || '' |
||||
|
formData.value.unit = props.gasTypes.find((item) => item.id === value)?.unit || '' |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,333 @@ |
|||||
|
<template> |
||||
|
<ContentWrap> |
||||
|
<!-- 搜索工作栏 --> |
||||
|
<el-form |
||||
|
class="-mb-15px" |
||||
|
:model="queryParams" |
||||
|
ref="queryFormRef" |
||||
|
:inline="true" |
||||
|
label-width="120px" |
||||
|
> |
||||
|
<el-form-item label="持有人" prop="detectorId"> |
||||
|
<el-select |
||||
|
v-model="queryParams.detectorId" |
||||
|
placeholder="请选择持有人" |
||||
|
clearable |
||||
|
filterable |
||||
|
@keyup.enter="handleQuery" |
||||
|
class="!w-240px" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in handDetectorStore.getHandDetectorList" |
||||
|
:key="item.id" |
||||
|
:label="item.name" |
||||
|
:value="item.id" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="设备编号" prop="sn"> |
||||
|
<el-input |
||||
|
v-model="queryParams.sn" |
||||
|
placeholder="请输入设备编号" |
||||
|
clearable |
||||
|
@keyup.enter="handleQuery" |
||||
|
class="!w-240px" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="报警类型" prop="alarmType"> |
||||
|
<el-select |
||||
|
v-model="queryParams.alarmType" |
||||
|
placeholder="请选择报警类型" |
||||
|
clearable |
||||
|
class="!w-240px" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in handDetectorStore.getAlarmTypes" |
||||
|
:key="item.id" |
||||
|
:label="item.name" |
||||
|
:value="item.id" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="开始时间" prop="tAlarmStart"> |
||||
|
<el-date-picker |
||||
|
v-model="queryParams.tAlarmStart" |
||||
|
value-format="YYYY-MM-DD" |
||||
|
type="date" |
||||
|
placeholder="选择开始时间" |
||||
|
clearable |
||||
|
class="!w-240px" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="结束时间" prop="tAlarmEnd"> |
||||
|
<el-date-picker |
||||
|
v-model="queryParams.tAlarmEnd" |
||||
|
value-format="YYYY-MM-DD" |
||||
|
type="date" |
||||
|
placeholder="选择结束时间" |
||||
|
clearable |
||||
|
class="!w-240px" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="状态" prop="status"> |
||||
|
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-240px"> |
||||
|
<el-option |
||||
|
v-for="item in getIntDictOptions(DICT_TYPE.HAND_DETECTOR_HANDLE_STATUS)" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button> |
||||
|
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
plain |
||||
|
@click="openForm('create')" |
||||
|
v-hasPermi="['gas:hand-alarm:create']" |
||||
|
> |
||||
|
<Icon icon="ep:plus" class="mr-5px" /> 新增 |
||||
|
</el-button> |
||||
|
<el-button |
||||
|
type="success" |
||||
|
plain |
||||
|
@click="handleExport" |
||||
|
:loading="exportLoading" |
||||
|
v-hasPermi="['gas:hand-alarm:export']" |
||||
|
> |
||||
|
<Icon icon="ep:download" class="mr-5px" /> 导出 |
||||
|
</el-button> |
||||
|
<el-button |
||||
|
type="danger" |
||||
|
plain |
||||
|
:disabled="isEmpty(checkedIds)" |
||||
|
@click="handleDeleteBatch" |
||||
|
v-hasPermi="['gas:hand-alarm:delete']" |
||||
|
> |
||||
|
<Icon icon="ep:delete" class="mr-5px" /> 批量删除 |
||||
|
</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</ContentWrap> |
||||
|
|
||||
|
<!-- 列表 --> |
||||
|
<ContentWrap> |
||||
|
<el-table |
||||
|
row-key="id" |
||||
|
v-loading="loading" |
||||
|
:data="list" |
||||
|
:stripe="true" |
||||
|
:show-overflow-tooltip="true" |
||||
|
@selection-change="handleRowCheckboxChange" |
||||
|
> |
||||
|
<el-table-column type="selection" width="55" /> |
||||
|
<el-table-column label="持有人" align="center" prop="detectorId"> |
||||
|
<template #default="scope"> |
||||
|
{{ |
||||
|
handDetectorStore.getHandDetectorList.find((item) => item.id === scope.row.detectorId) |
||||
|
?.name |
||||
|
}} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="设备编号" align="center" prop="sn" /> |
||||
|
<el-table-column label="报警类型" align="center" prop="alarmType"> |
||||
|
<template #default="scope"> |
||||
|
{{ |
||||
|
handDetectorStore.getAlarmTypes.find((item) => item.id === scope.row.alarmType)?.name |
||||
|
}} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="气体类型" align="center" prop="gasType"> |
||||
|
<template #default="scope"> |
||||
|
{{ handDetectorStore.getGasTypes.find((item) => item.id === scope.row.gasType)?.name }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="首报值" align="center" prop="vAlarmFirst" /> |
||||
|
<el-table-column label="最值" align="center" prop="vAlarmMaximum" /> |
||||
|
<el-table-column |
||||
|
label="开始时间" |
||||
|
align="center" |
||||
|
prop="tAlarmStart" |
||||
|
:formatter="dateFormatter" |
||||
|
width="180px" |
||||
|
/> |
||||
|
<el-table-column |
||||
|
label="结束时间" |
||||
|
align="center" |
||||
|
prop="tAlarmEnd" |
||||
|
:formatter="dateFormatter" |
||||
|
width="180px" |
||||
|
/> |
||||
|
<el-table-column label="状态" align="center" prop="status" /> |
||||
|
<el-table-column label="备注" align="center" prop="remark" /> |
||||
|
<el-table-column |
||||
|
label="创建时间" |
||||
|
align="center" |
||||
|
prop="createTime" |
||||
|
:formatter="dateFormatter" |
||||
|
width="180px" |
||||
|
/> |
||||
|
<el-table-column label="操作" align="center" min-width="120px"> |
||||
|
<template #default="scope"> |
||||
|
<el-button |
||||
|
link |
||||
|
type="primary" |
||||
|
@click="openForm('update', scope.row.id)" |
||||
|
v-hasPermi="['gas:hand-alarm:update']" |
||||
|
> |
||||
|
编辑 |
||||
|
</el-button> |
||||
|
<el-button |
||||
|
link |
||||
|
type="danger" |
||||
|
@click="handleDelete(scope.row.id)" |
||||
|
v-hasPermi="['gas:hand-alarm:delete']" |
||||
|
> |
||||
|
删除 |
||||
|
</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<!-- 分页 --> |
||||
|
<Pagination |
||||
|
:total="total" |
||||
|
v-model:page="queryParams.pageNo" |
||||
|
v-model:limit="queryParams.pageSize" |
||||
|
@pagination="getList" |
||||
|
/> |
||||
|
</ContentWrap> |
||||
|
|
||||
|
<!-- 表单弹窗：添加/修改 --> |
||||
|
<HandAlarmForm |
||||
|
ref="formRef" |
||||
|
@success="getList" |
||||
|
:handDetector="handDetectorStore.getHandDetectorList" |
||||
|
:gasTypes="handDetectorStore.getGasTypes" |
||||
|
:alarmTypes="handDetectorStore.getAlarmTypes" |
||||
|
/> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { isEmpty } from '@/utils/is' |
||||
|
import { dateFormatter } from '@/utils/formatTime' |
||||
|
import download from '@/utils/download' |
||||
|
import { HandAlarmApi, HandAlarm } from '@/api/gas/handalarm' |
||||
|
import HandAlarmForm from './HandAlarmForm.vue' |
||||
|
import { useHandDetectorStore } from '@/store/modules/handDetector' |
||||
|
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' |
||||
|
/** 手持探测器警报 列表 */ |
||||
|
defineOptions({ name: 'HandAlarm' }) |
||||
|
|
||||
|
const message = useMessage() // 消息弹窗 |
||||
|
const { t } = useI18n() // 国际化 |
||||
|
const handDetectorStore = useHandDetectorStore() |
||||
|
const loading = ref(true) // 列表的加载中 |
||||
|
const list = ref<HandAlarm[]>([]) // 列表的数据 |
||||
|
const total = ref(0) // 列表的总页数 |
||||
|
const queryParams = reactive({ |
||||
|
pageNo: 1, |
||||
|
pageSize: 10, |
||||
|
detectorId: undefined, |
||||
|
sn: undefined, |
||||
|
alarmType: undefined, |
||||
|
alarmLevel: undefined, |
||||
|
gasType: undefined, |
||||
|
unit: undefined, |
||||
|
location: undefined, |
||||
|
picX: undefined, |
||||
|
picY: undefined, |
||||
|
vAlarmFirst: undefined, |
||||
|
vAlarmMaximum: undefined, |
||||
|
tAlarmStart: undefined, |
||||
|
tAlarmEnd: undefined, |
||||
|
status: undefined, |
||||
|
remark: undefined, |
||||
|
createTime: [] |
||||
|
}) |
||||
|
const queryFormRef = ref() // 搜索的表单 |
||||
|
const exportLoading = ref(false) // 导出的加载中 |
||||
|
|
||||
|
/** 查询列表 */ |
||||
|
const getList = async () => { |
||||
|
loading.value = true |
||||
|
try { |
||||
|
const data = await HandAlarmApi.getHandAlarmPage(queryParams) |
||||
|
list.value = data.list |
||||
|
total.value = data.total |
||||
|
} finally { |
||||
|
loading.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** 搜索按钮操作 */ |
||||
|
const handleQuery = () => { |
||||
|
queryParams.pageNo = 1 |
||||
|
getList() |
||||
|
} |
||||
|
|
||||
|
/** 重置按钮操作 */ |
||||
|
const resetQuery = () => { |
||||
|
queryFormRef.value.resetFields() |
||||
|
handleQuery() |
||||
|
} |
||||
|
|
||||
|
/** 添加/修改操作 */ |
||||
|
const formRef = ref() |
||||
|
const openForm = (type: string, id?: number) => { |
||||
|
formRef.value.open(type, id) |
||||
|
} |
||||
|
|
||||
|
/** 删除按钮操作 */ |
||||
|
const handleDelete = async (id: number) => { |
||||
|
try { |
||||
|
// 删除的二次确认 |
||||
|
await message.delConfirm() |
||||
|
// 发起删除 |
||||
|
await HandAlarmApi.deleteHandAlarm(id) |
||||
|
message.success(t('common.delSuccess')) |
||||
|
// 刷新列表 |
||||
|
await getList() |
||||
|
} catch {} |
||||
|
} |
||||
|
|
||||
|
/** 批量删除GAS手持探测器警报 */ |
||||
|
const handleDeleteBatch = async () => { |
||||
|
try { |
||||
|
// 删除的二次确认 |
||||
|
await message.delConfirm() |
||||
|
await HandAlarmApi.deleteHandAlarmList(checkedIds.value) |
||||
|
message.success(t('common.delSuccess')) |
||||
|
await getList() |
||||
|
} catch {} |
||||
|
} |
||||
|
|
||||
|
const checkedIds = ref<number[]>([]) |
||||
|
const handleRowCheckboxChange = (records: HandAlarm[]) => { |
||||
|
checkedIds.value = records.map((item) => item.id) |
||||
|
} |
||||
|
|
||||
|
/** 导出按钮操作 */ |
||||
|
const handleExport = async () => { |
||||
|
try { |
||||
|
// 导出的二次确认 |
||||
|
await message.exportConfirm() |
||||
|
// 发起导出 |
||||
|
exportLoading.value = true |
||||
|
const data = await HandAlarmApi.exportHandAlarm(queryParams) |
||||
|
download.excel(data, '手持探测器警报.xls') |
||||
|
} catch { |
||||
|
} finally { |
||||
|
exportLoading.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** 初始化 **/ |
||||
|
onMounted(() => { |
||||
|
getList() |
||||
|
handDetectorStore.getAllHandDetector() |
||||
|
handDetectorStore.getAllAlarmTypes() |
||||
|
handDetectorStore.getAllGasTypes() |
||||
|
}) |
||||
|
</script> |
||||
@ -0,0 +1,217 @@ |
|||||
|
<template> |
||||
|
<Dialog :title="dialogTitle" v-model="dialogVisible"> |
||||
|
<el-form |
||||
|
ref="formRef" |
||||
|
:model="formData" |
||||
|
:rules="formRules" |
||||
|
label-width="100px" |
||||
|
v-loading="formLoading" |
||||
|
> |
||||
|
<el-form-item label="SN" prop="sn"> |
||||
|
<el-input v-model="formData.sn" placeholder="请输入SN" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="持有人" prop="name"> |
||||
|
<el-input v-model="formData.name" placeholder="请输入持有人" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="应用围栏" prop="fenceIdsArray"> |
||||
|
<el-select v-model="formData.fenceIdsArray" placeholder="请选择应用围栏" multiple> |
||||
|
<el-option |
||||
|
v-for="fence in fences" |
||||
|
:key="fence.id" |
||||
|
:label="fence.name" |
||||
|
:value="fence.id" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="气体类型" prop="gasTypeId"> |
||||
|
<el-select |
||||
|
v-model="formData.gasTypeId" |
||||
|
placeholder="请选择气体类型" |
||||
|
@change="handleGasTypeChange" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="gasType in gasTypes" |
||||
|
:key="gasType.id" |
||||
|
:label="gasType.name" |
||||
|
:value="gasType.id" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="气体化学式" prop="gasChemical"> |
||||
|
<el-input v-model="formData.gasChemical" placeholder="请输入气体化学式" :disabled="true" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="单位" prop="unit"> |
||||
|
<el-input v-model="formData.unit" placeholder="请输入单位" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="最小值" prop="min"> |
||||
|
<el-input v-model="formData.min" placeholder="请输入最小值" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="最大值" prop="max"> |
||||
|
<el-input v-model="formData.max" placeholder="请输入最大值" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="设备型号" prop="model"> |
||||
|
<el-input v-model="formData.model" placeholder="请输入设备型号" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="生产厂家" prop="manufacturer"> |
||||
|
<el-input v-model="formData.manufacturer" placeholder="请输入生产厂家" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="低电量报警" prop="batteryAlarmValue"> |
||||
|
<el-input-number |
||||
|
:controls="false" |
||||
|
style="width: 100%" |
||||
|
v-model="formData.batteryAlarmValue" |
||||
|
placeholder="请输入低电量报警报警值" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="启用状态" prop="enableStatus"> |
||||
|
<el-radio-group v-model="formData.enableStatus"> |
||||
|
<el-radio-button |
||||
|
v-for="dict in getIntDictOptions(DICT_TYPE.HAND_DETECTOR_ENABLE_STATUS)" |
||||
|
:key="dict.value" |
||||
|
:value="dict.value" |
||||
|
> |
||||
|
{{ dict.label }} |
||||
|
</el-radio-button> |
||||
|
</el-radio-group> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="数值除数" prop="accuracy"> |
||||
|
<el-input-number v-model="formData.accuracy" placeholder="请输入数值除数" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="排序" prop="sortOrder"> |
||||
|
<el-input v-model="formData.sortOrder" placeholder="请输入排序" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="备注" prop="remark"> |
||||
|
<el-input v-model="formData.remark" placeholder="请输入备注" /> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<template #footer> |
||||
|
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button> |
||||
|
<el-button @click="dialogVisible = false">取 消</el-button> |
||||
|
</template> |
||||
|
</Dialog> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
import { HandDetectorApi, HandDetector } from '@/api/gas/handdetector' |
||||
|
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict' |
||||
|
import { Fence } from '@/api/gas/fence' |
||||
|
import { Type } from '@/api/gas/gastype' |
||||
|
/** GAS手持探测器 表单 */ |
||||
|
defineOptions({ name: 'HandDetectorForm' }) |
||||
|
|
||||
|
const { t } = useI18n() // 国际化 |
||||
|
const message = useMessage() // 消息弹窗 |
||||
|
|
||||
|
const dialogVisible = ref(false) // 弹窗的是否展示 |
||||
|
const dialogTitle = ref('') // 弹窗的标题 |
||||
|
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 |
||||
|
const formType = ref('') // 表单的类型：create - 新增；update - 修改 |
||||
|
const props = defineProps({ |
||||
|
fences: { |
||||
|
type: Array as PropType<Fence[]>, |
||||
|
required: true |
||||
|
}, |
||||
|
gasTypes: { |
||||
|
type: Array as PropType<Type[]>, |
||||
|
required: true |
||||
|
} |
||||
|
}) |
||||
|
const formData = ref({ |
||||
|
id: undefined, |
||||
|
sn: undefined, |
||||
|
name: undefined, |
||||
|
fenceIds: '', |
||||
|
fenceIdsArray: [], |
||||
|
gasTypeId: undefined, |
||||
|
gasChemical: '', |
||||
|
min: 0, |
||||
|
max: undefined, |
||||
|
unit: '', |
||||
|
model: undefined, |
||||
|
manufacturer: undefined, |
||||
|
batteryAlarmValue: undefined, |
||||
|
enableStatus: 1, |
||||
|
accuracy: 1, |
||||
|
sortOrder: undefined, |
||||
|
remark: undefined |
||||
|
}) |
||||
|
const formRules = reactive({ |
||||
|
sn: [{ required: true, message: 'SN不能为空', trigger: 'blur' }], |
||||
|
name: [{ required: true, message: '持有人不能为空', trigger: 'blur' }], |
||||
|
gasTypeId: [{ required: true, message: '气体类型不能为空', trigger: 'blur' }], |
||||
|
enableStatus: [{ required: true, message: '启用状态不能为空', trigger: 'blur' }] |
||||
|
}) |
||||
|
const formRef = ref() // 表单 Ref |
||||
|
|
||||
|
/** 打开弹窗 */ |
||||
|
const open = async (type: string, id?: number) => { |
||||
|
dialogVisible.value = true |
||||
|
dialogTitle.value = t('action.' + type) |
||||
|
formType.value = type |
||||
|
resetForm() |
||||
|
// 修改时，设置数据 |
||||
|
if (id) { |
||||
|
formLoading.value = true |
||||
|
try { |
||||
|
formData.value = await HandDetectorApi.getHandDetector(id) |
||||
|
} finally { |
||||
|
formLoading.value = false |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
defineExpose({ open }) // 提供 open 方法，用于打开弹窗 |
||||
|
|
||||
|
/** 提交表单 */ |
||||
|
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调 |
||||
|
const submitForm = async () => { |
||||
|
// 校验表单 |
||||
|
await formRef.value.validate() |
||||
|
// 提交请求 |
||||
|
formLoading.value = true |
||||
|
try { |
||||
|
const data = formData.value as unknown as HandDetector |
||||
|
data.fenceIds = data.fenceIdsArray?.join(',') || '' |
||||
|
if (formType.value === 'create') { |
||||
|
await HandDetectorApi.createHandDetector(data) |
||||
|
message.success(t('common.createSuccess')) |
||||
|
} else { |
||||
|
await HandDetectorApi.updateHandDetector(data) |
||||
|
message.success(t('common.updateSuccess')) |
||||
|
} |
||||
|
dialogVisible.value = false |
||||
|
// 发送操作成功的事件 |
||||
|
emit('success') |
||||
|
} finally { |
||||
|
formLoading.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** 重置表单 */ |
||||
|
const resetForm = () => { |
||||
|
formData.value = { |
||||
|
id: undefined, |
||||
|
sn: undefined, |
||||
|
name: undefined, |
||||
|
fenceIds: '', |
||||
|
fenceIdsArray: [], |
||||
|
gasTypeId: undefined, |
||||
|
gasChemical: '', |
||||
|
min: 0, |
||||
|
max: undefined, |
||||
|
unit: '', |
||||
|
model: undefined, |
||||
|
manufacturer: undefined, |
||||
|
batteryAlarmValue: undefined, |
||||
|
enableStatus: 1, |
||||
|
accuracy: 1, |
||||
|
sortOrder: undefined, |
||||
|
remark: undefined |
||||
|
} |
||||
|
formRef.value?.resetFields() |
||||
|
} |
||||
|
|
||||
|
const handleGasTypeChange = (value: number) => { |
||||
|
formData.value.gasChemical = |
||||
|
props.gasTypes.find((gasType) => gasType.id === value)?.chemical || '' |
||||
|
formData.value.unit = props.gasTypes.find((gasType) => gasType.id === value)?.unit || '' |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,249 @@ |
|||||
|
<template> |
||||
|
<ContentWrap> |
||||
|
<!-- 搜索工作栏 --> |
||||
|
<el-form |
||||
|
class="-mb-15px" |
||||
|
:model="queryParams" |
||||
|
ref="queryFormRef" |
||||
|
:inline="true" |
||||
|
label-width="120px" |
||||
|
> |
||||
|
<el-form-item label="SN" prop="sn"> |
||||
|
<el-input |
||||
|
v-model="queryParams.sn" |
||||
|
placeholder="请输入SN" |
||||
|
clearable |
||||
|
@keyup.enter="handleQuery" |
||||
|
class="!w-240px" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="持有人" prop="name"> |
||||
|
<el-input |
||||
|
v-model="queryParams.name" |
||||
|
placeholder="请输入持有人" |
||||
|
clearable |
||||
|
@keyup.enter="handleQuery" |
||||
|
class="!w-240px" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button> |
||||
|
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
plain |
||||
|
@click="openForm('create')" |
||||
|
v-hasPermi="['gas:hand-detector:create']" |
||||
|
> |
||||
|
<Icon icon="ep:plus" class="mr-5px" /> 新增 |
||||
|
</el-button> |
||||
|
<el-button |
||||
|
type="success" |
||||
|
plain |
||||
|
@click="handleExport" |
||||
|
:loading="exportLoading" |
||||
|
v-hasPermi="['gas:hand-detector:export']" |
||||
|
> |
||||
|
<Icon icon="ep:download" class="mr-5px" /> 导出 |
||||
|
</el-button> |
||||
|
<el-button |
||||
|
type="danger" |
||||
|
plain |
||||
|
:disabled="isEmpty(checkedIds)" |
||||
|
@click="handleDeleteBatch" |
||||
|
v-hasPermi="['gas:hand-detector:delete']" |
||||
|
> |
||||
|
<Icon icon="ep:delete" class="mr-5px" /> 批量删除 |
||||
|
</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</ContentWrap> |
||||
|
|
||||
|
<!-- 列表 --> |
||||
|
<ContentWrap> |
||||
|
<el-table |
||||
|
row-key="id" |
||||
|
v-loading="loading" |
||||
|
:data="list" |
||||
|
:stripe="true" |
||||
|
:show-overflow-tooltip="true" |
||||
|
@selection-change="handleRowCheckboxChange" |
||||
|
> |
||||
|
<el-table-column type="selection" width="55" /> |
||||
|
<el-table-column label="SN" align="center" prop="sn" /> |
||||
|
<el-table-column label="持有人" align="center" prop="name" /> |
||||
|
<el-table-column label="应用围栏" align="center" prop="fenceIds"> |
||||
|
<template #default="scope"> |
||||
|
{{ |
||||
|
scope.row.fenceIdsArray && |
||||
|
scope.row.fenceIdsArray.length > 0 && |
||||
|
scope.row.fenceIdsArray |
||||
|
.map((item) => handDetectorStore.getFences.find((fence) => fence.id === item)?.name) |
||||
|
.join(',') |
||||
|
}} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="气体类型" align="center" prop="gasTypeId"> |
||||
|
<template #default="scope"> |
||||
|
{{ handDetectorStore.getGasTypes.find((item) => item.id === scope.row.gasTypeId)?.name }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="启用状态" align="center" prop="enableStatus"> |
||||
|
<template #default="scope"> |
||||
|
<DictTag :type="DICT_TYPE.HAND_DETECTOR_ENABLE_STATUS" :value="scope.row.enableStatus" /> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="备注" align="center" prop="remark" /> |
||||
|
<el-table-column label="操作" align="center" min-width="120px"> |
||||
|
<template #default="scope"> |
||||
|
<el-button |
||||
|
link |
||||
|
type="primary" |
||||
|
@click="openForm('update', scope.row.id)" |
||||
|
v-hasPermi="['gas:hand-detector:update']" |
||||
|
> |
||||
|
编辑 |
||||
|
</el-button> |
||||
|
<el-button |
||||
|
link |
||||
|
type="danger" |
||||
|
@click="handleDelete(scope.row.id)" |
||||
|
v-hasPermi="['gas:hand-detector:delete']" |
||||
|
> |
||||
|
删除 |
||||
|
</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<!-- 分页 --> |
||||
|
<Pagination |
||||
|
:total="total" |
||||
|
v-model:page="queryParams.pageNo" |
||||
|
v-model:limit="queryParams.pageSize" |
||||
|
@pagination="getList" |
||||
|
/> |
||||
|
</ContentWrap> |
||||
|
|
||||
|
<!-- 表单弹窗：添加/修改 --> |
||||
|
<HandDetectorForm ref="formRef" @success="getList" :fences="fences" :gasTypes="gasTypes" /> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { isEmpty } from '@/utils/is' |
||||
|
import download from '@/utils/download' |
||||
|
import { HandDetectorApi, HandDetector } from '@/api/gas/handdetector' |
||||
|
import HandDetectorForm from './HandDetectorForm.vue' |
||||
|
import { DICT_TYPE } from '@/utils/dict' |
||||
|
import { Fence } from '@/api/gas/fence' |
||||
|
import { Type } from '@/api/gas/gastype' |
||||
|
import { useHandDetectorStore } from '@/store/modules/handDetector' |
||||
|
/** GAS手持探测器 列表 */ |
||||
|
defineOptions({ name: 'HandDetector' }) |
||||
|
const handDetectorStore = useHandDetectorStore() |
||||
|
const message = useMessage() // 消息弹窗 |
||||
|
const { t } = useI18n() // 国际化 |
||||
|
|
||||
|
const loading = ref(true) // 列表的加载中 |
||||
|
const list = ref<HandDetector[]>([]) // 列表的数据 |
||||
|
const total = ref(0) // 列表的总页数 |
||||
|
const queryParams = reactive({ |
||||
|
pageNo: 1, |
||||
|
pageSize: 10, |
||||
|
sn: undefined, |
||||
|
name: undefined, |
||||
|
createTime: [] |
||||
|
}) |
||||
|
const queryFormRef = ref() // 搜索的表单 |
||||
|
const exportLoading = ref(false) // 导出的加载中 |
||||
|
const fences = ref<Fence[]>([]) |
||||
|
const gasTypes = ref<Type[]>([]) |
||||
|
/** 查询列表 */ |
||||
|
const getList = async () => { |
||||
|
loading.value = true |
||||
|
try { |
||||
|
const data = await HandDetectorApi.getHandDetectorPage(queryParams) |
||||
|
data.list.forEach((item: HandDetector) => { |
||||
|
item.fenceIds && (item.fenceIdsArray = item.fenceIds.split(',')) |
||||
|
}) |
||||
|
list.value = data.list |
||||
|
total.value = data.total |
||||
|
} finally { |
||||
|
loading.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** 搜索按钮操作 */ |
||||
|
const handleQuery = () => { |
||||
|
queryParams.pageNo = 1 |
||||
|
getList() |
||||
|
} |
||||
|
|
||||
|
/** 重置按钮操作 */ |
||||
|
const resetQuery = () => { |
||||
|
queryFormRef.value.resetFields() |
||||
|
handleQuery() |
||||
|
} |
||||
|
|
||||
|
/** 添加/修改操作 */ |
||||
|
const formRef = ref() |
||||
|
const openForm = (type: string, id?: number) => { |
||||
|
formRef.value.open(type, id) |
||||
|
} |
||||
|
|
||||
|
/** 删除按钮操作 */ |
||||
|
const handleDelete = async (id: number) => { |
||||
|
try { |
||||
|
// 删除的二次确认 |
||||
|
await message.delConfirm() |
||||
|
// 发起删除 |
||||
|
await HandDetectorApi.deleteHandDetector(id) |
||||
|
message.success(t('common.delSuccess')) |
||||
|
// 刷新列表 |
||||
|
await getList() |
||||
|
} catch {} |
||||
|
} |
||||
|
|
||||
|
/** 批量删除GAS手持探测器 */ |
||||
|
const handleDeleteBatch = async () => { |
||||
|
try { |
||||
|
// 删除的二次确认 |
||||
|
await message.delConfirm() |
||||
|
await HandDetectorApi.deleteHandDetectorList(checkedIds.value) |
||||
|
message.success(t('common.delSuccess')) |
||||
|
await getList() |
||||
|
} catch {} |
||||
|
} |
||||
|
|
||||
|
const checkedIds = ref<number[]>([]) |
||||
|
const handleRowCheckboxChange = (records: HandDetector[]) => { |
||||
|
checkedIds.value = records.map((item) => item.id) |
||||
|
} |
||||
|
|
||||
|
/** 导出按钮操作 */ |
||||
|
const handleExport = async () => { |
||||
|
try { |
||||
|
// 导出的二次确认 |
||||
|
await message.exportConfirm() |
||||
|
// 发起导出 |
||||
|
exportLoading.value = true |
||||
|
const data = await HandDetectorApi.exportHandDetector(queryParams) |
||||
|
download.excel(data, '手持探测器.xls') |
||||
|
} catch { |
||||
|
} finally { |
||||
|
exportLoading.value = false |
||||
|
} |
||||
|
} |
||||
|
const getAllFences = async () => { |
||||
|
fences.value = await handDetectorStore.getAllFences() |
||||
|
} |
||||
|
|
||||
|
const getAllGasTypes = async () => { |
||||
|
gasTypes.value = await handDetectorStore.getAllGasTypes() |
||||
|
} |
||||
|
/** 初始化 **/ |
||||
|
onMounted(() => { |
||||
|
getList() |
||||
|
getAllFences() |
||||
|
getAllGasTypes() |
||||
|
}) |
||||
|
</script> |
||||
Loading…
Reference in new issue