<!-- 机巢列表详情 -->
|
<template>
|
<el-dialog
|
modal-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>
|
</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 { 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' },
|
])
|
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(() => {
|
})
|
</script>
|
|
<style lang="scss">
|
.machineTableDetails {
|
.el-pagination {
|
text-align: left;
|
padding: 20px;
|
}
|
}
|
</style>
|
|
<style lang="scss" scoped>
|
.infoBox {
|
display: grid;
|
grid-template-columns: repeat(3, 1fr);
|
gap: 10px; // 列之间的间距
|
padding: 10px;
|
|
.itemBox {
|
background-color: #fff;
|
border: 1px solid #ddd;
|
border-radius: 4px;
|
padding: 15px;
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
}
|
|
.itemTitle {
|
font-weight: bold;
|
color: #333;
|
}
|
|
.itemValue {
|
margin-top: 5px;
|
color: #666;
|
}
|
}
|
</style>
|
