<template>
|
<!-- <BaseCard> -->
|
<el-row> 巡查汇总 </el-row>
|
<el-segmented v-model="value" :options="options" block />
|
<div><el-text tag="i"> 评估 </el-text></div>
|
<el-row justify="space-evenly">
|
<div>
|
<el-statistic title="总计" :value="10"> </el-statistic>
|
<div class="statistic-footer">
|
<div class="footer-item">
|
<span>对比昨日</span>
|
<span class="green">
|
24%
|
<el-icon>
|
<CaretTop />
|
</el-icon>
|
</span>
|
</div>
|
</div>
|
</div>
|
<el-statistic title="高风险" :value="2" :value-style="styleRed"> </el-statistic>
|
<el-statistic title="中风险" :value="6" :value-style="styleYellow"> </el-statistic>
|
<el-statistic title="低风险" :value="2" :value-style="styleGreen"> </el-statistic>
|
</el-row>
|
<div><el-text tag="i"> 复核 </el-text></div>
|
<el-row justify="space-evenly">
|
<div>
|
<el-statistic title="需复核" :value="2"> </el-statistic>
|
<div class="statistic-footer">
|
<div class="footer-item">
|
<span>对比昨日</span>
|
<span class="green">
|
24%
|
<el-icon>
|
<CaretTop />
|
</el-icon>
|
</span>
|
</div>
|
</div>
|
</div>
|
<el-statistic title="已完成" :value="2" :value-style="styleGreen"> </el-statistic>
|
</el-row>
|
<div><el-text tag="i"> 问题 </el-text></div>
|
<el-row justify="space-evenly">
|
<div>
|
<el-statistic title="总计" :value="10"> </el-statistic>
|
<div class="statistic-footer">
|
<div class="footer-item">
|
<span>对比昨日</span>
|
<span class="green">
|
24%
|
<el-icon>
|
<CaretTop />
|
</el-icon>
|
</span>
|
</div>
|
</div>
|
</div>
|
<el-statistic title="待审核" :value="2" :value-style="styleRed"> </el-statistic>
|
<el-statistic title="已审核" :value="6" :value-style="styleYellow"> </el-statistic>
|
<el-statistic title="待整改" :value="2" :value-style="styleGreen"> </el-statistic>
|
<el-statistic title="已整改" :value="2" :value-style="styleGreen"> </el-statistic>
|
<el-statistic title="待确认" :value="2" :value-style="styleGreen"> </el-statistic>
|
</el-row>
|
<!-- </BaseCard> -->
|
</template>
|
|
<script setup>
|
import { ref, onMounted } from 'vue'
|
import dayjs from 'dayjs'
|
import taskApi from '@/api/fysp/taskApi.js'
|
|
const props = defineProps({
|
height: String
|
})
|
|
const emits = defineEmits(['update:height'])
|
|
const value = '今日汇总'
|
const options = ['今日汇总', '周度汇总', '月度汇总', '季度汇总', '年度汇总']
|
const styleRed = 'color:var(--el-color-danger);'
|
const styleYellow = 'color:var(--el-color-warning);'
|
const styleGreen = 'color:var(--el-color-success);'
|
|
const subtaskToday = ref([])
|
const subtaskWeek = ref([])
|
const subtaskMonth = ref([])
|
|
function getParams(type) {
|
const d = dayjs()
|
return {
|
starttime: d.startOf(type).format('YYYY-MM-DD HH:mm:ss'),
|
endtime: d.endOf(type).format('YYYY-MM-DD HH:mm:ss')
|
}
|
}
|
|
function fetchSubtaskToday() {
|
const area = getParams('day')
|
|
taskApi.fetchSubtaskSummaryByArea(area).then((res) => {
|
subtaskToday.value = res.data
|
})
|
}
|
|
function fetchSubtaskThisWeek() {
|
const area = getParams('week')
|
|
taskApi.fetchSubtaskSummaryByArea(area).then((res) => {
|
subtaskWeek.value = res.data
|
})
|
}
|
|
function fetchSubtaskThisMonth() {
|
const area = getParams('month')
|
|
taskApi.fetchSubtaskSummaryByArea(area).then((res) => {
|
subtaskMonth.value = res.data
|
})
|
}
|
|
onMounted(() => {
|
// fetchSubtaskToday()
|
// fetchSubtaskThisWeek()
|
fetchSubtaskThisMonth()
|
})
|
</script>
|
|
<style scoped>
|
/* .el-segmented {
|
--el-segmented-item-selected-color: var(--el-text-color-primary);
|
--el-segmented-item-selected-bg-color: #ffd100;
|
--el-border-radius-base: 16px;
|
} */
|
|
.el-statistic {
|
--el-statistic-content-font-size: var(--el-font-size-base);
|
/* background-color: aliceblue; */
|
}
|
|
.statistic-footer {
|
background-color: #ffd100;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
flex-wrap: wrap;
|
font-size: 12px;
|
color: var(--el-text-color-regular);
|
/* margin-top: 16px; */
|
}
|
|
.statistic-footer .footer-item {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.statistic-footer .footer-item span:last-child {
|
display: inline-flex;
|
align-items: center;
|
margin-left: 4px;
|
}
|
|
.green {
|
color: var(--el-color-success);
|
}
|
.red {
|
color: var(--el-color-error);
|
}
|
</style>
|
