<template>
|
<!-- <el-card shadow="hover"> -->
|
<div :class="statusClass + ' wrapper'">
|
<div>
|
<!-- <el-text>{{ item.displayid }}、</el-text> -->
|
<el-text tag="b" class="text-line-2">
|
{{ item.displayid + '、' + item.sensename }}
|
</el-text>
|
</div>
|
<div>
|
<el-text truncated class="w-250px" type="info">
|
<el-icon><LocationInformation /></el-icon>
|
{{ item.scene.location }}
|
</el-text>
|
</div>
|
<el-row justify="space-between" style="margin-top: 4px">
|
<el-space>
|
<el-tag
|
v-if="item.extension1 == '1'"
|
type="success"
|
effect="plain"
|
size="small"
|
>
|
<el-icon :size="8"><Select /></el-icon>
|
<span>已监管</span>
|
</el-tag>
|
<el-tag
|
v-else-if="!item.extension1 || item.extension1 == '0'"
|
type="danger"
|
effect="plain"
|
size="small"
|
>
|
<el-icon :size="8"><CloseBold /></el-icon>
|
<span>未监管</span>
|
</el-tag>
|
<el-tag v-else type="primary" effect="plain" size="small">
|
<el-icon :size="8"><Select /></el-icon>
|
<span>已复核</span>
|
</el-tag>
|
<!-- <el-tag type="info" effect="plain" size="small">
|
{{ item.sceneType }}
|
</el-tag> -->
|
<el-space>
|
<el-tag type="info" size="small">
|
计划：{{ item.monitornum }}次
|
</el-tag>
|
<el-tag type="info" size="small">
|
监管：{{ item.extension1 ? item.extension1 : '0' }}次
|
</el-tag>
|
</el-space>
|
</el-space>
|
<slot :item="item"></slot>
|
<!-- <el-button size="small" type="success" @click="add">添加</el-button> -->
|
</el-row>
|
</div>
|
<!-- </el-card> -->
|
</template>
|
<script setup>
|
/**
|
* 监管对象
|
*/
|
import { computed } from 'vue';
|
|
const props = defineProps({
|
item: {
|
type: Object,
|
default: () => {}
|
}
|
});
|
|
const emit = defineEmits(['add']);
|
|
const statusClass = computed(() => {
|
if (!props.item.extension1 || props.item.extension1 == '0') {
|
return 'border-bottom-danger';
|
} else if (props.item.extension1 == '1') {
|
return 'border-bottom-success';
|
} else {
|
return 'border-bottom-primary';
|
}
|
});
|
|
function add() {
|
emit('add', props.item);
|
}
|
</script>
|
<style scoped>
|
.wrapper {
|
width: 300px;
|
border: 1px solid var(--el-border-color);
|
border-radius: var(--el-border-radius-base);
|
padding: 4px 8px;
|
box-shadow: var(--el-box-shadow-light);
|
}
|
|
.text-line-2 {
|
width: 300px;
|
height: 40px;
|
display: -webkit-box;
|
line-clamp: 2;
|
-webkit-line-clamp: 2;
|
-webkit-box-orient: vertical;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
.border-bottom-success {
|
border-left: 3px solid var(--el-color-success);
|
}
|
|
.border-bottom-danger {
|
border-left: 3px solid var(--el-color-danger);
|
}
|
|
.border-bottom-primary {
|
border-left: 3px solid var(--el-color-primary);
|
}
|
</style>
|
