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-27 15:45:59 +08:00
parent 00eea217a0
commit e07a4fea01
7 changed files with 542 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,9 +21,11 @@
<el-button :type="!isListView ? 'primary' : ''" @click="switchView('map')">
{{ !isListView ? '地图显示' : '地图显示' }}
</el-button>
<el-button type="primary" plain>发送消息</el-button>
<el-button type="primary" plain @click="sendTextMessage">发送消息</el-button>
<el-button type="primary" plain>电子围栏</el-button>
<el-button type="danger" plain>强制报警</el-button>
<el-button type="danger" plain @click="forceAlarm" :loading="forceAlarmLoading"
:loading-text="forceAlarmLoading ? '报警中...' : '强制报警'"> {{
forceAlarmLoading ? '报警中' : '强制报警' }}</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;" />
@ -37,7 +39,7 @@
<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" />
:value="item.deviceTypeId" />
</el-select>
</el-form-item>
<el-form-item label="设备名称" prop="deviceName">
@ -56,8 +58,8 @@
<el-input v-model="queryParams.deviceImei" placeholder="请输入设备IMEI" clearable
@keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="使用人员" prop="currentOwnerId">
<el-input v-model="queryParams.currentOwnerId" placeholder="请输入使用人员姓名" clearable
<el-form-item label="使用人员" prop="personnelBy">
<el-input v-model="queryParams.personnelBy" placeholder="请输入使用人员姓名" clearable
@keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="通信方式" prop="communicationMode">
@ -94,6 +96,13 @@
</template>
</el-table-column>
<el-table-column label="设备类型" align="center" prop="typeName" />
<el-table-column label="设备MAC" align="center" prop="deviceMac">
<template #default="scope">
<div>{{ scope.row.deviceMac || '/' }}</div>
</template>
</el-table-column>
<el-table-column label="设备IMEI" align="center" prop="deviceImei" />
<el-table-column label="使用人员" align="center" prop="personnelBy" />
<el-table-column label="电量" align="center" prop="battery" />
<el-table-column label="设备状态" align="center" prop="onlineStatus">
@ -111,13 +120,29 @@
<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" v-if="deviceList.length > 0">
<div v-else key="map">
<Amap :deviceList="deviceList"></Amap>
</div>
</el-card>
</el-col>
</el-row>
<el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
<el-form ref="postFormRef" :model="form" label-width="80px">
<el-form-item label="发送信息" prop="messageToSend">
<el-input type="textarea" v-model="form.messageToSend" placeholder="请输入内容" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm" :loading="sendTextLoading"
:loading-text="sendTextLoading ? '发送中...' : '确 定'"> {{
sendTextLoading ? '发送中' : '确 定' }}</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name="User" lang="ts">
@ -125,10 +150,10 @@ 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 { UserVO } from '@/api/system/user/types';
import { generateShortId, getDeviceStatus } from '@/utils/function';
const router = useRouter();
const route = useRoute(); // 新增：用于获取URL中的query参数
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_normal_disable } = toRefs<any>(proxy?.useDict('sys_normal_disable', 'sys_user_sex'));
const deviceList = ref<deviceVO[]>();
const loading = ref(true);
const showSearch = ref(true);
@ -140,11 +165,15 @@ const deptName = ref();
const deptOptions = 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 forceAlarmLoading = ref(false) //强制报警
const sendTextLoading = ref(false)
const form = ref({
messageToSend: ''
})
const initData: PageData<'', deviceQuery> = {
queryParams: {
pageNum: 1,
@ -154,7 +183,7 @@ const initData: PageData<'', deviceQuery> = {
deviceStatus: '',
deviceMac: '',
deviceImei: '',
currentOwnerId: '',
personnelBy: '',
communicationMode: '',
groupId: '',
deviceType: ''
@ -165,9 +194,19 @@ const initData: PageData<'', deviceQuery> = {
const data = reactive<PageData<'', deviceQuery>>(initData);
const { queryParams } = toRefs<PageData<'', deviceQuery>>(data);
const switchView = (view) => {
const switchView = (view: 'list' | 'map') => {
isListView.value = (view === 'list');
router.push({
path: route.path,
query: {
...(view == '' ? { view: '' } : { view: undefined })
}
});
};
const dialog = reactive<DialogOption>({
visible: false,
title: ''
});
/** 通过条件过滤节点 */
const filterNode = (value: string, data: any) => {
if (!value) return true;
@ -199,22 +238,7 @@ const toggleFilter = () => {
activeNames.value = ['1'];
}
};
/** 查询用户列表 */
const getList = async () => {
loading.value = false;
const res = await api.deviceControlCenterList(queryParams.value);
loading.value = false;
deviceList.value = res.rows;
total.value = res.total;
};
/** 查询部门下拉树结构 */
const getDeptTree = async () => {
const res = await api.devicegroupList('');
deptOptions.value = res.data;
enabledDeptOptions.value = filterDisabledDept(res.data);
};
/** 过滤禁用的部门 */
const filterDisabledDept = (deptList: any[]) => {
@ -257,21 +281,167 @@ const handleControl = (row: any) => {
};
/** 选择条数 */
const handleSelectionChange = (selection: UserVO[]) => {
ids.value = selection.map((item: any) => item.id);
const handleSelectionChange = (selection: deviceVO[]) => {
ids.value = selection;
single.value = selection.length != 1;
multiple.value = !selection.length;
};
/** 重置操作表单 */
const reset = () => {
userFormRef.value?.resetFields();
// 3. 初始化视图状态（关键：根据地址栏view参数赋值）
const initViewStatus = () => {
// 打印参数，确认是否获取到view=map（调试用）
console.log('地址栏view参数：', route.query.view);
// 逻辑：地址栏有view=map → 地图视图（isListView=false）；否则列表视图
const currentView = route.query.view as string;
isListView.value = currentView !== 'map'; // 关键判断！
};
onMounted(() => {
getDeptTree(); // 初始化部门数据
getList(); // 初始化列表数据
getDeviceType() //设备类型
initViewStatus()
});
/** 查询用户列表 */
const getList = async () => {
loading.value = false;
const res = await api.deviceControlCenterList(queryParams.value);
loading.value = false;
deviceList.value = res.rows;
total.value = res.total;
};
/** 查询部门下拉树结构 */
const getDeptTree = async () => {
const res = await api.devicegroupList('');
const allDeviceOption = {
id: '',
groupName: '全部设备',
disabled: false,
children: []
};
deptOptions.value = [allDeviceOption, ...res.data]
enabledDeptOptions.value = filterDisabledDept(res.data);
};
const sendTextMessage = () => {
// 防重复提交
if (!queryParams.value.deviceType) {
proxy?.$modal.msgWarning('请先选择设备类型');
return;
}
if (ids.value.length == 0) {
proxy?.$modal.msgWarning('请先选中一条设备');
return;
}
dialog.visible = true
}
// 发送文本消息确认
const submitForm = async () => {
if (!form.value.messageToSend) {
proxy?.$modal.msgWarning('发送消息不能为空');
return
}
try {
sendTextLoading.value = true;
// 2. 准备请求数据
const deviceIds = ids.value.map(item => item.id);
const deviceImeiList = ids.value.map(item => item.deviceImei);
const firstDevice = ids.value[0];
const typeName = firstDevice.typeName; // 取第一个设备的typeName，为空时给默认值
const batchId = generateShortId();
const data = {
deviceIds: deviceIds,
typeName: typeName,
batchId: batchId,
deviceImeiList: deviceImeiList,
sendMsg: form.value.messageToSend
};
// 3.人员信息
const registerRes = await api.deviceSendMessage(data);
if (registerRes.code !== 200) {
proxy?.$modal.msgWarning(registerRes.msg)
return
}
// 4. 获取设备状态
const statusRes = await getDeviceStatus({
functionMode: 2,
batchId,
typeName,
deviceImeiList,
deviceIds,
interval: 500
},
api.deviceRealTimeStatus
);
// 只有当状态为'OK'时才显示成功弹窗
if (statusRes.data.functionAccess === 'OK') {
proxy?.$modal.msgSuccess(statusRes.msg);
cancel()
}
} catch (error: any) {
proxy?.$modal.msgWarning(error.msg)
} finally {
sendTextLoading.value = false;
}
};
// 取消
const cancel = () => {
dialog.visible = true;
form.value.messageToSend = ''
}
// 强制报警
const forceAlarm = async () => {
if (!queryParams.value.deviceType) {
proxy?.$modal.msgWarning('请先选择设备类型');
return;
}
if (ids.value.length == 0) {
proxy?.$modal.msgWarning('请先选中一条设备');
return;
}
try {
forceAlarmLoading.value = true
// 2. 准备请求数据
const batchId = generateShortId();
const deviceIds = ids.value.map(item => item.id);
const deviceImeiList = ids.value.map(item => item.deviceImei);
const firstDevice = ids.value[0];
const typeName = firstDevice.typeName; // 取第一个设备的typeName，为空时给默认值
let data = {
deviceIds: deviceIds,
typeName: typeName,
batchId: batchId,
deviceImeiList: deviceImeiList,
instructValue: '1', //强制报警1，解除报警0
}
const registerRes = await api.sendAlarmMessage(data);
if (registerRes.code !== 200) {
proxy?.$modal.msgWarning(registerRes.msg)
return
}
// 4. 获取设备状态
const statusRes = await getDeviceStatus({
functionMode: 2,
batchId,
typeName,
deviceImeiList,
deviceIds,
interval: 500
},
api.deviceRealTimeStatus
);
// 只有当状态为'OK'时才显示成功弹窗
if (statusRes.data.functionAccess === 'OK') {
proxy?.$modal.msgSuccess(statusRes.msg);
}
} catch (error: any) {
proxy?.$modal.msgWarning(error.msg)
} finally {
forceAlarmLoading.value = false;
}
}
</script>
<style lang="scss" scoped>
@ -279,6 +449,11 @@ onMounted(() => {
display: none;
}
:deep .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
color: rgba(2, 124, 251, 1);
background: transparent;
}
.main-tree {
border-radius: 4px;
box-shadow: 0px 0px 6px 0px rgba(0, 34, 96, 0.1);