From 2483f21a97ff8084f26ea69a5fdcb736eef82d6e Mon Sep 17 00:00:00 2001
From: hzz <hzz>
Date: Thu, 15 Jun 2023 14:57:40 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=9C=BA=E6=A2=B0?=
 =?UTF-8?q?=E5=88=86=E5=8E=82=E8=AE=BE=E5=A4=87=E5=A4=A7=E5=B1=8F=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/http/Mechanics/index.ts                   |   5 +
 src/locales/lang/en.ts                        |   2 +
 src/locales/lang/zh.ts                        |   2 +
 .../Mechanics/components/DevOverview.vue      |  82 +++---
 .../Mechanics/components/devStatusTip.vue     | 237 +++++++++---------
 src/views/Mechanics/components/ringChart.vue  |  20 +-
 .../Mechanics/components/scrollBoard.vue      |   9 +-
 src/views/Mechanics/indexNew.vue              |  60 +++--
 8 files changed, 222 insertions(+), 195 deletions(-)

diff --git a/src/http/Mechanics/index.ts b/src/http/Mechanics/index.ts
index 697a8ee..c7f0cab 100644
--- a/src/http/Mechanics/index.ts
+++ b/src/http/Mechanics/index.ts
@@ -41,3 +41,8 @@ export function reqDeviceTotelListMF(){
 export function reqDeviceTotelStatusMF() {
     return get('/device/deviceTotelStatusMF')
 }
+
+//提醒
+export function reqDeviceRemind() {
+    return get('/device/deviceRemind')
+}
diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
index 4a12262..017df43 100644
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@@ -273,5 +273,7 @@ export default {
         '历史数据':'Historical Data',
         '环境 实时监测系统':'环境 实时监测系统',
         '传感器监测走势图':'传感器监测走势图',
+        '机械分厂设备列表':'机械分厂设备列表',        
+        '设备状态总览':'设备状态总览',
       }
   }
\ No newline at end of file
diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts
index 88f954e..3c522e7 100644
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@@ -273,5 +273,7 @@ export default {
         '历史数据':'历史数据',
         '环境 实时监测系统':'环境 实时监测系统',
         '传感器监测走势图':'传感器监测走势图',
+        '机械分厂设备列表':'机械分厂设备列表',
+        '设备状态总览':'设备状态总览',
       }
   }
\ No newline at end of file
diff --git a/src/views/Mechanics/components/DevOverview.vue b/src/views/Mechanics/components/DevOverview.vue
index dd59df3..7cc2779 100644
--- a/src/views/Mechanics/components/DevOverview.vue
+++ b/src/views/Mechanics/components/DevOverview.vue
@@ -9,26 +9,16 @@
 -->
 <template>
     <div class="devItem-box">
-        <h2>{{ props.title }}</h2>
+        <h2 class="title">{{ props.title }}</h2>
         <div class="devItem-content">
-            <div class="content-value" v-if="props.title == '设备总数'">
-                <h2>{{ value.total }}台</h2>
+            <div class="content-cheijan" v-if="props.title == '设备总数'">
+                <h3>{{ value.total }}台</h3>
             </div>
-            <div class="content-value-cheijan " v-else>
-                <el-row>
-                    <el-col :span="7">
-                        <div class="chejian-online on-status">{{ value.onLine }} <div>在线</div>
-                        </div>
-                    </el-col>
-                    <el-col :span="17"></el-col>
-                </el-row>
-                <el-row>
-                    <el-col :span="17"></el-col>
-                    <el-col :span="7">
-                        <div class="chejian-offline on-status">{{ value.total - value.onLine }}<div>离线</div>
-                        </div>
-                    </el-col>
-                </el-row>
+            <div class="content-value-cheijan" v-else>
+                <div class="chejian-online on-status">{{ value.onLine }} <div class="mt10">在线</div>
+                </div>
+                <div class="chejian-total on-status">{{ value.total }}<div class="mt10">总数</div>
+                </div>
             </div>
         </div>
     </div>
@@ -52,8 +42,9 @@ const props = defineProps({
 <style scoped>
 .devItem-box h2 {
     color: #fff;
-    font-size: 18px;
+    font-size: 20px;
     padding-left: 20px;
+    font-weight: bold;
     text-align: left;
 }
 
@@ -76,41 +67,70 @@ const props = defineProps({
     justify-content: center;
     align-items: center;
     border-bottom: 2px solid;
-    border-image: linear-gradient(to right, #00D0FE, #2969E8) 1;
+    border-image: linear-gradient(to right, #01617A, #173C85) 1;
 
 }
 
 .on-status {
     width: 50px;
-    font-size: 25px;
+    font-size: 24px;
 }
 
 .chejian-online {
-    color: #7CFFB2;
+    position: relative;
+    left: 15%;
+    color: #77FDAB;
 }
 
-.chejian-offline {
-    color: #4992FF;
+.chejian-total {
+    position: relative;
+    left: 55%;
+    bottom: 15%;
+    color: #20AEC5;
 }
 
+.content-cheijan {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 70%;
+    height: 100%;
+    border-bottom: 2px solid;
+    border-image: linear-gradient(to right, #01617A, #173C85) 1;
+}
 .content-value-cheijan {
     width: 70%;
     height: 100%;
     border-bottom: 2px solid;
-    border-image: linear-gradient(to right, #00D0FE, #2969E8) 1;
+    border-image: linear-gradient(to right, #01617A, #173C85) 1;
 }
 
 .content-value-cheijan::after {
     content: '';
     display: block;
-    border-bottom: 2px dashed #2969E8;
+    border-bottom: 2px dashed #20AEC5;
     transform: rotate(-45deg);
-    margin-top: -40%;
+    margin-top: -47%;
 }
 
-.content-value>h2 {
+.content-cheijan>h3 {
+    text-align: center;
     display: block;
-    margin-top: 20px;
+    font-weight: bold;
     font-size: 50px;
-    color: #64A1FC;
-}</style>
+    color: #20AEC5;
+}
+
+.content-cheijan>div {
+    position: relative;
+    top: 30%;
+    font-size: 24px;
+    font-weight: bold;
+    text-align: center;
+    color: #fff;
+}
+
+.mt10 {
+    margin-top: 10px;
+}
+</style>
diff --git a/src/views/Mechanics/components/devStatusTip.vue b/src/views/Mechanics/components/devStatusTip.vue
index 7ca8b8b..7f26b52 100644
--- a/src/views/Mechanics/components/devStatusTip.vue
+++ b/src/views/Mechanics/components/devStatusTip.vue
@@ -8,129 +8,122 @@
  * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
 -->
 <template>
-    <div style="height: 100%; width: 100%">
-      <h2 class="components-header">{{title}}</h2>
-      <div class="components-content" :key="keynum">
-        <swiper-container
-          :slidesPerView="per_view"
-          :loop="true"
-          :spaceBetween="0"
-          direction="vertical"
-          :autoplay="{
-            delay: 3000,
-            disableOnInteraction: false,
-          }"
-          autoHeight=true
-          observer=true
-          observeParents=true
-          @progress="onProgress"
-          @slidechange="onSlideChange"
-        >
-          <swiper-slide v-for="(res, index) in props.tipList" :key="index">
-            <div class="itemclass">
-                <el-row :gutter="5" class="row-flex">
-                  <el-col :span="2" class="col-flex" style="color: #fff; font-size: 18px;">
-                    {{ index + 1 }}
-                  </el-col>
-                  <el-col :span="18"  class="col-flex" style="flex-direction: column; font-size: 18px; color: #fff; align-items: flex-start;"> 
-                  <p><span>设备名称：</span><span>{{ res.label }}</span></p>
-                  <p><span>保养日期：</span><span>{{ res.on }}</span> &nbsp; <span>保养时长：</span><span>{{ res.on }}</span> </p>
-                  </el-col>
-                  <el-col :span="4" class="col-flex" style="font-size: 25px; color: red;"> 未进行 </el-col>
-                </el-row>
-            </div>
-          </swiper-slide>
-        </swiper-container>
-      </div>
+  <div style="height: 100%; width: 100%">
+    <h2 class="components-header">{{ title }}</h2>
+    <div class="components-content" :key="keynum">
+      <swiper-container :slidesPerView="props.per_view" :loop="true" :spaceBetween="0" direction="vertical" :autoplay="{
+        delay: 3000,
+        disableOnInteraction: false,
+      }" autoHeight=true observer=true observeParents=true @progress="onProgress" :loopAdditionalSlides="1" @slidechange="onSlideChange">
+        <swiper-slide v-for="(res, index) in props.tipList" :key="res.id">
+          <div class="itemclass">
+            <el-row :gutter="5" class="row-flex">
+              <el-col :span="2" class="col-flex" style="color: #fff; font-size: 18px;">
+                {{ index + 1 }}
+              </el-col>
+              <el-col :span="18" class="col-flex"
+                style="flex-direction: column; font-size: 18px; color: #fff; align-items: flex-start;">
+                <p><span>{{ label.name }} ：</span><span>{{ res.name }}</span></p>
+                <p style="margin-top: 10px 0;">
+                  <span>{{ label.date }}：</span><span>{{ res.date }}</span> &nbsp;
+                  <span>{{ label.duration }}：</span><span>{{ res.duration }}</span>
+                </p>
+              </el-col>
+              <el-col :span="4" class="col-flex" style="font-size: 25px;font-weight: bold;" :style="{color:compare[res.status]?compare[res.status]:'red'}"> {{res.status}} </el-col>
+            </el-row>
+          </div>
+        </swiper-slide>
+      </swiper-container>
     </div>
-  </template>
+  </div>
+</template>
   
-  <script setup lang="ts">
-  import { reactive, ref, watch } from "vue";
-  import { register } from "swiper/element/bundle";
-  import { useI18n } from "vue-i18n";
-  let { t } = useI18n();
-  register();
-  const props = defineProps({
-    title: {
-      type: String,
-      default: "",
-    },
-    tipList: {
-      type: Array,
-      default: [],
-    },
-  });
-  let per_view = ref(5);
-  let useSwiper: any = ref(null);
-  let swiperRef = ref(null);
-  let listVal = ref([]);
-  let keynum = ref(0);
-  // space-between:幻灯片间距
-  //             slides-per-view:每个视图幻灯片数量
-  //             initialSlide：初始幻灯片索引
-  //             height:框高,
-  //             direction:滑动方向
-  //             autoplay：{
-  //                 delay：时间
-  //                 disableOnInteraction：禁止交互
-  //             }
+<script setup lang="ts">
+import { reactive, ref, watch } from "vue";
+import { register } from "swiper/element/bundle";
+import { useI18n } from "vue-i18n";
+let { t } = useI18n();
+register();
+const props:any = defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+  tipList: {
+    type: Array,
+    default: [{name:'',date:'',duration:'',status:''}],
+  },
+  label: {
+    type: Object,
+    default: { name: "设备名称", date: "保养日期", duration: "保养时长"}
+  },
+  per_view: {
+    type: Number,
+    default: 5,
+  },
+});
+let compare = {
+  '进行中':'#83C710',
+  '未开始':'#E44610',
+  '未进行':'#E54711',
+  '故障':'#DA0F10',
+  '维修中':'#83C710',
+}
+let useSwiper: any = ref(null);
+let swiperRef = ref(null);
+let listVal = ref([]);
+let keynum = ref(0);
+watch(
+  () => props.tipList,
+  (val) => {
+    keynum.value++;
+  },
+  { deep: true }
+);
+
+const onProgress = (e) => { };
+
+const onSlideChange = (e) => { };
+</script>
   
-  // let swiperConfig= reactive({
-  //     perView:3,
-  //     initialSlide:1,
-  //     loop:true,
-  //     spaceBetween:0,
-  //     swiperHeight:200,
-  //     direction:'vertical',
-  //     autoplay:{ delay: 3000,disableOnInteraction: false,height:200}
-  // })
-  
-  watch(
-    () => props.tipList,
-    (val) => {
-      keynum.value++;
-    },
-    { deep: true }
-  );
-  
-  const onProgress = (e) => {};
-  
-  const onSlideChange = (e) => {};
-  </script>
-  
-  <style scoped>
-  .components-header {
-    width: 100%;
-    text-align: center;
-    color: #fff;
-    font-size: 20px;
-    margin-bottom: 10px;
-  }
-  .components-content {
-    height: 90%;
-    width: 100%;
-  }
-  .itemclass {
-    display: flex;
-    height: 100%;
-    width: 100%;
-    align-items: center;
-    border-bottom: #0545a1 1px solid;
-  }
-  .row-flex{
-      width: 100%;
-      height: 100%;
-  }
-  .col-flex{
-      display: flex;
-      justify-content: center;
-      align-items: center;
-  }
-  .swiper,swiper-container {
-    width: 100%;
-    height: 100%;
-    display: inline-block !important;
-  }
-  </style>
+<style scoped>
+.components-header {
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-size: 20px;
+  margin-bottom: 10px;
+}
+
+.components-content {
+  height: 90%;
+  width: 100%;
+}
+
+.itemclass {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  align-items: center;
+  border-bottom: #0545a1 1px solid;
+}
+
+.row-flex {
+  width: 100%;
+  height: 100%;
+}
+
+.col-flex {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.swiper,
+swiper-container {
+  width: 100%;
+  height: 100%;
+  display: inline-block !important;
+}
+</style>
   
\ No newline at end of file
diff --git a/src/views/Mechanics/components/ringChart.vue b/src/views/Mechanics/components/ringChart.vue
index 508acd2..c601fb7 100644
--- a/src/views/Mechanics/components/ringChart.vue
+++ b/src/views/Mechanics/components/ringChart.vue
@@ -19,13 +19,14 @@ let {t} = useI18n();
 let ringRef = ref();
 let ringChart = null;
 const prop = defineProps({
-    data: []
+    data: [],
+    total: Number
 })
 const init = () => {
     ringChart = proxy.$echarts.init(ringRef.value, 'dark')
     let option = {
         title: {
-            text: t('messages.DevType'),
+            text: t('messages.设备状态总览'),
             show: true,
             textStyle: {
                 color: "#fff",
@@ -38,28 +39,37 @@ const init = () => {
         },
         legend: {
             type: "scroll",
-            bottom: "5%",
+            top: "10%",
             left: "center",
+            textStyle: {
+                color: "#fff",
+                fontSize: 16,
+            },
         },
         series: [
             {
                 name: "",
                 type: "pie",
-                radius: ["20%", "50%"],
+                radius: ["20%", "70%"],
                 center: ["50%", "45%"],
                 avoidLabelOverlap: false,
                 itemStyle: {
                     borderRadius: 5,
                     // borderColor: '#fff',
                     borderWidth: 2,
+                    
                 },
                 label: {
                     show: true,
-                    formatter: "{b}: {c}",
+                    formatter(params) {
+                        return `${params.name} \n${(params.value / prop.total * 100).toFixed(2)}%`
+                    },
+                    fontSize:20
                 },
                 labelLine: {
                     show: true,
                 },
+                top:'20%',
                 data: prop.data,
             },
         ],
diff --git a/src/views/Mechanics/components/scrollBoard.vue b/src/views/Mechanics/components/scrollBoard.vue
index 7c98161..624ba7d 100644
--- a/src/views/Mechanics/components/scrollBoard.vue
+++ b/src/views/Mechanics/components/scrollBoard.vue
@@ -9,7 +9,7 @@
 -->
 <template>
     <div class="box">
-        <div class="box-title">{{t('messages.LegionDevList')}}</div>
+        <div class="box-title">{{t('messages.机械分厂设备列表')}}</div>
         <div class="box-body">
             <dv-scroll-board ref="devList" :config="prop.config" @mouseover="dvMouseover" @mouseend="dvmouseleave" :style="{
                         width: '100%',
@@ -37,7 +37,6 @@ let tipcontent = ref(null)
 let visible = ref(false)
 //存储弹窗dom
 let triggerRef = ref(null)
-
 /**
  * @函数功能: 鼠标移入组件方法
  * @param {*} value 
@@ -76,16 +75,16 @@ const dvmouseleave = () => {
 
 .box-title {
     width: 100%;
-    padding: 10px;
     font-size: 20px;
+    margin: 5px 0 10px 0;
     color: #fff;
     text-align: center;
     font-weight: bold;
 }
 
 .box-body {
-    width: 100%;
-    height: 90%;
+    width: 100%;    
+    flex: 1;
     display: flex;
     justify-content: space-around;
     align-items: center;
diff --git a/src/views/Mechanics/indexNew.vue b/src/views/Mechanics/indexNew.vue
index 76c5640..7b116ab 100644
--- a/src/views/Mechanics/indexNew.vue
+++ b/src/views/Mechanics/indexNew.vue
@@ -26,7 +26,8 @@
           <div style="width: 100%; height: 28%;">
             <border13>
               <div style="width: 98%;height: 100%;">
-                <devFaultTip :title="'设备故障提醒'" :tipList="devFaultTipData"></devFaultTip>
+                <devStatusTip :title="'设备故障提醒'" :tipList="faultList"
+                  :label='{ name: "设备名称", date: "维修日期", duration: "维修时长" }' :per_view="3"></devStatusTip>
               </div>
             </border13>
           </div>
@@ -44,13 +45,14 @@
         <el-col :span="7" class="flex-left">
           <div style="width: 100%; height: 48%;">
             <border13>
-              <ringChart :data="ringData"></ringChart>
+              <ringChart :data="ringData" :total="facTotal.total"></ringChart>
             </border13>
           </div>
           <div style="width: 100%; height: 48%;">
             <border13>
               <div style="width: 100%;height: 100%;">
-                <devStatusTip :title="'设备保养提醒'" :tipList="devStatusTipData"></devStatusTip>
+                <devStatusTip :title="'设备保养提醒'" :tipList="upkeepList"
+                  :label='{ name: "设备名称", date: "保养日期", duration: "保养时长" }' :per_view="5"></devStatusTip>
               </div>
             </border13>
           </div>
@@ -65,7 +67,6 @@ import { nextTick, onMounted, onUnmounted, reactive, ref } from "vue";
 import header2 from "@/components/headerBox/header2.vue";
 import border13 from '@/components/border/Border13.vue'
 import DevOverview from "./components/DevOverview.vue";
-import devFaultTip from "./components/devFaultTip.vue";
 import devStatusTip from "./components/devStatusTip.vue";
 import ringChart from "./components/ringChart.vue";
 import scrollBoard from "./components/scrollBoard.vue";
@@ -73,7 +74,7 @@ import gateway from "./components/gateway.vue";
 import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
 import { ElRow, ElCol } from "element-plus";
 import { useMechanicsStore } from "@/store/module/Mechanics";
-import { gatewayOfMachineryFactory, gatcountsOfMachineryFactory, reqDeviceTotelListMF, reqDeviceTotelStatusMF } from "@/http/Mechanics";
+import { gatewayOfMachineryFactory, gatcountsOfMachineryFactory, reqDeviceTotelListMF, reqDeviceTotelStatusMF, reqDeviceRemind } from "@/http/Mechanics";
 import { useI18n } from "vue-i18n";
 let { t } = useI18n();
 const store = useMechanicsStore();
@@ -152,14 +153,20 @@ async function reqDeviceTotelListMFfun() {
   let result: any = await reqDeviceTotelListMF()
 
   if (result.code == 200) {
+    let compare = {
+      H_OFF: '待机',
+      H_ON: '工作',
+      H_IDLE: '停机',
+      H_STOP: '急停',
+    }
     scrollBoardConfig.data = result.data.map((item, index) => {
       return [
         index + 1,
         item.name,
         item.dept,
-        item.status == 'false' ? '离线' : '在线',
-        item.activation+'%',
-        item.failure+'%'
+        compare[item.status]? compare[item.status] : '停机',
+        item.activation + '%',
+        item.failure + '%'
       ]
     })
   }
@@ -183,43 +190,32 @@ async function getDeviceTotelStatusMF() {
     ]
   }
 }
+let faultList = ref([]); //故障列表
+let upkeepList = ref([]); //保养列表
+//获取设备提醒 保养及故障
+async function getDeviceRemind() {
+  let result: any = await reqDeviceRemind()
+  if (result.code == 200) {
+    faultList.value = result.data.fault
+    upkeepList.value = result.data.upkeep
+  }
+}
 
 
 onMounted(() => {
   // let Timedombox=Timedom.value
   window.document.title = t("messages.Mechanics");
-  setTimeout(() => {
-    devFaultTipData.value = [
-      { label: '111111', devName: '富怡精密绣花机', status: '故障' },
-      { label: '222222', devName: '富怡精密绣花机', status: '故障' },
-      { label: '333333', devName: '富怡精密绣花机', status: '故障' },
-      { label: '444444', devName: '富怡精密绣花机', status: '故障' },
-      { label: '555555', devName: '富怡精密绣花机', status: '故障' },
-      { label: '666666', devName: '富怡精密绣花机', status: '故障' },
-      { label: '777777', devName: '富怡精密绣花机', status: '故障' }]
-    devStatusTipData.value = [{ label: '111111', devName: '富怡精密绣花机', on: 111, off: 222, stop: 333 },
-    { label: '222222', devName: '富怡精密绣花机', on: 111, off: 222, stop: 333 },
-    { label: '333333', devName: '富怡精密绣花机', on: 111, off: 222, stop: 333 },
-    { label: '444444', devName: '富怡精密绣花机', on: 111, off: 222, stop: 333 },
-    { label: '555555', devName: '富怡精密绣花机', on: 111, off: 222, stop: 333 },
-    { label: '666666', devName: '富怡精密绣花机', on: 111, off: 222, stop: 333 },
-    { label: '777777', devName: '富怡精密绣花机', on: 111, off: 222, stop: 333 }, { label: '111111', devName: '富怡精密绣花机', on: 111, off: 222, stop: 333 },
-    { label: '222222', devName: '富怡精密绣花机', on: 111, off: 222, stop: 333 },
-    { label: '333333', devName: '富怡精密绣花机', on: 111, off: 222, stop: 333 },
-    { label: '444444', devName: '富怡精密绣花机', on: 111, off: 222, stop: 333 },
-    { label: '555555', devName: '富怡精密绣花机', on: 111, off: 222, stop: 333 },
-    { label: '666666', devName: '富怡精密绣花机', on: 111, off: 222, stop: 333 },
-    { label: '777777', devName: '富怡精密绣花机', on: 111, off: 222, stop: 333 }]
-  }, 1000)
   devNumTimer = setInterval(() => {
     getDeviceTotelStatusMF()
-  }, 1000*60)
+  }, 1000 * 60)
   gatewayOfMachineryFactoryfun()
   // gatcountsOfMachineryFactoryfun()
   //获取机械分厂设备总数
   getDeviceTotelStatusMF()
   //获取机械分厂设备列表
   reqDeviceTotelListMFfun()
+  //获取设备提醒 保养及故障
+  getDeviceRemind()
   connectWebsocket(null, null, getWebsocket, errWebsocket);
 });
 

From 824c82ddb0183fadb239d44465f55e2fc1fac41d Mon Sep 17 00:00:00 2001
From: hzz <hzz>
Date: Thu, 15 Jun 2023 15:07:33 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=9B=BE=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Mechanics/components/ringChart.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/views/Mechanics/components/ringChart.vue b/src/views/Mechanics/components/ringChart.vue
index c601fb7..e2da1b1 100644
--- a/src/views/Mechanics/components/ringChart.vue
+++ b/src/views/Mechanics/components/ringChart.vue
@@ -12,10 +12,10 @@
 </template>
 
 <script setup lang='ts'>
-import { ref, onMounted, onUnmounted, getCurrentInstance,watch,onUpdated } from 'vue'
+import { ref, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated } from 'vue'
 const { proxy } = getCurrentInstance() as any;
 import { useI18n } from 'vue-i18n'
-let {t} = useI18n();
+let { t } = useI18n();
 let ringRef = ref();
 let ringChart = null;
 const prop = defineProps({
@@ -32,7 +32,7 @@ const init = () => {
                 color: "#fff",
                 fontSize: 20,
             },
-            left:'center'
+            left: 'center'
         },
         tooltip: {
             trigger: "item",
@@ -50,26 +50,26 @@ const init = () => {
             {
                 name: "",
                 type: "pie",
-                radius: ["20%", "70%"],
+                radius: ["40%", "70%"],
                 center: ["50%", "45%"],
                 avoidLabelOverlap: false,
                 itemStyle: {
-                    borderRadius: 5,
+                    borderRadius: 10,
                     // borderColor: '#fff',
                     borderWidth: 2,
-                    
+
                 },
                 label: {
                     show: true,
                     formatter(params) {
                         return `${params.name} \n${(params.value / prop.total * 100).toFixed(2)}%`
                     },
-                    fontSize:20
+                    fontSize: 20
                 },
                 labelLine: {
                     show: true,
                 },
-                top:'20%',
+                top: '20%',
                 data: prop.data,
             },
         ],