Merge branch 'sqy_dev' into 'main'

'fix:調整首頁租戶消息量進度條'

See merge request huang/yun-teng-iot-front!98

@@ -56,8 +56,79 @@
     </div>
     </div>
 
 
     <Card v-else :bordered="false" :bodyStyle="{ padding: 0 }" v-bind="$attrs">
     <Card v-else :bordered="false" :bodyStyle="{ padding: 0 }" v-bind="$attrs">
+      <h1 style="color: rgba(0, 0, 0, 0.85); font-weight: bold; font-size: 16px">
+        租户消息量TOP10</h1
+      >
       <Empty v-if="!tenantTop10.length" />
       <Empty v-if="!tenantTop10.length" />
-      <div style="width: 100%; height: 390px" ref="top10Ref"></div>
+      <Descriptions :column="1">
+        <template v-for="(item, index) in tenantTop10" :key="item.name">
+          <DescriptionsItem>
+            <span
+              class="mr-2"
+              style="
+                width: 1.25rem;
+                height: 1.25rem;
+                border: 1px solid;
+                color: #0b55f1;
+                border-radius: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+              "
+              :style="{
+                color:
+                  index === 0
+                    ? '#f0a16e'
+                    : index === 1
+                    ? '#868585'
+                    : index === 2
+                    ? '#e78739'
+                    : '#4e84f5',
+                backgroundColor:
+                  index === 0 ? '#FAD672' : index === 1 ? '#CBCAC9' : index === 2 ? '#F1B889' : '',
+                borderColor:
+                  index === 0
+                    ? '#fdee7d'
+                    : index === 1
+                    ? '#e6e6e5'
+                    : index === 2
+                    ? '#f8c296'
+                    : '#0b55f1;',
+              }"
+              >{{ index + 1 }}</span
+            >
+            <div class="flex justify-between" style="width: 100%">
+              <span>
+                {{ item.name }}
+              </span>
+              <div class="flex w-7/10">
+                <Progress
+                  :showInfo="false"
+                  size="small"
+                  style="width: 70%"
+                  :percent="item.count / 10000"
+                  :strokeWidth="12"
+                  :strokeColor="
+                    index === 0
+                      ? '#ea5b42'
+                      : index === 1
+                      ? '#666'
+                      : index === 2
+                      ? '#e4751a'
+                      : '#b5b6b6'
+                  "
+                />
+                <span
+                  class="ml-2"
+                  :style="{ color: index === 0 ? '#EA5B42' : index === 2 ? '#E4751A' : '#666' }"
+                >
+                  {{ item.count }}
+                </span>
+              </div>
+            </div>
+          </DescriptionsItem>
+        </template>
+      </Descriptions>
       <h1 style="color: rgba(0, 0, 0, 0.85); font-weight: bold; font-size: 16px">
       <h1 style="color: rgba(0, 0, 0, 0.85); font-weight: bold; font-size: 16px">
         本月即将过期租户</h1
         本月即将过期租户</h1
       >
       >
@@ -68,7 +139,7 @@
 
 
 <script lang="ts">
 <script lang="ts">
   import { defineComponent, ref, computed, onMounted } from 'vue';
   import { defineComponent, ref, computed, onMounted } from 'vue';
-  import { Card, Anchor, List, Avatar, Empty } from 'ant-design-vue';
+  import { Card, Anchor, List, Avatar, Empty, Descriptions, Progress } from 'ant-design-vue';
   import { useUserStore } from '/@/store/modules/user';
   import { useUserStore } from '/@/store/modules/user';
   import { getEnterPriseDetail } from '/@/api/oem';
   import { getEnterPriseDetail } from '/@/api/oem';
   import { notifyMyGetrPageApi } from '/@/api/stationnotification/stationnotifyApi';
   import { notifyMyGetrPageApi } from '/@/api/stationnotification/stationnotifyApi';
@@ -77,7 +148,6 @@
   import { BasicTable, useTable } from '/@/components/Table';
   import { BasicTable, useTable } from '/@/components/Table';
   import { isAdmin } from '/@/enums/roleEnum';
   import { isAdmin } from '/@/enums/roleEnum';
   import { getTenantExpireTimeList, getTenantTop10 } from '/@/api/dashboard';
   import { getTenantExpireTimeList, getTenantTop10 } from '/@/api/dashboard';
-  import { useECharts } from '/@/hooks/web/useECharts';
   export default defineComponent({
   export default defineComponent({
     components: {
     components: {
       Card,
       Card,
@@ -87,9 +157,12 @@
       List,
       List,
       ListItem: List.Item,
       ListItem: List.Item,
       ListItemMeta: List.Item.Meta,
       ListItemMeta: List.Item.Meta,
+      Descriptions,
+      DescriptionsItem: Descriptions.Item,
       Avatar,
       Avatar,
       Time,
       Time,
       BasicTable,
       BasicTable,
+      Progress,
     },
     },
     props: {
     props: {
       role: {
       role: {
@@ -168,38 +241,9 @@
         return userStore.enterPriseInfo?.qrCode;
         return userStore.enterPriseInfo?.qrCode;
       });
       });
       const tenantTop10 = ref<{ name: string; count: number }[]>([]);
       const tenantTop10 = ref<{ name: string; count: number }[]>([]);
-      const top10Ref = ref<HTMLDivElement | null>(null);
-      const { setOptions } = useECharts(top10Ref as Ref<HTMLDivElement>);
       onMounted(async () => {
       onMounted(async () => {
         if (isAdmin(props.role)) {
         if (isAdmin(props.role)) {
           tenantTop10.value = await getTenantTop10();
           tenantTop10.value = await getTenantTop10();
-          const tenantName = tenantTop10.value.map((item) => item.name);
-          const tenantCount = tenantTop10.value.map((item) => item.count);
-          setOptions({
-            xAxis: {},
-            title: {
-              text: '租户消息量TOP10',
-            },
-            yAxis: {
-              type: 'category',
-              data: tenantName,
-              inverse: true,
-            },
-            grid: {
-              containLabel: true,
-              left: '0%',
-            },
-            series: [
-              {
-                type: 'bar',
-                data: tenantCount,
-                label: {
-                  show: true,
-                  position: 'right',
-                },
-              },
-            ],
-          });
           return;
           return;
         }
         }
         const notice = await notifyMyGetrPageApi({ page: 1, pageSize: 5 });
         const notice = await notifyMyGetrPageApi({ page: 1, pageSize: 5 });
@@ -221,7 +265,6 @@
         go,
         go,
         registerTable,
         registerTable,
         isAdmin,
         isAdmin,
-        top10Ref,
       };
       };
     },
     },
   });
   });