From 4eb1d60c291db23ab78bb4c536a405af4a5825ef Mon Sep 17 00:00:00 2001
From: qianming <qianming@anji-plus.com>
Date: Tue, 29 Jun 2021 13:43:18 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E7=A9=BA=E5=BF=83=E5=9C=86=E8=A7=92?=
 =?UTF-8?q?=E9=A5=BC=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../widget/pie/widgetPieRoundChart.vue        | 409 ++++++++++++++++++
 1 file changed, 409 insertions(+)
 create mode 100644 report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieRoundChart.vue

diff --git a/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieRoundChart.vue b/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieRoundChart.vue
new file mode 100644
index 00000000..5ec28ba6
--- /dev/null
+++ b/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieRoundChart.vue
@@ -0,0 +1,409 @@
+<template>
+  <div :style="styleObj">
+    <v-chart :options="options" autoresize/>
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts';
+export default {
+  name: 'WidgetPieRoundChart',  //空心圆角饼图参考 https://www.makeapie.com/editor.html?c=xmQZRm2IHw
+  components: {},
+  props: {
+    value: Object,
+    ispreview: Boolean,
+  },
+  data() {
+    return {
+      options: {
+        backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: '',
+          top: '48%',
+          textAlign: 'center',
+          left: '49%',
+          textStyle: {
+            color: '#fff',
+            fontSize: 22,
+            fontWeight: '400',
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: 'image',
+              z: 3,
+              style: {
+                image: 'data:image/png;base64,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',
+                width: 178,
+                height: 178,
+              },
+              left: 'center',
+              top: 'center',
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: 'circle',
+          orient: 'horizontal',
+          // x: 'left',
+          data: ['火车', '飞机', '客车', '轮渡'],
+          right: 340,
+          bottom: 150,
+          align: 'right',
+          textStyle: {
+            color: '#fff',
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: [
+          {
+            name: '',
+            type: 'pie',
+            clockWise: false,
+            radius: [105, 109],
+            hoverAnimation: false,
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true,
+                  position: 'outside',
+                  color: '#ddd',
+                  formatter: function (params) {
+                    var percent = 0;
+                    var total = 0;
+                    for (var i = 0; i < trafficWay.length; i++) {
+                      total += trafficWay[i].value;
+                    }
+                    percent = ((params.value / total) * 100).toFixed(0);
+                    if (params.name !== '') {
+                      return '交通方式：' + params.name + '\n' + '\n' + '占百分比：' + percent + '%';
+                    } else {
+                      return '';
+                    }
+                  },
+                },
+                labelLine: {
+                  length: 30,
+                  length2: 100,
+                  show: true,
+                  color: '#00ffff',
+                },
+              },
+            },
+            data: [
+              {
+                name: '火车',
+                value: 20,
+              },
+              {
+                name: '飞机',
+                value: 10,
+              },
+              {
+                name: '客车',
+                value: 30,
+              },
+              {
+                name: '轮渡',
+                value: 40,
+              },
+            ]
+          }
+        ]
+      },
+      optionsStyle: {}, // 样式
+      optionsData: {}, // 数据
+      optionsSetup: {},
+    }
+  },
+  computed: {
+    styleObj() {
+      return {
+        position: this.ispreview ? 'absolute' : 'static',
+        width: this.optionsStyle.width + 'px',
+        height: this.optionsStyle.height + 'px',
+        left: this.optionsStyle.left + 'px',
+        top: this.optionsStyle.top + 'px',
+        background: this.optionsSetup.background,
+      }
+    },
+  },
+  watch: {
+    value: {
+      handler(val) {
+        console.log(val)
+        this.optionsStyle = val.position
+        this.optionsData = val.data
+        this.optionsCollapse = val.setup
+        this.optionsSetup = val.setup
+        this.editorOptions()
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.optionsStyle = this.value.position
+    this.optionsData = this.value.data
+    this.optionsCollapse = this.value.setup
+    this.optionsSetup = this.value.setup
+    this.editorOptions()
+  },
+  methods: {
+    // 修改图标options属性
+    editorOptions() {
+      this.setOptionsTitle()
+      // this.setOptionsX()
+      // this.setOptionsY()
+      // this.setOptionsTop()
+      // this.setOptionsTooltip()
+      // this.setOptionsMargin()
+      // this.setOptionsLegend()
+      // this.setOptionsColor()
+      this.setOptionsData()
+    },
+    // 标题修改
+    setOptionsTitle() {
+      const optionsCollapse = this.optionsSetup
+      const title = {}
+      title.text = optionsCollapse.titleText
+      title.show = optionsCollapse.isNoTitle
+      title.left = optionsCollapse.textAlign
+      title.textStyle = {
+        color: optionsCollapse.textColor,
+        fontSize: optionsCollapse.textFontSize,
+        fontWeight: optionsCollapse.textFontWeight,
+      }
+      title.subtext = optionsCollapse.subText
+      title.subtextStyle = {
+        color: optionsCollapse.subTextColor,
+        fontWeight: optionsCollapse.subTextFontWeight,
+        fontSize: optionsCollapse.subTextFontSize,
+      }
+
+      this.options.title = title
+    },
+    // X轴设置
+    setOptionsX() {
+      const optionsCollapse = this.optionsSetup
+      const xAxis = {
+        type: 'category',
+        show: optionsCollapse.hideX, // 坐标轴是否显示
+        name: optionsCollapse.xName, // 坐标轴名称
+        nameTextStyle: {
+          color: optionsCollapse.xNameColor,
+          fontSize: optionsCollapse.xNameFontSize,
+        },
+        nameRotate: optionsCollapse.textAngle, // 文字角度
+        inverse: optionsCollapse.reversalX, // 轴反转
+        axisLabel: {
+          show: true,
+          interval: optionsCollapse.textInterval, // 文字角度
+          rotate: optionsCollapse.textAngle, // 文字角度
+          textStyle: {
+            color: optionsCollapse.Xcolor, // x轴 坐标文字颜色
+            fontSize: optionsCollapse.fontSizeX,
+          },
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#fff',
+          },
+        },
+      }
+      this.options.xAxis = xAxis
+    },
+    // Y轴设置
+    setOptionsY() {
+      const optionsCollapse = this.optionsSetup
+      const yAxis = {
+        type: 'value',
+        show: optionsCollapse.isShowY, // 坐标轴是否显示
+        name: optionsCollapse.textNameY, // 坐标轴名称
+        nameTextStyle: {
+          color: optionsCollapse.NameColorY,
+          fontSize: optionsCollapse.NameFontSizeY,
+        },
+        inverse: optionsCollapse.reversalY, // 轴反转
+        axisLabel: {
+          show: true,
+          textStyle: {
+            color: optionsCollapse.colorY, // x轴 坐标文字颜色
+            fontSize: optionsCollapse.fontSizeY,
+          },
+        },
+        splitLine: {
+          show: false,
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#fff',
+          },
+        },
+      }
+
+      this.options.yAxis = yAxis
+    },
+    // 数值设定 or 柱体设置
+    setOptionsTop() {
+      const optionsCollapse = this.optionsSetup
+      const series = this.options.series
+
+      for (const key in series) {
+        if (series[key].type == 'bar') {
+          series[key].label = {
+            show: optionsCollapse.isShow,
+            position: 'top',
+            distance: 10,
+            fontSize: optionsCollapse.fontSize,
+            color: optionsCollapse.subTextColor,
+            fontWeight: optionsCollapse.fontWeight,
+          }
+          series[key].barWidth = optionsCollapse.maxWidth
+          series[key].barMinHeight = optionsCollapse.minHeight
+        }
+      }
+      this.options.series = series
+    },
+    // tooltip 设置
+    setOptionsTooltip() {
+      const optionsCollapse = this.optionsSetup
+      const tooltip = {
+        trigger: 'item',
+        show: true,
+        textStyle: {
+          color: optionsCollapse.lineColor,
+          fontSize: optionsCollapse.fontSize,
+        },
+      }
+      this.options.tooltip = tooltip
+    },
+    // 边距设置
+    setOptionsMargin() {
+      const optionsCollapse = this.optionsSetup
+      const grid = {
+        left: optionsCollapse.marginLeft,
+        right: optionsCollapse.marginRight,
+        bottom: optionsCollapse.marginBottom,
+        top: optionsCollapse.marginTop,
+        containLabel: true,
+      }
+      this.options.grid = grid
+    },
+    // 图例操作 legend
+    setOptionsLegend() {
+      const optionsCollapse = this.optionsSetup
+      const legend = this.options.legend
+      legend.show = optionsCollapse.isShowLegend
+      legend.left = optionsCollapse.lateralPosition == 'left' ? 0 : 'auto'
+      legend.right = optionsCollapse.lateralPosition == 'right' ? 0 : 'auto'
+      legend.top = optionsCollapse.longitudinalPosition == 'top' ? 0 : 'auto'
+      legend.bottom = optionsCollapse.longitudinalPosition == 'bottom' ? 0 : 'auto'
+      legend.orient = optionsCollapse.layoutFront
+      legend.textStyle = {
+        color: optionsCollapse.lengedColor,
+        fontSize: optionsCollapse.fontSize,
+      }
+      legend.itemWidth = optionsCollapse.lengedWidth
+    },
+    // 图例颜色修改
+    setOptionsColor() {
+      const optionsCollapse = this.optionsSetup
+      const customColor = optionsCollapse.customColor
+      if (!customColor) return
+      const arrColor = []
+      for (let i = 0; i < customColor.length; i++) {
+        arrColor.push(customColor[i].color)
+      }
+      const itemStyle = {
+        normal: {
+          color: (params) => {
+            return arrColor[params.dataIndex]
+          },
+          barBorderRadius: optionsCollapse.radius,
+        },
+      }
+      for (const key in this.options.series) {
+        if (this.options.series[key].type == 'bar') {
+          this.options.series[key].itemStyle = itemStyle
+        }
+      }
+      this.options = Object.assign({}, this.options)
+    },
+    // 数据解析
+    setOptionsData() {
+      const optionsSetup = this.optionsSetup
+      console.log(optionsSetup)
+      const optionsData = this.optionsData // 数据类型 静态 or 动态
+      console.log(optionsData)
+      optionsData.dataType == 'staticData' ? this.staticDataFn(optionsData.staticData, optionsSetup) : this.dynamicDataFn(optionsData.dynamicData, optionsSetup)
+    },
+    // 静态数据
+    staticDataFn(val, optionsSetup) {
+      const staticData = JSON.parse(val)
+      // x轴
+      if (optionsSetup.verticalShow) {
+        this.options.xAxis.data = []
+        this.options.yAxis.data = staticData.categories
+        this.options.xAxis.type = 'value'
+        this.options.yAxis.type = 'category'
+      } else {
+        this.options.xAxis.data = staticData.categories
+        this.options.yAxis.data = []
+        this.options.xAxis.type = 'category'
+        this.options.yAxis.type = 'value'
+      }
+      // series
+      const series = this.options.series
+      for (const i in series) {
+        if (series[i].type == 'bar') {
+          series[i].data = staticData.series[0].data
+        }
+      }
+    },
+    // 动态数据
+    dynamicDataFn(val, optionsSetup) {
+      console.log(val)
+      if (!val) return
+      // x轴
+      if (optionsSetup.verticalShow) {
+        this.options.xAxis.data = []
+        this.options.yAxis.data = val.xAxis
+        this.options.xAxis.type = 'value'
+        this.options.yAxis.type = 'category'
+      } else {
+        this.options.xAxis.data = val.xAxis
+        this.options.yAxis.data = []
+        this.options.xAxis.type = 'category'
+        this.options.yAxis.type = 'value'
+      }
+
+      // series
+      const series = this.options.series
+      for (const i in series) {
+        if (series[i].type == 'bar') {
+          series[i].data = val.series[i].data
+        }
+      }
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.echarts {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+</style>

From 49ce3f368cff54f00f13555801f7e95ae8101784 Mon Sep 17 00:00:00 2001
From: Raod <1130305001@qq.com>
Date: Tue, 29 Jun 2021 14:06:41 +0800
Subject: [PATCH 2/3] doc

---
 doc/docs/.vuepress/config.js   |  3 +-
 doc/docs/guide/README.md       | 70 +++++++++++++++++++++++-----------
 doc/docs/guide/productintro.md | 69 ---------------------------------
 doc/docs/guide/quickly.md      | 49 +++++++++++-------------
 4 files changed, 72 insertions(+), 119 deletions(-)
 delete mode 100644 doc/docs/guide/productintro.md

diff --git a/doc/docs/.vuepress/config.js b/doc/docs/.vuepress/config.js
index 0f49c019..9c415e69 100644
--- a/doc/docs/.vuepress/config.js
+++ b/doc/docs/.vuepress/config.js
@@ -24,8 +24,7 @@ module.exports = {
                     children: [
                         {title: '介绍', path: '/guide/'},
                         {title: '快速入门', path: '/guide/quickly'},
-                        {title: '项目介绍', path: '/guide/productintro'},
-                        {title: '系统运行', path: '/guide/deploy'}
+                        // {title: '系统运行', path: '/guide/deploy'}
                     ]
                 },
                 {
diff --git a/doc/docs/guide/README.md b/doc/docs/guide/README.md
index 1520bf70..74b3e39c 100644
--- a/doc/docs/guide/README.md
+++ b/doc/docs/guide/README.md
@@ -1,25 +1,51 @@
-# 介绍
----
-
-**大屏设计**
-
-大屏设计（Report）是一个JavaEE微服务架构平台，采用经典组合（SpringBoot，SpringCloud，Vue，ElementUI）。目前提供两种架构，单体架构和微服务架构。
-内置的基础功能包括数据源，数据集，报表管理
-
-**功能架构**
-- 前端
-
-
-- 后端
-
-
-**在线体验**
-- 访问地址
-
-- 默认账号密码
-
-
-**联系我们**
+## 在线体验
+#### &emsp;  电脑在线体验: [https://report.anji-plus.com/](https://report.anji-plus.com/ "链接")  &emsp;体验账号：guest  密码：guest
+#### &emsp;  在线文档: [https://report.anji-plus.com/#/doc](https://report.anji-plus.com/#/doc "doc")<br>
+#### &emsp;  在线提问: [https://gitee.com/anji-plus/report/issues](https://gitee.com/anji-plus/report/issues "issue")
+
+## 功能概述
+#### &emsp;  组件介绍
+&emsp;&emsp; 大屏设计（AJ-Report）是一个可视化拖拽编辑的，直观，酷炫，具有科技感的图表工具全开源项目。
+内置的基础功能包括数据源，数据集，报表管理，项目部分截图如下。<br>
+
+
+## 打包目录
+```
+├── bin                                           启动命令脚本
+│   ├── logs                                      启动日志目录
+│   ├── cache                                     本地缓存目录
+│   ├── startup.cmd
+│   ├── shutdown.cmd
+│   ├── startup.sh
+│   └── shutdown.sh
+├── config                                        配置文件目录
+├── lib                                           自定义扩展包
+├── target                                        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
+```
+
+
+## 近期计划
+#### &emsp;  丰富更多图表组件
+
+## 技术支持
+如有问题，请提交 [Issue](https://gitee.com/anji-plus/report/issues)
+
+#### 开源不易，劳烦各位star ☺
 
 
 
diff --git a/doc/docs/guide/productintro.md b/doc/docs/guide/productintro.md
deleted file mode 100644
index ef1ff01e..00000000
--- a/doc/docs/guide/productintro.md
+++ /dev/null
@@ -1,69 +0,0 @@
-# 项目介绍
-
-# 项目介绍
-在线拖拽大屏设计，后续会持续更新新的功能。
-
-
-## 文件结构
-### 系统目录
-- 
-```
-├── 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
-```
-### 前端
-```
-├── build                      # 构建相关
-├── mock                       # 项目mock 模拟数据
-├── public                     # 静态资源
-│   │── favicon.ico            # favicon图标
-│   └── index.html             # html模板
-├── src                        # 源代码
-│   ├── api                    # 所有请求
-│   ├── assets                 # 主题 字体等静态资源
-│   ├── components             # 全局公用组件
-│   ├── directive              # 全局指令
-│   ├── icons                  # 项目所有 svg icons
-│   ├── lang                   # 国际化 language
-│   ├── layout                 # 全局 layout
-│   ├── router                 # 路由
-│   ├── store                  # 全局 store管理
-│   ├── styles                 # 全局样式
-│   ├── utils                  # 全局公用方法
-│   ├── views                  # views 所有页面
-│   ├── App.vue                # 入口页面
-│   ├── main.js                # 入口文件 加载组件 初始化等
-│   └── permission.js          # 权限管理
-├── .env.xxx                   # 环境变量配置
-├── .eslintrc.js               # eslint 配置项
-├── .babelrc                   # babel-loader 配置
-├── .travis.yml                # 自动化CI配置
-├── vue.config.js              # vue-cli 配置
-├── postcss.config.js          # postcss 配置
-└── package.json               # package.json
-```
-
-## 核心技术
-### 后端
-- [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组件。
-- [vue-element-admin](https://panjiachen.gitee.io/vue-element-admin-site/)：后台前端解决方案,它基于 vue 和 element-ui实现
-
diff --git a/doc/docs/guide/quickly.md b/doc/docs/guide/quickly.md
index f50cb745..d3f503d8 100644
--- a/doc/docs/guide/quickly.md
+++ b/doc/docs/guide/quickly.md
@@ -1,32 +1,29 @@
-# 快速了解
----
-## 项目简介
-- 项目源代码地址: <https://gitee.com/anji-plus/report>
-- 在线提问: <https://gitee.com/anji-plus/report/issues>
-- 在线文档: 
-
-大屏设计（Report）是一个可视化拖拽编辑的，直观，酷炫，具有科技感的图表工具项目。
-内置的基础功能包括数据源，数据集，国际化，字典管理，报表管理
-
-
-## 技术选型
-
-**1.环境**
--  JavaEE 8
--  Apache Maven 3
-
-**2.主框架**
--  Spring Boot 2.3.x
-
-**3.持久层**
--  Apache MyBatis 3.5.x
-
-**4.视图层**
--  Vue 2.6.10+
--  ElementUI 2.13.0+
+## 快速部署
+```js
+ 第一步，下载zip包，解压<br>
+ 第二步，config->application.properties，修改mysql连接<br>
+ 第三步，启动bin目录下startup.cmd(Windows)或者startup.sh(Linux)<br>
+ 第四步，访问 http://localhost:9095/index.html
+```
 
 
 ## 系统特性
 1. 最新最稳定的技术栈；
 2. 支持多数据源配置
 3. 丰富的大屏组件。拖拽配置实现动态大屏
+
+## 核心技术
+### 后端
+- [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/): 用该组件包裹后可以变成拖拽组件,采用相对于父类绝对定位;用键盘的上下左右也可以控制移动
+

From 166003f1a431f4d3a1126d932cf4f0d401ea0db3 Mon Sep 17 00:00:00 2001
From: yanzili <978387851@qq.com>
Date: Tue, 29 Jun 2021 14:14:40 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E9=9B=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 report-ui/src/assets/styles/element-ui.scss   |   9 +-
 report-ui/src/assets/styles/index.scss        |   1 +
 .../views/report/bigscreen/designer/tools.js  | 133 +++++++++++++++++-
 .../bar/widgetGradientColorBarchart.vue       |  12 ++
 .../pie/widgetPieNightingaleRoseArea.vue      |  16 ++-
 .../designer/widget/widgetBarchart.vue        |  16 ++-
 .../designer/widget/widgetBarlinechart.vue    |  18 +++
 .../designer/widget/widgetLinechart.vue       |  12 ++
 .../src/views/report/resultset/index.vue      |  49 ++++++-
 9 files changed, 252 insertions(+), 14 deletions(-)

diff --git a/report-ui/src/assets/styles/element-ui.scss b/report-ui/src/assets/styles/element-ui.scss
index 3d1aa712..7932c3ba 100644
--- a/report-ui/src/assets/styles/element-ui.scss
+++ b/report-ui/src/assets/styles/element-ui.scss
@@ -24,13 +24,14 @@
   margin: 0 auto;
   
   .el-dialog__header{
-    background-color: rgb(48, 77, 167); 
-    color: #fff;
+    background-color: #fff; 
+    color: #333;
+    border-bottom: 1px solid #eee;
     .el-dialog__title{
-      color: #fff;
+      color: #333;
     }
     .el-dialog__headerbtn i {
-      color: #fff;
+      color: #333;
     }
   }
 }
diff --git a/report-ui/src/assets/styles/index.scss b/report-ui/src/assets/styles/index.scss
index b6a31c36..4611a1f5 100644
--- a/report-ui/src/assets/styles/index.scss
+++ b/report-ui/src/assets/styles/index.scss
@@ -270,6 +270,7 @@ a:hover {
     color:#a8e3ff
   }
   .el-input-number.is-controls-right .el-input-number__increase{
+    height: 15px;
     border-bottom: 1px solid #3f5673;
   }
   .el-input-number.is-controls-right .el-input-number__decrease{
diff --git a/report-ui/src/views/report/bigscreen/designer/tools.js b/report-ui/src/views/report/bigscreen/designer/tools.js
index 292d5034..5e9b2202 100644
--- a/report-ui/src/views/report/bigscreen/designer/tools.js
+++ b/report-ui/src/views/report/bigscreen/designer/tools.js
@@ -121,7 +121,7 @@ const widgetTools = [
           name: 'background',
           required: false,
           placeholder: '',
-          value: 'rgba(115,170,229,.5)',
+          value: 'rgba(115,170,229,.1)',
         },
         {
           type: 'el-select',
@@ -1171,6 +1171,23 @@ const widgetTools = [
                 required: false,
                 placeholder: '',
                 value: '#fff',
+              },
+              {
+                type: 'el-switch',
+                label: '分割线显示',
+                name: 'isShowSplitLineX',
+                require: false,
+                placeholder: '',
+                value: true,
+              },
+              {
+                type: 'vue-color',
+                label: '分割线颜色',
+                name: 'splitLineColorX',
+                required: false,
+                placeholder: '',
+                value: '#fff',
+
               }
             ],
           },
@@ -1240,6 +1257,21 @@ const widgetTools = [
                 required: false,
                 placeholder: '',
                 value: '#fff',
+              }, {
+                type: 'el-switch',
+                label: '分割线显示',
+                name: 'isShowSplitLineY',
+                require: false,
+                placeholder: '',
+                value: true,
+              }, {
+                type: 'vue-color',
+                label: '分割线颜色',
+                name: 'splitLineColorY',
+                required: false,
+                placeholder: '',
+                value: '#fff',
+
               }
             ],
           },
@@ -1723,6 +1755,23 @@ const widgetTools = [
                 required: false,
                 placeholder: '',
                 value: '#fff',
+              },
+              {
+                type: 'el-switch',
+                label: '分割线显示',
+                name: 'isShowSplitLineX',
+                require: false,
+                placeholder: '',
+                value: true,
+              },
+              {
+                type: 'vue-color',
+                label: '分割线颜色',
+                name: 'splitLineColorX',
+                required: false,
+                placeholder: '',
+                value: '#fff',
+
               }
             ],
           },
@@ -1792,6 +1841,22 @@ const widgetTools = [
                 required: false,
                 placeholder: '',
                 value: '#fff',
+              },
+              {
+                type: 'el-switch',
+                label: '分割线显示',
+                name: 'isShowSplitLineY',
+                require: false,
+                placeholder: '',
+                value: true,
+              }, {
+                type: 'vue-color',
+                label: '分割线颜色',
+                name: 'splitLineColorY',
+                required: false,
+                placeholder: '',
+                value: '#fff',
+
               }
             ],
           },
@@ -2195,6 +2260,23 @@ const widgetTools = [
                 required: false,
                 placeholder: '',
                 value: '#fff',
+              },
+              {
+                type: 'el-switch',
+                label: '分割线显示',
+                name: 'isShowSplitLineX',
+                require: false,
+                placeholder: '',
+                value: true,
+              },
+              {
+                type: 'vue-color',
+                label: '分割线颜色',
+                name: 'splitLineColorX',
+                required: false,
+                placeholder: '',
+                value: '#fff',
+
               }
             ],
           },
@@ -2264,6 +2346,22 @@ const widgetTools = [
                 required: false,
                 placeholder: '',
                 value: '#fff',
+              },
+              {
+                type: 'el-switch',
+                label: '分割线显示',
+                name: 'isShowSplitLineY',
+                require: false,
+                placeholder: '',
+                value: true,
+              }, {
+                type: 'vue-color',
+                label: '分割线颜色',
+                name: 'splitLineColorY',
+                required: false,
+                placeholder: '',
+                value: '#fff',
+
               }
             ],
           },
@@ -2823,6 +2921,23 @@ const widgetTools = [
                 required: false,
                 placeholder: '',
                 value: '#fff',
+              },
+              {
+                type: 'el-switch',
+                label: '分割线显示',
+                name: 'isShowSplitLineX',
+                require: false,
+                placeholder: '',
+                value: true,
+              },
+              {
+                type: 'vue-color',
+                label: '分割线颜色',
+                name: 'splitLineColorX',
+                required: false,
+                placeholder: '',
+                value: '#fff',
+
               }
             ],
           },
@@ -2892,6 +3007,22 @@ const widgetTools = [
                 required: false,
                 placeholder: '',
                 value: '#fff',
+              },
+              {
+                type: 'el-switch',
+                label: '分割线显示',
+                name: 'isShowSplitLineY',
+                require: false,
+                placeholder: '',
+                value: true,
+              }, {
+                type: 'vue-color',
+                label: '分割线颜色',
+                name: 'splitLineColorY',
+                required: false,
+                placeholder: '',
+                value: '#fff',
+
               }
             ],
           },
diff --git a/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetGradientColorBarchart.vue b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetGradientColorBarchart.vue
index 3a1c9f4e..1fb9c19f 100644
--- a/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetGradientColorBarchart.vue
+++ b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetGradientColorBarchart.vue
@@ -235,6 +235,12 @@ export default {
             color: optionsCollapse.lineColorX,
           },
         },
+        splitLine: {
+            show: optionsCollapse.isShowSplitLineX,
+            lineStyle: {
+                color: optionsCollapse.splitLineColorX
+            },
+        },
       }
       this.options.xAxis = xAxis
     },
@@ -266,6 +272,12 @@ export default {
             color: optionsCollapse.lineColorY,
           },
         },
+        splitLine: {
+            show: optionsCollapse.isShowSplitLineY,
+            lineStyle: {
+                color: optionsCollapse.splitLineColorY
+            },
+        },
       }
 
       this.options.yAxis = yAxis
diff --git a/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieNightingaleRoseArea.vue b/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieNightingaleRoseArea.vue
index 73f24ee5..635d5134 100644
--- a/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieNightingaleRoseArea.vue
+++ b/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieNightingaleRoseArea.vue
@@ -147,7 +147,13 @@ export default {
           lineStyle: {
             color: optionsCollapse.lineColorX
           }
-        }
+        },
+        splitLine: {
+            show: optionsCollapse.isShowSplitLineX,
+            lineStyle: {
+                color: optionsCollapse.splitLineColorX
+            },
+        },
       };
       this.options.xAxis = xAxis;
     },
@@ -178,7 +184,13 @@ export default {
           lineStyle: {
             color: optionsCollapse.lineColorY
           }
-        }
+        },
+        splitLine: {
+            show: optionsCollapse.isShowSplitLineY,
+            lineStyle: {
+                color: optionsCollapse.splitLineColorY
+            },
+        },
       };
 
       this.options.yAxis = yAxis;
diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue b/report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue
index af25039c..73726121 100644
--- a/report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue
+++ b/report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue
@@ -151,7 +151,13 @@ export default {
           lineStyle: {
             color: optionsCollapse.lineColorX
           }
-        }
+        },
+        splitLine: {
+            show: optionsCollapse.isShowSplitLineX,
+            lineStyle: {
+                color: optionsCollapse.splitLineColorX
+            },
+        },
       };
       this.options.xAxis = xAxis;
     },
@@ -182,7 +188,13 @@ export default {
           lineStyle: {
             color: optionsCollapse.lineColorY
           }
-        }
+        },
+        splitLine: {
+            show: optionsCollapse.isShowSplitLineY,
+            lineStyle: {
+                color: optionsCollapse.splitLineColorY
+            },
+        },
       };
 
       this.options.yAxis = yAxis;
diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widgetBarlinechart.vue b/report-ui/src/views/report/bigscreen/designer/widget/widgetBarlinechart.vue
index 7e5cd55a..95db873c 100644
--- a/report-ui/src/views/report/bigscreen/designer/widget/widgetBarlinechart.vue
+++ b/report-ui/src/views/report/bigscreen/designer/widget/widgetBarlinechart.vue
@@ -192,6 +192,12 @@ export default {
             color: optionsCollapse.lineColorX,
           },
         },
+        splitLine: {
+            show: optionsCollapse.isShowSplitLineX,
+            lineStyle: {
+                color: optionsCollapse.splitLineColorX
+            },
+        },
       }
       this.options.xAxis = xAxis
     },
@@ -224,6 +230,12 @@ export default {
               color: '#fff',
             },
           },
+          splitLine: {
+            show: optionsCollapse.isShowSplitLineY,
+            lineStyle: {
+                color: optionsCollapse.splitLineColorY
+            },
+        },
         },
         {
           type: 'value',
@@ -250,6 +262,12 @@ export default {
               color: optionsCollapse.lineColorY,
             },
           },
+          splitLine: {
+            show: true,
+            lineStyle: {
+                color: optionsCollapse.splitLineColorY
+            },
+        },
         },
       ]
 
diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widgetLinechart.vue b/report-ui/src/views/report/bigscreen/designer/widget/widgetLinechart.vue
index 65cfeb01..2f9bf8e2 100644
--- a/report-ui/src/views/report/bigscreen/designer/widget/widgetLinechart.vue
+++ b/report-ui/src/views/report/bigscreen/designer/widget/widgetLinechart.vue
@@ -158,6 +158,12 @@ export default {
             color: optionsCollapse.lineColorX,
           },
         },
+        splitLine: {
+            show: optionsCollapse.isShowSplitLineX,
+            lineStyle: {
+                color: optionsCollapse.splitLineColorX
+            },
+        },
       }
       this.options.xAxis = xAxis
     },
@@ -189,6 +195,12 @@ export default {
             color: optionsCollapse.lineColorY,
           },
         },
+        splitLine: {
+            show: optionsCollapse.isShowSplitLineY,
+            lineStyle: {
+                color: optionsCollapse.splitLineColorY
+            },
+        },
       }
 
       this.options.yAxis = yAxis
diff --git a/report-ui/src/views/report/resultset/index.vue b/report-ui/src/views/report/resultset/index.vue
index 37ee4ca7..21ca36a6 100644
--- a/report-ui/src/views/report/resultset/index.vue
+++ b/report-ui/src/views/report/resultset/index.vue
@@ -121,13 +121,12 @@
                size="small"
                label-width="100px">
         <el-row :gutter="10">
-
           <el-col :xs="24"
                   :sm="20"
-                  :md="4"
-                  :lg="4"
-                  :xl="4">
-            <el-form-item label-width="0"
+                  :md="6"
+                  :lg="6"
+                  :xl="6">
+            <el-form-item label="数据源"
                           prop="sourceCode">
               <el-select v-model.trim="formData.sourceCode"
                          class="organisation"
@@ -140,11 +139,45 @@
               </el-select>
             </el-form-item>
           </el-col>
+          <el-col :xs="24"
+                  :sm="20"
+                  :md="8"
+                  :lg="8"
+                  :xl="8">
+            <el-form-item label="数据集名称"
+                          prop="setName">
+              <el-input v-model.trim="formData.setName"
+                        size="mini" />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24"
+                  :sm="20"
+                  :md="8"
+                  :lg="8"
+                  :xl="8">
+            <el-form-item label="数据集编码"
+                          prop="setCode">
+              <el-input v-model.trim="formData.setCode"
+                        size="mini" />
+            </el-form-item>
+          </el-col>
           <el-col :xs="24"
                   :sm="20"
                   :md="22"
                   :lg="22"
                   :xl="22">
+            <el-form-item label="数据集描述">
+              <el-input v-model.trim="formData.setDesc"
+                        size="mini" />
+            </el-form-item>
+          </el-col>
+
+          <el-col :xs="24"
+                  :sm="20"
+                  :md="22"
+                  :lg="22"
+                  :xl="22"
+                  class="code-mirror-form">
             <el-form-item label="查询SQL或请求体"
                           label-width="140px">
               <div class="codemirror">
@@ -884,6 +917,12 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.code-mirror-form {
+  /deep/.el-form-item__content {
+    height: 200px;
+    overflow: hidden;
+  }
+}
 .my-editor {
   height: 400px;
   div.jsoneditor {