From 559a7babc48a0235c47d97fec14928361d060dc6 Mon Sep 17 00:00:00 2001
From: jiang <BnsGit@123!>
Date: Fri, 30 Jan 2026 14:07:52 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A3=85=E5=A4=87=E5=AE=9A=E4=BD=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/iotDevice/MapDIalog.vue | 749 +++++-------------------------
 src/views/iotDevice/index.vue     | 713 +++++++++-------------------
 2 files changed, 342 insertions(+), 1120 deletions(-)

diff --git a/src/views/iotDevice/MapDIalog.vue b/src/views/iotDevice/MapDIalog.vue
index c342e854..3b1bcdbf 100644
--- a/src/views/iotDevice/MapDIalog.vue
+++ b/src/views/iotDevice/MapDIalog.vue
@@ -1,662 +1,137 @@
 <template>
-    <div>
-        <!-- 地图弹框 展示设备轨迹 -->
-        <el-dialog
-            title="装备定位信息"
-            :visible.sync="dialogVisible"
-            width="90%"
-            @close="handelCloseDialog()"
-        >
-<!--            <el-card shadow="hover">
-                <div class="device-title">
-                    <h2>{{ deviceName }}</h2>
-                    <span>({{ deviceType }})</span>
-                </div>
-
-                <div class="equipment"> 定位设备编号: {{ iotCode }} </div>
-                <div class="equipment" v-if="false">{{ engineering }}工程</div>
-                <el-row :gutter="24">
-                    <el-col :span="16">
-                        <el-date-picker
-                            v-model="queryForm.date"
-                            type="datetimerange"
-                            range-separator="至"
-                            start-placeholder="请选择开始日期"
-                            end-placeholder="请选择结束日期"
-                            value-format="yyyy-MM-dd HH:mm:ss"
-                            @change="onChangeTime"
-                        />
-                        <el-button
-                            type="primary"
-                            style="padding: 8px 16px; margin-left: 5px"
-                            @click="handleQuery()"
-                            >查询</el-button
-                        >
-                    </el-col>
-                </el-row>
-            </el-card>-->
-
-            <el-row :gutter="24" class="map-container">
-<!--                <el-col :span="6" v-loading="loadingData">
-                    <el-tabs type="border-card" class="map-left">
-                        <el-tab-pane label="行程">
-                            <template v-if="tripInfoListNew.length > 0">
-                                <div
-                                    class="trip-container"
-                                    @click="handlePreviewTrip(item, index)"
-                                    v-for="(item, index) in tripInfoListNew"
-                                    :key="index"
-                                >
-                                    <div class="left-num">{{ index + 1 }}</div>
-                                    <div
-                                        class="right-info"
-                                        :class="{
-                                            active: activeIndex === index,
-                                        }"
-                                    >
-                                        &lt;!&ndash; <ul>
-                                        <li>{{ item.tripdistance }}KM</li>
-                                        <li>{{ item.drivingDuration }}秒</li>
-                                        <li>{{ item.maxspeed }}KM/h</li>
-                                        <li>{{ item.averagespeed }}KM/h</li>
-                                    </ul>
-                                    <ul>
-                                        <li>里程</li>
-                                        <li>行驶时长</li>
-                                        <li>最大速度</li>
-                                        <li>平均速度</li>
-                                    </ul> &ndash;&gt;
-
-                                        <div style="margin-top: 10px">
-                                            <div class="time-container">
-                                                <span class="radius-span"
-                                                    >始</span
-                                                >
-                                                <span>{{
-                                                    item.startTime
-                                                }}</span>
-                                            </div>
-                                            <h3>{{ item.startAddress }}</h3>
-                                        </div>
-                                        <div style="margin-top: 10px">
-                                            <div class="time-container">
-                                                <span
-                                                    class="radius-span"
-                                                    style="
-                                                        background-color: #e6a23c;
-                                                    "
-                                                    >终</span
-                                                >
-                                                <span>{{ item.endTime }}</span>
-                                            </div>
-                                            <h3>{{ item.endAddress }}</h3>
-                                        </div>
-                                    </div>
-                                </div>
-                            </template>
-                            <template v-else>
-                                {{ loadingData ? '数据加载中...' : '暂无数据' }}
-                            </template>
-                        </el-tab-pane>
-                        <el-tab-pane label="停留点">
-                            <template v-if="parkList.length > 0">
-                                <div
-                                    class="point-container"
-                                    v-for="(item, index) in parkList"
-                                    :key="index"
-                                >
-                                    <div class="time-container">
-                                        <span class="radius-span">{{
-                                            index + 1
-                                        }}</span>
-                                        <span>{{ item.startTime }}</span>
-                                        <span
-                                            >{{ item.hours }}时{{
-                                                item.mints
-                                            }}分</span
-                                        >
-                                    </div>
-                                    <h3>{{ item.address }}</h3>
-                                </div>
-                            </template>
-                            <template v-else> 暂无数据 </template>
-                        </el-tab-pane>
-                        <el-tab-pane label="报警">
-                            <template v-if="warningList.length > 0">
-                                <div
-                                    class="point-container"
-                                    v-for="(item, index) in warningList"
-                                    :key="index"
-                                >
-                                    <div class="time-container">
-                                        <span class="radius-span">{{
-                                            index + 1
-                                        }}</span>
-                                        <span>{{ item.warnTime }}</span>
-                                    </div>
-                                    <h3>{{ item.startAlarm }}</h3>
-                                </div>
-                            </template>
-                            <template v-else> 暂无数据 </template>
-                        </el-tab-pane>
-                    </el-tabs>
-                </el-col>-->
-                <el-col :span="24">
-                    <!-- 地图 -->
-                    <div
-                        id="container"
-                        style="height: 550px; background-color: #bfc"
-                    ></div>
-                </el-col>
-            </el-row>
-        </el-dialog>
-    </div>
+  <div>
+    <!-- 地图弹框 展示设备轨迹 -->
+    <el-dialog
+      title="装备定位信息"
+      :visible.sync="dialogVisible"
+      width="90%"
+      @close="handleCloseDialog"
+      destroy-on-close
+    >
+    <el-row :gutter="24" class="map-container">
+      <el-col :span="24">
+        <!-- 百度地图容器 -->
+        <div id="container" style="height: 550px; background-color: #f5f5f5"></div>
+      </el-col>
+    </el-row>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
 import moment from 'moment'
-import {
-    getIotDeviceLocationApi,
-    getIotDeviceTripApi,
-    getIotDeviceParkDetailApi,
-    getIotDeviceAlarmApi,
-} from '@/api/iotDevice/index.js'
+import { getIotDeviceLocationApi } from '@/api/iotDevice/index.js'
+
 export default {
-    name: 'MapDialog',
-    props: {
-        // 设备名称
-        deviceName: {
-            type: String,
-            default: () => '',
-        },
-        // 设备状态
-        deviceType: {
-            type: String,
-            default: () => '',
-        },
-        // iot设备id
-        iotCode: {
-            type: String,
-            default: () => '',
-        },
+  name: 'MapDialog',
+  props: {
+    dialogVisible: {
+      type: Boolean,
+      default: false
     },
-    data() {
-        return {
-            dialogVisible: true,
-            openMap: false, // 是否打开地图弹框
-            queryForm: {
-                date: [
-                    moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss'),
-                    moment().format('YYYY-MM-DD HH:mm:ss'),
-                ],
-            },
-            equipment: '', // 设备名称
-            equipmentNumber: 'H906L', // 设备编号
-            engineering: '大禹治水', // 工程
-            map: null,
-            // 轨迹点
-            linePointList: [
-                {
-                    lng: '',
-                    lat: '',
-                },
-                {
-                    lng: '',
-                    lat: '',
-                },
-            ],
-
-            count: 0,
-            trackAni: null, // 轨迹实例
-          calLon: 116.404,
-          calLat: 39.915,
-
-            // 查询设备行程信息的参数
-            tripParams: {
-                beginTime: moment()
-                    .subtract(1, 'days')
-                    .format('YYYY-MM-DD HH:mm:ss'),
-                endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
-                iotId: '',
-            },
-            // 行程信息
-            tripList: [],
-            activeIndex: '',
-            // 停留点信息
-            parkList: [],
-            warningList: [],
-            loadingData: true,
-
-            tripInfoListNew: [], // 新行程信息
+    address: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      map: null,
+      trackAni: null,
+      calLon: 116.404, // 默认北京经度
+      calLat: 39.915, // 默认北京纬度
+      requestParams: {
+        beginTime: moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss'),
+        endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
+        iotId: ''
+      }
+    }
+  },
+  watch: {
+    // 监听弹框显示状态，核心：显示才初始化，隐藏则销毁
+    dialogVisible(newVal) {
+      if (newVal) {
+        this.initPage();
+      } else {
+        this.destroyMap();
+      }
+    }
+  },
+  beforeDestroy() {
+    // 组件销毁时确保地图已销毁
+    this.destroyMap();
+  },
+  methods: {
+    /** 初始化：先获取设备定位，再初始化地图 */
+    async initPage() {
+      this.initMap();
+    },
+    /** 初始化百度地图（增加双重校验） */
+    initMap() {
+      this.$nextTick(() => {
+        // 校验1：百度地图SDK是否加载成功
+        if (!window.BMapGL) {
+          this.$message.error('百度地图加载失败，请刷新页面重试');
+          return;
         }
-    },
-    created() {},
-    mounted() {
-      this.initMap()
-        // Promise.all([this.getIotDeviceLocation(), this.handleQuery()])
-        //     .then((res) => {
-        //         this.loadingData = false
-        //         this.initMap()
-        //     })
-        //     .catch((err) => {
-        //         console.log(err)
-        //         this.loadingData = false
-        //     })
+        // 校验2：地图容器是否存在
+        const container = document.getElementById('container');
+        if (!container) return;
 
-        // this.getIotDeviceLocation()
+        // 创建地图实例
+        this.map = new window.BMapGL.Map(container);
+        // 设备实际位置中心点
+        const centerPoint = new window.BMapGL.Point(this.address.split(',')[0], this.address.split(',')[1]);
+        // 初始化地图：中心点 + 缩放级别
+        this.map.centerAndZoom(centerPoint, 15);
+        // 启用滚轮缩放
+        this.map.enableScrollWheelZoom(true);
+        // 地图视角设置
+        this.map.setHeading(64.5);
+        this.map.setTilt(73);
+        // 添加设备位置标记
+        const marker = new window.BMapGL.Marker(centerPoint);
+        this.map.addOverlay(marker);
+      });
     },
 
-    beforeDestroy() {
-        /** 组件销毁之前 先清除地图实例 */
-
-        // 1. 判断轨迹实例是否存在 如果存在 先强制关闭动画，否则页面报错
-        if (this.trackAni) {
-            this.trackAni.cancel()
-        }
-        // 2. 清除地图上面的标点覆盖物 并清除地图实例
-
-        if (this.map) {
-            this.map.clearOverlays()
-            this.map.destroy()
-            this.map = null
-        }
+    /** 销毁地图实例，避免内存泄漏 */
+    destroyMap() {
+      // 停止轨迹动画
+      if (this.trackAni) {
+        this.trackAni.cancel();
+        this.trackAni = null;
+      }
+      // 清除覆盖物并销毁地图
+      if (this.map) {
+        this.map.clearOverlays();
+        this.map.destroy();
+        this.map = null;
+      }
     },
 
-    methods: {
-        /** 获取当前设备的信息 */
-        async getIotDeviceLocation() {
-            if (this.iotId) {
-                const { data: res } = await getIotDeviceLocationApi({
-                    iotId: this.iotId,
-                })
-                // 获取经纬度并赋值
-                this.calLon = res.callon || 116.404
-                this.calLat = res.callat || 39.915
-            }
-        },
-        /** 查询按钮 */
-        async handleQuery() {
-            if (!this.queryForm.date) {
-                this.$message.error('请选择时间范围！')
-                return
-            }
-            this.loadingData = true
-            this.tripParams.iotId = this.iotId
-            // const res = await getIotDeviceTripApi({ ...this.tripParams })
-            // console.log(res, '行程信息--')
-
-            const resS = await getIotDeviceParkDetailApi({ ...this.tripParams })
-
-            const params = { ...this.tripParams }
-            params.beginTime = params.beginTime.slice(0, 10)
-            params.endTime = params.endTime.slice(0, 10)
-            const resSs = await getIotDeviceAlarmApi(params)
-
-            this.loadingData = false
-
-            this.warningList = resSs.data
-            this.warningList.forEach((e) => {
-                e.warnTime = moment(parseInt(e.startAlarmTime)).format(
-                    'YYYY-MM-DD HH:mm:ss',
-                )
-            })
-
-            this.parkList = resS.data
-            this.parkList.forEach((e) => {
-                console.log(e, '----')
-                e.startTime = moment(parseInt(e.beginTime)).format(
-                    'YYYY-MM-DD HH:mm:ss',
-                )
-
-                e.hours = parseInt(
-                    (parseInt(e.endTime) - parseInt(e.beginTime)) /
-                        1000 /
-                        60 /
-                        60,
-                )
-                e.mints = parseInt(
-                    ((parseInt(e.endTime) - parseInt(e.beginTime)) /
-                        1000 /
-                        60) %
-                        60,
-                )
-            })
-
-            // 处理行程信息
-            this.tripInfoListNew = []
-            let tripInfoList = []
-            if (this.parkList.length > 1) {
-                this.parkList.forEach((e, index) => {
-                    if (index < this.parkList.length - 1) {
-                        let obj = {
-                            startTime: e.startTime,
-                            startAddress: e.address,
-                            startLng: e.callon,
-                            startLat: e.callat,
-                            endLng: '',
-                            endLat: '',
-                            endTime: '',
-                            endAddress: '',
-                        }
-                        tripInfoList.push(obj)
-                    }
-                })
-
-                this.parkList.forEach((e, index) => {
-                    if (index > 0) {
-                        tripInfoList[index - 1].endTime = e.startTime
-                        tripInfoList[index - 1].endAddress = e.address
-                        tripInfoList[index - 1].endLng = e.callon
-                        tripInfoList[index - 1].endLat = e.callat
-                    }
-                })
-            }
-
-            this.tripInfoListNew = tripInfoList
-
-            // console.log(tripInfoList, '处理后的行程---')
-            // let tripInfo = JSON.parse(res.msg)
-            // console.log(tripInfo, '反序列化之后', this.parkList)
-
-            // let addressList = []
-            // if (tripInfo.addressmap) {
-            //     addressList = Object.keys(tripInfo.addressmap)
-            // }
-
-            // tripInfo.totaltrips.forEach((e) => {
-            //     e.startTime = moment(e.trackstarttime).format(
-            //         'YYYY-MM-DD HH:mm:ss',
-            //     )
-            //     e.endTime = moment(e.trackendtime).format('YYYY-MM-DD HH:mm:ss')
-
-            //     e.drivingDuration = parseInt(
-            //         (e.trackendtime - e.trackstarttime) / 1000,
-            //     )
-
-            //     addressList.forEach((v) => {
-            //         if (v.indexOf(e.slat.toString().slice(0, 7)) > -1) {
-            //             e.startAddress = tripInfo.addressmap[v]
-            //         }
-            //         if (v.indexOf(e.elat.toString().slice(0, 7)) > -1) {
-            //             e.endAddress = tripInfo.addressmap[v]
-            //         }
-            //     })
-            // })
-
-            // this.tripList = tripInfo.totaltrips
-
-            // console.log(tripInfo, '处理之后-----')
-        },
-        /** 查看行程 */
-        handlePreviewTrip(item, index) {
-            this.activeIndex = index
-            if (this.trackAni) {
-                this.trackAni.cancel()
-            }
-            this.map.clearOverlays()
-            let pointList = []
-            this.linePointList[0].lng = item.startLng
-            this.linePointList[0].lat = item.startLat
-            this.linePointList[1].lng = item.endLng
-            this.linePointList[1].lat = item.endLat
-            if (this.linePointList.length === 0) return
-            for (var i = 0; i < this.linePointList.length; i++) {
-                pointList.push(
-                    new BMapGL.Point(
-                        this.linePointList[i].lng,
-                        this.linePointList[i].lat,
-                    ),
-                )
-            }
-
-            // pointList.push(new BMapGL.Point(item.slon, item.slat))
-            // pointList.push(new BMapGL.Point(item.elon, item.elat))
-            let polyline = new BMapGL.Polyline(pointList)
-            // 修改线的样式
-            polyline.setStrokeColor('#EA3323') // 线颜色  #EA3323
-            // polyline.setStrokeWeight(2) // 线宽
-            this.trackAni = new BMapGLLib.TrackAnimation(this.map, polyline, {
-                overallView: true, // 动画完成后自动调整视野到总览
-                tilt: 55, // 轨迹播放的角度，默认为55
-                duration: 1500, // 动画持续时长，默认为10000，单位ms
-                delay: 100, // 动画开始的延迟，默认0，单位ms
-            })
-            this.trackAni.start()
-            // 设置起点终点图标
-            this.triggerMovement()
-        },
-        // async handleQuery() {
-        //     console.log('🚀 ~ handleQuery ~ 查询:', this.queryForm.date)
-        //     const params = {
-        //         date: this.queryForm.date,
-        //     }
-        //     this.getEquipmentInfo(params)
-        //     // 先销毁地图 再重新初始化
-        //     this.map.clearOverlays()
-        //     this.map = null
-        //     await this.initMap()
-        // },
-        openMapDialog(val) {
-            this.openMap = val
-            this.initMap()
-        },
-        // 获取装备信息
-        getEquipmentInfo(params = {}) {
-            console.log('🚀 ~ getEquipmentInfo ~ 获取装备信息', params)
-            // 接口(params).then(res => {
-            //   this.equipment = res.equipment
-            //   this.equipmentNumber = res.equipmentNumber
-            //   this.engineering = res.engineering
-            //   this.linePointList = res.linePointList
-            // })
-        },
-        // 初始化地图和轨迹
-        initMap() {
-            console.log('地图初始化--')
-            this.$nextTick(() => {
-                this.map = new BMapGL.Map('container') // 创建地图实例
-                // let point = new BMapGL.Point(117.13805, 31.8734) // 创建点坐标
-                let point = new BMapGL.Point(this.calLon, this.calLat) // 创建点坐标
-                this.map.centerAndZoom(point, 15) // 初始化地图，设置中心点坐标和地图级别
-                this.map.enableScrollWheelZoom(true) // 启用滚轮放大缩小
-                this.map.setHeading(64.5) //设置地图旋转角度
-                this.map.setTilt(73) //设置地图的倾斜角度
-                let marker = new BMapGL.Marker(point) // 创建标点
-                this.map.addOverlay(marker)
-
-                var myGeo = new BMapGL.Geocoder()
-                // 根据坐标得到地址描述
-                // myGeo.getLocation(new BMapGL.Point(this.calLon, this.calLat))
-
-                // this.map.getLocation(point, (res) => {
-                //     console.log(res, '所在位置--')
-                // })
-            })
-        },
-        // 添加起点和终点的标记
-        addStartEndMarkers(startLatLng, endLatLng) {
-            let startIcon = new BMapGL.Icon(
-                require('/src/assets/images/startIcon.png'),
-                new BMapGL.Size(32, 32),
-            )
-            let startMarker = new BMapGL.Marker(startLatLng, {
-                icon: startIcon,
-            })
-            this.map.addOverlay(startMarker)
-
-            let endIcon = new BMapGL.Icon(
-                require('/src/assets/images/endIcon.png'),
-                new BMapGL.Size(32, 32),
-            )
-            let endMarker = new BMapGL.Marker(endLatLng, { icon: endIcon })
-            this.map.addOverlay(endMarker)
-        },
-        // 轨迹运动结束后的回调
-        triggerMovement() {
-            // 轨迹运动结束后获取起点和终点的经纬度坐标
-            let startLatLng = new BMapGL.Point(
-                this.linePointList[0].lng,
-                this.linePointList[0].lat,
-            )
-            let endLatLng = new BMapGL.Point(
-                this.linePointList[this.linePointList.length - 1].lng,
-                this.linePointList[this.linePointList.length - 1].lat,
-            )
-
-            // 添加起点和终点的图标
-            this.addStartEndMarkers(startLatLng, endLatLng)
-        },
-
-        /** 关闭地图弹框 */
-        handelCloseDialog() {
-            this.$emit('handelCloseDialog')
-        },
-        /** 时间选择器 */
-        onChangeTime(val) {
-            if (val) {
-                this.tripParams.beginTime = val[0]
-                this.tripParams.endTime = val[1]
-            }
-        },
-    },
+    /** 关闭弹框：触发父组件事件 */
+    handleCloseDialog() {
+      this.$emit('handelCloseDialog');
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
-.device-title {
-    display: flex;
-
-    h2 {
-        padding: 0;
-        margin: 0;
-        font-weight: bold;
-    }
-
-    span {
-        padding: 4px 0 0 6px;
-        color: rgb(9, 193, 9);
-    }
-}
-.equipment {
-    margin: 8px 0;
-    font-weight: 600;
-    font-size: 15px;
-}
-
 .map-container {
-    margin-top: 8px;
-
-    .map-left {
-        height: 550px;
-    }
-}
-::v-deep .el-tabs__nav {
-    width: 100%;
-    display: flex;
-
-    .el-tabs__item {
-        flex: 1;
-        text-align: center;
-    }
+  margin-top: 8px;
+  width: 100%;
 }
 
-::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
-    color: #fff;
-    background-color: #1890ff;
-}
-
-::v-deep .el-tabs--border-card > .el-tabs__content {
-    padding: 0;
-    height: 510px;
-    overflow: auto;
-}
+// 弹框样式优化
 ::v-deep .el-dialog__body {
-    padding: 5px 20px;
+  padding: 10px 20px !important;
+  padding-top: 0 !important;
 }
 
-.trip-container {
-    display: flex;
-    margin-bottom: 3px;
-    cursor: pointer;
-    border-bottom: 1px solid #ccc;
-    .left-num {
-        width: 16px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background-color: #e7f3ff;
-    }
-
-    .right-info {
-        flex: 1;
-        padding: 8px;
-        ul {
-            padding: 0;
-            margin: 0;
-            list-style: none;
-            display: flex;
-            align-items: center;
-            li {
-                flex: 1;
-                text-align: center;
-            }
-
-            &:first-child li {
-                color: #409eff;
-            }
-        }
-
-        .time-container {
-            padding-left: 15px;
-            span {
-                display: inline-block;
-                height: 20px;
-                line-height: 20px;
-            }
-        }
-    }
-
-    .active {
-        background-color: #e8eaed;
-    }
-}
-
-h3 {
-    padding: 0 0 0 15px;
-    margin: 5px 0 0 0;
-    font-size: 16px;
-    color: #000;
-}
-
-.radius-span {
-    margin-right: 3px;
-    width: 20px;
-    height: 20px;
-    line-height: 20px;
-    text-align: center;
-    border-radius: 15px;
-    background-color: #409eff;
-    color: #fff;
-}
-
-.point-container {
-    margin: 2px;
-    padding: 8px;
-    border: 1px solid #ccc;
-    border-radius: 3px;
-    .time-container {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-    }
-
-    .time-container span:nth-child(2) {
-        flex: 1;
-        margin-left: 5px;
-    }
-
-    h3 {
-        padding-left: 0;
-    }
+::v-deep .el-dialog__title {
+  font-weight: 600;
+  font-size: 16px;
 }
 </style>
diff --git a/src/views/iotDevice/index.vue b/src/views/iotDevice/index.vue
index c5d22a03..21671740 100644
--- a/src/views/iotDevice/index.vue
+++ b/src/views/iotDevice/index.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="app-container">
-    <!-- 简化版搜索表单 -->
+    <!-- 搜索表单 -->
     <div class="search-wrapper">
       <el-form label-width="130px" ref="searchFormRef" :model="searchParams" v-show="showSearch">
         <el-row :gutter="20">
           <el-col :span="8">
             <el-form-item prop="iotName" label="定位设备名称">
-              <el-input clearable placeholder="请输入定位设备名称" v-model="searchParams.iotName" style="width: 100%" />
+              <el-input clearable placeholder="请输入定位设备名称" v-model="searchParams.iotName" style="width: 100%"/>
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item prop="iotCode" label="定位设备编码">
-              <el-input clearable placeholder="请输入定位设备编码" v-model="searchParams.iotCode" style="width: 100%" />
+              <el-input clearable placeholder="请输入定位设备编码" v-model="searchParams.iotCode" style="width: 100%"/>
             </el-form-item>
           </el-col>
           <el-col :span="8">
@@ -38,17 +38,17 @@
           <el-row :gutter="20">
             <el-col :span="8">
               <el-form-item prop="typeName" label="装备名称">
-                <el-input clearable placeholder="请输入装备名称" v-model="searchParams.typeName" style="width: 100%" />
+                <el-input clearable placeholder="请输入装备名称" v-model="searchParams.typeName" style="width: 100%"/>
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item prop="maCode" label="装备编码">
-                <el-input clearable placeholder="请输入装备编码" v-model="searchParams.maCode" style="width: 100%" />
+                <el-input clearable placeholder="请输入装备编码" v-model="searchParams.maCode" style="width: 100%"/>
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item prop="proCode" label="使用项目">
-                 <el-select
+                <el-select
                   v-model="searchParams.proCode"
                   placeholder="请选择使用项目"
                   clearable
@@ -73,12 +73,11 @@
                   filterable
                   style="width: 100%"
                 >
-                  <el-option v-for="(item, index) in statusList" :key="index" :label="item.label" :value="item.value" />
+                  <el-option v-for="(item, index) in statusList" :key="index" :label="item.label" :value="item.value"/>
                 </el-select>
               </el-form-item>
             </el-col>
             <el-col :span="8">
-              <!-- 设备状态 -->
               <el-form-item prop="iotStatus" label="设备状态">
                 <el-select
                   v-model="searchParams.iotStatus"
@@ -87,12 +86,11 @@
                   filterable
                   style="width: 100%"
                 >
-                  <el-option label="在线" value="0" />
-                  <el-option label="下线" value="1" />
+                  <el-option label="在线" value="0"/>
+                  <el-option label="下线" value="1"/>
                 </el-select>
               </el-form-item>
             </el-col>
-            <!-- 绑定状态 -->
             <el-col :span="8">
               <el-form-item prop="bindStatus" label="绑定状态">
                 <el-select
@@ -102,15 +100,16 @@
                   filterable
                   style="width: 100%"
                 >
-                  <el-option label="已绑定" value="0" />
-                  <el-option label="未绑定" value="1" />
+                  <el-option label="已绑定" value="0"/>
+                  <el-option label="未绑定" value="1"/>
                 </el-select>
               </el-form-item>
             </el-col>
-            <!-- 绑定人 -->
             <el-col :span="8">
               <el-form-item prop="iotManager" label="设备负责人">
-                <el-input clearable placeholder="请输入设备负责人" v-model="searchParams.iotManager" style="width: 100%" />
+                <el-input clearable placeholder="请输入设备负责人" v-model="searchParams.iotManager"
+                          style="width: 100%"
+                />
               </el-form-item>
             </el-col>
           </el-row>
@@ -131,9 +130,7 @@
           <i :class="searchExpanded ? 'el-icon-up' : 'el-icon-down'"></i>
           {{ searchExpanded ? '收起' : '展开' }}
         </el-button>
-
-        <el-button @click="handleQuery" icon="el-icon-search" type="primary" style="float: right"> 查询 </el-button>
-
+        <el-button @click="handleQuery" icon="el-icon-search" type="primary" style="float: right"> 查询</el-button>
         <el-button @click="onReset" icon="el-icon-refresh" style="margin-left: 8px; float: right">重置</el-button>
       </div>
     </div>
@@ -141,12 +138,10 @@
     <!-- 数据列表 -->
     <div class="table-wrapper">
       <div class="table-header">
-        <el-button @click="addDevice(null)" type="primary" style="float: right; margin-right: 10px"> 新增 </el-button>
-
+        <el-button @click="addDevice(null)" type="primary" style="float: right; margin-right: 10px"> 新增</el-button>
         <right-toolbar :showSearch.sync="showSearch" @queryTable="getDeviceList" :columns="columns"></right-toolbar>
       </div>
 
-      <!-- 表格容器：限制高度 + 隐藏滚动条 -->
       <div class="table-content">
         <el-table
           :data="projectList"
@@ -158,9 +153,7 @@
           :show-overflow-tooltip="true"
           height="100%"
         >
-          <!--序号列-->
-          <el-table-column align="center" label="序号" type="index" width="60" />
-
+          <el-table-column align="center" label="序号" type="index" width="60"/>
           <el-table-column
             v-for="(item, index) in columns"
             v-if="item.visible"
@@ -182,11 +175,19 @@
               <el-tag v-if="row.iotStatus == 0" type="success" size="mini">在线</el-tag>
               <el-tag v-if="row.iotStatus == 1" size="mini" type="danger">下线</el-tag>
             </template>
-
             <template v-slot="{ row }" v-else-if="item.prop == 'bindStatus'">
               <el-tag v-if="row.bindStatus == 0" type="success" size="mini">已绑定</el-tag>
               <el-tag v-if="row.bindStatus == 1" size="mini" type="danger">未绑定</el-tag>
             </template>
+
+            <template v-slot="{ row }" v-else-if="item.prop == 'address'">
+              <div v-if="row.bindStatus == 0 && row.iotStatus == 0" type="success" size="mini">
+                <i
+                  class="el-icon-location location-icon"
+                  @click="handleMap(row)"
+                />
+              </div>
+            </template>
           </el-table-column>
 
           <el-table-column align="center" label="操作" width="250">
@@ -198,39 +199,38 @@
                 style="color: #f56c6c"
                 @click="handleDeleteAndUnbind(row, 1)"
                 v-if="row.bindStatus === 1"
-                >删除</el-button
-              >
+              >删除
+              </el-button>
               <el-button
                 type="text"
                 icon="el-icon-edit"
                 style="color: #67c23a"
                 @click="addDevice(row)"
                 v-if="row.bindStatus === 1"
-                >修改</el-button
-              >
+              >修改
+              </el-button>
               <el-button
                 type="text"
                 icon="el-icon-document-delete"
                 style="color: #e6a23c"
                 @click="handleDeleteAndUnbind(row, 2)"
                 v-if="row.bindStatus === 0"
-                >解绑</el-button
-              >
-              <!-- 仅修改这行：传参改为row，其余样式/图标/颜色完全保留 -->
+              >解绑
+              </el-button>
               <el-button
                 type="text"
                 icon="el-icon-document-delete"
                 style="color: #e6a23c"
                 @click="handleBind(row)"
                 v-if="row.bindStatus === 1"
-                >绑定</el-button
-              >
+              >绑定
+              </el-button>
             </template>
           </el-table-column>
         </el-table>
       </div>
 
-      <!-- 分页组件：固定右下 -->
+      <!-- 分页组件 -->
       <div class="pagination-wrapper">
         <el-pagination
           background
@@ -244,7 +244,7 @@
       </div>
     </div>
 
-    <!-- 简化版新增/编辑对话框：完全保留原有代码 -->
+    <!-- 新增/编辑对话框 -->
     <el-dialog
       width="600px"
       @close="handleDialogClose"
@@ -260,15 +260,14 @@
         :rules="addOrEditFormRules"
       >
         <el-form-item label="定位设备名称:" prop="iotName">
-          <el-input v-model="addOrEditForm.iotName" placeholder="输入内容" maxlength="50" show-word-limit />
+          <el-input v-model="addOrEditForm.iotName" placeholder="输入内容" maxlength="50" show-word-limit/>
         </el-form-item>
         <el-form-item label="定位设备编码:" prop="iotCode">
-          <el-input v-model="addOrEditForm.iotCode" placeholder="输入内容" maxlength="50" show-word-limit />
+          <el-input v-model="addOrEditForm.iotCode" placeholder="输入内容" maxlength="50" show-word-limit/>
         </el-form-item>
         <el-form-item label="定位设备负责人:" prop="iotManager">
-          <el-input v-model="addOrEditForm.iotManager" placeholder="输入内容" maxlength="50" show-word-limit />
+          <el-input v-model="addOrEditForm.iotManager" placeholder="输入内容" maxlength="50" show-word-limit/>
         </el-form-item>
-
         <el-form-item label="定位设备状态:">
           <el-switch
             size="large"
@@ -278,11 +277,8 @@
             active-value="0"
             inactive-value="1"
           />
-          <span style="margin-left: 8px;">
-            {{ addOrEditForm.iotStatus == '0' ? '在线' : '下线' }}
-          </span>
+          <span style="margin-left: 8px;">{{ addOrEditForm.iotStatus == '0' ? '在线' : '下线' }}</span>
         </el-form-item>
-
         <el-form-item label="备注:" prop="remark">
           <el-input
             type="textarea"
@@ -302,6 +298,7 @@
       </div>
     </el-dialog>
 
+    <!-- 设备绑定对话框 -->
     <el-dialog
       title="设备绑定"
       @close="handleBindDialogClose"
@@ -309,14 +306,13 @@
       :title="bindDialogTitle"
       :visible.sync="bindDialogVisible"
       width="80%"
-      top="3"
+      top="3%"
     >
       <div class="instance-dialog-container">
-        <!-- 筛选条件 -->
         <div class="search-form">
           <el-form :inline="true" :model="searchForm" class="demo-form-inline">
             <el-form-item label="装备名称">
-              <el-input v-model="searchForm.equipmentName" placeholder="请输入装备名称" clearable size="small" />
+              <el-input v-model="searchForm.name" placeholder="请输入装备名称" clearable size="small"/>
             </el-form-item>
             <el-form-item label="装备分类">
               <el-select
@@ -325,7 +321,6 @@
                 style="width: 100%"
                 clearable
                 filterable
-                @change="handleCategoryChange"
               >
                 <el-option
                   v-for="item in categoryList"
@@ -335,8 +330,8 @@
                 />
               </el-select>
             </el-form-item>
-            <el-form-item label="原始编码">
-              <el-input v-model="searchForm.originalEncoding" placeholder="请输入原始编码" clearable size="small" />
+            <el-form-item label="规格型号">
+              <el-input v-model="searchForm.specificationModel" placeholder="请输入规格型号" clearable size="small"/>
             </el-form-item>
             <el-form-item>
               <el-button type="primary" size="small" @click="handleOwnSearch">查询</el-button>
@@ -345,7 +340,6 @@
           </el-form>
         </div>
 
-        <!-- 表格：支持多选 -->
         <el-table
           :data="tableData.own.list"
           :loading="tableData.own.loading"
@@ -357,8 +351,7 @@
         >
           <el-table-column width="55" align="center">
             <template slot-scope="scope">
-              <!-- Element UI 用 slot-scope 而非 v-slot -->
-              <el-radio v-model="selectedRowId" :label="scope.row.id" size="small" class="radio-no-text" />
+              <el-radio v-model="selectedRowId" :label="scope.row.id" size="small" class="radio-no-text"/>
             </template>
           </el-table-column>
           <el-table-column
@@ -375,31 +368,28 @@
           </el-table-column>
         </el-table>
 
-        <!-- 分页 -->
         <el-pagination
-          @size-change="(val) => handleOwnSizeChange(val)"
-          @current-change="(val) => handleOwnCurrentChange(val)"
+          @size-change="handleOwnSizeChange"
+          @current-change="handleOwnCurrentChange"
           :current-page="tableData.own.pageNum"
           :page-sizes="[10, 20, 50, 100]"
           :page-size="tableData.own.pageSize"
           layout="total, sizes, prev, pager, next, jumper"
           :total="tableData.own.total"
           style="margin-top: 15px; text-align: right"
-        >
-        </el-pagination>
+        />
       </div>
 
       <template #footer>
         <div class="dialog-footer">
-          <el-button @click="ownOpen = false">取消</el-button>
-          <el-button type="primary" @click="handleOwnConfirm" :disabled="!selectedRowId"> 确认选择 </el-button>
+          <el-button @click="bindDialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="handleOwnConfirm" :disabled="!selectedRowId"> 确认选择</el-button>
         </div>
       </template>
     </el-dialog>
 
-    <!-- 弹框 -->
+    <!-- 通用弹框 -->
     <DialogModel :dialogConfig="dialogConfig" @closeDialogOuter="closeDialogOuter">
-      <!-- 设备添加表单 -->
       <template slot="outerContent">
         <template v-if="dialogConfig.outerTitle !== '绑定记录'">
           <el-form label-width="80px" :model="addDeviceParams" :rules="addDeviceRules" ref="addDeviceParamsRef">
@@ -414,9 +404,8 @@
               </el-select>
             </el-form-item>
             <el-form-item label="设备编号" prop="iotCode">
-              <el-input placeholder="请输入设备编号" clearable v-model="addDeviceParams.iotCode" />
+              <el-input placeholder="请输入设备编号" clearable v-model="addDeviceParams.iotCode"/>
             </el-form-item>
-
             <el-form-item label="设备状态: " prop="iotStatus" v-if="dialogConfig.outerTitle === '修改设备'">
               <el-switch
                 v-model="addDeviceParams.iotStatus"
@@ -427,21 +416,18 @@
               />
             </el-form-item>
           </el-form>
-
           <el-row style="margin-top: 20px; text-align: right">
             <el-button size="mini" type="primary" @click="handleSubmit()">确 定</el-button>
             <el-button size="mini" type="warning" @click="handleCancel()">取 消</el-button>
           </el-row>
         </template>
-        <TableModel :config="dialogConfig" :sendParams="sendParams" :sendApi="getDeviceBindRecordApi" v-else />
+        <TableModel :config="dialogConfig" :sendParams="sendParams" :sendApi="getDeviceBindRecordApi" v-else/>
       </template>
     </DialogModel>
 
     <MapDialog
-      v-if="mapDialogVisible"
-      :deviceName="deviceName"
-      :deviceType="deviceType"
-      :iotCode="iotCode"
+      :dialog-visible="mapDialogVisible"
+      :address="address"
       @handelCloseDialog="handelCloseDialog"
     />
   </div>
@@ -449,43 +435,33 @@
 
 <script>
 import {
-  addDeviceInfoApi,
-  getDeviceListApi,
-  deleteDeviceApi,
-  unbindDeviceApi,
-  getDeviceBindRecordApi,
-  getDeviceBindDetailsApi,
-  addOrUpdate,
   getIotList,
+  addOrUpdate,
+  deleteDeviceApi,
   unbindIot,
   getCategoryList,
   getEquipment,
+  bindIot,
+  getDeviceBindRecordApi
 } from '@/api/iotDevice'
 import { dialogConfig } from './config'
-import DialogModel from '@/components/DialogModel' // 弹框组件
+import DialogModel from '@/components/DialogModel'
 import TableModel from '@/components/TableModel'
-import { bindIot } from '../../api/iotDevice' // 表格组件
 import { getUseProjectListAPI } from '@/api/EquipmentLedger/equ-out'
 import MapDialog from './MapDIalog'
 
-
 export default {
   name: 'IOTManagement',
-  // 修复1：注册导入的组件（关键）
-  components: {
-    DialogModel,
-    TableModel,
-    MapDialog,
-  },
+  components: { DialogModel, TableModel, MapDialog },
   data() {
     return {
       getDeviceBindRecordApi,
-      // 弹框的参数（确保outerVisible初始值存在）
+      // 弹框配置
       dialogConfig: {
-        ...dialogConfig, // 继承config.js的配置
-        outerVisible: false, // 显式初始化弹窗显隐状态
+        ...dialogConfig,
+        outerVisible: false,
         outerWidth: '50%',
-        outerTitle: '',
+        outerTitle: ''
       },
       // 搜索参数
       searchParams: {
@@ -496,198 +472,128 @@ export default {
         typeId: '',
         typeName: '',
         maCode: '',
-        proName: '',
         proCode: '',
         maStatus: '',
         iotStatus: '',
         bindStatus: '',
-        iotManager: '',
+        iotManager: ''
       },
       // 列表数据
       projectList: [],
       total: 0,
-      // 选中行
       selectedRows: [],
-      // 弹窗相关
+      // 新增/编辑弹窗
       addOrEditDialogVisible: false,
-      bindDialogVisible: false,
       dialogTitle: '',
-      bindDialogTitle: '',
       isAdd: true,
       submitLoading: false,
-      // 表单数据
       addOrEditForm: {
         iotId: '',
         iotName: '',
         iotCode: '',
-        address: '',
         iotManager: '',
-        iotStatus: '1', // 初始离线
-        remark: '',
+        iotStatus: '1',
+        remark: ''
       },
-      // 表单校验规则（匹配表单字段）
       addOrEditFormRules: {
         iotName: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
-        iotCode: [{ required: true, message: '请输入设备编码', trigger: 'blur' }],
-      },
-      // 绑定表单
-      bindForm: {
-        iotId: '', // 核心：存储绑定的设备ID
-        typeName: '',
-        maCode: '',
-        maId: '',
-      },
-      // 绑定表单校验规则
-      bindFormRules: {
-        typeName: [{ required: true, message: '请输入装备名称', trigger: 'blur' }],
-        maCode: [{ required: true, message: '请输入装备编码', trigger: 'blur' }],
-        iotId: [{ required: true, message: '缺少设备ID', trigger: 'blur' }],
-      },
-      // 临时变量（查看记录/二维码用）
-      sendParams: {
-        iotId: '',
-      },
-      // 修复2：补充模板中用到但缺失的变量
-      deviceTypeList: [], // 设备类型列表（模板中el-select用到）
-      addDeviceParams: {
-        // 设备添加参数（模板中el-form用到）
-        iotType: '',
-        iotCode: '',
-        iotStatus: 0,
+        iotCode: [{ required: true, message: '请输入设备编码', trigger: 'blur' }]
       },
+      // 绑定相关
+      bindDialogVisible: false,
+      bindDialogTitle: '',
+      bindForm: { iotId: '', typeName: '', maCode: '', maId: '' },
+      // 公共参数
+      sendParams: { iotId: '' },
+      deviceTypeList: [],
+      addDeviceParams: { iotType: '', iotCode: '', iotStatus: 0 },
       addDeviceRules: {
-        // 设备添加表单校验（模板中el-form用到）
         iotType: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
-        iotCode: [{ required: true, message: '请输入设备编号', trigger: 'blur' }],
+        iotCode: [{ required: true, message: '请输入设备编号', trigger: 'blur' }]
       },
-      // 其他变量
-      qrCode: '',
-      qrUrl: '',
-      uploadOpen: false,
-      rowObj: {},
-
+      // 地图弹窗
       mapDialogVisible: false,
-      deviceName: '',
-      deviceType: '',
-      iotCode: '',
-      // 搜索区域展开状态
+      address: '',
+      // 搜索展开
       searchExpanded: false,
       showSearch: true,
-      // 表头字段
+      // 表格列配置
       columns: [
-        { key: 1, label: `定位设备名称`, prop: 'iotName', visible: true },
-        { key: 2, label: `定位设备编码`, prop: 'iotCode', visible: true },
-        { key: 3, label: `装备类目`, prop: 'type', width: 300, visible: true },
-        { key: 4, label: `装备名称`, prop: 'typeName', width: 300, visible: true },
-        { key: 5, label: `装备编码`, prop: 'maCode', visible: true },
-        { key: 6, label: `使用项目`, prop: 'proName', visible: true },
-        { key: 7, label: `装备状态`, prop: 'maStatus', visible: true },
-        { key: 8, label: `设备状态`, prop: 'iotStatus', visible: true },
-        { key: 9, label: `绑定状态`, prop: 'bindStatus', visible: true },
-        { key: 10, label: `设备地图`, prop: 'address', visible: true },
-        { key: 11, label: `设备负责人`, prop: 'iotManager', visible: true },
-        { key: 12, label: `绑定时间`, prop: 'bindTime', visible: true },
-        { key: 13, label: `解绑时间`, prop: 'unBindTime', visible: true },
+        { key: 1, label: '定位设备名称', prop: 'iotName', visible: true },
+        { key: 2, label: '定位设备编码', prop: 'iotCode', visible: true },
+        { key: 3, label: '装备类目', prop: 'type', width: 300, visible: true },
+        { key: 4, label: '装备名称', prop: 'typeName', width: 300, visible: true },
+        { key: 5, label: '装备编码', prop: 'maCode', visible: true },
+        { key: 6, label: '使用项目', prop: 'proName', visible: true },
+        { key: 7, label: '装备状态', prop: 'maStatus', visible: true },
+        { key: 8, label: '设备状态', prop: 'iotStatus', visible: true },
+        { key: 9, label: '绑定状态', prop: 'bindStatus', visible: true },
+        { key: 10, label: '设备地图', prop: 'address', visible: true },
+        { key: 11, label: '设备负责人', prop: 'iotManager', visible: true },
+        { key: 12, label: '绑定时间', prop: 'bindTime', visible: true },
+        { key: 13, label: '解绑时间', prop: 'unBindTime', visible: true }
       ],
       statusList: [
         { label: '在库', value: '1' },
         { label: '自用', value: '2' },
         { label: '共享', value: '3' },
-        { label: '维修', value: '5' },
+        { label: '维修', value: '5' }
       ],
-
-      // 新增：筛选表单数据
-      searchForm: {
-        equipmentName: '',
-        equipmentType: '',
-        specModel: '',
-        typeId: '',
-      },
-
+      // 绑定弹窗搜索
+      searchForm: { name: '', specificationModel: '', typeId: '' },
       categoryList: [],
-
-      // 所有表格状态：新增自有/共享/外租表格数据
-      tableData: {
-        // 新增
-        own: { list: [], loading: false, total: 0, pageNum: 1, pageSize: 10 },
-      },
+      useProjectList: [],
+      // 绑定弹窗表格
+      tableData: { own: { list: [], loading: false, total: 0, pageNum: 1, pageSize: 10 } },
       tableColumns: {
-        // 新增：实例详情表格列（用于弹窗内的表格）
         instanceDetail: [
-          { label: '分类', prop: 'type', minWidth: 300 },
+          { label: '分类', prop: 'type', minWidth: 350 },
           { label: '设备编码', prop: 'deviceCode', minWidth: 120 },
           { label: '装备名称', prop: 'name', minWidth: 150 },
-          { label: '原始编码', prop: 'originalEncoding', minWidth: 120 },
+          { label: '规格型号', prop: 'specificationModel', minWidth: 120 },
           {
             label: '装备状态',
             prop: 'maStatus',
             minWidth: 120,
-            dictMap: { 1: '在库', 2: '自用', 3: '共享', 5: '维修' },
-          },
-        ],
+            dictMap: { 1: '在库', 2: '自用', 3: '共享', 5: '维修' }
+          }
+        ]
       },
-      ownOpen: false, // 自有装备弹窗
-      selectedOwnRows: [],
-      selectedRowId: '',
-      useProjectList: [],
+      selectedRowId: ''
     }
   },
   created() {
-    this.getDeviceList()
-    //this.getDeviceTypeList()
-    this.getCategoryList()
-    this.getUseProjectList()
+    this.initData()
   },
   methods: {
+    // 初始化数据
+    async initData() {
+      await Promise.all([
+        this.getDeviceList(),
+        this.getCategoryList(),
+        this.getUseProjectList()
+      ])
+    },
+    // 获取使用项目列表
     async getUseProjectList() {
       try {
         const res = await getUseProjectListAPI()
-        this.useProjectList = res.data
+        this.useProjectList = res.data || []
       } catch (error) {
-        console.log('🚀 ~ error:', error)
+        console.log('获取使用项目列表失败：', error)
       }
     },
+    // 获取装备分类
     async getCategoryList() {
       const res = await getCategoryList()
       if (res.code === 200) {
-        this.categoryList = res.data.map((item) => ({
+        this.categoryList = res.data.map(item => ({
           ...item,
-          uniqueKey: `${item.typeId}-${item.type}`,
+          uniqueKey: `${item.typeId}-${item.type}`
         }))
       }
     },
-
-    /*     async getEquipment(){
-      const res = await getEquipment()
-      if (res.code === 200) {
-        this.tableData.own.list = res.rows
-        this.tableData.own.total = res.total
-      }
-    }, */
-
-    isOverflow(text, line = 2, width = 180) {
-      // 创建一个隐藏的测量节点
-      const div = document.createElement('div')
-      div.style.position = 'absolute'
-      div.style.visibility = 'hidden'
-      div.style.width = width + 'px'
-      div.style.lineHeight = '1.5'
-      div.style.fontSize = '14px'
-      div.style.fontFamily = 'Arial'
-      div.style.display = '-webkit-box'
-      div.style.webkitBoxOrient = 'vertical'
-      div.style.webkitLineClamp = line
-      div.style.wordBreak = 'break-all'
-      div.innerText = text
-
-      document.body.appendChild(div)
-
-      const isOverflow = div.scrollHeight > div.clientHeight
-
-      document.body.removeChild(div)
-      return isOverflow
-    },
-    /** 获取设备列表 */
+    // 获取设备列表
     async getDeviceList() {
       try {
         const res = await getIotList(this.searchParams)
@@ -698,144 +604,92 @@ export default {
         console.error('获取设备列表失败：', err)
       }
     },
-
-    /** 获取设备类型 */
-    // async getDeviceTypeList() {
-    //   try {
-    //     const res = await selectList()
-    //     this.deviceTypeList = res || [] // 修复：将返回值赋值给deviceTypeList
-    //     console.log(res, '设备类型获取成功')
-    //   } catch (err) {
-    //     console.error('获取设备类型失败：', err)
-    //   }
-    // },
-
-    /** 搜索按钮 */
+    // 搜索查询
     handleQuery() {
       this.searchParams.pageNum = 1
       this.getDeviceList()
     },
-
-    /** 关闭弹框 */
+    // 关闭通用弹框
     closeDialogOuter() {
       this.dialogConfig.outerVisible = false
     },
-
-    /** 重置搜索表单 */
+    // 重置搜索表单
     onReset() {
-      this.$refs.searchFormRef.resetFields()
+      this.$refs.searchFormRef?.resetFields()
       this.searchParams = {
         pageNum: 1,
         pageSize: 10,
-        keyWord: '',
+        iotName: '',
+        iotCode: '',
+        typeId: '',
+        typeName: '',
+        maCode: '',
+        proCode: '',
+        maStatus: '',
+        iotStatus: '',
+        bindStatus: '',
+        iotManager: ''
       }
       this.getDeviceList()
     },
-
-    /** 添加/编辑设备 */
+    // 新增/编辑设备
     addDevice(row) {
-      this.getCategoryList()
-      // 1. 先清空旧表单（放在最前）
       this.$refs.addOrEditFormRef?.resetFields()
-
-      // 2. 先判断是新增还是编辑，设置标题和标识
       if (row) {
         this.isAdd = false
-        this.dialogTitle = '编辑定位设备' // 用新的标题变量
-        // 编辑：赋值表单（深拷贝避免修改原数据）
+        this.dialogTitle = '编辑定位设备'
         this.addOrEditForm = {
           ...row,
-          iotStatus: String(row.iotStatus), // 统一转字符串，避免类型问题
-          bindStatus: String(row.bindStatus),
+          iotStatus: String(row.iotStatus),
+          bindStatus: String(row.bindStatus)
         }
       } else {
         this.isAdd = true
-        this.dialogTitle = '新增定位设备' // 用新的标题变量
-        // 新增：重置表单默认值
+        this.dialogTitle = '新增定位设备'
         this.addOrEditForm = {
           iotId: '',
           bindStatus: '1',
-          iotName: '', // 注意：原代码漏了iotName，补上！
-          iotType: '',
+          iotName: '',
           iotCode: '',
-          address: '',
-          iotManager: '', // 原代码写的iotPerson，和表单的iotManager不一致，修正！
+          iotManager: '',
           iotStatus: '1',
-          remark: '',
+          remark: ''
         }
       }
-
-      // 3. 最后打开弹窗
       this.addOrEditDialogVisible = true
     },
-
-    /** 绑定设备 */
+    // 绑定设备
     handleBind(row) {
       this.selectedRowId = ''
-      this.getCategoryList()
       this.loadOwnEquipmentData()
-      this.$refs.bindFormRef?.resetFields()
-      this.bindForm = {
-        iotId: row.iotId,
-        typeName: '',
-        maCode: '',
-        maId: '',
-      }
-      this.bindDialogTitle = '设备绑定' // 用新的标题变量
+      this.bindForm = { iotId: row.iotId, typeName: '', maCode: '', maId: '' }
+      this.bindDialogTitle = '设备绑定'
       this.bindDialogVisible = true
     },
-
-    /** 复选框选择事件 */
+    // 表格选择事件
     handleSelectionChange(list) {
       this.selectedRows = list
     },
-
-    /** 提交新增/编辑表单 */
+    // 提交新增/编辑表单
     handleSubmit() {
-      this.$refs.addOrEditFormRef.validate(async (valid) => {
-        if (valid) {
-          this.submitLoading = true
-          try {
-            const res = await addOrUpdate(this.addOrEditForm)
-            if (res.code === 200) {
-              this.$message.success(`${this.isAdd ? '新增' : '修改'}成功！`)
-              this.addOrEditDialogVisible = false
-              this.getDeviceList()
-            }
-          } catch (err) {
-            //this.$message.error(`${this.isAdd ? '新增' : '修改'}失败`)
-            console.error('提交失败：', err)
-          } finally {
-            this.submitLoading = false
+      this.$refs.addOrEditFormRef?.validate(async(valid) => {
+        if (!valid) return
+        this.submitLoading = true
+        try {
+          const res = await addOrUpdate(this.addOrEditForm)
+          if (res.code === 200) {
+            this.$message.success(`${this.isAdd ? '新增' : '修改'}成功！`)
+            this.addOrEditDialogVisible = false
+            this.getDeviceList()
           }
+        } catch (err) {
+          console.error('提交失败：', err)
+        } finally {
+          this.submitLoading = false
         }
       })
     },
-
-    /** 绑定设备提交 */
-    bindSubmit() {
-      this.$refs.bindFormRef.validate(async (valid) => {
-        if (valid) {
-          this.submitLoading = true
-          try {
-            console.log('绑定参数(含IoTId)：', this.bindForm)
-            const res = await bindIot(this.bindForm)
-            if (res.code === 200) {
-              this.$message.success(`绑定成功！`)
-              this.bindDialogVisible = false
-              this.getDeviceList()
-            }
-          } catch (err) {
-            //this.$message.error(`绑定失败`)
-            console.error('绑定失败：', err)
-          } finally {
-            this.submitLoading = false
-          }
-        }
-      })
-    },
-
-    /** 关闭新增/编辑弹窗 */
+    // 关闭新增/编辑弹窗
     handleDialogClose() {
       this.$refs.addOrEditFormRef?.resetFields()
       this.addOrEditForm = {
@@ -843,61 +697,39 @@ export default {
         bindStatus: '1',
         iotName: '',
         iotCode: '',
-        address: '',
         iotManager: '',
         iotStatus: '1',
-        remark: '',
+        remark: ''
       }
     },
-
-    /** 关闭绑定弹窗 */
+    // 关闭绑定弹窗
     handleBindDialogClose() {
-      this.$refs.bindFormRef?.resetFields()
-      this.bindForm = {
-        iotId: '',
-        typeName: '',
-        maCode: '',
-        maId: '',
-      }
+      this.bindForm = { iotId: '', typeName: '', maCode: '', maId: '' }
+      this.selectedRowId = ''
     },
-
-    /** 查看记录（强化：确保弹窗参数正确） */
+    // 查看绑定记录
     handleViewRecord(id) {
       this.dialogConfig.outerWidth = '70%'
       this.dialogConfig.outerTitle = '绑定记录'
       this.sendParams.iotId = id
-      this.dialogConfig.outerVisible = true // 强制设置为显示
-      console.log('记录弹窗参数：', this.dialogConfig, this.sendParams) // 调试用
+      this.dialogConfig.outerVisible = true
     },
-
-    /** 修复3：补充缺失的handleCancel方法 */
+    // 取消通用弹框
     handleCancel() {
       this.dialogConfig.outerVisible = false
       this.$refs.addDeviceParamsRef?.resetFields()
     },
-
-    /** 删除/解绑设备 */
+    // 删除/解绑设备
     handleDeleteAndUnbind(row, type) {
       const title = type === 1 ? '删除' : '解绑'
-      this.$confirm(`是否确定${title}当前设备?`, '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-      })
-        .then(async () => {
+      this.$confirm(`是否确定${title}当前设备?`, '提示', { type: 'warning' })
+        .then(async() => {
           try {
-            if (type === 1) {
-              const res = await deleteDeviceApi(row.iotId)
-              if (res.code === 200) {
-                this.$message.success(`${title}成功！`)
-                this.getDeviceList()
-              }
-            } else {
-              const detailRes = await unbindIot(row)
-              if (Number(detailRes.code) === 200) {
-                this.$message.success(`${title}成功！`)
-                this.getDeviceList()
-              }
+            const api = type === 1 ? deleteDeviceApi(row.iotId) : unbindIot(row)
+            const res = await api
+            if (Number(res.code) === 200) {
+              this.$message.success(`${title}成功！`)
+              this.getDeviceList()
             }
           } catch (err) {
             this.$message.error(`${title}失败`)
@@ -908,118 +740,70 @@ export default {
           this.$message.info('已取消操作')
         })
     },
-
-    /** 分页 - 每页条数改变 */
+    // 分页-每页条数改变
     handleSizeChange(val) {
       this.searchParams.pageSize = val
       this.getDeviceList()
     },
-
-    /** 分页 - 当前页改变 */
+    // 分页-当前页改变
     handleCurrentChange(val) {
       this.searchParams.pageNum = val
       this.getDeviceList()
     },
-
-    /** 查看二维码 */
-    showQrCode(row) {
-      if (!row.qrCode) {
-        this.$message.error('当前设备没有二维码')
-        return
-      }
-      this.rowObj = row
-      this.uploadOpen = true
-      this.qrCode = row.qrCode
-      let str = this.qrUrl + row.qrCode
-      this.$nextTick(() => {
-        this.$refs.codeItem.innerHTML = ''
-        let qrCode = new QRCode(this.$refs.codeItem, {
-          text: str,
-          width: 256,
-          height: 256,
-          colorDark: '#000000',
-          colorLight: '#ffffff',
-          correctLevel: QRCode.CorrectLevel.H,
-        })
-      }, 500)
-    },
-
-    /** 关闭地图弹框 */
+    // 关闭地图弹框
     handelCloseDialog() {
       this.mapDialogVisible = false
     },
-
-    async handleMap(row) {
-      this.deviceName = row.specificationType
-      this.deviceType = row.maStatusName
-      this.iotCode = row.iotCode
-      this.mapDialogVisible = true
-    },
-
-    /**
-     * 切换搜索区域展开/收起状态
-     */
+    // 切换搜索展开/收起
     toggleSearch() {
       this.searchExpanded = !this.searchExpanded
-      this.searchExpanded ? (this.tableHeight = 320) : (this.tableHeight = 500)
     },
-
-    handleCategoryChange(selectedTypeId) {
-      if (!selectedTypeId) {
-        this.formData.classificationForm.selectedCategory = null
-        this.formData.classificationForm.category = ''
-        return
-      }
-      const selectedItem = this.categoryList.find((item) => item.typeId === selectedTypeId)
-      if (selectedItem) {
-        this.formData.classificationForm.matchingName = selectedItem.typeId
-        this.formData.classificationForm.category = selectedItem.type
-        this.formData.classificationForm.name = selectedItem.equipmentName
-      }
-    },
-
+    // 绑定弹窗-查询
     handleOwnSearch() {
       this.tableData.own.pageNum = 1
       this.loadOwnEquipmentData()
     },
+    // 绑定弹窗-重置
     resetOwnSearch() {
-      this.searchForm.own = {
-        name: '',
-        type: '',
-        specificationModel: '',
-      }
+      this.searchForm = { name: '', specificationModel: '', typeId: '' }
       this.tableData.own.pageNum = 1
       this.loadOwnEquipmentData()
     },
+    // 绑定弹窗-分页条数改变
     handleOwnSizeChange(val) {
       this.tableData.own.pageSize = val
       this.loadOwnEquipmentData()
     },
+    // 绑定弹窗-当前页改变
     handleOwnCurrentChange(val) {
       this.tableData.own.pageNum = val
       this.loadOwnEquipmentData()
     },
-
-    // 点击行选中单选框
+    // 绑定弹窗-行点击
     handleRowClick(row) {
-      this.selectedRowId = row.id // 替换为你行数据的唯一标识（如row.key）
-
+      this.selectedRowId = row.id
       this.bindForm = {
-        iotId: this.bindForm.iotId,
+        ...this.bindForm,
         typeName: row.name,
         maCode: row.deviceCode,
-        maId: this.selectedRowId,
+        maId: row.id
       }
     },
+    // 绑定弹窗-确认选择
     async handleOwnConfirm() {
-      const res = await bindIot(this.bindForm)
-      if (res.code === 200) {
-        this.$message.success(`绑定成功！`)
-        this.bindDialogVisible = false
-        this.getDeviceList()
+      try {
+        const res = await bindIot(this.bindForm)
+        if (res.code === 200) {
+          this.$message.success('绑定成功！')
+          this.bindDialogVisible = false
+          this.getDeviceList()
+        }
+      } catch (err) {
+        this.$message.error('绑定失败')
+        console.error('绑定失败：', err)
       }
     },
-
+    // 加载绑定弹窗装备数据
     async loadOwnEquipmentData() {
       const tabConfig = this.tableData.own
       tabConfig.loading = true
@@ -1027,7 +811,7 @@ export default {
         const queryParams = {
           ...this.searchForm,
           pageNum: tabConfig.pageNum,
-          pageSize: tabConfig.pageSize,
+          pageSize: tabConfig.pageSize
         }
         const res = await getEquipment(queryParams)
         tabConfig.list = res.rows || []
@@ -1041,83 +825,71 @@ export default {
         tabConfig.loading = false
       }
     },
-  },
+    async handleMap(row) {
+      this.address = row.address
+      this.mapDialogVisible = true
+    }
+  }
 }
 </script>
 
-<!-- 完全保留你原有的所有样式代码，一行未改、未删、未加 -->
 <style scoped>
-/* 全局容器：禁止页面滚动 */
 .app-container {
   background: #f5f7fa;
-  height: calc(99vh - 84px); /* 占满视口高度 */
-  box-sizing: border-box; /* 包含padding */
-  overflow: hidden; /* 核心：隐藏页面滚动条 */
+  height: calc(99vh - 84px);
+  box-sizing: border-box;
+  overflow: hidden;
   display: flex;
-  flex-direction: column; /* 垂直布局，防止内容溢出 */
+  flex-direction: column;
 }
 
-/* 搜索区 */
 .search-wrapper {
   background: #fff;
   padding: 16px;
   border-radius: 4px;
   margin-bottom: 2px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-  flex-shrink: 0; /* 不压缩 */
+  flex-shrink: 0;
 }
 
-.search-form {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 12px;
-}
-
-/* 表格区：自适应剩余高度 */
 .table-wrapper {
   background: #fff;
   padding: 16px;
   border-radius: 4px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-  flex: 1; /* 占满剩余高度 */
+  flex: 1;
   display: flex;
   flex-direction: column;
-  overflow: hidden; /* 确保容器不溢出 */
+  overflow: hidden;
 }
 
 .table-header {
   display: flex;
   align-items: center;
   margin-bottom: 12px;
-  flex-shrink: 0; /* 不压缩 */
-  justify-content: flex-end; /* 修复：新建按钮靠左显示 */
+  flex-shrink: 0;
+  justify-content: flex-end;
 }
 
-/* 表格内容容器：自适应高度 + 隐藏滚动条（核心修复：overflow改为auto） */
 .table-content {
-  flex: 1; /* 占满剩余高度 */
-  overflow: auto; /* 关键：开启滚动，仅容器内滚动 */
-  /* 核心：隐藏滚动条 */
-  -ms-overflow-style: none; /* IE/Edge */
-  scrollbar-width: none; /* Firefox */
-  /* 关键：给sticky表头预留定位空间，防止表头被遮挡 */
+  flex: 1;
+  overflow: auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
   position: relative;
 }
 
-/* Chrome/Safari 隐藏滚动条 */
 .table-content::-webkit-scrollbar {
   display: none;
 }
 
 .project-table {
   width: 100%;
-  --el-table-row-height: 60px; /* 适配两行文字高度 */
+  --el-table-row-height: 60px;
   --el-table-header-text-color: #333;
   --el-table-header-background-color: #fafafa;
 }
 
-/* 核心：表头固定（sticky吸顶）- 增强兼容性 */
 .project-table .el-table__header-wrapper {
   position: sticky;
   top: 0;
@@ -1125,49 +897,31 @@ export default {
   background-color: var(--el-table-header-background-color) !important;
 }
 
-/* 修复表头单元格边框 */
 .project-table .el-table__header th {
   border-bottom: 1px solid #ebeef5;
   border-right: 1px solid #ebeef5;
   white-space: nowrap;
 }
 
-/* 修复elementUI表格默认的margin-top问题 */
 .project-table .el-table__header {
   margin-top: 0 !important;
 }
 
-/* 单元格文字两行显示，超出省略 */
-.cell-text-ellipsis {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  line-height: 1.5;
-  max-height: 3em;
-  word-break: break-all;
-}
-
-/* 分页组件：固定右下 */
 .pagination-wrapper {
   margin-top: 12px;
-  text-align: right; /* 水平居右 */
-  flex-shrink: 0; /* 不压缩 */
+  text-align: right;
+  flex-shrink: 0;
   padding-right: 4px;
 }
 
-/* 弹窗样式 */
 .dialog-footer {
   text-align: right;
 }
 
-/* 修复表格滚动时的tbody边框 */
 .project-table .el-table__body {
-  border-top: none; /* 避免和表头边框重复 */
+  border-top: none;
 }
 
-/* hover行样式优化（不影响表头） */
 .project-table .el-table__row:hover {
   background-color: #f5f7fa;
 }
@@ -1183,7 +937,6 @@ export default {
   align-items: center;
 }
 
-/* 搜索区域收起/展开按钮 */
 .search-toggle-btn {
   color: #2cbab2;
   padding: 5px 10px;
@@ -1191,7 +944,6 @@ export default {
   font-weight: 300;
 }
 
-/* 固定操作栏样式 */
 .sticky-bar {
   position: sticky;
   top: 0;
@@ -1212,20 +964,15 @@ export default {
   border-color: #2cbab2;
 }
 
-/* 隐藏el-radio的文本部分 */
 .radio-no-text .el-radio__label {
   display: none !important;
 }
-/* 可选：微调单选按钮位置，居中显示 */
+
 .radio-no-text .el-radio__input {
   margin: 0 auto;
   display: block;
 }
 
-.el-radio__input.is-checked + .el-radio__label {
-  display: none;
-}
-
 ::v-deep .el-radio__label {
   display: none;
 }