应用驾驶舱接入金融机构前端规范文档

一、项目概述

复制代码

 本项目是一个数据可视化大屏，用于展示平台的关键指标和数据，接入金融机构大屏时样式和页面风格尽量向主驾驶舱靠齐。

二、技术栈

Vue3：用于构建用户界面的渐进式 JavaScript 框架。
TypeScript：为 JavaScript 添加类型系统的超集，提高代码的可维护性和可读性。
Ant Design Vue：基于 Ant Design 设计体系的 Vue UI 组件库，提供丰富的组件和美观的样式。
ECharts：用于数据可视化的图表库，支持多种图表类型。

三、项目结构

bash 复制代码

	src/

	├── assets/               # 静态资源，如图片、样式文件等

	├── components/           # 公共组件

	│   ├── Charts/           # 图表组件，如柱状图、折线图、饼图等

	│   ├── DataList/         # 数据列表组件

	│   └── ...               # 其他公共组件

	├── composables/          # 组合式函数，用于封装业务逻辑

	├── router/               # 路由配置
        
        ├── styles/               # 公共样式封装

	├── stores/               # Pinia 状态管理

	├── utils/                # 工具函数
        
        │   └── request.ts        # axios拦截器封装

	├── views/                # 页面组件

	│   └── Dashboard.vue     # 大屏主页面

	├── App.vue               # 根组件

	├── main.ts               # 入口文件

	└── vite.config.ts        # 构建配置

四、开发规范

4.1 样式规范

整体风格 ：采用深色背景（如 #001529），搭配亮色（如蓝色 #1890ff）突出关键信息。
卡片布局 ：使用 Ant Design Vue 的 Card 组件作为信息展示的基本单元，设置合适的边距和圆角。
图表样式：根据图表类型和数据特点，选择合适的颜色和样式，确保图表清晰易读。
响应式设计 ：使用 Ant Design Vue 的栅格系统（Row 和 Col）实现响应式布局，确保大屏在不同分辨率下都能正常显示。

4.2 组件开发规范

组件命名 ：采用 PascalCase 命名方式，如 OrderAnalysisChart。
Props 定义：使用 TypeScript 接口定义组件的 Props，确保类型安全。

ini 复制代码

typescript
	interface OrderAnalysisChartProps {

	  data: {

	    date: string[];

	    orderCount: number[];

	    customerCount: number[];

	  };

	}

Emits 定义：明确组件触发的事件及其参数类型。

arduino 复制代码

typescript
	const emit = defineEmits<{

	  (e: 'chartClick', data: any): void;

	}>();

组合式函数：将复杂的业务逻辑封装成组合式函数，提高代码复用性。

4.3 数据管理规范

状态管理：使用 Pinia 进行状态管理，将全局状态存储在 Store 中。

markdown 复制代码

typescript
	// stores/dashboard.ts

	import { defineStore } from 'pinia';

	 

	export const useDashboardStore = defineStore('dashboard', {

	  state: () => ({

	    入驻机构数: 0,

	    年度服务订单数: 0,

	    // 其他状态...

	  }),

	  actions: {

	    fetchData() {

	      // 异步获取数据并更新状态

	    }

	  }

	});

API 请求 ：使用 Axios，将请求逻辑封装在 api 目录下的模块中。

4.4 图表开发规范

图表初始化 ：在组件的 mounted 生命周期钩子中初始化图表，确保 DOM 元素已挂载。

markdown 复制代码

typescript
	import * as echarts from 'echarts';

	 

	const chartRef = ref<HTMLElement | null>(null);

	let chartInstance: echarts.ECharts | null = null;

	 

	onMounted(() => {

	  if (chartRef.value) {

	    chartInstance = echarts.init(chartRef.value);

	    // 设置图表配置项

	    chartInstance.setOption({

	      // 图表配置...

	    });

	  }

	});

	 

	onBeforeUnmount(() => {

	  if (chartInstance) {

	    chartInstance.dispose();

	  }

	});

图表配置：根据数据和需求，配置图表的标题、图例、坐标轴、系列等选项。
响应式调整 ：监听窗口大小变化，调用 chartInstance.resize() 方法调整图表大小。

4.5 数据列表开发规范

列表组件 ：使用 Ant Design Vue 的 Table 组件展示数据列表，配置合适的列和分页。且数据过多支持无缝滚动，可以通过css动画实现

markdown 复制代码

vue
	<template>

	  <a-table

	    :columns="columns"

	    :data-source="data"

	    :pagination="pagination"

	  />

	</template>

	 

	<script setup lang="ts">

	const columns = [

	  {

	    title: '机构名称',

	    dataIndex: 'name',

	    key: 'name'

	  },

	  // 其他列...

	];

	 

	const data = [

	  {

	    key: '1',

	    name: '中信银行重庆分行',

	    type: '银行',

	    joinTime: '2024-12-20'

	  },

	  // 其他数据...

	];

	 

	const pagination = {
ji
	  pageSize: 10,

	  current: 1,

	  total: data.length

	};

	</script>

五、大屏页面常见一些样式

机构分屏尺寸大小：设计尺寸是1920*1080px,支持响应式设计。即自适应尺寸
大屏整体颜色设计：整体背景色色号为：#0f283f，文字颜色：#ffffff,标题字体大小24px,echarts图表字体颜色#ffffff,色号18px，要求字体清晰可见。
参考驾驶舱样式
本驾驶舱一些样式

六、测试与部署

构建与部署：使用 Vite 进行项目构建，生成静态文件，部署到服务器上。