diff --git a/mock/data-analyse.ts b/mock/data-analyse.ts new file mode 100644 index 0000000..f8b0f7d --- /dev/null +++ b/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: '操作成功', + }), + }, +]); diff --git a/package.json b/package.json index 83f8ebc..c9e122c 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "vehicle-monitor", + "name": "central-monitor", "private": true, "version": "1.0.0", "type": "module", diff --git a/src/api/dataAnalyse.ts b/src/api/dataAnalyse.ts new file mode 100644 index 0000000..56a8340 --- /dev/null +++ b/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'); +}; diff --git a/src/components/Progress/Progress1.vue b/src/components/Progress/Progress1.vue index 945d485..8ac6630 100644 --- a/src/components/Progress/Progress1.vue +++ b/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; } } diff --git a/src/layout/layout-header/components/layout-nav/LayoutHeaderNav.vue b/src/layout/layout-header/components/layout-nav/LayoutHeaderNav.vue index abd5d41..150f817 100644 --- a/src/layout/layout-header/components/layout-nav/LayoutHeaderNav.vue +++ b/src/layout/layout-header/components/layout-nav/LayoutHeaderNav.vue @@ -7,7 +7,7 @@ - 王菠萝 + 小兔子🐇 diff --git a/src/store/index.ts b/src/store/index.ts index 899e282..bd22d98 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -7,3 +7,5 @@ const store = createPinia(); export function setupStore(app: App) { app.use(store); } + +export { store }; diff --git a/src/store/modules/dataAnalyse.ts b/src/store/modules/dataAnalyse.ts new file mode 100644 index 0000000..ef50a5c --- /dev/null +++ b/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); +} diff --git a/src/views/data-analyse/charts/left-brand.ts b/src/views/data-analyse/charts/left-brand.ts index 8dadad4..234b38f 100644 --- a/src/views/data-analyse/charts/left-brand.ts +++ b/src/views/data-analyse/charts/left-brand.ts @@ -9,10 +9,7 @@ let myChart = null; const option = { tooltip: { trigger: 'item' }, - legend: { - top: 'bottom', - data: ['品牌A', '品牌B', '品牌C', '品牌D', '品牌E', '品牌F'], - }, + legend: { top: 'bottom', textStyle: { color: '#fff' } }, series: [ { name: '品牌占比', @@ -27,9 +24,7 @@ const option = { shadowColor: 'rgba(0, 0, 0, 0.5)', }, }, - label: { - formatter: '{b}: {c}%', - }, + label: { formatter: '{b}: {c}%', color: '#fff' }, data: [ { value: 10.89, name: '品牌A' }, { value: 30.89, name: '品牌B' }, @@ -57,9 +52,8 @@ export const renderEcharts = (element: Ref) => { }; /** 更新图表数据 */ -export const updateChart = (option: Array>) => { +export const updateChart = (data: any) => { const series = myChart.getOption().series; - // series[0].data = option[0]; - // series[1].data = option[1]; + series[0].data = data; myChart.setOption({ series }); }; diff --git a/src/views/data-analyse/components/data-analyse-left.vue b/src/views/data-analyse/components/data-analyse-left.vue index dea1384..6cc0b70 100644 --- a/src/views/data-analyse/components/data-analyse-left.vue +++ b/src/views/data-analyse/components/data-analyse-left.vue @@ -1,23 +1,39 @@ @@ -28,13 +44,15 @@ onMounted(() => {

销售设备总量(台)

- 环比去年增长 52% + 环比去年增长 {{ deviceSalesStats.yearlyGrowthRate }} % s
    -
  • {{ num }}
    • +
  • + {{ num }} +
@@ -43,7 +61,7 @@ onMounted(() => {
    -
  • +
  • {{ item.name }}