<template>
|
<div>
|
<PanelHeader title="工单执行效率分析" />
|
<div class="main-panel panel-item-customers">
|
<div class="main-panel-container">
|
<div
|
style="color: white"
|
class="main-panel-box"
|
v-for="(item, index) in panelList"
|
:key="index"
|
>
|
<div style="flex: 1" class="main-panel-box-left">Top{{ index + 1 }}</div>
|
<div style="flex: 3" class="main-panel-box-right">
|
<div class="main-panel-box-right-text">
|
<span>总数量：{{ item.total }}</span>
|
<span>已完成：{{ item.finished }}</span>
|
<span>合格率：{{ item.qualifiedRate }}</span>
|
</div>
|
<div class="main-panel-box-right-progress">
|
<el-progress :percentage="item.percentage" :format="format" />
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, onMounted } from 'vue'
|
import PanelHeader from './PanelHeader.vue'
|
const panelList = [
|
{ total: 100, finished: 100, qualifiedRate: 100, percentage: 100 }, // Top1
|
{ total: 200, finished: 180, qualifiedRate: 90, percentage: 90 }, // Top2
|
{ total: 200, finished: 180, qualifiedRate: 90, percentage: 90 }, // Top2
|
{ total: 200, finished: 180, qualifiedRate: 90, percentage: 90 }, // Top2
|
{ total: 200, finished: 180, qualifiedRate: 90, percentage: 90 }, // Top2
|
{ total: 200, finished: 180, qualifiedRate: 90, percentage: 90 }, // Top2
|
{ total: 200, finished: 180, qualifiedRate: 90, percentage: 90 }, // Top2
|
{ total: 200, finished: 180, qualifiedRate: 90, percentage: 90 }, // Top2
|
{ total: 200, finished: 180, qualifiedRate: 90, percentage: 90 }, // Top2
|
{ total: 150, finished: 120, qualifiedRate: 80, percentage: 80 } // Top3
|
]
|
const format = (percentage) => {
|
return `${percentage}%`;
|
}
|
onMounted(() => {
|
// fetchData()
|
})
|
</script>
|
|
<style scoped>
|
.main-panel-box{
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
height: 40px;
|
.main-panel-box-left{
|
background: red;
|
border-radius: 20px;
|
text-align: center;
|
line-height: 32px;
|
margin: 0 20px;
|
}
|
.main-panel-box-right{
|
display: flex;
|
flex-direction: column;
|
.main-panel-box-right-text{
|
font-size: 12px;
|
display: flex;
|
justify-content: space-between;
|
padding-right: 60px;
|
}
|
.main-panel-box-right-progress{
|
:deep(.el-progress__text){
|
color: white !important;
|
}
|
}
|
}
|
}
|
.main-panel {
|
display: flex;
|
flex-direction: column;
|
gap: 20px;
|
}
|
|
.panel-item-customers {
|
border: 1px solid #1a58b0;
|
padding: 18px;
|
width: 100%;
|
height: 449px;
|
}
|
</style>
|
