<!-- 机巢列表详情 -->
|
<template>
|
<el-dialog
|
class="machineTableDetails"
|
v-model="isShowDetails"
|
:width="pxToRem(1500)"
|
:close-on-click-modal="false"
|
:destroy-on-close="true"
|
|
>
|
<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 { useStore } from 'vuex'
|
|
const isShowDetails = defineModel('show')
|
|
const infoList = ref([
|
{ 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) {
|
infoList.value.forEach(item => {
|
item.value = val.device_info?.[item.field] || ''
|
})
|
}
|
})
|
onMounted(() => {})
|
</script>
|
|
<style lang="scss">
|
.machineTableDetails {
|
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;
|
}
|
.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: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 14px;
|
font-size: 14px;
|
color: #ffffff;
|
.itemBox {
|
display: flex;
|
align-items: center;
|
.itemTitle {
|
margin-right: 5px;
|
}
|
}
|
|
.flystatus {
|
width: 53px;
|
height: 27px;
|
background: #042c53;
|
border-radius: 0px 0px 0px 0px;
|
border: 1px solid #1b94ff;
|
}
|
}
|
|
// 详情
|
.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>
|
