perf(components): 优化“设备详情”详细信息显示

src/views/equipment-details/EquipmentDetails.vue

@@ -37,6 +37,10 @@ interface EquipmentDetailsItem {
   phone: string;
   serviceLife?: number;
   remarks: string;
+  mountedPosition: string;
+  mainTechData: string;
+  deviceNum: string;
+  productionNum: string;
 }
 
 const columns = [
@@ -196,6 +200,10 @@ const equipmentDetailsItem = ref<EquipmentDetailsItem>({
   phone: '',
   serviceLife: undefined,
   remarks: '',
+  mountedPosition: '',
+  mainTechData: '',
+  deviceNum: '',
+  productionNum: '',
 });
 
 const colorShow = (value: number | string) => {
@@ -282,6 +290,10 @@ const obtainDeviceDetails = () => {
       phone,
       serviceLife,
       remarks,
+      mountedPosition,
+      mainTechData,
+      deviceNum,
+      productionNum,
     } = deviceQueryVo;
     equipmentDetailsItem.value = {
       deviceName,
@@ -306,6 +318,10 @@ const obtainDeviceDetails = () => {
       phone,
       serviceLife,
       remarks,
+      mountedPosition,
+      mainTechData,
+      deviceNum,
+      productionNum,
     };
     if (gatewayInfoVos.length) {
       gatewayList.value = gatewayInfoVos;
@@ -334,6 +350,14 @@ const obtainDeviceDetails = () => {
   });
 };
 
+const exceptionalReturn = (value: string | number | undefined) => {
+  if (value) {
+    return value;
+  } else {
+    return '-';
+  }
+};
+
 watch(
   () => route.params.id,
   () => {
@@ -365,7 +389,7 @@ onMounted(() => {
           placeholder="请选择"
           @change="selectDeviceId"
         />
-        <AButton class="default-button previous" @click="switchDevices(1)">上一个</AButton>
+        <AButton class="previous default-button" @click="switchDevices(1)">上一个</AButton>
         <AButton class="default-button" @click="switchDevices(2)">下一个</AButton>
       </div>
     </AFlex>
@@ -509,36 +533,72 @@ onMounted(() => {
         </ACol>
         <ACol :span="6">
           <span
-            >出厂日期:<span class="details-content-color">{{ equipmentDetailsItem.productionDate }}</span>
+            >出厂日期:<span class="details-content-color">{{
+              equipmentDetailsItem.productionDate ? equipmentDetailsItem.productionDate : '-'
+            }}</span>
+          </span>
+        </ACol>
+      </ARow>
+      <ARow class="detailed-information details-text">
+        <ACol :span="6">
+          <span
+            >出厂编号:
+            <span class="details-content-color">
+              {{ exceptionalReturn(equipmentDetailsItem.productionNum) }}</span
+            ></span
+          >
+        </ACol>
+        <ACol :span="6">
+          <span
+            >设备编号:
+            <span class="details-content-color">{{ exceptionalReturn(equipmentDetailsItem.deviceNum) }}</span>
+          </span>
+        </ACol>
+        <ACol :span="6">
+          <span>
+            主要技术参数:<span class="details-content-color">{{
+              exceptionalReturn(equipmentDetailsItem.mainTechData)
+            }}</span>
+          </span>
+        </ACol>
+        <ACol :span="6">
+          <span
+            >安装位置:<span class="details-content-color">{{
+              exceptionalReturn(equipmentDetailsItem.mountedPosition)
+            }}</span>
           </span>
         </ACol>
       </ARow>
       <ARow class="detailed-information details-text">
         <ACol :span="6">
           <span
-            >使用部门: <span class="details-content-color">{{ equipmentDetailsItem.department }}</span></span
+            >使用部门:
+            <span class="details-content-color">{{ exceptionalReturn(equipmentDetailsItem.department) }}</span></span
           >
         </ACol>
         <ACol :span="6">
           <span
-            >负责人: <span class="details-content-color">{{ equipmentDetailsItem.respPerson }}</span>
+            >负责人: <span class="details-content-color">{{ exceptionalReturn(equipmentDetailsItem.respPerson) }}</span>
           </span>
         </ACol>
         <ACol :span="6">
           <span>
-            联系电话:<span class="details-content-color">{{ equipmentDetailsItem.phone }}</span>
+            联系电话:<span class="details-content-color">{{ exceptionalReturn(equipmentDetailsItem.phone) }}</span>
           </span>
         </ACol>
         <ACol :span="6">
           <span>
-            使用年限 (年):<span class="details-content-color">{{ equipmentDetailsItem.serviceLife }}</span>
+            使用年限 (年):<span class="details-content-color">{{
+              exceptionalReturn(equipmentDetailsItem.serviceLife)
+            }}</span>
           </span>
         </ACol>
       </ARow>
       <ARow class="detailed-information details-text">
         <ACol :span="6">
           <span
-            >备注: <span class="details-content-color">{{ equipmentDetailsItem.remarks }}</span></span
+            >备注:
+            <span class="details-content-color">{{ exceptionalReturn(equipmentDetailsItem.remarks) }}</span></span
           >
         </ACol>
       </ARow>