Merge branch 'master' of http://139.196.74.78:10010/r/drone/command-center-...

chenyao

2025-04-12 aef47a5501223c8d4c0bc6412a9a3d971e664225

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

@@ -1,85 +1,198 @@
<!-- 机巢列表详情 -->
<template>
   <el-dialog
      modal-class="machineTableDetails"
      class="machineTableDetails"
      v-model="isShowDetails"
      title="机巢详情"
      :width="pxToRem(1500)"
      :close-on-click-modal="false"
      :destroy-on-close="true"
   >
      <el-divider content-position="left">详情</el-divider>
      <div class="infoBox">
         <div class="itemBox" v-for="item in infoList">
            <div class="itemTitle">{{ item.name }}:</div>
            <div class="itemValue">{{ item.value }}</div>
      <template #header="{ titleId, titleClass }">
         <div class="my-header">
            <img src="/src/assets/images/home/homeLeft/inspection-union.png" alt="" />
            <span :id="titleId" :class="titleClass">机巢详情</span>
         </div>
      </template>
      <div class="machineTableDetailsblock">
         <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="{
                     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>
         </div>
      </div>
      <DeviceJob v-if="isShowDetails" />
      <DeviceEvent v-if="isShowDetails" />
   </el-dialog>

</template>

<script setup>
import DeviceEvent from '@/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceEvent.vue'
import DeviceJob from '@/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJob.vue'
import { pxToRem } from '@/utils/rem';
import { pxToRem } from '@/utils/rem'
import { useStore } from 'vuex'

const isShowDetails = defineModel('show')

const infoList = ref([
   { name: '机巢名称', value: '',field:'nickname' },
   { name: '机巢所属地区', value: '',field:'device_area' },
   { name: '机巢状态', value: '',field:'status' },
   { name: '任务成功', value: '',field:'result_num' },
   { name: '机巢位置', value: '',field:'address' },
   { name: '机巢名称', value: '', field: 'nickname' },
   { name: '机巢所属地区', value: '', field: 'device_area' },
   { name: '任务成果', value: '', field: 'result_num' },
   { name: '机巢位置', value: '', field: 'address' },
   { name: '机巢状态', value: '', field: 'status' },
])
const store = useStore();
const singleTotal = computed(() => store.state.home.singleTotal);
watch(singleTotal, (val) => {
   if (val?.device_info){
const store = useStore()
const singleTotal = computed(() => store.state.home.singleTotal)
watch(singleTotal, val => {
   if (val?.device_info) {
      infoList.value.forEach(item => {
         item.value = val.device_info?.[item.field] || ''
      })
   }
})
onMounted(() => {
})
onMounted(() => {})
</script>

<style lang="scss">
.machineTableDetails {
   height: 1002px;
   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;
   }
   .my-header {
      display: inline-block;
      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: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 10px; // 列之间的间距
   padding: 10px;

   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 24px;
   font-size: 14px;
   color: #ffffff;
   .itemBox {
      background-color: #fff;
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 15px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      display: flex;
      align-items: center;
   }

   .itemTitle {
      font-weight: bold;
      color: #333;
   .flystatus {
      width: 53px;
      height: 27px;
      background: #042c53;
      border-radius: 0px 0px 0px 0px;
      border: 1px solid #1b94ff;
   }
}

   .itemValue {
      margin-top: 5px;
      color: #666;
// 详情
.machineTableDetailsblock {
   margin: 0 24px;
}
.machineTableDetailsTitle {
   margin-bottom: 16px;
   background: url('/src/assets/images/signMachineNest/machineRight/detailtitle.png') no-repeat center;
   background-size: 100% 100%;
   span {
      display: inline-block;
      margin-left: 30px;
      font-size: 16px;
      color: #ddf0ff;
      line-height: 20px;
      text-align: left;
      margin-bottom: 8px;
   }
}
// 离线中
.offine {
   width: 53px;
   height: 27px;
   background: #042c53;
   border-radius: 0px 0px 0px 0px;
   border: 1px solid #1b94ff;
   text-align: center;
   line-height: 27px;
   font-size: 14px;
   color: #1b94ff;
}
// 空闲中
.freetime {
   width: 53px;
   height: 27px;
   text-align: center;
   line-height: 27px;
   font-size: 14px;
   color: #8effac;
   background: rgba(142, 255, 172, 0.14);
   border-radius: 0px 0px 0px 0px;
   border: 1px solid #8effac;
}
.active {
   color: #04f020;
}
</style>