✨ 数据分析左侧完成

mock/data-analyse.ts

@@ -0,0 +1,59 @@
+import { defineFakeRoute } from 'vite-plugin-fake-server';
+
+const randomNumber = (range: number = 100) => {
+  return parseInt((Math.random() * range).toFixed(0));
+};
+const BASE_URL = '/mock/data-analyse';
+
+export default defineFakeRoute([
+  // 销售设备总量
+  {
+    url: `${BASE_URL}/device-sales-stats`,
+    method: 'GET',
+    response: () => ({
+      code: 200,
+      data: {
+        // 销售设备总量
+        totalDeviceSales: randomNumber(9999),
+        // 环比去年增长，如 "+15.2%"
+        yearlyGrowthRate: randomNumber(),
+      },
+      message: '操作成功',
+    }),
+  },
+  // 销售公司销售设备数量占比
+  {
+    url: `${BASE_URL}/company-sales-distribution`,
+    method: 'GET',
+    response: () => ({
+      code: 200,
+      data: [
+        { name: '科技有限公司', amount: randomNumber(999999), percent: randomNumber() },
+        { name: '科技有限公司', amount: randomNumber(999999), percent: randomNumber() },
+        { name: '科技有限公司', amount: randomNumber(999999), percent: randomNumber() },
+        { name: '科技有限公司', amount: randomNumber(999999), percent: randomNumber() },
+        { name: '科技有限公司', amount: randomNumber(999999), percent: randomNumber() },
+      ],
+      message: '操作成功',
+    }),
+  },
+  // 品牌占有率
+  {
+    url: `${BASE_URL}/brands-distribution`,
+    method: 'GET',
+    response: () => ({
+      code: 200,
+      data: [
+        { value: randomNumber(), name: '品牌A' },
+        { value: randomNumber(), name: '品牌B' },
+        { value: randomNumber(), name: '品牌C' },
+        { value: randomNumber(), name: '品牌D' },
+        { value: randomNumber(), name: '品牌E' },
+        { value: randomNumber(), name: '品牌F' },
+        { value: randomNumber(), name: '品牌G' },
+        { value: randomNumber(), name: '品牌H' },
+      ],
+      message: '操作成功',
+    }),
+  },
+]);

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "vehicle-monitor",
+  "name": "central-monitor",
   "private": true,
   "version": "1.0.0",
   "type": "module",

src/api/dataAnalyse.ts

@@ -0,0 +1,16 @@
+import request from '@/api/server/requestMock';
+
+/* 销售设备总量 */
+export const getDeviceSalesStats = () => {
+  return request.get('data-analyse/device-sales-stats');
+};
+
+/* 销售公司销售设备数量占比 */
+export const getCompanySalesDistribution = () => {
+  return request.get('data-analyse/company-sales-distribution');
+};
+
+/* 品牌占有率 */
+export const getBrandsDistribution = () => {
+  return request.get('data-analyse/brands-distribution');
+};

src/components/Progress/Progress1.vue

@@ -18,10 +18,13 @@ defineProps({
   width: 100%;
   height: 11px;
   border: 1px solid var(--color-primary-secondary);
+  border-radius: 2px;
 
   &-inner {
     height: 100%;
+    border-radius: 4px;
     background: var(--color-primary);
+    transition: all 0.4s;
   }
 }
 </style>

src/layout/layout-header/components/layout-nav/LayoutHeaderNav.vue

@@ -7,7 +7,7 @@
       <!--<li><img alt="icon-2" src="../../images/icon/icon-2.png" /></li>-->
       <!--<li><img alt="icon-3" src="../../images/icon/icon-3.png" /></li>-->
     </ul>
-    <span class="hover">王菠萝</span>
+    <span class="hover">小兔子🐇</span>
   </div>
 </template>
 

src/store/index.ts

@@ -7,3 +7,5 @@ const store = createPinia();
 export function setupStore(app: App<Element>) {
   app.use(store);
 }
+
+export { store };

src/store/modules/dataAnalyse.ts

@@ -0,0 +1,43 @@
+import { defineStore } from 'pinia';
+
+import {
+  getBrandsDistribution,
+  getCompanySalesDistribution,
+  getDeviceSalesStats,
+} from '@/api/dataAnalyse';
+
+import { store } from '..';
+
+export const useDataAnalyseStore = defineStore('dataAnalyseStore', {
+  state: () => ({
+    // 销售设备总量
+    deviceSalesStats: {
+      totalDeviceSales: 0,
+      yearlyGrowthRate: 0,
+    },
+    // 销售公司销售设备数量占比
+    companySalesDistribution: [],
+    // 品牌占有率
+    brandsDistribution: [],
+  }),
+  actions: {
+    /* 销售设备总量 */
+    async fetchDeviceSaesStats() {
+      this.deviceSalesStats = await getDeviceSalesStats();
+    },
+
+    /* 销售公司销售设备数量占比 */
+    async fetchCompanySalesDistribution() {
+      this.companySalesDistribution = await getCompanySalesDistribution();
+    },
+
+    /* 品牌占有率 */
+    async fetchBrandsDistribution() {
+      this.brandsDistribution = await getBrandsDistribution();
+    },
+  },
+});
+
+export function useDataAnalyseHook() {
+  return useDataAnalyseStore(store);
+}

src/views/data-analyse/charts/left-brand.ts

@@ -9,10 +9,7 @@ let myChart = null;
 
 const option = {
   tooltip: { trigger: 'item' },
-  legend: {
+  legend: { top: 'bottom', textStyle: { color: '#fff' } },
-    top: 'bottom',
-    data: ['品牌A', '品牌B', '品牌C', '品牌D', '品牌E', '品牌F'],
-  },
   series: [
     {
       name: '品牌占比',
@@ -27,9 +24,7 @@ const option = {
           shadowColor: 'rgba(0, 0, 0, 0.5)',
         },
       },
-      label: {
+      label: { formatter: '{b}: {c}%', color: '#fff' },
-        formatter: '{b}: {c}%',
-      },
       data: [
         { value: 10.89, name: '品牌A' },
         { value: 30.89, name: '品牌B' },
@@ -57,9 +52,8 @@ export const renderEcharts = (element: Ref<HTMLDivElement>) => {
 };
 
 /** 更新图表数据 */
-export const updateChart = (option: Array<Array<number>>) => {
+export const updateChart = (data: any) => {
   const series = myChart.getOption().series;
-  // series[0].data = option[0];
+  series[0].data = data;
-  // series[1].data = option[1];
   myChart.setOption({ series });
 };

src/views/data-analyse/components/data-analyse-left.vue

@@ -1,23 +1,39 @@
 <script lang="ts" setup>
+import { useIntervalFn } from '@vueuse/core';
+import { storeToRefs } from 'pinia';
 import { onMounted, ref } from 'vue';
 
 import Progress1 from '@/components/Progress/Progress1.vue';
-import { renderEcharts } from '@/views/data-analyse/charts/left-brand';
+import { useDataAnalyseHook } from '@/store/modules/dataAnalyse';
+import { renderEcharts, updateChart } from '@/views/data-analyse/charts/left-brand';
 import PanelTitle from '@/views/data-analyse/components/PanelTitle.vue';
 
-const brandChartRef = ref();
+const dataAnalyseStore = useDataAnalyseHook();
-const deviceTotal = ref('1010');
+const { deviceSalesStats, companySalesDistribution, brandsDistribution } =
+  storeToRefs(dataAnalyseStore);
 
-const companyList = [
+/* 初始化数据获取 */
-  { name: '科技有限公司', amount: 18888, percent: '40' },
+const initAppData = async () => {
-  { name: '科技有限公司', amount: 18888, percent: '50' },
+  // 销售设备总量
-  { name: '科技有限公司', amount: 18888, percent: '10' },
+  dataAnalyseStore.fetchDeviceSaesStats();
-  { name: '科技有限公司', amount: 18888, percent: '80' },
+  // 销售公司销售设备数量占比
-  { name: '科技有限公司', amount: 18888, percent: '50' },
+  dataAnalyseStore.fetchCompanySalesDistribution();
-];
+  // 品牌占有率
+  await dataAnalyseStore.fetchBrandsDistribution();
+
+  // 更新图表
+  updateChart(brandsDistribution.value);
+};
+
+const brandChartRef = ref();
 
 onMounted(() => {
   renderEcharts(brandChartRef);
+  initAppData();
+
+  useIntervalFn(() => {
+    initAppData();
+  }, 1000);
 });
 </script>
 
@@ -28,13 +44,15 @@ onMounted(() => {
       <div>
         <h1 class="font-size-[21px]">销售设备总量(台)</h1>
         <div class="data-analyse-left__top-percent">
-          <span>环比去年增长 52%</span>
+          <span>环比去年增长 {{ deviceSalesStats.yearlyGrowthRate }} %</span>
           <i class="i-mdi-trending-up">s</i>
         </div>
       </div>
 
       <ul class="flex">
-        <li v-for="(num, index) in deviceTotal" :key="index">{{ num }}</li>
+        <li v-for="(num, index) in deviceSalesStats.totalDeviceSales.toString()" :key="index">
+          {{ num }}
+        </li>
       </ul>
     </div>
 
@@ -43,7 +61,7 @@ onMounted(() => {
       <PanelTitle title="销售公司销售设备数量占比" />
 
       <ul>
-        <li v-for="(item, index) in companyList" :key="index">
+        <li v-for="(item, index) in companySalesDistribution" :key="index">
           <div class="data-analyse-left__center-info">
             <span>{{ item.name }}</span>
             <div class="info-left">