96 lines
2.9 KiB
Vue
96 lines
2.9 KiB
Vue
<template>
|
|
<div class="check-div">
|
|
<div class="device-list">
|
|
<div v-for="(item, index) of deviceList" :key="index">
|
|
<el-icon size="60" color="#1890ff" v-if="index == 0">
|
|
<Suitcase />
|
|
</el-icon>
|
|
<el-icon size="60" color="#1890ff" v-if="index == 1">
|
|
<TakeawayBox />
|
|
</el-icon>
|
|
<el-icon size="60" color="#1890ff" v-if="index == 2">
|
|
<Box />
|
|
</el-icon>
|
|
<font class="num" :style="{ 'color': item.color }">{{ item.num }}</font>
|
|
<span>{{ item.name }}</span>
|
|
</div>
|
|
</div>
|
|
<el-table :data="checkArr" border style="width: 100%" height="320">
|
|
<el-table-column label="序号" width="60" type="index" align="center"></el-table-column>
|
|
<el-table-column prop="name" label="设备名称" align="center" />
|
|
<el-table-column prop="isPass" label="巡检结果" align="center">
|
|
<template #default="scope">
|
|
<span :style="{ 'color': scope.row.isPass ? '#0dbc79' : '#e03528' }">{{ scope.row.isPass ? '通过' : '不通过'
|
|
}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="巡检时间" align="center">
|
|
<template #default="scope">
|
|
{{ scope.row.isPass ? '2023-12-23' : '2023-01-11' }}
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import bimStore from '@/store/modules/bim';
|
|
import IconBy from '@/assets/images/icon-by.png';
|
|
import IconWx from '@/assets/images/icon-wx.png';
|
|
import IconXj from '@/assets/images/icon-xj.png';
|
|
import IconPd from '@/assets/images/icon-pd.png';
|
|
import { computed } from 'vue';
|
|
const deviceList = [
|
|
{
|
|
name: '巡检总数',
|
|
num: '4',
|
|
color: '#fff',
|
|
imgUrl: IconPd,
|
|
icon: 'Suitcase'
|
|
},
|
|
{
|
|
name: '通过数',
|
|
num: '2',
|
|
color: '#fff',
|
|
imgUrl: IconWx,
|
|
icon: 'TakeawayBox'
|
|
},
|
|
{
|
|
name: '未通过数',
|
|
num: '2',
|
|
color: '#fff',
|
|
imgUrl: IconXj,
|
|
icon: 'Box'
|
|
}
|
|
]
|
|
const checkArr = computed(() =>
|
|
bimStore().checkArr
|
|
);
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.check-div {
|
|
.device-list {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
border: 1px solid #2E6099;
|
|
margin-bottom: 15px;
|
|
border-radius: 4px;
|
|
|
|
>div {
|
|
width: 24%;
|
|
height: 80%;
|
|
// border: 1px solid red;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 10px 0;
|
|
color: #fff;
|
|
|
|
.num {
|
|
font-size: 36px;
|
|
}
|
|
}
|
|
}
|
|
}</style> |