项目详情数据看板上半部分基础代码编辑

src/views/GBC/projectDetail.vue

@@ -37,7 +37,28 @@
       </div>
     </div>
     <div v-if="tabActive == 'dataBoard'">
-      <div>数据看板</div>
+      <div style="margin: 10px;padding: 10px;background: #fff;border-radius: 5px;">
+        <p style="font-size: 18px;line-height: 35px;font-weight: bold;">项目名称：国富人寿北京协和医院AA项目</p>
+        <p style="color: #a7a7a7;font-size: 14px;">数据截止日期：2024-03-30</p>
+        <div style="display: flex;justify-content: center;margin-top: 20px;">
+          <van-circle v-model="currentRate" color="#E9332E" :stroke-width="60" size="80px" :rate="85" :speed="100" :text="text" />
+        </div>
+        <p style="display: flex;justify-content: center;font-weight: bold;font-size: 14px;margin: 10px;">面谈转化率</p>
+        <div style="padding: 10px;background: rgba(251, 235, 230, 0.5);border-radius: 5px;display: flex;justify-content: flex-start;flex-wrap:wrap;">
+          <div v-for="(item,index) in dataList1" style="width: 33%;display: flex;justify-content: space-around;align-items: center;">
+            <div>
+              <div style="font-size: 12px;line-height: 20px;margin: 5px 0px;">
+                <p style="display: flex;justify-content: center;font-size: 14px;">{{item.value}}</p>
+                <p style="display: flex;justify-content: center;align-items: center;">
+                  <span class="colorBlock" :style="{background:colorList[index]}"></span>
+                  {{item.name}}
+                </p>
+              </div>
+            </div>
+<!--            <div v-if="(index + 1) % 3 != 0 || index < 2" style="width: 1px;background: #FFC9AF;height: 60%;"></div>-->
+          </div>
+        </div>
+      </div>
     </div>
     <div v-if="tabActive == 'productList'">
       <div>产品列表</div>
@@ -46,7 +67,7 @@
 </template>
 
 <script>
-import { Tab, Tabs, Search, DropdownMenu, DropdownItem } from 'vant'
+import { Tab, Tabs, Search, DropdownMenu, DropdownItem, Circle } from 'vant'
 
 export default {
   components: {
@@ -55,6 +76,7 @@ export default {
     [Search.name]: Search,
     [DropdownMenu.name]: DropdownMenu,
     [DropdownItem.name]: DropdownItem,
+    [Circle.name]: Circle,
   },
   data() {
     return {
@@ -111,6 +133,17 @@ export default {
           serviceName:'刘艺'
         },
       ],
+      currentRate: 0,
+      colorList:['#E9332E','#CB9BFF','#54C6FA','#FF9B39','#60D64D','#4045F3','#FF59D9','#E8C0A2','#FCD338','#7584A2'],
+      dataList1:[
+        {name:'累计受理保费(元)',value:'150,000.00'},
+        {name:'累计标保(元)',value:'250,000.00'},
+        {name:'件均保费(元)',value:'130,000.00'},
+        {name:'件均保费(元)',value:'10856'},
+        {name:'累计受理件数(件)',value:'356'},
+        {name:'累计承保人数(人)',value:'9569'},
+        {name:'累计承保件数(件)',value:'262'},
+      ],
     }
   },
   created() {
@@ -129,6 +162,11 @@ export default {
       })
     },
   },
+  computed: {
+    text() {
+      return this.currentRate.toFixed(0) + '%';
+    },
+  },
   beforeRouteLeave(to, from, next) {
     document.body.style.backgroundColor = ''
     next()
@@ -150,4 +188,12 @@ export default {
   /deep/ .van-dropdown-menu{
     background: #f5f5f5;
   }
+  .colorBlock{
+    width: 8px;
+    height: 8px;
+    display: inline-block;
+    /*background: #000;*/
+    border-radius: 3px;
+    margin-right: 3px;
+  }
 </style>