设备管理调整

src/api/iot/device/index.ts

@@ -27,6 +27,7 @@ export interface DeviceVO {
   certificate?: string // 证书
   secretKey?: string // 秘钥
   collectionTime?: string | number
+  images: string,//图片
 }
 
 export interface DeviceConnectParams {

src/views/iot/device/DeviceForm.vue

@@ -43,6 +43,9 @@
             <el-option v-for="item in modelList" :key="item.id" :label="item.name" :value="item.id" />
           </el-select>
         </el-form-item>
+        <el-form-item :label="t('EquipmentManagement.EquipmentLedger.images')" prop="images">
+          <UploadImg style="height: 100px"  v-model="formData.images" />
+        </el-form-item>
       </template>
       <!-- <el-form-item label="设备类型" prop="deviceType">
         <el-select v-model="formData.deviceType" placeholder="请选择设备类型">
@@ -134,6 +137,7 @@ const formData = ref({
   username: undefined,
   password: undefined,
   topic: undefined,
+  images: undefined,
 })
 const formRules = reactive({
   create: {
@@ -188,7 +192,7 @@ const submitForm = async () => {
   // 提交请求
   formLoading.value = true
   try {
-    const { id, deviceCode, deviceName, deviceModelId, sampleCycle, remark, isEnable, topic } = formData.value as any
+    const { id, deviceCode, deviceName, deviceModelId, sampleCycle, remark, isEnable, topic,images } = formData.value as any
 
     if (formType.value === 'create') {
       const data: Partial<DeviceVO> = {
@@ -197,16 +201,17 @@ const submitForm = async () => {
         deviceModelId,
         sampleCycle,
         remark,
-        isEnable: false
+        isEnable: false,
+        images
       }
       await DeviceApi.createDevice(data as DeviceVO)
       message.success(t('common.createSuccess'))
     } else if (formType.value === 'update') {
-      const data: any = { id, deviceCode, deviceName, deviceModelId, sampleCycle, isEnable }
+      const data: any = { id, deviceCode, deviceName, deviceModelId, sampleCycle, isEnable,images}
       await DeviceApi.updateDevice(data)
       message.success(t('common.updateSuccess'))
     } else {
-      const data: any = { id, deviceCode, deviceName, deviceModelId, isEnable, topic }
+      const data: any = { id, deviceCode, deviceName, deviceModelId, isEnable, topic,images}
       await DeviceApi.updateDevice(data)
       message.success(t('common.updateSuccess'))
     }
@@ -246,3 +251,17 @@ const resetForm = () => {
 
 /** 初始化 **/
 </script>
+<style  scoped>
+:deep(.upload-box[data-v-57417a1d] .upload .el-upload .el-upload-dragger ){
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 70%;
+  height: 70%;
+  padding: 0;
+  overflow: hidden;
+  background-color: transparent;
+  border: 1px dashed var(--el-border-color-darker);
+  border-radius: var(--57417a1d-borderradius);
+}
+</style>

src/views/iot/device/index.vue

@@ -210,8 +210,17 @@
 
           <div class="device-card">
             <div class="header">
-              <div class="device-icon">
-                <i>📊</i>
+              <div class="device-icon" @click.stop>
+<!--                <i>📊</i>-->
+                <el-image
+                  style="width: 60px; height: 60px"
+                  :src="item.images || 'https://p119-minio-upload.ngsk.tech:7001/besure/998a6fc5d7da4ad079cc5afaa1ca5293917c17080c9805dc791039d3534e9dba.jpeg'"
+                  :preview-src-list="[
+                  item.images || 'https://p119-minio-upload.ngsk.tech:7001/besure/998a6fc5d7da4ad079cc5afaa1ca5293917c17080c9805dc791039d3534e9dba.jpeg'
+                  ]"
+                  fit="cover"
+                  preview-teleported
+                />               <!-- <img src="@/assets/images/device.png" alt="Device Icon" />-->
               </div>
               <div class="device-info">
                 <div class="device-name">{{ item.deviceName }}</div>
@@ -320,7 +329,7 @@
   </ContentWrap>
 
   <!-- 表单弹窗：添加/修改 -->
-  <DeviceForm ref="formRef" @success="getList" />
+  <DeviceForm ref="formRef" @success="getListOne" />
   <!-- 子表的列表 -->
 <!--  <ContentWrap v-if="ifShow">
     <template v-if="attributeDeviceId">
@@ -836,6 +845,9 @@ import DetailForm from "@/views/iot/device/detailForm.vue";
 import {ProductUnitApi, ProductUnitVO} from "@/api/erp/product/unit";
 const ifShow =ref(true)
 const currentView = ref('table') // 'table' 或 'grid'
+// 在 script setup 中
+const noImageUrl =
+  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHZpZXdCb3g9IjAgMCA4MCA4MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iODAiIGhlaWdodD0iODAiIGZpbGw9IiNFOUVDRUYiLz48dGV4dCB4PSI0MCIgeT0iNDUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZpbGw9IiM5OTkiIGZvbnQtc2l6ZT0iMTQiPuWbvueJh+WKoOi9veWksei0pTwvdGV4dD48L3N2Zz4='
 // 路由
 const router = useRouter()
 // 查看详情
@@ -1004,6 +1016,22 @@ const getList = async (showLoading = true) => {
   }
 }
 
+/** 查询列表 */
+const getListOne = async (showLoading = true) => {
+  if (showLoading) {
+    loading.value = true
+  }
+  try {
+    const data = await DeviceApi.getDevicePage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    if (showLoading) {
+      loading.value = false
+    }
+  }
+}
+
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.pageNo = 1
@@ -2114,17 +2142,30 @@ const handleShowDeviceAlarmHistory = async () => {
 }
 
 .device-icon {
-  width: 40px;
+  /*width: 40px;
   height: 40px;
   background-color: #f0f7ff;
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-right: 12px;
+  margin-right: 12px;*/
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 60px;
+  height: 60px;
+  background-color: #f0f7ff;
+  border-radius: 8px;
+  overflow: hidden;
+
+  .el-image {
+    cursor: pointer;
+  }
 }
 
 .device-info {
+  margin-left: 6px;
   flex: 1;
 }