From e07a4fea01519e23afd8952b83d457b52a31c5cd Mon Sep 17 00:00:00 2001
From: fengerli <528575642@qq.com>
Date: Wed, 27 Aug 2025 15:45:59 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8C=87=E4=BB=A4=E4=B8=8B=E5=8F=91=E8=AE=B0?=
 =?UTF-8?q?=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |   2 +-
 src/api/controlCenter/controlPanel/types.ts   |   2 +-
 src/api/controlCenter/delivey/index.ts        |  23 ++
 src/api/controlCenter/delivey/types.ts        |  21 ++
 src/views/controlCenter/6170/index.vue        |  25 +-
 .../controlCenter/controlPanel/index.vue      | 239 ++++++++++++---
 src/views/controlCenter/delivery/index.vue    | 271 ++++++++++++++++++
 7 files changed, 542 insertions(+), 41 deletions(-)
 create mode 100644 src/api/controlCenter/delivey/index.ts
 create mode 100644 src/api/controlCenter/delivey/types.ts
 create mode 100644 src/views/controlCenter/delivery/index.vue

diff --git a/.env.development b/.env.development
index c3a3bd4..f3bdb65 100644
--- a/.env.development
+++ b/.env.development
@@ -5,7 +5,7 @@ VITE_APP_TITLE = 云平台管理系统
 VITE_APP_ENV = 'development'
 
 # 开发环境
-VITE_APP_BASE_API = 'http://47.120.79.150/backend'
+VITE_APP_BASE_API = 'http://192.168.2.34:8000'
 
 # 应用访问路径 例如使用前缀 /admin/
 VITE_APP_CONTEXT_PATH = '/'
diff --git a/src/api/controlCenter/controlPanel/types.ts b/src/api/controlCenter/controlPanel/types.ts
index 3aa0852..2ade7a5 100644
--- a/src/api/controlCenter/controlPanel/types.ts
+++ b/src/api/controlCenter/controlPanel/types.ts
@@ -6,7 +6,7 @@ export interface deviceQuery {
   deviceStatus: string;
   deviceMac: string;
   deviceImei: string;
-  currentOwnerId: string;
+  personnelBy: string;
   communicationMode: string;
   pageSize: Number;
   deviceType: string
diff --git a/src/api/controlCenter/delivey/index.ts b/src/api/controlCenter/delivey/index.ts
new file mode 100644
index 0000000..ad46b9f
--- /dev/null
+++ b/src/api/controlCenter/delivey/index.ts
@@ -0,0 +1,23 @@
+import request from '@/utils/request';
+// 设备分组
+export const devicegroupList = (params) => {
+    return request({
+        url: '/api/device/group/list',
+        method: 'get',
+        params: params
+    });
+};
+// 指令下发记录
+export const deviceInstructionRecord = (params) => {
+    return request({
+        url: '/api/device/instructionRecord',
+        method: 'get',
+        params: params
+    });
+};
+
+
+export default {
+    devicegroupList,
+    deviceInstructionRecord,
+};
\ No newline at end of file
diff --git a/src/api/controlCenter/delivey/types.ts b/src/api/controlCenter/delivey/types.ts
new file mode 100644
index 0000000..e57eba9
--- /dev/null
+++ b/src/api/controlCenter/delivey/types.ts
@@ -0,0 +1,21 @@
+export interface deviceQuery {
+  groupId: string;
+  pageNum: number;
+  deviceName: string;
+  deviceMac: string;
+  deviceImei: string;
+  pageSize: Number;
+  deviceType: string;
+  startTime: string; // 接口要求的开始时间字段
+  endTime: string    // 接口要求的结束时间字段
+}
+export interface deviceVO {
+  id: number;          // 设备ID
+  deviceName: string;  // 设备名称（对应子组件的device.name）
+  typeName: string;    // 设备类型/型号（对应子组件的device.model）
+  onlineStatus: 0 | 1; // 设备状态（0=失效/离线，1=正常/在线，对应子组件的device.status）
+  lng?: number;        // 经度（地图打点用）
+  lat?: number;        // 纬度（地图打点用）
+  // 其他字段...
+}
+
diff --git a/src/views/controlCenter/6170/index.vue b/src/views/controlCenter/6170/index.vue
index ff007f7..7ffd1d7 100644
--- a/src/views/controlCenter/6170/index.vue
+++ b/src/views/controlCenter/6170/index.vue
@@ -67,7 +67,8 @@
                             <div class="location-item">
 
                                 <div>地址 <span class="lacatin_gps">{{ deviceDetail.address || "未获取到地址" }}</span></div>
-                                <el-button link type="primary" class="view-btn">查看</el-button>
+                                <el-button link type="primary" class="view-btn"
+                                    @click="lookMap(deviceDetail)">查看</el-button>
                             </div>
                         </div>
                     </div>
@@ -128,6 +129,7 @@ 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;
+const router = useRouter();
 // 导入图片资源（确保路径正确）
 import strongLightDefault from '@/assets/images/strong-light.png';
 import strongLightActive from '@/assets/images/strong-light_HL.png';
@@ -141,10 +143,10 @@ 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';
-const fullscreenLoading = ref(false) 
+const fullscreenLoading = ref(false)
 const forceAlarmLoading = ref(false)  //强制报警
-const sendTextLoading =ref(false)
-const lightModesLoading =ref(false)
+const sendTextLoading = ref(false)
+const lightModesLoading = ref(false)
 
 // 灯光模式数据（引用导入的图片）
 const lightModes = ref<LightMode[]>([
@@ -431,7 +433,7 @@ const forceAlarm = async () => {
         }
 
     } catch (error: any) {
-         proxy?.$modal.msgWarning(error.msg)
+        proxy?.$modal.msgWarning(error.msg)
 
     } finally {
         forceAlarmLoading.value = false;
@@ -445,7 +447,7 @@ const sendTextMessage = async () => {
         return;
     }
     try {
-       sendTextLoading.value = true;
+        sendTextLoading.value = true;
         // 2. 准备请求数据
         const batchId = generateShortId();
         const data = {
@@ -483,7 +485,16 @@ const sendTextMessage = async () => {
         sendTextLoading.value = false;
     }
 }
-
+const lookMap = (row: any) => {
+    console.log(row, 'row');
+    router.push({
+        path: '/controlCenter/controlPanel', // 目标页面的正确路由路径（需与项目路由配置一致）
+        query: {
+            view: 'map',
+            deviceId: row.deviceId // 可选：传递当前设备ID，用于地图定位/筛选
+        }
+    });
+}
 
 onMounted(() => {
     getList();
diff --git a/src/views/controlCenter/controlPanel/index.vue b/src/views/controlCenter/controlPanel/index.vue
index c745037..562d667 100644
--- a/src/views/controlCenter/controlPanel/index.vue
+++ b/src/views/controlCenter/controlPanel/index.vue
@@ -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);
diff --git a/src/views/controlCenter/delivery/index.vue b/src/views/controlCenter/delivery/index.vue
new file mode 100644
index 0000000..965d38e
--- /dev/null
+++ b/src/views/controlCenter/delivery/index.vue
@@ -0,0 +1,271 @@
+<template>
+  <div class="p-2">
+    <el-row :gutter="20">
+      <!-- 部门树 -->
+      <el-col :lg="4" :xs="24" style="" class="main-tree">
+        <el-input v-model="deptName" placeholder="输入分组名称" prefix-icon="Search" clearable />
+        <el-tree ref="deptTreeRef" class="mt-2" node-key="id" :data="deptOptions"
+          :props="{ label: 'groupName', children: 'children' }" :expand-on-click-node="false"
+          :filter-node-method="filterNode" highlight-current default-expand-all @node-click="handleNodeClick"></el-tree>
+      </el-col>
+      <el-col :lg="20" :xs="24">
+        <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
+          :leave-active-class="proxy?.animate.searchAnimate.leave">
+          <div v-show="showSearch" class="mb-[10px]">
+            <el-card>
+              <!-- =========搜索按钮操作======= -->
+              <div class="btn_search">
+                <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 v-model="activeNames">
+                <el-collapse-item name="1">
+                  <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="queryFormRef">
+                    <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.deviceTypeId" />
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item label="设备名称" prop="deviceName">
+                      <el-input v-model="queryParams.deviceName" placeholder="请输入设备名称" clearable />
+                    </el-form-item>
+                    <el-form-item label="设备MAC" prop="deviceMac">
+                      <el-input v-model="queryParams.deviceMac" placeholder="请输入设备MAC" clearable />
+                    </el-form-item>
+                    <el-form-item label="设备IMEI" prop="deviceImei">
+                      <el-input v-model="queryParams.deviceImei" placeholder="请输入设备IMEI" clearable
+                        @keyup.enter="handleQuery" />
+                    </el-form-item>
+                    <el-form-item label="操作时间" style="width: 308px">
+                      <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
+                        :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"></el-date-picker>
+                    </el-form-item>
+                    <el-form-item>
+                      <el-button type="primary" @click="handleQuery">查询</el-button>
+                      <el-button @click="resetQuery">重置</el-button>
+                    </el-form-item>
+                  </el-form>
+                </el-collapse-item>
+              </el-collapse>
+            </el-card>
+          </div>
+        </transition>
+        <el-card class="Maplist">
+          <div>
+            <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="deviceType" />
+              <el-table-column label="操作模块" align="center" prop="deviceAction" />
+              <el-table-column label="操作内容" align="center" prop="content" />
+              <el-table-column label="操作时间" align="center" prop="createTime" />
+            </el-table>
+            <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
+              :total="total" @pagination="getList" />
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+
+</template>
+
+<script setup name="User" lang="ts">
+import api from '@/api/controlCenter/delivey/index'
+import apiTypeAll from '@/api/equipmentManagement/device/index';
+import { deviceQuery, deviceVO } from '@/api/controlCenter/delivey/types';
+const dateRange = ref(['', '']);
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const deviceList = ref<deviceVO[]>();
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref<Array<number | string>>([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const deptName = ref();
+const deptOptions = ref([])
+const deptTreeRef = ref<ElTreeInstance>();
+const queryFormRef = ref<ElFormInstance>();
+const activeNames = ref([]);
+const deviceTypeOptions = ref([]); //设备类型
+const enabledDeptOptions = ref();
+
+const initData: PageData<'', deviceQuery> = {
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    deviceName: '',
+    deviceMac: '',
+    deviceImei: '',
+    groupId: '',
+    deviceType: '',
+    startTime: '',
+    endTime: ''
+  },
+  rules: undefined,
+  form: ''
+};
+const data = reactive<PageData<'', deviceQuery>>(initData);
+const { queryParams } = toRefs<PageData<'', deviceQuery>>(data);
+
+/** 通过条件过滤节点  */
+const filterNode = (value: string, data: any) => {
+  if (!value) return true;
+  return data.groupName.indexOf(value) !== -1;
+};
+// 设备类型
+const getDeviceType = () => {
+  apiTypeAll.deviceTypeAll().then(res => {
+    if (res.code == 200) {
+      deviceTypeOptions.value = res.data
+    }
+  }).catch(err => {
+
+  })
+};
+/** 根据名称筛选部门树 */
+watchEffect(
+  () => {
+    deptTreeRef.value?.filter(deptName.value);
+  },
+  {
+    flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
+  }
+);
+const toggleFilter = () => {
+  if (activeNames.value.length > 0) {
+    activeNames.value = [];
+  } else {
+    activeNames.value = ['1'];
+  }
+};
+
+
+/** 过滤禁用的部门 */
+const filterDisabledDept = (deptList: any[]) => {
+  return deptList.filter((dept) => {
+    if (dept.disabled) {
+      return false;
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children);
+    }
+    return true;
+  });
+};
+
+/** 节点单击事件 */
+const handleNodeClick = (data: any) => {
+  queryParams.value.groupId = data.id;
+  handleQuery();
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+/** 重置按钮操作 */
+const resetQuery = () => {
+  dateRange.value = ['', ''];
+  queryFormRef.value?.resetFields();
+  queryParams.value.pageNum = 1;
+  queryParams.value.groupId = undefined;
+  deptTreeRef.value?.setCurrentKey(undefined);
+  handleQuery();
+};
+
+/** 选择条数  */
+const handleSelectionChange = (selection: deviceVO[]) => {
+  ids.value = selection;
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+};
+onMounted(() => {
+  getDeptTree(); // 初始化部门数据
+  getList(); // 初始化列表数据
+  getDeviceType() //设备类型
+});
+/** 查询用户列表 */
+const getList = async () => {
+  loading.value = false;
+  const [startTime, endTime] = dateRange.value;
+  queryParams.value = {
+    ...queryParams.value,
+    startTime: startTime,
+    endTime: endTime
+  };
+  const res = await api.deviceInstructionRecord(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);
+};
+
+
+</script>
+<style lang="scss" scoped>
+:deep .el-collapse-item__header {
+  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);
+  background: rgba(255, 255, 255, 1);
+  width: 212px;
+  border: none;
+  padding-top: 10px;
+
+}
+
+.el-card {
+  border: none
+}
+
+.btn_search {
+  padding: 0px 15px 15px 0px;
+  // border-bottom: 1px solid rgba(235, 238, 248, 1);
+}
+
+.queryFormRef {
+  margin-top: 20px;
+}
+
+.green {
+  color: rgba(0, 165, 82, 1);
+}
+
+.red {
+  color: rgba(224, 52, 52, 1);
+}
+
+.Maplist {
+  height: 680px;
+  overflow: auto;
+}
+</style>