feat: 机巢详情调整

张含笑

2025-04-14 2c58e763fd1e7dc9863e862d22fe61dc6778ca54

 src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/MachineTableDetails.vue

@@ -1,12 +1,11 @@
<!-- 机巢列表详情 -->
<template>
   <el-dialog
      class="machineTableDetails"
      class="machineTableDetails ztzf-dialog"
      v-model="isShowDetails"
      :width="pxToRem(1500)"
      :close-on-click-modal="false"
      :destroy-on-close="true"
		
   >
      <template #header="{ titleId, titleClass }">
         <div class="my-header">
@@ -18,25 +17,28 @@
         <div class="machineTableDetailsTitle"><span>详情</span></div>
         <div class="infoBox">
            <div class="itemBox" v-for="(item, index) in infoList" :key="index">
               <div class="itemTitle">{{ item.name }} : </div>
               <div class="itemTitle">{{ item.name }} :</div>
               <div v-if="item.name == '任务成果'" class="missionOutcomes">
                  <span>{{item.value ? item.value :0}}</span>
                  个
               </div>
               <div
                  v-if="item.name == '机巢状态'"
                  :class="{
                     active: item.value === 'WORKING',
                     freetime: item.value === 'LEISURE',
                     offine: item.value === 'OFFLINE',
                  }"
                  v-if="item.name == '机巢状态'"
               >
                  {{ item.value === 'OFFLINE' ? '离线中' : item.value === 'WORKING' ? '作业中' : '空闲中' }}
               </div>
               <div class="itemValue" v-else> {{ item.value }}</div>
               <div class="itemValue" v-else>{{ item.value }}</div>
            </div>
         </div>
      </div>
      <DeviceJob v-if="isShowDetails" />
      <DeviceEvent v-if="isShowDetails" />
   </el-dialog>

</template>

<script setup>
@@ -68,22 +70,9 @@

<style lang="scss">
.machineTableDetails {
width: 1270px;
   width: 1270px;
   height: 856px;
   background: #0f1929;
   box-shadow: inset 0px -50px 50px 0px rgba(27, 148, 255, 0.13);
   border-radius: 20px 0px 0px 0px;
   border: 2px solid;
   padding: 0 !important;

   border-image: linear-gradient(
         180deg,
         rgba(81, 168, 255, 0),
         rgba(48, 111, 202, 1),
         rgba(255, 255, 255, 1),
         rgba(27, 148, 255, 1)
      )
      2 2;
   .el-pagination {
      text-align: left;
      padding: 20px 20px 0 20px;
@@ -93,46 +82,10 @@
      vertical-align: middle;
      margin-left: 12px;
   }

   /* 头部 */
   .el-dialog__header {
      width: 1270px;
      height: 47px;
      margin-bottom: 14px;
      background: url('/src/assets/images/home/homeLeft/inspection-vector.png') no-repeat center;
      background-size: 100% 100%;
      font-weight: bold;
      font-size: 16px;
      line-height: 47px;
   }

   .el-dialog .el-dialog__header {
      /* margin: 0px !important; */
      padding: 0px !important;
      padding-left: 0px !important;
   }
   /* 头部 */
   .el-dialog__title {
      width: 112px;
      height: 19px;
      font-family: Segoe UI, Segoe UI;
      font-weight: bold;
      font-size: 16px;
      line-height: 16px;
      text-shadow: 0px 0px 5px rgba(154, 218, 255, 0.6);
      text-align: left;
      font-style: normal;
      text-transform: none;
      background: linear-gradient(90deg, #fbfdff 0%, #86d4ff 100%);
      margin-left: 16px;
      -webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */
      -webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */
   }
}
</style>

<style lang="scss" scoped>

.infoBox {
   display: flex;
   justify-content: space-between;
@@ -144,7 +97,7 @@
      display: flex;
      align-items: center;
      .itemTitle {
      margin-right: 5px;
         margin-right: 5px;
      }
   }

@@ -175,6 +128,13 @@
      margin-bottom: 8px;
   }
}
.missionOutcomes {
   span {
      color: #ffa500;
      font-size: 14px;
      font-weight: bold;
   }
}
// 离线中
.offine {
   width: 53px;