🐛 左边数据模拟少一个

mock/community.ts

@@ -11,12 +11,15 @@ export default defineFakeRoute([
     method: 'GET',
     response: () => ({
       code: 200,
-      data: [
+      data: {
-        { name: '设备类型一', outside: randomNumber(), connect: randomNumber() },
+        list: [
-        { name: '设备类型二', outside: randomNumber(), connect: randomNumber() },
+          { name: '设备类型一', outside: randomNumber(), connect: randomNumber() },
-        { name: '设备类型三', outside: randomNumber(), connect: randomNumber() },
+          { name: '设备类型二', outside: randomNumber(), connect: randomNumber() },
-        { name: '设备类型四', outside: randomNumber(), connect: randomNumber() },
+          { name: '设备类型三', outside: randomNumber(), connect: randomNumber() },
-      ],
+          { name: '设备类型四', outside: randomNumber(), connect: randomNumber() },
+        ],
+        total: randomNumber(9999),
+      },
       message: '操作成功',
     }),
   },

src/components/DigitalNumber/DigitalNumber.tsx

@@ -13,18 +13,17 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const moneyString: string = props.separator ? formatter(props.money) : props.money.toString();
-    const moneyStringList = moneyString
-      .split(/(\d,)/g)
-      .filter((item) => item !== '')
-      .map((item) => (!item.includes(',') ? item.split('') : item))
-      .flat();
-
     return () => (
       <div className={'mb-[20px]'}>
-        {moneyStringList.map((item, index) => (
+        {(props.separator ? formatter(props.money) : props.money.toString())
-          <span key={index}>{item}</span>
+          .split(/(\d,)/g)
-        ))}
+          .filter((item) => item !== '')
+          .map((item) => (!item.includes(',') ? item.split('') : item))
+          .flat()
+          .map((item, index) => (
+            <span key={index}>{item}</span>
+          ))}
+        {/* {moneyStringList.value?.map((item, index) => <span key={index}>{item}</span>)} */}
       </div>
     );
   },

src/store/modules/community.ts

@@ -10,18 +10,19 @@ import {
 export const useCommunityStore = defineStore('communityStore', {
   state: () => ({
     // 设备总数
-    devicesList: [],
+    devicesList: { list: [], total: 0 },
     // 预警概览
     alarmOverviewList: [],
     // 统计列表
     statisticsList: [],
     // 设备状态
-    deviceStatus: { devcies: [], security: undefined },
+    deviceStatus: { devcies: [], security: 0 },
   }),
   actions: {
     /* 设备总数 */
     async fetchCommunityDevicesAmount() {
       const result = await getCommunityDevicesAmount();
+
       this.devicesList = result;
     },
     /* 预警概览 */

src/views/community/charts/conten-body-chart.tsx

@@ -7,7 +7,6 @@ import { debounceChart } from '@/utils/chart';
 let myChart = null;
 
 const option = ref<EChartsOption>({
-  grid: { top: 0, right: 0, bottom: -100, left: 0, containLabel: true },
   series: [
     {
       type: 'gauge',
@@ -48,8 +47,8 @@ const option = ref<EChartsOption>({
       },
       axisLabel: { show: false },
       detail: {
-        fontSize: 18,
+        fontSize: 24,
-        offsetCenter: [0, '-9%'],
+        offsetCenter: [0, '9%'],
         valueAnimation: true,
         formatter: function (value) {
           return Math.round(value * 100) + '\n安全指数';

src/views/community/charts/left-body-chart.tsx

@@ -50,15 +50,13 @@ export const renderBodyChart = (element: Ref<HTMLDivElement>) => {
 /** 更新图标数据 */
 export const updateBodyChart = (props: any) => {
   const series = myChart?.getOption()?.series;
-  series[0].data = props.list.map((item, index) => ({
+  series[0].data = props.list?.map((item, index) => ({
     name: item.name,
     value: item.value,
     itemStyle: { color: colors[index], borderRadius: 10 },
   }));
 
   const total = props.list.reduce((old, item) => old + item.value, 0);
-  //   const angleAxis = myChart?.getOption()?.angleAxis;
-  //   angleAxis[0].max = undefined;
 
   const title = myChart?.getOption()?.title;
   title[0].text = total;

src/views/community/components/community-left.vue

@@ -42,9 +42,9 @@ onMounted(() => {
     <div class="community__sidebar-item">
       <CommonPanel title="设备总数">
         <div class="community__sidebar-digital">
-          <DigitalNumber :money="1964" />
+          <DigitalNumber :money="devicesList?.total" />
 
-          <div v-for="(item, index) in devicesList" :key="index" class="progress-list">
+          <div v-for="(item, index) in devicesList?.list" :key="index" class="progress-list">
             <LeftHeaderChart
               :data-left="calculateDevicePercent(item.connect, item.outside)"
               :data-right="calculateDevicePercent(item.outside, item.connect)"
@@ -73,13 +73,15 @@ onMounted(() => {
     height: 100%;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
+    align-items: flex-end;
+    justify-content: space-around;
 
     .progress-list {
       display: flex;
       flex-direction: column;
       justify-items: center;
       margin: 14px 0 0 0;
+      width: 100%;
       color: #fff;
 
       :deep(.progress) {