# DashboardClient

**Repository Path**: DataColour/DashboardClient

## Basic Information

- **Project Name**: DashboardClient
- **Description**: 关键字：数据可视化、大屏可视化。数据可视化工具 1.x，欢迎访问DataColour可视化平台 2.x。
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: http://datacolour.cn/
- **GVP Project**: No

## Statistics

- **Stars**: 400
- **Forks**: 133
- **Created**: 2020-12-06
- **Last Updated**: 2024-12-29

## Categories & Tags

**Categories**: charting-components

**Tags**: None

## README

# 数据可视化分析平台1.x

## 平台背景介绍

**可视化分析平台1.x**

设计目标：使场景设计人员可通过提供的设计器对业务数据进行模型分析、配置、授权等操作后，决策者可使用播放器查看业务指标，对业务有辅助决策价值。

项目背景：项目完成于2015底，虽然整个项目功能不算完善，但平台也已通过生产项目的验证，对于特定的项目需求亦可进行二次开发，相对比较灵活。

_注：由于技术迭代，催生了 2.x 的产品 [datacolour](http://datacolour.cn/)，对于 1.x 我们做了开源，2.x的开源也在筹划中。欢迎访问 [2.x](http://39.101.138.43:8080)_

产品组织地址： <https://gitee.com/DataColour>

真实项目截图：

![截图](https://images.gitee.com/uploads/images/2020/1207/095405_b486a70f_447631.jpeg "175056_df8ff475_447631.jpeg")

## 平台访问地址

1.x 地址：<https://bit.ly/3n78rtX>

用户： admin 

密码： admin 

演示： [体验](http://39.101.138.43:8070/screen.html)

2.x 地址：<https://bit.ly/3BXXssT>

 **注意：请选择 【公开项目集】** 

用户： test 

密码： 123456 

## 平台技术特点

> 可视化分析平台采用前后端分离模式，后端服务架构设计采用微服务架构模式。

**客户端技术**：采用Angularjs、Jquery、Bootstrap4、Html5、Css3、Echart、Threejs、D3js等前端技术。

**服务端技术**：基于Dubbo分布式微服务架构，采用的相关框架及工具有：springboot、spring security、mybatis、jackson、gson、zookeeper、redis、nginx等技术。

前端项目地址：<https://gitee.com/DataColour/DashboardClient>

后端项目地址：<https://gitee.com/DataColour/DashboardService>

## 平台使用说明

产品使用手册： <http://39.101.138.43:8070/dvp1.xhelp.pdf>

产品部署手册： <http://39.101.138.43:8070/dvp1.xinstall.pdf>

数据库初始脚本： <http://39.101.138.43:8070/dashboard-init.sql>

## 二次开发说明

> 指标展现组件采用插件式设计方式，便于对其进行扩展，开发人员可针对不同用户的需求，对组件进行定制化的扩展开发。

二次开发文档地址： <http://39.101.138.43:8070/doc/index.html>

## 依赖环境说明

前端开发依赖环境如下。注：JS组件已经提交版本管理，无需单独安装，前端只需部署至nginx之类的web容器即可。  

(1).install nodejs & git  
(2).npm install http-server -g  
(3).npm install bower -g  
(4).npm install less -g  
(5).npm install grunt-cli -g

## 项目使用说明

1. 在实际项目中一般会采用集成方式来调用可视化平台配置的页面，简单来说就是依据项目要求做一个外壳，然后嵌入可视化配置的场景。

2. 平台1.x版本当前支持jdbc数据源（可以扩展），接口服务调用（当前版只支持get方式），excel数据源（可以在线简单修改），满足了一般的场景需求。

3. 平台1.x版本当前支持数据过滤，需要在数据集种定义变量以进行常规分析中的过滤、筛选、钻取的需求，具体需要使用相应的api进行操作。

4. 平台1.x版本已经初步具备二次开发的能力，包括属性编辑器，布局形式，渲染插件等多个部分，具体可参看相关的文档。

5. 平台1.x项目已经归档，不会进行后续的更新，如需支持可关注我们的2.x产品。

6. 平台1.x支持插件的事件脚本调用，满足一些复杂的需求，如下面的一些形式：

    ```javascript
    //页面跳转或服务端过滤。要至支持过滤需要在SQL中指定动态参数，如果当前页面过滤则只需指定当前页面id即可。
    this._layout.navigate("pageid",[{ParamName:"name",ParamValue:"value"}])；
    
    //客户端过滤。需要组件自身实现支持。
    if (this._layout){
        this._layout.emitEvent("filterData", [{
            "name": "value"
        }]);
    }

    //组建之间的调用。如弹出内容，需要页面添加弹出组件支持。
    if (this._layout){
        var videoHtml = "app/plugins/controls/common/video/resource/video.html?video=";
        this._layout.emitEvent("showModal", [{
            width: 2400,
            iframe: true,
            iframeHeight: 1080,
            iframeURL: videoHtml + encodeURIComponent("中文.mp4")
        }]);
    }
    ```

## 技术交流

![TIM群](https://images.gitee.com/uploads/images/2020/1209/094516_6675f82c_447631.png "TIM群.png")

## 联系作者

![freezesoul](https://images.gitee.com/uploads/images/2020/1207/094952_72d96afe_447631.jpeg "WeChat Image_20201207094758.jpg")
freezesoul@gmail.com

![netssoul](https://images.gitee.com/uploads/images/2020/1207/095000_082ac510_447631.jpeg "WeChat Image_20201207092400.jpg")
netssoul@gmail.com