Compare commits

2 Commits

Author SHA1 Message Date
cb8f2ae26e 将背景图像移动到::after伪元素中,避免z-index冲突问题 2026-07-02 19:00:28 +08:00
1db8bac454 重构为js 2026-07-02 18:42:32 +08:00
80 changed files with 2504 additions and 9804 deletions

View File

@@ -1,3 +1,3 @@
{ {
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] "recommendations": ["Vue.volar"]
} }

20
components.d.ts vendored
View File

@@ -1,20 +0,0 @@
/* eslint-disable */
// @ts-nocheck
// Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399
// biome-ignore lint: disable
export {}
/* prettier-ignore */
declare module 'vue' {
export interface GlobalComponents {
Chart: typeof import('./src/components/chart/index.vue')['default']
NDialogProvider: typeof import('naive-ui')['NDialogProvider']
NLoadingBarProvider: typeof import('naive-ui')['NLoadingBarProvider']
NMessageProvider: typeof import('naive-ui')['NMessageProvider']
NModalProvider: typeof import('naive-ui')['NModalProvider']
ProviderHelper: typeof import('./src/components/ProviderHelper.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
}
}

View File

@@ -8,6 +8,6 @@
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.js"></script>
</body> </body>
</html> </html>

2367
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -5,34 +5,27 @@
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"build": "vue-tsc && vite build", "build": "vite build",
"preview": "vite preview", "preview": "vite preview",
"format": "prettier --write ." "format": "prettier --write ."
}, },
"dependencies": { "dependencies": {
"@types/node": "^20.4.4", "@types/node": "^20.4.4",
"@types/three": "^0.180.0",
"axios": "^1.18.1", "axios": "^1.18.1",
"echarts": "^5.4.3", "echarts": "^5.4.3",
"echarts-liquidfill": "^3.1.0", "echarts-liquidfill": "^3.1.0",
"jsencrypt": "^3.5.4", "jsencrypt": "^3.5.4",
"naive-ui": "^2.44.1",
"ol": "^7.4.0", "ol": "^7.4.0",
"pinia": "^3.0.4", "pinia": "^3.0.4",
"prettier": "^3.0.0", "prettier": "^3.0.0",
"three": "^0.180.0", "vue": "^3.2.47",
"vue": "^3.5.39", "vue-router": "^4.6.4"
"vue-router": "^5.1.0"
}, },
"devDependencies": { "devDependencies": {
"@vicons/fluent": "^0.12.0", "@vitejs/plugin-vue": "^4.1.0",
"@vitejs/plugin-vue": "^6.0.8", "@vitejs/plugin-vue-jsx": "^1.3.3",
"@vitejs/plugin-vue-jsx": "^5.1.6",
"@vue/compiler-sfc": "^3.5.39",
"less": "^4.1.3", "less": "^4.1.3",
"naive-ui": "^2.44.1", "vite": "^4.2.0"
"typescript": "^5.9.3",
"unplugin-vue-components": "^28.7.0",
"vite": "8.1.4",
"vue-tsc": "^3.3.9"
} }
} }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 MiB

BIN
public/room.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 999 B

View File

@@ -1,40 +1,32 @@
<script lang="ts" setup> <script setup>
import { computed, onBeforeUnmount, onMounted, ref } from "vue"; import { computed, onBeforeUnmount, onMounted, ref } from "vue";
const DESIGN_WIDTH = 1920; const DESIGN_WIDTH = 1920;
const DESIGN_HEIGHT = 1080; const DESIGN_HEIGHT = 1080;
const viewportWidth = ref(0); const viewportWidth = ref(0);
const viewportHeight = ref(0); const viewportHeight = ref(0);
const scale = ref(1); const scale = ref(1);
function updateScreenAdapter() { function updateScreenAdapter() {
viewportWidth.value = window.innerWidth; viewportWidth.value = window.innerWidth;
viewportHeight.value = window.innerHeight; viewportHeight.value = window.innerHeight;
const widthScale = viewportWidth.value / DESIGN_WIDTH; const widthScale = viewportWidth.value / DESIGN_WIDTH;
const heightScale = viewportHeight.value / DESIGN_HEIGHT; const heightScale = viewportHeight.value / DESIGN_HEIGHT;
scale.value = Math.min(widthScale, heightScale); scale.value = Math.min(widthScale, heightScale);
} }
const adapterStyle = computed(() => { const adapterStyle = computed(() => {
const scaledWidth = DESIGN_WIDTH * scale.value; const scaledWidth = DESIGN_WIDTH * scale.value;
const scaledHeight = DESIGN_HEIGHT * scale.value; const scaledHeight = DESIGN_HEIGHT * scale.value;
return { return {
width: `${DESIGN_WIDTH}px`, width: `${DESIGN_WIDTH}px`,
height: `${DESIGN_HEIGHT}px`, height: `${DESIGN_HEIGHT}px`,
left: `${(viewportWidth.value - scaledWidth) / 2}px`, left: `${(viewportWidth.value - scaledWidth) / 2}px`,
top: `${(viewportHeight.value - scaledHeight) / 2}px`, top: `${(viewportHeight.value - scaledHeight) / 2}px`,
transform: `scale(${scale.value})`, transform: `scale(${scale.value})`
}; };
}); });
onMounted(() => { onMounted(() => {
updateScreenAdapter(); updateScreenAdapter();
window.addEventListener("resize", updateScreenAdapter); window.addEventListener("resize", updateScreenAdapter);
}); });
onBeforeUnmount(() => { onBeforeUnmount(() => {
window.removeEventListener("resize", updateScreenAdapter); window.removeEventListener("resize", updateScreenAdapter);
}); });
@@ -43,18 +35,7 @@ onBeforeUnmount(() => {
<template> <template>
<div class="screen-adapter"> <div class="screen-adapter">
<div class="screen-adapter__inner" :style="adapterStyle"> <div class="screen-adapter__inner" :style="adapterStyle">
<n-loading-bar-provider> <RouterView />
<n-modal-provider>
<n-dialog-provider>
<n-message-provider>
<n-message-provider>
<provider-helper />
<router-view />
</n-message-provider>
</n-message-provider>
</n-dialog-provider>
</n-modal-provider>
</n-loading-bar-provider>
</div> </div>
</div> </div>
</template> </template>

18
src/api/alarm.js Normal file
View File

@@ -0,0 +1,18 @@
import request from "@/utils/request";
function getRecentAlarmList(data) {
return request({
url: "/admin/rosInspectionRecordLineImage/warnList",
data
});
}
function getAlarmPage(data) {
return request({
url: "/admin/rosInspectionRecordLineImage/list",
method: "POST",
data
});
}
export {
getAlarmPage,
getRecentAlarmList
};

View File

@@ -1,96 +0,0 @@
import request from "@/utils/request";
import type { ApiResult, OrderItem, PageParam, PageResult } from "@/types/api";
import type { RosCar } from "./rosCar";
/**
* 告警列表查询条件,对应后端 com.haizhiyustc.ros.dto.RosInspectionRecordLineImageQueryDTO
*/
export interface RosInspectionRecordLineImageQueryDTO {
/** 识别类型 */
recognizeType?: number | string;
/** 开始时间 */
startTime?: string;
/** 结束时间 */
endTime?: string;
/** 是否预警 */
warning?: boolean;
/** 关键字 */
keyword?: string;
}
export type RosInspectionRecordLineImagePageQuery =
Partial<RosInspectionRecordLineImage> & {
keyword?: string;
};
/**
* 巡检路线抓拍图片识别记录,对应后端 com.haizhiyustc.ros.entity.RosInspectionRecordLineImage
* recognitionStatus: 0待执行 1执行中 2执行成功 3执行失败
*/
export interface RosInspectionRecordLineImage {
/** 巡检记录id */
recordId: string;
/** 巡检设备id快照 */
carId?: string;
/** 关联的小车信息 */
car?: RosCar;
/** 抓拍动作id */
recordActionId: string;
/** 所属任务id */
taskId?: string;
/** 识别类型 */
recognizeType?: number;
/** 图片访问地址 */
imageUrl?: string;
/** 抓拍时间 */
captureTime?: string;
/** 抓拍时的小车位姿x */
poseX?: number;
/** 抓拍时的小车位姿y */
poseY?: number;
/** 抓拍时的小车朝向 */
poseYaw?: number;
/** 告警位置对应的里程点标识(后端按告警位姿在巡检路径上投影匹配) */
mileageLabel?: string;
/** 识别状态:0待执行 1执行中 2执行成功 3执行失败 */
recognitionStatus?: number;
/** AI识别提示词 */
prompt?: string;
/** AI识别结果 */
recognitionResult?: string;
/** 是否预警 */
warning?: boolean;
/** 预警值 */
warningValue?: string;
/** 失败原因 */
failReason?: string;
/** 开始识别时间 */
startTime?: string;
/** 结束识别时间 */
endTime?: string;
/** 创建时间 */
createTime?: string;
/** 更新时间 */
updateTime?: string;
/** 主键id */
id?: string;
}
// 查询近期告警列表
// 返回告警列表,对应后端 warnList 接口
// 返回: ApiResult<List<RosInspectionRecordLineImage>>
export function getRecentAlarmList(data: RosInspectionRecordLineImageQueryDTO) {
return request<ApiResult<RosInspectionRecordLineImage[]>>({
url: "/admin/rosInspectionRecordLineImage/warnList",
data,
});
}
// 分页查询告警列表
export function getAlarmPage(data: PageParam<RosInspectionRecordLineImagePageQuery>) {
return request<ApiResult<PageResult<RosInspectionRecordLineImage>>>({
url: "/admin/rosInspectionRecordLineImage/list",
method: "POST",
data,
});
}

View File

@@ -1,49 +0,0 @@
import request from "@/utils/request";
import type { ApiResult } from "@/types/api";
/**
* 里程点(设备级标定物,独立于巡检任务与轮次)
* 对应后端 com.haizhiyustc.ros.entity.RosMileagePoint
*/
export interface RosMileagePoint {
/** 主键id,新增时不传 */
id?: string;
/** 所属巡检设备id */
carId: string;
/** 里程点标识,人工填写,如 a区-01 */
mileageLabel: string;
/** 位姿x,单位米 */
poseX?: number;
/** 位姿y,单位米 */
poseY?: number;
/** 备注 */
remark?: string;
/** 创建时间 */
createTime?: string;
/** 更新时间 */
updateTime?: string;
}
// 查询指定设备的里程点列表
export function getMileagePointList(carId: string) {
return request<ApiResult<RosMileagePoint[]>>({
url: "/admin/rosMileagePoint/list",
params: { carId },
});
}
// 保存里程点(有 id 为更新,无 id 为新增)
export function saveMileagePoint(data: RosMileagePoint) {
return request<ApiResult<RosMileagePoint>>({
url: "/admin/rosMileagePoint/save",
data,
});
}
// 删除里程点
export function removeMileagePoint(id: string) {
return request<ApiResult<null>>({
url: "/admin/rosMileagePoint/remove",
params: { id },
});
}

61
src/api/rosCar.js Normal file
View File

@@ -0,0 +1,61 @@
import request from "@/utils/request";
function getRosCarList(data) {
return request({
url: "/admin/rosCar/list",
data
});
}
function saveRosInspectionTask(data) {
return request({
url: "/admin/rosInspectionTask/save",
data
});
}
function getRosInspectionTaskDetail(cardId) {
return request({
url: "/admin/rosInspectionTask/detail",
params: { cardId }
});
}
function getCurrentRosInspection(carId) {
return request({
url: "/admin/rosCar/currentInspection",
params: { carId }
});
}
function dispatchRosInspectionTask(taskId) {
return request({
url: "/admin/rosInspectionTask/dispatch",
params: { taskId }
});
}
function stopDispatchRosInspectionTask(taskId) {
return request({
url: "/admin/rosInspectionTask/stopDispatch",
params: { taskId }
});
}
function uploadFile(file) {
const data = new FormData();
data.append("file", file);
return request({
url: "/admin/file/upload",
data
});
}
function updateRosCarMapUrls(data) {
return request({
url: "/admin/rosCar/updateMapUrls",
data
});
}
export {
dispatchRosInspectionTask,
getCurrentRosInspection,
getRosCarList,
getRosInspectionTaskDetail,
saveRosInspectionTask,
stopDispatchRosInspectionTask,
updateRosCarMapUrls,
uploadFile
};

View File

@@ -1,376 +0,0 @@
import request from "@/utils/request";
import type { ApiResult, PageParam, PageResult } from "@/types/api";
/**
* 升降柱状态,对应后端 com.haizhiyustc.ros.dto.RosLiftDTO
*/
export interface RosLift {
/** 升降柱接口是否调用成功 */
liftSuccess?: boolean;
/** 升降柱接口返回码 */
liftCode?: number;
/** 升降柱接口返回消息 */
liftMessage?: string;
/** 升降柱设备状态码 */
liftDeviceStatusCode?: string;
/** 升降柱设备状态描述 */
liftDeviceStatusDescription?: string;
/** 升降柱错误码 */
liftErrorCode?: string;
/** 升降柱错误描述 */
liftErrorDescription?: string;
/** 升降柱高度 */
liftHeight?: number;
}
/**
* ROS 小车,对应后端 com.haizhiyustc.ros.entity.RosCar
* status: 0空闲 1巡检 2离线 3充电中
*/
export interface RosCar {
/** 主键id */
id?: string;
/** 设备唯一标识 */
deviceKey?: string;
/** 设备编号 */
deviceNo?: string;
/** 小车信号 */
signal?: string;
/** 小车名称 */
name?: string;
/** 电量百分比 */
batteryLevel?: number;
/** 电压 */
voltage?: number;
/** 当前状态:0空闲 1巡检 2离线 3充电中 */
status?: number;
/** 所属项目名称 */
projectName?: string;
/** 当前 X 坐标 */
poseX?: number;
/** 当前 Y 坐标 */
poseY?: number;
/** 当前朝向 */
poseYaw?: number;
/** 相机 WebRTC 地址 */
cameraWebrtcUrl?: string;
/** 相机编号 */
cameraNo?: string;
/** 红外相机 WebRTC 地址 */
cameraWebrtcUrl2?: string;
/** 红外相机编号 */
cameraNo2?: string;
/** 云台预制点 */
panTiltPreset?: number;
/** 地图 PGM 文件 URL 地址 */
mapPgmUrl?: string;
/** 地图 YAML 文件 URL 地址 */
mapYamlUrl?: string;
/** 地图 PCD 点云文件 URL 地址(前端三维地图展示用) */
mapPcdUrl?: string;
/** 升降柱高度 */
liftHeight?: number;
/** 升降柱状态 */
lift?: RosLift;
/** 充电点 X 坐标 */
dockX?: number;
/** 充电点 Y 坐标 */
dockY?: number;
/** 充电点朝向 */
dockYaw?: number;
/** 预对接点 X 坐标 */
preDockX?: number;
/** 预对接点 Y 坐标 */
preDockY?: number;
/** 预对接点朝向 */
preDockYaw?: number;
/** 是否开启自动回充 */
autoRechargeEnabled?: boolean;
/** 自动回充低电量阈值(%) */
lowBatteryThreshold?: number;
/** 自动回充状态文本 */
dockStatus?: string;
/** 自动回充是否进行中 */
dockActive?: boolean;
/** 创建时间 */
createTime?: string;
/** 更新时间 */
updateTime?: string;
}
/**
* 巡检记录,对应后端 com.haizhiyustc.ros.entity.RosInspectionRecord
* status: 0执行中 1执行完成 2执行失败 3已停止
*/
export interface RosInspectionRecord {
/** 主键id */
id?: string;
/** 所属巡检任务id */
taskId?: string;
/** 巡检设备id */
carId?: string;
/** 巡检说明快照 */
remark?: string;
/** 全局限速快照 */
maxVelocity?: number;
/** 插值密度快照(米/点) */
interpolationDensity?: number;
/** 巡检地图名快照 */
mapName?: string;
/** 巡检轮数快照 */
roundCount?: number;
/** 当前执行轮次,从1开始 */
currentRoundIndex?: number;
/** 开始时间 */
startTime?: string;
/** 结束时间 */
endTime?: string;
/** 执行状态:0执行中 1执行完成 2执行失败 3已停止 */
status?: number;
/** 失败原因 */
failReason?: string;
/** 当前执行节点id */
currentNodeId?: string;
/** 当前执行的动作id */
currentActionId?: string;
/** 开始执行时的小车电量 */
startBatteryLevel?: number;
/** 执行结束后小车电量 */
endBatteryLevel?: number;
/** 开始执行时的小车位姿x */
startPoseX?: number;
/** 开始执行时的小车位姿y */
startPoseY?: number;
/** 执行结束时的小车位姿x */
endPoseX?: number;
/** 执行结束时的小车位姿y */
endPoseY?: number;
/** 总动作数 */
totalActionCount?: number;
/** 当前节点序号 */
currentNodeIndex?: number;
/** 创建时间 */
createTime?: string;
/** 更新时间 */
updateTime?: string;
}
/**
* 巡检任务节点模板,对应后端 com.haizhiyustc.ros.dto.RosInspectionTaskNodeDTO
* type: via_point 途经点 / action_point 任务点
*/
export interface RosInspectionTaskNodeDTO {
/** 节点类型:via_point 途经点 / action_point 任务点 */
type?: string;
/** 位姿x */
poseX?: number;
/** 位姿y */
poseY?: number;
/** 节点顺序 */
nodeIndex?: number;
}
/**
* 巡检任务轮次模板,对应后端 com.haizhiyustc.ros.dto.RosInspectionTaskRoundDTO
* direction: forward 正走 / backward 倒走
*/
export interface RosInspectionTaskRoundDTO {
/** 轮次,从1开始 */
roundIndex?: number;
/** 本轮行走方向:forward 正走 / backward 倒走 */
direction?: string;
}
/**
* 巡检任务动作模板,对应后端 RosInspectionTaskDetailDTO.RosInspectionActionDTO
* command: 0升降柱 1云台旋转 2抓拍识别
*/
export interface RosInspectionActionDTO {
/** 节点顺序 */
nodeIndex?: number;
/** 轮次 */
roundIndex?: number;
/** 动作类型:0升降柱 1云台旋转 2抓拍识别 */
command?: number;
/** 动作参数 */
params?: Record<string, unknown>;
}
/**
* 巡检任务模板详情,对应后端 com.haizhiyustc.ros.dto.RosInspectionTaskDetailDTO
*/
export interface RosInspectionTaskDetailDTO {
/** 主键id */
id?: string;
/** 巡检设备id */
carId?: string;
/** 巡检说明 */
remark?: string;
/** 巡检状态:0待执行 1执行中 2已停止 */
status?: number;
/** 全局限速 */
maxVelocity?: number;
/** ROS2端生成平滑曲线时的插值密度(米/点) */
interpolationDensity?: number;
/** 巡检地图名 */
mapName?: string;
/** 巡检轮数 */
roundCount?: number;
/** 巡检节点模板列表 */
nodes?: RosInspectionTaskNodeDTO[];
/** 巡检轮次模板列表 */
rounds?: RosInspectionTaskRoundDTO[];
/** 巡检动作模板列表 */
actions?: RosInspectionActionDTO[];
}
/**
* 巡检任务下发结果,对应后端 com.haizhiyustc.ros.dto.RosDispatchResultDTO
*/
export interface RosDispatchResultDTO {
/** 巡检记录id */
recordId?: string;
/** 小车是否接受本次下发 */
accepted?: boolean;
/** 下发结果说明 */
message?: string;
}
/**
* 小车分页查询条件,对应后端 com.haizhiyustc.ros.entity.RosCar 的字段过滤
*/
export type RosCarQuery = Partial<RosCar> & {
/** 关键字 */
keyword?: string;
};
// 小车分页列表
export function getRosCarList(data: PageParam<RosCarQuery>) {
return request<ApiResult<PageResult<RosCar>>>({
url: "/admin/rosCar/list",
data,
});
}
// 保存巡检任务模板
export function saveRosInspectionTask(data: unknown) {
return request<ApiResult<null>>({
url: "/admin/rosInspectionTask/save",
data,
});
}
// 巡检任务模板详情
export function getRosInspectionTaskDetail(cardId: string) {
return request<ApiResult<RosInspectionTaskDetailDTO>>({
url: "/admin/rosInspectionTask/detail",
params: { cardId },
});
}
// 查询小车当前巡检状态
export function getCurrentRosInspection(carId: string) {
return request<ApiResult<RosInspectionRecord>>({
url: "/admin/rosCar/currentInspection",
params: { carId },
});
}
// 下发巡检任务
export function dispatchRosInspectionTask(taskId: string) {
return request<ApiResult<RosDispatchResultDTO>>({
url: "/admin/rosInspectionTask/dispatch",
params: { taskId },
});
}
// 停止已下发的巡检任务
export function stopDispatchRosInspectionTask(taskId: string) {
return request<ApiResult<RosDispatchResultDTO>>({
url: "/admin/rosInspectionTask/stopDispatch",
params: { taskId },
});
}
// 上传文件并返回后端保存后的访问地址
export function uploadFile(file: File) {
const data = new FormData();
data.append("file", file);
return request<ApiResult<string>>({
url: "/admin/file/upload",
data,
});
}
// 更新小车地图文件地址
export function updateRosCarMapUrls(data: {
id: string;
mapPgmUrl?: string;
mapYamlUrl?: string;
mapPcdUrl?: string;
}) {
return request<ApiResult<null>>({
url: "/admin/rosCar/updateMapUrls",
data,
});
}
/**
* 小车充电点与自动回充配置更新参数
*/
export interface RosCarDockConfigUpdate {
/** 主键id */
id: string;
/** 充电点 X 坐标 */
dockX?: number;
/** 充电点 Y 坐标 */
dockY?: number;
/** 充电点朝向 */
dockYaw?: number;
/** 预对接点 X 坐标 */
preDockX?: number;
/** 预对接点 Y 坐标 */
preDockY?: number;
/** 预对接点朝向 */
preDockYaw?: number;
/** 是否开启自动回充 */
autoRechargeEnabled?: boolean;
/** 自动回充低电量阈值(%) */
lowBatteryThreshold?: number;
}
// 更新小车充电点与自动回充配置
export function updateRosCarDockConfig(data: RosCarDockConfigUpdate) {
return request<ApiResult<null>>({
url: "/admin/rosCar/updateDockConfig",
data,
});
}
/**
* 手动触发回充结果,对应后端 com.haizhiyustc.ros.dto.RosChargingResultDTO
*/
export interface RosChargingResult {
/** 小车是否接受本次触发 */
accepted?: boolean;
/** 触发结果说明 */
message?: string;
}
// 手动触发小车自动回充
export function startRosCharging(carId: string) {
return request<ApiResult<RosChargingResult>>({
url: "/admin/rosCar/startCharging",
params: { carId },
});
}
// 手动触发小车脱离充电桩
export function undockRosCharging(carId: string) {
return request<ApiResult<RosChargingResult>>({
url: "/admin/rosCar/undockCharging",
params: { carId },
});
}

52
src/api/user.js Normal file
View File

@@ -0,0 +1,52 @@
import request, { BASE_URL } from '@/utils/request'
export function getPublicKey() {
return request({
url: 'admin/account/publicKey'
})
}
export function login(data) {
return request({
url: 'admin/account/login',
data
})
}
export function captcha() {
return BASE_URL + '/admin/account/captcha'
}
export function getInfo() {
return request({
url: 'admin/account/info',
})
}
export function updateInfo(data) {
return request({
url: 'admin/account/update',
data
})
}
export function updatePwd(data) {
return request({
url: 'admin/account/updatePwd',
data
})
}
// 发送重置密码验证码
export function getVerifyCode(data) {
return request({
url: '/admin/sysUser/getVerifyCode',
data
})
}
//忘记密码
export function resetUserPassword(data) {
return request({
url: '/admin/sysUser/resetUserPassword',
data
})
}

View File

@@ -1,105 +0,0 @@
import request, { BASE_URL } from '@/utils/request'
import type { ApiResult } from '@/types/api'
/**
* 登录返回,对应后端 com.haizhiyustc.system.vo.SysUserLoginVO
*/
export interface LoginResult {
/** 用户id */
userId: string;
/** 登录令牌 */
token: string;
/** 令牌请求头名称 */
tokenName: string;
}
/**
* 用户个人资料,对应后端 UserInfoVO.UserInfoProfile
*/
export interface UserProfile {
/** 账号id */
id?: string;
/** 头像 */
avatar?: string;
/** 登录账号 */
account?: string;
/** 账户名 */
name?: string;
/** 性别 */
gender?: string;
/** 邮箱 */
email?: string;
/** 手机号 */
phone?: string;
/** 状态 */
status?: number;
}
/**
* 当前登录用户信息,对应后端 com.haizhiyustc.system.vo.UserInfoVO
*/
export interface UserInfoVO {
/** 账号名 */
name?: string;
/** 角色 */
role?: string;
/** 角色列表 */
roles?: string[];
/** 权限列表 */
permissions?: string[];
/** 用户个人资料 */
profile?: UserProfile;
}
export function getPublicKey() {
return request<ApiResult<string>>({
url: 'admin/account/publicKey'
})
}
export function login(data: Record<string, unknown>) {
return request<ApiResult<LoginResult>>({
url: 'admin/account/login',
data
})
}
export function captcha(): string {
return BASE_URL + '/admin/account/captcha'
}
export function getInfo() {
return request<ApiResult<UserInfoVO>>({
url: 'admin/account/info',
})
}
export function updateInfo(data: Record<string, unknown>) {
return request<ApiResult<unknown>>({
url: 'admin/account/update',
data
})
}
export function updatePwd(data: Record<string, unknown>) {
return request<ApiResult<unknown>>({
url: 'admin/account/updatePwd',
data
})
}
// 发送重置密码验证码
export function getVerifyCode(data: Record<string, unknown>) {
return request<ApiResult<unknown>>({
url: '/admin/sysUser/getVerifyCode',
data
})
}
//忘记密码
export function resetUserPassword(data: Record<string, unknown>) {
return request<ApiResult<unknown>>({
url: '/admin/sysUser/resetUserPassword',
data
})
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 436 KiB

Binary file not shown.

Binary file not shown.

View File

@@ -1,8 +0,0 @@
@font-face {
/*给字体命名*/
font-family: 'YouSheBiaoTiYuan';
/*引入字体文件*/
src: url('./YouSheBiaoTiYuan.ttf');
font-weight: normal;
font-style: normal;
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 722 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 254 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 254 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 254 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 254 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 250 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 251 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 134 KiB

View File

@@ -1,21 +0,0 @@
<template>
<div></div>
</template>
<script>
import { useDialog, useLoadingBar, useMessage } from 'naive-ui'
/**
* naive-ui的弹窗类的都没有提供全局方法, 这里挂载到window对象上
*/
export default {
name: 'ProviderHelper',
setup() {
window.$message = useMessage()
window.$loadingBar = useLoadingBar()
window.$modal = useDialog()
}
}
</script>
<style scoped></style>

View File

@@ -1,42 +1,45 @@
<script lang="ts" setup> <script setup>
import { onBeforeUnmount, onMounted, ref, watch } from "vue"; import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
import { init } from "echarts/core"; import * as echarts from "echarts";
import type { EChartsOption } from "echarts"; let chart = null;
let resizeObserver = null;
let chart: ReturnType<typeof init> | null = null; const chartRef = ref();
const chartRef = ref<HTMLElement | undefined>();
const props = defineProps({ const props = defineProps({
option: { option: {
type: Object as () => EChartsOption | {}, type: Object,
required: true, required: true
}, }
}); });
function applyOption(option) {
function applyOption(option?: EChartsOption | Record<string, never>) {
if (!chart || !option) { if (!chart || !option) {
return; return;
} }
chart.clear(); chart.clear();
chart.setOption(option); chart.setOption(option);
} }
onMounted(() => { onMounted(() => {
chart = init(chartRef.value, "t-theme"); chart = echarts.init(chartRef.value, "t-theme");
applyOption(props.option); applyOption(props.option);
resizeObserver = new ResizeObserver(() => {
chart?.resize();
});
resizeObserver.observe(chartRef.value);
nextTick(() => {
chart?.resize();
});
}); });
watch( watch(
() => props.option, () => props.option,
(value) => { (value) => {
applyOption(value); applyOption(value);
}, },
{ deep: true }, { deep: true }
); );
onBeforeUnmount(() => { onBeforeUnmount(() => {
if (resizeObserver) {
resizeObserver.disconnect();
resizeObserver = null;
}
if (chart) { if (chart) {
chart.dispose(); chart.dispose();
chart = null; chart = null;

View File

@@ -8,8 +8,8 @@ const color = [
colorStops: [ colorStops: [
{ offset: 0, color: "#94c7fd" }, { offset: 0, color: "#94c7fd" },
{ offset: 0.5, color: "#3b99fb" }, { offset: 0.5, color: "#3b99fb" },
{ offset: 1, color: "#004ca0" }, { offset: 1, color: "#004ca0" }
], ]
}, },
{ {
type: "linear", type: "linear",
@@ -20,8 +20,8 @@ const color = [
colorStops: [ colorStops: [
{ offset: 0, color: "#b070c0" }, { offset: 0, color: "#b070c0" },
{ offset: 0.5, color: "#b070c0" }, { offset: 0.5, color: "#b070c0" },
{ offset: 1, color: "#5d235d" }, { offset: 1, color: "#5d235d" }
], ]
}, },
{ {
type: "linear", type: "linear",
@@ -32,8 +32,8 @@ const color = [
colorStops: [ colorStops: [
{ offset: 0, color: "#7eedd6" }, { offset: 0, color: "#7eedd6" },
{ offset: 0.5, color: "#3be8bb" }, { offset: 0.5, color: "#3be8bb" },
{ offset: 1, color: "#00b38a" }, { offset: 1, color: "#00b38a" }
], ]
}, },
{ {
type: "linear", type: "linear",
@@ -44,8 +44,8 @@ const color = [
colorStops: [ colorStops: [
{ offset: 0, color: "#fff1f0" }, { offset: 0, color: "#fff1f0" },
{ offset: 0.5, color: "#ff9494" }, { offset: 0.5, color: "#ff9494" },
{ offset: 1, color: "#ff4d4f" }, { offset: 1, color: "#ff4d4f" }
], ]
}, },
{ {
type: "linear", type: "linear",
@@ -56,8 +56,8 @@ const color = [
colorStops: [ colorStops: [
{ offset: 0, color: "#fffbe6" }, { offset: 0, color: "#fffbe6" },
{ offset: 0.5, color: "#ffe58f" }, { offset: 0.5, color: "#ffe58f" },
{ offset: 1, color: "#ffbb96" }, { offset: 1, color: "#ffbb96" }
], ]
}, },
{ {
type: "linear", type: "linear",
@@ -68,8 +68,8 @@ const color = [
colorStops: [ colorStops: [
{ offset: 0, color: "#ff3333" }, { offset: 0, color: "#ff3333" },
{ offset: 0.5, color: "#ff0000" }, { offset: 0.5, color: "#ff0000" },
{ offset: 1, color: "#cc0000" }, { offset: 1, color: "#cc0000" }
], ]
}, },
{ {
type: "linear", type: "linear",
@@ -80,25 +80,24 @@ const color = [
colorStops: [ colorStops: [
{ offset: 0, color: "#ffe6f0" }, { offset: 0, color: "#ffe6f0" },
{ offset: 0.5, color: "#ffb3d9" }, { offset: 0.5, color: "#ffb3d9" },
{ offset: 1, color: "#ff85c0" }, { offset: 1, color: "#ff85c0" }
], ]
}, }
]; ];
export default { export default {
color, color,
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
color: "#fff", color: "#fff"
}, },
legend: { legend: {
textStyle: { textStyle: {
color: "#fff", color: "#fff"
}, }
}, },
tooltip: { tooltip: {
textStyle: { textStyle: {
align: "left", align: "left"
}, }
}, }
}; };

View File

@@ -1,35 +1,30 @@
import { Map } from "ol";
import VectorSource from "ol/source/Vector"; import VectorSource from "ol/source/Vector";
import { GeoJSON } from "ol/format"; import { GeoJSON } from "ol/format";
import VectorLayer from "ol/layer/Vector"; import VectorLayer from "ol/layer/Vector";
import { Fill, Stroke, Style } from "ol/style"; import { Fill, Stroke, Style } from "ol/style";
import { FeatureLike } from "ol/Feature"; export default function (mapInstance) {
import { MultiPolygon } from "ol/geom";
export default function (mapInstance: Map) {
const vectorSource = new VectorSource({ const vectorSource = new VectorSource({
url: "https://geo.datav.aliyun.com/areas_v3/bound/330000.json", url: "https://geo.datav.aliyun.com/areas_v3/bound/330000.json",
format: new GeoJSON(), format: new GeoJSON()
}); });
for (let i = 1; i <= 3; i++) { for (let i = 1; i <= 3; i++) {
const layer = new VectorLayer({ const layer = new VectorLayer({
zIndex: -1, zIndex: -1,
source: vectorSource, source: vectorSource,
style: (feature: FeatureLike) => { style: (feature) => {
const geometry = (feature.getGeometry() as MultiPolygon).clone(); const geometry = feature.getGeometry().clone();
geometry.translate(0, -0.04 * i); geometry.translate(0, -0.04 * i);
return new Style({ return new Style({
fill: new Fill({ fill: new Fill({
color: "rgba(176, 166, 132,0.6)", color: "rgba(176, 166, 132,0.6)"
}), }),
stroke: new Stroke({ stroke: new Stroke({
color: "rgba(176, 166, 132,0.6)", color: "rgba(176, 166, 132,0.6)",
width: 1, width: 1
}), }),
geometry, geometry
}); });
}, }
}); });
mapInstance.addLayer(layer); mapInstance.addLayer(layer);
} }

View File

@@ -7,33 +7,28 @@ import { Fill, Stroke, Style, Text } from "ol/style";
import { getBottomLeft, getCenter, getHeight, getWidth } from "ol/extent"; import { getBottomLeft, getCenter, getHeight, getWidth } from "ol/extent";
import materialJpg from "@/assets/map-material.jpg"; import materialJpg from "@/assets/map-material.jpg";
import { toContext } from "ol/render"; import { toContext } from "ol/render";
import { MultiPolygon } from "ol/geom";
import { defaults } from "ol/interaction"; import { defaults } from "ol/interaction";
function useMap(target) {
export default function useMap(target: string) {
const mapInstance = new Map({ const mapInstance = new Map({
view: new View({ view: new View({
projection: "EPSG:4326", projection: "EPSG:4326",
zoom: 12, zoom: 12,
center: [0, 0], center: [0, 0]
}), }),
controls: [], controls: [],
interactions: defaults({ interactions: defaults({
dragPan: false, dragPan: false,
mouseWheelZoom: false, mouseWheelZoom: false
}), })
}); });
const vectorSource = new VectorSource({ const vectorSource = new VectorSource({
url: "https://geo.datav.aliyun.com/areas_v3/bound/330000_full.json", url: "https://geo.datav.aliyun.com/areas_v3/bound/330000_full.json",
format: new GeoJSON(), format: new GeoJSON()
}); });
const customStyle = new Style({ const customStyle = new Style({
renderer: function (pixelCoordinates, state) { renderer: function(pixelCoordinates, state) {
const context = state.context; const context = state.context;
const multiPolygon = state.geometry.clone() as MultiPolygon; const multiPolygon = state.geometry.clone();
// @ts-ignore
multiPolygon.setCoordinates(pixelCoordinates); multiPolygon.setCoordinates(pixelCoordinates);
const extent = multiPolygon.getExtent(); const extent = multiPolygon.getExtent();
const width = getWidth(extent); const width = getWidth(extent);
@@ -44,14 +39,14 @@ export default function useMap(target: string) {
} }
context.save(); context.save();
const renderContext = toContext(context, { const renderContext = toContext(context, {
pixelRatio: 1, pixelRatio: 1
}); });
renderContext.setFillStrokeStyle( renderContext.setFillStrokeStyle(
new Fill(), new Fill(),
new Stroke({ new Stroke({
color: "rgba(255,255,255,0.8)", color: "rgba(255,255,255,0.8)",
width: 3, width: 3
}), })
); );
renderContext.drawMultiPolygon(multiPolygon); renderContext.drawMultiPolygon(multiPolygon);
context.clip(); context.clip();
@@ -60,9 +55,8 @@ export default function useMap(target: string) {
const bottom = bottomLeft[1]; const bottom = bottomLeft[1];
context.drawImage(flag, left, bottom, width, height); context.drawImage(flag, left, bottom, width, height);
context.restore(); context.restore();
}, }
}); });
const layer = new VectorLayer({ const layer = new VectorLayer({
source: vectorSource, source: vectorSource,
style: (feature) => { style: (feature) => {
@@ -72,40 +66,35 @@ export default function useMap(target: string) {
text: new Text({ text: new Text({
text: feature.get("name"), text: feature.get("name"),
fill: new Fill({ fill: new Fill({
color: "#fff", color: "#fff"
}), }),
scale: 1.5, scale: 1.5
}), }),
zIndex: 1, zIndex: 1
}), })
]; ];
}, }
}); });
vectorSource.on("addfeature", function(event) {
vectorSource.on("addfeature", function (event) {
const feature = event.feature; const feature = event.feature;
const img = new Image(); const img = new Image();
img.src = materialJpg; img.src = materialJpg;
img.onload = function () { img.onload = function() {
feature?.set("material", img); feature?.set("material", img);
}; };
}); });
vectorSource.on("featuresloadend", (event) => { vectorSource.on("featuresloadend", (event) => {
const view = mapInstance.getView(); const view = mapInstance.getView();
const extent = event.target.getExtent(); const extent = event.target.getExtent();
view.fit(extent, { padding: [0, 30, 0, 0] }); view.fit(extent, { padding: [0, 30, 0, 0] });
view.setCenter(getCenter(extent)); view.setCenter(getCenter(extent));
}); });
mapInstance.addLayer(layer); mapInstance.addLayer(layer);
onMounted(() => { onMounted(() => {
mapInstance.setTarget(target); mapInstance.setTarget(target);
}); });
return { return {
mapInstance, mapInstance
}; };
} }
export default useMap;

View File

@@ -2,23 +2,19 @@ import { createApp } from "vue";
import "./style.less"; import "./style.less";
import App from "./App.vue"; import App from "./App.vue";
import Chart from "./components/chart/index.vue"; import Chart from "./components/chart/index.vue";
import { registerTheme } from "echarts/core"; import * as echarts from "echarts";
import { CanvasRenderer } from "echarts/renderers";
import echartsConfig from "./config/echarts.config"; import echartsConfig from "./config/echarts.config";
import naive, { createDiscreteApi } from "naive-ui";
import { createPinia } from "pinia"; import { createPinia } from "pinia";
import router from "./router"; import router from "./router";
import "./router/routerGuard"; import '../src/assets/font/YouSheBiaoTiHei.css';
echarts.registerTheme("t-theme", echartsConfig);
// CanvasRenderer 注册到全局,所有图表都需要 const { message, dialog } = createDiscreteApi(["message", "dialog"]);
import { use } from "echarts/core"; window.$message = message;
use([CanvasRenderer]); window.$modal = dialog;
registerTheme("t-theme", echartsConfig);
const app = createApp(App); const app = createApp(App);
app.use(createPinia()); app.use(createPinia());
app.use(router); app.use(router);
app.use(naive);
app.component("TChart", Chart); app.component("TChart", Chart);
app.mount("#app"); app.mount("#app");

View File

@@ -1,16 +1,13 @@
import { getToken } from "@/utils/auth"; import { getToken } from "@/utils/auth";
import { import {
createRouter, createRouter,
createWebHashHistory, createWebHashHistory
type RouteRecordRaw,
} from "vue-router"; } from "vue-router";
const dashboardDefaultPath = "/dashboard/integrated-center"; const dashboardDefaultPath = "/dashboard/integrated-center";
const routes = [
const routes: RouteRecordRaw[] = [
{ {
path: "/", path: "/",
redirect: () => (getToken() ? dashboardDefaultPath : "/login"), redirect: () => getToken() ? dashboardDefaultPath : "/login"
}, },
{ {
path: "/dashboard", path: "/dashboard",
@@ -20,61 +17,67 @@ const routes: RouteRecordRaw[] = [
{ {
path: "integrated-center", path: "integrated-center",
name: "IntegratedCenter", name: "IntegratedCenter",
component: () => component: () => import("@/views/dashboard1/pages/IntegratedCenterPage.vue"),
import("@/views/dashboard1/pages/IntegratedCenterPage.vue"), meta: { title: "监管中心", tabId: 1 }
meta: { title: "监管中心", tabId: 1, },
}, },
{ {
path: "equipment-management", path: "equipment-management",
name: "EquipmentManagement", name: "EquipmentManagement",
component: () => component: () => import("@/views/dashboard1/pages/EquipmentManagementPage.vue"),
import("@/views/dashboard1/pages/EquipmentManagementPage.vue"), meta: { title: "设备管理", tabId: 2 }
meta: { title: "设备管理", tabId: 2, },
}, },
{ {
path: "video-center", path: "video-center",
name: "VideoCenter", name: "VideoCenter",
component: () => import("@/views/dashboard1/pages/VideoCenterPage.vue"), component: () => import("@/views/dashboard1/pages/VideoCenterPage.vue"),
meta: { title: "视频中心", tabId: 3, }, meta: { title: "视频中心", tabId: 3 }
}, },
{ {
path: "alarm-management", path: "alarm-management",
name: "AlarmManagement", name: "AlarmManagement",
component: () => component: () => import("@/views/dashboard1/pages/AlarmManagementPage.vue"),
import("@/views/dashboard1/pages/AlarmManagementPage.vue"), meta: { title: "告警管理", tabId: 4 }
meta: { title: "告警管理", tabId: 4, },
}, },
{ {
path: "patrol-plan", path: "patrol-plan",
name: "PatrolPlan", name: "PatrolPlan",
component: () => import("@/views/dashboard1/pages/PatrolPlanPage.vue"), component: () => import("@/views/dashboard1/pages/PatrolPlanPage.vue"),
meta: { title: "巡检记录", tabId: 5, }, meta: { title: "巡检记录", tabId: 5 }
}, },
{ {
path: "data-report", path: "data-report",
name: "DataReport", name: "DataReport",
component: () => import("@/views/dashboard1/pages/DataReportPage.vue"), component: () => import("@/views/dashboard1/pages/DataReportPage.vue"),
meta: { title: "统计分析", tabId: 6, }, meta: { title: "统计分析", tabId: 6 }
}, }
], ]
}, },
{ {
path: "/login", path: "/login",
name: "Login", name: "Login",
component: () => import("@/views/login/index.vue"), component: () => import("@/views/login/index.vue"),
meta: { title: "登录" }, meta: { title: "登录" }
}, },
{ {
path: "/:pathMatch(.*)*", path: "/:pathMatch(.*)*",
redirect: dashboardDefaultPath, redirect: dashboardDefaultPath
}, }
]; ];
const router = createRouter({ const router = createRouter({
history: createWebHashHistory(), history: createWebHashHistory(),
routes, routes
});
const whiteList = ["/login"];
router.beforeEach((to) => {
const hasToken = Boolean(getToken());
if (!hasToken && !whiteList.includes(to.path)) {
return {
path: "/login",
query: { redirect: to.fullPath }
};
}
return true;
}); });
export function resetRouter() { export function resetRouter() {
// 当前项目暂无动态 addRoute 路由,保留该方法兼容登出流程。 // 当前项目暂无动态 addRoute 路由,保留该方法兼容登出流程。
} }

View File

@@ -1,60 +0,0 @@
import router from './index'
import { getToken } from '@/utils/auth'
import { useUserStore } from '@/store/modules/user'
const whiteList = ['/login'] // no redirect whitelist
// const setPageTitle = function (meta) {
// let title = '海灵标'
// if (meta && meta.title) {
// title = `${meta.title}`
// }
// document.title = title
// }
// 路由守卫
router.beforeEach(async (to, from) => {
$loadingBar.start()
// setPageTitle(to.meta)
const hasToken = getToken()
const userStore = useUserStore()
if (hasToken) {
if (to.path === '/login') {
$loadingBar.finish()
return { path: '/' }
} else {
const hasGetUserInfo = userStore.name
if (hasGetUserInfo !== '') {
return
} else {
try {
// get user info
const infoVO = await userStore.getInfo()
return { ...to, replace: true }
} catch (error) {
await userStore.resetToken()
// remove token and go to login page to re-login
console.error(error)
$loadingBar.error()
return `/login?redirect=${to.path}`
}
}
}
} else {
/* has no token */
if (whiteList.indexOf(to.path) !== -1) {
// in the free login whitelist, go directly
return
} else {
$loadingBar.finish()
return `/login?redirect=${to.path}`
}
}
})
router.afterEach((to) => {
if (to.matched.length === 0) {
router.push('/404')
// fixme 不能自动跳转404, 需要引导
}
$loadingBar.finish()
})

5
src/store/index.js Normal file
View File

@@ -0,0 +1,5 @@
import { createPinia } from 'pinia'
export function setupStore(app) {
app.use(createPinia())
}

View File

@@ -1,6 +0,0 @@
import { createPinia } from 'pinia'
import type { App } from 'vue'
export function setupStore(app: App) {
app.use(createPinia())
}

View File

@@ -1,31 +1,21 @@
import { defineStore } from 'pinia' import { defineStore } from 'pinia'
import { nextTick } from 'vue' import { nextTick } from 'vue'
import { useDark } from '@vueuse/core'
const sidebarStatusKey = 'sidebar_status' const sidebarStatusKey = 'sidebar_status'
interface AppState {
/** 侧边栏是否展开,持久化在 localStorage */
sidebarStatus: boolean
/** 当前设备类型,desktop/mobile */
device: string
/** 应用配置 */
config: Record<string, unknown>
/** 页面刷新标记,reloadPage 控制 true/false 触发重新渲染 */
reloadFlag: boolean
/** 是否暗色模式 */
isDark: boolean
}
export const useAppStore = defineStore('app', { export const useAppStore = defineStore('app', {
state: (): AppState => ({ state() {
sidebarStatus: localStorage.getItem(sidebarStatusKey) ? localStorage.getItem(sidebarStatusKey) === '1' : true, return {
device: 'desktop', sidebarStatus: localStorage.getItem(sidebarStatusKey) ? localStorage.getItem(sidebarStatusKey) === '1' : true,
config: {}, device: 'desktop',
reloadFlag: true, config: {},
isDark: !window.matchMedia('(prefers-color-scheme: dark)').matches, reloadFlag: true,
}), isDark: !useDark(),
}
},
getters: { getters: {
sidebar(): boolean { sidebar() {
return this.sidebarStatus return this.sidebarStatus
} }
}, },
@@ -38,11 +28,11 @@ export const useAppStore = defineStore('app', {
localStorage.setItem(sidebarStatusKey, '0') localStorage.setItem(sidebarStatusKey, '0')
} }
}, },
closeSideBar(withoutAnimation: boolean) { closeSideBar(withoutAnimation) {
localStorage.setItem(sidebarStatusKey, '0') localStorage.setItem(sidebarStatusKey, '0')
this.sidebarStatus = false this.sidebarStatus = false
}, },
toggleDevice(device: string) { toggleDevice(device) {
this.device = device this.device = device
}, },
async reloadPage() { async reloadPage() {

112
src/store/modules/user.js Normal file
View File

@@ -0,0 +1,112 @@
import { getToken, removeToken, setToken } from "@/utils/auth.js";
import { getInfo, login as doLogin } from "@/api/user.js";
import { defineStore } from "pinia";
import { resetRouter } from "@/router";
export const useUserStore = defineStore("user", {
state() {
return {
userInfo: {
token: getToken() || "",
id: "",
avatar: "",
name: "",
profile: {},
permissions: [],
dictMap: {},
dictTreeMap: {},
dictIdMap: {},
dynamicAttrs: [],
companyLogStatus: null,
attrIds: [],
regionIds: [],
},
};
},
getters: {
userId() {
return this.userInfo?.id || "";
},
name() {
return this.userInfo?.name || "";
},
avatar() {
return this.userInfo?.profile?.avatar || "";
},
permissions() {
return this.userInfo?.permissions || [];
},
dictMap() {
return this.userInfo?.dictMap || {};
},
dictTreeMap() {
return this.userInfo?.dictTreeMap || {};
},
dictIdMap() {
return this.userInfo?.dictIdMap || {};
},
dynamicAttrs() {
return this.userInfo?.dynamicAttrs || [];
},
companyLogStatus() {
return this.userInfo?.companyLogStatus || 0;
},
attrIds() {
return this.userInfo?.attrIds || [];
},
regionIds() {
return this.userInfo?.regionIds || [];
},
},
actions: {
async login(userInfo) {
const res = await doLogin(userInfo);
const { token, tokenName } = res.data;
this.userInfo.token = token;
setToken(token, tokenName);
return true;
},
async getInfo() {
const res = await getInfo();
const data = res.data;
const {
name,
profile,
permissions,
dynamicAttrs,
attrIds,
companyLogStatus,
regionIds,
} = data;
// 保留当前的 token,避免被覆盖
const currentToken = this.userInfo.token || getToken();
this.userInfo = {
token: currentToken,
id: profile.id,
name,
profile,
permissions,
dynamicAttrs,
attrIds,
companyLogStatus,
regionIds,
};
return data;
},
// user logout
async logout() {
await this.resetToken();
await resetRouter();
return true;
},
async resetToken() {
this.userInfo = {
profile: {},
permissions: [],
};
removeToken();
},
},
});

View File

@@ -1,73 +0,0 @@
import { getToken, removeToken, setToken } from "@/utils/auth";
import { getInfo, login as doLogin } from "@/api/user";
import type { UserInfoVO } from "@/api/user";
import { defineStore } from "pinia";
import { resetRouter } from "@/router";
// store 侧用户信息:后端返回结构 + 登录令牌,token 独立维护
type UserInfo = Partial<UserInfoVO> & {
token?: string | null;
};
export const useUserStore = defineStore("user", {
state: (): { userInfo: UserInfo } => ({
userInfo: {
token: getToken() || "",
name: "",
profile: {},
permissions: [],
},
}),
getters: {
userId(): string {
return this.userInfo?.profile?.id || "";
},
name(): string {
return this.userInfo?.name || "";
},
avatar(): string {
return this.userInfo?.profile?.avatar || "";
},
permissions(): string[] {
return this.userInfo?.permissions || [];
},
},
actions: {
async login(userInfo: Record<string, unknown>) {
const res = await doLogin(userInfo);
const { token, tokenName } = res.data;
this.userInfo.token = token;
setToken(token, tokenName);
return true;
},
async getInfo() {
const res = await getInfo();
const data = res.data;
const { name, profile, permissions } = data;
// 保留当前的 token,避免被覆盖
const currentToken = this.userInfo.token || getToken();
this.userInfo = {
token: currentToken,
name,
profile,
permissions,
};
return data;
},
// user logout
async logout() {
await this.resetToken();
await resetRouter();
return true;
},
async resetToken() {
this.userInfo = {
profile: {},
permissions: [],
};
removeToken();
},
},
});

View File

@@ -1,20 +1,3 @@
// 大屏设计稿字体:优设标题黑 / 优设标题圆
@font-face {
font-family: "YouSheBiaoTiHei";
src: url("./assets/font/YousheBiaoTiHei.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "YouSheBiaoTiYuan";
src: url("./assets/font/YouSheBiaoTiYuan.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
:root { :root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5; line-height: 1.5;

View File

@@ -1,48 +0,0 @@
/**
* 后端统一返回结构,对应后端 com.haizhiyustc.common.web.api.ApiResult
* code: 200 成功 / 401 未登录或登录过期 / 500 失败
*/
export interface ApiResult<T = unknown> {
/** 状态码 */
code: number;
/** 返回的数据 */
data: T;
/** 说明信息 */
msg: string;
}
/**
* 分页结果,对应后端 easy-query 的 EasyPageResult(仅返回 data 与 total)
*/
export interface PageResult<T> {
/** 符合条件的总记录数 */
total?: number;
/** 当前页数据列表 */
data?: T[];
}
/**
* 排序项,对应后端 com.haizhiyustc.common.crud.bean.OrderItem
*/
export interface OrderItem {
/** 排序属性名 */
property: string;
/** 关联表序号 */
tableIndex?: number;
/** 是否升序,默认 false 降序 */
asc?: boolean;
}
/**
* 分页请求参数,对应后端 com.haizhiyustc.common.crud.bean.PageParam
*/
export interface PageParam<T> {
/** 页码,从1开始 */
page?: number;
/** 每页条数 */
limit?: number;
/** 排序列表 */
orderList?: OrderItem[];
/** 查询条件 */
query?: T;
}

View File

@@ -1,20 +0,0 @@
interface Window {
$message: {
error(message: string, options?: Record<string, unknown>): void;
success(message: string, options?: Record<string, unknown>): void;
warning(message: string, options?: Record<string, unknown>): void;
info(message: string, options?: Record<string, unknown>): void;
};
$modal: {
create(options: Record<string, unknown>): unknown;
warning(options: Record<string, unknown>): unknown;
};
$loadingBar: {
start(): void;
finish(): void;
error(): void;
[key: string]: unknown;
};
}
declare var $loadingBar: Window["$loadingBar"];

View File

@@ -1,10 +1,10 @@
const TokenKey = "token"; const TokenKey = "token";
const TOKEN_NAME_KEY = "tokenName"; const TOKEN_NAME_KEY = "tokenName";
let token: string | null = null; let token = null;
let tokenName: string | null = null; let tokenName = null;
export function getToken(): string | null { export function getToken() {
const storedToken = token || window.localStorage.getItem(TokenKey); const storedToken = token || window.localStorage.getItem(TokenKey);
if (!storedToken || storedToken === "null" || storedToken === "undefined") { if (!storedToken || storedToken === "null" || storedToken === "undefined") {
token = null; token = null;
@@ -15,21 +15,21 @@ export function getToken(): string | null {
return token; return token;
} }
export function setToken(tokenValue: string, tokenNameValue?: string): void { export function setToken(tokenValue, tokenNameValue) {
token = tokenValue; token = tokenValue;
tokenName = tokenNameValue || "Authorization"; tokenName = tokenNameValue || "Authorization";
window.localStorage.setItem(TokenKey, token); window.localStorage.setItem(TokenKey, token);
window.localStorage.setItem(TOKEN_NAME_KEY, tokenName); window.localStorage.setItem(TOKEN_NAME_KEY, tokenName);
} }
export function removeToken(): void { export function removeToken() {
token = null; token = null;
tokenName = null; tokenName = null;
window.localStorage.removeItem(TokenKey); window.localStorage.removeItem(TokenKey);
window.localStorage.removeItem(TOKEN_NAME_KEY); window.localStorage.removeItem(TOKEN_NAME_KEY);
} }
export function getTokenName(): string | null { export function getTokenName() {
tokenName = tokenName || window.localStorage.getItem(TOKEN_NAME_KEY); tokenName = tokenName || window.localStorage.getItem(TOKEN_NAME_KEY);
return tokenName; return tokenName;
} }

View File

@@ -1,10 +1,4 @@
function generateNumbers(min: number, max: number, count: number): number[]; function generateNumbers(min, max, count) {
function generateNumbers(min: number, max: number): number;
function generateNumbers(
min: number,
max: number,
count?: number,
): number | number[] {
if (!count) { if (!count) {
return Math.floor(Math.random() * (max - min + 1)) + min; return Math.floor(Math.random() * (max - min + 1)) + min;
} }
@@ -15,5 +9,6 @@ function generateNumbers(
} }
return numbers; return numbers;
} }
export {
export { generateNumbers }; generateNumbers
};

View File

@@ -1,12 +1,12 @@
import { JSEncrypt } from 'jsencrypt' import { JSEncrypt } from 'jsencrypt'
import { getPublicKey } from '@/api/user' import { getPublicKey } from '@/api/user'
export async function getPasswordPublicKey(): Promise<string> { export async function getPasswordPublicKey() {
const res = await getPublicKey() const res = await getPublicKey()
return res.data return res.data
} }
export function encryptPassword(plainText: string, publicKey: string): string { export function encryptPassword(plainText, publicKey) {
const encryptor = new JSEncrypt() const encryptor = new JSEncrypt()
encryptor.setPublicKey(formatPublicKey(publicKey)) encryptor.setPublicKey(formatPublicKey(publicKey))
const encrypted = encryptor.encrypt(plainText) const encrypted = encryptor.encrypt(plainText)
@@ -16,19 +16,16 @@ export function encryptPassword(plainText: string, publicKey: string): string {
return encrypted return encrypted
} }
export async function encryptPasswordPayload<T extends Record<string, unknown>>( export async function encryptPasswordPayload(payload, fields) {
payload: T,
fields: Array<keyof T>,
): Promise<T> {
const publicKey = await getPasswordPublicKey() const publicKey = await getPasswordPublicKey()
const nextPayload = { ...payload } const nextPayload = { ...payload }
for (const field of fields) { for (const field of fields) {
nextPayload[field] = encryptPassword(String(payload[field] || ''), publicKey) as T[keyof T] nextPayload[field] = encryptPassword(payload[field] || '', publicKey)
} }
return nextPayload return nextPayload
} }
function formatPublicKey(publicKey: string): string { function formatPublicKey(publicKey) {
if (!publicKey) { if (!publicKey) {
return '' return ''
} }

View File

@@ -1,574 +0,0 @@
/**
* PCD 点云文件解析工具(仅取 x/y/z 三个坐标字段,供前端三维地图渲染使用)。
*
* 支持 DATA ascii / binary / binary_compressed 三种存储方式,
* 后者按 PCL 约定需要先做 LZF 解压,且解压后是字段分块的 SOA 布局。
*/
/** 解析结果 */
export interface ParsedPointCloud {
/** 扁平存放的点坐标,顺序为 x, y, z ...(单位:米) */
positions: Float32Array;
/** 降采样后保留的点数量 */
pointCount: number;
/** 文件中的原始点数量 */
rawPointCount: number;
/** 点云包围盒,用于相机自适应取景 */
bounds: {
min: [number, number, number];
max: [number, number, number];
};
/** 估算出的地面高度(z,单位:米),用于把机器人模型与巡检路径贴合地面 */
groundZ: number;
}
interface PcdField {
name: string;
size: number;
type: string;
count: number;
}
interface PcdHeader {
fields: PcdField[];
points: number;
dataType: string;
/** 头部结束位置(数据区起始字节偏移) */
dataOffset: number;
}
/** 单个字段占用的字节数 */
function fieldByteSize(field: PcdField) {
return field.size * field.count;
}
/**
* 解析 PCD 头部;latin1 解码保证一个字符对应一个字节,便于把字符下标当作字节偏移使用。
*/
function parseHeader(bytes: Uint8Array): PcdHeader {
const headLength = Math.min(bytes.length, 65536);
const headText = new TextDecoder("latin1").decode(bytes.subarray(0, headLength));
const dataMatch = /(?:^|\r?\n)\s*DATA\s+([A-Za-z_]+)\s*(?:\r?\n)/.exec(headText);
if (!dataMatch) {
throw new Error("PCD 文件缺少 DATA 段声明");
}
const headerText = headText.slice(0, dataMatch.index);
const valuesOf = (key: string) => {
const match = headerText.match(new RegExp(`^\\s*${key}\\s+(.+)$`, "m"));
return match ? match[1].trim().split(/\s+/) : [];
};
const names = valuesOf("FIELDS");
const sizes = valuesOf("SIZE").map(Number);
const types = valuesOf("TYPE");
const counts = valuesOf("COUNT").map(Number);
const points = Number(valuesOf("POINTS")[0] || 0);
if (!names.length || names.length !== sizes.length || names.length !== types.length) {
throw new Error("PCD 头部字段描述不完整");
}
const fields: PcdField[] = names.map((name, index) => ({
name: name.toLowerCase(),
size: sizes[index] || 4,
type: (types[index] || "F").toUpperCase(),
count: counts[index] || 1,
}));
const xyzFields = fields.filter((field) => field.name === "x" || field.name === "y" || field.name === "z");
if (xyzFields.length < 3) {
throw new Error("PCD 文件缺少 x/y/z 坐标字段");
}
return {
fields,
points: points || Number(valuesOf("WIDTH")[0] || 0) * Number(valuesOf("HEIGHT")[0] || 1),
dataType: dataMatch[1].toLowerCase(),
dataOffset: dataMatch.index + dataMatch[0].length,
};
}
/** LZF 解压(PCL binary_compressed 使用的算法) */
function decompressLzf(input: Uint8Array, outputLength: number): Uint8Array {
const output = new Uint8Array(outputLength);
let inputIndex = 0;
let outputIndex = 0;
while (inputIndex < input.length) {
const control = input[inputIndex];
inputIndex += 1;
if (control < 32) {
const length = control + 1;
if (outputIndex + length > outputLength) {
throw new Error("PCD 点云数据解压越界");
}
output.set(input.subarray(inputIndex, inputIndex + length), outputIndex);
inputIndex += length;
outputIndex += length;
continue;
}
let length = control >> 5;
let reference = outputIndex - ((control & 0x1f) << 8) - 1;
if (length === 7) {
length += input[inputIndex];
inputIndex += 1;
}
reference -= input[inputIndex];
inputIndex += 1;
if (reference < 0 || outputIndex + length + 2 > outputLength) {
throw new Error("PCD 点云数据解压引用越界");
}
output[outputIndex] = output[reference];
output[outputIndex + 1] = output[reference + 1];
outputIndex += 2;
reference += 2;
for (let index = 0; index < length; index += 1) {
output[outputIndex] = output[reference];
outputIndex += 1;
reference += 1;
}
}
return output;
}
/** 按字段类型读取单个数值 */
function readFieldValue(view: DataView, offset: number, type: string, size: number) {
switch (type) {
case "F":
return size === 8 ? view.getFloat64(offset, true) : view.getFloat32(offset, true);
case "I":
if (size === 1) return view.getInt8(offset);
if (size === 2) return view.getInt16(offset, true);
if (size === 8) return Number(view.getBigInt64(offset, true));
return view.getInt32(offset, true);
case "U":
if (size === 1) return view.getUint8(offset);
if (size === 2) return view.getUint16(offset, true);
if (size === 8) return Number(view.getBigUint64(offset, true));
return view.getUint32(offset, true);
default:
return Number.NaN;
}
}
/**
* 计算 x/y/z 三个坐标字段的读取偏移。
*
* AOS(binary)逐点连续存放,坐标偏移在单点内固定,靠 pointStride 跳到下一个点;
* SOA(binary_compressed)按字段分块存放,每个坐标字段各自逐点步进 fieldStride。
*/
function resolveXyzLayout(fields: PcdField[], isSoa: boolean, points: number) {
const offsets: Record<string, number> = {};
const fieldStrides: Record<string, number> = {};
let cursor = 0;
fields.forEach((field) => {
const fieldBytes = fieldByteSize(field);
if (field.name === "x" || field.name === "y" || field.name === "z") {
offsets[field.name] = cursor;
fieldStrides[field.name] = isSoa ? field.size : 0;
}
cursor += isSoa ? fieldBytes * points : fieldBytes;
});
return { offsets, fieldStrides, pointStride: isSoa ? 0 : cursor };
}
/** 解析 ascii 文本格式的点坐标 */
function parseAsciiPoints(content: string, header: PcdHeader, target: PointTarget) {
const xyzIndex = header.fields
.map((field, index) => ({ name: field.name, index }))
.filter((item) => item.name === "x" || item.name === "y" || item.name === "z");
const indexOf = Object.fromEntries(xyzIndex.map((item) => [item.name, item.index]));
const lines = content.split(/\r?\n/);
let written = 0;
let valid = 0;
let nextKeep = 0;
for (const line of lines) {
const trimmed = line.trim();
if (!trimmed || trimmed.startsWith("#")) {
continue;
}
const parts = trimmed.split(/\s+/);
const x = Number(parts[indexOf.x]);
const y = Number(parts[indexOf.y]);
const z = Number(parts[indexOf.z]);
if (!Number.isFinite(x) || !Number.isFinite(y) || !Number.isFinite(z)) {
continue;
}
// 抽稀按有效点计数,保证取样在点云里均匀分布
if (valid >= nextKeep) {
target.positions[written * 3] = x;
target.positions[written * 3 + 1] = y;
target.positions[written * 3 + 2] = z;
written += 1;
nextKeep += target.interval;
}
valid += 1;
if (written >= target.capacity) {
break;
}
}
return { written, valid };
}
/**
* 目标点缓冲区:容量在解析前按抽稀间隔算好,解析时直接写进 Float32Array,
* 省掉"先建一份 JS number 数组再拷贝"的中间开销(大点云上是主要的内存与耗时来源)。
*/
interface PointTarget {
positions: Float32Array;
/**
* 抽稀间隔:平均每 interval 个有效点保留 1 个。
* 用浮点间隔而不是整数倍,保留点数才能精确贴近传入的上限
* (整数倍会让 30 万的上限实际只留下 19 万)。
*/
interval: number;
capacity: number;
}
/** 按原始点数与显示上限创建写入缓冲区 */
function createPointTarget(rawPointCount: number, maxPoints: number): PointTarget {
const safeRawCount = Math.max(Math.floor(rawPointCount) || 0, 1);
const interval = Math.max(safeRawCount / maxPoints, 1);
const capacity = Math.ceil(safeRawCount / interval) + 2;
return {
positions: new Float32Array(capacity * 3),
interval,
capacity,
};
}
/** 解析二进制(含压缩)格式的点坐标 */
function parseBinaryPoints(
view: DataView,
header: PcdHeader,
dataStart: number,
dataLength: number,
target: PointTarget,
) {
const isSoa = header.dataType === "binary_compressed";
const { offsets, fieldStrides, pointStride } = resolveXyzLayout(header.fields, isSoa, header.points);
let written = 0;
let valid = 0;
let nextKeep = 0;
for (let index = 0; index < header.points; index += 1) {
const base = dataStart + index * pointStride;
const xOffset = base + offsets.x + index * fieldStrides.x;
const yOffset = base + offsets.y + index * fieldStrides.y;
const zOffset = base + offsets.z + index * fieldStrides.z;
// 防止截断文件越界读取
if (Math.max(xOffset, yOffset, zOffset) + 4 > dataStart + dataLength) {
break;
}
const x = readFieldValue(view, xOffset, "F", 4);
const y = readFieldValue(view, yOffset, "F", 4);
const z = readFieldValue(view, zOffset, "F", 4);
if (!Number.isFinite(x) || !Number.isFinite(y) || !Number.isFinite(z)) {
continue;
}
// 抽稀按有效点计数,保证取样在点云里均匀分布
if (valid >= nextKeep) {
target.positions[written * 3] = x;
target.positions[written * 3 + 1] = y;
target.positions[written * 3 + 2] = z;
written += 1;
nextKeep += target.interval;
}
valid += 1;
if (written >= target.capacity) {
break;
}
}
return { written, valid };
}
/** 根据 x/y/z 扁平数组计算包围盒 */
function resolveBounds(coordinates: Float32Array, pointCount: number) {
const min: [number, number, number] = [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY];
const max: [number, number, number] = [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY];
for (let index = 0; index < pointCount; index += 1) {
for (let axis = 0; axis < 3; axis += 1) {
const value = coordinates[index * 3 + axis];
if (value < min[axis]) min[axis] = value;
if (value > max[axis]) max[axis] = value;
}
}
if (!Number.isFinite(min[0])) {
return { min: [0, 0, 0] as [number, number, number], max: [0, 0, 0] as [number, number, number] };
}
return { min, max };
}
/**
* 估算地面高度:从最低处向上找第一个点数足够密集的 z 分层。
*
* 长廊/隧道点云里地面是面积最大的水平面,用直方图取“第一个密集分层”比直接取
* 最低点更稳:既不会被地面以下的离群噪点带偏,也不受墙面点影响。
*/
function estimateGroundZ(positions: Float32Array, pointCount: number, bounds: ParsedPointCloud["bounds"]) {
const span = bounds.max[2] - bounds.min[2];
if (pointCount < 100 || span < 0.2) {
return bounds.min[2];
}
const binCount = Math.min(Math.max(Math.ceil(span / 0.05), 1), 2048);
const scale = binCount / span;
const bins = new Int32Array(binCount);
for (let index = 0; index < pointCount; index += 1) {
const bin = Math.min(Math.floor((positions[index * 3 + 2] - bounds.min[2]) * scale), binCount - 1);
bins[bin] += 1;
}
let peak = 0;
for (let index = 0; index < binCount; index += 1) {
if (bins[index] > peak) {
peak = bins[index];
}
}
// 峰值 25% 以上视为密集层,最低的那个密集层就是地面
const threshold = peak * 0.25;
let floorBin = 0;
for (let index = 0; index < binCount; index += 1) {
if (bins[index] >= threshold) {
floorBin = index;
break;
}
}
const lower = bounds.min[2] + floorBin / scale - 0.1;
const upper = bounds.min[2] + (floorBin + 1) / scale + 0.1;
let sum = 0;
let count = 0;
for (let index = 0; index < pointCount; index += 1) {
const z = positions[index * 3 + 2];
if (z >= lower && z <= upper) {
sum += z;
count += 1;
}
}
return count ? sum / count : bounds.min[2] + (floorBin + 0.5) / scale;
}
/** 地面连续平面的三角网格数据 */
export interface GroundSurface {
/** 三角形顶点坐标,按 x, y, z 排列 */
positions: Float32Array;
/** 顶点法线,全部朝上 */
normals: Float32Array;
/** 栅格边长(米) */
cellSize: number;
/** 生成平面时取用的地面带半高(米):|z - groundZ| ≤ band 的点已由平面表达 */
band: number;
/** 生成的方格数量 */
quadCount: number;
}
/**
* 用点云里的地面点栅格化出一块连续平面,用来填补点与点之间的空隙。
*
* 做法:把地面带(z 在 groundZ 附近)内的点投到二维占用栅格上,邻域膨胀一圈补掉
* 点云稀疏造成的空洞,再按占用格子生成水平三角面。长廊地面因此是连续平面,
* 墙面仍保留点云细节。
*/
export function buildGroundSurface(parsed: ParsedPointCloud): GroundSurface | null {
const { min, max } = parsed.bounds;
const spanX = Math.max(max[0] - min[0], 0.5);
const spanY = Math.max(max[1] - min[1], 0.5);
// 栅格边长随场景尺度自适应,并把总格子数限制在 20 万以内
let cellSize = Math.min(Math.max(spanX / 400, 0.06), 0.4);
while ((spanX / cellSize) * (spanY / cellSize) > 200000) {
cellSize *= 1.5;
}
const cols = Math.ceil(spanX / cellSize) + 1;
const rows = Math.ceil(spanY / cellSize) + 1;
const occupied = new Uint8Array(cols * rows);
const band = Math.max(cellSize * 0.5, 0.1);
for (let index = 0; index < parsed.pointCount; index += 1) {
if (Math.abs(parsed.positions[index * 3 + 2] - parsed.groundZ) > band) {
continue;
}
const col = Math.floor((parsed.positions[index * 3] - min[0]) / cellSize);
const row = Math.floor((parsed.positions[index * 3 + 1] - min[1]) / cellSize);
if (col < 0 || row < 0 || col >= cols || row >= rows) {
continue;
}
occupied[row * cols + col] = 1;
}
// 邻域膨胀一圈,把局部点云稀疏造成的空洞补齐
const filled = new Uint8Array(occupied);
for (let row = 0; row < rows; row += 1) {
for (let col = 0; col < cols; col += 1) {
if (!occupied[row * cols + col]) {
continue;
}
for (let rowOffset = -1; rowOffset <= 1; rowOffset += 1) {
for (let colOffset = -1; colOffset <= 1; colOffset += 1) {
const targetRow = row + rowOffset;
const targetCol = col + colOffset;
if (targetRow >= 0 && targetRow < rows && targetCol >= 0 && targetCol < cols) {
filled[targetRow * cols + targetCol] = 1;
}
}
}
}
}
let quadCount = 0;
for (let index = 0; index < filled.length; index += 1) {
if (filled[index]) {
quadCount += 1;
}
}
if (!quadCount) {
return null;
}
const positions = new Float32Array(quadCount * 18);
const normals = new Float32Array(quadCount * 18);
// 略低于点云地面,让地面点浮在平面之上,避免与平面深度打架
const planeZ = parsed.groundZ - 0.02;
let cursor = 0;
for (let row = 0; row < rows; row += 1) {
for (let col = 0; col < cols; col += 1) {
if (!filled[row * cols + col]) {
continue;
}
const x0 = min[0] + col * cellSize;
const y0 = min[1] + row * cellSize;
const x1 = x0 + cellSize;
const y1 = y0 + cellSize;
// 逆时针两个三角形(从 +Z 方向看为正面)
const corners = [x0, y0, x1, y0, x1, y1, x0, y0, x1, y1, x0, y1];
for (let corner = 0; corner < 6; corner += 1) {
positions[cursor] = corners[corner * 2];
positions[cursor + 1] = corners[corner * 2 + 1];
positions[cursor + 2] = planeZ;
normals[cursor] = 0;
normals[cursor + 1] = 0;
normals[cursor + 2] = 1;
cursor += 3;
}
}
}
return { positions, normals, cellSize, band, quadCount };
}
export interface ParsePcdOptions {
/** 保留的点数上限,超出后按该数量在点云里均匀抽稀,默认 80 万 */
maxPoints?: number;
}
/**
* 解析 PCD 点云文件,返回三维渲染所需的扁平坐标数组。
*
* @param buffer PCD 文件内容
* @param options 抽稀参数
*/
export function parsePcdPointCloud(buffer: ArrayBuffer, options: ParsePcdOptions = {}): ParsedPointCloud {
const bytes = new Uint8Array(buffer);
const header = parseHeader(bytes);
if (!header.points) {
throw new Error("PCD 文件点数量为 0");
}
const maxPoints = options.maxPoints ?? 800000;
const target = createPointTarget(header.points, maxPoints);
let parsed: { written: number; valid: number };
if (header.dataType === "ascii") {
const content = new TextDecoder("latin1").decode(bytes.subarray(header.dataOffset));
parsed = parseAsciiPoints(content, header, target);
} else if (header.dataType === "binary") {
const view = new DataView(buffer);
parsed = parseBinaryPoints(view, header, header.dataOffset, buffer.byteLength - header.dataOffset, target);
} else if (header.dataType === "binary_compressed") {
if (header.dataOffset + 8 > buffer.byteLength) {
throw new Error("PCD 压缩数据区不完整");
}
const headView = new DataView(buffer, header.dataOffset, 8);
const compressedSize = headView.getUint32(0, true);
const uncompressedSize = headView.getUint32(4, true);
const compressed = bytes.subarray(header.dataOffset + 8, header.dataOffset + 8 + compressedSize);
if (compressed.length < compressedSize) {
throw new Error("PCD 压缩数据长度与声明不符");
}
const plain = decompressLzf(compressed, uncompressedSize);
const view = new DataView(plain.buffer, plain.byteOffset, plain.byteLength);
parsed = parseBinaryPoints(view, header, 0, plain.byteLength, target);
} else {
throw new Error(`暂不支持的 PCD 数据格式:${header.dataType}`);
}
if (!parsed.written) {
throw new Error("PCD 文件中未解析到有效点");
}
const finalPointCount = parsed.written;
const finalPositions = target.positions.subarray(0, finalPointCount * 3);
const bounds = resolveBounds(finalPositions, finalPointCount);
return {
positions: finalPositions,
pointCount: finalPointCount,
rawPointCount: parsed.valid,
bounds,
groundZ: estimateGroundZ(finalPositions, finalPointCount, bounds),
};
}

View File

@@ -1,4 +1,4 @@
import axios, { type AxiosRequestConfig } from "axios"; import axios from "axios";
import { useUserStore } from "@/store/modules/user"; import { useUserStore } from "@/store/modules/user";
import { getToken, getTokenName } from "@/utils/auth"; import { getToken, getTokenName } from "@/utils/auth";
import router from "@/router"; import router from "@/router";
@@ -58,8 +58,9 @@ service.interceptors.response.use(
window.$message.error(error.response.data.msg, { window.$message.error(error.response.data.msg, {
duration: 5 * 1000, duration: 5 * 1000,
}); });
} else {
handleNoLogin();
} }
handleNoLogin();
} else { } else {
handleNoLogin(); handleNoLogin();
} }
@@ -70,21 +71,16 @@ service.interceptors.response.use(
}, },
); );
// 响应拦截器已解包 response.data,对外暴露的请求方法保持 Promise<T> 语义 export default service;
const request = <T = unknown>(config: AxiosRequestConfig): Promise<T> => {
return service.request<any, T>(config);
};
export default request; function showApiMessage(res) {
function showApiMessage(res: { msg?: string }) {
window.$message.error(res.msg || "error", { window.$message.error(res.msg || "error", {
duration: 5 * 1000, duration: 5 * 1000,
}); });
} }
// 弹窗确认防抖 // 弹窗确认防抖
let noLoginAlert: unknown = null; let noLoginAlert = null;
function handleNoLogin() { function handleNoLogin() {
if (noLoginAlert == null) { if (noLoginAlert == null) {

View File

@@ -1,114 +0,0 @@
export interface ParsedRosMapYaml {
image?: string;
resolution: number | null;
origin: [number, number, number] | null;
}
function stripInlineComment(value: string) {
let quote: string | null = null;
for (let index = 0; index < value.length; index += 1) {
const char = value[index];
const previousChar = value[index - 1];
if ((char === "'" || char === "\"") && previousChar !== "\\") {
quote = quote === char ? null : quote || char;
}
if (char === "#" && !quote) {
return value.slice(0, index).trim();
}
}
return value.trim();
}
function unquoteYamlString(value: string) {
const trimmedValue = stripInlineComment(value);
return trimmedValue.replace(/^['"]|['"]$/g, "");
}
function readScalarValue(content: string, key: string) {
const match = content.match(new RegExp(`^\\s*${key}\\s*:\\s*(.*?)\\s*$`, "m"));
return match ? stripInlineComment(match[1]) : "";
}
function parseFiniteNumber(value: string) {
const parsedValue = Number(stripInlineComment(value));
return Number.isFinite(parsedValue) ? parsedValue : null;
}
function parseInlineOrigin(content: string) {
const originValue = content.match(/^\s*origin\s*:\s*\[([^\]]+)\]\s*(?:#.*)?$/m)?.[1];
if (!originValue) {
return null;
}
const values = originValue
.split(",")
.map((value) => parseFiniteNumber(value.trim()))
.slice(0, 3);
return values.length === 3 && values.every((value) => value !== null)
? values as [number, number, number]
: null;
}
function parseBlockOrigin(content: string) {
const lines = content.split(/\r?\n/);
const values: number[] = [];
for (let index = 0; index < lines.length; index += 1) {
const originLine = lines[index].match(/^(\s*)origin\s*:\s*(?:#.*)?$/);
if (!originLine) {
continue;
}
const originIndent = originLine[1].length;
for (let nextIndex = index + 1; nextIndex < lines.length; nextIndex += 1) {
const line = lines[nextIndex];
if (!line.trim() || /^\s*#/.test(line)) {
continue;
}
const lineIndent = line.match(/^\s*/)?.[0].length ?? 0;
if (lineIndent <= originIndent) {
break;
}
const itemValue = line.match(/^\s*-\s*(.*?)\s*$/)?.[1];
const parsedValue = itemValue ? parseFiniteNumber(itemValue) : null;
if (parsedValue === null) {
break;
}
values.push(parsedValue);
if (values.length === 3) {
return values as [number, number, number];
}
}
}
return null;
}
export function parseRosMapYaml(content: string): ParsedRosMapYaml {
const imageValue = readScalarValue(content, "image");
const resolution = parseFiniteNumber(readScalarValue(content, "resolution"));
const origin = parseInlineOrigin(content) || parseBlockOrigin(content);
return {
image: imageValue ? unquoteYamlString(imageValue) : undefined,
resolution: resolution && resolution > 0 ? resolution : null,
origin,
};
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 353 KiB

View File

@@ -0,0 +1,24 @@
import { defineComponent } from "vue";
import style from "./index.module.less";
export default defineComponent({
name: "switchPageBtn",
props: {
direction: {
type: String,
required: true
},
text: {
required: true
},
active: Boolean
},
setup(props) {
return () => <div
class={[
style.btn,
props.active ? style.active : style.normal,
style[props.direction]
]}
><div class={[style.text]}>{props.text}</div></div>;
}
});

View File

@@ -1,29 +0,0 @@
import { defineComponent } from "vue";
import style from "./index.module.less";
export default defineComponent({
name: "switchPageBtn",
props: {
direction: {
type: String as () => "left" | "right",
required: true,
},
text: {
required: true,
},
active: Boolean,
},
setup(props) {
return () => (
<div
class={[
style.btn,
props.active ? style.active : style.normal,
style[props.direction],
]}
>
<div class={[style.text]}>{props.text}</div>
</div>
);
},
});

View File

@@ -1,51 +1,44 @@
import { onBeforeUnmount, ref } from "vue"; import { onBeforeUnmount, ref } from "vue";
import { EChartsOption } from "echarts";
import { generateNumbers } from "@/utils"; import { generateNumbers } from "@/utils";
export default function () { export default function () {
const option = ref<EChartsOption>({}); const option = ref({});
function refresh() { function refresh() {
option.value = { option.value = {
xAxis: { xAxis: {
type: "category", type: "category",
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"], data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
}, },
yAxis: { yAxis: {
type: "value", type: "value"
}, },
grid: { grid: {
left: "12%", left: "12%"
}, },
series: [ series: [
{ {
data: generateNumbers(1, 300, 7), data: generateNumbers(1, 300, 7),
type: "line", type: "line"
}, },
{ {
data: generateNumbers(1, 300, 7), data: generateNumbers(1, 300, 7),
type: "line", type: "line"
}, },
{ {
data: generateNumbers(1, 300, 7), data: generateNumbers(1, 300, 7),
type: "line", type: "line"
}, }
], ]
}; };
} }
refresh(); refresh();
const timer = setInterval(() => { const timer = setInterval(() => {
refresh(); refresh();
}, 3000); }, 3e3);
onBeforeUnmount(() => { onBeforeUnmount(() => {
clearInterval(timer); clearInterval(timer);
}); });
return { return {
option, option,
refresh, refresh
}; };
} }

View File

@@ -1,18 +1,15 @@
import { onBeforeUnmount, ref } from "vue"; import { onBeforeUnmount, ref } from "vue";
import { EChartsOption } from "echarts";
import { generateNumbers } from "@/utils"; import { generateNumbers } from "@/utils";
export default function () { export default function () {
const option = ref<EChartsOption>({}); const option = ref({});
function refresh() { function refresh() {
option.value = { option.value = {
tooltip: { tooltip: {
trigger: "item", trigger: "item"
}, },
legend: { legend: {
top: "5%", top: "5%",
left: "center", left: "center"
}, },
series: [ series: [
{ {
@@ -21,46 +18,42 @@ export default function () {
radius: ["40%", "70%"], radius: ["40%", "70%"],
avoidLabelOverlap: false, avoidLabelOverlap: false,
itemStyle: { itemStyle: {
borderColor: "#fff", borderColor: "#fff"
}, },
label: { label: {
show: false, show: false,
position: "center", position: "center"
}, },
emphasis: { emphasis: {
label: { label: {
show: true, show: true,
fontSize: 30, fontSize: 30,
fontWeight: "bold", fontWeight: "bold"
}, }
}, },
labelLine: { labelLine: {
show: false, show: false
}, },
data: [ data: [
{ value: generateNumbers(10, 100), name: "产品一" }, { value: generateNumbers(10, 100), name: "产品一" },
{ value: generateNumbers(10, 100), name: "产品二" }, { value: generateNumbers(10, 100), name: "产品二" },
{ value: generateNumbers(10, 100), name: "产品三" }, { value: generateNumbers(10, 100), name: "产品三" },
{ value: generateNumbers(10, 100), name: "产品四" }, { value: generateNumbers(10, 100), name: "产品四" },
{ value: generateNumbers(10, 100), name: "产品五" }, { value: generateNumbers(10, 100), name: "产品五" }
], ]
}, }
], ]
}; };
} }
refresh(); refresh();
const timer = setInterval(() => { const timer = setInterval(() => {
refresh(); refresh();
}, 3000); }, 3e3);
onBeforeUnmount(() => { onBeforeUnmount(() => {
clearInterval(timer); clearInterval(timer);
}); });
return { return {
option, option,
refresh, refresh
}; };
} }

View File

@@ -1,15 +1,12 @@
import { onBeforeUnmount, ref } from "vue"; import { onBeforeUnmount, ref } from "vue";
import { EChartsOption } from "echarts";
import { generateNumbers } from "@/utils"; import { generateNumbers } from "@/utils";
export default function () { export default function () {
const option = ref<EChartsOption>({}); const option = ref({});
function refresh() { function refresh() {
option.value = { option.value = {
tooltip: { tooltip: {
trigger: "item", trigger: "item",
formatter: "{a} <br/>{b} : {c}%", formatter: "{a} <br/>{b} : {c}%"
}, },
series: [ series: [
{ {
@@ -18,57 +15,53 @@ export default function () {
left: "center", left: "center",
width: "100%", width: "100%",
min: 0, min: 0,
max: 1000, max: 1e3,
minSize: "0%", minSize: "0%",
maxSize: "100%", maxSize: "100%",
sort: "descending", sort: "descending",
gap: 2, gap: 2,
label: { label: {
show: true, show: true,
position: "inside", position: "inside"
}, },
labelLine: { labelLine: {
length: 10, length: 10,
lineStyle: { lineStyle: {
width: 1, width: 1,
type: "solid", type: "solid"
}, }
}, },
itemStyle: { itemStyle: {
borderColor: "#fff", borderColor: "#fff",
borderWidth: 1, borderWidth: 1
}, },
emphasis: { emphasis: {
label: { label: {
fontSize: 20, fontSize: 20
}, }
}, },
data: [ data: [
{ value: generateNumbers(500, 1000), name: "访问量" }, { value: generateNumbers(500, 1e3), name: "访问量" },
{ value: generateNumbers(500, 1000), name: "注册量" }, { value: generateNumbers(500, 1e3), name: "注册量" },
{ value: generateNumbers(500, 1000), name: "浏览量" }, { value: generateNumbers(500, 1e3), name: "浏览量" },
{ value: generateNumbers(200, 500), name: "加入购物车" }, { value: generateNumbers(200, 500), name: "加入购物车" },
{ value: generateNumbers(100, 800), name: "购买" }, { value: generateNumbers(100, 800), name: "购买" },
{ value: generateNumbers(1, 20), name: "退货" }, { value: generateNumbers(1, 20), name: "退货" },
{ value: generateNumbers(1, 20), name: "取消订单" }, { value: generateNumbers(1, 20), name: "取消订单" }
], ]
}, }
], ]
}; };
} }
refresh(); refresh();
const timer = setInterval(() => { const timer = setInterval(() => {
refresh(); refresh();
}, 3000); }, 3e3);
onBeforeUnmount(() => { onBeforeUnmount(() => {
clearInterval(timer); clearInterval(timer);
}); });
return { return {
option, option,
refresh, refresh
}; };
} }

View File

@@ -1,861 +0,0 @@
import { onBeforeUnmount, ref, type Ref } from "vue";
import type {
Color,
GridHelper,
Group,
Material,
Mesh,
PerspectiveCamera,
Points,
Scene,
Vector3,
WebGLRenderer,
} from "three";
import type { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import {
buildGroundSurface,
parsePcdPointCloud,
type GroundSurface,
type ParsedPointCloud,
} from "@/utils/pcd";
/** 机器人在三维地图中的位姿(map 坐标系,单位:米/弧度) */
export interface RobotPose3D {
x: number;
y: number;
yaw: number;
}
/** 巡检路径节点(map 坐标系,单位:米) */
export interface RoutePoint3D {
x: number;
y: number;
}
/** three.js 模块类型,运行时再按需加载,避免三维依赖拖慢首页首屏 */
type ThreeModule = typeof import("three");
/** 三维模型按真实小车尺寸放大倍数,保证在长廊场景下能看清 */
const MODEL_SCALE = 2;
/**
* 点尺寸系数:点世界尺寸 = 场景尺度 / 该值,数值越大点越细。
* 方点比同尺寸圆点覆盖面积大 27%,这里已按等效覆盖率折算过。
*/
const POINT_SIZE_DIVISOR = 900;
/** 点云原始文件缓存上限,超过则不缓存,换质量档位时改为重新下载 */
const RAW_CACHE_LIMIT = 64 * 1024 * 1024;
/** 默认抽稀上限(点数),页面会按质量档位传入覆盖 */
export const DEFAULT_POINT_CAP = 800000;
/** 高度着色渐变色标(低 → 高) */
const heightColorStops: Array<[number, number, number]> = [
[0.13, 0.42, 0.78],
[0.2, 0.72, 0.86],
[0.35, 0.85, 0.55],
[0.95, 0.83, 0.35],
[0.92, 0.42, 0.36],
];
/** 按归一化高度取渐变色 */
function resolveHeightColor(three: ThreeModule, ratio: number, target: Color) {
const safeRatio = Math.min(Math.max(ratio, 0), 1);
const scaled = safeRatio * (heightColorStops.length - 1);
const index = Math.min(Math.floor(scaled), heightColorStops.length - 2);
const localRatio = scaled - index;
const start = heightColorStops[index];
const end = heightColorStops[index + 1];
return target.setRGB(
start[0] + (end[0] - start[0]) * localRatio,
start[1] + (end[1] - start[1]) * localRatio,
start[2] + (end[2] - start[2]) * localRatio,
);
}
/**
* 三维点云地图渲染:读取 PCD 点云绘制点云主体,在地面绘制巡检路径,
* 并以四轮小车模型叠加机器人实时位姿。
*
* 坐标直接使用 ROS 的 map 坐标系(x 前 / y 左 / z 上),
* 因此把相机 up 设为 +Z 后即可与二维地图保持同一套坐标语义。
*/
export default function usePointCloud3D(containerRef: Ref<HTMLElement | null>) {
const loading = ref(false);
const error = ref("");
const info = ref("");
const loaded = ref(false);
let three: ThreeModule | null = null;
let renderer: WebGLRenderer | null = null;
let scene: Scene | null = null;
let camera: PerspectiveCamera | null = null;
let controls: OrbitControls | null = null;
let gridHelper: GridHelper | null = null;
let resizeObserver: ResizeObserver | null = null;
let frameId = 0;
let needsRender = false;
let mounting = false;
let mountToken = 0;
let pointCloud: Points | null = null;
/** 地面连续平面,填补点云空隙 */
let floorMesh: Mesh | null = null;
let robotGroup: Group | null = null;
let routeGroup: Group | null = null;
let cloudBounds: ParsedPointCloud["bounds"] | null = null;
let routeBounds: ParsedPointCloud["bounds"] | null = null;
let routePoints: RoutePoint3D[] = [];
/** 点云地面高度(长廊地面),由解析阶段按 z 直方图估算 */
let groundZ = 0;
let robotPose: RobotPose3D | null = null;
let loadedUrl = "";
/** 当前已加载点云用的抽稀上限,用于判断换质量档位后是否需要重新解析 */
let loadedCap = 0;
/** 点云原始文件缓存:换质量档位重新解析时不必再次下载,超出上限则不缓存 */
let rawCache: ArrayBuffer | null = null;
let rawCacheUrl = "";
/** 用户是否手动操作过相机,操作后不再自动调整视角 */
let cameraTouched = false;
/** WASD 键盘漫游状态(仅在地图放大预览时开启),速度随场景尺度自适应 */
const pressedKeys = new Set<string>();
let keyboardEnabled = false;
let keyboardSpeed = 5;
let lastFrameTime = 0;
const ownedGeometries: Array<{ dispose: () => void }> = [];
const ownedMaterials: Material[] = [];
function trackResources(geometries: Array<{ dispose: () => void }>, materials: Material[]) {
ownedGeometries.push(...geometries);
ownedMaterials.push(...materials);
}
function requestRender() {
needsRender = true;
}
function renderFrame() {
frameId = requestAnimationFrame(renderFrame);
const now = performance.now();
const deltaMs = lastFrameTime ? now - lastFrameTime : 16;
lastFrameTime = now;
// 键盘漫游需要逐帧位移,因此先于渲染判断执行
applyKeyboardNavigation(deltaMs);
if (!needsRender || !renderer || !scene || !camera) {
return;
}
needsRender = false;
controls?.update();
renderer.render(scene, camera);
}
function isNavigationKey(key: string) {
return key === "w" || key === "a" || key === "s" || key === "d";
}
function handleNavigationKeyDown(event: KeyboardEvent) {
if (!keyboardEnabled || event.metaKey || event.ctrlKey || event.altKey) {
return;
}
const key = event.key.toLowerCase();
if (!isNavigationKey(key)) {
return;
}
// 输入框内不劫持按键,避免影响页面其它表单输入
const target = event.target as HTMLElement | null;
const tagName = target?.tagName;
if (tagName === "INPUT" || tagName === "TEXTAREA" || target?.isContentEditable) {
return;
}
event.preventDefault();
pressedKeys.add(key);
requestRender();
}
function handleNavigationKeyUp(event: KeyboardEvent) {
pressedKeys.delete(event.key.toLowerCase());
}
function clearPressedKeys() {
pressedKeys.clear();
}
/** 开启/关闭 WASD 键盘漫游,仅在三维地图放大预览时开启 */
function setKeyboardNavigation(enabled: boolean) {
if (enabled === keyboardEnabled) {
return;
}
keyboardEnabled = enabled;
pressedKeys.clear();
if (enabled) {
window.addEventListener("keydown", handleNavigationKeyDown);
window.addEventListener("keyup", handleNavigationKeyUp);
window.addEventListener("blur", clearPressedKeys);
} else {
window.removeEventListener("keydown", handleNavigationKeyDown);
window.removeEventListener("keyup", handleNavigationKeyUp);
window.removeEventListener("blur", clearPressedKeys);
}
}
/**
* 按帧位移相机:W/S 沿相机水平朝向前后移动,A/D 沿水平右方向平移,
* 位移同时作用在相机与轨道中心上,移动过程中保持当前观察姿态。
*/
function applyKeyboardNavigation(deltaMs: number) {
if (!pressedKeys.size || !three || !camera || !controls) {
return;
}
const forward = new three.Vector3();
camera.getWorldDirection(forward);
// 只在水平面内移动,避免视角俯仰把相机带进地面或天花板
forward.z = 0;
if (forward.lengthSq() < 1e-6) {
return;
}
const right = new three.Vector3().crossVectors(forward.normalize(), camera.up).normalize();
const step = keyboardSpeed * (Math.min(deltaMs, 100) / 1000);
const offset = new three.Vector3();
if (pressedKeys.has("w")) offset.addScaledVector(forward, step);
if (pressedKeys.has("s")) offset.addScaledVector(forward, -step);
if (pressedKeys.has("d")) offset.addScaledVector(right, step);
if (pressedKeys.has("a")) offset.addScaledVector(right, -step);
if (offset.lengthSq() === 0) {
return;
}
cameraTouched = true;
camera.position.add(offset);
controls.target.add(offset);
requestRender();
}
function resizeRenderer() {
const container = containerRef.value;
if (!container || !renderer || !camera) {
return;
}
const width = Math.max(container.clientWidth, 1);
const height = Math.max(container.clientHeight, 1);
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setSize(width, height, false);
requestRender();
}
/** 销毁点云主体与地面网格,释放显存 */
function clearPointCloud() {
if (pointCloud && scene) {
scene.remove(pointCloud);
pointCloud.geometry.dispose();
(pointCloud.material as Material).dispose();
pointCloud = null;
}
if (floorMesh && scene) {
scene.remove(floorMesh);
floorMesh.geometry.dispose();
(floorMesh.material as Material).dispose();
floorMesh = null;
}
}
/**
* 把地面栅格数据转成 three.js 网格。
*
* 长廊地面是最完整的一片水平面,与其靠放大点尺寸去"糊"住空隙(近处会变成大色块),
* 不如按占用栅格铺一张地面网格;对应的地面点云会被剔除,不再重复渲染。
*/
function buildFloorMesh(threeModule: ThreeModule, surface: GroundSurface) {
const geometry = new threeModule.BufferGeometry();
geometry.setAttribute("position", new threeModule.BufferAttribute(surface.positions, 3));
geometry.setAttribute("normal", new threeModule.BufferAttribute(surface.normals, 3));
return new threeModule.Mesh(
geometry,
new threeModule.MeshLambertMaterial({ color: 0x1c3b52 }),
);
}
/** 清理巡检路径对象 */
function clearRoute() {
if (!routeGroup || !scene) {
return;
}
scene.remove(routeGroup);
routeGroup.traverse((child) => {
const mesh = child as Mesh;
mesh.geometry?.dispose?.();
const material = mesh.material as Material | undefined;
material?.dispose?.();
});
routeGroup = null;
routeBounds = null;
}
/** 创建四轮小车模型(车身 + 4 个车轮 + 顶部雷达 + 地面光圈) */
function createRobotMarker() {
if (!three || !scene) {
return;
}
const group = new three.Group();
const bodyLength = 0.62 * MODEL_SCALE;
const bodyWidth = 0.42 * MODEL_SCALE;
const bodyHeight = 0.18 * MODEL_SCALE;
const wheelRadius = 0.1 * MODEL_SCALE;
const wheelWidth = 0.06 * MODEL_SCALE;
const chassisGeometry = new three.BoxGeometry(bodyLength, bodyWidth, bodyHeight);
const chassisMaterial = new three.MeshLambertMaterial({ color: 0xffb26e });
const chassis = new three.Mesh(chassisGeometry, chassisMaterial);
chassis.position.z = wheelRadius + bodyHeight / 2;
group.add(chassis);
// 顶部设备舱:小幅收窄并前移,直观区分车头
const cabinGeometry = new three.BoxGeometry(bodyLength * 0.42, bodyWidth * 0.72, bodyHeight * 0.75);
const cabinMaterial = new three.MeshLambertMaterial({ color: 0x2f5d7c });
const cabin = new three.Mesh(cabinGeometry, cabinMaterial);
cabin.position.set(bodyLength * 0.16, 0, wheelRadius + bodyHeight * 1.35);
group.add(cabin);
// 顶部雷达:圆柱轴向默认沿 Y,绕 X 轴转 90° 后立起来
const radarGeometry = new three.CylinderGeometry(0.09 * MODEL_SCALE, 0.09 * MODEL_SCALE, 0.08 * MODEL_SCALE, 20);
const radarMaterial = new three.MeshLambertMaterial({ color: 0x66d7ff });
const radar = new three.Mesh(radarGeometry, radarMaterial);
radar.rotation.x = Math.PI / 2;
radar.position.set(bodyLength * 0.16, 0, wheelRadius + bodyHeight * 1.35 + bodyHeight * 0.42);
group.add(radar);
// 四个车轮:圆柱轴向默认沿 Y,正好是车轮的滚动轴
const wheelGeometry = new three.CylinderGeometry(wheelRadius, wheelRadius, wheelWidth, 18);
const wheelMaterial = new three.MeshLambertMaterial({ color: 0x1b2733 });
const wheelX = bodyLength * 0.32;
const wheelY = bodyWidth / 2 + wheelWidth / 2 - 0.01 * MODEL_SCALE;
const wheelPositions: Array<[number, number]> = [
[wheelX, wheelY],
[wheelX, -wheelY],
[-wheelX, wheelY],
[-wheelX, -wheelY],
];
for (const [x, y] of wheelPositions) {
const wheel = new three.Mesh(wheelGeometry, wheelMaterial);
wheel.position.set(x, y, wheelRadius);
group.add(wheel);
}
// 车头朝向箭头,方便从远处判断朝向
const arrow = new three.ArrowHelper(
new three.Vector3(1, 0, 0),
new three.Vector3(bodyLength * 0.5, 0, wheelRadius + bodyHeight * 0.5),
0.85 * MODEL_SCALE,
0xffd479,
0.22 * MODEL_SCALE,
0.14 * MODEL_SCALE,
);
group.add(arrow);
// 地面光圈:长廊地图下车体很小,用光圈保证远距离也能定位小车
const glowGeometry = new three.CircleGeometry(0.75 * MODEL_SCALE, 32);
const glowMaterial = new three.MeshBasicMaterial({
color: 0x66d7ff,
transparent: true,
opacity: 0.22,
depthWrite: false,
});
const glow = new three.Mesh(glowGeometry, glowMaterial);
glow.position.z = 0.04;
glow.renderOrder = 1;
group.add(glow);
trackResources(
[chassisGeometry, cabinGeometry, radarGeometry, wheelGeometry, glowGeometry],
[chassisMaterial, cabinMaterial, radarMaterial, wheelMaterial, glowMaterial],
);
robotGroup = group;
scene.add(group);
updateRobotMarker();
}
function updateRobotMarker() {
if (!robotGroup) {
return;
}
if (!robotPose) {
robotGroup.visible = false;
requestRender();
return;
}
robotGroup.visible = true;
robotGroup.position.set(robotPose.x, robotPose.y, groundZ);
// 模型内部正前方为 +X,随 yaw 绕 Z 轴旋转即得到实际朝向
robotGroup.rotation.z = robotPose.yaw;
requestRender();
}
/** 相机取景范围:点云与巡检路径的并集,保证路径一定在视野内 */
function resolveFrameBounds() {
if (!cloudBounds) {
return null;
}
if (!routeBounds) {
return cloudBounds;
}
return {
min: [
Math.min(cloudBounds.min[0], routeBounds.min[0]),
Math.min(cloudBounds.min[1], routeBounds.min[1]),
Math.min(cloudBounds.min[2], routeBounds.min[2]),
] as [number, number, number],
max: [
Math.max(cloudBounds.max[0], routeBounds.max[0]),
Math.max(cloudBounds.max[1], routeBounds.max[1]),
Math.max(cloudBounds.max[2], routeBounds.max[2]),
] as [number, number, number],
};
}
/**
* 默认视角:巡检场景是单向长廊,沿走廊方向侧视最贴合宽扁的地图面板。
* 相机在走廊侧向按视口宽高比算出刚好装下整条走廊的距离,再抬高一个仰角。
*/
function frameCamera() {
if (!three || !camera || !controls) {
return;
}
const bounds = resolveFrameBounds();
if (!bounds) {
return;
}
const { min, max } = bounds;
const sizeX = Math.max(max[0] - min[0], 0.5);
const sizeY = Math.max(max[1] - min[1], 0.5);
const sizeZ = Math.max(max[2] - min[2], 0.5);
// 巡检路径优先作为取景中心,没配置路径时回到点云中心
const target = routeBounds
? new three.Vector3(
(routeBounds.min[0] + routeBounds.max[0]) / 2,
(routeBounds.min[1] + routeBounds.max[1]) / 2,
(routeBounds.min[2] + routeBounds.max[2]) / 2,
)
: new three.Vector3(
(min[0] + max[0]) / 2,
(min[1] + max[1]) / 2,
(min[2] + max[2]) / 2,
);
const alongX = sizeX >= sizeY;
const length = alongX ? sizeX : sizeY;
const aspect = camera.aspect || 16 / 9;
const halfVFov = (camera.fov * Math.PI) / 360;
const halfHFov = Math.atan(Math.tan(halfVFov) * aspect);
const distance = Math.max(
(length / 2) / Math.tan(halfHFov),
(sizeZ / 2) / Math.tan(halfVFov),
Math.min(sizeX, sizeY) * 1.2,
3,
) * 1.05;
const elevation = 0.3;
const horizontal = distance * Math.cos(elevation);
const vertical = distance * Math.sin(elevation);
const offset = alongX
? new three.Vector3(-length * 0.06, -horizontal, vertical)
: new three.Vector3(-horizontal, -length * 0.06, vertical);
controls.target.copy(target);
camera.position.copy(target).add(offset);
camera.near = Math.max(distance / 5000, 0.05);
camera.far = distance * 20;
camera.updateProjectionMatrix();
controls.update();
requestRender();
}
/** 惰性初始化 three.js 场景(首次切到三维视图时调用) */
async function mount() {
const container = containerRef.value;
if (!container || renderer || mounting) {
return;
}
mounting = true;
const token = ++mountToken;
try {
const [threeModule, orbitModule] = await Promise.all([
import("three"),
import("three/examples/jsm/controls/OrbitControls.js"),
]);
// 加载期间视图被销毁或容器已被移除时放弃初始化
if (token !== mountToken || !containerRef.value) {
return;
}
three = threeModule;
renderer = new threeModule.WebGLRenderer({ antialias: true, alpha: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
renderer.setClearColor(0x000000, 0);
container.appendChild(renderer.domElement);
scene = new threeModule.Scene();
camera = new threeModule.PerspectiveCamera(55, 1, 0.1, 5000);
// Z 轴朝上,直接使用 ROS 坐标系
camera.up.set(0, 0, 1);
controls = new orbitModule.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.08;
controls.addEventListener("change", requestRender);
controls.addEventListener("start", () => {
cameraTouched = true;
});
scene.add(new threeModule.AmbientLight(0xffffff, 1.6));
const light = new threeModule.DirectionalLight(0xffffff, 1.1);
light.position.set(1, -1.6, 2.4);
scene.add(light);
gridHelper = new threeModule.GridHelper(60, 60, 0x2f4a63, 0x1d3145);
// GridHelper 默认在 XZ 平面,绕 X 轴旋转 90° 后铺在 XY 平面
gridHelper.rotation.x = Math.PI / 2;
scene.add(gridHelper);
createRobotMarker();
if (routePoints.length) {
buildRoute();
}
resizeObserver = new ResizeObserver(() => resizeRenderer());
resizeObserver.observe(container);
resizeRenderer();
renderFrame();
} catch (mountError) {
console.error(mountError);
error.value = "三维视图初始化失败,请确认浏览器支持 WebGL";
dispose();
} finally {
mounting = false;
}
}
/** 销毁 three.js 场景与事件监听 */
function dispose() {
mountToken += 1;
setKeyboardNavigation(false);
cancelAnimationFrame(frameId);
frameId = 0;
needsRender = false;
lastFrameTime = 0;
resizeObserver?.disconnect();
resizeObserver = null;
controls?.removeEventListener("change", requestRender);
controls?.dispose();
controls = null;
clearPointCloud();
clearRoute();
gridHelper = null;
ownedGeometries.splice(0).forEach((geometry) => geometry.dispose());
ownedMaterials.splice(0).forEach((material) => material.dispose());
if (robotGroup && scene) {
scene.remove(robotGroup);
}
robotGroup = null;
if (renderer) {
renderer.dispose();
renderer.domElement.remove();
renderer = null;
}
scene = null;
camera = null;
three = null;
}
/**
* 拉取并渲染 PCD 点云文件。
*
* @param url 点云文件地址
* @param maxPoints 抽稀上限(点数),决定渲染压力
*/
async function loadPointCloud(url: string, maxPoints = DEFAULT_POINT_CAP) {
// 三维视图未初始化时不做任何请求,交由切换到三维视图时再加载
if (!three || !renderer || !scene) {
return;
}
if (!url) {
clearPointCloud();
clearRoute();
cloudBounds = null;
groundZ = 0;
loaded.value = false;
loadedUrl = "";
loadedCap = 0;
rawCache = null;
rawCacheUrl = "";
info.value = "";
// 未配置点云由页面提示,不额外报错
error.value = "";
updateRobotMarker();
requestRender();
return;
}
// 同一文件且档位未变才跳过,换档位需要重新解析
if (loadedUrl === url && pointCloud && loadedCap === maxPoints) {
return;
}
loading.value = true;
error.value = "";
try {
let buffer: ArrayBuffer;
if (rawCacheUrl === url && rawCache) {
buffer = rawCache;
} else {
const response = await fetch(url);
if (!response.ok) {
throw new Error("点云文件访问失败");
}
buffer = await response.arrayBuffer();
// 缓存原始文件,换档位重新解析时不必再下载一次
rawCache = buffer.byteLength <= RAW_CACHE_LIMIT ? buffer : null;
rawCacheUrl = url;
}
const parsed = parsePcdPointCloud(buffer, { maxPoints });
const threeModule = three;
if (!threeModule || !renderer || !scene) {
return;
}
clearPointCloud();
// 先算地面平面:地面带内的点改由平面表达,下面构建点云时直接剔除,避免重复渲染
const surface = buildGroundSurface(parsed);
const groundBand = surface ? surface.band : 0;
const height = Math.max(parsed.bounds.max[2] - parsed.groundZ, 0.001);
const positions = new Float32Array(parsed.pointCount * 3);
const colors = new Float32Array(parsed.pointCount * 3);
const color = new threeModule.Color();
let keptCount = 0;
for (let index = 0; index < parsed.pointCount; index += 1) {
const x = parsed.positions[index * 3];
const y = parsed.positions[index * 3 + 1];
const z = parsed.positions[index * 3 + 2];
if (surface && Math.abs(z - parsed.groundZ) <= groundBand) {
continue;
}
const ratio = (z - parsed.groundZ) / height;
resolveHeightColor(threeModule, ratio, color);
positions[keptCount * 3] = x;
positions[keptCount * 3 + 1] = y;
positions[keptCount * 3 + 2] = z;
colors[keptCount * 3] = color.r;
colors[keptCount * 3 + 1] = color.g;
colors[keptCount * 3 + 2] = color.b;
keptCount += 1;
}
const geometry = new threeModule.BufferGeometry();
geometry.setAttribute(
"position",
new threeModule.BufferAttribute(positions.subarray(0, keptCount * 3), 3),
);
geometry.setAttribute(
"color",
new threeModule.BufferAttribute(colors.subarray(0, keptCount * 3), 3),
);
const extent = Math.max(
parsed.bounds.max[0] - parsed.bounds.min[0],
parsed.bounds.max[1] - parsed.bounds.min[1],
height,
);
// 方块点:不挂点精灵贴图,按默认方点渲染
const material = new threeModule.PointsMaterial({
size: Math.min(Math.max(extent / POINT_SIZE_DIVISOR, 0.02), 0.18),
sizeAttenuation: true,
vertexColors: true,
});
pointCloud = new threeModule.Points(geometry, material);
scene.add(pointCloud);
// 地面单独铺一块连续平面,对应的地面点已在上面剔除
if (surface) {
floorMesh = buildFloorMesh(threeModule, surface);
scene.add(floorMesh);
}
cloudBounds = parsed.bounds;
groundZ = parsed.groundZ;
loadedUrl = url;
loadedCap = maxPoints;
loaded.value = true;
const keptText = `${keptCount.toLocaleString("en-US")} 点 + 地面平面`;
info.value = parsed.pointCount === parsed.rawPointCount
? keptText
: `${keptText}(原始 ${parsed.rawPointCount.toLocaleString("en-US")} 点,已抽稀)`;
// 参考网格铺到地面平面之下,只在地面平面之外的区域可见,避免与平面打架
if (gridHelper) {
gridHelper.position.z = groundZ - 0.08;
const gridScale = Math.max(extent / 60, 1) * 1.2;
gridHelper.scale.set(gridScale, gridScale, 1);
}
// 键盘漫游速度随场景尺度自适应,长廊下车速更快
keyboardSpeed = Math.min(Math.max(extent / 12, 1.5), 15);
updateRobotMarker();
buildRoute();
if (!cameraTouched) {
frameCamera();
}
} catch (loadError) {
console.error(loadError);
loaded.value = false;
loadedUrl = "";
error.value = loadError instanceof Error ? loadError.message : "点云加载失败";
} finally {
loading.value = false;
}
}
/** 在地面绘制巡检路径(只画路线本身,不标注途经点/业务点) */
function buildRoute() {
if (!three || !scene) {
return;
}
clearRoute();
if (routePoints.length < 2) {
requestRender();
return;
}
const group = new three.Group();
const z = groundZ + 0.06;
const extent = cloudBounds
? Math.max(cloudBounds.max[0] - cloudBounds.min[0], cloudBounds.max[1] - cloudBounds.min[1])
: 20;
const tubeRadius = Math.min(Math.max(extent / 400, 0.06), 0.3);
const curvePoints: Vector3[] = [];
for (const point of routePoints) {
curvePoints.push(new three.Vector3(point.x, point.y, z));
}
// 只绘制路径本身,不画途经点/业务点
const curve = new three.CatmullRomCurve3(curvePoints, false, "catmullrom", 0.02);
const tubeGeometry = new three.TubeGeometry(curve, Math.max(routePoints.length * 12, 64), tubeRadius, 10, false);
const tubeMaterial = new three.MeshBasicMaterial({ color: 0x66d7ff });
group.add(new three.Mesh(tubeGeometry, tubeMaterial));
routeGroup = group;
routeBounds = {
min: [
Math.min(...routePoints.map((point) => point.x)),
Math.min(...routePoints.map((point) => point.y)),
z,
],
max: [
Math.max(...routePoints.map((point) => point.x)),
Math.max(...routePoints.map((point) => point.y)),
z,
],
};
scene.add(group);
requestRender();
}
/** 更新巡检路径数据(来自后端巡检任务节点),路径到达后如未手动操作过相机则重新取景 */
function setRoute(points: RoutePoint3D[]) {
routePoints = points;
buildRoute();
if (!cameraTouched && cloudBounds) {
frameCamera();
}
}
/** 更新机器人实时位姿标记 */
function setRobotPose(pose: RobotPose3D | null) {
robotPose = pose;
updateRobotMarker();
}
/** 重置相机到默认(沿长廊侧视)视角 */
function resetView() {
cameraTouched = false;
frameCamera();
}
onBeforeUnmount(dispose);
return {
loading,
error,
info,
loaded,
mount,
dispose,
loadPointCloud,
setRoute,
setRobotPose,
setKeyboardNavigation,
resetView,
};
}

View File

@@ -1,10 +1,7 @@
import { onBeforeUnmount, ref } from "vue"; import { onBeforeUnmount, ref } from "vue";
import { EChartsOption } from "echarts";
import { generateNumbers } from "@/utils"; import { generateNumbers } from "@/utils";
export default function () { export default function () {
const option = ref<EChartsOption>({}); const option = ref({});
function refresh() { function refresh() {
option.value = { option.value = {
radar: { radar: {
@@ -14,9 +11,9 @@ export default function () {
{ name: "品质", max: 200 }, { name: "品质", max: 200 },
{ name: "客户支持", max: 200 }, { name: "客户支持", max: 200 },
{ name: "可持续性", max: 200 }, { name: "可持续性", max: 200 },
{ name: "效果", max: 200 }, { name: "效果", max: 200 }
], ],
radius: 100, radius: 100
}, },
series: [ series: [
{ {
@@ -24,26 +21,22 @@ export default function () {
data: [ data: [
{ {
value: generateNumbers(1, 200, 6), value: generateNumbers(1, 200, 6),
areaStyle: {}, areaStyle: {}
}, }
], ]
}, }
], ]
}; };
} }
refresh(); refresh();
const timer = setInterval(() => { const timer = setInterval(() => {
refresh(); refresh();
}, 3000); }, 3e3);
onBeforeUnmount(() => { onBeforeUnmount(() => {
clearInterval(timer); clearInterval(timer);
}); });
return { return {
option, option,
refresh, refresh
}; };
} }

View File

@@ -1,43 +1,40 @@
import { onBeforeUnmount, ref } from "vue"; import { onBeforeUnmount, ref } from "vue";
import { EChartsOption } from "echarts";
import { generateNumbers } from "@/utils"; import { generateNumbers } from "@/utils";
export default function () { export default function () {
const option = ref<EChartsOption>({}); const option = ref({});
function refresh() { function refresh() {
option.value = { option.value = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { axisPointer: {
type: "shadow", type: "shadow"
}, }
}, },
legend: { legend: {
top: "5%", top: "5%",
itemStyle: { itemStyle: {
borderColor: "#fff", borderColor: "#fff",
borderWidth: 2, borderWidth: 2
}, }
}, },
grid: { grid: {
left: "10%", left: "10%",
bottom: "8%", bottom: "8%",
containLabel: true, containLabel: true
}, },
xAxis: [ xAxis: [
{ {
type: "value", type: "value"
}, }
], ],
yAxis: [ yAxis: [
{ {
type: "category", type: "category",
axisTick: { axisTick: {
show: false, show: false
}, },
data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"], data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"]
}, }
], ],
series: [ series: [
{ {
@@ -45,53 +42,49 @@ export default function () {
type: "bar", type: "bar",
label: { label: {
show: true, show: true,
position: "inside", position: "inside"
}, },
emphasis: { emphasis: {
focus: "series", focus: "series"
}, },
data: generateNumbers(1, 200, 7), data: generateNumbers(1, 200, 7)
}, },
{ {
name: "购买", name: "购买",
type: "bar", type: "bar",
stack: "Total", stack: "Total",
label: { label: {
show: true, show: true
}, },
emphasis: { emphasis: {
focus: "series", focus: "series"
}, },
data: generateNumbers(1, 300, 7), data: generateNumbers(1, 300, 7)
}, },
{ {
name: "退货", name: "退货",
type: "bar", type: "bar",
stack: "Total", stack: "Total",
label: { label: {
show: true, show: true
}, },
emphasis: { emphasis: {
focus: "series", focus: "series"
}, },
data: generateNumbers(-50, -10, 7), data: generateNumbers(-50, -10, 7)
}, }
], ]
}; };
} }
refresh(); refresh();
const timer = setInterval(() => { const timer = setInterval(() => {
refresh(); refresh();
}, 3000); }, 3e3);
onBeforeUnmount(() => { onBeforeUnmount(() => {
clearInterval(timer); clearInterval(timer);
}); });
return { return {
option, option,
refresh, refresh
}; };
} }

View File

@@ -1,10 +1,7 @@
import { onBeforeUnmount, ref } from "vue"; import { onBeforeUnmount, ref } from "vue";
import { EChartsOption } from "echarts";
import { generateNumbers } from "@/utils"; import { generateNumbers } from "@/utils";
export default function () { export default function () {
const option = ref<EChartsOption>({}); const option = ref({});
function refresh() { function refresh() {
option.value = { option.value = {
xAxis: {}, xAxis: {},
@@ -19,8 +16,8 @@ export default function () {
generateNumbers(1, 10, 2), generateNumbers(1, 10, 2),
generateNumbers(1, 10, 2), generateNumbers(1, 10, 2),
[8.07, 6.95], [8.07, 6.95],
[13.0, 7.58], [13, 7.58],
[14.0, 7.66], [14, 7.66],
[13.4, 6.81], [13.4, 6.81],
generateNumbers(1, 10, 2), generateNumbers(1, 10, 2),
generateNumbers(1, 10, 2), generateNumbers(1, 10, 2),
@@ -34,26 +31,22 @@ export default function () {
generateNumbers(1, 10, 2), generateNumbers(1, 10, 2),
generateNumbers(1, 10, 2), generateNumbers(1, 10, 2),
generateNumbers(1, 10, 2), generateNumbers(1, 10, 2),
[5.02, 5.68], [5.02, 5.68]
], ],
type: "scatter", type: "scatter"
}, }
], ]
}; };
} }
refresh(); refresh();
const timer = setInterval(() => { const timer = setInterval(() => {
refresh(); refresh();
}, 3000); }, 3e3);
onBeforeUnmount(() => { onBeforeUnmount(() => {
clearInterval(timer); clearInterval(timer);
}); });
return { return {
option, option,
refresh, refresh
}; };
} }

File diff suppressed because it is too large Load Diff

View File

@@ -1,54 +1,24 @@
<script lang="ts" setup> <script setup>
import { computed } from "vue"; import { computed } from "vue";
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from "vue-router";
import backgroundImage from "./assets/循环背景.png"; import SwitchPageBtn from "./components/btn/index.jsx";
import bottomNavCenter from "@/assets/底部.png"; import backgroundVideo from "./assets/循环背景动画.mp4";
import bottomNavEquipment from "@/assets/底部-1.png";
import bottomNavVideo from "@/assets/底部-2.png";
import bottomNavAlarm from "@/assets/底部-3.png";
import bottomNavPatrol from "@/assets/底部-4.png";
import bottomNavReport from "@/assets/底部-5.png";
interface DashboardTab {
id: number;
text: string;
path: string;
// 热区在底部导航图上的定位(百分比,对应 底部.png 内菜单项位置)
left: string;
width: string;
}
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
const tabs = {
// 底部导航项:left/width 按底部导航图(2715x140)中各菜单的实际像素区间实测换算 left: [
// 对应像素:监管中心 327-717、设备管理 717-1037、视频中心 1041-1337、 { id: 1, text: "监管中心", path: "/dashboard/integrated-center" },
// 告警管理 1344-1669、巡检记录 1676-1989、统计分析 1998-2407 { id: 2, text: "设备管理", path: "/dashboard/equipment-management" },
const tabs: DashboardTab[] = [ { id: 3, text: "视频中心", path: "/dashboard/video-center" }
{ id: 1, text: "监管中心", path: "/dashboard/integrated-center", left: "12.0%", width: "14.4%" }, ],
{ id: 2, text: "设备管理", path: "/dashboard/equipment-management", left: "26.4%", width: "11.8%" }, right: [
{ id: 3, text: "视频中心", path: "/dashboard/video-center", left: "38.3%", width: "10.9%" }, { id: 4, text: "告警管理", path: "/dashboard/alarm-management" },
{ id: 4, text: "告警管理", path: "/dashboard/alarm-management", left: "49.5%", width: "12.0%" }, { id: 5, text: "巡检记录", path: "/dashboard/patrol-plan" },
{ id: 5, text: "巡检记录", path: "/dashboard/patrol-plan", left: "61.7%", width: "11.6%" }, { id: 6, text: "统计分析", path: "/dashboard/data-report" }
{ id: 6, text: "统计分析", path: "/dashboard/data-report", left: "73.6%", width: "15.0%" }, ]
];
const activeTabId = computed(() => Number(route.meta.tabId) || 1);
// 各菜单对应的底部导航图(图片本身已带当前菜单的高亮效果)
const bottomNavImages: Record<number, string> = {
1: bottomNavCenter, // 监管中心
2: bottomNavEquipment, // 设备管理
3: bottomNavVideo, // 视频中心
4: bottomNavAlarm, // 告警管理
5: bottomNavPatrol, // 巡检记录
6: bottomNavReport, // 统计分析
}; };
const activeTabId = computed(() => Number(route.meta.tabId) || 1);
// 当前页面高亮的底部导航图 function switchPage(tab) {
const bottomNavImage = computed(() => bottomNavImages[activeTabId.value] ?? bottomNavCenter);
function switchPage(tab: DashboardTab) {
if (route.path !== tab.path) { if (route.path !== tab.path) {
router.push(tab.path); router.push(tab.path);
} }
@@ -57,29 +27,43 @@ function switchPage(tab: DashboardTab) {
<template> <template>
<div class="dashboard"> <div class="dashboard">
<!-- 背景使用视频首帧截图,避免播放动画 --> <video
<img class="background" :src="backgroundImage" alt="" /> autoplay
class="background"
loop
muted
preload="auto"
:src="backgroundVideo"
></video>
<div class="main"> <div class="main">
<div class="btn-group">
<div class="left">
<SwitchPageBtn
v-for="tab in tabs.left"
:key="tab.id"
:active="activeTabId === tab.id"
:text="tab.text"
direction="left"
@click="switchPage(tab)"
/>
</div>
<div class="right">
<SwitchPageBtn
v-for="tab in tabs.right"
:key="tab.id"
:active="activeTabId === tab.id"
:text="tab.text"
direction="right"
@click="switchPage(tab)"
/>
</div>
</div>
<div class="content-stage"> <div class="content-stage">
<RouterView v-slot="{ Component, route }"> <RouterView v-slot="{ Component, route }">
<component :is="Component" :key="route.fullPath" /> <component :is="Component" :key="route.fullPath" />
</RouterView> </RouterView>
</div> </div>
</div> </div>
<!-- 底部导航:使用整张导航图,菜单项用透明热区覆盖 -->
<nav class="bottom-nav" :style="{ backgroundImage: `url(${bottomNavImage})` }">
<button
v-for="tab in tabs"
:key="tab.id"
:class="['nav-hit', { active: activeTabId === tab.id }]"
:style="{ left: tab.left, width: tab.width }"
type="button"
:aria-label="tab.text"
@click="switchPage(tab)"
>
<span class="nav-hit-label">{{ tab.text }}</span>
</button>
</nav>
</div> </div>
</template> </template>

View File

@@ -1,105 +1,65 @@
<script lang="ts" setup> <script setup>
import { NImage } from "naive-ui";
import { computed, onMounted, ref } from "vue"; import { computed, onMounted, ref } from "vue";
import { import {
getAlarmPage, getAlarmPage
type RosInspectionRecordLineImage,
} from "@/api/alarm"; } from "@/api/alarm";
import { BASE_URL } from "@/utils/request"; import { BASE_URL } from "@/utils/request";
import { getRecentAlertPhoto } from "../shared/alertPhotos"; import { getRecentAlertPhoto } from "../shared/alertPhotos";
const recognizeTypeMap = {
interface AlarmRecord {
id: string;
type: string;
robot: string;
photo: string;
status: RecognitionStatusText;
time: string;
position: string;
mileage: string;
result: string;
warning: boolean;
}
type RecognitionStatusText = "待执行" | "执行中" | "执行成功" | "执行失败" | "未知状态";
type WarningFilterValue = "" | "true" | "false";
interface AlarmPageResult {
total?: number;
data?: RosInspectionRecordLineImage[];
}
interface AlarmPageResponse {
data?: AlarmPageResult;
}
const recognizeTypeMap: Record<number, string> = {
100: "局部高温", 100: "局部高温",
1: "电缆表面破损", 1: "电缆表面破损",
2: "桥架断裂", 2: "桥架断裂",
3: "隧道积水", 3: "隧道积水",
4: "墙体渗漏", 4: "墙体裂缝"
}; };
const recognitionStatusMap = {
const recognitionStatusMap: Record<number, RecognitionStatusText> = {
0: "待执行", 0: "待执行",
1: "执行中", 1: "执行中",
2: "执行成功", 2: "执行成功",
3: "执行失败", 3: "执行失败"
}; };
const alarmNo = ref(""); const alarmNo = ref("");
const recognizeType = ref(""); const recognizeType = ref("");
const warningFilter = ref<WarningFilterValue>("true"); const warningFilter = ref("true");
const startTime = ref(""); const startTime = ref("");
const endTime = ref(""); const endTime = ref("");
const alarms = ref<AlarmRecord[]>([]); const alarms = ref([]);
const totalAlarms = ref(0); const totalAlarms = ref(0);
const listLoading = ref(false); const listLoading = ref(false);
const listError = ref(""); const listError = ref("");
const pageSize = 10; const pageSize = 10;
const currentPage = ref(1); const currentPage = ref(1);
const totalPages = computed(
const totalPages = computed(() => () => Math.max(1, Math.ceil(totalAlarms.value / pageSize))
Math.max(1, Math.ceil(totalAlarms.value / pageSize)),
); );
const pagedAlarms = computed(() => alarms.value); const pagedAlarms = computed(() => alarms.value);
const visiblePages = computed(() => { const visiblePages = computed(() => {
const pages: number[] = []; const pages = [];
const start = Math.max(1, currentPage.value - 2); const start = Math.max(1, currentPage.value - 2);
const end = Math.min(totalPages.value, start + 4); const end = Math.min(totalPages.value, start + 4);
for (let page = start; page <= end; page += 1) { for (let page = start; page <= end; page += 1) {
pages.push(page); pages.push(page);
} }
return pages; return pages;
}); });
function getAlarmStatusClass(status) {
function getAlarmStatusClass(status: AlarmRecord["status"]) { const classMap = {
const classMap: Record<AlarmRecord["status"], string> = {
待执行: "alarm-status-pending", 待执行: "alarm-status-pending",
执行中: "alarm-status-handling", 执行中: "alarm-status-handling",
执行成功: "alarm-status-finished", 执行成功: "alarm-status-finished",
执行失败: "alarm-status-false", 执行失败: "alarm-status-false",
未知状态: "alarm-status-false", 未知状态: "alarm-status-false"
}; };
return classMap[status]; return classMap[status];
} }
function setPage(page) {
function setPage(page: number) {
currentPage.value = Math.min(Math.max(page, 1), totalPages.value); currentPage.value = Math.min(Math.max(page, 1), totalPages.value);
fetchAlarmList(); fetchAlarmList();
} }
function handleSearch() { function handleSearch() {
currentPage.value = 1; currentPage.value = 1;
fetchAlarmList(); fetchAlarmList();
} }
function handleClear() { function handleClear() {
alarmNo.value = ""; alarmNo.value = "";
recognizeType.value = ""; recognizeType.value = "";
@@ -108,28 +68,23 @@ function handleClear() {
endTime.value = ""; endTime.value = "";
handleSearch(); handleSearch();
} }
// 请求告警分页列表并更新表格数据
async function fetchAlarmList() { async function fetchAlarmList() {
listLoading.value = true; listLoading.value = true;
listError.value = ""; listError.value = "";
try { try {
const response = (await getAlarmPage({ const response = await getAlarmPage({
page: currentPage.value, page: currentPage.value,
limit: pageSize, limit: pageSize,
orderList: [{ property: 'createTime', asc: false }],
query: { query: {
recognizeType: normalizeRecognizeType(recognizeType.value), recognizeType: normalizeRecognizeType(recognizeType.value),
warning: normalizeWarningFilter(warningFilter.value), warning: normalizeWarningFilter(warningFilter.value),
startTime: normalizeDateTime(startTime.value), startTime: normalizeDateTime(startTime.value),
endTime: normalizeDateTime(endTime.value), endTime: normalizeDateTime(endTime.value),
id: alarmNo.value.trim() || undefined, id: alarmNo.value.trim() || void 0
}, }
})) as AlarmPageResponse; });
const result = response.data; const result = response.data;
const rows = result?.data ?? []; const rows = result?.data ?? [];
alarms.value = rows.map((record, index) => normalizeAlarmRecord(record, index)); alarms.value = rows.map((record, index) => normalizeAlarmRecord(record, index));
totalAlarms.value = result?.total ?? rows.length; totalAlarms.value = result?.total ?? rows.length;
} catch (error) { } catch (error) {
@@ -141,11 +96,8 @@ async function fetchAlarmList() {
listLoading.value = false; listLoading.value = false;
} }
} }
function normalizeAlarmRecord(record, index) {
// 将后端告警记录转换为页面表格展示结构
function normalizeAlarmRecord(record: RosInspectionRecordLineImage, index: number): AlarmRecord {
const type = getRecognizeTypeText(record.recognizeType); const type = getRecognizeTypeText(record.recognizeType);
return { return {
id: record.id || record.recordActionId || record.recordId || `AL-${index + 1}`, id: record.id || record.recordActionId || record.recordId || `AL-${index + 1}`,
type, type,
@@ -154,66 +106,46 @@ function normalizeAlarmRecord(record: RosInspectionRecordLineImage, index: numbe
status: getRecognitionStatusText(record.recognitionStatus), status: getRecognitionStatusText(record.recognitionStatus),
time: record.captureTime || record.createTime || "--", time: record.captureTime || record.createTime || "--",
position: formatPosition(record), position: formatPosition(record),
mileage: record.mileageLabel || "--",
result: record.warningValue || record.recognitionResult || record.failReason || "--", result: record.warningValue || record.recognitionResult || record.failReason || "--",
warning: Boolean(record.warning), warning: Boolean(record.warning)
}; };
} }
function getCarName(record) {
function getCarName(record: RosInspectionRecordLineImage) {
return record.car?.name || record.car?.deviceNo || record.car?.deviceKey || record.carId || "未知设备"; return record.car?.name || record.car?.deviceNo || record.car?.deviceKey || record.carId || "未知设备";
} }
function getRecognizeTypeText(type) {
function getRecognizeTypeText(type?: number) {
return type ? recognizeTypeMap[type] ?? "未知告警" : "未知告警"; return type ? recognizeTypeMap[type] ?? "未知告警" : "未知告警";
} }
function getRecognitionStatusText(status) {
function getRecognitionStatusText(status?: number) {
return typeof status === "number" ? recognitionStatusMap[status] ?? "未知状态" : "未知状态"; return typeof status === "number" ? recognitionStatusMap[status] ?? "未知状态" : "未知状态";
} }
function buildFileAccessUrl(fileUrl) {
// 相对文件地址通过接口代理访问,避免开发环境直接请求后端静态路径失败 if (!fileUrl || /^(https?:)?\/\//i.test(fileUrl) || fileUrl.startsWith("blob:") || fileUrl.startsWith("data:")) {
function buildFileAccessUrl(fileUrl: string) {
if (
!fileUrl ||
/^(https?:)?\/\//i.test(fileUrl) ||
fileUrl.startsWith("blob:") ||
fileUrl.startsWith("data:")
) {
return fileUrl; return fileUrl;
} }
if (fileUrl === BASE_URL || fileUrl.startsWith(`${BASE_URL}/`)) { if (fileUrl === BASE_URL || fileUrl.startsWith(`${BASE_URL}/`)) {
return fileUrl; return fileUrl;
} }
return `${BASE_URL}${fileUrl.startsWith("/") ? fileUrl : `/${fileUrl}`}`; return `${BASE_URL}${fileUrl.startsWith("/") ? fileUrl : `/${fileUrl}`}`;
} }
function normalizeDateTime(value) {
function normalizeDateTime(value: string) { return value ? value.replace("T", " ") : void 0;
return value ? value.replace("T", " ") : undefined;
} }
function normalizeRecognizeType(value) {
function normalizeRecognizeType(value: string) { return value ? Number(value) : void 0;
return value ? Number(value) : undefined;
} }
function normalizeWarningFilter(value) {
function normalizeWarningFilter(value: WarningFilterValue) {
if (!value) { if (!value) {
return undefined; return void 0;
} }
return value === "true"; return value === "true";
} }
function formatPosition(record) {
function formatPosition(record: RosInspectionRecordLineImage) {
if (typeof record.poseX !== "number" || typeof record.poseY !== "number") { if (typeof record.poseX !== "number" || typeof record.poseY !== "number") {
return "--"; return "--";
} }
return `X:${record.poseX.toFixed(2)} Y:${record.poseY.toFixed(2)}`; return `X:${record.poseX.toFixed(2)} Y:${record.poseY.toFixed(2)}`;
} }
onMounted(() => { onMounted(() => {
fetchAlarmList(); fetchAlarmList();
}); });
@@ -231,7 +163,7 @@ onMounted(() => {
<option value="1">电缆表面破损</option> <option value="1">电缆表面破损</option>
<option value="2">桥架断裂</option> <option value="2">桥架断裂</option>
<option value="3">隧道积水</option> <option value="3">隧道积水</option>
<option value="4">墙体渗漏</option> <option value="4">墙体裂缝</option>
</select> </select>
<select v-model="warningFilter" class="toolbar-select"> <select v-model="warningFilter" class="toolbar-select">
<option value="">全部预警状态</option> <option value="">全部预警状态</option>
@@ -257,7 +189,6 @@ onMounted(() => {
/> />
<button class="page-action-btn primary" type="button" @click="handleSearch">搜索</button> <button class="page-action-btn primary" type="button" @click="handleSearch">搜索</button>
<button class="page-action-btn ghost" type="button" @click="handleClear">清空</button> <button class="page-action-btn ghost" type="button" @click="handleClear">清空</button>
<button class="page-action-btn ghost" type="button" @click="fetchAlarmList">刷新</button>
</div> </div>
<div class="toolbar-right">共 {{ totalAlarms }} 条告警记录</div> <div class="toolbar-right">共 {{ totalAlarms }} 条告警记录</div>
</div> </div>
@@ -273,20 +204,19 @@ onMounted(() => {
<th>案件状态</th> <th>案件状态</th>
<th>告警时间</th> <th>告警时间</th>
<th>位置</th> <th>位置</th>
<th>里程点</th>
<th>识别结果</th> <th>识别结果</th>
<th>是否预警</th> <th>是否预警</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr v-if="listLoading"> <tr v-if="listLoading">
<td class="table-empty" colspan="10">近期告警加载中...</td> <td class="table-empty" colspan="9">近期告警加载中...</td>
</tr> </tr>
<tr v-else-if="listError"> <tr v-else-if="listError">
<td class="table-empty" colspan="10">{{ listError }}</td> <td class="table-empty" colspan="9">{{ listError }}</td>
</tr> </tr>
<tr v-else-if="!pagedAlarms.length"> <tr v-else-if="!pagedAlarms.length">
<td class="table-empty" colspan="10">暂无告警记录</td> <td class="table-empty" colspan="9">暂无告警记录</td>
</tr> </tr>
<tr v-for="alarm in pagedAlarms" v-else :key="alarm.id"> <tr v-for="alarm in pagedAlarms" v-else :key="alarm.id">
<td>{{ alarm.id }}</td> <td>{{ alarm.id }}</td>
@@ -308,9 +238,12 @@ onMounted(() => {
</td> </td>
<td>{{ alarm.time }}</td> <td>{{ alarm.time }}</td>
<td>{{ alarm.position }}</td> <td>{{ alarm.position }}</td>
<td>{{ alarm.mileage }}</td>
<td>{{ alarm.result }}</td> <td>{{ alarm.result }}</td>
<td>{{ alarm.warning ? "是" : "否" }}</td> <td>
<NTag :type="alarm.warning ? 'error' : 'success'" size="small">
{{ alarm.warning ? "是" : "否" }}
</NTag>
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@@ -343,6 +276,19 @@ onMounted(() => {
> >
下一页 下一页
</button> </button>
<label class="pagination-jumper">
<span>跳至</span>
<select
class="pagination-select"
:disabled="listLoading"
:value="currentPage"
@change="setPage(Number($event.target.value))"
>
<option v-for="page in totalPages" :key="page" :value="page">
第 {{ page }} 页
</option>
</select>
</label>
</div> </div>
</section> </section>
</div> </div>

View File

@@ -1,64 +1,29 @@
<script lang="ts" setup> <script setup>
import { computed, ref } from "vue"; import { computed, ref } from "vue";
import type { EChartsOption } from "echarts";
import Chart from "@/components/chart/index.vue"; import Chart from "@/components/chart/index.vue";
const distributionRange = ref("近一周");
// 按需注册 DataReportPage 使用的图表类型和组件 const reportData = [
import { use } from "echarts/core";
import { LineChart, PieChart, RadarChart } from "echarts/charts";
import {
TooltipComponent,
GridComponent,
LegendComponent,
} from "echarts/components";
use([LineChart, PieChart, RadarChart]);
use([TooltipComponent, GridComponent, LegendComponent]);
type AlarmStatus = "待研判" | "待处理" | "处置完成" | "误判";
type ProjectName = "西江隧道" | "青云隧道" | "南山隧道";
type DistributionRange = "近一周" | "近一个月" | "近三个月";
interface AlarmReportRecord {
id: string;
type: string;
robot: string;
project: ProjectName;
status: AlarmStatus;
time: string;
}
interface TrendRecord {
date: string;
project: ProjectName;
total: number;
closed: number;
}
const distributionRange = ref<DistributionRange>("近一周");
const reportData: AlarmReportRecord[] = [
{ id: "AL-001", type: "线缆破损", robot: "巡检机器人 R1", project: "西江隧道", status: "待研判", time: "2026-06-23 10:24:18" }, { id: "AL-001", type: "线缆破损", robot: "巡检机器人 R1", project: "西江隧道", status: "待研判", time: "2026-06-23 10:24:18" },
{ id: "AL-002", type: "局部高温", robot: "巡检机器人 Q1", project: "青云隧道", status: "待处理", time: "2026-06-23 10:18:42" }, { id: "AL-002", type: "局部高温", robot: "巡检机器人 Q1", project: "青云隧道", status: "待处理", time: "2026-06-23 10:18:42" },
{ id: "AL-003", type: "墙体渗漏", robot: "巡检机器人 N3", project: "南山隧道", status: "处置完成", time: "2026-06-23 09:56:11" }, { id: "AL-003", type: "墙体裂缝", robot: "巡检机器人 N3", project: "南山隧道", status: "处置完成", time: "2026-06-23 09:56:11" },
{ id: "AL-004", type: "水渍渗漏", robot: "巡检机器人 R2", project: "西江隧道", status: "误判", time: "2026-06-23 09:20:36" }, { id: "AL-004", type: "水渍渗漏", robot: "巡检机器人 R2", project: "西江隧道", status: "误判", time: "2026-06-23 09:20:36" },
{ id: "AL-005", type: "应急门开启异常", robot: "巡检机器人 N1", project: "南山隧道", status: "待处理", time: "2026-06-23 08:42:57" }, { id: "AL-005", type: "应急门开启异常", robot: "巡检机器人 N1", project: "南山隧道", status: "待处理", time: "2026-06-23 08:42:57" },
{ id: "AL-006", type: "局部高温", robot: "巡检机器人 N3", project: "南山隧道", status: "处置完成", time: "2026-06-22 19:12:06" }, { id: "AL-006", type: "局部高温", robot: "巡检机器人 N3", project: "南山隧道", status: "处置完成", time: "2026-06-22 19:12:06" },
{ id: "AL-007", type: "线缆破损", robot: "巡检机器人 R1", project: "西江隧道", status: "处置完成", time: "2026-06-22 17:46:28" }, { id: "AL-007", type: "线缆破损", robot: "巡检机器人 R1", project: "西江隧道", status: "处置完成", time: "2026-06-22 17:46:28" },
{ id: "AL-008", type: "墙体渗漏", robot: "巡检机器人 Q2", project: "青云隧道", status: "待研判", time: "2026-06-22 16:08:40" }, { id: "AL-008", type: "墙体裂缝", robot: "巡检机器人 Q2", project: "青云隧道", status: "待研判", time: "2026-06-22 16:08:40" },
{ id: "AL-009", type: "水渍渗漏", robot: "巡检机器人 R4", project: "西江隧道", status: "待处理", time: "2026-06-22 14:21:19" }, { id: "AL-009", type: "水渍渗漏", robot: "巡检机器人 R4", project: "西江隧道", status: "待处理", time: "2026-06-22 14:21:19" },
{ id: "AL-010", type: "局部高温", robot: "巡检机器人 N1", project: "南山隧道", status: "误判", time: "2026-06-22 11:03:50" }, { id: "AL-010", type: "局部高温", robot: "巡检机器人 N1", project: "南山隧道", status: "误判", time: "2026-06-22 11:03:50" },
{ id: "AL-011", type: "线缆破损", robot: "巡检机器人 R3", project: "西江隧道", status: "处置完成", time: "2026-06-16 13:14:09" }, { id: "AL-011", type: "线缆破损", robot: "巡检机器人 R3", project: "西江隧道", status: "处置完成", time: "2026-06-16 13:14:09" },
{ id: "AL-012", type: "局部高温", robot: "巡检机器人 Q1", project: "青云隧道", status: "待处理", time: "2026-06-15 16:42:33" }, { id: "AL-012", type: "局部高温", robot: "巡检机器人 Q1", project: "青云隧道", status: "待处理", time: "2026-06-15 16:42:33" },
{ id: "AL-013", type: "墙体渗漏", robot: "巡检机器人 N2", project: "南山隧道", status: "处置完成", time: "2026-06-12 09:25:50" }, { id: "AL-013", type: "墙体裂缝", robot: "巡检机器人 N2", project: "南山隧道", status: "处置完成", time: "2026-06-12 09:25:50" },
{ id: "AL-014", type: "水渍渗漏", robot: "巡检机器人 R2", project: "西江隧道", status: "误判", time: "2026-06-08 20:14:27" }, { id: "AL-014", type: "水渍渗漏", robot: "巡检机器人 R2", project: "西江隧道", status: "误判", time: "2026-06-08 20:14:27" },
{ id: "AL-015", type: "应急门开启异常", robot: "巡检机器人 Q3", project: "青云隧道", status: "待研判", time: "2026-05-28 11:38:44" }, { id: "AL-015", type: "应急门开启异常", robot: "巡检机器人 Q3", project: "青云隧道", status: "待研判", time: "2026-05-28 11:38:44" },
{ id: "AL-016", type: "局部高温", robot: "巡检机器人 N4", project: "南山隧道", status: "处置完成", time: "2026-05-19 15:07:18" }, { id: "AL-016", type: "局部高温", robot: "巡检机器人 N4", project: "南山隧道", status: "处置完成", time: "2026-05-19 15:07:18" },
{ id: "AL-017", type: "线缆破损", robot: "巡检机器人 R1", project: "西江隧道", status: "待处理", time: "2026-05-06 08:11:52" }, { id: "AL-017", type: "线缆破损", robot: "巡检机器人 R1", project: "西江隧道", status: "待处理", time: "2026-05-06 08:11:52" },
{ id: "AL-018", type: "墙体渗漏", robot: "巡检机器人 Q2", project: "青云隧道", status: "误判", time: "2026-04-23 14:54:06" }, { id: "AL-018", type: "墙体裂缝", robot: "巡检机器人 Q2", project: "青云隧道", status: "误判", time: "2026-04-23 14:54:06" },
{ id: "AL-019", type: "水渍渗漏", robot: "巡检机器人 N1", project: "南山隧道", status: "处置完成", time: "2026-04-12 10:03:16" }, { id: "AL-019", type: "水渍渗漏", robot: "巡检机器人 N1", project: "南山隧道", status: "处置完成", time: "2026-04-12 10:03:16" }
]; ];
const trendData = [
const trendData: TrendRecord[] = [
{ date: "06-09", project: "西江隧道", total: 1, closed: 1 }, { date: "06-09", project: "西江隧道", total: 1, closed: 1 },
{ date: "06-09", project: "青云隧道", total: 1, closed: 0 }, { date: "06-09", project: "青云隧道", total: 1, closed: 0 },
{ date: "06-09", project: "南山隧道", total: 1, closed: 1 }, { date: "06-09", project: "南山隧道", total: 1, closed: 1 },
@@ -103,53 +68,48 @@ const trendData: TrendRecord[] = [
{ date: "06-22", project: "南山隧道", total: 4, closed: 3 }, { date: "06-22", project: "南山隧道", total: 4, closed: 3 },
{ date: "06-23", project: "西江隧道", total: 4, closed: 3 }, { date: "06-23", project: "西江隧道", total: 4, closed: 3 },
{ date: "06-23", project: "青云隧道", total: 3, closed: 2 }, { date: "06-23", project: "青云隧道", total: 3, closed: 2 },
{ date: "06-23", project: "南山隧道", total: 4, closed: 3 }, { date: "06-23", project: "南山隧道", total: 4, closed: 3 }
]; ];
const trendSeries = computed(() => { const trendSeries = computed(() => {
const grouped = trendData.reduce<Record<string, { total: number; closed: number }>>( const grouped = trendData.reduce(
(accumulator, item) => { (accumulator, item) => {
if (!accumulator[item.date]) { if (!accumulator[item.date]) {
accumulator[item.date] = { total: 0, closed: 0 }; accumulator[item.date] = { total: 0, closed: 0 };
} }
accumulator[item.date].total += item.total; accumulator[item.date].total += item.total;
accumulator[item.date].closed += item.closed; accumulator[item.date].closed += item.closed;
return accumulator; return accumulator;
}, },
{}, {}
); );
return Object.entries(grouped).map(([date, value]) => ({ return Object.entries(grouped).map(([date, value]) => ({
date, date,
total: value.total, total: value.total,
closed: value.closed, closed: value.closed
})); }));
}); });
const trendOption = computed(() => {
const trendOption = computed<EChartsOption>(() => {
const dates = trendSeries.value.map((item) => item.date); const dates = trendSeries.value.map((item) => item.date);
const totalValues = trendSeries.value.map((item) => item.total); const totalValues = trendSeries.value.map((item) => item.total);
const closedValues = trendSeries.value.map((item) => item.closed); const closedValues = trendSeries.value.map((item) => item.closed);
return { return {
grid: { grid: {
left: 24, left: 24,
right: 16, right: 16,
top: 24, top: 24,
bottom: 28, bottom: 28,
containLabel: true, containLabel: true
}, },
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
backgroundColor: "rgba(6, 20, 42, 0.92)", backgroundColor: "rgba(6, 20, 42, 0.92)",
borderColor: "rgba(96, 208, 255, 0.24)", borderColor: "rgba(96, 208, 255, 0.24)",
textStyle: { textStyle: {
color: "#eefcff", color: "#eefcff"
}, }
}, },
legend: { legend: {
show: false, show: false
}, },
xAxis: { xAxis: {
type: "category", type: "category",
@@ -157,35 +117,35 @@ const trendOption = computed<EChartsOption>(() => {
data: dates, data: dates,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "rgba(96, 188, 242, 0.2)", color: "rgba(96, 188, 242, 0.2)"
}, }
}, },
axisLabel: { axisLabel: {
color: "rgba(181, 230, 249, 0.74)", color: "rgba(181, 230, 249, 0.74)",
fontSize: 11, fontSize: 11
}, },
axisTick: { axisTick: {
show: false, show: false
}, }
}, },
yAxis: { yAxis: {
type: "value", type: "value",
splitNumber: 5, splitNumber: 5,
axisLine: { axisLine: {
show: false, show: false
}, },
axisTick: { axisTick: {
show: false, show: false
}, },
axisLabel: { axisLabel: {
color: "rgba(181, 230, 249, 0.62)", color: "rgba(181, 230, 249, 0.62)",
fontSize: 11, fontSize: 11
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: "rgba(97, 189, 242, 0.12)", color: "rgba(97, 189, 242, 0.12)"
}, }
}, }
}, },
series: [ series: [
{ {
@@ -197,16 +157,16 @@ const trendOption = computed<EChartsOption>(() => {
data: totalValues, data: totalValues,
lineStyle: { lineStyle: {
width: 3, width: 3,
color: "#74ecff", color: "#74ecff"
}, },
itemStyle: { itemStyle: {
color: "#74ecff", color: "#74ecff",
borderColor: "#081f3e", borderColor: "#081f3e",
borderWidth: 2, borderWidth: 2
}, },
areaStyle: { areaStyle: {
color: "rgba(116, 236, 255, 0.12)", color: "rgba(116, 236, 255, 0.12)"
}, }
}, },
{ {
name: "闭环告警", name: "闭环告警",
@@ -217,48 +177,44 @@ const trendOption = computed<EChartsOption>(() => {
data: closedValues, data: closedValues,
lineStyle: { lineStyle: {
width: 3, width: 3,
color: "#62e0a8", color: "#62e0a8"
}, },
itemStyle: { itemStyle: {
color: "#62e0a8", color: "#62e0a8",
borderColor: "#081f3e", borderColor: "#081f3e",
borderWidth: 2, borderWidth: 2
}, },
areaStyle: { areaStyle: {
color: "rgba(98, 224, 168, 0.08)", color: "rgba(98, 224, 168, 0.08)"
}, }
}, }
], ]
}; };
}); });
const typeStats = computed(() => { const typeStats = computed(() => {
const statsMap = new Map<string, number>(); const statsMap = /* @__PURE__ */ new Map();
reportData.forEach((item) => { reportData.forEach((item) => {
statsMap.set(item.type, (statsMap.get(item.type) ?? 0) + 1); statsMap.set(item.type, (statsMap.get(item.type) ?? 0) + 1);
}); });
return Array.from(statsMap.entries()).map(([label, value]) => ({ return Array.from(statsMap.entries()).map(([label, value]) => ({
label, label,
value, value
})); }));
}); });
const typeRadarOption = computed(() => {
const typeRadarOption = computed<EChartsOption>(() => {
const maxValue = Math.max(...typeStats.value.map((item) => item.value), 1); const maxValue = Math.max(...typeStats.value.map((item) => item.value), 1);
const indicators = typeStats.value.map((item) => ({ const indicators = typeStats.value.map((item) => ({
name: item.label, name: item.label,
max: maxValue, max: maxValue
})); }));
return { return {
tooltip: { tooltip: {
trigger: "item", trigger: "item",
backgroundColor: "rgba(6, 20, 42, 0.92)", backgroundColor: "rgba(6, 20, 42, 0.92)",
borderColor: "rgba(96, 208, 255, 0.24)", borderColor: "rgba(96, 208, 255, 0.24)",
textStyle: { textStyle: {
color: "#eefcff", color: "#eefcff"
}, }
}, },
radar: { radar: {
radius: "68%", radius: "68%",
@@ -267,23 +223,23 @@ const typeRadarOption = computed<EChartsOption>(() => {
splitNumber: 4, splitNumber: 4,
axisName: { axisName: {
color: "#dff7ff", color: "#dff7ff",
fontSize: 12, fontSize: 12
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "rgba(97, 189, 242, 0.22)", color: "rgba(97, 189, 242, 0.22)"
}, }
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: "rgba(97, 189, 242, 0.16)", color: "rgba(97, 189, 242, 0.16)"
}, }
}, },
splitArea: { splitArea: {
areaStyle: { areaStyle: {
color: ["rgba(16, 52, 94, 0.10)", "rgba(16, 52, 94, 0.05)"], color: ["rgba(16, 52, 94, 0.10)", "rgba(16, 52, 94, 0.05)"]
}, }
}, }
}, },
series: [ series: [
{ {
@@ -293,50 +249,47 @@ const typeRadarOption = computed<EChartsOption>(() => {
value: typeStats.value.map((item) => item.value), value: typeStats.value.map((item) => item.value),
name: "告警类型分布", name: "告警类型分布",
areaStyle: { areaStyle: {
color: "rgba(73, 207, 255, 0.20)", color: "rgba(73, 207, 255, 0.20)"
}, },
lineStyle: { lineStyle: {
color: "#61dcff", color: "#61dcff",
width: 2.5, width: 2.5
}, },
itemStyle: { itemStyle: {
color: "#8ff3ff", color: "#8ff3ff",
borderColor: "#07203e", borderColor: "#07203e",
borderWidth: 2, borderWidth: 2
}, },
symbolSize: 8, symbolSize: 8
}, }
], ]
}, }
], ]
}; };
}); });
const statusStats = computed(() => { const statusStats = computed(() => {
const order: AlarmStatus[] = ["待研判", "待处理", "处置完成", "误判"]; const order = ["待研判", "待处理", "处置完成", "误判"];
const total = reportData.length || 1; const total = reportData.length || 1;
return order.map((status) => { return order.map((status) => {
const value = reportData.filter((item) => item.status === status).length; const value = reportData.filter((item) => item.status === status).length;
return { return {
label: status, label: status,
value, value,
percent: `${Math.round((value / total) * 100)}%`, percent: `${Math.round(value / total * 100)}%`
}; };
}); });
}); });
const statusPieOption = computed(() => ({
const statusPieOption = computed<EChartsOption>(() => ({
tooltip: { tooltip: {
trigger: "item", trigger: "item",
backgroundColor: "rgba(6, 20, 42, 0.92)", backgroundColor: "rgba(6, 20, 42, 0.92)",
borderColor: "rgba(96, 208, 255, 0.24)", borderColor: "rgba(96, 208, 255, 0.24)",
textStyle: { textStyle: {
color: "#eefcff", color: "#eefcff"
}, }
}, },
legend: { legend: {
show: false, show: false
}, },
series: [ series: [
{ {
@@ -346,63 +299,50 @@ const statusPieOption = computed<EChartsOption>(() => ({
avoidLabelOverlap: false, avoidLabelOverlap: false,
itemStyle: { itemStyle: {
borderColor: "#081f3e", borderColor: "#081f3e",
borderWidth: 3, borderWidth: 3
}, },
label: { label: {
show: true, show: true,
color: "#dff7ff", color: "#dff7ff",
formatter: "{b}\n{d}%", formatter: "{b}\n{d}%",
fontSize: 12, fontSize: 12
}, },
labelLine: { labelLine: {
lineStyle: { lineStyle: {
color: "rgba(181, 230, 249, 0.52)", color: "rgba(181, 230, 249, 0.52)"
}, }
}, },
data: statusStats.value.map((item) => ({ data: statusStats.value.map((item) => ({
name: item.label, name: item.label,
value: item.value, value: item.value,
itemStyle: { itemStyle: {
color: color: item.label === "待研判" ? "#ffd66e" : item.label === "待处理" ? "#ff8b78" : item.label === "处置完成" ? "#62e0a8" : "#8ea7ff"
item.label === "待研判" }
? "#ffd66e" }))
: item.label === "待处理" }
? "#ff8b78" ]
: item.label === "处置完成"
? "#62e0a8"
: "#8ea7ff",
},
})),
},
],
})); }));
const projectDistribution = computed(() => { const projectDistribution = computed(() => {
const now = new Date("2026-06-23T23:59:59"); const now = /* @__PURE__ */ new Date("2026-06-23T23:59:59");
const rangeDaysMap: Record<DistributionRange, number> = { const rangeDaysMap = {
近一周: 7, 近一周: 7,
近一个月: 30, 近一个月: 30,
近三个月: 90, 近三个月: 90
}; };
const threshold = new Date( const threshold = new Date(
now.getTime() - rangeDaysMap[distributionRange.value] * 24 * 60 * 60 * 1000, now.getTime() - rangeDaysMap[distributionRange.value] * 24 * 60 * 60 * 1e3
); );
const data = reportData.filter((item) => new Date(item.time.replace(" ", "T")) >= threshold); const data = reportData.filter((item) => new Date(item.time.replace(" ", "T")) >= threshold);
const statsMap = new Map<string, number>(); const statsMap = /* @__PURE__ */ new Map();
data.forEach((item) => { data.forEach((item) => {
statsMap.set(item.project, (statsMap.get(item.project) ?? 0) + 1); statsMap.set(item.project, (statsMap.get(item.project) ?? 0) + 1);
}); });
const maxValue = Math.max(...statsMap.values(), 1); const maxValue = Math.max(...statsMap.values(), 1);
return Array.from(statsMap.entries()).map(([label, value]) => ({
return Array.from(statsMap.entries()) label,
.map(([label, value]) => ({ value,
label, width: `${value / maxValue * 100}%`
value, })).sort((a, b) => b.value - a.value);
width: `${(value / maxValue) * 100}%`,
}))
.sort((a, b) => b.value - a.value);
}); });
</script> </script>
@@ -479,7 +419,7 @@ const projectDistribution = computed(() => {
:key="range" :key="range"
:class="['report-filter-tab', { active: distributionRange === range }]" :class="['report-filter-tab', { active: distributionRange === range }]"
type="button" type="button"
@click="distributionRange = range as DistributionRange" @click="distributionRange = range"
> >
{{ range }} {{ range }}
</button> </button>

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@@ -1,21 +1,6 @@
<script lang="ts" setup> <script setup>
import { ref } from "vue"; import { ref } from "vue";
const patrolRecords = [
interface PatrolAlarmRecord {
id: string;
type: string;
reportTime: string;
}
interface PatrolRecord {
id: string;
robot: string;
startTime: string;
endTime: string;
alarms: PatrolAlarmRecord[];
}
const patrolRecords: PatrolRecord[] = [
{ {
id: "PR-20260623-001", id: "PR-20260623-001",
robot: "巡检机器人 R1", robot: "巡检机器人 R1",
@@ -23,8 +8,8 @@ const patrolRecords: PatrolRecord[] = [
endTime: "2026-06-23 09:02:15", endTime: "2026-06-23 09:02:15",
alarms: [ alarms: [
{ id: "AL-001", type: "线缆破损", reportTime: "2026-06-23 08:36:12" }, { id: "AL-001", type: "线缆破损", reportTime: "2026-06-23 08:36:12" },
{ id: "AL-002", type: "局部高温", reportTime: "2026-06-23 08:42:09" }, { id: "AL-002", type: "局部高温", reportTime: "2026-06-23 08:42:09" }
], ]
}, },
{ {
id: "PR-20260623-002", id: "PR-20260623-002",
@@ -32,8 +17,8 @@ const patrolRecords: PatrolRecord[] = [
startTime: "2026-06-23 09:20:08", startTime: "2026-06-23 09:20:08",
endTime: "2026-06-23 10:01:46", endTime: "2026-06-23 10:01:46",
alarms: [ alarms: [
{ id: "AL-005", type: "应急门开启异常", reportTime: "2026-06-23 09:48:57" }, { id: "AL-005", type: "应急门开启异常", reportTime: "2026-06-23 09:48:57" }
], ]
}, },
{ {
id: "PR-20260623-003", id: "PR-20260623-003",
@@ -41,28 +26,25 @@ const patrolRecords: PatrolRecord[] = [
startTime: "2026-06-23 10:08:34", startTime: "2026-06-23 10:08:34",
endTime: "2026-06-23 11:12:25", endTime: "2026-06-23 11:12:25",
alarms: [ alarms: [
{ id: "AL-003", type: "墙体渗漏", reportTime: "2026-06-23 10:36:41" }, { id: "AL-003", type: "墙体裂缝", reportTime: "2026-06-23 10:36:41" },
{ id: "AL-006", type: "水渍渗漏", reportTime: "2026-06-23 10:54:18" }, { id: "AL-006", type: "水渍渗漏", reportTime: "2026-06-23 10:54:18" },
{ id: "AL-007", type: "局部高温", reportTime: "2026-06-23 11:02:33" }, { id: "AL-007", type: "局部高温", reportTime: "2026-06-23 11:02:33" }
], ]
}, },
{ {
id: "PR-20260623-004", id: "PR-20260623-004",
robot: "巡检机器人 R2", robot: "巡检机器人 R2",
startTime: "2026-06-23 13:15:17", startTime: "2026-06-23 13:15:17",
endTime: "2026-06-23 14:05:52", endTime: "2026-06-23 14:05:52",
alarms: [], alarms: []
}, }
]; ];
const dialogVisible = ref(false); const dialogVisible = ref(false);
const activePatrolRecord = ref<PatrolRecord | null>(null); const activePatrolRecord = ref(null);
function openAlarmDialog(record) {
function openAlarmDialog(record: PatrolRecord) {
activePatrolRecord.value = record; activePatrolRecord.value = record;
dialogVisible.value = true; dialogVisible.value = true;
} }
function closeDialog() { function closeDialog() {
dialogVisible.value = false; dialogVisible.value = false;
activePatrolRecord.value = null; activePatrolRecord.value = null;

View File

@@ -1,75 +1,18 @@
<script lang="ts" setup> <script setup>
import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue"; import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
import { getRosCarList } from "@/api/rosCar"; import { getRosCarList } from "@/api/rosCar";
type GridMode = 1 | 4 | 9;
type CameraType = "可见光" | "红外";
type DeviceStatus = "空闲" | "巡检" | "离线" | "充电中";
interface RosCarRecord {
id?: string;
deviceNo?: string;
name?: string;
batteryLevel?: number;
status?: number;
projectName?: string;
cameraWebrtcUrl?: string;
cameraNo?: string;
cameraWebrtcUrl2?: string;
cameraNo2?: string;
}
interface RosCarListResult {
total?: number;
data?: RosCarRecord[];
}
interface RosCarListResponse {
data?: RosCarListResult;
}
interface CameraItem {
id: string;
name: string;
type: CameraType;
status: DeviceStatus;
url: string;
cameraNo?: string;
}
interface DeviceNode {
id: string;
deviceNo?: string;
name: string;
project: string;
status: DeviceStatus;
battery: string;
cameras: CameraItem[];
}
interface ProjectCameraItem extends CameraItem {
deviceId: string;
deviceName: string;
project: string;
}
interface SlotStreamState {
loading: boolean;
error: string;
}
const defaultProject = "视频中心"; const defaultProject = "视频中心";
const gridMode = ref<GridMode>(4); const gridMode = ref(4);
const activeSlotIndex = ref(0); const activeSlotIndex = ref(0);
const videoSlots = ref<Array<ProjectCameraItem | null>>([]); const videoSlots = ref([]);
const slotVideoRefs = ref<Array<HTMLVideoElement | null>>([]); const slotVideoRefs = ref([]);
const slotStreamStates = ref<SlotStreamState[]>([]); const slotStreamStates = ref([]);
const videoGridBoardRef = ref<HTMLElement | null>(null); const videoGridBoardRef = ref(null);
const videoGridBoardStyle = ref<Record<string, string>>({}); const videoGridBoardStyle = ref({});
const slotPeerConnections = new Map<number, RTCPeerConnection>(); const slotPeerConnections = /* @__PURE__ */ new Map();
const slotRequestIds = new Map<number, number>(); const slotRequestIds = /* @__PURE__ */ new Map();
let videoGridResizeObserver: ResizeObserver | null = null; let videoGridResizeObserver = null;
const devices = ref<DeviceNode[]>([]); const devices = ref([]);
const listLoading = ref(false); const listLoading = ref(false);
const listError = ref(""); const listError = ref("");
const playbackDialogVisible = ref(false); const playbackDialogVisible = ref(false);
@@ -77,141 +20,107 @@ const playbackStartAt = ref("2026-06-23T14:20");
const playbackEndAt = ref("2026-06-23T14:50"); const playbackEndAt = ref("2026-06-23T14:50");
const playbackProgress = ref(0); const playbackProgress = ref(0);
const playbackPaused = ref(true); const playbackPaused = ref(true);
const playbackPlayerRef = ref<HTMLVideoElement | null>(null); const playbackPlayerRef = ref(null);
const slotCountMap = {
const slotCountMap: Record<GridMode, number> = {
1: 1, 1: 1,
4: 4, 4: 4,
9: 9, 9: 9
}; };
const currentProjectName = computed(() => devices.value[0]?.project || defaultProject); const currentProjectName = computed(() => devices.value[0]?.project || defaultProject);
const playableCameras = computed(
const playableCameras = computed<ProjectCameraItem[]>(() => () => devices.value.flatMap(
devices.value.flatMap((device) => (device) => device.cameras.map((camera) => ({
device.cameras.map((camera) => ({
...camera, ...camera,
deviceId: device.id, deviceId: device.id,
deviceName: device.name, deviceName: device.name,
project: device.project, project: device.project
})), }))
), )
); );
const cameraTotal = computed(() => playableCameras.value.length); const cameraTotal = computed(() => playableCameras.value.length);
const visibleSlots = computed(() => { const visibleSlots = computed(() => {
const targetCount = slotCountMap[gridMode.value]; const targetCount = slotCountMap[gridMode.value];
return Array.from( return Array.from(
{ length: targetCount }, { length: targetCount },
(_, index) => videoSlots.value[index] ?? null, (_, index) => videoSlots.value[index] ?? null
); );
}); });
const activeCamera = computed(() => visibleSlots.value[activeSlotIndex.value] ?? null); const activeCamera = computed(() => visibleSlots.value[activeSlotIndex.value] ?? null);
const activeSlotLabel = computed(() => `画面 ${activeSlotIndex.value + 1}`); const activeSlotLabel = computed(() => `画面 ${activeSlotIndex.value + 1}`);
const playbackRangeLabel = computed(() => { const playbackRangeLabel = computed(() => {
const startLabel = playbackStartAt.value.replace("T", " "); const startLabel = playbackStartAt.value.replace("T", " ");
const endLabel = playbackEndAt.value.replace("T", " "); const endLabel = playbackEndAt.value.replace("T", " ");
return `${startLabel} - ${endLabel}`; return `${startLabel} - ${endLabel}`;
}); });
// 根据视频墙实际可用宽高计算宫格尺寸,保证每个画面都是 16:9 且不会溢出卡片
function updateVideoGridSize() { function updateVideoGridSize() {
const board = videoGridBoardRef.value; const board = videoGridBoardRef.value;
if (!board) { if (!board) {
return; return;
} }
const columns = Math.sqrt(gridMode.value); const columns = Math.sqrt(gridMode.value);
const rows = columns; const rows = columns;
const gap = 8; const gap = 8;
const availableWidth = board.clientWidth - gap * (columns - 1); const availableWidth = board.clientWidth - gap * (columns - 1);
const availableHeight = board.clientHeight - gap * (rows - 1); const availableHeight = board.clientHeight - gap * (rows - 1);
const cellWidthByContainerWidth = availableWidth / columns; const cellWidthByContainerWidth = availableWidth / columns;
const cellWidthByContainerHeight = (availableHeight / rows) * (16 / 9); const cellWidthByContainerHeight = availableHeight / rows * (16 / 9);
const cellWidth = Math.max(0, Math.min(cellWidthByContainerWidth, cellWidthByContainerHeight)); const cellWidth = Math.max(0, Math.min(cellWidthByContainerWidth, cellWidthByContainerHeight));
const cellHeight = cellWidth * (9 / 16); const cellHeight = cellWidth * (9 / 16);
videoGridBoardStyle.value = { videoGridBoardStyle.value = {
gridTemplateColumns: `repeat(${columns}, ${cellWidth}px)`, gridTemplateColumns: `repeat(${columns}, ${cellWidth}px)`,
gridAutoRows: `${cellHeight}px`, gridAutoRows: `${cellHeight}px`
}; };
} }
// 根据当前宫格数量补齐画面槽位,切换布局时保留已播放的视频
function ensureVideoSlotCount() { function ensureVideoSlotCount() {
const targetCount = slotCountMap[gridMode.value]; const targetCount = slotCountMap[gridMode.value];
const previousCount = videoSlots.value.length; const previousCount = videoSlots.value.length;
for (let index = targetCount; index < previousCount; index += 1) { for (let index = targetCount; index < previousCount; index += 1) {
stopSlotStream(index); stopSlotStream(index);
} }
videoSlots.value = Array.from( videoSlots.value = Array.from(
{ length: targetCount }, { length: targetCount },
(_, index) => videoSlots.value[index] ?? null, (_, index) => videoSlots.value[index] ?? null
); );
slotVideoRefs.value = Array.from( slotVideoRefs.value = Array.from(
{ length: targetCount }, { length: targetCount },
(_, index) => slotVideoRefs.value[index] ?? null, (_, index) => slotVideoRefs.value[index] ?? null
); );
slotStreamStates.value = Array.from( slotStreamStates.value = Array.from(
{ length: targetCount }, { length: targetCount },
(_, index) => slotStreamStates.value[index] ?? { loading: false, error: "" }, (_, index) => slotStreamStates.value[index] ?? { loading: false, error: "" }
); );
if (activeSlotIndex.value >= targetCount) { if (activeSlotIndex.value >= targetCount) {
activeSlotIndex.value = targetCount - 1; activeSlotIndex.value = targetCount - 1;
} }
} }
function normalizeDeviceStatus(status) {
// 将接口的小车状态码转换为页面展示状态 const statusMap = {
function normalizeDeviceStatus(status?: number): DeviceStatus {
const statusMap: Record<number, DeviceStatus> = {
0: "空闲", 0: "空闲",
1: "巡检", 1: "巡检",
2: "离线", 2: "离线",
3: "充电中", 3: "充电中"
}; };
return statusMap[status ?? 2] ?? "离线"; return statusMap[status ?? 2] ?? "离线";
} }
function buildCameraItem(car, deviceId, type, url, cameraNo) {
// 根据小车视频地址生成可播放的相机节点
function buildCameraItem(
car: RosCarRecord,
deviceId: string,
type: CameraType,
url?: string,
cameraNo?: string,
): CameraItem | null {
if (!url) { if (!url) {
return null; return null;
} }
return { return {
id: `${deviceId}-${type}`, id: `${deviceId}-${type}`,
name: `${type}相机`, name: `${type}相机`,
type, type,
status: normalizeDeviceStatus(car.status), status: normalizeDeviceStatus(car.status),
url, url,
cameraNo, cameraNo
}; };
} }
function normalizeDeviceNode(car, index) {
// 将设备列表接口的小车记录转换为左侧机器人树节点
function normalizeDeviceNode(car: RosCarRecord, index: number): DeviceNode {
const deviceId = car.id ?? `ROBOT-${index + 1}`; const deviceId = car.id ?? `ROBOT-${index + 1}`;
const cameras = [ const cameras = [
buildCameraItem(car, deviceId, "可见光", car.cameraWebrtcUrl, car.cameraNo), buildCameraItem(car, deviceId, "可见光", car.cameraWebrtcUrl, car.cameraNo),
buildCameraItem(car, deviceId, "红外", car.cameraWebrtcUrl2, car.cameraNo2), buildCameraItem(car, deviceId, "红外", car.cameraWebrtcUrl2, car.cameraNo2)
].filter((camera): camera is CameraItem => Boolean(camera)); ].filter((camera) => Boolean(camera));
return { return {
id: deviceId, id: deviceId,
deviceNo: car.deviceNo, deviceNo: car.deviceNo,
@@ -219,23 +128,19 @@ function normalizeDeviceNode(car: RosCarRecord, index: number): DeviceNode {
project: car.projectName || defaultProject, project: car.projectName || defaultProject,
status: normalizeDeviceStatus(car.status), status: normalizeDeviceStatus(car.status),
battery: typeof car.batteryLevel === "number" ? `${car.batteryLevel}%` : "--", battery: typeof car.batteryLevel === "number" ? `${car.batteryLevel}%` : "--",
cameras, cameras
}; };
} }
// 请求设备列表接口,加载左侧机器人及其可见光/红外相机
async function fetchDeviceList() { async function fetchDeviceList() {
listLoading.value = true; listLoading.value = true;
listError.value = ""; listError.value = "";
try { try {
const response = (await getRosCarList({ const response = await getRosCarList({
page: 1, page: 1,
limit: 999, limit: 999,
query: {}, query: {}
})) as RosCarListResponse; });
const rows = response.data?.data ?? []; const rows = response.data?.data ?? [];
devices.value = rows.map((car, index) => normalizeDeviceNode(car, index)); devices.value = rows.map((car, index) => normalizeDeviceNode(car, index));
} catch (error) { } catch (error) {
listError.value = "设备列表加载失败"; listError.value = "设备列表加载失败";
@@ -244,146 +149,112 @@ async function fetchDeviceList() {
listLoading.value = false; listLoading.value = false;
} }
} }
function selectVideoSlot(index) {
// 选中右侧视频墙中的目标画面
function selectVideoSlot(index: number) {
activeSlotIndex.value = index; activeSlotIndex.value = index;
} }
// 停止全部画面的 WebRTC 拉流,用于页面卸载时释放资源
function stopAllSlotStreams() { function stopAllSlotStreams() {
videoSlots.value.forEach((_, index) => stopSlotStream(index)); videoSlots.value.forEach((_, index) => stopSlotStream(index));
} }
function stopSlotStream(index, clearState = true) {
// 停止指定画面的 WebRTC 拉流并释放播放器资源
function stopSlotStream(index: number, clearState = true) {
slotRequestIds.set(index, (slotRequestIds.get(index) ?? 0) + 1); slotRequestIds.set(index, (slotRequestIds.get(index) ?? 0) + 1);
if (clearState) { if (clearState) {
slotStreamStates.value[index] = { loading: false, error: "" }; slotStreamStates.value[index] = { loading: false, error: "" };
} }
const peerConnection = slotPeerConnections.get(index); const peerConnection = slotPeerConnections.get(index);
if (peerConnection) { if (peerConnection) {
peerConnection.close(); peerConnection.close();
slotPeerConnections.delete(index); slotPeerConnections.delete(index);
} }
const video = slotVideoRefs.value[index]; const video = slotVideoRefs.value[index];
if (video) { if (video) {
video.srcObject = null; video.srcObject = null;
} }
} }
function buildWebrtcApiUrl(streamUrl) {
// 将设备返回的 webrtc 播放地址转换为 ZLMediaKit WebRTC 播放接口地址
function buildWebrtcApiUrl(streamUrl: string) {
const normalizedUrl = streamUrl.replace(/^webrtc:\/\//, "https://"); const normalizedUrl = streamUrl.replace(/^webrtc:\/\//, "https://");
const url = new URL(normalizedUrl); const url = new URL(normalizedUrl);
return `${url.origin}${url.pathname}${url.search}`; return `${url.origin}${url.pathname}${url.search}`;
} }
function waitForIceGatheringComplete(peerConnection) {
// 等待本地 ICE 候选收集完成,确保发给流媒体服务的 offer 信息完整
function waitForIceGatheringComplete(peerConnection: RTCPeerConnection) {
if (peerConnection.iceGatheringState === "complete") { if (peerConnection.iceGatheringState === "complete") {
return Promise.resolve(); return Promise.resolve();
} }
return new Promise((resolve) => {
return new Promise<void>((resolve) => {
const handleIceGatheringStateChange = () => { const handleIceGatheringStateChange = () => {
if (peerConnection.iceGatheringState === "complete") { if (peerConnection.iceGatheringState === "complete") {
peerConnection.removeEventListener("icegatheringstatechange", handleIceGatheringStateChange); peerConnection.removeEventListener("icegatheringstatechange", handleIceGatheringStateChange);
resolve(); resolve();
} }
}; };
peerConnection.addEventListener("icegatheringstatechange", handleIceGatheringStateChange); peerConnection.addEventListener("icegatheringstatechange", handleIceGatheringStateChange);
}); });
} }
function setSlotVideoRef(element, index) {
// 收集视频墙每个画面对应的 video 元素,供 WebRTC ontrack 写入媒体流
function setSlotVideoRef(element: Element | { $el?: Element } | null, index: number) {
const target = element instanceof Element ? element : element?.$el; const target = element instanceof Element ? element : element?.$el;
slotVideoRefs.value[index] = target instanceof HTMLVideoElement ? target : null; slotVideoRefs.value[index] = target instanceof HTMLVideoElement ? target : null;
} }
async function playSlotStream(index, camera) {
// 通过 WebRTC offer/answer 将指定相机拉流到选中的画面槽位
async function playSlotStream(index: number, camera: ProjectCameraItem) {
stopSlotStream(index); stopSlotStream(index);
if (!window.RTCPeerConnection) { if (!window.RTCPeerConnection) {
slotStreamStates.value[index] = { loading: false, error: "当前浏览器不支持 WebRTC 播放" }; slotStreamStates.value[index] = { loading: false, error: "当前浏览器不支持 WebRTC 播放" };
return; return;
} }
const video = slotVideoRefs.value[index]; const video = slotVideoRefs.value[index];
if (!video) { if (!video) {
slotStreamStates.value[index] = { loading: false, error: "播放器未准备好" }; slotStreamStates.value[index] = { loading: false, error: "播放器未准备好" };
return; return;
} }
const requestId = slotRequestIds.get(index) ?? 0; const requestId = slotRequestIds.get(index) ?? 0;
const peerConnection = new RTCPeerConnection(); const peerConnection = new RTCPeerConnection();
slotPeerConnections.set(index, peerConnection); slotPeerConnections.set(index, peerConnection);
slotStreamStates.value[index] = { loading: true, error: "" }; slotStreamStates.value[index] = { loading: true, error: "" };
peerConnection.addTransceiver("video", { direction: "recvonly" }); peerConnection.addTransceiver("video", { direction: "recvonly" });
peerConnection.addTransceiver("audio", { direction: "recvonly" }); peerConnection.addTransceiver("audio", { direction: "recvonly" });
peerConnection.ontrack = (event) => { peerConnection.ontrack = (event) => {
if (requestId !== slotRequestIds.get(index)) { if (requestId !== slotRequestIds.get(index)) {
return; return;
} }
video.srcObject = event.streams[0]; video.srcObject = event.streams[0];
}; };
try { try {
const offer = await peerConnection.createOffer(); const offer = await peerConnection.createOffer();
await peerConnection.setLocalDescription(offer); await peerConnection.setLocalDescription(offer);
await waitForIceGatheringComplete(peerConnection); await waitForIceGatheringComplete(peerConnection);
const response = await fetch(buildWebrtcApiUrl(camera.url), { const response = await fetch(buildWebrtcApiUrl(camera.url), {
method: "POST", method: "POST",
headers: { headers: {
"Content-Type": "application/sdp", "Content-Type": "application/sdp"
}, },
body: peerConnection.localDescription?.sdp ?? offer.sdp, body: peerConnection.localDescription?.sdp ?? offer.sdp
}); });
if (!response.ok) { if (!response.ok) {
throw new Error(`拉流失败:${response.status}`); throw new Error(`拉流失败\:${response.status}`);
} }
const responseText = await response.text(); const responseText = await response.text();
let answer = responseText; let answer = responseText;
try { try {
const responseData = JSON.parse(responseText) as { code?: number; sdp?: string; msg?: string }; const responseData = JSON.parse(responseText);
if (responseData.code && responseData.code !== 0) { if (responseData.code && responseData.code !== 0) {
throw new Error(responseData.msg || "视频流拉取失败"); throw new Error(responseData.msg || "视频流拉取失败");
} }
answer = responseData.sdp || responseText; answer = responseData.sdp || responseText;
} catch (error) { } catch (error) {
if (responseText.trim().startsWith("{")) { if (responseText.trim().startsWith("{")) {
throw error; throw error;
} }
} }
if (requestId !== slotRequestIds.get(index)) { if (requestId !== slotRequestIds.get(index)) {
return; return;
} }
await peerConnection.setRemoteDescription({ await peerConnection.setRemoteDescription({
type: "answer", type: "answer",
sdp: answer, sdp: answer
}); });
} catch (error) { } catch (error) {
if (requestId === slotRequestIds.get(index)) { if (requestId === slotRequestIds.get(index)) {
slotStreamStates.value[index] = { slotStreamStates.value[index] = {
loading: false, loading: false,
error: error instanceof Error ? error.message : "视频流拉取失败", error: error instanceof Error ? error.message : "视频流拉取失败"
}; };
stopSlotStream(index, false); stopSlotStream(index, false);
} }
@@ -391,135 +262,98 @@ async function playSlotStream(index: number, camera: ProjectCameraItem) {
if (requestId === slotRequestIds.get(index)) { if (requestId === slotRequestIds.get(index)) {
slotStreamStates.value[index] = { slotStreamStates.value[index] = {
...slotStreamStates.value[index], ...slotStreamStates.value[index],
loading: false, loading: false
}; };
} }
} }
} }
function closeVideoSlot(index) {
// 关闭指定画面并释放对应 WebRTC 拉流资源
function closeVideoSlot(index: number) {
stopSlotStream(index); stopSlotStream(index);
videoSlots.value[index] = null; videoSlots.value[index] = null;
if (activeSlotIndex.value === index) { if (activeSlotIndex.value === index) {
activeSlotIndex.value = index; activeSlotIndex.value = index;
} }
} }
async function playCamera(camera) {
// 将左侧相机播放到当前选中的右侧画面
async function playCamera(camera: ProjectCameraItem) {
const targetIndex = activeSlotIndex.value; const targetIndex = activeSlotIndex.value;
videoSlots.value[targetIndex] = camera; videoSlots.value[targetIndex] = camera;
await nextTick(); await nextTick();
await playSlotStream(targetIndex, camera); await playSlotStream(targetIndex, camera);
} }
async function setGridMode(mode) {
// 切换视频墙宫格布局
async function setGridMode(mode: GridMode) {
gridMode.value = mode; gridMode.value = mode;
await nextTick(); await nextTick();
updateVideoGridSize(); updateVideoGridSize();
} }
// 同步录像回放播放器进度和暂停状态
function syncPlaybackProgress() { function syncPlaybackProgress() {
const video = playbackPlayerRef.value; const video = playbackPlayerRef.value;
if (!video) { if (!video) {
playbackProgress.value = 0; playbackProgress.value = 0;
playbackPaused.value = true; playbackPaused.value = true;
return; return;
} }
const duration = Number.isFinite(video.duration) ? video.duration : 0; const duration = Number.isFinite(video.duration) ? video.duration : 0;
playbackProgress.value = duration > 0 ? (video.currentTime / duration) * 100 : 0; playbackProgress.value = duration > 0 ? video.currentTime / duration * 100 : 0;
playbackPaused.value = video.paused; playbackPaused.value = video.paused;
} }
// 从头开始播放当前回放视频
function startPlayback() { function startPlayback() {
const video = playbackPlayerRef.value; const video = playbackPlayerRef.value;
if (!video) { if (!video) {
return; return;
} }
video.currentTime = 0; video.currentTime = 0;
void video.play(); void video.play();
playbackPaused.value = false; playbackPaused.value = false;
syncPlaybackProgress(); syncPlaybackProgress();
} }
// 打开当前画面的录像回放弹窗
async function openPlaybackDialog() { async function openPlaybackDialog() {
if (!activeCamera.value) { if (!activeCamera.value) {
return; return;
} }
playbackDialogVisible.value = true; playbackDialogVisible.value = true;
playbackProgress.value = 0; playbackProgress.value = 0;
playbackPaused.value = true; playbackPaused.value = true;
await nextTick(); await nextTick();
startPlayback(); startPlayback();
} }
// 关闭录像回放弹窗并暂停播放器
function closePlaybackDialog() { function closePlaybackDialog() {
playbackPlayerRef.value?.pause(); playbackPlayerRef.value?.pause();
playbackDialogVisible.value = false; playbackDialogVisible.value = false;
playbackPaused.value = true; playbackPaused.value = true;
} }
// 切换录像回放的播放和暂停状态
function togglePlaybackPause() { function togglePlaybackPause() {
const video = playbackPlayerRef.value; const video = playbackPlayerRef.value;
if (!video) { if (!video) {
return; return;
} }
if (video.paused) { if (video.paused) {
void video.play(); void video.play();
} else { } else {
video.pause(); video.pause();
} }
syncPlaybackProgress(); syncPlaybackProgress();
} }
function seekPlayback(offsetSeconds) {
// 按秒数快进或快退录像回放
function seekPlayback(offsetSeconds: number) {
const video = playbackPlayerRef.value; const video = playbackPlayerRef.value;
if (!video) { if (!video) {
return; return;
} }
const duration = Number.isFinite(video.duration) ? video.duration : 0; const duration = Number.isFinite(video.duration) ? video.duration : 0;
const targetTime = Math.max(0, Math.min(duration, video.currentTime + offsetSeconds)); const targetTime = Math.max(0, Math.min(duration, video.currentTime + offsetSeconds));
video.currentTime = targetTime; video.currentTime = targetTime;
syncPlaybackProgress(); syncPlaybackProgress();
} }
// 根据拖动条位置更新录像回放播放进度
function updatePlaybackProgress() { function updatePlaybackProgress() {
const video = playbackPlayerRef.value; const video = playbackPlayerRef.value;
if (!video) { if (!video) {
return; return;
} }
const duration = Number.isFinite(video.duration) ? video.duration : 0; const duration = Number.isFinite(video.duration) ? video.duration : 0;
if (duration <= 0) { if (duration <= 0) {
return; return;
} }
video.currentTime = playbackProgress.value / 100 * duration;
video.currentTime = (playbackProgress.value / 100) * duration;
} }
watch(gridMode, async () => { watch(gridMode, async () => {
ensureVideoSlotCount(); ensureVideoSlotCount();
await nextTick(); await nextTick();
@@ -528,7 +362,6 @@ watch(gridMode, async () => {
onMounted(() => { onMounted(() => {
void fetchDeviceList(); void fetchDeviceList();
updateVideoGridSize(); updateVideoGridSize();
if (videoGridBoardRef.value) { if (videoGridBoardRef.value) {
videoGridResizeObserver = new ResizeObserver(updateVideoGridSize); videoGridResizeObserver = new ResizeObserver(updateVideoGridSize);
videoGridResizeObserver.observe(videoGridBoardRef.value); videoGridResizeObserver.observe(videoGridBoardRef.value);
@@ -618,7 +451,7 @@ onBeforeUnmount(() => {
:key="mode" :key="mode"
:class="['grid-switch-btn', { active: gridMode === mode }]" :class="['grid-switch-btn', { active: gridMode === mode }]"
type="button" type="button"
@click="setGridMode(mode as GridMode)" @click="setGridMode(mode)"
> >
{{ mode }} 宫格 {{ mode }} 宫格
</button> </button>

View File

@@ -25,9 +25,7 @@
"poseY": 6.789, "poseY": 6.789,
"poseYaw": 1.57, "poseYaw": 1.57,
"status": 1, "status": 1,
"signal": "-58dBm", "signal": "-58dBm"
"dockStatus": "自动回充待机中",
"dockActive": false
} }
} }
``` ```
@@ -44,8 +42,6 @@
| `data.poseYaw` | 否 | 当前朝向 | | `data.poseYaw` | 否 | 当前朝向 |
| `data.status` | 否 | 小车状态:`0` 空闲,`1` 巡检,`2` 离线,`3` 充电中 | | `data.status` | 否 | 小车状态:`0` 空闲,`1` 巡检,`2` 离线,`3` 充电中 |
| `data.signal` | 否 | 小车信号 | | `data.signal` | 否 | 小车信号 |
| `data.dockStatus` | 否 | 自动回充状态文本,取自 `/dock_status` |
| `data.dockActive` | 否 | 回充或脱离充电桩是否进行中,取自 `/auto_docking_active` 与 `/auto_undocking_active` |
说明: 说明:
@@ -81,9 +77,7 @@
"poseY": 6.789, "poseY": 6.789,
"poseYaw": 1.57, "poseYaw": 1.57,
"status": 1, "status": 1,
"signal": "-58dBm", "signal": "-58dBm"
"dockStatus": "自动回充待机中",
"dockActive": false
}, },
"timestamp": 1782702000010 "timestamp": 1782702000010
} }
@@ -91,14 +85,12 @@
顶层字段说明: 顶层字段说明:
| 字段 | 说明 | | 字段 | 说明 |
| ------------------ | ------------------------------------------------------- | | ---------------- | ---------------------------------------- |
| `type` | 固定为 `car_status` | | `type` | 固定为 `car_status` |
| `data.deviceKey` | 小车设备标识 | | `data.deviceKey` | 小车设备标识 |
| `data.liftHeight` | 升降柱高度,单位 mm | | `data.liftHeight` | 升降柱高度,单位 mm |
| `data.dockStatus` | 自动回充状态文本;用于前端回显当前回充阶段 | | `timestamp` | 后端推送时间戳,毫秒 |
| `data.dockActive` | 回充或脱离充电桩是否进行中;为 `true` 时前端禁用「自动回充」「充电脱离」按钮 |
| `timestamp` | 后端推送时间戳,毫秒 |
## 小车速度上报消息 ## 小车速度上报消息

View File

@@ -165,74 +165,6 @@ uint16 height
| `3` | 停止 | `0` | | `3` | 停止 | `0` |
| `4` | 运行到指定高度 | 目标高度,单位 mm | | `4` | 运行到指定高度 | 目标高度,单位 mm |
## 充电点与回充配置
ROS 包参考:`charging_dock_interfaces/srv/SetDockPose`、`charging_dock_interfaces/srv/SetDockConfig`
消息类型:`dock_config`
```json
{
"type": "dock_config",
"requestId": "dock-1",
"data": {
"deviceKey": "ROBOT-001",
"dockX": 1.235,
"dockY": -0.42,
"dockYaw": 0.0,
"preDockX": 1.8,
"preDockY": -0.42,
"preDockYaw": 0.0,
"autoRechargeEnabled": true,
"lowBatteryThreshold": 30
}
}
```
字段说明:
| 字段 | 说明 |
| --- | --- |
| `dockX` / `dockY` / `dockYaw` | 充电点(对接点)位姿,`map` 坐标系,单位米 / 弧度 |
| `preDockX` / `preDockY` / `preDockYaw` | 预对接点位姿,同上 |
| `autoRechargeEnabled` | 是否开启低电量自动回充 |
| `lowBatteryThreshold` | 自动回充触发的电量阈值(%) |
说明:
- 三组字段互相独立:ROS 端只对**同时提供完整三元组**的点位调用 `/charging_dock/set_dock_pose` 或 `/charging_dock/set_pre_dock_pose`,缺任一字段则跳过;`autoRechargeEnabled` 与 `lowBatteryThreshold` 任一缺失时跳过 `/charging_dock/set_config`。
- 该消息由后端 `POST /admin/rosCar/updateDockConfig` 保存成功后下发,浏览器端不直接发送。
- 小车离线时后端只落库、不下发,需要重新保存一次才能同步到车端。
- 服务不可用时 ROS 端只记录告警,不回执失败。
## 回充与脱离充电桩
消息类型:`dock_start`(触发自动回充)、`dock_undock`(脱离充电桩)
```json
{
"type": "dock_undock",
"requestId": "dock-undock-1",
"data": {
"deviceKey": "ROBOT-001"
}
}
```
字段说明:
| 字段 | 说明 |
| --- | --- |
| `deviceKey` | 控制目标机器人设备标识 |
说明:
- 两条消息都由后端接口下发,浏览器端不直接发送:回充 `POST /admin/rosCar/startCharging`,脱离 `POST /admin/rosCar/undockCharging`,参数都是 `carId`。
- 车端分别调用 `/charging_dock/start` 与 `/charging_dock/undock`(均为 `std_srvs/Trigger`)。
- `accepted=true` 只代表车端已受理,机械动作在车端异步执行;执行期间 `dockActive` 为 `true`,进度由 `dockStatus` 文本回显(`/auto_docking_active`、`/auto_undocking_active` 合并上报)。
- 脱离动作:车端切到横移模式后向左侧退出约 `undock_distance`(默认 0.30 m)离开充电面板,完成后恢复阿克曼模式。
- 充电完成自动脱离:车端电量升到 `undock_battery_threshold`(默认 95%),且本次到桩时电量低于(阈值 - `undock_battery_start_margin`,默认 3%)时,自动触发一次脱离。
## 机器人端收到的消息 ## 机器人端收到的消息
设备端连接: 设备端连接:

View File

@@ -1,27 +1,19 @@
export type AlertPhotoScene = "cable" | "heat" | "crack"; function createAlertPhoto(scene, accent) {
const sceneMarkup = scene === "cable" ? `
export function createAlertPhoto(scene: AlertPhotoScene, accent: string) {
const sceneMarkup =
scene === "cable"
? `
<path d="M64 112 C140 90, 222 88, 304 104 S470 132, 556 110" stroke="${accent}" stroke-width="6" fill="none" stroke-linecap="round" opacity="0.9" /> <path d="M64 112 C140 90, 222 88, 304 104 S470 132, 556 110" stroke="${accent}" stroke-width="6" fill="none" stroke-linecap="round" opacity="0.9" />
<path d="M314 106 L340 92 L366 120" stroke="#ffe9a6" stroke-width="5" fill="none" stroke-linecap="round" /> <path d="M314 106 L340 92 L366 120" stroke="#ffe9a6" stroke-width="5" fill="none" stroke-linecap="round" />
<circle cx="340" cy="106" r="32" fill="rgba(255,102,82,0.18)" stroke="#ff8e79" stroke-width="2" stroke-dasharray="6 6" /> <circle cx="340" cy="106" r="32" fill="rgba(255,102,82,0.18)" stroke="#ff8e79" stroke-width="2" stroke-dasharray="6 6" />
` ` : scene === "heat" ? `
: scene === "heat"
? `
<ellipse cx="340" cy="122" rx="84" ry="46" fill="rgba(255,122,68,0.26)" /> <ellipse cx="340" cy="122" rx="84" ry="46" fill="rgba(255,122,68,0.26)" />
<ellipse cx="344" cy="122" rx="58" ry="30" fill="rgba(255,193,82,0.28)" /> <ellipse cx="344" cy="122" rx="58" ry="30" fill="rgba(255,193,82,0.28)" />
<path d="M320 146 C330 126, 334 114, 332 96 C344 112, 350 126, 348 148" fill="none" stroke="#ffd36a" stroke-width="4" stroke-linecap="round" /> <path d="M320 146 C330 126, 334 114, 332 96 C344 112, 350 126, 348 148" fill="none" stroke="#ffd36a" stroke-width="4" stroke-linecap="round" />
<path d="M358 142 C366 126, 372 114, 370 100 C382 112, 388 126, 384 144" fill="none" stroke="#ff8a5b" stroke-width="4" stroke-linecap="round" /> <path d="M358 142 C366 126, 372 114, 370 100 C382 112, 388 126, 384 144" fill="none" stroke="#ff8a5b" stroke-width="4" stroke-linecap="round" />
` ` : `
: `
<path d="M206 88 L234 130 L226 166 L268 210 L254 248 L294 282" stroke="#d8ecff" stroke-width="4" fill="none" stroke-linecap="round" /> <path d="M206 88 L234 130 L226 166 L268 210 L254 248 L294 282" stroke="#d8ecff" stroke-width="4" fill="none" stroke-linecap="round" />
<path d="M248 152 L280 136 L306 164" stroke="#d8ecff" stroke-width="3" fill="none" stroke-linecap="round" /> <path d="M248 152 L280 136 L306 164" stroke="#d8ecff" stroke-width="3" fill="none" stroke-linecap="round" />
<path d="M266 212 L302 196 L328 220" stroke="#d8ecff" stroke-width="3" fill="none" stroke-linecap="round" /> <path d="M266 212 L302 196 L328 220" stroke="#d8ecff" stroke-width="3" fill="none" stroke-linecap="round" />
<ellipse cx="258" cy="178" rx="86" ry="118" fill="rgba(132,196,255,0.08)" stroke="${accent}" stroke-width="2" stroke-dasharray="5 7" /> <ellipse cx="258" cy="178" rx="86" ry="118" fill="rgba(132,196,255,0.08)" stroke="${accent}" stroke-width="2" stroke-dasharray="5 7" />
`; `;
const svg = ` const svg = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360">
<defs> <defs>
@@ -61,21 +53,22 @@ export function createAlertPhoto(scene: AlertPhotoScene, accent: string) {
<rect x="20" y="20" width="600" height="320" rx="16" fill="none" stroke="rgba(110,224,255,0.12)" stroke-width="2" /> <rect x="20" y="20" width="600" height="320" rx="16" fill="none" stroke="rgba(110,224,255,0.12)" stroke-width="2" />
</svg> </svg>
`; `;
return `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(svg)}`; return `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(svg)}`;
} }
const recentAlertPhotoSources = {
export const recentAlertPhotoSources = {
"线缆破损": createAlertPhoto("cable", "#ff8f79"), "线缆破损": createAlertPhoto("cable", "#ff8f79"),
"电缆表面破损": createAlertPhoto("cable", "#ff8f79"), "电缆表面破损": createAlertPhoto("cable", "#ff8f79"),
"桥架断裂": createAlertPhoto("crack", "#89d8ff"), "桥架断裂": createAlertPhoto("crack", "#89d8ff"),
"隧道积水": createAlertPhoto("heat", "#ffc86c"), "隧道积水": createAlertPhoto("heat", "#ffc86c"),
"局部高温": createAlertPhoto("heat", "#ffc86c"), "局部高温": createAlertPhoto("heat", "#ffc86c"),
"墙体渗漏": createAlertPhoto("crack", "#89d8ff"), "墙体裂缝": createAlertPhoto("crack", "#89d8ff")
} as const; };
const fallbackAlertPhoto = recentAlertPhotoSources["墙体裂缝"];
const fallbackAlertPhoto = recentAlertPhotoSources["墙体渗漏"]; function getRecentAlertPhoto(type) {
return recentAlertPhotoSources[type] ?? fallbackAlertPhoto;
export function getRecentAlertPhoto(type: string) {
return recentAlertPhotoSources[type as keyof typeof recentAlertPhotoSources] ?? fallbackAlertPhoto;
} }
export {
createAlertPhoto,
getRecentAlertPhoto,
recentAlertPhotoSources
};

View File

@@ -1,5 +1,5 @@
<script lang="ts" setup> <script setup>
import SwitchPageBtn from "@/views/dashboard1/components/btn";
</script> </script>
<template> <template>

View File

@@ -0,0 +1,20 @@
import { defineComponent } from "vue";
import "./index.less";
const longIndex = [0, 6, 12];
export default defineComponent({
name: "Chart",
props: {},
setup(props) {
return () => <div class="chart">
<ul class="scale__ul">{Array.from({ length: 13 }).map((_, index) => {
const long = longIndex.includes(index);
return <li
class={[`scale__li`, { "scale__li--long": long }, { "scale__li--active": index > 5 }]}
style={{ transform: `rotate(-${15 * index}deg) translate(${long ? 59 : 65}px,-50%)` }}
key={index}
/>;
})}</ul>
<div class="chart__name">xx</div>
</div>;
}
});

View File

@@ -1,26 +0,0 @@
import {defineComponent} from "vue";
import "./index.less"
const longIndex = [0, 6, 12];
export default defineComponent({
name: "Chart",
props: {},
setup(props) {
return () => (
<div class='chart'>
<ul class='scale__ul'>
{
Array.from({length: 13}).map((_, index) => {
const long = longIndex.includes(index);
return <li
class={[`scale__li`, {'scale__li--long': long}, {'scale__li--active': index > 5}]}
style={{transform: `rotate(-${15 * index}deg) translate(${long ? 59 : 65}px,-50%)`}}
key={index}></li>
})
}
</ul>
<div class='chart__name'>xx</div>
</div>
);
},
});

View File

@@ -1,20 +1,16 @@
<script lang="ts" setup> <script setup>
import { computed, ref } from "vue"; import { computed, ref } from "vue";
const animationSvgRef = ref(); const animationSvgRef = ref();
const config = { const config = {
count: 16, count: 16,
initR: 2, initR: 2,
gap: 0.2, gap: 0.2,
dur: 8, dur: 8,
startY: 266.5, startY: 266.5
}; };
function generateNumber() { function generateNumber() {
return (Math.random() * 10).toFixed(1) + "Mb/s"; return (Math.random() * 10).toFixed(1) + "Mb/s";
} }
const polylineComputed = computed(() => { const polylineComputed = computed(() => {
const arr = []; const arr = [];
let startY = config.startY; let startY = config.startY;
@@ -22,28 +18,25 @@ const polylineComputed = computed(() => {
let startX = 465; let startX = 465;
let endX = 1820; let endX = 1820;
const points = `${startX},${startY} 846,${startY} 1280,634 ${endX},634`; const points = `${startX},${startY} 846,${startY} 1280,634 ${endX},634`;
const textY = startY - 29.5; const textY = startY - 29.5;
const text1 = { x: startX + 137, y: textY, value: `${generateNumber()}` }; const text1 = { x: startX + 137, y: textY, value: `${generateNumber()}` };
const text2 = { const text2 = {
x: startX + 137 + 147, x: startX + 137 + 147,
y: textY, y: textY,
value: `${generateNumber()}`, value: `${generateNumber()}`
}; };
const text3 = {}; const text3 = {};
const value = { const value = {
points, points,
text1, text1,
text2, text2,
text3, text3
}; };
arr.push(value); arr.push(value);
startY += 180; startY += 180;
} }
return arr; return arr;
}); });
const circleComputed = computed(() => { const circleComputed = computed(() => {
const circles = []; const circles = [];
let startY = config.startY; let startY = config.startY;
@@ -60,7 +53,7 @@ const circleComputed = computed(() => {
r: r.toFixed(1), r: r.toFixed(1),
startX, startX,
startY, startY,
endX, endX
}; };
circles.push(circle); circles.push(circle);
endX = 1820; endX = 1820;

View File

@@ -1,33 +1,24 @@
<script lang="ts" setup> <script setup>
import { computed, reactive, ref } from "vue"; import { computed, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from "vue-router";
import { useUserStore } from "@/store/modules/user"; import { useUserStore } from "@/store/modules/user.js";
import { encryptPasswordPayload } from '@/utils/passwordEncrypt' import { encryptPasswordPayload } from "@/utils/passwordEncrypt.js";
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
const userStore = useUserStore(); const userStore = useUserStore();
const form = reactive({ const form = reactive({
username: "", username: "",
password: "", password: ""
}); });
const loading = ref(false); const loading = ref(false);
const errorMessage = ref(""); const errorMessage = ref("");
const redirectPath = computed(() => { const redirectPath = computed(() => {
const redirect = route.query.redirect; const redirect = route.query.redirect;
if ( if (typeof redirect === "string" && redirect.startsWith("/") && !redirect.startsWith("//")) {
typeof redirect === "string" &&
redirect.startsWith("/") &&
!redirect.startsWith("//")
) {
return redirect; return redirect;
} }
return "/dashboard/integrated-center"; return "/dashboard/integrated-center";
}); });
// 校验登录表单,避免空账号或空密码提交到后端。
function validateLoginForm() { function validateLoginForm() {
if (!form.username.trim()) { if (!form.username.trim()) {
errorMessage.value = "请输入账号"; errorMessage.value = "请输入账号";
@@ -39,23 +30,18 @@ function validateLoginForm() {
} }
return true; return true;
} }
// 提交登录信息,成功后回到登录前访问的页面。
async function handleLogin() { async function handleLogin() {
if (!validateLoginForm() || loading.value) { if (!validateLoginForm() || loading.value) {
return; return;
} }
loading.value = true; loading.value = true;
errorMessage.value = ""; errorMessage.value = "";
try { try {
const encryptedForm = await encryptPasswordPayload(form, ['password']) const encryptedForm = await encryptPasswordPayload(form, ["password"]);
await userStore.login(encryptedForm) await userStore.login(encryptedForm);
router.replace(redirectPath.value); router.replace(redirectPath.value);
} catch (error) { } catch (error) {
errorMessage.value = errorMessage.value = error instanceof Error ? error.message : "登录失败\,请检查账号或密码";
error instanceof Error ? error.message : "登录失败,请检查账号或密码";
} finally { } finally {
loading.value = false; loading.value = false;
} }

8
src/vite-env.d.ts vendored
View File

@@ -1,8 +0,0 @@
/// <reference types="vite/client" />
/// <reference types="vue/jsx" />
declare module "*.vue" {
import { DefineComponent } from "vue";
const component: DefineComponent<{}, {}, any>;
export default component;
}

View File

@@ -1,20 +0,0 @@
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"module": "ESNext",
"moduleResolution": "bundler",
"strict": true,
"jsx": "preserve",
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"lib": ["ESNext", "DOM"],
"skipLibCheck": true,
"noEmit": true,
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "src/api/rosCar.ts"]
}

41
vite.config.js Normal file
View File

@@ -0,0 +1,41 @@
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import { resolve } from "path";
export default ({ command }) => {
const isBuild = command === "build";
return {
plugins: [
vue(),
vueJsx()
],
define: {
__VUE_OPTIONS_API__: false
// 关闭 Vue2 中的 options选项API
},
base: "./",
// 使用相对路径
resolve: {
alias: [{ find: "@", replacement: resolve(__dirname, "src") }]
},
server: {
port: 6003,
host: true,
proxy: {
"/api": {
target: `http://192.168.3.110:16003/`,
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, "")
},
"/ws": {
target: `ws://192.168.3.110:16003/`,
changeOrigin: true,
ws: true
}
}
},
oxc: {
//清除全局的console.log和debug
drop: isBuild ? ["console", "debugger"] : []
}
};
};

View File

@@ -1,59 +0,0 @@
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { resolve } from 'path'
import Components from 'unplugin-vue-components/vite'
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
import { defineConfig, type ConfigEnv } from 'vite'
// import { viteSingleFile } from 'vite-plugin-singlefile'
// https://vitejs.dev/config/
export default defineConfig(({ command }: ConfigEnv) => {
const isBuild = command === 'build'
return ({
plugins: [
vue(),
vueJsx(),
Components({
resolvers: [NaiveUiResolver()]
}),
],
define: {
__VUE_OPTIONS_API__: false // 关闭 Vue2 中的 options选项API
},
base: './', // 使用相对路径
resolve: {
alias: [{ find: '@', replacement: resolve(__dirname, 'src') }]
},
server: {
port: 6003,
host: true,
proxy: {
'/api': {
target: `http://192.168.3.110:16003/`,
changeOrigin: true,
rewrite: (path: string) => path.replace(/^\/api/, '')
},
'/ws': {
target: `ws://192.168.3.110:16003/`,
changeOrigin: true,
ws: true
}
}
},
// Vite 8 原生方式:使用 Oxc Minifier 的 drop 选项
build: {
rolldownOptions: {
output: {
minify: {
compress: {
dropConsole: isBuild,
dropDebugger: isBuild,
},
},
},
},
},
})
})