From a1b3d03a0cbc7b0e643510a175f29391b108a2b5 Mon Sep 17 00:00:00 2001
From: liub <itliubiao@qq.com>
Date: Mon, 12 Jan 2026 10:22:41 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=BE=E5=A4=87=E7=B1=BB=E5=9E=8B=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E5=9B=BE=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |    4 +-
 .env.production                               |    4 +-
 index.html                                    |    7 +-
 .../equipmentManagement/deviceType/index.ts   |    9 +-
 src/views/controlCenter/018A/index.vue        | 1090 +++++++++++++++++
 .../equipmentManagement/deviceType/index.vue  |  267 +++-
 6 files changed, 1316 insertions(+), 65 deletions(-)
 create mode 100644 src/views/controlCenter/018A/index.vue

diff --git a/.env.development b/.env.development
index 0c2cb45..3dfc58d 100644
--- a/.env.development
+++ b/.env.development
@@ -6,8 +6,8 @@ VITE_APP_ENV = 'development'
 
 # 开发环境
 #  VITE_APP_BASE_API = 'http://139.224.253.23:8000'
-  VITE_APP_BASE_API = 'https://www.cnxhyc.com/jq'
-#VITE_APP_BASE_API = 'http://192.168.110.56:8000'   
+# VITE_APP_BASE_API = 'https://www.cnxhyc.com/jq'
+VITE_APP_BASE_API = 'http://192.168.110.57:8000'   
 #代永飞接口
 # VITE_APP_BASE_API = 'http://457102h2d6.qicp.vip:24689'   
 
diff --git a/.env.production b/.env.production
index 25ffc11..fdd251b 100644
--- a/.env.production
+++ b/.env.production
@@ -8,7 +8,7 @@ VITE_APP_ENV = 'https://www.cnxhyc.com'
 # VITE_APP_ENV = 'https://fuyuanshen.com/backend-fys'
 
 # 应用访问路径 晶全1
-VITE_APP_CONTEXT_PATH = '/jingquan/'
+VITE_APP_CONTEXT_PATH = '/'
 
 # 高德地图Key
 VITE_AMAP_KEY='84a12a692ae378effdf741e16d584cd3'
@@ -23,7 +23,7 @@ VITE_APP_MONITOR_ADMIN = '/admin/applications'
 VITE_APP_SNAILJOB_ADMIN = '/snail-job'
 
 # 生产环境 晶全3 代理访问
-VITE_APP_BASE_API = '/jq'
+VITE_APP_BASE_API = 'https://www.cnxhyc.com/jq'
 
 # 生产环境 富源晟3
 #VITE_APP_BASE_API = '/backend-fys'
diff --git a/index.html b/index.html
index d4a9c8a..48eb08c 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,12 @@
     <meta name="renderer" content="webkit" />
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
     <link rel="icon" href="/favicon.ico" />
-      <script src="https://webapi.amap.com/maps?v=2.0&key=90bc158992feb8ccd0145e168cab1307&plugin=AMap.CircleEditor"></script>
+    <script  type="text/javascript">
+      window._AMapSecurityConfig = {
+        securityJsCode: "4239900f4fb7b2569df651ac814a28de",
+      };
+    </script>
+      <script src="https://webapi.amap.com/maps?v=2.0&key=78c36a1e251a95f1a21a9e5ea7a1331c&plugin=AMap.CircleEditor"></script>
     <title>物联网管理平台</title>
     <!--[if lt IE 11
       ]><script>
diff --git a/src/api/equipmentManagement/deviceType/index.ts b/src/api/equipmentManagement/deviceType/index.ts
index 67a798a..faa5e28 100644
--- a/src/api/equipmentManagement/deviceType/index.ts
+++ b/src/api/equipmentManagement/deviceType/index.ts
@@ -17,7 +17,10 @@ export const addDeviceType = (data: any): AxiosPromise<deviceTypeVO[]> => {
   return request({
     url: '/api/deviceType/add',
     method: 'post',
-    data: data
+    data: data,
+     headers:{
+      'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'
+    }
   });
 };
 
@@ -26,6 +29,9 @@ export const updateDeviceType = (data: any): AxiosPromise<deviceTypeVO[]> => {
   return request({
     url: '/api/deviceType/update',
     method: 'put',
+    headers:{
+      'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'
+    },
     data
   })
 }
@@ -34,6 +40,7 @@ export const deleteDeviceType = (ids: any): AxiosPromise<deviceTypeVO[]> => {
   return request({
     url: '/api/deviceType/delete',
     method: 'delete',
+    
     data: ids
   })
 }
diff --git a/src/views/controlCenter/018A/index.vue b/src/views/controlCenter/018A/index.vue
new file mode 100644
index 0000000..b609de2
--- /dev/null
+++ b/src/views/controlCenter/018A/index.vue
@@ -0,0 +1,1090 @@
+<template>
+  <div class="device-page p-2">
+    <!-- 头部信息栏 -->
+    <div class="header-bar">
+      <div>设备名称：{{ deviceDetail.deviceName }}，IMEI:{{ deviceDetail.deviceImei }}</div>
+      <div>设备型号：{{ deviceDetail.typeName }}</div>
+      <div class="device-status">
+        设备状态：
+        <span :class="{ online: deviceDetail.onlineStatus === 1, offline: deviceDetail?.onlineStatus === 0 }">
+          {{ deviceDetail.onlineStatus === 1 ? '在线' : '离线' }}
+        </span>
+      </div>
+      <div>电量：{{ deviceDetail.staPowerPercent || 0 }}%</div>
+      <div>续航：{{ powerTime }}</div>
+    </div>
+
+    <!-- 主体内容区域 -->
+    <div class="content-wrapper">
+      <el-row :gutter="20" class="content-row" :class="deviceDetail.sta_ShakeBit == 1 || deviceDetail.staSOSGrade == 1 ? '' : 'displayNone'">
+        <el-col :lg="24" :xs="24">
+          <div class="staticRwo" :class="deviceDetail.sta_ShakeBit == 1 ? '' : 'displayNone'">设备静止报警中!</div>
+          <div class="staticRwo" :class="deviceDetail.staSOSGrade == 1 && Status.timeOut > 0 ? '' : 'displayNone'" @click="showClose()">
+            设备强制报警中<span v-show="Status.timeOut > 0">,{{ Status.timeOut }}S</span>!
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20" class="content-row">
+        <el-col :lg="8" :xs="24">
+          <div class="content-card">
+            <div class="item">
+              <h4 class="section-title">SOS档位</h4>
+              <div class="light-mode">
+                <div
+                  class="mode-card"
+                  :class="{ 'active': Status.sosMode == mode.id }"
+                  @click.stop="handleModeClick(mode.id, 'sosMode')"
+                  v-for="mode in sosModes"
+                  :key="mode.id"
+                >
+                  <img :src="Status.sosMode == mode.id ? mode.activeIcon : mode.icon" :alt="mode.name" class="mode-icon" />
+                  <div class="mode-name">{{ mode.name }}</div>
+                  <el-switch :active-value="Status.sosMode != mode.id" :inactive-value="Status.sosMode == mode.id" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-col>
+        <el-col :lg="8" :xs="24">
+          <div class="content-card">
+            <div class="item">
+              <h4 class="section-title">静电探测档位</h4>
+              <div class="light-mode">
+                <div
+                  class="mode-card"
+                  :class="{ 'active': Status.staticPower == mode.id }"
+                  @click.stop="handleModeClick(mode.id, 'staticPower')"
+                  v-for="mode in staticModes"
+                  :key="mode.id"
+                >
+                  <img :src="Status.staticPower == mode.id ? mode.activeIcon : mode.icon" :alt="mode.name" class="mode-icon" />
+                  <div class="mode-name">{{ mode.name }}</div>
+                  <el-switch :active-value="Status.staticPower != mode.id" :inactive-value="Status.staticPower == mode.id" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-col>
+        <el-col :lg="8" :xs="24">
+          <div class="content-card">
+            <div class="fleft item">
+              <h4 class="section-title">灯光模式</h4>
+              <div class="light-mode">
+                <div
+                  class="mode-card"
+                  :class="{ 'active': Status.lightMode == mode.id }"
+                  @click.stop="handleModeClick(mode.id, 'lightMode')"
+                  v-for="mode in lightModes"
+                  :key="mode.id"
+                >
+                  <img :src="Status.lightMode == mode.id ? mode.activeIcon : mode.icon" :alt="mode.name" class="mode-icon" />
+                  <div class="mode-name">{{ mode.name }}</div>
+                  <el-switch :active-value="Status.lightMode != mode.id" :inactive-value="Status.lightMode == mode.id" />
+                </div>
+              </div>
+            </div>
+            <div class="clear"></div>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" class="content-row">
+        <el-col :lg="8" :xs="24">
+          <div class="content-card">
+            <h4 class="section-title">人员信息登记</h4>
+            <div class="form-grid">
+              <div class="form-item">
+                <span class="form-label">单位:</span>
+                <el-input v-if="deviceDetail" placeholder="请输入单位" v-model="deviceDetail.personnelInfo.unitName" />
+              </div>
+              <div class="form-item">
+                <span class="form-label">职位:</span>
+                <el-input v-if="deviceDetail" placeholder="请输入职位" v-model="deviceDetail.personnelInfo.position" />
+              </div>
+              <div class="form-item">
+                <span class="form-label">姓名:</span>
+                <el-input v-if="deviceDetail" placeholder="请输入姓名" v-model="deviceDetail.personnelInfo.name" />
+              </div>
+              <div class="form-item">
+                <span class="form-label">ID:</span>
+                <el-input v-if="deviceDetail" placeholder="请输入ID" v-model="deviceDetail.personnelInfo.code" />
+              </div>
+              <el-button
+                type="primary"
+                class="register-btn"
+                @click="registerPostInit"
+                :loading="fullscreenLoading"
+                :loading-text="fullscreenLoading ? '登记中...' : '登记'"
+              >
+                {{ fullscreenLoading ? '登记中' : '登记' }}</el-button
+              >
+            </div>
+          </div>
+        </el-col>
+        <el-col :lg="8" :xs="24">
+          <div class="content-card">
+            <h4 class="section-title">发送信息</h4>
+            <div class="message-content">
+              <el-input
+                type="textarea"
+                class="textareaTFT"
+                :rows="4"
+                :maxlength="16"
+                :show-word-limit="true"
+                placeholder="现场危险，停止救援！紧急撤离至安全区域！"
+                v-model="deviceDetail.sendMsg"
+                resize="none"
+              />
+              <div style="text-align: end; clear: both">
+                <el-button
+                  type="primary"
+                  class="send-btn"
+                  @click="sendTextMessage"
+                  :loading="sendTextLoading"
+                  :loading-text="sendTextLoading ? '发送中...' : '发送'"
+                >
+                  {{ sendTextLoading ? '发送中' : '发送' }}</el-button
+                >
+              </div>
+            </div>
+          </div>
+        </el-col>
+
+        <el-col :lg="8" :xs="24">
+          <div class="content-card_gps">
+            <h4 class="section-title">位置信息</h4>
+            <div class="location-info">
+              <div class="location-item">
+                <span class="location-icon"></span>
+                <span
+                  >经纬度 {{ deviceDetail && deviceDetail.longitude ? Number(deviceDetail.longitude).toFixed(4) : '无' }}
+                  {{ deviceDetail && deviceDetail.latitude ? Number(deviceDetail.latitude).toFixed(4) : '无' }}
+                </span>
+              </div>
+              <div class="location-item">
+                <div>
+                  地址 <span class="lacatin_gps">{{ deviceDetail.address || '未获取到地址' }}</span>
+                </div>
+                <el-button link type="primary" class="view-btn" @click="lookMap(deviceDetail)">查看</el-button>
+              </div>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <!-- ===========充电提示框====== -->
+    <el-dialog title="充电提示" v-model="centerDialogVisible" width="15%" :draggable="true">
+      <div style="display: flex; align-items: center">
+        <h3 style="color: rgba(224, 52, 52, 1)">设备电量低于20%</h3>
+      </div>
+      <div>请及时充电</div>
+      <span slot="footer" class="dialog-footer" style="text-align: right; display: block">
+        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
+
+    <!-- 提示框 -->
+    <el-dialog :width="300" :draggable="true" v-model="Status.confirm.Visible" :title="Status.confirm.title" width="500" center>
+      <span>
+        {{ Status.confirm.text }}
+      </span>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="Status.confirm.OkCallback">{{ Status.confirm.OkTxt || '确定' }} </el-button>
+          <el-button v-show="Status.confirm.showCancel" @click="Status.confirm.cancelCallback">{{ Status.confirm.cancelTxt || '取消' }}</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script setup name="DeviceControl" lang="ts">
+const route = useRoute();
+import { useMqtt } from '@/utils/mqtt';
+import api from '@/api/controlCenter/controlPanel/670';
+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';
+import floodLightDefault from '@/assets/images/flood-light.png';
+import floodLightActive from '@/assets/images/flood-light_HL.png';
+
+import di from '@/assets/images/di.png';
+import diAc from '@/assets/images/diAc.png';
+import high from '@/assets/images/high.png';
+import highAc from '@/assets/images/highAc.png';
+import rb from '@/assets/images/rb.png';
+import rbAc from '@/assets/images/rbAc.png';
+import sg from '@/assets/images/sg.png';
+import sgAc from '@/assets/images/sgAc.png';
+import zhong from '@/assets/images/zhong.png';
+import zhongAc from '@/assets/images/zhongAc.png';
+import closeDefault from '@/assets/images/close.png';
+import closeActive from '@/assets/images/close_HL.png';
+import { hi } from 'element-plus/es/locale/index.mjs';
+
+const fullscreenLoading = ref(false);
+var timer = null;
+const sendTextLoading = ref(false);
+
+const centerDialogVisible = ref(false);
+const { connected, connect, subscribe, onConnect, onError, onMessage, disconnect } = useMqtt();
+
+const Status = reactive<any>({
+  sosMode: null,
+  staticPower: null,
+  lightMode: null,
+  confirm: {
+    //弹出框的配置
+    Visible: false,
+    title: '',
+    text: '',
+    cancelCallback: null,
+    OkCallback: null,
+    showCancel: true,
+    OkTxt: '',
+    cancelTxt: ''
+  },
+  timeOut: null
+});
+
+// 灯光模式数据
+const lightModes = ref<any[]>([
+  {
+    id: '1',
+    name: '强光',
+    icon: strongLightDefault, // 直接使用导入的变量
+    activeIcon: strongLightActive,
+    active: false
+  },
+  {
+    id: '2',
+    name: '弱光',
+    icon: floodLightDefault,
+    activeIcon: floodLightActive,
+    active: false
+  },
+  {
+    id: '0',
+    name: '关闭',
+    icon: closeDefault,
+    activeIcon: closeActive,
+    active: false
+  }
+]);
+//SOS档位
+const sosModes = ref<any[]>([
+  {
+    id: '1',
+    name: '声光报警',
+    icon: sg, // 直接使用导入的变量
+    activeIcon: sgAc,
+
+    active: false
+  },
+  {
+    id: '2',
+    name: '红蓝模式',
+    icon: rb, // 直接使用导入的变量
+    activeIcon: rbAc,
+
+    active: false
+  },
+  {
+    id: '0',
+    name: '关闭',
+    icon: closeDefault, // 直接使用导入的变量
+    activeIcon: closeActive,
+
+    active: false
+  }
+]);
+//静电探测
+const staticModes = ref<any[]>([
+  {
+    id: '3',
+    name: '高档',
+    icon: high, // 直接使用导入的变量
+    activeIcon: highAc,
+
+    active: false
+  },
+  {
+    id: '2',
+    name: '中档',
+    icon: zhong, // 直接使用导入的变量
+    activeIcon: zhongAc,
+
+    active: false
+  },
+  {
+    id: '1',
+    name: '低档',
+    icon: di, // 直接使用导入的变量
+    activeIcon: diAc,
+
+    active: false
+  },
+  {
+    id: '0',
+    name: '关闭',
+    icon: closeDefault, // 直接使用导入的变量
+    activeIcon: closeActive,
+
+    active: false
+  }
+]);
+
+//续航时间显示成人类友好时间
+var powerTime = computed(() => {
+  let lightingTime = deviceDetail.value.staPowerTime;
+  let hours = Math.floor(lightingTime / 60);
+  let remainingMinutes = lightingTime % 60;
+  let xuhang = '';
+  // 处理不同情况的显示
+  if (hours === 0) {
+    xuhang = `${remainingMinutes}分钟`;
+  } else if (remainingMinutes === 0) {
+    xuhang = `${hours}小时`;
+  } else {
+    xuhang = `${hours}小时${remainingMinutes}分钟`;
+  }
+  return xuhang;
+});
+const deviceDetail = ref<any>({
+  'deviceId': null,
+  'deviceName': null,
+  'deviceImei': null,
+  'deviceMac': null,
+  'communicationMode': null,
+  'devicePic': null,
+  'typeName': null,
+  'bluetoothName': null,
+  'deviceStatus': null,
+  'personnelInfo': {
+    'id': null,
+    'deviceId': null,
+    'name': null,
+    'position': null,
+    'unitName': null,
+    'code': null
+  },
+  'onlineStatus': null,
+  'longitude': null,
+  'latitude': null,
+  'address': null,
+  'staDetectGrade': null,
+  'staLightGrade': null,
+  'staSOSGrade': null,
+  'staPowerTime': null,
+  'staPowerPercent': null,
+  'staDetectResult': null,
+  'sendMsg': null,
+  'sta_ShakeBit': null
+});
+
+//模式设置
+const handleModeClick = async (id: string, type: string) => {
+  if (Status[type] == id) {
+    return;
+  }
+  let sendCmd = (callback) => {
+    let json = { 'deviceId': route.params.deviceId, 'deviceImei': deviceDetail.value.deviceImei, 'instructValue': id };
+
+    let dic = { promise: null, callback: null, key: '' };
+
+    //测试环境假装成功
+    dic.promise = Promise.resolve({ code: 200, msg: '操作成功' });
+
+    let arr = [];
+    if (type == 'lightMode') {
+      dic.promise = api.lightModeSettings(json);
+      arr = lightModes.value;
+    } else if (type == 'staticPower') {
+      dic.promise = api.staticPowerSetting(json);
+      arr = staticModes.value;
+    } else if (type == 'sosMode') {
+      dic.promise = api.SosSetting(json);
+      arr = sosModes.value;
+    }
+    dic.callback = () => {
+      arr.find((v) => {
+        if (v.id == id) {
+          v.active = true;
+        } else {
+          v.active = false;
+        }
+      });
+    };
+
+    dic.promise.then((res) => {
+      if (res.code === 200) {
+        Status[type] = id;
+        ElMessage.closeAll();
+        proxy?.$modal.msgSuccess(res.msg);
+        if (dic.callback) {
+          dic.callback();
+        }
+        if (callback) {
+          callback();
+        }
+      } else {
+        proxy?.$modal.msgError(res.msg);
+      }
+    });
+  };
+  if (type == 'sosMode' && Status.sosMode === '1' && id === '0' && timer) {
+    showClose();
+    return;
+  } else if (type == 'sosMode' && id === '1' && timer == null) {
+    ShowConfirm({
+      title: '提示',
+      text: '您确认开启180秒强制报警',
+      cancelCallback: () => {
+        timer = null;
+      },
+      OkCallback: () => {
+        sendCmd(function () {
+          Status.confirm.Visible = false;
+          deviceDetail.value.staSOSGrade = '1';
+          Status.timeOut = 180;
+          timer = setInterval(() => {
+            if (Status.timeOut === 0) {
+              clearInterval(timer);
+              timer = null;
+              hideConfirm();
+              handleModeClick('1', 'sosMode');
+              deviceDetail.value.staSOSGrade = '0';
+              return;
+            }
+
+            Status.timeOut = Status.timeOut - 1;
+            Status.confirm.text = '设备强制报警中:' + Status.timeOut;
+          }, 1000);
+        });
+      },
+      showCancel: true,
+      OkTxt: '开启',
+      cancelTxt: '取消'
+    });
+  } else {
+    sendCmd(null);
+  }
+};
+
+const getList = () => {
+  return new Promise((resolve, reject) => {
+    api
+      .deviceRealTimeStatus(route.params.deviceId)
+      .then((res) => {
+        if (res && res.code == 200) {
+          let keys = Object.keys(res.data);
+          keys.forEach((key) => {
+            deviceDetail.value[key] = res.data[key];
+          });
+          Status.sosMode = res.data.staSOSGrade;
+          Status.staticPower = res.data.staDetectGrade;
+          Status.lightMode = res.data.staLightGrade;
+          if (!deviceDetail.value.personnelInfo) {
+            deviceDetail.value.personnelInfo = {
+              'id': null,
+              'deviceId': null,
+              'name': null,
+              'position': null,
+              'unitName': null,
+              'code': null
+            };
+          }
+        }
+      })
+      .finally(resolve);
+  });
+};
+
+// 人员信息发送
+const registerPostInit = () => {
+  if (!deviceDetail.value.personnelInfo.unitName) {
+    ElMessage.closeAll();
+    proxy?.$modal.msgWarning('单位名称不能为空');
+    return;
+  }
+  if (!deviceDetail.value.personnelInfo.name) {
+    ElMessage.closeAll();
+    proxy?.$modal.msgWarning('姓名不能为空');
+    return;
+  }
+  if (!deviceDetail.value.personnelInfo.position) {
+    ElMessage.closeAll();
+    proxy?.$modal.msgWarning('职位不能为空');
+    return;
+  }
+  if (!deviceDetail.value.personnelInfo.code) {
+    ElMessage.closeAll();
+    proxy?.$modal.msgWarning('ID不能为空');
+    return;
+  }
+  let data = {
+    code: deviceDetail.value.personnelInfo.code,
+    name: deviceDetail.value.personnelInfo.name,
+    position: deviceDetail.value.personnelInfo.position,
+    unitName: deviceDetail.value.personnelInfo.unitName,
+    deviceId: route.params.deviceId,
+    deviceImei: deviceDetail.value.deviceImei
+  };
+  fullscreenLoading.value = true;
+  api.SendUser(data).then((res) => {
+    console.log(res, 'res');
+    if (res.code === 200) {
+      fullscreenLoading.value = false;
+      proxy?.$modal.msgSuccess(res.msg);
+    } else {
+      fullscreenLoading.value = false;
+      proxy?.$modal.msgError(res.msg);
+    }
+  });
+};
+
+// 发送文本消息
+const sendTextMessage = async () => {
+  if (!deviceDetail.value.sendMsg) {
+    ElMessage.closeAll();
+    proxy?.$modal.msgWarning('发送信息不能为空');
+    return;
+  } else if (deviceDetail.value.sendMsg.length < 2) {
+    ElMessage.closeAll();
+    proxy?.$modal.msgWarning('发送信息字数太少,至少2字,最多18字');
+    return;
+  }
+  let json = {
+    sendMsg: deviceDetail.value.sendMsg,
+    deviceIds: [route.params.deviceId],
+    deviceImeiList: [deviceDetail.value.deviceImei],
+    instructValue: '',
+    batchId: ''
+  };
+
+  api.SendMessage(json).then((res) => {
+    if (res.code === 200) {
+      ElMessage.closeAll();
+      proxy?.$modal.msgSuccess(res.msg);
+    } else {
+      proxy?.$modal.msgError(res.msg);
+    }
+  });
+};
+const lookMap = (row: any) => {
+  console.log(row, 'row');
+  router.push({
+    path: '/controlCenter/controlPanel', // 目标页面的正确路由路径（需与项目路由配置一致）
+    query: {
+      view: 'map',
+      deviceId: row.deviceId // 可选：传递当前设备ID，用于地图定位/筛选
+    }
+  });
+};
+
+function showClose() {
+  Status.confirm.Visible = true;
+  Status.confirm.OkTxt = '关闭';
+  Status.confirm.OkCallback = () => {
+    clearInterval(timer);
+    timer = null;
+    handleModeClick('0', 'sosMode');
+    deviceDetail.value.staSOSGrade = '0';
+
+    Status.timeOut = 0;
+
+    hideConfirm();
+  };
+}
+// 处理设备消息
+const handleDeviceMessage = (payload: any) => {
+  let json = null;
+  try {
+    json = JSON.parse(payload);
+  } catch (ex) {
+    return;
+  }
+
+  let keys = Object.keys(json);
+
+  function parseDataMQ(json) {
+    try {
+      debugger;
+      deviceDetail.value.staDetectGrade = json.sta_DetectGrade;
+      deviceDetail.value.staLightGrade = json.sta_LightGrade;
+      deviceDetail.value.staDetectResult = json.sta_DetectResult;
+      deviceDetail.value.staSOSGrade = json.sta_SOSGrade;
+      deviceDetail.value.sta_ShakeBit = json.sta_ShakeBit;
+      deviceDetail.value.staPowerTime = json.sta_PowerTime;
+      deviceDetail.value.staPowerPercent = json.sta_PowerPercent;
+      deviceDetail.value.longitude = json.sta_longitude;
+      deviceDetail.value.latitude = json.sta_latitude;
+      deviceDetail.value.onlineStatus = 1;
+
+      Status.sosMode = json.sta_SOSGrade;
+      Status.staticPower = json.sta_DetectGrade;
+      Status.lightMode = json.sta_LightGrade;
+      console.log('Status=', Status);
+      console.log('sosModes=', sosModes.value);
+      console.log('sta_SOSGrade=', json.sta_SOSGrade);
+      if (json.sta_PowerPercent < 20) {
+        centerDialogVisible.value = true;
+      }
+
+      if (json.sta_SOSGrade == 1 && json.sta_ShakeBit == 1) {
+        confirm('设备SOS报警、静止预警中');
+        return;
+      }
+      if (json.sta_SOSGrade == 1) {
+        confirm('设备SOS报警中');
+      }
+      if (json.sta_ShakeBit == 1) {
+        confirm('设备静止报警中');
+      }
+    } catch (err) {}
+  }
+
+  if (keys.indexOf('sta_DetectGrade') > -1) {
+    //上报的报文
+    console.log('收到设备上报的数据', payload);
+    parseDataMQ(json);
+  }
+
+  if (keys.indexOf('sta_BreakNews') > -1) {
+    if (json.sta_BreakNews === 'I get it') {
+      confirm('用户已确认收到紧急通知');
+    }
+  }
+};
+onMounted(async () => {
+  await getList(); // 先获取设备信息
+  // 连接mqtt
+  onConnect(async () => {
+    const deviceImei = deviceDetail.value.deviceImei;
+    if (!deviceImei) {
+      return;
+    }
+    try {
+      await subscribe(`A/${deviceImei}`, { qos: 1 });
+      console.log('订阅成功');
+    } catch (err) {
+      console.error('订阅失败（onConnect内）:', err);
+    }
+  });
+  // 2. 注册消息接收回调（核心：处理设备发送的消息）
+  onMessage((msg) => {
+    console.log('收到新消息:', {
+      主题: msg.topic,
+      内容: msg.payload,
+      时间: msg.time,
+      QoS: msg.qos
+    });
+    // 在这里处理消息（根据实际业务逻辑）
+    handleDeviceMessage(msg.payload);
+  });
+  onError((err) => {
+    console.error('MQTT连接失败原因:', err.message); // 关键：打印连接失败的具体原因
+  });
+  connect();
+});
+onUnmounted(() => {
+  // 只有当连接已建立时，才执行断开操作（避免无效调用）
+  if (connected.value) {
+    console.log('页面离开，断开MQTT连接');
+    disconnect(); // 调用断开连接方法
+  }
+});
+
+window.confirm = function (text, OK, cancel, title) {
+  let Cfg = {
+    Visible: true,
+    title: title ? title : '提示',
+    text: text ? text : '此操作不可逆，您确定这样做吗？',
+    OkCallback: () => {
+      Status.confirm.Visible = false;
+      if (OK) {
+        OK();
+      }
+    },
+    showCancel: true,
+    cancelCallback: () => {
+      Status.confirm.Visible = false;
+      if (cancel) {
+        cancel();
+      }
+    },
+    OkTxt: '',
+    cancelTxt: ''
+  };
+
+  Status.confirm = Cfg;
+};
+
+window.ShowConfirm = function (option: any) {
+  let Cfg = {
+    Visible: true,
+    title: option.title ? option.title : '提示',
+    text: option.text ? option.text : '此操作不可逆，您确定这样做吗？',
+    OkCallback: () => {
+      Status.confirm.Visible = false;
+      if (option.OkCallback) {
+        option.OkCallback();
+      }
+    },
+    showCancel: true,
+    cancelCallback: () => {
+      Status.confirm.Visible = false;
+      if (option.cancelCallback) {
+        option.cancelCallback();
+      }
+    },
+    OkTxt: '',
+    cancelTxt: ''
+  };
+
+  Status.confirm = Cfg;
+};
+
+window.hideConfirm = function () {
+  let Cfg = {
+    Visible: false,
+    title: '提示',
+    text: '',
+    cancelCallback: null,
+    OkCallback: null,
+    showCancel: false,
+    OkTxt: '',
+    cancelTxt: ''
+  };
+
+  Status.confirm = Cfg;
+};
+</script>
+<style lang="scss" scoped>
+.p-2 {
+  background: rgba(247, 248, 252, 1);
+  min-height: 100vh;
+  box-sizing: border-box;
+  padding: 15px;
+}
+.device-page {
+  .header-bar {
+    border-radius: 8px;
+    background: linear-gradient(135deg, #3400e7, #009bff);
+    color: white;
+    padding: 20px;
+    margin-bottom: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-weight: 600;
+
+    .device-status {
+      .online {
+        color: #00ff00;
+      }
+
+      .offline {
+        color: rgb(224, 52, 52);
+      }
+    }
+  }
+
+  .content-wrapper {
+    .content-row {
+      margin-bottom: 10px;
+    }
+
+    .content-card {
+      border-radius: 8px;
+      box-shadow: 0 2px 12px rgba(0, 34, 96, 0.1);
+      background: white;
+      padding: 0px 20px 50px;
+      border: 1px solid #ebeef5;
+      height: 289px;
+      position: relative;
+    }
+
+    .content-card_gps {
+      border-radius: 8px;
+      box-shadow: 0 2px 12px rgba(0, 34, 96, 0.1);
+      background: white;
+      padding: 0px 20px 50px;
+      border: 1px solid #ebeef5;
+      height: 100%;
+    }
+
+    .section-title {
+      font-size: 16px;
+      font-weight: 600;
+      margin-bottom: 20px;
+      color: #303133;
+    }
+
+    .light-mode {
+      display: flex;
+
+      justify-content: space-between;
+    }
+
+    .lacatin_gps {
+      height: 70px;
+      border-radius: 4px;
+      background: rgba(247, 248, 252, 1);
+      display: inline-block;
+      width: 400px;
+      padding: 10px;
+    }
+
+    .mode-card {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 15px;
+      border: 1px solid #dcdfe6;
+      border-radius: 8px;
+      width: calc(calc(100% - 30px) / 4);
+      cursor: pointer;
+      transition: all 0.3s ease;
+
+      &.active {
+        border-color: #409eff;
+        background-color: rgba(64, 158, 255, 0.05);
+      }
+
+      .mode-icon {
+        width: 48px;
+        margin-bottom: 10px;
+        transition: all 0.3s ease;
+        object-fit: scale-down;
+        height: 50px;
+      }
+
+      .mode-name {
+        font-size: 14px;
+        margin-bottom: 12px;
+        color: #606266;
+      }
+
+      .el-switch {
+        --el-switch-on-color: #409eff;
+        --el-switch-off-color: #dcdfe6;
+      }
+    }
+
+    .brightness-alarm {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 10px;
+
+      .brightness-control {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        border-radius: 39px;
+        box-shadow: 0px 0px 6px 0px rgba(0, 34, 96, 0.1);
+        background: rgba(255, 255, 255, 1);
+        width: 70%;
+        height: 54px;
+        padding: 10px 20px;
+
+        .brightness-label {
+          font-size: 14px;
+          color: #606266;
+          min-width: 70px;
+        }
+
+        .brightness-value {
+          font-size: 14px;
+          color: #409eff;
+          font-weight: 500;
+        }
+
+        .save-btn {
+          padding: 6px 20px;
+          border-radius: 29px;
+          background: rgba(2, 124, 251, 1);
+          border: none;
+        }
+
+        .inputTFT {
+          width: 130px;
+          height: 40px;
+        }
+      }
+
+      .alarm-btn {
+        background-color: rgba(224, 52, 52, 1);
+        border-color: rgba(224, 52, 52, 1);
+        padding: 8px 20px;
+        border-radius: 27px;
+      }
+    }
+
+    .location-info {
+      .location-item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 15px;
+        font-size: 14px;
+        color: #606266;
+
+        .location-icon {
+          margin-right: 8px;
+          font-weight: bold;
+          color: #409eff;
+        }
+
+        .view-btn {
+          margin: 0 8px;
+          padding: 0;
+          font-size: 13px;
+        }
+      }
+    }
+
+    .form-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 15px;
+      margin-bottom: 15px;
+      text-align: right;
+
+      .form-item {
+        display: flex;
+        align-items: center;
+
+        .form-label {
+          min-width: 35px;
+          font-size: 14px;
+          color: #606266;
+          margin-right: 10px;
+        }
+
+        .el-input {
+          flex: 1;
+        }
+      }
+
+      .register-btn {
+        grid-column: 1 / 3;
+        justify-self: start;
+        padding: 6px 20px;
+        position: absolute;
+        right: 19px;
+        bottom: 30px;
+        border-radius: 29px;
+        background: rgba(2, 124, 251, 1);
+        border: none;
+      }
+    }
+
+    .message-content {
+      // display: flex;
+      // flex-direction: column;
+      // gap: 10px;
+
+      .el-textarea {
+        border: 1px solid rgba(29, 111, 255, 1);
+        border-radius: 4px;
+        background: rgba(247, 248, 252, 1);
+        border-radius: 6px;
+        padding: 10px;
+      }
+
+      .el-textarea__inner {
+        background: rgba(247, 248, 252, 1);
+      }
+
+      .send-btn {
+        align-self: flex-end;
+        padding: 10px 20px;
+        border-radius: 29px;
+        background: rgba(2, 124, 251, 1);
+        border: none;
+        margin: 20px 0px 30px 0;
+      }
+    }
+
+    .upload-area {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100px;
+      border: 1px dashed #dcdfe6;
+      border-radius: 6px;
+      cursor: pointer;
+    }
+
+    .video-input {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+
+      .el-input {
+        flex: 1;
+      }
+
+      .save-video-btn {
+        padding: 6px 12px;
+      }
+    }
+  }
+
+  // 响应式调整
+  @media (max-width: 768px) {
+    .header-bar {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 16px;
+    }
+
+    .form-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .form-grid .register-btn {
+      grid-column: 1;
+    }
+
+    .light-mode .mode-group {
+      gap: 10px;
+    }
+
+    .light-mode .mode-item {
+      width: 60px;
+    }
+
+    .light-mode .mode-icon {
+      width: 30px;
+      height: 30px;
+    }
+  }
+}
+
+.path-img {
+  width: 52px;
+  height: 28px;
+}
+
+.staticRwo {
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 34, 96, 0.1);
+  background: white;
+  border: 1px solid #ebeef5;
+  height: auto;
+  line-height: 36px;
+  box-sizing: border-box;
+  text-indent: 15px;
+  color: #ff0000;
+  font-weight: bold;
+  font-size: 17px;
+  margin-bottom: 5px;
+}
+
+.displayNone {
+  display: none !important;
+}
+</style>
diff --git a/src/views/equipmentManagement/deviceType/index.vue b/src/views/equipmentManagement/deviceType/index.vue
index 98c0bab..7ac68f3 100644
--- a/src/views/equipmentManagement/deviceType/index.vue
+++ b/src/views/equipmentManagement/deviceType/index.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="p-2">
-    <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
-      :leave-active-class="proxy?.animate.searchAnimate.leave">
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
       <div v-show="showSearch" class="mb-[10px]">
         <el-card shadow="hover">
           <el-form ref="queryFormRef" :model="queryParams" :inline="true">
@@ -24,14 +23,10 @@
             <el-button type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="success" plain :disabled="single" icon="Edit" @click="handleUpdate()">
-              修改
-            </el-button>
+            <el-button type="success" plain :disabled="single" icon="Edit" @click="handleUpdate()"> 修改 </el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="danger" plain :disabled="multiple" icon="Delete" @click="handleDelete()">
-              删除
-            </el-button>
+            <el-button type="danger" plain :disabled="multiple" icon="Delete" @click="handleDelete()"> 删除 </el-button>
           </el-col>
           <right-toolbar v-model:show-search="showSearch" :search="true" @query-table="getList"></right-toolbar>
         </el-row>
@@ -42,8 +37,7 @@
         <el-table-column label="型号名称" align="center" prop="typeName" />
         <el-table-column label="类型code" align="center" prop="appModelDictionary">
           <template #default="scope">
-            {{appmodelDictionaryOptions.find(item => item.dictValue === String(scope.row.appModelDictionary))?.dictLabel
-            }}
+            {{ appmodelDictionaryOptions.find((item) => item.dictValue === String(scope.row.appModelDictionary))?.dictLabel }}
           </template>
         </el-table-column>
         <el-table-column label="是否支持蓝牙" align="center" prop="isSupportBle">
@@ -81,14 +75,11 @@
           </template>
         </el-table-column>
       </el-table>
-      <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
-        :total="total" @pagination="getList" />
+      <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
     </el-card>
 
-
     <!-- 添加或修改用户配置对话框 -->
-    <el-dialog ref="formDialogRef" v-model="dialog.visible" :title="dialog.title" width="30%" append-to-body
-      @close="closeDialog">
+    <el-dialog ref="formDialogRef" v-model="dialog.visible" :title="dialog.title" width="30%" append-to-body @close="closeDialog">
       <el-form ref="userFormRef" :model="form" :rules="rules" label-width="120px">
         <el-row>
           <el-col :span="24">
@@ -101,14 +92,12 @@
           <el-col :span="24">
             <el-form-item label="路由跳转" prop="appModelDictionary">
               <el-select v-model="form.appModelDictionary" placeholder="请选择" @change="handlePcRouteChange">
-                <el-option v-for="item in appmodelDictionaryOptions" :key="item.dictCode" :label="item.dictLabel"
-                  :value="item.dictValue" />
+                <el-option v-for="item in appmodelDictionaryOptions" :key="item.dictCode" :label="item.dictLabel" :value="item.dictValue" />
               </el-select>
             </el-form-item>
-            <el-form-item label="pc路由跳转" prop="pcModelDictionary" style="display: none;">
+            <el-form-item label="pc路由跳转" prop="pcModelDictionary" style="display: none">
               <el-select v-model="form.pcModelDictionary" placeholder="请选择">
-                <el-option v-for="item in pcmodelDictionaryOptions" :key="item.dictCode" :label="item.dictLabel"
-                  :value="item.dictValue" />
+                <el-option v-for="item in pcmodelDictionaryOptions" :key="item.dictCode" :label="item.dictLabel" :value="item.dictValue" />
               </el-select>
             </el-form-item>
           </el-col>
@@ -147,6 +136,22 @@
             </el-form-item>
           </el-col>
         </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="设备图片" prop="devicePic">
+              <input type="file" id="fileTypeImg" accept="image/*" style="display: none" />
+              <div class="devicePic typeImgContent" v-if="form.devicePic">
+                <img class="img" :src="form.devicePic" />
+                <div class="mask center" @click.stop="DropImg(form)">
+                  <el-icon class="avatar-uploader-icon"><Delete /></el-icon>
+                </div>
+              </div>
+              <div class="devicePic typeImgAdd center" v-else @click.stop="AddImg(form)">
+                <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
+              </div>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
@@ -164,7 +169,23 @@ import { deviceTypeQuery } from '@/api/equipmentManagement/deviceType/types';
 import { getDicts } from '@/api/system/dict/data';
 import { to } from 'await-to-js';
 import { ComponentInternalInstance, getCurrentInstance, onMounted, reactive, ref, toRefs } from 'vue';
-import { ElDialog, ElForm, ElFormItem, ElInput, ElRow, ElCol, ElButton, ElCard, ElSelect, ElOption, ElDatePicker, ElTable, ElTableColumn, ElTooltip, ElSwitch } from 'element-plus';
+import {
+  ElDialog,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElRow,
+  ElCol,
+  ElButton,
+  ElCard,
+  ElSelect,
+  ElOption,
+  ElDatePicker,
+  ElTable,
+  ElTableColumn,
+  ElTooltip,
+  ElSwitch
+} from 'element-plus';
 interface deviceTypeVO {
   id: string | number;
   typeName: string;
@@ -176,9 +197,9 @@ interface deviceTypeVO {
   communicationMode: number;
   createTime: string;
   createByName: string;
+  devicePic: string;
 }
-interface DeviceTypeForm extends deviceTypeVO {
-}
+interface DeviceTypeForm extends deviceTypeVO {}
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const deviceTypeList = ref<deviceTypeVO[]>();
 const loading = ref(true);
@@ -190,9 +211,11 @@ const total = ref(0);
 const queryFormRef = ref<InstanceType<typeof ElForm>>();
 const userFormRef = ref<InstanceType<typeof ElForm>>();
 const formDialogRef = ref<InstanceType<typeof ElDialog>>();
-const loadingIng = ref(false)
+const loadingIng = ref(false);
 const appmodelDictionaryOptions = ref<any[]>([]);
 const pcmodelDictionaryOptions = ref<any[]>([]);
+var fileC = null;
+var uploadFile=false;
 const dialog = reactive<DialogOption>({
   visible: false,
   title: ''
@@ -207,7 +230,7 @@ const initFormData: DeviceTypeForm = {
   communicationMode: 0,
   id: '',
   createTime: '',
-  createByName: '',
+  createByName: ''
 };
 
 const initData = {
@@ -215,28 +238,20 @@ const initData = {
   queryParams: {
     pageNum: 1,
     pageSize: 10,
-    typeName: '',
+    typeName: ''
   },
   rules: {
-    typeName: [
-      { required: true, message: '请输入设备类型名称', trigger: 'blur' },
-    ],
-    appModelDictionary: [
-      { required: true, message: '请选择类型code', trigger: 'blur' },
-    ],
-    locateMode: [
-      { required: true, message: '请选择定位方式', trigger: 'blur' },
-    ],
-    communicationMode: [
-      { required: true, message: '请选择通讯方式', trigger: 'blur' },
-    ],
+    typeName: [{ required: true, message: '请输入设备类型名称', trigger: 'blur' }],
+    appModelDictionary: [{ required: true, message: '请选择类型code', trigger: 'blur' }],
+    locateMode: [{ required: true, message: '请选择定位方式', trigger: 'blur' }],
+    communicationMode: [{ required: true, message: '请选择通讯方式', trigger: 'blur' }]
   }
 };
 
 const data = reactive<{
-  form: DeviceTypeForm,
-  queryParams: deviceTypeQuery,
-  rules: any
+  form: DeviceTypeForm;
+  queryParams: deviceTypeQuery;
+  rules: any;
 }>(initData);
 
 const { queryParams, form, rules } = toRefs(data);
@@ -252,11 +267,11 @@ const getList = async () => {
 const getDict = async () => {
   const res = await getDicts('app_model_dictionary');
   appmodelDictionaryOptions.value = res.data;
-}
+};
 const pcgetDict = async () => {
   const res = await getDicts('pc_model_dictionary');
   pcmodelDictionaryOptions.value = res.data;
-}
+};
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.value.pageNum = 1;
@@ -270,13 +285,9 @@ const resetQuery = () => {
 };
 // PC路由变化时，同步对应APP路由
 const handlePcRouteChange = (pcDictValue: string) => {
-  const selectedPcItem = appmodelDictionaryOptions.value.find(
-    item => item.dictValue === pcDictValue
-  );
+  const selectedPcItem = appmodelDictionaryOptions.value.find((item) => item.dictValue === pcDictValue);
   if (!selectedPcItem) return;
-  const matchedAppItem = pcmodelDictionaryOptions.value.find(
-    item => item.dictLabel === selectedPcItem.dictLabel
-  );
+  const matchedAppItem = pcmodelDictionaryOptions.value.find((item) => item.dictLabel === selectedPcItem.dictLabel);
   if (matchedAppItem) {
     form.value.pcModelDictionary = matchedAppItem.dictValue;
   } else {
@@ -287,13 +298,15 @@ const handlePcRouteChange = (pcDictValue: string) => {
 
 /** 删除按钮操作 */
 const handleDelete = async (row?: deviceTypeVO) => {
-  const deviceTypeIds = row ? [row.id] : ids.value.map(item => item.id);
-  const typeNames = row ? row.typeName : ids.value.map(item => item.typeName).join(',');
-  const [err] = await to(proxy?.$modal.confirm('是否确认删除"' + typeNames + '"的数据项？', '系统提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  }) as any);
+  const deviceTypeIds = row ? [row.id] : ids.value.map((item) => item.id);
+  const typeNames = row ? row.typeName : ids.value.map((item) => item.typeName).join(',');
+  const [err] = await to(
+    proxy?.$modal.confirm('是否确认删除"' + typeNames + '"的数据项？', '系统提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    }) as any
+  );
   if (!err) {
     await api.deleteDeviceType(deviceTypeIds);
     await getList();
@@ -350,7 +363,7 @@ const submitForm = () => {
     if (valid) {
       loadingIng.value = true;
       try {
-        const payload = {
+        let payload = {
           ...form.value,
           appModelDictionary: form.value.appModelDictionary,
           pcModelDictionary: form.value.pcModelDictionary,
@@ -358,7 +371,27 @@ const submitForm = () => {
           locateMode: Number(form.value.locateMode),
           communicationMode: Number(form.value.communicationMode)
         };
-        form.value.id ? await api.updateDeviceType(payload) : await api.addDeviceType(payload);
+        
+         
+
+         let formData = new FormData();
+         let keys=Object.keys(payload);
+         
+         keys.forEach(key=>{
+            if(key!=='devicePic'){
+              if(payload[key]!==null && payload[key]!==undefined){
+                formData.append(key,payload[key]);
+              }
+                
+            }          
+         });
+
+        if(uploadFile && fileC && fileC.files.length){
+            formData.append('file',fileC.files[0]);
+        }
+        
+        //如果要上传文件就用formData,不上传使用payload
+        form.value.id ? await api.updateDeviceType(formData) : await api.addDeviceType(formData);
         proxy?.$modal.msgSuccess('操作成功');
         dialog.visible = false;
         await getList();
@@ -369,6 +402,25 @@ const submitForm = () => {
   });
 };
 
+//删除图片
+function DropImg(item) {
+  ElMessageBox.confirm('删除后不可恢复，您确认要删除吗?', '提醒', {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+      form.value.devicePic = null;
+    })
+    .catch(() => {});
+}
+
+//选择图片
+function AddImg(item) {
+  uploadFile=false;
+  initControl();
+  fileC.click();
+  
+}
 /**
  * 关闭用户弹窗
  */
@@ -386,9 +438,106 @@ const resetForm = () => {
   form.value.id = '';
 };
 
+function initControl() {
+  if (fileC) {
+    fileC.value="";
+    return;
+  }
+
+  fileC = document.getElementById('fileTypeImg');
+  fileC.addEventListener('change', function () {
+    if (this.files.length) {
+      let file = this.files[0];
+      if (file.type.indexOf('image/') === 0) {
+        
+        let reader = new FileReader();
+
+        reader.onload = function (e) {    
+          uploadFile=true;      
+          form.value.devicePic = e.target.result;
+        };
+
+        reader.onerror = function () {
+          console.log('读取文件失败！');
+        };
+
+        reader.readAsDataURL(file);
+      } else {
+        // form.value.devicePic = null;
+      }
+    } else {
+      // form.value.devicePic = null;
+    }
+  });
+}
+
 onMounted(() => {
   getList(); // 初始化列表数据
   getDict();
-  pcgetDict() //pc跳转
+  pcgetDict(); //pc跳转
 });
 </script>
+
+<style>
+.devicePic {
+  width: 120px;
+  height: 120px;
+  border-radius: 6px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.typeImgContent {
+  background-color: #ffffff;
+  border: 1px solid rgb(220, 223, 230);
+  position: relative;
+
+}
+
+.typeImgContent .img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  z-index: 0;
+  padding: 10px;
+}
+
+.center {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+}
+
+.typeImgAdd {
+  background-color: #fafafa;
+  border: 1px dashed rgb(205, 208, 214);
+  font-size: 30px;
+
+  cursor: pointer;
+}
+
+.mask {
+  background-color: #1c1c1c80;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  z-index: 1;
+  width: 0px;
+  height: 0px;
+  cursor: pointer;
+  overflow: hidden;
+  color: #ff0000;
+  font-size: 25px;
+}
+
+.typeImgContent:hover .mask {
+  width: 100%;
+  height: 100%;
+}
+</style>