├── .dockerignore ├── .drone.yml ├── .gitignore ├── Dockerfile ├── LICENSE ├── README.md ├── backend ├── .gitignore ├── README.md ├── api │ └── middleware.js ├── app.js ├── bin │ └── www ├── controllers │ └── api.js ├── default.config.js ├── ecosystem.config.js ├── package.json ├── public │ └── .gitkeep ├── routes │ └── api.js └── views │ ├── error.jade │ ├── index.jade │ └── layout.jade ├── frontend ├── .gitignore ├── README.md ├── babel.config.js ├── deploy.sh ├── package.json ├── public │ ├── default-thumbnail.jpg │ ├── favicon.ico │ └── index.html ├── src │ ├── App.vue │ ├── api │ │ └── index.js │ ├── assets │ │ ├── image │ │ │ ├── app-bg.png │ │ │ ├── chart │ │ │ │ └── chart-base-bar.png │ │ │ ├── color_circle.png │ │ │ ├── geography │ │ │ │ ├── bmap.png │ │ │ │ └── json-map.png │ │ │ ├── logo.png │ │ │ └── transparent-bg.png │ │ └── scss │ │ │ ├── _element.scss │ │ │ ├── _variables.scss │ │ │ ├── animate │ │ │ └── blink-loading.scss │ │ │ ├── common.scss │ │ │ └── mixins │ │ │ ├── _clearfix.scss │ │ │ ├── _list-style.scss │ │ │ └── _scrollbar.scss │ ├── components │ │ ├── base │ │ │ ├── AxisLabel.vue │ │ │ ├── AxisName.vue │ │ │ ├── BorderConfig.vue │ │ │ ├── ChartGrid.vue │ │ │ ├── ChartSplitLine.vue │ │ │ ├── CodeEditor.vue │ │ │ ├── ComponentTitle.vue │ │ │ ├── CoordinateConfig.vue │ │ │ ├── DpColor.vue │ │ │ ├── DpFormItem.vue │ │ │ ├── Icon.vue │ │ │ ├── PercentSlider.vue │ │ │ ├── TextStyle.vue │ │ │ ├── Title.vue │ │ │ ├── Upload.vue │ │ │ └── index.js │ │ └── datapoints │ │ │ ├── charts │ │ │ ├── BaseBarChart │ │ │ │ ├── 1.0.0 │ │ │ │ │ ├── BaseBarChart.vue │ │ │ │ │ ├── BaseBarChartConfig.vue │ │ │ │ │ ├── default.config.js │ │ │ │ │ └── default.data.js │ │ │ │ ├── base-bar-chart.png │ │ │ │ └── index.js │ │ │ ├── BaseLineChart │ │ │ │ ├── 1.0.0 │ │ │ │ │ ├── BaseLineChart.vue │ │ │ │ │ ├── BaseLineChartConfig.vue │ │ │ │ │ ├── default.config.js │ │ │ │ │ └── default.data.js │ │ │ │ ├── base-line-chart.jpg │ │ │ │ └── index.js │ │ │ ├── BasePieChart │ │ │ │ ├── 1.0.0 │ │ │ │ │ ├── BasePieChart.vue │ │ │ │ │ ├── BasePieChartConfig.vue │ │ │ │ │ ├── default.config.js │ │ │ │ │ └── default.data.js │ │ │ │ ├── base-pie-chart.jpg │ │ │ │ └── index.js │ │ │ └── index.js │ │ │ ├── decoration │ │ │ ├── ColorBlock │ │ │ │ ├── 1.0.0 │ │ │ │ │ ├── ColorBlock.vue │ │ │ │ │ ├── ColorBlockConfig.vue │ │ │ │ │ └── default.config.js │ │ │ │ ├── color-block.png │ │ │ │ └── index.js │ │ │ ├── IconFont │ │ │ │ ├── 1.0.0 │ │ │ │ │ ├── IconFont.vue │ │ │ │ │ ├── IconFontConfig.vue │ │ │ │ │ ├── default.config.js │ │ │ │ │ └── fa.js │ │ │ │ ├── index.js │ │ │ │ └── text-icon-font.png │ │ │ └── index.js │ │ │ ├── geography │ │ │ └── index.js │ │ │ ├── index.js │ │ │ ├── interaction │ │ │ └── index.js │ │ │ ├── media │ │ │ ├── SingleImage │ │ │ │ ├── 1.0.0 │ │ │ │ │ ├── SingleImage.vue │ │ │ │ │ ├── SingleImageConfig.vue │ │ │ │ │ ├── default.config.js │ │ │ │ │ └── default.data.js │ │ │ │ ├── index.js │ │ │ │ └── single-image.png │ │ │ └── index.js │ │ │ ├── mixins │ │ │ └── common.js │ │ │ └── text │ │ │ ├── CarouselText │ │ │ ├── 1.0.0 │ │ │ │ ├── CarouselText.vue │ │ │ │ ├── CarouselTextConfig.vue │ │ │ │ ├── default.config.js │ │ │ │ └── default.data.js │ │ │ ├── carousel-text.png │ │ │ └── index.js │ │ │ ├── CommonTitle │ │ │ ├── 1.0.0 │ │ │ │ ├── CommonTitle.vue │ │ │ │ ├── CommonTitleConfig.vue │ │ │ │ └── default.config.js │ │ │ ├── index.js │ │ │ └── text-common-title.png │ │ │ ├── DateTime │ │ │ ├── 1.0.0 │ │ │ │ ├── DateTime.vue │ │ │ │ ├── DateTimeConfig.vue │ │ │ │ └── default.config.js │ │ │ ├── date-time.png │ │ │ └── index.js │ │ │ ├── MultilineText │ │ │ ├── 1.0.0 │ │ │ │ ├── MultilineText.vue │ │ │ │ ├── MultilineTextConfig.vue │ │ │ │ ├── default.config.js │ │ │ │ └── default.data.js │ │ │ ├── index.js │ │ │ └── multiline-text.png │ │ │ ├── NumberCounter │ │ │ ├── 1.0.0 │ │ │ │ ├── NumberCounter.vue │ │ │ │ ├── NumberCounterConfig.vue │ │ │ │ ├── default.config.js │ │ │ │ └── default.data.js │ │ │ ├── index.js │ │ │ └── text-number-counter.png │ │ │ ├── RollingMessage │ │ │ ├── 1.0.0 │ │ │ │ ├── RollingMessage.vue │ │ │ │ ├── RollingMessageConfig.vue │ │ │ │ ├── default.config.js │ │ │ │ └── default.data.js │ │ │ ├── index.js │ │ │ └── rolling-message.png │ │ │ └── index.js │ ├── constants │ │ ├── borderStyle.js │ │ ├── components.js │ │ ├── fontFamily.js │ │ ├── fontStyle.js │ │ ├── fontWeight.js │ │ ├── gradientType.js │ │ ├── scaleType.js │ │ └── textAlign.js │ ├── filter │ │ ├── index.js │ │ └── inlineStyle.js │ ├── layout │ │ ├── ContextMenu.vue │ │ ├── ContextMenuPlugin.js │ │ ├── DataSetting.vue │ │ ├── InteractSetting.vue │ │ ├── PageSetting.vue │ │ ├── TheCenterCanvas.vue │ │ ├── TheFooter.vue │ │ ├── TheLeftSidebar.vue │ │ ├── TheRightSidebar.vue │ │ ├── TheTopHeading.vue │ │ └── TransformTool.vue │ ├── main.js │ ├── store │ │ └── index.js │ └── utils │ │ ├── http.js │ │ └── validator.js └── vue.config.js └── package.json /.dockerignore: -------------------------------------------------------------------------------- 1 | .git 2 | frontend/node_modules 3 | backend/node_modules -------------------------------------------------------------------------------- /.drone.yml: -------------------------------------------------------------------------------- 1 | kind: pipeline 2 | type: exec 3 | name: default 4 | 5 | platform: 6 | os: linux 7 | arch: amd64 8 | 9 | steps: 10 | - name: dp-ci 11 | commands: 12 | - docker image rm data-points || true 13 | - docker build -t data-points . 14 | - docker container stop data-points || true 15 | - docker container rm data-points || true 16 | - docker run --name data-points -p 3001:3000 -v /public/uploads:/public/uploads --restart=always -d data-points 17 | 18 | trigger: 19 | branch: 20 | - master 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | # Data-points backend image 2 | FROM keymetrics/pm2:8-alpine 3 | 4 | MAINTAINER jiangseventeen@gmail.com 5 | 6 | COPY . /src/ 7 | 8 | WORKDIR /src/backend/ 9 | 10 | # build frontend 11 | RUN cd ../frontend \ 12 | && npm i \ 13 | && npm run build \ 14 | && mv ./dist/* ../backend/public \ 15 | && cd .. \ 16 | && rm -rf frontend 17 | 18 | # install dependency of backend 19 | RUN npm i --production 20 | 21 | CMD ["pm2-runtime", "start", "ecosystem.config.js", "--env", "production"] 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Xingwen Jiang 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Data-Points 2 | > 进展：前端整体框架基本完成，可视化组件持续开发中。 3 | 4 | Data-Points 灵感来自于阿里云DataV数据可视化工具，当前的UI以及使用方法也与DataV相似。 5 | 6 | Data-Points的目标是打造成一个集成前后端、可独立部署的开源系统，用以解决可视化大屏需求。项目正在初始阶段，如果你擅长UI、前端（vuejs, 7 | Three.js, D3.js etc.），后端(nodejs, express, mongoDB etc.)，欢迎你的加入。 8 | 9 | 10 | ## 如何贡献 11 | 12 | - UI设计师 or 动效设计 13 | 14 | 您可以操刀设计Data-Points整体UI，或可视化组件UI。如果您参与过可视化大屏项目设计，也可以将您认为比较满意的可视化组件 15 | （图表、列表、翻牌器、地图、3D场景等）提交给我们。如果你对现在的系统风格不太满意，欢迎改进。 16 | 17 | - 前端工程师 18 | 19 | Data-Points 使用Vuejs（为了不同于DataV）开发，如果你擅长`Vue.js`/`Threejs`/`D3.js|echarts`，并对数据可视化感兴趣， 20 | 欢迎加入我们的前端开发队伍。 21 | 22 | - 后端工程师 23 | 24 | Data-Points 后端计划使用`nodejs` + `mongoDB`，如果你对这两者很熟悉，欢迎加入我们的后端开发队伍。 25 | 26 | - 使用者 27 | 28 | 如果你在使用过程是发现任何bug，或对不满于某些操作方式，欢迎issues告诉我们。 29 | 30 | -------------------------------------------------------------------------------- /backend/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /backend/README.md: -------------------------------------------------------------------------------- 1 | # Data-Points 后端服务 2 | -------------------------------------------------------------------------------- /backend/api/middleware.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var multer = require('multer'); 3 | var config = require('../default.config'); 4 | var crypto = require('crypto'); 5 | 6 | // set extend to a upload file 7 | var storage = multer.diskStorage({ 8 | destination: function (req, file, cb) { 9 | cb(null, config.upload.path) 10 | }, 11 | filename: function (req, file, cb) { 12 | var extend = path.extname(file.originalname) 13 | 14 | crypto.pseudoRandomBytes(16, function (err, raw) { 15 | cb(err, err ? undefined : raw.toString('hex') + extend) 16 | }) 17 | } 18 | }) 19 | 20 | exports.upload = multer({ storage }).single('file') -------------------------------------------------------------------------------- /backend/app.js: -------------------------------------------------------------------------------- 1 | var createError = require('http-errors'); 2 | var express = require('express'); 3 | var path = require('path'); 4 | var cookieParser = require('cookie-parser'); 5 | var logger = require('morgan'); 6 | var cors = require('cors'); 7 | var config = require('./default.config'); 8 | 9 | var apiRouter = require('./routes/api'); 10 | 11 | 12 | var app = express(); 13 | 14 | // view engine setup 15 | app.set('views', path.join(__dirname, 'views')); 16 | app.set('view engine', 'jade'); 17 | 18 | app.use(logger('dev')); 19 | app.use(express.json()); 20 | app.use(express.urlencoded({ extended: false })); 21 | app.use(cookieParser()); 22 | app.use(express.static(path.join(__dirname, 'public'))); 23 | app.use(config.upload.publicPath, express.static(config.upload.path)) 24 | 25 | app.use('/api', cors(), apiRouter); 26 | 27 | // catch 404 and forward to error handler 28 | app.use(function(req, res, next) { 29 | next(createError(404)); 30 | }); 31 | 32 | // error handler 33 | app.use(function(err, req, res, next) { 34 | // set locals, only providing error in development 35 | res.locals.message = err.message; 36 | res.locals.error = req.app.get('env') === 'development' ? err : {}; 37 | 38 | // render the error page 39 | res.status(err.status || 500); 40 | res.render('error'); 41 | }); 42 | 43 | module.exports = app; 44 | -------------------------------------------------------------------------------- /backend/bin/www: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | /** 4 | * Module dependencies. 5 | */ 6 | 7 | var app = require('../app'); 8 | var debug = require('debug')('backend:server'); 9 | var http = require('http'); 10 | var config = require('../default.config'); 11 | 12 | /** 13 | * Get port from environment and store in Express. 14 | */ 15 | 16 | var port = normalizePort(config.port || '3000'); 17 | app.set('port', port); 18 | 19 | /** 20 | * Create HTTP server. 21 | */ 22 | 23 | var server = http.createServer(app); 24 | 25 | /** 26 | * Listen on provided port, on all network interfaces. 27 | */ 28 | 29 | server.listen(port); 30 | server.on('error', onError); 31 | server.on('listening', onListening); 32 | 33 | /** 34 | * Normalize a port into a number, string, or false. 35 | */ 36 | 37 | function normalizePort(val) { 38 | var port = parseInt(val, 10); 39 | 40 | if (isNaN(port)) { 41 | // named pipe 42 | return val; 43 | } 44 | 45 | if (port >= 0) { 46 | // port number 47 | return port; 48 | } 49 | 50 | return false; 51 | } 52 | 53 | /** 54 | * Event listener for HTTP server "error" event. 55 | */ 56 | 57 | function onError(error) { 58 | if (error.syscall !== 'listen') { 59 | throw error; 60 | } 61 | 62 | var bind = typeof port === 'string' 63 | ? 'Pipe ' + port 64 | : 'Port ' + port; 65 | 66 | // handle specific listen errors with friendly messages 67 | switch (error.code) { 68 | case 'EACCES': 69 | console.error(bind + ' requires elevated privileges'); 70 | process.exit(1); 71 | break; 72 | case 'EADDRINUSE': 73 | console.error(bind + ' is already in use'); 74 | process.exit(1); 75 | break; 76 | default: 77 | throw error; 78 | } 79 | } 80 | 81 | /** 82 | * Event listener for HTTP server "listening" event. 83 | */ 84 | 85 | function onListening() { 86 | var addr = server.address(); 87 | var bind = typeof addr === 'string' 88 | ? 'pipe ' + addr 89 | : 'port ' + addr.port; 90 | debug('Listening on ' + bind); 91 | } 92 | -------------------------------------------------------------------------------- /backend/controllers/api.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var config = require('../default.config'); 3 | 4 | exports.upload = function (req, res, next) { 5 | var pathname = path.resolve( 6 | config.upload.publicPath, 7 | req.file.filename 8 | ); 9 | // var url = new URL(pathname, config.upload.publicOrigin); 10 | 11 | res.send({ url: pathname }); 12 | } -------------------------------------------------------------------------------- /backend/default.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | 3 | module.exports = { 4 | // 运行端口 5 | port: 3000, 6 | 7 | // 文件上传 8 | upload: { 9 | // 存储路径，确保对具有该路径的访问权限 10 | // docker方式运行时需挂载该路径 11 | path: '/public/uploads/', 12 | // 用于文件访问的域名 13 | // publicOrigin: '', 14 | // 资源前缀 15 | publicPath: '/public/fs', 16 | // 上传文件大小限制，单位 M 17 | fileLimit: '5' 18 | } 19 | } -------------------------------------------------------------------------------- /backend/ecosystem.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | apps: [{ 3 | name: 'dp-backend', 4 | script: 'bin/www', 5 | 6 | // Options reference: https://pm2.io/doc/en/runtime/reference/ecosystem-file/ 7 | instances: 1, 8 | autorestart: true, 9 | watch: false, 10 | max_memory_restart: '512M', 11 | env: { 12 | NODE_ENV: 'development' 13 | }, 14 | env_production: { 15 | NODE_ENV: 'production' 16 | } 17 | }] 18 | }; 19 | -------------------------------------------------------------------------------- /backend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "data-point-backend", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "node ./bin/www" 7 | }, 8 | "dependencies": { 9 | "cookie-parser": "~1.4.3", 10 | "cors": "^2.8.5", 11 | "debug": "~2.6.9", 12 | "express": "~4.16.0", 13 | "http-errors": "~1.6.2", 14 | "jade": "~1.11.0", 15 | "morgan": "~1.9.0", 16 | "multer": "^1.4.2" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /backend/public/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiangseventeen/data-points/efba8dcc39b1343e3f9b1f37a30335f1a89e0853/backend/public/.gitkeep -------------------------------------------------------------------------------- /backend/routes/api.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var api = require('../controllers/api'); 3 | var middleware = require('../api/middleware'); 4 | 5 | var router = express.Router(); 6 | 7 | // upload a file 8 | router.post('/upload', middleware.upload, api.upload) 9 | 10 | module.exports = router; 11 | -------------------------------------------------------------------------------- /backend/views/error.jade: -------------------------------------------------------------------------------- 1 | extends layout 2 | 3 | block content 4 | h1= message 5 | h2= error.status 6 | pre #{error.stack} 7 | -------------------------------------------------------------------------------- /backend/views/index.jade: -------------------------------------------------------------------------------- 1 | extends layout 2 | 3 | block content 4 | h1= title 5 | p Welcome to #{title} 6 | -------------------------------------------------------------------------------- /backend/views/layout.jade: -------------------------------------------------------------------------------- 1 | doctype html 2 | html 3 | head 4 | title= title 5 | link(rel='stylesheet', href='/stylesheets/style.css') 6 | body 7 | block content 8 | -------------------------------------------------------------------------------- /frontend/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /frontend/README.md: -------------------------------------------------------------------------------- 1 | # Data-Points 前端项目 2 | 3 | Project is loading... 4 | 5 | ## 启动 6 | 7 | clone 仓库 8 | 9 | ```bash 10 | $ git clone https://github.com/jiangseventeen/data-points.git 11 | $ cd frontend 12 | ``` 13 | 14 | 使用`npm`安装依赖包 15 | ```bash 16 | $ npm install 17 | ``` 18 | or 19 | 20 | 使用cnpm安装，npm和cnpm两种方式二选一 21 | ```bash 22 | $ npm install -g cnpm --registry=https://registry.npm.taobao.org 23 | $ cnpm install 24 | ``` 25 | 26 | 27 | 启动项目 28 | ```bash 29 | $ npm run serve 30 | ``` 31 | 浏览器打开 [http://localhost:8080](http://localhost:8080) 32 | 33 | ## todo 34 | 35 | ### 操作类 36 | - [ ] 图层分组功能 37 | - [ ] 图层（多选|分组）后的放置操作 38 | - [ ] 图层锁定 39 | - [ ] 参考线 40 | - [ ] 标尺 41 | - [ ] 大屏预览页|展示页 42 | - [ ] 画布鹰眼 43 | 44 | ### 组件类 45 | - [ ] 图表-散点图 46 | - [ ] 图表-雷达图 47 | - [ ] 图表-复合图表 48 | - [ ] 地理-GeoJSON地图 49 | - [ ] 地理-web地图 50 | - [ ] 地理-三维地球 51 | - [ ] 地理-区域热点图 52 | - [ ] 媒体-音频播放 53 | - [ ] 媒体-视频播放 54 | - [ ] 文本-滚动列表 55 | - [ ] 文本-表格 56 | - [ ] 装饰-嵌入页 57 | - [ ] 交互-画布切换 58 | - [ ] 交互-滚动Tab页 59 | - [ ] 交互-时间轴 60 | - [ ] 交互-进度条 61 | 62 | ### UI类 63 | - [ ] 统一页面UI风格 64 | - [ ] 统一配置表单UI风格 65 | 66 | ## doing 67 | - [ ] 装饰-边框 68 | - [ ] 媒体-轮播 69 | 70 | ## done 71 | - [x] ~~画布配置操作~~ 72 | - [x] ~~单个组件缩放|拖拽放置操作~~ 73 | - [x] ~~组件按照最小栅格距离移动操作~~ 74 | - [x] ~~通用标题组件bata~~ 75 | - [x] ~~组件图层拖拽排序~~ 76 | - [x] ~~组件按版本加载~~ 77 | - [x] ~~装饰-字体图标~~ 78 | - [x] ~~组件图层排序功能（包括拖拽排序、点击排序、置顶置底、上移下移等）~~ 79 | - [x] ~~鼠标右键快捷菜单操作~~ 80 | - [x] ~~拖拽辅助线~~ 81 | - [x] ~~文本-通用标题~~ 82 | - [x] ~~文本-段落~~ 83 | - [x] ~~文本-计数器|翻牌器~~ 84 | - [x] ~~文本-消息轮播~~ 85 | - [x] ~~文本-日期|时间~~ 86 | - [x] ~~图表-基本柱状图~~ 87 | - [x] ~~组件菜单拖拽添加至画布~~ 88 | - [x] ~~媒体-图片~~ 89 | - [x] ~~组件数据项配置~~ 90 | - [x] ~~装饰-背景块~~ 91 | - [x] ~~图表-基本折线图~~ 92 | - [x] ~~图表-饼图|环比图~~ -------------------------------------------------------------------------------- /frontend/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /frontend/deploy.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | # 当发生错误时中止脚本 4 | set -e 5 | 6 | npm run build 7 | cd dist 8 | 9 | git init 10 | git add -A 11 | git commit -m 'deploy' 12 | 13 | git push -f git@github.com:/jiangseventeen/data-points.git master:gh-pages 14 | 15 | cd - -------------------------------------------------------------------------------- /frontend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "frontend", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint", 9 | "deploy": "./deploy.sh" 10 | }, 11 | "dependencies": { 12 | "@tweenjs/tween.js": "^17.4.0", 13 | "axios": "^0.19.0", 14 | "core-js": "^2.6.5", 15 | "countup.js": "^2.0.4", 16 | "echarts": "^4.2.1", 17 | "element-ui": "^2.9.1", 18 | "font-awesome": "^4.7.0", 19 | "jsonschema": "^1.2.4", 20 | "lodash": "^4.17.11", 21 | "monaco-editor": "^0.19.0", 22 | "vue": "^2.6.10", 23 | "vue-color": "^2.7.0", 24 | "vuex": "^3.1.1" 25 | }, 26 | "devDependencies": { 27 | "@vue/cli-plugin-babel": "^3.7.0", 28 | "@vue/cli-plugin-eslint": "^3.7.0", 29 | "@vue/cli-service": "^3.7.0", 30 | "babel-eslint": "^10.0.1", 31 | "eslint": "^5.16.0", 32 | "eslint-plugin-vue": "^5.0.0", 33 | "html-webpack-plugin": "^3.2.0", 34 | "monaco-editor-webpack-plugin": "^1.7.0", 35 | "node-sass": "^4.12.0", 36 | "sass-loader": "^7.1.0", 37 | "vue-template-compiler": "^2.5.21" 38 | }, 39 | "eslintConfig": { 40 | "root": true, 41 | "env": { 42 | "node": true 43 | }, 44 | "extends": [ 45 | "plugin:vue/essential", 46 | "eslint:recommended" 47 | ], 48 | "rules": {}, 49 | "parserOptions": { 50 | "parser": "babel-eslint" 51 | } 52 | }, 53 | "postcss": { 54 | "plugins": { 55 | "autoprefixer": {} 56 | } 57 | }, 58 | "browserslist": [ 59 | "> 1%", 60 | "last 2 versions" 61 | ] 62 | } 63 | -------------------------------------------------------------------------------- /frontend/public/default-thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiangseventeen/data-points/efba8dcc39b1343e3f9b1f37a30335f1a89e0853/frontend/public/default-thumbnail.jpg -------------------------------------------------------------------------------- /frontend/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiangseventeen/data-points/efba8dcc39b1343e3f9b1f37a30335f1a89e0853/frontend/public/favicon.ico -------------------------------------------------------------------------------- /frontend/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Data-Points 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /frontend/src/App.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 29 | 30 | 48 | -------------------------------------------------------------------------------- /frontend/src/api/index.js: -------------------------------------------------------------------------------- 1 | export const uploadAction = '/api/upload'; -------------------------------------------------------------------------------- /frontend/src/assets/image/app-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiangseventeen/data-points/efba8dcc39b1343e3f9b1f37a30335f1a89e0853/frontend/src/assets/image/app-bg.png -------------------------------------------------------------------------------- /frontend/src/assets/image/chart/chart-base-bar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiangseventeen/data-points/efba8dcc39b1343e3f9b1f37a30335f1a89e0853/frontend/src/assets/image/chart/chart-base-bar.png -------------------------------------------------------------------------------- /frontend/src/assets/image/color_circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiangseventeen/data-points/efba8dcc39b1343e3f9b1f37a30335f1a89e0853/frontend/src/assets/image/color_circle.png -------------------------------------------------------------------------------- /frontend/src/assets/image/geography/bmap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiangseventeen/data-points/efba8dcc39b1343e3f9b1f37a30335f1a89e0853/frontend/src/assets/image/geography/bmap.png -------------------------------------------------------------------------------- /frontend/src/assets/image/geography/json-map.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiangseventeen/data-points/efba8dcc39b1343e3f9b1f37a30335f1a89e0853/frontend/src/assets/image/geography/json-map.png -------------------------------------------------------------------------------- /frontend/src/assets/image/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiangseventeen/data-points/efba8dcc39b1343e3f9b1f37a30335f1a89e0853/frontend/src/assets/image/logo.png -------------------------------------------------------------------------------- /frontend/src/assets/image/transparent-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiangseventeen/data-points/efba8dcc39b1343e3f9b1f37a30335f1a89e0853/frontend/src/assets/image/transparent-bg.png -------------------------------------------------------------------------------- /frontend/src/assets/scss/_element.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * 覆盖element-ui scss 变量 3 | */ 4 | @import "./variables"; 5 | 6 | 7 | /* Color 8 | -------------------------- */ 9 | $--color-white: $primary-background-color !default; 10 | $--color-primary: $primary-highlight !default; 11 | $--border-color-base: #282f3a !default; 12 | $--color-text-regular: $primary-color !default; 13 | $--background-color-base: $second-background-color !default; 14 | $--border-color-light: #282f3a !default; 15 | 16 | // select 17 | $--select-border-color-hover: $primary-highlight !default; 18 | $--select-option-hover-background: #30353a !default; 19 | $--select-dropdown-border: solid 1px $primary-highlight !default; 20 | 21 | // collapse 22 | $--collapse-content-background-color: $second-background-color !default; 23 | $--collapse-header-height: 40px !default; 24 | 25 | // popover 26 | $--popover-border-color: $primary-highlight !default; 27 | 28 | $--color-text-primary: #bcc9d4 !default; 29 | $--border-color-lighter: #2f3534 !default; 30 | 31 | // tooltip 32 | $--tooltip-border-color: #000 !default; 33 | $--tooltip-color: #fff !default; 34 | $--tooltip-fill: transparentize($primary-highlight, 0.2) !default; 35 | 36 | // border 37 | $--border-radius-base: 2px !default; 38 | 39 | $--font-path: '~element-ui/lib/theme-chalk/fonts'; 40 | 41 | // input 42 | $--input-hover-border: $primary-highlight !default; 43 | 44 | // radio 45 | $--radio-font-size: 12px !default; 46 | $--radio-font-weight: 300 !default; 47 | $--radio-checked-icon-color: #000; 48 | $--radio-input-border: 2px solid $primary-color !default; 49 | 50 | // button 51 | $--button-primary-font-color: #fff; 52 | $--button-primary-background-color: transparent; 53 | 54 | // slider 55 | // $--slider-runway-background-color: #E4E7ED !default; 56 | 57 | // tabs 58 | $--tab-font-size: 12px !default; 59 | 60 | @import "~element-ui/packages/theme-chalk/src/index"; -------------------------------------------------------------------------------- /frontend/src/assets/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | // the forecolor and backgroundcolor. 2 | $primary-color: rgb(188, 201, 212); 3 | $primary-background-color: #212427; 4 | $second-background-color: #15171a; 5 | $primary-text-color: $primary-color; 6 | $primary-highlight: #00e5ff; 7 | 8 | // color | success 9 | $--color-success: #67C23A; 10 | // color | warning 11 | $--color-warning: #E6A23C; 12 | // color | danger 13 | $--color-danger: #F56C6C; 14 | // color | info 15 | $--color-info: #909399; 16 | 17 | // layout 18 | $top-heading-background: $primary-background-color; 19 | $left-sidebar-background: $primary-background-color; 20 | $right-sidebar-background: $primary-background-color; 21 | $bottom-footer-background: $primary-background-color; 22 | 23 | $top-heading-height: 45px; 24 | $left-sidebar-width: 180px; 25 | $right-sidebar-width: 340px; 26 | $bottom-footer-height: 40px; 27 | 28 | 29 | -------------------------------------------------------------------------------- /frontend/src/assets/scss/animate/blink-loading.scss: -------------------------------------------------------------------------------- 1 | @keyframes blink-loading{ 2 | 0% { 3 | background-color: rgba(35, 218, 183, 1); 4 | box-shadow: 5 | 12px 0px 0px 0px rgba(35, 218, 183,0.2), 6 | 24px 0px 0px 0px rgba(35, 218, 183,0.2); 7 | } 8 | 50% { 9 | background-color: rgba(35, 218, 183, 0.4); 10 | box-shadow: 11 | 12px 0px 0px 0px rgba(35, 218, 183, 2), 12 | 24px 0px 0px 0px rgba(35, 218, 183, 0.2); 13 | } 14 | 100% { 15 | background-color: rgba(35, 218, 183, 0.4); 16 | box-shadow: 17 | 12px 0px 0px 0px rgba(35, 218, 183, 0.2), 18 | 24px 0px 0px 0px rgba(35, 218, 183, 1); 19 | } 20 | } -------------------------------------------------------------------------------- /frontend/src/assets/scss/common.scss: -------------------------------------------------------------------------------- 1 | @import './variables.scss'; 2 | 3 | a { 4 | color: $primary-highlight; 5 | } 6 | 7 | /* components base style in canvas */ 8 | .dp-component { 9 | position: absolute; 10 | top: 50%; 11 | left: 50%; 12 | color: #fff; 13 | cursor: move; 14 | display: block; 15 | overflow: hidden; 16 | box-sizing: border-box; 17 | } 18 | .dp-component.hover:after { 19 | content: ''; 20 | display: block; 21 | position: absolute; 22 | left: 0; 23 | right: 0; 24 | top: 0; 25 | bottom: 0; 26 | background-color: rgba(0,192,222,.2); 27 | border: 1px solid $primary-highlight; 28 | } 29 | .dp-charts-container { 30 | width: 100%; 31 | height: 100%; 32 | } 33 | 34 | 35 | // overide for element-ui 36 | .el-radio__inner:after { 37 | background-color: $primary-highlight !important; 38 | } 39 | .el-tabs__item { 40 | font-size: 12px !important; 41 | height: 35px !important; 42 | line-height: 35px !important; 43 | } 44 | .el-collapse-item__header { 45 | padding-left: 16px; 46 | } 47 | .el-collapse-item__content { 48 | padding: 12px 16px !important; 49 | } 50 | 51 | 52 | // dp-form 53 | .dp-form-item { 54 | margin: 0; 55 | padding: 0; 56 | color: $primary-color; 57 | font-size: 12px; 58 | font-weight: 300; 59 | line-height: 1.5; 60 | box-sizing: border-box; 61 | margin-bottom: 12px; 62 | } 63 | 64 | .dp-form-horizontal { 65 | .dp-form-label { 66 | float: left; 67 | width: 60px; 68 | margin-top: 5px; 69 | } 70 | 71 | .dp-form-control { 72 | margin-left: 60px; 73 | } 74 | } 75 | 76 | 77 | .dp-form-inline { 78 | .dp-form-control { 79 | display: inline-block; 80 | } 81 | 82 | .dp-form-label { 83 | @extend .dp-form-control; 84 | margin-right: 8px; 85 | } 86 | } 87 | 88 | .dp-form-vertical { 89 | .dp-form-label { 90 | display: block; 91 | text-align: left; 92 | margin-bottom: 4px; 93 | } 94 | 95 | .dp-form-control { 96 | display: block; 97 | } 98 | } 99 | -------------------------------------------------------------------------------- /frontend/src/assets/scss/mixins/_clearfix.scss: -------------------------------------------------------------------------------- 1 | @mixin clearfix() { 2 | &::after { 3 | display: block; 4 | clear: both; 5 | content: ""; 6 | } 7 | } -------------------------------------------------------------------------------- /frontend/src/assets/scss/mixins/_list-style.scss: -------------------------------------------------------------------------------- 1 | @mixin list-style($direaction) { 2 | @if $direaction { float: $direaction }; 3 | list-style: none; 4 | text-align: center; 5 | cursor: pointer; 6 | } -------------------------------------------------------------------------------- /frontend/src/assets/scss/mixins/_scrollbar.scss: -------------------------------------------------------------------------------- 1 | /* webkit scrollbar style */ 2 | ::-webkit-scrollbar{ 3 | background:tranparent 4 | } 5 | ::-webkit-scrollbar-thumb { 6 | background: #666; 7 | border-radius: 4px; 8 | } 9 | ::-webkit-scrollbar { 10 | display: block; 11 | width: 6px; 12 | height: 6px; 13 | } -------------------------------------------------------------------------------- /frontend/src/components/base/AxisLabel.vue: -------------------------------------------------------------------------------- 1 | 2 | 42 | 43 | 49 | 50 | -------------------------------------------------------------------------------- /frontend/src/components/base/AxisName.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 23 | 24 | 30 | 31 | -------------------------------------------------------------------------------- /frontend/src/components/base/BorderConfig.vue: -------------------------------------------------------------------------------- 1 | 63 | 64 | 77 | 78 | -------------------------------------------------------------------------------- /frontend/src/components/base/ChartGrid.vue: -------------------------------------------------------------------------------- 1 | 2 | 50 | 51 | 58 | 59 | -------------------------------------------------------------------------------- /frontend/src/components/base/ChartSplitLine.vue: -------------------------------------------------------------------------------- 1 | 2 | 28 | 29 | 35 | 36 | -------------------------------------------------------------------------------- /frontend/src/components/base/CodeEditor.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 58 | 59 | -------------------------------------------------------------------------------- /frontend/src/components/base/ComponentTitle.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 22 | 23 | -------------------------------------------------------------------------------- /frontend/src/components/base/CoordinateConfig.vue: -------------------------------------------------------------------------------- 1 | 56 | 57 | -------------------------------------------------------------------------------- /frontend/src/components/base/DpColor.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 43 | 44 | -------------------------------------------------------------------------------- /frontend/src/components/base/DpFormItem.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/components/base/Icon.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 11 | 12 | -------------------------------------------------------------------------------- /frontend/src/components/base/Title.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /frontend/src/components/base/Upload.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 45 | 46 | -------------------------------------------------------------------------------- /frontend/src/components/base/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 统一注册全局组件 3 | */ 4 | 5 | import Vue from 'vue' 6 | import Icon from './Icon' 7 | import DpColor from './DpColor' 8 | import AxisName from './AxisName' 9 | import ChartGrid from './ChartGrid' 10 | import AxisLabel from './AxisLabel' 11 | import TextStyle from './TextStyle' 12 | import DpFormItem from './DpFormItem' 13 | import BorderConfig from './BorderConfig' 14 | import PercentSlider from './PercentSlider' 15 | import ChartSplitLine from './ChartSplitLine' 16 | import ComponentTitle from './ComponentTitle' 17 | import CoordinateConfig from './CoordinateConfig' 18 | 19 | Vue.component('Icon', Icon) 20 | Vue.component('DpColor', DpColor) 21 | Vue.component('AxisName', AxisName) 22 | Vue.component('ChartGrid', ChartGrid) 23 | Vue.component('AxisLabel', AxisLabel) 24 | Vue.component('TextStyle', TextStyle) 25 | Vue.component('DpFormItem', DpFormItem) 26 | Vue.component('BorderConfig', BorderConfig) 27 | Vue.component('PercentSlider', PercentSlider) 28 | Vue.component('ChartSplitLine', ChartSplitLine) 29 | Vue.component('ComponentTitle', ComponentTitle) 30 | Vue.component('CoordinateConfig', CoordinateConfig) -------------------------------------------------------------------------------- /frontend/src/components/datapoints/charts/BaseBarChart/1.0.0/BaseBarChart.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 38 | 39 | -------------------------------------------------------------------------------- /frontend/src/components/datapoints/charts/BaseBarChart/1.0.0/BaseBarChartConfig.vue: -------------------------------------------------------------------------------- 1 | 118 | 119 | -------------------------------------------------------------------------------- /frontend/src/components/datapoints/charts/BaseBarChart/1.0.0/default.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | chartOption: { 3 | color: ['#00e1ff'], 4 | backgroundColor: '#f0f0f600', 5 | grid: { 6 | top: 30, 7 | right: 10, 8 | bottom: 25, 9 | left: 20 10 | }, 11 | xAxis: { 12 | boundaryGap: true, 13 | type: 'category', 14 | axisLabel: { 15 | show: true, 16 | color: '#f0f0f6', 17 | fontSize: 12, 18 | rotate: 0, 19 | interval: 0 20 | }, 21 | splitLine: { 22 | show: false, 23 | }, 24 | axisLine: { 25 | show: true, 26 | lineStyle: { 27 | color: '#f0f0f6', 28 | fontSize: 12, 29 | rotate: 0, 30 | } 31 | }, 32 | }, 33 | yAxis: { 34 | name: '', 35 | nameLocation: 'end', 36 | // nameGap: 35, 37 | axisLine: { 38 | show: false, 39 | lineStyle: { 40 | color: '#f0f0f6', 41 | } 42 | }, 43 | axisLabel: { 44 | show: false 45 | }, 46 | axisTick: { 47 | show: false 48 | }, 49 | splitLine: { 50 | show: false, 51 | lineStyle: { 52 | color: '#f0f0f6', 53 | type: 'dashed' 54 | } 55 | }, 56 | }, 57 | series: [{ 58 | name: '销量', 59 | type: 'bar', 60 | barWidth: '50%', 61 | }] 62 | }, 63 | width: 400, 64 | height: 300, 65 | left: 500, 66 | top: 500 67 | } -------------------------------------------------------------------------------- /frontend/src/components/datapoints/charts/BaseBarChart/1.0.0/default.data.js: -------------------------------------------------------------------------------- 1 | export default { 2 | type: 'static', 3 | staticData: [ 4 | { name: 'A', value: 5 }, 5 | { name: 'B', value: 20 }, 6 | { name: 'C', value: 36 }, 7 | { name: 'D', value: 10 }, 8 | { name: 'E', value: 26 }, 9 | { name: 'F', value: 20 }, 10 | ], 11 | schema: {}, 12 | uri: '', 13 | } -------------------------------------------------------------------------------- /frontend/src/components/datapoints/charts/BaseBarChart/base-bar-chart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiangseventeen/data-points/efba8dcc39b1343e3f9b1f37a30335f1a89e0853/frontend/src/components/datapoints/charts/BaseBarChart/base-bar-chart.png -------------------------------------------------------------------------------- /frontend/src/components/datapoints/charts/BaseBarChart/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 可视化组件--基础柱状图 3 | * @version 1.0.0 4 | * @id 001xxx :: 001001 5 | */ 6 | 7 | const version = '1.0.0' 8 | 9 | import img_base_bar_chart from './base-bar-chart.png' 10 | import defaultConfig from './1.0.0/default.config' 11 | import defaultData from './1.0.0/default.data' 12 | 13 | export default { 14 | id: '001001', 15 | version, 16 | title: '基础柱图', 17 | name: 'BaseBarChart', 18 | thumbnail: img_base_bar_chart, 19 | enabled: true, 20 | config: defaultConfig, 21 | data: defaultData, 22 | interaction: null 23 | } -------------------------------------------------------------------------------- /frontend/src/components/datapoints/charts/BaseLineChart/1.0.0/BaseLineChart.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 40 | 41 | -------------------------------------------------------------------------------- /frontend/src/components/datapoints/charts/BaseLineChart/1.0.0/BaseLineChartConfig.vue: -------------------------------------------------------------------------------- 1 | 118 | 119 | -------------------------------------------------------------------------------- /frontend/src/components/datapoints/charts/BaseLineChart/1.0.0/default.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | chartOption: { 3 | color: ['#00e1ff'], 4 | backgroundColor: '#f0f0f600', 5 | grid: { 6 | top: 30, 7 | right: 10, 8 | bottom: 25, 9 | left: 20 10 | }, 11 | xAxis: { 12 | boundaryGap: false, 13 | type: 'category', 14 | axisLabel: { 15 | show: true, 16 | color: '#f0f0f6', 17 | fontSize: 12, 18 | rotate: 0, 19 | interval: 0 20 | }, 21 | splitLine: { 22 | show: false, 23 | }, 24 | axisLine: { 25 | show: true, 26 | lineStyle: { 27 | color: '#f0f0f6', 28 | fontSize: 12, 29 | rotate: 0, 30 | } 31 | }, 32 | }, 33 | yAxis: { 34 | name: '', 35 | nameLocation: 'end', 36 | // nameGap: 35, 37 | axisLine: { 38 | show: true, 39 | lineStyle: { 40 | color: '#f0f0f6', 41 | } 42 | }, 43 | axisLabel: { 44 | show: false 45 | }, 46 | axisTick: { 47 | show: false 48 | }, 49 | splitLine: { 50 | show: false, 51 | lineStyle: { 52 | color: '#f0f0f6', 53 | type: 'dashed' 54 | } 55 | }, 56 | }, 57 | series: [] 58 | }, 59 | width: 400, 60 | height: 300, 61 | left: 500, 62 | top: 500 63 | } -------------------------------------------------------------------------------- /frontend/src/components/datapoints/charts/BaseLineChart/1.0.0/default.data.js: -------------------------------------------------------------------------------- 1 | export default { 2 | type: 'static', 3 | staticData: [ 4 | { 5 | name: '2018上半年', 6 | data: [ 7 | {name: '1月', value: '380'}, 8 | {name: '2月', value: '420'}, 9 | {name: '3月', value: '350'}, 10 | {name: '4月', value: '510'}, 11 | {name: '5月', value: '550'}, 12 | {name: '6月', value: '500'}, 13 | ] 14 | }, 15 | { 16 | name: '2019上半年', 17 | data: [ 18 | {name: '1月', value: '220'}, 19 | {name: '2月', value: '400'}, 20 | {name: '3月', value: '550'}, 21 | {name: '4月', value: '675'}, 22 | {name: '5月', value: '620'}, 23 | {name: '6月', value: '710'}, 24 | ] 25 | } 26 | ], 27 | schema: {}, 28 | uri: '', 29 | } -------------------------------------------------------------------------------- /frontend/src/components/datapoints/charts/BaseLineChart/base-line-chart.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiangseventeen/data-points/efba8dcc39b1343e3f9b1f37a30335f1a89e0853/frontend/src/components/datapoints/charts/BaseLineChart/base-line-chart.jpg -------------------------------------------------------------------------------- /frontend/src/components/datapoints/charts/BaseLineChart/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 可视化组件--基础折线图 3 | * @version 1.0.0 4 | * @id 001xxx :: 001021 5 | */ 6 | 7 | const version = '1.0.0' 8 | 9 | import img_base_line_chart from './base-line-chart.jpg' 10 | import defaultConfig from './1.0.0/default.config' 11 | import defaultData from './1.0.0/default.data' 12 | 13 | export default { 14 | id: '001021', 15 | version, 16 | title: '基础折线图', 17 | name: 'BaseLineChart', 18 | thumbnail: img_base_line_chart, 19 | enabled: true, 20 | config: defaultConfig, 21 | data: defaultData, 22 | interaction: null 23 | } -------------------------------------------------------------------------------- /frontend/src/components/datapoints/charts/BasePieChart/1.0.0/BasePieChart.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 59 | 60 | -------------------------------------------------------------------------------- /frontend/src/components/datapoints/charts/BasePieChart/1.0.0/BasePieChartConfig.vue: -------------------------------------------------------------------------------- 1 | 89 | 90 | 118 | 119 | -------------------------------------------------------------------------------- /frontend/src/components/datapoints/charts/BasePieChart/1.0.0/default.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | chartOption: { 3 | tooltip: {}, 4 | legend: { 5 | show: true, 6 | position: '10', 7 | textStyle: { 8 | color: '#fff', 9 | fontWeight: 'normal', 10 | fontSize: 12 11 | }, 12 | }, 13 | color: ['#FFFFFF', '#67e2fb', '#51b2f9', '#2D9284'], 14 | series: [{ 15 | type: 'pie', 16 | radius: ['50%', '60%'], 17 | data: [] 18 | }] 19 | }, 20 | width: 400, 21 | height: 300, 22 | left: 500, 23 | top: 500 24 | } -------------------------------------------------------------------------------- /frontend/src/components/datapoints/charts/BasePieChart/1.0.0/default.data.js: -------------------------------------------------------------------------------- 1 | export default { 2 | type: 'static', 3 | staticData: [ 4 | {name: '1月', value: '380'}, 5 | {name: '2月', value: '420'}, 6 | {name: '3月', value: '350'}, 7 | {name: '4月', value: '510'} 8 | ], 9 | schema: {}, 10 | uri: '', 11 | } -------------------------------------------------------------------------------- /frontend/src/components/datapoints/charts/BasePieChart/base-pie-chart.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiangseventeen/data-points/efba8dcc39b1343e3f9b1f37a30335f1a89e0853/frontend/src/components/datapoints/charts/BasePieChart/base-pie-chart.jpg -------------------------------------------------------------------------------- /frontend/src/components/datapoints/charts/BasePieChart/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 可视化图表--基础饼图 3 | * @version 1.0.0 4 | * @id 001xxx :: 001031 5 | */ 6 | 7 | const version = '1.0.0' 8 | 9 | import img_base_pie_chart from './base-pie-chart.jpg' 10 | import defaultConfig from './1.0.0/default.config' 11 | import defaultData from './1.0.0/default.data' 12 | 13 | export default { 14 | id: '001031', 15 | version, 16 | title: '基础饼图', 17 | name: 'BasePieChart', 18 | thumbnail: img_base_pie_chart, 19 | enabled: true, 20 | config: defaultConfig, 21 | data: defaultData, 22 | interaction: null 23 | } -------------------------------------------------------------------------------- /frontend/src/components/datapoints/charts/index.js: -------------------------------------------------------------------------------- 1 | import BaseBarChart from './BaseBarChart' 2 | import BaseLineChart from './BaseLineChart' 3 | import BasePieChart from './BasePieChart' 4 | 5 | export default [ 6 | BaseBarChart, 7 | BaseLineChart, 8 | BasePieChart 9 | ] -------------------------------------------------------------------------------- /frontend/src/components/datapoints/decoration/ColorBlock/1.0.0/ColorBlock.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /frontend/src/components/datapoints/decoration/ColorBlock/1.0.0/ColorBlockConfig.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | -------------------------------------------------------------------------------- /frontend/src/components/datapoints/decoration/ColorBlock/1.0.0/default.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | backgroundColor: '#67e2fb043', 3 | borderColor: '#FFFFFF00', 4 | borderWidth: 0, 5 | borderRadius: 0, 6 | borderStyle: 'solid', 7 | width: 400, 8 | height: 300, 9 | left: 500, 10 | top: 500, 11 | } -------------------------------------------------------------------------------- /frontend/src/components/datapoints/decoration/ColorBlock/color-block.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiangseventeen/data-points/efba8dcc39b1343e3f9b1f37a30335f1a89e0853/frontend/src/components/datapoints/decoration/ColorBlock/color-block.png -------------------------------------------------------------------------------- /frontend/src/components/datapoints/decoration/ColorBlock/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 可视化控件--背景色块 3 | * @version 1.0.0 4 | */ 5 | 6 | const version = '1.0.0' 7 | 8 | import img_color_block from './color-block.png' 9 | import defaultConfig from './1.0.0/default.config' 10 | 11 | export default { 12 | id: '004002', 13 | title: '背景色块', 14 | version, 15 | name: 'ColorBlock', 16 | thumbnail: img_color_block, 17 | enabled: true, 18 | config: defaultConfig, 19 | data: null, 20 | interaction: null 21 | } -------------------------------------------------------------------------------- /frontend/src/components/datapoints/decoration/IconFont/1.0.0/IconFont.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 28 | 29 | -------------------------------------------------------------------------------- /frontend/src/components/datapoints/decoration/IconFont/1.0.0/IconFontConfig.vue: -------------------------------------------------------------------------------- 1 | 96 | 119 | -------------------------------------------------------------------------------- /frontend/src/components/datapoints/decoration/IconFont/1.0.0/default.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 字体图标组件的初始配置项。 3 | */ 4 | export default { 5 | color: '#ffffff', 6 | fontSize: 40, 7 | icon: 'fa fa-commenting', 8 | width: 120, 9 | height: 100, 10 | left: 500, 11 | top: 500 12 | } -------------------------------------------------------------------------------- /frontend/src/components/datapoints/decoration/IconFont/1.0.0/fa.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { classify: 'App', icons: ['address-book', 'address-book-o', 'address-card', 'address-card-o', 'adjust', 'american-sign-language-interpreting', 'anchor', 'archive', 'area-chart', 'arrows', 'arrows-h', 'arrows-v', 'asl-interpreting', 'assistive-listening-systems', 'asterisk', 'at', 'audio-description', 'automobile', 'balance-scale', 'ban', 'bank', 'bar-chart', 'bar-chart-o', 'barcode', 'bars', 'bath', 'bathtub', 'battery', 'battery-0', 'battery-1', 'battery-2', 'battery-3', 'battery-4', 'battery-empty', 'battery-full', 'battery-half', 'battery-quarter', 'battery-three-quarters', 'bed', 'beer', 'bell', 'bell-o', 'bell-slash', 'bell-slash-o', 'bicycle', 'binoculars', 'birthday-cake', 'blind', 'bluetooth', 'bluetooth-b', 'bolt', 'bomb', 'book', 'bookmark', 'bookmark-o', 'braille', 'briefcase', 'bug', 'building', 'building-o', 'bullhorn', 'bullseye', 'bus', 'cab', 'calculator', 'calendar', 'calendar-check-o', 'calendar-minus-o', 'calendar-o', 'calendar-plus-o', 'calendar-times-o', 'camera', 'camera-retro', 'car', 'caret-square-o-down', 'caret-square-o-left', 'caret-square-o-right', 'caret-square-o-up', 'cart-arrow-down', 'cart-plus', 'cc', 'certificate', 'check', 'check-circle', 'check-circle-o', 'check-square', 'check-square-o', 'child', 'circle', 'circle-o', 'circle-o-notch', 'circle-thin', 'clock-o', 'clone', 'close', 'cloud', 'cloud-download', 'cloud-upload', 'code', 'code-fork', 'coffee', 'cog', 'cogs', 'comment', 'comment-o', 'commenting', 'commenting-o', 'comments', 'comments-o', 'compass', 'copyright', 'creative-commons', 'credit-card', 'credit-card-alt', 'crop', 'crosshairs', 'cube', 'cubes', 'cutlery', 'dashboard', 'database', 'deaf', 'deafness', 'desktop', 'diamond', 'dot-circle-o', 'download', 'drivers-license', 'drivers-license-o', 'edit', 'ellipsis-h', 'ellipsis-v', 'envelope', 'envelope-o', 'envelope-open', 'envelope-open-o', 'envelope-square', 'eraser', 'exchange', 'exclamation', 'exclamation-circle', 'exclamation-triangle', 'external-link', 'external-link-square', 'eye', 'eye-slash', 'eyedropper', 'fax', 'feed', 'female', 'fighter-jet', 'file-archive-o', 'file-audio-o', 'file-code-o', 'file-excel-o', 'file-image-o', 'file-movie-o', 'file-pdf-o', 'file-photo-o', 'file-picture-o', 'file-powerpoint-o', 'file-sound-o', 'file-video-o', 'file-word-o', 'file-zip-o', 'film', 'filter', 'fire', 'fire-extinguisher', 'flag', 'flag-checkered', 'flag-o', 'flash', 'flask', 'folder', 'folder-o', 'folder-open', 'folder-open-o', 'frown-o', 'futbol-o', 'gamepad', 'gavel', 'gear', 'gears', 'gift', 'glass', 'globe', 'graduation-cap', 'group', 'hand-grab-o', 'hand-lizard-o', 'hand-paper-o', 'hand-peace-o', 'hand-pointer-o', 'hand-rock-o', 'hand-scissors-o', 'hand-spock-o', 'hand-stop-o', 'handshake-o', 'hard-of-hearing', 'hashtag', 'hdd-o', 'headphones', 'heart', 'heart-o', 'heartbeat', 'history', 'home', 'hotel', 'hourglass', 'hourglass-1', 'hourglass-2', 'hourglass-3', 'hourglass-end', 'hourglass-half', 'hourglass-o', 'hourglass-start', 'i-cursor', 'id-badge', 'id-card', 'id-card-o', 'image', 'inbox', 'industry', 'info', 'info-circle', 'institution', 'key', 'keyboard-o', 'language', 'laptop', 'leaf', 'legal', 'lemon-o', 'level-down', 'level-up', 'life-bouy', 'life-buoy', 'life-ring', 'life-saver', 'lightbulb-o', 'line-chart', 'location-arrow', 'lock', 'low-vision', 'magic', 'magnet', 'mail-forward', 'mail-reply', 'mail-reply-all', 'male', 'map', 'map-marker', 'map-o', 'map-pin', 'map-signs', 'meh-o', 'microchip', 'microphone', 'microphone-slash', 'minus', 'minus-circle', 'minus-square', 'minus-square-o', 'mobile', 'mobile-phone', 'money', 'moon-o', 'mortar-board', 'motorcycle', 'mouse-pointer', 'music', 'navicon', 'newspaper-o', 'object-group', 'object-ungroup', 'paint-brush', 'paper-plane', 'paper-plane-o', 'paw', 'pencil', 'pencil-square', 'pencil-square-o', 'percent', 'phone', 'phone-square', 'photo', 'picture-o', 'pie-chart', 'plane', 'plug', 'plus', 'plus-circle', 'plus-square', 'plus-square-o', 'podcast', 'power-off', 'print', 'puzzle-piece', 'qrcode', 'question', 'question-circle', 'question-circle-o', 'quote-left', 'quote-right', 'random', 'recycle', 'refresh', 'registered', 'remove', 'reorder', 'reply', 'reply-all', 'retweet', 'road', 'rocket', 'rss', 'rss-square', 's15', 'search', 'search-minus', 'search-plus', 'send', 'send-o', 'server', 'share', 'share-alt', 'share-alt-square', 'share-square', 'share-square-o', 'shield', 'ship', 'shopping-bag', 'shopping-basket', 'shopping-cart', 'shower', 'sign-in', 'sign-language', 'sign-out', 'signal', 'signing', 'sitemap', 'sliders', 'smile-o', 'snowflake-o', 'soccer-ball-o', 'sort', 'sort-alpha-asc', 'sort-alpha-desc', 'sort-amount-asc', 'sort-amount-desc', 'sort-asc', 'sort-desc', 'sort-down', 'sort-numeric-asc', 'sort-numeric-desc', 'sort-up', 'space-shuttle', 'spinner', 'spoon', 'square', 'square-o', 'star', 'star-half', 'star-half-empty', 'star-half-full', 'star-half-o', 'star-o', 'sticky-note', 'sticky-note-o', 'street-view', 'suitcase', 'sun-o', 'support', 'tablet', 'tachometer', 'tag', 'tags', 'tasks', 'taxi', 'television', 'terminal', 'thermometer', 'thermometer-0', 'thermometer-1', 'thermometer-2', 'thermometer-3', 'thermometer-4', 'thermometer-empty', 'thermometer-full', 'thermometer-half', 'thermometer-quarter', 'thermometer-three-quarters', 'thumb-tack', 'thumbs-down', 'thumbs-o-down', 'thumbs-o-up', 'thumbs-up', 'ticket', 'times', 'times-circle', 'times-circle-o', 'times-rectangle', 'times-rectangle-o', 'tint', 'toggle-down', 'toggle-left', 'toggle-off', 'toggle-on', 'toggle-right', 'toggle-up', 'trademark', 'trash', 'trash-o', 'tree', 'trophy', 'truck', 'tty', 'tv', 'umbrella', 'universal-access', 'university', 'unlock', 'unlock-alt', 'unsorted', 'upload', 'user', 'user-circle', 'user-circle-o', 'user-o', 'user-plus', 'user-secret', 'user-times', 'users', 'vcard', 'vcard-o', 'video-camera', 'volume-control-phone', 'volume-down', 'volume-off', 'volume-up', 'warning', 'wheelchair', 'wheelchair-alt', 'wifi', 'window-close', 'window-close-o', 'window-maximize', 'window-minimize', 'window-restore', 'wrench']}, 3 | { classify: '无障碍', icons: ['american-sign-language-interpreting', 'asl-interpreting', 'assistive-listening-systems', 'audio-description', 'blind', 'braille', 'cc', 'deaf', 'deafness', 'hard-of-hearing', 'low-vision', 'question-circle-o', 'sign-language', 'signing', 'tty', 'universal-access', 'volume-control-phone', 'wheelchair', 'wheelchair-alt']}, 4 | { classify: '手型', icons: ['hand-grab-o', 'hand-lizard-o', 'hand-o-down', 'hand-o-left', 'hand-o-right', 'hand-o-up', 'hand-paper-o', 'hand-peace-o', 'hand-pointer-o', 'hand-rock-o', 'hand-scissors-o', 'hand-spock-o', 'hand-stop-o', 'thumbs-down', 'thumbs-o-down', 'thumbs-o-up', 'thumbs-up']}, 5 | { classify: '交通', icons: ['ambulance', 'automobile', 'bicycle', 'bus', 'cab', 'car', 'fighter-jet', 'motorcycle', 'plane', 'rocket', 'ship', 'space-shuttle', 'subway', 'taxi', 'train', 'truck', 'wheelchair', 'wheelchair-alt']}, 6 | { classify: '性别', icons: ['genderless', 'intersex', 'mars', 'mars-double', 'mars-stroke', 'mars-stroke-h', 'mars-stroke-v', 'mercury', 'neuter', 'transgender', 'transgender-alt', 'venus', 'venus-double', 'venus-mars']}, 7 | { classify: '文件', icons: ['file', 'file-archive-o', 'file-audio-o', 'file-code-o', 'file-excel-o', 'file-image-o', 'file-movie-o', 'file-o', 'file-pdf-o', 'file-photo-o', 'file-picture-o', 'file-powerpoint-o', 'file-sound-o', 'file-text', 'file-text-o', 'file-video-o', 'file-word-o', 'file-zip-o']}, 8 | { classify: '旋转动画', icons: ['circle-o-notch fa-spin', 'cog fa-spin', 'gear fa-spin', 'refresh fa-spin', 'spinner fa-spin']}, 9 | { classify: '表单', icons: ['check-square', 'check-square-o', 'circle', 'circle-o', 'dot-circle-o', 'minus-square', 'minus-square-o', 'plus-square', 'plus-square-o', 'square', 'square-o']}, 10 | { classify: '支付', icons: ['cc-amex', 'cc-diners-club', 'cc-discover', 'cc-jcb', 'cc-mastercard', 'cc-paypal', 'cc-stripe', 'cc-visa', 'credit-card', 'credit-card-alt', 'google-wallet', 'paypal']}, 11 | { classify: '图表', icons: ['area-chart', 'bar-chart', 'bar-chart-o', 'line-chart', 'pie-chart']}, 12 | { classify: '货币', icons: ['bitcoin', 'btc', 'cny', 'dollar', 'eur', 'euro', 'gbp', 'gg', 'gg-circle', 'ils', 'inr', 'jpy', 'krw', 'money', 'rmb', 'rouble', 'rub', 'ruble', 'rupee', 'shekel', 'sheqel', 'try', 'turkish-lira', 'usd', 'won', 'yen']}, 13 | { classify: '文本编辑器', icons: ['align-center', 'align-justify', 'align-left', 'align-right', 'bold', 'chain', 'chain-broken', 'clipboard', 'columns', 'copy', 'cut', 'dedent', 'eraser', 'file', 'file-o', 'file-text', 'file-text-o', 'files-o', 'floppy-o', 'font', 'header', 'indent', 'italic', 'link', 'list', 'list-alt', 'list-ol', 'list-ul', 'outdent', 'paperclip', 'paragraph', 'paste', 'repeat', 'rotate-left', 'rotate-right', 'save', 'scissors', 'strikethrough', 'subscript', 'superscript', 'table', 'text-height', 'text-width', 'th', 'th-large', 'th-list', 'underline', 'undo', 'unlink']}, 14 | { classify: '指向标识', icons: ['angle-double-down', 'angle-double-left', 'angle-double-right', 'angle-double-up', 'angle-down', 'angle-left', 'angle-right', 'angle-up', 'arrow-circle-down', 'arrow-circle-left', 'arrow-circle-o-down', 'arrow-circle-o-left', 'arrow-circle-o-right', 'arrow-circle-o-up', 'arrow-circle-right', 'arrow-circle-up', 'arrow-down', 'arrow-left', 'arrow-right', 'arrow-up', 'arrows', 'arrows-alt', 'arrows-h', 'arrows-v', 'caret-down', 'caret-left', 'caret-right', 'caret-square-o-down', 'caret-square-o-left', 'caret-square-o-right', 'caret-square-o-up', 'caret-up', 'chevron-circle-down', 'chevron-circle-left', 'chevron-circle-right', 'chevron-circle-up', 'chevron-down', 'chevron-left', 'chevron-right', 'chevron-up', 'exchange', 'hand-o-down', 'hand-o-left', 'hand-o-right', 'hand-o-up', 'long-arrow-down', 'long-arrow-left', 'long-arrow-right', 'long-arrow-up', 'toggle-down', 'toggle-left', 'toggle-right', 'toggle-up']}, 15 | { classify: '影音', icons: ['angle-double-down', 'angle-double-left', 'angle-double-right', 'angle-double-up', 'angle-down', 'angle-left', 'angle-right', 'angle-up', 'arrow-circle-down', 'arrow-circle-left', 'arrow-circle-o-down', 'arrow-circle-o-left', 'arrow-circle-o-right', 'arrow-circle-o-up', 'arrow-circle-right', 'arrow-circle-up', 'arrow-down', 'arrow-left', 'arrow-right', 'arrow-up', 'arrows', 'arrows-alt', 'arrows-h', 'arrows-v', 'caret-down', 'caret-left', 'caret-right', 'caret-square-o-down', 'caret-square-o-left', 'caret-square-o-right', 'caret-square-o-up', 'caret-up', 'chevron-circle-down', 'chevron-circle-left', 'chevron-circle-right', 'chevron-circle-up', 'chevron-down', 'chevron-left', 'chevron-right', 'chevron-up', 'exchange', 'hand-o-down', 'hand-o-left', 'hand-o-right', 'hand-o-up', 'long-arrow-down', 'long-arrow-left', 'long-arrow-right', 'long-arrow-up', 'toggle-down', 'toggle-left', 'toggle-right', 'toggle-up']}, 16 | { classify: '商标', icons: ['500px', 'adn', 'amazon', 'android', 'angellist', 'apple', 'bandcamp', 'behance', 'behance-square', 'bitbucket', 'bitbucket-square', 'bitcoin', 'black-tie', 'bluetooth', 'bluetooth-b', 'btc', 'buysellads', 'cc-amex', 'cc-diners-club', 'cc-discover', 'cc-jcb', 'cc-mastercard', 'cc-paypal', 'cc-stripe', 'cc-visa', 'chrome', 'codepen', 'codiepie', 'connectdevelop', 'contao', 'css3', 'dashcube', 'delicious', 'deviantart', 'digg', 'dribbble', 'dropbox', 'drupal', 'edge', 'eercast', 'empire', 'envira', 'etsy', 'expeditedssl', 'fa', 'facebook', 'facebook-f', 'facebook-official', 'facebook-square', 'firefox', 'first-order', 'flickr', 'font-awesome', 'fonticons', 'fort-awesome', 'forumbee', 'foursquare', 'free-code-camp', 'ge', 'get-pocket', 'gg', 'gg-circle', 'git', 'git-square', 'github', 'github-alt', 'github-square', 'gitlab', 'gittip', 'glide', 'glide-g', 'google', 'google-plus', 'google-plus-circle', 'google-plus-official', 'google-plus-square', 'google-wallet', 'gratipay', 'grav', 'hacker-news', 'houzz', 'html5', 'imdb', 'instagram', 'internet-explorer', 'ioxhost', 'joomla', 'jsfiddle', 'lastfm', 'lastfm-square', 'leanpub', 'linkedin', 'linkedin-square', 'linode', 'linux', 'maxcdn', 'meanpath', 'medium', 'meetup', 'mixcloud', 'modx', 'odnoklassniki', 'odnoklassniki-square', 'opencart', 'openid', 'opera', 'optin-monster', 'pagelines', 'paypal', 'pied-piper', 'pied-piper-alt', 'pied-piper-pp', 'pinterest', 'pinterest-p', 'pinterest-square', 'product-hunt', 'qq', 'quora', 'ra', 'ravelry', 'rebel', 'reddit', 'reddit-alien', 'reddit-square', 'renren', 'resistance', 'safari', 'scribd', 'sellsy', 'share-alt', 'share-alt-square', 'shirtsinbulk', 'simplybuilt', 'skyatlas', 'skype', 'slack', 'slideshare', 'snapchat', 'snapchat-ghost', 'snapchat-square', 'soundcloud', 'spotify', 'stack-exchange', 'stack-overflow', 'steam', 'steam-square', 'stumbleupon', 'stumbleupon-circle', 'superpowers', 'telegram', 'tencent-weibo', 'themeisle', 'trello', 'tripadvisor', 'tumblr', 'tumblr-square', 'twitch', 'twitter', 'twitter-square', 'usb', 'viacoin', 'viadeo', 'viadeo-square', 'vimeo', 'vimeo-square', 'vine', 'vk', 'wechat', 'weibo', 'weixin', 'whatsapp', 'wikipedia-w', 'windows', 'wordpress', 'wpbeginner', 'wpexplorer', 'wpforms', 'xing', 'xing-square', 'y-combinator', 'y-combinator-square', 'yahoo', 'yc', 'yc-square', 'yelp', 'yoast', 'youtube', 'youtube-play', 'youtube-square', 'warning']} 17 | ] -------------------------------------------------------------------------------- /frontend/src/components/datapoints/decoration/IconFont/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 可视化控件--字体图标 3 | * @version 1.0.0 4 | */ 5 | 6 | const version = '1.0.0' 7 | 8 | import img_icon_font from './text-icon-font.png' 9 | import commonTitleDefaultConfig from './1.0.0/default.config' 10 | 11 | export default { 12 | id: '004001', 13 | title: '字体图标', 14 | version, 15 | name: 'IconFont', 16 | thumbnail: img_icon_font, 17 | enabled: true, 18 | config: commonTitleDefaultConfig, 19 | data: null, 20 | interaction: null 21 | } -------------------------------------------------------------------------------- /frontend/src/components/datapoints/decoration/IconFont/text-icon-font.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiangseventeen/data-points/efba8dcc39b1343e3f9b1f37a30335f1a89e0853/frontend/src/components/datapoints/decoration/IconFont/text-icon-font.png -------------------------------------------------------------------------------- /frontend/src/components/datapoints/decoration/index.js: -------------------------------------------------------------------------------- 1 | import IconFont from './IconFont' 2 | import ColorBlock from './ColorBlock' 3 | 4 | export default [ 5 | IconFont, 6 | ColorBlock 7 | ] -------------------------------------------------------------------------------- /frontend/src/components/datapoints/geography/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 地理组件集合 3 | */ 4 | // import BMapImg from '../../../assets/image/geography/bmap.png'; 5 | // import JsonMapImg from '../../../assets/image/geography/json-map.png'; 6 | 7 | export default [ 8 | // { id: '002001', title: '电子地图', nameRef: 'BMap', image: BMapImg, enabled: false, locked: false }, 9 | // { id: '002002', title: 'JSON地图', nameRef: 'ChartMap', image: JsonMapImg, enabled: false, locked: false }, 10 | ] -------------------------------------------------------------------------------- /frontend/src/components/datapoints/index.js: -------------------------------------------------------------------------------- 1 | import charts from './charts' 2 | import geography from './geography' 3 | import media from './media' 4 | import text from './text' 5 | import decoration from './decoration' 6 | import interaction from './interaction' 7 | 8 | export default [ 9 | { title: '系统图表', icon: 'bar-chart', components: charts }, 10 | { title: '地理', icon: 'globe', components: geography }, 11 | { title: '媒体', icon: 'film', components: media }, 12 | { title: '文本', icon: 'font', components: text }, 13 | { title: '装饰性', icon: 'diamond', components: decoration }, 14 | { title: '交互', icon: 'chain', components: interaction }, 15 | ] -------------------------------------------------------------------------------- /frontend/src/components/datapoints/interaction/index.js: -------------------------------------------------------------------------------- 1 | export default [] -------------------------------------------------------------------------------- /frontend/src/components/datapoints/media/SingleImage/1.0.0/SingleImage.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | -------------------------------------------------------------------------------- /frontend/src/components/datapoints/media/SingleImage/1.0.0/SingleImageConfig.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | -------------------------------------------------------------------------------- /frontend/src/components/datapoints/media/SingleImage/1.0.0/default.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | backgroundUrl: '', 3 | opacity: 1, 4 | width: 400, 5 | height: 300, 6 | left: 500, 7 | top: 500, 8 | } -------------------------------------------------------------------------------- /frontend/src/components/datapoints/media/SingleImage/1.0.0/default.data.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiangseventeen/data-points/efba8dcc39b1343e3f9b1f37a30335f1a89e0853/frontend/src/components/datapoints/media/SingleImage/1.0.0/default.data.js -------------------------------------------------------------------------------- /frontend/src/components/datapoints/media/SingleImage/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 可视化控件--单图片 3 | * @version 1.0.0 4 | */ 5 | 6 | const version = '1.0.0' 7 | 8 | import img_single_image from './single-image.png' 9 | import defaultConfig from './1.0.0/default.config' 10 | 11 | export default { 12 | id: '003001', 13 | title: '单张图片', 14 | version, 15 | name: 'SingleImage', 16 | thumbnail: img_single_image, 17 | enabled: true, 18 | config: defaultConfig, 19 | data: null, 20 | interaction: null 21 | } -------------------------------------------------------------------------------- /frontend/src/components/datapoints/media/SingleImage/single-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiangseventeen/data-points/efba8dcc39b1343e3f9b1f37a30335f1a89e0853/frontend/src/components/datapoints/media/SingleImage/single-image.png -------------------------------------------------------------------------------- /frontend/src/components/datapoints/media/index.js: -------------------------------------------------------------------------------- 1 | import SingleImage from './SingleImage' 2 | 3 | export default [ 4 | SingleImage 5 | ] -------------------------------------------------------------------------------- /frontend/src/components/datapoints/mixins/common.js: -------------------------------------------------------------------------------- 1 | export default { 2 | props: ['config', 'data'], 3 | computed: { 4 | position () { 5 | return { 6 | 'width': this.config.width + 'px', 7 | 'height': this.config.height + 'px', 8 | 'left': this.config.left + 'px', 9 | 'top': this.config.top + 'px' 10 | } 11 | } 12 | } 13 | } -------------------------------------------------------------------------------- /frontend/src/components/datapoints/text/CarouselText/1.0.0/CarouselText.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 18 | 19 | -------------------------------------------------------------------------------- /frontend/src/components/datapoints/text/CarouselText/1.0.0/CarouselTextConfig.vue: -------------------------------------------------------------------------------- 1 | 38 | 39 | -------------------------------------------------------------------------------- /frontend/src/components/datapoints/text/CarouselText/1.0.0/default.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | color: '#FFFFFF', 3 | fontSize: 20, 4 | fontWeight: 500, 5 | fontFamily: 'Microsoft yahei', 6 | isCarousel: true, 7 | interval: 0, 8 | width: 320, 9 | height: 60, 10 | left: 500, 11 | top: 500 12 | } -------------------------------------------------------------------------------- /frontend/src/components/datapoints/text/CarouselText/1.0.0/default.data.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiangseventeen/data-points/efba8dcc39b1343e3f9b1f37a30335f1a89e0853/frontend/src/components/datapoints/text/CarouselText/1.0.0/default.data.js -------------------------------------------------------------------------------- /frontend/src/components/datapoints/text/CarouselText/carousel-text.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiangseventeen/data-points/efba8dcc39b1343e3f9b1f37a30335f1a89e0853/frontend/src/components/datapoints/text/CarouselText/carousel-text.png -------------------------------------------------------------------------------- /frontend/src/components/datapoints/text/CarouselText/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 可视化控件--跑马灯 3 | * 4 | * @version 1.0.0 5 | */ 6 | 7 | const version = '1.0.0' 8 | import img_carousel_text from './carousel-text.png' 9 | import defaultConfig from './1.0.0/default.config' 10 | import defaultData from './1.0.0/default.data' 11 | 12 | export default { 13 | id: '004004', 14 | version, 15 | title: '跑马灯', 16 | name: 'CarouselText', 17 | enabled: true, 18 | thumbnail: img_carousel_text, 19 | config: defaultConfig, 20 | data: defaultData, 21 | interaction: null 22 | } -------------------------------------------------------------------------------- /frontend/src/components/datapoints/text/CommonTitle/1.0.0/CommonTitle.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 31 | 32 | -------------------------------------------------------------------------------- /frontend/src/components/datapoints/text/CommonTitle/1.0.0/CommonTitleConfig.vue: -------------------------------------------------------------------------------- 1 | 106 | 107 | -------------------------------------------------------------------------------- /frontend/src/components/datapoints/text/CommonTitle/1.0.0/default.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 通用标题组件的初始配置项。 3 | */ 4 | export default { 5 | title: '这是标题内容', 6 | fontFamily: 'Microsoft yahei', 7 | fontSize: 50, 8 | fontWeight: 500, 9 | textAlign: 'center', 10 | letterSpacing: 0, 11 | color: '#ffffff', 12 | width: 350, 13 | height: 100, 14 | left: 500, 15 | top: 500 16 | } -------------------------------------------------------------------------------- /frontend/src/components/datapoints/text/CommonTitle/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 可视化控件--通用标题 3 | * 4 | * @version 1.0.0 5 | */ 6 | 7 | const version = '1.0.0' 8 | 9 | import img_common_title from './text-common-title.png' 10 | import commonTitleDefaultConfig from './1.0.0/default.config' 11 | 12 | export default { 13 | id: '004001', 14 | version, 15 | title: '通用标题', 16 | name: 'CommonTitle', 17 | thumbnail: img_common_title, 18 | enabled: true, 19 | config: commonTitleDefaultConfig, 20 | data: null, 21 | interaction: null 22 | } -------------------------------------------------------------------------------- /frontend/src/components/datapoints/text/CommonTitle/text-common-title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiangseventeen/data-points/efba8dcc39b1343e3f9b1f37a30335f1a89e0853/frontend/src/components/datapoints/text/CommonTitle/text-common-title.png -------------------------------------------------------------------------------- /frontend/src/components/datapoints/text/DateTime/1.0.0/DateTime.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 62 | 63 | -------------------------------------------------------------------------------- /frontend/src/components/datapoints/text/DateTime/1.0.0/DateTimeConfig.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/components/datapoints/text/DateTime/1.0.0/default.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | text: { 3 | color: '#FFFFFF', 4 | fontFamily: 'Microsoft yahei', 5 | fontSize: 30, 6 | fontWeight: 500, 7 | }, 8 | format: 'yyyy-MM-dd HH:mm:ss', 9 | width: 350, 10 | height: 100, 11 | left: 500, 12 | top: 500 13 | } -------------------------------------------------------------------------------- /frontend/src/components/datapoints/text/DateTime/date-time.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiangseventeen/data-points/efba8dcc39b1343e3f9b1f37a30335f1a89e0853/frontend/src/components/datapoints/text/DateTime/date-time.png -------------------------------------------------------------------------------- /frontend/src/components/datapoints/text/DateTime/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 可视化控件--日期时间 3 | * 4 | * @version 1.0.0 5 | */ 6 | 7 | const version = '1.0.0' 8 | import img_date_time from './date-time.png' 9 | import defaultConfig from './1.0.0/default.config' 10 | 11 | export default { 12 | id: '004005', 13 | version, 14 | title: '日期时间', 15 | name: 'DateTime', 16 | enabled: true, 17 | thumbnail: img_date_time, 18 | config: defaultConfig, 19 | data: null, 20 | interaction: null 21 | } -------------------------------------------------------------------------------- /frontend/src/components/datapoints/text/MultilineText/1.0.0/MultilineText.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /frontend/src/components/datapoints/text/MultilineText/1.0.0/MultilineTextConfig.vue: -------------------------------------------------------------------------------- 1 | 102 | 103 | -------------------------------------------------------------------------------- /frontend/src/components/datapoints/text/MultilineText/1.0.0/default.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | text: { 3 | color: '#8C8C8C', 4 | fontFamily: 'Microsoft yahei', 5 | fontSize: 14, 6 | fontWeight: 500, 7 | lineHeight: 1.5, 8 | textAlign: 'left', 9 | textIndent: 20, 10 | }, 11 | width: 400, 12 | height: 150, 13 | left: 500, 14 | top: 500 15 | } -------------------------------------------------------------------------------- /frontend/src/components/datapoints/text/MultilineText/1.0.0/default.data.js: -------------------------------------------------------------------------------- 1 | export default { 2 | type: 'static', 3 | staticData: { 4 | value: 'Data-Points 灵感来自于阿里云DataV数据可视化工具，当前的UI以及使用方法也与DataV相似。Data-Points的目标是打造成一个集成前后端、可独立部署的开源系统，用以解决可视化大屏需求。项目正在初始阶段，如果你擅长UI、前端（vuejs, Three.js, D3.js etc.），后端(nodejs, express, mongoDB etc.)，欢迎你的加入' 5 | }, 6 | schema: {}, 7 | uri: '', 8 | } -------------------------------------------------------------------------------- /frontend/src/components/datapoints/text/MultilineText/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 可视化控件--多行文本 3 | * 4 | * @version 1.0.0 5 | */ 6 | 7 | const version = '1.0.0' 8 | import img_multiline_text from './multiline-text.png' 9 | import defaultConfig from './1.0.0/default.config' 10 | import defaultData from './1.0.0/default.data' 11 | 12 | export default { 13 | id: '004003', 14 | version, 15 | title: '多行文本', 16 | name: 'MultilineText', 17 | enabled: true, 18 | thumbnail: img_multiline_text, 19 | config: defaultConfig, 20 | data: defaultData, 21 | interaction: null 22 | } -------------------------------------------------------------------------------- /frontend/src/components/datapoints/text/MultilineText/multiline-text.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiangseventeen/data-points/efba8dcc39b1343e3f9b1f37a30335f1a89e0853/frontend/src/components/datapoints/text/MultilineText/multiline-text.png -------------------------------------------------------------------------------- /frontend/src/components/datapoints/text/NumberCounter/1.0.0/NumberCounter.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 110 | 111 | -------------------------------------------------------------------------------- /frontend/src/components/datapoints/text/NumberCounter/1.0.0/NumberCounterConfig.vue: -------------------------------------------------------------------------------- 1 | 223 | 224 | -------------------------------------------------------------------------------- /frontend/src/components/datapoints/text/NumberCounter/1.0.0/default.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 数字翻牌器默认配置项 3 | */ 4 | 5 | export default { 6 | title: { 7 | color: '#FFFFFF', 8 | fontFamily: '', 9 | fontSize: 30, 10 | textAlign: 'left', 11 | fontWeight: 500, 12 | lineHeight: 1.5 13 | }, 14 | number: { 15 | type: 'static', 16 | bounce: 50, 17 | bounceInterval: 3, 18 | textAlign: 'left', 19 | fontSize: 45, 20 | fontWeight: 500, 21 | color: '#FFFFFF', 22 | letterSpacing: 0, 23 | useGroup: false, 24 | precision: 0 25 | }, 26 | card: { 27 | backgroundColor: '#FFFFFF00', 28 | borderColor: '#FFFFFF00', 29 | borderWidth: 0, 30 | borderRadius: 0, 31 | padding: 10, 32 | borderStyle: 'solid', 33 | }, 34 | width: 320, 35 | height: 150, 36 | left: 500, 37 | top: 500 38 | } -------------------------------------------------------------------------------- /frontend/src/components/datapoints/text/NumberCounter/1.0.0/default.data.js: -------------------------------------------------------------------------------- 1 | export default { 2 | type: 'static', 3 | staticData: { 4 | name: '营业额', 5 | value: 16777216 6 | }, 7 | schema: {}, 8 | uri: '', 9 | } -------------------------------------------------------------------------------- /frontend/src/components/datapoints/text/NumberCounter/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 可视化控件--通用标题 3 | * 4 | * @version 1.0.0 5 | */ 6 | 7 | const version = '1.0.0' 8 | import img_number_counter from './text-number-counter.png' 9 | import defaultConfig from './1.0.0/default.config' 10 | import defaultData from './1.0.0/default.data' 11 | 12 | export default { 13 | id: '004002', 14 | version, 15 | title: '数字翻牌器', 16 | name: 'NumberCounter', 17 | enabled: true, 18 | thumbnail: img_number_counter, 19 | config: defaultConfig, 20 | data: defaultData, 21 | interaction: null 22 | } -------------------------------------------------------------------------------- /frontend/src/components/datapoints/text/NumberCounter/text-number-counter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiangseventeen/data-points/efba8dcc39b1343e3f9b1f37a30335f1a89e0853/frontend/src/components/datapoints/text/NumberCounter/text-number-counter.png -------------------------------------------------------------------------------- /frontend/src/components/datapoints/text/RollingMessage/1.0.0/RollingMessage.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 69 | 70 | 99 | 100 | -------------------------------------------------------------------------------- /frontend/src/components/datapoints/text/RollingMessage/1.0.0/RollingMessageConfig.vue: -------------------------------------------------------------------------------- 1 | 78 | 79 | -------------------------------------------------------------------------------- /frontend/src/components/datapoints/text/RollingMessage/1.0.0/default.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | text: { 3 | color: '#FFFFFF', 4 | fontSize: 20, 5 | fontFamily: 'Microsoft yahei', 6 | fontWeight: 500, 7 | }, 8 | rollingInterval: 3, 9 | width: 320, 10 | height: 50, 11 | left: 500, 12 | top: 500 13 | } -------------------------------------------------------------------------------- /frontend/src/components/datapoints/text/RollingMessage/1.0.0/default.data.js: -------------------------------------------------------------------------------- 1 | export default { 2 | type: 'static', 3 | staticData: [ 4 | { valued: '这是一行测试文本' }, 5 | { value: '这是滚动测试文本' }, 6 | { value: '这是无名测试文本' }, 7 | ], 8 | schema: { 9 | type: 'array', 10 | items: { 11 | type: 'object', 12 | properties: { 13 | value: { type: 'string' } 14 | }, 15 | required: ['value'] 16 | } 17 | }, 18 | uri: '', 19 | } -------------------------------------------------------------------------------- /frontend/src/components/datapoints/text/RollingMessage/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 可视化控件--通用标题 3 | * 4 | * @version 1.0.0 5 | */ 6 | 7 | const version = '1.0.0' 8 | import img_rolling_message from './rolling-message.png' 9 | import defaultConfig from './1.0.0/default.config' 10 | import defaultData from './1.0.0/default.data' 11 | 12 | export default { 13 | id: '004006', 14 | version, 15 | title: '滚动消息', 16 | name: 'RollingMessage', 17 | enabled: true, 18 | thumbnail: img_rolling_message, 19 | config: defaultConfig, 20 | data: defaultData, 21 | interaction: null 22 | } -------------------------------------------------------------------------------- /frontend/src/components/datapoints/text/RollingMessage/rolling-message.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiangseventeen/data-points/efba8dcc39b1343e3f9b1f37a30335f1a89e0853/frontend/src/components/datapoints/text/RollingMessage/rolling-message.png -------------------------------------------------------------------------------- /frontend/src/components/datapoints/text/index.js: -------------------------------------------------------------------------------- 1 | import CommonTitle from './CommonTitle' 2 | import NumberCounter from './NumberCounter' 3 | import MultilineText from './MultilineText' 4 | import CarouselText from './CarouselText' 5 | import DateTime from './DateTime' 6 | import RollingMessage from './RollingMessage' 7 | 8 | export default [ 9 | CommonTitle, 10 | NumberCounter, 11 | MultilineText, 12 | CarouselText, 13 | DateTime, 14 | RollingMessage 15 | ] -------------------------------------------------------------------------------- /frontend/src/constants/borderStyle.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | {label: '实线', value: 'solid'}, 3 | {label: '虚线', value: 'dashed'}, 4 | {label: '原点', value: 'dotted'}, 5 | ] -------------------------------------------------------------------------------- /frontend/src/constants/components.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 用于渲染顶部组件导航栏的数据源。 3 | */ 4 | import datapoints from '../components/datapoints' 5 | 6 | export default datapoints -------------------------------------------------------------------------------- /frontend/src/constants/fontFamily.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { value: 'Microsoft yahei', label: '微软雅黑' }, 3 | { value: 'songti', label: '宋体' }, 4 | { value: 'heiti', label: '黑体' }, 5 | { value: 'lishu', label: '隶书' }, 6 | { value: 'youyuan', label: '幼圆' }, 7 | { value: 'Arial', label: 'Arial'} 8 | ] -------------------------------------------------------------------------------- /frontend/src/constants/fontStyle.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiangseventeen/data-points/efba8dcc39b1343e3f9b1f37a30335f1a89e0853/frontend/src/constants/fontStyle.js -------------------------------------------------------------------------------- /frontend/src/constants/fontWeight.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { value: 'bold', label: '加粗' }, 3 | { value: 'normal', label: '正常' }, 4 | { value: 'lighter', label: '纤细' }, 5 | { value: 100, label: '100' }, 6 | { value: 200, label: '200' }, 7 | { value: 300, label: '300' }, 8 | { value: 400, label: '400' }, 9 | { value: 500, label: '500' }, 10 | { value: 600, label: '600' }, 11 | { value: 700, label: '700' } 12 | ] -------------------------------------------------------------------------------- /frontend/src/constants/gradientType.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 背景渐变类型。 3 | */ 4 | export default [ 5 | { value: 1, label: '无渐变'}, 6 | { value: 2, label: '水平渐变'}, 7 | { value: 3, label: '垂直渐变'}, 8 | { value: 4, label: '径向渐变'}, 9 | ] -------------------------------------------------------------------------------- /frontend/src/constants/scaleType.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 画布缩放方式。 3 | */ 4 | export { 5 | 1: '等比缩放宽度铺满', 6 | 2: '等比缩放高度铺满', 7 | 3: '全屏铺满' 8 | } -------------------------------------------------------------------------------- /frontend/src/constants/textAlign.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { value: 'left', label: '左对齐'}, 3 | { value: 'center', label: '居中'}, 4 | { value: 'right', label: '右对齐'}, 5 | ] -------------------------------------------------------------------------------- /frontend/src/filter/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import inlineStyle from './inlineStyle' 3 | 4 | Vue.filter('inline-style', inlineStyle) -------------------------------------------------------------------------------- /frontend/src/filter/inlineStyle.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 处理内联样式的单位，为Number类型的样式添加‘px’单位 3 | * 4 | * @param {Object} style 内联样式对象 5 | */ 6 | export default function (style) { 7 | const keywords = [ 8 | 'fontSize', 9 | 'margin', 10 | 'padding', 11 | 'letterSpacing', 12 | 'borderRadius', 13 | 'borderWidth', 14 | 'textIndent' 15 | ] 16 | 17 | let inlineStyle = {} 18 | Object.keys(style).forEach(key => { 19 | if (keywords.indexOf(key) >= 0) { 20 | inlineStyle[key] = `${style[key]}px` 21 | } 22 | }) 23 | 24 | return Object.assign({}, style, inlineStyle) 25 | } -------------------------------------------------------------------------------- /frontend/src/layout/ContextMenu.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 86 | 87 | -------------------------------------------------------------------------------- /frontend/src/layout/ContextMenuPlugin.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import ContextMenu from './ContextMenu' 3 | let ContextMenuConstructor = Vue.extend(ContextMenu) 4 | 5 | var contextMenuPlugin = {} 6 | 7 | contextMenuPlugin.install = function (Vue) { 8 | 9 | let api = {} 10 | let instance 11 | 12 | api.open = function (event) { 13 | if (!instance) { 14 | instance = new ContextMenuConstructor() 15 | instance.$mount() 16 | document.body.appendChild(instance.$el) 17 | } else { 18 | instance.$el.style.display = 'block' 19 | } 20 | 21 | // get position of context menu 22 | let { pageX, pageY } = event 23 | 24 | instance.$el.style.left = `${pageX + 10}px` 25 | instance.$el.style.top = `${pageY + 10}px` 26 | 27 | document.addEventListener('click', handleCloseMenu) 28 | window.addEventListener('resize', handleCloseMenu) 29 | } 30 | 31 | api.close = function () { 32 | instance.$el.style.display = 'none' 33 | 34 | document.removeEventListener('click', handleCloseMenu) 35 | } 36 | 37 | function handleCloseMenu () { 38 | api.close() 39 | } 40 | 41 | Vue.prototype.$contextMenu = api 42 | 43 | } 44 | 45 | export default contextMenuPlugin 46 | -------------------------------------------------------------------------------- /frontend/src/layout/DataSetting.vue: -------------------------------------------------------------------------------- 1 | 44 | 45 | 89 | 90 | -------------------------------------------------------------------------------- /frontend/src/layout/InteractSetting.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | -------------------------------------------------------------------------------- /frontend/src/layout/PageSetting.vue: -------------------------------------------------------------------------------- 1 | 92 | 93 | 188 | 189 | -------------------------------------------------------------------------------- /frontend/src/layout/TheCenterCanvas.vue: -------------------------------------------------------------------------------- 1 | 38 | 39 | 183 | 184 | -------------------------------------------------------------------------------- /frontend/src/layout/TheFooter.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 40 | -------------------------------------------------------------------------------- /frontend/src/layout/TheLeftSidebar.vue: -------------------------------------------------------------------------------- 1 | 28 | 98 | 99 | -------------------------------------------------------------------------------- /frontend/src/layout/TheRightSidebar.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 107 | 108 | -------------------------------------------------------------------------------- /frontend/src/layout/TheTopHeading.vue: -------------------------------------------------------------------------------- 1 | 54 | 55 | 79 | 80 | -------------------------------------------------------------------------------- /frontend/src/layout/TransformTool.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 205 | 206 | -------------------------------------------------------------------------------- /frontend/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import App from "./App.vue"; 3 | import store from "./store"; 4 | import ElementUI from "element-ui"; 5 | import ContextMenuPlugin from './layout/ContextMenuPlugin'; 6 | import './components/base'; 7 | import './filter'; 8 | import "./assets/scss/_element.scss"; 9 | 10 | Vue.config.productionTip = false; 11 | Vue.use(ElementUI); 12 | 13 | Vue.use(ContextMenuPlugin) 14 | 15 | // 异步加载datapoints可视化组件 16 | const asyncComponent = require.context( 17 | "./components/datapoints", 18 | true, 19 | /[A-Z]\w+\.vue$/, 20 | 'lazy' 21 | ); 22 | 23 | asyncComponent.keys().forEach(fileName => { 24 | 25 | let [version, componentName] = fileName 26 | .split("/") 27 | .splice(-2) 28 | .map(n => n.replace(/\.vue$/, "")); 29 | 30 | Vue.component( 31 | `${componentName}-${version}`, 32 | () => asyncComponent(fileName).then(resolve => resolve.default || resolve) 33 | ); 34 | }); 35 | 36 | new Vue({ 37 | render: h => h(App), 38 | store 39 | }).$mount("#app"); 40 | -------------------------------------------------------------------------------- /frontend/src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import Vuex from "vuex"; 3 | import _ from "lodash"; 4 | 5 | Vue.use(Vuex); 6 | 7 | const store = new Vuex.Store({ 8 | state: { 9 | // 默认页面配置 10 | page: { 11 | width: 1920, 12 | height: 1080, 13 | scale: 1, 14 | scaleType: 1, 15 | gutter: 8, 16 | background: { 17 | color: "#0e2a43", 18 | image: "", 19 | gradientType: 1, 20 | colorStart: "#000000", 21 | colorStop: "#000000" 22 | }, 23 | thumbnail: "" 24 | }, 25 | // 画布缩放比例 26 | pageScale: 0, 27 | // 显示参考线 28 | isShowguides: false, 29 | // 参考线 30 | guides: [], 31 | // 画布组件 32 | renderComponentList: [] 33 | }, 34 | getters: { 35 | // 选中组件 36 | selectedComponentList: state => { 37 | return state.renderComponentList.filter(n => n.selected); 38 | } 39 | }, 40 | mutations: { 41 | setPageScale: (state, scale) => { 42 | state.pageScale = scale; 43 | }, 44 | // 设置页面配置 45 | setPage: (state, pageSetting) => { 46 | Object.assign(state.page, pageSetting); 47 | }, 48 | // 设置背景 49 | setBackground: (state, background) => { 50 | Object.assign(state.page.background, background); 51 | }, 52 | // 添加组件 53 | insertComponent: (state, component) => { 54 | if (component.enabled) { 55 | state.renderComponentList.push({ 56 | enabled: component.enabled, 57 | componentId: component.id, 58 | id: _.uniqueId(), 59 | hover: false, // 光标hover 60 | selected: false, // 是否选中 61 | locked: false, // 是否锁定 62 | visible: true, // 是否隐藏 63 | isEdit: false, // 是否重命名 64 | isDrop: false, // 拖拽排序中 65 | name: component.name, 66 | title: component.title, 67 | version: component.version, 68 | thumbnail: component.thumbnail, 69 | config: JSON.parse(JSON.stringify(component.config)), 70 | data: JSON.parse(JSON.stringify(component.data)), 71 | interaction: JSON.parse(JSON.stringify(component.interaction)) 72 | }); 73 | } 74 | }, 75 | // 光标移入 76 | hoverComponent: (state, component) => { 77 | component.hover = true; 78 | }, 79 | // 光标移出 80 | unhoverComponent: (state, component) => { 81 | component.hover = false; 82 | }, 83 | 84 | /** 85 | * 按索引选中组件 86 | * 87 | * @param {Number | Array} indexs 需要选中的组件索引 88 | */ 89 | selectComponents: (state, indexs) => { 90 | indexs = Array.isArray(indexs) ? indexs : [indexs]; 91 | 92 | state.renderComponentList.forEach((n, i) => { 93 | if (indexs.indexOf(i) >= 0) n.selected = true; 94 | else n.selected = false; 95 | }); 96 | }, 97 | 98 | /** 99 | * 单选组件 100 | */ 101 | selectComponent: (state, component) => { 102 | state.renderComponentList.forEach(n => n.selected = false) 103 | component.selected = true 104 | }, 105 | 106 | /** 107 | * 取消组件选中 108 | * 109 | * @param {Number | Array | undefined} indexs 取消选中的组件索引， undefined时取消全部组件 110 | */ 111 | unselectComponent: (state, indexs) => { 112 | let renderComponentList = state.renderComponentList 113 | 114 | // 全部取消 115 | if (typeof indexs === 'undefined') { 116 | renderComponentList.forEach(n => n.selected = false) 117 | return 118 | } 119 | 120 | // 取消指定组件 121 | if (Array.isArray(indexs)) { 122 | renderComponentList.forEach((n, i) => { 123 | if (indexs.indexOf(i) >= 0) n.selected = false 124 | }) 125 | return 126 | } 127 | 128 | renderComponentList[indexs].selected = false 129 | }, 130 | 131 | /** 132 | * 按照指定位置移动图层顺序 133 | * 134 | * @param {Number} from 被移动元素位置 135 | * @param {Number} to 目标位置 136 | */ 137 | layerMove: (state, position) => { 138 | let { from, to } = position 139 | let renderComponentList = state.renderComponentList 140 | 141 | renderComponentList.splice(to, 0, renderComponentList.splice(from, 1)[0]) 142 | }, 143 | 144 | /** 145 | * 交换两个图层位置 146 | * 147 | * @param {Number} index1 148 | * @param {Number} index2 149 | */ 150 | layerSwap (state, { index1, index2 }) { 151 | if (index1 !== index2) { 152 | let component = state.renderComponentList[index1] 153 | Vue.set(state.renderComponentList, index1, state.renderComponentList[index2]) 154 | Vue.set(state.renderComponentList, index2, component) 155 | } 156 | }, 157 | /** 158 | * 上移选中的图层 159 | */ 160 | moveUp (state) { 161 | 162 | let renderList = state.renderComponentList 163 | let selectedList = this.getters.selectedComponentList 164 | 165 | // 上移时正序排列索引数组 166 | let activeIndexs = selectedList 167 | .map(n => renderList.indexOf(n)) 168 | .sort((a, b) => a - b) 169 | 170 | activeIndexs.forEach(n => { 171 | if (n > 0 && !renderList[n - 1].selected) { 172 | this.commit('layerSwap', {index1: n - 1, index2: n}) 173 | } 174 | }) 175 | }, 176 | 177 | /** 178 | * 下移选中的图层 179 | */ 180 | moveDown (state) { 181 | let renderList = state.renderComponentList 182 | let selectedList = this.getters.selectedComponentList 183 | 184 | // 下移时逆序排列索引数组 185 | let activeIndexs = selectedList 186 | .map(n => renderList.indexOf(n)) 187 | .sort((a, b) => b - a) 188 | 189 | activeIndexs.forEach(n => { 190 | if ( 191 | n < renderList.length && 192 | renderList[n + 1] && 193 | !renderList[n + 1].selected 194 | ) { 195 | this.commit('layerSwap', {index1: n, index2: n + 1}) 196 | } 197 | }) 198 | }, 199 | 200 | /** 201 | * 置顶选中的图层 202 | */ 203 | moveTop (state) { 204 | let renderList = state.renderComponentList 205 | let selectedList = this.getters.selectedComponentList 206 | 207 | // 上移时正序排列索引数组 208 | let activeIndexs = selectedList 209 | .map(n => renderList.indexOf(n)) 210 | .sort((a, b) => a - b) 211 | 212 | activeIndexs.forEach((n, i) => { 213 | this.commit('layerSwap', {index1: n, index2: i}) 214 | }) 215 | }, 216 | 217 | /** 218 | * 置底选中的图层 219 | */ 220 | moveBottom (state) { 221 | let renderList = state.renderComponentList 222 | let selectedList = this.getters.selectedComponentList 223 | 224 | // 下移时逆序排列索引数组 225 | let activeIndexs = selectedList 226 | .map(n => renderList.indexOf(n)) 227 | .sort((a, b) => b - a) 228 | 229 | activeIndexs.forEach((n, i) => { 230 | this.commit('layerSwap', {index1: n, index2: renderList.length - 1 - i}) 231 | }) 232 | }, 233 | 234 | /** 235 | * 删除选中组件图层 236 | */ 237 | deleteComponents (state) { 238 | let renderList = state.renderComponentList 239 | let selectedList = this.getters.selectedComponentList 240 | 241 | selectedList.forEach(n => { 242 | let index = renderList.indexOf(n) 243 | state.renderComponentList.splice(index, 1) 244 | }) 245 | }, 246 | 247 | /** 248 | * 复制选中图层 249 | */ 250 | copyComponents () { 251 | let selectedList = this.getters.selectedComponentList 252 | 253 | selectedList.forEach(n => { 254 | this.commit('insertComponent', n) 255 | }) 256 | }, 257 | 258 | /** 259 | * 重命名选中图层，多个选中图层时，默认修改第一个选中图层 260 | */ 261 | renameComponent () { 262 | let selectedList = this.getters.selectedComponentList 263 | selectedList[0].isEdit = true 264 | } 265 | 266 | } 267 | }); 268 | 269 | export default store; 270 | -------------------------------------------------------------------------------- /frontend/src/utils/http.js: -------------------------------------------------------------------------------- 1 | export * from 'axios' -------------------------------------------------------------------------------- /frontend/src/utils/validator.js: -------------------------------------------------------------------------------- 1 | import { Validator } from 'jsonschema' 2 | 3 | export default new Validator() -------------------------------------------------------------------------------- /frontend/vue.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin'); 3 | 4 | module.exports = { 5 | publicPath: process.env.NODE_ENV === 'production' 6 | ? './' 7 | : '/', 8 | devServer: { 9 | proxy: { 10 | '/api': { 11 | target: 'http://localhost:3000', 12 | }, 13 | '/public/fs': { 14 | target: 'http://localhost:3000' 15 | } 16 | } 17 | }, 18 | productionSourceMap: false, 19 | configureWebpack: { 20 | resolve: { 21 | alias: { 22 | 'src': path.resolve(__dirname, 'src/'), 23 | } 24 | }, 25 | plugins: [ 26 | new MonacoWebpackPlugin({ 27 | languages: ['json'] 28 | }) 29 | ] 30 | } 31 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "data-points", 3 | "version": "1.0.0", 4 | "description": "Data visualization system for big screen", 5 | "main": "index.js", 6 | "dependencies": {}, 7 | "devDependencies": { 8 | "husky": "^0.14.3", 9 | "cz-conventional-changelog": "^3.0.2", 10 | "validate-commit-msg": "^2.14.0" 11 | }, 12 | "scripts": { 13 | "commitmsg": "validate-commit-msg", 14 | "test": "echo \"Error: no test specified\" && exit 1" 15 | }, 16 | "repository": { 17 | "type": "git", 18 | "url": "git+https://github.com/jiangseventeen/data-points.git" 19 | }, 20 | "keywords": [ 21 | "visualization" 22 | ], 23 | "author": "jiangseventeen", 24 | "license": "MIT", 25 | "bugs": { 26 | "url": "https://github.com/jiangseventeen/data-points/issues" 27 | }, 28 | "homepage": "https://github.com/jiangseventeen/data-points#readme", 29 | "config": { 30 | "commitizen": { 31 | "path": "./node_modules/cz-conventional-changelog" 32 | } 33 | } 34 | } 35 | --------------------------------------------------------------------------------