✨ feat: 中间图表未完成

mock/community.ts

@@ -6,7 +6,7 @@ const randomNumber = (range: number = 100) => {
 
 export default defineFakeRoute([
   {
-    url: 'community-statistics',
+    url: '/api/community/community-statistics',
     method: 'GET',
     response: () => ({
       code: 200,
@@ -14,25 +14,29 @@ export default defineFakeRoute([
         {
           name: '统计人口',
           total: randomNumber(9999),
-          subtitle: `${randomNumber()}%`,
+          subtitle: '常驻人口',
+          subPercent: `${randomNumber()}%`,
           subTotal: randomNumber(99999),
         },
         {
           name: '统计人口',
           total: randomNumber(9999),
-          subtitle: `${randomNumber()}%`,
+          subtitle: '常驻人口',
+          subPercent: `${randomNumber()}%`,
           subTotal: randomNumber(99999),
         },
         {
           name: '统计人口',
           total: randomNumber(9999),
-          subtitle: `${randomNumber()}%`,
+          subtitle: '常驻人口',
+          subPercent: `${randomNumber()}%`,
           subTotal: randomNumber(99999),
         },
         {
           name: '统计人口',
           total: randomNumber(9999),
-          subtitle: `${randomNumber()}%`,
+          subtitle: '常驻人口',
+          subPercent: `${randomNumber()}%`,
           subTotal: randomNumber(99999),
         },
       ],

src/api/community.ts

@@ -2,5 +2,5 @@ import request from '@/api/server/request';
 
 /* 社区统计 */
 export const getCommunityStatistics = () => {
-  return request.get('community-statistics');
+  return request.get('community/community-statistics');
 };

src/assets/styles/global.scss

@@ -4,6 +4,7 @@
 :root {
   --color-primary: #027AFF;
   --color-primary-1: #4F94E6;
+  --color-primary-2: #32C5FF;
   --color-primary-secondary: #00FFFF;
   --color-primary-secondary-1: #00FFFFB5;
   --color-success: #44D7B6;

src/assets/styles/minix/sidebar.scss

@@ -33,7 +33,7 @@
       height: 42px;
       font-size: 22px;
       color: #fff;
-      background: url('@/assets/images/business-supervision/bg/sidebar/bg-frame-4.png') no-repeat;
+      background: url('@/assets/images/common/bg/bg-frame-4.png') no-repeat;
       background-size: cover;
     }
 

src/components/DigitalNumber/DigitalNumber.tsx

@@ -0,0 +1,31 @@
+import { defineComponent } from 'vue-demi';
+
+import { formatter } from '@/utils/chart';
+
+/** 显示数字 */
+export default defineComponent({
+  name: 'DigitalNumber',
+  props: {
+    money: Number,
+    separator: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  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 () => (
+      <>
+        {moneyStringList.map((item, index) => (
+          <span key={index}>{item}</span>
+        ))}
+      </>
+    );
+  },
+});

src/store/modules/community.ts

@@ -9,8 +9,7 @@ export const useCommunityStore = defineStore('communityStore', {
   actions: {
     /* 社区统计 */
     async loadCommunityStatisticsList() {
-      const result = await getCommunityStatistics();
-      this.communityStatisticsList = result.data;
+      this.communityStatisticsList = await getCommunityStatistics();
     },
   },
 });

src/views/big-data/components/big-data-left/index.vue

@@ -2,7 +2,7 @@
 import { useIntervalFn } from '@vueuse/core';
 import { onMounted, ref } from 'vue';
 
-import { displayContent } from '@/components/PanelItem/DigitalNumber';
+import { displayContent } from '@/components/DigitalNumber/DigitalCurrency';
 import TimeSelect from '@/components/TimeSelect/index.vue';
 import { TimeSelectType } from '@/components/TimeSelect/type';
 import { formatter } from '@/utils/chart';

src/views/big-data/components/big-data-right/components/right-top.vue

@@ -1,7 +1,7 @@
 <script lang="tsx" setup>
 import { onMounted, ref } from 'vue';
 
-import { displayContent } from '@/components/PanelItem/DigitalNumber';
+import { displayContent } from '@/components/DigitalNumber/DigitalCurrency';
 import TimeSelect from '@/components/TimeSelect/index.vue';
 import { TimeSelectType } from '@/components/TimeSelect/type';
 import { renderEcharts } from '@/views/big-data/charts/right-header';

src/views/business-supervision/components/business-supervision-left/components/sidebar-left-top.vue

@@ -1,7 +1,7 @@
 <script lang="tsx" setup>
 import { onMounted, ref } from 'vue';
 
-import { displayContent } from '@/components/PanelItem/DigitalNumber';
+import { displayContent } from '@/components/DigitalNumber/DigitalCurrency';
 import TimeSelect from '@/components/TimeSelect/index.vue';
 import { TimeSelectType } from '@/components/TimeSelect/type';
 import { renderEcharts } from '@/views/business-supervision/charts/leftSidebarTop';

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

@@ -1,11 +1,205 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { storeToRefs } from 'pinia';
+import { onMounted } from 'vue';
+
+import { useCommunityStore } from '@/store/modules/community';
+import { getImage } from '@/utils/image';
+
+const BODY_CARD_LIST = ['大数据中心', '数字楼宇', '平台设备管理'];
+
+const communityStore = useCommunityStore();
+const { communityStatisticsList } = storeToRefs(communityStore);
+
+onMounted(() => {
+  communityStore.loadCommunityStatisticsList();
+});
+</script>
 
 <template>
-  <div class="community__content">community-content/index.vue</div>
+  <div class="community__content">
+    <header class="community__header">
+      <ul class="community__stats-list">
+        <li
+          v-for="(item, index) in communityStatisticsList"
+          :key="index"
+          class="community__stat-card"
+        >
+          <div class="community__stat-content">
+            <h1>{{ item.name }}</h1>
+            <h2>{{ item.total }}</h2>
+            <span>{{ item.subtitle }} {{ item.subPercent }}（{{ item.subTotal }}）</span>
+          </div>
+
+          <img :src="`/images/community/bg-card-${index + 1}.png`" alt="" />
+        </li>
+      </ul>
+    </header>
+
+    <main class="community__main">
+      <ul class="community__feature-list">
+        <li v-for="(item, index) in BODY_CARD_LIST" :key="index">
+          <img
+            :src="getImage(`/images/community/body-image-${index + 1}.png`)"
+            alt=""
+            class="animate__animated animate__pulse animate__infinite"
+          />
+          <span>{{ item }}</span>
+        </li>
+      </ul>
+
+      <div class="community__metrics">
+        <div class="community__metric-card">
+          <h1>80</h1>
+          <span>
+            设备
+            <br />
+            正常运行总数
+          </span>
+        </div>
+        <div class="community__metric-card">
+          <h1>20</h1>
+          <span>
+            设备
+            <br />
+            故障总数
+          </span>
+        </div>
+        <div class="community__instrument-panel">xxxx</div>
+        <div class="community__metric-card">
+          <h1>20</h1>
+          <span>
+            设备
+            <br />
+            故障总数
+          </span>
+        </div>
+        <div class="community__metric-card">
+          <h1>98%</h1>
+          <span>
+            设备
+            <br />
+            故障总数
+          </span>
+        </div>
+      </div>
+    </main>
+  </div>
 </template>
 
 <style lang="scss" scoped>
-.community__content {
-  background: #006bc5;
+/* 头部内容 */
+.community__header {
+  .community__stats-list {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .community__stat-card {
+    position: relative;
+    width: 209px;
+    height: 204px;
+    color: #fff;
+
+    img {
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+
+    .community__stat-content {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      padding: 20px;
+      height: 100%;
+      z-index: 1;
+
+      h1 {
+        font-size: 24px;
+      }
+
+      h2 {
+        font-size: 38px;
+      }
+
+      span {
+        font-size: 14px;
+      }
+    }
+  }
+}
+
+/* 中间层内容 */
+.community__main {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: 40px 0 0 0;
+  width: 100%;
+  height: 660px;
+  background: url('../images/bg-body.png') no-repeat;
+  background-size: contain;
+
+  /* 数据图片内容 */
+  .community__feature-list {
+    display: flex;
+    width: 100%;
+    height: 286px;
+
+    li {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 286px;
+      height: 286px;
+      color: var(--color-primary-2);
+      font-size: 24px;
+    }
+
+    img {
+      width: 230px;
+      height: 209px;
+    }
+  }
+
+  /* 仪表盘列表 */
+  .community__metrics {
+    margin: 44px 0 0 0;
+    width: 100%;
+    height: 170px;
+    display: flex;
+    justify-content: space-around;
+
+    /* 仪表盘周围内容 */
+    .community__metric-card {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      width: 105px;
+      height: 170px;
+      background: url('../images/bg-body-card.png');
+
+      h1 {
+        font-size: 40px;
+        color: var(--color-primary-secondary);
+      }
+
+      span {
+        font-size: 14px;
+        text-align: center;
+        color: #fff;
+      }
+    }
+
+    /* 中间仪表盘内容 */
+    .community__instrument-panel {
+      width: 286px;
+      height: 169px;
+      background: url('../images/bg-body-instrument-panel.png');
+    }
+  }
 }
 </style>

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

@@ -1,11 +1,16 @@
 <script lang="ts" setup>
+import DigitalNumber from '@/components/DigitalNumber/DigitalNumber';
 import CommonPanel from '@/views/community/components/CommonPanel.vue';
 </script>
 
 <template>
   <div class="community__sidebar">
     <div class="community__sidebar-item">
-      <CommonPanel title="智慧设备总数" />
+      <CommonPanel title="智慧设备总数">
+        <div class="community__sidebar-digital">
+          <DigitalNumber :money="1964" />
+        </div>
+      </CommonPanel>
     </div>
 
     <div class="community__sidebar-item">
@@ -16,6 +21,21 @@ import CommonPanel from '@/views/community/components/CommonPanel.vue';
 
 <style lang="scss" scoped>
 .community__sidebar {
-  //background: #fff;
+  &-digital {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+
+    :deep(span) {
+      float: left;
+      margin: 0 11px 0 0;
+      width: 64px;
+      height: 68px;
+      font-size: 50px;
+      line-height: 68px;
+      text-align: center;
+      background: url('@/views/community/images/digital-number.png');
+    }
+  }
 }
 </style>

src/views/community/index.vue

@@ -21,6 +21,6 @@ import CommunityRight from '@/views/community/components/community-right.vue';
   width: 100%;
   height: 100%;
 
-  @include view-style-default(530px, 759px, #0e5fff33);
+  @include view-style-default(530px, 926px, #0e5fff33);
 }
 </style>

src/views/smart-park/components/common/content-percent.vue

@@ -35,7 +35,7 @@ const calPercentItem = (percent: number): Element => {
   position: absolute;
   width: 86px;
   height: 86px;
-  background: url('@/views/smart-park/images/bg/bg-main-1.png') no-repeat center;
+  background: url('@/assets/images/common/bg/bg-main-2.png') no-repeat center;
   background-size: cover;
 }
 </style>