中建四局(CIM+)：完成模型外审布局

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>