From 3dea0829ac1b70f674dd035cd8624f07685780ab Mon Sep 17 00:00:00 2001
From: Jack <1638169491@qq.com>
Date: Sat, 27 Aug 2022 13:59:47 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AD=E5=BB=BA=E5=9B=9B=E5=B1=80(=E8=B4=A8?=
 =?UTF-8?q?=E9=87=8F=E7=AE=A1=E7=90=86)=EF=BC=9A=E5=AE=8C=E6=88=90?=
 =?UTF-8?q?=E8=B4=A8=E9=87=8F=E5=B7=A1=E6=A3=80=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../projectAdmin/zjsj/quality/leftTop.vue     | 125 +++++++++++++++++-
 1 file changed, 122 insertions(+), 3 deletions(-)

diff --git a/src/views/projectAdmin/zjsj/quality/leftTop.vue b/src/views/projectAdmin/zjsj/quality/leftTop.vue
index 5207982b..155ca85c 100644
--- a/src/views/projectAdmin/zjsj/quality/leftTop.vue
+++ b/src/views/projectAdmin/zjsj/quality/leftTop.vue
@@ -1,14 +1,133 @@
 <template>
   <Card title="质量巡检">
-    质量巡检
+    <div class="container">
+      <div class="dllm">
+        <div class="chart">
+          <JRingChart
+            :title="{ text: '质量验收', subTitle: '987条件' }"
+            :color="['#6EE4F0', '#E7622A']"
+            :data="[{ value: 2314 }, { value: 987 }]"
+            :radius="['60%', '85%']"
+          />
+        </div>
+        <div class="legend">
+          <div class="row">
+            <span>已处理</span>
+            <span>占比</span>
+          </div>
+          <div class="row">
+            <span>123456</span>
+            <span>20%</span>
+          </div>
+        </div>
+        <div class="legend">
+          <div class="row">
+            <span>未处理</span>
+            <span>占比</span>
+          </div>
+          <div class="row">
+            <span>123456</span>
+            <span>20%</span>
+          </div>
+        </div>
+      </div>
+      <div class="dllm">
+        <div class="chart">
+          <JRingChart
+            :title="{ text: '质量整改', subTitle: '987条件' }"
+            :color="['#6EE4F0', '#E7622A']"
+            :data="[{ value: 2314 }, { value: 987 }]"
+            :radius="['55%', '80%']"
+          />
+        </div>
+        <div class="legend">
+          <div class="row">
+            <span>已巡检</span>
+            <span>占比</span>
+          </div>
+          <div class="row">
+            <span>123456</span>
+            <span>20%</span>
+          </div>
+        </div>
+        <div class="legend">
+          <div class="row">
+            <span>未巡检</span>
+            <span>占比</span>
+          </div>
+          <div class="row">
+            <span>123456</span>
+            <span>20%</span>
+          </div>
+        </div>
+      </div>
+    </div>
   </Card>
 </template>
 
 <script>
 import Card from '../components/Card.vue'
+import JRingChart from '../../common/jChart/pie/JRingChart.vue'
 export default {
-  components: { Card }
+  components: { Card, JRingChart }
 }
 </script>
 
-<style></style>
+<style lang="less" scoped>
+.container {
+  height: 100%;
+  display: flex;
+  color: #fff;
+  .dllm {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .chart {
+      width: 100%;
+      height: calc(100% - 92px);
+    }
+    .legend {
+      position: relative;
+      width: 100px;
+      &::before {
+        content: '';
+        position: absolute;
+        top: 4px;
+        left: -4px;
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+      }
+      &:nth-child(2)::before {
+        background-color: #6ee4ef;
+      }
+      &:nth-child(3)::before {
+        background-color: #e7622a;
+      }
+      .row {
+        display: flex;
+        span {
+          text-align: center;
+          &:first-child {
+            width: 60%;
+          }
+          &:last-child {
+            width: 40%;
+          }
+        }
+        &:first-child {
+          font-size: 14px;
+        }
+        &:last-child {
+          height: 30px;
+          line-height: 30px;
+          font-size: 12px;
+          color: #6ae3eb;
+        }
+      }
+    }
+  }
+}
+</style>