From 64eb43c1513354c8613f84361e38d8313fbc4908 Mon Sep 17 00:00:00 2001
From: Jack <1638169491@qq.com>
Date: Thu, 25 Aug 2022 14:25:33 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AD=E5=BB=BA=E5=9B=9B=E5=B1=80(CIM+)?=
 =?UTF-8?q?=EF=BC=9A=E5=AE=8C=E6=88=90=E6=A8=A1=E5=9E=8B=E5=A4=96=E5=AE=A1?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../projectAdmin/zjsj/cim/rightBottom.vue     | 74 ++++++++++++++++++-
 1 file changed, 71 insertions(+), 3 deletions(-)

diff --git a/src/views/projectAdmin/zjsj/cim/rightBottom.vue b/src/views/projectAdmin/zjsj/cim/rightBottom.vue
index 40296e6d..4a48ecd8 100644
--- a/src/views/projectAdmin/zjsj/cim/rightBottom.vue
+++ b/src/views/projectAdmin/zjsj/cim/rightBottom.vue
@@ -1,14 +1,82 @@
 <template>
   <Card title="模型外审">
-    模型外审
+    <div class="chart">
+      <JNestedRingChart :title="{ text: '73', subTitle: '问题总数' }" :series="series" :legend="{ show: false }" />
+    </div>
+    <div class="legend">
+      <div class="legend-item">未查看</div>
+      <div class="legend-item">已查看</div>
+      <div class="legend-item">已解决</div>
+      <div class="legend-item">已回复</div>
+    </div>
   </Card>
 </template>
 
 <script>
 import Card from '../components/Card.vue'
+import JNestedRingChart from '../../common/jChart/pie/JNestedRingChart.vue'
 export default {
-  components: { Card }
+  components: { Card, JNestedRingChart },
+  data() {
+    return {
+      series: [
+        {
+          roseType: 'area',
+          radius: ['58%', '52%'],
+          color: ['#0B1B35', '#4A8C9C'],
+          data: [30, 40, 30, 40]
+        },
+        {
+          radius: ['65%', '82%'],
+          color: ['#FFFFFF', '#E86129', '#FFC303', '#6EE4F0'],
+          data: [
+            { value: 11, name: '未查看' },
+            { value: 11, name: '已查看' },
+            { value: 11, name: '已解决' },
+            { value: 11, name: '已回复' }
+          ]
+        }
+      ]
+    }
+  }
 }
 </script>
 
-<style></style>
+<style lang="less" scoped>
+.chart {
+  box-sizing: border-box;
+  padding-top: 20px;
+  height: 70%;
+}
+.legend {
+  margin-top: 30px;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  .legend-item {
+    width: 45%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    &::before {
+      content: '';
+      margin-right: 8px;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+    }
+    &:nth-child(1)::before {
+      background-color: #ffffff;
+    }
+    &:nth-child(2)::before {
+      background-color: #e86129;
+    }
+    &:nth-child(3)::before {
+      background-color: #ffc303;
+    }
+    &:nth-child(4)::before {
+      background-color: #6ee4f0;
+    }
+  }
+}
+</style>