修改了布局UI和文字显示

src/components/echart/centerRight/centerChartRate/index.vue

@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <!-- 通过率/达标率 -->
+    <Echart
+      :options="options"
+      :id="id"
+      height="200px"
+      width="200px"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import Echart from '@/common/echart'
+export default {
+  data () {
+    return {
+      options: {},
+    };
+  },
+  components: {
+    Echart,
+  },
+  props: {
+    id: {
+      type: String,
+      required: true,
+      default: "chartRate"
+    },
+    tips: {
+      type: Number,
+      required: true,
+      default: 50
+    },
+    colorObj: {
+      type: Object,
+      default: function () {
+        return {
+          textStyle: "#3fc0fb",
+          series: {
+            color: ["#00bcd44a", "transparent"],
+            dataColor: {
+              normal: "#03a9f4",
+              shadowColor: "#97e2f5"
+            }
+          }
+        };
+      }
+    }
+  },
+  watch: {
+    // tips 是会变更的数据，所以进行监听
+    tips: {
+      handler (newData) {
+        this.options = {
+          title:{
+            text: newData * 1 + "%",
+            x: "center",
+            y: "center",
+            textStyle: {
+              color: this.colorObj.textStyle,
+              fontSize: 16
+            }
+          },
+          series: [
+            {
+              type: "pie",
+              radius: ["75%", "80%"],
+              center: ["50%", "50%"],
+              hoverAnimation: false,
+              color: this.colorObj.series.color,
+              label: {
+                normal: {
+                  show: false
+                }
+              },
+              data: [
+                {
+                  value: newData,
+                  itemStyle: {
+                    normal: {
+                      color: this.colorObj.series.dataColor.normal,
+                      shadowBlur: 10,
+                      shadowColor: this.colorObj.series.dataColor.shadowColor
+                    }
+                  }
+                },
+                {
+                  value: 100 - newData
+                }
+              ]
+            }
+          ]
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/echart/centerRight/centerRightChart/index.vue

@@ -11,12 +11,10 @@ export default {
     return {
       cdata: {
         indicatorData: [
-          { name: "data1", max: 300 },
-          { name: "data2", max: 250 },
-          { name: "data3", max: 300 },
-          { name: "data4", max: 5},
-          { name: "data5", max: 200 },
-          { name: "data6", max: 100 }
+          { name: "插件", max: 300 },
+          { name: "组装", max: 250 },
+          { name: "老化", max: 300 },
+          { name: "包装", max: 5},
         ],
         dataBJ: [
           [94, 69, 114, 2.08, 73, 39, 22],

src/main.js

@@ -35,7 +35,7 @@ router.beforeEach((to, from, next) => {
    * 未登录跳转到登录页,也可以通过axios的响应拦截器去实现,但是会先在当前页面渲染一下,再跳转到登录页,会有个闪动的现象
    * 这里通过路由守卫的方式,不会在当前页闪现一下,但是需要在每个路由组件添加一个是否需要登录的标识位,如本项目中的requireAuth字段
    */
-  /**
+
     if (to.matched.some((auth) => auth.meta.requireAuth)) {
     let token = sessionStorage.getItem("x-access-token");
     if (token && token != undefined) {
@@ -49,7 +49,7 @@ router.beforeEach((to, from, next) => {
     next();
   }
 });
-*/
+
 new Vue({
   router,
   store,
@@ -62,11 +62,8 @@ import axios from 'axios';
 Vue.prototype.$http = axios.create({
   //设置20秒超时时间
   timeout: 20000,
-<<<<<<< HEAD
   baseURL: 'http://mes.ubtob.net:8099/mes/', //这里写后端地址http://localhost:8099/uas/（）
-=======
   baseURL: '/proxy_url', //这里写后端地址http://localhost:8099/uas/ https://mes.ubtob.net:8099/mes/
->>>>>>> b58aeb0f125f678e23409708980deda3485dbecd
 });
 Vue.prototype.$http.interceptors.request.use(config => {
   //为请求头添加x-access-token 字段为服务端返回的token

src/views/bottomLeft2.vue

@@ -39,6 +39,7 @@ $box-width: 100%;
   }
   .text {
     color: #c3cbde;
+    font-size: 15px;
   }
   .chart-box {
     margin-top: 16px;

src/views/bottomRight.vue

@@ -42,6 +42,7 @@ $box-width: 100%;
   }
   .text {
     color: #c3cbde;
+    font-size: 15px;
   }
   //下滑线动态
   .decoration2 {

src/views/center.vue

@@ -25,7 +25,7 @@
       </div>
       <div class="percent">
         <div class="item bg-color-black">
-          <span>今日任务通过率</span>
+          <span>首检合格率</span>
           <CenterChart
             :id="rate[0].id"
             :tips="rate[0].tips"
@@ -33,7 +33,7 @@
           />
         </div>
         <div class="item bg-color-black">
-          <span>今日任务达标率</span>
+          <span>巡检合格率</span>
           <CenterChart
             :id="rate[1].id"
             :tips="rate[1].tips"

src/views/centerLeft2.vue

@@ -40,6 +40,7 @@ export default {
   }
   .text {
     color: #c3cbde;
+    font-size: 15px;
   }
   .dv-dec-1 {
     position: relative;

src/views/centerRight1.vue

@@ -113,6 +113,7 @@ $box-width: 300px;
   }
   .text {
     color: #c3cbde;
+    font-size: 15px;
   }
   .body-box {
     border-radius: 10px;

src/views/centerRight2.vue

@@ -9,14 +9,19 @@
       </div>
       <div class="d-flex ai-center flex-column body-box">
         <dv-capsule-chart class="dv-cap-chart" :config="config" />
-        <centerRight2Chart1 />
+		<span class="fs-xl text mx-2">设备保养执行率</span>
+         <CenterChart
+           :id="rate[0].id"
+           :tips="rate[0].tips"
+            :colorObj="rate[0].colorData"
+           />
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import centerRight2Chart1 from '@/components/echart/centerRight/centerRightChart'
+import CenterChart from '@/components/echart/centerRight/centerChartRate'
 
 export default {
   data() {
@@ -44,10 +49,41 @@ export default {
             value: 98
           }
         ]
-      }
+      },
+      // 通过率和达标率的组件复用数据
+            rate: [
+              {
+                id: 'centerRate1',
+                tips: 60,
+                colorData: {
+                  textStyle: '#3fc0fb',
+                  series: {
+                    color: ['#00bcd44a', 'transparent'],
+                    dataColor: {
+                      normal: '#03a9f4',
+                      shadowColor: '#97e2f5'
+                    }
+                  }
+                }
+              },
+              {
+                id: 'centerRate2',
+                tips: 40,
+                colorData: {
+                  textStyle: '#67e0e3',
+                  series: {
+                    color: ['#faf3a378', 'transparent'],
+                    dataColor: {
+                      normal: '#ff9800',
+                      shadowColor: '#fcebad'
+                    }
+                  }
+                }
+              }
+            ]
     }
   },
-  components: { centerRight2Chart1 }
+  components: { CenterChart }
 }
 </script>
 
@@ -67,6 +103,7 @@ export default {
   }
   .text {
     color: #c3cbde;
+    font-size: 15px;
   }
   .body-box {
     border-radius: 10px;