From a968e1b156857ace7d8e8cd24001eff3eccf3a58 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期一, 02 二月 2026 16:40:24 +0800
Subject: [PATCH] 军泰伟业 1.部署修改
---
src/views/reportAnalysis/qualityAnalysis/components/right-top.vue | 93 ++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 93 insertions(+), 0 deletions(-)
diff --git a/src/views/reportAnalysis/qualityAnalysis/components/right-top.vue b/src/views/reportAnalysis/qualityAnalysis/components/right-top.vue
new file mode 100644
index 0000000..1400cb2
--- /dev/null
+++ b/src/views/reportAnalysis/qualityAnalysis/components/right-top.vue
@@ -0,0 +1,93 @@
+<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>
--
Gitblit v1.9.3