├── docs ├── .nojekyll ├── .DS_Store ├── logo.png ├── commonpents │ ├── .DS_Store │ ├── TitleBar │ │ ├── .DS_Store │ │ └── README.md │ ├── Page │ │ └── README.md │ ├── Router │ │ └── README.md │ ├── Chart │ │ └── README.md │ ├── Crumbs │ │ └── README.md │ ├── Layout │ │ └── README.md │ ├── Menu │ │ └── README.md │ ├── BiTable │ │ └── README.md │ └── axios │ │ └── README.md ├── _coverpage.md ├── _navbar.md ├── index.html └── README.md ├── src ├── .DS_Store ├── assets │ ├── img1.png │ ├── img2.png │ ├── logo.png │ ├── .DS_Store │ └── iconfont │ │ ├── iconfont.eot │ │ ├── iconfont.ttf │ │ ├── iconfont.woff │ │ └── iconfont.woff2 ├── components │ ├── Router │ │ ├── index.js │ │ ├── package.json │ │ ├── README.md │ │ ├── src │ │ │ └── index.js │ │ └── configData.js │ ├── axios │ │ ├── index.js │ │ ├── api-Example │ │ │ ├── modules │ │ │ │ ├── moduleA.js │ │ │ │ └── moduleB.js │ │ │ └── index.js │ │ ├── package.json │ │ ├── vue.config-Example.js │ │ ├── src │ │ │ ├── axios.js │ │ │ └── ajax.js │ │ └── README.md │ ├── .DS_Store │ ├── Menu │ │ ├── index.js │ │ ├── package.json │ │ ├── README.md │ │ ├── src │ │ │ ├── menutree.vue │ │ │ └── index.vue │ │ └── configData.js │ ├── Chart │ │ ├── index.js │ │ ├── package.json │ │ ├── README.md │ │ ├── src │ │ │ └── index.vue │ │ └── configData.js │ ├── Crumbs │ │ ├── index.js │ │ ├── package.json │ │ ├── configData.js │ │ ├── README.md │ │ └── src │ │ │ └── index.vue │ ├── Layout │ │ ├── index.js │ │ ├── package.json │ │ ├── configData.js │ │ ├── src │ │ │ ├── flexbox.vue │ │ │ └── index.vue │ │ └── README.md │ ├── BiTable │ │ ├── index.js │ │ ├── package.json │ │ ├── README.md │ │ ├── configData.js │ │ └── src │ │ │ └── index.vue │ ├── TitleBar │ │ ├── index.js │ │ ├── package.json │ │ ├── README.md │ │ ├── configData.js │ │ └── src │ │ │ └── index.vue │ ├── CardContainer │ │ ├── index.js │ │ ├── package.json │ │ ├── query.vue │ │ ├── configData.js │ │ ├── src │ │ │ └── index.vue │ │ └── README.md │ ├── Page │ │ ├── README.md │ │ ├── index.js │ │ ├── package.json │ │ └── src │ │ │ └── index.vue │ └── README.md ├── reportData │ ├── .DS_Store │ ├── example │ │ ├── .DS_Store │ │ ├── crumbs │ │ │ └── index.js │ │ ├── charts │ │ │ ├── queryContrast.vue │ │ │ ├── querySalesAnalysis.vue │ │ │ ├── queryAnalysis.vue │ │ │ └── index.js │ │ ├── index.js │ │ ├── query.vue │ │ ├── table │ │ │ ├── query.vue │ │ │ └── index.js │ │ ├── charts1 │ │ │ ├── template.vue │ │ │ └── index.js │ │ ├── summary │ │ │ └── index.js │ │ ├── summary11 │ │ │ └── index.js │ │ ├── conditions │ │ │ └── template.vue │ │ └── layout1 │ │ │ └── index.js │ ├── salesAnalysis │ │ ├── index.js │ │ ├── crumbs │ │ │ └── index.js │ │ └── summary │ │ │ └── index.js │ ├── scale │ │ ├── crumbs │ │ │ └── index.js │ │ ├── index.js │ │ ├── charts │ │ │ ├── queryContrast.vue │ │ │ ├── querySalesAnalysis.vue │ │ │ └── queryAnalysis.vue │ │ ├── table │ │ │ ├── query.vue │ │ │ └── index.js │ │ ├── summary │ │ │ └── index.js │ │ └── conditions │ │ │ └── template.vue │ ├── index.js │ └── home │ │ └── index.js ├── styles.scss ├── api │ ├── modules │ │ ├── reviceLog.js │ │ ├── salesAnalysis.js │ │ └── scale.js │ └── index.js ├── testNewPage │ ├── test │ │ ├── nav.vue │ │ └── menu.vue │ └── index.vue ├── main.js ├── App.vue └── configData.js ├── babel.config.js ├── public ├── favicon.ico └── index.html ├── bin └── report.js ├── package.json ├── vue.config.js └── README.md /docs/.nojekyll: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sww1230/dataReport/HEAD/docs/.DS_Store -------------------------------------------------------------------------------- /docs/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sww1230/dataReport/HEAD/docs/logo.png -------------------------------------------------------------------------------- /src/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sww1230/dataReport/HEAD/src/.DS_Store -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sww1230/dataReport/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/assets/img1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sww1230/dataReport/HEAD/src/assets/img1.png -------------------------------------------------------------------------------- /src/assets/img2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sww1230/dataReport/HEAD/src/assets/img2.png -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sww1230/dataReport/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /src/components/Router/index.js: -------------------------------------------------------------------------------- 1 | import Router from './src/index.js' 2 | export default Router; -------------------------------------------------------------------------------- /src/components/axios/index.js: -------------------------------------------------------------------------------- 1 | import Plugin from './src/axios'; 2 | export default Plugin; -------------------------------------------------------------------------------- /src/assets/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sww1230/dataReport/HEAD/src/assets/.DS_Store -------------------------------------------------------------------------------- /src/components/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sww1230/dataReport/HEAD/src/components/.DS_Store -------------------------------------------------------------------------------- /src/reportData/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sww1230/dataReport/HEAD/src/reportData/.DS_Store -------------------------------------------------------------------------------- /docs/commonpents/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sww1230/dataReport/HEAD/docs/commonpents/.DS_Store -------------------------------------------------------------------------------- /src/assets/iconfont/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sww1230/dataReport/HEAD/src/assets/iconfont/iconfont.eot -------------------------------------------------------------------------------- /src/assets/iconfont/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sww1230/dataReport/HEAD/src/assets/iconfont/iconfont.ttf -------------------------------------------------------------------------------- /src/reportData/example/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sww1230/dataReport/HEAD/src/reportData/example/.DS_Store -------------------------------------------------------------------------------- /src/assets/iconfont/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sww1230/dataReport/HEAD/src/assets/iconfont/iconfont.woff -------------------------------------------------------------------------------- /src/assets/iconfont/iconfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sww1230/dataReport/HEAD/src/assets/iconfont/iconfont.woff2 -------------------------------------------------------------------------------- /docs/commonpents/TitleBar/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sww1230/dataReport/HEAD/docs/commonpents/TitleBar/.DS_Store -------------------------------------------------------------------------------- /src/components/Menu/index.js: -------------------------------------------------------------------------------- 1 | import Menu from './src/index.vue' 2 | 3 | Menu.install = function(Vue) { 4 | Vue.component(Menu.name, Menu); 5 | }; 6 | 7 | export default Menu; 8 | -------------------------------------------------------------------------------- /src/components/Chart/index.js: -------------------------------------------------------------------------------- 1 | import Chart from './src/index.vue' 2 | 3 | Chart.install = function(Vue) { 4 | Vue.component(Chart.name, Chart); 5 | }; 6 | 7 | export default Chart; 8 | -------------------------------------------------------------------------------- /src/components/Crumbs/index.js: -------------------------------------------------------------------------------- 1 | import Crumbs from './src/index.vue' 2 | 3 | Crumbs.install = function(Vue) { 4 | Vue.component(Crumbs.name, Crumbs); 5 | }; 6 | 7 | export default Crumbs; 8 | -------------------------------------------------------------------------------- /src/components/Layout/index.js: -------------------------------------------------------------------------------- 1 | import Layout from './src/index.vue' 2 | 3 | Layout.install = function(Vue) { 4 | Vue.component(Layout.name, Layout); 5 | }; 6 | 7 | export default Layout; 8 | -------------------------------------------------------------------------------- /src/components/BiTable/index.js: -------------------------------------------------------------------------------- 1 | import BiTable from './src/index.vue' 2 | 3 | BiTable.install = function(Vue) { 4 | Vue.component(BiTable.name, BiTable); 5 | }; 6 | 7 | export default BiTable; 8 | -------------------------------------------------------------------------------- /src/components/TitleBar/index.js: -------------------------------------------------------------------------------- 1 | import TitleBar from './src/index.vue' 2 | 3 | TitleBar.install = function(Vue) { 4 | Vue.component(TitleBar.name, TitleBar); 5 | }; 6 | 7 | export default TitleBar; 8 | -------------------------------------------------------------------------------- /src/components/axios/api-Example/modules/moduleA.js: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * m: mock 4 | */ 5 | export default (mock)=>{ 6 | return { 7 | get: { 8 | getDetail: mock.GET + '/getDetail' 9 | }, 10 | } 11 | } -------------------------------------------------------------------------------- /docs/_coverpage.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # report-cli 4 | 5 | > 数据报表项目快速生成工具 6 | 7 | [GitHub](http://code.ds.gm.com.cn/gitlab/scot/dp/report-platform-front-component) 8 | [Get Started](/?id=使用report-cli创建数据报表工程步骤：) -------------------------------------------------------------------------------- /src/components/CardContainer/index.js: -------------------------------------------------------------------------------- 1 | import CardContainer from './src/index.vue' 2 | 3 | CardContainer.install = function(Vue) { 4 | Vue.component(CardContainer.name, CardContainer); 5 | }; 6 | 7 | export default CardContainer; 8 | -------------------------------------------------------------------------------- /src/styles.scss: -------------------------------------------------------------------------------- 1 | /* theme color */ 2 | $--color-primary: #4299e1; 3 | 4 | /* icon font path, required */ 5 | $--font-path: '~element-ui/lib/theme-chalk/fonts'; 6 | 7 | 8 | @import "~element-ui/packages/theme-chalk/src/index"; 9 | 10 | -------------------------------------------------------------------------------- /src/api/modules/reviceLog.js: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * m: mock 4 | */ 5 | export default ()=>{ 6 | return { 7 | postJSON: { 8 | // getDetail: mock.GET + '/reviceLog/reviceLogMessage' 9 | reviceLogMessage: '/reviceLog/reviceLogMessage' 10 | }, 11 | } 12 | } -------------------------------------------------------------------------------- /src/components/axios/api-Example/modules/moduleB.js: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * m: mock 4 | */ 5 | export default (mock)=>{ 6 | return { 7 | get: { 8 | getTest: mock.GET + '/getTest', 9 | }, 10 | postJSON: { 11 | postTest: mock.POST + '/getList' 12 | } 13 | } 14 | }; -------------------------------------------------------------------------------- /docs/commonpents/Page/README.md: -------------------------------------------------------------------------------- 1 | # page 2 | 3 | ### 功能描述 4 | > router-view中渲染这个组件，所有路由导航都引用Page组件 5 | 6 | ### 安装依赖 7 | ``` 8 | npm install @gm/page 9 | ``` 10 | ### main.js中引入及注册组件 11 | ``` 12 | import reportData from '@/reportData' // 报表数据 13 | import Page from '@gm/page' 14 | Page.install(Vue, reportData) 15 | 16 | ``` -------------------------------------------------------------------------------- /src/components/Page/README.md: -------------------------------------------------------------------------------- 1 | # page 2 | 3 | ### 功能描述 4 | > router-view中渲染这个组件，所有路由导航都引用Page组件 5 | 6 | ### 安装依赖 7 | ``` 8 | npm install @gome/page 9 | ``` 10 | ### main.js中引入及注册组件 11 | ``` 12 | import reportData from '@/reportData' // 报表数据 13 | import Page from '@gome/page' 14 | Page.install(Vue, reportData) 15 | 16 | ``` -------------------------------------------------------------------------------- /src/components/Page/index.js: -------------------------------------------------------------------------------- 1 | import Page from './src/index.vue' 2 | 3 | Page.install = function(Vue, configData) { 4 | Vue.component(Page.name, Object.assign(Page,{ 5 | data() { 6 | return { 7 | info: {}, 8 | reportData: configData 9 | } 10 | } 11 | })); 12 | }; 13 | export default Page; 14 | -------------------------------------------------------------------------------- /src/components/Chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@gome/chart", 3 | "version": "1.0.1", 4 | "description": "图形组件", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "chart" 11 | ], 12 | "author": "shangwenwu", 13 | "license": "ISC" 14 | } 15 | -------------------------------------------------------------------------------- /src/components/axios/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@gome/ajax", 3 | "version": "1.0.3", 4 | "description": "ajax", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "ajax" 11 | ], 12 | "author": "shangwenwu", 13 | "license": "ISC" 14 | } 15 | -------------------------------------------------------------------------------- /src/components/Router/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@gome/router", 3 | "version": "1.0.3", 4 | "description": "router", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "router" 11 | ], 12 | "author": "shangwenwu", 13 | "license": "ISC" 14 | } 15 | -------------------------------------------------------------------------------- /src/components/BiTable/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@gome/bi-table", 3 | "version": "1.0.1", 4 | "description": "table表格", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "table" 11 | ], 12 | "author": "shangwenwu", 13 | "license": "ISC" 14 | } 15 | -------------------------------------------------------------------------------- /src/components/Crumbs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@gome/crumbs", 3 | "version": "1.0.4", 4 | "description": "面包屑及帮助文档", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "crumbs" 11 | ], 12 | "author": "shangwenwu", 13 | "license": "ISC" 14 | } 15 | -------------------------------------------------------------------------------- /src/components/Menu/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@gome/menu", 3 | "version": "1.0.3", 4 | "description": "根据配置文件生成菜单导航及路由", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "menu" 11 | ], 12 | "author": "shangwenwu", 13 | "license": "ISC" 14 | } 15 | -------------------------------------------------------------------------------- /docs/_navbar.md: -------------------------------------------------------------------------------- 1 | * [介绍](/) 2 | 3 | * 依赖 4 | * [菜单](/commonpents/Menu/) 5 | * [路由](/commonpents/Router/) 6 | * [面包屑](/commonpents/Crumbs/) 7 | * [图形](/commonpents/Chart/) 8 | * [布局](/commonpents/Layout/) 9 | * [标题栏](/commonpents/TitleBar/) 10 | * [表格](/commonpents/BiTable/) 11 | * [页面](/commonpents/Page/) 12 | * [请求](/commonpents/axios/) 13 | -------------------------------------------------------------------------------- /src/components/Page/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@gome/page", 3 | "version": "1.0.0", 4 | "description": "Page组件在router-vie中嵌套使用", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "page" 11 | ], 12 | "author": "shangwenwu", 13 | "license": "ISC" 14 | } 15 | -------------------------------------------------------------------------------- /src/reportData/salesAnalysis/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 配置信息 3 | */ 4 | import crumbs from './crumbs' 5 | import conditions from '../scale/conditions' 6 | import summary from './summary' 7 | 8 | const configInfo = { 9 | 10 | // 筛选条件数据 11 | conditions, 12 | 13 | // 面包屑数据 14 | crumbs, 15 | 16 | summary 17 | 18 | } 19 | 20 | export default configInfo; -------------------------------------------------------------------------------- /src/components/Layout/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@gome/layout", 3 | "version": "1.0.1", 4 | "description": "根据数组结构生成，生成flex布局", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "layout" 11 | ], 12 | "author": "shangwenwu", 13 | "license": "ISC" 14 | } 15 | -------------------------------------------------------------------------------- /src/components/Layout/configData.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | [{ 3 | style:'border-bottom:1px solid purple; padding:20px;', 4 | bar:{}, 5 | content:{} 6 | }], 7 | [{ 8 | style:'border-right:1px solid purple; padding:20px;', 9 | bar:{}, 10 | content:{} 11 | },{ 12 | style:'padding:20px;', 13 | bar:{}, 14 | content:{} 15 | }] 16 | ] -------------------------------------------------------------------------------- /src/components/TitleBar/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@gome/title-bar", 3 | "version": "1.0.3", 4 | "description": "标题栏:查询区及内容区配置生成", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "title-bars" 11 | ], 12 | "author": "shangwenwu", 13 | "license": "ISC" 14 | } 15 | -------------------------------------------------------------------------------- /src/components/CardContainer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@gome/card-container", 3 | "version": "1.0.1", 4 | "description": "卡片容器 包裹内容组件使用", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "cardContainer" 11 | ], 12 | "author": "shangwenwu", 13 | "license": "ISC" 14 | } 15 | -------------------------------------------------------------------------------- /src/testNewPage/test/nav.vue: -------------------------------------------------------------------------------- 1 | 7 | 22 | -------------------------------------------------------------------------------- /src/testNewPage/test/menu.vue: -------------------------------------------------------------------------------- 1 | 7 | 22 | -------------------------------------------------------------------------------- /src/components/Crumbs/configData.js: -------------------------------------------------------------------------------- 1 | // 面包屑数据 2 | const crumbs = { 3 | title: 'crumbs', 4 | icon: true, 5 | content: (callback)=>{ 6 | window.$ajax.get('/GET/getTest').then(function (response) { 7 | callback(response.data) 8 | }).catch(function (error) { 9 | console.log(error,555666); 10 | }); 11 | return [ 12 | 'afafad11', 13 | 'ccccc', 14 | 'eeeeeefffff' 15 | ]} 16 | } 17 | 18 | export default crumbs; -------------------------------------------------------------------------------- /src/components/Layout/src/flexbox.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | -------------------------------------------------------------------------------- /src/reportData/scale/crumbs/index.js: -------------------------------------------------------------------------------- 1 | export default { 2 | title: 'crumbs', 3 | icon: true, 4 | time: '', 5 | fetch: { 6 | init(row){ // row, all, $set 7 | window.$ajax.scale.findSomeOneDoc({"createTime":"","docContent":"","pageDesc":"","pageUrl":"/sales/scale","updateTime":"","sysCode":"001"}).then(res=>{ 8 | row.content = [] 9 | res.data.map(r => { 10 | row.content.push(r.doc_content) 11 | }) 12 | }) 13 | } 14 | }, 15 | content: [] 16 | } -------------------------------------------------------------------------------- /src/reportData/scale/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 配置信息 3 | */ 4 | import crumbs from './crumbs' 5 | import conditions from './conditions' 6 | import summary from './summary' 7 | import charts from './charts' 8 | import table from './table' 9 | 10 | 11 | const configInfo = { 12 | 13 | // 面包屑数据 14 | crumbs, 15 | 16 | // 筛选条件数据 17 | conditions, 18 | 19 | // 汇总信息数据 20 | summary, 21 | 22 | // 图形数据 23 | charts, 24 | 25 | // 表格数据 26 | table 27 | 28 | } 29 | 30 | export default configInfo; -------------------------------------------------------------------------------- /src/reportData/example/crumbs/index.js: -------------------------------------------------------------------------------- 1 | export default { 2 | title: 'crumbs', 3 | icon: true, 4 | time: '', 5 | fetch: { 6 | init(row){ // row, all, $set 7 | window.$ajax.scale.findSomeOneDoc({"createTime":"","docContent":"","pageDesc":"","pageUrl":"/sales/scale","updateTime":"","sysCode":"001"}).then(res=>{ 8 | row.content = [] 9 | res.data.map(r => { 10 | row.content.push(r.doc_content) 11 | }) 12 | }) 13 | } 14 | }, 15 | content: [] 16 | } -------------------------------------------------------------------------------- /src/reportData/index.js: -------------------------------------------------------------------------------- 1 | import home from './home' // 首页 2 | import scale from './scale' // 销售实绩 3 | import salesAnalysis from './salesAnalysis' // 销售分析 4 | import example from './example' // 例子 5 | 6 | // import structureAnalysis from './structureAnalysis' // 结构分析 7 | // import heroSku from './heroSku' // 重点机型 8 | 9 | export default { 10 | home, 11 | scale, 12 | salesAnalysis, 13 | example 14 | } -------------------------------------------------------------------------------- /src/reportData/scale/charts/queryContrast.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 19 | -------------------------------------------------------------------------------- /src/reportData/example/charts/queryContrast.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 19 | -------------------------------------------------------------------------------- /src/reportData/salesAnalysis/crumbs/index.js: -------------------------------------------------------------------------------- 1 | export default { 2 | title: 'crumbs', 3 | icon: true, 4 | time: '', 5 | fetch: { 6 | init(row){ // row, all, $set 7 | let params = {"createTime":"","docContent":"","pageDesc":"","pageUrl":"/sales/salesAnalysis","updateTime":"","sysCode":"001"} 8 | window.$ajax.scale.findSomeOneDoc(params).then(res=>{ 9 | row.content = [] 10 | res.data.map(r => { 11 | row.content.push(r.doc_content) 12 | }) 13 | }) 14 | } 15 | }, 16 | content: [] 17 | } -------------------------------------------------------------------------------- /docs/commonpents/Router/README.md: -------------------------------------------------------------------------------- 1 | # Bi报表路由 2 | 3 | ### 功能描述 4 | > 根据config信息生成路由与@gm/menu配合使用 5 | 6 | ### 安装依赖 7 | ``` 8 | npm install @gm/router 9 | ``` 10 | ### main.js中引入及注册组件 11 | ``` 12 | import route from '@gm/router' 13 | import {menuData, currentIndex} from '@/configData.js' 14 | const router = route(Vue, menuData, currentIndex, ViewComponent) 15 | 16 | ``` 17 | ### 依赖数据说明 18 | ``` 19 | import {menuData, currentIndex } from '@/configData.js' 20 | 21 | menuData: menuData, // 菜单数据格式 22 | currentIndex: '/home', // 默认路径的值 23 | 24 | ``` 25 | 26 | ### 示例配置文件请参考 27 | /node_modules/@gm/router/configData.js配置文件 28 | -------------------------------------------------------------------------------- /src/components/Router/README.md: -------------------------------------------------------------------------------- 1 | # Bi报表路由 2 | 3 | ### 功能描述 4 | > 根据config信息生成路由与@gome/menu配合使用 5 | 6 | ### 安装依赖 7 | ``` 8 | npm install @gome/router 9 | ``` 10 | ### main.js中引入及注册组件 11 | ``` 12 | import route from '@gome/router' 13 | import {menuData, currentIndex} from '@/configData.js' 14 | const router = route(Vue, menuData, currentIndex, ViewComponent) 15 | 16 | ``` 17 | ### 依赖数据说明 18 | ``` 19 | import {menuData, currentIndex } from '@/configData.js' 20 | 21 | menuData: menuData, // 菜单数据格式 22 | currentIndex: '/home', // 默认路径的值 23 | 24 | ``` 25 | 26 | ### 示例配置文件请参考 27 | /node_modules/@gome/router/configData.js配置文件 28 | -------------------------------------------------------------------------------- /src/reportData/example/charts/querySalesAnalysis.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 20 | 25 | -------------------------------------------------------------------------------- /src/reportData/scale/charts/querySalesAnalysis.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 20 | 25 | -------------------------------------------------------------------------------- /src/reportData/example/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 配置信息 3 | */ 4 | 5 | import crumbs from './crumbs' // 面包屑数据 6 | import conditions from './conditions' // 筛选条件数据 7 | import summary from './summary' // 汇总信息数据 8 | import charts from './charts' // 图形展示 9 | import table from './table' // 表格展示 10 | 11 | import summary11 from './summary11' 12 | import layout from './layout1' 13 | import charts1 from './charts1' 14 | 15 | const configInfo = { 16 | crumbs, // 面包屑数据 17 | 18 | summary11, 19 | layout, 20 | charts1, 21 | 22 | conditions, // 筛选条件数据 23 | summary, // 汇总信息数据 24 | charts, // 图形数据 25 | table, // 表格数据 26 | } 27 | export default configInfo; -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | BI报表 10 | 11 | 12 | 15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/reportData/salesAnalysis/summary/index.js: -------------------------------------------------------------------------------- 1 | export default { 2 | query:{ 3 | title: '筛选222条件' 4 | }, 5 | content:{ 6 | data: { 7 | time: [], 8 | }, 9 | }, 10 | fetch: { 11 | init(row, all){ // row, all, $set 12 | let data = row.content.data; 13 | 14 | // 获取时间 15 | window.$ajax.salesAnalysis.getMaxDate({}).then(res=>{ 16 | all.crumbs.time = window.moment(res).subtract(1, 'days').format('YYYY-MM-DD') 17 | 18 | let time = [window.moment(res).format('YYYY-') + (window.moment(res).format('M') > 6 ? '07-01' : '01-01'), all.crumbs.time] 19 | data.time = [window.moment(time[0], 'YYYY-MM-DD'), window.moment(time[1], 'YYYY-MM-DD')] 20 | 21 | 22 | }) 23 | 24 | } 25 | } 26 | } -------------------------------------------------------------------------------- /src/reportData/example/query.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | -------------------------------------------------------------------------------- /src/components/axios/api-Example/index.js: -------------------------------------------------------------------------------- 1 | 2 | // 1. 所有的 ajax api 在此文件夹下配置 3 | // 2. 根据业务模块，将 api 划分成不同的 modules，放在各自的文件内，单独维护 4 | // 3. 这里提供两个示例模块 - moduleA 与 moduleB，项目中根据业务功能命名。 5 | // 4. 新加的业务模块，需要在 index.js 中注册才能生效，详见：index.js。 6 | 7 | /** 8 | * 9 | * 调用方法示例 10 | * this.$ajax.get('/GET/getTest').then(function (response) { 11 | console.log(response); 12 | }).catch(function (error) { 13 | console.log(error); 14 | }); 15 | 16 | 推荐调用方式 this.$ajax[模块名称][接口名称](参数)； 方便接口统一管理 17 | this.$ajax.module1.getDetail({id:11122}).then(res=>{ 18 | console.log(res) 19 | }) 20 | 21 | */ 22 | 23 | import module1 from './modules/moduleA' 24 | import module2 from './modules/moduleB' 25 | 26 | export default { 27 | module1, 28 | module2 29 | } -------------------------------------------------------------------------------- /src/components/CardContainer/query.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | -------------------------------------------------------------------------------- /src/api/index.js: -------------------------------------------------------------------------------- 1 | 2 | // 1. 所有的 ajax api 在此文件夹下配置 3 | // 2. 根据业务模块，将 api 划分成不同的 modules，放在各自的文件内，单独维护 4 | // 3. 这里提供两个示例模块 - moduleA 与 moduleB，项目中根据业务功能命名。 5 | // 4. 新加的业务模块，需要在 index.js 中注册才能生效，详见：index.js。 6 | 7 | /** 8 | * 9 | * 调用方法示例 10 | * this.$ajax.get('/GET/getTest').then(function (response) { 11 | console.log(response); 12 | }).catch(function (error) { 13 | console.log(error); 14 | }); 15 | 16 | 推荐调用方式 this.$ajax[模块名称][接口名称](参数)； 方便接口统一管理 17 | this.$ajax.module1.getDetail({id:11122}).then(res=>{ 18 | console.log(res) 19 | }) 20 | 21 | */ 22 | 23 | import reviceLog from './modules/reviceLog' 24 | import scale from './modules/scale' 25 | import salesAnalysis from './modules/salesAnalysis' 26 | 27 | export default { 28 | reviceLog, 29 | scale, 30 | salesAnalysis 31 | } -------------------------------------------------------------------------------- /docs/commonpents/TitleBar/README.md: -------------------------------------------------------------------------------- 1 | # 标题栏 2 | 3 | ### 功能描述 4 | 5 | > 标题栏； 6 | > 1. 标题栏查询搜索可设置query配置； 7 | > 2. 主内容区可设置content配置; 8 | 9 | ### 安装依赖 10 | 11 | ``` 12 | npm install @gm/title-bar 13 | ``` 14 | 15 | ### main.js中引入及注册组件 16 | 17 | ``` 18 | import TitleBar from '@gm/title-bar' 19 | TitleBar.install(Vue) 20 | ``` 21 | 22 | ### 页面中使用方式 23 | 24 | ``` 25 | 26 |
其它内容
27 | 28 | ``` 29 | 30 | ### 依赖数据说明 31 | 32 | ``` 33 | row:{ 34 | style // 设置标题栏区域块的样式 35 | query // 设置查询栏内容 配置 36 | content // 内容区配置 37 | listener // query及content数据的响应式监听事件 38 | } 39 | info:为所有配置数据 40 | ``` 41 | 42 | ### 示例配置文件请参考 43 | 44 | /node_modules/@gm/title-bar/configData.js配置文件 45 | 46 | ### 预留slot插槽 47 | 48 | ``` 49 | 50 | 51 | 54 | ``` -------------------------------------------------------------------------------- /src/components/TitleBar/README.md: -------------------------------------------------------------------------------- 1 | # 标题栏 2 | 3 | ### 功能描述 4 | 5 | > 标题栏； 6 | > 1. 标题栏查询搜索可设置query配置； 7 | > 2. 主内容区可设置content配置; 8 | 9 | ### 安装依赖 10 | 11 | ``` 12 | npm install @gome/title-bar 13 | ``` 14 | 15 | ### main.js中引入及注册组件 16 | 17 | ``` 18 | import TitleBar from '@gome/title-bar' 19 | TitleBar.install(Vue) 20 | ``` 21 | 22 | ### 页面中使用方式 23 | 24 | ``` 25 | 26 |
其它内容
27 | 28 | ``` 29 | 30 | ### 依赖数据说明 31 | 32 | ``` 33 | row:{ 34 | style // 设置标题栏区域块的样式 35 | query // 设置查询栏内容 配置 36 | content // 内容区配置 37 | listener // query及content数据的响应式监听事件 38 | } 39 | info:为所有配置数据 40 | ``` 41 | 42 | ### 示例配置文件请参考 43 | 44 | /node_modules/@gome/title-bar/configData.js配置文件 45 | 46 | ### 预留slot插槽 47 | 48 | ``` 49 | 50 | 51 | 54 | ``` -------------------------------------------------------------------------------- /src/components/axios/vue.config-Example.js: -------------------------------------------------------------------------------- 1 | const port = 8686; 2 | 3 | // mock接口数据 4 | let mockApi = 'http://10.115.105.14:8989/app/mock/22/' 5 | // 测试环境接口数据 6 | let testApi = 'http://www.test.com' 7 | 8 | let proxy = {} 9 | let methods = ['GET','POST','PUT','DELETE'] 10 | methods.map(r=>{ 11 | let pathRewrite = {} 12 | pathRewrite['/api/'+r] = r 13 | proxy['/api/'+r] = { 14 | target: mockApi, 15 | changeOrigin: true, 16 | ws: true, 17 | pathRewrite: pathRewrite 18 | } 19 | }) 20 | 21 | if (testApi){ 22 | proxy['/api'] = { 23 | target: testApi, 24 | changeOrigin: true, 25 | ws: true, 26 | pathRewrite: {'/api': ''} 27 | } 28 | } 29 | 30 | module.exports = { 31 | devServer: { 32 | port, 33 | open: true, 34 | overlay: { 35 | warnings: false, 36 | errors: true 37 | }, 38 | proxy: proxy 39 | } 40 | }; -------------------------------------------------------------------------------- /src/reportData/scale/charts/queryAnalysis.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 24 | 36 | -------------------------------------------------------------------------------- /src/reportData/example/charts/queryAnalysis.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 24 | 36 | -------------------------------------------------------------------------------- /docs/commonpents/Chart/README.md: -------------------------------------------------------------------------------- 1 | # 图形 2 | 3 | ### 功能描述 4 | 5 | > 图形展示形式 6 | 7 | ### 安装依赖 8 | 9 | ``` 10 | npm install @gm/chart 11 | ``` 12 | 13 | ### main.js中引入及注册组件 14 | 15 | ``` 16 | import Chart from '@gm/chart' 17 | Chart.install(Vue) 18 | ``` 19 | 20 | ### 图形配置时加入 21 | 22 | ``` 23 | content:{ 24 | template: 'Chart' 25 | } 26 | ``` 27 | 28 | ### 依赖数据说明 29 | 30 | ``` 31 | content:{ 32 | data: { 33 | chart: 've-line', // v-chart的图形组件名称 34 | dataEmpty: true, // true: 提示暂无数据 35 | loading: false, // 加载; 默认false 36 | height: '300px', // 图形高度默认300px 37 | chartSettings: {} // 参考v-chart 38 | columns: [], // ... 39 | rows: [], // ... 40 | grid: {}, // ... 41 | dataZoom: [], // ... 42 | chartExtend: {} // ... 43 | } 44 | } 45 | ``` 46 | 47 | ### 示例配置文件请参考 48 | 49 | /node_modules/@gm/chart/configData.js配置文件 50 | -------------------------------------------------------------------------------- /src/components/Chart/README.md: -------------------------------------------------------------------------------- 1 | # 图形 2 | 3 | ### 功能描述 4 | 5 | > 图形展示形式 6 | 7 | ### 安装依赖 8 | 9 | ``` 10 | npm install @gome/chart 11 | ``` 12 | 13 | ### main.js中引入及注册组件 14 | 15 | ``` 16 | import Chart from '@gome/chart' 17 | Chart.install(Vue) 18 | ``` 19 | 20 | ### 图形配置时加入 21 | 22 | ``` 23 | content:{ 24 | template: 'Chart' 25 | } 26 | ``` 27 | 28 | ### 依赖数据说明 29 | 30 | ``` 31 | content:{ 32 | data: { 33 | chart: 've-line', // v-chart的图形组件名称 34 | dataEmpty: true, // true: 提示暂无数据 35 | loading: false, // 加载; 默认false 36 | height: '300px', // 图形高度默认300px 37 | chartSettings: {} // 参考v-chart 38 | columns: [], // ... 39 | rows: [], // ... 40 | grid: {}, // ... 41 | dataZoom: [], // ... 42 | chartExtend: {} // ... 43 | } 44 | } 45 | ``` 46 | 47 | ### 示例配置文件请参考 48 | 49 | /node_modules/@gome/chart/configData.js配置文件 50 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | report-cli 报表平台快速生成工具 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 |
16 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /src/reportData/example/table/query.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 24 | 29 | -------------------------------------------------------------------------------- /src/reportData/scale/table/query.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 24 | 29 | -------------------------------------------------------------------------------- /docs/commonpents/Crumbs/README.md: -------------------------------------------------------------------------------- 1 | # 面包屑 2 | 3 | ### 功能描述 4 | 5 | > 面包屑加帮助文档信息 6 | 7 | ### 安装依赖 8 | 9 | ``` 10 | npm install @gm/crumbs 11 | ``` 12 | 13 | ### main.js中引入及注册组件 14 | 15 | ``` 16 | import Test from '@gm/crumbs' 17 | Test.install(Vue) 18 | ``` 19 | 20 | ### 页面中使用方式 21 | 22 | ``` 23 | 28 | ``` 29 | 30 | ### 依赖数据说明 31 | 32 | ``` 33 | data: [{index: 1, name: '销售业绩'},{index: 2, name: '销售分析'}, ...] 34 | info: { 35 | icon: true, //是否显示icon 36 | title: '组件名称', 37 | time: '2019-08-14', // 可选；显示数据上次更新时间：2019-08-14 38 | content: function || array // 方法或数组，返回的数据：['22323','aaabb','ccdef23323'] 39 | } 40 | ``` 41 | 42 | ### 回调方法说明 43 | 44 | ``` 45 | @flod 触发父组件的折叠菜单导航的回调方法 46 | ``` 47 | 48 | ### 示例配置文件请参考 49 | 50 | /node_modules/@gm/crumbs/configData.js配置文件 51 | 52 | ### 父组件控制菜单的折叠展开方法 53 | 54 | ``` 55 | this.$refs.menu.flod() 56 | ``` -------------------------------------------------------------------------------- /src/components/Crumbs/README.md: -------------------------------------------------------------------------------- 1 | # 面包屑 2 | 3 | ### 功能描述 4 | 5 | > 面包屑加帮助文档信息 6 | 7 | ### 安装依赖 8 | 9 | ``` 10 | npm install @gome/crumbs 11 | ``` 12 | 13 | ### main.js中引入及注册组件 14 | 15 | ``` 16 | import Test from '@gome/crumbs' 17 | Test.install(Vue) 18 | ``` 19 | 20 | ### 页面中使用方式 21 | 22 | ``` 23 | 28 | ``` 29 | 30 | ### 依赖数据说明 31 | 32 | ``` 33 | data: [{index: 1, name: '销售业绩'},{index: 2, name: '销售分析'}, ...] 34 | info: { 35 | icon: true, //是否显示icon 36 | title: '组件名称', 37 | time: '2019-08-14', // 可选；显示数据上次更新时间：2019-08-14 38 | content: function || array // 方法或数组，返回的数据：['22323','aaabb','ccdef23323'] 39 | } 40 | ``` 41 | 42 | ### 回调方法说明 43 | 44 | ``` 45 | @flod 触发父组件的折叠菜单导航的回调方法 46 | ``` 47 | 48 | ### 示例配置文件请参考 49 | 50 | /node_modules/@gome/crumbs/configData.js配置文件 51 | 52 | ### 父组件控制菜单的折叠展开方法 53 | 54 | ``` 55 | this.$refs.menu.flod() 56 | ``` -------------------------------------------------------------------------------- /src/components/Chart/src/index.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | -------------------------------------------------------------------------------- /src/reportData/example/charts1/template.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | -------------------------------------------------------------------------------- /src/components/Router/src/index.js: -------------------------------------------------------------------------------- 1 | import Router from 'vue-router' 2 | 3 | const routerInit = (Vue, menuData, currentIndex, ViewComponent) => { 4 | 5 | Vue.use(Router) 6 | // 根据菜单配置文件，创建路由 7 | const createRouter = (config) => { 8 | let routers = [] 9 | const eachMenuGetRouter = (data) => { 10 | if(data.router){ 11 | !data.router.component && (data.router.component = ViewComponent) 12 | routers.push(data.router) 13 | if(currentIndex == data.router.path){ 14 | routers.push(Object.assign({},data.router,{path:'/'})) 15 | } 16 | } 17 | if(data.children){ 18 | data.children.map(sub=>{ 19 | eachMenuGetRouter(sub) 20 | }) 21 | } 22 | } 23 | config.map(subMenu=>{ 24 | eachMenuGetRouter(subMenu) 25 | }) 26 | console.log(routers) 27 | return routers 28 | } 29 | 30 | return new Router({ 31 | mode: 'history', 32 | base: process.env.BASE_URL, 33 | routes: createRouter(menuData) 34 | }) 35 | 36 | } 37 | 38 | export default routerInit; -------------------------------------------------------------------------------- /docs/commonpents/Layout/README.md: -------------------------------------------------------------------------------- 1 | # 布局layout 2 | 3 | ### 功能描述 4 | 5 | > 根据数组结构生成，生成 flex box 布局 6 | 7 | ### 安装依赖 8 | 9 | ``` 10 | npm install @gm/layout 11 | ``` 12 | 13 | ### main.js中引入及注册组件 14 | 15 | ``` 16 | import Layout from '@gm/layout' 17 | Layout.install(Vue) 18 | ``` 19 | 20 | ### 页面中使用方式 21 | 22 | ``` 23 | 24 | 27 | 28 | ``` 29 | 30 | ### 依赖数据说明 31 | 32 | ``` 33 | data: [ 34 | [{ // 第一行 里边一个块 35 | style:'border-bottom:1px solid purple;', // 最内侧div的样式 36 | content: 内容区展示的其它信息 37 | }], 38 | [{ // 第二行 里边二个块 39 | style:'border-right:1px solid purple; padding:20px;',// 最内侧div的样式 40 | content: 内容区展示的其它信息 41 | },{ 42 | style:'padding:20px;', // 最内侧div的样式 43 | content: 内容区展示的其它信息 44 | }] 45 | ] 46 | ``` 47 | 48 | ### 示例配置文件请参考 49 | 50 | /node_modules/@gm/crumbs/configData.js配置文件 51 | 52 | ### slot插槽传递的数据data 53 | 54 | ``` 55 | 56 | 57 | 60 | ``` -------------------------------------------------------------------------------- /src/components/Layout/README.md: -------------------------------------------------------------------------------- 1 | # 布局layout 2 | 3 | ### 功能描述 4 | 5 | > 根据数组结构生成，生成 flex box 布局 6 | 7 | ### 安装依赖 8 | 9 | ``` 10 | npm install @gome/layout 11 | ``` 12 | 13 | ### main.js中引入及注册组件 14 | 15 | ``` 16 | import Layout from '@gome/layout' 17 | Layout.install(Vue) 18 | ``` 19 | 20 | ### 页面中使用方式 21 | 22 | ``` 23 | 24 | 27 | 28 | ``` 29 | 30 | ### 依赖数据说明 31 | 32 | ``` 33 | data: [ 34 | [{ // 第一行 里边一个块 35 | style:'border-bottom:1px solid purple;', // 最内侧div的样式 36 | content: 内容区展示的其它信息 37 | }], 38 | [{ // 第二行 里边二个块 39 | style:'border-right:1px solid purple; padding:20px;',// 最内侧div的样式 40 | content: 内容区展示的其它信息 41 | },{ 42 | style:'padding:20px;', // 最内侧div的样式 43 | content: 内容区展示的其它信息 44 | }] 45 | ] 46 | ``` 47 | 48 | ### 示例配置文件请参考 49 | 50 | /node_modules/@gome/crumbs/configData.js配置文件 51 | 52 | ### slot插槽传递的数据data 53 | 54 | ``` 55 | 56 | 57 | 60 | ``` -------------------------------------------------------------------------------- /src/components/README.md: -------------------------------------------------------------------------------- 1 | # 报表平台涉及的公共组件 2 | ------ 3 | 1. Menu: 菜单导航 http://npm.gome.inc/package/@gome/menu 4 | 2. BiTable：表格 http://npm.gome.inc/package/@gome/bi-table 5 | 3. axios: 统一数据请求 http://npm.gome.inc/package/@gome/ajax 6 | 4. cardContainer: 卡片容器 废弃 http://npm.gome.inc/package/@gome/card-container 7 | 5. Crumbs: 面包屑及帮助文档 http://npm.gome.inc/package/@gome/crumbs 8 | 6. Layout: flex布局 http://npm.gome.inc/package/@gome/layout 9 | 7. Page: router-vie中默认嵌套 http://npm.gome.inc/package/@gome/page 10 | 8. Chart: 图形展示 http://npm.gome.inc/package/@gome/chart 11 | 9. Router: 路由组件 http://npm.gome.inc/package/@gome/router 12 | 10. TitleBar: 标题栏 http://npm.gome.inc/package/@gome/title-bar 13 | 14 | 15 | ---- 16 | 17 | ### 使用report-cli创建数据报表工程步骤： 18 | 19 | > http://npm.gome.inc/package/@gome/report-cli 20 | 21 | ##### 1. 安装nrm、切换gome源或者配置npm源为gome 22 | 23 | > 参考 http://wiki.intra.gomeplus.com/pages/viewpage.action?pageId=52888483 24 | 25 | ##### 2. 安装report-cli 26 | ``` 27 | npm install -g @gome/report-cli 28 | 29 | 出现版本信息说明安装成功 30 | report -V 31 | 1.0.0 32 | ``` 33 | ##### 3. 创建一个新的数据报表项目 34 | ``` 35 | report create myProject 36 | ``` 37 | -------------------------------------------------------------------------------- /docs/commonpents/Menu/README.md: -------------------------------------------------------------------------------- 1 | # 折叠菜单组件 2 | 3 | ### 功能描述 4 | > 折叠菜单，根据数据动态生成菜单导航 5 | 6 | ### 安装依赖 7 | ``` 8 | npm install @gm/menu 9 | ``` 10 | ### main.js中引入及注册组件 11 | ``` 12 | import Test from '@gm/menu' 13 | Test.install(Vue) 14 | ``` 15 | ### 页面中使用方式 16 | ``` 17 | 26 | ``` 27 | ### 依赖数据说明 28 | ``` 29 | import {menuData, collapseVal, currentIndex, showRouter, handleMenu, cssStyle} from '@/configData.js' 30 | 31 | menuConf:{ 32 | collapseVal: true, // 是否折叠菜单 33 | currentIndex: '1-1', // 默认选定的状态；如配置router时，也可以设置成path的值，为默认显示的页面 34 | menuData: menuData, // 菜单数据格式 35 | router: showRouter, // 是启动路由模式 36 | cssStyle: cssStyle // 样式设置 37 | } 38 | ``` 39 | ### 回调方法说明 40 | ``` 41 | methods:{ 42 | handleMenu 43 | } 44 | ``` 45 | 46 | ### 示例配置文件请参考 47 | /node_modules/@gm/menu/configData.js配置文件 48 | 49 | ### 父组件控制菜单的折叠展开方法 50 | ``` 51 | this.$refs.menu.flod() 52 | ``` 53 | -------------------------------------------------------------------------------- /src/components/Menu/README.md: -------------------------------------------------------------------------------- 1 | # 折叠菜单组件 2 | 3 | ### 功能描述 4 | > 折叠菜单，根据数据动态生成菜单导航 5 | 6 | ### 安装依赖 7 | ``` 8 | npm install @gome/menu 9 | ``` 10 | ### main.js中引入及注册组件 11 | ``` 12 | import Test from '@gome/menu' 13 | Test.install(Vue) 14 | ``` 15 | ### 页面中使用方式 16 | ``` 17 | 26 | ``` 27 | ### 依赖数据说明 28 | ``` 29 | import {menuData, collapseVal, currentIndex, showRouter, handleMenu, cssStyle} from '@/configData.js' 30 | 31 | menuConf:{ 32 | collapseVal: true, // 是否折叠菜单 33 | currentIndex: '1-1', // 默认选定的状态；如配置router时，也可以设置成path的值，为默认显示的页面 34 | menuData: menuData, // 菜单数据格式 35 | router: showRouter, // 是启动路由模式 36 | cssStyle: cssStyle // 样式设置 37 | } 38 | ``` 39 | ### 回调方法说明 40 | ``` 41 | methods:{ 42 | handleMenu 43 | } 44 | ``` 45 | 46 | ### 示例配置文件请参考 47 | /node_modules/@gome/menu/configData.js配置文件 48 | 49 | ### 父组件控制菜单的折叠展开方法 50 | ``` 51 | this.$refs.menu.flod() 52 | ``` 53 | -------------------------------------------------------------------------------- /src/components/CardContainer/configData.js: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '汇总信息栏', 3 | api:{ // 调用时再触发 数据请求 4 | getInfo: function(row, params = {}){} 5 | }, 6 | fetch:{ // 汇总信息的数据请求列表; fetch立即执行 数据请求 7 | getOpt: function(row, params = {}){ // 请求接口数据 8 | let o = [] 9 | setTimeout(() => { 10 | o = [{ 11 | value: '选项1', 12 | label: '黄金糕' 13 | }] 14 | row.query.data.options = o // 给query.data.options赋值 15 | }, 4000); 16 | return o 17 | } 18 | }, 19 | query: { // 卡容器右侧内容 查询条件的扩展 20 | data: { // 查询条件所依赖数据 21 | radio: 3, 22 | options:[], 23 | value: '' 24 | }, 25 | template: () => import(/* webpackChunkName: "layout"'*/ './query'), // 查询模板，vue文件 26 | submit: (data, row, $set, allInfo)=>{ // 模板中按钮事件触发的事件 27 | row.fetch.getOpt(row, {}) // 再次请求接口 28 | console.log(data) 29 | } 30 | }, 31 | listener(area, newVal, oldVal, row, $set, allInfo){ // 响应式监听触发 32 | // area: query|content 33 | if(area == 'query'){ // 筛选区数据监听 34 | if(newVal.value != oldVal.value){ // 改变值时触发 35 | console.log('执行query操作', newVal.value) 36 | } 37 | } 38 | } 39 | } -------------------------------------------------------------------------------- /src/components/Chart/configData.js: -------------------------------------------------------------------------------- 1 | export default { 2 | // grid:{ 3 | // right: 0, 4 | // top:40, 5 | // bottom: 45, 6 | // left:0 7 | // }, 8 | // dataEmpty: true, 9 | // loading: true, 10 | // dataZoom:[ 11 | // { 12 | // type: 'slider', 13 | // start: 0, 14 | // end: 20 15 | // } 16 | // ], 17 | chart: 've-sankey', 18 | chartExtend: { 19 | series: { 20 | barWidth: 10 21 | }, 22 | tooltip: { 23 | trigger: 'none' 24 | } 25 | }, 26 | chartSettings: { 27 | links: [ 28 | { source: '首页', target: '列表页a', value: 0.5 }, 29 | { source: '首页', target: '列表页b', value: 0.5 }, 30 | { source: '列表页a', target: '内容页a-1', value: 0.1 }, 31 | { source: '列表页a', target: '内容页a-2', value: 0.4 }, 32 | { source: '列表页b', target: '内容页b-1', value: 0.2 }, 33 | { source: '列表页b', target: '内容页b-2', value: 0.3 } 34 | ] 35 | }, 36 | columns: ['页面', '访问量'], 37 | rows: [ 38 | { '页面': '首页', '访问量': 100000 }, 39 | { '页面': '列表页a', '访问量': 20000 }, 40 | { '页面': '列表页b', '访问量': 80000 }, 41 | { '页面': '内容页a-1', '访问量': 10000 }, 42 | { '页面': '内容页a-2', '访问量': 10000 }, 43 | { '页面': '内容页b-1', '访问量': 60000 }, 44 | { '页面': '内容页b-2', '访问量': 20000 } 45 | ] 46 | } -------------------------------------------------------------------------------- /src/components/Page/src/index.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | -------------------------------------------------------------------------------- /src/api/modules/salesAnalysis.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | /** 5 | * m: mock 6 | */ 7 | export default (mock)=>{ 8 | return { 9 | get: { 10 | getTest: mock.GET + '/getTest', // mock测试数据 11 | refresh: '/dp/refresh', // 大区及分部的数据 12 | getFirstCategory: '/dp/common/getDivisionDropDown', // 一级品类 13 | getChannelDropDown: '/dp/common/getChannelDropDown', // 渠道数据列表 14 | }, 15 | postJSON: { 16 | getMaxDate: '/dp/salesAnalysis/getMaxDate', // 更新时间 17 | 18 | postTest: mock.POST + '/getList', // mock测试数据 19 | findSomeOneDoc: '/help-sys/api/reportPlatform/findSomeOneDoc', // 帮忙文档 20 | getSecondCategory: '/dp/common/getCategoryDropDownByDivision', // 二级品类 21 | getThirdCategory: '/dp/common/getCategoryDropDownByCategory', // 三级品类 22 | getBrand: '/dp/common/getBrandDropDownByCategory', // 品牌列表 23 | 24 | getStore: '/dp/salesScale/getStoreList', // 门店列表 25 | totalInfo: '/dp/salesScale/totalInfo', // 汇总信息 26 | contrastChart: '/dp/salesScale/contrastChart', // 销售对比 27 | analysisChart: '/dp/salesScale/analysisChart', // 销售同比 28 | detailInfo: '/dp/salesScale/detailInfo', // 获取明细信息 29 | } 30 | } 31 | }; -------------------------------------------------------------------------------- /src/components/Layout/src/index.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | -------------------------------------------------------------------------------- /src/api/modules/scale.js: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * m: mock 4 | */ 5 | export default (mock)=>{ 6 | return { 7 | get: { 8 | getTest: mock.GET + '/getTest', // mock测试数据 9 | refresh: '/dp/refresh', // 大区及分部的数据 10 | getFirstCategory: '/dp/common/getDivisionDropDown', // 一级品类 11 | getChannelDropDown: '/dp/common/getChannelDropDown', // 渠道数据列表 12 | getMenuData: '/dp/common/getMenuData', // 获取菜单导航数据 13 | }, 14 | postJSON: { 15 | postTest: mock.POST + '/getList', // mock测试数据 16 | findSomeOneDoc: '/help-sys/api/reportPlatform/findSomeOneDoc', // 帮忙文档 17 | getSecondCategory: '/dp/common/getCategoryDropDownByDivision', // 二级品类 18 | getThirdCategory: '/dp/common/getCategoryDropDownByCategory', // 三级品类 19 | getBrand: '/dp/common/getBrandDropDownByCategory', // 品牌列表 20 | 21 | getMaxDate:'/dp/salesScale/getMaxDate', // 更新时间 22 | getStore: '/dp/salesScale/getStoreList', // 门店列表 23 | totalInfo: '/dp/salesScale/totalInfo', // 汇总信息 24 | contrastChart: '/dp/salesScale/contrastChart', // 销售对比 25 | analysisChart: '/dp/salesScale/analysisChart', // 销售同比 26 | detailInfo: '/dp/salesScale/detailInfo', // 获取明细信息 27 | } 28 | } 29 | }; -------------------------------------------------------------------------------- /src/components/TitleBar/configData.js: -------------------------------------------------------------------------------- 1 | export default { 2 | style:'border-bottom:1px solid #f1f1f1; padding:5px;', // 边框样式 3 | query:{ // 查询栏内容 配置 4 | title: '库存周转分析', // 查询栏标题 5 | subBar: true, // 是否为子标题栏 6 | fullScreenName: 'aabb', // 显示全屏的名称；不设置则不显示全屏按钮键 7 | data: { // 查询所需数据 8 | input: '', 9 | radio: 3, 10 | options: [{ 11 | label: 11, 12 | value: 11 13 | }], 14 | value: 22 15 | }, 16 | template: () => import(/* webpackChunkName: "layout"*/ './query'), // 查询栏所需模板文件 17 | submit:(data, row, $set, allInfo)=>{ // 模板里查询的按钮的回调事件 18 | data.radio = 9 // 控制当前 查询区的其它字段 19 | row.content.data.radio = 9 // 按钮触发式 在查询区域 改变 内容区域的值 20 | console.log(data, row, $set, allInfo) 21 | } 22 | }, 23 | listener(area, newVal,oldVal, row, $set, allInfo){ // 数据改变时 响应式监听 事件 24 | if(area == 'query'){ // 查询栏数据的监听 25 | // row.content.data.radio = 9 // 改变外围的数据 26 | allInfo.charts.content.data.radio = 9 // 改变外围的数据 27 | } 28 | if(area == 'content'){ // 内容区数据的监听 29 | allInfo.charts.query.data.radio = 9 // 改变外围的数据 30 | allInfo.conditions.content.data.radio = 9 // 改变外围的数据 31 | // row.query.data.radio = 3 32 | } 33 | console.log(area, newVal,oldVal, row, $set, allInfo) 34 | }, 35 | content:{ // 内容区配置 36 | data: { // 内容区所需的数据 37 | radio: 3, 38 | options: [{ 39 | label: 11, 40 | value: 11 41 | }], 42 | value: 22 43 | }, 44 | template: () => import(/* webpackChunkName: "layout"*/ './query'), // 内容区模板 45 | submit:(data, row, $set, allInfo)=>{ 46 | data.radio = 9 // 按钮触发式 在内容区域 改变 查询区域的值 47 | row.query.data.radio = 9 48 | console.log(data, row, $set, allInfo) 49 | } 50 | } 51 | } -------------------------------------------------------------------------------- /src/reportData/scale/summary/index.js: -------------------------------------------------------------------------------- 1 | export default { 2 | query:{ 3 | title: '汇总信息' 4 | }, 5 | api:{ 6 | getTotalInfo (configData,all) { 7 | let params = {extParam:{}} 8 | params.extParam.nmType = all.charts.query.data.nmType 9 | 10 | // 获取其它参数信息 11 | Object.assign(params, all.conditions.api.getParams(all)) 12 | 13 | configData.loading = true 14 | // 从all中可以拿到筛选的所有条件，拼成接口所需参数，请求 15 | 16 | window.$ajax.scale.totalInfo(params).then(res=>{ 17 | configData.loading = false 18 | // 配置数据 19 | configData.column = [ 20 | {field: 'name', label: '', align: 'center'}, 21 | {field: 'val1', label: '考核销售收', align: 'center'}, 22 | {field: 'val2', label: '综合贡献额(元)', align: 'center'}, 23 | {field: 'val3', label: '综合贡献率', align: 'center'}, 24 | {field: 'val4', label: '销售数量', align: 'center'}, 25 | {field: 'val5', label: '平均单价', align: 'center'}, 26 | ] 27 | configData.tableData = [{ 28 | name: '查询区间', 29 | val1: res.data.money, 30 | val2: res.data.zhgx, 31 | val3: '-', 32 | val4: res.data.num, 33 | val5: '-' 34 | },{ 35 | name: '去年同期', 36 | val1: res.data.lmoney, 37 | val2: res.data.lzhgx, 38 | val3: '-', 39 | val4: res.data.lnum, 40 | val5: '-' 41 | },{ 42 | name: '增长率', 43 | val1: '-', 44 | val2: '-', 45 | val3: '-', 46 | val4: '-', 47 | val5: '-' 48 | }] 49 | }) 50 | } 51 | }, 52 | fetch: { 53 | init(row, all){ // 参数： row, all, $set 54 | let configData = row.content.data; 55 | row.api.getTotalInfo(configData, all) 56 | } 57 | }, 58 | content: { 59 | data: { 60 | loading: false, 61 | size: 'mini', 62 | column: [], 63 | tableData: [] 64 | }, 65 | template: 'BiTable' 66 | } 67 | } -------------------------------------------------------------------------------- /src/reportData/example/summary/index.js: -------------------------------------------------------------------------------- 1 | export default { 2 | query:{ 3 | title: '汇总信息' 4 | }, 5 | api:{ 6 | getTotalInfo (configData,all) { 7 | let params = {extParam:{}} 8 | params.extParam.nmType = all.charts.query.data.nmType 9 | 10 | // 获取其它参数信息 11 | Object.assign(params, all.conditions.api.getParams(all)) 12 | 13 | configData.loading = true 14 | // 从all中可以拿到筛选的所有条件，拼成接口所需参数，请求 15 | 16 | window.$ajax.scale.totalInfo(params).then(res=>{ 17 | configData.loading = false 18 | // 配置数据 19 | configData.column = [ 20 | {field: 'name', label: '', align: 'center'}, 21 | {field: 'val1', label: '考核销售收', align: 'center'}, 22 | {field: 'val2', label: '综合贡献额(元)', align: 'center'}, 23 | {field: 'val3', label: '综合贡献率', align: 'center'}, 24 | {field: 'val4', label: '销售数量', align: 'center'}, 25 | {field: 'val5', label: '平均单价', align: 'center'}, 26 | ] 27 | configData.tableData = [{ 28 | name: '查询区间', 29 | val1: res.data.money, 30 | val2: res.data.zhgx, 31 | val3: '-', 32 | val4: res.data.num, 33 | val5: '-' 34 | },{ 35 | name: '去年同期', 36 | val1: res.data.lmoney, 37 | val2: res.data.lzhgx, 38 | val3: '-', 39 | val4: res.data.lnum, 40 | val5: '-' 41 | },{ 42 | name: '增长率', 43 | val1: '-', 44 | val2: '-', 45 | val3: '-', 46 | val4: '-', 47 | val5: '-' 48 | }] 49 | }) 50 | } 51 | }, 52 | fetch: { 53 | init(row, all){ // 参数： row, all, $set 54 | let configData = row.content.data; 55 | row.api.getTotalInfo(configData, all) 56 | } 57 | }, 58 | content: { 59 | data: { 60 | loading: false, 61 | size: 'mini', 62 | column: [], 63 | tableData: [] 64 | }, 65 | template: 'BiTable' 66 | } 67 | } -------------------------------------------------------------------------------- /src/components/Menu/src/menutree.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 28 | 68 | 69 | -------------------------------------------------------------------------------- /bin/report.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | const clone = require('git-clone') 4 | const program = require('commander') 5 | const shell = require('shelljs'); 6 | const log = require('tracer').colorConsole() 7 | 8 | 9 | program 10 | .version('1.1.0', '-v, --version') 11 | .description('BI报表应用的cli') 12 | .usage('report-cli create 新项目名称') 13 | .option('-b, --bbq-sauce', 'Add bbq sauce') 14 | .option('-f, --fgasdfa', 'adfasdf') 15 | .option('-c, --cheese [type]', 'Add the specified type of cheese [marble]', 'marble'); 16 | 17 | // console.log('you ordered a pizza with:'); 18 | // if (program.cheese) console.log(' - cheese'); 19 | // if (program.sauce) console.log(' - adfasdf'); 20 | 21 | // 删除文件夹 22 | // program.command('rmdel ') 23 | // .action(function (dir) { 24 | // let pwd = shell.pwd() 25 | // console.log('rmdel %s', `${pwd}/${dir}`); 26 | // shell.rm('-rf', `${pwd}/${dir}`) 27 | // }) 28 | 29 | program 30 | // .command('* ') 31 | .command('create ') 32 | .description('创建一个BI报表应用工程')//描述 33 | .alias('c')//命令别名 34 | .action(function(project) { 35 | log.info('项目初始化') 36 | log.info('进行中...') 37 | if (project) { 38 | let pwd = shell.pwd() 39 | log.info(`项目当前位置：${pwd}/${project}/ ...`) 40 | // http://code.ds.gm.com.cn/gitlab/scot/dp/report-platform-front.git 41 | clone(`http://code.ds.gm.com.cn/gitlab/shangwenwu-ds/report-cli.git`, pwd + `/${project}`, null, function() { 42 | shell.rm('-rf', pwd + `/${project}/.git`) 43 | log.info('报表应用框架已创建完成！') 44 | shell.cd(`${project}`) 45 | log.info('正在安装项目依赖文件...') 46 | shell.exec('npm install'); 47 | log.info('项目启动中...') 48 | shell.exec('npm run serve'); 49 | }) 50 | } else { 51 | log.error('正确命令例子：report-cli create myProject') 52 | } 53 | }) 54 | program.parse(process.argv) 55 | -------------------------------------------------------------------------------- /src/components/CardContainer/src/index.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@gm/report-cli", 3 | "version": "1.1.1", 4 | "description": "报表平台工程框架", 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "@gm/ajax": "^1.0.3", 12 | "@gm/bi-table": "^1.0.1", 13 | "@gm/chart": "^1.0.1", 14 | "@gm/crumbs": "^1.0.4", 15 | "@gm/layout": "^1.0.1", 16 | "@gm/menu": "^1.0.3", 17 | "@gm/page": "^1.0.0", 18 | "@gm/router": "^1.0.3", 19 | "@gm/title-bar": "^1.0.3", 20 | "animate.css": "^3.7.2", 21 | "commander": "^2.20.0", 22 | "core-js": "^2.6.5", 23 | "echarts": "^4.2.1", 24 | "element-ui": "^2.3.6", 25 | "git-clone": "^0.1.0", 26 | "moment": "^2.24.0", 27 | "query-string": "^6.8.1", 28 | "sass-loader": "^7.1.0", 29 | "shelljs": "^0.8.3", 30 | "tailwindcss": "^1.0.5", 31 | "tracer": "^0.9.9", 32 | "v-charts": "^1.19.0", 33 | "vue": "^2.6.10", 34 | "vue-router": "^3.0.3", 35 | "vuex": "^3.0.1" 36 | }, 37 | "devDependencies": { 38 | "@vue/cli-plugin-babel": "^3.9.0", 39 | "@vue/cli-plugin-eslint": "^3.9.0", 40 | "@vue/cli-service": "^3.9.0", 41 | "axios": "^0.18.0", 42 | "babel-eslint": "^10.0.1", 43 | "compression-webpack-plugin": "^3.0.0", 44 | "eslint": "^5.16.0", 45 | "eslint-plugin-vue": "^5.0.0", 46 | "node-sass": "^4.12.0", 47 | "vue-cli-plugin-axios": "0.0.4", 48 | "vue-cli-plugin-element-ui": "^1.1.4", 49 | "vue-template-compiler": "^2.6.10" 50 | }, 51 | "eslintConfig": { 52 | "root": true, 53 | "env": { 54 | "node": true 55 | }, 56 | "extends": [ 57 | "plugin:vue/essential", 58 | "eslint:recommended" 59 | ], 60 | "rules": { 61 | "no-console": "off", 62 | "no-debugger": "off" 63 | }, 64 | "parserOptions": { 65 | "parser": "babel-eslint" 66 | } 67 | }, 68 | "postcss": { 69 | "plugins": { 70 | "autoprefixer": {} 71 | } 72 | }, 73 | "browserslist": [ 74 | "> 1%", 75 | "last 2 versions" 76 | ], 77 | "bin": { 78 | "report": "./bin/report.js" 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /docs/commonpents/BiTable/README.md: -------------------------------------------------------------------------------- 1 | # 表格 2 | 3 | ### 功能描述 4 | 5 | > 表格渲染：1筛选条件查询；2表格内容；3分页；4排序请求； 6 | 7 | ### 安装依赖 8 | 9 | ``` 10 | npm install @gm/bi-table 11 | ``` 12 | 13 | ### main.js中引入及注册组件 14 | 15 | ``` 16 | import BiTable from '@gm/bi-table' 17 | BiTable.install(Vue) 18 | ``` 19 | 20 | ### 数据配置 21 | 22 | ``` 23 | { 24 | data: { 25 | query:{ // 表格的查询筛选表单配置 26 | data:{ // 筛选表单依赖的数据 27 | input: '' 28 | }, 29 | template: () => import(/* webpackChunkName: "layout"*/ './query'), // 筛选表单模板 30 | }, 31 | page:{ // 设置后 显示分页 32 | currentPage: 2, 33 | pageSize: 5, 34 | total: 100 35 | }, 36 | loading: false, // 加载 37 | border: false, // 是否带有纵向边框； 默认false 38 | columnIndex: [0,1], // 分隔线 列的索引 39 | size: 'mini', // 表格尺寸大小 medium/small/mini; 默认small 40 | column: [{ // 表格头的配置数据 41 | field: 'date', // 对应内容数据的字段名称 42 | label: '', // 表格头部显示字样 43 | width: '600', // 设置列的宽度 默认平均分布 44 | align: 'center', // 对齐方式 left/center/right； 默认居左 45 | fixed: true // 列是否固定在左侧或者右侧，true 表示固定在左侧; true, left, right 46 | sortable: true // 排序请求数据 会触发submit方法, ******data会增加两个参数：reverse: "true"，sortName: "fieldName" 47 | },{ 48 | label : '嵌套', 49 | align: 'center', 50 | column: [{ // column可以嵌套 51 | field: 'name', 52 | label: '姓名', 53 | align: 'center' 54 | },{ 55 | field: 'address', 56 | label: '地址', 57 | template: `{{scope.row.name}} - {{scope.row.date}}` 58 | }] 59 | }], 60 | tableData: [{ // 表格内容数据 61 | date: '2016-05-02', 62 | name: '王小虎', 63 | address: '上海市普陀区金沙江路 1518 弄' 64 | }] 65 | }, 66 | template: 'BiTable', // 使用BiTable组件作为模板 67 | submit(data, row, allInfo, $set){ // 查询、分页、排序(data增加两个参数reverse|sortName)....，触发事件 68 | console.log(data, row, allInfo, $set) 69 | } 70 | } 71 | ``` 72 | 73 | ### 内置 回调方法说明 74 | 75 | ``` 76 | @submit 77 | ``` 78 | 79 | 80 | ### 示例配置文件请参考 81 | 82 | ``` 83 | /node_modules/@gm/BiTable/configData.js 配置示例文件 84 | ``` -------------------------------------------------------------------------------- /src/components/BiTable/README.md: -------------------------------------------------------------------------------- 1 | # 表格 2 | 3 | ### 功能描述 4 | 5 | > 表格渲染：1筛选条件查询；2表格内容；3分页；4排序请求； 6 | 7 | ### 安装依赖 8 | 9 | ``` 10 | npm install @gome/bi-table 11 | ``` 12 | 13 | ### main.js中引入及注册组件 14 | 15 | ``` 16 | import BiTable from '@gome/bi-table' 17 | BiTable.install(Vue) 18 | ``` 19 | 20 | ### 数据配置 21 | 22 | ``` 23 | { 24 | data: { 25 | query:{ // 表格的查询筛选表单配置 26 | data:{ // 筛选表单依赖的数据 27 | input: '' 28 | }, 29 | template: () => import(/* webpackChunkName: "layout"*/ './query'), // 筛选表单模板 30 | }, 31 | page:{ // 设置后 显示分页 32 | currentPage: 2, 33 | pageSize: 5, 34 | total: 100 35 | }, 36 | loading: false, // 加载 37 | border: false, // 是否带有纵向边框； 默认false 38 | columnIndex: [0,1], // 分隔线 列的索引 39 | size: 'mini', // 表格尺寸大小 medium/small/mini; 默认small 40 | column: [{ // 表格头的配置数据 41 | field: 'date', // 对应内容数据的字段名称 42 | label: '', // 表格头部显示字样 43 | width: '600', // 设置列的宽度 默认平均分布 44 | align: 'center', // 对齐方式 left/center/right； 默认居左 45 | fixed: true // 列是否固定在左侧或者右侧，true 表示固定在左侧; true, left, right 46 | sortable: true // 排序请求数据 会触发submit方法, ******data会增加两个参数：reverse: "true"，sortName: "fieldName" 47 | },{ 48 | label : '嵌套', 49 | align: 'center', 50 | column: [{ // column可以嵌套 51 | field: 'name', 52 | label: '姓名', 53 | align: 'center' 54 | },{ 55 | field: 'address', 56 | label: '地址', 57 | template: `{{scope.row.name}} - {{scope.row.date}}` 58 | }] 59 | }], 60 | tableData: [{ // 表格内容数据 61 | date: '2016-05-02', 62 | name: '王小虎', 63 | address: '上海市普陀区金沙江路 1518 弄' 64 | }] 65 | }, 66 | template: 'BiTable', // 使用BiTable组件作为模板 67 | submit(data, row, allInfo, $set){ // 查询、分页、排序(data增加两个参数reverse|sortName)....，触发事件 68 | console.log(data, row, allInfo, $set) 69 | } 70 | } 71 | ``` 72 | 73 | ### 内置 回调方法说明 74 | 75 | ``` 76 | @submit 77 | ``` 78 | 79 | 80 | ### 示例配置文件请参考 81 | 82 | ``` 83 | /node_modules/@gome/BiTable/configData.js 配置示例文件 84 | ``` -------------------------------------------------------------------------------- /src/components/axios/src/axios.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | import Vue from 'vue'; 4 | import axios from "axios"; 5 | import {ajax,m} from './ajax'; 6 | 7 | 8 | // Full config: https://github.com/axios/axios#request-config 9 | // axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || ''; 10 | // axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; 11 | // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; 12 | function initAjax (apiList, errorCallback, successCallback){ 13 | let config = { 14 | // baseURL: process.env.baseURL || process.env.apiUrl || "" 15 | // timeout: 60 * 1000, // Timeout 16 | // withCredentials: true, // Check cross-site Access-Control 17 | }; 18 | 19 | const _axios = axios.create(config); 20 | 21 | _axios.interceptors.request.use( 22 | function(config) { 23 | return config; 24 | }, 25 | function(error) { 26 | return Promise.reject(error); 27 | } 28 | ); 29 | _axios.interceptors.response.use( 30 | function(response) { 31 | successCallback && successCallback(response) 32 | return response.data; 33 | }, 34 | function(error) { 35 | errorCallback && errorCallback(error) 36 | return Promise.reject(error); 37 | } 38 | ); 39 | 40 | // 扩展methods 41 | let _ajax = ajax(_axios) 42 | 43 | // 注册插件 44 | Plugin.install = function(Vue) { 45 | Vue.$ajax = _ajax; 46 | window.$ajax = _ajax; 47 | Object.defineProperties(Vue.prototype, { 48 | $ajax: { 49 | get() { 50 | return _ajax; 51 | } 52 | }, 53 | }); 54 | }; 55 | Vue.use(Plugin) 56 | 57 | // 初始化api接口 58 | _ajax.init = (moduleAll) => { 59 | Object.keys(moduleAll).map(group=>{ 60 | let _apiList = moduleAll[group](m) 61 | _ajax[group] = {} 62 | Object.keys(_apiList).map(meth => { 63 | Object.keys(_apiList[meth]).map(apiName=>{ 64 | let url = _apiList[meth][apiName] 65 | _ajax[group][apiName] = (params) => { 66 | return _ajax[meth](url, params) 67 | } 68 | }) 69 | }) 70 | }) 71 | } 72 | 73 | _ajax.init(apiList) 74 | } 75 | 76 | 77 | export default initAjax -------------------------------------------------------------------------------- /src/components/CardContainer/README.md: -------------------------------------------------------------------------------- 1 | # 卡片容器 2 | 3 | ### 功能描述 4 | 5 | > 卡片容器 包裹其它组件使用; 承上启下 上下文数据连接的功能 6 | 7 | ### 安装依赖 8 | 9 | ``` 10 | npm install @gome/cardContainer 11 | ``` 12 | 13 | ### main.js中引入及注册组件 14 | 15 | ``` 16 | import CardContainer from '@gome/cardContainer' 17 | CardContainer.install(Vue) 18 | ``` 19 | 20 | ### 页面中使用方式 21 | 22 | ``` 23 | 24 | ``` 25 | 26 | ### 依赖数据说明 27 | 28 | ``` 29 | row: 配置文件中当前块的数据 30 | info: 所有配置数据，包含多个row 31 | ---------------------------------- 32 | row数据详情： 33 | row: { 34 | title: '汇总信息栏', 35 | api:{ // 调用时再触发 数据请求 36 | getInfo: function(row, params = {}){} 37 | }, 38 | fetch:{ // 汇总信息的数据请求列表 39 | getOpt: function(row, params = {}){ // 请求接口数据 40 | let o = [] 41 | setTimeout(() => { 42 | o = [{ 43 | value: '选项1', 44 | label: '黄金糕' 45 | }] 46 | row.query.data.options = o // 给query.data.options赋值 47 | }, 4000); 48 | return o 49 | } 50 | }, 51 | query: { // 卡容器右侧内容 查询条件的扩展 52 | data: { // 查询条件所依赖数据 53 | radio: 3, 54 | options:[], 55 | value: '' 56 | }, 57 | template: () => import(/* webpackChunkName: "layout"'*/ './query'), // 查询模板，vue文件 58 | submit: (data, row, $set, allInfo)=>{ // 模板中按钮事件触发的事件 59 | row.fetch.getOpt(row, {}) // 再次请求接口 60 | console.log(data) 61 | } 62 | }, 63 | listener(area, newVal, oldVal, row, $set, allInfo){ // 响应式监听触发 64 | // area: query|content 65 | if(area == 'query'){ // 筛选区数据监听 66 | if(newVal.value != oldVal.value){ // 改变值时触发 67 | console.log('执行query操作', newVal.value) 68 | } 69 | } 70 | } 71 | } 72 | ``` 73 | 74 | ### 内置 回调方法说明 75 | 76 | ``` 77 | @submit 78 | ``` 79 | 80 | ### 内置 块容器的扩展，右侧展示的内容 81 | 82 | ``` 83 |
84 | 85 |
86 | ``` 87 | 88 | ### 示例配置文件请参考 89 | 90 | ``` 91 | /node_modules/@gome/cardContainer/configData.js 配置示例文件 92 | /node_modules/@gome/cardContainer/query.vue 右侧展示内容样例文件 93 | ``` -------------------------------------------------------------------------------- /docs/commonpents/axios/README.md: -------------------------------------------------------------------------------- 1 | ### axios封装 2 | > 方便接口统一管理 3 | mock代理请求 4 | 5 | ### 使用示例文件 6 | api-Example目录使用示例时重全名为api并移动至工程src/api目录 7 | vue.config-Example代理配置示例文件使用时移动至工程/根目录下 8 | 9 | ### 入口引入及页面调用方式 10 | 1. 安装依赖 11 | ``` 12 | npm install @gm/ajax 13 | ``` 14 | 2. main.js引入 15 | ``` 16 | import ajax from '@gm/ajax' 17 | // api接口列表 18 | import apiList from '@/api' 19 | ajax(apiList,function(error){ 20 | // 请求错误统一处理 21 | // console.log(error.response, error.response.status, 767) 22 | if(error.response.status == 403){ 23 | window.location.href="http://db.test.gm.com.cn:88/#/login" 24 | } 25 | },function(response){ 26 | // 请求成功统一处理 27 | console.log(response) 28 | }); 29 | 30 | ``` 31 | 32 | 3. 页面中调用 33 | ``` 34 | // 调用方法示例 35 | this.$ajax.get('/GET/getTest').then((response) => { 36 | console.log(response); 37 | }).catch((error) => { 38 | console.log(error); 39 | }); 40 | 41 | // 推荐调用方式 this.$ajax[模块名称][接口名称](参数)； 方便接口统一管理 42 | this.$ajax.module1.getDetail({id:11122}).then(res => { 43 | console.log(res) 44 | }) 45 | ``` 46 | 47 | ### api文件目录 48 | 49 | ``` 50 | |-index.js 51 | |-modules 52 | |-modules|-moduleA.js 53 | |-modules|-moduleB.js 54 | ``` 55 | 56 | 1. index.js示例 57 | ``` 58 | 59 | // 1. 所有的 ajax api 在此文件夹下配置 60 | // 2. 根据业务模块，将 api 划分成不同的 modules，放在各自的文件内，单独维护 61 | // 3. 这里提供两个示例模块 - moduleA 与 moduleB，项目中根据业务功能命名。 62 | // 4. 新加的业务模块，需要在 index.js 中注册才能生效，详见：index.js。 63 | 64 | /** 65 | * 66 | * 调用方法示例 67 | * this.$ajax.get('/GET/getTest').then(function (response) { 68 | console.log(response); 69 | }).catch(function (error) { 70 | console.log(error); 71 | }); 72 | 73 | 推荐调用方式 this.$ajax[模块名称][接口名称](参数)； 方便接口统一管理 74 | this.$ajax.module1.getDetail({id:11122}).then(res=>{ 75 | console.log(res) 76 | }) 77 | 78 | */ 79 | 80 | import module1 from './modules/moduleA' 81 | import module2 from './modules/moduleB' 82 | 83 | export default { 84 | module1, 85 | module2 86 | } 87 | ``` 88 | 89 | 2. moduleA.js示例 90 | ``` 91 | /** 92 | * m: mock 93 | */ 94 | export default (mock)=>{ 95 | return { 96 | get: { 97 | getTest: mock.GET + '/getTest', 98 | }, 99 | postJSON: { 100 | postTest: mock.POST + '/getList' 101 | } 102 | } 103 | }; 104 | ``` -------------------------------------------------------------------------------- /src/components/axios/README.md: -------------------------------------------------------------------------------- 1 | ### axios封装 2 | > 方便接口统一管理 3 | mock代理请求 4 | 5 | ### 使用示例文件 6 | api-Example目录使用示例时重全名为api并移动至工程src/api目录 7 | vue.config-Example代理配置示例文件使用时移动至工程/根目录下 8 | 9 | ### 入口引入及页面调用方式 10 | 1. 安装依赖 11 | ``` 12 | npm install @gome/ajax 13 | ``` 14 | 2. main.js引入 15 | ``` 16 | import ajax from '@gome/ajax' 17 | // api接口列表 18 | import apiList from '@/api' 19 | ajax(apiList,function(error){ 20 | // 请求错误统一处理 21 | // console.log(error.response, error.response.status, 767) 22 | if(error.response.status == 403){ 23 | window.location.href="http://db.test.gome.com.cn:88/#/login" 24 | } 25 | },function(response){ 26 | // 请求成功统一处理 27 | console.log(response) 28 | }); 29 | 30 | ``` 31 | 32 | 3. 页面中调用 33 | ``` 34 | // 调用方法示例 35 | this.$ajax.get('/GET/getTest').then((response) => { 36 | console.log(response); 37 | }).catch((error) => { 38 | console.log(error); 39 | }); 40 | 41 | // 推荐调用方式 this.$ajax[模块名称][接口名称](参数)； 方便接口统一管理 42 | this.$ajax.module1.getDetail({id:11122}).then(res => { 43 | console.log(res) 44 | }) 45 | ``` 46 | 47 | ### api文件目录 48 | 49 | ``` 50 | |-index.js 51 | |-modules 52 | |-modules|-moduleA.js 53 | |-modules|-moduleB.js 54 | ``` 55 | 56 | 1. index.js示例 57 | ``` 58 | 59 | // 1. 所有的 ajax api 在此文件夹下配置 60 | // 2. 根据业务模块，将 api 划分成不同的 modules，放在各自的文件内，单独维护 61 | // 3. 这里提供两个示例模块 - moduleA 与 moduleB，项目中根据业务功能命名。 62 | // 4. 新加的业务模块，需要在 index.js 中注册才能生效，详见：index.js。 63 | 64 | /** 65 | * 66 | * 调用方法示例 67 | * this.$ajax.get('/GET/getTest').then(function (response) { 68 | console.log(response); 69 | }).catch(function (error) { 70 | console.log(error); 71 | }); 72 | 73 | 推荐调用方式 this.$ajax[模块名称][接口名称](参数)； 方便接口统一管理 74 | this.$ajax.module1.getDetail({id:11122}).then(res=>{ 75 | console.log(res) 76 | }) 77 | 78 | */ 79 | 80 | import module1 from './modules/moduleA' 81 | import module2 from './modules/moduleB' 82 | 83 | export default { 84 | module1, 85 | module2 86 | } 87 | ``` 88 | 89 | 2. moduleA.js示例 90 | ``` 91 | /** 92 | * m: mock 93 | */ 94 | export default (mock)=>{ 95 | return { 96 | get: { 97 | getTest: mock.GET + '/getTest', 98 | }, 99 | postJSON: { 100 | postTest: mock.POST + '/getList' 101 | } 102 | } 103 | }; 104 | ``` -------------------------------------------------------------------------------- /src/testNewPage/index.vue: -------------------------------------------------------------------------------- 1 | 21 | 77 | 78 | 89 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | // const CompressionWebpackPlugin = require('compression-webpack-plugin'); 2 | // const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i; 3 | 4 | const port = 8686; 5 | 6 | // mock接口数据 7 | // /mock 8 | // http://mockapi.gm.inc 9 | let mockApi = 'http://10.115.105.14:8989/app/mock/22/' 10 | 11 | // 测试环境接口数据 12 | // /dp /reviceLog 13 | // http://10.112.180.13:8980 http://10.115.106.41:88 14 | let testApi = ['http://localhost:8980', 'http://localhost:88', 'http://user-behavior.gm.inc'] 15 | 16 | 17 | let proxy = {} 18 | let methods = ['GET','POST','PUT','DELETE'] 19 | methods.map(r=>{ 20 | let pathRewrite = {} 21 | pathRewrite['/api/'+r] = r 22 | proxy['/api/'+r] = { 23 | target: mockApi, 24 | changeOrigin: true, 25 | ws: true, 26 | pathRewrite: pathRewrite 27 | } 28 | }) 29 | 30 | if (testApi){ 31 | proxy['/api/reviceLog'] = { 32 | target: testApi[0], 33 | changeOrigin: true, 34 | ws: true, 35 | pathRewrite: {'/api/reviceLog': 'reviceLog'} 36 | } 37 | proxy['/api/dp'] = { 38 | target: testApi[1], 39 | changeOrigin: true, 40 | ws: true, 41 | pathRewrite: {'/api/dp': 'dp'} 42 | } 43 | proxy['/api/help-sys'] = { 44 | target: testApi[2], 45 | changeOrigin: true, 46 | ws: true, 47 | pathRewrite: {'/api/help-sys': 'help-sys'} 48 | } 49 | } 50 | 51 | module.exports = { 52 | // output:{ 53 | // filename:'[name].js', 54 | // chunkFilename:'[name].js',// 设置按需加载后的chunk名字 55 | // publicPath:'testdd/' 56 | // }, 57 | 58 | // pages: { 59 | // index: { 60 | // entry: 'src/main.js', 61 | // chunks: ['chunk-vendors', 'chunk-common', 'index'] 62 | // } 63 | // }, 64 | 65 | // configureWebpack: config => { 66 | // // if (IS_PROD) { 67 | // const plugins = []; 68 | // plugins.push( 69 | // new CompressionWebpackPlugin({ 70 | // filename: '[path].gz[query]', 71 | // algorithm: 'gzip', 72 | // test: productionGzipExtensions, 73 | // threshold: 10240, 74 | // minRatio: 0.8 75 | // }) 76 | // ); 77 | // config.plugins = [ 78 | // ...config.plugins, 79 | // ...plugins 80 | // ]; 81 | // // } 82 | // }, 83 | 84 | runtimeCompiler: true, // vue模板代码编译 85 | productionSourceMap: false, // 打包清除map多个文件 86 | // cssSourceMap: true, //开启 是否开启 cssSourceMap默认为false 87 | devServer: { 88 | disableHostCheck: true, // localhost 127.0.0.1 89 | port, 90 | open: true, // 打开浏览器窗口 91 | overlay: { 92 | warnings: false, 93 | errors: true 94 | }, 95 | proxy: proxy 96 | } 97 | }; -------------------------------------------------------------------------------- /src/components/BiTable/configData.js: -------------------------------------------------------------------------------- 1 | export default { 2 | query:{ 3 | title: '汇总信息', 4 | fullScreenName: 'xxdfwee' 5 | }, 6 | fetch:{ 7 | aa(row){ 8 | setTimeout(() => { 9 | row.content.data.query.data.radio = 9 10 | row.content.data.page.currentPage = 3 11 | }, 4000); 12 | } 13 | }, 14 | content: { 15 | data: { 16 | query:{ // 表格的查询筛选表单配置 17 | data:{ // 筛选表单依赖的数据 18 | input: '', 19 | radio: 3, 20 | options: [{ 21 | label: 11, 22 | value: 11 23 | },{ 24 | label: 22, 25 | value: 22 26 | },{ 27 | label: 33, 28 | value: 33 29 | }], 30 | value: 22 31 | }, 32 | template: () => import(/* webpackChunkName: "layout"*/ '../scale/query'), // 筛选表单模板 33 | }, 34 | page:{ // 设置后 显示分页 35 | currentPage: 2, 36 | pageSize: 5, 37 | total: 100 38 | }, 39 | border: false, // 是否带有纵向边框； 默认false 40 | columnIndex: [0,1], // 分隔线 列的索引 41 | size: 'mini', // 表格尺寸大小 medium/small/mini; 默认small 42 | column: [{ // 表格头的配置数据 43 | field: 'date', // 对应内容数据的字段名称 44 | label: '', // 表格头部显示字样 45 | //width: '600', // 设置列的宽度 默认平均分布 46 | align: 'center', // 对齐方式 left/center/right； 默认居左 47 | //fixed: true // 列是否固定在左侧或者右侧，true 表示固定在左侧; true, left, right 48 | sortable: true // 排序请求数据 49 | },{ 50 | label : '嵌套', 51 | align: 'center', 52 | column: [{ 53 | field: 'name', 54 | label: '姓名', 55 | align: 'center' 56 | },{ 57 | field: 'date', 58 | label: '日期', 59 | },{ 60 | field: 'address', 61 | label: '地址', 62 | template: `{{scope.row.name}} - {{scope.row.date}}` 63 | }] 64 | },{ 65 | field: 'address', 66 | label: '地址', 67 | template: `{{scope.row.name}} - {{scope.row.date}}` 68 | }], 69 | tableData: [{ // 表格内容数据 70 | date: '2016-05-02', 71 | name: '王小虎', 72 | address: '上海市普陀区金沙江路 1518 弄' 73 | }, { 74 | date: '2016-05-04', 75 | name: '王小虎', 76 | address: '上海市普陀区金沙江路 1517 弄' 77 | }, { 78 | date: '2016-05-01', 79 | name: '王小虎', 80 | address: '上海市普陀区金沙江路 1519 弄' 81 | }] 82 | }, 83 | template: 'BiTable', 84 | submit(data, row, allInfo, $set){ 85 | console.log(data, row, allInfo, $set) 86 | } 87 | } 88 | } -------------------------------------------------------------------------------- /src/components/Crumbs/src/index.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 70 | 71 | 76 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import ElementUI from 'element-ui' 4 | Vue.use(ElementUI, {size: 'mini'}) 5 | import VCharts from 'v-charts' 6 | Vue.use(VCharts) 7 | 8 | import './styles.scss' 9 | import './assets/iconfont/iconfont.css' 10 | import 'animate.css' 11 | import 'v-charts/lib/style.css' 12 | import 'echarts/lib/component/dataZoom' 13 | 14 | // 统一数据请求 15 | import ajax from '@/components/axios' 16 | // import ajax from '@gm/ajax' 17 | import apiList from '@/api' 18 | ajax(apiList,function(error){ 19 | // 请求错误统一处理 20 | // console.log(error.response, error.response.status, 767) 21 | if(error.response.status == 403){ 22 | alert('response.status:' + 403) 23 | // window.location.href="http://localhost:88/#/login" 24 | } 25 | },function(){ 26 | // 请求成功统一处理 27 | // console.log(response) 28 | }); 29 | 30 | // 报表数据 31 | import reportData from '@/reportData' 32 | 33 | // router-view page 34 | import Page from '@/components/Page' 35 | // import Page from '@gm/page' 36 | Page.install(Vue, reportData) 37 | 38 | import route from '@/components/Router' 39 | // import route from '@gm/router' 40 | 41 | // 导航菜单 42 | // import Menu from '@gm/menu' 43 | import Menu from '@/components/Menu' 44 | Menu.install(Vue) 45 | 46 | // 面包屑组件 47 | // import Crumbs from '@gm/crumbs' 48 | import Crumbs from '@/components/Crumbs' 49 | Crumbs.install(Vue) 50 | 51 | // 卡片容器组件 已废弃 52 | // import CardContainer from '@gm/card-container' 53 | // CardContainer.install(Vue) 54 | 55 | // layout布局组件 56 | // import Layout from '@gm/layout' 57 | import Layout from '@/components/Layout' 58 | Layout.install(Vue) 59 | 60 | // 标题栏组件 61 | // import TitleBar from '@gm/title-bar' 62 | import TitleBar from '@/components/TitleBar' 63 | TitleBar.install(Vue) 64 | 65 | // 图形组件 66 | // import Chart from '@gm/chart' 67 | import Chart from '@/components/Chart' 68 | Chart.install(Vue) 69 | 70 | // 表格组件 | 汇总信息 71 | // import BiTable from '@gm/bi-table' 72 | import BiTable from '@/components/BiTable' 73 | BiTable.install(Vue) 74 | 75 | window.moment = require('moment') 76 | 77 | let conf = require('@/configData.js') 78 | 79 | const router = route(Vue, conf.menuData, conf.currentIndex, Page) 80 | router.beforeEach((to, from, next) => { 81 | // 路由统一处理 82 | localStorage.currentPath = to.path 83 | if(to.path=='/'){ 84 | conf = Object.assign({}, conf,{currentIndex: '/'}) 85 | localStorage.currentMenu = JSON.stringify({ 86 | key: 'select', 87 | val:{ 88 | index: '/', 89 | indexPath: ['/'] 90 | } 91 | }) 92 | } 93 | next() 94 | }); 95 | 96 | 97 | Vue.config.productionTip = false 98 | new Vue({ 99 | data() { 100 | return { 101 | loading: false, 102 | // 注册全局的config配置，页面中通过this.$root.conf获取配置信息 103 | conf: conf 104 | } 105 | }, 106 | router, 107 | render: h => h(App) 108 | }).$mount('#app') 109 | -------------------------------------------------------------------------------- /src/reportData/example/summary11/index.js: -------------------------------------------------------------------------------- 1 | export default { 2 | query:{ 3 | title: '汇总信息', 4 | fullScreenName: 'xxdfwee' 5 | }, 6 | listener(area, newVal,oldVal, row, allInfo, $set){ 7 | console.log(area, newVal,oldVal, row, allInfo, $set) 8 | if(newVal.query.data.radio != oldVal.query.data.radio){ 9 | row.content.data.page.currentPage = 1 10 | row.content.data.query.data.value = 33 11 | } 12 | }, 13 | fetch:{ 14 | aa(row){ 15 | setTimeout(() => { 16 | row.content.data.query.data.radio = 9 17 | row.content.data.page.currentPage = 3 18 | }, 4000); 19 | } 20 | }, 21 | content: { 22 | data: { 23 | query:{ // 表格的查询筛选表单配置 24 | data:{ // 筛选表单依赖的数据 25 | input: '', 26 | radio: 3, 27 | options: [{ 28 | label: 11, 29 | value: 11 30 | },{ 31 | label: 22, 32 | value: 22 33 | },{ 34 | label: 33, 35 | value: 33 36 | }], 37 | value: 22 38 | }, 39 | template: () => import(/* webpackChunkName: "layout"*/ '../query'), // 筛选表单模板 40 | }, 41 | page:{ // 设置后 显示分页 42 | currentPage: 2, 43 | pageSize: 5, 44 | total: 100 45 | }, 46 | border: false, // 是否带有纵向边框； 默认false 47 | columnIndex: [0,1], // 分隔线 列的索引 48 | size: 'mini', // 表格尺寸大小 medium/small/mini; 默认small 49 | column: [{ // 表格头的配置数据 50 | field: 'date', // 对应内容数据的字段名称 51 | label: '', // 表格头部显示字样 52 | //width: '600', // 设置列的宽度 默认平均分布 53 | align: 'center', // 对齐方式 left/center/right； 默认居左 54 | //fixed: true // 列是否固定在左侧或者右侧，true 表示固定在左侧; true, left, right 55 | },{ 56 | label : '嵌套', 57 | align: 'center', 58 | column: [{ 59 | field: 'name', 60 | label: '姓名', 61 | align: 'center' 62 | },{ 63 | field: 'date', 64 | label: '日期', 65 | },{ 66 | field: 'address', 67 | label: '地址', 68 | template: `{{scope.row.name}} - {{scope.row.date}}` 69 | }] 70 | },{ 71 | field: 'address', 72 | label: '地址', 73 | template: `{{scope.row.name}}` 74 | 75 | // template: (row)=>{ 76 | // return `` 77 | // } 78 | }], 79 | tableData: [{ // 表格内容数据 80 | date: '2016-05-02', 81 | name: '王小虎', 82 | address: '上海市普陀区金沙江路 1518 弄' 83 | }, { 84 | date: '2016-05-04', 85 | name: '王小虎', 86 | address: '上海市普陀区金沙江路 1517 弄' 87 | }, { 88 | date: '2016-05-01', 89 | name: '王小虎', 90 | address: '上海市普陀区金沙江路 1519 弄' 91 | }] 92 | }, 93 | template: 'BiTable', 94 | submit(data, row, allInfo, $set){ 95 | console.log(data, row, allInfo, $set) 96 | } 97 | } 98 | } -------------------------------------------------------------------------------- /src/components/axios/src/ajax.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 扩展axios的methods请求方式 3 | */ 4 | 5 | import queryString from 'query-string'; 6 | // import { Message } from 'element-ui'; 7 | 8 | const ajax = (axios) => { 9 | 10 | if (process.env.NODE_ENV === 'development') { 11 | axios.defaults.baseURL = '/api'; 12 | } 13 | 14 | let get = (url, params = {}) => { 15 | return new Promise((resolve) => { 16 | axios.get(url, params).then((response) => { 17 | resolve(response); 18 | }); 19 | }); 20 | }; 21 | 22 | let post = (url, params = {}) => { 23 | return new Promise((resolve) => { 24 | axios.post(url, queryString.stringify(params), { 25 | headers: { 26 | 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' 27 | } 28 | }).then((response) => { 29 | resolve(response); 30 | }); 31 | }); 32 | }; 33 | 34 | let put = (url, params = {}) => { 35 | return new Promise((resolve) => { 36 | axios.put(url, queryString.stringify(params), { 37 | headers: { 38 | 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' 39 | } 40 | }).then((response) => { 41 | resolve(response); 42 | }); 43 | }); 44 | }; 45 | 46 | let putJSON = (url, params = {}) => { 47 | return new Promise((resolve) => { 48 | axios.put(url, JSON.stringify(params), { 49 | headers: { 50 | 'Content-Type': 'application/json; charset=UTF-8' 51 | } 52 | }).then((response) => { 53 | resolve(response); 54 | }); 55 | }); 56 | }; 57 | 58 | let postJSON = (url, params = {}) => { 59 | return new Promise((resolve) => { 60 | axios.post(url, JSON.stringify(params), { 61 | headers: { 62 | 'Content-Type': 'application/json; charset=UTF-8' 63 | } 64 | }).then((response) => { 65 | resolve(response); 66 | }); 67 | }); 68 | }; 69 | 70 | let del = (url, params = {}) => { 71 | return new Promise((resolve) => { 72 | axios.delete(url, params).then((response) => { 73 | resolve(response); 74 | }); 75 | }); 76 | }; 77 | 78 | let upload = (url, params = {}, option = {}) => { 79 | let formData = new FormData(); 80 | for (let _key in params) { 81 | formData.append(_key, params[_key]); 82 | } 83 | return new Promise((resolve) => { 84 | axios.post(url, formData, { 85 | headers: { 86 | 'Content-Type': 'multipart/form-data' 87 | }, 88 | onUploadProgress: function (event) { 89 | if (typeof option.onUploadProgress === 'function') { 90 | option.onUploadProgress(event); 91 | } 92 | } 93 | }).then((response) => { 94 | resolve(response); 95 | }); 96 | }); 97 | }; 98 | 99 | return { 100 | get, 101 | post, 102 | put, 103 | del, 104 | upload, 105 | putJSON, 106 | postJSON 107 | } 108 | } 109 | 110 | // dev环境 111 | let m = {}; 112 | let methods = ['GET','POST','PUT','DELETE'] 113 | methods.map(r=>{ 114 | (process.env.NODE_ENV === 'development') ? (m[r] = r) : (m[r] = '') 115 | }) 116 | 117 | export {ajax, m}; -------------------------------------------------------------------------------- /src/components/Menu/src/index.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 124 | 125 | -------------------------------------------------------------------------------- /src/reportData/example/table/index.js: -------------------------------------------------------------------------------- 1 | export default { 2 | query:{ 3 | title: '数据明细信息', 4 | data: { 5 | typeValue: 'region_name', 6 | tableDimensionTypeList: [{name:"大区",value:"region_name"},{name:"分部",value:"department_name"},{name:"门店",value:"outlet_name"},{name:"品类",value:"category_name"},{name:"品牌",value:"brand_name"}, {name:"型号",value:"sku_name"}] 7 | }, 8 | template: () => import(/* webpackChunkName: "layout"*/ './query'), 9 | submit(data, row, allInfo, $set){ 10 | // 下载操作 11 | console.log(data, row, allInfo, $set) 12 | } 13 | }, 14 | api: { 15 | // 获取明细信息 16 | getDetailInfo(row, all){ 17 | 18 | let params = { 19 | "offset":(row.content.data.page.currentPage-1)*row.content.data.page.pageSize, 20 | "pageSize":row.content.data.page.pageSize, 21 | searchParam: {} 22 | } 23 | row.content.data.sortName && (params.sortName = row.content.data.sortName) 24 | row.content.data.reverse && (params.reverse = row.content.data.reverse) 25 | params.searchParam.extParam = { 26 | dimensionType: row.query.data.typeValue 27 | } 28 | params.searchParam.extParam.nmType = all.charts.query.data.nmType 29 | 30 | // 获取其它参数信息 31 | Object.assign(params.searchParam, all.conditions.api.getParams(all)) 32 | 33 | let configData = row.content.data 34 | configData.loading = true 35 | window.$ajax.scale.detailInfo(params).then(res=>{ 36 | configData.loading = false 37 | configData.page.total = res.data.total 38 | configData.tableData = res.data.list 39 | configData.column = [{ 40 | field: 'name', 41 | label: '大区', 42 | sortable: true, 43 | fixed: true, 44 | width: 150 45 | },{ 46 | field: 'money1', 47 | label: '销售收入(万元)', 48 | sortable: true, 49 | width: 150 50 | },{ 51 | field: 'money2', 52 | label: '去年销售收入(万元)', 53 | width: 150, 54 | sortable: true, 55 | },{ 56 | field: 'name', 57 | label: '增长率', 58 | width: 150 59 | },{ 60 | field: 'opermoney1', 61 | label: '经销', 62 | sortable: true, 63 | width: 150 64 | },{ 65 | field: 'name', 66 | label: '经销占比', 67 | width: 150 68 | },{ 69 | field: 'opermoney2', 70 | label: '代销', 71 | sortable: true, 72 | width: 150 73 | },{ 74 | field: 'name', 75 | label: '代销占比', 76 | width: 150 77 | },{ 78 | field: 'purmoney1', 79 | label: '集采', 80 | sortable: true, 81 | width: 150 82 | },{ 83 | field: 'name', 84 | label: '集采占比', 85 | width: 150 86 | },{ 87 | field: 'purmoney2', 88 | label: '地采', 89 | sortable: true, 90 | width: 150 91 | },{ 92 | field: 'name', 93 | label: '地采占比', 94 | width: 150 95 | }] 96 | }) 97 | } 98 | }, 99 | fetch: { 100 | init(row, all){ // 第一次请求 101 | // 需要处理请求参数数据 102 | row.api.getDetailInfo(row, all) 103 | } 104 | }, 105 | content: { 106 | data: { 107 | loading: false, 108 | page:{ // 设置后 显示分页 109 | currentPage: 1, 110 | pageSize: 5, 111 | total: 0 112 | }, 113 | // border: false, // 是否带有纵向边框； 默认false 114 | // columnIndex: [0,1], // 分隔线 列的索引 115 | size: 'mini', // 表格尺寸大小 medium/small/mini; 默认small 116 | column: [], 117 | tableData: [] 118 | }, 119 | template: 'BiTable', 120 | submit(data, row, all){ // data, row, all, $set 121 | // 需要处理请求参数数据 122 | row.api.getDetailInfo(row, all) 123 | } 124 | }, 125 | listener(area, newObj, oldObj, row, all){ // 参数：area, newObj,oldObj, row, all, $set 126 | if(area == 'bar'){ 127 | if(newObj.typeValue != oldObj.typeValue){ 128 | if(row.content.data.page.currentPage != 1){ 129 | // 改变当前页码 或 每页显示条数时 触发sumbit的请求 130 | row.content.data.page.currentPage = 1 131 | }else{ 132 | // 需要处理请求参数数据 133 | row.api.getDetailInfo(row, all) 134 | } 135 | } 136 | } 137 | } 138 | } -------------------------------------------------------------------------------- /src/reportData/scale/table/index.js: -------------------------------------------------------------------------------- 1 | export default { 2 | query:{ 3 | title: '数据明细信息', 4 | data: { 5 | typeValue: 'region_name', 6 | tableDimensionTypeList: [{name:"大区",value:"region_name"},{name:"分部",value:"department_name"},{name:"门店",value:"outlet_name"},{name:"品类",value:"category_name"},{name:"品牌",value:"brand_name"}, {name:"型号",value:"sku_name"}] 7 | }, 8 | template: () => import(/* webpackChunkName: "layout"*/ './query'), 9 | submit(data, row, allInfo, $set){ 10 | // 下载操作 11 | console.log(data, row, allInfo, $set) 12 | } 13 | }, 14 | api: { 15 | // 获取明细信息 16 | getDetailInfo(row, all){ 17 | 18 | let params = { 19 | "offset":(row.content.data.page.currentPage-1)*row.content.data.page.pageSize, 20 | "pageSize":row.content.data.page.pageSize, 21 | searchParam: {} 22 | } 23 | row.content.data.sortName && (params.sortName = row.content.data.sortName) 24 | row.content.data.reverse && (params.reverse = row.content.data.reverse) 25 | params.searchParam.extParam = { 26 | dimensionType: row.query.data.typeValue 27 | } 28 | params.searchParam.extParam.nmType = all.charts.query.data.nmType 29 | 30 | // 获取其它参数信息 31 | Object.assign(params.searchParam, all.conditions.api.getParams(all)) 32 | 33 | let configData = row.content.data 34 | configData.loading = true 35 | window.$ajax.scale.detailInfo(params).then(res=>{ 36 | configData.loading = false 37 | configData.page.total = res.data.total 38 | configData.tableData = res.data.list 39 | configData.column = [{ 40 | field: 'name', 41 | label: '大区', 42 | sortable: true, 43 | fixed: true, 44 | width: 150 45 | },{ 46 | field: 'money1', 47 | label: '销售收入(万元)', 48 | sortable: true, 49 | width: 150 50 | },{ 51 | field: 'money2', 52 | label: '去年销售收入(万元)', 53 | width: 150, 54 | sortable: true, 55 | },{ 56 | field: 'name', 57 | label: '增长率', 58 | width: 150 59 | },{ 60 | field: 'opermoney1', 61 | label: '经销', 62 | sortable: true, 63 | width: 150 64 | },{ 65 | field: 'name', 66 | label: '经销占比', 67 | width: 150 68 | },{ 69 | field: 'opermoney2', 70 | label: '代销', 71 | sortable: true, 72 | width: 150 73 | },{ 74 | field: 'name', 75 | label: '代销占比', 76 | width: 150 77 | },{ 78 | field: 'purmoney1', 79 | label: '集采', 80 | sortable: true, 81 | width: 150 82 | },{ 83 | field: 'name', 84 | label: '集采占比', 85 | width: 150 86 | },{ 87 | field: 'purmoney2', 88 | label: '地采', 89 | sortable: true, 90 | width: 150 91 | },{ 92 | field: 'name', 93 | label: '地采占比', 94 | width: 150 95 | }] 96 | }) 97 | } 98 | }, 99 | fetch: { 100 | init(row, all){ // 第一次请求 101 | // 需要处理请求参数数据 102 | row.api.getDetailInfo(row, all) 103 | } 104 | }, 105 | content: { 106 | data: { 107 | loading: false, 108 | page:{ // 设置后 显示分页 109 | currentPage: 1, 110 | pageSize: 5, 111 | total: 0 112 | }, 113 | // border: false, // 是否带有纵向边框； 默认false 114 | // columnIndex: [0,1], // 分隔线 列的索引 115 | size: 'mini', // 表格尺寸大小 medium/small/mini; 默认small 116 | column: [], 117 | tableData: [] 118 | }, 119 | template: 'BiTable', 120 | submit(data, row, all){ // data, row, all, $set 121 | // 需要处理请求参数数据 122 | row.api.getDetailInfo(row, all) 123 | } 124 | }, 125 | listener(area, newObj, oldObj, row, all){ // 参数：area, newObj,oldObj, row, all, $set 126 | if(area == 'bar'){ 127 | if(newObj.typeValue != oldObj.typeValue){ 128 | if(row.content.data.page.currentPage != 1){ 129 | // 改变当前页码 或 每页显示条数时 触发sumbit的请求 130 | row.content.data.page.currentPage = 1 131 | }else{ 132 | // 需要处理请求参数数据 133 | row.api.getDetailInfo(row, all) 134 | } 135 | } 136 | } 137 | } 138 | } -------------------------------------------------------------------------------- /src/components/TitleBar/src/index.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 27 | 143 | 144 | 156 | -------------------------------------------------------------------------------- /src/reportData/scale/conditions/template.vue: -------------------------------------------------------------------------------- 1 | 157 | 158 | 167 | 168 | -------------------------------------------------------------------------------- /src/reportData/example/conditions/template.vue: -------------------------------------------------------------------------------- 1 | 158 | 159 | 168 | 169 | -------------------------------------------------------------------------------- /src/components/BiTable/src/index.vue: -------------------------------------------------------------------------------- 1 | 60 | 61 | 154 | 155 | -------------------------------------------------------------------------------- /src/reportData/example/charts1/index.js: -------------------------------------------------------------------------------- 1 | export default { 2 | fetch: { 3 | getContent(row, all, $set){ 4 | console.log(all, $set) 5 | window.$ajax.get('/GET/getCharts').then(function (response) { 6 | row.layout[1][0].content.data.rows = response.data 7 | row.layout[1][1].content.data.rows = response.data 8 | }).catch(function (error) { 9 | console.log(error,555666); 10 | }); 11 | } 12 | }, 13 | query:{ 14 | title: '图形例子展示区域', 15 | }, 16 | layout: [ 17 | [{ 18 | fetch: { 19 | getContent(row, all, $set){ 20 | console.log(row, all, $set) 21 | // window.$ajax.get('/GET/getCharts').then(function (response) { 22 | // console.log(row, all, $set, response.data) 23 | // row.content.data.rows = response.data 24 | // }).catch(function (error) { 25 | // console.log(error,555666); 26 | // }); 27 | } 28 | }, 29 | style: 'padding-right:20px; border-right:1px solid #f1f1f1; border-bottom:1px solid #f1f1f1;', 30 | query: { 31 | title: '库存周转分析33332211', 32 | fullScreenName: 'kczzfx', 33 | subBar: true, 34 | }, 35 | content:{ 36 | data: { 37 | // grid:{ 38 | // right: 0, 39 | // top:40, 40 | // bottom: 45, 41 | // left:0 42 | // }, 43 | // dataEmpty: true, 44 | // loading: true, 45 | // dataZoom:[ 46 | // { 47 | // type: 'slider', 48 | // start: 0, 49 | // end: 20 50 | // } 51 | // ], 52 | chart: 've-sankey', 53 | chartExtend: { 54 | series: { 55 | barWidth: 10 56 | }, 57 | tooltip: { 58 | trigger: 'none' 59 | } 60 | }, 61 | chartSettings: { 62 | links: [ 63 | { source: '首页', target: '列表页a', value: 0.5 }, 64 | { source: '首页', target: '列表页b', value: 0.5 }, 65 | { source: '列表页a', target: '内容页a-1', value: 0.1 }, 66 | { source: '列表页a', target: '内容页a-2', value: 0.4 }, 67 | { source: '列表页b', target: '内容页b-1', value: 0.2 }, 68 | { source: '列表页b', target: '内容页b-2', value: 0.3 } 69 | ] 70 | }, 71 | columns: ['页面', '访问量'], 72 | rows: [ 73 | { '页面': '首页', '访问量': 100000 }, 74 | { '页面': '列表页a', '访问量': 20000 }, 75 | { '页面': '列表页b', '访问量': 80000 }, 76 | { '页面': '内容页a-1', '访问量': 10000 }, 77 | { '页面': '内容页a-2', '访问量': 10000 }, 78 | { '页面': '内容页b-1', '访问量': 60000 }, 79 | { '页面': '内容页b-2', '访问量': 20000 } 80 | ] 81 | }, 82 | template: 'Chart'//() => import(/* webpackChunkName: "layout"*/ './template'), // 查询模板 83 | } 84 | },{ 85 | fetch: { 86 | getContent(row, all, $set){ 87 | window.$ajax.get('/GET/getCharts').then(function (response) { 88 | console.log(row, all, $set, response.data) 89 | row.content.data.rows = response.data 90 | }).catch(function (error) { 91 | console.log(error,555666); 92 | }); 93 | } 94 | }, 95 | style: 'padding-left: 10px; border-bottom:1px solid #f1f1f1;', 96 | query: { 97 | title: '库存周转分析', 98 | fullScreenName: 'kczzfx', 99 | subBar: true, 100 | }, 101 | content:{ 102 | data: { 103 | chart: 've-histogram', 104 | grid:{ 105 | right: 0, 106 | top:40, 107 | bottom: 45, 108 | left:0 109 | }, 110 | dataZoom:[ 111 | { 112 | type: 'slider', 113 | start: 0, 114 | end: 20 115 | } 116 | ], 117 | columns: ['日期', '访问用户', '下单用户', '下单率'], 118 | rows: [ 119 | { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 }, 120 | { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 }, 121 | { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 }, 122 | { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 }, 123 | { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 }, 124 | { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 } 125 | ] 126 | }, 127 | template: 'Chart',//() => import(/* webpackChunkName: "layout"*/ '@/components/Chart'), // 查询模板 128 | } 129 | }], 130 | [{ 131 | fetch: { 132 | getContent333333(row, all, $set){ 133 | console.log(row, all, $set,'table99999999999999') 134 | } 135 | }, 136 | style: 'padding-right:20px; padding-top: 10px; border-right:1px solid #f1f1f1;', 137 | query: { 138 | title: '库存周转分析', 139 | fullScreenName: 'kczzfx', 140 | subBar: true, 141 | }, 142 | content:{ 143 | data: { 144 | chart: 've-histogram', 145 | columns: ['日期', '访问用户', '下单用户', '下单率'], 146 | rows: [ 147 | { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 }, 148 | { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 }, 149 | { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 }, 150 | { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 }, 151 | { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 }, 152 | { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 } 153 | ] 154 | }, 155 | template: 'Chart' 156 | // template: () => import(/* webpackChunkName: "layout"*/ './template'), // 查询模板 157 | } 158 | },{ 159 | fetch: { 160 | getContent333333(row, all, $set){ 161 | console.log(row, all, $set,'table1010101010101010') 162 | } 163 | }, 164 | style: 'padding-left: 10px; padding-top: 10px;', 165 | query: { 166 | title: '库存周转分析', 167 | fullScreenName: 'kczzfx', 168 | subBar: true, 169 | }, 170 | content:{ 171 | data: { 172 | chart: 've-line', 173 | columns: ['日期', '访问用户', '下单用户', '下单率'], 174 | rows: [ 175 | { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 }, 176 | { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 }, 177 | { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 }, 178 | { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 }, 179 | { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 }, 180 | { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 } 181 | ] 182 | }, 183 | template: 'Chart' 184 | // template: () => import(/* webpackChunkName: "layout"*/ './template'), // 查询模板 185 | } 186 | }] 187 | ] 188 | 189 | } -------------------------------------------------------------------------------- /src/reportData/example/layout1/index.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | [{ 3 | query: { 4 | title: '销售2231' 5 | }, 6 | content: { 7 | data: { 8 | chart: 've-gauge', 9 | chartSettings: { 10 | labelMap: { 11 | 'speed': '速度111' 12 | }, 13 | dataName: { 14 | 'speed': 'km/h' 15 | } 16 | }, 17 | columns: ['type', 'value'], 18 | rows: [ 19 | { type: 'speed', value: 60 } 20 | ] 21 | }, 22 | template: 'Chart' 23 | } 24 | }, 25 | { 26 | style: 'padding-left: 15px', 27 | query: { 28 | title: '综合' 29 | }, 30 | layout:[ 31 | [ 32 | { 33 | content:{ 34 | data: { 35 | chart: 've-gauge', 36 | columns: ['type', 'a', 'b', 'value'], 37 | rows: [ 38 | { type: '速度', value: 40, a: 1, b: 2 } 39 | ] 40 | }, 41 | template: 'Chart' 42 | } 43 | }, 44 | { 45 | content:{ 46 | data: { 47 | chart: 've-gauge', 48 | chartSettings: { 49 | dataType: { 50 | '占比': 'percent' 51 | }, 52 | seriesMap: { 53 | '占比': { 54 | min: 0, 55 | max: 1 56 | } 57 | } 58 | }, 59 | columns: ['type', 'value'], 60 | rows: [ 61 | { type: '占比', value: 0.8 } 62 | ] 63 | }, 64 | template: 'Chart' 65 | } 66 | } 67 | ] 68 | ] 69 | }], 70 | [ 71 | { 72 | style: 'width: 30%; flex: initial;', 73 | query:{ 74 | title: '商品', 75 | }, 76 | layout: [ 77 | [ 78 | { 79 | style: 'border-bottom:#f1f1f1 1px solid;', 80 | fetch: { 81 | getContent333333(row, all, $set){ 82 | console.log(row, all, $set,'table99999999999999') 83 | } 84 | }, 85 | query: { 86 | title: '可售状态汇总', 87 | fullScreenName: 'kczzfx', 88 | subBar: true, 89 | }, 90 | content:{ 91 | data: { 92 | chart: 've-funnel', 93 | chartSettings: { 94 | sequence: ['订单', '点击', '访问', '展示'] 95 | }, 96 | columns: ['状态', '数值'], 97 | rows: [ 98 | { '状态': '展示', '数值': 900 }, 99 | { '状态': '访问', '数值': 600 }, 100 | { '状态': '点击', '数值': 300 }, 101 | { '状态': '订单', '数值': 100 } 102 | ] 103 | }, 104 | template: 'Chart' 105 | // template: () => import(/* webpackChunkName: "layout"*/ './template'), // 查询模板 106 | } 107 | }],[ 108 | { 109 | fetch: { 110 | getContent333333(row, all, $set){ 111 | console.log(row, all, $set,'table1010101010101010') 112 | } 113 | }, 114 | style: 'padding-left: 10px; padding-top: 10px;', 115 | query: { 116 | title: '结构分析', 117 | fullScreenName: 'kczzfx', 118 | subBar: true, 119 | }, 120 | content:{ 121 | data: { 122 | chart: 've-pie', 123 | chartSettings: { 124 | roseType: 'radius' 125 | }, 126 | columns: ['日期', '访问用户'], 127 | rows: [ 128 | { '日期': '1/1', '访问用户': 1393 }, 129 | { '日期': '1/2', '访问用户': 3530 }, 130 | { '日期': '1/3', '访问用户': 2923 }, 131 | { '日期': '1/4', '访问用户': 1723 }, 132 | { '日期': '1/5', '访问用户': 3792 }, 133 | { '日期': '1/6', '访问用户': 4593 } 134 | ] 135 | }, 136 | template: 'Chart' 137 | // template: () => import(/* webpackChunkName: "layout"*/ './template'), // 查询模板 138 | } 139 | }] 140 | ] 141 | 142 | },{ 143 | style: 'padding-left: 15px', 144 | layout: [ 145 | [{ 146 | query: { 147 | title: '库存' 148 | }, 149 | layout: [ 150 | [{ 151 | query: { 152 | title: '库存周转分析', 153 | subBar: true, 154 | fullScreenName: 'cczzfx1' 155 | }, 156 | content:{ 157 | data: { 158 | chart: 've-line', 159 | chartSettings: { 160 | stack: { '用户': ['访问用户', '下单用户'] }, 161 | area: false 162 | }, 163 | columns: ['日期', '访问用户', '下单用户', '下单率'], 164 | rows: [ 165 | { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 }, 166 | { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 }, 167 | { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 }, 168 | { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 }, 169 | { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 }, 170 | { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 } 171 | ] 172 | }, 173 | template: 'Chart' 174 | } 175 | },{ 176 | query: { 177 | title: '存销比分布', 178 | subBar: true, 179 | fullScreenName: 'cxbfb1' 180 | }, 181 | content:{ 182 | data: { 183 | chart: 've-pie', 184 | chartSettings: { 185 | roseType: 'radius' 186 | }, 187 | columns: ['日期', '访问用户'], 188 | rows: [ 189 | { '日期': '1/1', '访问用户': 1393 }, 190 | { '日期': '1/2', '访问用户': 3530 }, 191 | { '日期': '1/3', '访问用户': 2923 }, 192 | { '日期': '1/4', '访问用户': 1723 }, 193 | { '日期': '1/5', '访问用户': 3792 }, 194 | { '日期': '1/6', '访问用户': 4593 } 195 | ] 196 | }, 197 | template: 'Chart' 198 | } 199 | }] 200 | ] 201 | }], 202 | [{ 203 | query: { 204 | title: '定价水平指数' 205 | }, 206 | content:{ 207 | data: { 208 | chart: 've-line', 209 | chartSettings: { 210 | stack: { '用户': ['访问用户', '下单用户'] }, 211 | area: true 212 | }, 213 | columns: ['日期', '访问用户', '下单用户', '下单率'], 214 | rows: [ 215 | { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 }, 216 | { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 }, 217 | { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 }, 218 | { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 }, 219 | { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 }, 220 | { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 } 221 | ] 222 | }, 223 | template: 'Chart' 224 | } 225 | }] 226 | ] 227 | }] 228 | ]; -------------------------------------------------------------------------------- /src/reportData/home/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 配置信息 3 | */ 4 | 5 | const configInfo = { 6 | 7 | layout:[ 8 | [{ 9 | query: { 10 | title: '销售' 11 | }, 12 | content: { 13 | data: { 14 | chart: 've-gauge', 15 | chartSettings: { 16 | labelMap: { 17 | 'speed': '速度111' 18 | }, 19 | dataName: { 20 | 'speed': 'km/h' 21 | } 22 | }, 23 | columns: ['type', 'value'], 24 | rows: [ 25 | { type: 'speed', value: 60 } 26 | ] 27 | }, 28 | template: 'Chart' 29 | } 30 | }, 31 | { 32 | style: 'padding-left: 15px', 33 | query: { 34 | title: '综合' 35 | }, 36 | layout:[ 37 | [ 38 | { 39 | content:{ 40 | data: { 41 | chart: 've-gauge', 42 | columns: ['type', 'a', 'b', 'value'], 43 | rows: [ 44 | { type: '速度', value: 40, a: 1, b: 2 } 45 | ] 46 | }, 47 | template: 'Chart' 48 | } 49 | }, 50 | { 51 | content:{ 52 | data: { 53 | chart: 've-gauge', 54 | chartSettings: { 55 | dataType: { 56 | '占比': 'percent' 57 | }, 58 | seriesMap: { 59 | '占比': { 60 | min: 0, 61 | max: 1 62 | } 63 | } 64 | }, 65 | columns: ['type', 'value'], 66 | rows: [ 67 | { type: '占比', value: 0.8 } 68 | ] 69 | }, 70 | template: 'Chart' 71 | } 72 | } 73 | ] 74 | ] 75 | }], 76 | [ 77 | { 78 | style: 'width: 30%; flex: initial;', 79 | query:{ 80 | title: '商品', 81 | }, 82 | layout: [ 83 | [ 84 | { 85 | style: 'border-bottom:#f1f1f1 1px solid;', 86 | fetch: { 87 | getContent333333(row, all, $set){ 88 | console.log(row, all, $set,'table99999999999999') 89 | } 90 | }, 91 | query: { 92 | title: '可售状态汇总', 93 | fullScreenName: 'kczzfx', 94 | subBar: true, 95 | }, 96 | content:{ 97 | data: { 98 | chart: 've-funnel', 99 | chartSettings: { 100 | sequence: ['订单', '点击', '访问', '展示'] 101 | }, 102 | columns: ['状态', '数值'], 103 | rows: [ 104 | { '状态': '展示', '数值': 900 }, 105 | { '状态': '访问', '数值': 600 }, 106 | { '状态': '点击', '数值': 300 }, 107 | { '状态': '订单', '数值': 100 } 108 | ] 109 | }, 110 | template: 'Chart' 111 | // template: () => import(/* webpackChunkName: "layout"*/ './template'), // 查询模板 112 | } 113 | }],[ 114 | { 115 | fetch: { 116 | getContent333333(row, all, $set){ 117 | console.log(row, all, $set,'table1010101010101010') 118 | } 119 | }, 120 | style: 'padding-left: 10px; padding-top: 10px;', 121 | query: { 122 | title: '结构分析', 123 | fullScreenName: 'kczzfx', 124 | subBar: true, 125 | }, 126 | content:{ 127 | data: { 128 | chart: 've-pie', 129 | chartSettings: { 130 | roseType: 'radius' 131 | }, 132 | columns: ['日期', '访问用户'], 133 | rows: [ 134 | { '日期': '1/1', '访问用户': 1393 }, 135 | { '日期': '1/2', '访问用户': 3530 }, 136 | { '日期': '1/3', '访问用户': 2923 }, 137 | { '日期': '1/4', '访问用户': 1723 }, 138 | { '日期': '1/5', '访问用户': 3792 }, 139 | { '日期': '1/6', '访问用户': 4593 } 140 | ] 141 | }, 142 | template: 'Chart' 143 | // template: () => import(/* webpackChunkName: "layout"*/ './template'), // 查询模板 144 | } 145 | }] 146 | ] 147 | 148 | },{ 149 | style: 'padding-left: 15px', 150 | layout: [ 151 | [{ 152 | query: { 153 | title: '库存' 154 | }, 155 | layout: [ 156 | [{ 157 | query: { 158 | title: '库存周转分析', 159 | subBar: true, 160 | fullScreenName: 'cczzfx1' 161 | }, 162 | content:{ 163 | data: { 164 | chart: 've-line', 165 | chartSettings: { 166 | stack: { '用户': ['访问用户', '下单用户'] }, 167 | area: false 168 | }, 169 | columns: ['日期', '访问用户', '下单用户', '下单率'], 170 | rows: [ 171 | { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 }, 172 | { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 }, 173 | { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 }, 174 | { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 }, 175 | { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 }, 176 | { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 } 177 | ] 178 | }, 179 | template: 'Chart' 180 | } 181 | },{ 182 | query: { 183 | title: '存销比分布', 184 | subBar: true, 185 | fullScreenName: 'cxbfb1' 186 | }, 187 | content:{ 188 | data: { 189 | chart: 've-pie', 190 | chartSettings: { 191 | roseType: 'radius' 192 | }, 193 | columns: ['日期', '访问用户'], 194 | rows: [ 195 | { '日期': '1/1', '访问用户': 1393 }, 196 | { '日期': '1/2', '访问用户': 3530 }, 197 | { '日期': '1/3', '访问用户': 2923 }, 198 | { '日期': '1/4', '访问用户': 1723 }, 199 | { '日期': '1/5', '访问用户': 3792 }, 200 | { '日期': '1/6', '访问用户': 4593 } 201 | ] 202 | }, 203 | template: 'Chart' 204 | } 205 | }] 206 | ] 207 | }], 208 | [{ 209 | query: { 210 | title: '定价水平指数' 211 | }, 212 | content:{ 213 | data: { 214 | chart: 've-line', 215 | chartSettings: { 216 | stack: { '用户': ['访问用户', '下单用户'] }, 217 | area: true 218 | }, 219 | columns: ['日期', '访问用户', '下单用户', '下单率'], 220 | rows: [ 221 | { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 }, 222 | { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 }, 223 | { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 }, 224 | { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 }, 225 | { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 }, 226 | { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 } 227 | ] 228 | }, 229 | template: 'Chart' 230 | } 231 | }] 232 | ] 233 | }] 234 | ] 235 | 236 | 237 | } 238 | export default configInfo; -------------------------------------------------------------------------------- /src/configData.js: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * 系统标题名称 4 | */ 5 | const stytemName = '数据平台' 6 | 7 | /** 8 | * collapseVal 9 | * 导航菜单是否折叠 10 | */ 11 | const collapseVal = false 12 | 13 | 14 | /** 15 | * showRouter 16 | * 导航菜单中是否启动路由模式 17 | */ 18 | const showRouter = true 19 | 20 | 21 | /** 22 | * currentIndex 23 | * 当前菜单的默认选项项 24 | * 1. 该值为index的值 25 | * 2. 如配置router时，也可以设置成path的值，为默认显示的页面 26 | */ 27 | const currentIndex = localStorage.currentPath || '/' 28 | 29 | /** 30 | * menuData 的key描述 31 | * 中的router为可选配项，配置时router时，路由会根据这个配置来生成 32 | * { 33 | index:'1', // 导航索引 34 | name: '销售业2绩', // 导航名称 35 | children:[ // 子导航 36 | index: '2', // 子导航索引 37 | name: '导航名称' // 子导航名称 38 | router:{ // 路由配置 // 子导航路由配置数据 为可选配项 39 | path: '/', // 子导航路由url地址名称 40 | name: 'home', // 子导航路由名称 41 | component: Home // 子导航路由组件 42 | } 43 | ] 44 | } 45 | */ 46 | 47 | let menuData = [ 48 | { 49 | index: '0', 50 | name: '首页', 51 | icon: 'icon-shouye-cai text-blue-600', 52 | router:{ 53 | path: '/', 54 | name: 'home', 55 | } 56 | }, 57 | { 58 | index:'1', 59 | name: '销售业绩', 60 | icon: 'icon-zonghezhibiao text-pink-400', 61 | children:[ 62 | { 63 | index:'/scale', 64 | name: '销售实绩', 65 | router: { 66 | path: '/scale', 67 | name: 'scale', 68 | } 69 | }, 70 | { 71 | index:'/salesAnalysis', 72 | name: '销售分析', 73 | router: { 74 | path: '/salesAnalysis', 75 | name: 'salesAnalysis', 76 | } 77 | } 78 | ] 79 | }, 80 | 81 | { 82 | index:'2', 83 | name: '商品管理', 84 | icon: 'icon-shangpin1 text-purple-400', 85 | children:[ 86 | { 87 | index:'/o2obuyability', 88 | name: '可售状态', 89 | router: { 90 | path: '/o2obuyability', 91 | name: 'o2obuyability', 92 | } 93 | },{ 94 | index:'/structureAnalysis', 95 | name: '结构分析', 96 | router: { 97 | path: '/structureAnalysis', 98 | name: 'structureAnalysis', 99 | } 100 | },{ 101 | index:'/heroSku', 102 | name: '重点机型', 103 | router: { 104 | path: '/heroSku', 105 | name: 'heroSku', 106 | } 107 | } 108 | ] 109 | }, 110 | 111 | { 112 | index:'3', 113 | name: '库存管理', 114 | icon: 'icon-kucunguanli text-red-400', 115 | children:[ 116 | { 117 | index:'/oosMonitoring', 118 | name: '存销比(含缺断货)', 119 | router: { 120 | path: '/oosMonitoring', 121 | name: 'oosMonitoring', 122 | } 123 | }, 124 | { 125 | index:'/inventoryHealthy', 126 | name: '库龄健康(滞销) ', 127 | router: { 128 | path: '/inventoryHealthy', 129 | name: 'inventoryHealthy', 130 | } 131 | }, 132 | { 133 | index:'/inventoryTurnover', 134 | name: '库存周转', 135 | router: { 136 | path: '/inventoryTurnover', 137 | name: 'inventoryTurnover', 138 | } 139 | }, 140 | { 141 | index:'/oosMonitoringDropship', 142 | name: '带安库存监控 ', 143 | router: { 144 | path: '/oosMonitoringDropship', 145 | name: 'oosMonitoringDropship', 146 | } 147 | }, 148 | { 149 | index:'/undeliveryStock', 150 | name: '已售未提报表', 151 | router: { 152 | path: '/undeliveryStock', 153 | name: 'undeliveryStock', 154 | } 155 | }, 156 | { 157 | index:'/storebuyability', 158 | name: '门店规划有货率', 159 | router: { 160 | path: '/storebuyability', 161 | name: 'storebuyability', 162 | } 163 | } 164 | ] 165 | }, 166 | 167 | { 168 | index:'4', 169 | name: '财务管理', 170 | icon: 'icon-caiwu text-yellow-500', 171 | children:[ 172 | { 173 | index:'/vendorCOOP', 174 | name: '市调蓝欠收', 175 | router: { 176 | path: '/vendorCOOP', 177 | name: 'vendorCOOP', 178 | } 179 | },{ 180 | index:'/belowCostSalesMonitoring', 181 | name: '低价销售', 182 | router: { 183 | path: '/belowCostSalesMonitoring', 184 | name: 'belowCostSalesMonitoring', 185 | } 186 | }, 187 | ] 188 | }, 189 | 190 | { 191 | index:'5', 192 | name: '采购管理', 193 | icon: 'icon-caigou1 text-teal-400', 194 | children:[ 195 | { 196 | index:'/vendorPerformance', 197 | name: '供应商绩效', 198 | router: { 199 | path: '/vendorPerformance', 200 | name: 'vendorPerformance', 201 | } 202 | },{ 203 | index:'/overrideTurnover', 204 | name: '承诺周转', 205 | router: { 206 | path: '/overrideTurnover', 207 | name: 'overrideTurnover', 208 | } 209 | }, 210 | ] 211 | }, 212 | 213 | { 214 | index:'6', 215 | name: '调拨管理', 216 | icon: 'icon-pingtai_mokuai text-pink-600', 217 | children:[ 218 | { 219 | index:'/allocationMonitoring', 220 | name: '调拨监控', 221 | router: { 222 | path: '/allocationMonitoring', 223 | name: 'allocationMonitoring', 224 | } 225 | }, 226 | ] 227 | }, 228 | 229 | { 230 | index:'7', 231 | name: '订单时效', 232 | icon: 'icon-chengjiaodingdan text-teal-300', 233 | children:[ 234 | { 235 | index:'/c2dDropship', 236 | name: '带安订单妥投时效', 237 | router: { 238 | path: '/c2dDropship', 239 | name: 'c2dDropship', 240 | } 241 | },{ 242 | index:'/instantFulfillmentDropship', 243 | name: '带安订单及时履约', 244 | router: { 245 | path: '/instantFulfillmentDropship', 246 | name: 'instantFulfillmentDropship', 247 | } 248 | }, 249 | ] 250 | }, 251 | 252 | { 253 | index:'8', 254 | name: '非电器业务', 255 | icon: 'icon-zonghetiyanguan text-blue-400', 256 | children:[ 257 | { 258 | index:'/kpiCommercialComplex', 259 | name: '综合指标', 260 | router: { 261 | path: '/kpiCommercialComplex', 262 | name: 'kpiCommercialComplex', 263 | } 264 | },{ 265 | index:'/salesCommercialComplex', 266 | name: '非电器销售', 267 | router: { 268 | path: '/salesCommercialComplex', 269 | name: 'salesCommercialComplex', 270 | } 271 | },{ 272 | index:'/customerCounting', 273 | name: '流量分析', 274 | router: { 275 | path: '/customerCounting', 276 | name: 'customerCounting', 277 | } 278 | },{ 279 | index:'/commodityMovableSale', 280 | name: '商品动销', 281 | router: { 282 | path: '/commodityMovableSale', 283 | name: 'commodityMovableSale', 284 | } 285 | }, 286 | ] 287 | }, 288 | 289 | { 290 | index:'9', 291 | name: '例子参考', 292 | icon: 'icon-zonghezhibiao text-pink-400', 293 | children:[ 294 | { 295 | index:'/example', 296 | name: '演示', 297 | router: { 298 | path: '/example', 299 | name: 'example', 300 | } 301 | },{ 302 | index:'/test', 303 | name: '演示test', 304 | router: { 305 | path: '/test', 306 | name: 'test', 307 | component: () => import(/* webpackChunkName: "home"*/ '@/testNewPage/index') 308 | } 309 | } 310 | ] 311 | } 312 | 313 | 314 | ] 315 | 316 | /** 317 | * 选择菜单导航时触发 318 | * obj.key的值 open打开折叠 | close关闭折叠 | select选中的值 319 | * obj.val为操作当前的值 320 | */ 321 | const handleMenu = () => { 322 | // console.log(, 3333) 323 | } 324 | 325 | /** 326 | * 菜单样式设置 327 | */ 328 | const cssStyle = { 329 | background: "white", 330 | textCor: "#363f44", 331 | activeCor: "#409eff" 332 | } 333 | 334 | export {menuData, collapseVal, currentIndex, showRouter, handleMenu, cssStyle, stytemName} -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | 2 | ## 使用report-cli创建数据报表工程步骤： 3 | ##### 1. 安装nrm、切换gm源或者配置npm源为gm 4 | > 参考 http://wiki.intra.gmplus.com/pages/viewpage.action?pageId=52888483 5 | 6 | ##### 2. 安装report-cli 7 | ``` 8 | npm install -g @gm/report-cli 9 | 10 | 出现版本信息说明安装成功 11 | report -V 12 | 1.0.0 13 | ``` 14 | ##### 3. 创建一个新的数据报表项目 15 | ``` 16 | report create myProject 17 | ``` 18 | 19 | ------ 20 | 21 | ## 效果预览 22 | 23 | ![图1](http://code.ds.gm.com.cn/gitlab/scot/dp/report-platform-front/raw/master/src/assets/img1.png) 24 | 25 | ------ 26 | 27 | ![图2](http://code.ds.gm.com.cn/gitlab/scot/dp/report-platform-front/raw/master/src/assets/img2.png) 28 | 29 | ------ 30 | 31 | 32 | ## css样式参考 33 | 34 | > 目的：不写样式 及 少写样式 35 | 36 | ``` 37 | https://tailwindcss.com/ 38 | ``` 39 | 40 | ------ 41 | 42 | ## 使用说明步骤： 43 | 44 | ##### 1. 修改configData配置文件： 45 | 46 | > 主要操作：增加菜单导航路由的配置 47 | 48 | ``` 49 | const stytemName = '数据平台'; // 系统名称 50 | const collapseVal = true; // 是否折叠菜单 51 | const showRouter = true; // 导航菜单中是否启动路由模式 52 | const currentIndex = '/'; // 菜单的默认选项项;该值为index的值;如配置router时，也可以设置成path的值，为默认显示的页面 53 | 54 | const menuData = [{ // 菜单导航数据格式 55 | index: '/', 56 | name: '首页', 57 | icon: 'icon-shouye-cai text-blue-600', 58 | router:{ 59 | path: '/', 60 | name: 'home', 61 | component: () => import(/* webpackChunkName: "home"*/ '@/views/Layout.vue') 62 | }, 63 | children:[{ // 子导航 64 | index:'/scale', 65 | name: '销售实绩', 66 | router: { 67 | path: '/scale', 68 | name: 'scale', 69 | component: () => import(/* webpackChunkName: "layout"*/ '@/views/Layout.vue') 70 | } 71 | }, 72 | ...... 73 | ] 74 | }, 75 | ...... 76 | ]; 77 | 78 | const cssStyle = { // 样式设置 79 | background: "white", 80 | textCor: "#363f44", 81 | activeCor: "#409eff" 82 | } 83 | ``` 84 | 85 | ##### 2. reportData目录下新增报表目录，格式如： 86 | 87 | ``` 88 | | - reportData 89 | | - reportData | - scale // 新增的报表 目录 90 | | - reportData | - scale | - crumbs // 面包屑 目录 91 | | - reportData | - scale | - crumbs | index.js // 块数据 92 | | - reportData | - scale | - conditions // 筛选条件 目录 93 | | - reportData | - scale | - conditions | index.js // 块数据 94 | | - reportData | - scale | - conditions | template.vue // 筛选表单 模板 95 | | - reportData | - scale | - summary // 汇总信息 目录 96 | | - reportData | - scale | - summary | index.js // 块数据 97 | | - reportData | - scale | - charts // 图形展示 目录 98 | | - reportData | - scale | - charts | index.js // 块数据 99 | | - reportData | - scale | - table // 表格展示 目录 100 | | - reportData | - scale | - table | index.js // 块数据 101 | | - reportData | - scale | - table | template.vue // 筛选表单 模板 102 | | - reportData | - scale | - index.js // 入口引入 面包屑|筛选条件|汇总信息|图形展示|表格展示，需要在index.js中注册才能生效 103 | ``` 104 | 105 | ##### 3. 报表数据配置格式说明如下： 106 | 107 | ``` 108 | 109 | // 表单数据格式 基本配置 110 | const reportFormConfig = { 111 | crumbs: {}, // 面包屑 块数据 112 | conditions: {}, // 筛选条件 块数据 113 | summary: {}, // 汇总信息 块数据 114 | layout:[ // 布局拆分 115 | [{块数据}, {块数据}], // 一行展示两块内容 116 | [{块数据}, {块数据}, {块数据}] // 一行展示三块内容 117 | ], 118 | charts: {}, // 图形展示 块数据 119 | table: {} // 表格展示 块数据 120 | } 121 | 122 | 123 | // 块数据格式 基本配置 124 | { 125 | style: '', // 布局时的样式设置 layout中的块数据 126 | query: {}, // 标题栏查询配置 127 | content: {}, // 主内容区域配置 128 | fetch: {}, // 加载时请求 129 | api: {}, // 调用时请求 130 | listener ()=>{} // 数据改变时事件监听设置 131 | } 132 | 133 | 134 | // 标题栏查询 与 主内容区域 的数据配置 135 | query | content: { // 标题栏 及 主内容区域 配置格式基本一样 136 | title: '', // 标题名称 标题栏设置 137 | fullScreenName: '', // 全屏名称 标题栏设置 138 | subBar: true, // 主标题 子标题 标题栏设置 139 | data: {}, // 依赖的数据 标题栏及内容区设置 140 | template: () => import(), // 模板 标题栏及内容区设置 141 | submit: ()=>{} // 模板里触发调用 标题栏及内容区设置 142 | } 143 | ``` 144 | ------ 145 | ## 统一的数据请求： 146 | 147 | #### 1. 调用方式 148 | ``` 149 | // 推荐使用 150 | window.$ajax.module1.getDetail({id:11}).then(res=>{ 151 | console.log(res, 444444) 152 | }) 153 | 154 | // 不推荐 155 | window.$ajax.get('/GET/getTest').then(function (response) { 156 | console.log(response,6666655); 157 | }).catch(function (error) { 158 | console.log(error,555666); 159 | }); 160 | ``` 161 | 162 | #### 2. api列表管理，目录结构 163 | 164 | ``` 165 | | - api 166 | | - api | - scale // 报表目录 167 | | - api | - scale | - index.js // 接口 168 | | - api | - scaleAnalysis // 报表目录 169 | | - api | - scaleAnalysis | - index.js // 接口 170 | | - api | - index.js // 新加的报表，需要在index.js中注册才能生效 171 | ``` 172 | 173 | ------ 174 | 175 | ## 连接test服务器配置在vue.config.js中修改 176 | 177 | ``` 178 | let testApi = ['http://localhost:8980', 'http://localhost:88', 'http://user-behavior.gm.inc'] 179 | testApi.push('http://test.test.com') 180 | 181 | if (testApi){ 182 | proxy['/api/reviceLog'] = { 183 | target: testApi[0], 184 | changeOrigin: true, 185 | ws: true, 186 | pathRewrite: {'/api/reviceLog': 'reviceLog'} 187 | } 188 | proxy['/api/dp'] = { 189 | target: testApi[1], 190 | changeOrigin: true, 191 | ws: true, 192 | pathRewrite: {'/api/dp': 'dp'} 193 | } 194 | proxy['/api/help-sys'] = { 195 | target: testApi[2], 196 | changeOrigin: true, 197 | ws: true, 198 | pathRewrite: {'/api/help-sys': 'help-sys'} 199 | } 200 | proxy['/api/test'] = { 201 | target: testApi[3], 202 | changeOrigin: true, 203 | ws: true, 204 | pathRewrite: {'/api/test: 'test'} 205 | } 206 | } 207 | ``` 208 | 209 | --- 210 | 211 | # 例子：test报表文件创建步骤，参考如下 212 | 213 | ##### 1. 修改configData菜单导航配置文件，增加test菜单配置 214 | 215 | ``` 216 | { 217 | index:'/test', 218 | name: '一个测试报表', 219 | router: { 220 | path: '/test', 221 | name: 'test', 222 | } 223 | } 224 | ``` 225 | 226 | ##### 2. 在reportData里目录下新建test目录 227 | 228 | ``` 229 | | - reportData 230 | | - reportData | - test 231 | ``` 232 | 233 | ##### 3. 在test目录新建块目录及index.js 234 | 块目录：crumbs面包屑 | conditions筛选条件 | summary汇总信息 | charts图形 | table表格 235 | 236 | ``` 237 | | - test 238 | | - test | - index.js // 注册块数据到index.js中 239 | | - test | - crumbs // 面包屑块 240 | | - test | - crumbs | - index.js // 面包屑的块数据 241 | | - test | - conditions // 查询条件块 242 | | - test | - conditions | - index.js // 查询条件的块数据 243 | | - test | - summary // 汇总信息块 244 | | - test | - summary | - index.js // 汇总信息的块数据 245 | ...... 246 | ``` 247 | 248 | ##### 4. 块数据的属性一般格式： 249 | style布局样式 | query标题栏区 | content内容区 | fetch默认请求 | api调用请求 | listener监听数据 | layout布局拆分 250 | 251 | | 属性 | 内容 | 类型 | 使用范围 | 252 | | ---- | ---- | ---- | ---- | 253 | | style | layout时可以设置 | String | 块数据 | 254 | | query | 标题栏 | Object | 块数据 | 255 | | content | 内容区 | Object | 块数据 | 256 | | fetch | 块数据黑默认请求的数据 | Object | 块数据 | 257 | | api | 块数据里需要调用触发 | Object | 块数据 | 258 | | listener | 数据发生改变时监听数据 | Function | 块数据 | 259 | | layout | 布局拆分 | Array | 块数据 | 260 | 261 | 262 | ##### 5. 三个主要方法及参数 263 | 264 | | 方法 | 参数 | 使用范围 | 265 | | ---- | ---- | ---- | 266 | | listener | area, newObj,oldObj, row, all, $set | 块数据 | 267 | | init | row, all, $set | fetch属性下 | 268 | | submit | data, row, all, $set | content及query属性下 | 269 | 270 | ##### 6. 块数据的query及content的属性 271 | 272 | | 属性 | 类型 | 描述 | 使用范围 | 273 | | ---- | ---- | ---- | ---- | 274 | | title | String | 标题栏名称 | query属性下 | 275 | | fullScreenName | String | 全屏名称唯一ID | query属性下 | 276 | | subBar | Bolean | 是否为子标题 | query属性下 | 277 | | data | Object | 模板的数据 | query及content | 278 | | template | Function或String | 模板组件 | query及content | 279 | | submit | Function | 模板中的触发的方法 | query及content | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # report_form 2 | ------ 3 | 4 | ## 使用report-cli创建数据报表工程步骤： 5 | ##### 1. 安装nrm、切换gm源或者配置npm源为gm 6 | > 参考 http://wiki.intra.gmplus.com/pages/viewpage.action?pageId=52888483 7 | 8 | ##### 2. 安装report-cli 9 | ``` 10 | npm install -g @gm/report-cli 11 | 12 | 出现版本信息说明安装成功 13 | report -V 14 | 1.0.0 15 | ``` 16 | ##### 3. 创建一个新的数据报表项目 17 | ``` 18 | report create myProject 19 | ``` 20 | 21 | ------ 22 | 23 | ## 效果预览 24 | 25 | ![图1](https://s2.ax1x.com/2019/09/01/nSfK6x.png) 26 | 27 | ------ 28 | 29 | ![图2](https://s2.ax1x.com/2019/09/01/nSfMX6.png) 30 | 31 | ------ 32 | 33 | ![图3](https://s2.ax1x.com/2019/09/01/nSfYhd.png) 34 | 35 | ------ 36 | 37 | ![图4](https://s2.ax1x.com/2019/09/01/nSfact.png) 38 | 39 | ------ 40 | 41 | http://code.ds.gm.com.cn/gitlab/scot/dp/report-platform-front/blob/master/src/assets/img1.png 42 | 43 | ## css样式参考 44 | 45 | > 目的：不写样式 及 少写样式 46 | 47 | ``` 48 | https://tailwindcss.com/ 49 | ``` 50 | 51 | ------ 52 | 53 | ## 使用说明步骤： 54 | 55 | ##### 1. 修改configData配置文件： 56 | 57 | > 主要操作：增加菜单导航路由的配置 58 | 59 | ``` 60 | const stytemName = '数据平台'; // 系统名称 61 | const collapseVal = true; // 是否折叠菜单 62 | const showRouter = true; // 导航菜单中是否启动路由模式 63 | const currentIndex = '/'; // 菜单的默认选项项;该值为index的值;如配置router时，也可以设置成path的值，为默认显示的页面 64 | 65 | const menuData = [{ // 菜单导航数据格式 66 | index: '/', 67 | name: '首页', 68 | icon: 'icon-shouye-cai text-blue-600', 69 | router:{ 70 | path: '/', 71 | name: 'home', 72 | component: () => import(/* webpackChunkName: "home"*/ '@/views/Layout.vue') 73 | }, 74 | children:[{ // 子导航 75 | index:'/scale', 76 | name: '销售实绩', 77 | router: { 78 | path: '/scale', 79 | name: 'scale', 80 | component: () => import(/* webpackChunkName: "layout"*/ '@/views/Layout.vue') 81 | } 82 | }, 83 | ...... 84 | ] 85 | }, 86 | ...... 87 | ]; 88 | 89 | const cssStyle = { // 样式设置 90 | background: "white", 91 | textCor: "#363f44", 92 | activeCor: "#409eff" 93 | } 94 | ``` 95 | 96 | ##### 2. reportData目录下新增报表目录，格式如： 97 | 98 | ``` 99 | | - reportData 100 | | - reportData | - scale // 新增的报表 目录 101 | | - reportData | - scale | - crumbs // 面包屑 目录 102 | | - reportData | - scale | - crumbs | index.js // 块数据 103 | | - reportData | - scale | - conditions // 筛选条件 目录 104 | | - reportData | - scale | - conditions | index.js // 块数据 105 | | - reportData | - scale | - conditions | template.vue // 筛选表单 模板 106 | | - reportData | - scale | - summary // 汇总信息 目录 107 | | - reportData | - scale | - summary | index.js // 块数据 108 | | - reportData | - scale | - charts // 图形展示 目录 109 | | - reportData | - scale | - charts | index.js // 块数据 110 | | - reportData | - scale | - table // 表格展示 目录 111 | | - reportData | - scale | - table | index.js // 块数据 112 | | - reportData | - scale | - table | template.vue // 筛选表单 模板 113 | | - reportData | - scale | - index.js // 入口引入 面包屑|筛选条件|汇总信息|图形展示|表格展示，需要在index.js中注册才能生效 114 | ``` 115 | 116 | ##### 3. 报表数据配置格式说明如下： 117 | 118 | ``` 119 | 120 | // 表单数据格式 基本配置 121 | const reportFormConfig = { 122 | crumbs: {}, // 面包屑 块数据 123 | conditions: {}, // 筛选条件 块数据 124 | summary: {}, // 汇总信息 块数据 125 | layout:[ // 布局拆分 126 | [{块数据}, {块数据}], // 一行展示两块内容 127 | [{块数据}, {块数据}, {块数据}] // 一行展示三块内容 128 | ], 129 | charts: {}, // 图形展示 块数据 130 | table: {} // 表格展示 块数据 131 | } 132 | 133 | 134 | // 块数据格式 基本配置 135 | { 136 | style: '', // 布局时的样式设置 layout中的块数据 137 | query: {}, // 标题栏查询配置 138 | content: {}, // 主内容区域配置 139 | fetch: {}, // 加载时请求 140 | api: {}, // 调用时请求 141 | listener ()=>{} // 数据改变时事件监听设置 142 | } 143 | 144 | 145 | // 标题栏查询 与 主内容区域 的数据配置 146 | query | content: { // 标题栏 及 主内容区域 配置格式基本一样 147 | title: '', // 标题名称 标题栏设置 148 | fullScreenName: '', // 全屏名称 标题栏设置 149 | subBar: true, // 主标题 子标题 标题栏设置 150 | data: {}, // 依赖的数据 标题栏及内容区设置 151 | template: () => import(), // 模板 标题栏及内容区设置 152 | submit: ()=>{} // 模板里触发调用 标题栏及内容区设置 153 | } 154 | ``` 155 | ------ 156 | ## 统一的数据请求： 157 | 158 | #### 1. 调用方式 159 | ``` 160 | // 推荐使用 161 | window.$ajax.module1.getDetail({id:11}).then(res=>{ 162 | console.log(res, 444444) 163 | }) 164 | 165 | // 不推荐 166 | window.$ajax.get('/GET/getTest').then(function (response) { 167 | console.log(response,6666655); 168 | }).catch(function (error) { 169 | console.log(error,555666); 170 | }); 171 | ``` 172 | #### 2. api列表管理，目录结构 173 | 174 | ``` 175 | | - api 176 | | - api | - scale // 报表目录 177 | | - api | - scale | - index.js // 接口 178 | | - api | - scaleAnalysis // 报表目录 179 | | - api | - scaleAnalysis | - index.js // 接口 180 | | - api | - index.js // 新加的报表，需要在index.js中注册才能生效 181 | ``` 182 | ------ 183 | ## 连接test服务器配置在vue.config.js中修改 184 | 185 | ``` 186 | let testApi = ['http://localhost:8980', 'http://localhost:88', 'http://user-behavior.gm.inc'] 187 | testApi.push('http://test.test.com') 188 | 189 | if (testApi){ 190 | proxy['/api/reviceLog'] = { 191 | target: testApi[0], 192 | changeOrigin: true, 193 | ws: true, 194 | pathRewrite: {'/api/reviceLog': 'reviceLog'} 195 | } 196 | proxy['/api/dp'] = { 197 | target: testApi[1], 198 | changeOrigin: true, 199 | ws: true, 200 | pathRewrite: {'/api/dp': 'dp'} 201 | } 202 | proxy['/api/help-sys'] = { 203 | target: testApi[2], 204 | changeOrigin: true, 205 | ws: true, 206 | pathRewrite: {'/api/help-sys': 'help-sys'} 207 | } 208 | proxy['/api/test'] = { 209 | target: testApi[3], 210 | changeOrigin: true, 211 | ws: true, 212 | pathRewrite: {'/api/test: 'test'} 213 | } 214 | } 215 | ``` 216 | 217 | --- 218 | 219 | # 例子：test报表文件创建步骤，参考如下 220 | 221 | ##### 1. 修改configData菜单导航配置文件，增加test菜单配置 222 | 223 | ``` 224 | { 225 | index:'/test', 226 | name: '一个测试报表', 227 | router: { 228 | path: '/test', 229 | name: 'test', 230 | } 231 | } 232 | ``` 233 | 234 | ##### 2. 在reportData里目录下新建test目录 235 | 236 | ``` 237 | | - reportData 238 | | - reportData | - test 239 | ``` 240 | 241 | ##### 3. 在test目录新建块目录及index.js 242 | 块目录：crumbs面包屑 | conditions筛选条件 | summary汇总信息 | charts图形 | table表格 243 | 244 | ``` 245 | | - test 246 | | - test | - index.js // 注册块数据到index.js中 247 | | - test | - crumbs // 面包屑块 248 | | - test | - crumbs | - index.js // 面包屑的块数据 249 | | - test | - conditions // 查询条件块 250 | | - test | - conditions | - index.js // 查询条件的块数据 251 | | - test | - summary // 汇总信息块 252 | | - test | - summary | - index.js // 汇总信息的块数据 253 | ...... 254 | ``` 255 | 256 | ##### 4. 块数据的属性一般格式： 257 | style布局样式 | query标题栏区 | content内容区 | fetch默认请求 | api调用请求 | listener监听数据 258 | 259 | | 属性 | 内容 | 类型 | 260 | | ---- | ---- | ---- | 261 | | style | layout时可以设置 | String | 262 | | query | 标题栏 | Object | 263 | | content | 内容区 | Object | 264 | | fetch | 块数据黑默认请求的数据 | Object | 265 | | api | 块数据里需要调用触发 | Object | 266 | | listener | 数据发生改变时监听数据 | Function | 267 | | layout | 布局拆分 | Array | 268 | 269 | 270 | ##### 5. 三个主要方法及参数 271 | 272 | | 方法 | 参数 | 使用范围 | 273 | | ---- | ---- | ---- | 274 | | listener | area, newObj,oldObj, row, all, $set | 块数据的属性 | 275 | | init | row, all, $set | fetch属性下 | 276 | | submit | data, row, all, $set | content及query属性下 | 277 | 278 | ##### 6. 块数据的query及content的属性 279 | 280 | | 属性 | 类型 | 描述 | 使用范围 | 281 | | ---- | ---- | ---- | ---- | 282 | | title | String | 标题栏名称 | query属性下 | 283 | | fullScreenName | String | 全屏名称唯一ID | query属性下 | 284 | | subBar | Bolean | 是否为子标题 | query属性下 | 285 | | data | Object | 模板的数据 | query及content | 286 | | template | Function或String | 模板组件 | query及content | 287 | | submit | Function | 模板中的触发的方法 | query及content | -------------------------------------------------------------------------------- /src/components/Menu/configData.js: -------------------------------------------------------------------------------- 1 | // 示例配置文件 2 | 3 | /** 4 | * 系统标题名称 5 | */ 6 | const stytemName = '数据平台' 7 | 8 | /** 9 | * collapseVal 10 | * 导航菜单是否折叠 11 | */ 12 | const collapseVal = false 13 | 14 | 15 | /** 16 | * showRouter 17 | * 导航菜单中是否启动路由模式 18 | */ 19 | const showRouter = true 20 | 21 | 22 | /** 23 | * currentIndex 24 | * 当前菜单的默认选项项 25 | * 1. 该值为index的值 26 | * 2. 如配置router时，也可以设置成path的值，为默认显示的页面 27 | */ 28 | const currentIndex = '/' 29 | 30 | 31 | /** 32 | * menuData 的key描述 33 | * 中的router为可选配项，配置时router时，路由会根据这个配置来生成 34 | * { 35 | index:'1', // 导航索引 36 | name: '销售业2绩', // 导航名称 37 | children:[ // 子导航 38 | index: '2', // 子导航索引 39 | name: '导航名称' // 子导航名称 40 | router:{ // 路由配置 // 子导航路由配置数据 为可选配项 41 | path: '/', // 子导航路由url地址名称 42 | name: 'home', // 子导航路由名称 43 | component: Home // 子导航路由组件 44 | } 45 | ] 46 | } 47 | */ 48 | 49 | const menuData = [ 50 | { 51 | index: '/', 52 | name: '首页', 53 | icon: 'icon-shouye-cai text-blue-600', 54 | router:{ 55 | path: '/', 56 | name: 'home', 57 | component: () => import('./views/Home.vue') 58 | } 59 | }, 60 | { 61 | index:'1', 62 | name: '销售业绩', 63 | icon: 'icon-zonghezhibiao text-pink-400', 64 | children:[ 65 | { 66 | index:'/scale', 67 | name: '销售实绩', 68 | router: { 69 | path: '/scale', 70 | name: 'scale', 71 | component: () => import('./views/Home.vue') 72 | } 73 | }, 74 | { 75 | index:'/salesAnalysis', 76 | name: '销售分析', 77 | router: { 78 | path: '/salesAnalysis', 79 | name: 'salesAnalysis', 80 | component: () => import('./views/Home.vue') 81 | } 82 | } 83 | ] 84 | },{ 85 | index:'3', 86 | name: '商品管理', 87 | icon: 'icon-shangpin1 text-purple-400', 88 | children:[ 89 | { 90 | index:'/o2obuyability', 91 | name: '可售状态', 92 | router: { 93 | path: '/o2obuyability', 94 | name: 'o2obuyability', 95 | component: () => import('./views/About.vue') 96 | } 97 | },{ 98 | index:'/structureAnalysis', 99 | name: '结构分析', 100 | router: { 101 | path: '/structureAnalysis', 102 | name: 'structureAnalysis', 103 | component: () => import('./views/About.vue') 104 | } 105 | },{ 106 | index:'/heroSku', 107 | name: '重点机型', 108 | router: { 109 | path: '/heroSku', 110 | name: 'heroSku', 111 | component: () => import('./views/About.vue') 112 | } 113 | } 114 | ] 115 | },{ 116 | index:'4', 117 | name: '库存管理', 118 | icon: 'icon-kucunguanli text-red-400', 119 | children:[ 120 | { 121 | index:'/oosMonitoring', 122 | name: '存销比(含缺断货)', 123 | router: { 124 | path: '/oosMonitoring', 125 | name: 'oosMonitoring', 126 | component: () => import('./views/Home.vue') 127 | } 128 | }, 129 | { 130 | index:'/inventoryHealthy', 131 | name: '库龄健康(滞销) ', 132 | router: { 133 | path: '/inventoryHealthy', 134 | name: 'inventoryHealthy', 135 | component: () => import('./views/Home.vue') 136 | } 137 | }, 138 | { 139 | index:'/inventoryTurnover', 140 | name: '库存周转', 141 | router: { 142 | path: '/inventoryTurnover', 143 | name: 'inventoryTurnover', 144 | component: () => import('./views/Home.vue') 145 | } 146 | }, 147 | { 148 | index:'/oosMonitoringDropship', 149 | name: '带安库存监控 ', 150 | router: { 151 | path: '/oosMonitoringDropship', 152 | name: 'oosMonitoringDropship', 153 | component: () => import('./views/Home.vue') 154 | } 155 | }, 156 | { 157 | index:'/undeliveryStock', 158 | name: '已售未提报表', 159 | router: { 160 | path: '/undeliveryStock', 161 | name: 'undeliveryStock', 162 | component: () => import('./views/Home.vue') 163 | } 164 | }, 165 | { 166 | index:'/storebuyability', 167 | name: '门店规划有货率', 168 | router: { 169 | path: '/storebuyability', 170 | name: 'storebuyability', 171 | component: () => import('./views/Home.vue') 172 | } 173 | } 174 | ] 175 | },{ 176 | index:'5', 177 | name: '财务管理', 178 | icon: 'icon-caiwu text-yellow-500', 179 | children:[ 180 | { 181 | index:'/vendorCOOP', 182 | name: '市调蓝欠收', 183 | router: { 184 | path: '/vendorCOOP', 185 | name: 'vendorCOOP', 186 | component: () => import('./views/Home.vue') 187 | } 188 | },{ 189 | index:'/belowCostSalesMonitoring', 190 | name: '低价销售', 191 | router: { 192 | path: '/belowCostSalesMonitoring', 193 | name: 'belowCostSalesMonitoring', 194 | component: () => import('./views/Home.vue') 195 | } 196 | }, 197 | ] 198 | },{ 199 | index:'6', 200 | name: '采购管理', 201 | icon: 'icon-caigou1 text-teal-400', 202 | children:[ 203 | { 204 | index:'/vendorPerformance', 205 | name: '供应商绩效', 206 | router: { 207 | path: '/vendorPerformance', 208 | name: 'vendorPerformance', 209 | component: () => import('./views/Home.vue') 210 | } 211 | },{ 212 | index:'/overrideTurnover', 213 | name: '承诺周转', 214 | router: { 215 | path: '/overrideTurnover', 216 | name: 'overrideTurnover', 217 | component: () => import('./views/Home.vue') 218 | } 219 | }, 220 | ] 221 | },{ 222 | index:'7', 223 | name: '调拨管理', 224 | icon: 'icon-pingtai_mokuai text-pink-600', 225 | children:[ 226 | { 227 | index:'/allocationMonitoring', 228 | name: '调拨监控', 229 | router: { 230 | path: '/allocationMonitoring', 231 | name: 'allocationMonitoring', 232 | component: () => import('./views/Home.vue') 233 | } 234 | }, 235 | ] 236 | },{ 237 | index:'8', 238 | name: '订单时效', 239 | icon: 'icon-chengjiaodingdan text-teal-300', 240 | children:[ 241 | { 242 | index:'/c2dDropship', 243 | name: '带安订单妥投时效', 244 | router: { 245 | path: '/c2dDropship', 246 | name: 'c2dDropship', 247 | component: () => import('./views/Home.vue') 248 | } 249 | },{ 250 | index:'/instantFulfillmentDropship', 251 | name: '带安订单及时履约', 252 | router: { 253 | path: '/instantFulfillmentDropship', 254 | name: 'instantFulfillmentDropship', 255 | component: () => import('./views/Home.vue') 256 | } 257 | }, 258 | ] 259 | },{ 260 | index:'9', 261 | name: '非电器业务', 262 | icon: 'icon-zonghetiyanguan text-blue-400', 263 | children:[ 264 | { 265 | index:'/kpiCommercialComplex', 266 | name: '综合指标', 267 | router: { 268 | path: '/kpiCommercialComplex', 269 | name: 'kpiCommercialComplex', 270 | component: () => import('./views/Home.vue') 271 | } 272 | },{ 273 | index:'/salesCommercialComplex', 274 | name: '非电器销售', 275 | router: { 276 | path: '/salesCommercialComplex', 277 | name: 'salesCommercialComplex', 278 | component: () => import('./views/Home.vue') 279 | } 280 | },{ 281 | index:'/customerCounting', 282 | name: '流量分析', 283 | router: { 284 | path: '/customerCounting', 285 | name: 'customerCounting', 286 | component: () => import('./views/Home.vue') 287 | } 288 | },{ 289 | index:'/commodityMovableSale', 290 | name: '商品动销', 291 | router: { 292 | path: '/commodityMovableSale', 293 | name: 'commodityMovableSale', 294 | component: () => import('./views/Home.vue') 295 | } 296 | }, 297 | ] 298 | } 299 | ] 300 | 301 | /** 302 | * 选择菜单导航时触发 303 | * obj.key的值 open打开折叠 | close关闭折叠 | select选中的值 304 | * obj.val为操作当前的值 305 | */ 306 | const handleMenu = (obj) => { 307 | console.log(obj, 3333) 308 | } 309 | 310 | /** 311 | * 菜单样式设置 312 | */ 313 | const cssStyle = { 314 | background: "white", 315 | textCor: "#363f44", 316 | activeCor: "#409eff" 317 | } 318 | 319 | export {menuData, collapseVal, currentIndex, showRouter, handleMenu, cssStyle, stytemName} -------------------------------------------------------------------------------- /src/components/Router/configData.js: -------------------------------------------------------------------------------- 1 | // 示例配置文件 2 | 3 | /** 4 | * collapseVal 5 | * 导航菜单是否折叠 6 | */ 7 | const collapseVal = false 8 | 9 | 10 | /** 11 | * showRouter 12 | * 导航菜单中是否启动路由模式 13 | */ 14 | const showRouter = true 15 | 16 | 17 | /** 18 | * currentIndex 19 | * 当前菜单的默认选项项 20 | * 1. 该值为index的值 21 | * 2. 如配置router时，也可以设置成path的值，为默认显示的页面 22 | */ 23 | const currentIndex = '/home' 24 | 25 | 26 | /** 27 | * menuData 的key描述 28 | * 中的router为可选配项，配置时router时，路由会根据这个配置来生成 29 | * { 30 | index:'1', // 导航索引 31 | name: '销售业2绩', // 导航名称 32 | children:[ // 子导航 33 | index: '2', // 子导航索引 34 | name: '导航名称' // 子导航名称 35 | router:{ // 路由配置 // 子导航路由配置数据 为可选配项 36 | path: '/', // 子导航路由url地址名称 37 | name: 'home', // 子导航路由名称 38 | component: Home // 子导航路由组件 39 | } 40 | ] 41 | } 42 | */ 43 | 44 | const menuData = [ 45 | { 46 | index: '/home', 47 | name: '首页', 48 | icon: 'icon-shouye-cai text-blue-600', 49 | router:{ 50 | path: '/home', 51 | name: 'home', 52 | component: () => import(/* webpackChunkName: "home"'*/ './views/Home.vue') 53 | } 54 | }, 55 | { 56 | index:'1', 57 | name: '销售业绩', 58 | icon: 'icon-zonghezhibiao text-pink-400', 59 | children:[ 60 | { 61 | index:'/scale', 62 | name: '销售实绩', 63 | router: { 64 | path: '/scale', 65 | name: 'scale', 66 | component: () => import(/* webpackChunkName: "home"'*/ './views/Home.vue') 67 | } 68 | }, 69 | { 70 | index:'/salesAnalysis', 71 | name: '销售分析', 72 | router: { 73 | path: '/salesAnalysis', 74 | name: 'salesAnalysis', 75 | component: () => import(/* webpackChunkName: "home"'*/ './views/Home.vue') 76 | } 77 | } 78 | ] 79 | },{ 80 | index:'3', 81 | name: '商品管理', 82 | icon: 'icon-shangpin1 text-purple-400', 83 | children:[ 84 | { 85 | index:'/o2obuyability', 86 | name: '可售状态', 87 | router: { 88 | path: '/o2obuyability', 89 | name: 'o2obuyability', 90 | component: () => import(/* webpackChunkName: "about"'*/ './views/About.vue') 91 | } 92 | },{ 93 | index:'/structureAnalysis', 94 | name: '结构分析', 95 | router: { 96 | path: '/structureAnalysis', 97 | name: 'structureAnalysis', 98 | component: () => import(/* webpackChunkName: "about"'*/ './views/About.vue') 99 | } 100 | },{ 101 | index:'/heroSku', 102 | name: '重点机型', 103 | router: { 104 | path: '/heroSku', 105 | name: 'heroSku', 106 | component: () => import(/* webpackChunkName: "about"'*/ './views/About.vue') 107 | } 108 | } 109 | ] 110 | },{ 111 | index:'4', 112 | name: '库存管理', 113 | icon: 'icon-kucunguanli text-red-400', 114 | children:[ 115 | { 116 | index:'/oosMonitoring', 117 | name: '存销比(含缺断货)', 118 | router: { 119 | path: '/oosMonitoring', 120 | name: 'oosMonitoring', 121 | component: () => import(/* webpackChunkName: "home"'*/ './views/Home.vue') 122 | } 123 | }, 124 | { 125 | index:'/inventoryHealthy', 126 | name: '库龄健康(滞销) ', 127 | router: { 128 | path: '/inventoryHealthy', 129 | name: 'inventoryHealthy', 130 | component: () => import(/* webpackChunkName: "home"'*/ './views/Home.vue') 131 | } 132 | }, 133 | { 134 | index:'/inventoryTurnover', 135 | name: '库存周转', 136 | router: { 137 | path: '/inventoryTurnover', 138 | name: 'inventoryTurnover', 139 | component: () => import(/* webpackChunkName: "home"'*/ './views/Home.vue') 140 | } 141 | }, 142 | { 143 | index:'/oosMonitoringDropship', 144 | name: '带安库存监控 ', 145 | router: { 146 | path: '/oosMonitoringDropship', 147 | name: 'oosMonitoringDropship', 148 | component: () => import(/* webpackChunkName: "home"'*/ './views/Home.vue') 149 | } 150 | }, 151 | { 152 | index:'/undeliveryStock', 153 | name: '已售未提报表', 154 | router: { 155 | path: '/undeliveryStock', 156 | name: 'undeliveryStock', 157 | component: () => import(/* webpackChunkName: "home"'*/ './views/Home.vue') 158 | } 159 | }, 160 | { 161 | index:'/storebuyability', 162 | name: '门店规划有货率', 163 | router: { 164 | path: '/storebuyability', 165 | name: 'storebuyability', 166 | component: () => import(/* webpackChunkName: "home"'*/ './views/Home.vue') 167 | } 168 | } 169 | ] 170 | },{ 171 | index:'5', 172 | name: '财务管理', 173 | icon: 'icon-caiwu text-yellow-500', 174 | children:[ 175 | { 176 | index:'/vendorCOOP', 177 | name: '市调蓝欠收', 178 | router: { 179 | path: '/vendorCOOP', 180 | name: 'vendorCOOP', 181 | component: () => import(/* webpackChunkName: "home"'*/ './views/Home.vue') 182 | } 183 | },{ 184 | index:'/belowCostSalesMonitoring', 185 | name: '低价销售', 186 | router: { 187 | path: '/belowCostSalesMonitoring', 188 | name: 'belowCostSalesMonitoring', 189 | component: () => import(/* webpackChunkName: "home"'*/ './views/Home.vue') 190 | } 191 | }, 192 | ] 193 | },{ 194 | index:'6', 195 | name: '采购管理', 196 | icon: 'icon-caigou1 text-teal-400', 197 | children:[ 198 | { 199 | index:'/vendorPerformance', 200 | name: '供应商绩效', 201 | router: { 202 | path: '/vendorPerformance', 203 | name: 'vendorPerformance', 204 | component: () => import(/* webpackChunkName: "home"'*/ './views/Home.vue') 205 | } 206 | },{ 207 | index:'/overrideTurnover', 208 | name: '承诺周转', 209 | router: { 210 | path: '/overrideTurnover', 211 | name: 'overrideTurnover', 212 | component: () => import(/* webpackChunkName: "home"'*/ './views/Home.vue') 213 | } 214 | }, 215 | ] 216 | },{ 217 | index:'7', 218 | name: '调拨管理', 219 | icon: 'icon-pingtai_mokuai text-pink-600', 220 | children:[ 221 | { 222 | index:'/allocationMonitoring', 223 | name: '调拨监控', 224 | router: { 225 | path: '/allocationMonitoring', 226 | name: 'allocationMonitoring', 227 | component: () => import(/* webpackChunkName: "home"'*/ './views/Home.vue') 228 | } 229 | }, 230 | ] 231 | },{ 232 | index:'8', 233 | name: '订单时效', 234 | icon: 'icon-chengjiaodingdan text-teal-300', 235 | children:[ 236 | { 237 | index:'/c2dDropship', 238 | name: '带安订单妥投时效', 239 | router: { 240 | path: '/c2dDropship', 241 | name: 'c2dDropship', 242 | component: () => import(/* webpackChunkName: "home"'*/ './views/Home.vue') 243 | } 244 | },{ 245 | index:'/instantFulfillmentDropship', 246 | name: '带安订单及时履约', 247 | router: { 248 | path: '/instantFulfillmentDropship', 249 | name: 'instantFulfillmentDropship', 250 | component: () => import(/* webpackChunkName: "home"'*/ './views/Home.vue') 251 | } 252 | }, 253 | ] 254 | },{ 255 | index:'9', 256 | name: '非电器业务', 257 | icon: 'icon-zonghetiyanguan text-blue-400', 258 | children:[ 259 | { 260 | index:'/kpiCommercialComplex', 261 | name: '综合指标', 262 | router: { 263 | path: '/kpiCommercialComplex', 264 | name: 'kpiCommercialComplex', 265 | component: () => import(/* webpackChunkName: "home"'*/ './views/Home.vue') 266 | } 267 | },{ 268 | index:'/salesCommercialComplex', 269 | name: '非电器销售', 270 | router: { 271 | path: '/salesCommercialComplex', 272 | name: 'salesCommercialComplex', 273 | component: () => import(/* webpackChunkName: "home"'*/ './views/Home.vue') 274 | } 275 | },{ 276 | index:'/customerCounting', 277 | name: '流量分析', 278 | router: { 279 | path: '/customerCounting', 280 | name: 'customerCounting', 281 | component: () => import(/* webpackChunkName: "home"'*/ './views/Home.vue') 282 | } 283 | },{ 284 | index:'/commodityMovableSale', 285 | name: '商品动销', 286 | router: { 287 | path: '/commodityMovableSale', 288 | name: 'commodityMovableSale', 289 | component: () => import(/* webpackChunkName: "home"'*/ './views/Home.vue') 290 | } 291 | }, 292 | ] 293 | } 294 | ] 295 | 296 | /** 297 | * 选择菜单导航时触发 298 | * obj.key的值 open打开折叠 | close关闭折叠 | select选中的值 299 | * obj.val为操作当前的值 300 | */ 301 | const handleMenu = (obj) => { 302 | console.log(obj, 3333) 303 | } 304 | 305 | /** 306 | * 菜单样式设置 307 | */ 308 | const cssStyle = { 309 | background: "white", 310 | textCor: "#363f44", 311 | activeCor: "#409eff" 312 | } 313 | 314 | export {menuData, collapseVal, currentIndex, showRouter, handleMenu, cssStyle} -------------------------------------------------------------------------------- /src/reportData/example/charts/index.js: -------------------------------------------------------------------------------- 1 | export default { 2 | query: { 3 | title: '销售分析', 4 | data: { 5 | nmType: 'money', 6 | nmTypeOptions: [{ 7 | value: 'money', 8 | name: '考核销售收入' 9 | },{ 10 | value: 'zhgx', 11 | name: '综合贡献' 12 | },{ 13 | value: 'num', 14 | name: '销售数量' 15 | }] 16 | }, 17 | template: () => import(/* webpackChunkName: "layout"*/ './querySalesAnalysis') 18 | }, 19 | listener(area, newVal,oldVal,row, all){ // area, newVal,oldVal, row, all, $set 20 | // 监控 分析维度的值 21 | if(area == 'bar'){ 22 | if(newVal.nmType != oldVal.nmType){ 23 | 24 | // 同比分析 25 | row.layout[0][0].api.getAnalysisChart(row.layout[0][0], all) 26 | 27 | // 对比分析 28 | let contrastInfo = row.layout[1][0] 29 | contrastInfo.api.getContrastChart(contrastInfo.content.data, all) 30 | 31 | // 明细信息 32 | let tableInfo = all.table 33 | if(tableInfo.content.data.page.currentPage != 1){ 34 | tableInfo.content.data.page.currentPage = 1 35 | }else{ 36 | tableInfo.api.getDetailInfo(tableInfo, all) 37 | } 38 | } 39 | } 40 | }, 41 | layout: [ 42 | 43 | // 同比图形配置 44 | [{ 45 | listener(area, newVal,oldVal, row){ // area, newVal,oldVal, row, allInfo, $set 46 | // 监控 对比分析栏的筛选条件：大区 分部 品类 品牌 型号 47 | if(area == 'bar'){ 48 | if(newVal.moveNum != oldVal.moveNum){ 49 | row.api.concatData(row, newVal.moveNum) 50 | } 51 | } 52 | }, 53 | query: { 54 | title: '同比分析', 55 | fullScreenName: 'tbfx', 56 | subBar: true, 57 | data: { 58 | moveNum: 0 59 | }, 60 | template: () => import(/* webpackChunkName: "layout"*/ './queryAnalysis'), // 查询模板 61 | }, 62 | api: { 63 | // 根据移动值来合并去年|今年的数据 64 | concatData(row, moveNum){ 65 | let configData = row.content.data 66 | let temp = [] 67 | configData.year.map((r,i)=>{ 68 | if(i+moveNum > -1){ 69 | temp.push(Object.assign({},r, configData.lastYear[i+moveNum])) 70 | }else{ 71 | temp.push(Object.assign({},r,{lastDt:'',lastMoney:''})) 72 | } 73 | }) 74 | configData.rows = temp 75 | configData.loading = false 76 | }, 77 | // 获取销售同比图形数据； year|lastYear分开存放，方便移动合并使用 78 | getAnalysisChart(row, all){ 79 | let params = {"extParam":{"groupByWeek":false}} 80 | params.extParam.nmType = all.charts.query.data.nmType 81 | 82 | // 获取其它参数信息 83 | Object.assign(params, all.conditions.api.getParams(all)) 84 | 85 | let configData = row.content.data 86 | configData.year = [] 87 | configData.lastYear = [] 88 | configData.loading = true 89 | window.$ajax.scale.analysisChart(params).then(res=>{ 90 | res.data.map(r=>{ 91 | if(r.y == '今年'){ 92 | configData.year.push({ 93 | dt: r.dt, 94 | money: r.money 95 | }) 96 | }else{ 97 | configData.lastYear.push({ 98 | lastDt: r.dt, 99 | lastMoney: r.money 100 | }) 101 | } 102 | }) 103 | row.api.concatData(row, 0) 104 | }) 105 | } 106 | }, 107 | fetch: { 108 | init(row, all){ // row, all, $set 109 | // 请求同比分析数据 110 | row.api.getAnalysisChart(row, all) 111 | } 112 | }, 113 | style: 'padding-left: 10px; border-bottom:1px solid #f1f1f1;', 114 | content:{ 115 | data: { 116 | year:[], 117 | lastYear:[], 118 | chart: 've-line', 119 | grid:{ 120 | right: 0, 121 | top:35, 122 | bottom: 20, 123 | left:0 124 | }, 125 | chartSettings: { 126 | // dataType: { // 基本的数据格式有 'normal' （千分位）、'KMB' （kmb 格式）、percent （百分比格式） 127 | // '今年': 'percent', 128 | // '去年': 'percent', 129 | // '增长率': 'normal', 130 | // '今年占比': 'normal' 131 | // }, 132 | // axisSite: { // 设置双y轴 133 | // right: ['今年占比', '增长率','当期占比'] 134 | // }, 135 | // yAxisType: ['normal', 'percent'], 136 | // yAxisName: ['金额(元)'], // Y轴名称 137 | // showLine: ['今年占比', '增长率','当期占比'], // 折线展示 138 | dimension:['dt','lastDt'], // 设置双x轴 139 | labelMap: { // 图形显示的指标 140 | money: '今年', 141 | lastMoney: '去年' 142 | }, 143 | // tooltipTrigger:'item', 144 | tooltipTrigger: 'axis' 145 | // axisVisible: false 146 | }, 147 | columns: ['dt', 'money', 'lastMoney'], 148 | rows: [], 149 | loading: true 150 | }, 151 | template: 'Chart',//() => import(/* webpackChunkName: "layout"*/ '@/components/Chart'), // 查询模板 152 | } 153 | }], 154 | 155 | // 对比图形配置 156 | [{ 157 | style: 'padding-left: 10px; padding-top:15px;', 158 | query: { 159 | title: '对比分析', 160 | fullScreenName: 'dbfx', 161 | subBar: true, 162 | data: { 163 | typeValue: 'region_name', 164 | tableDimensionTypeList: [{name:"大区",value:"region_name"},{name:"分部",value:"department_name"},{name:"品类",value:"category_name"}, {name:"品牌",value:"brand_name"}, {name:"型号",value:"sku_name"}] 165 | }, 166 | template: () => import(/* webpackChunkName: "layout"*/ './queryContrast'), // 查询模板 167 | }, 168 | api: { 169 | // 获取销售对比图形数据 170 | getContrastChart(configData, all, eachArr){ 171 | 172 | if (!eachArr){ 173 | eachArr = [{name:'大区'}, { money1:'今年'}, { money2:'去年'}, { money_growth_rate:'增长率'}, { money_accounted:'今年占比'}] 174 | } 175 | 176 | configData.loading = true 177 | 178 | let params = {"extParam":{}} 179 | params.extParam.dimensionType = all.charts.layout[1][0].query.data.typeValue 180 | params.extParam.nmType = all.charts.query.data.nmType 181 | 182 | // 获取其它参数信息 183 | Object.assign(params, all.conditions.api.getParams(all)) 184 | 185 | window.$ajax.scale.contrastChart(params).then(res=>{ 186 | 187 | // 配置图形columns数据 188 | let columns = [] 189 | eachArr.map(r => { 190 | let k = Object.keys(r)[0] 191 | columns.push(r[k]) 192 | }) 193 | configData.columns = columns 194 | 195 | // 配置图形rows数据 196 | let tempArr = [] 197 | res.data.map(r => { 198 | let obj = {} 199 | eachArr.map(row => { 200 | let k = Object.keys(row)[0] 201 | // if(k == 'money_growth_rate' || k == 'money_accounted'){ 202 | // obj[row[k]] = (r[k] * 100).toFixed(2) 203 | // }else{ 204 | obj[row[k]] = r[k] 205 | // } 206 | }) 207 | tempArr.push(obj) 208 | }) 209 | configData.rows = tempArr 210 | configData.loading = false 211 | 212 | }) 213 | } 214 | }, 215 | fetch: { 216 | init(row, all){ // row, all ,$set 217 | // 请求对比分析数据 218 | row.api.getContrastChart(row.content.data, all) 219 | } 220 | }, 221 | content:{ 222 | data: { 223 | chart: 've-histogram', 224 | grid:{ 225 | right: 40, 226 | top:40, 227 | bottom: 45, 228 | left:0 229 | }, 230 | chartSettings: { 231 | // dataType: { // 基本的数据格式有 'normal' （千分位）、'KMB' （kmb 格式）、percent （百分比格式） 232 | // '今年': 'percent', 233 | // '去年': 'percent', 234 | // '增长率': 'normal', 235 | // '今年占比': 'normal' 236 | // }, 237 | axisSite: { // 设置双y轴 238 | right: ['今年占比', '增长率','当期占比'] 239 | }, 240 | yAxisType: ['normal', 'percent'], 241 | yAxisName: ['金额(元)', '占比%'], // Y轴名称 242 | showLine: ['今年占比', '增长率','当期占比'], // 折线展示 243 | }, 244 | chartExtend: { 245 | legend: { 246 | selected: { 247 | '今年' : true, 248 | '去年' : true, 249 | '增长率': true, 250 | '今年占比': false, 251 | '当期占比': true 252 | }, 253 | // data: ['增长率','今年占比'], 254 | // selectedMode: 'multiple' //single 255 | } 256 | }, 257 | columns: [], 258 | rows: [], 259 | loading: true 260 | }, 261 | template: 'Chart'//() => import(/* webpackChunkName: "layout"*/ './template'), // 查询模板 262 | }, 263 | listener(area, newVal,oldVal, row, all){ // area, newVal,oldVal, row, all, $set 264 | let configData = row.content.data; 265 | // 监控 对比分析栏的筛选条件：大区 分部 品类 品牌 型号 266 | if(area == 'bar'){ 267 | if(newVal.typeValue != oldVal.typeValue){ 268 | 269 | 270 | 271 | 272 | // 图形的查询条件为型号时 改变显示的指标信息 273 | let columns = newVal.typeValue == 'sku_name' ? 274 | [{name:'大区'},{ money1:'今年'}, { money_accounted:'当期占比'}] : 275 | [{name:'大区'}, { money1:'今年'}, { money2:'去年'}, { money_growth_rate:'增长率'}, { money_accounted:'今年占比'}]; 276 | 277 | // 图形为分部|品牌|型号时 图形增加缩放功能 278 | if(['department_name', 'brand_name', 'sku_name'].includes(newVal.typeValue)){ 279 | configData.dataZoom = [{ 280 | type: 'slider', 281 | start: 0, 282 | end: 10 283 | }] 284 | }else{ 285 | configData.dataZoom = [] 286 | } 287 | 288 | // 请求对比分析数据 289 | row.api.getContrastChart(configData, all, columns) 290 | 291 | } 292 | } 293 | } 294 | }] 295 | ] 296 | } --------------------------------------------------------------------------------