dyf/dyf-vue-ui
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

设备控制提交

Browse Source
This commit is contained in:
fengerli
2025-08-26 16:20:35 +08:00
parent 8d92482de3
commit af736485e4
11 changed files with 660 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/api/controlCenter/controlPanel/index.ts
View File

@ -12,13 +12,76 @@ export const devicegroupList = (params) => {
// 设备列表
export const deviceControlCenterList = (params) => {
return request({
url: '/api/device/controlCenter/list',
url: '/api/device/list',
method: 'get',
params: params
});
};
// 设备详情
export const deviceDeatil = (id) => {
return request({
url: `/api/bjq/device/${id}`,
method: 'get',
});
};
// 人员信息发送
export const registerPersonInfo = (data: any) => {
return request({
url: `/api/bjq/device/registerPersonInfo`,
method: 'post',
data: data
});
};
// 灯光亮度
export const lightBrightnessSettings = (data: any) => {
return request({
url: `/api/bjq/device/lightBrightnessSettings`,
method: 'post',
data: data
});
};
// 灯光模式
export const lightModeSettings = (data: any) => {
return request({
url: `/api/bjq/device/lightModeSettings`,
method: 'post',
data: data
});
};
// 激光模式
export const laserModeSettings = (data: any) => {
return request({
url: `/api/bjq/device/laserModeSettings`,
method: 'post',
data: data
});
};
// 强制报警
export const sendAlarmMessage = (data: any) => {
return request({
url: `/api/bjq/device/sendAlarmMessage`,
method: 'post',
data: data
});
};
// 获取设备实时状态
export const deviceRealTimeStatus = (data: any) => {
return request({
url: `/api/device/realTimeStatus`,
method: 'post',
data: data
});
};
export default {
devicegroupList,
deviceControlCenterList
devicegroupList,
deviceControlCenterList,
deviceDeatil,
registerPersonInfo,
lightBrightnessSettings,
lightModeSettings,
laserModeSettings,
sendAlarmMessage,
deviceRealTimeStatus
};

54
src/api/controlCenter/controlPanel/types.ts
View File

@ -4,16 +4,52 @@ export interface deviceQuery {
deviceId: string;
deviceName: string;
deviceStatus: string;
deviceMac:string;
deviceImei:string;
currentOwnerId:string;
communicationMode:string;
queryParams:string;
pageSize:Number;
deviceMac: string;
deviceImei: string;
currentOwnerId: string;
communicationMode: string;
queryParams: string;
pageSize: Number;
deviceType: string
}
export interface deviceVO {
user: UserVO;
roles: string[];
permissions: string[];
id: number; // 设备ID
deviceName: string; // 设备名称（对应子组件的device.name）
typeName: string; // 设备类型/型号（对应子组件的device.model）
onlineStatus: 0 | 1; // 设备状态（0=失效/离线，1=正常/在线，对应子组件的device.status）
lng?: number; // 经度（地图打点用）
lat?: number; // 纬度（地图打点用）
// 其他字段...
}
// 1. 定义设备详情的类型（根据接口返回字段调整！关键：和后端返回的字段名一致）
export interface DeviceDetail {
deviceName: string; // 设备名称
deviceImei: string; // 设备型号
onlineStatus: 0 | 1; // 设备状态（0=离线，1=在线）
batteryPercentage: number; // 电量（如80，对应80%）
batteryRemainingTime: string; // 续航（如"115"表示115分钟，或直接返回"1小时55分钟"）
longitude: string; // 经度
latitude: string; // 纬度
address: string; // 地址
currentLightMode?: string;// 当前选中的灯光模式（如"strong"，对应强光）
sendMsg: string;
lightBrightness: string;
personnelInfo: { // 人员信息（嵌套对象，根据接口调整）
unitName: string; // 单位
position: string; // 职位
name: string; // 姓名
code: string; // ID（身份证/工号）
};
}
// 定义灯光模式的类型接口
export interface LightMode {
id: string;
name: string;
icon: string;
activeIcon: string;
active: boolean;
switchStatus: boolean;
instructValue: string
}

BIN
src/assets/images/close.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 261 B

BIN
src/assets/images/close_HL.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 261 B

111
src/utils/function.ts Normal file
View File

@ -0,0 +1,111 @@
/**
* 生成短ID (16位字符) 类似随机数
*/
export const generateShortId = (): string => {
const crypto = window.crypto || (window as any).msCrypto;
if (crypto?.getRandomValues) {
return Array.from(crypto.getRandomValues(new Uint32Array(3)))
.map(n => n.toString(36))
.join('')
.slice(0, 16);
}
return Date.now().toString(36) + Math.random().toString(36).substr(2, 8);
};
export default generateShortId;
// 类型定义
export interface DeviceStatusOptions {
functionMode: number;
batchId: string;
typeName: string;
deviceImei: string;
interval?: number;
}
export interface ApiResponse<T = any> {
code: number;
msg: string;
data: T;
}
export interface DeviceStatusData {
functionAccess: 'OK' | 'ACTIVE' | 'FAILED' | 'TIMEOUT' | string;
[key: string]: any;
}
export type ApiClientFunction = (params: any) => Promise<ApiResponse>;
/**
* 获取设备状态（带自动轮询）
* @param options - 配置对象
* @param options.functionMode - 功能模式
* @param options.batchId - 批次ID
* @param options.typeName - 类型名称
* @param options.deviceImei - 设备IMEI
* @param options.interval - 轮询间隔（毫秒），默认500
* @param apiClient - 接口调用函数
* @returns 设备状态响应
*/
export async function getDeviceStatus(
options: DeviceStatusOptions,
apiClient: ApiClientFunction
): Promise<ApiResponse<DeviceStatusData>> {
const {
functionMode,
batchId,
typeName,
deviceImei,
interval = 500
} = options;
// 添加最大重试次数防止无限循环
const checkStatus = async (): Promise<ApiResponse<DeviceStatusData>> => {
try {
const res = await apiClient({
functionMode,
batchId,
typeName,
deviceImei
});
if (res.code !== 200) {
throw new Error(res.msg || '请求失败');
}
switch (res.data.functionAccess) {
case 'OK':
return res;
case 'ACTIVE':
await new Promise(resolve => setTimeout(resolve, interval));
return checkStatus();
case 'FAILED':
throw new Error('设备操作失败');
case 'TIMEOUT':
throw new Error('设备响应超时');
default:
throw new Error(`未知状态: ${res.data.functionAccess}`);
}
} catch (error) {
console.error('设备状态轮询错误:', error);
throw error;
}
};
return checkStatus();
}
// 使用示例
/*
import { getDeviceStatus } from '@/utils/deviceUtils';
import { apiGetDeviceStatus } from '@/api/device';
try {
const result = await getDeviceStatus(
{
functionMode: 1,
batchId: '12345',
typeName: 'sensor',
deviceImei: '1234567890',
interval: 1000
},
apiGetDeviceStatus
);
console.log('设备状态:', result.data);
} catch (error) {
console.error('获取设备状态失败:', error);
}
*/

6
src/utils/request.ts
View File

@ -69,9 +69,9 @@ service.interceptors.request.use(
const s_time = sessionObj.time; // 请求时间
const interval = 500; // 间隔时间(ms)，小于此时间视为重复提交
if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
const message = '数据正在处理，请勿重复提交';
console.warn(`[${s_url}]: ` + message);
return Promise.reject(new Error(message));
const message = '';
// console.warn(`[${s_url}]: ` + message);
// return Promise.reject(new Error(message));
} else {
cache.session.setJSON('sessionObj', requestObj);
}

374
src/views/controlCenter/6170/index.vue
View File

@ -2,11 +2,15 @@
<div class="device-page p-2">
<!-- 头部信息栏 -->
<div class="header-bar">
<div>设备名称：6170零零一</div>
<div>设备型号：BJQ6170</div>
<div class="device-status">设备状态：<span class="online">在线</span></div>
<div>电量：80%</div>
<div>续航：1小时55分钟</div>
<div>设备名称：{{ deviceDetail.deviceName }}</div>
<div>设备型号：{{ deviceDetail.deviceImei }}</div>
<div class="device-status">设备状态：
<span :class="{ online: deviceDetail.onlineStatus === 1, offline: deviceDetail?.onlineStatus === 0 }">
{{ deviceDetail.onlineStatus === 1 ? "在线" : "离线" }}
</span>
</div>
<div>电量：{{ deviceDetail.batteryPercentage || 0 }}%</div>
<div>续航：{{ deviceDetail.batteryRemainingTime || "0" }} 分钟</div>
</div>
<!-- 主体内容区域 -->
@ -18,13 +22,20 @@
<h4 class="section-title">灯光模式</h4>
<div class="light-mode">
<!-- 使用v-for循环渲染灯光模式卡片 -->
<div class="mode-card" :class="{ 'active': mode.active }" @click="handleModeClick(mode.id)"
v-for="mode in lightModes" :key="mode.id">
<div class="mode-card" :class="{ 'active': mode.active }"
@click.stop="handleModeClick(mode.id)" v-for="mode in lightModes" :key="mode.id">
<img :src="mode.active ? mode.activeIcon : mode.icon" :alt="mode.name"
class="mode-icon" />
<div class="mode-name">{{ mode.name }}</div>
<el-switch v-model="mode.switchStatus" />
</div>
<!-- 激光模式（单独处理） -->
<div class="mode-card" :class="{ 'active': laserMode.active }" @click="handleLaserClick">
<img :src="laserMode.active ? laserMode.activeIcon : laserMode.icon"
:alt="laserMode.name" class="mode-icon" />
<div class="mode-name">{{ laserMode.name }}</div>
<el-switch v-model="laserMode.switchStatus" />
</div>
</div>
</div>
</el-col>
@ -32,23 +43,26 @@
<div class="brightness-alarm">
<div class="brightness-control">
<span class="brightness-label">灯光亮度</span>
<el-input class="inputTFT" v-model="brightness" :min="0" :max="100" :step="1"
size="small" />
<el-input class="inputTFT" v-model="deviceDetail.lightBrightness" :min="0" :max="100"
:step="1" size="small" />
<span class="brightness-value">%</span>
<el-button type="primary" class="save-btn">保存</el-button>
<el-button type="primary" class="save-btn" @click="saveBtn">保存</el-button>
</div>
<el-button type="danger" class="alarm-btn">强制报警</el-button>
<el-button type="danger" class="alarm-btn" @click="forceAlarm">强制报警</el-button>
</div>
<div class="content-card_gps">
<h4 class="section-title">位置信息</h4>
<div class="location-info">
<div class="location-item">
<span class="location-icon"></span>
<span>经纬度 114°7'E 30°28'N</span>
<span>经纬度 {{ deviceDetail && deviceDetail.longitude ?
Number(deviceDetail.longitude).toFixed(4) : '无' }}
{{ deviceDetail && deviceDetail.latitude ? Number(deviceDetail.latitude).toFixed(4)
: '无' }} </span>
</div>
<div class="location-item">
<div>地址 <span class="lacatin_gps">ksjkjwekrnjewrnjewrnjwerjweb</span></div>
<div>地址 <span class="lacatin_gps">{{ deviceDetail.address || "未获取到地址" }}</span></div>
<el-button link type="primary" class="view-btn">查看</el-button>
</div>
</div>
@ -64,21 +78,25 @@
<div class="form-grid">
<div class="form-item">
<span class="form-label">单位:</span>
<el-input placeholder="请输入设备名称" />
<el-input v-if="deviceDetail" placeholder="请输入单位名称"
v-model="deviceDetail.personnelInfo.unitName" />
</div>
<div class="form-item">
<span class="form-label">职位:</span>
<el-input placeholder="请输入设备名称" />
<el-input v-if="deviceDetail" placeholder="请输入职位名称"
v-model="deviceDetail.personnelInfo.position" />
</div>
<div class="form-item">
<span class="form-label">姓名</span>
<el-input value="王平安" />
<el-input v-if="deviceDetail" placeholder="请输入职位姓名"
v-model="deviceDetail.personnelInfo.name" />
</div>
<div class="form-item">
<span class="form-label">ID:</span>
<el-input placeholder="请输入设备名称" />
<el-input v-if="deviceDetail" placeholder="请输入ID"
v-model="deviceDetail.personnelInfo.code" />
</div>
<el-button type="primary" class="register-btn">登记</el-button>
<el-button type="primary" class="register-btn" @click="registerPostInit">登记</el-button>
</div>
</div>
</el-col>
@ -86,9 +104,9 @@
<div class="content-card">
<h4 class="section-title">发送信息</h4>
<div class="message-content">
<el-input type="textarea" class="textareaTFT" :rows="4" value="现场危险，停止救援！紧急撤离至安全区域！"
resize="none" />
<el-button type="primary" class="send-btn">发送</el-button>
<el-input type="textarea" class="textareaTFT" :rows="4" placeholder="现场危险，停止救援！紧急撤离至安全区域！"
v-model="deviceDetail.sendMsg" resize="none" />
<el-button type="primary" class="send-btn" @click="send">发送</el-button>
</div>
</div>
</el-col>
@ -97,18 +115,11 @@
</div>
</template>
<script setup name="DeviceControl" lang="ts">
import { ref } from 'vue';
const brightness = ref(50);
// 定义灯光模式的类型接口
interface LightMode {
id: string;
name: string;
icon: string;
activeIcon: string;
active: boolean;
switchStatus: boolean;
}
const route = useRoute();
import api from '@/api/controlCenter/controlPanel/index'
import { DeviceDetail, LightMode } from '@/api/controlCenter/controlPanel/types';
import { generateShortId, getDeviceStatus } from '@/utils/function';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
// 导入图片资源（确保路径正确）
import strongLightDefault from '@/assets/images/strong-light.png';
import strongLightActive from '@/assets/images/strong-light_HL.png';
@ -120,8 +131,9 @@ import floodLightDefault from '@/assets/images/flood-light.png';
import floodLightActive from '@/assets/images/flood-light_HL.png';
import laserLightDefault from '@/assets/images/laser-light.png';
import laserLightActive from '@/assets/images/laser-light_HL.png';
// 灯光模式数据
import closeDefault from '@/assets/images/close.png';
import closeActive from '@/assets/images/close_HL.png';
import { send } from 'vite';
// 灯光模式数据（引用导入的图片）
const lightModes = ref<LightMode[]>([
{
@ -129,71 +141,269 @@ const lightModes = ref<LightMode[]>([
name: '强光',
icon: strongLightDefault, // 直接使用导入的变量
activeIcon: strongLightActive,
switchStatus: true,
instructValue: '1',
active: true,
switchStatus: true
},
{
id: 'weak',
name: '弱光',
icon: weakLightDefault,
activeIcon: weakLightActive,
switchStatus: false,
instructValue: '2',
active: false,
switchStatus: false
},
{
id: 'strobe',
name: '爆闪',
icon: strobeLightDefault,
activeIcon: strobeLightActive,
active: false,
switchStatus: false
switchStatus: false,
instructValue: '3',
active: false
},
{
id: 'flood',
name: '泛光',
icon: floodLightDefault,
activeIcon: floodLightActive,
active: false,
switchStatus: false
switchStatus: false,
instructValue: '4',
active: false
},
{
id: 'laser',
name: '激光',
icon: laserLightDefault,
activeIcon: laserLightActive,
active: false,
switchStatus: false
}
id: 'close',
name: '关闭',
icon: closeDefault,
activeIcon: closeActive,
switchStatus: false,
instructValue: '0',
active: false
},
]);
// 当前选中的模式
const currentMode = computed(() => {
return lightModes.value.find(mode => mode.active);
const laserMode = ref<LightMode>({
id: 'laser',
name: '激光',
icon: laserLightDefault,
activeIcon: laserLightActive,
switchStatus: false,
instructValue: '1',
active: false
});
// 处理模式点击事件
const handleModeClick = (modeId: string) => {
// 重置所有模式状态
lightModes.value.forEach(mode => {
const isTargetMode = mode.id === modeId;
mode.active = isTargetMode;
mode.switchStatus = isTargetMode;
});
// 可以在这里添加模式切换的业务逻辑
console.log(`切换到${lightModes.value.find(m => m.id === modeId)?.name}模式`);
};
// 监听开关状态变化
lightModes.value.forEach(mode => {
watch(() => mode.switchStatus, (newVal) => {
if (newVal) {
// 如果打开当前开关，关闭其他所有开关
handleModeClick(mode.id);
const deviceDetail = ref<DeviceDetail>({
// 重点：personnelInfo 初始化为空对象，避免 undefined
personnelInfo: {
unitName: '',
position: '',
name: '',
code: ''
},
lightBrightness: '',
deviceName: '',
deviceImei: '',
onlineStatus: 0,
batteryPercentage: 0,
batteryRemainingTime: '',
longitude: '',
latitude: '',
address: '',
sendMsg: ''
});
// 保留原有的操作中标志位
const isUpdatingStatus = ref(false);
const handleModeClick = async (modeId: string) => {
if (isUpdatingStatus.value || isSyncingStatus.value) return;
try {
const deviceId = route.params.deviceId as string;
if (!deviceId) return;
const targetMode = lightModes.value.find(m => m.id === modeId);
if (!targetMode || !targetMode.instructValue) return;
// 标记为用户操作中的更新
isUpdatingStatus.value = true;
// 调用接口（仅用户点击时触发一次）
const res = await api.lightModeSettings({
deviceId,
instructValue: targetMode.instructValue,
deviceImei: deviceDetail.value.deviceImei,
typeName: deviceDetail.value.typeName,
});
if (res.code === 200) {
proxy?.$modal.msgSuccess(res.msg);
setActiveLightMode(modeId);
await getList();
} else {
// 如果关闭当前开关
mode.active = false;
proxy?.$modal.msgError(res.msg);
const prevActiveMode = lightModes.value.find(m => m.active);
if (prevActiveMode) {
setActiveLightMode(prevActiveMode.id);
}
}
} catch (error) {
proxy?.$modal.msgError("操作失败，请稍后重试");
// 异常时恢复状态
const prevActiveMode = lightModes.value.find(m => m.active);
if (prevActiveMode) {
setActiveLightMode(prevActiveMode.id);
}
} finally {
// 无论成功失败，最终重置用户操作标志位
isUpdatingStatus.value = false;
}
};
const isSyncingStatus = ref(false);
const setActiveLightMode = (targetModeId: string) => {
isSyncingStatus.value = true; // 开启阻断：更新switchStatus时，watch不触发接口
lightModes.value.forEach(mode => {
const isActive = mode.id === targetModeId;
mode.active = isActive;
mode.switchStatus = isActive; // 这里更新会触发watch，但被isSyncingStatus阻断
});
isSyncingStatus.value = false; // 同步完成，重置标志位
};
const getList = async () => {
try {
const deviceId = route.params.deviceId;
if (!deviceId) return;
const res = await api.deviceDeatil(deviceId as string);
deviceDetail.value = res.data;
// 处理人员信息空值（原有逻辑保留）
if (!deviceDetail.value.personnelInfo) {
deviceDetail.value.personnelInfo = {
unitName: '',
position: '',
name: '',
code: ''
};
}
// 1. 匹配接口返回的灯光模式
let targetModeId = "strong";
const mainLightMode = String(res.data.mainLightMode || "1"); // 接口值转字符串，“强光”
const matchedMode = lightModes.value.find(
mode => mode.instructValue === mainLightMode
);
if (matchedMode) {
targetModeId = matchedMode.id;
}
setActiveLightMode(targetModeId);
const laserStatus = res.data.laserModeStatus ?? 0;
laserMode.value.active = laserStatus === 1;
laserMode.value.switchStatus = laserStatus === 1;
} catch (error) {
console.error("获取设备详情失败：", error);
setActiveLightMode("strong"); // 异常时默认强光
}
};
// 激光接口调用
const handleLaserClick = async () => {
try {
const deviceId = route.params.deviceId as string;
if (!deviceId) return;
const targetStatus = !laserMode.value.active;
const res = await api.laserModeSettings({
deviceId,
deviceImei: deviceDetail.value.deviceImei,
typeName: deviceDetail.value.typeName,
instructValue: targetStatus ? 1 : 0
});
if (res.code === 200) {
proxy?.$modal.msgSuccess(res.msg);
laserMode.value.active = targetStatus;
laserMode.value.switchStatus = targetStatus;
getList();
} else {
proxy?.$modal.msgError(res.msg);
// 恢复之前的状态
laserMode.value.switchStatus = !targetStatus;
}
} catch (error: any) {
proxy?.$modal.msgError(error.msg);
// 恢复之前的状态
laserMode.value.switchStatus = !laserMode.value.switchStatus;
} finally { }
}
// 人员信息发送
const registerPostInit = () => {
if (!deviceDetail.value.personnelInfo.unitName) {
proxy?.$modal.msgWarning('单位名称不能为空');
return
}
if (!deviceDetail.value.personnelInfo.name) {
proxy?.$modal.msgWarning('姓名不能为空');
return
}
if (!deviceDetail.value.personnelInfo.position) {
proxy?.$modal.msgWarning('职位不能为空');
return
}
if (!deviceDetail.value.personnelInfo.code) {
proxy?.$modal.msgWarning('ID不能为空');
return
}
let data = {
code: deviceDetail.value.personnelInfo.code,
name: deviceDetail.value.personnelInfo.name,
position: deviceDetail.value.personnelInfo.position,
unitName: deviceDetail.value.personnelInfo.unitName,
deviceId: route.params.deviceId,
deviceImei: deviceDetail.value.deviceImei
}
api.registerPersonInfo(data).then((res) => {
console.log(res, 'res');
if (res.code === 200) {
proxy?.$modal.msgSuccess(res.msg);
getList();
} else {
proxy?.$modal.msgError(res.msg);
}
})
}
// 灯光亮度
const saveBtn = () => {
let data = {
deviceId: route.params.deviceId,
instructValue: deviceDetail.value.lightBrightness + '.00',
deviceImei: deviceDetail.value.deviceImei,
}
api.lightBrightnessSettings(data).then((res) => {
if (res.code === 200) {
proxy?.$modal.msgSuccess(res.msg);
getList();
} else {
proxy?.$modal.msgError(res.msg);
}
})
}
// 强制报警
const forceAlarm = async () => {
try {
// 2. 准备请求数据
const batchId = generateShortId();
let data = {
deviceIds: [route.params.deviceId],
typeName: deviceDetail.value.typeName,
deviceImeiList: [deviceDetail.value.deviceImei],
batchId: batchId,
instructValue: '1', //强制报警1，解除报警0
}
const registerRes = await api.sendAlarmMessage(data);
if (registerRes.code == 200) {
proxy?.$modal.msgSuccess(registerRes.msg);
}
} catch (error:any) {
proxy?.$modal.msgError(error.msg);
} finally {}
}
onMounted(() => {
getList();
});
</script>
<style lang="scss" scoped>
.device-page {
@ -252,14 +462,15 @@ lightModes.value.forEach(mode => {
justify-content: space-between;
}
.lacatin_gps {
height: 70px;
border-radius: 4px;
background: rgba(247, 248, 252, 1);
display: inline-block;
width: 400px;
padding: 10px;
}
.lacatin_gps {
height: 70px;
border-radius: 4px;
background: rgba(247, 248, 252, 1);
display: inline-block;
width: 400px;
padding: 10px;
}
.mode-card {
display: flex;
@ -282,6 +493,7 @@ lightModes.value.forEach(mode => {
margin-bottom: 10px;
transition: all 0.3s ease;
object-fit: scale-down;
height: 50px;
}
.mode-name {
@ -295,7 +507,7 @@ lightModes.value.forEach(mode => {
--el-switch-off-color: #dcdfe6;
}
}
.brightness-alarm {

110
src/views/controlCenter/controlPanel/components/map.vue
View File

@ -11,17 +11,18 @@
</div>
<!-- 设备项（带复选框） -->
<div class="device_item" v-for="device in deviceList" :key="device.id">
<div class="device_item" v-for="(device, index) in props.deviceList" :key="index">
<!-- 复选框 -->
<el-checkbox :value="device.id" v-model="checkedDeviceIds" class="device_checkbox"></el-checkbox>
<!-- 设备信息 -->
<div class="device_page">
<div class="device_info">
<div class="device_name">{{ device.name }}</div>
<div class="device_model">{{ device.model }}</div>
<div class="device_status" :class="{ online: device.status === '在线', offline: device.status === '离线' }">
{{ device.status }}
<div class="device_name">{{ device.deviceName }}</div>
<div class="device_model">{{ device.typeName }}</div>
<div class="device_status"
:class="{ online: device.onlineStatus === 1, offline: device.onlineStatus === 0 }">
{{ device.onlineStatus === 1 ? '在线' : '离线' }}
</div>
</div>
@ -38,6 +39,15 @@
</template>
<script setup lang="ts">
const props = defineProps({
deviceList: {
type: Array,
required: false,
default: () => [] // 数组/对象类型的默认值必须用函数返回，避免引用共享
}
});
console.log(props.deviceList);
const router = useRouter();
// 声明高德地图全局类型
declare var AMap: any;
@ -50,56 +60,94 @@ const AMAP_SECURITY_CODE = '5ed9004cb461cd463580b02a775c8d91';
const mapRef = ref<HTMLDivElement | null>(null);
let mapInstance: any = null;
// 模拟设备数据
const deviceList = ref([
{ id: 1, name: '6170一号', model: 'BJQ6170', status: '在线', lng: 114.4074, lat: 30.5928 },
{ id: 2, name: '6170二号', model: 'BJQ6170', status: '在线', lng: 114.4174, lat: 30.5928 },
{ id: 3, name: '6170三号', model: 'BJQ6170', status: '离线', lng: 114.4074, lat: 30.6028 },
{ id: 4, name: '6170四号', model: 'BJQ6170', status: '在线', lng: 114.4174, lat: 30.6028 },
]);
// 复选框状态管理
const checkedDeviceIds = ref<number[]>([]); // 存储选中的设备ID
const checkedDeviceIds = ref(); // 存储选中的设备ID
const checkAll = ref(false); // 全选状态
// 全选/取消全选
const handleCheckAllChange = (val: boolean) => {
checkedDeviceIds.value = val
? deviceList.value.map(device => device.id) // 全选：选中所有设备ID
? props.deviceList.map(device => device.id) // 全选：选中所有设备ID
: []; // 取消全选：清空
};
// 监听单个复选框变化，更新全选状态
watch(checkedDeviceIds, (newVal) => {
checkAll.value = newVal.length === deviceList.value.length && deviceList.value.length > 0;
checkAll.value = newVal.length === props.deviceList.length && props.deviceList.length > 0;
});
// 设备控制事件
const handleControl = (device: any) => {
console.log('控制设备：', device);
const deviceId = device.id;
const deviceId = device.id;
router.push('/controlCenter/6170/' + deviceId);
};
// 新增：获取地图中心坐标（优先用设备数据，无则用默认）
const getCenterCoord = () => {
// 1. 遍历设备列表，找第一个有有效经纬度的设备
const validDevice = props.deviceList.find(
(device:any) =>
device.longitude !== undefined &&
device.longitude !== null &&
device.latitude !== undefined &&
device.latitude !== null &&
!isNaN(Number(device.longitude)) && // 确保是数字（避免字符串空值/非数字）
!isNaN(Number(device.latitude))
);
// 地图初始化（保持不变）
// 2. 有有效设备则用它的坐标，否则用默认值
if (validDevice) {
return [Number(validDevice.longitude), Number(validDevice.latitude)]; // 转数字防字符串坐标
} else {
return [114.4074, 30.5928]; // 默认中心坐标
}
};
// 地图初始化（修改center配置）
const initMap = () => {
if (!window.AMap || !mapRef.value) return;
// 2. 调用函数获取中心坐标（不再用固定值）
const centerCoord = getCenterCoord();
mapInstance = new AMap.Map(mapRef.value, {
center: [114.4074, 30.5928],
center: centerCoord, // 改用动态获取的坐标
zoom: 15,
resizeEnable: true
});
// 设备标记点
deviceList.value.forEach(device => {
new AMap.Marker({
position: [device.lng, device.lat],
title: device.name,
map: mapInstance
// 后续的设备打点逻辑不变...
if (Array.isArray(props.deviceList)) {
props.deviceList.forEach(device => {
console.log(device, 'devicedevice');
if (device.longitude && device.latitude) {
new AMap.Marker({
position: [device.longitude, device.latitude],
title: device.deviceName,
map: mapInstance
});
}
});
});
}
};
watch(
() => props.deviceList, // 监听props中的deviceList
(newDeviceList) => {
if (!mapInstance || !Array.isArray(newDeviceList)) return;
// 1. 清除地图上已有的所有标记（避免重复打点）
mapInstance.clearMap();
// 2. 重新添加新的设备标记
newDeviceList.forEach((device) => {
console.log(device, 'device');
// 确保设备有经纬度（lng和lat），避免无效打点
if (device.longitude && device.latitude) {
new AMap.Marker({
position: [device.longitude, device.latitude],
title: device.deviceName, // 用设备名当标题（匹配父组件字段）
map: mapInstance,
});
}
});
},
{ deep: true } // 深度监听（如果设备列表里的子对象变化也能触发）
);
onMounted(() => {
window._AMapSecurityConfig = { securityJsCode: AMAP_SECURITY_CODE };
@ -168,8 +216,8 @@ onUnmounted(() => {
}
/* 设备信息区域 */
.device_page{
background-color: rgba(247, 248, 252, 1);
.device_page {
background-color: rgba(247, 248, 252, 1);
margin-bottom: 5px;
width: 84%;
padding: 5px;
@ -213,6 +261,6 @@ background-color: rgba(247, 248, 252, 1);
bottom: 10px;
background: rgba(2, 124, 251, 0.06);
color: rgba(2, 124, 251, 1);
border:none;
border: none;
}
</style>

87
src/views/controlCenter/controlPanel/index.vue
View File

@ -24,15 +24,20 @@
<el-button type="primary" plain>发送消息</el-button>
<el-button type="primary" plain>电子围栏</el-button>
<el-button type="danger" plain>强制报警</el-button>
<el-button type="primary" plain>高级筛选</el-button>
<div style="position: absolute; right:30px; top:20px">
<el-input v-model="queryParams.deviceMac" placeholder="MAC/IMEI" clearable
style="width: 200px; margin-right: 20px;" />
<el-button type="primary" plain @click="toggleFilter">高级筛选</el-button>
</div>
</div>
<el-collapse accordion>
<el-collapse-item title="高级筛选">
<el-collapse accordion v-model="activeNames">
<el-collapse-item name="1">
<el-form ref="queryFormRef" :model="queryParams" :inline="true" class="queryFormRef">
<el-form-item label="设备类型" prop="deviceId">
<el-select v-model="queryParams.deviceId" placeholder="全部" clearable>
<el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label"
:value="dict.value" />
<el-form-item label="设备类型" prop="deviceType">
<el-select v-model="queryParams.deviceType" placeholder="设备类型">
<el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName"
:value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="设备名称" prop="deviceName">
@ -75,8 +80,8 @@
<div v-if="isListView" key="list">
<el-table v-loading="loading" border :data="deviceList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" />
<el-table-column label="设备名称" align="center" prop="deviceName" />
<el-table-column label="设备图片" align="center" prop="devicePic">
<el-table-column label="设备名称" align="center" prop="deviceName" />
<el-table-column label="设备图片" align="center" prop="devicePic">
<template #default="scope">
<el-popover placement="right" trigger="click">
<template #reference>
@ -88,13 +93,13 @@
</el-popover>
</template>
</el-table-column>
<el-table-column label="设备类型" align="center" prop="typeName" />
<el-table-column label="使用人员" align="center" prop="personnelBy" />
<el-table-column label="电量" align="center" prop="battery" />
<el-table-column label="设备状态" align="center" prop="onlineStatus">
<el-table-column label="设备类型" align="center" prop="typeName" />
<el-table-column label="使用人员" align="center" prop="personnelBy" />
<el-table-column label="电量" align="center" prop="battery" />
<el-table-column label="设备状态" align="center" prop="onlineStatus">
<template #default="scope">
<div class="normal green" v-if="scope.row.onlineStatus==1">在线</div>
<div class="normal red" v-if="scope.row.onlineStatus==0">离线</div>
<div class="normal green" v-if="scope.row.onlineStatus == 1">在线</div>
<div class="normal red" v-if="scope.row.onlineStatus == 0">离线</div>
</template>
</el-table-column>
<el-table-column label="操作" fixed="right" width="180" class-name="small-padding fixed-width">
@ -106,8 +111,8 @@
<pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
:total="total" @pagination="getList" />
</div>
<div v-else key="map">
<Amap />
<div v-else key="map" v-if="deviceList.length > 0">
<Amap :deviceList="deviceList"></Amap>
</div>
</el-card>
</el-col>
@ -117,9 +122,9 @@
<script setup name="User" lang="ts">
import api from '@/api/controlCenter/controlPanel/index'
import apiTypeAll from '@/api/equipmentManagement/device/index';
import { deviceQuery, deviceVO } from '@/api/controlCenter/controlPanel/types';
import Amap from "./components/map.vue";
import { optionselect } from '@/api/system/post';
import { UserVO } from '@/api/system/user/types';
const router = useRouter();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@ -133,12 +138,13 @@ const multiple = ref(true);
const total = ref(0);
const deptName = ref();
const deptOptions = ref([])
const sys_communication = ref([])
const deptTreeRef = ref<ElTreeInstance>();
const queryFormRef = ref<ElFormInstance>();
const userFormRef = ref<ElFormInstance>();
const isListView = ref(true);
const activeNames = ref([]);
const deviceTypeOptions = ref([]); //设备类型
const enabledDeptOptions = ref();
const initData: PageData<'', deviceQuery> = {
queryParams: {
pageNum: 1,
@ -151,21 +157,32 @@ const initData: PageData<'', deviceQuery> = {
currentOwnerId: '',
communicationMode: '',
queryParams: '',
groupId: ''
groupId: '',
deviceType: ''
},
rules: undefined,
form: ''
};
const data = reactive<PageData<'', deviceQuery>>(initData);
const { queryParams, form, } = toRefs<PageData<'', deviceQuery>>(data);
const { queryParams } = toRefs<PageData<'', deviceQuery>>(data);
const switchView = (view) => {
isListView.value = (view === 'list');
};
/** 通过条件过滤节点 */
const filterNode = (value: string, data: any) => {
if (!value) return true;
return data.label.indexOf(value) !== -1;
return data.groupName.indexOf(value) !== -1;
};
// 设备类型
const getDeviceType = () => {
apiTypeAll.deviceTypeAll().then(res => {
if (res.code == 200) {
deviceTypeOptions.value = res.data
}
}).catch(err => {
})
};
/** 根据名称筛选部门树 */
watchEffect(
@ -176,7 +193,13 @@ watchEffect(
flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
}
);
const toggleFilter = () => {
if (activeNames.value.length > 0) {
activeNames.value = [];
} else {
activeNames.value = ['1'];
}
};
/** 查询用户列表 */
const getList = async () => {
loading.value = false;
@ -191,7 +214,7 @@ const getDeptTree = async () => {
const res = await api.devicegroupList('');
deptOptions.value = res.data;
//enabledDeptOptions.value = filterDisabledDept(res.data);
enabledDeptOptions.value = filterDisabledDept(res.data);
};
/** 过滤禁用的部门 */
@ -236,7 +259,7 @@ const handleControl = (row: any) => {
/** 选择条数 */
const handleSelectionChange = (selection: UserVO[]) => {
ids.value = selection.map((item:any) => item.id);
ids.value = selection.map((item: any) => item.id);
single.value = selection.length != 1;
multiple.value = !selection.length;
};
@ -248,15 +271,15 @@ const reset = () => {
onMounted(() => {
getDeptTree(); // 初始化部门数据
getList(); // 初始化列表数据
getDeviceType() //设备类型
});
// async function handleDeptChange(value: number | string) {
// const response = await optionselect(value);
// postOptions.value = response.data;
// form.value.postIds = [];
// }
</script>
<style lang="scss" scoped>
:deep .el-collapse-item__header {
display: none;
}
.main-tree {
border-radius: 4px;
box-shadow: 0px 0px 6px 0px rgba(0, 34, 96, 0.1);
@ -280,8 +303,6 @@ onMounted(() => {
margin-top: 20px;
}
.normal {}
.green {
color: rgba(0, 165, 82, 1);
}

13
src/views/equipmentManagement/deviceType/index.vue
View File

@ -40,9 +40,9 @@
<el-table v-loading="loading" border :data="deviceTypeList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" />
<el-table-column label="型号名称" align="center" prop="typeName" />
<el-table-column label="类型code" align="center" prop="modelDictionary">
<el-table-column label="类型code" align="center" prop="appModelDictionary">
<template #default="scope">
{{ modelDictionaryOptions.find(item => item.dictValue === String(scope.row.modelDictionary))?.dictLabel }}
{{ modelDictionaryOptions.find(item => item.dictValue === String(scope.row.appModelDictionary))?.dictLabel }}
</template>
</el-table-column>
<el-table-column label="是否支持蓝牙" align="center" prop="isSupportBle">
@ -97,7 +97,7 @@
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="类型code" prop="modelDictionary">
<el-form-item label="路由跳转" prop="modelDictionary">
<el-select v-model="form.modelDictionary" placeholder="请选择">
<el-option v-for="item in modelDictionaryOptions" :key="item.dictValue" :label="item.dictLabel"
:value="item.dictValue" />
@ -236,7 +236,11 @@ const getList = async () => {
total.value = res.total;
};
const getDict = async () => {
const res = await getDicts('model_dictionary');
const res = await getDicts('app_model_dictionary');
modelDictionaryOptions.value = res.data;
}
const pcgetDict = async () => {
const res = await getDicts('pc_model_dictionary');
modelDictionaryOptions.value = res.data;
}
/** 搜索按钮操作 */
@ -352,6 +356,7 @@ const resetForm = () => {
onMounted(() => {
getList(); // 初始化列表数据
getDict();
pcgetDict() //pc跳转
});
</script>

4
src/views/register.vue
View File

@ -65,10 +65,6 @@
</div>
</el-form-item>
</el-form>
<!-- 底部 -->
<div class="el-register-footer">
<span>Copyright © 2018-2025 疯狂的狮子Li All Rights Reserved.</span>
</div>
</div>
</template>