| | |
| | | <!-- 左侧:已巡查店铺率、巡查点次、复查点次 --> |
| | | <div class="stats-section left-section"> |
| | | <h3>巡查概况</h3> |
| | | <el-row justify="space-between"> |
| | | <div class="chart-item"> |
| | | <div class="progress-container"> |
| | | <el-progress |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="stats-grid m-t-16"> |
| | | <div class="stats-grid m-l-16"> |
| | | <el-statistic |
| | | class="stat-item" |
| | | :value="inspectionStats.inspectionPoints" |
| | |
| | | title="复查点次" |
| | | /> |
| | | </div> |
| | | </el-row> |
| | | </div> |
| | | |
| | | <!-- 右侧:问题数、问题整改数、问题整改率统计图 --> |
| | | <div class="stats-section right-section"> |
| | | <h3>问题整改概况</h3> |
| | | <div class="stats-grid"> |
| | | <el-statistic class="stat-item" :value="inspectionStats.problemCount" title="问题数" /> |
| | | <el-row justify="space-around"> |
| | | <el-text>问题数:{{ inspectionStats.problemCount }}</el-text> |
| | | <el-text>整改数:{{ inspectionStats.rectifiedProblems }}</el-text> |
| | | </el-row> |
| | | <!-- <el-statistic class="stat-item" :value="inspectionStats.problemCount" title="问题数" /> |
| | | <el-statistic |
| | | class="stat-item" |
| | | :value="inspectionStats.rectifiedProblems" |
| | | title="问题整改数" |
| | | /> |
| | | /> --> |
| | | </div> |
| | | <!-- <div class="chart-item"> --> |
| | | <div ref="rectificationRateChart" class="chart"></div> |
| | |
| | | chart.setOption({ |
| | | xAxis: { |
| | | type: 'category', |
| | | data: ['当日整改率', '48小时内整改率', '综合整改率', '审核通过率'], |
| | | data: [ |
| | | '当日整改率', |
| | | // '48小时内整改率', |
| | | '综合整改率', |
| | | '审核通过率', |
| | | ], |
| | | }, |
| | | yAxis: { |
| | | type: 'value', |
| | |
| | | { |
| | | data: [ |
| | | parseFloat(inspectionStats.value.sameDayRectificationRate), |
| | | parseFloat(inspectionStats.value.effectiveRectificationRate), |
| | | // parseFloat(inspectionStats.value.effectiveRectificationRate), |
| | | parseFloat(inspectionStats.value.comprehensiveRectificationRate), |
| | | parseFloat(inspectionStats.value.auditPassRate), |
| | | ], |
| | |
| | | </script> |
| | | |
| | | <style scoped> |
| | | :deep() .el-card__body { |
| | | padding: 8px; |
| | | } |
| | | .mb-4 { |
| | | /* width: 600px; */ |
| | | } |
| | |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 20px; |
| | | margin-bottom: 30px; |
| | | } |
| | | |
| | | .stats-section { |
| | |
| | | } |
| | | |
| | | .stats-grid { |
| | | display: grid; |
| | | grid-template-columns: 1fr 1fr; |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 10px; |
| | | margin-bottom: 20px; |
| | | } |
| | | |
| | | .stat-item { |
| | | flex: 1; |
| | | background-color: #fff; |
| | | padding: 20px; |
| | | border-radius: 8px; |
| | |
| | | } |
| | | |
| | | .chart-item { |
| | | flex: 1; |
| | | background-color: #fff; |
| | | padding: 20px; |
| | | border-radius: 8px; |