loyin / dataReport

快速生成数据报表平台项目

report_form

---

使用report-cli创建数据报表工程步骤：

1. 安装nrm、切换gm源或者配置npm源为gm

参考 http://wiki.intra.gmplus.com/pages/viewpage.action?pageId=52888483

2. 安装report-cli

npm install -g @gm/report-cli

出现版本信息说明安装成功
report -V 
1.0.0

3. 创建一个新的数据报表项目

report create myProject

---

效果预览

---

---

---

---

http://code.ds.gm.com.cn/gitlab/scot/dp/report-platform-front/blob/master/src/assets/img1.png

css样式参考

目的：不写样式 及 少写样式

https://tailwindcss.com/

---

使用说明步骤：

1. 修改configData配置文件：

主要操作：增加菜单导航路由的配置

const stytemName     = '数据平台';   // 系统名称
const collapseVal    = true;       // 是否折叠菜单
const showRouter     = true;       // 导航菜单中是否启动路由模式
const currentIndex   = '/';        // 菜单的默认选项项;该值为index的值;如配置router时，也可以设置成path的值，为默认显示的页面

const menuData       = [{          // 菜单导航数据格式
      index: '/',
      name: '首页',
      icon: 'icon-shouye-cai text-blue-600',
      router:{
        path: '/',
        name: 'home',
        component: () => import(/* webpackChunkName: "home"*/ '@/views/Layout.vue')
      },
      children:[{                 // 子导航
        index:'/scale',
        name: '销售实绩',
        router: {
          path: '/scale',
          name: 'scale',
          component: () => import(/* webpackChunkName: "layout"*/ '@/views/Layout.vue')
        }
      },
      ......
      ]
    },
    ......
  ];

const cssStyle = {              // 样式设置
  background: "white",
  textCor: "#363f44",
  activeCor: "#409eff"
}    

2. reportData目录下新增报表目录，格式如：

| - reportData
| - reportData | - scale                                 // 新增的报表 目录
| - reportData | - scale | - crumbs                      // 面包屑    目录
| - reportData | - scale | - crumbs     | index.js       // 块数据
| - reportData | - scale | - conditions                  // 筛选条件  目录
| - reportData | - scale | - conditions | index.js       // 块数据
| - reportData | - scale | - conditions | template.vue   // 筛选表单  模板
| - reportData | - scale | - summary                     // 汇总信息  目录
| - reportData | - scale | - summary    | index.js       // 块数据
| - reportData | - scale | - charts                      // 图形展示  目录
| - reportData | - scale | - charts     | index.js       // 块数据
| - reportData | - scale | - table                       // 表格展示  目录
| - reportData | - scale | - table      | index.js       // 块数据
| - reportData | - scale | - table      | template.vue   // 筛选表单  模板
| - reportData | - scale | - index.js                    // 入口引入 面包屑|筛选条件|汇总信息|图形展示|表格展示，需要在index.js中注册才能生效

3. 报表数据配置格式说明如下：

// 表单数据格式 基本配置
const reportFormConfig = {
  crumbs:     {},                // 面包屑         块数据
  conditions: {},                // 筛选条件       块数据
  summary:    {},                // 汇总信息       块数据
  layout:[                       // 布局拆分
    [{块数据}, {块数据}],          // 一行展示两块内容
    [{块数据}, {块数据}, {块数据}]  // 一行展示三块内容
  ],
  charts:     {},                // 图形展示        块数据
  table:      {}                 // 表格展示        块数据
}


// 块数据格式 基本配置
{
  style:      '',                // 布局时的样式设置      layout中的块数据
  query:      {},                // 标题栏查询配置
  content:    {},                // 主内容区域配置
  fetch:      {},                // 加载时请求
  api:        {},                // 调用时请求
  listener    ()=>{}             // 数据改变时事件监听设置
}


// 标题栏查询 与 主内容区域 的数据配置
query | content: {                  // 标题栏 及 主内容区域 配置格式基本一样
  title:          '',               // 标题名称       标题栏设置
  fullScreenName: '',               // 全屏名称       标题栏设置
  subBar:         true,             // 主标题 子标题   标题栏设置
  data:           {},               // 依赖的数据      标题栏及内容区设置
  template:       () => import(),   // 模板           标题栏及内容区设置
  submit:         ()=>{}            // 模板里触发调用   标题栏及内容区设置
}

---

统一的数据请求：

1. 调用方式

// 推荐使用
window.$ajax.module1.getDetail({id:11}).then(res=>{
  console.log(res, 444444)
})

// 不推荐
window.$ajax.get('/GET/getTest').then(function (response) {
  console.log(response,6666655);
}).catch(function (error) {
  console.log(error,555666);
});

2. api列表管理，目录结构

| - api
| - api | - scale                             // 报表目录
| - api | - scale          | - index.js       // 接口
| - api | - scaleAnalysis                     // 报表目录
| - api | - scaleAnalysis  | - index.js       // 接口
| - api | - index.js                          // 新加的报表，需要在index.js中注册才能生效

---

连接test服务器配置在vue.config.js中修改

let testApi = ['http://localhost:8980', 'http://localhost:88', 'http://user-behavior.gm.inc']
testApi.push('http://test.test.com')

if (testApi){
  proxy['/api/reviceLog'] = {
    target: testApi[0],
    changeOrigin: true,
    ws: true,
    pathRewrite: {'/api/reviceLog': 'reviceLog'}
  }
  proxy['/api/dp'] = {
    target: testApi[1],
    changeOrigin: true,
    ws: true,
    pathRewrite: {'/api/dp': 'dp'}
  }
  proxy['/api/help-sys'] = {
    target: testApi[2],
    changeOrigin: true,
    ws: true,
    pathRewrite: {'/api/help-sys': 'help-sys'}
  }
  proxy['/api/test'] = {
    target: testApi[3],
    changeOrigin: true,
    ws: true,
    pathRewrite: {'/api/test: 'test'}
  }
}

---

例子：test报表文件创建步骤，参考如下

1. 修改configData菜单导航配置文件，增加test菜单配置

{
  index:'/test',
  name: '一个测试报表',
  router: {
    path: '/test',
    name: 'test',
  }
}

2. 在reportData里目录下新建test目录

| - reportData
| - reportData | - test

3. 在test目录新建块目录及index.js

块目录：crumbs面包屑 | conditions筛选条件 | summary汇总信息 | charts图形 | table表格

| - test
| - test | - index.js                      // 注册块数据到index.js中
| - test | - crumbs                        // 面包屑块
| - test | - crumbs     | - index.js       // 面包屑的块数据
| - test | - conditions                    // 查询条件块
| - test | - conditions | - index.js       // 查询条件的块数据
| - test | - summary                       // 汇总信息块
| - test | - summary | - index.js          // 汇总信息的块数据
......

4. 块数据的属性一般格式：

style布局样式 | query标题栏区 | content内容区 | fetch默认请求 | api调用请求 | listener监听数据

属性	内容	类型
style	layout时可以设置	String
query	标题栏	Object
content	内容区	Object
fetch	块数据黑默认请求的数据	Object
api	块数据里需要调用触发	Object
listener	数据发生改变时监听数据	Function
layout	布局拆分	Array

5. 三个主要方法及参数

方法	参数	使用范围
listener	area, newObj,oldObj, row, all, $set	块数据的属性
init	row, all, $set	fetch属性下
submit	data, row, all, $set	content及query属性下

6. 块数据的query及content的属性

属性	类型	描述	使用范围
title	String	标题栏名称	query属性下
fullScreenName	String	全屏名称唯一ID	query属性下
subBar	Bolean	是否为子标题	query属性下
data	Object	模板的数据	query及content
template	Function或String	模板组件	query及content
submit	Function	模板中的触发的方法	query及content