monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by 王涛
Commit 19748eac743c74a9bc8a73fa2284a0d0fc32f7ff 0 parents

初始化最新的aj-report

Inline Side-by-side
Showing 100 changed files with 1522 additions and 0 deletions

Too many changes to show.
Reload with full diff Plain diff Email patch

To preserve performance only 100 of 100+ files are displayed.

## Online experience
####   Computer online experience: [https://report.anji-plus.com/](https://report.anji-plus.com/ "链接")  account：guest password：guest
#### &emsp; Online documents: [https://report.anji-plus.com/report-doc/](https://report.anji-plus.com/report-doc/ "doc")<br>
#### &emsp; issues: [https://gitee.com/anji-plus/report/issues](https://gitee.com/anji-plus/report/issues "issue")
## Function overview
#### &emsp; Component introduction
&emsp;&emsp; （AJ-Report）is a visual drag edit, intuitive, cool, with a sense of science and technology chart tool full open source project.
The built-in basic functions include data source, data set, report management, and some screenshots of the project are shown below.。<br>
## Packaging directory
```
├── bin
│ ├── logs
│ ├── cache
│ ├── startup.cmd
│ ├── shutdown.cmd
│ ├── startup.sh
│ └── shutdown.sh
├── config
├── lib
├── target
```
## System directory
```
├── doc
│ ├── docs
│ ├── package.json
│ └── README.md
├── pom.xml
├── report-core
│ ├── pom.xml
│ └── README.md
├── report-ui
├── LICENSE
├── README.md
```
## Short term plan
#### &emsp; Enrich more chart components
## technical support
If you have any questions, please submit to [Issue](https://gitee.com/anji-plus/report/issues)
#### Open source is not easy, please, star ☺
... ...
## 简介
&emsp; &emsp; AJ-Report是全开源的一个BI平台，酷炫大屏展示，能随时随地掌控业务动态，让每个决策都有数据支撑。<br>
&emsp; &emsp; 多数据源支持，内置mysql、elasticsearch、kudu驱动，支持自定义数据集省去数据接口开发，目前已支持20种大屏组件/图表，不会开发，照着设计稿也可以制作大屏。<br>
&emsp; &emsp; 三步轻松完成大屏设计：配置数据源---->写SQL配置数据集---->拖拽配置大屏---->保存发布。欢迎体验。
## 在线体验
#### &emsp; [在线体验](https://report.anji-plus.com/index.html "链接"): https://report.anji-plus.com/index.html &emsp;体验账号：guest 密码：guest
#### &emsp; [在线文档](https://report.anji-plus.com/report-doc/ "doc"): https://report.anji-plus.com/report-doc/ <br>
#### &emsp; [在线提问](https://gitee.com/anji-plus/report/issues "issue"): https://gitee.com/anji-plus/report/issues <br>
## 发行版本
#### &emsp; [下载链接](https://gitee.com/anji-plus/report/releases "下载链接"): https://gitee.com/anji-plus/report/releases <br>
## 功能概述
#### &emsp; 组件介绍
&emsp;&emsp; 大屏设计（AJ-Report）是一个可视化拖拽编辑的，直观，酷炫，具有科技感的图表工具全开源项目。 内置的基础功能包括数据源，数据集，报表管理，项目部分截图如下。<br>
![操作](https://images.gitee.com/uploads/images/2021/0703/094742_c0243f70_1728982.gif "2021-07-03_09-43-50.gif")
![视频](https://report.anji-plus.com/report-doc/static/Rhea.mp4) <br>
**[更多社区大屏案例](https://report.anji-plus.com/report-doc/guide/bigScreenCase.html)** <br>
## 数据流程图
![An image](https://images.gitee.com/uploads/images/2021/0630/160451_31bb9052_1728982.png)
## 打包目录build
```
├── bin 启动命令脚本
│ ├── restart.sh
│ ├── start.bat
│ ├── start.sh
│ └── stop.sh
├── conf 配置文件目录
│ └── bootstrap.yml
├── logs 启动日志目录
├── cache 本地缓存目录
├── lib 自定义扩展包&report-core核心包
```
## 系统目录
```
├── doc 文档源码
│ ├── docs
│ ├── package.json
│ └── README.md
├── pom.xml 父pom，jar版本管理
├── report-core java源码
│ ├── pom.xml gaea父pom，jar版本管理
│ └── README.md
├── report-ui 前端vue源码
├── LICENSE
├── README.md
```
## 核心技术
### 依赖
- [Mysql] 5.7
- [Jdk] 1.8
### 后端
- [Spring Boot2.3.5.RELEASE](https://spring.io/projects/spring-boot/): Spring Boot是一款开箱即用框架，让我们的Spring应用变的更轻量化、更快的入门。
在主程序执行main函数就可以运行。你也可以打包你的应用为jar并通过使用java -jar来运行你的Web应用；
- [Mybatis-plus3.3.2](https://mp.baomidou.com/): MyBatis-plus（简称 MP）是一个 MyBatis (opens new window) 的增强工具。
- [flyway5.2.1](https://flywaydb.org/): 主要用于在你的应用版本不断升级的同时，升级你的数据库结构和里面的数据
### 前端
- [npm](https://www.npmjs.com/)：node.js的包管理工具，用于统一管理我们前端项目中需要用到的包、插件、工具、命令等，便于开发和维护。
- [webpack](https://webpack.docschina.org/)：用于现代 JavaScript 应用程序的静态模块打包工具。
- [ES6](https://es6.ruanyifeng.com/)：JavaScript的新版本，ECMAScript6的简称。利用ES6我们可以简化我们的JS代码，同时利用其提供的强大功能来快速实现JS逻辑。
- [vue-cli](https://cli.vuejs.org/)：Vue的脚手架工具，用于自动生成Vue项目的目录及文件。
- [vue-router](https://router.vuejs.org/)： Vue提供的前端路由工具，利用其我们实现页面的路由控制，局部刷新及按需加载，构建单页应用，实现前后端分离。
- [element-ui](https://element.eleme.cn/#/zh-CN)：基于MVVM框架Vue开源出来的一套前端ui组件。
- [avue](https://www.avuejs.com/): 用该组件包裹后可以变成拖拽组件，采用相对于父类绝对定位，用键盘的上下左右也可以控制移动。
- [vue-echarts](https://www.npmjs.com/package/vue-echarts/): vue-echarts是封装后的vue插件，基于 ECharts v4.0.1+ 开发。
- [vue-superslide](https://www.npmjs.com/package/vue-super-slider/): Vue-SuperSlide(Github) 是 SuperSlide 的 Vue 封装版本。
- [vuedraggable](https://github.com/SortableJS/Vue.Draggable/): 是一款基于Sortable.js实现的vue拖拽插件。
- [luckysheet](https://gitee.com/mengshukeji/Luckysheet): Luckysheet ，一款纯前端类似excel的在线表格，功能强大、配置简单、完全开源。
## 编译打包
在Linux上先准备好maven、node.js、jdk
- [Apache Maven] 3.5 <br>
- [Node.js] v14.16.0 <br>
- [Jdk] 1.8
```
git clone https://gitee.com/anji-plus/report.git
cd report
sh build.sh
编译完成放在build文件夹 aj-report-xxxx.zip
unzip aj-report-xxxx.zip
cd aj-report-xxxx
vim conf/bootstrap.yml 修改数据库连接等信息
sh bin/start.sh Linux启动
bin/start.bat Windows修改第4行的JAVA_HOME后(去掉rem注释)，双击启动
启动后访问
http://serverip:9095
```
**[运行环境参考文档](https://report.anji-plus.com/report-doc/guide/quicklyDevelop.html)** <br>
**[源码编译部署参考文档](https://report.anji-plus.com/report-doc/guide/quicklySource.html)** <br>
**[发行版部署参考文档](https://report.anji-plus.com/report-doc/guide/quicklyDistribution.html)** <br>
**[前后端分离部署参考文档](https://report.anji-plus.com/report-doc/guide/quicklySeparate.html)** <br>
## 操作手册
新建数据源（重置mysql数据源） --> 新建数据集（编写sql） --> 新建大屏（设计大屏） <br>
**[在线文档](https://report.anji-plus.com/report-doc/guide/datasource.html)**
## SQL初始化
sql文件的目录在：report-core --> src --> main --> resources -- > db.migration <br>
系统初始化时flyway会自动的将该目录下的sql文件执行，不需要手动执行sql文件。 <br>
执行完将会创建 aj_report（存放系统基础数据） 和 aj_report_init（存放示例数据） 俩个库。 <br>
## 谁在使用
希望你们的logo出现在此，[请点此Issue进行登记](https://gitee.com/anji-plus/report/issues/I3ZXT4) ，我们将优先进行技术支持 <br>
<a href='http://www.anji-plus.com/'> <img src="https://report.anji-plus.com/file/download/d287d4d3-d30b-4850-9bac-a6c991409251" width = "130" height = "50" align=left/> </a>
<a href='https://www.yunstech.cn/'><img src="https://www.yunstech.cn/images/logo.png" width = "130" height = "50" /> </a>
<a href='http://www.fgkb.net/'><img src="https://report.anji-plus.com/file/download/9ee5b709-5033-4cd5-a784-ebd2877fd373" width = "130" height = "50" /> </a>
<a href='http://www.turingoal.com/'><img src="https://report.anji-plus.com/file/download/cda7bf68-376b-45dc-9a55-c52b21e4a8c8" width = "130" height = "50" /> </a>
<a href='https://www.gykjweb.com/'><img src="https://report.anji-plus.com/file/download/d13b03f5-0c20-4878-9a79-f3c76b44bfd9" width = "130" height = "130" /> </a> <br>
<a href='http://www.plian.net/'><img src="https://report.anji-plus.com/file/download/7838f2c2-fdce-4ca7-8373-14d13dcda5cc" width = "130" height = "50" /> </a>
<a href='https://www.zjjcl.cn/'><img src="https://report.anji-plus.com/file/download/8df07663-60c9-4e32-a0f2-0ea7d5c46ff9" width = "130" height = "50" /> </a>
## 未来计划
- 大屏宽高动态可视化
- nodeV16适配
- 增加省市区地图等图
- 增加基础边框样式
- Execl报表功能增加与bug修复
## 已知问题
- IE白屏（兼容性问题）
## 版本问题
已知以下版本存在兼容性问题
- Node.js V16
- openJdk
- Jdk 11
- Mysql 8.0（8.0.23/26版本没有问题，8.0.21版本存在问题）
**[常见问题](https://report.anji-plus.com/report-doc/guide/question.html)**
## 商业授权
AJ-Report使用[Apache2.0开源协议](http://www.apache.org/licenses/LICENSE-2.0.html) <br>
个人和企业，在直接使用、二次开发后商业使用，需要遵守：
- 包含AJ-Report LICENSE文件（授权使用者免费使用AJ-Report专利和知识产权）
- 如果修改了代码，需要在被修改的文件中说明
- 在修改和有源代码衍生的代码中，需要带有原来代码中的协议，商标
- 在二次开发后商业发布的产品中，使用了多个开源软件，则必须包含一个Notice文件，在Notice文件中需要带有AJ-Report LICENSE。你可以在Notice中增加自己的许可，但不可以表现为对AJ-Report
LICENSE构成更改。
如果您需要商业化增值服务，请加下面的微信沟通。
## 技术支持
**如有问题，请提交 [Issue](https://gitee.com/anji-plus/report/issues) <br>**
个人企业微信：<br>
<img src="https://images.gitee.com/uploads/images/2021/0729/130901_1672e6c5_7492051.jpeg" width = "200" height = "200" align=left/>
#### 开源不易，劳烦各位star ☺
... ...
#!/bin/bash
#判断node.js mvn是否存在
command -v npm >/dev/null 2>&1 || { echo >&2 "I require node.js v14.16.0+ but it's not installed. Aborting."; sleep 5; exit 1; }
command -v mvn >/dev/null 2>&1 || { echo >&2 "I require maven 3.5 + but it's not installed. Aborting."; sleep 5; exit 1; }
cd `dirname $0`
BuildDir=`pwd` #工程根目录
echo "build web"
cd $BuildDir/report-ui
npm install >/dev/null 2>&1
npm run build:prod >/dev/null 2>&1
echo "publish web to springboot src/main/resources/static"
mkdir -p $BuildDir/report-core/src/main/resources/static
mv $BuildDir/report-ui/dist/* $BuildDir/report-core/src/main/resources/static/
echo "build springboot"
cd $BuildDir/report-core
mvn clean >/dev/null 2>&1
mvn package -Dmaven.test.skip=true >/dev/null 2>&1
echo "zip finish in build dir"
if [ ! -d "$BuildDir/build" ]; then
mkdir $BuildDir/build
fi
mv $BuildDir/report-core/target/aj-report-*.zip $BuildDir/build/
rm -rf $BuildDir/report-core/src/main/resources/static/*
... ...
.DS_Store
node_modules/
dist/
../.idea/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
package-lock.json
yarn.lock
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
... ...
## 文档
文档基于vue-press实现，运行步骤：
1. npm install
2. npm run docs:dev
3. http://localhost:8080
... ...
module.exports = {
base: '/report-doc/',
title: 'AJ-Report',
description: '使用拖拽快速生成动态大屏报表',
dest: 'dist',
lastUpdated: 'Last Updated',
theme: '',
themeConfig: {
logo: '/logo.png',
smoothScroll: true,
sidebarDepth: 2,
nav: [
{text: '首页', link: '/'},
{text: '指南', link: '/guide/'},
{text: 'GitHub', link: 'https://github.com/anji-plus/report'},
{text: 'Gitee', link: 'https://gitee.com/anji-plus/report'},
{text: '谁在使用', link: '/guide/briefUsing'},
{text: '更多案例', link: '/guide/bigScreenCase'},
],
sidebar: {
'/guide/': [
{
title: '介绍',
collapsable: false,
children: [
{title: '简介', path: '/guide/'},
{title: '谁在使用', path: '/guide/briefUsing'},
{title: '技术支持', path: '/guide/briefSupport'},
{title: '更多案例', path: '/guide/bigScreenCase'},
]
},
{
title: '快速入门',
collapsable: false,
children: [
{title: '开发环境', path: '/guide/quicklyDevelop'},
{title: '发行版部署', path: '/guide/quicklyDistribution'},
{title: '源码部署', path: '/guide/quicklySource'},
{title: '前后端分离', path: '/guide/quicklySeparate'},
]
},
{
title: '用户权限',
collapsable: false,
children: [
{title: '权限管理', path: '/guide/authmanager'},
]
},
{
title: '操作手册',
collapsable: false,
children: [
{title: '数据源', path: '/guide/datasource'},
{title: '数据集', path: '/guide/dataset'},
{title: '报表管理', path: '/guide/reportmanager'},
{title: '大屏报表', path: '/guide/dashboard'},
{title: '表格报表', path: '/guide/execl'},
{title: '导入导出', path: '/guide/importexport'},
{title: '图表组件', path: '/guide/charts'},
]
},
{
title: '其他',
collapsable: false,
children: [
{title: '常见问题', path: '/guide/question'}
]
},
{
title: '社区提供',
collapsable: false,
children: [
{title: '说明', path: '/guide/community/report'},
{title: '搭建AJ-Report开发环境', path: '/guide/community/AC1688/搭建aj-report开发环境'}
]
}
],
}
},
plugins: [
['@vuepress/back-to-top', true],
],
configureWebpack: {
resolve: {
alias: {
'@': '/.vuepress/public'
}
}
}
}
... ...
// placeholder for test, dont't remove it.
//.content {
// font-size 30px;
//}
pre.vue-container
border-left-width: .5rem;
border-left-style: solid;
border-color: #42b983;
border-radius: 0px;
& > code
font-size: 14px !important;
& > p
margin: -5px 0 -20px 0;
code
background-color: #42b983 !important;
padding: 3px 5px;
border-radius: 3px;
color #000
em
color #808080
font-weight light
\ No newline at end of file
... ...
---
home: true
heroImage: /logo.png
actionText: 快速开始 →
actionLink: /guide/
footer: Apache 2.0 Licensed | Copyright © 2021 Anji-Plus Report All Rights Reserved
---
<div style="text-align: center">
</div>
<div class="features">
<div class="feature">
<h2>技术先进</h2>
<p>使用最流行的技术SpringBoot、Vue、Element。</p>
</div>
<div class="feature">
<h2>丰富组件</h2>
<p>是一个包含前后端代码实现，同时支持动态扩展数据源.</p>
</div>
<div class="feature">
<h2>功能完善</h2>
<p>支持多数据源，多数据集，丰富的大屏组件实现拖拽生成大屏</p>
</div>
</div>
... ...
&emsp; &emsp; AJ-Report是一个完全开源的BI平台，酷炫大屏展示，能随时随地掌控业务动态，让每个决策都有数据支撑。<br>
&emsp; &emsp; 多数据源支持，内置mysql、elasticsearch、kudu等多种驱动，支持自定义数据集省去数据接口开发，目前已支持20种大屏组件/图表，不会开发，照着设计稿也可以制作大屏。<br>
&emsp; &emsp; 三步轻松完成大屏设计：配置数据源---->写SQL配置数据集---->拖拽配置大屏---->保存发布。欢迎体验。
## 系统特性
1. 最新最稳定的技术栈；
2. 支持多数据源配置
3. 丰富的大屏组件。拖拽配置实现动态大屏
## 在线体验
#### &emsp; [在线体验](https://report.anji-plus.com/index.html "链接"): https://report.anji-plus.com/index.html &emsp;体验账号：guest 密码：guest
#### &emsp; [在线文档](https://report.anji-plus.com/report-doc/ "doc"): https://report.anji-plus.com/report-doc/ <br>
#### &emsp; [在线提问](https://gitee.com/anji-plus/report/issues "issue"): https://gitee.com/anji-plus/report/issues <br>
## 发行版本
#### &emsp; [下载链接](https://gitee.com/anji-plus/report/releases "下载链接"): https://gitee.com/anji-plus/report/releases <br>
## 功能概述
#### &emsp; 组件介绍
&emsp;&emsp; 大屏设计（AJ-Report）是一个可视化拖拽编辑的，直观，酷炫，具有科技感的图表工具全开源项目。 内置的基础功能包括数据源，数据集，报表管理，项目部分截图如下。<br>
![操作](https://images.gitee.com/uploads/images/2021/0703/094742_c0243f70_1728982.gif "2021-07-03_09-43-50.gif")
![视频](https://report.anji-plus.com/report-doc/static/Rhea.mp4) <br>
**[更多社区大屏案例](https://report.anji-plus.com/report-doc/guide/bigScreenCase.html)** <br>
## 数据流程图
![An image](https://images.gitee.com/uploads/images/2021/0630/160451_31bb9052_1728982.png)
## 打包目录
```
├── bin 启动命令脚本
│ ├── restart.sh
│ ├── start.bat
│ ├── start.sh
│ └── stop.sh
├── conf 配置文件目录
│ └── bootstrap-dev.yml
├── logs 启动日志目录
├── cache 本地缓存目录
├── lib 自定义扩展包&report-core核心包
```
## 系统目录
```
├── doc 文档源码
│ ├── docs
│ ├── package.json
│ └── README.md
├── pom.xml 父pom，jar版本管理
├── report-core java源码
│ ├── pom.xml gaea父pom，jar版本管理
│ └── README.md
├── report-ui 前端vue源码
├── LICENSE
├── README.md
```
... ...
## 新增用户
![img](../picture/authmanager/img.png) <br>
![img](../picture/authmanager/img_1.png) <br>
新增用户的默认密码是在bootstrap.yml文件中配置的 <br>
![img](../picture/authmanager/img_2.png) <br>
## 用户授权
**注意**：新建用户完成后需要给用户授权，否则新用户登陆是啥也看不到。<br>
![img](../picture/authmanager/img_3.png) <br>
![img](../picture/authmanager/img_4.png) <br>
**注**：这里没有给新用户赋予默认角色的原因是，在角色管理中角色是可以被删除和修改的，因此在新建用户时需要手动的去授权角色 <br>
## 角色管理
![img](../picture/authmanager/img_5.png) <br>
## 权限分配
为角色分配权限，可看已有角色示例 <br>
![img](../picture/authmanager/img_6.png) <br>
## 导入导出权限
**注**：现在guest用户的权限是底层写死只有访问权限，无实质操作权限。<br>
导入导出的权限是在 角色 --> 分配权限中控制。 <br>
![img](../picture/authmanager/img_7.png) <br>
用户绑定了角色，角色则绑定了权限，是这样一层关系。 <br>
... ...
## 案例一：
由社区 **[~无痕~@tengzhouboy](https://gitee.com/tengzhouboy)** 提供 <br>
[AJ-Report分享链接](https://report.anji-plus.com/index.html#/aj/mtwbjPot) <br>
![img.png](../picture/bigScreenCase/img.png) <br>
... ...
**如有问题，请提交 [Issue](https://gitee.com/anji-plus/report/issues) <br>**
**微信群: <br>**
![weixin.png](../picture/weixin.jpg)
#### 开源不易，劳烦各位star ☺
\ No newline at end of file
... ...
希望你们的logo出现在此，[请点此Issue进行登记](https://gitee.com/anji-plus/report/issues/I3ZXT4) <br>
<a href='http://www.anji-plus.com/'> <img src="https://report.anji-plus.com/file/download/d287d4d3-d30b-4850-9bac-a6c991409251" width = "130" height = "50" align=left/> </a>
<a href='https://www.yunstech.cn/'><img src="https://www.yunstech.cn/images/logo.png" width = "130" height = "50" /> </a>
<a href='http://www.fgkb.net/'><img src="https://report.anji-plus.com/file/download/9ee5b709-5033-4cd5-a784-ebd2877fd373" width = "130" height = "50" /> </a>
<a href='http://www.turingoal.com/'><img src="https://report.anji-plus.com/file/download/cda7bf68-376b-45dc-9a55-c52b21e4a8c8" width = "130" height = "50" /> </a>
<a href='http://www.plian.net/'><img src="https://report.anji-plus.com/file/download/7838f2c2-fdce-4ca7-8373-14d13dcda5cc" width = "130" height = "50" /> </a>
<a href='https://www.gykjweb.com/'><img src="https://report.anji-plus.com/file/download/d13b03f5-0c20-4878-9a79-f3c76b44bfd9" width = "130" height = "130" /> </a>
... ...
## 图表和数据集之间的关系
图表和数据集是强关联关系，一个图表需要什么样的数据才能进行展示下面都有说明，以柱状图举例，只能用俩个字段的数据集进行数据展示，那使用数据集有2个以上字段那肯定图表无法正常展示，反之有个数据集是3个字段，那就找能展示3个字段的图表，千万别搞小聪明定了好多个字段的数据集，然后从里面挑几个字段进行展示，不要在么干。<br>
## 文本框
![img_3.png](../picture/dashboard/img_3.png) <br>
![img_4.png](../picture/dashboard/img_4.png) <br>
![img_5.png](../picture/dashboard/img_5.png) <br>
![img_6.png](../picture/dashboard/img_6.png) <br>
### 数据格式
![img1](../picture/charts/img.png) <br>
## 滚动文本
同上文本，操作无异 <br>
## 超链接
![img2](../picture/charts/img_1.png) <br>
**如有问题，请提交 [Issue](https://gitee.com/anji-plus/report/issues) <br>**
## 当前时间
已支持多种时间格式，其他格式请提Issue <br>
![img_1.png](../picture/dashboard/img_1.png) <br>
## 图片
![img_7.png](../picture/dashboard/img_7.png) <br>
**注：** 如果没有在bootstrap.yml配置文件中没有正确配置上传下载的路径，这里肯定是失败的 <br>
## 视屏
**暂不支持循环播放**<br>
**注意视频的地址应是直接可以访问的，不需要登录之类** <br>
## 表格
![img](../picture/dashboard/img_22.png) <br>
表格字段对应的数据只选择“文本数字”。<br>
![img14](../picture/dashboard/img_23.png) <br>
**注意：** 多个字段的时候，需要在“配置-新增”添加你选择数据集所对应的字段，类似于映射关系。 <br>
**如有问题，请提交 [Issue](https://gitee.com/anji-plus/report/issues) <br>**
## 内联框架
当超链接和视频链接无效的时候，请尝试使用内联框架<br>
## 柱状图
柱状图数据集对应字典值需要选择一个“X轴”、“柱状”，只需要2个字段 <br>
**如有问题，请提交 [Issue](https://gitee.com/anji-plus/report/issues) <br>**
### 数据格式
![img3](../picture/charts/img_2.png) <br>
## 柱形图-渐变色
同上柱形图，颜色调整为支持渐变色 <br>
## 折线图
折线图数据集对应字典值需要选择一个“X轴”、“折线”，只需要2个字段 <br>
![img_8.png](../picture/dashboard/img_8.png) <br>
**如有问题，请提交 [Issue](https://gitee.com/anji-plus/report/issues) <br>**
### 数据格式
同上柱形图数据格式 <br>
## 柱线图
柱线图数据集对应字典值需要选择一个“X轴”、“柱状”、“折线”，需要3个字段 <br>
![img9](../picture/dashboard/img_9.png) <br>
**如有问题，请提交 [Issue](https://gitee.com/anji-plus/report/issues) <br>**
### 数据格式
![img5](../picture/charts/img_4.png) <br>
## 饼图
饼图的数据集选择的时候，只能选择饼图对应的字典，即“Name”、“Value”，不明白可以参考静态数据 <br>
![img8](../picture/charts/img_8.png) <br>
![img9](../picture/charts/img_9.png) <br>
**如有问题，请提交 [Issue](https://gitee.com/anji-plus/report/issues) <br>**
### 数据格式
![img6](../picture/charts/img_5.png) <br>
## 漏斗图
![img13](../picture/dashboard/img_13.png) <br>
**如有问题，请提交 [Issue](https://gitee.com/anji-plus/report/issues) <br>**
### 数据格式
和饼图数据格式一致。<br>
## 仪表盘
![img21](../picture/dashboard/img_21.png) <br>
**如有问题，请提交 [Issue](https://gitee.com/anji-plus/report/issues) <br>**
### 数据格式
![img7](../picture/charts/img_6.png) <br>
## 中国地图
迁徙图暂不支持动态数据 <br>
## 南丁格尔玫瑰图
![img71](../picture/charts/img_7.png) <br>
![img10](../picture/charts/img_10.png) <br>
**如有问题，请提交 [Issue](https://gitee.com/anji-plus/report/issues) <br>**
### 数据格式
和饼图数据格式保持一致。 <br>
## 百分百图
![img16](../picture/dashboard/img_16.png) <br>
**如有问题，请提交 [Issue](https://gitee.com/anji-plus/report/issues) <br>**
### 数据格式
和仪表盘数据格式保持一致。<br>
## 气泡地图
气泡地图是中国地图气泡样式展示形式 <br>
气泡地图动态数据集，和饼图一样，对应字典值需要选择一个“Name”、“Value”，且name的字段值要和echarts图表里面的值能对应上，可参考静态数据 <br>
![img15](../picture/dashboard/img_15.png) <br>
## 柱状堆叠图
动态的数据集对应字典值需要选择一个“X轴”、“Y轴”、“柱状”，也就是说需要3个字段，不明白可以看看静态数据 <br>
![img.17](../picture/dashboard/img_17.png) <br>
**如有问题，请提交 [Issue](https://gitee.com/anji-plus/report/issues) <br>**
## 数据格式
![img4](../picture/charts/img_3.png) <br>
## 折线堆叠图
动态的数据集对应字典值需要选择一个“X轴”、“Y轴”、“折线”，也就是说需要3个字段，不明白可以看看静态数据 <br>
![img.17](../picture/dashboard/img_17.png) <br>
**如有问题，请提交 [Issue](https://gitee.com/anji-plus/report/issues) <br>**
### 数据格式
和柱状堆叠图数据格式保持一致。<br>
## 柱状对比图
数据集需要3个字段，其中一个作为对比的字段只能为2种值，只有2种值作为对比的字段要选择“y轴字段”字典。因为底层的解析用的是堆叠图的解析，这里的y轴字段并不是指的图表上面的y轴，还请注意，有强迫症可以自行修改源码的解析，剩下的2个字段对应字典看图<br>
![img18](../picture/dashboard/img_18.png) <br>
**如有问题，请提交 [Issue](https://gitee.com/anji-plus/report/issues) <br>**
### 数据格式
![img11](../picture/charts/img_11.png) <br>
## 折线对比图
数据集需要3个字段，其中一个作为对比的字段只能为2种值，只有2种值作为对比的字段要选择“y轴字段”字典，剩下的字典对应看图<br>
![img19](../picture/dashboard/img_19.png) <br>
**注**：如果提示语设置选择“十字形”，请注意需要选择 “X轴颜色、上Y轴颜色、下Y轴颜色”，不然预览图表鼠标选择是全白色，还请注意。<br>
![img20](../picture/dashboard/img_20.png)
**如有问题，请提交 [Issue](https://gitee.com/anji-plus/report/issues) <br>**
### 数据格式
和柱状对比图数据格式一致。<br>
## 装饰饼图
装饰用，可单独使用或者配合文本框等图表组件来使整个大屏立体、丰满。<br>
![img12](../picture/charts/img_12.png) <br>
\ No newline at end of file
... ...
**搭建aj-report开发环境**
# 工具版本
参考
[Mysql] 5.7
[Jdk] 1.8
[Spring Boot] 2.3.5
[Mybatis-plus] 3.3.2
[flyway] 5.2.1
[Apache Maven] 3.5
[Node.js] 14.16.0
[Windows 10]
实际
Mysql 5.7.34
JDK 1.8u291
IdeaJ 2020.2.1
Spring Boot DTD
Maven 3.5.4
Windows7
Git 2.33.0 x64
Node 13.14.0-x64
Vscode 1.59.0
# 环境准备
共分前端、公共、后端。
## 后端
### Mysql
下载mysql数据库
下载地址
<https://dev.mysql.com/downloads/installer/>
步骤，【选择安装类型】（即Choosing a Setup Type），选择【仅服务器】（即Server
only）
步骤，【类型和网络】（即Type and Networking），选择【开发电脑】（即Development
Computer）
步骤，【账户和角色】（即Account and Roles），root密码设置为root。
步骤，【Windows服务】（即Windows
Service），勾选【配置MySQL服务作为一个Windows服务】（即Configure MySQL Server as
a Windows Service）。
除以上外，都采用默认，一直下一步，直至安装完成。
### JDK
采用默认安装，一直下一步，直至完成。
配置环境变量
JAVA_HOME C:\\Program Files\\Java\\jdk1.8.0_291
### IdeaJ
采用默认安装，一直下一步，直至完成。
### Maven
下载地址
https://dlcdn.apache.org/maven/maven-3/3.5.4/binaries/
将压缩包解压到路径：C:\\Program Files\\
添加环境变量M2_HOME C:\\Program Files\\apache-maven-3.5.4
（旧版变量写法：MAVEN_HOME）
调整Path环境变量，增加 ;%M2_HOME%C:\\bin
### 插件
IdeaJ安装spring boot开发插件
已自带，不用再安装。
安装lombok
## 公共
### Git
#### 安装
采用默认安装，一直下一步，直至完成。
#### 拉代码
为idea指定git路径
默认情况下，IDEA是不自带git运行程序的，所以需要通过
菜单-\>settings-\>Version Control-\>Git-\>Path to Git executable:
设置为安装git中所安装的git.exe
获取gitee上面的要拉取项目的url，即页面左上方【可隆/下载】，单击选择【复制】，即可获得url。
在ideaj中，选择路径，file -\> new -\> Project from Version Control -\> Git，
将url复制到URL后的方框，
选择本地目录（即Directory）
点击【Clone】，开始拉代码。
## 前端
### Node
采用默认安装，一直下一步，直至完成。
### Vscode
步骤，【选择附件任务】，勾选【添加到PATH（重启后生效）】
其余采用默认安装，一直下一步，直至完成。
# 开发环境
## 后端
新建文件夹用于存放后端代码C:\\ijproj，将git下载的代码解压至该目录。
### 下载源码
具体步骤见Git2.2.1.2拉代码
### 依赖插件
下载依赖和插件。Git完代码后，会自动下载依赖和插件。如果pom中的依赖和插件爆红。可设置maven，File
——\> Settings。找到Maven，相关的三项设置，包括：Maven home directory、User
settings file、Local repository，可直接使用默认设置。
遇到个别顽固爆红的依赖和插件，可以直接在本地资料库.m2\\repository中查找，确认是否已经下载。确认已经下载的话，则可以尝试在该依赖或者插件中增加版本号（与资料库中的一致，org.springframework.boot对应的路径
资料库路径\\org\\springframework\\boot，spring-boot-maven-plugin对应上述路径的子文件夹spring-boot-maven-plugin，此文件夹即spring-boot-maven-plugin的子文件夹是版本号2.3.5.RELEASE，打开2.3.5.RELEASE就是对应的jar包等内容）。
### 设置Mysql
设置好mysql，以便运行时，自动进行初始化。
配置文件路径：/src/main/resources/bootstrap.yml，在此文件中找到datasource
mysql的配置信息，修改IP地址为mysql所在机器的IP，调整用户密码。本文中为本地即localhost或者用127.0.0.1，用户为root，密码为root。
### 运行后端
确认启动了Mysql服务
然后运行后端程序
## 前端
### 下载源码
新建文件夹C:\\vsproj用于存放前端项目源码
下载源码，在vscode使用【ctrl】+【\`】或者【Terminal】-\>【New
Terminal】。用cd命令进入相应的文件夹。
执行git clone https://gitee.com/anji-plus/report.git，拉代码。
### 设置环境
调整配置文件，配置文件路径REPORT-UI/config/dev.env.js，调整BASE_API后URL地址中的IP、端口。若都在同一台电脑，直接使用IP：127.0.0.1，端口使用默认9095。
（连接后端的IP，改为后端API代码所在的IP、所使用的端口。）
### 编译运行
在vscode使用【ctrl】+【\`】或者【Terminal】-\>【New
Terminal】。用cd命令进入前端代码文件夹，执行如下命令：
命令一：cd C:\\vsproj\\report\\report-ui
命令二：npm init -y
命令三：npm install
命令四：npm run dev
命令四执行后，启动了前端，在浏览器中输入http://localhost:9528/\#/login
## 启动
启动顺序：确保数据库启动、确保后端启动、最后启动前端
1确保mysql已经启动
2运行后端代码
3运行前端代码
4浏览器输入http://localhost:9528/\#/login
用户：admin
密码：123456
# 错误
## 问题一
遇到Error creating bean with name 'flywayInitializer' defined in class path
resource解决办法
将这个Resolved
locally后面的**版本号复制**下来，连着符号一起复制，然后找到你数据库中的**flyway_schema
\_history**这个表，在最下面那一行数据中把刚刚复制的版本号替换进去就可以了。
## 问题二
问题现象：报表设计界面中看不到图表，
查看日志，Access denied for user 'ajreport'@'localhost' (using password: YES)
在系统【数据源】中调整设置，将IP、用户、密码等调整为在用的。
默认用户ajreport，密码ajreport
改为初始化时的，用户root，密码root
... ...
# 社区用户提交文档PR的简易说明
## 提交位置
doc -- > docs --> guide -- > community 目录 <br>
![img](../../guide/community/report/img.png) <br>
## 具体操作
- 请在community目录下新建属于你自己的文件目录，命名方式可以使用自己在gitee的名字作为命名，注意中文命名可能会存在的一些问题。<br>
- 在你的个人目录下，你可以新建MD文件，需要用到图片可以直接放一个目录，如果md多，图片也多，建议再建下级目录存放。<br>
最后别忘了在config.js中添加配置，如图示。<br>
![img](../../guide/community/report/img_1.png) <br>
... ...
## 设计大屏
进入大屏设计方法1： <br>
从报表管理模块选择需要设计的大屏，按图示进入大屏设计界面 <br>
![img](../picture/dashboard/img22.png) <br>
进入大屏设计方法2： <br>
从大屏报表模块选择需要设计的大屏，按图示进入大屏设计界面 <br>
![img](../picture/dashboard/img23.png) <br>
## 大屏简介
![img_2.png](../picture/dashboard/img_2.png) <br>
## 工具栏
![img24](../picture/dashboard/img_24.png) <br>
## 图层
![img25](../picture/dashboard/img_25.png) <br>
... ...
![img5](../picture/dateset/img_5.png)
## SQL数据集
### Mysql数据集
在数据源处添加了mysql的数据源后，即可使用。<br>
![img_1.png](../picture/dateset/img_1.png) <br>
### ES数据集
**注**：es是通过调用xpack-sql，注意写法 <br>
![es.png](../picture/dateset/img.png) <br>
### Kudu数据集
![kudu.png](../picture/dateset/img_2.png) <br>
## 功能栏
**可以看在线环境，有示例参考** <br>
### 查询参数
![img3](../picture/dateset/img_3.png) <br>
注意参数名要和sql(请求体)中变量名保持一致，sql(请求体)中的变量用 ${} 表示 <br>
高级规则是用js进行数据装换。
### 数据转换
#### js脚本
**注**：这里的JS是java的scriptengine执行的，很多es6的语法不支持 <br>
![img4](../picture/dateset/img_4.png) <br>
入参是data，返回值也必须是data，中间是JS的处理过程，注意入参返回都是List<JSONObject>，记得保存。 <br>
#### 字典项
场景有限，待补充。
## HTTP数据集
即原有http数据源的功能，原有http数据源不动
\ No newline at end of file
... ...
## 介绍
- 支持多数据源，内置mysql、elasticsearch、kudu等多种驱动 <br>
- 可动态扩展
![source.png](../picture/datasource/img_1.png)
## 数据源类型
查看已有的数据源类型 <br>
![img2](../picture/datasource/img_2.png) <br>
![img3](../picture/datasource/img_3.png) <br>
```text
可以在此页面进行新增数据源配置，也可以去数据库中增加你需要的数据源类型。
表aj_report.gaea_dict_item，字段dict_code：SOURCE_TYPE
表aj_report.gaea_dict_item, item_extend字段是下拉选择后动态表单渲染的json数据
```
## 操作
- 只有测试通过的数据源才可以保存
![An image](../picture/datasource/img.png)
## 扩展
- 以kudu impala 为例，在lib文件夹下加入kudu impala相关的JDBC连接相关的包，如图在数据库中新增数据源类型，参考数据源类型(上方)
![An image](../picture/datasource/kudu-impala-lib.png)
... ...
# 介绍
execl报表基于Luckysheet开发，[Luckysheet](https://gitee.com/mengshukeji/Luckysheet) 一款纯前端类似excel的在线表格，功能强大、配置简单、完全开源。
**注意：** execl报表目前只是简单集成，如果你遇到了一些问题请在此[Issue](https://gitee.com/anji-plus/report/issues/I4CEWV) 下面进行回复。<br>
## 表格报表设计
进入表格设计方法1： <br>
从报表管理模块选择需要设计的大屏，按图示进入大屏设计界面 <br>
![img](../picture/execl/img.png) <br>
进入大屏设计方法2： <br>
从大屏报表模块选择需要设计的大屏，按图示进入大屏设计界面 <br>
![img2](../picture/execl/img_1.png) <br>
## 简介
![img3](../picture/execl/img_2.png) <br>
## 使用
**注**：不建议一列中同时存在俩个字段数据，同时一列值也建议不要存到超大数据量，肯定无法显示的<br>
![img4](../picture/execl/img_3.png) <br>
## 预览/保存
点击保存，则会将数据写入到库中。<br>
点击预览，则进入预览界面。<br>
![img](../picture/execl/img_4.png) <br>
## 预览界面
可以进行导出操作。<br>
![img](../picture/execl/img_5.png) <br>
... ...
**注：导入导出目前是初始版本，报错没有细化，如果导入导出过程中页面无反应，请F12**
**注：“导入成功/失败”的提示不一定对应当前真实导入导出情况，请根据实际导入导出的结果进行判断**
## 导出
![img](../picture/imexport/img.png) <br>
导出会生成zip文件，包含图表、样式、图片等，不会带有该大屏的名称和code。<br>
### 导出数据集
适用于同一系统内部使用
### 导出不含有数据集
导出的图表会使用默认的静态数据集，适用于跨系统，请注意，如果你的大屏图表有部分图表是在对方系统不存在的，那么目前整个大屏是不会显示出来的，后续会进行兼容，不存在的图表留空。<br>
## 导入
![img1](../picture/imexport/img_1.png) <br>
选择一个导出的zip文件导入即可。注意，导入会覆盖当前大屏，请新建一张空白的大屏进行导入。<br>
**注：如果你导入的大屏中含有你当前系统不存在的图表，整个大屏是不会显示的。** <br>
## 导入导出权限
请查看权限控制模块中关于导入导出权限的说明。 <br>
\ No newline at end of file
... ...
- 使用Maven Install打包时报错 <br>
![img.png](../picture/qusetion/img.png) <br>
请使用Maven Package进行打包 <br>
### 版本问题：[开发环境参考](https://report.anji-plus.com/report-doc/guide/quicklyDevelop.html)
- 底层数据库为Mysql8.0+时，flyway执行SQL报错<br>
- Node.js是V16版本时 npm install失败 <br>
- jdk使用1.7或者11及以上时，编译打包不过 <br>
![img](../picture/qusetion/img_1.png) <br>
- MssSqlServer 2014及其上下版本数据源测试不过。以2014版本为例。 <br>
![img](../picture/qusetion/img_2.png) <br>
将1.2.6改成1.2.0 <br>
- 浏览器兼容性 当前未对部分浏览器做兼容性适配，推荐使用谷歌浏览器进行访问。<br>
- 部署完进入系统，点击预览大屏，大屏提示：“执行sql失败“ <br>
![img](../picture/qusetion/img_3.png) <br>
请先重置mysql数据源，将mysql数据源的账号密码修改为你当前系统的账号密码。<br>
- flyway执行报错1.0.10sql失败 <br>
错误提示：Caused by: org.flywaydb.core.api.FlywayException: Validate failed: Detected failed <br>
migration to version 1.0.10 (create report share) <br>
请参考此 [Issue](https://gitee.com/anji-plus/report/issues/I47JNE) 解决此问题 <br>
- 禁用flyway及切换底层数据库方案 <br>
[链接](https://my.oschina.net/u/4517014/blog/5269319) <br>
- 数据源数据集用法总结 <br>
[链接](https://my.oschina.net/u/4517014/blog/5270828) <br>
### 执行源码编译脚本（build.sh）报错
- 提示：“*** report-ui/dist/* *** No such file or directory” <br>
前端编译失败。<br>
99%的原因是Node.js版本过高（高于14），导致前端编译失败，Nodejs在编译执行初始化时会去下载一些依赖，如果依赖下载不来，也会导致失败。<br>
剩下极少数情况可能是你编译的linux系统问题。<br>
- 提示：“report-core/target/aj-report-*.zip *** No such file or directory” <br>
后端编译失败。<br>
可能原因有：Mvn版本过低/过高，导致后端编译失败 <br>
- 使用eclipse进行源码编译时失败 <br>
失败的提示有很多，这里建议换成IDEA <br>
- 使用IDEA进行源码编译时提示：“*** openjdk-***” <br>
请使用jdk1.8
### 启动服务报错
- 提示“xxx The driver has not received any packets from the server” <br>
连不上mysql。<br>
1、确保软件打包正常 <br>
2、mysql版本不兼容，详细看上面关于版本兼容性 <br>
3、bootstrap.yml中配置的mysql地址ip不对 <br>
- 提示“404” <br>
1、确保访问地址无误，根据部署方式的不同9095/9528 端口皆可以进入项目，如果一个不行试另一个端口 <br>
2、确定前端是否启动 <br>
3、确定后端是否启动 br>
... ...
## 核心技术
### 底层依赖
- [Mysql] 5.7
- [Jdk] 1.8
### 后端
- [Spring Boot](https://spring.io/projects/spring-boot/): Spring Boot是一款开箱即用框架，让我们的Spring应用变的更轻量化、更快的入门。
在主程序执行main函数就可以运行。你也可以打包你的应用为jar并通过使用java -jar来运行你的Web应用；
- [Mybatis-plus](https://mp.baomidou.com/): MyBatis-plus（简称 MP）是一个 MyBatis (opens new window) 的增强工具。
- [flyway](https://flywaydb.org/): 主要用于在你的应用版本不断升级的同时，升级你的数据库结构和里面的数据
### 前端
- [npm](https://www.npmjs.com/)：node.js的包管理工具，用于统一管理我们前端项目中需要用到的包、插件、工具、命令等，便于开发和维护。
- [webpack](https://webpack.docschina.org/)：用于现代 JavaScript 应用程序的_静态模块打包工具
- [ES6](https://es6.ruanyifeng.com/)：Javascript的新版本，ECMAScript6的简称。利用ES6我们可以简化我们的JS代码，同时利用其提供的强大功能来快速实现JS逻辑。
- [vue-cli](https://cli.vuejs.org/)：Vue的脚手架工具，用于自动生成Vue项目的目录及文件。
- [vue-router](https://router.vuejs.org/)： Vue提供的前端路由工具，利用其我们实现页面的路由控制，局部刷新及按需加载，构建单页应用，实现前后端分离。
- [vuex](https://vuex.vuejs.org/)：Vue提供的状态管理工具，用于统一管理我们项目中各种数据的交互和重用，存储我们需要用到数据对象。
- [element-ui](https://element.eleme.cn/#/zh-CN)：基于MVVM框架Vue开源出来的一套前端ui组件。
- [avue](https://www.avuejs.com/): 用该组件包裹后可以变成拖拽组件,采用相对于父类绝对定位;用键盘的上下左右也可以控制移
## 开发环境
这里提供我们的开发环境版本进行参考
- [CentOs] 7.5
- [Mysql] 5.7
- [Jdk] 1.8
- [Spring Boot] 2.3.5
- [Mybatis-plus] 3.3.2
- [flyway] 5.2.1
- [Apache Maven] 3.5
- [Node.js] 14.16.0
- [Windows 10]
已知 **Mysql8.0** 和 **Jdk11** (部分小版本)会出现兼容性问题，后续有解决方法将会在下方 **其他** 大类进行补充
## SQL初始化
sql文件的地址是：report-core --> src --> main --> resources -- > db.migration <br>
![sql](../picture/quickly/img_13.png)
系统初始化时flyway会自动的将该目录下的sql文件执行，不需要手动执行sql文件。 <br>
执行完将会创建 aj_report（存放系统基础数据） 和 aj_report_init（存放示例数据） 俩个库。 <br>
... ...
```
第一步，下载zip包，解压<br>
第二步，conf->bootstrap.yml，修改mysql连接<br>
第三步，启动bin目录下start.sh<br>
第四步，访问 http://localhost:9095
```
## 下载发行版
[下载地址](https://gitee.com/anji-plus/report/releases) ：https://gitee.com/anji-plus/report/releases <br>
![img.png](../picture/quickly/img_16.png) <br>
## 修改mysql连接
解压下载好的Zip包，找到bootstrap.yml <br>
![img_1.png](../picture/quickly/img_17.png) <br>
将图中关于mysql的连接配置信息换成你使用的IP <br>
**注**：aj_report库是存放底层基础信息的库，flyway启动时会自动建立，如果你在这里修改了库，将会出错 <br>
![bootstrap.png](../picture/quickly/img_2.png) <br>
**注**：请确认你的Mysql是否支持远程连接，登陆用户是否有DDL权限 <br>
## 上传功能
使用上传功能，必须修改此内容 <br>
![file.png](../picture/quickly/img_15.png) <br>
## 启动
linux启动：<br>
aj-report-XXX --> bin -->sh start.sh <br>
windows启动：<br>
aj-report-XXX --> bin --> start.bat <br>
![img18](../picture/quickly/img_18.png) <br>
如果start.bat启动有问题的话，可以尝试以下方法解决。<br>
修改第4行的JAVA_HOME，改成你自己的JAVA_HOME，并去掉**rem**注释，双击启动<br>
![java.png](../picture/quickly/img_7.png) <br>
**注**：如果你JAVA_HOME目录存在空格，将bat文件最下面的JAVA_HOME添加""号
![img.png](../picture/quickly/img_8.png) <br>
## 访问
http://localhost:9095 <br>
默认密码：admin 123456 <br>
## 重置mysql连接
登陆进来后请修改mysql数据源 <br>
数据源 --> mysql数据源 --> 编辑 --> 修改用户名密码（改成你自己系统mysql的用户名密码） <br>
![img](../picture/quickly/img_14.png) <br>
![img_6.png](../picture/quickly/img_6.png) <br>
... ...
**前后端分离：请对自己有动手能力的小伙伴进行尝试**
**请根据自己的实际情况对下面的步骤和内容进行调整**
```
linux：
git clone https://gitee.com/anji-plus/report.git
后端：report-code ：
修改bootstrap.yml
maven package
java -jar
前端：report-ui ：
修改前端config连接
BASE_API: '"./"'，改成自己后端的api
npm install
npm run build
```
## linux部署后端
### 编译环境
- [Apache Maven] 3.5 <br>
- [Node.js] v14.16.0 <br>
- [Jdk] 1.8 <br>
请在你的Windows上先准备好maven、node.js、jdk <br>
**注**：已知 **Jdk11** (部分小版本)存在兼容性问题，请不要使用openJdk，环境问题请看 **常见问题** 大类 <br>
### 克隆源码
git clone https://gitee.com/anji-plus/report.git <br>
![img9.png](../picture/quickly/img_9.png) <br>
**注**：不要下载发行版里面的 Source Code.zip <br>
### 修改mysql连接
report-core --> src --> main --> resources --> bootstrap.yml <br>
![bootstrap.png](../picture/quickly/img_2.png) <br>
将图中关于mysql的连接配置信息换成你使用的IP <br>
**注**：aj_report库是存放底层基础信息的库，flyway启动时会自动建立，如果你在这里修改了库，将会出错<br>
**注**：请确认你的Mysql是否支持远程连接，登陆用户是否有DDL权限 <br>
### 上传功能
使用上传功能，必须修改此内容 <br>
![file.png](../picture/quickly/img_15.png) <br>
### maven打包
使用 maven package <br>
**注**：不要使用maven install <br>
![img10](../picture/quickly/img_10.png) <br>
### linux启动jar包
将上步生成的jar包上传至linux，使用java -jar命令启动 <br>
**注**：请确保你的linux有jdk <br>
## 本地启动前端
### 前端编译
进入前端目录：report-ui <br>
![img11](../picture/quickly/img_11.png) <br>
执行 npm install <br>
### 修改config
目录地址：report-ui --> config --> dev.env.js <br>
修改你的BASE_API地址 <br>
### 启动前端
report-ui目录： <br>
执行 npm run dev <br>
## 前端build
### 前端编译
进入前端目录：report-ui <br>
![img11](../picture/quickly/img_11.png) <br>
执行 npm install <br>
### 修改config
目录地址：report-ui --> config --> prod.env.js <br>
修改你的BASE_API地址，改成自己后端的api <br>
### build
reoprt-ui目录： <br>
执行 npm run build <br>
生成的前端dist目录文件在report-ui下面 <br>
![img12](../picture/quickly/img_12.png) <br>
... ...
```
git clone https://gitee.com/anji-plus/report.git
cd report
sh build.sh
编译完成放在build文件夹 aj-report-xxxx.zip
unzip aj-report-xxxx.zip
cd aj-report-xxxx
vim conf/bootstrap.yml 修改数据库连接、上传文件的路径以及地址
sh bin/start.sh
访问
http://serverip:9095
```
## 编译环境
请在Linux上先准备好maven、node.js、jdk
- [Apache Maven] 3.5 <br>
- [Node.js] v14.16.0 <br>
- [Jdk] 1.8 <br>
**注**：已知**Jdk11**存在兼容性问题，请不要使用openJdk，环境问题请看 **常见问题** 大类 <br>
## 克隆源码
git clone https://gitee.com/anji-plus/report.git <br>
![img9.png](../picture/quickly/img_9.png) <br>
**注**：不要下载发行版里面的 Source Code.zip <br>
## build
进入report目录，启动build.sh <br>
![img_4.png](../picture/quickly/img_4.png) <br>
编译完成后是放在当前目录下的build文件夹中：aj-report-xxxx.zip <br>
## 修改mysql连接
解压aj-report-xxxx.zip，找到bootstrap.yml <br>
![img_1.png](../picture/quickly/img_17.png) <br>
将图中关于mysql的连接配置信息换成你使用的IP <br>
**注**：aj_report库是存放底层基础信息的库，flyway启动时会自动建立，如果你在这里修改了库，将会出错 <br>
![bootstrap.png](../picture/quickly/img_2.png) <br>
**注**：请确认你的Mysql是否支持远程连接，登陆用户是否有DDL权限 <br>
## 上传功能
使用上传功能，必须修改此内容 <br>
![file.png](../picture/quickly/img_15.png)
## 启动
linux启动： <br>
aj-report-XXX --> bin --> start.sh <br>
sh bin/start.sh <br>
注意啊，如果你在linux打包，然后在win上执行，要转化start.bat文件的格式，反之也是一样。
## 日志位置
看到控制台提示“The AJ-Report started!”，说明report正在启动，可以看看日志以确定程序启动到哪里了。<br>
日志的位置是：report-xxx/logs/aj-report.log <br>
## 访问
http://serverip:9095 <br>
默认密码：admin 123456 <br>
## 重置mysql连接
登陆进来后请修改mysql数据源 <br>
数据源 --> mysql数据源 --> 编辑 --> 修改用户名密码（改成你自己系统mysql的用户名密码） <br>
![img](../picture/quickly/img_14.png) <br>
![img_6.png](../picture/quickly/img_6.png) <br>
... ...
## 新增报表
![img](../picture/reportmanager/img.png) <br>
状态默认为已启用。
... ...