liubiao/dyf-vue-ui
1
0
Fork 0
forked from dyf/dyf-vue-ui
Code Pull Requests 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

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);
}