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

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