<template>
|
<div class="wrapper">
|
<el-row justify="space-between" class="m-t-4">
|
<el-col :span="20">
|
<div class="text-title">
|
<el-tag
|
size="small"
|
:type="statusType.type"
|
effect="plain"
|
class="m-r-4 m-b-4"
|
>
|
<el-space :size="4">
|
<el-icon size="16">
|
<component :is="statusType.icon"></component>
|
</el-icon>
|
{{ item.status }}
|
</el-space>
|
</el-tag>
|
{{ item.name }}
|
</div>
|
<div class="text-info">
|
<div class="text-label">
|
<el-icon class="m-r-4" size="16"><LocationInformation /></el-icon>
|
<span>任务地址：</span>
|
</div>
|
{{ item.scenseaddress }}
|
</div>
|
<div class="text-info">
|
<div class="text-label">
|
<!-- <el-icon><Clock /></el-icon> -->
|
<el-icon class="m-r-4" size="16"><AlarmClock /></el-icon>
|
<span>任务时间：</span>
|
</div>
|
{{ $fm.formatYMD(item.planstarttime) }}
|
</div>
|
<div class="text-info">
|
<div class="text-label">
|
<el-icon class="m-r-4" size="16"><User /></el-icon>
|
任务人员：
|
</div>
|
{{ item.executorrealtimes }}
|
</div>
|
<el-space class="m-t-4">
|
<el-tag size="small" type="info" effect=""
|
>问题：{{ status.proNum }}</el-tag
|
>
|
<el-tag size="small" type="info" effect=""
|
>整改：{{ status.changeNum }}</el-tag
|
>
|
<el-tag size="small" :type="changePerType" effect=""
|
>整改率：{{ status.changePer }}</el-tag
|
>
|
</el-space>
|
</el-col>
|
<el-col :span="4">
|
<slot :item="item"></slot>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
<script setup>
|
import { ref, watch, computed } from 'vue';
|
import problemApi from '@/api/fysp/problemApi';
|
import ProCheckProxy from '@/views/fysp/check/ProCheckProxy';
|
|
/**
|
* 监管对象
|
*/
|
const props = defineProps({
|
item: {
|
type: Object,
|
default: () => {}
|
}
|
});
|
|
const loading = ref(false);
|
const proList = ref([]);
|
const status = ref({});
|
|
const statusType = computed(() => {
|
switch (props.item.status) {
|
case '未执行':
|
return {
|
type: 'danger',
|
icon: 'WarningFilled'
|
};
|
case '正在执行':
|
return {
|
type: 'success',
|
icon: 'Timer'
|
};
|
case '已结束':
|
return {
|
type: 'info',
|
icon: 'SuccessFilled'
|
};
|
default:
|
return {
|
type: 'danger',
|
icon: 'Warning'
|
};
|
}
|
});
|
|
const changePerType = computed(() => {
|
if (status.value.changeNum == 0) {
|
if (status.value.proNum == 0) {
|
return 'success';
|
} else {
|
return 'danger';
|
}
|
} else if (status.value.proNum == status.value.changeNum) {
|
return 'success';
|
} else {
|
return 'warning';
|
}
|
});
|
|
watch(
|
() => props.item,
|
(nV, oV) => {
|
if (nV != oV) {
|
fetchProblems(nV);
|
}
|
},
|
{ immediate: true }
|
);
|
|
function fetchProblems(subtask) {
|
loading.value = true;
|
problemApi
|
.getProBySubtask(subtask.stguid)
|
.then((res) => {
|
proList.value = res;
|
status.value = ProCheckProxy.calProStatus(res);
|
})
|
.finally(() => {
|
loading.value = false;
|
});
|
}
|
</script>
|
<style scoped>
|
.wrapper {
|
/* width: 300px; */
|
width: 100%;
|
border: 1px solid var(--el-border-color);
|
border-radius: var(--el-border-radius-base);
|
padding: 4px 8px;
|
}
|
|
.text-title {
|
font-weight: var(--el-font-weight-primary);
|
color: var(--el-text-color-primary);
|
font-size: var(--el-font-size-medium);
|
}
|
|
.text-info {
|
display: flex;
|
align-items: flex-start;
|
color: var(--el-text-color-secondary);
|
font-size: var(--el-font-size-small);
|
}
|
|
.text-label {
|
display: flex;
|
align-items: center;
|
white-space: nowrap;
|
}
|
</style>
|
