refactor: 重构设备卡片布局和代码格式

src/views/equipmentOperationMonitoring/index.vue

@@ -68,8 +68,13 @@
                   style="width: 280px"
                 >
                 </el-input>
-                 <DeptSelect v-model="postId"   placeholder="使用单位" style="width: 280px" @input="selectChange" />
-               
+                <DeptSelect
+                  v-model="postId"
+                  placeholder="使用单位"
+                  style="width: 280px"
+                  @input="selectChange"
+                />
+
                 <el-button type="primary" @click="handleSearch">搜索</el-button>
                 <el-button @click="handleReset">重置</el-button>
               </div>
@@ -97,23 +102,29 @@
                     @click="details(item)"
                   >
                     <div class="card-header">
-                      <div class="device-name">{{
-                        item.name + '/' + item.code
-                      }}</div>
-                      <div class="card-actions">
-                        <el-tag
-                          :type="getStatusType(item.status, 1)"
-                          size="small"
-                          effect="dark"
-                          class="status-tag"
-                        >
+                      <div>{{item.postName|}}</div>
+                      <div class="card-header-value">
+                        <div class="device-name">
                           {{
-                            businessStatus.filter(
-                              (row) => row.code == item.status
-                            )[0]?.label
+                            item.name +
+                            (item.codeNumber ? '-' + item.codeNumber : '')
                           }}
-                        </el-tag>
-                      </div>
+                        </div>
+                        <div class="card-actions">
+                          <el-tag
+                            :type="getStatusType(item.status, 1)"
+                            size="small"
+                            effect="dark"
+                            class="status-tag"
+                          >
+                            {{
+                              businessStatus.filter(
+                                (row) => row.code == item.status
+                              )[0]?.label
+                            }}
+                          </el-tag>
+                        </div></div
+                      >
                     </div>
                     <div class="card-body">
                       <el-tag
@@ -184,7 +195,7 @@
           deviceStatus: ''
         },
         businessStatus,
-postId:'',
+        postId: '',
         // 当前激活的标签页
         activeTab: 'org',
         // 更新时间
@@ -281,7 +292,7 @@ postId:'',
           rootCategoryLevelId: this.rootCategoryLevelId,
           areaId: this.areaId,
           keyWord: this.keyWord,
-          postId:this.postId
+          postId: this.postId
         }).then((res) => {
           this.updateTime = dayjs().format('YYYY-M-D HH:mm:ss');
           this.deviceData = res.list.map((item) => {
@@ -368,7 +379,7 @@ postId:'',
       // 重置
       handleReset() {
         this.name = '';
-        this.postId=''
+        this.postId = '';
         this.pageNum = 1;
         this.loadDeviceData();
       },
@@ -684,7 +695,7 @@ postId:'',
         padding-right: 10px;
 
         .device-card {
-          height: 160px;
+          height: 170px;
           background: linear-gradient(
             145deg,
             rgba(30, 34, 50, 0.9) 0%,
@@ -721,18 +732,23 @@ postId:'',
           }
 
           .card-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 12px;
-            padding-bottom: 12px;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            height: 60px;
+               color: rgba(255, 255, 255, 0.9);
+            .card-header-value {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              // margin-bottom: 12px;
+              padding-bottom: 12px;
+              border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            }
 
             .device-name {
               font-size: 14px;
               font-weight: 500;
               color: rgba(255, 255, 255, 0.9);
               flex: 1;
+              display: flex;
               overflow: hidden;
               text-overflow: ellipsis;
               white-space: nowrap;