✨ 数据分析左侧完成

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/LayoutHeaderCommon.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
+import { useIntervalFn } from '@vueuse/core';
 import { onMounted, ref } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';
 
-import LayoutHeaderNav from '@/layout/layout-header/components/LayoutHeaderNav.vue';
+import LayoutHeaderNav from '@/layout/layout-header/components/layout-nav/LayoutHeaderNav.vue';
 import dayjs from '@/plugins/dayjs';
 import { resetRouter } from '@/router';
 
-const router = useRouter();
 const route = useRoute();
 
 const time = ref('');
@@ -14,7 +14,7 @@ const time = ref('');
 /** 显示时间 */
 const displayTime = () => {
   time.value = dayjs(new Date()).format('YYYY-MM-DD dddd HH:mm:ss');
-  setInterval(() => {
+  useIntervalFn(() => {
     time.value = dayjs(new Date()).format('YYYY-MM-DD dddd HH:mm:ss');
   }, 1000);
 };
@@ -26,18 +26,18 @@ onMounted(() => {
 
 <template>
   <header>
-    <div class="header-time c-primary">{{ time }}</div>
+    <div class="header-time">{{ time }}</div>
 
     <div class="header-title">
-      <h1>{{ route.meta.title }}</h1>
+      <h1 @click="resetRouter()">{{ route.meta.title }}</h1>
       <h2>{{ route.meta.subtitle }}</h2>
-      <img
+      <!--<img-->
-        alt="icon-setting"
+      <!--  alt="icon-setting"-->
-        class="ml-[-284px]"
+      <!--  class="ml-[-464px]"-->
-        src="../images/icon/icon-home.png"
+      <!--  src="../images/icon/icon-home.png"-->
-        @click="resetRouter()"
+      <!--  @click="resetRouter()"-->
-      />
+      <!--/>-->
-      <img alt="icon-home" class="ml-[284px]" src="../images/icon/icon-setting.png" />
+      <!--<img alt="icon-home" class="ml-[464px]" src="../images/icon/icon-setting.png" />-->
     </div>
 
     <LayoutHeaderNav />
@@ -47,7 +47,7 @@ onMounted(() => {
 <style lang="scss" scoped>
 header {
   position: relative;
-  height: 108px;
+  height: 80px;
   background: url('@/layout/layout-header/images/layout-header-2.png') no-repeat center;
   background-size: cover;
 }
@@ -55,7 +55,8 @@ header {
 .header-time {
   position: absolute;
   margin: 0 0 0 41px;
-  line-height: 60px;
+  line-height: 50px;
+  color: var(--color-info);
   font-size: 14px;
 }
 
@@ -65,11 +66,11 @@ header {
 
   img {
     position: absolute;
-    bottom: 0;
     left: 50%;
+    bottom: -14px;
     transform: translateX(-50%);
-    width: 60px;
+    width: 50px;
-    height: 60px;
+    height: 50px;
     object-fit: cover;
     z-index: 1;
     cursor: pointer;
@@ -77,14 +78,15 @@ header {
 
   h1 {
     color: #fff;
-    font-size: 42px;
+    font-size: 34px;
-    line-height: 60px;
+    line-height: 50px;
+    cursor: pointer;
   }
 
   h2 {
     color: var(--color-primary-secondary);
     font-size: 24px;
-    line-height: 45px;
+    line-height: 24px;
     font-weight: lighter;
   }
 }

src/layout/layout-header/components/LayoutHeaderHome.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useRoute } from 'vue-router';
 
-import LayoutHeaderNav from '@/layout/layout-header/components/LayoutHeaderNav.vue';
+import LayoutHeaderNav from '@/layout/layout-header/components/layout-nav/LayoutHeaderNav.vue';
 
 const route = useRoute();
 </script>

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

@@ -3,11 +3,11 @@
 <template>
   <div class="bar-op">
     <ul>
-      <li><img alt="icon-1" src="../images/icon/icon-1.png" /></li>
+      <!--<li><img alt="icon-1" src="../../images/icon/icon-1.png" /></li>-->
-      <li><img alt="icon-2" src="../images/icon/icon-2.png" /></li>
+      <!--<li><img alt="icon-2" src="../../images/icon/icon-2.png" /></li>-->
-      <li><img alt="icon-3" src="../images/icon/icon-3.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>
 
@@ -16,7 +16,7 @@
   display: flex;
   align-items: center;
   position: absolute;
-  top: 11px;
+  top: 4px;
   right: 20px;
   height: 36px;
 
@@ -33,7 +33,7 @@
   }
 
   span {
-    color: var(--color-primary);
+    color: var(--color-info);
     float: left;
     font-size: 12px;
     cursor: pointer;

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/community/charts/right-header.tsx

@@ -17,7 +17,7 @@ const option = ref<EChartsOption>({
     {
       name: '名称',
       type: 'pie',
-      radius: [14, 100],
+      radius: [14, 104],
       center: ['50%', '50%'],
       roseType: 'area',
       itemStyle: { borderRadius: 4 },

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">