基于Vue2 + Vite + Vuex + Vue-router + Axios实现的可视化大屏开发框架+安装使用说明

# 云洄脚手架 本框架大致有以下三种使用者 1. 框架维护者 2. 组件开发者 3. 看板搭建者 三个角色互相依赖，并且缺一不可 框架维护者需要关注全局，大部分工作在 `/src/components/core`和`/src/module/core`文件夹下进行 组件开发者需要关注`/src/components/`，在其中除了`core`文件夹中开发组件 看板搭建者主要关注`/src/dashborads`，在其中使用组件开发者的组件搭建看板内容 ## 目录结构 ``` │ App.vue │ main.js ├─api // 全局axios封装 │ │ index.js │ └─modules │ HomeApi.js ├─assets // 组件内 import引入的静态资源文件，目前决定静态资源图片统一放置到 | | // `public/assets/projects/yantai`目录下 │ ├─picImgs │ ├─projects │ │ └─yantai ├─components // 系统内组件 │ │ index.js // 统一注册 │ ├─business // 业务组件 │ ├─core // 核心组件 │ │ container.vue │ │ containerLayout.vue │ │ containerMixin.js │ │ wrapper.vue │ │ │ ├─gisMap // 地图组件 │ └─pool // 可复用的组件池 │ └─children // 组件池中可复用的子组件 │ ├─dashboards // 看板配置目录 │ │ capabilityBase.js // 某个看板 │ │ componentDemo.js // 另一个看板 │ │ demo.js │ │ demo1.js │ ├─dashboard1 // 看板配置较多用文件夹包裹 │ └─getWay // 同理 │ ├─module // 组件类 │ │ Action.js // 事件类 │ │ Echart.js // 图表类 │ │ Filter.js // 过滤类 │ │ Pic.js // 图片类 │ │ ReadMe.md │ │ TextField.js // 文本类 │ │ │ └─core // 核心类 │ BaseComponent.js // 所有组件的基类 │ Container.js // 看板容器类 ├─router // 配置路由，用于显示views中的页面 ├─store // 全局存储 ├─style // 通用样式 │ │ index.scss │ │ variables.scss // 变量 │ └─element-ui │ │ element-variables.scss // 覆写element-ui的变量 │ └─components // 覆写element-ui的组件class | button.scss // 同名的组件scss ├─utils // 工具函数 └─views // 页面入口 ``` ## business业务组件目录介绍 ## 技术栈 vite-vue2 > ### Vue2 + Vite + Vuex + Vue-router + Axios > #### USE > ``` npm install ``` > #### RUN ``` npm run serve ``` > #### BUILD ``` npm run build:prod ``` ## 数据大屏 数据大屏的开发有以下几个问题需要明确并解决 - 缩放问题 - 大屏缩放 - 组件缩放 - popover缩放 - 组件问题 - 组件数量多，需要阶段性沉淀 - 组件注册繁琐 - 样式问题 - 看板的主题色 - 组件样式重复&冲突 - 组件字体 - 数据问题（此处不讨论统一查询接口） - 接口数据，数据格式转换 - 多个后端环境的切换 - 交互联动问题 - 明确数据流与查询方式 - 性能问题 - 响应式数据的取舍 - 大数据量优化 本项目作为样例工程，旨在解决数据大屏开发过程中的通用性问题 最终通过 开发通用组件 + 编写组件配置的形式形成数据大屏 市面上的可视化工具非常多，他们也许能解决70%的问题，但是剩余的30%会使使用者非常困惑，所以选择手动开发，早日完成定制化项目~ ## 使用说明 本项目基于目录结构约定开发的行为 1. 编写可视化组件 2. 编写组件类 3. 编写看板配置 4. 编写控件（数据过滤查询） ### 编写可视化组件 vue组件中的`name`属性必填，须和文件名一致 推荐在`/src/components/pool/`文件夹下以 `.vue` 单文件形式（SFC）编写`通用组件` 推荐在`/src/components/business/`文件夹下以 `.vue` 单文件形式（SFC）编写`业务组件` `pool`和`business` 目录下的`vue`组件会被自动注册为全局组件 ### 编写组件类 组件类为非必须，只有在`BaseComponent`无法满足的情况下需要编写 推荐在`/src/module/`文件夹下以大驼峰命名组件的`module`，class的形式可以避免很多不必要的错误 ### 编写看板配置 看板配置是整个看板的结构化描述，在云洄中以可视化编辑的形式存在，但在此开发框架中需要自己手动填写 ```js // 最简单的组件例子 new BaseComponent(b('graph', 300, 400, 900, 300, null, {method: 'get', url: 'http://172.38.110.228:30032/api/v1/pieGraph'})) ``` `b`函数做了两件事 1. 位置参数转换为对象，方便class解构 2. 合并多余的对象参数，方便组件类解构，支持设置组件的上下层级，详见`demo.js` #### 组件层级 组件的层级关系在声明组件列表时会`隐式地从下到上层叠`，只需要声明时注意顺序就可以避免层叠的问题，`{zIndex: 2}`或者`{'z-index': 2}`只是另一个显式的解决办法 推荐在`/src/dashboards/`文件夹下参照 `demo.js` 编写 ### 编写控件 控件的存在用于过滤数据，在此类看板项目中，数据的流转不做复杂设置 大概有以下三种方式 1. 以看板为整体，控件设置看板状态，组件监听状态做自身的数据刷新 2. 组件之间以订阅发布（pubsub）做相互的消息传递 3. 使用发布订阅模式，使组件之间具有订阅关系 为了项目的简易上手，选择前两种作为示例，第三种可以自行发挥 注意点 1. 控件必须以 class `Filter`作为实例化来源，在组件列表声明后会通过`Container`类初始化联动关系 2. 联动关系会自动在 `mixin.js` 中初始化联动逻辑 3. 控件的编写需要使用类似以下代码对联动的组件进行消息传递 ```js this.pubsub.publish(id, { component: {[filterKey]: e} }); ``` ### 事件关联 本章节中需要了解系统内的交互核心`pubsub`，基于此实现了组件之间的互相订阅和发布消息。 所有组件基于配置在mixin.js中订阅消息，控件基于关联组件配置发送消息 一般由发起方配置关联组件即可，接收方会自动添加订阅关系 ```js // mixin.js中订阅 this.pubsub.subscribe(id, (msg, data) => {}) // 组件发布消息 this.pubsub.publish(id, data); ``` 一对多关联配置 #### 参数过滤 必须使用Filter类包装，且必须的一个参数 - relatedWidgets 其中的filterKey是自身定义的，可以是其他的 ```js // 参数过滤 // 配置文件 config new Filter(b('selectFilter', 200, 80, 300, 100, {filterKey: 'name',relatedWidgets: ['echart-1','echart-2']}, null)), // 控件 selectFilter change(e) { let {id, option: { filterKey }} = this.instance; // 发送消息 this.pubsub.publish(id, { [filterKey]: e }); } // 订阅在组件mixin中统一处理了 ``` #### 组件显隐 必须的三个参数 - relatedWidgets - showWidgets - actionType: Action.SHOW ```js new Action(b('tabs', 210, 27, 130, 75, { relatedWidgets: ['cardata-statisticCard-5', 'cardata-statisticCard-6'], showWidgets: [['cardata-statisticCard-5'], ['cardata-statisticCard-6']], actionType: Action.SHOW, isShowArrow: false, tabData: [{ label: '进烟车辆', key: 0, }, { label: '出烟车辆', key: 1, }, ] })) // tab组件发送消息 this.pubsub.publish(id, { component: this.activeComponents }); ``` #### 组件移动 必须的三个参数 - relatedWidgets - moveTo - actionType ```js // 边栏收放按键，7 new Action(b('retractLay', 650, 70, -64, 1010, { relatedWidgets: ['dynamicComponent-8', 'dynamicComponent-9', 'pic-10', 'popDialog-11'], moveTo: [[-500, 114], [1925, 114], [1925, 114], [1925, 123]], actionType: Action.MOVE })), // 控件 retractLay zhankaiFn() { this.zhankai = !this.zhankai; let {id,option: { relatedWidgets, moveTo }} = this.instance; // 发送消息 this.pubsub.publish(id, mergeArraysToObject(relatedWidgets, moveTo)); } ``` #### 初始化事